diff --git a/devenv/dev-dashboards/panel-timeseries/timeseries-by-value-color-schemes.json b/devenv/dev-dashboards/panel-timeseries/timeseries-by-value-color-schemes.json index d785a1fcaff..11671725397 100644 --- a/devenv/dev-dashboards/panel-timeseries/timeseries-by-value-color-schemes.json +++ b/devenv/dev-dashboards/panel-timeseries/timeseries-by-value-color-schemes.json @@ -516,7 +516,7 @@ "refId": "A" } ], - "title": "Color line by discrete tresholds", + "title": "Color line by discrete thresholds", "type": "timeseries" }, { diff --git a/packages/grafana-data/src/field/fieldColor.ts b/packages/grafana-data/src/field/fieldColor.ts index 289177150de..29bbc1f8011 100644 --- a/packages/grafana-data/src/field/fieldColor.ts +++ b/packages/grafana-data/src/field/fieldColor.ts @@ -10,7 +10,7 @@ import { RegistryItem } from '../utils'; import { Registry } from '../utils/Registry'; import { getScaleCalculator, ColorScaleValue } from './scale'; -import { fallBackTreshold } from './thresholds'; +import { fallBackThreshold } from './thresholds'; /** @beta */ export type FieldValueColorCalculator = (value: number, percent: number, Threshold?: Threshold) => string; @@ -46,7 +46,7 @@ export const fieldColorModeRegistry = new Registry(() => { description: 'Derive colors from thresholds', getCalculator: (_field, theme) => { return (_value, _percent, threshold) => { - const thresholdSafe = threshold ?? fallBackTreshold; + const thresholdSafe = threshold ?? fallBackThreshold; return theme.visualization.getColorByName(thresholdSafe.color); }; }, @@ -251,7 +251,7 @@ export function getFieldSeriesColor(field: Field, theme: GrafanaTheme2): ColorSc if (!mode.isByValue) { return { color: mode.getCalculator(field, theme)(0, 0), - threshold: fallBackTreshold, + threshold: fallBackThreshold, percent: 1, }; } diff --git a/packages/grafana-data/src/field/thresholds.ts b/packages/grafana-data/src/field/thresholds.ts index 8328483aa20..a756af17114 100644 --- a/packages/grafana-data/src/field/thresholds.ts +++ b/packages/grafana-data/src/field/thresholds.ts @@ -1,10 +1,10 @@ import { Threshold, FALLBACK_COLOR, Field, ThresholdsMode } from '../types'; -export const fallBackTreshold: Threshold = { value: 0, color: FALLBACK_COLOR }; +export const fallBackThreshold: Threshold = { value: 0, color: FALLBACK_COLOR }; export function getActiveThreshold(value: number, thresholds: Threshold[] | undefined): Threshold { if (!thresholds || thresholds.length === 0) { - return fallBackTreshold; + return fallBackThreshold; } let active = thresholds[0]; diff --git a/packages/grafana-schema/src/common/common.gen.ts b/packages/grafana-schema/src/common/common.gen.ts index 69f962bfeb5..e95004ac43a 100644 --- a/packages/grafana-schema/src/common/common.gen.ts +++ b/packages/grafana-schema/src/common/common.gen.ts @@ -409,7 +409,7 @@ export interface HideableFieldConfig { /** * TODO docs */ -export enum GraphTresholdsStyleMode { +export enum GraphThresholdsStyleMode { Area = 'area', Dashed = 'dashed', DashedAndArea = 'dashed+area', @@ -423,7 +423,7 @@ export enum GraphTresholdsStyleMode { * TODO docs */ export interface GraphThresholdsStyleConfig { - mode: GraphTresholdsStyleMode; + mode: GraphThresholdsStyleMode; } /** diff --git a/packages/grafana-schema/src/common/mudball.cue b/packages/grafana-schema/src/common/mudball.cue index 0678d157a15..d08fbeff153 100644 --- a/packages/grafana-schema/src/common/mudball.cue +++ b/packages/grafana-schema/src/common/mudball.cue @@ -122,11 +122,11 @@ HideableFieldConfig: { } @cuetsy(kind="interface") // TODO docs -GraphTresholdsStyleMode: "off" | "line" | "dashed" | "area" | "line+area" | "dashed+area" | "series" @cuetsy(kind="enum",memberNames="Off|Line|Dashed|Area|LineAndArea|DashedAndArea|Series") +GraphThresholdsStyleMode: "off" | "line" | "dashed" | "area" | "line+area" | "dashed+area" | "series" @cuetsy(kind="enum",memberNames="Off|Line|Dashed|Area|LineAndArea|DashedAndArea|Series") // TODO docs GraphThresholdsStyleConfig: { - mode: GraphTresholdsStyleMode + mode: GraphThresholdsStyleMode } @cuetsy(kind="interface") // TODO docs diff --git a/packages/grafana-ui/src/components/uPlot/config.ts b/packages/grafana-ui/src/components/uPlot/config.ts index 89478ff6b27..ade88cc258b 100644 --- a/packages/grafana-ui/src/components/uPlot/config.ts +++ b/packages/grafana-ui/src/components/uPlot/config.ts @@ -4,7 +4,7 @@ import { BarAlignment, GraphDrawStyle, GraphGradientMode, - GraphTresholdsStyleMode, + GraphThresholdsStyleMode, LineInterpolation, VisibilityMode, StackingMode, @@ -21,7 +21,7 @@ export const graphFieldOptions: { axisPlacement: Array>; fillGradient: Array>; stacking: Array>; - thresholdsDisplayModes: Array>; + thresholdsDisplayModes: Array>; } = { drawStyle: [ { label: 'Lines', value: GraphDrawStyle.Line }, @@ -73,11 +73,11 @@ export const graphFieldOptions: { ], thresholdsDisplayModes: [ - { label: 'Off', value: GraphTresholdsStyleMode.Off }, - { label: 'As lines', value: GraphTresholdsStyleMode.Line }, - { label: 'As lines (dashed)', value: GraphTresholdsStyleMode.Dashed }, - { label: 'As filled regions', value: GraphTresholdsStyleMode.Area }, - { label: 'As filled regions and lines', value: GraphTresholdsStyleMode.LineAndArea }, - { label: 'As filled regions and lines (dashed)', value: GraphTresholdsStyleMode.DashedAndArea }, + { label: 'Off', value: GraphThresholdsStyleMode.Off }, + { label: 'As lines', value: GraphThresholdsStyleMode.Line }, + { label: 'As lines (dashed)', value: GraphThresholdsStyleMode.Dashed }, + { label: 'As filled regions', value: GraphThresholdsStyleMode.Area }, + { label: 'As filled regions and lines', value: GraphThresholdsStyleMode.LineAndArea }, + { label: 'As filled regions and lines (dashed)', value: GraphThresholdsStyleMode.DashedAndArea }, ], }; diff --git a/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts b/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts index 6efff14ffb6..2c381e896f4 100644 --- a/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts +++ b/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts @@ -8,7 +8,7 @@ import { VisibilityMode, ScaleOrientation, ScaleDirection, - GraphTresholdsStyleMode, + GraphThresholdsStyleMode, ScaleDistribution, } from '@grafana/schema'; @@ -811,7 +811,7 @@ describe('UPlotConfigBuilder', () => { steps: [], }, config: { - mode: GraphTresholdsStyleMode.Area, + mode: GraphThresholdsStyleMode.Area, }, theme: darkTheme, }); @@ -822,7 +822,7 @@ describe('UPlotConfigBuilder', () => { steps: [], }, config: { - mode: GraphTresholdsStyleMode.Area, + mode: GraphThresholdsStyleMode.Area, }, theme: darkTheme, }); diff --git a/packages/grafana-ui/src/components/uPlot/config/UPlotThresholds.ts b/packages/grafana-ui/src/components/uPlot/config/UPlotThresholds.ts index 9c71a3e4a99..56e17f47c3f 100644 --- a/packages/grafana-ui/src/components/uPlot/config/UPlotThresholds.ts +++ b/packages/grafana-ui/src/components/uPlot/config/UPlotThresholds.ts @@ -2,7 +2,7 @@ import tinycolor from 'tinycolor2'; import uPlot from 'uplot'; import { GrafanaTheme2, Threshold, ThresholdsConfig, ThresholdsMode } from '@grafana/data'; -import { GraphThresholdsStyleConfig, GraphTresholdsStyleMode } from '@grafana/schema'; +import { GraphThresholdsStyleConfig, GraphThresholdsStyleMode } from '@grafana/schema'; import { getGradientRange, scaleGradient } from './gradientFills'; @@ -19,8 +19,8 @@ export interface UPlotThresholdOptions { export function getThresholdsDrawHook(options: UPlotThresholdOptions) { const dashSegments = - options.config.mode === GraphTresholdsStyleMode.Dashed || - options.config.mode === GraphTresholdsStyleMode.DashedAndArea + options.config.mode === GraphThresholdsStyleMode.Dashed || + options.config.mode === GraphThresholdsStyleMode.DashedAndArea ? [10, 10] : null; @@ -123,15 +123,15 @@ export function getThresholdsDrawHook(options: UPlotThresholdOptions) { ctx.save(); switch (config.mode) { - case GraphTresholdsStyleMode.Line: - case GraphTresholdsStyleMode.Dashed: + case GraphThresholdsStyleMode.Line: + case GraphThresholdsStyleMode.Dashed: addLines(u, scaleKey, steps, theme); break; - case GraphTresholdsStyleMode.Area: + case GraphThresholdsStyleMode.Area: addAreas(u, scaleKey, steps, theme); break; - case GraphTresholdsStyleMode.LineAndArea: - case GraphTresholdsStyleMode.DashedAndArea: + case GraphThresholdsStyleMode.LineAndArea: + case GraphThresholdsStyleMode.DashedAndArea: addAreas(u, scaleKey, steps, theme); addLines(u, scaleKey, steps, theme); } diff --git a/packages/grafana-ui/src/graveyard/TimeSeries/utils.ts b/packages/grafana-ui/src/graveyard/TimeSeries/utils.ts index e29720df0be..12a6e3908c6 100644 --- a/packages/grafana-ui/src/graveyard/TimeSeries/utils.ts +++ b/packages/grafana-ui/src/graveyard/TimeSeries/utils.ts @@ -21,7 +21,7 @@ import { AxisPlacement, GraphDrawStyle, GraphFieldConfig, - GraphTresholdsStyleMode, + GraphThresholdsStyleMode, VisibilityMode, ScaleDirection, ScaleOrientation, @@ -519,8 +519,8 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<{ // Render thresholds in graph if (customConfig.thresholdsStyle && config.thresholds) { - const thresholdDisplay = customConfig.thresholdsStyle.mode ?? GraphTresholdsStyleMode.Off; - if (thresholdDisplay !== GraphTresholdsStyleMode.Off) { + const thresholdDisplay = customConfig.thresholdsStyle.mode ?? GraphThresholdsStyleMode.Off; + if (thresholdDisplay !== GraphThresholdsStyleMode.Off) { builder.addThresholds({ config: customConfig.thresholdsStyle, thresholds: config.thresholds, diff --git a/packages/grafana-ui/src/schema.ts b/packages/grafana-ui/src/schema.ts index b52babdb542..294886e09c3 100644 --- a/packages/grafana-ui/src/schema.ts +++ b/packages/grafana-ui/src/schema.ts @@ -27,7 +27,7 @@ export { StackingMode, type StackingConfig, type StackableFieldConfig, - GraphTresholdsStyleMode, + GraphThresholdsStyleMode, type GraphThresholdsStyleConfig, type GraphFieldConfig, type LegendPlacement, diff --git a/public/app/core/components/TimeSeries/utils.ts b/public/app/core/components/TimeSeries/utils.ts index ff0f1f42170..106f2c72b10 100644 --- a/public/app/core/components/TimeSeries/utils.ts +++ b/public/app/core/components/TimeSeries/utils.ts @@ -22,7 +22,7 @@ import { AxisPlacement, GraphDrawStyle, GraphFieldConfig, - GraphTresholdsStyleMode, + GraphThresholdsStyleMode, VisibilityMode, ScaleDirection, ScaleOrientation, @@ -520,8 +520,8 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<{ // Render thresholds in graph if (customConfig.thresholdsStyle && config.thresholds) { - const thresholdDisplay = customConfig.thresholdsStyle.mode ?? GraphTresholdsStyleMode.Off; - if (thresholdDisplay !== GraphTresholdsStyleMode.Off) { + const thresholdDisplay = customConfig.thresholdsStyle.mode ?? GraphThresholdsStyleMode.Off; + if (thresholdDisplay !== GraphThresholdsStyleMode.Off) { builder.addThresholds({ config: customConfig.thresholdsStyle, thresholds: config.thresholds, diff --git a/public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx b/public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx index c6125673d38..cca7a239199 100644 --- a/public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx @@ -13,7 +13,7 @@ import { ThresholdsConfig, } from '@grafana/data'; import { DataQuery } from '@grafana/schema'; -import { GraphTresholdsStyleMode, Icon, InlineField, Input, Tooltip, useStyles2, Stack } from '@grafana/ui'; +import { GraphThresholdsStyleMode, Icon, InlineField, Input, Tooltip, useStyles2, Stack } from '@grafana/ui'; import { QueryEditorRow } from 'app/features/query/components/QueryEditorRow'; import { AlertQuery } from 'app/types/unified-alerting-dto'; @@ -45,7 +45,7 @@ interface Props { onRunQueries: () => void; index: number; thresholds: ThresholdsConfig; - thresholdsType?: GraphTresholdsStyleMode; + thresholdsType?: GraphThresholdsStyleMode; onChangeThreshold?: (thresholds: ThresholdsConfig, index: number) => void; condition: string | null; onSetCondition: (refId: string) => void; diff --git a/public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx b/public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx index 347738dce36..bb679e030f9 100644 --- a/public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx @@ -3,7 +3,7 @@ import React from 'react'; import AutoSizer from 'react-virtualized-auto-sizer'; import { GrafanaTheme2, isTimeSeriesFrames, PanelData, ThresholdsConfig } from '@grafana/data'; -import { GraphTresholdsStyleMode } from '@grafana/schema'; +import { GraphThresholdsStyleMode } from '@grafana/schema'; import { useStyles2 } from '@grafana/ui'; import appEvents from 'app/core/app_events'; import { GraphContainer } from 'app/features/explore/Graph/GraphContainer'; @@ -15,7 +15,7 @@ import { getStatusMessage } from './util'; interface Props { data: PanelData; thresholds?: ThresholdsConfig; - thresholdsType?: GraphTresholdsStyleMode; + thresholdsType?: GraphThresholdsStyleMode; onThresholdsChange?: (thresholds: ThresholdsConfig) => void; } diff --git a/public/app/features/alerting/unified/components/rule-editor/util.ts b/public/app/features/alerting/unified/components/rule-editor/util.ts index 118c0057d47..258ffc74964 100644 --- a/public/app/features/alerting/unified/components/rule-editor/util.ts +++ b/public/app/features/alerting/unified/components/rule-editor/util.ts @@ -9,7 +9,7 @@ import { ThresholdsConfig, ThresholdsMode, } from '@grafana/data'; -import { GraphTresholdsStyleMode } from '@grafana/schema'; +import { GraphThresholdsStyleMode } from '@grafana/schema'; import { config } from 'app/core/config'; import { EvalFunction } from 'app/features/alerting/state/alertDef'; import { isExpressionQuery } from 'app/features/expressions/guards'; @@ -136,7 +136,7 @@ export function warningFromSeries(series: DataFrame[]): Error | undefined { export type ThresholdDefinition = { config: ThresholdsConfig; - mode: GraphTresholdsStyleMode; + mode: GraphThresholdsStyleMode; }; export type ThresholdDefinitions = Record; @@ -210,7 +210,7 @@ export function getThresholdsForQueries(queries: AlertQuery[], condition: string mode: ThresholdsMode.Absolute, steps: [], }, - mode: GraphTresholdsStyleMode.Line, + mode: GraphThresholdsStyleMode.Line, }; } @@ -218,7 +218,7 @@ export function getThresholdsForQueries(queries: AlertQuery[], condition: string appendSingleThreshold(originRefID, threshold[0]); } else if (originRefID && hasValidOrigin && isRangeThreshold) { appendRangeThreshold(originRefID, threshold, condition.evaluator.type); - thresholds[originRefID].mode = GraphTresholdsStyleMode.LineAndArea; + thresholds[originRefID].mode = GraphThresholdsStyleMode.LineAndArea; } }); } catch (err) { diff --git a/public/app/plugins/panel/barchart/module.tsx b/public/app/plugins/panel/barchart/module.tsx index fbbdefb0b28..eb61ddc0c5d 100644 --- a/public/app/plugins/panel/barchart/module.tsx +++ b/public/app/plugins/panel/barchart/module.tsx @@ -9,7 +9,7 @@ import { VizOrientation, } from '@grafana/data'; import { config } from '@grafana/runtime'; -import { GraphTransform, GraphTresholdsStyleMode, StackingMode, VisibilityMode } from '@grafana/schema'; +import { GraphTransform, GraphThresholdsStyleMode, StackingMode, VisibilityMode } from '@grafana/schema'; import { graphFieldOptions, commonOptionsBuilder } from '@grafana/ui'; import { ThresholdsStyleEditor } from '../timeseries/ThresholdsStyleEditor'; @@ -93,7 +93,7 @@ export const plugin = new PanelPlugin(BarChartPanel) path: 'thresholdsStyle', name: 'Show thresholds', category: ['Thresholds'], - defaultValue: { mode: GraphTresholdsStyleMode.Off }, + defaultValue: { mode: GraphThresholdsStyleMode.Off }, settings: { options: graphFieldOptions.thresholdsDisplayModes, }, diff --git a/public/app/plugins/panel/barchart/utils.ts b/public/app/plugins/panel/barchart/utils.ts index 102ee0b6905..62f342ce087 100644 --- a/public/app/plugins/panel/barchart/utils.ts +++ b/public/app/plugins/panel/barchart/utils.ts @@ -21,7 +21,7 @@ import { AxisColorMode, AxisPlacement, GraphTransform, - GraphTresholdsStyleMode, + GraphThresholdsStyleMode, ScaleDirection, ScaleDistribution, ScaleOrientation, @@ -209,8 +209,8 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn = ({ // Render thresholds in graph if (customConfig.thresholdsStyle && field.config.thresholds) { - const thresholdDisplay = customConfig.thresholdsStyle.mode ?? GraphTresholdsStyleMode.Off; - if (thresholdDisplay !== GraphTresholdsStyleMode.Off) { + const thresholdDisplay = customConfig.thresholdsStyle.mode ?? GraphThresholdsStyleMode.Off; + if (thresholdDisplay !== GraphThresholdsStyleMode.Off) { builder.addThresholds({ config: customConfig.thresholdsStyle, thresholds: field.config.thresholds, diff --git a/public/app/plugins/panel/timeseries/ThresholdsStyleEditor.tsx b/public/app/plugins/panel/timeseries/ThresholdsStyleEditor.tsx index 431ca7094fa..bd67c199106 100644 --- a/public/app/plugins/panel/timeseries/ThresholdsStyleEditor.tsx +++ b/public/app/plugins/panel/timeseries/ThresholdsStyleEditor.tsx @@ -1,17 +1,17 @@ import React, { useCallback } from 'react'; import { StandardEditorProps, SelectableValue } from '@grafana/data'; -import { GraphTresholdsStyleMode } from '@grafana/schema'; +import { GraphThresholdsStyleMode } from '@grafana/schema'; import { Select } from '@grafana/ui'; type Props = StandardEditorProps< - SelectableValue<{ mode: GraphTresholdsStyleMode }>, - { options: Array> } + SelectableValue<{ mode: GraphThresholdsStyleMode }>, + { options: Array> } >; export const ThresholdsStyleEditor = ({ item, value, onChange, id }: Props) => { const onChangeCb = useCallback( - (v: SelectableValue) => { + (v: SelectableValue) => { onChange({ mode: v.value, }); diff --git a/public/app/plugins/panel/timeseries/config.ts b/public/app/plugins/panel/timeseries/config.ts index a68b4572874..ebb750b71cc 100644 --- a/public/app/plugins/panel/timeseries/config.ts +++ b/public/app/plugins/panel/timeseries/config.ts @@ -15,7 +15,7 @@ import { LineStyle, VisibilityMode, StackingMode, - GraphTresholdsStyleMode, + GraphThresholdsStyleMode, GraphTransform, } from '@grafana/schema'; import { graphFieldOptions, commonOptionsBuilder } from '@grafana/ui'; @@ -228,7 +228,7 @@ export function getGraphFieldConfig(cfg: GraphFieldConfig, isTime = true): SetFi path: 'thresholdsStyle', name: 'Show thresholds', category: ['Thresholds'], - defaultValue: { mode: GraphTresholdsStyleMode.Off }, + defaultValue: { mode: GraphThresholdsStyleMode.Off }, settings: { options: graphFieldOptions.thresholdsDisplayModes, }, diff --git a/public/app/plugins/panel/timeseries/migrations.ts b/public/app/plugins/panel/timeseries/migrations.ts index eecf50a36e3..18c72cb83b3 100644 --- a/public/app/plugins/panel/timeseries/migrations.ts +++ b/public/app/plugins/panel/timeseries/migrations.ts @@ -23,7 +23,7 @@ import { GraphDrawStyle, GraphFieldConfig, GraphGradientMode, - GraphTresholdsStyleMode, + GraphThresholdsStyleMode, LineInterpolation, LineStyle, VisibilityMode, @@ -529,9 +529,9 @@ export function graphToTimeseriesOptions(angular: any): { }); } - let displayMode = area ? GraphTresholdsStyleMode.Area : GraphTresholdsStyleMode.Line; + let displayMode = area ? GraphThresholdsStyleMode.Area : GraphThresholdsStyleMode.Line; if (line && area) { - displayMode = GraphTresholdsStyleMode.LineAndArea; + displayMode = GraphThresholdsStyleMode.LineAndArea; } // TODO move into standard ThresholdConfig ?