Skip to content

Commit e0f5c58

Browse files
xidedixxidedix
committed
feat: @coreui/angular-chartjs (wip)
1 parent 8f6a3d9 commit e0f5c58

File tree

10 files changed

+90
-32
lines changed

10 files changed

+90
-32
lines changed

‎package.json‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,10 @@
3636
"@angular/platform-browser": "~12.2.13",
3737
"@angular/platform-browser-dynamic": "~12.2.13",
3838
"@angular/router": "~12.2.13",
39+
"@coreui/chartjs": "^3.0.0",
3940
"@coreui/icons-angular": "^3.0.0-alpha.3",
4041
"@popperjs/core": "^2.10.2",
42+
"chart.js": "^3.6.0",
4143
"rxjs": "~6.6.7",
4244
"tslib": "^2.3.1",
4345
"zone.js": "~0.11.4"
@@ -52,23 +54,19 @@
5254
"@angular/cli": "~12.2.13",
5355
"@angular/compiler-cli": "~12.2.13",
5456
"@angular/language-service": "~12.2.13",
55-
"@coreui/chartjs": "^3.0.0",
5657
"@types/jasmine": "~3.8.2",
5758
"@types/lodash": "^4.14.177",
5859
"@types/node": "^16.11.9",
5960
"@typescript-eslint/eslint-plugin": "~4.33.0",
6061
"@typescript-eslint/parser": "~4.33.0",
61-
"chart.js": "^3.6.0",
6262
"eslint": "^7.32.0",
6363
"jasmine-core": "~3.8.0",
6464
"karma": "~6.3.9",
6565
"karma-chrome-launcher": "~3.1.0",
6666
"karma-coverage": "~2.0.3",
6767
"karma-jasmine": "~4.0.1",
6868
"karma-jasmine-html-reporter": "^1.7.0",
69-
"lodash.assign": "^4.2.0",
70-
"lodash.find": "^4.6.0",
71-
"lodash.merge": "^4.6.2",
69+
"lodash-es": "^4.17.21",
7270
"ng-packagr": "~12.2.5",
7371
"prettier": "^2.4.1",
7472
"typescript": "~4.3.5"

‎projects/coreui-angular-chartjs/.eslintrc.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010
],
1111
"parserOptions": {
1212
"project": [
13+
"./tsconfig.lib.json",
14+
"./tsconfig.spec.json",
1315
"./projects/coreui-angular-chartjs/tsconfig.lib.json",
1416
"./projects/coreui-angular-chartjs/tsconfig.spec.json"
1517
],

‎projects/coreui-angular-chartjs/ng-package.json‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,14 @@
22
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
33
"dest": "../../dist/coreui-angular-chartjs",
44
"lib": {
5-
"entryFile": "src/public-api.ts"
6-
}
7-
}
5+
"entryFile": "src/public-api.ts",
6+
"umdModuleIds": {
7+
"@coreui/chartjs": "@coreui/chartjs",
8+
"chart.js": "chart.js"
9+
}
10+
},
11+
"allowedNonPeerDependencies": [
12+
"@coreui/chartjs",
13+
"chart.js"
14+
]
15+
}

