[ENHANCEMENT] TimeSeriesChart: migration: support lineStyle & opacity override (#387)

* [ENHANCEMENT] TimeSeriesChart: migration: support lineStyle & opacity overrides

Signed-off-by: Antoine THEBAUD <antoine.thebaud@yahoo.fr>

* migration logic for lineStyle

Signed-off-by: Antoine THEBAUD <antoine.thebaud@yahoo.fr>

* fix for lineStyle override migration

Signed-off-by: Antoine THEBAUD <antoine.thebaud@yahoo.fr>

* fix for opacity override

Signed-off-by: Antoine THEBAUD <antoine.thebaud@yahoo.fr>

---------

Signed-off-by: Antoine THEBAUD <antoine.thebaud@yahoo.fr>

Author: AntoineThebaud

timeserieschart/schemas/migrate/migrate.cue

@@ -21,6 +21,13 @@ import (
 #grafanaType: "timeseries" | "graph"
 #panel:       _
 
+// key: grafana line style, value: perses line style
+#lineStyleMapping: {
+	solid:  "solid"
+	dash: "dashed"
+	dot: "dotted"
+}
+
 kind: "TimeSeriesChart"
 spec: {
 	// legend
@@ -134,6 +141,11 @@ spec: {
 		}
 	}
 
+	#lineStyle: *#panel.fieldConfig.defaults.custom.lineStyle.fill | null
+	if #lineStyle != null {
+		visual: lineStyle: #lineStyleMapping[#lineStyle]
+	}
+
 	#fillOpacity: *#panel.fieldConfig.defaults.custom.fillOpacity | null
 	if #fillOpacity != null {
 		visual: areaOpacity: #fillOpacity / 100
@@ -160,18 +172,28 @@ spec: {
 
 	// migrate fixedColor overrides to querySettings when applicable
 	#querySettings: [
-		for override in (*#panel.fieldConfig.overrides | [])
-		if (override.matcher.id == "byName" || override.matcher.id == "byRegexp") && override.matcher.options != _|_
-		for property in override.properties
-		if (*property.value.fixedColor | null) != null
-		for i, target in (*#panel.targets | [])
-		if target.legendFormat == override.matcher.options || target.legendFormat =~ strings.Trim(override.matcher.options, "/") {
+		for i, target in (*#panel.targets | []) {
 			queryIndex: i
-			colorMode: "fixed"
-			colorValue: property.value.fixedColor
+			for override in (*#panel.fieldConfig.overrides | [])
+			if (override.matcher.id == "byName" || override.matcher.id == "byRegexp") && override.matcher.options != _|_
+			for property in override.properties
+			if target.legendFormat == override.matcher.options || target.legendFormat =~ strings.Trim(override.matcher.options, "/") {
+				if property.id == "color" if (*property.value.fixedColor | null) != null {
+					colorMode: "fixed"
+					colorValue: property.value.fixedColor
+				}
+				if property.id == "custom.lineStyle" if (*property.value.fill | null) != null {
+					lineStyle: #lineStyleMapping[property.value.fill]
+				}
+				if property.id == "custom.fillOpacity" {
+					areaOpacity: property.value / 100
+				}
+			}
 		}
 	]
-	if len(#querySettings) != 0 {
-		querySettings: #querySettings
+	// don't keep elements that just define the queryIndex
+	#querySettingsFiltered: [for qs in #querySettings if len(qs) > 1 { qs }]
+	if len(#querySettingsFiltered) != 0 {
+		querySettings: #querySettingsFiltered
 	}
 }

timeserieschart/schemas/migrate/tests/basic-3/expected.json

@@ -10,7 +10,8 @@
       "areaOpacity": 0.1,
       "connectNulls": false,
       "display": "line",
-      "lineWidth": 1
+      "lineWidth": 1,
+      "lineStyle": "dotted"
     },
     "yAxis": {
       "format": {

timeserieschart/schemas/migrate/tests/basic-3/input.json

@@ -41,6 +41,13 @@
         },
         "thresholdsStyle": {
           "mode": "off"
+        },
+        "lineStyle": {
+          "fill": "dot",
+          "dash": [
+            0,
+            10
+          ]
         }
       },
       "color": {

timeserieschart/schemas/migrate/tests/basic/expected.json

@@ -10,7 +10,8 @@
       "areaOpacity": 0.1,
       "connectNulls": false,
       "display": "line",
-      "lineWidth": 1
+      "lineWidth": 1,
+      "lineStyle": "solid"
     },
     "yAxis": {
       "format": {

timeserieschart/schemas/migrate/tests/basic/input.json

@@ -24,6 +24,9 @@
         "insertNulls": false,
         "lineInterpolation": "linear",
         "lineWidth": 1,
+        "lineStyle": {
+          "fill": "solid"
+        },
         "pointSize": 5,
         "scaleDistribution": {
           "type": "linear"

timeserieschart/schemas/migrate/tests/byregexp-colors/expected.json

@@ -25,14 +25,17 @@
     },
     "querySettings": [
       {
-        "queryIndex": 2,
+        "queryIndex": 1,
         "colorMode": "fixed",
-        "colorValue": "#F2495C"
+        "colorValue": "#5794F2",
+        "lineStyle": "dashed",
+        "areaOpacity": 0
       },
       {
-        "queryIndex": 1,
+        "queryIndex": 2,
         "colorMode": "fixed",
-        "colorValue": "#5794F2"
+        "colorValue": "#F2495C",
+        "areaOpacity": 0
       }
     ]
   }

timeserieschart/schemas/migrate/tests/color-based-on-legend-text/expected.json

@@ -7,16 +7,6 @@
       "values": []
     },
     "querySettings": [
-      {
-        "queryIndex": 2,
-        "colorMode": "fixed",
-        "colorValue": "#890F02"
-      },
-      {
-        "queryIndex": 5,
-        "colorMode": "fixed",
-        "colorValue": "#052B51"
-      },
       {
         "queryIndex": 0,
         "colorMode": "fixed",
@@ -27,10 +17,21 @@
         "colorMode": "fixed",
         "colorValue": "#0A437C"
       },
+      {
+        "queryIndex": 2,
+        "colorMode": "fixed",
+        "colorValue": "#890F02",
+        "areaOpacity": 1
+      },
       {
         "queryIndex": 4,
         "colorMode": "fixed",
         "colorValue": "#6D1F62"
+      },
+      {
+        "queryIndex": 5,
+        "colorMode": "fixed",
+        "colorValue": "#052B51"
       }
     ],
     "visual": {

timeserieschart/schemas/migrate/tests/color-based-on-legend-text/input.json

@@ -74,6 +74,10 @@
               "fixedColor": "#890F02",
               "mode": "fixed"
             }
+          },
+          {
+            "id": "custom.fillOpacity",
+            "value": 100
           }
         ]
       },