chart.js-plugin-labels-dv - npm Package Compare versions

Comparing version 4.0.0 to 5.0.0-beta

.eslintrc.json

@@ -6,3 +6,8 @@ {
     },
-    "extends": "eslint:recommended",
+    "extends": [
+        "eslint:recommended", "plugin:@typescript-eslint/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "plugins": ["@typescript-eslint"],
+    "root": true,
     "parserOptions": {
@@ -9,0 +14,0 @@ "ecmaVersion": 12,

CHANGELOG.md

 # Change Log
 
+## v5.0.0-beta / 2023-07-03
+### Added
+- Angular support with usage example
+
+### Changed
+- Add support for Chart.js v4.3 !BREAKING
+- TypeScript refactoring of the initial plugin source
+- TypeScript eslint support
+- Extracted `ChartLabel` – this holds a large chunk of the initial logic
+- Extracted `getChartLabelPlugin()` method – which can be used to register chart plugin
+
 ## v3.0.0 / 2021-05-26
@@ -4,0 +15,0 @@ ### Added

package.json

 {
   "name": "chart.js-plugin-labels-dv",
-  "version": "4.0.0",
+  "version": "5.0.0-beta",
   "description": "Chart.js plugin to display labels on pie, doughnut and polar area chart.",
-  "main": "src/chartjs-plugin-labels.js",
+  "main": "dist/esm/chart-label.js",
   "scripts": {
     "build": "rollup -c",
+    "build:ts": "tsc",
     "lint": "eslint ./"
   },
   "peerDependencies": {
-    "chart.js": "^4.2.1"
+    "chart.js": "^4.3.0"
   },
+  "types": "./dist/types/index.d.ts",
   "repository": {
@@ -30,6 +32,9 @@ "type": "git",
   "devDependencies": {
-    "eslint": "^8.36.0",
+    "@typescript-eslint/eslint-plugin": "^5.60.1",
+    "@typescript-eslint/parser": "^5.60.1",
+    "eslint": "^8.44.0",
     "rollup": "^2.79.1",
-    "rollup-plugin-terser": "^7.0.2"
+    "rollup-plugin-terser": "^7.0.2",
+    "typescript": "^4.6.4"
   }
 }

README.md

@@ -1,4 +0,8 @@
-# Chart.js Plugin Labels for Chart.js v3+
-[Chart.js](https://www.chartjs.org/) plugin to display labels on pie, doughnut and polar area chart. Forked from emn178/chartjs-plugin-labels.
+[![Maintainability](https://api.codeclimate.com/v1/badges/ded2c349739e4d87130b/maintainability)](https://codeclimate.com/github/DavideViolante/chart.js-plugin-labels-dv/maintainability) ![npm](https://img.shields.io/npm/dm/chart.js-plugin-labels-dv) [![Donate](https://img.shields.io/badge/paypal-donate-179BD7.svg)](https://www.paypal.me/dviolante)
 
+[![NPM](https://nodei.co/npm/chart.js-plugin-labels-dv.png)](https://nodei.co/npm/chart.js-plugin-labels-dv/)
+
+# Chart.js Plugin Labels for Chart.js v4+
+[Chart.js](https://www.chartjs.org/) plugin to display labels on pie, doughnut and polar area chart. Forked from [emn178/chartjs-plugin-labels](https://github.com/emn178/chartjs-plugin-labels).
+
 ## Demo
@@ -16,3 +20,3 @@ - [Demo](http://emn178.github.io/chartjs-plugin-labels/samples/demo/) from the original repo using Chart.js v2.x, but it's almost the same.
 
-## Installation
+## Install from NPM
 - `npm i chart.js-plugin-labels-dv`
@@ -22,3 +26,3 @@
 JavaScript
-```JavaScript
+```js
 new Chart(ctx, {
@@ -32,40 +36,27 @@ type: type,
         render: 'value',
-
         // precision for percentage, default is 0
         precision: 0,
-
         // identifies whether or not labels of value 0 are displayed, default is false
         showZero: true,
-
         // font size, default is defaultFontSize
         fontSize: 12,
-
         // font color, can be color array for each data or function for dynamic color, default is defaultFontColor
         fontColor: '#fff',
-
         // font style, default is defaultFontStyle
         fontStyle: 'normal',
-
         // font family, default is defaultFontFamily
         fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
-
         // draw text shadows under labels, default is false
         textShadow: true,
-
         // text shadow intensity, default is 6
         shadowBlur: 10,
-
         // text shadow X offset, default is 3
         shadowOffsetX: -5,
-
         // text shadow Y offset, default is 3
         shadowOffsetY: 5,
-
         // text shadow color, default is 'rgba(0,0,0,0.3)'
         shadowColor: 'rgba(255,0,0,0.75)',
-
         // draw label in arc, default is false
         // bar chart ignores this
         arc: true,
-
         // position to draw label, available value is 'default', 'border' and 'outside'
@@ -75,10 +66,7 @@ // bar chart ignores this
         position: 'default',
-
         // draw label even it's overlap, default is true
         // bar chart ignores this
         overlap: true,
-
         // show the real calculated percentages from the values and don't apply the additional logic to fit the percentages to 100 in total, default is false
         showActualPercentages: true,
-
         // set images when `render` is 'image'
@@ -92,7 +80,5 @@ images: [
         ],
-
         // add padding when position is `outside`
         // default is 2
         outsidePadding: 4,
-
         // add margin of text when position is `outside` or `border`
@@ -112,3 +98,2 @@ // default is 2
     return '$' + args.value;
-
     // return object if it is image
@@ -131,3 +116,3 @@ // return { src: 'image.png', width: 16, height: 16 };
 
-```JavaScript
+```js
 labels: [
@@ -146,3 +131,3 @@ {
 
-```JavaScript
+```js
 Chart.defaults.plugins.labels = {
@@ -170,6 +155,74 @@ // ...
 
-### Angular / Vue
-We need your contribution! If you know how to make it work with these frameworks please open a PR editing this readme.
+### Vue
+From https://github.com/DavideViolante/chartjs-plugin-labels/issues/2#issuecomment-1483948596
+```ts
+import Chart from "chart.js/auto";
+import * as helpers from "chart.js/helpers";
+```
+Then inside the `created()` hook:
+```ts
+async created() {
+  window.Chart = Chart;
+  Chart.helpers = helpers;
+  awaitimport("chart.js-plugin-labels-dv");
+}
+```
 
+### Angular
+You would need to create your own chart component.
+```html
+<div class="chart">
+  <canvas [id]="name"></canvas>
+</div>
+```
 
+Importing should be straightforward
+```ts
+import Chart from 'chart.js/auto';
+import { getChartLabelPlugin, PLUGIN_ID } from 'chart.js-plugin-labels-dv';
+```
+
+```ts
+@Input() chartConfig: any;
+@Output() chartCreated: EventEmitter<Chart> = new EventEmitter<Chart>();
+
+public readonly name: string = `chart-${ChartComponent.instanceCount++}`;
+private chart: Chart;
+
+ngAfterViewInit(): void {
+  this.createChart();
+}
+
+private createChart(): void {
+  if (!this.hasRegisteredPlugin()) {
+    Chart.register(getChartLabelPlugin());
+  }
+    
+  this.chart = new Chart(this.name, this.chartConfig);
+  this.chartCreated.emit(this.chart);
+}
+
+private hasRegisteredPlugin(): boolean {
+    return !!Chart.registry?.plugins.get(PLUGIN_ID);
+}
+```
+
+For fixing the module failed compilation error I have updated tsconfig as follows:
+
+```
+Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
+Error: /node_modules/chart.js-plugin-labels-dv/src/chart-label.ts is missing from the TypeScript compilation.
+Please make sure it is in your tsconfig via the 'files' or 'include' property.
+```
+
+tsconfig.json
+```json
+"files": [
+  ...
+  "node_modules/chart.js-plugin-labels-ed/src/chart-label.ts"
+],
+```
+
+Test it out with data from the official Chart.js website: https://www.chartjs.org/docs/latest/charts/doughnut.html#pie
+
 ## License
@@ -180,2 +233,2 @@ [MIT license](http://www.opensource.org/licenses/MIT).
 The project's website is located at https://github.com/emn178/chartjs-plugin-labels  
-Authors: Chen, Yi-Cyuan ([e-mail]), Davide Violante
+Authors: Chen, Yi-Cyuan ([e-mail]), Davide Violante, eduard-landclan

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

Improved metrics

Total package byte prevSize

156500

increased by181.61%

Number of package files

26

increased by85.71%

Lines of code

2174

increased by266.61%

Number of lines in readme file

225

increased by30.81%

Worsened metrics

Dev dependency count

6

increased by100%

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes