import Chartkick from 'chartkick'; import Highcharts from 'highcharts'; import { toggle, delegate } from '@utils'; export default function () { return null; } function toggleChart(event) { const nextSelectorItem = event.target, chartClass = event.target.dataset.toggleChart, nextChart = document.querySelector(chartClass), nextChartId = nextChart.children[0].id, currentSelectorItem = nextSelectorItem.parentElement.querySelector( '.segmented-control-item-active' ), currentChart = nextSelectorItem.parentElement.parentElement.querySelector( '.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 toggle(currentChart); toggle(nextChart); // Reflow needed, see https://github.com/highcharts/highcharts/issues/1979 Chartkick.charts[nextChartId].getChartObject().reflow(); } delegate('click', '[data-toggle-chart]', toggleChart); Chartkick.use(Highcharts); window.Chartkick = Chartkick;