add categorical & range type legends

Author: KatrinaTurner

src/EsnetMatrix.tsx

@@ -6,35 +6,31 @@ import { useTheme2, CustomScrollbar } from '@grafana/ui';
 // import { useTheme2 } from '@grafana/ui';
 
 import * as Matrix from './matrix.js';
+// import * as Legend from 'matrixLegend.js';
 
 interface Props extends PanelProps<MatrixOptions> {}
 
 export const EsnetMatrix: React.FC<Props> = ({ options, data, width, height, id }) => {
-  let parsedData: any[] = [];
   const theme = useTheme2();
+  const parsedData = parseData(data, options, theme);
   try {
-    const tryData = parseData(data, options, theme);
-    if (tryData === "too many inputs") {
+    if (parsedData.data === 'too many inputs') {
       console.error('Too many data points.');
       return <svg width={width} height={height}></svg>;
-    } else {
-      parsedData = tryData;
     }
   } catch (error) {
     console.error('data error: ', error);
   }
-  const rowNames = parsedData[0];
-  const colNames = parsedData[1];
-  const matrix = parsedData[2];
 
-  if (matrix == null) {
+  if (parsedData.data == null) {
     return <div>No Data</div>;
   }
   // const divStyle = {
   //   width: 'auto',
   // };
 
-  const ref = Matrix.matrix(rowNames, colNames, matrix, id, height, options);
+  const ref = Matrix.matrix(parsedData.rows, parsedData.columns, parsedData.data, id, height, options, parsedData.legend);
+
   return (
     <CustomScrollbar autoHeightMin="100%">
       <div ref={ref}></div>

src/dataParser.ts

@@ -1,5 +1,7 @@
 import { DataFrameView } from '@grafana/data';
 
+// import { legend } from 'matrixLegend';
+
 /**
  * this function creates an adjacency matrix to be consumed by the chord
  * function returns the matrix + forward and reverse lookup Maps to go from
@@ -18,14 +20,14 @@ export function parseData(data: { series: any[] }, options: any, theme: any) {
   if (series === null || series === undefined) {
     // no data, bail
     console.log('no data');
-    return [null, null, null];
+    return { rows: null, columns: null, data: null, legend: null };
   }
 
   const frame = new DataFrameView(series);
   if (frame === null || frame === undefined) {
     // no data, bail
     console.log('no data');
-    return [null, null, null];
+    return { rows: null, columns: null, data: null, legend: null };
   }
   // set fields
   let sourceKey = options.sourceField;
@@ -62,6 +64,8 @@ export function parseData(data: { series: any[] }, options: any, theme: any) {
   // Make Row and Column Lists
   let rows: any[] = [];
   let columns: any[] = [];
+  // let uniqueVals: any[] = [];
+
   // IF static list toggle is set, use input list
   if (options.inputList) {
     rows = options.staticRows.split(',');
@@ -80,14 +84,32 @@ export function parseData(data: { series: any[] }, options: any, theme: any) {
 
   const numSquaresInMatrix = rowNames.length * colNames.length;
   if (numSquaresInMatrix > 50000) {
-    return 'too many inputs';
+    return { rows: null, columns: null, data: 'too many inputs', legend: null };
   }
+
+  //playground DELETE LATER ////////////////
+  // let tempvals = frame.fields[valKey];
+  // let min = 0;
+  // let max = 0;
+  // if (tempvals.state) {
+  //   if(tempvals.state.range) {
+  //     if(tempvals.state.range.min) {
+  //     min = tempvals.state.range.min;
+  //     }
+  //     if (tempvals.state.range.max) {
+  //       max = tempvals.state.range.max;
+  //     }
+  //   }
+  // }
+  // console.log(`min: ${min} max: ${max}`);
+
+  ////////////////////////////
+
   // create data matrix
   let dataMatrix: any[][] = [];
   for (let i = 0; i < rowNames.length; i++) {
     dataMatrix.push(new Array(colNames.length).fill(-1));
   }
-
   frame.forEach((row) => {
     let r = rowNames.indexOf(String(row[sourceKey]));
     let c = colNames.indexOf(String(row[targetKey]));
@@ -102,5 +124,44 @@ export function parseData(data: { series: any[] }, options: any, theme: any) {
       };
     }
   });
-  return [rowNames, colNames, dataMatrix];
+
+  // parse data for legend
+  let legendData: any[] = [];
+  if (options.showLegend) {
+    // let allVals = frame.fields[valKey].values;
+    let tempValues: any[] = [];
+    if (options.legendType == 'range') { 
+      //get min & max, steps
+      let allValues: number[] = Object.values(frame.fields[valKey].values);
+      let thisMin = Math.min(...allValues);
+      let thisMax = Math.max(...allValues);
+      let step = (thisMax - thisMin) / 10;
+      // push 10 steps to use for legend
+      tempValues = [];
+      for(let i = 0; i <= 10; i++) {
+        tempValues.push(thisMin + (i*step));
+      }
+    } else {
+      // get unique categories
+      let allValues: string[] = Object.values(frame.fields[valKey].values);
+      let unique = new Set(allValues);
+      tempValues = [...unique];
+    }
+    tempValues.forEach((val) => {
+      // find display values, unit & color for each
+      // store in array
+      let text = valueField[0].display(val).text;
+      if (valueField[0].display(val).suffix) {
+        text = text + ` ${valueField[0].display(val).suffix}`;
+      }
+        legendData.push({
+          label: text,
+          color: colorMap(val),
+        });
+    });
+  }
+  console.log(legendData);
+
+  var dataObject = { rows: rowNames, columns: colNames, data: dataMatrix, legend: legendData };
+  return dataObject;
 }

src/matrix.d.ts

@@ -4,5 +4,6 @@ export function matrix(
   matrix: any,
   id: number,
   height: number,
-  options: any
+  options: any,
+  legend: any
 ): LegacyRef<SVGSVGElement> | undefined;

src/matrix.js

@@ -12,7 +12,7 @@ import { useTheme2 } from '@grafana/ui';
  * @param {string} val The data series that will act as the value
  * @param {GrafanaTheme} theme
  */
-function createViz(elem, id, height, rowNames, colNames, matrix, options, theme) {
+function createViz(elem, id, height, rowNames, colNames, matrix, options, theme, legend) {
   const srcText = options.sourceText,
     targetText = options.targetText,
     valText = options.valueText,
@@ -76,9 +76,9 @@ function createViz(elem, id, height, rowNames, colNames, matrix, options, theme)
     .style('font-color', theme.colors.text.primary)
     .style('box-shadow', '3px 3px 4px lightgray')
     .style('padding', '5px')
-    .style('z-index','500')
-    .style('position','absolute')
-    .style('width','fit-content')
+    .style('z-index', '500')
+    .style('position', 'absolute')
+    .style('width', 'fit-content')
     .style('opacity', 0);
 
   // append the svg object to the body of the page
@@ -132,7 +132,7 @@ function createViz(elem, id, height, rowNames, colNames, matrix, options, theme)
       div.style('opacity', 0).style('left', '0px').style('top', '0px');
     });
 
-  //build the matrix
+  //build the matrix /////////////////////////////////////////
 
   //use d3's local stuff to record where we are in the outer loop
   var outer = d3.local();
@@ -185,7 +185,7 @@ function createViz(elem, id, height, rowNames, colNames, matrix, options, theme)
       return str;
     })
     .attr('fill', (d) => {
-      if(d.color) {
+      if (d.color) {
         return d.color;
       } else {
         return defaultColor;
@@ -231,6 +231,88 @@ function createViz(elem, id, height, rowNames, colNames, matrix, options, theme)
         .attr('height', y.bandwidth());
       div.style('opacity', 0).style('left', '0px').style('top', '0px');
     });
+
+  ////// LEGEND ////////////
+  if (options.showLegend) {
+    var legendClass = `legend-${id}`;
+
+    var div = d3
+      .select(elem)
+      .append('div')
+      .attr('class', 'matrix-legend')
+      .attr('width', 'auto')
+      .attr('style', 'height: 70px;')
+      .append('svg')
+      .attr('id', legendClass);
+
+    if (options.legendType == 'range') {
+      var svg = d3.select(`#${legendClass}`);
+      svg
+        .append('g')
+        .selectAll('legendBars')
+        .data(legend)
+        .enter()
+        .append('rect')
+        .attr('class', 'legend-bar')
+        .attr('width', 10)
+        .attr('height', 10)
+        .attr('fill', function (d) {
+          return d.color;
+        })
+        .attr('x', function (d, i) {
+          return 25 + i * 10;
+        })
+        .attr('y', 20);
+      svg
+        .append('g')
+        .selectAll('legendLabels')
+        .data(legend)
+        .enter()
+        .append('text')
+        .attr('x', function (d, i) {
+          return 20 + i * 10;
+        })
+        .attr('y', 50)
+        .text(function (d, i) {
+          if ((i == 0) | (i == legend.length - 1)) {
+            return d.label;
+          } else {
+            return;
+          }
+        })
+        .attr('fill', theme.colors.text.primary);
+    } else {
+      // categorical
+      var svg = d3.select(`#${legendClass}`);
+      svg
+        .append('g')
+        .selectAll('legendCircles')
+        .data(legend)
+        .enter()
+        .append('circle')
+        .attr('class', 'legend-circle')
+        .attr('r', 10)
+        .attr('fill', function (d) {
+          return d.color;
+        })
+        .attr('cx', function (d, i) {
+          return 25 + i * 75;
+        })
+        .attr('cy', 20);
+      svg
+        .append('g')
+        .selectAll('legendLabels')
+        .data(legend)
+        .enter()
+        .append('text')
+        .attr('x', function (d, i) {
+          return 15 + i * 75;
+        })
+        .attr('y', 50)
+        .text(function (d) { return d.label })
+        .attr('fill', theme.colors.text.primary);
+    }
+  }
 }
 
 function truncateLabel(text, width) {
@@ -253,10 +335,10 @@ function truncateLabel(text, width) {
  * @param {number} height Height of panel
  * @return {*} A d3 callback
  */
-function matrix(rowNames, colNames, matrix, id, height, options) {
+function matrix(rowNames, colNames, matrix, id, height, options, legend) {
   const theme = useTheme2();
   const ref = useD3((svg) => {
-    createViz(svg, id, height, rowNames, colNames, matrix, options, theme);
+    createViz(svg, id, height, rowNames, colNames, matrix, options, theme, legend);
   });
   return ref;
 }

src/matrixLegend.d.ts

@@ -0,0 +1,6 @@
+export function legend(
+  matrix: any,
+  id: number,
+  height: number,
+  options: any
+): LegacyRef<SVGSVGElement> | undefined;

src/matrixLegend.js

@@ -0,0 +1,83 @@
+import { useD3 } from './useD3.js';
+import * as d3 from './d3.min.js';
+import { useTheme2 } from '@grafana/ui';
+
+/** Create the legend using d3.
+ * @param {*} elem The parent svg element that will house this legend
+ * @param {*} id The panel id
+ * @param {number} height The current height of the panel
+ * @param {*} legend The data that will populate the legend. array of objects providing color: the color to use and label: the display values use text and suffix
+ * @param {GrafanaTheme} theme
+ */
+function renderLegend(elem, id, height, legend, options, theme) {
+  if (elem === null) {
+    console.log('bailing after failing to find parent element');
+    return;
+  }
+  // while (elem !== undefined && elem.firstChild) {
+  //   // clear out old contents
+  //   elem.removeChild(elem.lastChild);
+  // }
+  
+  var svgClass = `legend-${id}`;
+
+  var div = d3
+    .select(elem)
+    .append('div')
+    .attr('class', 'matrix-legend')
+    .attr('width', 'auto')
+    .append('svg').attr('id', svgClass);
+
+var svg = d3.select(`#${svgClass}`)
+svg.append('circle')
+
+  // append svg
+  // var svgClass = `legend-${id}`;
+  //   var svg = d3
+  //     .select(elem)
+  //     .append('svg')
+  //     .attr('id', svgClass)
+  //     .attr('width', width + margin.left + margin.right)
+  //     .attr('height', '36px')
+  //     .append('g');
+
+      // svg.selectAll('mydots')
+      //   .data(legend)
+      //   .enter()
+      //   .append('circle')
+      //   .attr('cx', 100)
+      //   .attr('cy', function (d, i) {
+      //     return 100 + i * 25;
+      //   }) // 100 is where the first dot appears. 25 is the distance between dots
+      //   .attr('r', 7)
+      //   .style('fill', function (d) {
+      //     return d.color;
+      //   });
+
+  //if the legend is a range
+  if (options.legendType == 'range') {
+  }
+
+  //if the legend is categorical
+}
+
+/**
+ *
+ * @param {*} data Data for the chord diagram
+ * @param {*} id The panel id
+ * @param {string} src The data series that will act as the source
+ * @param {string} target The data series that will act as * the target
+ * @param {string} val The data series that will act as the value
+ * @param {number} height Height of panel
+ * @return {*} A d3 callback
+ */
+function legend(legend, id, height, options) {
+  const theme = useTheme2();
+  const ref = useD3((svg) => {
+    renderLegend(svg, id, height, legend, options, theme);
+  });
+  // const ref = 'div'
+  return ref;
+}
+
+export { legend, renderLegend };