diff --git a/angular.json b/angular.json
index af642e4c..85890695 100644
--- a/angular.json
+++ b/angular.json
@@ -42,110 +42,10 @@
}
}
}
- },
- "ng-chartist-demo": {
- "root": "projects/ng-chartist-demo/",
- "sourceRoot": "projects/ng-chartist-demo/src",
- "projectType": "application",
- "prefix": "app",
- "schematics": {},
- "architect": {
- "build": {
- "builder": "@angular-devkit/build-angular:browser",
- "options": {
- "outputPath": "dist/ng-chartist-demo",
- "index": "projects/ng-chartist-demo/src/index.html",
- "main": "projects/ng-chartist-demo/src/main.ts",
- "polyfills": "projects/ng-chartist-demo/src/polyfills.ts",
- "tsConfig": "projects/ng-chartist-demo/tsconfig.app.json",
- "assets": [
- "projects/ng-chartist-demo/src/favicon.ico",
- "projects/ng-chartist-demo/src/assets"
- ],
- "styles": [
- "node_modules/chartist/dist/chartist.css",
- "node_modules/chartist-plugin-tooltips-updated/dist/chartist-plugin-tooltip.css",
- "projects/ng-chartist-demo/src/styles.css"
- ],
- "scripts": []
- },
- "configurations": {
- "production": {
- "fileReplacements": [
- {
- "replace": "projects/ng-chartist-demo/src/environments/environment.ts",
- "with": "projects/ng-chartist-demo/src/environments/environment.prod.ts"
- }
- ],
- "optimization": true,
- "outputHashing": "all",
- "sourceMap": false,
- "namedChunks": false,
- "aot": true,
- "extractLicenses": true,
- "vendorChunk": false,
- "buildOptimizer": true,
- "budgets": [
- {
- "type": "initial",
- "maximumWarning": "2mb",
- "maximumError": "5mb"
- }
- ]
- }
- }
- },
- "serve": {
- "builder": "@angular-devkit/build-angular:dev-server",
- "options": {
- "browserTarget": "ng-chartist-demo:build"
- },
- "configurations": {
- "production": {
- "browserTarget": "ng-chartist-demo:build:production"
- }
- }
- },
- "extract-i18n": {
- "builder": "@angular-devkit/build-angular:extract-i18n",
- "options": {
- "browserTarget": "ng-chartist-demo:build"
- }
- },
- "test": {
- "builder": "@angular-devkit/build-angular:karma",
- "options": {
- "main": "projects/ng-chartist-demo/src/test.ts",
- "polyfills": "projects/ng-chartist-demo/src/polyfills.ts",
- "tsConfig": "projects/ng-chartist-demo/tsconfig.spec.json",
- "karmaConfig": "projects/ng-chartist-demo/karma.conf.js",
- "styles": [
- "node_modules/chartist/dist/chartist.css",
- "node_modules/chartist-plugin-tooltips-updated/dist/chartist-plugin-tooltip.css",
- "projects/ng-chartist-demo/src/styles.css"
- ],
- "scripts": [],
- "assets": [
- "projects/ng-chartist-demo/src/favicon.ico",
- "projects/ng-chartist-demo/src/assets"
- ]
- }
- },
- "lint": {
- "builder": "@angular-eslint/builder:lint",
- "options": {
- "lintFilePatterns": [
- "projects/ng-chartist-demo/**/*.ts",
- "projects/ng-chartist-demo/**/*.html"
- ]
- }
- }
- }
}
},
- "defaultProject": "ng-chartist",
"cli": {
- "defaultCollection": "@angular-eslint/schematics",
+ "schematicCollections": ["@angular-eslint/schematics"],
"packageManager": "pnpm",
"analytics": false
}
diff --git a/package.json b/package.json
index 28502e57..652a7bd3 100644
--- a/package.json
+++ b/package.json
@@ -11,12 +11,10 @@
"lint": "ng lint ng-chartist",
"ng": "ng",
"prepare": "husky install",
- "prerelease": "pnpm run build",
"release": "semantic-release",
- "start": "ng serve ng-chartist-demo",
"test": "ng test ng-chartist --watch=false",
"test:coverage": "ng test ng-chartist --watch=false --code-coverage",
- "typecheck": "npm run build"
+ "typecheck": "tsc --project tsconfig.json --noEmit"
},
"commitlint": {
"extends": [
@@ -58,6 +56,7 @@
"@angular/compiler": "14.1.3",
"@angular/compiler-cli": "14.1.3",
"@angular/core": "14.1.3",
+ "@angular/forms": "14.1.3",
"@angular/language-service": "14.1.3",
"@angular/platform-browser": "14.1.3",
"@angular/platform-browser-dynamic": "14.1.3",
@@ -65,14 +64,12 @@
"@commitlint/config-conventional": "17.0.3",
"@semantic-release/changelog": "6.0.1",
"@semantic-release/git": "10.0.1",
- "@types/chartist": "0.11.1",
"@types/jasmine": "4.0.3",
"@types/jasminewd2": "2.0.10",
"@types/node": "18.0.6",
"@typescript-eslint/eslint-plugin": "5.32.0",
"@typescript-eslint/parser": "5.32.0",
- "chartist": "0.11.4",
- "chartist-plugin-tooltips-updated": "0.1.4",
+ "chartist": "1.1.2",
"commitlint": "17.0.3",
"core-js": "3.24.1",
"eslint": "8.21.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c4d0f6fa..05785c58 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,6 +12,7 @@ specifiers:
'@angular/compiler': 14.1.3
'@angular/compiler-cli': 14.1.3
'@angular/core': 14.1.3
+ '@angular/forms': 14.1.3
'@angular/language-service': 14.1.3
'@angular/platform-browser': 14.1.3
'@angular/platform-browser-dynamic': 14.1.3
@@ -19,14 +20,12 @@ specifiers:
'@commitlint/config-conventional': 17.0.3
'@semantic-release/changelog': 6.0.1
'@semantic-release/git': 10.0.1
- '@types/chartist': 0.11.1
'@types/jasmine': 4.0.3
'@types/jasminewd2': 2.0.10
'@types/node': 18.0.6
'@typescript-eslint/eslint-plugin': 5.32.0
'@typescript-eslint/parser': 5.32.0
- chartist: 0.11.4
- chartist-plugin-tooltips-updated: 0.1.4
+ chartist: 1.1.2
commitlint: 17.0.3
core-js: 3.24.1
eslint: 8.21.0
@@ -67,6 +66,7 @@ devDependencies:
'@angular/compiler': 14.1.3_@angular+core@14.1.3
'@angular/compiler-cli': 14.1.3_qojfq3xayca5hnab24uayitgi4
'@angular/core': 14.1.3_rxjs@7.5.6+zone.js@0.11.8
+ '@angular/forms': 14.1.3_iwkqqt2nupzuzcint76ec7avme
'@angular/language-service': 14.1.3
'@angular/platform-browser': 14.1.3_g5lz55bj2yrbloq2nji6xzbsca
'@angular/platform-browser-dynamic': 14.1.3_pfueecypdzafpquildxokoe23y
@@ -74,14 +74,12 @@ devDependencies:
'@commitlint/config-conventional': 17.0.3
'@semantic-release/changelog': 6.0.1_semantic-release@19.0.3
'@semantic-release/git': 10.0.1_semantic-release@19.0.3
- '@types/chartist': 0.11.1
'@types/jasmine': 4.0.3
'@types/jasminewd2': 2.0.10
'@types/node': 18.0.6
'@typescript-eslint/eslint-plugin': 5.32.0_iosr3hrei2tubxveewluhu5lhy
'@typescript-eslint/parser': 5.32.0_qugx7qdu5zevzvxaiqyxfiwquq
- chartist: 0.11.4
- chartist-plugin-tooltips-updated: 0.1.4
+ chartist: 1.1.2
commitlint: 17.0.3
core-js: 3.24.1
eslint: 8.21.0
@@ -468,6 +466,22 @@ packages:
zone.js: 0.11.8
dev: true
+ /@angular/forms/14.1.3_iwkqqt2nupzuzcint76ec7avme:
+ resolution: {integrity: sha512-gCN3my9KRp6BLlBGh4uw8NukUPKCl+quroMO2lkvsodF0MA42uhKHO+EImrpLxNMK7lfENIERwthb4mh4G4cFQ==}
+ engines: {node: ^14.15.0 || >=16.10.0}
+ peerDependencies:
+ '@angular/common': 14.1.3
+ '@angular/core': 14.1.3
+ '@angular/platform-browser': 14.1.3
+ rxjs: ^6.5.3 || ^7.4.0
+ dependencies:
+ '@angular/common': 14.1.3_kbj7owtekphem6sjpo3wfhcyru
+ '@angular/core': 14.1.3_rxjs@7.5.6+zone.js@0.11.8
+ '@angular/platform-browser': 14.1.3_g5lz55bj2yrbloq2nji6xzbsca
+ rxjs: 7.5.6
+ tslib: 2.4.0
+ dev: true
+
/@angular/language-service/14.1.3:
resolution: {integrity: sha512-7XEvRFzApFr6TtyCysGrleerClcU9ldCGoZsDL5SOUEL+3IEPC5L3uJYExLon30pu9jne9Sxq0w8u4cv/rYIeA==}
engines: {node: ^14.15.0 || >=16.10.0}
@@ -2623,10 +2637,6 @@ packages:
'@types/node': 18.0.6
dev: true
- /@types/chartist/0.11.1:
- resolution: {integrity: sha512-85eNd7rF+e5sLnpprgcDdeqARgNvczEXaBfnrkw0292TBCE4KF/2HmOPA6dIblyHUWV4OZ2kuQBH2R12F+VwYg==}
- dev: true
-
/@types/component-emitter/1.2.11:
resolution: {integrity: sha512-SRXjM+tfsSlA9VuG8hGO2nft2p8zjXCK1VcC6N4NXbBbYbSia9kzCChYQajIjzIqOOOuh5Ock6MmV2oux4jDZQ==}
dev: true
@@ -3727,17 +3737,9 @@ packages:
resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==}
dev: true
- /chartist-plugin-tooltips-updated/0.1.4:
- resolution: {integrity: sha512-fp03cd49Z73nmphxyzm6zEm1o8hSJMUeKz9/xphRu943rcphFXUJZIlHs09SpetUnB+ebsvOl9IE69mdbJNb7w==}
- engines: {node: '>=0.10.0'}
- dependencies:
- chartist: 0.11.4
- lodash: 4.17.21
- dev: true
-
- /chartist/0.11.4:
- resolution: {integrity: sha512-H4AimxaUD738/u9Mq8t27J4lh6STsLi4BQHt65nOtpLk3xyrBPaLiLMrHw7/WV9CmsjGA02WihjuL5qpSagLYw==}
- engines: {node: '>=4.6.0'}
+ /chartist/1.1.2:
+ resolution: {integrity: sha512-ccz4ob0rkW6ayxmge3CYkNhwiKLhmz9u2j8WCJw0MUbtQavGuL2KX0GrVntkohSSBgqogqeANFPIigeGrFoTKQ==}
+ engines: {node: '>=14'}
dev: true
/chokidar/3.5.3:
@@ -4024,8 +4026,8 @@ packages:
engines: {node: '>=10'}
hasBin: true
dependencies:
- is-text-path: 1.0.1
JSONStream: 1.3.5
+ is-text-path: 1.0.1
lodash: 4.17.21
meow: 8.1.2
split2: 3.2.2
diff --git a/projects/ng-chartist-demo/.eslintrc.json b/projects/ng-chartist-demo/.eslintrc.json
deleted file mode 100644
index 12775892..00000000
--- a/projects/ng-chartist-demo/.eslintrc.json
+++ /dev/null
@@ -1,38 +0,0 @@
-{
- "extends": "../../.eslintrc.json",
- "ignorePatterns": ["!**/*"],
- "overrides": [
- {
- "files": ["*.ts"],
- "parserOptions": {
- "project": [
- "projects/ng-chartist-demo/tsconfig.app.json",
- "projects/ng-chartist-demo/tsconfig.spec.json"
- ],
- "createDefaultProgram": true
- },
- "rules": {
- "@angular-eslint/directive-selector": [
- "error",
- {
- "type": "attribute",
- "prefix": "app",
- "style": "camelCase"
- }
- ],
- "@angular-eslint/component-selector": [
- "error",
- {
- "type": "element",
- "prefix": "app",
- "style": "kebab-case"
- }
- ]
- }
- },
- {
- "files": ["*.html"],
- "rules": {}
- }
- ]
-}
diff --git a/projects/ng-chartist-demo/browserslist b/projects/ng-chartist-demo/browserslist
deleted file mode 100644
index 37371cb0..00000000
--- a/projects/ng-chartist-demo/browserslist
+++ /dev/null
@@ -1,11 +0,0 @@
-# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
-# For additional information regarding the format and rule options, please see:
-# https://github.com/browserslist/browserslist#queries
-#
-# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed
-
-> 0.5%
-last 2 versions
-Firefox ESR
-not dead
-not IE 9-11
\ No newline at end of file
diff --git a/projects/ng-chartist-demo/src/app/app.component.css b/projects/ng-chartist-demo/src/app/app.component.css
deleted file mode 100644
index 079505d1..00000000
--- a/projects/ng-chartist-demo/src/app/app.component.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.col-md-6 {
- padding: 20px;
-}
diff --git a/projects/ng-chartist-demo/src/app/app.component.html b/projects/ng-chartist-demo/src/app/app.component.html
deleted file mode 100644
index ab691230..00000000
--- a/projects/ng-chartist-demo/src/app/app.component.html
+++ /dev/null
@@ -1,28 +0,0 @@
-
-
-
-
-
-
-
diff --git a/projects/ng-chartist-demo/src/app/app.component.ts b/projects/ng-chartist-demo/src/app/app.component.ts
deleted file mode 100644
index 07323f18..00000000
--- a/projects/ng-chartist-demo/src/app/app.component.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-import { Component } from "@angular/core";
-import * as Chartist from "chartist";
-import { ChartEvent, ChartType } from "ng-chartist";
-
-declare let require: any;
-
-const data: any = require("./data.json");
-
-export interface Chart {
- type: ChartType;
- data: Chartist.IChartistData;
- options?: any;
- responsiveOptions?: any;
- events?: ChartEvent;
-}
-
-@Component({
- selector: "app-root",
- templateUrl: "./app.component.html",
- styleUrls: ["./app.component.css"],
-})
-export class AppComponent {
- public charts: Chart[];
-
- constructor() {
- this.charts = [
- {
- data: data.Bar,
- type: "Bar",
- },
- {
- data: data.Line,
- type: "Line",
- },
- {
- data: data.Line2,
- type: "Line",
- },
- {
- data: data.Scatter,
- options: {
- axisX: {
- labelInterpolationFnc(value: number, index: number): string | null {
- return index % 13 === 0 ? `W${value}` : null;
- },
- },
- showLine: false,
- },
- responsiveOptions: [
- [
- "screen and (min-width: 640px)",
- {
- axisX: {
- labelInterpolationFnc(
- value: number,
- index: number,
- ): string | null {
- return index % 4 === 0 ? `W${value}` : null;
- },
- },
- },
- ],
- ],
- type: "Line",
- },
- {
- data: data.LineWithArea,
- options: {
- low: 0,
- showArea: true,
- },
- type: "Line",
- },
- {
- data: data["Bi-PolarBar"],
- options: {
- axisX: {
- labelInterpolationFnc(value: number, index: number): number | null {
- return index % 2 === 0 ? value : null;
- },
- },
- high: 10,
- low: -10,
- },
- type: "Bar",
- },
- {
- data: data.DistributedSeries,
- options: {
- distributeSeries: true,
- },
- type: "Bar",
- },
- {
- data: data.Pie,
- options: {
- donut: true,
- donutWidth: 60,
- showLabel: false,
- startAngle: 270,
- total: 200,
- },
- type: "Pie",
- },
- {
- data: data.Pie,
- options: {
- donut: true,
- showLabel: false,
- },
- type: "Pie",
- },
- ];
- }
-}
diff --git a/projects/ng-chartist-demo/src/app/app.module.ts b/projects/ng-chartist-demo/src/app/app.module.ts
deleted file mode 100644
index 3064f57b..00000000
--- a/projects/ng-chartist-demo/src/app/app.module.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { NgModule } from "@angular/core";
-import { FormsModule } from "@angular/forms";
-import { BrowserModule } from "@angular/platform-browser";
-import { ChartistModule } from "ng-chartist";
-import { AppComponent } from "./app.component";
-import {
- AsyncChartComponent,
- DynamicChartComponent,
- LiveChartComponent,
- TooltipChartComponent,
-} from "./components";
-
-@NgModule({
- declarations: [
- AppComponent,
- AsyncChartComponent,
- DynamicChartComponent,
- LiveChartComponent,
- TooltipChartComponent,
- ],
- imports: [BrowserModule, ChartistModule, FormsModule],
- providers: [],
- bootstrap: [AppComponent],
-})
-export class AppModule {}
diff --git a/projects/ng-chartist-demo/src/app/components/async-chart.component.ts b/projects/ng-chartist-demo/src/app/components/async-chart.component.ts
deleted file mode 100644
index 4b3dd8fc..00000000
--- a/projects/ng-chartist-demo/src/app/components/async-chart.component.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Component } from "@angular/core";
-import * as Chartist from "chartist";
-import { ChartType } from "ng-chartist";
-import { Observable, of } from "rxjs";
-import { delay } from "rxjs/operators";
-import { getRandomInt } from "./live-chart.component";
-
-declare let require: any;
-
-const data: any = require("../data.json");
-
-@Component({
- selector: "app-async-chart",
- template: `
- Async
-
- `,
-})
-export class AsyncChartComponent {
- data$: Observable;
- type$: Observable;
-
- constructor() {
- const chartType: ChartType = "Pie";
- // simulate slow API call
- this.data$ = of(data.Pie).pipe(delay(getRandomInt(1000, 3000)));
- this.type$ = of(chartType).pipe(delay(getRandomInt(1000, 3000)));
- }
-}
diff --git a/projects/ng-chartist-demo/src/app/components/dynamic-chart.component.ts b/projects/ng-chartist-demo/src/app/components/dynamic-chart.component.ts
deleted file mode 100644
index 55beb3ae..00000000
--- a/projects/ng-chartist-demo/src/app/components/dynamic-chart.component.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Component } from "@angular/core";
-import * as Chartist from "chartist";
-import { ChartType } from "ng-chartist";
-
-declare let require: any;
-
-const data: any = require("../data.json");
-
-@Component({
- selector: "app-dynamic-chart",
- template: `
-
-
Dynamic Chart Types
-
-
-
-
-
- `,
-})
-export class DynamicChartComponent {
- public type: ChartType;
- public data: Chartist.IChartistData;
- public options: any;
-
- public chartTypes: ChartType[];
-
- constructor() {
- this.chartTypes = ["Bar", "Line"];
-
- this.type = "Bar";
- this.data = data.Bar;
- this.options = {
- axisX: {
- showLabel: false,
- },
- axisY: {
- showLabel: false,
- },
- };
- }
-}
diff --git a/projects/ng-chartist-demo/src/app/components/index.ts b/projects/ng-chartist-demo/src/app/components/index.ts
deleted file mode 100644
index 31623631..00000000
--- a/projects/ng-chartist-demo/src/app/components/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { AsyncChartComponent } from "./async-chart.component";
-export { DynamicChartComponent } from "./dynamic-chart.component";
-export { LiveChartComponent } from "./live-chart.component";
-export { TooltipChartComponent } from "./tooltip-chart.component";
diff --git a/projects/ng-chartist-demo/src/app/components/live-chart.component.ts b/projects/ng-chartist-demo/src/app/components/live-chart.component.ts
deleted file mode 100644
index 396330b3..00000000
--- a/projects/ng-chartist-demo/src/app/components/live-chart.component.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { formatDate } from "@angular/common";
-import { Component, OnDestroy } from "@angular/core";
-import { ChartType } from "ng-chartist";
-import { Subscription, timer } from "rxjs";
-
-export interface LiveData {
- labels: string[];
- series: number[][];
-}
-
-export function getRandomInt(min: number, max: number): number {
- return Math.floor(Math.random() * (max - min)) + min;
-}
-
-@Component({
- selector: "app-live-chart",
- template: `
- Live Updating
-
- `,
-})
-export class LiveChartComponent implements OnDestroy {
- public data: LiveData;
- public type: ChartType;
-
- private timerSubscription: Subscription;
-
- constructor() {
- this.data = {
- labels: [],
- series: [[]],
- };
- this.type = "Bar";
-
- this.timerSubscription = timer(0, 2500).subscribe(() => this.updateData());
- }
-
- updateData() {
- const time: Date = new Date();
- const formattedTime = formatDate(time, "HH:mm:ss", "en");
- const random = getRandomInt(1, 40);
- const data = this.data.series[0];
- const labels = this.data.labels;
-
- labels.push(formattedTime);
- data.push(random);
-
- // We only want to display 10 data points at a time
- this.data.labels = labels.slice(-9);
- this.data.series[0] = data.slice(-9);
-
- this.data = { ...this.data };
- }
-
- public ngOnDestroy(): void {
- this.timerSubscription.unsubscribe();
- }
-}
diff --git a/projects/ng-chartist-demo/src/app/components/tooltip-chart.component.ts b/projects/ng-chartist-demo/src/app/components/tooltip-chart.component.ts
deleted file mode 100644
index 073071be..00000000
--- a/projects/ng-chartist-demo/src/app/components/tooltip-chart.component.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Component } from "@angular/core";
-import { IChartistData, ILineChartOptions } from "chartist";
-import ChartistTooltip from "chartist-plugin-tooltips-updated";
-import { ChartType } from "ng-chartist";
-
-/**
- * Following example shows how to use updated version of Chartist tooltip plugin with ng-chartist
- * More information about the plugin can be found on github:
- * https://github.com/LukBukkit/chartist-plugin-tooltip
- */
-@Component({
- selector: "app-tooltip-chart",
- template: `
- Tooltips
-
- `,
-})
-export class TooltipChartComponent {
- type: ChartType = "Line";
- data: IChartistData = {
- labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
- series: [
- [12, 9, 7, 8, 5],
- [2, 1, 3.5, 7, 3],
- [1, 3, 4, 5, 6],
- ],
- };
- options: ILineChartOptions = {
- plugins: [
- ChartistTooltip({
- anchorToPoint: true,
- appendToBody: true,
- }),
- ],
- };
-}
diff --git a/projects/ng-chartist-demo/src/app/data.json b/projects/ng-chartist-demo/src/app/data.json
deleted file mode 100644
index 683dce4c..00000000
--- a/projects/ng-chartist-demo/src/app/data.json
+++ /dev/null
@@ -1,159 +0,0 @@
-{
- "Bar": {
- "labels": [
- "Jan",
- "Feb",
- "Mar",
- "Apr",
- "May",
- "Jun",
- "Jul",
- "Aug",
- "Sep",
- "Oct",
- "Nov",
- "Dec"
- ],
- "series": [
- [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
- [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
- ]
- },
- "Line": {
- "labels": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
- "series": [
- [12, 9, 7, 8, 5],
- [2, 1, 3.5, 7, 3],
- [1, 3, 4, 5, 6]
- ]
- },
- "Line2": {
- "labels": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
- "series": [
- [5, 5, 10, 8, 7, 5, 4, null, null, null, 10, 10, 7, 8, 6, 9],
- [
- 10,
- 15,
- null,
- 12,
- null,
- 10,
- 12,
- 15,
- null,
- null,
- 12,
- null,
- 14,
- null,
- null,
- null
- ],
- [null, null, null, null, 3, 4, 1, 3, 4, 6, 7, 9, 5, null, null, null]
- ]
- },
- "Scatter": {
- "labels": [
- 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,
- 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39,
- 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52
- ],
- "series": [
- [
- 53.761530227932376, 55.06077543488965, 90.15619763154757,
- 37.945743703232026, 90.15064659594809, 72.37213982905773,
- 29.242023161826005, 10.613377393892765, 41.13272180459888,
- 66.89170357483623, 85.47173517613665, 80.61313435041848,
- 33.86466777842112, 6.993834151672074, 58.93321826442517,
- 84.4944785171936, 66.47863439014286, 26.61792342884319,
- 64.7715312645164, 66.7721238997995, 24.81459377695263,
- 82.09485043326285, 94.28939258245515, 81.16315118589196,
- 26.285515136087987, 94.25034710171474, 82.86738500874603,
- 42.275860431799764, 7.252221593822195, 12.509815755028853,
- 57.592396396889086, 16.98227807583916, 82.13296667627357,
- 20.7798608815297, 1.4886093931434141, 27.717128889831557,
- 83.02006467579533, 46.825802760236044, 4.449951322677559,
- 63.949111152579285, 76.2705142938321, 92.84217568625859,
- 33.34033701723147, 83.32421059421287, 30.95015406095809,
- 99.26555827017742, 64.73104862164556, 58.3205528852039,
- 98.07205383638176, 34.217237701943006, 76.84029415694194,
- 77.51086205882534
- ],
- [
- 68.01743447487219, 33.569040390627556, 55.83518094287856,
- 6.424873491809824, 40.24108430485855, 12.867529962712322,
- 33.9171424717146, 66.13486382709537, 75.36042883674916,
- 37.18758127466557, 46.080488500245266, 40.98286341759507,
- 25.372664387026923, 40.063178151024424, 73.6495194240123,
- 48.56310577188692, 22.903651846539972, 91.5635618730181,
- 84.08459591966795, 49.153284675642595, 34.82239557500657,
- 38.7753190443602, 77.57931404198679, 78.24594487949813,
- 42.96149738863182, 68.87344162290039, 73.35891706187205,
- 79.20638493178991, 39.862955442611494, 67.72254472880542,
- 32.5667298714178, 67.8951691474951, 68.22845079029227,
- 24.013142038835245, 84.77387385278308, 81.96540495436318,
- 21.938120212431865, 20.591735159801374, 44.392082366517926,
- 99.42917256114683, 75.80197000496361, 44.95928290576234,
- 56.30251437622547, 81.39575345403685, 46.6480941362678,
- 60.30444929651577, 63.904344644822956, 96.31525902388087,
- 80.79036620032171, 67.94970208668927, 81.84914397158013,
- 64.34930133297705
- ],
- [
- 94.83796449464408, 0.05012881656139001, 78.03842883107683,
- 86.85066315022306, 63.09834842166116, 23.82558487142836,
- 95.04013234951407, 91.84355248378253, 12.28927042529946,
- 91.59027939302398, 44.15426456286402, 38.40309269293461,
- 3.0323072732378, 51.442756807992104, 51.067878308530304,
- 68.87925798432126, 9.786004373688861, 93.42472024399827,
- 7.196590706996409, 90.61672585107475, 82.64800742042794,
- 29.33983554466535, 27.575295787547738, 63.76900610636933,
- 44.31691167371892, 35.02049600051234, 77.91406665575869,
- 9.594366007019817, 33.17507518940415, 45.94854823450043,
- 6.028395302814493, 97.36303808493578, 20.735238575670635,
- 11.577295085428618, 49.377810037702986, 7.984978938697163,
- 81.52380171386066, 86.62152122764415, 46.81516933597669,
- 72.70055546352265, 39.482785893198404, 2.1729768023229346,
- 32.730007414228865, 11.8384494034782, 97.04367174876609,
- 37.87839695714026, 96.1605067491887, 24.340714355822968,
- 90.92986653306863, 1.9182109464024322, 36.43773292877359,
- 51.562138311337314
- ],
- [
- 90.93023971442824, 91.24607758668748, 83.11135627737995,
- 38.89630350329263, 47.48702934796674, 83.10718371512166,
- 93.40725921590878, 62.65211828434698, 76.93458061916239,
- 94.13663459332706, 15.47636651231441, 93.70144628274673,
- 80.7911280644665, 32.06886936152644, 6.458421962605865,
- 14.668285135928372, 10.700783089925082, 46.997088144127886,
- 53.02589740808132, 15.662154340561152, 94.70275097718405,
- 59.27632659816442, 53.88591373783527, 21.602789791233846,
- 29.326094253488066, 8.159091366607441, 52.57892041859127,
- 71.68439221439431, 61.773032787481455, 43.02319475997418,
- 97.7745443722398, 41.77024219267196, 32.79576671635134,
- 26.614574588124352, 96.60428591791621, 68.90454201273897,
- 33.39711159158707, 94.56531035270376, 83.77269890317353,
- 72.91107164394433, 50.31188574983041, 54.67801129631369,
- 69.65510719649639, 59.96153020907791, 50.66882388014429,
- 97.73196339743835, 12.936677564924759, 30.197501751145396,
- 7.071721221094629, 60.85688790258899, 51.276925828485446,
- 30.951614223635193
- ]
- ]
- },
- "LineWithArea": {
- "labels": [1, 2, 3, 4, 5, 6, 7, 8],
- "series": [[5, 9, 7, 8, 5, 3, 5, 4]]
- },
- "Bi-PolarBar": {
- "labels": ["W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8", "W9", "W10"],
- "series": [[1, 2, 4, 8, 6, -2, -1, -4, -6, -2]]
- },
- "DistributedSeries": {
- "labels": ["XS", "S", "M", "L", "XL", "XXL", "XXXL"],
- "series": [20, 60, 120, 200, 180, 20, 10]
- },
- "Pie": {
- "series": [20, 10, 30, 40]
- }
-}
diff --git a/projects/ng-chartist-demo/src/assets/.gitkeep b/projects/ng-chartist-demo/src/assets/.gitkeep
deleted file mode 100644
index e69de29b..00000000
diff --git a/projects/ng-chartist-demo/src/environments/environment.prod.ts b/projects/ng-chartist-demo/src/environments/environment.prod.ts
deleted file mode 100644
index c9669790..00000000
--- a/projects/ng-chartist-demo/src/environments/environment.prod.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const environment = {
- production: true,
-};
diff --git a/projects/ng-chartist-demo/src/environments/environment.ts b/projects/ng-chartist-demo/src/environments/environment.ts
deleted file mode 100644
index 99c3763c..00000000
--- a/projects/ng-chartist-demo/src/environments/environment.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
-export const environment = {
- production: false,
-};
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
diff --git a/projects/ng-chartist-demo/src/favicon.ico b/projects/ng-chartist-demo/src/favicon.ico
deleted file mode 100644
index 8081c7ce..00000000
Binary files a/projects/ng-chartist-demo/src/favicon.ico and /dev/null differ
diff --git a/projects/ng-chartist-demo/src/index.html b/projects/ng-chartist-demo/src/index.html
deleted file mode 100644
index 988b16f0..00000000
--- a/projects/ng-chartist-demo/src/index.html
+++ /dev/null
@@ -1,48 +0,0 @@
-
-
-
-
-
-
-
-
- ng-chartist
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/projects/ng-chartist-demo/src/main.ts b/projects/ng-chartist-demo/src/main.ts
deleted file mode 100644
index ca0268bd..00000000
--- a/projects/ng-chartist-demo/src/main.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { enableProdMode } from "@angular/core";
-import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
-import { AppModule } from "./app/app.module";
-import { environment } from "./environments/environment";
-
-if (environment.production) {
- enableProdMode();
-}
-
-platformBrowserDynamic()
- .bootstrapModule(AppModule)
- .catch((err) => console.error(err));
diff --git a/projects/ng-chartist-demo/src/polyfills.ts b/projects/ng-chartist-demo/src/polyfills.ts
deleted file mode 100644
index 5b819fb4..00000000
--- a/projects/ng-chartist-demo/src/polyfills.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-/**
- * This file includes polyfills needed by Angular and is loaded before the app.
- * You can add your own extra polyfills to this file.
- *
- * This file is divided into 2 sections:
- * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
- * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
- * file.
- *
- * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
- * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
- * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
- *
- * Learn more in https://angular.io/guide/browser-support
- */
-
-/***************************************************************************************************
- * BROWSER POLYFILLS
- */
-
-/** IE9, IE10 and IE11 requires all of the following polyfills. **/
-// import 'core-js/es6/symbol';
-// import 'core-js/es6/object';
-// import 'core-js/es6/function';
-// import 'core-js/es6/parse-int';
-// import 'core-js/es6/parse-float';
-// import 'core-js/es6/number';
-// import 'core-js/es6/math';
-// import 'core-js/es6/string';
-// import 'core-js/es6/date';
-// import 'core-js/es6/array';
-// import 'core-js/es6/regexp';
-// import 'core-js/es6/map';
-// import 'core-js/es6/weak-map';
-// import 'core-js/es6/set';
-
-/**
- * If the application will be indexed by Google Search, the following is required.
- * Googlebot uses a renderer based on Chrome 41.
- * https://developers.google.com/search/docs/guides/rendering
- **/
-// import 'core-js/es6/array';
-
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js'; // Run `npm install --save classlist.js`.
-
-/** IE10 and IE11 requires the following for the Reflect API. */
-// import 'core-js/es6/reflect';
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- **/
-// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
-
-/**
- * By default, zone.js will patch all possible macroTask and DomEvents
- * user can disable parts of macroTask/DomEvents patch by setting following flags
- */
-
-// (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
-// (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
-// (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
-
-/*
- * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
- * with the following flag, it will bypass `zone.js` patch for IE/Edge
- */
-// (window as any).__Zone_enable_cross_context_check = true;
-
-/***************************************************************************************************
- * Zone JS is required by default for Angular itself.
- */
-import "zone.js/dist/zone"; // Included with Angular CLI.
-
-/***************************************************************************************************
- * APPLICATION IMPORTS
- */
diff --git a/projects/ng-chartist-demo/src/styles.css b/projects/ng-chartist-demo/src/styles.css
deleted file mode 100644
index 877d20cd..00000000
--- a/projects/ng-chartist-demo/src/styles.css
+++ /dev/null
@@ -1,9 +0,0 @@
-/* You can add global styles to this file, and also import other style files */
-x-chartist {
- display: block;
- height: 300px;
-}
-
-.ct-label {
- font-size: 1.25rem;
-}
diff --git a/projects/ng-chartist-demo/src/test.ts b/projects/ng-chartist-demo/src/test.ts
deleted file mode 100644
index b2ba8f42..00000000
--- a/projects/ng-chartist-demo/src/test.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import { getTestBed } from "@angular/core/testing";
-import {
- BrowserDynamicTestingModule,
- platformBrowserDynamicTesting,
-} from "@angular/platform-browser-dynamic/testing";
-import "zone.js/dist/zone-testing";
-
-declare const require: any;
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
- BrowserDynamicTestingModule,
- platformBrowserDynamicTesting(),
-);
-// Then we find all the tests.
-const context = require.context("./", true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);
diff --git a/projects/ng-chartist-demo/tsconfig.app.json b/projects/ng-chartist-demo/tsconfig.app.json
deleted file mode 100644
index 7beda31d..00000000
--- a/projects/ng-chartist-demo/tsconfig.app.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "extends": "../../tsconfig.json",
- "compilerOptions": {
- "outDir": "../../out-tsc/app",
- "types": []
- },
- "exclude": ["test.ts", "**/*.spec.ts"]
-}
diff --git a/projects/ng-chartist-demo/tsconfig.spec.json b/projects/ng-chartist-demo/tsconfig.spec.json
deleted file mode 100644
index 143838d9..00000000
--- a/projects/ng-chartist-demo/tsconfig.spec.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
- "extends": "../../tsconfig.json",
- "compilerOptions": {
- "outDir": "../../out-tsc/spec",
- "types": ["jasmine", "node"]
- },
- "files": ["src/test.ts", "src/polyfills.ts"],
- "include": ["**/*.spec.ts", "**/*.d.ts"]
-}
diff --git a/projects/ng-chartist/package.json b/projects/ng-chartist/package.json
index 1cc403d3..bceff6a8 100644
--- a/projects/ng-chartist/package.json
+++ b/projects/ng-chartist/package.json
@@ -27,6 +27,6 @@
"peerDependencies": {
"@angular/common": "^12.0.0 || ^13.0.0 || ^14.0.0",
"@angular/core": "^12.0.0 || ^13.0.0 || ^14.0.0",
- "chartist": "^0.11.4"
+ "chartist": "^1.0.0"
}
}
diff --git a/projects/ng-chartist/src/lib/chartist.component.spec.ts b/projects/ng-chartist/src/lib/chartist.component.spec.ts
index fcb331f7..23254c18 100644
--- a/projects/ng-chartist/src/lib/chartist.component.spec.ts
+++ b/projects/ng-chartist/src/lib/chartist.component.spec.ts
@@ -1,6 +1,7 @@
+import { SimpleChange } from "@angular/core";
import { ComponentFixture, TestBed } from "@angular/core/testing";
-import * as Chartist from "chartist";
-import { ChartistComponent, ChartType } from "./chartist.component";
+import { BarChart } from "chartist";
+import { ChartistComponent } from "./chartist.component";
const data = {
// eslint-disable-next-line @typescript-eslint/naming-convention
@@ -44,25 +45,24 @@ describe("chartist component", () => {
expect(instance).toBeDefined();
});
- describe("ON INIT", () => {
- const chartType: ChartType = "Bar";
-
+ describe("onInit", () => {
beforeEach(() => {
- instance.data = data[chartType];
- instance.type = chartType;
+ instance.configuration = {
+ type: "Bar",
+ data: data["Bar"],
+ };
});
it("should initialize the correct chart only once", () => {
- spyOn(Chartist, chartType).and.callThrough();
instance.ngOnInit();
- expect(Chartist[chartType]).toHaveBeenCalledTimes(1);
+ expect(instance.chart).toBeInstanceOf(BarChart);
});
it("should return the correct chart instance", () => {
instance.ngOnInit();
- expect(instance["chart"] instanceof Chartist[chartType]).toBe(true);
+ expect(instance.chart instanceof BarChart).toBe(true);
});
it("should emit initialized event when chart is initialized", () => {
@@ -79,40 +79,44 @@ describe("chartist component", () => {
};
instance.ngOnInit();
- expect(instance["bindEvents"]).toHaveBeenCalled();
+ expect(instance.bindEvents).toHaveBeenCalled();
});
it("should not initialize chart when type is missing", () => {
- instance.type = undefined;
+ instance.configuration.type = undefined;
instance.ngOnInit();
- expect(instance["chart"]).toBeUndefined();
+ expect(instance.chart).toBeUndefined();
});
it("should not initialize chart when data is missing", () => {
- instance.data = undefined;
+ instance.configuration.data = undefined;
instance.ngOnInit();
- expect(instance["chart"]).toBeUndefined();
+ expect(instance.chart).toBeUndefined();
});
});
- describe("ON CHANGES", () => {
- const chartType: ChartType = "Bar";
-
+ describe("ngOnChanges", () => {
beforeEach(() => {
- instance.data = data[chartType];
- instance.type = chartType;
+ instance.configuration = {
+ type: "Bar",
+ data: data["Bar"],
+ };
});
it("should re-render the chart if the chart type changes", () => {
spyOn(instance, "renderChart").and.callThrough();
instance.ngOnChanges({
- type: {
- currentValue: instance.type,
- } as any,
+ configuration: {
+ currentValue: {
+ ...instance.configuration,
+ type: "Line",
+ data: {},
+ },
+ } as SimpleChange,
});
expect(instance["renderChart"]).toHaveBeenCalled();
@@ -121,9 +125,13 @@ describe("chartist component", () => {
it("should emit initialized event when the chart type changes", () => {
spyOn(instance.initialized, "emit").and.callThrough();
instance.ngOnChanges({
- type: {
- currentValue: instance.type,
- } as any,
+ configuration: {
+ currentValue: {
+ ...instance.configuration,
+ type: "Line",
+ data: {},
+ },
+ } as SimpleChange,
});
expect(instance.initialized.emit).toHaveBeenCalled();
@@ -132,36 +140,41 @@ describe("chartist component", () => {
it("should update the chart if the data changes", () => {
instance.ngOnInit();
- spyOn(instance["chart"], "update").and.callThrough();
+ spyOn(instance.chart, "update").and.callThrough();
spyOn(instance, "renderChart").and.callThrough();
instance.ngOnChanges({
- data: {
- currentValue: instance.data,
- } as any,
+ configuration: {
+ currentValue: {
+ ...instance.configuration,
+ data: {},
+ },
+ } as SimpleChange,
});
- expect(instance["renderChart"]).not.toHaveBeenCalled();
- expect(instance["chart"].update).toHaveBeenCalled();
+ expect(instance.renderChart).not.toHaveBeenCalled();
+ expect(instance.chart.update).toHaveBeenCalled();
});
it("should update the chart if the options change", () => {
instance.ngOnInit();
- spyOn(instance["chart"], "update").and.callThrough();
+ spyOn(instance.chart, "update").and.callThrough();
spyOn(instance, "renderChart").and.callThrough();
- instance.options = {
- reverseData: true,
- };
instance.ngOnChanges({
- options: {
- currentValue: instance.options,
- } as any,
+ configuration: {
+ currentValue: {
+ ...instance.configuration,
+ options: {
+ chartPadding: 5,
+ },
+ },
+ } as SimpleChange,
});
- expect(instance["renderChart"]).not.toHaveBeenCalled();
- expect(instance["chart"].update).toHaveBeenCalled();
+ expect(instance.renderChart).not.toHaveBeenCalled();
+ expect(instance.chart.update).toHaveBeenCalled();
});
});
});
diff --git a/projects/ng-chartist/src/lib/chartist.component.ts b/projects/ng-chartist/src/lib/chartist.component.ts
index c4413453..6813658c 100644
--- a/projects/ng-chartist/src/lib/chartist.component.ts
+++ b/projects/ng-chartist/src/lib/chartist.component.ts
@@ -9,30 +9,52 @@ import {
Output,
SimpleChanges,
} from "@angular/core";
-import * as Chartist from "chartist";
+import {
+ BarChart,
+ BarChartData,
+ BarChartOptions,
+ LineChart,
+ LineChartData,
+ LineChartOptions,
+ PieChart,
+ PieChartData,
+ PieChartOptions,
+ ResponsiveOptions,
+} from "chartist";
+
+type ChartTypes = BarChart | LineChart | PieChart;
+
+export interface BarChartConfiguration {
+ type: "Bar";
+ data: BarChartData;
+ options?: BarChartOptions;
+ responsiveOptions?: ResponsiveOptions;
+}
-/**
- * Possible chart types
- */
-export type ChartType = "Pie" | "Bar" | "Line";
-
-export type ChartInterfaces =
- | Chartist.IChartistPieChart
- | Chartist.IChartistBarChart
- | Chartist.IChartistLineChart;
-export type ChartOptions =
- | Chartist.IBarChartOptions
- | Chartist.ILineChartOptions
- | Chartist.IPieChartOptions;
-export type ResponsiveOptionTuple =
- Chartist.IResponsiveOptionTuple;
-export type ResponsiveOptions = ResponsiveOptionTuple[];
+export interface LineChartConfiguration {
+ type: "Line";
+ data: LineChartData;
+ options?: LineChartOptions;
+ responsiveOptions?: ResponsiveOptions;
+}
+
+export interface PieChartConfiguration {
+ type: "Pie";
+ data: PieChartData;
+ options?: PieChartOptions;
+ responsiveOptions?: ResponsiveOptions;
+}
+
+export type Configuration =
+ | BarChartConfiguration
+ | LineChartConfiguration
+ | PieChartConfiguration;
/**
* Represents chart events.
*/
export interface ChartEvent {
- [eventName: string]: (data: any) => void;
+ [eventName: string]: (data: unknown) => void;
}
/**
@@ -43,10 +65,7 @@ export interface ChartEvent {
* ### Example
```html
```
@@ -63,29 +82,8 @@ export interface ChartEvent {
],
})
export class ChartistComponent implements OnInit, OnChanges, OnDestroy {
- /**
- * The data object that needs to consist of a labels and a series array.
- */
- @Input()
- data: Chartist.IChartistData;
-
- /**
- * Chartist chart type.
- */
@Input()
- type: ChartType;
-
- /**
- * The options object which overrides the default options.
- */
- @Input()
- options: Chartist.IChartOptions;
-
- /**
- * An array of responsive option arrays which are a media query and options object pair: [[mediaQueryString, optionsObject],[more...]]
- */
- @Input()
- responsiveOptions: ResponsiveOptions;
+ configuration: Configuration;
/**
* Events object where keys are Chartist event names and values are event handler functions.
@@ -103,14 +101,14 @@ export class ChartistComponent implements OnInit, OnChanges, OnDestroy {
* Event handler function will receive chart instance argument.
*/
@Output()
- initialized = new EventEmitter();
+ initialized = new EventEmitter();
- chart: ChartInterfaces;
+ chart: ChartTypes;
constructor(private elementRef: ElementRef) {}
ngOnInit(): void {
- if (this.type && this.data) {
+ if (this.configuration.type && this.configuration.data) {
this.renderChart();
}
}
@@ -128,19 +126,32 @@ export class ChartistComponent implements OnInit, OnChanges, OnDestroy {
renderChart() {
const nativeElement = this.elementRef.nativeElement;
-
- if (!(this.type in Chartist)) {
- throw new Error(`${this.type} is not a valid chart type`);
+ const { type, data, options, responsiveOptions } = this.configuration;
+
+ if (type === "Bar") {
+ this.chart = new BarChart(
+ nativeElement,
+ data,
+ options,
+ responsiveOptions,
+ );
+ } else if (type === "Line") {
+ this.chart = new LineChart(
+ nativeElement,
+ data,
+ options,
+ responsiveOptions,
+ );
+ } else if (type === "Pie") {
+ this.chart = new PieChart(
+ nativeElement,
+ data,
+ options,
+ responsiveOptions,
+ );
+ } else {
+ throw new Error(`${type} is not a known chart type`);
}
- // eslint-disable-next-line @typescript-eslint/naming-convention
- const Chart = Chartist[this.type];
-
- this.chart = new Chart(
- nativeElement,
- this.data,
- this.options,
- this.responsiveOptions,
- );
if (this.events) {
this.bindEvents();
@@ -150,14 +161,22 @@ export class ChartistComponent implements OnInit, OnChanges, OnDestroy {
}
update(changes: SimpleChanges): void {
- if (!this.type || !this.data) {
+ const { type, data, options } = this.configuration;
+
+ if (!type || !data) {
return;
}
- if (!this.chart || "type" in changes) {
+ const changedConfiguration = changes.configuration
+ .currentValue as Configuration;
+
+ if (!this.chart || changedConfiguration.type !== type) {
this.renderChart();
- } else if (changes.data || changes.options) {
- this.chart.update(this.data, this.options);
+ } else if (
+ "data" in changedConfiguration ||
+ "options" in changedConfiguration
+ ) {
+ this.chart.update(data, options);
}
}
diff --git a/projects/ng-chartist/src/lib/chartist.module.ts b/projects/ng-chartist/src/lib/chartist.module.ts
index 40e6596c..37a2028b 100644
--- a/projects/ng-chartist/src/lib/chartist.module.ts
+++ b/projects/ng-chartist/src/lib/chartist.module.ts
@@ -3,7 +3,6 @@ import { ChartistComponent } from "./chartist.component";
@NgModule({
declarations: [ChartistComponent],
- imports: [],
exports: [ChartistComponent],
})
export class ChartistModule {}
diff --git a/tsconfig.json b/tsconfig.json
index 0651838a..13fd2d3e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,11 +12,7 @@
"skipLibCheck": true,
"resolveJsonModule": true,
"target": "ES2022",
- "lib": ["es2018", "dom"],
- "paths": {
- "ng-chartist": ["projects/ng-chartist/dist"],
- "ng-chartist/*": ["projects/ng-chartist/dist/*"]
- }
+ "lib": ["es2018", "dom"]
},
"angularCompilerOptions": {
"strictTemplates": true,