diff --git a/packages/grafana-data/src/transformations/transformers/ids.ts b/packages/grafana-data/src/transformations/transformers/ids.ts index f62da205690..eef454cbfb2 100644 --- a/packages/grafana-data/src/transformations/transformers/ids.ts +++ b/packages/grafana-data/src/transformations/transformers/ids.ts @@ -23,4 +23,5 @@ export enum DataTransformerID { groupBy = 'groupBy', sortBy = 'sortBy', histogram = 'histogram', + prepareTimeSeries = 'prepareTimeSeries', } diff --git a/public/app/core/components/TransformersUI/prepareTimeSeries/PrepareTimeSeriesEditor.tsx b/public/app/core/components/TransformersUI/prepareTimeSeries/PrepareTimeSeriesEditor.tsx new file mode 100644 index 00000000000..91b60917f17 --- /dev/null +++ b/public/app/core/components/TransformersUI/prepareTimeSeries/PrepareTimeSeriesEditor.tsx @@ -0,0 +1,87 @@ +import React, { useCallback } from 'react'; +import { GrafanaTheme2, SelectableValue, TransformerRegistryItem, TransformerUIProps } from '@grafana/data'; +import { prepareTimeSeriesTransformer, PrepareTimeSeriesOptions, timeSeriesFormat } from './prepareTimeSeries'; +import { InlineField, InlineFieldRow, Select, useStyles2 } from '@grafana/ui'; +import { css } from '@emotion/css'; + +const wideInfo = { + label: 'Wide time series', + value: timeSeriesFormat.TimeSeriesWide, + description: 'Creates a single frame joined by time', + info: ( + + ), +}; + +const manyInfo = { + label: 'Multi-frame time series', + value: timeSeriesFormat.TimeSeriesMany, + description: 'Creates a new frame for each time/number pair', + info: ( + + ), +}; + +const formats: Array> = [wideInfo, manyInfo]; + +export function PrepareTimeSeriesEditor(props: TransformerUIProps): React.ReactElement { + const { options, onChange } = props; + const styles = useStyles2(getStyles); + + const onSelectFormat = useCallback( + (value: SelectableValue) => { + onChange({ + ...options, + format: value.value!, + }); + }, + [onChange, options] + ); + + return ( + <> + + +