Time Grain Picker

Choose a time granularity for aggregation.

Use with the Filter Provider to apply the selected time granularity to components.

Preview

Code

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>
  );
}

GitHub

Storybook

Example

Props API

selectProps

Props that the select input will receive

options · TimeSeriesGranularity[]

The possible values for the selected column, will be ignored if query is passed

Show 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.

• 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.

error · boolean

Whether there was an error or not, setting to true will enable freeSolo mode

defaultOpen · boolean

If true, the select is open by default.

Show Theme Provider Props