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