can render something

public/app/features/plugins/built_in_plugins.ts

@@ -24,6 +24,7 @@ import * as heatmapPanel from 'app/plugins/panel/heatmap/module';
 import * as tablePanel from 'app/plugins/panel/table/module';
 import * as tablePanel from 'app/plugins/panel/table/module';
 import * as singlestatPanel from 'app/plugins/panel/singlestat/module';
 import * as singlestatPanel from 'app/plugins/panel/singlestat/module';
 import * as gettingStartedPanel from 'app/plugins/panel/gettingstarted/module';
 import * as gettingStartedPanel from 'app/plugins/panel/gettingstarted/module';
+import * as gaugePanel from 'app/plugins/panel/gauge/module';
 
 
 const builtInPlugins = {
 const builtInPlugins = {
   'app/plugins/datasource/graphite/module': graphitePlugin,
   'app/plugins/datasource/graphite/module': graphitePlugin,
@@ -52,6 +53,7 @@ const builtInPlugins = {
   'app/plugins/panel/table/module': tablePanel,
   'app/plugins/panel/table/module': tablePanel,
   'app/plugins/panel/singlestat/module': singlestatPanel,
   'app/plugins/panel/singlestat/module': singlestatPanel,
   'app/plugins/panel/gettingstarted/module': gettingStartedPanel,
   'app/plugins/panel/gettingstarted/module': gettingStartedPanel,
+  'app/plugins/panel/gauge/module': gaugePanel,
 };
 };
 
 
 export default builtInPlugins;
 export default builtInPlugins;

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

+import React, { PureComponent } from 'react';
+import { NullValueMode, PanelProps } from '../../../types';
+import { Gauge } from '../../../viz/Gauge';
+import { getTimeSeriesVMs } from '../../../viz/state/timeSeries';
+
+export interface Options {}
+
+interface Props extends PanelProps<Options> {}
+
+export class GaugePanel extends PureComponent<Props> {
+  render() {
+    const { timeSeries } = this.props;
+
+    const vmSeries = getTimeSeriesVMs({
+      timeSeries: timeSeries,
+      nullValueMode: NullValueMode.Ignore,
+    });
+
+    return <Gauge maxValue={100} minValue={100} timeSeries={vmSeries} />;
+  }
+}
+
+export { GaugePanel as PanelComponent };

public/app/plugins/panel/gauge/plugin.json

+{
+  "type": "panel",
+  "name": "Gauge",
+  "id": "gauge",
+
+  "state": "alpha",
+
+  "info": {
+    "author": {
+      "name": "Grafana Project",
+      "url": "https://grafana.com"
+    },
+    "logos": {
+
+    }
+  }
+}
+

public/app/viz/Gauge.tsx

+import React, { PureComponent } from 'react';
+import $ from 'jquery';
+import { TimeSeriesVMs } from 'app/types';
+import config from '../core/config';
+
+interface Props {
+  timeSeries: TimeSeriesVMs;
+  minValue: number;
+  maxValue: number;
+  showThresholdMarkers?: boolean;
+  thresholds?: number[];
+  showThresholdLables?: boolean;
+}
+
+export class Gauge extends PureComponent<Props> {
+  element: any;
+
+  static defaultProps = {
+    minValue: 0,
+    maxValue: 100,
+    showThresholdMarkers: true,
+    showThresholdLables: false,
+    thresholds: [],
+  };
+
+  componentDidMount() {
+    this.draw();
+  }
+
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps.timeSeries !== this.props.timeSeries) {
+      this.draw();
+    }
+  }
+
+  draw() {
+    const { maxValue, minValue, showThresholdLables, showThresholdMarkers, timeSeries, thresholds } = this.props;
+
+    console.log(timeSeries);
+    const backgroundColor = config.bootData.user.lightTheme ? 'rgb(230,230,230)' : 'rgb(38,38,38)';
+    const fontColor = config.bootData.user.lightTheme ? 'rgb(38,38,38)' : 'rgb(230,230,230)';
+
+    const options = {
+      series: {
+        gauges: {
+          gauge: {
+            min: minValue,
+            max: maxValue,
+            background: { color: backgroundColor },
+            border: { color: null },
+            shadow: { show: false },
+            width: '100%',
+          },
+          frame: { show: false },
+          label: { show: false },
+          layout: { margin: 0, thresholdWidth: 0 },
+          cell: { border: { width: 0 } },
+          threshold: {
+            values: thresholds,
+            label: {
+              show: showThresholdLables,
+              margin: 2,
+              font: { size: 14 },
+            },
+            show: showThresholdMarkers,
+            width: 1,
+          },
+          value: {
+            color: fontColor,
+            formatter: () => {
+              return Math.round(timeSeries[0].stats.avg);
+            },
+            font: {
+              size: 78,
+              family: '"Helvetica Neue", Helvetica, Arial, sans-serif',
+            },
+          },
+          show: true,
+        },
+      },
+    };
+
+    try {
+      $.plot(this.element, timeSeries, options);
+    } catch (err) {
+      console.log('Gauge rendering error', err, options, timeSeries);
+    }
+  }
+
+  getValueText() {}
+
+  render() {
+    return (
+      <div className="singlestat-panel">
+        <div className="graph-panel__chart" ref={e => (this.element = e)} />
+      </div>
+    );
+  }
+}

public/app/viz/GaugeOptions.tsx

+import React, { PureComponent } from 'react';
+import { PanelOptionsProps } from '../types';
+
+interface Props {}
+
+export class GaugeOptions extends PureComponent<PanelOptionsProps<Props>> {
+  render() {
+    return (
+      <div>
+        <div className="section gf-form-group">
+          <h5 className="page-heading">Draw Modes</h5>
+        </div>
+      </div>
+    );
+  }
+}