You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
3.7 KiB
115 lines
3.7 KiB
import { GaugeOptions } from '../models/options/gaugeOptions'; |
|
import { BarOptions } from '../models/options/barOptions'; |
|
import { Series } from '../models/series'; |
|
import { BarSeries } from '../models/barSeries'; |
|
|
|
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'; |
|
import { VizLegend } from '@grafana/ui'; |
|
import { LegendDisplayMode } from '@grafana/schema'; |
|
|
|
import React, { useRef, useEffect, useMemo } from 'react'; |
|
import { css } from 'emotion'; |
|
import * as _ from 'lodash'; |
|
|
|
interface Props extends PanelProps<PanelOptions> {} |
|
|
|
export function Panel({ options, data, width, height, timeRange, onChangeTimeRange, replaceVariables }: Props) { |
|
const grafanaSeriesList = useMemo(() => getGrafanaSeriesList(data, timeRange), [data, timeRange]); |
|
const podContainerRef = useRef<HTMLDivElement>(null); |
|
|
|
const podContainer = useMemo(() => { |
|
const chartHeight = height - 20; |
|
|
|
const chartClickHandler = (event: React.MouseEvent<HTMLDivElement>) => { |
|
event.preventDefault(); |
|
if (options.gauge.link === undefined || options.gauge.link === '') { |
|
return; |
|
} |
|
const link = replaceVariables(options.gauge.link); |
|
window.open(link, '_self'); |
|
}; |
|
|
|
const isLinkActive = options.gauge.link !== undefined && options.gauge.link !== ''; |
|
|
|
return ( |
|
<div |
|
ref={podContainerRef} |
|
className={css` |
|
width: ${width}px; |
|
height: ${chartHeight}px; |
|
cursor: ${isLinkActive ? 'pointer' : 'default'}; |
|
`} |
|
onClick={chartClickHandler} |
|
></div> |
|
); |
|
}, [width, height, options.gauge.link, replaceVariables]); |
|
|
|
useEffect(() => { |
|
let pod; |
|
if (podContainerRef.current === null) { |
|
return; |
|
} |
|
switch (options.visualizationType) { |
|
case Pod.GAUGE: |
|
const series = new Series(grafanaSeriesList, options.gauge.value).getChartwerkSeries(); |
|
const chartwerkGaugeOptions = new GaugeOptions(grafanaSeriesList, options).getChartwerkOptions(); |
|
pod = new ChartwerkGaugePod(podContainerRef.current, series, chartwerkGaugeOptions); |
|
break; |
|
case Pod.BAR: |
|
const barSeries = new BarSeries(grafanaSeriesList).getChartwerkSeries(); |
|
const chartwerkBarOptions = new BarOptions(grafanaSeriesList, onChangeTimeRange).getChartwerkOptions(); |
|
pod = new ChartwerkBarPod(podContainerRef.current, barSeries, chartwerkBarOptions); |
|
break; |
|
default: |
|
throw new Error(`Unknown visualization type: ${options.visualizationType}`); |
|
} |
|
pod.render(); |
|
}, [podContainer, grafanaSeriesList, onChangeTimeRange, options]); |
|
|
|
const legendItems = useMemo( |
|
() => |
|
_.map(grafanaSeriesList, (serie) => { |
|
return { |
|
label: serie.alias, |
|
color: serie.color, |
|
yAxis: 1, |
|
}; |
|
}), |
|
[grafanaSeriesList] |
|
); |
|
|
|
switch (options.visualizationType) { |
|
case Pod.LINE: |
|
case Pod.BAR: |
|
return ( |
|
<div> |
|
{podContainer} |
|
|
|
<VizLegend placement={'bottom'} items={legendItems} displayMode={LegendDisplayMode.List} /> |
|
</div> |
|
); |
|
case Pod.GAUGE: |
|
return ( |
|
<div> |
|
{podContainer} |
|
</div> |
|
); |
|
default: |
|
throw new Error(`Unknown visualization type: ${options.visualizationType}`); |
|
} |
|
} |
|
|
|
function getGrafanaSeriesList(grafanaData: PanelData, timeRange: TimeRange): any[] { |
|
const processor = new DataProcessor({}); |
|
return processor.getSeriesList({ |
|
dataList: grafanaData.series, |
|
range: timeRange, |
|
}); |
|
}
|
|
|