feat: customizable tooltip graph scaling (#50)

- defaults graphs to not scale relative to the bandwidth of the link
- adds toggle to scale to include bandwidths if desired

CHANGELOG.md

@@ -4,12 +4,11 @@ All notable changes to this project will be documented in this file. See [standa
 
 ### [0.3.5](https://github.com/knightss27/grafana-network-weathermap/compare/v0.3.4...v0.3.5) (2023-01-25)
 
-
 ### Features
 
-* dashboard links open in new tab ([2f45eba](https://github.com/knightss27/grafana-network-weathermap/commit/2f45eba0744a724412a77a1dea30add4ea9a124a))
-* graphs ([#41](https://github.com/knightss27/grafana-network-weathermap/issues/41), [#11](https://github.com/knightss27/grafana-network-weathermap/issues/11)) ([297b980](https://github.com/knightss27/grafana-network-weathermap/commit/297b98084d0dc04ab9b87030cba0bdf240400271))
-* node-specific dashboard links ([#36](https://github.com/knightss27/grafana-network-weathermap/issues/36)) ([5a9f51f](https://github.com/knightss27/grafana-network-weathermap/commit/5a9f51fad90d3f2a5431bb4de8a45f378de1d77b))
+- dashboard links open in new tab ([2f45eba](https://github.com/knightss27/grafana-network-weathermap/commit/2f45eba0744a724412a77a1dea30add4ea9a124a))
+- graphs ([#41](https://github.com/knightss27/grafana-network-weathermap/issues/41), [#11](https://github.com/knightss27/grafana-network-weathermap/issues/11)) ([297b980](https://github.com/knightss27/grafana-network-weathermap/commit/297b98084d0dc04ab9b87030cba0bdf240400271))
+- node-specific dashboard links ([#36](https://github.com/knightss27/grafana-network-weathermap/issues/36)) ([5a9f51f](https://github.com/knightss27/grafana-network-weathermap/commit/5a9f51fad90d3f2a5431bb4de8a45f378de1d77b))
 
 ### [0.3.4](https://github.com/knightss27/grafana-network-weathermap/compare/v0.3.3...v0.3.4) (2022-12-13)
 

src/WeathermapPanel.tsx

@@ -506,13 +506,13 @@ export const WeathermapPanel: React.FC<PanelProps<SimpleOptions>> = (props: Pane
               Throughput (%) - Inbound: {hoveredLink.link.sides.Z.currentPercentageText}, Outbound:{' '}
               {hoveredLink.link.sides.A.currentPercentageText}
             </div>
-            <div style={{ fontSize: wm.settings.tooltip.fontSize }}>
+            <div style={{ fontSize: wm.settings.tooltip.fontSize, paddingBottom: '4px' }}>
               {hoveredLink.link.sides[hoveredLink.side].dashboardLink.length > 0 ? 'Click to see more.' : ''}
             </div>
             {(hoveredLink.link.sides.A.query || hoveredLink.link.sides.Z.query) && filteredGraphQueries.length > 0 ? (
               <React.Fragment>
                 <TimeSeries
-                  width={300}
+                  width={250}
                   height={100}
                   timeRange={timeRange}
                   timeZone={getTimeZone()}
@@ -538,7 +538,10 @@ export const WeathermapPanel: React.FC<PanelProps<SimpleOptions>> = (props: Pane
                   }}
                   tweakScale={(opts: ScaleProps, forField: Field<any, Vector<any>>) => {
                     opts.softMin = 0;
-                    if (hoveredLink.link.sides[hoveredLink.side].bandwidth > 0) {
+                    if (
+                      wm.settings.tooltip.scaleToBandwidth &&
+                      hoveredLink.link.sides[hoveredLink.side].bandwidth > 0
+                    ) {
                       opts.softMax = hoveredLink.link.sides[hoveredLink.side].bandwidth;
                     }
                     return opts;
@@ -567,22 +570,29 @@ export const WeathermapPanel: React.FC<PanelProps<SimpleOptions>> = (props: Pane
                     );
                   }}
                 </TimeSeries>
-                <div style={{ display: 'flex', paddingTop: '10px' }}>
+                <div style={{ display: 'flex', alignItems: 'center', paddingTop: '10px' }}>
                   <div
                     style={{
-                      fontSize: wm.settings.tooltip.fontSize,
-                      borderLeft: `10px solid ${wm.settings.tooltip.inboundColor}`,
+                      width: '10px',
+                      height: '3px',
+                      background: wm.settings.tooltip.inboundColor,
                       paddingLeft: '5px',
-                      marginRight: '10px',
+                      marginRight: '4px',
                     }}
-                  >
-                    Inbound
-                  </div>
+                  ></div>
+                  <div style={{ fontSize: wm.settings.tooltip.fontSize }}>Inbound</div>
+                  <div
+                    style={{
+                      width: '10px',
+                      height: '3px',
+                      background: wm.settings.tooltip.outboundColor,
+                      marginLeft: '10px',
+                      marginRight: '4px',
+                    }}
+                  ></div>
                   <div
                     style={{
                       fontSize: wm.settings.tooltip.fontSize,
-                      borderLeft: `10px solid ${wm.settings.tooltip.outboundColor}`,
-                      paddingLeft: '5px',
                     }}
                   >
                     Outbound

src/forms/PanelForm.tsx

@@ -419,6 +419,16 @@ export const PanelForm = ({ value, onChange }: Props) => {
             }}
           />
         </InlineLabel>
+        <InlineField grow label="Scale to Include Bandwidth" className={styles.inlineField}>
+          <InlineSwitch
+            value={value.settings.tooltip.scaleToBandwidth}
+            onChange={(e) => {
+              let wm = value;
+              wm.settings.tooltip.scaleToBandwidth = e.currentTarget.checked;
+              onChange(wm);
+            }}
+          />
+        </InlineField>
         <FormDivider title="Scale Options" />
         <InlineField grow label="Scale Title" className={styles.inlineField}>
           <Input

src/forms/WeathermapBuilder.tsx

@@ -74,6 +74,7 @@ export const WeathermapBuilder = (props: Props) => {
         backgroundColor: 'black',
         inboundColor: '#00cf00',
         outboundColor: '#fade2a',
+        scaleToBandwidth: false,
       },
       scale: {
         position: {

src/testData.ts

@@ -80,6 +80,7 @@ export const getData = (theme: any): Weathermap => {
         backgroundColor: 'black',
         inboundColor: '#00cf00',
         outboundColor: '#fade2a',
+        scaleToBandwidth: false,
       },
       scale: {
         position: {

src/types.ts

@@ -19,6 +19,7 @@ export interface TooltipOptions {
   backgroundColor: string;
   inboundColor: string;
   outboundColor: string;
+  scaleToBandwidth: boolean;
 }
 
 export interface AreaSize {

src/utils.ts

@@ -3,7 +3,7 @@ import merge from 'lodash.merge';
 import { Anchor, DrawnNode, Link, Node, Weathermap } from 'types';
 import { v4 as uuidv4 } from 'uuid';
 
-export const CURRENT_VERSION = 12;
+export const CURRENT_VERSION = 13;
 
 let colorsCalculatedCache: { [colors: string]: string } = {};
 
@@ -314,6 +314,7 @@ export function handleVersionedStateUpdates(wm: Weathermap, theme: GrafanaTheme2
         backgroundColor: 'black',
         inboundColor: '#00cf00',
         outboundColor: '#fade2a',
+        scaleToBandwidth: false,
       },
       scale: {
         position: {