Add series title in gauge (#105)

Closes #64.
briangann · Mar 29, 2024 · 3c9c44d · 3c9c44d
1 parent bb2262d
commit 3c9c44d
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 5 deletions.
diff --git a/src/components/Gauge.tsx b/src/components/Gauge.tsx
@@ -325,14 +325,46 @@ export const Gauge: React.FC<GaugeOptions> = (options) => {
     return paths;
   };
 
+  const valueFontSize = scaleLabelFontSize(options.valueFontSize, options.gaugeRadius, options.ticknessGaugeBasis);
+  const titleFontSize = scaleLabelFontSize(options.titleFontSize, options.gaugeRadius, options.ticknessGaugeBasis);
+  const valueLabelY = labelYCalc(0, valueFontSize, labelStart, originY) + options.valueYOffset;
+  const titleLabelY = (
+      labelYCalc(0, titleFontSize, labelStart, originY)
+      + options.titleYOffset
+      - (valueFontSize / 2)
+      - (titleFontSize / 2)
+  );
+
+  const createTitleLabel = (color: string) => {
+    // Only show title if selected and non-empty title
+    if (!options.showTitle || options.displayTitle.length === 0) {
+        return false;
+    }
+
+    // Define title position relative to value label
+    return (
+      <g id='titleLabels'>
+        <text
+          x={labelXCalc(0, 0, options.displayTitle, titleFontSize, labelStart, originX)}
+          y={titleLabelY}
+          fontSize={titleFontSize}
+          textAnchor='middle'
+          fill={theme2.visualization.getColorByName(color)}
+          fontWeight={'bold'}
+          fontFamily={options.titleFont}
+        >
+          {options.displayTitle}
+        </text>
+      </g>
+    );
+  };
+
   const createValueLabel = (color: string) => {
-    const position = 0;
-    const valueFontSize = scaleLabelFontSize(options.valueFontSize, options.gaugeRadius, options.ticknessGaugeBasis);
     return (
       <g id='valueLabels'>
         <text
-          x={labelXCalc(position, 0, options.displayFormatted, valueFontSize, labelStart, originX)}
-          y={labelYCalc(position, valueFontSize, labelStart, originY) + options.valueYOffset}
+          x={labelXCalc(0, 0, options.displayFormatted, valueFontSize, labelStart, originX)}
+          y={valueLabelY}
           fontSize={valueFontSize}
           textAnchor='middle'
           fill={theme2.visualization.getColorByName(color)}
@@ -551,6 +583,14 @@ export const Gauge: React.FC<GaugeOptions> = (options) => {
     }
   }
 
+  let titleColor = options.unitsLabelColor;
+  if (options.showThresholdStateOnTitle) {
+    if (options.displayValue && options.thresholds) {
+      const aThreshold = getActiveThreshold(options.displayValue, options.thresholds.steps);
+      titleColor = aThreshold.color;
+    }
+  }
+
 
   return (
     <div className={divStyles}>
@@ -569,6 +609,7 @@ export const Gauge: React.FC<GaugeOptions> = (options) => {
           {createMajorTickLabels()}
           {createNeedleMarkers(options.needleColor, theme2)}
           {needleElement}
+          {createTitleLabel(titleColor)}
           {createValueLabel(valueColor)}
         </g>
       </svg>

diff --git a/src/components/GaugePanel.tsx b/src/components/GaugePanel.tsx
@@ -99,6 +99,11 @@ export const GaugePanel: React.FC<Props> = ({ options, data, id, width, height,
     return NaN;
   };
 
+  const getDisplayTitle = (index: number) => {
+    const singleMetric = metrics[index];
+    return singleMetric.display.title || '';
+  };
+
   // get the formatted metrics
   const metrics = getValues();
   const thresholdResult = getThresholdForValue(fieldConfig.defaults, getDisplayValue(0), theme2);
@@ -117,13 +122,18 @@ export const GaugePanel: React.FC<Props> = ({ options, data, id, width, height,
         <Gauge
           displayFormatted={getFormattedValue(0)}
           displayValue={getDisplayValue(0)}
+          displayTitle={getDisplayTitle(0)}
+          showTitle={options.showTitle}
           panelId={id}
           panelWidth={width}
           panelHeight={height}
           operatorName={options.operatorName}
           valueYOffset={options.valueYOffset}
           valueFontSize={options.valueFontSize}
           valueFont={options.valueFont}
+          titleYOffset={options.titleYOffset}
+          titleFontSize={options.titleFontSize}
+          titleFont={options.titleFont}
           tickLabelFontSize={options.tickLabelFontSize}
           tickFont={options.tickFont}
           animateNeedleValueTransition={options.animateNeedleValueTransition}
@@ -168,6 +178,7 @@ export const GaugePanel: React.FC<Props> = ({ options, data, id, width, height,
           showThresholdBandMiddleRange={options.showThresholdBandMiddleRange}
           showThresholdBandUpperRange={options.showThresholdBandUpperRange}
           showThresholdStateOnValue={options.showThresholdStateOnValue}
+          showThresholdStateOnTitle={options.showThresholdStateOnTitle}
           showThresholdStateOnBackground={options.showThresholdStateOnBackground}
           needleWidth={options.needleWidth}
           thresholds={fieldConfig.defaults.thresholds}

diff --git a/src/components/types.ts b/src/components/types.ts
@@ -5,13 +5,18 @@ export interface GaugeOptions {
   // data: PanelData | undefined;
   displayFormatted: string;
   displayValue: number | null;
+  showTitle: boolean;
+  displayTitle: string;
   // General
   operatorName: string;
   valueYOffset: number;
+  titleYOffset: number;
 
   // Font Settings
   valueFont: string;
   valueFontSize: number;
+  titleFont: string;
+  titleFontSize: number;
   tickLabelFontSize: number;
   tickFont: string;
 
@@ -78,6 +83,7 @@ export interface GaugeOptions {
   showThresholdBandUpperRange: boolean;
   //
   showThresholdStateOnValue: boolean;
+  showThresholdStateOnTitle: boolean;
   showThresholdStateOnBackground: boolean;
   //
   thresholds: ThresholdsConfig | undefined;

diff --git a/src/migrations.ts b/src/migrations.ts
@@ -263,6 +263,9 @@ export const migrateDefaults = (angular: AngularOptions) => {
     valueYOffset: 0,
     valueFontSize: 22,
     valueFont: FontFamilies.INTER,
+    titleYOffset: 0,
+    titleFontSize: 22,
+    titleFont: FontFamilies.INTER,
     tickLabelFontSize: 18,
     tickFont: FontFamilies.INTER,
     animateNeedleValueTransition: true,
@@ -315,8 +318,11 @@ export const migrateDefaults = (angular: AngularOptions) => {
     showThresholdBandUpperRange: false,
     displayFormatted: '',
     displayValue: null,
+    displayTitle: '',
+    showTitle: false,
     thresholds: undefined,
     showThresholdStateOnValue: false,
+    showThresholdStateOnTitle: false,
     showThresholdStateOnBackground: false
   };
   // next migrate the angular settings

diff --git a/src/module.ts b/src/module.ts
@@ -12,7 +12,6 @@ export const plugin = new PanelPlugin<GaugeOptions>(GaugePanel)
   .useFieldConfig({
     disableStandardOptions: [
       FieldConfigProperty.Color,
-      FieldConfigProperty.DisplayName,
       FieldConfigProperty.Links,
       FieldConfigProperty.Max,
       FieldConfigProperty.Min,
@@ -42,6 +41,13 @@ export const plugin = new PanelPlugin<GaugeOptions>(GaugePanel)
           options: OperatorOptions,
         },
       })
+      .addBooleanSwitch({
+        name: 'Show title',
+        path: 'showTitle',
+        defaultValue: false,
+        category: ['Standard options'],
+        description: 'Show the series title/name in the gauge',
+      })
 
       // Font Settings
       // Value Font
@@ -66,6 +72,29 @@ export const plugin = new PanelPlugin<GaugeOptions>(GaugePanel)
           options: FontSizes,
         },
       })
+      // Font Settings
+      // Title Font
+      .addSelect({
+        name: 'Title Font',
+        path: 'titleFont',
+        description: 'The font of the value text, at the bottom of the gauge',
+        category: ['Font Settings'],
+        defaultValue: FontFamilyOptions[3].value,
+        settings: {
+          options: FontFamilyOptions,
+        },
+      })
+      // unitsLabelFontSize
+      .addSelect({
+        name: 'Title Font Size',
+        path: 'titleFontSize',
+        description: 'Font Size of Title',
+        category: ['Font Settings'],
+        defaultValue: FontSizes[17].value,
+        settings: {
+          options: FontSizes,
+        },
+      })
       // tickFont
       .addSelect({
         name: 'Tick Label Font',
@@ -332,6 +361,17 @@ export const plugin = new PanelPlugin<GaugeOptions>(GaugePanel)
         },
         category: ['Radial Customization'],
       })
+      // titleYOffset
+      .addNumberInput({
+        name: 'Title Y-Offset',
+        path: 'titleYOffset',
+        description: 'Adjust the displayed title up or down the Y-Axis, use negative title to move up, positive for down',
+        defaultValue: 0,
+        settings: {
+          integer: true,
+        },
+        category: ['Radial Customization'],
+      })
       .addNumberInput({
         name: 'Padding',
         path: 'padding',
@@ -572,6 +612,13 @@ export const plugin = new PanelPlugin<GaugeOptions>(GaugePanel)
         defaultValue: false,
         category: ['Thresholds'],
         description: 'Displayed value color changes to state of threshold',
+      })
+      .addBooleanSwitch({
+        name: 'Show Threshold State on Title',
+        path: 'showThresholdStateOnTitle',
+        defaultValue: false,
+        category: ['Thresholds'],
+        description: 'Displayed title color changes to state of threshold',
       });
 
   })