Add a wrapper to catch chart rendering before chartkick is loaded

This commit is contained in:
Paul Chavard 2020-10-06 18:35:22 +02:00
parent d8852c7dc5
commit 5df7a729e7
3 changed files with 44 additions and 1 deletions

View file

@ -1,6 +1,6 @@
import Chartkick from 'chartkick';
import Highcharts from 'highcharts';
import { toggle, delegate } from '@utils';
import { toggle, delegate, fire } from '@utils';
export default function () {
return null;
@ -34,3 +34,4 @@ delegate('click', '[data-toggle-chart]', toggleChart);
Chartkick.use(Highcharts);
window.Chartkick = Chartkick;
fire(window, 'chartkick:ready');

View file

@ -0,0 +1,41 @@
// Ruby chartkick helper implementation assumes Chartkick is already loaded.
// It has no way to delay execution. So we wrap all the Chartkick classes
// to queue rendering for when Chartkick is loaded.
class AreaChart {
constructor(...args) {
charts.add(['AreaChart', args]);
}
}
class PieChart {
constructor(...args) {
charts.add(['PieChart', args]);
}
}
class LineChart {
constructor(...args) {
charts.add(['LineChart', args]);
}
}
class ColumnChart {
constructor(...args) {
charts.add(['ColumnChart', args]);
}
}
const charts = new Set();
function initialize() {
for (const [ChartType, args] of charts) {
new window.Chartkick[ChartType](...args);
}
charts.clear();
}
if (!window.Chartkick) {
window.Chartkick = { AreaChart, PieChart, LineChart, ColumnChart };
addEventListener('chartkick:ready', initialize);
}

View file

@ -13,6 +13,7 @@ import '../shared/remote-input';
import '../shared/franceconnect';
import '../shared/toggle-target';
import '../new_design/chartkick';
import '../new_design/dropdown';
import '../new_design/form-validation';
import '../new_design/procedure-context';