Add a wrapper to catch chart rendering before chartkick is loaded
This commit is contained in:
parent
d8852c7dc5
commit
5df7a729e7
3 changed files with 44 additions and 1 deletions
|
@ -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');
|
||||
|
|
41
app/javascript/new_design/chartkick.js
Normal file
41
app/javascript/new_design/chartkick.js
Normal 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);
|
||||
}
|
|
@ -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';
|
||||
|
|
Loading…
Reference in a new issue