ng2-charts - npm Package Compare versions

Comparing version 4.1.1 to 5.0.0

index.d.ts

@@ -1,5 +0,4 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="ng2-charts" />
-export * from './public_api';
+export * from './lib/ng-charts.module';
+export * from './lib/base-chart.directive';
+export * from './lib/theme.service';
+export * from './lib/base-colors';

lib/base-chart.directive.d.ts

@@ -17,7 +17,7 @@ import { ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
         event?: ChartEvent;
-        active?: {}[];
+        active?: object[];
     }>;
     chartHover: EventEmitter<{
         event: ChartEvent;
-        active: {}[];
+        active: object[];
     }>;
@@ -41,3 +41,3 @@ ctx: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<BaseChartDirective<any, any, any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseChartDirective<any, any, any>, "canvas[baseChart]", ["base-chart"], { "type": "type"; "legend": "legend"; "data": "data"; "options": "options"; "plugins": "plugins"; "labels": "labels"; "datasets": "datasets"; }, { "chartClick": "chartClick"; "chartHover": "chartHover"; }, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseChartDirective<any, any, any>, "canvas[baseChart]", ["base-chart"], { "type": { "alias": "type"; "required": false; }; "legend": { "alias": "legend"; "required": false; }; "data": { "alias": "data"; "required": false; }; "options": { "alias": "options"; "required": false; }; "plugins": { "alias": "plugins"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "datasets": { "alias": "datasets"; "required": false; }; }, { "chartClick": "chartClick"; "chartHover": "chartHover"; }, never, never, false, never>;
 }

lib/theme.service.d.ts

@@ -7,3 +7,2 @@ import { BehaviorSubject } from 'rxjs';
     colorschemesOptions: BehaviorSubject<ChartOptions | undefined>;
-    constructor();
     setColorschemesOptions(options: ChartConfiguration['options']): void;
@@ -10,0 +9,0 @@ getColorschemesOptions(): ChartConfiguration['options'];

package.json

 {
+  "version": "5.0.0",
   "name": "ng2-charts",
-  "version": "4.1.1",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
+  "description": "Reactive, responsive, beautiful charts for Angular based on Chart.js",
   "peerDependencies": {
-    "@angular/common": ">=14.0.0",
-    "@angular/core": ">=14.0.0",
-    "@angular/cdk": ">=14.0.0",
+    "@angular/common": ">=16.0.0",
+    "@angular/core": ">=16.0.0",
+    "@angular/cdk": ">=16.0.0",
     "chart.js": "^3.4.0 || ^4.0.0",
-    "rxjs": "^6.5.3 || ^7.4.0"
+    "rxjs": "^6.5.3 || ^7.4.0",
+    "ng2-charts-schematics": "0.0.1",
+    "@angular/platform-browser": "16.1.5"
   },
@@ -18,6 +18,19 @@ "dependencies": {
   },
-  "description": "Reactive, responsive, beautiful charts for Angular based on Chart.js",
-  "main": "src/public_api.ts",
-  "author": "Aviad Pineles",
-  "license": "ISC",
+  "author": "Dmitriy Shekhovtsov <[e-mail]>",
+  "contributors": [
+    {
+      "name": "Marco Santarelli",
+      "email": "",
+      "url": "https://github.com/santam85"
+    },
+    {
+      "name": "Aviad Pineles",
+      "email": ""
+    },
+    {
+      "name": "Dmitriy Shekhovtsov",
+      "email": "[e-mail]"
+    }
+  ],
+  "license": "MIT",
   "repository": {
@@ -27,3 +40,3 @@ "type": "git",
   },
-  "schematics": "./schematics/collection.json",
+  "schematics": "./schematics/src/collection.json",
   "ng-add": {
@@ -40,7 +53,3 @@ "save": "dependencies"
   "homepage": "https://github.com/valor-software/ng2-charts#readme",
-  "module": "fesm2015/ng2-charts.mjs",
-  "es2020": "fesm2020/ng2-charts.mjs",
-  "esm2020": "esm2020/ng2-charts.mjs",
-  "fesm2020": "fesm2020/ng2-charts.mjs",
-  "fesm2015": "fesm2015/ng2-charts.mjs",
+  "module": "fesm2022/ng2-charts.mjs",
   "typings": "index.d.ts",
@@ -53,10 +62,8 @@ "exports": {
       "types": "./index.d.ts",
-      "esm2020": "./esm2020/ng2-charts.mjs",
-      "es2020": "./fesm2020/ng2-charts.mjs",
-      "es2015": "./fesm2015/ng2-charts.mjs",
-      "node": "./fesm2015/ng2-charts.mjs",
-      "default": "./fesm2020/ng2-charts.mjs"
+      "esm2022": "./esm2022/ng2-charts.mjs",
+      "esm": "./esm2022/ng2-charts.mjs",
+      "default": "./fesm2022/ng2-charts.mjs"
     }
   },
   "sideEffects": false
-}
+}

