IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Thresholds: Add option for dashed line style (#55875)

Browse Source
This commit is contained in:
Leon Sorokin 2022-09-28 01:48:09 -05:00 committed by GitHub
parent e31cb93ec0
commit bd50fd1606
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-schema/src/schema/mudball.cue
View File

@ -123,7 +123,7 @@ HideableFieldConfig: {
} @cuetsy(kind="interface") } @cuetsy(kind="interface")
// TODO docs // TODO docs
GraphTresholdsStyleMode: "off" | "line" | "area" | "line+area" | "series" @cuetsy(kind="enum",memberNames="Off|Line|Area|LineAndArea|Series") GraphTresholdsStyleMode: "off" | "line" | "dashed" | "area" | "line+area" | "dashed+area" | "series" @cuetsy(kind="enum",memberNames="Off|Line|Dashed|Area|LineAndArea|DashedAndArea|Series")
// TODO docs // TODO docs
GraphThresholdsStyleConfig: { GraphThresholdsStyleConfig: {

2
packages/grafana-schema/src/schema/mudball.gen.ts
View File

@ -232,6 +232,8 @@ export interface HideableFieldConfig {
*/ */
export enum GraphTresholdsStyleMode { export enum GraphTresholdsStyleMode {
Area = 'area', Area = 'area',
Dashed = 'dashed',
DashedAndArea = 'dashed+area',
Line = 'line', Line = 'line',
LineAndArea = 'line+area', LineAndArea = 'line+area',
Off = 'off', Off = 'off',

2
packages/grafana-ui/src/components/uPlot/config.ts
View File

@ -66,7 +66,9 @@ export const graphFieldOptions = {
thresholdsDisplayModes: [ thresholdsDisplayModes: [
{ label: 'Off', value: GraphTresholdsStyleMode.Off }, { label: 'Off', value: GraphTresholdsStyleMode.Off },
{ label: 'As lines', value: GraphTresholdsStyleMode.Line }, { label: 'As lines', value: GraphTresholdsStyleMode.Line },
{ label: 'As lines (dashed)', value: GraphTresholdsStyleMode.Dashed },
{ label: 'As filled regions', value: GraphTresholdsStyleMode.Area }, { label: 'As filled regions', value: GraphTresholdsStyleMode.Area },
{ label: 'As filled regions and lines', value: GraphTresholdsStyleMode.LineAndArea }, { label: 'As filled regions and lines', value: GraphTresholdsStyleMode.LineAndArea },
{ label: 'As filled regions and lines (dashed)', value: GraphTresholdsStyleMode.DashedAndArea },
] as Array<SelectableValue<GraphTresholdsStyleMode>>, ] as Array<SelectableValue<GraphTresholdsStyleMode>>,
}; };

12
packages/grafana-ui/src/components/uPlot/config/UPlotThresholds.ts
View File

@ -18,6 +18,12 @@ export interface UPlotThresholdOptions {
} }
export function getThresholdsDrawHook(options: UPlotThresholdOptions) { export function getThresholdsDrawHook(options: UPlotThresholdOptions) {
const dashSegments =
options.config.mode === GraphTresholdsStyleMode.Dashed ||
options.config.mode === GraphTresholdsStyleMode.DashedAndArea
? [10, 10]
: null;
function addLines(u: uPlot, steps: Threshold[], theme: GrafanaTheme2, xMin: number, xMax: number, yScaleKey: string) { function addLines(u: uPlot, steps: Threshold[], theme: GrafanaTheme2, xMin: number, xMax: number, yScaleKey: string) {
let ctx = u.ctx; let ctx = u.ctx;
@ -34,6 +40,10 @@ export function getThresholdsDrawHook(options: UPlotThresholdOptions) {
ctx.lineWidth = 2; ctx.lineWidth = 2;
if (dashSegments) {
ctx.setLineDash(dashSegments);
}
// Ignore the base -Infinity threshold by always starting on index 1 // Ignore the base -Infinity threshold by always starting on index 1
for (let idx = 1; idx < steps.length; idx++) { for (let idx = 1; idx < steps.length; idx++) {
const step = steps[idx]; const step = steps[idx];
@ -114,12 +124,14 @@ export function getThresholdsDrawHook(options: UPlotThresholdOptions) {
switch (config.mode) { switch (config.mode) {
case GraphTresholdsStyleMode.Line: case GraphTresholdsStyleMode.Line:
case GraphTresholdsStyleMode.Dashed:
addLines(u, steps, theme, xMin, xMax, scaleKey); addLines(u, steps, theme, xMin, xMax, scaleKey);
break; break;
case GraphTresholdsStyleMode.Area: case GraphTresholdsStyleMode.Area:
addAreas(u, steps, theme); addAreas(u, steps, theme);
break; break;
case GraphTresholdsStyleMode.LineAndArea: case GraphTresholdsStyleMode.LineAndArea:
case GraphTresholdsStyleMode.DashedAndArea:
addAreas(u, steps, theme); addAreas(u, steps, theme);
addLines(u, steps, theme, xMin, xMax, scaleKey); addLines(u, steps, theme, xMin, xMax, scaleKey);
} }