mirror of https://github.com/grafana/grafana
TrendPanel: Add new trend panel (Alpha) (#65740)
Ryan McKinley
3 years ago
committed by
GitHub
parent
313b3dd2af
commit
d974e5f25a
@ -0,0 +1,137 @@ |
|||||||
|
import React, { useMemo } from 'react'; |
||||||
|
|
||||||
|
import { FieldType, PanelProps } from '@grafana/data'; |
||||||
|
import { config, PanelDataErrorView } from '@grafana/runtime'; |
||||||
|
import { KeyboardPlugin, TimeSeries, TooltipDisplayMode, TooltipPlugin, usePanelContext } from '@grafana/ui'; |
||||||
|
import { findFieldIndex } from 'app/features/dimensions'; |
||||||
|
|
||||||
|
import { ContextMenuPlugin } from '../timeseries/plugins/ContextMenuPlugin'; |
||||||
|
import { prepareGraphableFields, regenerateLinksSupplier } from '../timeseries/utils'; |
||||||
|
|
||||||
|
import { PanelOptions } from './panelcfg.gen'; |
||||||
|
|
||||||
|
export const TrendPanel = ({ |
||||||
|
data, |
||||||
|
timeRange, |
||||||
|
timeZone, |
||||||
|
width, |
||||||
|
height, |
||||||
|
options, |
||||||
|
fieldConfig, |
||||||
|
replaceVariables, |
||||||
|
id, |
||||||
|
}: PanelProps<PanelOptions>) => { |
||||||
|
const { sync } = usePanelContext(); |
||||||
|
|
||||||
|
const info = useMemo(() => { |
||||||
|
if (data.series.length > 1) { |
||||||
|
return { |
||||||
|
warning: 'Only one frame is supported, consider adding a join transformation', |
||||||
|
frames: data.series, |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
let frames = data.series; |
||||||
|
let xFieldIdx: number | undefined; |
||||||
|
if (options.xField) { |
||||||
|
xFieldIdx = findFieldIndex(frames[0], options.xField); |
||||||
|
if (xFieldIdx == null) { |
||||||
|
return { |
||||||
|
warning: 'Unable to find field: ' + options.xField, |
||||||
|
frames: data.series, |
||||||
|
}; |
||||||
|
} |
||||||
|
} else { |
||||||
|
// first number field
|
||||||
|
// Perhaps we can/should support any ordinal rather than an error here
|
||||||
|
xFieldIdx = frames[0].fields.findIndex((f) => f.type === FieldType.number); |
||||||
|
if (xFieldIdx === -1) { |
||||||
|
return { |
||||||
|
warning: 'No numeric fields found for X axis', |
||||||
|
frames, |
||||||
|
}; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Make sure values are ascending
|
||||||
|
if (xFieldIdx != null) { |
||||||
|
const field = frames[0].fields[xFieldIdx]; |
||||||
|
if (field.type === FieldType.number) { |
||||||
|
// we may support ordinal soon
|
||||||
|
let last = Number.NEGATIVE_INFINITY; |
||||||
|
const values = field.values.toArray(); |
||||||
|
for (let i = 0; i < values.length; i++) { |
||||||
|
const v = values[i]; |
||||||
|
if (last > v) { |
||||||
|
return { |
||||||
|
warning: `Values must be in ascending order (index: ${i}, ${last} > ${v})`, |
||||||
|
frames, |
||||||
|
}; |
||||||
|
} |
||||||
|
last = v; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return { frames: prepareGraphableFields(frames, config.theme2, undefined, xFieldIdx) }; |
||||||
|
}, [data, options.xField]); |
||||||
|
|
||||||
|
if (info.warning || !info.frames) { |
||||||
|
return ( |
||||||
|
<PanelDataErrorView |
||||||
|
panelId={id} |
||||||
|
fieldConfig={fieldConfig} |
||||||
|
data={data} |
||||||
|
message={info.warning} |
||||||
|
needsNumberField={true} |
||||||
|
/> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<TimeSeries // Name change! |
||||||
|
frames={info.frames} |
||||||
|
structureRev={data.structureRev} |
||||||
|
timeRange={timeRange} |
||||||
|
timeZone={timeZone} |
||||||
|
width={width} |
||||||
|
height={height} |
||||||
|
legend={options.legend} |
||||||
|
options={options} |
||||||
|
> |
||||||
|
{(config, alignedDataFrame) => { |
||||||
|
if ( |
||||||
|
alignedDataFrame.fields.filter((f) => f.config.links !== undefined && f.config.links.length > 0).length > 0 |
||||||
|
) { |
||||||
|
alignedDataFrame = regenerateLinksSupplier(alignedDataFrame, info.frames!, replaceVariables, timeZone); |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<KeyboardPlugin config={config} /> |
||||||
|
{options.tooltip.mode === TooltipDisplayMode.None || ( |
||||||
|
<TooltipPlugin |
||||||
|
frames={info.frames!} |
||||||
|
data={alignedDataFrame} |
||||||
|
config={config} |
||||||
|
mode={options.tooltip.mode} |
||||||
|
sortOrder={options.tooltip.sort} |
||||||
|
sync={sync} |
||||||
|
timeZone={timeZone} |
||||||
|
/> |
||||||
|
)} |
||||||
|
|
||||||
|
<ContextMenuPlugin |
||||||
|
data={alignedDataFrame} |
||||||
|
frames={info.frames!} |
||||||
|
config={config} |
||||||
|
timeZone={timeZone} |
||||||
|
replaceVariables={replaceVariables} |
||||||
|
defaultItems={[]} |
||||||
|
/> |
||||||
|
</> |
||||||
|
); |
||||||
|
}} |
||||||
|
</TimeSeries> |
||||||
|
); |
||||||
|
}; |
||||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1,30 @@ |
|||||||
|
import { PanelPlugin } from '@grafana/data'; |
||||||
|
import { commonOptionsBuilder } from '@grafana/ui'; |
||||||
|
|
||||||
|
import { defaultGraphConfig, getGraphFieldConfig } from '../timeseries/config'; |
||||||
|
|
||||||
|
import { TrendPanel } from './TrendPanel'; |
||||||
|
import { PanelFieldConfig, PanelOptions } from './panelcfg.gen'; |
||||||
|
import { TrendSuggestionsSupplier } from './suggestions'; |
||||||
|
|
||||||
|
export const plugin = new PanelPlugin<PanelOptions, PanelFieldConfig>(TrendPanel) |
||||||
|
.useFieldConfig(getGraphFieldConfig(defaultGraphConfig)) |
||||||
|
.setPanelOptions((builder) => { |
||||||
|
const category = ['X Axis']; |
||||||
|
builder.addFieldNamePicker({ |
||||||
|
path: 'xField', |
||||||
|
name: 'X Field', |
||||||
|
description: 'An increasing numeric value', |
||||||
|
category, |
||||||
|
defaultValue: undefined, |
||||||
|
settings: { |
||||||
|
isClearable: true, |
||||||
|
placeholderText: 'First numeric value', |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
commonOptionsBuilder.addTooltipOptions(builder); |
||||||
|
commonOptionsBuilder.addLegendOptions(builder); |
||||||
|
}) |
||||||
|
.setSuggestionsSupplier(new TrendSuggestionsSupplier()); |
||||||
|
//.setDataSupport({ annotations: true, alertStates: true });
|
||||||
@ -0,0 +1,42 @@ |
|||||||
|
// Copyright 2021 Grafana Labs |
||||||
|
// |
||||||
|
// Licensed under the Apache License, Version 2.0 (the "License"); |
||||||
|
// you may not use this file except in compliance with the License. |
||||||
|
// You may obtain a copy of the License at |
||||||
|
// |
||||||
|
// http://www.apache.org/licenses/LICENSE-2.0 |
||||||
|
// |
||||||
|
// Unless required by applicable law or agreed to in writing, software |
||||||
|
// distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
// See the License for the specific language governing permissions and |
||||||
|
// limitations under the License. |
||||||
|
|
||||||
|
package grafanaplugin |
||||||
|
|
||||||
|
import ( |
||||||
|
"github.com/grafana/grafana/packages/grafana-schema/src/common" |
||||||
|
) |
||||||
|
|
||||||
|
composableKinds: PanelCfg: { |
||||||
|
lineage: { |
||||||
|
seqs: [ |
||||||
|
{ |
||||||
|
schemas: [ |
||||||
|
{ |
||||||
|
// Identical to timeseries... except it does not have timezone settings |
||||||
|
PanelOptions: { |
||||||
|
legend: common.VizLegendOptions |
||||||
|
tooltip: common.VizTooltipOptions |
||||||
|
|
||||||
|
// Name of the x field to use (defaults to first number) |
||||||
|
xField?: string |
||||||
|
} @cuetsy(kind="interface") |
||||||
|
|
||||||
|
PanelFieldConfig: common.GraphFieldConfig & {} @cuetsy(kind="interface") |
||||||
|
}, |
||||||
|
] |
||||||
|
}, |
||||||
|
] |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,27 @@ |
|||||||
|
// Code generated - EDITING IS FUTILE. DO NOT EDIT.
|
||||||
|
//
|
||||||
|
// Generated by:
|
||||||
|
// public/app/plugins/gen.go
|
||||||
|
// Using jennies:
|
||||||
|
// TSTypesJenny
|
||||||
|
// PluginTSTypesJenny
|
||||||
|
//
|
||||||
|
// Run 'make gen-cue' from repository root to regenerate.
|
||||||
|
|
||||||
|
import * as common from '@grafana/schema'; |
||||||
|
|
||||||
|
export const PanelCfgModelVersion = Object.freeze([0, 0]); |
||||||
|
|
||||||
|
/** |
||||||
|
* Identical to timeseries... except it does not have timezone settings |
||||||
|
*/ |
||||||
|
export interface PanelOptions { |
||||||
|
legend: common.VizLegendOptions; |
||||||
|
tooltip: common.VizTooltipOptions; |
||||||
|
/** |
||||||
|
* Name of the x field to use (defaults to first number) |
||||||
|
*/ |
||||||
|
xField?: string; |
||||||
|
} |
||||||
|
|
||||||
|
export interface PanelFieldConfig extends common.GraphFieldConfig {} |
||||||
@ -0,0 +1,19 @@ |
|||||||
|
{ |
||||||
|
"type": "panel", |
||||||
|
"name": "Trend", |
||||||
|
"id": "trend", |
||||||
|
|
||||||
|
"state": "alpha", |
||||||
|
|
||||||
|
"info": { |
||||||
|
"description": "Like timeseries, but when x != time", |
||||||
|
"author": { |
||||||
|
"name": "Grafana Labs", |
||||||
|
"url": "https://grafana.com" |
||||||
|
}, |
||||||
|
"logos": { |
||||||
|
"small": "img/trend.svg", |
||||||
|
"large": "img/trend.svg" |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,40 @@ |
|||||||
|
import { VisualizationSuggestionsBuilder } from '@grafana/data'; |
||||||
|
import { GraphDrawStyle, GraphFieldConfig } from '@grafana/schema'; |
||||||
|
import { SuggestionName } from 'app/types/suggestions'; |
||||||
|
|
||||||
|
import { PanelOptions } from './panelcfg.gen'; |
||||||
|
|
||||||
|
export class TrendSuggestionsSupplier { |
||||||
|
getSuggestionsForData(builder: VisualizationSuggestionsBuilder) { |
||||||
|
const { dataSummary } = builder; |
||||||
|
|
||||||
|
if (dataSummary.numberFieldCount < 2 || dataSummary.rowCountTotal < 2 || dataSummary.rowCountTotal < 2) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
// Super basic
|
||||||
|
const list = builder.getListAppender<PanelOptions, GraphFieldConfig>({ |
||||||
|
name: SuggestionName.LineChart, |
||||||
|
pluginId: 'trend', |
||||||
|
options: { |
||||||
|
legend: {} as any, |
||||||
|
}, |
||||||
|
fieldConfig: { |
||||||
|
defaults: { |
||||||
|
custom: {}, |
||||||
|
}, |
||||||
|
overrides: [], |
||||||
|
}, |
||||||
|
cardOptions: { |
||||||
|
previewModifier: (s) => { |
||||||
|
s.options!.legend.showLegend = false; |
||||||
|
|
||||||
|
if (s.fieldConfig?.defaults.custom?.drawStyle !== GraphDrawStyle.Bars) { |
||||||
|
s.fieldConfig!.defaults.custom!.lineWidth = Math.max(s.fieldConfig!.defaults.custom!.lineWidth ?? 1, 2); |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
}); |
||||||
|
return list; |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue