vue-chartjs - npm Package Compare versions

Comparing version 3.5.1 to 4.0.0

package.json

 {
   "name": "vue-chartjs",
-  "version": "3.5.1",
+  "version": "4.0.0",
   "description": "Vue.js wrapper for chart.js for creating beautiful charts.",
@@ -39,117 +39,19 @@ "author": "Jakub Juszczak <[e-mail]>",
   ],
-  "main": "dist/vue-chartjs.js",
-  "unpkg": "dist/vue-chartjs.min.js",
-  "module": "es/index.js",
-  "jsnext:main": "es/index.js",
-  "typings": "types/index.d.ts",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "types": "./dist/index.d.ts",
+  "publishConfig": {
+    "directory": "package"
+  },
   "files": [
-    "src",
     "dist",
-    "es",
-    "types/*.d.ts"
+    "legacy/index.*"
   ],
-  "scripts": {
-    "dev": "node build/dev-server.js",
-    "build": "yarn run release && yarn run build:es",
-    "build:es": "cross-env BABEL_ENV=es babel src --out-dir es",
-    "unit": "karma start test/unit/karma.conf.js --single-run",
-    "e2e": "node test/e2e/runner.js",
-    "test": "npm run unit",
-    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
-    "release": "cross-env NODE_ENV=production webpack --progress --hide-modules --config  ./build/webpack.release.js && cross-env NODE_ENV=production webpack --progress --hide-modules --config  ./build/webpack.release.min.js",
-    "prepublishOnly": "yarn run lint && yarn run test && yarn run build",
-    "docs:dev": "vuepress dev docs",
-    "docs:build": "vuepress build docs"
-  },
   "peerDependencies": {
-    "chart.js": ">= 2.5"
+    "chart.js": "^3.7.0",
+    "vue": "^3.0.0-0 || ^2.6.0"
   },
-  "dependencies": {
-    "@types/chart.js": "^2.7.55"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.0.0-beta.42",
-    "@babel/core": "^7.0.0-beta.42",
-    "@babel/preset-env": "^7.0.0-beta.42",
-    "@babel/preset-stage-2": "^7.0.0-beta.42",
-    "@types/chart.js": "^2.7.55",
-    "babel-loader": "8.0.0-beta.0",
-    "chai": "^3.5.0",
-    "chart.js": "^2.8.0",
-    "chromedriver": "^2.28.0",
-    "connect-history-api-fallback": "^1.1.0",
-    "cross-env": "^5.1.1",
-    "cross-spawn": "^5.1.0",
-    "css-loader": "^0.28.0",
-    "eslint": "^3.19.0",
-    "eslint-config-standard": "^10.2.1",
-    "eslint-friendly-formatter": "^2.0.7",
-    "eslint-loader": "^1.7.1",
-    "eslint-plugin-html": "^2.0.1",
-    "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-node": "^4.2.2",
-    "eslint-plugin-promise": "^3.5.0",
-    "eslint-plugin-standard": "^3.0.1",
-    "eventsource-polyfill": "^0.9.6",
-    "express": "^4.15.2",
-    "extract-text-webpack-plugin": "^3.0.1",
-    "file-loader": "^0.10.1",
-    "friendly-errors-webpack-plugin": "^1.6.1",
-    "function-bind": "^1.0.2",
-    "html-webpack-plugin": "^2.28.0",
-    "http-proxy-middleware": "^0.17.4",
-    "inject-loader": "^3.0.0",
-    "isparta": "^4.0.0",
-    "jasmine-core": "^2.5.2",
-    "json-loader": "^0.5.4",
-    "karma": "^1.5.0",
-    "karma-coverage": "^1.1.1",
-    "karma-jasmine": "^1.0.2",
-    "karma-mocha": "^1.2.0",
-    "karma-phantomjs-launcher": "^1.0.4",
-    "karma-phantomjs-shim": "^1.4.0",
-    "karma-sinon-chai": "^1.2.0",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-spec-reporter": "0.0.30",
-    "karma-webpack": "2",
-    "lolex": "^1.6.0",
-    "mocha": "^3.1.0",
-    "opn": "^5.1.0",
-    "ora": "^1.2.0",
-    "phantomjs-prebuilt": "^2.1.13",
-    "portfinder": "^1.0.13",
-    "selenium-server": "^3.3.1",
-    "shelljs": "^0.7.7",
-    "sinon": "^2.1.0",
-    "sinon-chai": "^2.9.0",
-    "url-loader": "^0.5.8",
-    "vue": "2.5.17",
-    "vue-hot-reload-api": "2.3.1",
-    "vue-html-loader": "^1.2.4",
-    "vue-loader": "^14.2.1",
-    "vue-style-loader": "4.1.2",
-    "vue-template-compiler": "2.5.17",
-    "vuepress": "^0.14.4",
-    "webpack": "^3.7.1",
-    "webpack-dev-middleware": "^1.10.1",
-    "webpack-hot-middleware": "^2.17.1",
-    "webpack-merge": "^4.1.0"
-  },
-  "engines": {
-    "node": ">=6.9.0",
-    "npm": ">= 3.0.0"
-  },
-  "browserify": {
-    "transform": [
-      "babelify"
-    ]
-  },
-  "greenkeeper": {
-    "ignore": [
-      "extract-text-webpack-plugin",
-      "karma-webpack",
-      "webpack",
-      "webpack-merge"
-    ]
-  }
-}
+  "readme": "",
+  "module": "./dist/index.js",
+  "scripts": {}
+}

