Merge pull request #27 from netsage-project/1.1.3

1.1.3

Author: KatrinaTurner

package.json

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

src/SankeyPanel.tsx

@@ -51,6 +51,7 @@ export const SankeyPanel: React.FC<Props> = ({ options, data, width, height, id
         field={field}
         nodeWidth={graphOptions.nodeWidth}
         nodePadding={graphOptions.nodePadding}
+        labelSize={graphOptions.labelSize}
         iteration={graphOptions.iteration}
       />
     </g>

src/components/Node.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import { useTheme2 } from '@grafana/ui';
+// import { useTheme2 } from '@grafana/ui';
 
 interface NodeProps {
   data: any;
   textColor: string;
   nodeColor: string;
   panelId: any;
+  labelSize: number;
 }
 
 /**
@@ -16,8 +17,8 @@ interface NodeProps {
  * @param nodeColor is set in the editor panel, the fill color of the nodes
  * @return {*}  the node and its label
  */
-export const Node: React.FC<NodeProps> = ({ data, textColor, nodeColor, panelId }) => {
-  const theme = useTheme2();
+export const Node: React.FC<NodeProps> = ({ data, textColor, nodeColor, panelId, labelSize }) => {
+  // const theme = useTheme2();
 
   let x0 = data.x0;
   let x1 = data.x1;
@@ -29,7 +30,8 @@ export const Node: React.FC<NodeProps> = ({ data, textColor, nodeColor, panelId
 
   const width = x1 - x0;
   const strokeColor = 'black';
-  const fontSize = theme.typography.fontSize;
+  // const fontSize = theme.typography.fontSize;
+  const fontSize = labelSize+'px';
   const className = `sankey-node${panelId}`;
 
   return (

src/components/Sankey.tsx

@@ -22,6 +22,7 @@ interface SankeyProps {
   field: any;
   nodeWidth: number;
   nodePadding: number;
+  labelSize: number;
   iteration: number;
 }
 
@@ -40,6 +41,7 @@ export const Sankey: React.FC<SankeyProps> = ({
   field,
   nodeWidth,
   nodePadding,
+  labelSize,
   iteration,
 }) => {
   // const theme = useTheme2();
@@ -78,7 +80,7 @@ export const Sankey: React.FC<SankeyProps> = ({
         </g>
         <g transform={`translate(${MARGIN.left}, ${MARGIN.top})`}>
           {nodes.map((d: { index: any; x0: any; x1: any; y0: any; y1: any; name: any; value: any }, i: any) => (
-            <Node data={d} key={i} textColor={textColor} nodeColor={nodeColor} panelId={id} />
+            <Node data={d} key={i} textColor={textColor} nodeColor={nodeColor} panelId={id} labelSize={labelSize} />
           ))}
         </g>
       </svg>

src/module.ts

@@ -51,6 +51,17 @@ export const plugin = new PanelPlugin<SankeyOptions>(SankeyPanel)
           step: 1,
         },
       })
+      .addSliderInput({
+        path: 'labelSize',
+        name: 'Label Size',
+        description: 'The font size of the labels in px',
+        defaultValue: 14,
+        settings: {
+          min: 6,
+          max: 24,
+          step: 1,
+        },
+      })
       .addSelect({
         path: 'valueField',
         name: 'Value Field',
@@ -73,7 +84,8 @@ export const plugin = new PanelPlugin<SankeyOptions>(SankeyPanel)
           },
         },
         // defaultValue: options[0],
-      }).addSliderInput({
+      })
+      .addSliderInput({
         path: 'iteration',
         name: 'Layout iterations',
         defaultValue: 7,

src/types.ts

@@ -7,6 +7,7 @@ export interface SankeyOptions {
   nodePadding: number;
   iteration: number;
   valueField: string;
+  labelSize: number;
 }
 
 export interface SankeyFieldConfig {}