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>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<!-- <div class="chart-wrapper">
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="lineChartData"
|
||||
[labels]="lineChartLabels"
|
||||
[options]="lineChartOptions"
|
||||
[legend]="lineChartLegend"
|
||||
[chartType]="lineChartType"
|
||||
[datasets]="lineChartDataSector"
|
||||
[labels]="lineChartLabelsSector"
|
||||
[options]="lineChartOptionsSector"
|
||||
[legend]="lineChartLegendSector"
|
||||
[chartType]="lineChartTypeSector"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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="card">
|
||||
<div class="card-block">
|
||||
|
|
|
@ -128,7 +128,63 @@ export class DashboardComponent {
|
|||
public barChartDataCategory:any[]=[];
|
||||
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 = {
|
||||
first: 0,
|
||||
|
@ -160,7 +216,7 @@ export class DashboardComponent {
|
|||
result => {
|
||||
this.setWeekPurchaseList(result.weeks);
|
||||
this.setWeekData(result);
|
||||
this.setChartData(result.data.cat_total);
|
||||
this.setChartDataCat(result.data.cat_total);
|
||||
this.totalCategoryList = result.data.cat_list;
|
||||
if (this.totalCategoryList) {
|
||||
this.showTotalCategoryList = true;
|
||||
|
@ -180,7 +236,7 @@ export class DashboardComponent {
|
|||
);
|
||||
}
|
||||
|
||||
private setChartData(dataCat: any) {
|
||||
private setChartDataCat(dataCat: any) {
|
||||
this.barChartLabelsCategory = Object.keys(dataCat);
|
||||
let barChartDataCategoryInitial = Object.keys(dataCat).map(key => dataCat[key]);
|
||||
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 () {
|
||||
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);
|
||||
}
|
||||
|
||||
// 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
|
||||
public chartClicked(e: any): void {
|
||||
}
|
||||
|
|
Reference in a new issue