custom units

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 1.x.x
+Improves sub 100% scaling so that it now should correctly fill the panel maintaining
+aspect ratio.
+
+Changes the background color definition to be applied to the available svg panel area
+rather that the actual svg background.
+
+Adds new cell-label yaml 'unitsPostfix'. This is an optional string that will be postfixed
+to the label value. It can be used for specifying custom units. In yaml, unicode characters
+are specified with a \u. i.e. "\u03bc" = Mu.
+
 ## 1.6.0
 Adds resource links for website, license and yaml defs to the plugin landing page.
 

provisioning/dashboardData/units.yaml

@@ -0,0 +1,53 @@
+---
+
+#------------------------------------------------------------------------------
+# YAML Aliases to simplify maintenance
+
+#------------------------------------------------------------------------------
+# Panel Config
+
+cellIdPreamble: "cell-"
+cells: 
+  inbox_depth:
+    dataRef: "test-data-large-sin"
+    label:
+      separator: "cr"
+      units: "none"
+      unitsPostfix: "\u03bcs"
+    labelColor:
+      gradientMode: "hue"
+      thresholds:
+        - {color: "green", level: 0}
+        - {color: "orange", level: 500}
+        - {color: "red", level: 1000}
+  db_transactions:
+    dataRef: "test-data-large-cos"
+    label:
+      separator: "cr"
+      units: "ops"
+    fillColor:
+      gradientMode: "hue"
+      thresholds:
+        - {color: "semi-dark-green", level: 0}
+        - {color: "orange", level: 400}
+        - {color: "red", level: 800}
+  start_rate:
+    dataRef: "test-data-small-sin"
+    label:
+      separator: "colon"
+      unitsPostfix: "abc"
+    labelColor:
+      gradientMode: "hue"
+      thresholds:
+        - {color: "green", level: 0}
+        - {color: "orange", level: 100}
+  active_workers:
+    dataRef: "test-data-small-cos"
+    label:
+      separator: "cr"
+      units: "pps"
+    labelColor:
+      gradientMode: "hue"
+      thresholds:
+        - {color: "#888888", level: 0}
+        - {color: "light-blue", level: 100}

provisioning/dashboards/units.json

