Merge pull request #3 from netsage-project/1.0.4

1.0.4

README.md

@@ -15,7 +15,6 @@ The panel will draw links from the first column of data points, to the last in o
 
 ## Customizing
 - **Links:** There are currently two options for link color: multi or single.  It is multi-colored by default.  To choose a single color for the links, toggle the "Single Link color only" option and choose your color from Grafana's color picker.
-- **Text:** You can change the color of the label text by changing the "Text color" option
 - **Nodes:** You can change the color of the rectangular nodes by changing the "Node color" option
 - **Node Width** The width of the nodes can be adjusted with the "Node Width" slider or entering a number in the input box.  This number must be an integer.
 - **Node Padding** The vertical padding between nodes can be adjusted with the "Node Padding" slider or entering a number in the input box.  This number must be an integer.  If your links are too skinny, try adjusting this number

netsage-sankey-panel/MANIFEST.txt

@@ -8,28 +8,29 @@ Hash: SHA512
   "signedByOrg": "netsage",
   "signedByOrgName": "netsage",
   "plugin": "netsage-sankey-panel",
-  "version": "1.0.3",
-  "time": 1632508460398,
+  "version": "1.0.4",
+  "time": 1633020708865,
   "keyId": "7e4d0c6a708866e7",
   "files": {
     "LICENSE": "b40930bbcf80744c86c46a12bc9da056641d722716c378f5659b9e555ef833e1",
     "CHANGELOG.md": "aaa78be4710ef41d56ddab1edbd180ef9f9adfea2f293109aae925dc33a1b9b3",
-    "module.js.map": "cf4245bbc6c423eecc8e462701ddfe51f195a78793c8db4eed4f12105d93e071",
-    "plugin.json": "c20397edf44b45624d0c9c6a64707133d463962e5977f0b236556b430a78e360",
-    "README.md": "c5b30b84e983ea9e852bf89379c95532760406bbfadd0174e1fcaac4fc87081d",
+    "module.js.LICENSE.txt": "0d8f66cd4afb566cb5b7e1540c68f43b939d3eba12ace290f18abc4f4cb53ed0",
+    "module.js.map": "92db609eccf14830dffb590e4806582b5627c3366698e44ef373ec72ccdecc19",
+    "plugin.json": "4843f8978b95ca4e7155eb35da16a15111a22388bfbba4d7915582e7899f684e",
+    "README.md": "496f8ee30c7497dca3ea9b0388b346e9e62569501d05ba83c7d73392c6da0327",
     "img/sankey2.png": "99651eceae6c3e99f6b0317f4eec4f7827d3d4c242b4f3a29d166a17f0e71cf8",
     "img/sankey3.png": "9ec6c9fd8df713ce384b96e13f300f123672b293034a448c99ac1f739c54e117",
     "img/logo.svg": "e1b79c50e08be2be3382fa42850209dc3a7496d56e60a45c4d8a1375a685e633",
-    "module.js": "3951f47b8407b056356a3bd1597a6b0e8d8c5327d8fa1b7353c61083e3ce7ac1"
+    "module.js": "1e7abcda57ec1d11b33c63618742a8e1f4af0720d89d1faffd2ed459e37ff815"
   }
 }
 -----BEGIN PGP SIGNATURE-----
 Version: OpenPGP.js v4.10.1
 Comment: https://openpgpjs.org
 
-wqEEARMKAAYFAmFOGiwACgkQfk0ManCIZueAhgIIjtlOtZ/4qTe7cgKPAqeq
-Hasi/vflFVf6hHvd4qz8P5N+50SfwGlvEOokMcQ1geoD/6/E1cHq2tmM5Ice
-MN/7GAkCCQEiNhw+BBNccYQQpVUBbMXpz1Ox3fg9w7Ln0FBN+NpUi0tXM4jd
-q4yqkEaWBF2sqQsjwzI8qmdN/rCdtOOl2ZhcRw==
-=RYdi
+wqIEARMKAAYFAmFV6yUACgkQfk0ManCIZucd7AIJAb2IQfFfSVKcMfGS1OfW
+wGZEad7qpJTrdYK0kYkuKN9KVFaw6GKmb0Kq9JGQMQvJpgOkikNm7EcbbQzc
+XNG9OYHmAgkBYseZaPkAOUZS4bdCSiIS6i/h7X3RBLpVkRGdn3WKQQ9ojzon
+eeQ7JpUWWolI+G1FMNFgt5cOTM5H7Oo8ydI0B/Y=
+=5Co+
 -----END PGP SIGNATURE-----

