From 4d144fed72f7a0d9e8317463a63dede0e52f2a88 Mon Sep 17 00:00:00 2001
From: Leon Sorokin <leeoniya@gmail.com>
Date: Tue, 27 Sep 2022 18:47:34 -0500
Subject: [PATCH] Thresholds: Add option for dashed line style

---
 packages/grafana-schema/src/schema/mudball.cue       |  8 ++++----
 packages/grafana-schema/src/schema/mudball.gen.ts    |  2 ++
 packages/grafana-ui/src/components/uPlot/config.ts   |  2 ++
 .../src/components/uPlot/config/UPlotThresholds.ts   | 12 ++++++++++++
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/grafana-schema/src/schema/mudball.cue b/packages/grafana-schema/src/schema/mudball.cue
index f4cb9d302d61..ccc36703b7a0 100644
--- a/packages/grafana-schema/src/schema/mudball.cue
+++ b/packages/grafana-schema/src/schema/mudball.cue
@@ -123,7 +123,7 @@ HideableFieldConfig: {
 } @cuetsy(kind="interface")
 
 // 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
 GraphThresholdsStyleConfig: {
@@ -240,9 +240,9 @@ VizLegendOptions: {
 	showLegend: 	bool
 	asTable?:     bool
 	isVisible?:   bool
-  sortBy?:      string
-  sortDesc?:    bool
-  width?:       number
+	sortBy?:      string
+	sortDesc?:    bool
+	width?:       number
 	calcs:        [...string]
 } @cuetsy(kind="interface")
 
diff --git a/packages/grafana-schema/src/schema/mudball.gen.ts b/packages/grafana-schema/src/schema/mudball.gen.ts
index c890b6867255..f29d781111da 100644
--- a/packages/grafana-schema/src/schema/mudball.gen.ts
+++ b/packages/grafana-schema/src/schema/mudball.gen.ts
@@ -232,6 +232,8 @@ export interface HideableFieldConfig {
  */
 export enum GraphTresholdsStyleMode {
   Area = 'area',
+  Dashed = 'dashed',
+  DashedAndArea = 'dashed+area',
   Line = 'line',
   LineAndArea = 'line+area',
   Off = 'off',
diff --git a/packages/grafana-ui/src/components/uPlot/config.ts b/packages/grafana-ui/src/components/uPlot/config.ts
index cb094c5eb2ca..6ccf047b0d2b 100644
--- a/packages/grafana-ui/src/components/uPlot/config.ts
+++ b/packages/grafana-ui/src/components/uPlot/config.ts
@@ -66,7 +66,9 @@ 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 },
   ] as Array<SelectableValue<GraphTresholdsStyleMode>>,
 };
diff --git a/packages/grafana-ui/src/components/uPlot/config/UPlotThresholds.ts b/packages/grafana-ui/src/components/uPlot/config/UPlotThresholds.ts
index d9e81d2b89a0..882cf83d2b21 100644
--- a/packages/grafana-ui/src/components/uPlot/config/UPlotThresholds.ts
+++ b/packages/grafana-ui/src/components/uPlot/config/UPlotThresholds.ts
@@ -18,6 +18,12 @@ export interface 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) {
     let ctx = u.ctx;
 
@@ -34,6 +40,10 @@ export function getThresholdsDrawHook(options: UPlotThresholdOptions) {
 
     ctx.lineWidth = 2;
 
+    if (dashSegments) {
+      ctx.setLineDash(dashSegments);
+    }
+
     // Ignore the base -Infinity threshold by always starting on index 1
     for (let idx = 1; idx < steps.length; idx++) {
       const step = steps[idx];
@@ -114,12 +124,14 @@ export function getThresholdsDrawHook(options: UPlotThresholdOptions) {
 
     switch (config.mode) {
       case GraphTresholdsStyleMode.Line:
+      case GraphTresholdsStyleMode.Dashed:
         addLines(u, steps, theme, xMin, xMax, scaleKey);
         break;
       case GraphTresholdsStyleMode.Area:
         addAreas(u, steps, theme);
         break;
       case GraphTresholdsStyleMode.LineAndArea:
+      case GraphTresholdsStyleMode.DashedAndArea:
         addAreas(u, steps, theme);
         addLines(u, steps, theme, xMin, xMax, scaleKey);
     }