From 821948d2686454dab34e43daa8061c2e2e4b0c94 Mon Sep 17 00:00:00 2001 From: Tobias Peper Date: Mon, 24 Mar 2025 21:48:12 +0100 Subject: [PATCH] =?UTF-8?q?chart.js=20hinzugef=C3=BCgt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 110 +++++++++++++++++++++++++++++++++++-- package.json | 3 +- src/app/app.component.html | 4 ++ src/app/app.component.ts | 25 ++++++++- src/app/app.config.ts | 5 +- 5 files changed, 140 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1a3b67d..fc4cc42 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "@ng-bootstrap/ng-bootstrap": "^17.0.1", "@popperjs/core": "^2.11.8", "bootstrap": "^5.3.2", + "ng2-charts": "7.0.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.14.10" @@ -520,6 +521,24 @@ "@esbuild/win32-x64": "0.23.0" } }, + "node_modules/@angular/cdk": { + "version": "19.2.6", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-19.2.6.tgz", + "integrity": "sha512-AneN/NeAYU4+AwzicTwtYE9CkMcWA0cAJ41SNfSyoHaaHNXSkryzwSmTYS3FO+taqd7OGnBePeWJbW2uJXcvfA==", + "license": "MIT", + "peer": true, + "dependencies": { + "tslib": "^2.3.0" + }, + "optionalDependencies": { + "parse5": "^7.1.2" + }, + "peerDependencies": { + "@angular/common": "^19.0.0 || ^20.0.0", + "@angular/core": "^19.0.0 || ^20.0.0", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, "node_modules/@angular/cli": { "version": "18.2.15", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-18.2.15.tgz", @@ -3180,6 +3199,13 @@ "tslib": "2" } }, + "node_modules/@kurkle/color": { + "version": "0.3.4", + "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz", + "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==", + "license": "MIT", + "peer": true + }, "node_modules/@leichtgewicht/ip-codec": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz", @@ -5162,6 +5188,19 @@ "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==", "dev": true }, + "node_modules/chart.js": { + "version": "4.4.8", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.8.tgz", + "integrity": "sha512-IkGZlVpXP+83QpMm4uxEiGqSI7jFizwVtF3+n5Pc3k7sMO+tkd0qxh2OzLhenM0K80xtmAONWGBn082EiBQSDA==", + "license": "MIT", + "peer": true, + "dependencies": { + "@kurkle/color": "^0.3.0" + }, + "engines": { + "pnpm": ">=8" + } + }, "node_modules/chokidar": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", @@ -6195,7 +6234,7 @@ "version": "4.5.0", "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", - "dev": true, + "devOptional": true, "engines": { "node": ">=0.12" }, @@ -8480,6 +8519,12 @@ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "dev": true }, + "node_modules/lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==", + "license": "MIT" + }, "node_modules/lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", @@ -9210,6 +9255,24 @@ "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==", "dev": true }, + "node_modules/ng2-charts": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/ng2-charts/-/ng2-charts-7.0.0.tgz", + "integrity": "sha512-HofyPPkz7yOX6Dr9JfV/SDddzmmqCFYCKbn71jeDiyWPRjrj99yTBCyqYtjzzNrnlTfWwbdvynYZ4GAhu/lbgQ==", + "license": "MIT", + "dependencies": { + "lodash-es": "^4.17.15", + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/cdk": ">=18.0.0", + "@angular/common": ">=18.0.0", + "@angular/core": ">=18.0.0", + "@angular/platform-browser": ">=18.0.0", + "chart.js": "^3.4.0 || ^4.0.0", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, "node_modules/nice-napi": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz", @@ -9807,7 +9870,7 @@ "version": "7.2.1", "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz", "integrity": "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==", - "dev": true, + "devOptional": true, "dependencies": { "entities": "^4.5.0" }, @@ -13351,6 +13414,16 @@ } } }, + "@angular/cdk": { + "version": "19.2.6", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-19.2.6.tgz", + "integrity": "sha512-AneN/NeAYU4+AwzicTwtYE9CkMcWA0cAJ41SNfSyoHaaHNXSkryzwSmTYS3FO+taqd7OGnBePeWJbW2uJXcvfA==", + "peer": true, + "requires": { + "parse5": "^7.1.2", + "tslib": "^2.3.0" + } + }, "@angular/cli": { "version": "18.2.15", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-18.2.15.tgz", @@ -15058,6 +15131,12 @@ "dev": true, "requires": {} }, + "@kurkle/color": { + "version": "0.3.4", + "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz", + "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==", + "peer": true + }, "@leichtgewicht/ip-codec": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz", @@ -16504,6 +16583,15 @@ "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==", "dev": true }, + "chart.js": { + "version": "4.4.8", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.8.tgz", + "integrity": "sha512-IkGZlVpXP+83QpMm4uxEiGqSI7jFizwVtF3+n5Pc3k7sMO+tkd0qxh2OzLhenM0K80xtmAONWGBn082EiBQSDA==", + "peer": true, + "requires": { + "@kurkle/color": "^0.3.0" + } + }, "chokidar": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", @@ -17256,7 +17344,7 @@ "version": "4.5.0", "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", - "dev": true + "devOptional": true }, "env-paths": { "version": "2.2.1", @@ -18924,6 +19012,11 @@ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "dev": true }, + "lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" + }, "lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", @@ -19448,6 +19541,15 @@ "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==", "dev": true }, + "ng2-charts": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/ng2-charts/-/ng2-charts-7.0.0.tgz", + "integrity": "sha512-HofyPPkz7yOX6Dr9JfV/SDddzmmqCFYCKbn71jeDiyWPRjrj99yTBCyqYtjzzNrnlTfWwbdvynYZ4GAhu/lbgQ==", + "requires": { + "lodash-es": "^4.17.15", + "tslib": "^2.3.0" + } + }, "nice-napi": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz", @@ -19887,7 +19989,7 @@ "version": "7.2.1", "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz", "integrity": "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==", - "dev": true, + "devOptional": true, "requires": { "entities": "^4.5.0" } diff --git a/package.json b/package.json index 6d611f4..3f05786 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,8 @@ "bootstrap": "^5.3.2", "rxjs": "~7.8.0", "tslib": "^2.3.0", - "zone.js": "~0.14.10" + "zone.js": "~0.14.10", + "ng2-charts": "7.0.0" }, "devDependencies": { "@angular-devkit/build-angular": "^18.2.15", diff --git a/src/app/app.component.html b/src/app/app.component.html index a1e0876..10ef5b7 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,3 +1,7 @@ +
+ +
+
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index ca5ac51..5504d6d 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -2,14 +2,37 @@ import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; import { TestComponent } from "./test/test.component"; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; +import { BaseChartDirective } from 'ng2-charts'; +import { ChartConfiguration, ChartData, ChartEvent } from 'chart.js'; @Component({ selector: 'app-root', standalone: true, - imports: [RouterOutlet, TestComponent, NgbModule], + imports: [RouterOutlet, TestComponent, NgbModule, BaseChartDirective], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent { title = 'test1'; + public barChartOptions: ChartConfiguration<'bar'>['options'] = { + // We use these empty structures as placeholders for dynamic theming. + scales: { + x: { + stacked: true, + }, + y: {}, + }, + plugins: { + legend: { + display: true, + }, + }, + }; + public barChartData: ChartData<'bar'> = { + labels: ['2006', '2007', '2008', '2009', '2010', '2011', '2012'], + datasets: [ + { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' }, + { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }, + ], + }; } diff --git a/src/app/app.config.ts b/src/app/app.config.ts index d037d76..cf3756e 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -2,12 +2,15 @@ import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; import { provideRouter } from '@angular/router'; import { provideHttpClient } from '@angular/common/http'; +import { provideCharts, withDefaultRegisterables } from 'ng2-charts'; + import { routes } from './app.routes'; export const appConfig: ApplicationConfig = { providers: [ provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), - provideHttpClient() + provideHttpClient(), + provideCharts(withDefaultRegisterables()) ] };