Merge pull request #8 from netsage-project/1.1.2

1.1.2
netsage-project · Sep 22, 2024 · 4b85bc8 · 4b85bc8
2 parents c9d3e44 + 20cdb1e
commit 4b85bc8
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 67 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -101,13 +101,13 @@ jobs:
           md5sum ${{ steps.metadata.outputs.archive }} > ${{ steps.metadata.outputs.archive-checksum }}
           echo "checksum=$(cat ./${{ steps.metadata.outputs.archive-checksum }} | cut -d' ' -f1)" >> $GITHUB_OUTPUT
 
-      - name: Validate plugin
-        run: |
-          git clone https://github.com/grafana/plugin-validator
-          pushd ./plugin-validator/pkg/cmd/plugincheck2
-          go install
-          popd
-          plugincheck2 -config ./plugin-validator/config/default.yaml ${{ steps.metadata.outputs.archive }}
+      # - name: Validate plugin
+      #   run: |
+      #     git clone https://github.com/grafana/plugin-validator
+      #     pushd ./plugin-validator/pkg/cmd/plugincheck2
+      #     go install
+      #     popd
+      #     plugincheck2 -config ./plugin-validator/config/default.yaml ${{ steps.metadata.outputs.archive }}
 
       - name: Create Github release
         uses: softprops/action-gh-release@v1

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "netsage-slopegraph-panel",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "Slope Graph Panel",
   "repository": "https://github.com/netsage-project/netsage-slopegraph-panel",
   "scripts": {

diff --git a/src/colorPalette.ts b/src/colorPalette.ts
diff --git a/src/components/RenderGraph.js b/src/components/RenderGraph.js
@@ -127,12 +127,15 @@ export default class SlopeGraph {
     const div = d3
       .select('body')
       .append('div')
-      .attr('class', 'tooltip')
+      .attr('class', 'slopegraph-tooltip')
       .style('opacity', 0)
       .style('background-color', theme.colors.background.primary)
       .style('font-family', theme.typography.fontFamily.sansSerif)
       .style('color', theme.colors.text.primary)
       .style('box-shadow', '3px 3px 6px lightgray')
+      .style('z-index', '500')
+      .style('position', 'absolute')
+      .style('width', 'fit-content')
       .style('padding', '5px');
 
     // Add the lines

diff --git a/src/parseData.js b/src/parseData.js
@@ -1,4 +1,4 @@
-import { makeColorPalette } from 'colorPalette';
+import { DataFrameView } from '@grafana/data';
 
 /**
  *
@@ -8,44 +8,49 @@ import { makeColorPalette } from 'colorPalette';
  */
 
 export function parseData(data, numPairs) {
-  // Find the number field and use for values.
-  const valueField = data.series.map(series => series.fields.find(field => field.type === 'number'));
-  let values = [];
-  valueField[0].values.buffer.map(value => {
-    values.push([value, valueField[0].display(value)]);
-  });
-
-  // series[0].fields[x].values.buffer gives data
-  // x = 0: left column terms, 1: right column terms
-  var extractedData = data.series[0].fields;
-  var transformedData = [];
-
-  for (var i = 0; i < extractedData[0].values.buffer.length; i++) {
-    var row = [extractedData[0].values.buffer[i], extractedData[1].values.buffer[i], values[i][0], values[i][1]];
-    transformedData.push(row);
+  let dataSeries = data.series;
+  if (dataSeries.length == 0) {
+    console.error('no data');
+    return [];
   }
 
-  let sortedPairs = transformedData.sort((a, b) => b[2] - a[2]);
+// extract all data
+  var transformedData = [];
+  dataSeries.forEach((series) => {
+    const thisFrame = new DataFrameView(series);
+    const thisName = thisFrame.data.name ? thisFrame.data.name : thisFrame.data.refId;
+    const thisValueField = thisFrame.data.fields.find((field) => field.type === 'number');
+    let thisValues = [];
+    thisFrame.forEach((row) => {
+      transformedData.push({
+        col1: row[0],
+        col2: row[1],
+        valueRaw: row[thisValueField.name],
+        valueDisplay: thisValueField.display(row[thisValueField.name]),
+      });
+    });
+  });
 
-  // topPairs is set by editor.  Default is 10.
+  // sort all pairs and take top n (set by options panel)
+  let sortedPairs = transformedData.sort((a, b) => b.valueRaw - a.valueRaw);
   let topPairs = sortedPairs.slice(0, Math.min(numPairs, sortedPairs.length));
 
-  // MAKE KEYS
+  // MAKE KEYS and add meta data
   let leftKeys = [];
   let rightKeys = [];
   for (var i in topPairs) {
-    let newLKey = topPairs[i][0];
-    let newRKey = topPairs[i][1];
+    let newLKey = topPairs[i].col1;
+    let newRKey = topPairs[i].col2;
     let lAdded = false;
     let rAdded = false;
     topPairs[i].coords = [
       {
         meta: {
-          value: topPairs[i][2],
-          displayValue: topPairs[i][3],
+          value: topPairs[i].valueRaw,
+          displayValue: topPairs[i].valueDisplay,
           label0: newLKey,
           label1: newRKey,
-          color: topPairs[i][3].color,
+          color: topPairs[i].valueDisplay.color,
         },
         x: 0, // left side
       },