Skip to content

Commit 2d813b1

Browse files
xidedixxidedix
committed
refactor(widgets): drop obsolete ChartModule move to ChartjsModule and c-chart component
1 parent b580a37 commit 2d813b1

11 files changed

+499
-490
lines changed

‎src/app/views/widgets/widgets-brand/widgets-brand.component.html

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,21 @@
11
<c-row>
2-
<c-col *ngFor="let widget of brandData; index as i" xl="3" sm="6">
2+
<c-col *ngFor="let widget of brandData; index as i" sm="6" xl="3">
33
<c-widget-stat-d
44
[color]="widget.color ?? ''"
55
[style]="widget.capBg ?? null"
66
[values]="widget.values"
77
class="mb-4"
88
>
9-
<svg cIcon [name]="widget.icon" [style]="{'display': 'content'}" class="my-4 text-white" height="52"></svg>
9+
<svg [name]="widget.icon" cIcon class="my-4 text-white" height="52"></svg>
1010
<ng-container *ngIf="withCharts">
11-
<div class="chart-wrapper position-absolute w-100 h-100">
12-
<canvas
13-
[colors]="colors"
14-
[datasets]="widget.datasets"
15-
[labels]="widget.labels"
16-
[legend]="false"
17-
[options]="chartOptions"
18-
cNoZoneBaseChart
19-
chartType="line"
20-
>
21-
</canvas>
22-
</div>
11+
<c-chart
12+
#chart="cChart"
13+
[data]="widget.data"
14+
[options]="chartOptions"
15+
class="position-absolute w-100 h-100"
16+
type="line"
17+
>{{ chart.id }}</c-chart
18+
>
2319
</ng-container>
2420
</c-widget-stat-d>
2521
</c-col>

‎src/app/views/widgets/widgets-brand/widgets-brand.component.ts

Lines changed: 55 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,126 +1,101 @@
1-
import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
2-
3-
import { customTooltips } from '@coreui/chartjs/dist/js/coreui-chartjs.js';
4-
5-
interface IChartProps {
6-
Data?: any;
7-
labels?: any;
8-
options?: any;
9-
colors?: any;
10-
type?: any;
11-
legend?: any;
12-
13-
[propName: string]: any;
14-
}
1+
import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core';
152

