86 lines
2.6 KiB
TypeScript
86 lines
2.6 KiB
TypeScript
import { useMemo } from 'react';
|
|
|
|
import { PanelProps, DataFrameType, DashboardCursorSync } from '@grafana/data';
|
|
import { PanelDataErrorView } from '@grafana/runtime';
|
|
import { DrawStyle, usePanelContext } from '@grafana/ui';
|
|
import { TimeSeries } from 'app/core/components/TimeSeries/TimeSeries';
|
|
import { config } from 'app/core/config';
|
|
|
|
import { Options } from './panelcfg.gen';
|
|
import { getPrepareTimeseriesSuggestion } from './suggestions';
|
|
import { getTimezones, prepareGraphableFields, preparePlotFramePoints } from './utils';
|
|
|
|
interface TimeSeriesPanelProps extends PanelProps<Options> {}
|
|
|
|
export const TimeSeriesPanel = ({
|
|
data,
|
|
timeRange,
|
|
timeZone,
|
|
width,
|
|
height,
|
|
options,
|
|
fieldConfig,
|
|
replaceVariables,
|
|
id,
|
|
}: TimeSeriesPanelProps) => {
|
|
const { sync, dataLinkPostProcessor } = usePanelContext();
|
|
|
|
const preparePlotFrame =
|
|
fieldConfig.defaults.custom.drawStyle === DrawStyle.Points ? preparePlotFramePoints : undefined;
|
|
if (fieldConfig.defaults.custom.drawStyle === DrawStyle.Points) {
|
|
console.log('points');
|
|
}
|
|
|
|
// Vertical orientation is not available for users through config.
|
|
// It is simplified version of horizontal time series panel and it does not support all plugins.
|
|
const frames = useMemo(() => prepareGraphableFields(data.series, config.theme2, timeRange), [data.series, timeRange]);
|
|
const timezones = useMemo(() => getTimezones(options.timezone, timeZone), [options.timezone, timeZone]);
|
|
const suggestions = useMemo(() => {
|
|
if (frames?.length && frames.every((df) => df.meta?.type === DataFrameType.TimeSeriesLong)) {
|
|
const s = getPrepareTimeseriesSuggestion(id);
|
|
return {
|
|
message: 'Long data must be converted to wide',
|
|
suggestions: s ? [s] : undefined,
|
|
};
|
|
}
|
|
return undefined;
|
|
}, [frames, id]);
|
|
|
|
const cursorSync = sync?.() ?? DashboardCursorSync.Off;
|
|
|
|
if (!frames || suggestions) {
|
|
return (
|
|
<PanelDataErrorView
|
|
panelId={id}
|
|
message={suggestions?.message}
|
|
fieldConfig={fieldConfig}
|
|
data={data}
|
|
needsTimeField={true}
|
|
needsNumberField={true}
|
|
suggestions={suggestions?.suggestions}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<TimeSeries
|
|
frames={frames}
|
|
structureRev={data.structureRev}
|
|
timeRange={timeRange}
|
|
timeZone={timezones}
|
|
width={width}
|
|
height={height}
|
|
legend={options.legend}
|
|
options={options}
|
|
replaceVariables={replaceVariables}
|
|
dataLinkPostProcessor={dataLinkPostProcessor}
|
|
cursorSync={cursorSync}
|
|
preparePlotFrame={preparePlotFrame}
|
|
>
|
|
{(uplotConfig, alignedFrame) => {
|
|
return <></>;
|
|
}}
|
|
</TimeSeries>
|
|
);
|
|
};
|