Use jsx extension

app/javascript/components/Chartkick.jsx

@@ -0,0 +1,37 @@
+import Chartkick from 'chartkick';
+import Highcharts from 'highcharts';
+import { toggle, delegate, fire } 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;
+fire(window, 'chartkick:ready');