netsage-sankey-panel/README.md

@@ -15,7 +15,6 @@ The panel will draw links from the first column of data points, to the last in o
 
 ## Customizing
 - **Links:** There are currently two options for link color: multi or single.  It is multi-colored by default.  To choose a single color for the links, toggle the "Single Link color only" option and choose your color from Grafana's color picker.
-- **Text:** You can change the color of the label text by changing the "Text color" option
 - **Nodes:** You can change the color of the rectangular nodes by changing the "Node color" option
 - **Node Width** The width of the nodes can be adjusted with the "Node Width" slider or entering a number in the input box.  This number must be an integer.
 - **Node Padding** The vertical padding between nodes can be adjusted with the "Node Padding" slider or entering a number in the input box.  This number must be an integer.  If your links are too skinny, try adjusting this number

netsage-sankey-panel/module.js.LICENSE.txt

@@ -0,0 +1,14 @@
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */

netsage-sankey-panel/plugin.json

@@ -25,8 +25,8 @@
       }
     ],
     "screenshots": [{"name":"sankey2", "path":"img/sankey2.png"}, {"name":"sankey3", "path":"img/sankey3.png"}],
-    "version": "1.0.3",
-    "updated": "2021-09-24"
+    "version": "1.0.4",
+    "updated": "2021-09-30"
   },
   "dependencies": {
     "grafanaDependency": ">=7.0.3",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "netsage-sankey-panel",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Sankey Panel Plugin for Grafana",
   "license": "Apache-2.0",
   "repository": "https://github.com/netsage-project/netsage-sankey-panel",

src/SankeyPanel.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
-// import React, { useRef } from 'react';
 import { PanelProps } from '@grafana/data';
 import { SankeyOptions } from 'types';
 import { parseData } from 'dataParser';
 import { Sankey } from './components/Sankey';
-// import * as d3 from 'd3';
-// import * as d3Sankey from 'd3-sankey';
+import { useTheme2 } from '@grafana/ui';
 
 interface Props extends PanelProps<SankeyOptions> {}
 /**
@@ -18,6 +16,7 @@ export const SankeyPanel: React.FC<Props> = ({ options, data, width, height, id
   let graphOptions = {
     ...options,
   };
+  const theme = useTheme2();
   /**
    * Feed data and options into data parser.
    * @param {*} { data, options }
@@ -34,7 +33,8 @@ export const SankeyPanel: React.FC<Props> = ({ options, data, width, height, id
   const rowDisplayNames = parsedData[2];
   const field = parsedData[3];
   const fixColor = parsedData[4];
-  const textColor = fixColor(graphOptions.textColor);
+  // const textColor = fixColor(graphOptions.textColor);
+  const textColor = theme.colors.text.primary;
   const nodeColor = fixColor(graphOptions.nodeColor);
 
   return (

src/components/Node.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTheme2 } from '@grafana/ui';
 
 interface NodeProps {
   data: any;
@@ -16,6 +17,8 @@ interface NodeProps {
  * @return {*}  the node and its label
  */
 export const Node: React.FC<NodeProps> = ({ data, textColor, nodeColor, panelId }) => {
+  const theme = useTheme2();
+
   let x0 = data.x0;
   let x1 = data.x1;
   let y0 = data.y0;
@@ -26,6 +29,7 @@ export const Node: React.FC<NodeProps> = ({ data, textColor, nodeColor, panelId
 
   const width = x1 - x0;
   const strokeColor = 'black';
+  const fontSize = theme.typography.fontSize;
 
   return (
     <>
@@ -49,7 +53,7 @@ export const Node: React.FC<NodeProps> = ({ data, textColor, nodeColor, panelId
         style={{
           fill: textColor,
           alignmentBaseline: 'middle',
-          fontSize: 16,
+          fontSize: fontSize,
           textAnchor: x0 < width / 2 ? 'start' : 'end',
           pointerEvents: 'none',
           userSelect: 'none',

src/components/Sankey.tsx

@@ -4,6 +4,9 @@ import { Node } from './Node';
 import * as d3Sankey from 'd3-sankey';
 import { Tooltip } from './Tooltip';
 import { Headers } from './Headers';
+// import { GrafanaTheme2 } from '@grafana/data';
+// import { useTheme2 } from '@grafana/ui';
+// import { css } from '@emotion/css';
 
 // import '../css/styles.css';
 
@@ -39,6 +42,8 @@ export const Sankey: React.FC<SankeyProps> = ({
   nodePadding,
   iteration,
 }) => {
+  // const theme = useTheme2();
+
   const MARGIN = { top: 75, bottom: 50, right: 20, left: 20 };
   const graphWidth = width - MARGIN.left - MARGIN.right;
   const graphHeight = height - MARGIN.top - MARGIN.bottom;

src/components/Tooltip.tsx

@@ -80,7 +80,12 @@ export const Tooltip: React.FC<TooltipProps> = ({ rowNames, field }) => {
           .html(() => {
             var textVal = field.display(d3.select(this).attr('d'));
             var name = d3.select(this).attr('name');
-            var text = `${name}: <b>${textVal.text} ${textVal.suffix}</b>`;
+            var text;
+            if (textVal.suffix) {
+              text = `${name}: <b>${textVal.text} ${textVal.suffix}</b>`;
+            } else {
+              text = `${name}: <b>${textVal.text}</b>`;
+            }
             return text;
           })
           .style('padding', '10px 15px')

src/dataParser.ts

@@ -185,7 +185,13 @@ export function parseData(data: { series: any[] }, options: { valueFieldName: an
     let rowDisplay = `${pluginDataNodes[currentLink[0]].name}`;
     for (let i = 0; i < currentLink.length - 1; i++) {
       var fieldValues = valueField[0].display(row[numFields]);
-      var displayValue = `${fieldValues.text} ${fieldValues.suffix}`;
+      var displayValue;
+      if (fieldValues.suffix) {
+        displayValue = `${fieldValues.text} ${fieldValues.suffix}`;
+      } else {
+        displayValue = `${fieldValues.text}`;
+      }
+
       pluginDataLinks.push({
         source: currentLink[i],
         target: currentLink[i + 1],

src/module.ts

@@ -1,25 +1,14 @@
 import { PanelPlugin, FieldConfigProperty } from '@grafana/data';
-import { standardOptionsCompat } from 'grafana-plugin-support';
+// import { standardOptionsCompat } from 'grafana-plugin-support';
 import { SankeyOptions } from './types';
 import { SankeyPanel } from './SankeyPanel';
 
-// import { standardOptionsCompat } from 'grafana-plugin-support';
-
 /**
  * Grafana panel plugin main module
  *
  * @param {*} { panel: React.ComponentType<PanelProps<SankeyOptions>> | null }
  * @return {*} { builder: PanelOptionsEditorBuilder<SankeyOptions> }
  */
-const buildStandardOptions = (): any => {
-  const options = [
-    FieldConfigProperty.Decimals,
-    FieldConfigProperty.Unit,
-    // FieldConfigProperty.Color,
-  ];
-
-  return standardOptionsCompat(options);
-};
 
 const monochromeBool = (monochrome: boolean) => (config: SankeyOptions) => config.monochrome === monochrome;
 
@@ -37,11 +26,6 @@ export const plugin = new PanelPlugin<SankeyOptions>(SankeyPanel)
         showIf: monochromeBool(true),
         defaultValue: 'blue',
       })
-      .addColorPicker({
-        path: 'textColor',
-        name: 'Text color',
-        defaultValue: 'black',
-      })
       .addColorPicker({
         path: 'nodeColor',
         name: 'Node color',
@@ -79,5 +63,19 @@ export const plugin = new PanelPlugin<SankeyOptions>(SankeyPanel)
       });
   })
   .useFieldConfig({
-    standardOptions: buildStandardOptions(),
+    disableStandardOptions: [
+      FieldConfigProperty.NoValue,
+      FieldConfigProperty.Max,
+      FieldConfigProperty.Min,
+      FieldConfigProperty.DisplayName,
+    ],
+    standardOptions: {
+      [FieldConfigProperty.Color]: {
+        settings: {
+          byValueSupport: true,
+          bySeriesSupport: true,
+          preferThresholdsMode: true,
+        },
+      },
+    },
   });