Bar Gauge: Show tile (series name) & refactorings & tests (#16397)

* WIP: began work on adding title support to bar gauge

* Feat: BarGauge progress

* wip: trying improve text size handling in bar gauge

* BarGauge: progress on title & value auto sizing

* BarGauge: more auto size handling

* bargauge: minor tweaks

* Added tests

* Refactoring: BarGauge refactoring moving css generation to seperate functions and adding some basic tests

* Refactoring VizRepeater and more

* Fix: updated and fixed tests

public/app/plugins/panel/bargauge/BarGaugePanel.tsx

@@ -2,12 +2,14 @@
 import React, { PureComponent } from 'react';
 
 // Services & Utils
-import { DisplayValue, PanelProps, BarGauge, getSingleStatDisplayValues } from '@grafana/ui';
 import { config } from 'app/core/config';
 
+// Components
+import { BarGauge, VizRepeater, getSingleStatDisplayValues } from '@grafana/ui/src/components';
+
 // Types
 import { BarGaugeOptions } from './types';
-import { ProcessedValuesRepeater } from '../singlestat2/ProcessedValuesRepeater';
+import { PanelProps, DisplayValue } from '@grafana/ui/src/types';
 
 export class BarGaugePanel extends PureComponent<PanelProps<BarGaugeOptions>> {
   renderValue = (value: DisplayValue, width: number, height: number): JSX.Element => {
@@ -21,12 +23,13 @@ export class BarGaugePanel extends PureComponent<PanelProps<BarGaugeOptions>> {
         orientation={options.orientation}
         thresholds={options.thresholds}
         theme={config.theme}
+        itemSpacing={this.getItemSpacing()}
         displayMode={options.displayMode}
       />
     );
   };
 
-  getProcessedValues = (): DisplayValue[] => {
+  getValues = (): DisplayValue[] => {
     return getSingleStatDisplayValues({
       valueMappings: this.props.options.valueMappings,
       thresholds: this.props.options.thresholds,
@@ -37,16 +40,25 @@ export class BarGaugePanel extends PureComponent<PanelProps<BarGaugeOptions>> {
     });
   };
 
+  getItemSpacing(): number {
+    if (this.props.options.displayMode === 'lcd') {
+      return 2;
+    }
+
+    return 10;
+  }
+
   render() {
     const { height, width, options, data, renderCounter } = this.props;
     return (
-      <ProcessedValuesRepeater
-        getProcessedValues={this.getProcessedValues}
+      <VizRepeater
+        source={data}
+        getValues={this.getValues}
         renderValue={this.renderValue}
+        renderCounter={renderCounter}
         width={width}
         height={height}
-        source={data}
-        renderCounter={renderCounter}
+        itemSpacing={this.getItemSpacing()}
         orientation={options.orientation}
       />
     );

public/app/plugins/panel/gauge/GaugePanel.tsx

@@ -9,8 +9,7 @@ import { Gauge } from '@grafana/ui';
 
 // Types
 import { GaugeOptions } from './types';
-import { DisplayValue, PanelProps, getSingleStatDisplayValues } from '@grafana/ui';
-import { ProcessedValuesRepeater } from '../singlestat2/ProcessedValuesRepeater';
+import { DisplayValue, PanelProps, getSingleStatDisplayValues, VizRepeater } from '@grafana/ui';
 
 export class GaugePanel extends PureComponent<PanelProps<GaugeOptions>> {
   renderValue = (value: DisplayValue, width: number, height: number): JSX.Element => {
@@ -31,7 +30,7 @@ export class GaugePanel extends PureComponent<PanelProps<GaugeOptions>> {
     );
   };
 
-  getProcessedValues = (): DisplayValue[] => {
+  getValues = (): DisplayValue[] => {
     return getSingleStatDisplayValues({
       valueMappings: this.props.options.valueMappings,
       thresholds: this.props.options.thresholds,
@@ -45,8 +44,8 @@ export class GaugePanel extends PureComponent<PanelProps<GaugeOptions>> {
   render() {
     const { height, width, options, data, renderCounter } = this.props;
     return (
-      <ProcessedValuesRepeater
-        getProcessedValues={this.getProcessedValues}
+      <VizRepeater
+        getValues={this.getValues}
         renderValue={this.renderValue}
         width={width}
         height={height}

public/app/plugins/panel/singlestat2/ProcessedValuesRepeater.tsx

@@ -1,49 +0,0 @@
-import React, { PureComponent } from 'react';
-import { VizOrientation } from '@grafana/ui';
-import { VizRepeater } from '@grafana/ui';
-
-export interface Props<T> {
-  width: number;
-  height: number;
-  orientation: VizOrientation;
-  source: any; // If this changes, the values will be processed
-  renderCounter: number; // change to force processing
-
-  getProcessedValues: () => T[];
-  renderValue: (value: T, width: number, height: number) => JSX.Element;
-}
-
-interface State<T> {
-  values: T[];
-}
-
-/**
- * This is essentially a cache of processed values.  This checks for changes
- * to the source and then saves the processed values in the State
- */
-export class ProcessedValuesRepeater<T> extends PureComponent<Props<T>, State<T>> {
-  constructor(props: Props<T>) {
-    super(props);
-    this.state = {
-      values: props.getProcessedValues(),
-    };
-  }
-
-  componentDidUpdate(prevProps: Props<T>) {
-    const { renderCounter, source } = this.props;
-    if (renderCounter !== prevProps.renderCounter || source !== prevProps.source) {
-      this.setState({ values: this.props.getProcessedValues() });
-    }
-  }
-
-  render() {
-    const { orientation, height, width, renderValue } = this.props;
-    const { values } = this.state;
-
-    return (
-      <VizRepeater height={height} width={width} values={values} orientation={orientation}>
-        {({ vizHeight, vizWidth, value }) => renderValue(value, vizWidth, vizHeight)}
-      </VizRepeater>
-    );
-  }
-}

public/app/plugins/panel/singlestat2/SingleStatPanel.tsx

@@ -6,11 +6,11 @@ import { config } from 'app/core/config';
 import { getFlotPairs } from '@grafana/ui/src/utils/flotPairs';
 
 // Components
-import { ProcessedValuesRepeater } from './ProcessedValuesRepeater';
+import { VizRepeater } from '@grafana/ui/src/components';
+import { BigValueSparkline, BigValue } from '@grafana/ui/src/components/BigValue/BigValue';
 
 // Types
 import { SingleStatOptions } from './types';
-import { BigValueSparkline, BigValue } from '@grafana/ui/src/components/BigValue/BigValue';
 import {
   DisplayValue,
   PanelProps,
@@ -34,7 +34,7 @@ export class SingleStatPanel extends PureComponent<PanelProps<SingleStatOptions>
     return <BigValue {...value} width={width} height={height} theme={config.theme} />;
   };
 
-  getProcessedValues = (): SingleStatDisplay[] => {
+  getValues = (): SingleStatDisplay[] => {
     const { data, replaceVariables, options, timeRange } = this.props;
     const { valueOptions, valueMappings } = options;
 
@@ -127,8 +127,8 @@ export class SingleStatPanel extends PureComponent<PanelProps<SingleStatOptions>
   render() {
     const { height, width, options, data, renderCounter } = this.props;
     return (
-      <ProcessedValuesRepeater
-        getProcessedValues={this.getProcessedValues}
+      <VizRepeater
+        getValues={this.getValues}
         renderValue={this.renderValue}
         width={width}
         height={height}