first commit
This commit is contained in:
41
src/app/content/advance-cards/advance-cards.module.ts
Normal file
41
src/app/content/advance-cards/advance-cards.module.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { StatisticsComponent } from './statistics/statistics.component';
|
||||
import { ChartistModule } from 'ng-chartist';
|
||||
import { SocialComponent } from './social/social.component';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { NgChartsModule } from 'ng2-charts';
|
||||
import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
|
||||
import { ChartsComponent } from './charts/charts.component';
|
||||
import { CardModule } from '../partials/general/card/card.module';
|
||||
import { MatchHeightModule } from '../partials/general/match-height/match-height.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
NgbModule,
|
||||
ChartistModule,
|
||||
CardModule,
|
||||
NgChartsModule,
|
||||
BreadcrumbModule,
|
||||
MatchHeightModule,
|
||||
RouterModule.forChild([
|
||||
{
|
||||
path: 'statistics',
|
||||
component: StatisticsComponent
|
||||
},
|
||||
{
|
||||
path: 'social',
|
||||
component: SocialComponent
|
||||
},
|
||||
{
|
||||
path: 'charts',
|
||||
component: ChartsComponent
|
||||
}
|
||||
])
|
||||
],
|
||||
declarations: [StatisticsComponent, SocialComponent, ChartsComponent],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class AdvanceCardsModule {}
|
||||
159
src/app/content/advance-cards/charts/charts.component.css
Normal file
159
src/app/content/advance-cards/charts/charts.component.css
Normal file
@@ -0,0 +1,159 @@
|
||||
:host ::ng-deep .areaChartLegend .ct-series-a .ct-line {
|
||||
stroke:#1e9ff2;
|
||||
}
|
||||
:host ::ng-deep .areaChartLegend .ct-series-a .ct-line {
|
||||
stroke: url(#gradient1);
|
||||
stroke-width: 5px;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
:host ::ng-deep .areaChartLegend {
|
||||
-webkit-filter: drop-shadow(0px 20px 11px rgba(0, 0, 0, 0.5)) !important;
|
||||
filter: drop-shadow(0px 20px 11px rgba(0, 0, 0, 0.5));
|
||||
}
|
||||
:host ::ng-deep .areaChartLegend .ct-series-a .ct-area {
|
||||
fill: #ffffff;
|
||||
}
|
||||
:host ::ng-deep .areaChartLegend .ct-series-a .ct-line {
|
||||
stroke: #3da2ea;
|
||||
}
|
||||
|
||||
:host ::ng-deep .earningchart .ct-series-a .ct-line {
|
||||
stroke: #FF4961;
|
||||
}
|
||||
:host ::ng-deep .earningchart .ct-series-a .ct-point-circle {
|
||||
stroke-width: 3px;
|
||||
stroke: #FF4961;
|
||||
fill: #ffffff;
|
||||
}
|
||||
:host ::ng-deep .barchart .ct-series-a .ct-bar {
|
||||
stroke: #ff394f !important;
|
||||
stroke-width: 7px !important;
|
||||
}
|
||||
:host ::ng-deep .Revenuechartist .ct-series-a .ct-line {
|
||||
|
||||
stroke: url(#gradient2);
|
||||
stroke-linecap: round;
|
||||
}
|
||||
:host ::ng-deep .Revenuechartist {
|
||||
filter: drop-shadow(0px 20px 11px rgba(252, 198, 198, 0.8)) !important;
|
||||
|
||||
}
|
||||
:host ::ng-deep .Revenuechartist .ct-grid{
|
||||
stroke-dasharray: 0px;
|
||||
stroke: rgba(0, 0, 0, 0.4);
|
||||
stroke-width: 0.6px;
|
||||
}
|
||||
:host ::ng-deep .Revenuechartist .ct-series-a .ct-line {
|
||||
stroke: #ff4961;
|
||||
}
|
||||
:host ::ng-deep .Revenuechartist .ct-series-b .ct-line {
|
||||
stroke: #c8c2c3;
|
||||
stroke-dasharray: 8px 3px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .Revenuechartist .ct-label.ct-vertical.ct-start {
|
||||
font-weight: 600;
|
||||
color: #636161;
|
||||
font-size: 12px;
|
||||
}
|
||||
:host ::ng-deep .ecommercesaleslineArea .ct-series-a .ct-point-circle {
|
||||
stroke-width: 5px;
|
||||
stroke: #ffffff;
|
||||
fill: #1e9ff2;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ecommercesaleslineArea .ct-series-b .ct-point-circle {
|
||||
stroke-width: 5px;
|
||||
stroke: #ffffff;
|
||||
fill: #58e0cd;
|
||||
;
|
||||
}
|
||||
:host ::ng-deep .ecommercesaleslineArea .ct-series-a .ct-area {
|
||||
fill: #4105f9f5;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ecommercesaleslineArea .ct-series-b .ct-area {
|
||||
fill: #03f7b2fa;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ecommercesaleslineArea .ct-series-b .ct-line {
|
||||
stroke: #58e0cd;
|
||||
}
|
||||
:host ::ng-deep .ecommercesaleslineArea .ct-series-a .ct-line {
|
||||
stroke: #1e9ff2;
|
||||
}
|
||||
:host ::ng-deep .donut-chart2{
|
||||
margin-bottom: -25px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .donut-chart2 .ct-series-a .ct-slice-donut {
|
||||
stroke: #28d094;
|
||||
stroke-width: 5.5px !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .donut-chart2 .ct-series-b .ct-slice-donut {
|
||||
stroke: #ff4961;
|
||||
stroke-width: 5.5px !important;
|
||||
}
|
||||
:host ::ng-deep .donut-chart2 {
|
||||
-webkit-filter: drop-shadow(0px 10px 11px rgba(187,187,187)) !important;
|
||||
filter: drop-shadow(0px 10px 11px rgba(187,187,187));
|
||||
height: 288px;
|
||||
}
|
||||
:host ::ng-deep .donut-chart2 .ct-label {
|
||||
fill: #ff4b62;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
font-size: 1.75rem;
|
||||
line-height: 1;
|
||||
}
|
||||
:host ::ng-deep .donut-chart1 {
|
||||
margin-bottom: -25px;
|
||||
margin-top: -17px;
|
||||
height: 288px;
|
||||
}
|
||||
:host ::ng-deep .donut-chart1 .ct-series-a .ct-slice-donut {
|
||||
stroke: #ff7889;
|
||||
stroke-width: 5.5px !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .donut-chart1 .ct-series-b .ct-slice-donut {
|
||||
stroke: #ffffff;
|
||||
stroke-width: 5.5px !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .donut-chart1 .ct-label {
|
||||
fill: #ffffff;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
font-size: 1.75rem;
|
||||
line-height: 1;
|
||||
}
|
||||
:host ::ng-deep .donut .ct-done .ct-slice-donut {
|
||||
stroke: #28d094;
|
||||
stroke-width: 24px !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .donut .ct-progress .ct-slice-donut {
|
||||
stroke: #ff4558;
|
||||
stroke-width: 16px !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .donut .ct-outstanding .ct-slice-donut {
|
||||
stroke: #ff7d4d;
|
||||
stroke-width: 8px !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .donut .ct-started .ct-slice-donut {
|
||||
stroke: #666ECC;
|
||||
stroke-width: 32px !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .donut .ct-label {
|
||||
text-anchor: middle;
|
||||
font-size: 20px;
|
||||
fill: #868e96;
|
||||
}
|
||||
|
||||
:host ::ng-deep .dountchartheader{
|
||||
margin-top: 10px;
|
||||
}
|
||||
194
src/app/content/advance-cards/charts/charts.component.html
Normal file
194
src/app/content/advance-cards/charts/charts.component.html
Normal file
@@ -0,0 +1,194 @@
|
||||
<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">
|
||||
<!-- Charts section start -->
|
||||
<section id="charts-section">
|
||||
<div class="row">
|
||||
<div class="col-12 mt-3 mb-1">
|
||||
<h4 class="text-uppercase">Charts</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-xl-4 col-lg-12">
|
||||
<div class="card text-white">
|
||||
<div class="card-content">
|
||||
<div class="position-relative">
|
||||
<div class="chart-title position-absolute mt-2 ml-2 white">
|
||||
</div>
|
||||
<div class="earningchart">
|
||||
<x-chartist *ngIf="earningchart" [data]="earningchart.data" [type]="earningchart.type" [options]="earningchart.options"
|
||||
[responsiveOptions]="earningchart.responsiveOptions" [events]="earningchart.events">
|
||||
</x-chartist>
|
||||
</div>
|
||||
<div class="chart-stats position-absolute position-bottom-0 position-right-0 mb-2 mr-3">
|
||||
<a href="#" class="btn bg-danger mr-1 white">Statistics <i class="feather ft-bar-chart"></i></a> <span
|
||||
class="text-muted">for the <a href="#" class="danger darken-2">last year.</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-8 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="row">
|
||||
<div class="card-body">
|
||||
<ul class="list-inline text-center">
|
||||
<li class="mr-1">
|
||||
<h6><i class="la la-circle danger"></i> <span>iOS</span></h6>
|
||||
</li>
|
||||
<li class="mr-1">
|
||||
<h6><i class="la la-circle warning"></i> <span>Windows</span></h6>
|
||||
</li>
|
||||
<li class="mr-1">
|
||||
<h6><i class="la la-circle success"></i> <span>Android</span></h6>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="areaChartLegend">
|
||||
<x-chartist *ngIf="lineArea" [data]="lineArea.data" [type]="lineArea.type" [options]="lineArea.options"
|
||||
[responsiveOptions]="lineArea.responsiveOptions" [events]="lineArea.events">
|
||||
</x-chartist>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-xl-4 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="earning-chart position-relative">
|
||||
<div class="chart-title position-absolute mt-2 ml-2">
|
||||
</div>
|
||||
<p class="font-medium-2 text-muted text-center dountchartheader">Project Tasks</p>
|
||||
<div class="donut">
|
||||
<x-chartist class="pr_stats" *ngIf="DonutChart" [data]="DonutChart.data" [type]="DonutChart.type"
|
||||
[options]="DonutChart.options" [responsiveOptions]="DonutChart.responsiveOptions"
|
||||
[events]="DonutChart.events">
|
||||
</x-chartist>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-12">
|
||||
<m-card [options]="hitRateOptions" id="card">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Hit Rate <span class="danger">-12%</span>
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div id="donut-chart2" class="height-230 donut-chart2">
|
||||
<x-chartist *ngIf="donutChart2" [data]="donutChart2.data" [type]="donutChart2.type" [options]="donutChart2.options"
|
||||
[responsiveOptions]="donutChart2.responsiveOptions" [events]="donutChart2.events">
|
||||
</x-chartist>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-12">
|
||||
<m-card [options]="dealsOptions">
|
||||
<ng-container mCardBody>
|
||||
<h4 class="card-title white">Deals <span class="white">-55%</span>
|
||||
<span class="float-right">
|
||||
<span class="white">152</span><span class="red lighten-4">/200</span>
|
||||
</span>
|
||||
</h4>
|
||||
<div id="donut-chart1" class="height-230 donut-chart1">
|
||||
<x-chartist *ngIf="donutChart1" [data]="donutChart1.data" [type]="donutChart1.type" [options]="donutChart1.options"
|
||||
[responsiveOptions]="donutChart1.responsiveOptions" [events]="donutChart1.events">
|
||||
</x-chartist>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-xl-4 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="card-body sales-growth-chart">
|
||||
<div class="barchart">
|
||||
<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 class="col-xl-8 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="Revenuechartist">
|
||||
<x-chartist *ngIf="lineArea1" [data]="lineArea1.data" [type]="lineArea1.type" [options]="lineArea1.options"
|
||||
[responsiveOptions]="lineArea1.responsiveOptions" [events]="lineArea1.events">
|
||||
</x-chartist>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-content ">
|
||||
<div id="cost-revenue" class="ecommercesaleslineArea position-relative">
|
||||
<x-chartist *ngIf="ecommercesaleslineArea" [data]="ecommercesaleslineArea.data" [type]="ecommercesaleslineArea.type"
|
||||
[options]="ecommercesaleslineArea.options"
|
||||
[responsiveOptions]="ecommercesaleslineArea.responsiveOptions"
|
||||
[events]="ecommercesaleslineArea.events">
|
||||
</x-chartist>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="row mt-1">
|
||||
<div class="col-3 text-center">
|
||||
<h6 class="text-muted">Total Products</h6>
|
||||
<h2 class="block font-weight-normal">18.6 k</h2>
|
||||
<div class="progress progress-sm mt-1 mb-0 box-shadow">
|
||||
<div class="progress-bar bg-gradient-x-info" role="progressbar" style="width: 70%"
|
||||
aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<h6 class="text-muted">Total Sales</h6>
|
||||
<h2 class="block font-weight-normal">64.54 M</h2>
|
||||
<div class="progress progress-sm mt-1 mb-0 box-shadow">
|
||||
<div class="progress-bar bg-gradient-x-warning" role="progressbar" style="width: 60%"
|
||||
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<h6 class="text-muted">Total Cost</h6>
|
||||
<h2 class="block font-weight-normal">24.38 B</h2>
|
||||
<div class="progress progress-sm mt-1 mb-0 box-shadow">
|
||||
<div class="progress-bar bg-gradient-x-danger" role="progressbar" style="width: 40%"
|
||||
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<h6 class="text-muted">Total Revenue</h6>
|
||||
<h2 class="block font-weight-normal">36.72 M</h2>
|
||||
<div class="progress progress-sm mt-1 mb-0 box-shadow">
|
||||
<div class="progress-bar bg-gradient-x-success" role="progressbar" style="width: 90%"
|
||||
aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- // Charts section end -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END: Content-->
|
||||
@@ -0,0 +1,24 @@
|
||||
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();
|
||||
});
|
||||
});
|
||||
472
src/app/content/advance-cards/charts/charts.component.ts
Normal file
472
src/app/content/advance-cards/charts/charts.component.ts
Normal file
@@ -0,0 +1,472 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import * as Chartist from 'chartist';
|
||||
import { ChartEvent, ChartType } from 'ng-chartist';
|
||||
import { ChartApiService } from '../../../_services/chart.api';
|
||||
|
||||
|
||||
export interface Chart {
|
||||
type: ChartType;
|
||||
data: Chartist.IChartistData;
|
||||
options?: any;
|
||||
responsiveOptions?: any;
|
||||
events?: ChartEvent;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-charts',
|
||||
templateUrl: './charts.component.html',
|
||||
styleUrls: ['./charts.component.css']
|
||||
})
|
||||
export class ChartsComponent implements OnInit {
|
||||
public breadcrumb: any;
|
||||
salesData: any;
|
||||
ChartistData: any;
|
||||
lineArea: any;
|
||||
earningchart: any;
|
||||
DonutChart: any;
|
||||
barChart: any;
|
||||
lineArea1: any;
|
||||
ecommercesaleslineArea: any;
|
||||
donutChart2: any;
|
||||
donutChart1: any;
|
||||
constructor(private chartApiservice: ChartApiService) { }
|
||||
hitRateOptions = {
|
||||
bodyClass: ['bg-hexagons', 'pt-0'],
|
||||
headerClass: ['bg-hexagons'],
|
||||
cardClass: ['pull-up'],
|
||||
close: false,
|
||||
expand: false,
|
||||
minimize: false,
|
||||
reload: true
|
||||
};
|
||||
dealsOptions = {
|
||||
bodyClass: ['bg-hexagons-danger'],
|
||||
cardClass: ['pull-up'],
|
||||
contentClass: ['bg-gradient-directional-danger']
|
||||
};
|
||||
getlineArea() {
|
||||
const Chartdata = this.ChartistData;
|
||||
this.lineArea = {
|
||||
type: 'Line',
|
||||
data: Chartdata['lineArea'],
|
||||
options: {
|
||||
lineSmooth: Chartist.Interpolation.simple({
|
||||
divisor: 1.8
|
||||
}),
|
||||
fullwidth: true,
|
||||
height: '320px',
|
||||
low: 0,
|
||||
showArea: true,
|
||||
fullWidth: true,
|
||||
showPoint: false,
|
||||
axisX: {
|
||||
showGrid: false
|
||||
},
|
||||
axisY: {
|
||||
low: 0,
|
||||
offset: 16,
|
||||
scaleMinSpace: 40,
|
||||
labelInterpolationFnc: function (value) {
|
||||
return value + 'K';
|
||||
}
|
||||
}
|
||||
},
|
||||
responsiveOptions: [
|
||||
[
|
||||
'screen and (max-width: 640px) and (min-width: 200px)',
|
||||
{
|
||||
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: 1,
|
||||
y1: 1,
|
||||
x2: 1,
|
||||
y2: 1
|
||||
})
|
||||
.elem('stop', {
|
||||
offset: 0,
|
||||
'stop-color': 'rgba(22, 141, 238, 1)'
|
||||
})
|
||||
.parent()
|
||||
.elem('stop', {
|
||||
offset: 1,
|
||||
'stop-color': 'rgba(98, 188, 270, 11)'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
this.DonutChart = {
|
||||
type: 'Pie',
|
||||
data: Chartdata['donutDashboard'],
|
||||
options: {
|
||||
width: '100%',
|
||||
height: '280px',
|
||||
donut: true,
|
||||
startAngle: 0,
|
||||
labelInterpolationFnc: function (value) {
|
||||
const total = Chartdata['donutDashboard'].series.reduce(function (
|
||||
prev,
|
||||
series
|
||||
) {
|
||||
return prev + series.value;
|
||||
},
|
||||
0);
|
||||
return total + '%';
|
||||
}
|
||||
},
|
||||
events: {
|
||||
draw(data: any): void {
|
||||
if (data.type === 'label') {
|
||||
if (data.index === 0) {
|
||||
data.element.attr({
|
||||
dx: data.element.root().width() / 2,
|
||||
dy: data.element.root().height() / 2
|
||||
});
|
||||
} else {
|
||||
data.element.remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
this.barChart = {
|
||||
type: 'Bar',
|
||||
data: Chartdata['Bar'],
|
||||
options: {
|
||||
fullwidth: true,
|
||||
height: '320px',
|
||||
seriesBarDistance: 21,
|
||||
chartPadding: {
|
||||
top: 0
|
||||
},
|
||||
axisX: {
|
||||
showLable: true,
|
||||
showGrid: false,
|
||||
offset: 60,
|
||||
labelInterpolationFnc: function (value) {
|
||||
return value.slice(0, 3);
|
||||
}
|
||||
},
|
||||
|
||||
axisY: {
|
||||
scaleMinSpace: 40
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.ecommercesaleslineArea = {
|
||||
type: 'Line',
|
||||
data: Chartdata['lineArea2'],
|
||||
options: {
|
||||
height: '300px',
|
||||
low: 0,
|
||||
showArea: true,
|
||||
fullWidth: true,
|
||||
onlyInteger: true,
|
||||
axisX: {
|
||||
showGrid: false
|
||||
},
|
||||
axisY: {
|
||||
low: 0,
|
||||
scaleMinSpace: 40,
|
||||
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: {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
getChartData() {
|
||||
const SaleschartData = this.salesData;
|
||||
this.earningchart = {
|
||||
type: 'Line',
|
||||
data: SaleschartData['earningchart'],
|
||||
options: {
|
||||
chartPadding: 0,
|
||||
height: '440px',
|
||||
low: 0,
|
||||
showArea: true,
|
||||
fullWidth: true,
|
||||
onlyInteger: true,
|
||||
|
||||
axisX: {
|
||||
showGrid: false,
|
||||
showLabel: false,
|
||||
offset: -1
|
||||
},
|
||||
axisY: {
|
||||
scaleMinSpace: 40,
|
||||
showGrid: false,
|
||||
showLabel: false,
|
||||
offset: -2
|
||||
}
|
||||
},
|
||||
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: 0,
|
||||
x2: 1,
|
||||
y2: 0
|
||||
})
|
||||
.elem('stop', {
|
||||
offset: 0,
|
||||
'stop-color': 'rgb(255,73,97)'
|
||||
})
|
||||
.parent()
|
||||
.elem('stop', {
|
||||
offset: 1,
|
||||
'stop-color': 'rgb(255,73,97)'
|
||||
});
|
||||
},
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
this.lineArea1 = {
|
||||
type: 'Line',
|
||||
data: SaleschartData['lineArea'],
|
||||
|
||||
options: {
|
||||
lineSmooth: Chartist.Interpolation.simple({
|
||||
divisor: 2.8
|
||||
}),
|
||||
fullWidth: true,
|
||||
height: '320px',
|
||||
showArea: false,
|
||||
showPoint: false,
|
||||
axisX: {
|
||||
showGrid: false,
|
||||
showLabel: true,
|
||||
offset: 32
|
||||
},
|
||||
axisY: {
|
||||
showGrid: true,
|
||||
showLabel: true,
|
||||
scaleMinSpace: 28,
|
||||
offset: 44
|
||||
}
|
||||
},
|
||||
events: {
|
||||
created(data: any): void {
|
||||
const defs = data.svg.elem('defs');
|
||||
defs
|
||||
.elem('linearGradient', {
|
||||
id: 'gradient2',
|
||||
x1: 0,
|
||||
y1: 0,
|
||||
x2: 1,
|
||||
y2: 0
|
||||
})
|
||||
.elem('stop', {
|
||||
offset: 0,
|
||||
'stop-color': 'rgb(255,73,97)'
|
||||
})
|
||||
.parent()
|
||||
.elem('stop', {
|
||||
offset: 1,
|
||||
'stop-color': 'rgb(255,73,97)'
|
||||
});
|
||||
},
|
||||
draw(data: any): void {
|
||||
const circleRadius = 4;
|
||||
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);
|
||||
} else if (data.type === 'label') {
|
||||
// adjust label position for rotation
|
||||
const dX = data.width / 2 + (26 - data.width);
|
||||
data.element.attr({ x: data.element.attr('x') - dX });
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
this.donutChart2 = {
|
||||
type: 'Pie',
|
||||
data: SaleschartData['donut1'],
|
||||
options: {
|
||||
chartPadding: 0,
|
||||
fullwidth: true,
|
||||
height: '273px',
|
||||
donut: true,
|
||||
showLabel: true,
|
||||
startAngle: 0,
|
||||
labelInterpolationFnc: function (value) {
|
||||
const total = 82;
|
||||
return total + '%';
|
||||
}
|
||||
},
|
||||
events: {
|
||||
draw(data: any): void {
|
||||
if (data.type === 'label') {
|
||||
if (data.index === 0) {
|
||||
data.element.attr({
|
||||
dx: data.element.root().width() / 2,
|
||||
dy: data.element.root().height() / 2
|
||||
});
|
||||
} else {
|
||||
data.element.remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
this.donutChart1 = {
|
||||
type: 'Pie',
|
||||
data: SaleschartData['donut2'],
|
||||
options: {
|
||||
chartPadding: 0,
|
||||
fullwidth: true,
|
||||
height: '273px',
|
||||
donut: true,
|
||||
showLabel: true,
|
||||
labelInterpolationFnc: function (value) {
|
||||
const total = 76;
|
||||
return total + '%';
|
||||
}
|
||||
},
|
||||
events: {
|
||||
draw(data: any): void {
|
||||
if (data.type === 'label') {
|
||||
if (data.index === 0) {
|
||||
data.element.attr({
|
||||
dx: data.element.root().width() / 2,
|
||||
dy: data.element.root().height() / 2
|
||||
});
|
||||
} else {
|
||||
data.element.remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
mainlabel: 'Advance Charts Cards',
|
||||
links: [
|
||||
{
|
||||
name: 'Home',
|
||||
isLink: true,
|
||||
link: '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
name: 'Advance Cards',
|
||||
isLink: true,
|
||||
link: '#'
|
||||
},
|
||||
{
|
||||
name: 'Charts',
|
||||
isLink: false,
|
||||
link: '#'
|
||||
}
|
||||
]
|
||||
};
|
||||
this.chartApiservice.getSalesData().subscribe(Response => {
|
||||
this.salesData = Response;
|
||||
this.getChartData();
|
||||
});
|
||||
this.chartApiservice.getEcommerceData().subscribe(Response => {
|
||||
this.ChartistData = Response;
|
||||
this.getlineArea();
|
||||
});
|
||||
}
|
||||
}
|
||||
206
src/app/content/advance-cards/social/social.component.html
Normal file
206
src/app/content/advance-cards/social/social.component.html
Normal file
@@ -0,0 +1,206 @@
|
||||
<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">
|
||||
<!-- Social cards section start -->
|
||||
<section id="social-cards">
|
||||
<div class="row">
|
||||
<div class="col-12 mt-3 mb-1">
|
||||
<h4 class="text-uppercase">Social Cards</h4>
|
||||
<p>User's social profile cards with followers - following numbers and follow button.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-2">
|
||||
<div class="col-xl-4 col-md-6 col-12">
|
||||
<div class="card profile-card-with-cover">
|
||||
<div class="card-content">
|
||||
<div class="card-img-top img-fluid bg-cover height-200"
|
||||
style="background: url('../../../../../assets/images/backgrounds/fb.jpg') 0 30%;"></div>
|
||||
<div class="card-profile-image">
|
||||
<img src="../../../../../assets/images/portrait/small/avatar-s-4.png"
|
||||
class="rounded-circle img-border box-shadow-1" alt="Card image">
|
||||
</div>
|
||||
<div class="profile-card-with-cover-content text-center">
|
||||
<div class="profile-details mt-2">
|
||||
<h4 class="card-title">Linda Holland</h4>
|
||||
<ul class="list-inline clearfix mt-2">
|
||||
<li class="mr-3">
|
||||
<h2 class="block">3.5K</h2> Likes
|
||||
</li>
|
||||
<li class="mr-3">
|
||||
<h2 class="block">2845</h2> Followers
|
||||
</li>
|
||||
<li>
|
||||
<h2 class="block">645</h2> Following
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<a [routerLink]="" class="btn btn-social btn-min-width mr-1 mb-1 btn-facebook"><i
|
||||
class="la la-facebook"></i> Follow</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-md-6 col-12">
|
||||
<div class="card profile-card-with-cover">
|
||||
<div class="card-content">
|
||||
<div class="card-img-top img-fluid bg-cover height-200"
|
||||
style="background: url('../../../../../assets/images/backgrounds/in.jpg') 0 40%;"></div>
|
||||
<div class="card-profile-image">
|
||||
<img src="../../../../../assets/images/portrait/small/avatar-s-9.png"
|
||||
class="rounded-circle img-border box-shadow-1" alt="Card image">
|
||||
</div>
|
||||
<div class="profile-card-with-cover-content text-center">
|
||||
<div class="profile-details mt-2">
|
||||
<h4 class="card-title">Philip Garrett</h4>
|
||||
<ul class="list-inline clearfix mt-2">
|
||||
<li class="mr-3">
|
||||
<h2 class="block">500+</h2> Connections
|
||||
</li>
|
||||
<li class="mr-3">
|
||||
<h2 class="block">485</h2> Posts
|
||||
</li>
|
||||
<li>
|
||||
<h2 class="block">35</h2> Following
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<a [routerLink]="" class="btn btn-social btn-min-width mr-1 mb-1 btn-linkedin"><span
|
||||
class="la la-linkedin"></span> Follow</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-md-6 col-12">
|
||||
<div class="card profile-card-with-cover">
|
||||
<div class="card-content">
|
||||
<div class="card-img-top img-fluid bg-cover height-200"
|
||||
style="background: url('../../../../../assets/images/backgrounds/tw.jpg') 0 30%;"></div>
|
||||
<div class="card-profile-image">
|
||||
<img src="../../../../../assets/images/portrait/small/avatar-s-8.png"
|
||||
class="rounded-circle img-border box-shadow-1" alt="Card image">
|
||||
</div>
|
||||
<div class="profile-card-with-cover-content text-center">
|
||||
<div class="profile-details mt-2">
|
||||
<h4 class="card-title">Christine Wood</h4>
|
||||
<ul class="list-inline clearfix mt-2">
|
||||
<li class="mr-3">
|
||||
<h2 class="block">1.6K</h2> Likes
|
||||
</li>
|
||||
<li class="mr-3">
|
||||
<h2 class="block">264</h2> Followers
|
||||
</li>
|
||||
<li>
|
||||
<h2 class="block">85</h2> Following
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<a [routerLink]="" class="btn btn-social btn-min-width mr-1 mb-1 btn-twitter white"><span
|
||||
class="la la-twitter"></span> Follow</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-md-12">
|
||||
<div class="card bg-twitter white">
|
||||
<div class="card-content p-2">
|
||||
<div class="card-body">
|
||||
<div class="text-center mb-1">
|
||||
<i class="la la-twitter font-large-3"></i>
|
||||
</div>
|
||||
<div class="tweet-slider carousel slide text-center" data-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<p>Congratulations to Rob Jones in accounting for winning our <span class="yellow">#NFL</span>
|
||||
football pool!</p>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<p>Contests are a great thing to partner on. Partnerships immediately <span
|
||||
class="yellow">#DOUBLE</span> the reach.</p>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<p>Puns, humor, and quotes are great content on <span class="yellow">#Twitter</span>. Find some
|
||||
related to your business.</p>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<p>Are there <span class="yellow">#common-sense</span> facts related to your business? Combine
|
||||
them with a great photo.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-12">
|
||||
<div class="card bg-facebook white">
|
||||
<div class="card-content p-2">
|
||||
<div class="card-body">
|
||||
<div class="text-center mb-1">
|
||||
<i class="la la-facebook font-large-3"></i>
|
||||
</div>
|
||||
<div class="fb-post-slider carousel slide text-center" data-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<p>Congratulations to Rob Jones in accounting for winning our #NFL football pool!</p>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<p>Contests are a great thing to partner on. Partnerships immediately #DOUBLE the reach.</p>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<p>Puns, humor, and quotes are great content on #Twitter. Find some related to your business.
|
||||
</p>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<p>Are there #common-sense facts related to your business? Combine them with a great photo.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-12">
|
||||
<div class="card bg-linkedin white">
|
||||
<div class="card-content p-2">
|
||||
<div class="card-body">
|
||||
<div class="text-center mb-1">
|
||||
<i class="la la-linkedin font-large-3"></i>
|
||||
</div>
|
||||
<div class="linkedin-post-slider carousel slide text-center" data-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<p>Congratulations to Rob Jones in accounting for winning our #NFL football pool!</p>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<p>Contests are a great thing to partner on. Partnerships immediately #DOUBLE the reach.</p>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<p>Puns, humor, and quotes are great content on #Twitter. Find some related to your business.
|
||||
</p>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<p>Are there #common-sense facts related to your business? Combine them with a great photo.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- // Social cards section end -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,24 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { SocialComponent } from './social.component';
|
||||
|
||||
describe('SocialComponent', () => {
|
||||
let component: SocialComponent;
|
||||
let fixture: ComponentFixture<SocialComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [SocialComponent]
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(SocialComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
35
src/app/content/advance-cards/social/social.component.ts
Normal file
35
src/app/content/advance-cards/social/social.component.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-social',
|
||||
templateUrl: './social.component.html',
|
||||
styleUrls: ['./social.component.css']
|
||||
})
|
||||
export class SocialComponent implements OnInit {
|
||||
public breadcrumb: any;
|
||||
|
||||
constructor() {}
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
mainlabel: 'Advance Social Cards',
|
||||
links: [
|
||||
{
|
||||
name: 'Home',
|
||||
isLink: true,
|
||||
link: '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
name: 'Advance Cards',
|
||||
isLink: true,
|
||||
link: '#'
|
||||
},
|
||||
{
|
||||
name: 'Social',
|
||||
isLink: false,
|
||||
link: '#'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
:host ::ng-deep .Likes .ct-series-a .ct-point {
|
||||
stroke: #28d094;
|
||||
}
|
||||
:host ::ng-deep .Likes .ct-line {
|
||||
fill: none;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
:host ::ng-deep .Likes .ct-point{
|
||||
stroke-width: 0px;
|
||||
}
|
||||
:host ::ng-deep .Likes .ct-series-a .ct-line {
|
||||
stroke: #28d094;
|
||||
}
|
||||
:host ::ng-deep .Likes .ct-series-a .ct-area {
|
||||
fill: #28d094;
|
||||
}
|
||||
:host ::ng-deep .Comments .ct-series-a .ct-point {
|
||||
stroke: #FF9149;
|
||||
}
|
||||
:host ::ng-deep .Comments .ct-line {
|
||||
fill: none;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
:host ::ng-deep .Comments .ct-point{
|
||||
stroke-width: 0px;
|
||||
}
|
||||
:host ::ng-deep .Comments .ct-series-a .ct-line {
|
||||
stroke: #FF9149;
|
||||
}
|
||||
:host ::ng-deep .Comments .ct-series-a .ct-area {
|
||||
fill: #FF9149;
|
||||
}
|
||||
:host ::ng-deep .Views .ct-series-a .ct-point {
|
||||
stroke: #FF4961;
|
||||
}
|
||||
:host ::ng-deep .Views .ct-line {
|
||||
fill: none;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
:host ::ng-deep .Views .ct-point{
|
||||
stroke-width: 0px;
|
||||
}
|
||||
:host ::ng-deep .Views .ct-series-a .ct-line {
|
||||
stroke: #FF4961;
|
||||
}
|
||||
:host ::ng-deep .Views .ct-series-a .ct-area {
|
||||
fill: #FF4961;
|
||||
}
|
||||
:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-point{
|
||||
stroke: #ff9149;
|
||||
}
|
||||
:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-line{
|
||||
stroke: #ff9149;
|
||||
|
||||
}
|
||||
:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-area{
|
||||
fill: #ff9149;
|
||||
fill-opacity: 1;
|
||||
}
|
||||
:host ::ng-deep .sp-line-total-cost .ct-point{
|
||||
stroke-width: 0px;
|
||||
}
|
||||
:host ::ng-deep .sp-line-total-cost svg {
|
||||
margin-left: 13px;
|
||||
}
|
||||
:host ::ng-deep .sp-line-total-sales .ct-series-a .ct-point{
|
||||
stroke: #28d094;
|
||||
}
|
||||
:host ::ng-deep .sp-line-total-sales .ct-series-a .ct-line{
|
||||
stroke: #28d094;
|
||||
|
||||
}
|
||||
:host ::ng-deep .sp-line-total-sales .ct-series-a .ct-area{
|
||||
fill: #28d094;
|
||||
fill-opacity: 1;
|
||||
}
|
||||
:host ::ng-deep .sp-line-total-sales .ct-point{
|
||||
stroke-width: 0px;
|
||||
}
|
||||
:host ::ng-deep .sp-line-total-sales svg {
|
||||
margin-left: 13px;
|
||||
}
|
||||
:host ::ng-deep .sp-line-total-revenue .ct-series-a .ct-point{
|
||||
stroke: #ff4961;
|
||||
}
|
||||
:host ::ng-deep .sp-line-total-revenue .ct-series-a .ct-line{
|
||||
stroke: #ff4961;
|
||||
|
||||
}
|
||||
:host ::ng-deep .sp-line-total-revenue .ct-series-a .ct-area{
|
||||
fill: #ff4961;
|
||||
fill-opacity: 1;
|
||||
}
|
||||
:host ::ng-deep .sp-line-total-revenue .ct-point{
|
||||
stroke-width: 0px;
|
||||
}
|
||||
:host ::ng-deep .sp-line-total-revenue svg {
|
||||
margin-left: 13px;
|
||||
}
|
||||
:host ::ng-deep .ct-bar {
|
||||
fill: none;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
:host ::ng-deep .sp-bar-total-cost .ct-series-a .ct-bar{
|
||||
stroke: #ff9148;
|
||||
}
|
||||
:host ::ng-deep .sp-bar-total-sales .ct-series-a .ct-bar{
|
||||
stroke: #28d094;
|
||||
}
|
||||
:host ::ng-deep .sp-bar-total-revenue .ct-series-a .ct-bar{
|
||||
stroke: #ff4961;
|
||||
}
|
||||
:host ::ng-deep .sp-bar-total-cost {
|
||||
margin-bottom: -90px;
|
||||
}
|
||||
:host ::ng-deep .sp-bar-total-sales{
|
||||
margin-bottom: -90px;
|
||||
}
|
||||
:host ::ng-deep .sp-bar-total-revenue{
|
||||
margin-bottom: -90px;
|
||||
}
|
||||
:host ::ng-deep .feedbacks .ct-series-a .ct-slice-donut {
|
||||
stroke: #28d094;
|
||||
stroke-width: 10px !important;
|
||||
}
|
||||
:host ::ng-deep .Subscribers .ct-series-a .ct-slice-donut {
|
||||
stroke: #ff9149;
|
||||
stroke-width: 10px !important;
|
||||
}
|
||||
:host ::ng-deep .Users .ct-series-a .ct-slice-donut {
|
||||
stroke: #ff4961;
|
||||
stroke-width: 10px !important;
|
||||
}
|
||||
:host ::ng-deep .ct-series-b .ct-slice-donut {
|
||||
stroke: #eeeeee;
|
||||
stroke-width: 12px !important;
|
||||
}
|
||||
:host ::ng-deep .text-muted {
|
||||
position: absolute;
|
||||
}
|
||||
2274
src/app/content/advance-cards/statistics/statistics.component.html
Normal file
2274
src/app/content/advance-cards/statistics/statistics.component.html
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { StatisticsComponent } from './statistics.component';
|
||||
|
||||
describe('StatisticsComponent', () => {
|
||||
let component: StatisticsComponent;
|
||||
let fixture: ComponentFixture<StatisticsComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ StatisticsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(StatisticsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
224
src/app/content/advance-cards/statistics/statistics.component.ts
Normal file
224
src/app/content/advance-cards/statistics/statistics.component.ts
Normal file
@@ -0,0 +1,224 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import * as Chartist from 'chartist';
|
||||
import { ChartEvent, ChartType } from 'ng-chartist';
|
||||
import { ChartApiService } from '../../../_services/chart.api';
|
||||
|
||||
export interface Chart {
|
||||
type: ChartType;
|
||||
data: Chartist.IChartistData;
|
||||
options?: any;
|
||||
responsiveOptions?: any;
|
||||
events?: ChartEvent;
|
||||
}
|
||||
@Component({
|
||||
selector: 'app-statistics',
|
||||
templateUrl: './statistics.component.html',
|
||||
styleUrls: ['./statistics.component.css']
|
||||
})
|
||||
export class StatisticsComponent implements OnInit {
|
||||
Data: any;
|
||||
public breadcrumb: any;
|
||||
feedbacksdonutChart: any;
|
||||
subscribersdonutChart: any;
|
||||
usersdonutChart: any;
|
||||
lineArea: any;
|
||||
commentslineArea: any;
|
||||
viewslineArea: any;
|
||||
sparklineArea: any;
|
||||
barChart1: any;
|
||||
barChart: any;
|
||||
|
||||
constructor(private chartApiservice: ChartApiService) {}
|
||||
|
||||
getlineArea() {
|
||||
const ChartData = this.Data;
|
||||
this.feedbacksdonutChart = {
|
||||
type: 'Pie',
|
||||
data: ChartData['feedbacksdonutChart'],
|
||||
options: {
|
||||
showLabel: false,
|
||||
chartPadding: 0,
|
||||
fullwidth: true,
|
||||
height: '200px',
|
||||
donut: true,
|
||||
startAngle: 0
|
||||
}
|
||||
};
|
||||
this.subscribersdonutChart = {
|
||||
type: 'Pie',
|
||||
data: ChartData['subscribersdonutChart'],
|
||||
options: {
|
||||
chartPadding: 0,
|
||||
fullwidth: true,
|
||||
height: '200px',
|
||||
donut: true,
|
||||
showLabel: false,
|
||||
startAngle: 0
|
||||
}
|
||||
};
|
||||
this.usersdonutChart = {
|
||||
type: 'Pie',
|
||||
data: ChartData['usersdonutChart'],
|
||||
options: {
|
||||
showLabel: false,
|
||||
chartPadding: 0,
|
||||
fullwidth: true,
|
||||
height: '200px',
|
||||
donut: true,
|
||||
startAngle: 0
|
||||
}
|
||||
};
|
||||
|
||||
this.lineArea = {
|
||||
type: 'Line',
|
||||
data: ChartData['lineArea'],
|
||||
options: {
|
||||
// low: 650,
|
||||
fullwidth: true,
|
||||
height: '80px',
|
||||
showArea: true,
|
||||
axisX: {
|
||||
showGrid: false,
|
||||
showLabel: false
|
||||
},
|
||||
axisY: {
|
||||
showGrid: false,
|
||||
showLabel: false
|
||||
}
|
||||
}
|
||||
};
|
||||
this.commentslineArea = {
|
||||
type: 'Line',
|
||||
data: ChartData['commentslineArea'],
|
||||
options: {
|
||||
// low: 650,
|
||||
fullwidth: true,
|
||||
height: '80px',
|
||||
showArea: true,
|
||||
axisX: {
|
||||
showGrid: false,
|
||||
showLabel: false
|
||||
},
|
||||
axisY: {
|
||||
showGrid: false,
|
||||
showLabel: false
|
||||
}
|
||||
}
|
||||
};
|
||||
this.viewslineArea = {
|
||||
type: 'Line',
|
||||
data: ChartData['viewslineArea'],
|
||||
options: {
|
||||
// low: 650,
|
||||
fullwidth: true,
|
||||
height: '80px',
|
||||
showArea: true,
|
||||
axisX: {
|
||||
showGrid: false,
|
||||
showLabel: false
|
||||
},
|
||||
axisY: {
|
||||
showGrid: false,
|
||||
showLabel: false
|
||||
}
|
||||
}
|
||||
};
|
||||
this.sparklineArea = {
|
||||
type: 'Line',
|
||||
data: ChartData['sparklineArea'],
|
||||
options: {
|
||||
chartPadding: 0,
|
||||
showArea: true,
|
||||
showLine: false,
|
||||
showPoint: false,
|
||||
lineSmooth: Chartist.Interpolation.none(),
|
||||
axisX: {
|
||||
showGrid: false,
|
||||
offset: -1
|
||||
},
|
||||
axisY: {
|
||||
showGrid: false,
|
||||
offset: -1
|
||||
}
|
||||
}
|
||||
};
|
||||
this.barChart = {
|
||||
type: 'Bar',
|
||||
data: ChartData['Bar'],
|
||||
options: {
|
||||
fullwidth: true,
|
||||
axisX: {
|
||||
showGrid: false,
|
||||
showLabel: false,
|
||||
offset: 100
|
||||
},
|
||||
|
||||
axisY: {
|
||||
showGrid: false,
|
||||
showLabel: false
|
||||
}
|
||||
}
|
||||
};
|
||||
this.barChart1 = {
|
||||
type: 'Bar',
|
||||
data: ChartData['Bar1'],
|
||||
options: {
|
||||
fullwidth: true,
|
||||
axisX: {
|
||||
showGrid: false,
|
||||
showLabel: false,
|
||||
offset: 100
|
||||
},
|
||||
|
||||
axisY: {
|
||||
showGrid: false,
|
||||
showLabel: false
|
||||
}
|
||||
}
|
||||
};
|
||||
this.lineArea = {
|
||||
type: 'Line',
|
||||
data: ChartData['lineArea'],
|
||||
options: {
|
||||
// low: 650,
|
||||
fullwidth: true,
|
||||
height: '75px',
|
||||
showArea: true,
|
||||
axisX: {
|
||||
showGrid: false,
|
||||
showLabel: false
|
||||
},
|
||||
axisY: {
|
||||
showGrid: false,
|
||||
showLabel: false
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
mainlabel: 'Advance Statistics Cards',
|
||||
links: [
|
||||
{
|
||||
name: 'Home',
|
||||
isLink: true,
|
||||
link: '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
name: 'Advance Cards',
|
||||
isLink: true,
|
||||
link: '#'
|
||||
},
|
||||
{
|
||||
name: 'Statistics Cards',
|
||||
isLink: false,
|
||||
link: '#'
|
||||
}
|
||||
]
|
||||
};
|
||||
this.chartApiservice.getStatisticsData().subscribe(Response => {
|
||||
this.Data = Response;
|
||||
this.getlineArea();
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user