README.md

@@ -1,213 +0,7 @@
-# ng2-charts [![npm version](https://badge.fury.io/js/ng2-charts.svg)](http://badge.fury.io/js/ng2-charts) [![npm downloads](https://img.shields.io/npm/dm/ng2-charts.svg)](https://npmjs.org/ng2-charts) ![Travis CI](https://travis-ci.org/valor-software/ng2-charts.svg?branch=development) [slack](https://ngx-home.slack.com)
+# ng2-charts
 
-Beautiful charts for Angular based on Chart.js
+This library was generated with [Nx](https://nx.dev).
 
-[![NPM](https://nodei.co/npm/ng2-charts.png?downloads=true&downloadRank=true&stars=true)](https://npmjs.org/ng2-charts)
-[![NPM](https://nodei.co/npm-dl/ng2-charts.png?height=3&months=9)](https://npmjs.org/ng2-charts)
+## Running unit tests
 
-# Usage & Demo
-
-Samples using `ng2-charts`
-
-https://valor-software.com/ng2-charts/
-
-- - -
-
-### Installation
-
-You can install ***ng2-charts*** by using the Angular CLI:
-
-  ```bash
-  ng add ng2-charts
-  ```
-
-The required packages will be automatically installed, and your `app.module.ts` will be updated with the required
-changes to start using the library right away.
-
-#### Manual install through package managers
-
-1. You can install ***ng2-charts*** using npm
-
-  ```bash
-  npm install ng2-charts --save
-  ```
-
-or yarn
-
-  ```bash
-  yarn add ng2-charts --save
-  ```
-
-2. You will also need to install and include `Chart.js` library in your application (it is a peer dependency of this
-   library, more info can be found in the
-   official `chart.js` [documentation](http://www.chartjs.org/docs/#getting-started))
-
-  ```bash
-  npm install chart.js --save
-  ```
-
-or with yarn:
-
-  ```bash
-  yarn add  chart.js --save
-  ```
-
-3. Import the `NgChartsModule` in your app main module:
-
-  ```typescript
-  import { NgChartsModule } from 'ng2-charts';
-
-  // In your App's module:
-  imports: [
-    NgChartsModule
-  ]
-  ```
-
-### Stackblitz Starting Templates
-
-* Line Chart - https://stackblitz.com/github/santam85/ng2-charts-line-template?preset=node
-* Pie Chart - https://stackblitz.com/github/santam85/ng2-charts-pie-template?preset=node
-* Bar Chart - https://stackblitz.com/github/santam85/ng2-charts-bar-template?preset=node
-* Doughnut Chart - https://stackblitz.com/github/santam85/ng2-charts-doughnut-template?preset=node
-* Radar Chart - https://stackblitz.com/github/santam85/ng2-charts-radar-template?preset=node
-* Polar Area Chart - https://stackblitz.com/github/santam85/ng2-charts-polar-area-template?preset=node
-* Bubble Chart - https://stackblitz.com/github/santam85/ng2-charts-bubble-template?preset=node
-* Scatter Chart - https://stackblitz.com/github/santam85/ng2-charts-scatter-template?preset=node
-
-## API
-
-### Chart types
-
-There is one directive for all chart types: `baseChart`, and there are 8 types of charts: `line`, `bar`, `radar`, `pie`
-, `polarArea`, `doughnut`, `bubble` and `scatter`. You can use the directive on a `canvas` element as follows:
-
-  ```html
-<canvas baseChart
-        [data]="barChartData"
-        [options]="barChartOptions"
-        [type]="'bar'">
-</canvas>
-  ```
-
-### Properties
-
-**Note**: For more information about possible options please refer to original [chart.js](http://www.chartjs.org/docs)
-documentation
-
-- `type`: (`ChartType`) - indicates the type of chart, it can be: `line`, `bar`, `radar`, `pie`, `polarArea`, `doughnut`
-  or any custom type added to Chart.js
-- `data`: (`ChartData<TType, TData, TLabel>`) - the whole data structure to be rendered in the chart. Support different
-  flexible formats and parsing options,
-  see [here](https://www.chartjs.org/docs/latest/general/data-structures.html#object). In alternative, and depending on
-  the `type` of your chart, you can use the `labels` and `datasets` properties to specify individual options.
-- `labels`: (`TLabel[]`) - Datasets labels. It's necessary for charts: `line`, `bar` and `radar`. And just labels (on
-  hover) for charts: `polarArea`, `pie` and `doughnut`. Labels are matched in order with the `datasets` array.
-- `datasets`: (` ChartDataset<TType, TData>[]`) - Same as the `datasets` property of the `data` input.
-  See [here](https://www.chartjs.org/docs/latest/general/data-structures.html#dataset-configuration) for details.
-- `options`: (`ChartOptions<TType>`) - chart options (as
-  per [chart.js documentation](https://www.chartjs.org/docs/latest/general/options.html)).
-- `legend`: (`boolean = false`) - if true, chart legend is shown.
-
-### Events
-
-- `chartClick`: fires when click on a chart has occurred, returns information regarding active points and labels
-- `chartHover`: fires when mousemove (hover) on a chart has occurred, returns information regarding active points and
-  labels
-
-### Colors
-
-The library comes with a set of predefined default colors (which are exported as `baseColors`). If there are more
-datasets than colors, colors are generated randomly. You can specify custom colors by following
-these [instructions](https://www.chartjs.org/docs/latest/general/colors.html).
-
-### Dynamic Theming
-
-The `NgChartsModule` provides a service called `ThemeService` which allows clients to set a structure specifying colors
-override settings. This service may be called when the dynamic theme changes, with colors which fit the theme. The
-structure is interpreted as an override, with special functionality when dealing with arrays. Example:
-
-```typescript
-type Theme = 'light-theme' | 'dark-theme';
-
-private _selectedTheme: Theme = 'light-theme';
-public get selectedTheme(){
-  return this._selectedTheme;
-}
-
-public set selectedTheme(value){
-  this._selectedTheme = value;
-  let overrides: ChartOptions;
-  if (this.selectedTheme === 'dark-theme') {
-    overrides = {
-      legend: {
-        labels: { fontColor: 'white' }
-      },
-      scales: {
-        xAxes: [ {
-          ticks: { fontColor: 'white' },
-          gridLines: { color: 'rgba(255,255,255,0.1)' }
-        } ],
-        yAxes: [ {
-          ticks: { fontColor: 'white' },
-          gridLines: { color: 'rgba(255,255,255,0.1)' }
-        } ]
-      }
-    };
-  } else {
-    overrides = {};
-  }
-  this.themeService.setColorschemesOptions(overrides);
-}
-
-constructor(private themeService: ThemeService<AppChartMetaConfig>){
-}
-
-setCurrentTheme(theme: Theme){
-  this.selectedTheme = theme;
-}
-```
-
-The `overrides` object has the same type as the chart options object `ChartOptions`, and wherever a simple field is
-encountered it replaces the matching field in the `options` object. When an array is encountered (as in the `xAxes`
-and `yAxes` fields above), the single object inside the array is used as a template to override all array elements in
-the matching field in the `options` object. So in the case above, every axis will have its ticks and gridline colors
-changed.
-
-## Schematics
-
-There are schematics that may be used to add this library to your project and generate chart components using Angular
-CLI.
-
-### Installation of library through ng-add schematics
-
-```bash
-ng add ng2-charts
-```
-
-This schematics will add the `NgChartsModule` as an imported module in the main app module (or another module as specified
-in the `--module` command option).
-
-### Example of Generating a Line Chart using Angular CLI
-
-```bash
-ng generate ng2-charts:line my-line-chart
-```
-
-This calls angular's component schematics and then modifies the result, so all the options for the component schematic
-are also usable here.
-
-## Troubleshooting
-
-Please follow this guidelines when reporting bugs and feature requests:
-
-1. Use [GitHub Issues](https://github.com/valor-software/ng2-charts/issues) board to report bugs and feature requests (
-   not our email address)
-2. Please **always** write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our
-   heads trying to reproduce it.
-
-Thanks for understanding!
-
-### License
-
-The MIT License (see the [LICENSE](https://github.com/valor-software/ng2-charts/blob/master/LICENSE) file for the full
-text)
+Run `nx test ng2-charts` to execute the unit tests.

schematics/README.md

@@ -1,17 +0,11 @@
-# Schematics for `ng2-charts`
+# ng2-charts-schematics
 
-## Installation
+This library was generated with [Nx](https://nx.dev).
 
-```bash
-npm install --save-dev ng2-charts-schematics
-```
+## Building
 
-## Usage
+Run `nx build ng2-charts-schematics` to build the library.
 
-Generate a component with a line chart:
+## Running unit tests
 
-```bash
-ng generate ng2-charts-schematics:line my-line-chart
-```
-
-Supported chart types are `line`, `bar`, `radar`, `pie`, `polar-area`, `doughnut`, `bubble` and `scatter`.
+Run `nx test ng2-charts-schematics` to execute the unit tests via [Jest](https://jestjs.io).

New 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

Worsened metrics

Total package byte prevSize

110920

decreased by-44.95%

Dependency count

9

increased by28.57%

Number of package files

73

decreased by-35.96%

Lines of code

1251

decreased by-37.36%

Number of lines in readme file

8

decreased by-96.26%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes