Skip to content

Commit 69eb8ba

Browse files
xidedixxidedix
committed
refactor(chartjs): types cleanup
1 parent 0aa1764 commit 69eb8ba

File tree

5 files changed

+49
-63
lines changed

5 files changed

+49
-63
lines changed

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@
44
"lib": {
55
"entryFile": "src/public-api.ts",
66
"umdModuleIds": {
7-
"@coreui/chartjs": "@coreui/chartjs",
8-
"chart.js": "chart.js"
7+
"@coreui/chartjs": "coreui.chartjs",
8+
"chart.js": "chart.js",
9+
"lodash": "lodash"
910
}
1011
},
1112
"allowedNonPeerDependencies": [

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
:host {
22
&.chart-wrapper {
33
display: block;
4+
//height: 100%;
45
}
56
}

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

Lines changed: 37 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,10 @@ import { BooleanInput, coerceBooleanProperty, coerceNumberProperty, NumberInput
1717

1818
import { merge } from 'lodash';
1919

20-
import Chart, { ChartData, ChartOptions, ChartType, Plugin } from 'chart.js/auto';
21-
20+
import { Chart, ChartConfiguration, ChartType, DefaultDataPoint, registerables } from 'chart.js';
2221
import { customTooltips as cuiCustomTooltips } from '@coreui/chartjs';
23-
import { IChartjs } from './chartjs.interface';
22+
23+
Chart.register(...registerables);
2424

2525
let nextId = 0;
2626

@@ -30,48 +30,54 @@ let nextId = 0;
3030
styleUrls: ['./chartjs.component.scss'],
3131
exportAs: 'cChart'
3232
})
33-
export class ChartjsComponent implements IChartjs, AfterViewInit, OnDestroy, OnChanges {
33+
export class ChartjsComponent<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown> implements AfterViewInit, OnDestroy, OnChanges {
3434

3535
static ngAcceptInputType_height: NumberInput;
3636
static ngAcceptInputType_width: NumberInput;
3737
static ngAcceptInputType_redraw: BooleanInput;
3838

3939
@Input() customTooltips = true;
40-
@Input() data: ChartData | ((canvas: HTMLCanvasElement) => ChartData) | undefined;
40+
@Input() data?: ChartConfiguration<TType, TData, TLabel>['data'];
4141

4242
@HostBinding('style.height.px')
4343
@Input()
44-
set height(value: number) {
44+
set height(value: number | undefined) {
4545
this._height = coerceNumberProperty(value);
4646
}
47+
4748
get height() {
4849
return this._height;
4950
}
50-
private _height = 150;
51+
52+
private _height: number | undefined;
5153

5254
@Input() id = `c-chartjs-${nextId++}`;
53-
@Input() options?: ChartOptions;
54-
@Input() plugins: Plugin[] = [];
55+
@Input() options?: ChartConfiguration<TType, TData, TLabel>['options'];
56+
@Input() plugins: ChartConfiguration<TType, TData, TLabel>['plugins'] = [];
5557

5658
@Input()
5759
set redraw(value: boolean) {
5860
this._redraw = coerceBooleanProperty(value);
5961
}
62+
6063
get redraw(): boolean {
6164
return this._redraw;
6265
}
66+
6367
private _redraw = false;
6468

65-
@Input() type: ChartType = 'bar';
69+
@Input() type: ChartConfiguration<TType, TData, TLabel>['type'] = 'bar' as TType;
6670

6771
@HostBinding('style.width.px')
6872
@Input()
6973
set width(value: number | undefined) {
7074
this._width = coerceNumberProperty(value);
7175
}
76+
7277
get width() {
7378
return this._width;
7479
}
80+
7581
private _width: number | undefined;
7682

7783
@Input() wrapper = true;
@@ -82,7 +88,7 @@ export class ChartjsComponent implements IChartjs, AfterViewInit, OnDestroy, OnC
8288

8389
@ViewChild('canvasElement') canvasElement!: ElementRef;
8490

85-
chart: Chart | undefined;
91+
chart!: Chart<TType, TData, TLabel>;
8692

8793
@HostBinding('class')
8894
get hostClasses() {
@@ -91,15 +97,6 @@ export class ChartjsComponent implements IChartjs, AfterViewInit, OnDestroy, OnC
9197
};
9298
}
9399

94-
get chartData() {
95-
const canvasRef = this.canvasElement.nativeElement;
96-
return typeof this.data === 'function'
97-
? canvasRef.value
98-
? this.data(canvasRef.value)
99-
: { labels: [], datasets: [] }
100-
: merge({ labels: [], datasets: [] }, { ...this.data });
101-
}
102-
103100
constructor(
104101
private elementRef: ElementRef,
105102
private ngZone: NgZone,
@@ -141,31 +138,14 @@ export class ChartjsComponent implements IChartjs, AfterViewInit, OnDestroy, OnC
141138
public chartRender() {
142139
if (!this.canvasElement) return;
143140

144-
if (this.customTooltips) {
145-
const options = this.options
146-
this.options = {
147-
...options,
148-
plugins: {
149-
...options?.plugins,
150-
tooltip: {
151-
...options?.plugins?.tooltip,
152-
enabled: false,
153-
mode: 'index',
154-
position: 'nearest',
155-
external: cuiCustomTooltips
156-
}
157-
}
158-
};
159-
}
160-
161141
const ctx: CanvasRenderingContext2D = this.canvasElement.nativeElement.getContext('2d');
162142

163143
this.ngZone.runOutsideAngular(() => {
164144
const config = this.chartConfig();
165145
if (config) {
166146
this.chart = new Chart(ctx, config);
167147
setTimeout(() => {
168-
this.renderer.setStyle(this.canvasElement.nativeElement, 'display', 'block');
148+
this.renderer.setStyle(this.canvasElement.nativeElement, 'display', 'block');
169149
});
170150
}
171151
});
@@ -182,7 +162,6 @@ export class ChartjsComponent implements IChartjs, AfterViewInit, OnDestroy, OnC
182162
return;
183163
}
184164

185-
186165
const config = this.chartConfig();
187166

188167
if (this.options) {
@@ -215,39 +194,47 @@ export class ChartjsComponent implements IChartjs, AfterViewInit, OnDestroy, OnC
215194
return this.chart?.toBase64Image();
216195
}
217196

218-
private chartDataConfig() {
197+
private chartDataConfig(): ChartConfiguration<TType, TData, TLabel>['data'] {
219198
return {
220-
labels: this.chartData?.labels ?? [],
221-
datasets: [...this.chartData?.datasets] ?? []
199+
labels: this.data?.labels ?? [],
200+
datasets: this.data?.datasets ?? []
222201
};
223202
}
224203

225-
private chartConfig() {
204+
private chartOptions(): ChartConfiguration<TType, TData, TLabel>['options'] {
205+
return this.options;
206+
}
207+
208+
private chartConfig(): ChartConfiguration<TType, TData, TLabel> {
226209
this.chartCustomTooltips();
227210
return {
228211
data: this.chartDataConfig(),
229-
options: this.options as ChartOptions,
212+
options: this.chartOptions(),
230213
plugins: this.plugins,
231214
type: this.type
232215
};
233216
}
234217

235218
private chartCustomTooltips() {
236219
if (this.customTooltips) {
237-
const options = this.options
238-
this.options = {
220+
const options = this.options;
221+
// @ts-ignore
222+
const plugins = this.options?.plugins;
223+
// @ts-ignore
224+
const tooltip = this.options?.plugins?.tooltip;
225+
this.options = merge({
239226
...options,
240227
plugins: {
241-
...options?.plugins,
228+
...plugins,
242229
tooltip: {
243-
...options?.plugins?.tooltip,
230+
...tooltip,
244231
enabled: false,
245232
mode: 'index',
246233
position: 'nearest',
247234
external: cuiCustomTooltips
248235
}
249236
}
250-
};
251-
};
237+
});
238+
}
252239
};
253240
}

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

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import { ChartData, ChartOptions, ChartType, Plugin } from 'chart.js/auto';
1+
import { ChartType } from 'chart.js/auto';
22
import { EventEmitter } from '@angular/core';
3+
import { ChartConfiguration, DefaultDataPoint } from 'chart.js';
34

4-
export interface IChartjs {
5+
export interface IChartjs<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown> {
56
/**
67
* Enables custom html based tooltips instead of standard tooltips.
78
* @default true
@@ -11,12 +12,12 @@ export interface IChartjs {
1112
/**
1213
* The data object that is passed into the Chart.js chart (more info).
1314
*/
14-
data: ChartData | ((canvas: HTMLCanvasElement) => ChartData) | undefined;
15+
data?: ChartConfiguration<TType, TData, TLabel>['data'];
1516

1617
/**
1718
* Height attribute applied to the rendered canvas.
1819
*
19-
* @default 150
20+
* @default undefined
2021
*/
2122
height?: number;
2223

@@ -29,13 +30,13 @@ export interface IChartjs {
2930
* The options object that is passed into the Chart.js chart.
3031
* {@link https://www.chartjs.org/docs/latest/general/options.html More Info}
3132
*/
32-
options?: ChartOptions;
33+
options?: ChartConfiguration<TType, TData, TLabel>['options'];
3334

3435
/**
3536
* The plugins array that is passed into the Chart.js chart (more info)
3637
* {@link https://www.chartjs.org/docs/latest/developers/plugins.html More Info}
3738
*/
38-
plugins?: Plugin[];
39+
plugins?: ChartConfiguration<TType, TData, TLabel>['plugins'];
3940

4041
/**
4142
* If true, will tear down and redraw chart on all updates.
@@ -47,7 +48,7 @@ export interface IChartjs {
4748
* Chart.js chart type.
4849
* @type {'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}
4950
*/
50-
type: ChartType;
51+
type: ChartConfiguration<TType, TData, TLabel>['type'];
5152

5253
/**
5354
* Width attribute applied to the rendered canvas.

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
11
import { NgModule } from '@angular/core';
22
import { ChartjsComponent } from './chartjs.component';
33

4-
5-
64
@NgModule({
75
declarations: [
86
ChartjsComponent
97
],
10-
imports: [
11-
],
128
exports: [
139
ChartjsComponent
1410
]

0 commit comments

Comments
 (0)