163
@Component({
174
selector: 'app-widgets-brand',
185
templateUrl: './widgets-brand.component.html',
196
styleUrls: ['./widgets-brand.component.scss'],
20-
changeDetection: ChangeDetectionStrategy.OnPush
7+
changeDetection: ChangeDetectionStrategy.Default
218
})
22-
export class WidgetsBrandComponent implements OnInit {
9+
export class WidgetsBrandComponent implements AfterContentInit {
2310

24-
@Input() withCharts?: boolean;
11+
constructor(
12+
private changeDetectorRef: ChangeDetectorRef
13+
) {}
2514

15+
@Input() withCharts?: boolean;
2616
// @ts-ignore
2717
chartOptions = {
28-
tooltips: {
29-
enabled: false,
30-
custom: customTooltips,
31-
intersect: true,
32-
// mode: 'index' ,
33-
position: 'nearest',
34-
},
3518
elements: {
3619
line: {
37-
tension: 0.4,
38-
borderWidth: 2,
20+
tension: 0.4
3921
},
4022
point: {
4123
radius: 0,
4224
hitRadius: 10,
4325
hoverRadius: 4,
44-
hoverBorderWidth: 3,
45-
},
46-
},
47-
animation: {
48-
duration: 0,
26+
hoverBorderWidth: 3
27+
}
4928
},
50-
responsive: true,
51-
responsiveAnimationDuration: 0,
5229
maintainAspectRatio: false,
5330
plugins: {
5431
legend: {
55-
display: false,
56-
},
32+
display: false
33+
}
5734
},
5835
scales: {
59-
xAxes: [
60-
{
61-
display: false,
62-
},
63-
],
64-
yAxes: [
65-
{
66-
display: false,
67-
},
68-
],
69-
},
70-
}
71-
36+
x: {
37+
display: false
38+
},
39+
y: {
40+
display: false
41+
}
42+
}
43+
};
7244
labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
7345
datasets = {
7446
borderWidth: 2,
75-
fill: true,
76-
}
47+
fill: true
48+
};
49+
colors = {
50+
backgroundColor: 'rgba(255,255,255,.1)',
51+
borderColor: 'rgba(255,255,255,.55)',
52+
pointHoverBackgroundColor: '#fff'
53+
};
7754
brandData = [
7855
{
7956
icon: 'cibFacebook',
80-
values: [{title: 'friends', value: '89K'}, {title: 'feeds', value: '459'}],
81-
capBg: {'--cui-card-cap-bg': '#3b5998'},
57+
values: [{ title: 'friends', value: '89K' }, { title: 'feeds', value: '459' }],
58+
capBg: { '--cui-card-cap-bg': '#3b5998' },
8259
labels: [...this.labels],
83-
data: [65, 59, 84, 84, 51, 55, 40],
84-
datasets: [{...this.datasets, data: [65, 59, 84, 84, 51, 55, 40], label: 'Facebook'}]
60+
data: {
61+
labels: [...this.labels],
62+
datasets: [{ ...this.datasets, data: [65, 59, 84, 84, 51, 55, 40], label: 'Facebook', ...this.colors }]
63+
}
8564
},
8665
{
8766
icon: 'cibTwitter',
88-
values: [{title: 'followers', value: '973k'}, {title: 'tweets', value: '1.792'}],
89-
capBg: {'--cui-card-cap-bg': '#00aced'},
90-
labels: [...this.labels],
91-
datasets: [{...this.datasets, data: [1, 13, 9, 17, 34, 41, 38], label: 'Twitter'}]
67+
values: [{ title: 'followers', value: '973k' }, { title: 'tweets', value: '1.792' }],
68+
capBg: { '--cui-card-cap-bg': '#00aced' },
69+
data: {
70+
labels: [...this.labels],
71+
datasets: [{ ...this.datasets, data: [1, 13, 9, 17, 34, 41, 38], label: 'Twitter', ...this.colors }]
72+
}
9273
},
9374
{
9475
icon: 'cib-linkedin',
95-
values: [{title: 'contacts', value: '500'}, {title: 'feeds', value: '1.292'}],
96-
capBg: {'--cui-card-cap-bg': '#4875b4'},
97-
labels: [...this.labels],
98-
datasets: [{...this.datasets, data: [78, 81, 80, 45, 34, 12, 40], label: 'LinkedIn'}]
76+
values: [{ title: 'contacts', value: '500' }, { title: 'feeds', value: '1.292' }],
77+
capBg: { '--cui-card-cap-bg': '#4875b4' },
78+
data: {
79+
labels: [...this.labels],
80+
datasets: [{ ...this.datasets, data: [78, 81, 80, 45, 34, 12, 40], label: 'LinkedIn', ...this.colors }]
81+
}
9982
},
10083
{
10184
icon: 'cilCalendar',
102-
values: [{title: 'events', value: '12+'}, {title: 'meetings', value: '4'}],
85+
values: [{ title: 'events', value: '12+' }, { title: 'meetings', value: '4' }],
10386
color: 'warning',
104-
labels: [...this.labels],
105-
datasets: [{...this.datasets, data: [35, 23, 56, 22, 97, 23, 64], label: 'Events'}]
106-
},
107-
]
108-
109-
constructor() {
110-
}
111-
112-
get colors() {
113-
return [{
114-
backgroundColor: 'rgba(255,255,255,.1)',
115-
borderColor: 'rgba(255,255,255,.55)',
116-
pointHoverBackgroundColor: '#fff',
117-
}]
118-
}
87+
data: {
88+
labels: [...this.labels],
89+
datasets: [{ ...this.datasets, data: [35, 23, 56, 22, 97, 23, 64], label: 'Events', ...this.colors }]
90+
}
91+
}
92+
];
11993

12094
capStyle(value: string) {
121-
return !!value ? {'--cui-card-cap-bg': value} : {};
95+
return !!value ? { '--cui-card-cap-bg': value } : {};
12296
}
12397

124-
ngOnInit(): void {
98+
ngAfterContentInit(): void {
99+
this.changeDetectorRef.detectChanges();
125100
}
126101
}

‎src/app/views/widgets/widgets-dropdown/widgets-dropdown.component.html