README.md

@@ -1,8 +0,12 @@
-<div align="center">
-  <img width="256" heigth="256" src="/assets/vue-chartjs.png" alt="vue-chartjs logo">
-</div>
+# vue-chartjs
 
+<img align="right" width="150" height="150" alt="vue-chartjs logo" src="/assets/vue-chartjs.png">
+
+**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.
+
 [![npm version](https://badge.fury.io/js/vue-chartjs.svg)](https://badge.fury.io/js/vue-chartjs)
 [![codecov](https://codecov.io/gh/apertureless/vue-chartjs/branch/master/graph/badge.svg)](https://codecov.io/gh/apertureless/vue-chartjs)
-[![Build Status](https://travis-ci.org/apertureless/vue-chartjs.svg?branch=master)](https://travis-ci.org/apertureless/vue-chartjs)
+[![Build Status](https://img.shields.io/github/workflow/status/apertureless/vue-chartjs/CI.svg)](https://github.com/apertureless/vue-chartjs/actions)
 [![Package Quality](http://npm.packagequality.com/shield/vue-chartjs.svg)](http://packagequality.com/#?package=vue-chartjs)
@@ -14,72 +18,62 @@ [![npm](https://img.shields.io/npm/dm/vue-chartjs.svg)](https://www.npmjs.com/package/vue-chartjs)
 [![Known Vulnerabilities](https://snyk.io/test/github/apertureless/vue-chartjs/badge.svg)](https://snyk.io/test/github/apertureless/vue-chartjs)
-[![Maintainability](https://api.codeclimate.com/v1/badges/8c0256b16ba7a50a9f93/maintainability)](https://codeclimate.com/github/apertureless/vue-chartjs/maintainability)
 [![Donate](assets/donate.svg)](https://www.paypal.me/apertureless/50eur)
 [![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/C0C1WP7C)
 
-# vue-chartjs
+<br />
+<a href="#install">Install</a>
+<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+<a href="#docs">Docs</a>
+<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+<a href="#how-to-use">How to use</a>
+<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+<a href="#migration-to-v4">Migration to v4</a>
+<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+<a href="#demo">Demo</a>
+<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+<a href="https://slack.cube.dev/?ref=eco-vue-chartjs">Slack</a>
+<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+<a href="https://stackoverflow.com/questions/tagged/vue-chartjs">Stack Overflow</a>
+<br />
+<hr />
 
-**vue-chartjs** is a wrapper for [Chart.js](https://github.com/chartjs/Chart.js) in vue. You can easily create reuseable chart components.
+## Install
 
-## Demo & Docs
+Install this library with peer dependencies:
 
-- 📺 [Demo](http://demo.vue-chartjs.org/)
-- 📖 [Docs](http://vue-chartjs.org/)
+```bash
+pnpm add vue-chartjs chart.js
+# or
+yarn add vue-chartjs chart.js
+# or
+npm i vue-chartjs chart.js
+```
 
-### Compatibility
+We recommend using `chart.js@^3.0.0`.
 
-- v1 later `@legacy`
-  - Vue.js 1.x
-- v2 later
-  - Vue.js 2.x
+<hr />
 
-After the final release of vue.js 2, you also get the v2 by default if you install vue-chartjs over npm.
-No need for the @next tag anymore. If you want the v1 you need to define the version or use the legacy tag.
-If you're looking for v1 check this [branch](https://github.com/apertureless/vue-chartjs/tree/release/1.x)
+Need an API to fetch data? Consider [Cube](https://cube.dev/?ref=eco-vue-chartjs), an open-source API for data apps.
 
-## Install
+<br />
 
-- **yarn** install: `yarn add vue-chartjs chart.js`
-- **npm** install: `npm install vue-chartjs chart.js --save`
+[![supported by Cube](https://user-images.githubusercontent.com/986756/154330861-d79ab8ec-aacb-4af8-9e17-1b28f1eccb01.svg)](https://cube.dev/?ref=eco-vue-chartjs)
 
-Or if you want to use it directly in the browser add
+## Docs
 
-```html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
-<script src="https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js"></script>
-```
-to your scripts. See [Codepen](https://codepen.io/apertureless/pen/zEvvWM)
+- 📖 [v3 Docs](http://vue-chartjs.org/)
 
+## How to use
 
-### Browser
-You can use `vue-chartjs` directly in the browser without any build setup. Like in this [codepen](https://codepen.io/apertureless/pen/zEvvWM). For this case, please use the `vue-chartjs.min.js` which is the minified version. You also need to add the Chart.js CDN script.
+This package works with version 2.x and 3.x of Vue.
 
-You can then simply register your component:
+Import the component.
 
-```js
-Vue.component('line-chart', {
-  extends: VueChartJs.Line,
-  mounted () {
-    this.renderChart({
-      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-      datasets: [
-        {
-          label: 'Data One',
-          backgroundColor: '#f87979',
-          data: [40, 39, 10, 40, 39, 80, 40]
-        }
-      ]
-    }, {responsive: true, maintainAspectRatio: false})
-  }
-})
+```javascript
+import { Bar } from 'vue-chartjs'
 ```
 
-## How to use
+For Vue 2 projects, you need to import from `vue-chartjs/legacy`.
 
-You need to import the component and then either use `extends` or `mixins` and add it.
-
-You can import the whole package or each module individual.
-
 ```javascript
-import VueCharts from 'vue-chartjs'
-import { Bar, Line } from 'vue-chartjs'
+import { Bar } from 'vue-chartjs/legacy'
 ```
@@ -89,22 +83,69 @@
 
-```javascript
-// CommitChart.js
+```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"
+  />
+</template>
+
+<script>
 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)
+
 export default {
-  extends: Bar,
-  mounted () {
-    // Overwriting base render method with actual data.
-    this.renderChart({
-      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
-      datasets: [
-        {
-          label: 'GitHub Commits',
-          backgroundColor: '#f87979',
-          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
-        }
-      ]
-    })
+  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: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      chartData: {
+        labels: [ 'January', 'February', 'March' ],
+        datasets: [ { data: [40, 20, 12] } ]
+      },
+      chartOptions: {
+        responsive: true
+      }
+    }
   }
 }
+</script>
 ```
@@ -115,48 +156,60 @@
 ```ts
-// CommitChart.ts
-import { Bar, mixins } from 'vue-chartjs';
-import { Component } from 'vue-property-decorator';
+// BarChart.ts
+import { defineComponent, h, PropType } from 'vue'
+import { Bar } from 'vue-chartjs'
+import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, PluginOptionsByType } from 'chart.js'
 
-@Component({
-    extends: Bar, // this is important to add the functionality to your component
-    mixins: [mixins.reactiveProp]
-})
-export default class CommitChart extends Vue<Bar> {
-  mounted () {
-    // Overwriting base render method with actual data.
-    this.renderChart({
-      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
-      datasets: [
-        {
-          label: 'GitHub Commits',
-          backgroundColor: '#f87979',
-          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
-        }
-      ]
-    })
-  }
-}
-```
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
 
-Then simply import and use your own extended component and use it like a normal vue component
+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: Object as PropType<PluginOptionsByType<'bar'>>,
+      default: () => {}
+    }
+  },
+  setup(props) {
+    const chartData = {
+      labels: [ 'January', 'February', 'March' ],
+      datasets: [ { data: [40, 20, 12] } ]
+    }
 
-```javascript
-import CommitChart from 'path/to/component/CommitChart'
-```
+    const chartOptions = { responsive: true }
 
-## Another Example with options
+    return () =>
+      h(Bar, {
+        chartData,
+        chartOptions,
+        chartId: props.chartId,
+        width: props.width,
+        height: props.height,
+        cssClasses: props.cssClasses,
+        styles: props.styles,
+        plugins: props.plugins
+      })
+  }
+})
 
-You can overwrite the default chart options. Just pass the options object as a second parameter to the render method
-
-```javascript
-// MonthlyIncome.vue
-import { Line } from 'vue-chartjs'
-
-export default {
-  extends: Line,
-  props: ['data', 'options'],
-  mounted () {
-    this.renderChart(this.data, this.options)
-  }
-}
 ```
@@ -166,13 +219,13 @@
 
-```javascript
-import MonthlyIncome from 'path/to/component/MonthlyIncome'
-
+```vue
 <template>
-  <monthly-income :data={....} />
+  <BarChart />
 </template>
 
 <script>
+import BarChart from 'path/to/component/BarChart'
+
 export default {
-  components: { MonthlyIncome },
-  ....
+  name: 'App',
+  components: { BarChart }
 }
@@ -184,52 +237,135 @@ </script>
 
-Chart.js does not update or re-render the chart if new data is passed.
-However, you can simply implement this on your own or use one of the two mixins which are included.
+vue-chartjs will update or re-render the chart if new data is passed.
 
-- `reactiveProp`
-- `reactiveData`
+## Migration to v4
 
-Both are included in the `mixins` module.
+With v4, this library introduces a number of breaking changes. In order to improve performance, offer new features, and improve maintainability, it was necessary to break backwards compatibility, but we aimed to do so only when worth the benefit.
 
-The mixins automatically create `chartData` as a prop or data. And add a watcher. If data has changed, the chart will update.
-However, keep in mind the limitations of vue and javascript for mutations on arrays and objects.
-**It is important that you pass your options in a local variable named `options`!**
-The reason is that if the mixin re-renders the chart it calls `this.renderChart(this.chartData, this.options)` so don't pass in the options object directly or it will be ignored.
+v4 is fully compatible with Chart.js v3.
 
-More info [here](https://vue-chartjs.org/guide/#updating-charts)
+### Tree-shaking
 
+v4 of this library, [just like Chart.js v3](https://www.chartjs.org/docs/latest/getting-started/v3-migration.html#setup-and-installation), is tree-shakable. It means that you need to import and register the controllers, elements, scales, and plugins you want to use.
+
+For a list of all the available items to import, see [Chart.js docs](https://www.chartjs.org/docs/latest/getting-started/integration.html#bundlers-webpack-rollup-etc).
+
+v3:
+
 ```javascript
-// MonthlyIncome.js
-import { Line, mixins } from 'vue-chartjs'
+import { Bar } from 'vue-chartjs'
+```
 
+v4 — lazy way:
+
+```javascript
+import 'chart.js/auto';
+import { Bar } from 'vue-chartjs'
+```
+
+v4 — tree-shakable way:
+
+```javascript
+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)
+```
+
+Using the "lazy way" is okay to simplify the migration, but please consider using the tree-shakable way to decrease the bundle size.
+
+Please note that typed chart components register their controllers by default, so you don't need to register them by yourself. For example, when using the Pie component, you don't need to register PieController explicitly.
+
+```javascript
+import { Pie } from 'vue-chartjs'
+import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale } from 'chart.js'
+
+ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale)
+```
+
+### Changing the creation of Charts
+
+In v3, you needed to import the component, and then either use extends or mixins and add it.
+
+v3:
+
+```javascript
+// BarChart.js
+import { Bar } from 'vue-chartjs'
+
 export default {
-  extends: Line,
-  mixins: [mixins.reactiveProp],
-  props: ['chartData', 'options'],
+  extends: Bar,
   mounted () {
-    this.renderChart(this.chartData, this.options)
+    // Overwriting base render method with actual data.
+    this.renderChart({
+      labels: ['January', 'February', 'March'],
+      datasets: [
+        {
+          label: 'GitHub Commits',
+          backgroundColor: '#f87979',
+          data: [40, 20, 12]
+        }
+      ]
+    })
   }
 }
+```
 
+```vue
+<template>
+  <BarChart />
+</template>
+
+<script>
+// DataPage.vue
+import BarChart from 'path/to/component/BarChart'
+
+export default {
+  name: 'DataPage',
+  components: { BarChart }
+}
+<script>
 ```
 
-### Mixins module
-The `mixins` module is included in the `VueCharts` module and as a separate module.
-Some ways to import them:
+In v4, you need to import the component, pass props to it, and use Chart component as a standard Vue component.
 
-```javascript
-// Load complete module with all charts
-import VueCharts from 'vue-chartjs'
+```vue
+<template>
+  <Bar :chart-data="chartData" />
+</template>
 
+<script>
+// DataPage.vue
+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)
+
 export default {
-  extends: VueCharts.Line,
-  mixins: [VueCharts.mixins.reactiveProp],
-  props: ['chartData', 'options'],
-  mounted () {
-    this.renderChart(this.chartData, this.options)
+  name: 'BarChart',
+  components: { Bar },
+  data() {
+    return {
+      chartData: {
+        labels: [ 'January', 'February', 'March'],
+        datasets: [
+          {
+            label: 'Data One',
+            backgroundColor: '#f87979',
+            data: [40, 20, 12]
+          }
+        ]
+      }
+    }
   }
 }
+</script>
 ```
 
+### New reactivity system
+
+v3 does not update or re-render the chart if new data is passed. You needed to use `reactiveProp` and `reactiveData` mixins for that.
+
+v3:
+
 ```javascript
-// Load separate modules
 import { Line, mixins } from 'vue-chartjs'
@@ -247,20 +383,31 @@
 
-```javascript
-// Load separate modules with destructure assign
-import { Line, mixins } from 'vue-chartjs'
-const { reactiveProp } = mixins
+v4 charts have data change watcher by default. v4 will update or re-render the chart if new data is passed. Mixins have been removed.
 
+v4:
+
+```vue
+<template>
+  <Bar :chart-data="chartData" />
+</template>
+
+<script>
+// DataPage.vue
+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)
+
 export default {
-  extends: Line,
-  mixins: [reactiveProp],
-  props: ['chartData', 'options'],
-  mounted () {
-    this.renderChart(this.chartData, this.options)
-  }
+  name: 'BarChart',
+  components: { Bar },
+  computed: {
+      chartData() { return /* mutable chart data */ }
+    }
 }
+</script>
 ```
 
-## Single File Components
+## Demo
 
-You can create your components in Vues single file components. However it is important that you **do not** have the `<template></template>` included. Because Vue can't merge templates. And the template is included in the mixin. If you leave the template tag in your component, it will overwrite the one which comes from the base chart and you will have a blank screen.
+- 📺 [Demo](http://demo.vue-chartjs.org/)
 
@@ -305,22 +452,14 @@ ## Available Charts
 # install dependencies
-npm install
+pnpm install
 
-# serve with hot reload at localhost:8080
-npm run dev
-
 # build for production with minification
-npm run build
+pnpm build
 
 # run unit tests
-npm run unit
+pnpm unit
 
-# run e2e tests
-npm run e2e
-
 # run all tests
-npm test
+pnpm test
 ```
 
-For a detailed explanation of how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
-
 ## Contributing
@@ -327,0 +466,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

0

decreased by-100%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

471

increased by41.87%

Worsened metrics

Total package byte prevSize

135044

decreased by-12.07%

Number of package files

19

decreased by-56.82%

Lines of code

991

decreased by-33.89%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@babel/helper-string-parser@7.25.9(transitive)

• + Added@babel/helper-validator-identifier@7.25.9(transitive)

• + Added@babel/parser@7.26.2(transitive)

• + Added@babel/types@7.26.0(transitive)

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@vue/compiler-core@3.5.13(transitive)

• + Added@vue/compiler-dom@3.5.13(transitive)

• + Added@vue/compiler-sfc@3.5.13(transitive)

• + Added@vue/compiler-ssr@3.5.13(transitive)

• + Added@vue/reactivity@3.5.13(transitive)

• + Added@vue/runtime-core@3.5.13(transitive)

• + Added@vue/runtime-dom@3.5.13(transitive)

• + Added@vue/server-renderer@3.5.13(transitive)

• + Added@vue/shared@3.5.13(transitive)

• + Addedchart.js@3.9.1(transitive)

• + Addedcsstype@3.1.3(transitive)

• + Addedentities@4.5.0(transitive)

• + Addedestree-walker@2.0.2(transitive)

• + Addedmagic-string@0.30.13(transitive)

• + Addednanoid@3.3.7(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedpostcss@8.4.49(transitive)

• + Addedsource-map-js@1.2.1(transitive)

• + Addedvue@3.5.13(transitive)

• - Removed@types/chart.js@^2.7.55

• - Removed@kurkle/color@0.3.4(transitive)

• - Removed@types/chart.js@2.9.41(transitive)

• - Removedchart.js@4.4.6(transitive)

• - Removedmoment@2.30.1(transitive)