39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
|
import Chartkick from 'chartkick';
|
||
|
|
import Highcharts from 'highcharts';
|
||
|
|
import { toggle, delegate } from '@utils';
|
||
|
|
|
||
|
|
export default function () {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
function toggleChart(event: MouseEvent) {
|
||
|
|
const nextSelectorItem = event.target as HTMLButtonElement,
|
||
|
|
chartClass = nextSelectorItem.dataset.toggleChart,
|
||
|
|
nextChart = chartClass
|
||
|
|
? document.querySelector<HTMLDivElement>(chartClass)
|
||
|
|
: undefined,
|
||
|
|
nextChartId = nextChart?.children[0]?.id,
|
||
|
|
currentSelectorItem = nextSelectorItem.parentElement?.querySelector(
|
||
|
|
'.segmented-control-item-active'
|
||
|
|
),
|
||
|
|
currentChart =
|
||
|
|
nextSelectorItem.parentElement?.parentElement?.querySelector<HTMLDivElement>(
|
||
|
|
'.chart:not(.hidden)'
|
||
|
|
);
|
||
|
|
|
||
|
|
// Change the current selector and the next selector states
|
||
|
|
currentSelectorItem?.classList.toggle('segmented-control-item-active');
|
||
|
|
nextSelectorItem.classList.toggle('segmented-control-item-active');
|
||
|
|
|
||
|
|
// Hide the currently shown chart and show the new one
|
||
|
|
currentChart && toggle(currentChart);
|
||
|
|
nextChart && toggle(nextChart);
|
||
|
|
|
||
|
|
// Reflow needed, see https://github.com/highcharts/highcharts/issues/1979
|
||
|
|
nextChartId && Chartkick.charts[nextChartId]?.getChartObject()?.reflow();
|
||
|
|
}
|
||
|
|
|
||
|
|
delegate('click', '[data-toggle-chart]', toggleChart);
|
||
|
|
|
||
|
|
Chartkick.use(Highcharts);
|