Adding new chart and fixing stuff
This commit is contained in:
parent
c5f6cb2750
commit
4b7ffd91b3
3 changed files with 84 additions and 42 deletions
|
@ -18,40 +18,19 @@
|
||||||
<h4 class="card-title float-left mb-0">Spend by company and Industrial sector</h4>
|
<h4 class="card-title float-left mb-0">Spend by company and Industrial sector</h4>
|
||||||
</div><!--/.col-->
|
</div><!--/.col-->
|
||||||
</div><!--/.row-->
|
</div><!--/.row-->
|
||||||
<!-- <div class="chart-wrapper">
|
<div class="chart-wrapper">
|
||||||
<canvas baseChart class="chart"
|
<canvas baseChart class="chart"
|
||||||
[datasets]="lineChartData"
|
[datasets]="lineChartDataSector"
|
||||||
[labels]="lineChartLabels"
|
[labels]="lineChartLabelsSector"
|
||||||
[options]="lineChartOptions"
|
[options]="lineChartOptionsSector"
|
||||||
[legend]="lineChartLegend"
|
[legend]="lineChartLegendSector"
|
||||||
[chartType]="lineChartType"
|
[chartType]="lineChartTypeSector"
|
||||||
(chartHover)="chartHovered($event)"
|
(chartHover)="chartHovered($event)"
|
||||||
(chartClick)="chartClicked($event)"></canvas>
|
(chartClick)="chartClicked($event)"></canvas>
|
||||||
</div> -->
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class=row>
|
<div class=row>
|
||||||
<div class="col-xl-6">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-block">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-12">
|
|
||||||
<h4 class="card-title float-left mb-0">All Purchases by Category</h4>
|
|
||||||
</div><!--/.col-->
|
|
||||||
</div><!--/.row-->
|
|
||||||
<div class="chart-wrapper">
|
|
||||||
<canvas baseChart class="chart"
|
|
||||||
[datasets]="barChartDataCategory"
|
|
||||||
[labels]="barChartLabelsCategory"
|
|
||||||
[options]="barChartOptionsCategory"
|
|
||||||
[legend]="barChartLegendCategory"
|
|
||||||
[chartType]="barChartTypeCategory"
|
|
||||||
(chartHover)="chartHovered($event)"
|
|
||||||
(chartClick)="chartClicked($event)"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-xl-6">
|
<div class="col-xl-6">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-block">
|
<div class="card-block">
|
||||||
|
|
|
@ -128,7 +128,63 @@ export class DashboardComponent {
|
||||||
public barChartDataCategory:any[]=[];
|
public barChartDataCategory:any[]=[];
|
||||||
public barChartLabelsCategory:string[] = [];
|
public barChartLabelsCategory:string[] = [];
|
||||||
|
|
||||||
|
public lineChartDataSector: ChartDataSets[] = [
|
||||||
|
{ data: [], label: '' },
|
||||||
|
];
|
||||||
|
public lineChartLabelsSector: Label[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July','August','September','October','November','December'];
|
||||||
|
public lineChartOptionsSector: (ChartOptions & { annotation: any }) = {
|
||||||
|
responsive: true,
|
||||||
|
scales: {
|
||||||
|
// We use this empty structure as a placeholder for dynamic theming.
|
||||||
|
xAxes: [{}],
|
||||||
|
yAxes: [{}]
|
||||||
|
},
|
||||||
|
annotation: {
|
||||||
|
annotations: [
|
||||||
|
{
|
||||||
|
type: 'line',
|
||||||
|
mode: 'vertical',
|
||||||
|
scaleID: 'x-axis-0',
|
||||||
|
value: 'March',
|
||||||
|
borderColor: 'orange',
|
||||||
|
borderWidth: 2,
|
||||||
|
label: {
|
||||||
|
enabled: true,
|
||||||
|
fontColor: 'orange',
|
||||||
|
content: 'LineAnno'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
public lineChartColorsSector: Color[] = [
|
||||||
|
{ // grey
|
||||||
|
backgroundColor: 'rgba(148,159,177,0.2)',
|
||||||
|
borderColor: 'rgba(148,159,177,1)',
|
||||||
|
pointBackgroundColor: 'rgba(148,159,177,1)',
|
||||||
|
pointBorderColor: '#fff',
|
||||||
|
pointHoverBackgroundColor: '#fff',
|
||||||
|
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
|
||||||
|
},
|
||||||
|
{ // dark grey
|
||||||
|
backgroundColor: 'rgba(77,83,96,0.2)',
|
||||||
|
borderColor: 'rgba(77,83,96,1)',
|
||||||
|
pointBackgroundColor: 'rgba(77,83,96,1)',
|
||||||
|
pointBorderColor: '#fff',
|
||||||
|
pointHoverBackgroundColor: '#fff',
|
||||||
|
pointHoverBorderColor: 'rgba(77,83,96,1)'
|
||||||
|
},
|
||||||
|
{ // red
|
||||||
|
backgroundColor: 'rgba(255,0,0,0.3)',
|
||||||
|
borderColor: 'red',
|
||||||
|
pointBackgroundColor: 'rgba(148,159,177,1)',
|
||||||
|
pointBorderColor: '#fff',
|
||||||
|
pointHoverBackgroundColor: '#fff',
|
||||||
|
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
public lineChartLegendSector = true;
|
||||||
|
public lineChartTypeSector = 'line';
|
||||||
|
|
||||||
weekPurchaseList = {
|
weekPurchaseList = {
|
||||||
first: 0,
|
first: 0,
|
||||||
|
@ -160,7 +216,7 @@ export class DashboardComponent {
|
||||||
result => {
|
result => {
|
||||||
this.setWeekPurchaseList(result.weeks);
|
this.setWeekPurchaseList(result.weeks);
|
||||||
this.setWeekData(result);
|
this.setWeekData(result);
|
||||||
this.setChartData(result.data.cat_total);
|
this.setChartDataCat(result.data.cat_total);
|
||||||
this.totalCategoryList = result.data.cat_list;
|
this.totalCategoryList = result.data.cat_list;
|
||||||
if (this.totalCategoryList) {
|
if (this.totalCategoryList) {
|
||||||
this.showTotalCategoryList = true;
|
this.showTotalCategoryList = true;
|
||||||
|
@ -180,7 +236,7 @@ export class DashboardComponent {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
private setChartData(dataCat: any) {
|
private setChartDataCat(dataCat: any) {
|
||||||
this.barChartLabelsCategory = Object.keys(dataCat);
|
this.barChartLabelsCategory = Object.keys(dataCat);
|
||||||
let barChartDataCategoryInitial = Object.keys(dataCat).map(key => dataCat[key]);
|
let barChartDataCategoryInitial = Object.keys(dataCat).map(key => dataCat[key]);
|
||||||
this.barChartDataCategory = [
|
this.barChartDataCategory = [
|
||||||
|
@ -198,6 +254,24 @@ export class DashboardComponent {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private setChartDataSector(dataSec: any) {
|
||||||
|
this.barChartLabelsCategory = Object.keys(dataSec);
|
||||||
|
let lineChartDataSectorInitial = Object.keys(dataSec).map(key => dataSec[key]);
|
||||||
|
this.lineChartDataSector = [
|
||||||
|
{data: barChartDataCategoryInitial, label: 'Series A'},
|
||||||
|
];
|
||||||
|
this.showCategoryBarChart = true;
|
||||||
|
if (this.weekList1) {
|
||||||
|
let doughnutChartDataCategoryInitial = this.weekList1.map(function(a) {return a.value;});
|
||||||
|
this.doughnutChartDataCategory = [
|
||||||
|
{data: doughnutChartDataCategoryInitial, label: 'Series A'},
|
||||||
|
];
|
||||||
|
// setTimeout is currently a workaround for ng2-charts labels
|
||||||
|
setTimeout(() => this.doughnutChartLabelsCategory = this.weekList1.map(function(a) {return a.category;}), 0);
|
||||||
|
this.showCategoryDoughnutChart = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
private setDate () {
|
private setDate () {
|
||||||
this.myWeek1 = moment().startOf('isoWeek').format('YYYY-MM-DD');
|
this.myWeek1 = moment().startOf('isoWeek').format('YYYY-MM-DD');
|
||||||
}
|
}
|
||||||
|
|
|
@ -42,17 +42,6 @@ export class OrgPiePanel implements OnInit {
|
||||||
setTimeout(() => this.doughnutChartLabelsLocal = Object.keys(dataLocal), 0);
|
setTimeout(() => this.doughnutChartLabelsLocal = Object.keys(dataLocal), 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
// convert Hex to RGBA
|
|
||||||
public convertHex(hex: string, opacity: number) {
|
|
||||||
hex = hex.replace('#', '');
|
|
||||||
const r = parseInt(hex.substring(0, 2), 16);
|
|
||||||
const g = parseInt(hex.substring(2, 4), 16);
|
|
||||||
const b = parseInt(hex.substring(4, 6), 16);
|
|
||||||
|
|
||||||
const rgba = 'rgba(' + r + ', ' + g + ', ' + b + ', ' + opacity / 100 + ')';
|
|
||||||
return rgba;
|
|
||||||
}
|
|
||||||
|
|
||||||
// events
|
// events
|
||||||
public chartClicked(e: any): void {
|
public chartClicked(e: any): void {
|
||||||
}
|
}
|
||||||
|
|
Reference in a new issue