ChartJS 4 Support

.github/workflows/run-tests.yml

@@ -0,0 +1,38 @@
+name: Tests
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ '*' ]
+
+jobs:
+  test:
+    runs-on: ubuntu-22.04
+    strategy:
+      matrix:
+        node-version: [ 20 ]
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'pnpm'
+
+      - name: Install
+        run: pnpm install
+
+      - name: Run tests
+        run: pnpm test
+
+      - name: Upload coverage to Coveralls
+        run: cat ./coverage/lcov.info | pnpm coveralls
+        env:
+          COVERALLS_REPO_TOKEN: ${{ secrets.COVERALLS_REPO_TOKEN }}

README.md

@@ -1,18 +1,19 @@
 # Vue3 ChartJS Wrapper
 
 [![Coverage Status](https://coveralls.io/repos/github/J-T-McC/vue3-chartjs/badge.svg?branch=main)](https://coveralls.io/github/J-T-McC/vue3-chartjs?branch=main)
-[![Build Status](https://travis-ci.com/J-T-McC/vue3-chartjs.svg?branch=main)](https://app.travis-ci.com/github/J-T-McC/vue3-chartjs)
+[![Tests](https://github.com/J-T-McC/vue3-chartjs/actions/workflows/run-tests.yml/badge.svg)](https://github.com/J-T-McC/vue3-chartjs/actions/workflows/run-tests.yml)
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/J-T-McC/vue3-chartjs/pulls)
 ![npm](https://img.shields.io/npm/dt/@j-t-mcc/vue3-chartjs)
 
 Basic [ChartJS 3](https://www.chartjs.org/) wrapper for [Vue3](https://v3.vuejs.org/)
 
 For ChartJS 2, see [v0.3.0](https://github.com/J-T-McC/vue3-chartjs/tree/0.3.0)
+For ChartJS 3.1, see [v1.3.0](https://github.com/J-T-McC/vue3-chartjs/tree/v1.3.0)
 
 ## Requirements
 
 - Vue 3
-- ChartJS 3
+- ChartJS 4
 
 ## Installation
 

dist/vue3-chartjs.es.js

@@ -1,45 +1,42 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
 import { defineComponent, ref, onMounted, h } from "vue";
 import { registerables, Chart } from "chart.js";
 const chartJsEventNames = [
   "install",
-  "start",
-  "stop",
+  "uninstall",
   "beforeInit",
+  "resize",
   "afterInit",
+  "start",
+  "stop",
   "beforeUpdate",
-  "afterUpdate",
+  "beforeLayout",
+  "beforeDataLimits",
+  "afterDataLimits",
+  "beforeBuildTicks",
+  "afterBuildTicks",
+  "afterLayout",
   "beforeElementsUpdate",
-  "reset",
   "beforeDatasetsUpdate",
-  "afterDatasetsUpdate",
   "beforeDatasetUpdate",
   "afterDatasetUpdate",
-  "beforeLayout",
-  "afterLayout",
-  "afterLayout",
+  "afterDatasetsUpdate",
+  "afterUpdate",
   "beforeRender",
+  "beforeDraw",
+  "beforeDatasetsDraw",
+  "beforeDatasetDraw",
+  "afterDatasetDraw",
+  "afterDatasetsDraw",
+  "beforeTooltipDraw",
+  "afterTooltipDraw",
+  "afterDraw",
   "afterRender",
   "resize",
-  "destroy",
-  "uninstall",
-  "afterTooltipDraw",
-  "beforeTooltipDraw"
+  "reset",
+  "beforeDestroy",
+  "afterDestroy",
+  "beforeEvent",
+  "afterEvent"
 ];
 function generateEventObject(type, chartRef = null) {
   return {
@@ -100,15 +97,15 @@ const Vue3ChartJs = defineComponent({
     const chartRef = ref(null);
     const chartJsEventsPlugin = chartJsEventNames.reduce((reduced, eventType) => {
       const event = generateEventObject(eventType, chartRef);
-      return __spreadValues(__spreadValues({}, reduced), generateChartJsEventListener(emit, event));
+      return { ...reduced, ...generateChartJsEventListener(emit, event) };
     }, { id: "Vue3ChartJsEventHookPlugin" });
     const chartJSState = {
       chart: null,
       plugins: [
         chartJsEventsPlugin,
         ...props.plugins
       ],
-      props: __spreadValues({}, props)
+      props: { ...props }
     };
     const destroy = () => {
       if (chartJSState.chart) {
@@ -117,21 +114,24 @@ const Vue3ChartJs = defineComponent({
       }
     };
     const update = (animateSpeed = 750) => {
-      chartJSState.chart.data = __spreadValues(__spreadValues({}, chartJSState.chart.data), chartJSState.props.data);
-      chartJSState.chart.options = __spreadValues(__spreadValues({}, chartJSState.chart.options), chartJSState.props.options);
+      chartJSState.chart.data = { ...chartJSState.chart.data, ...chartJSState.props.data };
+      chartJSState.chart.options = { ...chartJSState.chart.options, ...chartJSState.props.options };
       chartJSState.chart.update(animateSpeed);
     };
     const resize = () => chartJSState.chart && chartJSState.chart.resize();
     const render = () => {
       if (chartJSState.chart) {
         return chartJSState.chart.update();
       }
-      return chartJSState.chart = new Chart(chartRef.value.getContext("2d"), {
-        type: chartJSState.props.type,
-        data: chartJSState.props.data,
-        options: chartJSState.props.options,
-        plugins: chartJSState.plugins
-      });
+      return chartJSState.chart = new Chart(
+        chartRef.value.getContext("2d"),
+        {
+          type: chartJSState.props.type,
+          data: chartJSState.props.data,
+          options: chartJSState.props.options,
+          plugins: chartJSState.plugins
+        }
+      );
     };
     onMounted(() => render());
     return {

jest.config.js

@@ -1,11 +1,16 @@
 module.exports = {
   transform: {
-    '^.+\\.vue$': 'vue3-jest',
+    '^.+\\.vue$': '@vue/vue3-jest',
     '^.+\\js$': 'babel-jest'
   },
   testEnvironment: 'jsdom',
+  testEnvironmentOptions: {
+    customExportConditions: ["node", "node-addons"],
+  },
   setupFiles: ['jest-canvas-mock'],
   collectCoverage: true,
-  coverageReporters: ['lcov', 'text-summary'],
+  coverageDirectory: 'coverage',
+  coverageReporters: ['lcov', 'text'],
+  coverageProvider: "v8",
   moduleFileExtensions: ['vue', 'js', 'json', 'jsx', 'ts', 'tsx', 'node']
 }

lib/includes.js

@@ -1,27 +1,40 @@
 const chartJsEventNames = [
   "install",
-  "start",
-  "stop",
+  'uninstall',
   'beforeInit',
+  'resize',
   'afterInit',
+  "start",
+  "stop",
   'beforeUpdate',
-  'afterUpdate',
+  'beforeLayout',
+  'beforeDataLimits',
+  'afterDataLimits',
+  'beforeBuildTicks',
+  'afterBuildTicks',
+  'afterLayout',
   'beforeElementsUpdate',
-  'reset',
   'beforeDatasetsUpdate',
-  'afterDatasetsUpdate',
   'beforeDatasetUpdate',
   'afterDatasetUpdate',
-  'beforeLayout',
-  'afterLayout',
-  'afterLayout',
+  'afterDatasetsUpdate',
+  'afterUpdate',
   'beforeRender',
+  'beforeDraw',
+  'beforeDatasetsDraw',
+  'beforeDatasetDraw',
+  'afterDatasetDraw',
+  'afterDatasetsDraw',
+  'beforeTooltipDraw',
+  'afterTooltipDraw',
+  'afterDraw',
   'afterRender',
   'resize',
-  'destroy',
-  'uninstall',
-  'afterTooltipDraw',
-  'beforeTooltipDraw',
+  'reset',
+  'beforeDestroy',
+  'afterDestroy',
+  'beforeEvent',
+  'afterEvent',
 ]
 
 function generateEventObject(type , chartRef = null) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@j-t-mcc/vue3-chartjs",
-  "version": "1.3.0",
+  "version": "2.0.0",
   "author": "Tyson McCarney <[email protected]> (https://tysonmccarney.com)",
   "description": "Vue3 wrapper for Chart.js",
   "license": "MIT",
@@ -34,30 +34,32 @@
     "lint": "eslint lib/**"
   },
   "peerDependencies": {
-    "chart.js": "^3.7.0",
+    "chart.js": "^4.0",
     "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.12.11",
-    "@vitejs/plugin-vue": "^1.1.4",
-    "@vue/compiler-sfc": "^3.0.5",
-    "@vue/test-utils": "^2.0.0-rc.18",
-    "babel-jest": "^27.0.0",
-    "chart.js": "^3.7.0",
-    "chartjs-plugin-zoom": "^1.0.0-beta.5",
-    "coveralls": "^3.1.0",
-    "eslint": "^7.14.0",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-import": "^2.22.1",
+    "@babel/core": "^7.24.7",
+    "@babel/preset-env": "^7.24.7",
+    "@vitejs/plugin-vue": "^1.10.2",
+    "@vue/compiler-sfc": "^3.4.27",
+    "@vue/test-utils": "^2.4.6",
+    "@vue/vue3-jest": "^28.1.0",
+    "babel-jest": "^28.1.3",
+    "chart.js": "^4.4.3",
+    "chartjs-plugin-zoom": "^1.2.1",
+    "coveralls": "^3.1.1",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-vue": "^7.1.0",
-    "jest": "^v27.0.0-alpha.4",
-    "jest-canvas-mock": "^2.3.0",
+    "eslint-plugin-promise": "^4.3.1",
+    "eslint-plugin-vue": "^7.20.0",
+    "jest": "^28.1.3",
+    "jest-canvas-mock": "^2.5.2",
+    "jest-environment-jsdom": "^29.7.0",
     "prettier": "2.2.1",
-    "vite": "^2.0.1",
-    "vue": "^3.0.5",
-    "vue3-jest": "^27.0.0-alpha.1"
+    "vite": "^2.9.18",
+    "vue": "^3.4.27"
   },
   "babel": {
     "presets": [