Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit09cd359

Browse files
committed
feat(c-chart): emit chartRef on new Chart()
1 parent66495a8 commit09cd359

File tree

6 files changed

+41
-26
lines changed

6 files changed

+41
-26
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<canvas
22
#canvasElement
3-
(click)="handleOnClick($event)"
3+
(click)="handleClick($event)"
44
[height]="height"
55
[id]="id"
66
[width]="width"
Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
:host {
22
&.chart-wrapper {
33
display:block;
4-
//height: 100%;
54
}
65
}

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ describe('ChartjsComponent', () => {
2929
Chart.register(...registerables);
3030

3131
awaitTestBed.configureTestingModule({
32-
declarations:[ChartjsComponent]
32+
imports:[ChartjsComponent]
3333
})
3434
.compileComponents();
3535
});
@@ -74,10 +74,11 @@ describe('ChartjsComponent', () => {
7474
labels:['Jan','Feb','Mar','Apr','May'],
7575
datasets:[
7676
{ ...data.datasets[0],data:[42,88,42,66,77]},
77-
{ ...data.datasets[0],data:[55,44,55,66,22]}
77+
{ ...data.datasets[1],data:[55,44,55,66,22]}
7878
]
7979
};
8080
fixture.detectChanges();
81+
component.chartUpdate();
8182
tick();
8283
expect(component.chart?.config?.data.labels?.length).toBe(5);
8384
expect(component.chart?.config?.data.datasets[1]?.data.length).toBe(5);

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

Lines changed: 30 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import{
22
AfterViewInit,
3+
ChangeDetectionStrategy,
4+
ChangeDetectorRef,
35
Component,
46
ElementRef,
57
EventEmitter,
@@ -17,7 +19,7 @@ import { BooleanInput, coerceBooleanProperty, coerceNumberProperty, NumberInput
1719

1820
importmergefrom'lodash-es/merge';
1921

20-
import{Chart,ChartConfiguration,ChartOptions,ChartType,DefaultDataPoint,registerables}from'chart.js';
22+
import{Chart,ChartConfiguration,ChartType,DefaultDataPoint,registerables}from'chart.js';
2123
import{customTooltipsascuiCustomTooltips}from'@coreui/chartjs';
2224

2325
Chart.register(...registerables);
@@ -28,7 +30,9 @@ let nextId = 0;
2830
selector:'c-chart',
2931
templateUrl:'./chartjs.component.html',
3032
styleUrls:['./chartjs.component.scss'],
31-
exportAs:'cChart'
33+
exportAs:'cChart',
34+
standalone:true,
35+
changeDetection:ChangeDetectionStrategy.OnPush
3236
})
3337
exportclassChartjsComponent<TTypeextendsChartType=ChartType,TData=DefaultDataPoint<TType>,TLabel=unknown>implementsAfterViewInit,OnDestroy,OnChanges{
3438

@@ -82,9 +86,11 @@ export class ChartjsComponent<TType extends ChartType = ChartType, TData = Defau
8286

8387
@Input()wrapper=true;
8488

85-
@Output()getDatasetAtEvent=newEventEmitter<any>();
86-
@Output()getElementAtEvent=newEventEmitter<any>();
87-
@Output()getElementsAtEvent=newEventEmitter<any>();
89+
@Output()readonlygetDatasetAtEvent=newEventEmitter<any>();
90+
@Output()readonlygetElementAtEvent=newEventEmitter<any>();
91+
@Output()readonlygetElementsAtEvent=newEventEmitter<any>();
92+
93+
@Output()readonlychartRef=newEventEmitter<any>();
8894

8995
@ViewChild('canvasElement')canvasElement!:ElementRef;
9096

@@ -100,12 +106,12 @@ export class ChartjsComponent<TType extends ChartType = ChartType, TData = Defau
100106
constructor(
101107
privateelementRef:ElementRef,
102108
privatengZone:NgZone,
103-
privaterenderer:Renderer2
109+
privaterenderer:Renderer2,
110+
privatechangeDetectorRef:ChangeDetectorRef
104111
){}
105112

106113
ngAfterViewInit():void{
107114
this.chartRender();
108-
// this.chartUpdate();
109115
}
110116

111117
ngOnChanges(changes:SimpleChanges):void{
@@ -118,8 +124,10 @@ export class ChartjsComponent<TType extends ChartType = ChartType, TData = Defau
118124
this.chartDestroy();
119125
}
120126

121-
publichandleOnClick($event:MouseEvent){
122-
if(!this.chart)return;
127+
publichandleClick($event:MouseEvent){
128+
if(!this.chart){
129+
return;
130+
}
123131

124132
constdatasetAtEvent=this.chart.getElementsAtEventForMode($event,'dataset',{intersect:true},false);
125133
this.getDatasetAtEvent.emit(datasetAtEvent);
@@ -133,10 +141,13 @@ export class ChartjsComponent<TType extends ChartType = ChartType, TData = Defau
133141

134142
publicchartDestroy(){
135143
this.chart?.destroy();
144+
this.chartRef.emit(undefined);
136145
}
137146

138147
publicchartRender(){
139-
if(!this.canvasElement)return;
148+
if(!this.canvasElement){
149+
return;
150+
}
140151

141152
constctx:CanvasRenderingContext2D=this.canvasElement.nativeElement.getContext('2d');
142153

@@ -146,13 +157,17 @@ export class ChartjsComponent<TType extends ChartType = ChartType, TData = Defau
146157
setTimeout(()=>{
147158
this.chart=newChart(ctx,config);
148159
this.renderer.setStyle(this.canvasElement.nativeElement,'display','block');
160+
this.changeDetectorRef.markForCheck();
161+
this.chartRef.emit(this.chart);
149162
});
150163
}
151164
});
152165
}
153166

154167
chartUpdate(){
155-
if(!this.chart)return;
168+
if(!this.chart){
169+
return;
170+
}
156171

157172
if(this.redraw){
158173
this.chartDestroy();
@@ -165,9 +180,7 @@ export class ChartjsComponent<TType extends ChartType = ChartType, TData = Defau
165180
constconfig=this.chartConfig();
166181

167182
if(this.options){
168-
// todo
169-
//@ts-ignore
170-
Object.assign(this.chart.options,config.options);
183+
Object.assign(this.chart.options??{},config.options??{});
171184
}
172185

173186
if(!this.chart.config.data){
@@ -176,12 +189,8 @@ export class ChartjsComponent<TType extends ChartType = ChartType, TData = Defau
176189
}
177190

178191
if(this.chart){
179-
// todo
180-
//@ts-ignore
181-
Object.assign(this.chart.config.options,config.options);
182-
// todo
183-
//@ts-ignore
184-
Object.assign(this.chart.config.plugins,config.plugins);
192+
Object.assign(this.chart.config.options??{},config.options??{});
193+
Object.assign(this.chart.config.plugins??[],config.plugins??[]);
185194
Object.assign(this.chart.config.data,config.data);
186195
}
187196

@@ -192,6 +201,7 @@ export class ChartjsComponent<TType extends ChartType = ChartType, TData = Defau
192201
setTimeout(()=>{
193202
this.ngZone.runOutsideAngular(()=>{
194203
this.chart?.update();
204+
this.changeDetectorRef.markForCheck();
195205
});
196206
});
197207
}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,4 +77,9 @@ export interface IChartjs<TType extends ChartType = ChartType, TData = DefaultDa
7777
*/
7878
getElementsAtEvent:EventEmitter<any>;
7979

80+
/**
81+
* Emits the chart reference
82+
*/
83+
chartRef:EventEmitter<any>;
84+
8085
}

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

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

44
@NgModule({
5-
declarations:[
5+
imports:[
66
ChartjsComponent
77
],
88
exports:[
99
ChartjsComponent
1010
]
1111
})
12-
exportclassChartjsModule{}
12+
exportclassChartjsModule{}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp