mirror of
https://github.com/MikroWizard/mikrofront.git
synced 2025-12-28 12:59:31 +00:00
MikroWizard Initial commit | MikroFront Welcome to the world :)
This commit is contained in:
sepehr
commit
b97aec6b97
203 changed files with 41097 additions and 0 deletions
|
|
@ -0,0 +1,22 @@
|
|||
<c-row>
|
||||
<c-col *ngFor="let widget of brandData; index as i" sm="6" xl="3">
|
||||
<c-widget-stat-d
|
||||
[color]="widget.color ?? ''"
|
||||
[style]="widget.capBg ?? null"
|
||||
[values]="widget.values"
|
||||
class="mb-4"
|
||||
>
|
||||
<svg [name]="widget.icon" cIcon class="my-4 text-white" height="52"></svg>
|
||||
<ng-container *ngIf="withCharts">
|
||||
<c-chart
|
||||
#chart="cChart"
|
||||
[data]="widget.data"
|
||||
[options]="chartOptions"
|
||||
class="position-absolute w-100 h-100"
|
||||
type="line"
|
||||
>{{ chart.id }}</c-chart
|
||||
>
|
||||
</ng-container>
|
||||
</c-widget-stat-d>
|
||||
</c-col>
|
||||
</c-row>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { GridModule, WidgetModule } from '@coreui/angular';
|
||||
import { ChartjsModule } from '@coreui/angular-chartjs';
|
||||
import { IconModule } from '@coreui/icons-angular';
|
||||
import { IconSetService } from '@coreui/icons-angular';
|
||||
import { iconSubset } from '../../../icons/icon-subset';
|
||||
import { WidgetsBrandComponent } from './widgets-brand.component';
|
||||
|
||||
describe('WidgetsBrandComponent', () => {
|
||||
let component: WidgetsBrandComponent;
|
||||
let fixture: ComponentFixture<WidgetsBrandComponent>;
|
||||
let iconSetService: IconSetService;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ WidgetsBrandComponent ],
|
||||
imports: [WidgetModule, GridModule, ChartjsModule, IconModule],
|
||||
providers: [IconSetService]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
iconSetService = TestBed.inject(IconSetService);
|
||||
iconSetService.icons = { ...iconSubset };
|
||||
|
||||
fixture = TestBed.createComponent(WidgetsBrandComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
102
src/app/views/widgets/widgets-brand/widgets-brand.component.ts
Normal file
102
src/app/views/widgets/widgets-brand/widgets-brand.component.ts
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-widgets-brand',
|
||||
templateUrl: './widgets-brand.component.html',
|
||||
styleUrls: ['./widgets-brand.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.Default
|
||||
})
|
||||
export class WidgetsBrandComponent implements AfterContentInit {
|
||||
|
||||
constructor(
|
||||
private changeDetectorRef: ChangeDetectorRef
|
||||
) {}
|
||||
|
||||
@Input() withCharts?: boolean;
|
||||
// @ts-ignore
|
||||
chartOptions = {
|
||||
elements: {
|
||||
line: {
|
||||
tension: 0.4
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
hoverBorderWidth: 3
|
||||
}
|
||||
},
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: false
|
||||
},
|
||||
y: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
};
|
||||
labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
datasets = {
|
||||
borderWidth: 2,
|
||||
fill: true
|
||||
};
|
||||
colors = {
|
||||
backgroundColor: 'rgba(255,255,255,.1)',
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointBackgroundColor: 'rgba(255,255,255,.55)'
|
||||
};
|
||||
brandData = [
|
||||
{
|
||||
icon: 'cibFacebook',
|
||||
values: [{ title: 'friends', value: '89K' }, { title: 'feeds', value: '459' }],
|
||||
capBg: { '--cui-card-cap-bg': '#3b5998' },
|
||||
labels: [...this.labels],
|
||||
data: {
|
||||
labels: [...this.labels],
|
||||
datasets: [{ ...this.datasets, data: [65, 59, 84, 84, 51, 55, 40], label: 'Facebook', ...this.colors }]
|
||||
}
|
||||
},
|
||||
{
|
||||
icon: 'cibTwitter',
|
||||
values: [{ title: 'followers', value: '973k' }, { title: 'tweets', value: '1.792' }],
|
||||
capBg: { '--cui-card-cap-bg': '#00aced' },
|
||||
data: {
|
||||
labels: [...this.labels],
|
||||
datasets: [{ ...this.datasets, data: [1, 13, 9, 17, 34, 41, 38], label: 'Twitter', ...this.colors }]
|
||||
}
|
||||
},
|
||||
{
|
||||
icon: 'cib-linkedin',
|
||||
values: [{ title: 'contacts', value: '500' }, { title: 'feeds', value: '1.292' }],
|
||||
capBg: { '--cui-card-cap-bg': '#4875b4' },
|
||||
data: {
|
||||
labels: [...this.labels],
|
||||
datasets: [{ ...this.datasets, data: [78, 81, 80, 45, 34, 12, 40], label: 'LinkedIn', ...this.colors }]
|
||||
}
|
||||
},
|
||||
{
|
||||
icon: 'cilCalendar',
|
||||
values: [{ title: 'events', value: '12+' }, { title: 'meetings', value: '4' }],
|
||||
color: 'warning',
|
||||
data: {
|
||||
labels: [...this.labels],
|
||||
datasets: [{ ...this.datasets, data: [35, 23, 56, 22, 97, 23, 64], label: 'Events', ...this.colors }]
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
capStyle(value: string) {
|
||||
return !!value ? { '--cui-card-cap-bg': value } : {};
|
||||
}
|
||||
|
||||
ngAfterContentInit(): void {
|
||||
this.changeDetectorRef.detectChanges();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<c-row >
|
||||
<c-col *ngFor="let sensor of devicedata['sensors']; index as i" [sm]="6" [xl]="count_calc(devicedata)" >
|
||||
<c-widget-stat-a
|
||||
class="mb-2"
|
||||
[color]="colors[i]"
|
||||
[title]="sensor"
|
||||
>
|
||||
<ng-template cTemplateId="widgetValueTemplate" ngPreserveWhitespaces>
|
||||
{{show_number(sensor,devicedata)}}
|
||||
|
||||
</ng-template>
|
||||
|
||||
<ng-template cTemplateId="widgetChartTemplate">
|
||||
<c-chart [data]="devicedata[sensor]" [options]="(sensor=='rxp/txp-total') ? options[4] :options[2]" class="mt-3 mx-3" height="70" [type]="(sensor=='rxp/txp-total') ? 'bar' :'line'"></c-chart>
|
||||
<div [innerHTML]='show_date(devicedata[sensor]["labels"][devicedata[sensor]["datasets"][0]["data"].length-1])' class="fs-6 fw-normal" style="
|
||||
padding: 5px;
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
font-size: 0.8rem!important;
|
||||
border-top: 1px solid #d5d5d55e;
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
"></div>
|
||||
</ng-template>
|
||||
</c-widget-stat-a>
|
||||
|
||||
</c-col>
|
||||
</c-row>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ButtonModule, DropdownModule, GridModule, WidgetModule } from '@coreui/angular';
|
||||
import { IconModule } from '@coreui/icons-angular';
|
||||
import { ChartjsModule } from '@coreui/angular-chartjs';
|
||||
import { IconSetService } from '@coreui/icons-angular';
|
||||
import { iconSubset } from '../../../icons/icon-subset';
|
||||
import { WidgetsDropdownComponent } from './widgets-dropdown.component';
|
||||
|
||||
describe('WidgetsDropdownComponent', () => {
|
||||
let component: WidgetsDropdownComponent;
|
||||
let fixture: ComponentFixture<WidgetsDropdownComponent>;
|
||||
let iconSetService: IconSetService;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ WidgetsDropdownComponent ],
|
||||
imports: [WidgetModule, DropdownModule, IconModule, ButtonModule, ChartjsModule, GridModule],
|
||||
providers: [IconSetService]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
iconSetService = TestBed.inject(IconSetService);
|
||||
iconSetService.icons = { ...iconSubset };
|
||||
|
||||
fixture = TestBed.createComponent(WidgetsDropdownComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,423 @@
|
|||
import {
|
||||
AfterContentInit,
|
||||
AfterViewInit,
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
OnInit,
|
||||
Input,
|
||||
ViewChild
|
||||
} from '@angular/core';
|
||||
import { getStyle } from '@coreui/utils';
|
||||
import { ChartjsComponent } from '@coreui/angular-chartjs';
|
||||
import { dataProvider } from '../../../providers/mikrowizard/data';
|
||||
|
||||
@Component({
|
||||
selector: 'app-widgets-dropdown',
|
||||
templateUrl: './widgets-dropdown.component.html',
|
||||
styleUrls: ['./widgets-dropdown.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.Default
|
||||
})
|
||||
export class WidgetsDropdownComponent implements OnInit, AfterContentInit {
|
||||
|
||||
constructor(
|
||||
private changeDetectorRef: ChangeDetectorRef,
|
||||
private data_provider: dataProvider,
|
||||
|
||||
) {}
|
||||
|
||||
data: any[] = [];
|
||||
options: any[] = [];
|
||||
@Input() devicedata: any;
|
||||
labels = [
|
||||
'January',
|
||||
'February',
|
||||
'March',
|
||||
'April',
|
||||
'May',
|
||||
'June',
|
||||
'July',
|
||||
'August',
|
||||
'September',
|
||||
'October',
|
||||
'November',
|
||||
'December',
|
||||
'January',
|
||||
'February',
|
||||
'March',
|
||||
'April'
|
||||
];
|
||||
colors = [
|
||||
'primary',
|
||||
'success',
|
||||
'danger',
|
||||
'warning',
|
||||
'info',
|
||||
'light',
|
||||
'dark',
|
||||
'primary',
|
||||
'success',
|
||||
'danger',
|
||||
'warning',
|
||||
'info',
|
||||
'light',
|
||||
'dark',
|
||||
'primary',
|
||||
'success',
|
||||
'danger',
|
||||
'warning',
|
||||
'info',
|
||||
'light',
|
||||
'dark',
|
||||
'light',
|
||||
'dark',
|
||||
'primary',
|
||||
'success',
|
||||
'danger',
|
||||
'warning',
|
||||
'info',
|
||||
'light',
|
||||
'dark',
|
||||
'primary',
|
||||
'success',
|
||||
'danger',
|
||||
'warning',
|
||||
'info',
|
||||
'light',
|
||||
'dark'
|
||||
];
|
||||
datasets = [
|
||||
[{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
pointBackgroundColor: getStyle('--cui-primary'),
|
||||
pointHoverBorderColor: getStyle('--cui-primary'),
|
||||
data: [65, 59, 84, 84, 51, 55, 40]
|
||||
}], [{
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
pointBackgroundColor: getStyle('--cui-info'),
|
||||
pointHoverBorderColor: getStyle('--cui-info'),
|
||||
data: [1, 18, 9, 17, 34, 22, 11]
|
||||
}], [{
|
||||
label: 'My Third dataset',
|
||||
backgroundColor: 'rgba(255,255,255,.2)',
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
pointBackgroundColor: getStyle('--cui-warning'),
|
||||
pointHoverBorderColor: getStyle('--cui-warning'),
|
||||
data: [78, 81, 80, 45, 34, 12, 40],
|
||||
fill: true
|
||||
}], [{
|
||||
label: 'My Fourth dataset',
|
||||
backgroundColor: 'rgba(255,255,255,.2)',
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82],
|
||||
barPercentage: 0.7
|
||||
}]
|
||||
];
|
||||
optionsDefault = {
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
maintainAspectRatio: true,
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false
|
||||
},
|
||||
ticks: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
y: {
|
||||
display: false,
|
||||
grid: {
|
||||
display: false
|
||||
},
|
||||
ticks: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 1,
|
||||
tension: 0.4
|
||||
},
|
||||
point: {
|
||||
radius: 4,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 6
|
||||
}
|
||||
}
|
||||
};
|
||||
logger(data: any){
|
||||
console.dir(data)
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
|
||||
this.setData();
|
||||
}
|
||||
|
||||
ngAfterContentInit(): void {
|
||||
this.changeDetectorRef.detectChanges();
|
||||
|
||||
}
|
||||
|
||||
convert_bw_human(mynumber:number=0,unit:string){
|
||||
const units = ['bit', 'Kib', 'Mib', 'Gib', 'Tib'];
|
||||
let unitIndex = 0;
|
||||
while (mynumber >= 1024 && unitIndex < units.length - 1) {
|
||||
mynumber /= 1024;
|
||||
unitIndex++;
|
||||
}
|
||||
console.dir(mynumber)
|
||||
switch (unit) {
|
||||
case 'rx':
|
||||
return mynumber.toFixed(3) + ' ' + units[unitIndex];
|
||||
break;
|
||||
case 'tx':
|
||||
return mynumber.toFixed(3) + ' ' + units[unitIndex];
|
||||
break;
|
||||
default:
|
||||
return mynumber;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
show_number(sensor:string,data:any){
|
||||
if(sensor=='rxp/txp-total'){
|
||||
let mynumber=data[sensor]["datasets"][0]["data"][data[sensor]["datasets"][0]["data"].length-1];
|
||||
let mynumber1=data[sensor]["datasets"][1]["data"][data[sensor]["datasets"][1]["data"].length-1];
|
||||
let res1=this.convert_bw_human(mynumber,data[sensor]["datasets"][0]['unit']);
|
||||
let res2=this.convert_bw_human(mynumber1,data[sensor]["datasets"][1]['unit']);
|
||||
return res1 + " / " + res2;
|
||||
}
|
||||
else{
|
||||
let mynumber=data[sensor]["datasets"][0]["data"][data[sensor]["datasets"][0]["data"].length-1];
|
||||
return mynumber
|
||||
}
|
||||
}
|
||||
|
||||
count_calc(data:any){
|
||||
if(data.sensors.length > 4)
|
||||
return 2
|
||||
else if(data.sensors.length <= 4)
|
||||
return 3
|
||||
else
|
||||
return 3
|
||||
}
|
||||
|
||||
setData() {
|
||||
for (let idx = 0; idx < 4; idx++) {
|
||||
this.data[idx] = {
|
||||
labels: idx < 3 ? this.labels.slice(0, 7) : this.labels,
|
||||
datasets: this.datasets[idx]
|
||||
};
|
||||
}
|
||||
this.setOptions();
|
||||
}
|
||||
|
||||
show_date(date:string){
|
||||
if(typeof date === "undefined")
|
||||
return ""
|
||||
|
||||
if(date=='')
|
||||
return ''
|
||||
else if(date.split("T").length>1)
|
||||
return "Last data : " + date.split("T")[0]
|
||||
else if(date.split("T").length==1)
|
||||
return "Last data : " + date.split("T").join(' ')
|
||||
else
|
||||
return date;
|
||||
|
||||
|
||||
}
|
||||
setOptions() {
|
||||
for (let idx = 0; idx < 5; idx++) {
|
||||
const options = JSON.parse(JSON.stringify(this.optionsDefault));
|
||||
switch (idx) {
|
||||
case 0: {
|
||||
this.options.push(options);
|
||||
break;
|
||||
}
|
||||
case 1: {
|
||||
options.scales.y.min = -9;
|
||||
options.scales.y.max = 39;
|
||||
this.options.push(options);
|
||||
break;
|
||||
}
|
||||
case 2: {
|
||||
options.scales.x = { display: false };
|
||||
options.scales.y = { display: false };
|
||||
options.elements.line.borderWidth = 2;
|
||||
options.elements.point.radius = 2;
|
||||
this.options.push(options);
|
||||
break;
|
||||
}
|
||||
case 3: {
|
||||
options.scales.x.grid = { display: false, drawTicks: false };
|
||||
options.scales.x.grid = { display: false, drawTicks: false, drawBorder: false };
|
||||
options.scales.y.min = undefined;
|
||||
options.scales.y.max = undefined;
|
||||
options.elements = {};
|
||||
this.options.push(options);
|
||||
break;
|
||||
}
|
||||
case 4: {
|
||||
options.plugins={
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: function(context:any) {
|
||||
const units = ['bit', 'Kib', 'Mib', 'Gib', 'Tib'];
|
||||
let label = context.dataset.label || '';
|
||||
var res=context.parsed.y
|
||||
let unitIndex = 0;
|
||||
// if (res>8) res /=8;
|
||||
while (res >= 1024 && unitIndex < units.length - 1) {
|
||||
res /= 1024;
|
||||
unitIndex++;
|
||||
}
|
||||
console.dir(res)
|
||||
switch (context.dataset.unit) {
|
||||
case 'rx':
|
||||
return "rx/s :" + res.toFixed(3) + ' ' + units[unitIndex];
|
||||
break;
|
||||
case 'tx':
|
||||
return "tx/s :" + res.toFixed(3) + ' ' + units[unitIndex];
|
||||
break;
|
||||
case 'rxp':
|
||||
return "rxp/s :" + context.parsed.y;
|
||||
break;
|
||||
case 'txp':
|
||||
return "txp/s :" + context.parsed.y;
|
||||
break;
|
||||
default:
|
||||
return context.parsed.y;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
,
|
||||
legend: {
|
||||
display:false
|
||||
}
|
||||
}
|
||||
options.scales={
|
||||
'x':{ display: false },
|
||||
'yA': {
|
||||
display: false ,
|
||||
stacked: true,
|
||||
position: 'left',
|
||||
type: 'linear',
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
},
|
||||
},
|
||||
'yB': {
|
||||
display: false ,
|
||||
stacked: true,
|
||||
position: 'right',
|
||||
type: 'linear',
|
||||
|
||||
}
|
||||
};
|
||||
options.elements.line.borderWidth = 2;
|
||||
options.elements.point.radius = 2;
|
||||
this.options.push(options);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-chart-sample',
|
||||
template: '<c-chart type="line" [data]="data" [options]="options" width="300" #chart></c-chart>'
|
||||
})
|
||||
export class ChartSample implements AfterViewInit {
|
||||
|
||||
constructor() {}
|
||||
|
||||
@ViewChild('chart') chartComponent!: ChartjsComponent;
|
||||
|
||||
colors = {
|
||||
label: 'My dataset',
|
||||
backgroundColor: 'rgba(77,189,116,.2)',
|
||||
borderColor: '#4dbd74',
|
||||
pointHoverBackgroundColor: '#fff'
|
||||
};
|
||||
|
||||
labels = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
|
||||
|
||||
data = {
|
||||
labels: this.labels,
|
||||
datasets: [{
|
||||
data: [65, 59, 84, 84, 51, 55, 40],
|
||||
...this.colors,
|
||||
fill: { value: 65 }
|
||||
}]
|
||||
};
|
||||
|
||||
options = {
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
tension: 0.4
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ngAfterViewInit(): void {
|
||||
setTimeout(() => {
|
||||
const data = () => {
|
||||
return {
|
||||
...this.data,
|
||||
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
|
||||
datasets: [{
|
||||
...this.data.datasets[0],
|
||||
data: [42, 88, 42, 66, 77],
|
||||
fill: { value: 55 }
|
||||
}, { ...this.data.datasets[0], borderColor: '#ffbd47', data: [88, 42, 66, 77, 42] }]
|
||||
};
|
||||
};
|
||||
const newLabels = ['Jan', 'Feb', 'Mar', 'Apr', 'May'];
|
||||
const newData = [42, 88, 42, 66, 77];
|
||||
let { datasets, labels } = { ...this.data };
|
||||
// @ts-ignore
|
||||
const before = this.chartComponent?.chart?.data.datasets.length;
|
||||
console.log('before', before);
|
||||
// console.log('datasets, labels', datasets, labels)
|
||||
// @ts-ignore
|
||||
// this.data = data()
|
||||
this.data = {
|
||||
...this.data,
|
||||
datasets: [{ ...this.data.datasets[0], data: newData }, {
|
||||
...this.data.datasets[0],
|
||||
borderColor: '#ffbd47',
|
||||
data: [88, 42, 66, 77, 42]
|
||||
}],
|
||||
labels: newLabels
|
||||
};
|
||||
// console.log('datasets, labels', { datasets, labels } = {...this.data})
|
||||
// @ts-ignore
|
||||
setTimeout(() => {
|
||||
const after = this.chartComponent?.chart?.data.datasets.length;
|
||||
console.log('after', after);
|
||||
});
|
||||
}, 5000);
|
||||
}
|
||||
}
|
||||
56
src/app/views/widgets/widgets-e/widgets-e.component.html
Normal file
56
src/app/views/widgets/widgets-e/widgets-e.component.html
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<c-row>
|
||||
<c-col xl="2" lg="4" sm="6">
|
||||
<c-widget-stat-e
|
||||
[title]="'title'"
|
||||
[value]="'1,123'"
|
||||
class="mb-4"
|
||||
>
|
||||
<c-chart [data]="data[0]" [options]="barOptions" class="mx-auto" height="40" width="80"></c-chart>
|
||||
</c-widget-stat-e>
|
||||
</c-col>
|
||||
<c-col xl="2" lg="4" sm="6">
|
||||
<c-widget-stat-e
|
||||
[title]="'title'"
|
||||
[value]="'1,123'"
|
||||
class="mb-4"
|
||||
>
|
||||
<c-chart [data]="data[1]" [options]="barOptions" class="mx-auto" height="40" width="80"></c-chart>
|
||||
</c-widget-stat-e>
|
||||
</c-col>
|
||||
<c-col xl="2" lg="4" sm="6">
|
||||
<c-widget-stat-e
|
||||
[title]="'title'"
|
||||
[value]="'1,123'"
|
||||
class="mb-4"
|
||||
>
|
||||
<c-chart [data]="data[2]" [options]="barOptions" class="mx-auto" height="40" width="80"></c-chart>
|
||||
</c-widget-stat-e>
|
||||
</c-col>
|
||||
<c-col xl="2" lg="4" sm="6">
|
||||
<c-widget-stat-e
|
||||
[title]="'title'"
|
||||
[value]="'1,123'"
|
||||
class="mb-4"
|
||||
>
|
||||
<c-chart [data]="data[3]" [options]="lineOptions" class="mx-auto" height="40" type="line" width="80"></c-chart>
|
||||
</c-widget-stat-e>
|
||||
</c-col>
|
||||
<c-col xl="2" lg="4" sm="6">
|
||||
<c-widget-stat-e
|
||||
[title]="'title'"
|
||||
[value]="'1,123'"
|
||||
class="mb-4"
|
||||
>
|
||||
<c-chart [data]="data[4]" [options]="lineOptions" class="mx-auto" height="40" type="line" width="80"></c-chart>
|
||||
</c-widget-stat-e>
|
||||
</c-col>
|
||||
<c-col xl="2" lg="4" sm="6">
|
||||
<c-widget-stat-e
|
||||
[title]="'title'"
|
||||
[value]="'1,123'"
|
||||
class="mb-4"
|
||||
>
|
||||
<c-chart [data]="data[5]" [options]="lineOptions" class="mx-auto" height="40" type="line" width="80"></c-chart>
|
||||
</c-widget-stat-e>
|
||||
</c-col>
|
||||
</c-row>
|
||||
0
src/app/views/widgets/widgets-e/widgets-e.component.scss
Normal file
0
src/app/views/widgets/widgets-e/widgets-e.component.scss
Normal file
35
src/app/views/widgets/widgets-e/widgets-e.component.spec.ts
Normal file
35
src/app/views/widgets/widgets-e/widgets-e.component.spec.ts
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { GridModule, WidgetModule } from '@coreui/angular';
|
||||
import { ChartjsModule } from '@coreui/angular-chartjs';
|
||||
import { IconSetService } from '@coreui/icons-angular';
|
||||
import { iconSubset } from '../../../icons/icon-subset';
|
||||
import { WidgetsEComponent } from './widgets-e.component';
|
||||
|
||||
describe('WidgetsEComponent', () => {
|
||||
let component: WidgetsEComponent;
|
||||
let fixture: ComponentFixture<WidgetsEComponent>;
|
||||
let iconSetService: IconSetService;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ WidgetsEComponent ],
|
||||
imports: [WidgetModule, GridModule, ChartjsModule],
|
||||
providers: [IconSetService]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
iconSetService = TestBed.inject(IconSetService);
|
||||
iconSetService.icons = { ...iconSubset };
|
||||
|
||||
fixture = TestBed.createComponent(WidgetsEComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
138
src/app/views/widgets/widgets-e/widgets-e.component.ts
Normal file
138
src/app/views/widgets/widgets-e/widgets-e.component.ts
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
|
||||
import { getStyle } from '@coreui/utils';
|
||||
|
||||
@Component({
|
||||
selector: 'app-widgets-e',
|
||||
templateUrl: './widgets-e.component.html',
|
||||
styleUrls: ['./widgets-e.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.Default
|
||||
})
|
||||
export class WidgetsEComponent implements AfterContentInit {
|
||||
|
||||
constructor(
|
||||
private changeDetectorRef: ChangeDetectorRef
|
||||
) {
|
||||
this.prepareLabels();
|
||||
this.prepareDatasets();
|
||||
this.prepareData();
|
||||
}
|
||||
|
||||
datasets: any[] = [];
|
||||
labels: string[] = [];
|
||||
data: any[] = [];
|
||||
barOptions = {
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: false
|
||||
},
|
||||
y: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
};
|
||||
lineOptions = {
|
||||
maintainAspectRatio: false,
|
||||
elements: {
|
||||
line: {
|
||||
tension: 0.4
|
||||
},
|
||||
point: {
|
||||
radius: 0
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: false
|
||||
},
|
||||
y: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
get random() {
|
||||
const min = 40,
|
||||
max = 100;
|
||||
return Math.floor(Math.random() * (max - min + 1) + min);
|
||||
}
|
||||
|
||||
get randomData() {
|
||||
const data = [];
|
||||
for (let i = 0; i < 15; i++) {
|
||||
data.push(this.random);
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
get baseDatasets(): Array<any> {
|
||||
return [
|
||||
{
|
||||
data: this.randomData,
|
||||
barThickness: 'flex',
|
||||
borderColor: 'transparent',
|
||||
backgroundColor: 'transparent',
|
||||
pointBackgroundColor: 'transparent',
|
||||
pointHoverBorderColor: 'transparent',
|
||||
borderWidth: 1
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
ngAfterContentInit(): void {
|
||||
this.changeDetectorRef.detectChanges();
|
||||
}
|
||||
|
||||
prepareData() {
|
||||
for (let i = 0; i < 6; i++) {
|
||||
this.data.push({ labels: this.labels, datasets: this.datasets[i] });
|
||||
}
|
||||
}
|
||||
|
||||
prepareLabels() {
|
||||
for (let i = 0; i < 15; i++) {
|
||||
this.labels.push(this.getDayName(i));
|
||||
}
|
||||
}
|
||||
|
||||
prepareDatasets() {
|
||||
const params = [
|
||||
{ backgroundColor: 'danger' },
|
||||
{ backgroundColor: 'primary' },
|
||||
{ backgroundColor: 'dark' },
|
||||
{ borderColor: 'danger', borderWidth: 2 },
|
||||
{ borderColor: 'success', borderWidth: 2 },
|
||||
{ borderColor: 'info', borderWidth: 2 }
|
||||
];
|
||||
for (let i = 0; i < 6; i++) {
|
||||
this.datasets.push(this.getDataset(params[i]));
|
||||
}
|
||||
}
|
||||
|
||||
getDataset({ backgroundColor = 'transparent', borderColor = 'transparent', borderWidth = 1 }) {
|
||||
const dataset = this.baseDatasets;
|
||||
dataset[0].backgroundColor = backgroundColor !== 'transparent' ? getStyle(`--cui-${backgroundColor}`) : backgroundColor;
|
||||
dataset[0].borderColor = borderColor !== 'transparent' ? getStyle(`--cui-${borderColor}`) : borderColor;
|
||||
dataset[0].pointBackgroundColor = getStyle(`--cui-${borderColor}`);
|
||||
dataset[0].borderWidth = borderWidth;
|
||||
return dataset;
|
||||
}
|
||||
|
||||
getDayName(shift = 0) {
|
||||
// @ts-ignore
|
||||
const locale = navigator.language ?? navigator.userLanguage ?? navigator.systemLanguage ?? navigator.browserLanguage ?? 'en-US';
|
||||
const baseDate = new Date(Date.UTC(2000, 1, 0)); // Monday
|
||||
baseDate.setDate(baseDate.getDate() + shift);
|
||||
return baseDate.toLocaleDateString(locale, { weekday: 'short' });
|
||||
}
|
||||
}
|
||||
21
src/app/views/widgets/widgets-routing.module.ts
Normal file
21
src/app/views/widgets/widgets-routing.module.ts
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { WidgetsComponent } from './widgets/widgets.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: WidgetsComponent,
|
||||
data: {
|
||||
title: 'Widgets'
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class WidgetsRoutingModule {
|
||||
}
|
||||
52
src/app/views/widgets/widgets.module.ts
Normal file
52
src/app/views/widgets/widgets.module.ts
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import {
|
||||
ButtonModule,
|
||||
CardModule,
|
||||
DropdownModule,
|
||||
GridModule,
|
||||
ProgressModule,
|
||||
SharedModule,
|
||||
WidgetModule
|
||||
} from '@coreui/angular';
|
||||
import { IconModule } from '@coreui/icons-angular';
|
||||
import { ChartjsModule } from '@coreui/angular-chartjs';
|
||||
|
||||
import { DocsComponentsModule } from '@docs-components/docs-components.module';
|
||||
|
||||
import { WidgetsRoutingModule } from './widgets-routing.module';
|
||||
import { WidgetsComponent } from './widgets/widgets.component';
|
||||
import { WidgetsBrandComponent } from './widgets-brand/widgets-brand.component';
|
||||
import { ChartSample, WidgetsDropdownComponent } from './widgets-dropdown/widgets-dropdown.component';
|
||||
import { WidgetsEComponent } from './widgets-e/widgets-e.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
WidgetsComponent,
|
||||
WidgetsBrandComponent,
|
||||
WidgetsDropdownComponent,
|
||||
ChartSample,
|
||||
WidgetsEComponent
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
WidgetsRoutingModule,
|
||||
GridModule,
|
||||
WidgetModule,
|
||||
IconModule,
|
||||
DropdownModule,
|
||||
SharedModule,
|
||||
ButtonModule,
|
||||
CardModule,
|
||||
DocsComponentsModule,
|
||||
ProgressModule,
|
||||
ChartjsModule
|
||||
],
|
||||
exports: [
|
||||
WidgetsBrandComponent,
|
||||
WidgetsDropdownComponent
|
||||
]
|
||||
})
|
||||
export class WidgetsModule {
|
||||
}
|
||||
616
src/app/views/widgets/widgets/widgets.component.html
Normal file
616
src/app/views/widgets/widgets/widgets.component.html
Normal file
|
|
@ -0,0 +1,616 @@
|
|||
<c-card class="mb-4">
|
||||
<c-card-header>Widgets</c-card-header>
|
||||
<c-card-body>
|
||||
<app-docs-example href="components/">
|
||||
<app-widgets-dropdown></app-widgets-dropdown>
|
||||
</app-docs-example>
|
||||
<app-docs-example href="components/widgets/#cwidgetstatsb">
|
||||
<c-row>
|
||||
<c-col xl="3" md="6" sm="6">
|
||||
<c-widget-stat-b
|
||||
[title]="'Widget title'"
|
||||
class="mb-4"
|
||||
text="Lorem ipsum dolor sit amet enim."
|
||||
value="89.9%"
|
||||
>
|
||||
<c-progress class="my-2" thin>
|
||||
<c-progress-bar [value]="89.9" color="success"></c-progress-bar>
|
||||
</c-progress>
|
||||
</c-widget-stat-b>
|
||||
</c-col>
|
||||
<c-col xl="3" md="6" sm="6">
|
||||
<c-widget-stat-b
|
||||
[title]="'Widget title'"
|
||||
class="mb-4"
|
||||
text="Lorem ipsum dolor sit amet enim."
|
||||
value="12.124"
|
||||
>
|
||||
<c-progress class="my-2" thin>
|
||||
<c-progress-bar [value]="89.9" color="info"></c-progress-bar>
|
||||
</c-progress>
|
||||
</c-widget-stat-b>
|
||||
</c-col>
|
||||
<c-col xl="3" md="6" sm="6">
|
||||
<c-widget-stat-b
|
||||
[title]="'Widget title'"
|
||||
class="mb-4"
|
||||
text="Lorem ipsum dolor sit amet enim."
|
||||
value="$98,111.00"
|
||||
>
|
||||
<c-progress class="my-2" thin>
|
||||
<c-progress-bar [value]="89.9" color="warning"></c-progress-bar>
|
||||
</c-progress>
|
||||
</c-widget-stat-b>
|
||||
</c-col>
|
||||
<c-col xl="3" md="6" sm="6">
|
||||
<c-widget-stat-b
|
||||
[title]="'Widget title'"
|
||||
class="mb-4"
|
||||
text="Lorem ipsum dolor sit amet enim."
|
||||
value="2 TB"
|
||||
>
|
||||
<c-progress class="my-2" thin>
|
||||
<c-progress-bar [value]="89.9" color="primary"></c-progress-bar>
|
||||
</c-progress>
|
||||
</c-widget-stat-b>
|
||||
</c-col>
|
||||
</c-row>
|
||||
</app-docs-example>
|
||||
<app-docs-example href="components/widgets/#cwidgetstatsb">
|
||||
<c-row>
|
||||
<c-col xl="3" md="6" sm="6">
|
||||
<c-widget-stat-b
|
||||
#widgetStatB1inv="cWidgetStatB"
|
||||
[title]="'Widget title'"
|
||||
class="mb-4"
|
||||
color="success"
|
||||
inverse
|
||||
text="Lorem ipsum dolor sit amet enim."
|
||||
value="89.9%"
|
||||
>
|
||||
<c-progress [white]="widgetStatB1inv.inverse" class="my-2" thin>
|
||||
<c-progress-bar [value]="89.9"></c-progress-bar>
|
||||
</c-progress>
|
||||
</c-widget-stat-b>
|
||||
</c-col>
|
||||
<c-col xl="3" md="6" sm="6">
|
||||
<c-widget-stat-b
|
||||
#widgetStatB2inv="cWidgetStatB"
|
||||
[title]="'Widget title'"
|
||||
class="mb-4"
|
||||
color="info"
|
||||
inverse
|
||||
text="Lorem ipsum dolor sit amet enim."
|
||||
value="12.124"
|
||||
>
|
||||
<c-progress [white]="widgetStatB2inv.inverse" class="my-2" thin>
|
||||
<c-progress-bar [value]="89.9"></c-progress-bar>
|
||||
</c-progress>
|
||||
</c-widget-stat-b>
|
||||
</c-col>
|
||||
<c-col xl="3" md="6" sm="6">
|
||||
<c-widget-stat-b
|
||||
#widgetStatB3inv="cWidgetStatB"
|
||||
[title]="'Widget title'"
|
||||
class="mb-4"
|
||||
color="warning"
|
||||
inverse
|
||||
text="Lorem ipsum dolor sit amet enim."
|
||||
value="$98,111.00"
|
||||
>
|
||||
<c-progress [white]="widgetStatB3inv.inverse" class="my-2" thin>
|
||||
<c-progress-bar [value]="89.9"></c-progress-bar>
|
||||
</c-progress>
|
||||
</c-widget-stat-b>
|
||||
</c-col>
|
||||
<c-col xl="3" md="6" sm="6">
|
||||
<c-widget-stat-b
|
||||
#widgetStatB4inv="cWidgetStatB"
|
||||
[title]="'Widget title'"
|
||||
class="mb-4"
|
||||
color="primary"
|
||||
inverse
|
||||
text="Lorem ipsum dolor sit amet enim."
|
||||
value="2 TB"
|
||||
>
|
||||
<c-progress [white]="widgetStatB4inv.inverse" class="my-2" thin>
|
||||
<c-progress-bar [value]="89.9"></c-progress-bar>
|
||||
</c-progress>
|
||||
</c-widget-stat-b>
|
||||
</c-col>
|
||||
</c-row>
|
||||
</app-docs-example>
|
||||
<app-docs-example href="components/widgets/#cwidgetstatse">
|
||||
<app-widgets-e></app-widgets-e>
|
||||
</app-docs-example>
|
||||
<app-docs-example href="components/widgets/#cwidgetstatsf">
|
||||
<c-row>
|
||||
<c-col xl="3" md="6" sm="6">
|
||||
<c-widget-stat-f
|
||||
[title]="'Income'"
|
||||
class="mb-3"
|
||||
color="primary"
|
||||
padding
|
||||
value="$1,999.50"
|
||||
>
|
||||
<ng-template cTemplateId="widgetIconTemplate">
|
||||
<svg cIcon name="cilSettings" size="xl" width="24"></svg>
|
||||
</ng-template>
|
||||
</c-widget-stat-f>
|
||||
</c-col>
|
||||
<c-col xl="3" md="6" sm="6">
|
||||
<c-widget-stat-f
|
||||
[title]="'Income'"
|
||||
class="mb-3"
|
||||
color="info"
|
||||
padding
|
||||
value="$1,999.50"
|
||||
>
|
||||
<ng-template cTemplateId="widgetIconTemplate">
|
||||
<svg cIcon name="cilUser" size="xl" width="24"></svg>
|
||||
</ng-template>
|
||||
</c-widget-stat-f>
|
||||
</c-col>
|
||||
<c-col xl="3" md="6" sm="6">
|
||||
<c-widget-stat-f
|
||||
[title]="'Income'"
|
||||
class="mb-3"
|
||||
color="warning"
|
||||
padding
|
||||
value="$1,999.50"
|
||||
>
|
||||
<ng-template cTemplateId="widgetIconTemplate">
|
||||
<svg cIcon name="cilMoon" size="xl" width="24"></svg>
|
||||
</ng-template>
|
||||
</c-widget-stat-f>
|
||||
</c-col>
|
||||
<c-col xl="3" md="6" sm="6">
|
||||
<c-widget-stat-f
|
||||
[title]="'Income'"
|
||||
class="mb-3"
|
||||
color="danger"
|
||||
padding
|
||||
value="$1,999.50"
|
||||
>
|
||||
<ng-template cTemplateId="widgetIconTemplate">
|
||||
<svg cIcon name="cilBell" size="xl" width="24"></svg>
|
||||
</ng-template>
|
||||
</c-widget-stat-f>
|
||||
</c-col>
|
||||
</c-row>
|
||||
</app-docs-example>
|
||||
<app-docs-example href="components/widgets/#cwidgetstatsf">
|
||||
<c-row>
|
||||
<c-col xl="3" md="6" sm="6">
|
||||
<c-widget-stat-f
|
||||
[title]="'Income'"
|
||||
class="mb-3"
|
||||
color="primary"
|
||||
padding
|
||||
value="$1,999.50"
|
||||
>
|
||||
<ng-template cTemplateId="widgetIconTemplate">
|
||||
<svg cIcon name="cilSettings" size="xl" width="24"></svg>
|
||||
</ng-template>
|
||||
<ng-template cTemplateId="widgetFooterTemplate">
|
||||
<a class="font-weight-bold font-xs text-medium-emphasis"
|
||||
href="https://coreui.io/"
|
||||
rel="noopener norefferer"
|
||||
target="_blank">
|
||||
View more
|
||||
<svg cIcon class="float-end" name="cilArrowRight" width="16"></svg>
|
||||
</a>
|
||||
</ng-template>
|
||||
</c-widget-stat-f>
|
||||
</c-col>
|
||||
<c-col xl="3" md="6" sm="6">
|
||||
<c-widget-stat-f
|
||||
[title]="'Income'"
|
||||
class="mb-3"
|
||||
color="info"
|
||||
padding
|
||||
value="$1,999.50"
|
||||
>
|
||||
<ng-template cTemplateId="widgetIconTemplate">
|
||||
<svg cIcon name="cilUser" size="xl" width="24"></svg>
|
||||
</ng-template>
|
||||
<ng-template cTemplateId="widgetFooterTemplate">
|
||||
<a class="font-weight-bold font-xs text-medium-emphasis"
|
||||
href="https://coreui.io/"
|
||||
rel="noopener norefferer"
|
||||
target="_blank">
|
||||
View more
|
||||
<svg cIcon class="float-end" name="cilArrowRight" width="16"></svg>
|
||||
</a>
|
||||
</ng-template>
|
||||
</c-widget-stat-f>
|
||||
</c-col>
|
||||
<c-col xl="3" md="6" sm="6">
|
||||
<c-widget-stat-f
|
||||
[title]="'Income'"
|
||||
class="mb-3"
|
||||
color="warning"
|
||||
padding
|
||||
value="$1,999.50"
|
||||
>
|
||||
<ng-template cTemplateId="widgetIconTemplate">
|
||||
<svg cIcon name="cilMoon" size="xl" width="24"></svg>
|
||||
</ng-template>
|
||||
<ng-template cTemplateId="widgetFooterTemplate">
|
||||
<a class="font-weight-bold font-xs text-medium-emphasis"
|
||||
href="https://coreui.io/"
|
||||
rel="noopener norefferer"
|
||||
target="_blank">
|
||||
View more
|
||||
<svg cIcon class="float-end" name="cilArrowRight" width="16"></svg>
|
||||
</a>
|
||||
</ng-template>
|
||||
</c-widget-stat-f>
|
||||
</c-col>
|
||||
<c-col xl="3" md="6" sm="6">
|
||||
<c-widget-stat-f
|
||||
[title]="'Income'"
|
||||
class="mb-3"
|
||||
color="danger"
|
||||
padding
|
||||
value="$1,999.50"
|
||||
>
|
||||
<ng-template cTemplateId="widgetIconTemplate">
|
||||
<svg cIcon name="cilBell" size="xl" width="24"></svg>
|
||||
</ng-template>
|
||||
<ng-template cTemplateId="widgetFooterTemplate">
|
||||
<a class="font-weight-bold font-xs text-medium-emphasis"
|
||||
href="https://coreui.io/"
|
||||
rel="noopener norefferer"
|
||||
target="_blank">
|
||||
View more
|
||||
<svg cIcon class="float-end" name="cilArrowRight" width="16"></svg>
|
||||
</a>
|
||||
</ng-template>
|
||||
</c-widget-stat-f>
|
||||
</c-col>
|
||||
</c-row>
|
||||
</app-docs-example>
|
||||
<app-docs-example href="components/widgets/#cwidgetstatsf">
|
||||
<c-row>
|
||||
<c-col xl="3" md="6" sm="6">
|
||||
<c-widget-stat-f
|
||||
[title]="'Income'"
|
||||
class="mb-3"
|
||||
color="primary"
|
||||
value="$1,999.50"
|
||||
>
|
||||
<ng-template cTemplateId="widgetIconTemplate">
|
||||
<svg cIcon name="cilSettings" size="xl" width="24"></svg>
|
||||
</ng-template>
|
||||
</c-widget-stat-f>
|
||||
</c-col>
|
||||
<c-col xl="3" md="6" sm="6">
|
||||
<c-widget-stat-f
|
||||
[title]="'Income'"
|
||||
class="mb-3"
|
||||
color="info"
|
||||
value="$1,999.50"
|
||||
>
|
||||
<ng-template cTemplateId="widgetIconTemplate">
|
||||
<svg cIcon name="cilUser" size="xl" width="24"></svg>
|
||||
</ng-template>
|
||||
</c-widget-stat-f>
|
||||
</c-col>
|
||||
<c-col xl="3" md="6" sm="6">
|
||||
<c-widget-stat-f
|
||||
[title]="'Income'"
|
||||
class="mb-3"
|
||||
color="warning"
|
||||
value="$1,999.50"
|
||||
>
|
||||
<ng-template cTemplateId="widgetIconTemplate">
|
||||
<svg cIcon name="cilMoon" size="xl" width="24"></svg>
|
||||
</ng-template>
|
||||
</c-widget-stat-f>
|
||||
</c-col>
|
||||
<c-col xl="3" md="6" sm="6">
|
||||
<c-widget-stat-f
|
||||
[title]="'Income'"
|
||||
class="mb-3"
|
||||
color="danger"
|
||||
value="$1,999.50"
|
||||
>
|
||||
<ng-template cTemplateId="widgetIconTemplate">
|
||||
<svg cIcon name="cilBell" size="xl" width="24" class="rounded-5"></svg>
|
||||
</ng-template>
|
||||
</c-widget-stat-f>
|
||||
</c-col>
|
||||
</c-row>
|
||||
</app-docs-example>
|
||||
|
||||
<app-docs-example href="components/widgets/#cwidgetstatsd">
|
||||
<app-widgets-brand></app-widgets-brand>
|
||||
</app-docs-example>
|
||||
<app-docs-example href="components/widgets/#cwidgetstatsd">
|
||||
<app-widgets-brand [withCharts]="true"></app-widgets-brand>
|
||||
</app-docs-example>
|
||||
|
||||
<app-docs-example href="components/widgets/#cwidgetstatsc">
|
||||
<c-card-group class="mb-4">
|
||||
<c-widget-stat-c
|
||||
[title]="'Visitors'"
|
||||
value="87,500"
|
||||
>
|
||||
<ng-template cTemplateId="widgetIconTemplate">
|
||||
<svg cIcon height="36" name="cilPeople"></svg>
|
||||
</ng-template>
|
||||
<ng-template cTemplateId="widgetProgressTemplate">
|
||||
<c-progress class="mt-3 mb-0" thin>
|
||||
<c-progress-bar [value]="75" color="info"></c-progress-bar>
|
||||
</c-progress>
|
||||
</ng-template>
|
||||
</c-widget-stat-c>
|
||||
<c-widget-stat-c
|
||||
[title]="'New Clients'"
|
||||
value="385"
|
||||
>
|
||||
<ng-template cTemplateId="widgetIconTemplate">
|
||||
<svg cIcon height="36" name="cilUserFollow"></svg>
|
||||
</ng-template>
|
||||
<ng-template cTemplateId="widgetProgressTemplate">
|
||||
<c-progress class="mt-3 mb-0" thin>
|
||||
<c-progress-bar [value]="75" color="success"></c-progress-bar>
|
||||
</c-progress>
|
||||
</ng-template>
|
||||
</c-widget-stat-c>
|
||||
<c-widget-stat-c
|
||||
[title]="'Products sold'"
|
||||
value="1238"
|
||||
>
|
||||
<ng-template cTemplateId="widgetIconTemplate">
|
||||
<svg cIcon height="36" name="cilBasket"></svg>
|
||||
</ng-template>
|
||||
<ng-template cTemplateId="widgetProgressTemplate">
|
||||
<c-progress class="mt-3 mb-0" thin>
|
||||
<c-progress-bar [value]="75" color="warning"></c-progress-bar>
|
||||
</c-progress>
|
||||
</ng-template>
|
||||
</c-widget-stat-c>
|
||||
<c-widget-stat-c
|
||||
[title]="'Returning Visitors'"
|
||||
value="28%"
|
||||
>
|
||||
<ng-template cTemplateId="widgetIconTemplate">
|
||||
<svg cIcon height="36" name="cilChartPie"></svg>
|
||||
</ng-template>
|
||||
<ng-template cTemplateId="widgetProgressTemplate">
|
||||
<c-progress class="mt-3 mb-0" thin>
|
||||
<c-progress-bar [value]="75" color="primary"></c-progress-bar>
|
||||
</c-progress>
|
||||
</ng-template>
|
||||
</c-widget-stat-c>
|
||||
<c-widget-stat-c
|
||||
[title]="'Avg. Time'"
|
||||
value="5:34:11"
|
||||
>
|
||||
<ng-template cTemplateId="widgetIconTemplate">
|
||||
<svg cIcon height="36" name="cilSpeedometer"></svg>
|
||||
</ng-template>
|
||||
<ng-template cTemplateId="widgetProgressTemplate">
|
||||
<c-progress class="mt-3 mb-0" thin>
|
||||
<c-progress-bar [value]="75" color="danger"></c-progress-bar>
|
||||
</c-progress>
|
||||
</ng-template>
|
||||
</c-widget-stat-c>
|
||||
</c-card-group>
|
||||
</app-docs-example>
|
||||
<app-docs-example href="components/widgets/#cwidgetstatsc">
|
||||
<c-row>
|
||||
<c-col xl="2" lg="4" sm="6">
|
||||
<c-widget-stat-c
|
||||
[title]="'Visitors'"
|
||||
class="mb-4"
|
||||
value="87,500"
|
||||
>
|
||||
<ng-template cTemplateId="widgetIconTemplate">
|
||||
<svg cIcon height="36" name="cilPeople"></svg>
|
||||
</ng-template>
|
||||
<ng-template cTemplateId="widgetProgressTemplate">
|
||||
<c-progress class="mt-3 mb-0" thin>
|
||||
<c-progress-bar [value]="75" color="info"></c-progress-bar>
|
||||
</c-progress>
|
||||
</ng-template>
|
||||
</c-widget-stat-c>
|
||||
</c-col>
|
||||
<c-col xl="2" lg="4" sm="6">
|
||||
<c-widget-stat-c
|
||||
[title]="'New Clients'"
|
||||
class="mb-4"
|
||||
value="385"
|
||||
>
|
||||
<ng-template cTemplateId="widgetIconTemplate">
|
||||
<svg cIcon height="36" name="cilUserFollow"></svg>
|
||||
</ng-template>
|
||||
<ng-template cTemplateId="widgetProgressTemplate">
|
||||
<c-progress class="mt-3 mb-0" thin>
|
||||
<c-progress-bar [value]="75" color="success"></c-progress-bar>
|
||||
</c-progress>
|
||||
</ng-template>
|
||||
</c-widget-stat-c>
|
||||
</c-col>
|
||||
<c-col xl="2" lg="4" sm="6">
|
||||
<c-widget-stat-c
|
||||
[title]="'Products sold'"
|
||||
class="mb-4"
|
||||
value="1238"
|
||||
>
|
||||
<ng-template cTemplateId="widgetIconTemplate">
|
||||
<svg cIcon height="36" name="cilBasket"></svg>
|
||||
</ng-template>
|
||||
<ng-template cTemplateId="widgetProgressTemplate">
|
||||
<c-progress class="mt-3 mb-0" thin>
|
||||
<c-progress-bar [value]="75" color="warning"></c-progress-bar>
|
||||
</c-progress>
|
||||
</ng-template>
|
||||
</c-widget-stat-c>
|
||||
</c-col>
|
||||
<c-col xl="2" lg="4" sm="6">
|
||||
<c-widget-stat-c
|
||||
[title]="'Returning Visitors'"
|
||||
class="mb-4"
|
||||
value="28%"
|
||||
>
|
||||
<ng-template cTemplateId="widgetIconTemplate">
|
||||
<svg cIcon height="36" name="cilChartPie"></svg>
|
||||
</ng-template>
|
||||
<ng-template cTemplateId="widgetProgressTemplate">
|
||||
<c-progress class="mt-3 mb-0" thin>
|
||||
<c-progress-bar [value]="75" color="primary"></c-progress-bar>
|
||||
</c-progress>
|
||||
</ng-template>
|
||||
</c-widget-stat-c>
|
||||
</c-col>
|
||||
<c-col xl="2" lg="4" sm="6">
|
||||
<c-widget-stat-c
|
||||
[title]="'Avg. Time'"
|
||||
class="mb-4"
|
||||
value="5:34:11"
|
||||
>
|
||||
<ng-template cTemplateId="widgetIconTemplate">
|
||||
<svg cIcon height="36" name="cilSpeedometer"></svg>
|
||||
</ng-template>
|
||||
<ng-template cTemplateId="widgetProgressTemplate">
|
||||
<c-progress class="mt-3 mb-0" thin>
|
||||
<c-progress-bar [value]="75" color="danger"></c-progress-bar>
|
||||
</c-progress>
|
||||
</ng-template>
|
||||
</c-widget-stat-c>
|
||||
</c-col>
|
||||
<c-col xl="2" lg="4" sm="6">
|
||||
<c-widget-stat-c
|
||||
[title]="'Comments'"
|
||||
class="mb-4"
|
||||
value="972"
|
||||
>
|
||||
<ng-template cTemplateId="widgetIconTemplate">
|
||||
<svg cIcon height="36" name="cilSpeech"></svg>
|
||||
</ng-template>
|
||||
<ng-template cTemplateId="widgetProgressTemplate">
|
||||
<c-progress class="mt-3 mb-0" thin>
|
||||
<c-progress-bar [value]="75" color="dark"></c-progress-bar>
|
||||
</c-progress>
|
||||
</ng-template>
|
||||
</c-widget-stat-c>
|
||||
</c-col>
|
||||
</c-row>
|
||||
</app-docs-example>
|
||||
<app-docs-example href="components/widgets/#cwidgetstatsc">
|
||||
<c-row>
|
||||
<c-col xl="2" lg="4" sm="6">
|
||||
<c-widget-stat-c
|
||||
[title]="'Visitors'"
|
||||
class="mb-4"
|
||||
color="info"
|
||||
inverse
|
||||
value="87,500"
|
||||
>
|
||||
<ng-template cTemplateId="widgetIconTemplate">
|
||||
<svg cIcon height="36" name="cilPeople"></svg>
|
||||
</ng-template>
|
||||
<ng-template cTemplateId="widgetProgressTemplate">
|
||||
<c-progress class="mt-3 mb-0" thin white>
|
||||
<c-progress-bar [value]="75"></c-progress-bar>
|
||||
</c-progress>
|
||||
</ng-template>
|
||||
</c-widget-stat-c>
|
||||
</c-col>
|
||||
<c-col xl="2" lg="4" sm="6">
|
||||
<c-widget-stat-c
|
||||
[title]="'New Clients'"
|
||||
class="mb-4"
|
||||
color="success"
|
||||
inverse
|
||||
value="385"
|
||||
>
|
||||
<ng-template cTemplateId="widgetIconTemplate">
|
||||
<svg cIcon height="36" name="cilUserFollow"></svg>
|
||||
</ng-template>
|
||||
<ng-template cTemplateId="widgetProgressTemplate">
|
||||
<c-progress class="mt-3 mb-0" thin white>
|
||||
<c-progress-bar [value]="75"></c-progress-bar>
|
||||
</c-progress>
|
||||
</ng-template>
|
||||
</c-widget-stat-c>
|
||||
</c-col>
|
||||
<c-col xl="2" lg="4" sm="6">
|
||||
<c-widget-stat-c
|
||||
[title]="'Products sold'"
|
||||
class="mb-4"
|
||||
color="warning"
|
||||
inverse
|
||||
value="1238"
|
||||
>
|
||||
<ng-template cTemplateId="widgetIconTemplate">
|
||||
<svg cIcon height="36" name="cilBasket"></svg>
|
||||
</ng-template>
|
||||
<ng-template cTemplateId="widgetProgressTemplate">
|
||||
<c-progress class="mt-3 mb-0" thin white>
|
||||
<c-progress-bar [value]="75"></c-progress-bar>
|
||||
</c-progress>
|
||||
</ng-template>
|
||||
</c-widget-stat-c>
|
||||
</c-col>
|
||||
<c-col xl="2" lg="4" sm="6">
|
||||
<c-widget-stat-c
|
||||
[title]="'Returning Visitors'"
|
||||
class="mb-4"
|
||||
color="primary"
|
||||
inverse
|
||||
value="28%"
|
||||
>
|
||||
<ng-template cTemplateId="widgetIconTemplate">
|
||||
<svg cIcon height="36" name="cilChartPie"></svg>
|
||||
</ng-template>
|
||||
<ng-template cTemplateId="widgetProgressTemplate">
|
||||
<c-progress class="mt-3 mb-0" thin white>
|
||||
<c-progress-bar [value]="75"></c-progress-bar>
|
||||
</c-progress>
|
||||
</ng-template>
|
||||
</c-widget-stat-c>
|
||||
</c-col>
|
||||
<c-col xl="2" lg="4" sm="6">
|
||||
<c-widget-stat-c
|
||||
[title]="'Avg. Time'"
|
||||
class="mb-4"
|
||||
color="danger"
|
||||
inverse
|
||||
value="5:34:11"
|
||||
>
|
||||
<ng-template cTemplateId="widgetIconTemplate">
|
||||
<svg cIcon height="36" name="cilSpeedometer"></svg>
|
||||
</ng-template>
|
||||
<ng-template cTemplateId="widgetProgressTemplate">
|
||||
<c-progress class="mt-3 mb-0" thin white>
|
||||
<c-progress-bar [value]="75"></c-progress-bar>
|
||||
</c-progress>
|
||||
</ng-template>
|
||||
</c-widget-stat-c>
|
||||
</c-col>
|
||||
<c-col xl="2" lg="4" sm="6">
|
||||
<c-widget-stat-c
|
||||
[title]="'Comments'"
|
||||
class="mb-4"
|
||||
color="dark"
|
||||
inverse
|
||||
value="972"
|
||||
>
|
||||
<ng-template cTemplateId="widgetIconTemplate">
|
||||
<svg cIcon height="36" name="cilSpeech"></svg>
|
||||
</ng-template>
|
||||
<ng-template cTemplateId="widgetProgressTemplate">
|
||||
<c-progress class="mt-3 mb-0" thin white>
|
||||
<c-progress-bar [value]="75"></c-progress-bar>
|
||||
</c-progress>
|
||||
</ng-template>
|
||||
</c-widget-stat-c>
|
||||
</c-col>
|
||||
</c-row>
|
||||
</app-docs-example>
|
||||
</c-card-body>
|
||||
</c-card>
|
||||
0
src/app/views/widgets/widgets/widgets.component.scss
Normal file
0
src/app/views/widgets/widgets/widgets.component.scss
Normal file
40
src/app/views/widgets/widgets/widgets.component.spec.ts
Normal file
40
src/app/views/widgets/widgets/widgets.component.spec.ts
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { RouterTestingModule } from '@angular/router/testing';
|
||||
|
||||
import { CardModule, GridModule, ProgressModule, WidgetModule } from '@coreui/angular';
|
||||
import { ChartjsModule } from '@coreui/angular-chartjs';
|
||||
import { IconModule, IconSetService } from '@coreui/icons-angular';
|
||||
import { iconSubset } from '../../../icons/icon-subset';
|
||||
import { DocsComponentsModule } from '../../../../components';
|
||||
import { WidgetsBrandComponent } from '../widgets-brand/widgets-brand.component';
|
||||
import { WidgetsDropdownComponent } from '../widgets-dropdown/widgets-dropdown.component';
|
||||
import { WidgetsEComponent } from '../widgets-e/widgets-e.component';
|
||||
import { WidgetsComponent } from './widgets.component';
|
||||
|
||||
describe('WidgetsComponent', () => {
|
||||
let component: WidgetsComponent;
|
||||
let fixture: ComponentFixture<WidgetsComponent>;
|
||||
let iconSetService: IconSetService;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [WidgetsComponent, WidgetsBrandComponent, WidgetsDropdownComponent, WidgetsEComponent],
|
||||
imports: [WidgetModule, ProgressModule, GridModule, DocsComponentsModule, CardModule, RouterTestingModule, ChartjsModule, IconModule],
|
||||
providers: [IconSetService]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
iconSetService = TestBed.inject(IconSetService);
|
||||
iconSetService.icons = { ...iconSubset };
|
||||
|
||||
fixture = TestBed.createComponent(WidgetsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
17
src/app/views/widgets/widgets/widgets.component.ts
Normal file
17
src/app/views/widgets/widgets/widgets.component.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-widgets',
|
||||
templateUrl: './widgets.component.html',
|
||||
styleUrls: ['./widgets.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.Default
|
||||
})
|
||||
export class WidgetsComponent implements AfterContentInit {
|
||||
constructor(
|
||||
private changeDetectorRef: ChangeDetectorRef
|
||||
) {}
|
||||
|
||||
ngAfterContentInit(): void {
|
||||
this.changeDetectorRef.detectChanges();
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue