Add CHART.JS v4 compatibility

docs/.vuepress/config.js

@@ -19,6 +19,15 @@ module.exports = {
       }],
     ],
     chainWebpack: (config) => {
+      config.module
+        .rule('chart.js')
+        .include.add(path.resolve('node_modules/chart.js')).end()
+        .use('babel-loader')
+        .loader('babel-loader')
+        .options({
+          presets: ['@babel/preset-env']
+        })
+        .end();
       config.merge({
         resolve: {
           alias: {
@@ -27,7 +36,7 @@ module.exports = {
           }
         }
       });
-    },    
+    },
     themeConfig: {
       repo: 'kurkle/chartjs-chart-treemap',
       logo: '/favicon.ico',

karma.conf.js

@@ -59,7 +59,7 @@ module.exports = function(karma) {
     files: [
       {pattern: './test/fixtures/**/*.js', included: false},
       {pattern: './test/fixtures/**/*.png', included: false},
-      'node_modules/chart.js/dist/chart.js',
+      'node_modules/chart.js/dist/chart.umd.js',
       'node_modules/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.js',
       {pattern: 'test/index.js', watched: false},
       {pattern: 'src/index.js', watched: false},

package.json

@@ -41,19 +41,18 @@
     "url": "https://github.com/kurkle/chartjs-chart-treemap/issues"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^23.0.0",
-    "@rollup/plugin-json": "^5.0.0",
-    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-commonjs": "^23.0.2",
+    "@rollup/plugin-json": "^5.0.1",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-terser": "^0.1.0",    
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
-    "chart.js": "^3.8.0",
-    "chartjs-adapter-date-fns": "^2.0.0",
+    "chart.js": "^4.0.1",
     "chartjs-plugin-datalabels": "^2.0.0",
     "chartjs-plugin-zoom": "^1.2.0",
     "chartjs-test-utils": "^0.5.0",
     "concurrently": "^7.4.0",
     "cross-env": "^7.0.3",
-    "date-fns": "^2.20.2",
     "eslint": "^8.3.0",
     "eslint-config-chartjs": "^0.3.0",
     "eslint-plugin-es": "^4.1.0",
@@ -71,17 +70,16 @@
     "karma-summary-reporter": "^3.0.0",
     "ng-hammerjs": "^2.0.8",
     "pixelmatch": "^5.2.1",
-    "rollup": "^2.79.1",
+    "rollup": "^3.3.0",
+    "rollup-plugin-istanbul": "^4.0.0",
     "rollup-plugin-analyzer": "^4.0.0",
-    "rollup-plugin-istanbul": "^3.0.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "typescript": "^4.3.5",
-    "vuepress": "^1.8.2",
+    "typescript": "^4.7.4",
+    "vuepress": "^1.9.7",
     "vuepress-plugin-flexsearch": "^0.3.0",
     "vuepress-plugin-redirect": "^1.2.5",
     "vuepress-theme-chartjs": "^0.2.0"
   },
   "peerDependencies": {
-    "chart.js": "^3.0.0"
+    "chart.js": ">=3.0.0"
   }
 }

rollup.config.js

@@ -1,5 +1,5 @@
 const resolve = require('@rollup/plugin-node-resolve').default;
-const terser = require('rollup-plugin-terser').terser;
+const terser = require('@rollup/plugin-terser').default;
 const json = require('@rollup/plugin-json');
 const pkg = require('./package.json');
 

src/controller.js

@@ -237,7 +237,7 @@ TreemapController.overrides = {
 };
 
 TreemapController.beforeRegister = function() {
-  requireVersion('3.8', Chart.version);
+  requireVersion('chart.js', '3.8', Chart.version);
 };
 
 TreemapController.afterRegister = function() {

src/utils.js

@@ -1,5 +1,7 @@
 import {isObject} from 'chart.js/helpers';
 
+const isOlderPart = (act, req) => req > act || (act.length > req.length && act.slice(0, req.length) === req);
+
 export const getGroupKey = (lvl) => '' + lvl;
 
 function scanTreeObject(key, treeLeafKey, obj, tree = [], lvl = 0, result = []) {
@@ -168,9 +170,28 @@ export function sum(values, key) {
   return s;
 }
 
-export function requireVersion(min, ver) {
+/**
+ * @param {string} pkg
+ * @param {string} min
+ * @param {string} ver
+ * @param {boolean} [strict=true]
+ * @returns {boolean}
+ */
+export function requireVersion(pkg, min, ver, strict = true) {
   const parts = ver.split('.');
-  if (!min.split('.').reduce((a, c, i) => a && c <= parts[i], true)) {
-    throw new Error(`Chart.js v${ver} is not supported. v${min} or newer is required.`);
+  let i = 0;
+  for (const req of min.split('.')) {
+    const act = parts[i++];
+    if (parseInt(req, 10) < parseInt(act, 10)) {
+      break;
+    }
+    if (isOlderPart(act, req)) {
+      if (strict) {
+        throw new Error(`${pkg} v${ver} is not supported. v${min} or newer is required.`);
+      } else {
+        return false;
+      }
+    }
   }
+  return true;
 }

test/fixtures/basic/labelsMultilineFonts.js

@@ -1,5 +1,5 @@
 export default {
-  tolerance: 0.0370,
+  tolerance: 0.0400,
   config: {
     type: 'treemap',
     data: {

test/fixtures/events/hoverCaptions.js

@@ -12,7 +12,7 @@ const data = [
 ];
 
 export default {
-  tolerance: 0.0040,
+  tolerance: 0.0045,
   config: {
     type: 'treemap',
     data: {

test/index.js

@@ -7,10 +7,17 @@ window.triggerMouseEvent = triggerMouseEvent;
 
 jasmine.fixtures = specsFromFixtures;
 
+beforeAll(() => {
+  // Disable colors plugin for tests.
+  window.Chart.defaults.plugins.colors.enabled = false;
+});
+
 beforeEach(function() {
   addMatchers();
 });
 
 afterEach(function() {
   releaseCharts();
 });
+
+console.warn('Testing with chart.js v' + Chart.version);

types/index.esm.d.ts

@@ -1,11 +1,13 @@
 import {
   Chart,
   ChartComponent,
+  CoreChartOptions,
   DatasetController,
   Element, VisualElement,
   ScriptableContext, Color, Scriptable, FontSpec
 } from 'chart.js';
-import { AnyObject } from 'chart.js/types/basic';
+
+type AnyObject = Record<string, unknown>;
 
 type TreemapScriptableContext = ScriptableContext<'treemap'> & {
   raw: TreemapDataPoint

types/tests/tsconfig.json

@@ -3,11 +3,12 @@
     "target": "ES6",
     "moduleResolution": "Node",
     "alwaysStrict": true,
+    "skipLibCheck": true,
     "strict": true,
     "noEmit": true
   },
   "include": [
     "../index.esm.d.ts",
-    "./**/*.ts",
+    "./**/*.ts"
   ]
 }