first commit
This commit is contained in:
@@ -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