demarches-normaliennes/app/javascript/components/Chartkick.jsx

38 lines
1.2 KiB
React
Raw Normal View History

import Chartkick from 'chartkick';
import Highcharts from 'highcharts';
import { toggle, delegate, fire } from '@utils';
2020-04-30 15:42:29 +02:00
export default function () {
return null;
}
function toggleChart(event) {
2018-10-09 11:44:02 +02:00
const nextSelectorItem = event.target,
chartClass = event.target.dataset.toggleChart,
2018-10-09 11:44:02 +02:00
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
2018-10-09 11:44:02 +02:00
currentSelectorItem.classList.toggle('segmented-control-item-active');
nextSelectorItem.classList.toggle('segmented-control-item-active');
// Hide the currently shown chart and show the new one
2018-10-09 11:44:02 +02:00
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;
fire(window, 'chartkick:ready');