> ## Documentation Index
> Fetch the complete documentation index at: https://www.propeldata.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Time Grain Picker

> Choose a time granularity for aggregation.

<div />

Use with the [Filter Provider](/docs/embeddable-ui/components/filter-provider) to apply the selected time granularity to components.

<Tabs>
  <Tab title="Preview">
    <iframe
      width="100%"
      height="325"
      src="https://ui-kit-docs-examples.vercel.app/time-grain-picker"
      allow="accelerometer; clipboard-write; gyroscope;"
      style={{
    overflow: 'hidden',
    border: '1px solid #ECECED',
  }}
      scrolling="no"
      marginWidth="0"
      marginHeight="0"
    />
  </Tab>

  <Tab title="Code">
    ```jsx theme={"system"}
    import {
      TimeGrainPicker,
      TimeSeriesGranularity,
      FilterProvider,
      Flex,
    } from "@propeldata/ui-kit";

    export default async function TimeGrainPickerExample() {
      return (
          <Flex p="7" justify="center" width="100%">
            <FilterProvider>
              <TimeGrainPicker
              defaultValue={TimeSeriesGranularity.Day}
              options={[
                TimeSeriesGranularity.FifteenMinutes,
                TimeSeriesGranularity.Hour,
                TimeSeriesGranularity.Day,
                TimeSeriesGranularity.Month,
                TimeSeriesGranularity.Year,
              ]}
              defaultOpen
            />
          </FilterProvider>
        </Flex>
      );
    }
    ```
  </Tab>
</Tabs>

<div className="flex justify-center gap-8 mt-2">
  <a href="https://github.com/propeldata/ui-kit/blob/main/packages/ui-kit/src/components/TimeGrainPicker/TimeGrainPicker.tsx" target="_blank" className="flex items-center gap-2 text-xs">
    <Icon icon="github" size={18} />

    GitHub

    <Icon icon="arrow-up-right-from-square" size={12} />
  </a>

  <a href="https://storybook.propeldata.com/?path=/story/components-timegrainpicker--single-story" target="_blank" className="flex items-center gap-2 text-xs">
    <Icon icon="book" size={18} />

    Storybook

    <Icon icon="arrow-up-right-from-square" size={12} />
  </a>

  <a href="https://github.com/propeldata/ui-kit-docs-examples/blob/main/src/app/time-grain-picker/page.tsx" target="_blank" className="flex items-center gap-2 text-xs">
    <Icon icon="github" size={18} />

    Example

    <Icon icon="arrow-up-right-from-square" size={12} />
  </a>
</div>

## Props API

<ParamField
  path="selectProps"
  type={`Omit<SelectProps<{
label: string;
value: TimeSeriesGranularity;
}>, "options" | "disableClearable">`}
>
  Props that the select input will receive
</ParamField>

<ParamField path="options" type={`TimeSeriesGranularity[]`}>
  The possible values for the selected column, will be ignored if `query` is passed

  <Expandable title="TimeSeriesGranularity">
    The available time series granularities. Granularities define the unit of time to aggregate the Metric data for a time series query.

    For example, if the granularity is set to `DAY`, then the the time series query will return a label and a value for each day.

    If there are no records for a given time series granularity, Propel will return the label and a value of "0" so that the time series can be properly visualized.

    <ParamField path=" ">
      * `MINUTE`: Aggregates values by minute intervals.
      * `FIVE_MINUTES`: Aggregates values by 5-minute intervals.
      * `TEN_MINUTES`: Aggregates values by 10-minute intervals.
      * `FIFTEEN_MINUTES`: Aggregates values by 15-minute intervals.
      * `HOUR`: Aggregates values by hourly intervals.
      * `DAY`: Aggregates values by daily intervals.
      * `WEEK`: Aggregates values by weekly intervals.
      * `MONTH`: Aggregates values by monthly intervals.
      * `YEAR`: Aggregates values by yearly intervals.
    </ParamField>
  </Expandable>
</ParamField>

<ParamField path="error" type={`boolean`}>
  Whether there was an error or not, setting to `true` will enable freeSolo mode
</ParamField>

<ParamField path="defaultOpen" type={`boolean`}>
  If true, the select is open by default.
</ParamField>

<Expandable title="Theme Provider Props">
  <ThemeSettingProps />
</Expandable>