@@ -0,0 +1,121 @@
+{
+    "annotations": {
+      "list": [
+        {
+          "builtIn": 1,
+          "datasource": {
+            "type": "grafana",
+            "uid": "-- Grafana --"
+          },
+          "enable": true,
+          "hide": true,
+          "iconColor": "rgba(0, 211, 255, 1)",
+          "name": "Annotations & Alerts",
+          "type": "dashboard"
+        }
+      ]
+    },
+    "editable": true,
+    "fiscalYearStartMonth": 0,
+    "graphTooltip": 0,
+    "id": 20,
+    "links": [],
+    "liveNow": false,
+    "panels": [
+      {
+        "datasource": {
+          "type": "datasource",
+          "uid": "grafana"
+        },
+        "gridPos": {
+          "h": 5,
+          "w": 24,
+          "x": 0,
+          "y": 0
+        },
+        "id": 123127,
+        "options": {
+          "code": {
+            "language": "plaintext",
+            "showLineNumbers": false,
+            "showMiniMap": false
+          },
+          "content": "# Units\n\nThis dashboard demonstrate normal units with associated grafana scaling alongside custom\nunits specified using the unitsPostfix yaml field. It demonstrates normal ascii alongside\nunicode characters.",
+          "mode": "markdown"
+        },
+        "pluginVersion": "10.0.0",
+        "type": "text"
+      },
+      {
+        "datasource": {
+          "type": "datasource",
+          "uid": "grafana"
+        },
+        "gridPos": {
+          "h": 12,
+          "w": 24,
+          "x": 0,
+          "y": 5
+        },
+        "id": 123125,
+        "options": {
+          "debuggingCtr": {
+            "colorsCtr": 0,
+            "dataCtr": 0,
+            "displaySvgCtr": 0,
+            "mappingsCtr": 0,
+            "timingsCtr": 0
+          },
+          "highlighterEnabled": true,
+          "panelConfig": "---\n\n#------------------------------------------------------------------------------\n# YAML Aliases to simplify maintenance\n\n#------------------------------------------------------------------------------\n# Panel Config\n\ncellIdPreamble: \"cell-\"\ncells: \n  inbox_depth:\n    dataRef: \"test-data-large-sin\"\n    label:\n      separator: \"cr\"\n      units: \"none\"\n      unitsPostfix: \"\\u03bcs\"\n    labelColor:\n      gradientMode: \"hue\"\n      thresholds:\n        - {color: \"green\", level: 0}\n        - {color: \"orange\", level: 500}\n        - {color: \"red\", level: 1000}\n  db_transactions:\n    dataRef: \"test-data-large-cos\"\n    label:\n      separator: \"cr\"\n      units: \"ops\"\n    fillColor:\n      gradientMode: \"hue\"\n      thresholds:\n        - {color: \"semi-dark-green\", level: 0}\n        - {color: \"orange\", level: 400}\n        - {color: \"red\", level: 800}\n  start_rate:\n    dataRef: \"test-data-small-sin\"\n    label:\n      separator: \"colon\"\n      unitsPostfix: \"abc\"\n    labelColor:\n      gradientMode: \"hue\"\n      thresholds:\n        - {color: \"green\", level: 0}\n        - {color: \"orange\", level: 100}\n  active_workers:\n    dataRef: \"test-data-small-cos\"\n    label:\n      separator: \"cr\"\n      units: \"pps\"\n    labelColor:\n      gradientMode: \"hue\"\n      thresholds:\n        - {color: \"#888888\", level: 0}\n        - {color: \"light-blue\", level: 100}",
+          "siteConfig": "",
+          "svg": "https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/darkThemeSvg1.svg",
+          "testDataEnabled": true,
+          "timeSliderEnabled": true
+        },
+        "type": "andrewbmchugh-flow-panel"
+      }
+    ],
+    "refresh": "",
+    "schemaVersion": 38,
+    "style": "dark",
+    "tags": [],
+    "templating": {
+      "list": []
+    },
+    "time": {
+      "from": "now-3h",
+      "to": "now"
+    },
+    "timepicker": {
+      "hidden": false,
+      "refresh_intervals": [
+        "5s",
+        "10s",
+        "30s",
+        "1m",
+        "5m",
+        "15m",
+        "30m",
+        "1h",
+        "2h",
+        "1d"
+      ],
+      "time_options": [
+        "5m",
+        "15m",
+        "1h",
+        "6h",
+        "12h",
+        "24h",
+        "2d",
+        "7d",
+        "30d"
+      ],
+      "type": "timepicker"
+    },
+    "timezone": "browser",
+    "title": "Units",
+    "version": 2,
+    "weekStart": ""
+}

src/components/Config.tsx

@@ -32,7 +32,8 @@ export type PanelConfigCellLabel = {
   dataRef: string | undefined;
   datapoint: DatapointMode | undefined;
   separator: LabelSeparator;
-  units: string;
+  units: string | undefined;
+  unitsPostfix: string | undefined;
   decimalPoints: number | null | undefined;
 };
 

src/components/SvgUpdater.tsx

@@ -208,12 +208,12 @@ function formatCellValue(cellLabelData: PanelConfigCellLabel, value: number) {
   const format = cellLabelData.units || 'none';
   const decimalPoints = cellLabelData.decimalPoints;
   const formatter = getValueFormatterIndex()[format];
-  if (formatter) {
-    return formattedValueToString(formatter(value, decimalPoints));
-  }
-  else {
-    return value.toString();
+  let res = formatter ? formattedValueToString(formatter(value, decimalPoints)) : value.toString();
+
+  if (cellLabelData.unitsPostfix) {
+    res = res.concat(" ", cellLabelData.unitsPostfix);
   }
+  return res;
 }
 
 function setFillAttribute(el: Element, color: string | null | undefined) {

yaml_defs/panelConfig.yaml

@@ -147,6 +147,10 @@ cells:
       # would be none, ops, pps, litreh, forcekNm
       units: "none"
 
+      # From ver 1.7.0: This postfix term, when defined, will be space-concatenated to the value
+      # following unit conversion. This can be used for defining custom units.
+      unitsPostfix: "MyUnits"
+
       # The number of decimal points to display. Enter null for auto, 0 for none, etc. If left
       # undefined it will default to the value specified at the panel level in cellLabelDecimalPoints. 
       decimalPoints: 0