diff --git a/CHANGELOG.md b/CHANGELOG.md index 1f2f408..813021a 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/provisioning/dashboardData/units.yaml b/provisioning/dashboardData/units.yaml new file mode 100644 index 0000000..239f659 --- /dev/null +++ b/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} diff --git a/provisioning/dashboards/units.json b/provisioning/dashboards/units.json new file mode 100644 index 0000000..d05b180 --- /dev/null +++ b/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": "" +} diff --git a/src/components/Config.tsx b/src/components/Config.tsx index d51ebc4..9f80ce9 100644 --- a/src/components/Config.tsx +++ b/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; }; diff --git a/src/components/SvgUpdater.tsx b/src/components/SvgUpdater.tsx index 84b0abe..610de41 100644 --- a/src/components/SvgUpdater.tsx +++ b/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) { diff --git a/yaml_defs/panelConfig.yaml b/yaml_defs/panelConfig.yaml index e5393e2..529d400 100644 --- a/yaml_defs/panelConfig.yaml +++ b/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