vue-chartjs - npm Package Compare versions

Comparing version 5.0.0 to 5.0.1

dist/index.js

@@ -1,2 +0,2 @@
-import { isProxy, toRaw, defineComponent, ref, shallowRef, onMounted, onBeforeUnmount, watch, h } from 'vue';
+import { version, isProxy, toRaw, defineComponent, ref, shallowRef, onMounted, onBeforeUnmount, watch, h } from 'vue';
 import { Chart as Chart$1, BarController, DoughnutController, LineController, PieController, PolarAreaController, RadarController, BubbleController, ScatterController } from 'chart.js';
@@ -34,2 +34,5 @@
 
+const compatProps = version[0] === "2" ? (internals, props)=>Object.assign(internals, {
+        attrs: props
+    }) : (internals, props)=>Object.assign(internals, props);
 function toRawIfProxy(obj) {
@@ -202,7 +205,8 @@ return isProxy(obj) ? toRaw(obj) : obj;
             return ()=>{
-                return h(Chart, {
-                    ref: reforwardRef,
+                return h(Chart, compatProps({
+                    ref: reforwardRef
+                }, {
                     type,
                     ...props
-                });
+                }));
             };
@@ -209,0 +213,0 @@ }

dist/utils.d.ts

 import type { Chart, ChartType, ChartData, ChartDataset, ChartOptions, DefaultDataPoint } from 'chart.js';
+export declare const compatProps: <I extends {}, T extends {}>(internals: I, props: T) => I & T;
 export declare function toRawIfProxy<T>(obj: T): T;
@@ -3,0 +4,0 @@ export declare function cloneProxy<T extends object>(obj: T, src?: T): T;

