Load chartkick and highcharts only on stat pages

Gemfile.lock

@@ -138,7 +138,7 @@ GEM
       selenium-webdriver
     case_transform (0.2)
       activesupport
-    chartkick (3.3.0)
+    chartkick (3.3.1)
     childprocess (0.9.0)
       ffi (~> 1.0, >= 1.0.11)
     chunky_png (1.3.11)

app/javascript/components/Chartkick.js

@@ -1,8 +1,14 @@
 import Chartkick from 'chartkick';
-import { toggle } from '@utils';
+import Highcharts from 'highcharts';
+import { toggle, delegate } from '@utils';
 
-export function toggleChart(event, chartClass) {
+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(
@@ -23,3 +29,8 @@ export function toggleChart(event, chartClass) {
   // 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;

app/javascript/loaders/Chartkick.js

@@ -0,0 +1,3 @@
+import Loadable from '../components/Loadable';
+
+export default Loadable(() => import('../components/Chartkick'));

app/javascript/packs/application.js

@@ -4,8 +4,6 @@ import Rails from '@rails/ujs';
 import * as ActiveStorage from '@rails/activestorage';
 import '@rails/actiontext';
 import 'whatwg-fetch'; // window.fetch polyfill
-import Chartkick from 'chartkick';
-import Highcharts from 'highcharts';
 import ReactRailsUJS from 'react_ujs';
 
 import '../shared/page-update-event';
@@ -37,7 +35,6 @@ import {
   motivationCancel,
   showImportJustificatif
 } from '../new_design/state-button';
-import { toggleChart } from '../new_design/toggle-chart';
 import { replaceSemicolonByComma } from '../new_design/avis';
 import {
   acceptEmailSuggestion,
@@ -52,21 +49,18 @@ const DS = {
   showMotivation,
   motivationCancel,
   showImportJustificatif,
-  toggleChart,
   replaceSemicolonByComma,
   acceptEmailSuggestion,
   discardEmailSuggestionBox
 };
 
 // Start Rails helpers
-Chartkick.addAdapter(Highcharts);
 Rails.start();
 Turbolinks.start();
 ActiveStorage.start();
 
 // Expose globals
 window.DS = window.DS || DS;
-window.Chartkick = Chartkick;
 // (Both Rails redirects and ReactRailsUJS expect Turbolinks to be globally available)
 window.Turbolinks = Turbolinks;
 

app/views/instructeurs/procedures/stats.html.haml

@@ -6,6 +6,8 @@
                     'Statistiques'] }
 
 .statistiques
+  = react_component('Chartkick')
+
   %h1.new-h1= title
   .stat-cards
     - if @usual_traitement_time.present?

app/views/stats/index.html.haml

@@ -1,6 +1,7 @@
 - content_for(:title, 'Statistiques')
 
 .statistiques
+  = react_component('Chartkick')
 
   %h1.new-h1 Statistiques
 
@@ -55,9 +56,9 @@
 
     .stat-card.stat-card-half.pull-left
       %ul.segmented-control.pull-right
-        %li.segmented-control-item.segmented-control-item-active{ :onclick => "DS.toggleChart(event, '.monthly-procedures-chart');" }
+        %li.segmented-control-item.segmented-control-item-active{ data: { 'toggle-chart': '.monthly-procedures-chart' } }
           Par mois
-        %li.segmented-control-item{ :onclick => "DS.toggleChart(event, '.cumulative-procedures-chart');" }
+        %li.segmented-control-item{ data: { 'toggle-chart': '.cumulative-procedures-chart' } }
           Cumul
       %span.stat-card-title.pull-left Démarches dématérialisées
       .clearfix
@@ -70,9 +71,9 @@
 
     .stat-card.stat-card-half.pull-left
       %ul.segmented-control.pull-right
-        %li.segmented-control-item.segmented-control-item-active{ :onclick => "DS.toggleChart(event, '.monthly-dossiers-chart');" }
+        %li.segmented-control-item.segmented-control-item-active{ data: { 'toggle-chart': '.monthly-dossiers-chart' } }
           Par mois
-        %li.segmented-control-item{ :onclick => "DS.toggleChart(event, '.cumulative-dossiers-chart');" }
+        %li.segmented-control-item{ data: { 'toggle-chart': '.cumulative-dossiers-chart' } }
           Cumul
       %span.stat-card-title.pull-left Dossiers déposés
       .clearfix

package.json

@@ -17,7 +17,7 @@
     "debounce": "^1.2.0",
     "dom4": "^2.1.5",
     "email-butler": "^1.0.13",
-    "highcharts": "^6.1.2",
+    "highcharts": "^8.0.0",
     "intersection-observer": "^0.7.0",
     "jquery": "^3.4.1",
     "leaflet": "^1.6.0",

yarn.lock

@@ -4426,10 +4426,10 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
-highcharts@^6.1.2:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/highcharts/-/highcharts-6.2.0.tgz#2a6d04652eb43c66f462ca7e2d2808f1f2782b61"
-  integrity sha512-A4E89MA+kto8giic7zyLU6ZxfXnVeCUlKOyzFsah3+n4BROx4bgonl92KIBtwLud/mIWir8ahqhuhe2by9LakQ==
+highcharts@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/highcharts/-/highcharts-8.0.0.tgz#fcf77a511d6ea477b9d8447afd9dedbfc85e2727"
+  integrity sha512-jRKLiP0i29zKSEgMDASyrfpivrM3e8V8yTv8YUZtRzB2mXR+hsBNHWZw2hNRZVxqq1QCVmW/9Z/BLFvYlJELqA==
 
 highlight.js@~9.12.0:
   version "9.12.0"