Merge pull request #27 from netsage-project/1.1.3

1.1.3

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 {}