package.json

 {
   "name": "vue-chartjs",
   "type": "module",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "description": "Vue.js wrapper for chart.js for creating beautiful charts.",
@@ -6,0 +6,0 @@ "author": "Jakub Juszczak <[e-mail]>",

README.md

@@ -5,5 +5,5 @@ # vue-chartjs
 
-**vue-chartjs** is a wrapper for [Chart.js](https://github.com/chartjs/Chart.js) in vue. You can easily create reuseable chart components.
+**vue-chartjs** is a wrapper for [Chart.js](https://github.com/chartjs/Chart.js) in Vue. You can easily create reuseable chart components.
 
-Supports Chart.js v3 and v2.
+Supports Chart.js v4.
 
@@ -35,3 +35,3 @@ [![npm version](https://badge.fury.io/js/vue-chartjs.svg)](https://badge.fury.io/js/vue-chartjs)
 
-## Install
+## Quickstart
 
@@ -48,91 +48,35 @@ Install this library with peer dependencies:
 
-We recommend using `chart.js@^3.0.0`.
+Then, import and use individual components:
 
-<hr />
-
-Need an API to fetch data? Consider [Cube](https://cube.dev/?ref=eco-vue-chartjs), an open-source API for data apps.
-
-<br />
-
-[![supported by Cube](https://user-images.githubusercontent.com/986756/154330861-d79ab8ec-aacb-4af8-9e17-1b28f1eccb01.svg)](https://cube.dev/?ref=eco-vue-chartjs)
-
-## How to use
-
-This package works with version 2.x and 3.x of Vue.
-
-Import the component.
-
-```javascript
-import { Bar } from 'vue-chartjs'
-```
-
-For Vue 2 projects, you need to import from `vue-chartjs/legacy`.
-
-```javascript
-import { Bar } from 'vue-chartjs/legacy'
-```
-
-Just create your own component.
-
 ```vue
 <template>
-  <Bar
-    :chart-options="chartOptions"
-    :chart-data="chartData"
-    :chart-id="chartId"
-    :dataset-id-key="datasetIdKey"
-    :plugins="plugins"
-    :css-classes="cssClasses"
-    :styles="styles"
-    :width="width"
-    :height="height"
-  />
+  <Bar :data="data" :options="options" />
 </template>
 
-<script>
+<script lang="ts">
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  CategoryScale,
+  LinearScale
+} from 'chart.js'
 import { Bar } from 'vue-chartjs'
-import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
 
-ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
 
 export default {
-  name: 'BarChart',
-  components: { Bar },
-  props: {
-    chartId: {
-      type: String,
-      default: 'bar-chart'
-    },
-    datasetIdKey: {
-      type: String,
-      default: 'label'
-    },
-    width: {
-      type: Number,
-      default: 400
-    },
-    height: {
-      type: Number,
-      default: 400
-    },
-    cssClasses: {
-      default: '',
-      type: String
-    },
-    styles: {
-      type: Object,
-      default: () => {}
-    },
-    plugins: {
-      type: Array,
-      default: () => []
-    }
+  name: 'App',
+  components: {
+    Bar
   },
   data() {
     return {
-      chartData: {
-        labels: [ 'January', 'February', 'March' ],
-        datasets: [ { data: [40, 20, 12] } ]
+      data: {
+        labels: ['January', 'February', 'March'],
+        datasets: [{ data: [40, 20, 12] }]
       },
-      chartOptions: {
+      options: {
         responsive: true
@@ -146,82 +90,10 @@ }
 
-or in TypeScript
+<hr />
 
-```ts
-// BarChart.ts
-import { defineComponent, h, PropType } from 'vue'
-import { Bar } from 'vue-chartjs'
-import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, Plugin } from 'chart.js'
+Need an API to fetch data? Consider [Cube](https://cube.dev/?ref=eco-vue-chartjs), an open-source API for data apps.
 
-ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
+<br />
 
-export default defineComponent({
-  name: 'BarChart',
-  components: { Bar },
-  props: {
-    chartId: {
-      type: String,
-      default: 'bar-chart'
-    },
-    width: {
-      type: Number,
-      default: 400
-    },
-    height: {
-      type: Number,
-      default: 400
-    },
-    cssClasses: {
-      default: '',
-      type: String
-    },
-    styles: {
-      type: Object as PropType<Partial<CSSStyleDeclaration>>,
-      default: () => {}
-    },
-    plugins: {
-      type: Array as PropType<Plugin<'bar'>[]>,
-      default: () => []
-    }
-  },
-  setup(props) {
-    const chartData = {
-      labels: [ 'January', 'February', 'March' ],
-      datasets: [ { data: [40, 20, 12] } ]
-    }
+[![supported by Cube](https://user-images.githubusercontent.com/986756/154330861-d79ab8ec-aacb-4af8-9e17-1b28f1eccb01.svg)](https://cube.dev/?ref=eco-vue-chartjs)
 
-    const chartOptions = { responsive: true }
-
-    return () =>
-      h(Bar, {
-        chartData,
-        chartOptions,
-        chartId: props.chartId,
-        width: props.width,
-        height: props.height,
-        cssClasses: props.cssClasses,
-        styles: props.styles,
-        plugins: props.plugins
-      })
-  }
-})
-
-```
-
-Use it in your vue app
-
-```vue
-<template>
-  <BarChart />
-</template>
-
-<script>
-import BarChart from 'path/to/component/BarChart'
-
-export default {
-  name: 'App',
-  components: { BarChart }
-}
-</script>
-```
-
 ## Docs
@@ -231,3 +103,3 @@
 - [Access to Chart instance](https://vue-chartjs.org/guide/#access-to-chart-instance)
-- [Migration from v3 to v4](https://vue-chartjs.org/migration-guides/#migration-from-v3-to-v4/)
+- [Migration from v4 to v5](https://vue-chartjs.org/migration-guides/#migration-from-v4-to-v5/)
 - [Migration from vue-chart-3](https://vue-chartjs.org/migration-guides/#migration-from-vue-chart-3/)
@@ -247,3 +119,3 @@ - [API](https://vue-chartjs.org/api/)
 # run unit tests
-pnpm unit
+pnpm test:unit
 
@@ -250,0 +122,0 @@ # run all tests

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Lines of code

356

increased by1.42%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

43972

decreased by-3.08%

Number of lines in readme file

133

decreased by-49.04%

No dependency changes