From 36d67f22e9beef4479ab60ddd9f481707272f455 Mon Sep 17 00:00:00 2001
From: ryan <ryantxu@gmail.com>
Date: Wed, 13 Mar 2019 11:24:18 -0700
Subject: [PATCH 1/2] generic repeater

---
 .../src/components/VizRepeater/VizRepeater.tsx | 18 +++++++++---------
 .../plugins/panel/bargauge/BarGaugePanel.tsx   |  2 +-
 public/app/plugins/panel/gauge/GaugePanel.tsx  |  2 +-
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/grafana-ui/src/components/VizRepeater/VizRepeater.tsx b/packages/grafana-ui/src/components/VizRepeater/VizRepeater.tsx
index 767be6764ca..a78a362d616 100644
--- a/packages/grafana-ui/src/components/VizRepeater/VizRepeater.tsx
+++ b/packages/grafana-ui/src/components/VizRepeater/VizRepeater.tsx
@@ -1,23 +1,23 @@
 import React, { PureComponent } from 'react';
-import { SingleStatValueInfo, VizOrientation } from '../../types';
+import { VizOrientation } from '../../types';
 
-interface RenderProps {
+interface RenderProps<T> {
   vizWidth: number;
   vizHeight: number;
-  valueInfo: SingleStatValueInfo;
+  value: T;
 }
 
-interface Props {
-  children: (renderProps: RenderProps) => JSX.Element | JSX.Element[];
+interface Props<T> {
+  children: (renderProps: RenderProps<T>) => JSX.Element | JSX.Element[];
   height: number;
   width: number;
-  values: SingleStatValueInfo[];
+  values: T[];
   orientation: VizOrientation;
 }
 
 const SPACE_BETWEEN = 10;
 
-export class VizRepeater extends PureComponent<Props> {
+export class VizRepeater<T> extends PureComponent<Props<T>> {
   getOrientation(): VizOrientation {
     const { orientation, width, height } = this.props;
 
@@ -64,10 +64,10 @@ export class VizRepeater extends PureComponent<Props> {
 
     return (
       <div style={repeaterStyle}>
-        {values.map((valueInfo, index) => {
+        {values.map((value, index) => {
           return (
             <div key={index} style={itemStyles}>
-              {children({ vizHeight, vizWidth, valueInfo })}
+              {children({ vizHeight, vizWidth, value })}
             </div>
           );
         })}
diff --git a/public/app/plugins/panel/bargauge/BarGaugePanel.tsx b/public/app/plugins/panel/bargauge/BarGaugePanel.tsx
index cef28414e73..aad6b00fdc0 100644
--- a/public/app/plugins/panel/bargauge/BarGaugePanel.tsx
+++ b/public/app/plugins/panel/bargauge/BarGaugePanel.tsx
@@ -49,7 +49,7 @@ export class BarGaugePanel extends PureComponent<Props> {
 
     return (
       <VizRepeater height={height} width={width} values={values} orientation={options.orientation}>
-        {({ vizHeight, vizWidth, valueInfo }) => this.renderBarGauge(valueInfo.value, vizWidth, vizHeight)}
+        {({ vizHeight, vizWidth, value }) => this.renderBarGauge(value, vizWidth, vizHeight)}
       </VizRepeater>
     );
   }
diff --git a/public/app/plugins/panel/gauge/GaugePanel.tsx b/public/app/plugins/panel/gauge/GaugePanel.tsx
index ca7f4d5057e..f2f53cdc2ee 100644
--- a/public/app/plugins/panel/gauge/GaugePanel.tsx
+++ b/public/app/plugins/panel/gauge/GaugePanel.tsx
@@ -52,7 +52,7 @@ export class GaugePanel extends PureComponent<Props> {
 
     return (
       <VizRepeater height={height} width={width} values={values} orientation={VizOrientation.Auto}>
-        {({ vizHeight, vizWidth, valueInfo }) => this.renderGauge(valueInfo.value, vizWidth, vizHeight)}
+        {({ vizHeight, vizWidth, value }) => this.renderGauge(value, vizWidth, vizHeight)}
       </VizRepeater>
     );
   }

From 6472c2bcd9484b03416c9aa34976c93670959b84 Mon Sep 17 00:00:00 2001
From: ryan <ryantxu@gmail.com>
Date: Wed, 13 Mar 2019 11:30:52 -0700
Subject: [PATCH 2/2] generic repeater

---
 public/app/plugins/panel/bargauge/BarGaugePanel.tsx | 6 +++---
 public/app/plugins/panel/gauge/GaugePanel.tsx       | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/public/app/plugins/panel/bargauge/BarGaugePanel.tsx b/public/app/plugins/panel/bargauge/BarGaugePanel.tsx
index aad6b00fdc0..9f60c3440eb 100644
--- a/public/app/plugins/panel/bargauge/BarGaugePanel.tsx
+++ b/public/app/plugins/panel/bargauge/BarGaugePanel.tsx
@@ -10,12 +10,12 @@ import { BarGauge, VizRepeater } from '@grafana/ui';
 
 // Types
 import { BarGaugeOptions } from './types';
-import { PanelProps } from '@grafana/ui/src/types';
+import { PanelProps, SingleStatValueInfo } from '@grafana/ui/src/types';
 
 interface Props extends PanelProps<BarGaugeOptions> {}
 
 export class BarGaugePanel extends PureComponent<Props> {
-  renderBarGauge(value, width, height) {
+  renderBarGauge(value: SingleStatValueInfo, width, height) {
     const { replaceVariables, options } = this.props;
     const { valueOptions } = options;
 
@@ -24,7 +24,7 @@ export class BarGaugePanel extends PureComponent<Props> {
 
     return (
       <BarGauge
-        value={value}
+        value={value.value as number | null}
         width={width}
         height={height}
         prefix={prefix}
diff --git a/public/app/plugins/panel/gauge/GaugePanel.tsx b/public/app/plugins/panel/gauge/GaugePanel.tsx
index f2f53cdc2ee..f309b38e67d 100644
--- a/public/app/plugins/panel/gauge/GaugePanel.tsx
+++ b/public/app/plugins/panel/gauge/GaugePanel.tsx
@@ -10,12 +10,12 @@ import { Gauge, VizRepeater } from '@grafana/ui';
 
 // Types
 import { GaugeOptions } from './types';
-import { PanelProps, VizOrientation } from '@grafana/ui/src/types';
+import { PanelProps, VizOrientation, SingleStatValueInfo } from '@grafana/ui/src/types';
 
 interface Props extends PanelProps<GaugeOptions> {}
 
 export class GaugePanel extends PureComponent<Props> {
-  renderGauge(value, width, height) {
+  renderGauge(value: SingleStatValueInfo, width, height) {
     const { replaceVariables, options } = this.props;
     const { valueOptions } = options;
 
@@ -24,7 +24,7 @@ export class GaugePanel extends PureComponent<Props> {
 
     return (
       <Gauge
-        value={value}
+        value={value.value as number | null}
         width={width}
         height={height}
         prefix={prefix}