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 - - - - - - - -
- Loading demo... -
- - 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,