Add variable mapping function

vanegmondgroep · Sep 14, 2020 · a42803f · a42803f
1 parent e120cb6
commit a42803f
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 73 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
diff --git a/build.sh b/build.sh
@@ -0,0 +1,4 @@
+#!/bin/bash
+rm -rf ./dist
+yarn build
+docker-compose restart
diff --git a/src/module.ts b/src/module.ts
@@ -20,6 +20,7 @@ import $ from 'jquery';
 import kbn from 'grafana/app/core/utils/kbn';
 
 import appEvents from 'grafana/app/core/app_events';
+import templateSrv from '@grafana/runtime';
 
 /* eslint-disable id-blacklist, no-restricted-imports, @typescript-eslint/ban-types */
 import moment from 'moment';
@@ -220,10 +221,10 @@ class DiscretePanelCtrl extends CanvasPanelCtrl {
   onInitEditMode() {
     this.unitFormats = kbn.getUnitFormats();
 
-    this.addEditorTab('Options', 'public/plugins/natel-discrete-panel/partials/editor.options.html', 1);
-    this.addEditorTab('Legend', 'public/plugins/natel-discrete-panel/partials/editor.legend.html', 3);
-    this.addEditorTab('Colors', 'public/plugins/natel-discrete-panel/partials/editor.colors.html', 4);
-    this.addEditorTab('Mappings', 'public/plugins/natel-discrete-panel/partials/editor.mappings.html', 5);
+    this.addEditorTab('Options', 'public/plugins/veg-grafana-discrete-panel/partials/editor.options.html', 1);
+    this.addEditorTab('Legend', 'public/plugins/veg-grafana-discrete-panel/partials/editor.legend.html', 3);
+    this.addEditorTab('Colors', 'public/plugins/veg-grafana-discrete-panel/partials/editor.colors.html', 4);
+    this.addEditorTab('Mappings', 'public/plugins/veg-grafana-discrete-panel/partials/editor.mappings.html', 5);
     this.editorTabIndex = 1;
     this.refresh();
   }
@@ -308,7 +309,11 @@ class DiscretePanelCtrl extends CanvasPanelCtrl {
         return map.text;
       }
     }
-
+    //vegEdit: map variables
+    const variableMapValue = this.variableMap(val, this.panel.variableValueMap);
+    if (variableMapValue) {
+      return variableMapValue;
+    }
     if (isNull) {
       return 'null';
     }
@@ -319,6 +324,12 @@ class DiscretePanelCtrl extends CanvasPanelCtrl {
     if (_.has(this.colorMap, val)) {
       return this.colorMap[val];
     }
+    //vegEdit: map variables
+    const variableMapValue = this.variableMap(val, this.panel.variableColorMap);
+    if (variableMapValue) {
+      return variableMapValue;
+    }
+
     if (this._colorsPaleteCash[val] === undefined) {
       const c = grafanaColors[this._colorsPaleteCash.length % grafanaColors.length];
       this._colorsPaleteCash[val] = c;
@@ -335,6 +346,23 @@ class DiscretePanelCtrl extends CanvasPanelCtrl {
     }
     return color;
   }
+  //vegEdit: map variables
+  variableMap(val, variableName) {
+    if (variableName) {
+      const variables = _.find(templateSrv.getTemplateSrv().getVariables(), { name: variableName });
+      console.log(variables);
+      if (variables && typeof variables !== undefined && variables instanceof Array) {
+        for (let i = 0; i < variables.length; i++) {
+          const option = variables[i];
+          const optionValue = option.value.split(';', 2);
+          if (optionValue && val === optionValue[0]) {
+            return optionValue[1];
+          }
+        }
+      }
+    }
+    return false;
+  }
 
   // Override the
   applyPanelTimeOverrides() {

diff --git a/src/partials/editor.colors.html b/src/partials/editor.colors.html
@@ -85,3 +85,13 @@ <h5 class="page-heading">Color Mappings</h5>
     </div>
   </div>
 </div>
+
+<div class="editor-row">
+  <h5 class="page-heading">Variable Color Mapping</h5>
+  <div class="gf-form-group">
+    <div class="gf-form">
+      <label class="gf-form-label width-10">Variable Name</label>
+      <input type="text" class="gf-form-input max-width-20" placeholder="status_colors" empty-to-null bs-tooltip="'Enter the variable name which contains the text to color mapping. The variable needs to have one or more values with the following structure: text:color (example: Active;#000000, Standby;#ffffff)'" data-placement="right" ng-model="ctrl.panel.variableColorMap" ng-change="ctrl.onConfigChanged(true);" ng-model-onblur>
+    </div>
+  </div>
+</div>
diff --git a/src/partials/editor.mappings.html b/src/partials/editor.mappings.html
@@ -47,7 +47,15 @@ <h5 class="page-heading">Range Mappings</h5>
   </div>
 </div>
 
-
+<div class="editor-row">
+  <h5 class="page-heading">Variable Value Mapping</h5>
+  <div class="gf-form-group">
+    <div class="gf-form">
+      <label class="gf-form-label width-10">Variable Name</label>
+      <input type="text" class="gf-form-input max-width-20" placeholder="statuses" empty-to-null bs-tooltip="'Enter the variable name which contains the value to text mapping. The variable needs to have one or more values with the following structure: value:text (example: 10;Active, 20;Standby)'" data-placement="right" ng-model="ctrl.panel.variableValueMap" ng-change="ctrl.onConfigChanged(true);" ng-model-onblur>
+    </div>
+  </div>
+</div>
 
 <div class="editor-row">
   <h5 class="page-heading">Numeric Conversion</h5>