|
|
|
|
@ -1,11 +1,12 @@
|
|
|
|
|
import { Options } from '../models/options'; |
|
|
|
|
import { Series } from '../models/series'; |
|
|
|
|
|
|
|
|
|
import { PanelOptions } from '../types'; |
|
|
|
|
import { PanelOptions, Pod } from '../types'; |
|
|
|
|
|
|
|
|
|
import { DataProcessor } from '../grafana/data_processor'; |
|
|
|
|
|
|
|
|
|
import { ChartwerkGaugePod } from '@chartwerk/gauge-pod'; |
|
|
|
|
import { ChartwerkBarPod } from '@chartwerk/bar-pod'; |
|
|
|
|
|
|
|
|
|
import { PanelData, TimeRange, PanelProps } from '@grafana/data'; |
|
|
|
|
|
|
|
|
|
@ -16,27 +17,37 @@ import * as _ from 'lodash';
|
|
|
|
|
interface Props extends PanelProps<PanelOptions> {} |
|
|
|
|
|
|
|
|
|
export function Panel({ options, data, width, height, timeZone, timeRange, onChangeTimeRange }: Props) { |
|
|
|
|
console.log('options', options); |
|
|
|
|
const panelOptions = fillGrafanaOptionsWithDefaults(options); |
|
|
|
|
console.log('panelOptions', panelOptions); |
|
|
|
|
const grafanaSeriesList = getGrafanaSeriesList(data, timeRange); |
|
|
|
|
const series = new Series(grafanaSeriesList, options.gauge.value).getChartwerkSeries(); |
|
|
|
|
const series = new Series(grafanaSeriesList, panelOptions.gauge.value).getChartwerkSeries(); |
|
|
|
|
console.log('series', series); |
|
|
|
|
const chartwerkOptions = new Options(grafanaSeriesList, options).getChartwerkOptions(); |
|
|
|
|
const chartwerkOptions = new Options(grafanaSeriesList, panelOptions).getChartwerkOptions(); |
|
|
|
|
|
|
|
|
|
let chartContainer = useRef(null); |
|
|
|
|
// we request animation frame here because we need an existing DOM-element at the moment we render the pod
|
|
|
|
|
window.requestAnimationFrame(() => { |
|
|
|
|
// TODO: switch / case pod type
|
|
|
|
|
const pod = new ChartwerkGaugePod((chartContainer as any).current, series, chartwerkOptions); |
|
|
|
|
let pod; |
|
|
|
|
switch (panelOptions.visualizationType) { |
|
|
|
|
case Pod.GAUGE: |
|
|
|
|
pod = new ChartwerkGaugePod((chartContainer as any).current, series, chartwerkOptions); |
|
|
|
|
break; |
|
|
|
|
case Pod.BAR: |
|
|
|
|
pod = new ChartwerkBarPod((chartContainer as any).current, series, chartwerkOptions); |
|
|
|
|
break; |
|
|
|
|
default: |
|
|
|
|
throw new Error(`Unknown visualization type: ${panelOptions.visualizationType}`); |
|
|
|
|
} |
|
|
|
|
pod.render(); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const isLinkActive = !_.isEmpty(options.gauge.link); |
|
|
|
|
const isLinkActive = !_.isEmpty(panelOptions.gauge.link); |
|
|
|
|
const chartClickHandler = (event: React.MouseEvent<HTMLDivElement>) => { |
|
|
|
|
event.preventDefault(); |
|
|
|
|
if (!isLinkActive) { |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
window.open(options.gauge.link, '_self'); |
|
|
|
|
window.open(panelOptions.gauge.link, '_self'); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
@ -59,3 +70,22 @@ function getGrafanaSeriesList(grafanaData: PanelData, timeRange: TimeRange): any
|
|
|
|
|
range: timeRange, |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function fillGrafanaOptionsWithDefaults(options: PanelOptions): PanelOptions { |
|
|
|
|
const defaults = { |
|
|
|
|
gauge: { |
|
|
|
|
min: {}, |
|
|
|
|
max: {}, |
|
|
|
|
value: {}, |
|
|
|
|
valueSize: 20, |
|
|
|
|
reversed: false, |
|
|
|
|
thresholds: { |
|
|
|
|
arcBackground: 'gray', |
|
|
|
|
defaultColor: 'green', |
|
|
|
|
thresholds: [], |
|
|
|
|
}, |
|
|
|
|
icons: [], |
|
|
|
|
}, |
|
|
|
|
}; |
|
|
|
|
return _.defaultsDeep(options, defaults); |
|
|
|
|
} |
|
|
|
|
|
