no inheratance

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

 // Libraries
 // Libraries
-import React from 'react';
+import React, { PureComponent } from 'react';
 
 
 // Services & Utils
 // Services & Utils
-import { DisplayValue } from '@grafana/ui';
+import { DisplayValue, PanelProps, BarGauge } from '@grafana/ui';
 import { config } from 'app/core/config';
 import { config } from 'app/core/config';
 
 
-// Components
-import { BarGauge } from '@grafana/ui';
-
 // Types
 // Types
 import { BarGaugeOptions } from './types';
 import { BarGaugeOptions } from './types';
-import { SingleStatBase } from '../singlestat2/SingleStatBase';
+import { getSingleStatValues } from '../singlestat2/SingleStatPanel';
+import { ProcessedValuesRepeater } from '../singlestat2/ProcessedValuesRepeater';
 
 
-export class BarGaugePanel extends SingleStatBase<BarGaugeOptions> {
-  renderStat(value: DisplayValue, width: number, height: number) {
+export class BarGaugePanel extends PureComponent<PanelProps<BarGaugeOptions>> {
+  renderValue = (value: DisplayValue, width: number, height: number): JSX.Element => {
     const { options } = this.props;
     const { options } = this.props;
 
 
     return (
     return (
@@ -26,5 +24,24 @@ export class BarGaugePanel extends SingleStatBase<BarGaugeOptions> {
         theme={config.theme}
         theme={config.theme}
       />
       />
     );
     );
+  };
+
+  getProcessedValues = (): DisplayValue[] => {
+    return getSingleStatValues(this.props);
+  };
+
+  render() {
+    const { height, width, options, panelData } = this.props;
+    const { orientation } = options;
+    return (
+      <ProcessedValuesRepeater
+        getProcessedValues={this.getProcessedValues}
+        renderValue={this.renderValue}
+        width={width}
+        height={height}
+        source={panelData}
+        orientation={orientation}
+      />
+    );
   }
   }
 }
 }

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

 // Libraries
 // Libraries
-import React from 'react';
+import React, { PureComponent } from 'react';
 
 
 // Services & Utils
 // Services & Utils
 import { config } from 'app/core/config';
 import { config } from 'app/core/config';
@@ -9,11 +9,12 @@ import { Gauge } from '@grafana/ui';
 
 
 // Types
 // Types
 import { GaugeOptions } from './types';
 import { GaugeOptions } from './types';
-import { DisplayValue } from '@grafana/ui/src/utils/displayValue';
-import { SingleStatBase } from '../singlestat2/SingleStatBase';
+import { DisplayValue, PanelProps } from '@grafana/ui';
+import { getSingleStatValues } from '../singlestat2/SingleStatPanel';
+import { ProcessedValuesRepeater } from '../singlestat2/ProcessedValuesRepeater';
 
 
-export class GaugePanel extends SingleStatBase<GaugeOptions> {
-  renderStat(value: DisplayValue, width: number, height: number) {
+export class GaugePanel extends PureComponent<PanelProps<GaugeOptions>> {
+  renderValue = (value: DisplayValue, width: number, height: number): JSX.Element => {
     const { options } = this.props;
     const { options } = this.props;
 
 
     return (
     return (
@@ -29,5 +30,24 @@ export class GaugePanel extends SingleStatBase<GaugeOptions> {
         theme={config.theme}
         theme={config.theme}
       />
       />
     );
     );
+  };
+
+  getProcessedValues = (): DisplayValue[] => {
+    return getSingleStatValues(this.props);
+  };
+
+  render() {
+    const { height, width, options, panelData } = this.props;
+    const { orientation } = options;
+    return (
+      <ProcessedValuesRepeater
+        getProcessedValues={this.getProcessedValues}
+        renderValue={this.renderValue}
+        width={width}
+        height={height}
+        source={panelData}
+        orientation={orientation}
+      />
+    );
   }
   }
 }
 }

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

+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
+  processFlag?: boolean; // 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 { processFlag, source } = this.props;
+    if (processFlag !== prevProps.processFlag || 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/SingleStatBase.tsx

-import React, { PureComponent } from 'react';
-import { processSingleStatPanelData, DisplayValue, PanelProps } from '@grafana/ui';
-import { config } from 'app/core/config';
-import { VizRepeater, getDisplayProcessor } from '@grafana/ui';
-import { SingleStatBaseOptions } from './types';
-
-export interface State {
-  values: DisplayValue[];
-}
-
-export class SingleStatBase<T extends SingleStatBaseOptions> extends PureComponent<PanelProps<T>, State> {
-  constructor(props: PanelProps<T>) {
-    super(props);
-    this.state = {
-      values: this.findDisplayValues(props),
-    };
-  }
-
-  componentDidUpdate(prevProps: PanelProps<T>) {
-    if (this.props.panelData !== prevProps.panelData) {
-      this.setState({ values: this.findDisplayValues(this.props) });
-    }
-  }
-
-  findDisplayValues(props: PanelProps<T>): DisplayValue[] {
-    const { panelData, replaceVariables, options } = this.props;
-    const { valueOptions, valueMappings } = options;
-    const processor = getDisplayProcessor({
-      unit: valueOptions.unit,
-      decimals: valueOptions.decimals,
-      mappings: valueMappings,
-      thresholds: options.thresholds,
-
-      prefix: replaceVariables(valueOptions.prefix),
-      suffix: replaceVariables(valueOptions.suffix),
-      theme: config.theme,
-    });
-    return processSingleStatPanelData({
-      panelData: panelData,
-      stat: valueOptions.stat,
-    }).map(stat => processor(stat.value));
-  }
-
-  /**
-   * Subclasses will fill in appropriatly
-   */
-  renderStat(value: DisplayValue, width: number, height: number) {
-    return <div style={{ width, height, border: '1px solid red' }}>{value.text}</div>;
-  }
-
-  render() {
-    const { height, width, options } = this.props;
-    const { orientation } = options;
-    const { values } = this.state;
-    return (
-      <VizRepeater height={height} width={width} values={values} orientation={orientation}>
-        {({ vizHeight, vizWidth, value }) => this.renderStat(value, vizWidth, vizHeight)}
-      </VizRepeater>
-    );
-  }
-}

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

 // Libraries
 // Libraries
-import React, { CSSProperties } from 'react';
+import React, { PureComponent, CSSProperties } from 'react';
 
 
 // Types
 // Types
 import { SingleStatOptions } from './types';
 import { SingleStatOptions } from './types';
-import { DisplayValue } from '@grafana/ui/src/utils/displayValue';
-import { SingleStatBase } from './SingleStatBase';
 
 
-export class SingleStatPanel extends SingleStatBase<SingleStatOptions> {
-  renderStat(value: DisplayValue, width: number, height: number) {
+import { processSingleStatPanelData, DisplayValue, PanelProps } from '@grafana/ui';
+import { config } from 'app/core/config';
+import { getDisplayProcessor } from '@grafana/ui';
+import { ProcessedValuesRepeater } from './ProcessedValuesRepeater';
+
+export const getSingleStatValues = (props: PanelProps<SingleStatOptions>): DisplayValue[] => {
+  const { panelData, replaceVariables, options } = props;
+  const { valueOptions, valueMappings } = options;
+  const processor = getDisplayProcessor({
+    unit: valueOptions.unit,
+    decimals: valueOptions.decimals,
+    mappings: valueMappings,
+    thresholds: options.thresholds,
+
+    prefix: replaceVariables(valueOptions.prefix),
+    suffix: replaceVariables(valueOptions.suffix),
+    theme: config.theme,
+  });
+  return processSingleStatPanelData({
+    panelData: panelData,
+    stat: valueOptions.stat,
+  }).map(stat => processor(stat.value));
+};
+
+export class SingleStatPanel extends PureComponent<PanelProps<SingleStatOptions>> {
+  renderValue = (value: DisplayValue, width: number, height: number): JSX.Element => {
     const style: CSSProperties = {};
     const style: CSSProperties = {};
     style.margin = '0 auto';
     style.margin = '0 auto';
     style.fontSize = '250%';
     style.fontSize = '250%';
@@ -21,5 +43,24 @@ export class SingleStatPanel extends SingleStatBase<SingleStatOptions> {
         <div style={style}>{value.text}</div>
         <div style={style}>{value.text}</div>
       </div>
       </div>
     );
     );
+  };
+
+  getProcessedValues = (): DisplayValue[] => {
+    return getSingleStatValues(this.props);
+  };
+
+  render() {
+    const { height, width, options, panelData } = this.props;
+    const { orientation } = options;
+    return (
+      <ProcessedValuesRepeater
+        getProcessedValues={this.getProcessedValues}
+        renderValue={this.renderValue}
+        width={width}
+        height={height}
+        source={panelData}
+        orientation={orientation}
+      />
+    );
   }
   }
 }
 }