Support for node coloration in Grafana

dist/components/lib/dataParser.d.ts

@@ -1,2 +1,2 @@
-export function parseData(data: any, mapData: any, colors: any, fields: any, layer: any): any[];
+export function parseData(data: any, mapData: any, colors: any, fields: any, layer: any): any;
 //# sourceMappingURL=dataParser.d.ts.map

dist/plugin.json

@@ -32,8 +32,8 @@
         "path": "img/networkmap.png"
       }
     ],
-    "version": "1.6.3",
-    "updated": "2023-10-18"
+    "version": "2.0.0",
+    "updated": "2023-10-19"
   },
   "dependencies": {
     "grafanaDependency": ">=9.0.0",

dist/types.d.ts

@@ -18,6 +18,9 @@ export interface LayerOptions {
     dashboardEdgeSrcVar: string;
     dashboardEdgeDstVar: string;
     dashboardNodeVar: string;
+    nodeThresholds: any;
+    nodeNameMatchField: string;
+    nodeValueField: string;
 }
 export interface MapOptions {
     background: string;
@@ -46,8 +49,8 @@ export interface MapOptions {
             lat: number;
             lng: number;
         };
+        zoom?: number;
     };
-    viewportZoom?: number;
     layers: LayerOptions[];
 }
 //# sourceMappingURL=types.d.ts.map

src/MapPanel.tsx

@@ -276,14 +276,16 @@ export class MapPanel extends Component<Props> {
       if(!options.layers[i]){ continue; }
       colors.push({
         defaultColor: options.layers[i].color,
-        nodeHighlight: options.layers[i].nodeHighlight,
+        nodeThresholds: options.layers[i].nodeThresholds?.steps || [],
       })
       fields.push({
         srcField: options.layers[i].srcField,
         dstField: options.layers[i].dstField,
         inboundValueField: options.layers[i].inboundValueField,
         outboundValueField: options.layers[i].outboundValueField,
         endpointId: options.layers[i].endpointId,
+        nodeNameMatchField: options.layers[i].nodeNameMatchField,
+        nodeValueField: options.layers[i].nodeValueField,
       })
     }
     let topology = [
@@ -301,8 +303,8 @@ export class MapPanel extends Component<Props> {
         ]).then((topologyData) => {
           for(let i=0; i<LAYER_LIMIT; i++){
             try {
-              let parsedData = parseData(data, topologyData[i], colors[i], fields[i], i);
-              topology[i] = parsedData[3];
+              // @ts-ignore
+              topology[i] = parseData(data, topologyData[i], colors[i], fields[i], i);
             } catch(e) {
               if(!this.mapCanvas.jsonResults){
                 this.mapCanvas.jsonResults = [];

src/components/lib/dataParser.js

@@ -82,9 +82,25 @@ export function parseData(data, mapData, colors, fields, layer) {
     return color;
   }
 
+  function thresholdLookup(thresholds, value){
+    if(!Array.isArray(thresholds) || thresholds.length === 0){ return null }
+    let output = thresholds[0].color;
+    // begin by assigning the base color, but don't iterate over it
+    thresholds.forEach((threshold)=>{
+      if(threshold.value <= value){
+        output = threshold.color
+      }
+    })
+    return output;
+  }
   // fix the colors
   colors.defaultColor = fixColor(colors.defaultColor);
-  colors.nodeHighlight = fixColor(colors.nodeHighlight);
+  colors.nodeThresholds = colors.nodeThresholds.map((step)=>{
+    return {
+      value: step.value,
+      color: fixColor(step.color)
+    }
+  });
 
   let dataFrames = [];
 
@@ -95,11 +111,14 @@ export function parseData(data, mapData, colors, fields, layer) {
   var dstKey = fields.dstField;
   var inboundKey = fields.inboundValueField;
   var outboundKey = fields.outboundValueField;
+  var nodeNameMatchKey = fields.nodeNameMatchField;
+  var nodeValueKey = fields.nodeValueField;
 
   // initialize arrays
   let parsedData = [];
-  let infIn= [];
-  let infOut= [];
+  let infIn = [];
+  let infOut = [];
+  let nodeValues = [];
 
   // const valueField = valKey
   //   ? data.series.map((series: { fields: any[] }) =>
@@ -170,6 +189,12 @@ export function parseData(data, mapData, colors, fields, layer) {
       } else {
         infOut.push({ name: row[dstKey], value: row[outboundKey] });
       }
+
+
+      if(row.hasOwnProperty(nodeNameMatchKey) && row.hasOwnProperty(nodeValueKey)){
+        nodeValues.push({ name: row[nodeNameMatchKey], value: row[nodeValueKey] })
+      }
+
     });
   });
 
@@ -243,22 +268,27 @@ export function parseData(data, mapData, colors, fields, layer) {
     let match2 = infOut.find((d) => d.name === node.name);
     node.inValue = 'N/A';
     node.outValue = 'N/A';
+    node.color = colors.defaultColor;
     if (match1 || match2) {
-      node.color = colors.nodeHighlight;
       if (match1) {
         node.inValue = `${valueField[0].display(match1.value).text} ${valueField[0].display(match1.value).suffix}`;
       }
       if (match2) {
         node.outValue = `${valueField[0].display(match2.value).text} ${valueField[0].display(match2.value).suffix}`;
       }
-    } else {
-      node.color = colors.defaultColor;
+    }
+
+    let nodeMatch = nodeValues.find((d) => d.name == node.name);
+    let nodeMatchValue = nodeMatch ? nodeMatch.value : 0;
+    let output = thresholdLookup(colors.nodeThresholds, nodeMatchValue);
+    if(output){
+      node.color = output;
     }
   });
 
   //take this out later
   mapJson.aTest = 0;
 
   // returns parsedData: pairs & their value, infIn: aggregated by first group by, infOut: appregated by 2nd group by
-  return [parsedData, infIn, infOut, mapJson, srcKey, dstKey, inboundKey, outboundKey];
+  return mapJson;
 }