Version Bump - 1.3.0

- Register all ChartJS registerables

dist/vue3-chartjs.es.js

@@ -15,7 +15,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 import { defineComponent, ref, onMounted, h } from "vue";
-import { Chart, ArcElement, LineElement, BarElement, PointElement, BarController, BubbleController, DoughnutController, LineController, PieController, PolarAreaController, RadarController, ScatterController, CategoryScale, LinearScale, LogarithmicScale, RadialLinearScale, TimeScale, TimeSeriesScale, Decimation, Filler, Legend, Title, Tooltip } from "chart.js";
+import { registerables, Chart } from "chart.js";
 const chartJsEventNames = [
   "install",
   "start",
@@ -62,7 +62,9 @@ function generateChartJsEventListener(emit, event) {
     }
   };
 }
-Chart.register(ArcElement, LineElement, BarElement, PointElement, BarController, BubbleController, DoughnutController, LineController, PieController, PolarAreaController, RadarController, ScatterController, CategoryScale, LinearScale, LogarithmicScale, RadialLinearScale, TimeScale, TimeSeriesScale, Decimation, Filler, Legend, Title, Tooltip);
+if (registerables !== void 0) {
+  Chart.register(...registerables);
+}
 const Vue3ChartJs = defineComponent({
   name: "Vue3ChartJs",
   props: {

jest.config.js

@@ -1,11 +1,11 @@
 module.exports = {
-  verbose: true,
-  clearMocks: true,
   transform: {
-    '^.+\\.vue$': 'vue-jest',
+    '^.+\\.vue$': 'vue3-jest',
     '^.+\\js$': 'babel-jest'
   },
+  testEnvironment: 'jsdom',
   setupFiles: ['jest-canvas-mock'],
   collectCoverage: true,
-  coverageReporters: ['lcov', 'text-summary']
+  coverageReporters: ['lcov', 'text-summary'],
+  moduleFileExtensions: ['vue', 'js', 'json', 'jsx', 'ts', 'tsx', 'node']
 }

lib/Vue3ChartJs.vue

@@ -1,7 +1,13 @@
 <script>
 import { h, ref, onMounted, defineComponent } from 'vue'
 import { chartJsEventNames, generateEventObject, generateChartJsEventListener } from './includes'
-import Chart from 'chart.js/auto';
+import { Chart, registerables } from 'chart.js'
+
+// registerables is undefined when using UMD
+// using chart.js via UMD already includes registerables
+if (registerables !== undefined) {
+  Chart.register(...registerables)
+}
 
 const Vue3ChartJs = defineComponent({
   name: 'Vue3ChartJs',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@j-t-mcc/vue3-chartjs",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "author": "Tyson McCarney <[email protected]> (https://tysonmccarney.com)",
   "description": "Vue3 wrapper for Chart.js",
   "license": "MIT",
@@ -34,16 +34,16 @@
     "lint": "eslint lib/**"
   },
   "peerDependencies": {
-    "chart.js": "^3.1.0",
+    "chart.js": "^3.7.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.0",
-    "babel-jest": "^26.6.3",
-    "chart.js": "^3.2.0",
+    "@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",
@@ -52,12 +52,12 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-vue": "^7.1.0",
-    "jest": "^26.6.3",
+    "jest": "^v27.0.0-alpha.4",
     "jest-canvas-mock": "^2.3.0",
     "prettier": "2.2.1",
     "vite": "^2.0.1",
     "vue": "^3.0.5",
-    "vue-jest": "^5.0.0-alpha.8"
+    "vue3-jest": "^27.0.0-alpha.1"
   },
   "babel": {
     "presets": [

src/App.vue

@@ -1,150 +1,135 @@
 <template>
-    <div style="width: 100%;height:20%;display: block;">
-      <vue3-chart-js v-bind="{...barChart}"  @after-update="afterUpdate"/>
-    </div>
-    <div style="display: block;">
-      <vue3-chart-js ref="chartRef" v-bind="{...localDoughnutChartOptions}" @after-update="afterUpdate"/>
-    </div>
-    <button type="submit" @click="updateChart">Update Doughnut Data</button>
-    <button type="submit" @click="exportChart">Export Chart as PNG</button>
+  <div style="width: 100%;height:20%;display: block;">
+    <vue3-chart-js v-bind="{...barChart}" @after-update="afterUpdate"/>
+  </div>
+  <div style="display: block;">
+    <vue3-chart-js ref="chartRef" v-bind="{...localDoughnutChartOptions}" @after-render="afterRender"/>
+  </div>
+  <button type="submit" @click="updateChart">Update Doughnut Data</button>
+  <button type="submit" @click="exportChart">Export Chart as PNG</button>
 </template>
 
-<script>
+<script setup>
 
 import { ref } from 'vue'
-import Vue3ChartJs from '../lib/main'
-
-export default {
-  name: 'App',
-  components: {
-    Vue3ChartJs
+import Vue3ChartJs from '../'
+
+const barChart = {
+  type: 'line',
+  data: {
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+    datasets: [{
+      label: 'My First Dataset',
+      data: [65, 59, 80, 81, 56, 55, 40],
+      fill: false,
+      borderColor: 'rgb(75, 192, 192)',
+      tension: 0.1
+    }]
   },
-  setup () {
-    const barChart = {
-      type: 'line',
-      data: {
-        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-        datasets: [{
-          label: 'My First Dataset',
-          data: [65, 59, 80, 81, 56, 55, 40],
-          fill: false,
-          borderColor: 'rgb(75, 192, 192)',
-          tension: 0.1
-        }]
-      },
-      options: {
-        maintainAspectRatio: false,
-        plugins: {
-          zoom: {
-            zoom: {
-              wheel: {
-                enabled: true,
-                mode: 'xy',
-              },
-              pinch: {
-                enabled: true,
-                mode: 'xy',
-              }
-            }
+  options: {
+    maintainAspectRatio: false,
+    plugins: {
+      zoom: {
+        zoom: {
+          wheel: {
+            enabled: true,
+            mode: 'xy',
+          },
+          pinch: {
+            enabled: true,
+            mode: 'xy',
           }
         }
       }
     }
+  }
+}
 
-    const doughnutChart = {
-      id: 'doughnut',
-      type: 'doughnut',
-      height: 800,
-      width: 800,
-      data: {
-        labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
-        datasets: [
-          {
-            backgroundColor: [
-              '#41B883',
-              '#E46651',
-              '#00D8FF',
-              '#DD1B16'
-            ],
-            data: [40, 20, 80, 10]
-          }
-        ]
-      },
-      options: {
-        responsive: false,
-        cutout: '10%',
-        plugins: {}
+const doughnutChart = {
+  id: 'doughnut',
+  type: 'doughnut',
+  height: 800,
+  width: 800,
+  data: {
+    labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
+    datasets: [
+      {
+        backgroundColor: [
+          '#41B883',
+          '#E46651',
+          '#00D8FF',
+          '#DD1B16'
+        ],
+        data: [40, 20, 80, 10]
       }
-    }
-
-    const beforeInit = (e) => {
-      console.log('chart is before init', e)
-    }
-
-    const beforeUpdate = (e) => {
-      console.log('beforeUpdate', e)
-    }
-
-    const afterUpdate = (e) => {
-      console.log('afterUpdate', e)
-    }
+    ]
+  },
+  options: {
+    responsive: false,
+    cutout: '10%',
+    plugins: {}
+  }
+}
 
-    const testFunc = () => {
-      console.log('test func called')
-    }
+const beforeInit = (e) => {
+  console.log('chart is before init', e)
+}
 
-    const chartRef = ref(null)
+const beforeUpdate = (e) => {
+  console.log('beforeUpdate', e)
+}
 
-    const localDoughnutChartOptions = { ...doughnutChart }
+const afterUpdate = (e) => {
+  console.log('afterUpdate', e)
+}
 
-    let counter = 1
+const afterRender = (e) => {
+  console.log('afterRender', e)
+}
 
-    const updateChart = () => {
-      localDoughnutChartOptions.options.plugins.title = {
-        display: true,
-        text: 'Loaded: ' + (counter++)
-      }
+const testFunc = () => {
+  console.log('test func called')
+}
 
-      localDoughnutChartOptions.data.labels.reverse()
-      localDoughnutChartOptions.data.datasets = [
-        {
-          backgroundColor: [
-            '#' + Math.floor(Math.random() * 16777215).toString(16),
-            '#' + Math.floor(Math.random() * 16777215).toString(16),
-            '#' + Math.floor(Math.random() * 16777215).toString(16),
-            '#' + Math.floor(Math.random() * 16777215).toString(16),
-          ],
-          data: [
-            Math.floor(Math.random() * 500),
-            Math.floor(Math.random() * 500),
-            Math.floor(Math.random() * 500),
-            Math.floor(Math.random() * 500),
-          ]
-        }
+const chartRef = ref(null)
+
+const localDoughnutChartOptions = { ...doughnutChart }
+
+let counter = 1
+
+const updateChart = () => {
+  localDoughnutChartOptions.options.plugins.title = {
+    display: true,
+    text: 'Loaded: ' + (counter++)
+  }
+
+  localDoughnutChartOptions.data.labels.reverse()
+  localDoughnutChartOptions.data.datasets = [
+    {
+      backgroundColor: [
+        '#' + Math.floor(Math.random() * 16777215).toString(16),
+        '#' + Math.floor(Math.random() * 16777215).toString(16),
+        '#' + Math.floor(Math.random() * 16777215).toString(16),
+        '#' + Math.floor(Math.random() * 16777215).toString(16),
+      ],
+      data: [
+        Math.floor(Math.random() * 500),
+        Math.floor(Math.random() * 500),
+        Math.floor(Math.random() * 500),
+        Math.floor(Math.random() * 500),
       ]
-
-      chartRef.value.update(750)
     }
+  ]
 
-    const exportChart = () => {
-      let a = document.createElement('a')
-      a.href = chartRef.value.chartJSState.chart.toBase64Image('image/png', 1)
-      a.download = 'image-export.png'
-      a.click()
-      a = null
-    }
+  chartRef.value.update(750)
+}
 
-    return {
-      barChart,
-      localDoughnutChartOptions,
-      updateChart,
-      exportChart,
-      beforeInit,
-      beforeUpdate,
-      afterUpdate,
-      testFunc,
-      chartRef
-    }
-  },
+const exportChart = () => {
+  let a = document.createElement('a')
+  a.href = chartRef.value.chartJSState.chart.toBase64Image('image/png', 1)
+  a.download = 'image-export.png'
+  a.click()
+  a = null
 }
+
 </script>

src/charts.js

@@ -38,7 +38,7 @@ const barChart = {
 
 const doughnutChart = {
   id: 'doughnut',
-  type: 'line',
+  type: 'doughnut',
   data: {
     labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
     datasets: [