‎projects/coreui-angular-chartjs/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"license": "MIT",
1414
"author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
1515
"peerDependencies": {
16+
"@angular/cdk": "^12.2.0",
1617
"@angular/common": "^12.2.0",
1718
"@angular/core": "^12.2.0",
1819
"@coreui/chartjs": "^3.0.0",

‎projects/coreui-angular-chartjs/src/lib/chartjs.component.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
[height]="height"
55
[id]="id"
66
[width]="width"
7-
role="img">
7+
role="img"
8+
style="display: none"
9+
>
810
<ng-content></ng-content>
911
</canvas>

‎projects/coreui-angular-chartjs/src/lib/chartjs.component.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
:host {
2-
.chart-wrapper {
2+
&.chart-wrapper {
33
display: block;
44
}
55
}

‎projects/coreui-angular-chartjs/src/lib/chartjs.component.ts‎

Lines changed: 61 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,47 @@
11
import {
2+
AfterViewInit,
23
Component,
34
ElementRef,
45
EventEmitter,
56
HostBinding,
67
Input,
8+
NgZone,
9+
OnChanges,
710
OnDestroy,
811
OnInit,
912
Output,
13+
Renderer2,
14+
SimpleChanges,
1015
ViewChild
1116
} from '@angular/core';
12-
import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
17+
import { BooleanInput, coerceBooleanProperty, coerceNumberProperty, NumberInput } from '@angular/cdk/coercion';
1318

14-
import assign from 'lodash/assign';
15-
import find from 'lodash/find';
16-
import merge from 'lodash/merge';
19+
import { assign, find, merge } from 'lodash';
1720

18-
import { Chart, ChartData, ChartOptions, ChartType, Plugin } from 'chart.js/auto';
21+
import Chart, { ChartData, ChartOptions, ChartType, Plugin } from 'chart.js/auto';
1922
import * as chartjs from 'chart.js';
2023

2124
import { customTooltips as cuiCustomTooltips } from '@coreui/chartjs';
2225
import { IChartjs } from './chartjs.interface';
2326

27+
let nextId = 0;
28+
2429
@Component({
2530
selector: 'c-chart',
2631
templateUrl: './chartjs.component.html',
2732
styleUrls: ['./chartjs.component.scss']
2833
})
29-
export class ChartjsComponent implements IChartjs, OnDestroy, OnInit {
34+
// export class ChartjsComponent implements IChartjs, AfterViewInit, OnDestroy, OnInit {
35+
export class ChartjsComponent implements IChartjs, AfterViewInit, OnDestroy, OnInit, OnChanges {
36+
37+
static ngAcceptInputType_height: NumberInput;
38+
static ngAcceptInputType_width: NumberInput;
39+
static ngAcceptInputType_redraw: BooleanInput;
40+
3041
@Input() customTooltips = true;
3142
@Input() data: ChartData | ((canvas: HTMLCanvasElement) => ChartData) | undefined;
3243

44+
@HostBinding('style.height.px')
3345
@Input()
3446
set height(value: number) {
3547
this._height = coerceNumberProperty(value);
@@ -39,7 +51,7 @@ export class ChartjsComponent implements IChartjs, OnDestroy, OnInit {
3951
}
4052
private _height = 150;
4153

42-
@Input() id?: string;
54+
@Input() id = `c-chartjs-${nextId++}`;
4355
@Input() options?: ChartOptions;
4456
@Input() plugins?: Plugin[];
4557

@@ -61,8 +73,8 @@ export class ChartjsComponent implements IChartjs, OnDestroy, OnInit {
6173
get width() {
6274
return this._width;
6375
}
64-
6576
private _width = 300;
77+
6678
@Input() wrapper = true;
6779

6880
@Output() getDatasetAtEvent = new EventEmitter<any>();
@@ -71,7 +83,7 @@ export class ChartjsComponent implements IChartjs, OnDestroy, OnInit {
7183

7284
@ViewChild('canvasElement') canvasElement!: ElementRef;
7385

74-
private chart: Chart | undefined;
86+
chart: Chart | undefined;
7587

7688
@HostBinding('class')
7789
get hostClasses() {
@@ -89,10 +101,20 @@ export class ChartjsComponent implements IChartjs, OnDestroy, OnInit {
89101
: merge({}, this.data);
90102
}
91103

92-
constructor() {}
104+
constructor(
105+
private elementRef: ElementRef,
106+
private ngZone: NgZone,
107+
private renderer: Renderer2
108+
) {}
93109

94110
ngOnInit(): void {
111+
// this.setupChart();
112+
// this.updateChart();
113+
}
114+
115+
ngAfterViewInit(): void {
95116
this.setupChart();
117+
this.updateChart();
96118
}
97119

98120
ngOnDestroy(): void {
@@ -102,20 +124,25 @@ export class ChartjsComponent implements IChartjs, OnDestroy, OnInit {
102124
setupChart() {
103125
if (!this.canvasElement) return;
104126

105-
const canvasRef = this.canvasElement.nativeElement;
106-
107127
if (this.customTooltips) {
108128
chartjs.defaults.plugins.tooltip.enabled = false;
109129
chartjs.defaults.plugins.tooltip.mode = 'index';
110130
chartjs.defaults.plugins.tooltip.position = 'nearest';
111131
chartjs.defaults.plugins.tooltip.external = cuiCustomTooltips;
112132
}
113133

114-
this.chart = new Chart(canvasRef.value, {
115-
type: this.type,
116-
data: this.computedData,
117-
options: this.options as ChartOptions,
118-
plugins: this.plugins
134+
const ctx: CanvasRenderingContext2D = this.canvasElement.nativeElement.getContext('2d');
135+
136+
return this.ngZone.runOutsideAngular(() => {
137+
this.chart = new Chart(ctx, {
138+
type: this.type,
139+
data: this.computedData,
140+
options: this.options as ChartOptions,
141+
plugins: this.plugins
142+
});
143+
setTimeout(() => {
144+
this.renderer.setStyle(this.canvasElement.nativeElement, 'display', 'block');
145+
});
119146
});
120147
}
121148

@@ -139,13 +166,20 @@ export class ChartjsComponent implements IChartjs, OnDestroy, OnInit {
139166
updateChart() {
140167
if (!this.chart) return;
141168

169+
if (this.redraw) {
170+
this.destroyChart();
171+
setTimeout(() => {
172+
this.setupChart();
173+
});
174+
}
175+
142176
if (this.options) {
143177
this.chart.options = { ...this.options };
144178
}
145179

146180
if (!this.chart.config.data) {
147181
this.chart.config.data = this.computedData;
148-
this.chart.update();
182+
this.ngZone.runOutsideAngular(() => {this.chart?.update();});
149183
return;
150184
}
151185

@@ -181,6 +215,14 @@ export class ChartjsComponent implements IChartjs, OnDestroy, OnInit {
181215
};
182216
});
183217

184-
this.chart?.update();
218+
this.ngZone.runOutsideAngular(() => {
219+
setTimeout(() => {
220+
this.chart?.update();
221+
});
222+
});
223+
}
224+
225+
ngOnChanges(changes: SimpleChanges): void {
226+
this.updateChart();
185227
}
186228
}

‎projects/coreui-angular/.eslintrc.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010
],
1111
"parserOptions": {
1212
"project": [
13+
"./tsconfig.lib.json",
14+
"./tsconfig.spec.json",
1315
"projects/coreui-angular/tsconfig.lib.json",
1416
"projects/coreui-angular/tsconfig.spec.json"
1517
],

‎projects/coreui-angular/ng-package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,7 @@
88
"@popperjs/core": "popperjs.core"
99
}
1010
},
11-
"allowedNonPeerDependencies": ["@popperjs/core"]
11+
"allowedNonPeerDependencies": [
12+
"@popperjs/core"
13+
]
1214
}

‎projects/coreui-angular/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,11 @@
1717
}
1818
],
1919
"dependencies": {
20-
"tslib": "^2.3.0",
21-
"@popperjs/core": "^2.10.2"
20+
"@popperjs/core": "^2.10.2",
21+
"tslib": "^2.3.0"
2222
},
2323
"peerDependencies": {
24+
"@angular/cdk": "^12.2.0",
2425
"@angular/common": "^12.2.0",
2526
"@angular/core": "^12.2.0",
2627
"@angular/router": "^12.2.0"

0 commit comments

Comments
 (0)