first commit
This commit is contained in:
13
src/app/content/charts-maps/chartjs/chartjs.module.spec.ts
Normal file
13
src/app/content/charts-maps/chartjs/chartjs.module.spec.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import { ChartjsModule } from './chartjs.module';
|
||||
|
||||
describe('ChartjsModule', () => {
|
||||
let chartjsModule: ChartjsModule;
|
||||
|
||||
beforeEach(() => {
|
||||
chartjsModule = new ChartjsModule();
|
||||
});
|
||||
|
||||
it('should create an instance', () => {
|
||||
expect(chartjsModule).toBeTruthy();
|
||||
});
|
||||
});
|
||||
29
src/app/content/charts-maps/chartjs/chartjs.module.ts
Normal file
29
src/app/content/charts-maps/chartjs/chartjs.module.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { NgChartsModule } from 'ng2-charts';
|
||||
import { ChartsComponent } from './charts/charts.component';
|
||||
import { CardModule } from '../../partials/general/card/card.module';
|
||||
import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
|
||||
import { BlockTemplateComponent } from 'src/app/_layout/blockui/block-template.component';
|
||||
import { BlockUIModule } from 'ng-block-ui';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
BreadcrumbModule,
|
||||
NgChartsModule,
|
||||
CardModule,
|
||||
BlockUIModule.forRoot({
|
||||
template: BlockTemplateComponent
|
||||
}),
|
||||
RouterModule.forChild([
|
||||
{
|
||||
path: 'charts',
|
||||
component: ChartsComponent
|
||||
}
|
||||
])
|
||||
],
|
||||
declarations: [ChartsComponent]
|
||||
})
|
||||
export class ChartjsModule { }
|
||||
636
src/app/content/charts-maps/chartjs/charts/chartjs.ts
Normal file
636
src/app/content/charts-maps/chartjs/charts/chartjs.ts
Normal file
@@ -0,0 +1,636 @@
|
||||
///////////////////// start linechart ///////////
|
||||
export const lineChartData: Array<any> = [
|
||||
{
|
||||
data: [56, 70, 55, 46, 67, 52, 70], label: 'Series C',
|
||||
backgroundColor: 'rgb(138,233,204,0.5)',
|
||||
borderColor: 'rgb(138,233,204,1)',
|
||||
pointBackgroundColor: 'rgb(138,233,204,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgb(138,233,204,0.2)',
|
||||
fill: true,
|
||||
lineTension: 0.4,
|
||||
},
|
||||
{
|
||||
data: [28, 48, 35, 29, 46, 27, 60], label: 'Series B',
|
||||
backgroundColor: 'rgb(68,186,239,0.7)',
|
||||
borderColor: 'rgb(168,186,239,1)',
|
||||
pointBackgroundColor: 'rgb(168,186,239,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgb(168,186,239,1)',
|
||||
fill: true,
|
||||
lineTension: 0.4,
|
||||
},
|
||||
{
|
||||
data: [0, 20, 11, 19, 10, 22, 9], label: 'Series A',
|
||||
backgroundColor: 'rgb(1,57,204,2.11)',
|
||||
borderColor: 'rgb(166,157,204,1)',
|
||||
pointBackgroundColor: 'rgb(166,157,204,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgb(166,157,204,1)',
|
||||
fill: true,
|
||||
lineTension: 0.4,
|
||||
}
|
||||
];
|
||||
export const lineChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
export const lineChartOptions: any = {
|
||||
animation: {
|
||||
duration: 1000, // general animation timebar
|
||||
easing: 'easeOutBack'
|
||||
},
|
||||
hover: {
|
||||
animationDuration: 1000, // duration of animations when hovering an item
|
||||
},
|
||||
responsiveAnimationDuration: 1000, // animation duration after a resize
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: true,
|
||||
ticks: {
|
||||
padding: 4
|
||||
},
|
||||
gridLines: {
|
||||
color: '#f3f3f3',
|
||||
drawTicks: false,
|
||||
},
|
||||
title:'Month',
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
text: 'Month',
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
display: true,
|
||||
gridLines: {
|
||||
color: '#f3f3f3',
|
||||
drawTicks: false,
|
||||
},
|
||||
ticks: {
|
||||
padding: 4
|
||||
},
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Value',
|
||||
}
|
||||
}]
|
||||
},
|
||||
};
|
||||
export const lineChartColors: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'rgb(138,233,204,0.5)',
|
||||
borderColor: 'rgb(138,233,204,1)',
|
||||
pointBackgroundColor: 'rgb(138,233,204,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgb(138,233,204,0.2)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgb(68,186,239,0.8)',
|
||||
borderColor: 'rgb(168,186,239,1)',
|
||||
pointBackgroundColor: 'rgb(168,186,239,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgb(168,186,239,1)'
|
||||
},
|
||||
{
|
||||
backgroundColor: 'rgb(1,57,204,2.5)',
|
||||
borderColor: 'rgb(166,157,204,1)',
|
||||
pointBackgroundColor: 'rgb(166,157,204,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgb(166,157,204,1)'
|
||||
}
|
||||
|
||||
];
|
||||
export const lineChartLegend = true;
|
||||
export const lineChartType = 'line';
|
||||
|
||||
///////////////////// Start AreaChart///////////
|
||||
|
||||
export const areaChartData: Array<any> = [
|
||||
{
|
||||
data: [0, 150, 140, 105, 190, 230, 270], label: 'Series A',
|
||||
backgroundColor: 'rgb(237,238,240,0.4)',
|
||||
borderColor: 'transparent',
|
||||
pointBackgroundColor: '#FFF',
|
||||
pointBorderColor: 'rgb(237,238,240,0.4)',
|
||||
pointHoverBackgroundColor: 'rgb(237,238,240,0.4)',
|
||||
pointRadius: '5',
|
||||
pointHoverBorderColor: '#FFF',
|
||||
pointHoverRadius: '5',
|
||||
pointBorderWidth: '2',
|
||||
fill: true,
|
||||
lineTension: 0.4, },
|
||||
{
|
||||
data: [0, 90, 120, 240, 140, 250, 190], label: 'Series B',
|
||||
backgroundColor: 'rgb(133,158,233,0.9)',
|
||||
borderColor: 'transparent',
|
||||
pointBackgroundColor: '#FFF',
|
||||
pointBorderColor: 'rgb(133,158,233,0.9)',
|
||||
pointHoverBackgroundColor: 'rgb(133,158,233,0.9)',
|
||||
pointRadius: '5',
|
||||
pointHoverBorderColor: '#FFF',
|
||||
pointHoverRadius: '5',
|
||||
pointBorderWidth: '2' ,
|
||||
fill: true,
|
||||
lineTension: 0.4,}
|
||||
];
|
||||
export const areaChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
export const areaChartOptions: any = {
|
||||
animation: {
|
||||
duration: 1000, // general animation time
|
||||
easing: 'easeOutBack'
|
||||
},
|
||||
hover: {
|
||||
animationDuration: 1000, // duration of animations when hovering an item
|
||||
},
|
||||
responsiveAnimationDuration: 1000, // animation duration after a resize
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: true,
|
||||
gridLines: {
|
||||
color: '#f3f3f3',
|
||||
drawTicks: false,
|
||||
},
|
||||
ticks: {
|
||||
padding: 4
|
||||
},
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Month'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
display: true,
|
||||
gridLines: {
|
||||
color: '#f3f3f3',
|
||||
drawTicks: false,
|
||||
},
|
||||
ticks: {
|
||||
padding: 4
|
||||
},
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Value'
|
||||
}
|
||||
}]
|
||||
},
|
||||
};
|
||||
export const areaChartColors: Array<any> = [
|
||||
{
|
||||
backgroundColor: 'rgb(237,238,240,0.4)',
|
||||
borderColor: 'transparent',
|
||||
pointBackgroundColor: '#FFF',
|
||||
pointBorderColor: 'rgb(237,238,240,0.4)',
|
||||
pointHoverBackgroundColor: 'rgb(237,238,240,0.4)',
|
||||
pointRadius: '5',
|
||||
pointHoverBorderColor: '#FFF',
|
||||
pointHoverRadius: '5',
|
||||
pointBorderWidth: '2'
|
||||
},
|
||||
{
|
||||
|
||||
backgroundColor: 'rgb(133,158,233,0.9)',
|
||||
borderColor: 'transparent',
|
||||
pointBackgroundColor: '#FFF',
|
||||
pointBorderColor: 'rgb(133,158,233,0.9)',
|
||||
pointHoverBackgroundColor: 'rgb(133,158,233,0.9)',
|
||||
pointRadius: '5',
|
||||
pointHoverBorderColor: '#FFF',
|
||||
pointHoverRadius: '5',
|
||||
pointBorderWidth: '2'
|
||||
},
|
||||
|
||||
];
|
||||
export const areaChartLegend = true;
|
||||
export const areaChartType = 'line';
|
||||
|
||||
///////////////////// End AreaChart///////////
|
||||
|
||||
///////////////////// End ScatterChart///////////
|
||||
// scatterChart//
|
||||
export const scatterChartData: Array<any> = [
|
||||
{
|
||||
data: [
|
||||
{
|
||||
x: 1,
|
||||
y: -0.01711,
|
||||
}, {
|
||||
x: 1.26,
|
||||
y: -2.708e-2,
|
||||
}, {
|
||||
x: 1.58,
|
||||
y: -4.285e-2,
|
||||
}, {
|
||||
x: 2.0,
|
||||
y: -6.772e-2,
|
||||
}, {
|
||||
x: 2.51,
|
||||
y: -1.068e-1,
|
||||
}, {
|
||||
x: 3.16,
|
||||
y: -1.681e-1,
|
||||
}, {
|
||||
x: 3.98,
|
||||
y: -2.635e-1,
|
||||
}, {
|
||||
x: 5.01,
|
||||
y: -4.106e-1,
|
||||
}, {
|
||||
x: 6.31,
|
||||
y: -6.339e-1,
|
||||
}, {
|
||||
x: 7.94,
|
||||
y: -9.659e-1,
|
||||
}, {
|
||||
x: 10.00,
|
||||
y: -1.445,
|
||||
}, {
|
||||
x: 12.6,
|
||||
y: -2.110,
|
||||
}, {
|
||||
x: 15.8,
|
||||
y: -2.992,
|
||||
}, {
|
||||
x: 20.0,
|
||||
y: -4.102,
|
||||
}, {
|
||||
x: 25.1,
|
||||
y: -5.429,
|
||||
}, {
|
||||
x: 31.6,
|
||||
y: -6.944,
|
||||
}, {
|
||||
x: 39.8,
|
||||
y: -8.607,
|
||||
}, {
|
||||
x: 50.1,
|
||||
y: -1.038e1,
|
||||
}, {
|
||||
x: 63.1,
|
||||
y: -1.223e1,
|
||||
}, {
|
||||
x: 79.4,
|
||||
y: -1.413e1,
|
||||
}, {
|
||||
x: 100.00,
|
||||
y: -1.607e1,
|
||||
}, {
|
||||
x: 126,
|
||||
y: -1.803e1,
|
||||
}, {
|
||||
x: 158,
|
||||
y: -2e1,
|
||||
}, {
|
||||
x: 200,
|
||||
y: -2.199e1,
|
||||
}, {
|
||||
x: 251,
|
||||
y: -2.398e1,
|
||||
}, {
|
||||
x: 316,
|
||||
y: -2.597e1,
|
||||
}, {
|
||||
x: 398,
|
||||
y: -2.797e1,
|
||||
}, {
|
||||
x: 501,
|
||||
y: -2.996e1,
|
||||
}, {
|
||||
x: 631,
|
||||
y: -3.196e1,
|
||||
}, {
|
||||
x: 794,
|
||||
y: -3.396e1,
|
||||
}, {
|
||||
x: 1000,
|
||||
y: -3.596e1,
|
||||
}
|
||||
],
|
||||
label: 'V(node2)',
|
||||
backgroundColor: 'rgba(81,117,224,.6)',
|
||||
borderColor: 'transparent',
|
||||
pointBorderColor: '#5175E0',
|
||||
pointBackgroundColor: '#FFF',
|
||||
pointBorderWidth: 2,
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 4,
|
||||
}
|
||||
|
||||
];
|
||||
export const scatterChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
export const scatterChartOptions: any = {
|
||||
animation: {
|
||||
duration: 1000, // general animation time
|
||||
easing: 'easeOutBack'
|
||||
},
|
||||
hover: {
|
||||
animationDuration: 1000, // duration of animations when hovering an item
|
||||
},
|
||||
responsiveAnimationDuration: 1000, // animation duration after a resize
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
|
||||
scales: {
|
||||
myScale: {
|
||||
type: 'logarithmic',
|
||||
position: 'bottom',
|
||||
gridLines: {
|
||||
zeroLineColor: 'rgba(0,0,0,.1)',
|
||||
color: '#f3f3f3',
|
||||
drawTicks: false,
|
||||
},
|
||||
ticks: {
|
||||
padding: 4
|
||||
},
|
||||
scaleLabel: {
|
||||
labelString: 'Frequency',
|
||||
display: true,
|
||||
}
|
||||
},
|
||||
yAxes: [{
|
||||
type: 'linear',
|
||||
ticks: {
|
||||
padding: 4,
|
||||
userCallback: function (tick) {
|
||||
return tick.toString() + 'dB';
|
||||
}
|
||||
},
|
||||
gridLines: {
|
||||
zeroLineColor: 'rgba(81,117,224,1)',
|
||||
color: '#f3f3f3',
|
||||
drawTicks: false,
|
||||
},
|
||||
scaleLabel: {
|
||||
labelString: 'Voltage',
|
||||
display: true
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
export const scatterChartLegend = true;
|
||||
export const scatterChartType = 'scatter';
|
||||
|
||||
///////////////////// Start scatterChart ///////////////
|
||||
|
||||
///////////////////// Start Barchart ///////////////
|
||||
export const barChartOptions: any = {
|
||||
responsive: true,
|
||||
scaleShowVerticalLines: false,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
categoryPercentage: 0.5
|
||||
}]
|
||||
}
|
||||
};
|
||||
export const barChartLabels: string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
|
||||
export const barChartType = 'bar';
|
||||
export const barChartLegend = true;
|
||||
export const barChartData: any[] = [
|
||||
{
|
||||
data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A',
|
||||
backgroundColor: '#28d094',
|
||||
borderColor: '#28d094',
|
||||
pointBackgroundColor: '#28d094',
|
||||
pointBorderColor: '#28d094',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: '#28d094',
|
||||
barPercentage: 0.9,
|
||||
categoryPercentage: 0.5 },
|
||||
{
|
||||
data: [28, 48, 40, 59, 86, 27, 90], label: 'Series B',
|
||||
backgroundColor: '#f98e76',
|
||||
borderColor: '#f98e76',
|
||||
pointBackgroundColor: '#f98e76',
|
||||
pointBorderColor: '#f98e76',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: '#f98e76',
|
||||
barPercentage: 0.9,
|
||||
categoryPercentage: 0.5 }
|
||||
];
|
||||
export const barChartColors: Array<any> = [
|
||||
{
|
||||
|
||||
},
|
||||
{
|
||||
|
||||
},
|
||||
];
|
||||
|
||||
///////////////////// End barchart////////////////
|
||||
|
||||
///////////////////// Start Doughnut////////////////
|
||||
|
||||
export const doughnutChartLabels: string[] = ['January', 'February', 'March', 'April', 'May'];
|
||||
export const doughnutChartData: any[] = [350, 250, 100, 200, 80];
|
||||
export const doughnutChartType = 'doughnut';
|
||||
export const doughnutChartColors: any[] = ['#00a5a8', '#28d094', '#ff4558', '#ff7d4d', '#626e82'];
|
||||
export const doughnutChartOptions: any = {
|
||||
animation: false,
|
||||
responsive: true,
|
||||
maintainAspectRatio: false
|
||||
};
|
||||
|
||||
///////////////////// End Doughnut////////////////
|
||||
|
||||
///////////////////// Start Radar////////////////
|
||||
|
||||
export const radarChartLabels: string[] = ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'];
|
||||
export const radarChartData: any[] = [
|
||||
{ label: 'Series A',
|
||||
data: [65, 59, 90, 81, 56, 55, 40],
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(245,0,87,.3)',
|
||||
borderColor: 'rgba(229,229,229,0.7)',
|
||||
pointBackgroundColor: 'rgba(245,0,87,.3)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgb(245,0,87)'},
|
||||
|
||||
{ label: 'Series B',
|
||||
data: [28, 48, 40, 19, 96, 27, 100],
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(29,233,182,.6)',
|
||||
borderColor: 'rgba(229,229,229,0.7)',
|
||||
pointBackgroundColor: 'rgb(29, 233,182)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgb(29, 233,182)' }
|
||||
];
|
||||
export const radarChartType = 'radar';
|
||||
|
||||
export const radarChartOptions: any = {
|
||||
animation: false,
|
||||
responsive: true,
|
||||
maintainAspectRatio: false
|
||||
};
|
||||
///////////////////// End Radar////////////////
|
||||
|
||||
|
||||
///////////////////// start PieChart////////////////
|
||||
|
||||
export const pieChartLabels: string[] = ['January', 'February', 'March', 'April', 'May'];
|
||||
export const pieChartData: any[] = [300, 200, 100, 150, 80];
|
||||
export const pieChartType = 'pie';
|
||||
export const pieChartColors: any[] = ['#00a5a8', '#28d094', '#ff4558', '#ff7d4d', '#626e82'];
|
||||
export const pieChartOptions: any = {
|
||||
animation: false,
|
||||
responsive: true,
|
||||
maintainAspectRatio: false
|
||||
};
|
||||
///////////////////// end Pie chart ////////////////
|
||||
|
||||
///////////////////// start polar-chart///////////
|
||||
// PolarArea
|
||||
export const polarAreaChartLabels: string[] = ['January', 'February', 'March', 'April', 'May'];
|
||||
export const polarAreaChartData: any[] = [300, 500, 100, 40, 120];
|
||||
export const polarAreaLegend = true;
|
||||
export const ploarChartColors: any[] = ['#00a5a8', '#28d094', '#ff4558', '#ff7d4d', '#626e82'];
|
||||
export const polarChartBorderColor: any = '#fff';
|
||||
export const polarAreaChartType = 'polarArea';
|
||||
export const polarChartOptions: any = {
|
||||
animation: false,
|
||||
responsive: true,
|
||||
maintainAspectRatio: false
|
||||
};
|
||||
///////////////////// end polar-chart///////////
|
||||
|
||||
// lineChartsData//
|
||||
export const lineChartsData: Array<any> = [
|
||||
|
||||
{
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
label: 'My First dataset',
|
||||
fill: false,
|
||||
borderDash: [5, 5],
|
||||
borderColor: '#9C27B0',
|
||||
pointBorderColor: '#9C27B0',
|
||||
pointBackgroundColor: '#FFF',
|
||||
pointBorderWidth: 2,
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 4,
|
||||
lineTension: 0.4,
|
||||
},
|
||||
{
|
||||
data: [28, 48, 40, 19, 86, 27, 90], label: 'My Second dataset',
|
||||
fill: false,
|
||||
borderDash: [5, 5],
|
||||
borderColor: '#00A5A8',
|
||||
pointBorderColor: '#00A5A8',
|
||||
pointBackgroundColor: '#FFF',
|
||||
pointBorderWidth: 2,
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 4,
|
||||
lineTension: 0.4,
|
||||
},
|
||||
|
||||
{
|
||||
data: [45, 25, 16, 36, 67, 18, 76], label: 'My Third dataset - No bezier',
|
||||
lineTension: 0,
|
||||
fill: false,
|
||||
borderColor: '#FF7D4D',
|
||||
pointBorderColor: '#FF7D4D',
|
||||
pointBackgroundColor: '#FFF',
|
||||
pointBorderWidth: 2,
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 4,
|
||||
}
|
||||
|
||||
];
|
||||
export const lineChartsLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
export const lineChartsOptions: any = {
|
||||
animation: {
|
||||
duration: 1000, // general animation time
|
||||
},
|
||||
hover: {
|
||||
animationDuration: 1000, // duration of animations when hovering an item
|
||||
mode: 'label'
|
||||
},
|
||||
responsiveAnimationDuration: 1000, // animation duration after a resize
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
},
|
||||
scales: {
|
||||
myScale: [{
|
||||
display: true,
|
||||
gridLines: {
|
||||
color: 'f3f3f3',
|
||||
drawTicks: false,
|
||||
},
|
||||
ticks: {
|
||||
padding: 4
|
||||
},
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Month'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
display: true,
|
||||
gridLines: {
|
||||
color: '#f3f3f3',
|
||||
drawTicks: false,
|
||||
},
|
||||
ticks: {
|
||||
padding: 4
|
||||
},
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Value'
|
||||
}
|
||||
}]
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Line Chart - Legend'
|
||||
}
|
||||
};
|
||||
export const lineChartsColors: Array<any> = [
|
||||
{
|
||||
fill: false,
|
||||
borderDash: [5, 5],
|
||||
borderColor: '#9C27B0',
|
||||
pointBorderColor: '#9C27B0',
|
||||
pointBackgroundColor: '#FFF',
|
||||
pointBorderWidth: 2,
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 4,
|
||||
},
|
||||
{
|
||||
|
||||
fill: false,
|
||||
borderDash: [5, 5],
|
||||
borderColor: '#00A5A8',
|
||||
pointBorderColor: '#00A5A8',
|
||||
pointBackgroundColor: '#FFF',
|
||||
pointBorderWidth: 2,
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 4,
|
||||
},
|
||||
{
|
||||
lineTension: 0,
|
||||
fill: false,
|
||||
borderColor: '#FF7D4D',
|
||||
pointBorderColor: '#FF7D4D',
|
||||
pointBackgroundColor: '#FFF',
|
||||
pointBorderWidth: 2,
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 4,
|
||||
},
|
||||
];
|
||||
export const lineChartsLegend = true;
|
||||
export const lineChartsType = 'line';
|
||||
|
||||
// lineChartsData//
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
|
||||
|
||||
:host ::ng-deep .barchart {
|
||||
-webkit-animation: chartjs-render-animation 0.001s;
|
||||
animation: chartjs-render-animation 0.001s;
|
||||
|
||||
}
|
||||
:host ::ng-deep .lineCharts {
|
||||
-webkit-animation: chartjs-render-animation 0.001s;
|
||||
animation: chartjs-render-animation 0.001s;
|
||||
|
||||
}
|
||||
|
||||
:host ::ng-deep .radarChart {
|
||||
height: 470px !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .doughnutChart {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .pieChart {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
@media(max-width:767px) {
|
||||
:host ::ng-deep .chart
|
||||
{
|
||||
height:400px !important;
|
||||
}
|
||||
}
|
||||
200
src/app/content/charts-maps/chartjs/charts/charts.component.html
Normal file
200
src/app/content/charts-maps/chartjs/charts/charts.component.html
Normal file
@@ -0,0 +1,200 @@
|
||||
<!----- start barchart------->
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<!-- Bar Chart -->
|
||||
<section id="chartjs-bar-charts">
|
||||
<div class="row">
|
||||
<div class="col-12" *blockUI="'barCharts'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadBarCharts($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Bar charts
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="z">
|
||||
<canvas class="barchart" height="400" baseChart [datasets]="barChartData" [labels]="barChartLabels"
|
||||
[options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType"></canvas>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- End Bar charts-->
|
||||
<!-- line Chart -->
|
||||
<section id="chartjs-line-charts">
|
||||
<div class="row">
|
||||
<div class="col-12" *blockUI="'lineCharts'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadLineCharts($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Line Charts
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="card-block">
|
||||
<div class="height-400">
|
||||
<canvas height="400" baseChart class="chart" [datasets]="lineChartsData" [labels]="lineChartsLabels"
|
||||
[options]="lineChartsOptions" [colors]="lineChartsColors" [legend]="lineChartsLegend"
|
||||
[type]="lineChartsType"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- End line chart-->
|
||||
<!-- Area Line chart-->
|
||||
<section id="chartjs-arealine-charts">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<m-card>
|
||||
<ng-container mCardHeaderTitle>
|
||||
Area Line charts
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="card-block">
|
||||
<div class="height-400">
|
||||
<canvas height="400" baseChart class="chart" [datasets]="areaChartData" [labels]="areaChartLabels"
|
||||
[options]="areaChartOptions" [legend]="areaChartLegend"
|
||||
[type]="areaChartType">
|
||||
</canvas>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- End Area Line chart------->
|
||||
<!-- Line Stacked Area Chart -->
|
||||
<section id="chartjs-line-stacked-charts">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<m-card>
|
||||
<ng-container mCardHeaderTitle>
|
||||
Line Stacked Area Chart
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<!-- <div class="lineStackedArea"> -->
|
||||
<div class="card-block">
|
||||
<div class="height-400">
|
||||
<canvas height="400" baseChart class="chart" [datasets]="lineChartData" [labels]="lineChartLabels"
|
||||
[options]="lineChartOptions" [legend]="lineChartLegend" [type]="lineChartType">
|
||||
</canvas>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- End Line Stacked Area Chart -->
|
||||
<!-- Scatter Logx Chart -->
|
||||
<section id="chartjs-scatter-charts">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<m-card>
|
||||
<ng-container mCardHeaderTitle>
|
||||
Scatter Logx Chart
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="card-block">
|
||||
<div class="height-400">
|
||||
<canvas height="400" id="scatter-chart" baseChart class="chart" [datasets]="scatterChartData"
|
||||
[labels]="scatterChartLabels" [options]="scatterChartOptions" [legend]="scatterChartLegend"
|
||||
[type]="scatterChartType"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- End Scatter Logx Chart -->
|
||||
<!-- Pie Chart -->
|
||||
<section id="chartjs-pie-charts">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<h3>Pie Chart</h3>
|
||||
<div class="pieChart height-400">
|
||||
<canvas baseChart width="400" style="display: unset;" [type]="'pie'" [datasets]="pieChartData"
|
||||
[labels]="pieChartLabels" [options]="pieChartOptions" [plugins]="pieChartPlugins"
|
||||
[legend]="pieChartLegend">
|
||||
</canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- End Pie Chart -->
|
||||
<!-- Doughnut Chart -->
|
||||
<section id="chartjs-doughnut-charts">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<h3>Doughnut Chart</h3>
|
||||
<div class="doughnutChart height-400">
|
||||
<canvas baseChart width="400" style="display: unset;" [datasets]="doughnutChartData"
|
||||
[options]="doughnutChartOptions" [labels]="doughnutChartLabels" [type]="'doughnut'"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- End Doughnut Chart -->
|
||||
<!-- Polar Chart -->
|
||||
<section id="chartjs-polar-charts">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<h3>Polar Chart</h3>
|
||||
<div class="polarchart height-400">
|
||||
<canvas baseChart [datasets]="polarAreaChartData" [labels]="polarAreaChartLabels"
|
||||
[legend]="polarAreaLegend" [options]="polarChartOptions" [type]="polarAreaChartType"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- End Polar Chart -->
|
||||
<!-- Radar Chart -->
|
||||
<section id="chartjs-radar-charts">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card radarChart">
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<div class="height-400">
|
||||
<h3>Radar Chart</h3>
|
||||
<canvas baseChart [datasets]="radarChartData" [options]="radarChartOptions"
|
||||
[labels]="radarChartLabels" [type]="radarChartType"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- End Radar Chart -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { ChartsComponent } from './charts.component';
|
||||
|
||||
describe('ChartsComponent', () => {
|
||||
let component: ChartsComponent;
|
||||
let fixture: ComponentFixture<ChartsComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ChartsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ChartsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
165
src/app/content/charts-maps/chartjs/charts/charts.component.ts
Normal file
165
src/app/content/charts-maps/chartjs/charts/charts.component.ts
Normal file
@@ -0,0 +1,165 @@
|
||||
import { Component, OnInit } from "@angular/core";
|
||||
import { NgBlockUI, BlockUI } from "ng-block-ui";
|
||||
import { ChartConfiguration, ChartOptions } from 'chart.js';
|
||||
|
||||
import * as chartsData from "./chartjs";
|
||||
import { title } from "process";
|
||||
|
||||
@Component({
|
||||
selector: "app-charts",
|
||||
templateUrl: "./charts.component.html",
|
||||
styleUrls: ["./charts.component.css"],
|
||||
})
|
||||
export class ChartsComponent implements OnInit {
|
||||
@BlockUI("barCharts") blockUIBarCharts: NgBlockUI;
|
||||
@BlockUI("lineCharts") blockUILineCharts: NgBlockUI;
|
||||
|
||||
public breadcrumb: any;
|
||||
showNew: false;
|
||||
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true,
|
||||
};
|
||||
|
||||
/**
|
||||
* barChart
|
||||
*/
|
||||
public barChartOptions = chartsData.barChartOptions;
|
||||
public barChartLabels = chartsData.barChartLabels;
|
||||
public barChartType = chartsData.barChartType;
|
||||
public barChartLegend = chartsData.barChartLegend;
|
||||
public barChartData = chartsData.barChartData;
|
||||
public barChartColors = chartsData.barChartColors;
|
||||
|
||||
/**
|
||||
* lineChart
|
||||
*/
|
||||
public lineChartData = chartsData.lineChartData;
|
||||
public lineChartLabels = chartsData.lineChartLabels;
|
||||
public lineChartOptions = chartsData.lineChartOptions;
|
||||
public lineChartColors = chartsData.lineChartColors;
|
||||
public lineChartLegend = chartsData.lineChartLegend;
|
||||
public lineChartType = chartsData.lineChartType;
|
||||
|
||||
/**
|
||||
* areaChart
|
||||
*/
|
||||
public areaChartData = chartsData.areaChartData;
|
||||
public areaChartLabels = chartsData.areaChartLabels;
|
||||
public areaChartOptions = chartsData.areaChartOptions;
|
||||
public areaChartColors = chartsData.areaChartColors;
|
||||
public areaChartLegend = chartsData.areaChartLegend;
|
||||
public areaChartType = chartsData.areaChartType;
|
||||
|
||||
/**
|
||||
* scatterChartData
|
||||
*/
|
||||
public scatterChartData = chartsData.scatterChartData;
|
||||
public scatterChartLabels = chartsData.scatterChartLabels;
|
||||
public scatterChartOptions = chartsData.scatterChartOptions;
|
||||
// public scatterChartColors = chartsData.scatterChartColors;
|
||||
public scatterChartLegend = chartsData.scatterChartLegend;
|
||||
public scatterChartType = chartsData.scatterChartType;
|
||||
/**
|
||||
* Doughnut
|
||||
*/
|
||||
|
||||
|
||||
public doughnutChartLabels: string[] = chartsData.doughnutChartLabels;;
|
||||
public doughnutChartData: ChartConfiguration<'doughnut'>['data']['datasets'] = [
|
||||
{
|
||||
data: chartsData.doughnutChartData,
|
||||
backgroundColor: chartsData.doughnutChartColors,
|
||||
},
|
||||
];
|
||||
public doughnutChartOptions = chartsData.doughnutChartOptions;
|
||||
/**
|
||||
* Radar
|
||||
*/
|
||||
public radarChartLabels = chartsData.radarChartLabels;
|
||||
public radarChartData = chartsData.radarChartData;
|
||||
public radarChartType = chartsData.radarChartType;
|
||||
public radarChartOptions = chartsData.radarChartOptions;
|
||||
|
||||
/**
|
||||
* Pie
|
||||
*/
|
||||
public pieChartOptions: ChartOptions<'pie'> = {
|
||||
responsive: true,
|
||||
};
|
||||
public pieChartLabels = chartsData.pieChartLabels;
|
||||
public pieChartData = [{
|
||||
data: chartsData.pieChartData,
|
||||
backgroundColor: chartsData.pieChartColors,
|
||||
}];
|
||||
public pieChartLegend = true;
|
||||
public pieChartPlugins = [];
|
||||
public pieChartType = chartsData.pieChartType;
|
||||
|
||||
/**
|
||||
* PolarArea
|
||||
*/
|
||||
public polarAreaChartLabels = chartsData.polarAreaChartLabels;
|
||||
public polarAreaChartData: ChartConfiguration<'polarArea'>['data']['datasets'] = [
|
||||
{
|
||||
data: chartsData.polarAreaChartData,
|
||||
backgroundColor: chartsData.ploarChartColors,
|
||||
borderColor: chartsData.polarChartBorderColor,
|
||||
}
|
||||
];
|
||||
public polarAreaLegend = chartsData.polarAreaLegend;
|
||||
public polarAreaChartType = chartsData.polarAreaChartType;
|
||||
public polarChartOptions = chartsData.polarChartOptions;
|
||||
|
||||
/**
|
||||
* lineChart
|
||||
*/
|
||||
public lineChartsData = chartsData.lineChartsData;
|
||||
public lineChartsLabels = chartsData.lineChartsLabels;
|
||||
public lineChartsOptions = chartsData.lineChartsOptions;
|
||||
public lineChartsColors = chartsData.lineChartsColors;
|
||||
public lineChartsLegend = chartsData.lineChartsLegend;
|
||||
public lineChartsType = chartsData.lineChartsType;
|
||||
|
||||
/**
|
||||
* OnInit
|
||||
*/
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
mainlabel: "Chartjs Charts",
|
||||
links: [
|
||||
{
|
||||
name: "Home",
|
||||
isLink: true,
|
||||
link: "/dashboard/sales",
|
||||
},
|
||||
{
|
||||
name: "Chartjs",
|
||||
isLink: true,
|
||||
link: "#",
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
/**
|
||||
* Reload card
|
||||
*/
|
||||
reloadBarCharts() {
|
||||
this.blockUIBarCharts.start("Loading..");
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIBarCharts.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadLineCharts() {
|
||||
this.blockUILineCharts.start("Loading..");
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUILineCharts.stop();
|
||||
}, 2500);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,173 @@
|
||||
:host ::ng-deep .lineArea2 .ct-point-circle {
|
||||
stroke-width: 2px;
|
||||
fill: #fff;
|
||||
stroke: #ff8d60;
|
||||
}
|
||||
|
||||
:host ::ng-deep .dragdrop-container {
|
||||
min-height: 200px !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ct-series-b .ct-line {
|
||||
stroke: #ff8d60;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ct-series-a .ct-line {
|
||||
stroke: #84cfd1;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ct-series-c .ct-line {
|
||||
stroke: #ff586b;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ct-series-a .ct-area {
|
||||
fill: #0eb8de;
|
||||
}
|
||||
:host ::ng-deep .ct-series-a .ct-point {
|
||||
stroke: #84cfd1;
|
||||
}
|
||||
:host ::ng-deep .lineArea2 .ct-series-a .ct-point-circle {
|
||||
stroke: #84cfd1;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .lineChart1 .ct-series-a .ct-point {
|
||||
stroke-width: 0px;
|
||||
|
||||
stroke: #84cfd1;
|
||||
}
|
||||
|
||||
:host ::ng-deep .lineChart1 .ct-series-b .ct-point {
|
||||
stroke-width: 0px;
|
||||
|
||||
stroke: #ff8d60;
|
||||
}
|
||||
|
||||
:host ::ng-deep .lineChart1 .ct-series-c .ct-point {
|
||||
stroke-width: 0px;
|
||||
|
||||
stroke: #ff586b;
|
||||
}
|
||||
|
||||
:host ::ng-deep .lineChart3 .ct-series-a .ct-point {
|
||||
stroke-width: 10px;
|
||||
|
||||
stroke: #84cfd1;
|
||||
}
|
||||
|
||||
:host ::ng-deep .lineChart3 .ct-series-b .ct-point {
|
||||
stroke-width: 10px;
|
||||
|
||||
stroke: #ff8d60;
|
||||
}
|
||||
|
||||
:host ::ng-deep .lineChart3 .ct-series-c .ct-point {
|
||||
stroke-width: 10px;
|
||||
|
||||
stroke: #ff586b;
|
||||
}
|
||||
|
||||
:host ::ng-deep .lineArea3 .ct-series-b .ct-point-circle {
|
||||
stroke-width: 2px;
|
||||
fill: #fff;
|
||||
stroke: #ff8d60;
|
||||
}
|
||||
|
||||
:host ::ng-deep .lineArea3 .ct-series-a .ct-point-circle {
|
||||
stroke-width: 2px;
|
||||
fill: #fff;
|
||||
stroke: #84cfd1;
|
||||
}
|
||||
:host ::ng-deep .lineChart2 .ct-series-a .ct-point-circle {
|
||||
stroke: #84cfd1;
|
||||
stroke-width: 2px;
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
:host ::ng-deep .lineChart2 .ct-series-b .ct-point-circle {
|
||||
stroke: #ff8d60;
|
||||
stroke-width: 2px;
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
:host ::ng-deep .bar-chart .ct-series-b .ct-bar {
|
||||
|
||||
stroke: #ff8d60;
|
||||
}
|
||||
|
||||
:host ::ng-deep .bar-chart .ct-series-a .ct-bar {
|
||||
|
||||
stroke: #009da0;
|
||||
}
|
||||
|
||||
:host ::ng-deep .distributed-bar-chart .ct-series-a .ct-bar {
|
||||
stroke: #009da0;
|
||||
}
|
||||
|
||||
:host ::ng-deep .distributed-bar-chart .ct-series-b .ct-bar {
|
||||
stroke: #ff8d60;
|
||||
}
|
||||
|
||||
:host ::ng-deep .distributed-bar-chart .ct-series-c .ct-bar {
|
||||
stroke: #ff586b;
|
||||
}
|
||||
|
||||
:host ::ng-deep .distributed-bar-chart .ct-series-d .ct-bar {
|
||||
stroke: #1cbcd8
|
||||
}
|
||||
|
||||
:host ::ng-deep .distributed-bar-chart .ct-series-e .ct-bar {
|
||||
stroke: #0cc27e;
|
||||
}
|
||||
|
||||
:host ::ng-deep .distributed-bar-chart .ct-series-f .ct-bar {
|
||||
stroke: #9c27b0;
|
||||
}
|
||||
|
||||
:host ::ng-deep .distributed-bar-chart .ct-series-f .ct-bar {
|
||||
stroke: #ffc107;
|
||||
;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ct-series-a .ct-slice-donut {
|
||||
stroke: #009da0;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ct-series-b .ct-slice-donut {
|
||||
stroke: #ff8d60;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ct-series-c .ct-slice-donut {
|
||||
stroke: #ff586b;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ct-series-d .ct-slice-donut {
|
||||
stroke: #1cbcd8;
|
||||
}
|
||||
|
||||
:host ::ng-deep .Bi-polar .ct-series-a .ct-area {
|
||||
fill: #84cfd1;
|
||||
fill-opacity: 0.6;
|
||||
}
|
||||
|
||||
:host ::ng-deep .Bi-polar .ct-series-b .ct-area {
|
||||
fill: #ff586b;
|
||||
fill-opacity: 0.6;
|
||||
}
|
||||
|
||||
:host ::ng-deep .Bi-polar .ct-series-c .ct-area {
|
||||
fill: #f0c5de;
|
||||
fill-opacity: 0.6;
|
||||
}
|
||||
|
||||
:host ::ng-deep .svg {
|
||||
overflow: hidden;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
@@ -0,0 +1,292 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<!-- chartist line charts section start -->
|
||||
<!--Line with Area Chart 1 Starts-->
|
||||
<div class="row text-left">
|
||||
<div class="col-sm-12" *blockUI="'lineWithAreaChartOne'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadLineWithAreaChartOne($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Line with Area Chart(Filled Holes in data)
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div id="line-area1" class="height-300 lineArea1">
|
||||
<x-chartist *ngIf="lineArea1" [data]="lineArea1.data" [type]="lineArea1.type" [options]="lineArea1.options"
|
||||
[responsiveOptions]="lineArea1.responsiveOptions" [events]="lineArea1.events">
|
||||
</x-chartist>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
<!--Line with Area Chart 1 Ends-->
|
||||
<!--Line with Area Chart 2 Starts-->
|
||||
<div class="row text-left">
|
||||
<div class="col-sm-12" *blockUI="'lineWithAreaChartTwo'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadLineWithAreaChartTwo($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Line with Area Chart(Holes in Data)
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div id="line-area2" class="height-300 lineArea2">
|
||||
<x-chartist *ngIf="lineArea2" [data]="lineArea2.data" [type]="lineArea2.type" [options]="lineArea2.options"
|
||||
[responsiveOptions]="lineArea2.responsiveOptions" [events]="lineArea2.events">
|
||||
</x-chartist>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
<!--Line with Area Chart 2 Ends-->
|
||||
<!--Line with Area Chart 3 Starts-->
|
||||
<div class="row text-left">
|
||||
<div class="col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Line with Area Chart(Holes in Data)</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-block">
|
||||
<div id="line-area3" class="height-300 lineArea3">
|
||||
<x-chartist *ngIf="lineArea3" [data]="lineArea3.data" [type]="lineArea3.type" [options]="lineArea3.options"
|
||||
[responsiveOptions]="lineArea3.responsiveOptions" [events]="lineArea3.events">
|
||||
</x-chartist>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Line with Area Chart 3 Ends-->
|
||||
<!--Line with Area Chart 4 Starts-->
|
||||
<div class="row text-left">
|
||||
<div class="col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Simple Line with Area Chart</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-block">
|
||||
<div id="line-area4" class="height-300">
|
||||
<x-chartist *ngIf="lineArea4" [data]="lineArea4.data" [type]="lineArea4.type" [options]="lineArea4.options"
|
||||
[responsiveOptions]="lineArea4.responsiveOptions" [events]="lineArea4.events">
|
||||
</x-chartist>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Line with Area Chart 4 Ends-->
|
||||
<!--Line Chart 1 Starts-->
|
||||
<div class="row text-left">
|
||||
<div class="col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Simple Line Chart </h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-block lineChart1">
|
||||
<div id="line-chart1" class="height-300 lineChart1 lineChart1Shadow">
|
||||
<x-chartist *ngIf="lineChart1" [data]="lineChart1.data" [type]="lineChart1.type" [options]="lineChart1.options"
|
||||
[responsiveOptions]="lineChart1.responsiveOptions" [events]="lineChart1.events">
|
||||
</x-chartist>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Line Chart 1 Ends-->
|
||||
<!--Line Chart 2 Starts-->
|
||||
<div class="row text-left">
|
||||
<div class="col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Line Chart(Holes in data)</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-block">
|
||||
<div id="line-chart2" class="height-300 lineChart2">
|
||||
<x-chartist *ngIf="lineChart2" [data]="lineChart2.data" [type]="lineChart2.type" [options]="lineChart2.options"
|
||||
[responsiveOptions]="lineChart2.responsiveOptions" [events]="lineChart2.events">
|
||||
</x-chartist>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Line Chart 2 Ends-->
|
||||
<!--Line Chart 3 Starts-->
|
||||
<div class="row text-left">
|
||||
<div class="col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Line Chart(Filled Holes in data)</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-block lineChart3">
|
||||
<div id="line-chart3" class="height-300">
|
||||
<x-chartist *ngIf="lineChart3" [data]="lineChart3.data" [type]="lineChart3.type" [options]="lineChart3.options"
|
||||
[responsiveOptions]="lineChart3.responsiveOptions" [events]="lineChart3.events">
|
||||
</x-chartist>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Line Chart 3 Ends-->
|
||||
<!--Scatter Line Chart Starts-->
|
||||
<div class="row text-left">
|
||||
<div class="col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Scatter Line Chart</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-block">
|
||||
<div id="scatter -line-chart" class="height-300">
|
||||
<x-chartist *ngIf="scatterlineChart" [data]="scatterlineChart.data" [type]="scatterlineChart.type"
|
||||
[options]="scatterlineChart.options" [responsiveOptions]="scatterlineChart.responsiveOptions"
|
||||
[events]="scatterlineChart.events">
|
||||
</x-chartist>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Scatter Line Chart Ends-->
|
||||
<!--Scatter Chart Starts-->
|
||||
<div class="row text-left">
|
||||
<div class="col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Scatter Chart</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-block">
|
||||
<div id="scatter-chart2" class="height-300">
|
||||
<x-chartist *ngIf="scatterChart" [data]="scatterChart.data" [type]="scatterChart.type" [options]="scatterChart.options"
|
||||
[responsiveOptions]="scatterChart.responsiveOptions" [events]="scatterChart.events">
|
||||
</x-chartist>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Scatter Chart Ends-->
|
||||
<!--Bi-polar Line Chart Starts-->
|
||||
<div class="row text-left">
|
||||
<div class="col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Bi-polar Line Chart</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-block">
|
||||
<div id="bi-polar-chart" class="height-300 Bi-polar">
|
||||
<x-chartist *ngIf="biPolarLineChart" [data]="biPolarLineChart.data" [type]="biPolarLineChart.type"
|
||||
[options]="biPolarLineChart.options" [responsiveOptions]="biPolarLineChart.responsiveOptions"
|
||||
[events]="biPolarLineChart.events">
|
||||
</x-chartist>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Bi-polar Line Chart Ends-->
|
||||
<!--Bar Chart Starts-->
|
||||
<div class="row text-left">
|
||||
<div class="col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Bar Chart</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-block">
|
||||
<div id="bar-chart" class="height-300 bar-chart">
|
||||
<x-chartist *ngIf="barChart" [data]="barChart.data" [type]="barChart.type" [options]="barChart.options"
|
||||
[responsiveOptions]="barChart.responsiveOptions" [events]="barChart.events">
|
||||
</x-chartist>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Bar Chart Ends-->
|
||||
<!--Distributed Series Bar Chart Starts-->
|
||||
<div class="row text-left">
|
||||
<div class="col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Distributed Series Bar Chart</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-block">
|
||||
<div id="distributed-bar-chart" class="height-300 distributed-bar-chart">
|
||||
<x-chartist *ngIf="distributedSeriesBarChart" [data]="distributedSeriesBarChart.data" [type]="distributedSeriesBarChart.type"
|
||||
[options]="distributedSeriesBarChart.options"
|
||||
[responsiveOptions]="distributedSeriesBarChart.responsiveOptions"
|
||||
[events]="distributedSeriesBarChart.events">
|
||||
</x-chartist>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Distributed Series Bar Chart Ends-->
|
||||
<!--Donut Chart 1 Starts-->
|
||||
<div class="row text-left">
|
||||
<div class="col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Donut Chart</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-block">
|
||||
<div id="donut-chart1" class="height-300">
|
||||
<x-chartist *ngIf="donutChart1" [data]="donutChart1.data" [type]="donutChart1.type" [options]="donutChart1.options"
|
||||
[responsiveOptions]="donutChart1.responsiveOptions" [events]="donutChart1.events">
|
||||
</x-chartist>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Donut Chart 1 Ends-->
|
||||
<!--Donut Chart 2 Starts-->
|
||||
<div class="row text-left">
|
||||
<div class="col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Donut Chart</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-block">
|
||||
<div id="donut-chart2" class="height-400">
|
||||
<x-chartist *ngIf="donutChart2" [data]="donutChart2.data" [type]="donutChart2.type" [options]="donutChart2.options"
|
||||
[responsiveOptions]="donutChart2.responsiveOptions" [events]="donutChart2.events">
|
||||
</x-chartist>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Donut Chart 2 Ends-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { LinechartsComponent } from './linecharts.component';
|
||||
|
||||
describe('LinechartsComponent', () => {
|
||||
let component: LinechartsComponent;
|
||||
let fixture: ComponentFixture<LinechartsComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ LinechartsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(LinechartsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,575 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import * as Chartist from 'chartist';
|
||||
import { ChartEvent, ChartType } from 'ng-chartist';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
import { ChartApiService } from '../../../../_services/chart.api';
|
||||
/**
|
||||
* Interface
|
||||
*/
|
||||
export interface Chart {
|
||||
type: ChartType;
|
||||
data: Chartist.IChartistData;
|
||||
options?: any;
|
||||
responsiveOptions?: any;
|
||||
events?: ChartEvent;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-linecharts',
|
||||
templateUrl: './linecharts.component.html',
|
||||
styleUrls: ['./linecharts.component.css']
|
||||
})
|
||||
export class LinechartsComponent implements OnInit {
|
||||
|
||||
@BlockUI('lineWithAreaChartOne') blockUILineWithAreaChartOne: NgBlockUI;
|
||||
@BlockUI('lineWithAreaChartTwo') blockUILineWithAreaChartTwo: NgBlockUI;
|
||||
public breadcrumb: any;
|
||||
data: any;
|
||||
loadDataURL: string;
|
||||
lineArea1: any;
|
||||
lineArea2: any;
|
||||
lineArea3: any;
|
||||
lineArea4: any;
|
||||
donutChart1: any;
|
||||
donutChart2: any;
|
||||
scatterChart: any;
|
||||
scatterlineChart: any;
|
||||
lineChart1: any;
|
||||
lineChart2: any;
|
||||
lineChart3: any;
|
||||
biPolarLineChart: any;
|
||||
barChart: any;
|
||||
distributedSeriesBarChart: any;
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
constructor(private chartApiservice: ChartApiService) {
|
||||
}
|
||||
/**
|
||||
* Get chart data
|
||||
*/
|
||||
getlineArea() {
|
||||
const Chartdata = this.data;
|
||||
// Line with Area Chart 1 Starts
|
||||
this.lineArea1 = {
|
||||
type: 'Line',
|
||||
data: Chartdata['lineArea1'],
|
||||
options: {
|
||||
height: '300px',
|
||||
low: 0,
|
||||
showArea: true,
|
||||
fullWidth: true,
|
||||
onlyInteger: true,
|
||||
axisY: {
|
||||
low: 0,
|
||||
scaleMinSpace: 50,
|
||||
},
|
||||
axisX: {
|
||||
showGrid: false
|
||||
},
|
||||
},
|
||||
responsiveOptions: [
|
||||
['screen and (max-width: 640px) and (min-width: 381px)', {
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value, index) {
|
||||
return index % 2 === 0 ? value : null;
|
||||
}
|
||||
}
|
||||
}],
|
||||
['screen and (max-width: 380px)', {
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value, index) {
|
||||
return index % 3 === 0 ? value : null;
|
||||
}
|
||||
}
|
||||
}]
|
||||
],
|
||||
events: {
|
||||
created(data: any): void {
|
||||
const defs = data.svg.elem('defs');
|
||||
defs.elem('linearGradient', {
|
||||
id: 'gradient',
|
||||
x1: 0,
|
||||
y1: 1,
|
||||
x2: 0,
|
||||
y2: 0
|
||||
}).elem('stop', {
|
||||
offset: 0,
|
||||
'stop-color': 'rgba(255, 255, 255, 1)'
|
||||
}).parent().elem('stop', {
|
||||
offset: 1,
|
||||
'stop-color': 'rgba(38, 198, 218, 1)'
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
};
|
||||
// Line with Area Chart 1 Ends
|
||||
|
||||
// Line with Area Chart 2 Starts
|
||||
this.lineArea2 = {
|
||||
type: 'Line',
|
||||
data: Chartdata['lineArea2'],
|
||||
options: {
|
||||
height: '300px',
|
||||
showArea: true,
|
||||
fullWidth: true,
|
||||
lineSmooth: Chartist.Interpolation.none(),
|
||||
axisX: {
|
||||
showGrid: false,
|
||||
},
|
||||
axisY: {
|
||||
low: 0,
|
||||
scaleMinSpace: 50,
|
||||
},
|
||||
chartPadding: { top: 0, right: 25, bottom: 0, left: 0 },
|
||||
},
|
||||
responsiveOptions: [
|
||||
['screen and (max-width: 640px) and (min-width: 381px)', {
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value, index) {
|
||||
return index % 2 === 0 ? value : null;
|
||||
}
|
||||
}
|
||||
}],
|
||||
['screen and (max-width: 380px)', {
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value, index) {
|
||||
return index % 3 === 0 ? value : null;
|
||||
}
|
||||
}
|
||||
}]
|
||||
],
|
||||
events: {
|
||||
created(data: any): void {
|
||||
const defs = data.svg.elem('defs');
|
||||
defs.elem('linearGradient', {
|
||||
id: 'gradient1',
|
||||
x1: 0,
|
||||
y1: 1,
|
||||
x2: 0,
|
||||
y2: 0
|
||||
}).elem('stop', {
|
||||
offset: 0.2,
|
||||
'stop-color': 'rgba(255, 255, 255, 1)'
|
||||
}).parent().elem('stop', {
|
||||
offset: 1,
|
||||
'stop-color': 'rgba(38, 198, 218, 1)'
|
||||
});
|
||||
|
||||
defs.elem('linearGradient', {
|
||||
id: 'gradient2',
|
||||
x1: 0,
|
||||
y1: 1,
|
||||
x2: 0,
|
||||
y2: 0
|
||||
}).elem('stop', {
|
||||
offset: 0.5,
|
||||
'stop-color': 'rgba(255, 255, 255, 1)'
|
||||
}).parent().elem('stop', {
|
||||
offset: 1,
|
||||
'stop-color': 'rgba(255,141,96, 1)'
|
||||
});
|
||||
},
|
||||
draw(data: any): void {
|
||||
|
||||
const circleRadius = 6;
|
||||
if (data.type === 'point') {
|
||||
const circle = new Chartist.Svg('circle', {
|
||||
cx: data.x,
|
||||
cy: data.y,
|
||||
r: circleRadius,
|
||||
class: 'ct-point-circle'
|
||||
});
|
||||
data.element.replace(circle);
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
// Line with Area Chart 2 Ends
|
||||
|
||||
// Line with Area Chart 3 Starts
|
||||
this.lineArea3 = {
|
||||
type: 'Line',
|
||||
data: Chartdata['lineArea3'],
|
||||
options: {
|
||||
height: '300px',
|
||||
low: 0,
|
||||
showArea: true,
|
||||
fullWidth: true,
|
||||
onlyInteger: true,
|
||||
axisY: {
|
||||
low: 0,
|
||||
scaleMinSpace: 50,
|
||||
}
|
||||
},
|
||||
responsiveOptions: [
|
||||
['screen and (max-width: 640px) and (min-width: 381px)', {
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value, index) {
|
||||
return index % 2 === 0 ? value : null;
|
||||
}
|
||||
}
|
||||
}],
|
||||
['screen and (max-width: 380px)', {
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value, index) {
|
||||
return index % 3 === 0 ? value : null;
|
||||
}
|
||||
}
|
||||
}]
|
||||
],
|
||||
events: {
|
||||
created(data: any): void {
|
||||
const defs = data.svg.elem('defs');
|
||||
defs.elem('linearGradient', {
|
||||
id: 'gradient',
|
||||
x1: 0,
|
||||
y1: 1,
|
||||
x2: 0,
|
||||
y2: 0
|
||||
}).elem('stop', {
|
||||
offset: 0,
|
||||
'stop-color': 'rgba(255, 255, 255, 1)'
|
||||
}).parent().elem('stop', {
|
||||
offset: 1,
|
||||
'stop-color': 'rgba(38, 198, 218, 1)'
|
||||
});
|
||||
},
|
||||
|
||||
draw(data: any): void {
|
||||
const circleRadius = 6;
|
||||
if (data.type === 'point') {
|
||||
const circle = new Chartist.Svg('circle', {
|
||||
cx: data.x,
|
||||
cy: data.y,
|
||||
r: circleRadius,
|
||||
class: 'ct-point-circle'
|
||||
});
|
||||
data.element.replace(circle);
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
// Line with Area Chart 3 Ends
|
||||
|
||||
// Line with Area Chart 4 Starts
|
||||
this.lineArea4 = {
|
||||
type: 'Line',
|
||||
data: Chartdata['lineArea4'],
|
||||
options: {
|
||||
fullwidth: true,
|
||||
height: '300px',
|
||||
low: 0,
|
||||
showArea: true,
|
||||
fullWidth: true,
|
||||
},
|
||||
};
|
||||
// Line with Area Chart 4 Ends
|
||||
|
||||
// Line Chart 1 Starts
|
||||
this.lineChart1 = {
|
||||
type: 'Line',
|
||||
data: Chartdata['line1'],
|
||||
options: {
|
||||
fullwidth: true,
|
||||
height: '300px',
|
||||
axisX: {
|
||||
showGrid: false,
|
||||
},
|
||||
axisY: {
|
||||
low: 0,
|
||||
scaleMinSpace: 50,
|
||||
},
|
||||
fullWidth: true,
|
||||
chartPadding: { top: 0, right: 25, bottom: 0, left: 0 }
|
||||
},
|
||||
};
|
||||
// Line Chart 1 Ends
|
||||
|
||||
// Line Chart 2 Starts
|
||||
this.lineChart2 = {
|
||||
type: 'Line',
|
||||
data: Chartdata['line2'],
|
||||
options: {
|
||||
fullwidth: true,
|
||||
height: '300px',
|
||||
axisX: {
|
||||
showGrid: false,
|
||||
},
|
||||
axisY: {
|
||||
low: 0,
|
||||
scaleMinSpace: 50,
|
||||
},
|
||||
fullWidth: true,
|
||||
chartPadding: { top: 0, right: 25, bottom: 0, left: 0 },
|
||||
},
|
||||
responsiveOptions: [
|
||||
[{
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value, index) {
|
||||
return index % 2 === 0 ? value : null;
|
||||
}
|
||||
}
|
||||
}],
|
||||
['screen and (max-width: 380px)', {
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value, index) {
|
||||
return index % 3 === 0 ? value : null;
|
||||
}
|
||||
}
|
||||
}]
|
||||
],
|
||||
events: {
|
||||
draw(data: any): void {
|
||||
const circleRadius = 6;
|
||||
if (data.type === 'point') {
|
||||
const circle = new Chartist.Svg('circle', {
|
||||
cx: data.x,
|
||||
cy: data.y,
|
||||
r: circleRadius,
|
||||
class: 'ct-point-circle'
|
||||
});
|
||||
|
||||
data.element.replace(circle);
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
// Line Chart 2 Ends
|
||||
|
||||
// Line Chart 3 Starts
|
||||
this.lineChart3 = {
|
||||
type: 'Line',
|
||||
data: Chartdata['Line3'],
|
||||
options: {
|
||||
fullwidth: true,
|
||||
height: '300px',
|
||||
axisX: { showGrid: false }, axisY: {
|
||||
scaleMinSpace: 30,
|
||||
}, fullWidth: true,
|
||||
chartPadding: { top: 0, right: 50, bottom: 0, left: 0 },
|
||||
},
|
||||
responsiveOptions: [
|
||||
['screen and (max-width: 640px) and (min-width: 381px)', {
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value, index) {
|
||||
return index % 2 === 0 ? value : null;
|
||||
}
|
||||
}
|
||||
}],
|
||||
['screen and (max-width: 380px)', {
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value, index) {
|
||||
return index % 3 === 0 ? value : null;
|
||||
}
|
||||
}
|
||||
}]
|
||||
],
|
||||
};
|
||||
// Line Chart 3 Ends
|
||||
|
||||
// Scatter Line Chart Starts
|
||||
this.scatterlineChart = {
|
||||
type: 'Line',
|
||||
data: Chartdata['ScatterLine'],
|
||||
options: {
|
||||
fullwidth: true,
|
||||
height: '300px',
|
||||
axisX: { showGrid: false }, axisY: {
|
||||
scaleMinSpace: 30,
|
||||
}, fullWidth: true,
|
||||
},
|
||||
responsiveOptions: [
|
||||
['screen and (max-width: 640px) and (min-width: 381px) and (min-hight: 300px)', {
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value, index) {
|
||||
return index % 2 === 0 ? value : null;
|
||||
}
|
||||
}
|
||||
}],
|
||||
['screen and (max-width: 380px)', {
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value, index) {
|
||||
return index % 3 === 0 ? value : null;
|
||||
}
|
||||
}
|
||||
}]
|
||||
],
|
||||
};
|
||||
// Scatter Line Chart Ends
|
||||
|
||||
// Scatter Chart Starts
|
||||
this.scatterChart = {
|
||||
type: 'Line',
|
||||
data: Chartdata['Scatter'],
|
||||
options: {
|
||||
fullwidth: true,
|
||||
height: '300px',
|
||||
showLine: false,
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value: number, index: number): string {
|
||||
return index % 13 === 0 ? `W${value}` : null;
|
||||
},
|
||||
showGrid: false
|
||||
},
|
||||
axisY: {
|
||||
scaleMinSpace: 30,
|
||||
}
|
||||
},
|
||||
responsiveOptions: [
|
||||
[
|
||||
'screen and (min-width: 640px)',
|
||||
{
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value: number, index: number): string {
|
||||
return index % 4 === 0 ? `W${value}` : null;
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
]
|
||||
};
|
||||
// Scatter Chart Ends
|
||||
|
||||
// Bi-polar Line Chart Starts
|
||||
this.biPolarLineChart = {
|
||||
type: 'Line',
|
||||
data: Chartdata['Bi-PolarLine'],
|
||||
options: {
|
||||
fullwidth: true,
|
||||
height: '350px',
|
||||
showArea: true,
|
||||
showLine: false,
|
||||
showPoint: false,
|
||||
fullWidth: true,
|
||||
axisX: {
|
||||
showGrid: false,
|
||||
offset: 100,
|
||||
labelInterpolationFnc: function (value: number, index: number): number {
|
||||
return index % 2 === 0 ? value : null;
|
||||
}
|
||||
},
|
||||
axisY: {
|
||||
scaleMinSpace: 30,
|
||||
}
|
||||
}
|
||||
};
|
||||
// Bi-polar Line Chart Ends
|
||||
|
||||
// Bar Chart Starts
|
||||
this.barChart = {
|
||||
type: 'Bar',
|
||||
data: Chartdata['Bar'],
|
||||
options: {
|
||||
fullwidth: true,
|
||||
height: '350px',
|
||||
seriesBarDistance: 21,
|
||||
axisX: {
|
||||
showGrid: false, offset: 100
|
||||
},
|
||||
axisY: {
|
||||
scaleMinSpace: 30,
|
||||
}
|
||||
},
|
||||
};
|
||||
// Bar Chart Ends
|
||||
|
||||
// Distributed Series Bar Chart Starts
|
||||
this.distributedSeriesBarChart = {
|
||||
type: 'Bar',
|
||||
data: Chartdata['DistributedSeries'],
|
||||
options: {
|
||||
fullwidth: true,
|
||||
height: '300px',
|
||||
showGrid: false,
|
||||
distributeSeries: true,
|
||||
axisY: {
|
||||
scaleMinSpace: 30,
|
||||
}
|
||||
},
|
||||
};
|
||||
// Distributed Series Bar Chart Ends
|
||||
|
||||
// Donut Chart 1 Starts
|
||||
this.donutChart1 = {
|
||||
type: 'Pie',
|
||||
data: Chartdata['donut'],
|
||||
options: {
|
||||
fullwidth: true,
|
||||
height: '400px',
|
||||
donut: true,
|
||||
donutWidth: 60,
|
||||
startAngle: 270,
|
||||
total: 200,
|
||||
showLabel: true,
|
||||
},
|
||||
};
|
||||
// Donut Chart 1 Ends
|
||||
|
||||
// Donut Chart 2 Starts
|
||||
this.donutChart2 = {
|
||||
type: 'Pie',
|
||||
data: Chartdata['donut'],
|
||||
options: {
|
||||
fullwidth: true,
|
||||
height: '400px',
|
||||
donut: true,
|
||||
showLabel: true,
|
||||
labelDirection: 'implode',
|
||||
},
|
||||
};
|
||||
// Donut Chart 2 Ends
|
||||
}
|
||||
|
||||
/**
|
||||
* OnInit
|
||||
*/
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Chartist Charts',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Chartist',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.chartApiservice.getChartistData().subscribe(Response => {
|
||||
this.data = Response;
|
||||
this.getlineArea();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Reload card
|
||||
*/
|
||||
reloadLineWithAreaChartOne() {
|
||||
this.blockUILineWithAreaChartOne.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUILineWithAreaChartOne.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
/**
|
||||
* Reload card
|
||||
*/
|
||||
reloadLineWithAreaChartTwo() {
|
||||
this.blockUILineWithAreaChartTwo.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUILineWithAreaChartTwo.stop();
|
||||
}, 2500);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { NgchartistModule } from './ngchartist.module';
|
||||
|
||||
describe('NgchartistModule', () => {
|
||||
let ngchartistModule: NgchartistModule;
|
||||
|
||||
beforeEach(() => {
|
||||
ngchartistModule = new NgchartistModule();
|
||||
});
|
||||
|
||||
it('should create an instance', () => {
|
||||
expect(ngchartistModule).toBeTruthy();
|
||||
});
|
||||
});
|
||||
30
src/app/content/charts-maps/ngchartist/ngchartist.module.ts
Normal file
30
src/app/content/charts-maps/ngchartist/ngchartist.module.ts
Normal file
@@ -0,0 +1,30 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { CardModule } from '../../partials/general/card/card.module';
|
||||
import { ChartistModule } from 'ng-chartist';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { LinechartsComponent } from './linecharts/linecharts.component';
|
||||
import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
|
||||
import { BlockTemplateComponent } from 'src/app/_layout/blockui/block-template.component';
|
||||
import { BlockUIModule } from 'ng-block-ui';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
CardModule,
|
||||
BreadcrumbModule,
|
||||
ChartistModule,
|
||||
BlockUIModule.forRoot({
|
||||
template: BlockTemplateComponent
|
||||
}),
|
||||
RouterModule.forChild([
|
||||
{
|
||||
path: 'linecharts',
|
||||
component: LinechartsComponent
|
||||
},
|
||||
]),
|
||||
],
|
||||
|
||||
declarations: [LinechartsComponent]
|
||||
})
|
||||
export class NgchartistModule { }
|
||||
Reference in New Issue
Block a user