44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
import { Controller } from '@hotwired/stimulus';
|
|
import { toggle, delegate } from '@utils';
|
|
import Highcharts from 'highcharts';
|
|
import Chartkick from 'chartkick';
|
|
|
|
export class ChartkickController extends Controller {
|
|
async connect() {
|
|
delegate('click', '[data-toggle-chart]', (event) =>
|
|
toggleChart(event as MouseEvent)
|
|
);
|
|
}
|
|
}
|
|
|
|
Chartkick.use(Highcharts);
|
|
function reflow(nextChartId?: string) {
|
|
nextChartId && Chartkick.charts[nextChartId]?.getChartObject()?.reflow();
|
|
}
|
|
|
|
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
|
|
reflow(nextChartId);
|
|
}
|