mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
can render something
This commit is contained in:
parent
7de07eb096
commit
b536a9f760
@ -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;
|
||||||
|
23
public/app/plugins/panel/gauge/module.tsx
Normal file
23
public/app/plugins/panel/gauge/module.tsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
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 };
|
18
public/app/plugins/panel/gauge/plugin.json
Normal file
18
public/app/plugins/panel/gauge/plugin.json
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
{
|
||||||
|
"type": "panel",
|
||||||
|
"name": "Gauge",
|
||||||
|
"id": "gauge",
|
||||||
|
|
||||||
|
"state": "alpha",
|
||||||
|
|
||||||
|
"info": {
|
||||||
|
"author": {
|
||||||
|
"name": "Grafana Project",
|
||||||
|
"url": "https://grafana.com"
|
||||||
|
},
|
||||||
|
"logos": {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
99
public/app/viz/Gauge.tsx
Normal file
99
public/app/viz/Gauge.tsx
Normal file
@ -0,0 +1,99 @@
|
|||||||
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
16
public/app/viz/GaugeOptions.tsx
Normal file
16
public/app/viz/GaugeOptions.tsx
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user