Lines changed: 13 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<c-row>
2-
<c-col xl="3" sm="6">
2+
<c-col sm="6" xl="3">
33
<c-widget-stat-a
4-
[title]="'Users'"
54
class="mb-4"
65
color="primary"
6+
title="Users"
77
>
88
<ng-template cTemplateId="widgetValueTemplate" ngPreserveWhitespaces>
99
26K
@@ -12,7 +12,7 @@
1212
</span>
1313
</ng-template>
1414
<ng-template cTemplateId="widgetActionTemplate">
15-
<c-dropdown variant="btn-group" alignment="end">
15+
<c-dropdown alignment="end" variant="btn-group">
1616
<button [caret]="false" cButton cDropdownToggle class="p-0" color="transparent">
1717
<svg cIcon class="text-high-emphasis-inverse" name="cilOptions"></svg>
1818
</button>
@@ -30,21 +30,11 @@
3030
</c-dropdown>
3131
</ng-template>
3232
<ng-template cTemplateId="widgetChartTemplate">
33-
<div [ngStyle]="{ 'height.px': 70 }" class="chart-wrapper mt-3 mx-3">
34-
<canvas
35-
[datasets]="datasets[0]"
36-
[labels]="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
37-
[legend]="false"
38-
[options]="chartOptions(0)"
39-
cNoZoneBaseChart
40-
chartType="line"
41-
>
42-
</canvas>
43-
</div>
33+
<c-chart [data]="data[0]" [options]="options[0]" class="mt-3 mx-3" height="70" type="line"></c-chart>
4434
</ng-template>
4535
</c-widget-stat-a>
4636
</c-col>
47-
<c-col xl="3" sm="6">
37+
<c-col sm="6" xl="3">
4838
<c-widget-stat-a
4939
[title]="'Income'"
5040
class="mb-4"
@@ -57,7 +47,7 @@
5747
</span>
5848
</ng-template>
5949
<ng-template cTemplateId="widgetActionTemplate">
60-
<c-dropdown variant="btn-group" alignment="end">
50+
<c-dropdown alignment="end" variant="btn-group">
6151
<button [caret]="false" cButton cDropdownToggle class="p-0" color="transparent">
6252
<svg cIcon class="text-high-emphasis-inverse" name="cilOptions"></svg>
6353
</button>
@@ -70,21 +60,11 @@
7060
</c-dropdown>
7161
</ng-template>
7262
<ng-template cTemplateId="widgetChartTemplate">
73-
<div [ngStyle]="{ 'height.px': 70 }" class="chart-wrapper mt-3 mx-3">
74-
<canvas
75-
[datasets]="datasets[1]"
76-
[labels]="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
77-
[legend]="false"
78-
[options]="chartOptions(1)"
79-
cNoZoneBaseChart
80-
chartType="line"
81-
>
82-
</canvas>
83-
</div>
63+
<c-chart [data]="data[1]" [options]="options[1]" class="mt-3 mx-3" height="70" type="line"></c-chart>
8464
</ng-template>
8565
</c-widget-stat-a>
8666
</c-col>
87-
<c-col xl="3" sm="6">
67+
<c-col sm="6" xl="3">
8868
<c-widget-stat-a
8969
[title]="'Conversion Rate'"
9070
class="mb-4"
@@ -97,7 +77,7 @@
9777
</span>
9878
</ng-template>
9979
<ng-template cTemplateId="widgetActionTemplate">
100-
<c-dropdown variant="btn-group" alignment="end">
80+
<c-dropdown alignment="end" variant="btn-group">
10181
<button [caret]="false" cButton cDropdownToggle class="p-0" color="transparent">
10282
<svg cIcon class="text-high-emphasis-inverse" name="cilOptions"></svg>
10383
</button>
@@ -110,21 +90,11 @@
11090
</c-dropdown>
11191
</ng-template>
11292
<ng-template cTemplateId="widgetChartTemplate">
113-
<div [ngStyle]="{ 'height.px': 70 }" class="chart-wrapper mt-3">
114-
<canvas
115-
[datasets]="datasets[2]"
116-
[labels]="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
117-
[legend]="false"
118-
[options]="chartOptions(2)"
119-
cNoZoneBaseChart
120-
chartType="line"
121-
>
122-
</canvas>
123-
</div>
93+
<c-chart [data]="data[2]" [options]="options[2]" class="mt-3" height="70" type="line"></c-chart>
12494
</ng-template>
12595
</c-widget-stat-a>
12696
</c-col>
127-
<c-col xl="3" sm="6">
97+
<c-col sm="6" xl="3">
12898
<c-widget-stat-a
12999
[title]="'Sessions'"
130100
class="mb-4"
@@ -137,7 +107,7 @@
137107
</span>
138108
</ng-template>
139109
<ng-template cTemplateId="widgetActionTemplate">
140-
<c-dropdown variant="btn-group" alignment="end">
110+
<c-dropdown alignment="end" variant="btn-group">
141111
<button [caret]="false" cButton cDropdownToggle class="p-0" color="transparent">
142112
<svg cIcon class="text-high-emphasis-inverse" name="cilOptions"></svg>
143113
</button>
@@ -150,19 +120,8 @@
150120
</c-dropdown>
151121
</ng-template>
152122
<ng-template cTemplateId="widgetChartTemplate">
153-
<div [ngStyle]="{ 'height.px': 70 }" class="chart-wrapper mt-3 mx-3">
154-
<canvas
155-
[datasets]="datasets[3]"
156-
[labels]="labels"
157-
[legend]="false"
158-
[options]="chartOptions(3)"
159-
cNoZoneBaseChart
160-
chartType="bar"
161-
>
162-
</canvas>
163-
</div>
123+
<c-chart [data]="data[3]" [options]="options[3]" class="mt-3 mx-3" height="70" type="bar"></c-chart>
164124
</ng-template>
165125
</c-widget-stat-a>
166126
</c-col>
167127
</c-row>
168-

0 commit comments

Comments
 (0)