Granularity picker

src/components/vanilla/controls/DatePicker/components/DateRangePicker.tsx

@@ -10,7 +10,7 @@ import Container from '../../../Container';
 import { CalendarIcon, ChevronLeft, ChevronRight } from '../../../icons';
 import Dropdown from '../../Dropdown';
 
-const ranges = [
+export const ranges = [
   'Today',
   'Yesterday',
   'This week',
@@ -22,6 +22,7 @@ const ranges = [
   'This quarter',
   'Last quarter',
   'Last 6 months',
+  'Last 12 months',
   'This year',
   'Last year',
 ];

src/components/vanilla/controls/GranularityPicker/GranularityPicker.emb.ts

@@ -0,0 +1,90 @@
+import { Value, loadData, Granularity } from '@embeddable.com/core';
+import { EmbeddedComponentMeta, Inputs, defineComponent } from '@embeddable.com/react';
+
+import Component, { Props } from './index';
+
+export const meta = {
+  name: 'GranularityPicker',
+  label: 'Granularity Picker',
+  defaultWidth: 200,
+  defaultHeight: 80,
+  classNames: ['on-top'],
+  category: 'Controls: inputs & dropdowns',
+  inputs: [
+    {
+        name: 'defaultValue',
+        type: 'granularity',
+        label: 'Default granularity',
+        category: 'Chart settings'
+    },
+    ...[
+        { value: 'second', defaultValue: false },
+        { value: 'minute', defaultValue: false },
+        { value: 'hour', defaultValue: false },
+        { value: 'day', defaultValue: true },
+        { value: 'week', defaultValue: true },
+        { value: 'month', defaultValue: true },
+        { value: 'quarter', defaultValue: true },
+        { value: 'year', defaultValue: true }
+    ].map((option: {value: string, defaultValue: boolean}) => ({
+        name: option.value,
+        type: 'boolean' as const,
+        label: `Display ${option.value}`,
+        defaultValue: option.defaultValue,
+        category: 'Granularity options'
+      }))
+    ],
+  events: [
+    {
+      name: 'onChange',
+      label: 'Change Granularity',
+      properties: [
+        {
+            name: 'value',
+            type: 'granularity'
+        },
+        {
+            name: 'dateRange',
+            type: 'timeRange'
+        }
+      ]
+    }
+  ],
+  variables: [
+    {
+        name: 'granularity',
+        type: 'granularity',
+        defaultValue: 'day',
+        inputs: ['defaultValue'],
+        events: [{ name: 'onChange', property: 'value' }]
+    },
+    {
+        name: 'date range',
+        type: 'timeRange',
+        defaultValue: { relativeTimeString: 'Last 30 days' },
+        events: [{ name: 'onChange', property: 'dateRange' }],
+      },
+  ]
+} as const satisfies EmbeddedComponentMeta;
+
+export default defineComponent(Component, meta, {
+    props: (inputs: Inputs<typeof meta>) => {
+      return {
+        ...inputs
+      };
+    },
+    events: {
+        onChange: ({value, dateRange}) => {
+            if (!dateRange.relativeTimeString) {
+                return {
+                    value: value,
+                    dateRange: Value.noFilter()
+                };
+            }
+            return {    
+                value: value,
+                dateRange: dateRange
+            };
+          },
+    }
+  });

src/components/vanilla/controls/GranularityPicker/index.tsx

@@ -0,0 +1,104 @@
+import { useEmbeddableState } from '@embeddable.com/react';
+import { Dimension, Granularity } from '@embeddable.com/core';
+import React, {useState} from 'react';
+import Container from '../../Container';
+import Dropdown from '../Dropdown';
+
+export type Props = {
+    onChange: (object: object) => void
+    defaultValue: Granularity;
+    second?: boolean;
+    minute?: boolean;
+    hour?: boolean;
+    day?: boolean;
+    week?: boolean;
+    month?: boolean;
+    quarter?: boolean;
+    year?: boolean;
+};
+
+type TimeRange = {
+    to?: Date;
+    from?: Date;
+    relativeTimeString?: string;
+};
+
+type GranularityResponse = {
+    isLoading: boolean;
+    data: { value: string }[];
+}
+
+export default (props: Props) => {
+
+    const [granularity, setGranularity] = useState(props.defaultValue)
+
+    const options: Granularity[] = [
+        'second',
+        'minute',
+        'hour',
+        'day',
+        'week',
+        'month',
+        'quarter',
+        'year'
+    ];
+
+    const timeFilters: { [key: string]: string | undefined } = {
+        second: 'last 1 minute',
+        minute: 'last 1 hour',
+        hour: 'last 24 hours',
+        day: 'last 30 days',
+        week: 'last 12 months',
+        month: 'last 24 months',
+        quarter: 'last 24 months',
+        year: undefined //clears filter
+    }
+
+    const handleChange = (granularity:string) => {
+        const eventObject = {
+            value: granularity,
+            dateRange: {
+                to: undefined,
+                from: undefined,
+                relativeTimeString: timeFilters[granularity]
+            }
+        }
+        props.onChange(eventObject); 
+        setGranularity(granularity as Granularity);       
+    }
+
+    const granularityOptions = (): GranularityResponse => {
+        const data: { value: Granularity }[] = [];
+        //display options selected by user
+        options.filter(option => props[option])?.forEach((option) => data.push({value: option}) );
+        return {
+            isLoading: false,
+            data: data
+        }
+    }
+
+    const valueProp: Dimension = {
+        __type__: 'dimension',
+        name: 'value',
+        nativeType: 'string',
+        title: 'Value',
+    };
+
+    return (
+        <Container>
+            <div className="flex items-center h-10 ">
+                <div className="grow basis-0 h-full">
+                    <Dropdown
+                        unclearable
+                        minDropdownWidth={320}
+                        defaultValue={props.defaultValue}
+                        options={granularityOptions()}
+                        placeholder="Granularity"
+                        property={valueProp}
+                        onChange={(v) => handleChange(v)}
+                    />
+                </div>
+            </div>
+        </Container>
+    );
+};