Merge pull request #7170 from tchak/fix-chartkick-loading

chore(chartkick): upgrade to 4.1 and use built-in lazy loading

Gemfile.lock

@@ -164,7 +164,7 @@ GEM
       nokogiri (~> 1.10, >= 1.10.4)
       rubyzip (>= 1.3.0, < 3)
     charlock_holmes (0.7.7)
-    chartkick (3.4.2)
+    chartkick (4.1.3)
     childprocess (3.0.0)
     choice (0.2.0)
     chunky_png (1.4.0)

app/javascript/components/Chartkick.jsx

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

app/javascript/new_design/chartkick.js

@@ -1,41 +0,0 @@
-// 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);
-}

app/javascript/packs/application.js

@@ -12,7 +12,6 @@ import '../shared/franceconnect';
 import '../shared/toggle-target';
 import '../shared/ujs-error-handling';
 
-import '../new_design/chartkick';
 import '../new_design/dropdown';
 import '../new_design/form-validation';
 import '../new_design/procedure-context';

package.json

@@ -17,13 +17,13 @@
     "@tmcw/togeojson": "^4.3.0",
     "babel-plugin-macros": "^2.8.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "chartkick": "^3.2.0",
+    "chartkick": "^4.1.1",
     "core-js": "^3.6.5",
     "debounce": "^1.2.1",
     "dom4": "^2.1.6",
     "email-butler": "^1.0.13",
     "geojson": "^0.5.0",
-    "highcharts": "^9.0.0",
+    "highcharts": "^10.0.0",
     "intersection-observer": "^0.12.0",
     "is-hotkey": "^0.2.0",
     "maplibre-gl": "^1.15.2",

yarn.lock

@@ -4042,10 +4042,24 @@ chardet@^0.7.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
-chartkick@^3.2.0:
+chart.js@>=3.0.2:
-  version "3.2.1"
+  version "3.7.1"
-  resolved "https://registry.yarnpkg.com/chartkick/-/chartkick-3.2.1.tgz#a80c2005ae353c5ae011d0a756b6f592fc8fc7a9"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.7.1.tgz#0516f690c6a8680c6c707e31a4c1807a6f400ada"
-  integrity sha512-zV0kUeZNqrX28AmPt10QEDXHKadbVFOTAFkCMyJifHzGFkKzGCDXxVR8orZ0fC1HbePzRn5w6kLCOVxDQbMUCg==
+  integrity sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA==
+
+chartjs-adapter-date-fns@>=2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-2.0.0.tgz#5e53b2f660b993698f936f509c86dddf9ed44c6b"
+  integrity sha512-rmZINGLe+9IiiEB0kb57vH3UugAtYw33anRiw5kS2Tu87agpetDDoouquycWc9pRsKtQo5j+vLsYHyr8etAvFw==
+
+chartkick@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/chartkick/-/chartkick-4.1.1.tgz#60d6e13a090c5334bd80ad8fb7da02aaf38fb936"
+  integrity sha512-+3+dIKZo8MzOiQFc4FZDZiRjDnrgVxgjk3tKXVclMcDF8yIJAEqSr5/l4pqpB2Rxye1s2Dg3j6bVA9eIeDbnCQ==
+  optionalDependencies:
+    chart.js ">=3.0.2"
+    chartjs-adapter-date-fns ">=2.0.0"
+    date-fns ">=2.0.0"
 
 check-types@^8.0.3:
   version "8.0.3"
@@ -4906,6 +4920,11 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+date-fns@>=2.0.0:
+  version "2.28.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2"
+  integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==
+
 date-fns@^1.27.2:
   version "1.30.1"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
@@ -7100,10 +7119,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@^9.0.0:
+highcharts@^10.0.0:
-  version "9.3.2"
+  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/highcharts/-/highcharts-9.3.2.tgz#20b34f7277169a48d7b5691f74705e8addc78cd3"
+  resolved "https://registry.yarnpkg.com/highcharts/-/highcharts-10.0.0.tgz#a78c3c8f077834ab2431a03c6699b2fbc511a37f"
-  integrity sha512-I/48gNMvs3hZxZnPRUqLbnlrGZJJ7YPPVr1+fYeZ35p4pSZAOwTmAGbptrjBr7JlF52HmJH9zMbt/I4TPLu9Pg==
+  integrity sha512-a14PrTraVaoSNyaRPhLF/jJ3/09rJwfUZedLgZOkzozGz4K/H8WtWNJtUZt/tc5QiJkaZHw4YX7vvuO98s+EoA==
 
 hmac-drbg@^1.0.1:
   version "1.0.1"