Chart Labels and clean up

Added axis labels and cleaned up charts a little.
This commit is contained in:
Tom Slater 2019-08-07 16:21:40 +01:00
parent 3248caed07
commit 7ee0b64351
7 changed files with 96 additions and 32 deletions

View file

@ -35,7 +35,7 @@ export class DashboardCustomerComponent implements OnInit {
public bootstrapColours: string[] = ['bg-primary', 'bg-secondary', 'bg-success', public bootstrapColours: string[] = ['bg-primary', 'bg-secondary', 'bg-success',
'bg-danger', 'bg-warning', 'bg-info']; 'bg-danger', 'bg-warning', 'bg-info'];
public chartType = 'doughnut'; public chartType = 'bar';
public chartLegend = true; public chartLegend = true;
public doughnutChartDataCategory: any[] = []; public doughnutChartDataCategory: any[] = [];
public doughnutChartLabelsCategory: string[] = []; public doughnutChartLabelsCategory: string[] = [];
@ -69,10 +69,19 @@ export class DashboardCustomerComponent implements OnInit {
responsive: true, responsive: true,
scales:{ scales:{
xAxes:[{ xAxes:[{
stacked:true scaleLabel: {
display:true,
labelString: 'Category'
},
stacked:true,
}], }],
yAxes:[{ yAxes:[{
stacked:true scaleLabel: {
display:true,
labelString: 'Organisation purchase amount'
},
stacked:true,
}] }]
} }
}; };

View file

@ -11,25 +11,6 @@
</div><!--/.col--> </div><!--/.col-->
</div><!--/.row--> </div><!--/.row-->
<panel-graph></panel-graph> <panel-graph></panel-graph>
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-12">
<h4 class="card-title float-left mb-0">Spend by company and Industrial sector</h4>
</div><!--/.col-->
</div><!--/.row-->
<div class="chart-wrapper">
<canvas baseChart class="chart"
[datasets]="lineChartDataSector"
[labels]="lineChartLabelsSector"
[options]="lineChartOptionsSector"
[legend]="lineChartLegendSector"
[chartType]="lineChartTypeSector"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
<div class=row> <div class=row>
<div class="col-xl-6"> <div class="col-xl-6">
<div class="card"> <div class="card">
@ -51,6 +32,28 @@
</div> </div>
</div> </div>
</div><!--/.col--> </div><!--/.col-->
<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 Organisation Purchases by Category</h4>
</div><!--/.col-->
</div><!--/.row-->
<div class="chart-wrapper">
<canvas baseChart class="chart"
[datasets]="barChartDataCategory"
[labels]="barChartLabelsCategory"
[options]="barChartOptionsCategory"
[colors]="barChartColoursCategory"
[legend]="barChartLegendCategory"
[chartType]="barChartTypeCategory"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
</div><!--/.col-->
<div *ngIf="showCategoryDoughnutChart" class="col-xl-6"> <div *ngIf="showCategoryDoughnutChart" class="col-xl-6">
<div class="card"> <div class="card">
<div class="card-block"> <div class="card-block">

View file

@ -46,9 +46,9 @@ export class DashboardComponent {
}, },
{ {
type: 'graph', type: 'graph',
name: 'sales_last_365_days', name: 'sales_all',
icon: 'icon-diamond', icon: 'icon-diamond',
title: 'Sales Last Year', title: 'All Sales',
dataType: DataType.currency, dataType: DataType.currency,
}, },
{ {
@ -65,8 +65,8 @@ export class DashboardComponent {
}, },
{ {
type: 'graph', type: 'graph',
name: 'purchases_last_365_days;', name: 'purchases_all;',
title: 'Purchases Last Year', title: 'All Purchases',
dataType: DataType.currency, dataType: DataType.currency,
}, },
]; ];
@ -76,7 +76,7 @@ export class DashboardComponent {
public bootstrapColours: string[] = ['bg-primary', 'bg-secondary', 'bg-success', public bootstrapColours: string[] = ['bg-primary', 'bg-secondary', 'bg-success',
'bg-danger', 'bg-warning', 'bg-info']; 'bg-danger', 'bg-warning', 'bg-info'];
public chartType = 'doughnut'; public chartType = 'pie';
public chartLegend = true; public chartLegend = true;
public doughnutChartDataCategory: any[] = []; public doughnutChartDataCategory: any[] = [];
public doughnutChartLabelsCategory: string[] = []; public doughnutChartLabelsCategory: string[] = [];
@ -118,6 +118,21 @@ export class DashboardComponent {
} }
}; };
public barChartTypeEssential:string = 'horizontalBar'; public barChartTypeEssential:string = 'horizontalBar';
public barChartColoursCategory: any[] = [
{
backgroundColor:[
'red',
'green',
'blue',
'purple',
'yellow',
'brown',
'magenta',
'cyan',
'orange',
'pink'
]
}];
public barChartOptionsCategory:any = { public barChartOptionsCategory:any = {
scaleShowVerticalLines: false, scaleShowVerticalLines: false,

View file

@ -3,7 +3,7 @@
<div class="card-block"> <div class="card-block">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<h4 class="card-title mb-0">Spend by Company Type</h4> <h4 class="card-title mb-0">Spend amount and number of purchases by supplier name</h4>
</div> </div>
</div> </div>
<div> <div>

View file

@ -85,9 +85,18 @@ export class MoreStuffComponent implements OnInit {
type: 'time', type: 'time',
time: { time: {
unit: 'month' unit: 'month'
},
scaleLabel:{
display:true,
labelString:'Date'
} }
}], }],
yAxes: [] yAxes: [{
scaleLabel: {
display:true,
labelString:'Number of purchases'
}
}]
}, },
tooltips: { tooltips: {
callbacks: { callbacks: {
@ -133,7 +142,7 @@ export class MoreStuffComponent implements OnInit {
public yearSpendChartData: any[] = [ public yearSpendChartData: any[] = [
{ {
data: [], data: [],
label: ["Value"], label: ["Value £"],
fill: false, fill: false,
borderColor: 'red', borderColor: 'red',
hoverBackgroundColor: '#ffa1b5', hoverBackgroundColor: '#ffa1b5',
@ -157,6 +166,10 @@ export class MoreStuffComponent implements OnInit {
type: 'time', type: 'time',
time: { time: {
unit: 'month' unit: 'month'
},
scaleLabel: {
display:true,
labelString: 'Date'
} }
}], }],
yAxes: [ yAxes: [
@ -238,8 +251,18 @@ export class MoreStuffComponent implements OnInit {
//maintainAspectRatio: false, //maintainAspectRatio: false,
responsive: true, responsive: true,
scales: { scales: {
xAxes: [], xAxes: [{
yAxes: [] scaleLabel: {
display:true,
labelString: 'Spend amount £'
}
}],
yAxes: [{
scaleLabel: {
display:true,
labelString: 'Supplier Names'
}
}]
}, },
}; };
public supplierMonthChartLabels: string[] = []; public supplierMonthChartLabels: string[] = [];

View file

@ -9,6 +9,7 @@
<canvas baseChart class="chart" <canvas baseChart class="chart"
[data]="doughnutChartDataLocal" [data]="doughnutChartDataLocal"
[labels]="doughnutChartLabelsLocal" [labels]="doughnutChartLabelsLocal"
[colors]="doughnutChartColors"
[legend]="chartLegend" [legend]="chartLegend"
[chartType]="chartType" [chartType]="chartType"
(chartHover)="chartHovered($event)" (chartHover)="chartHovered($event)"

View file

@ -16,6 +16,19 @@ export class PiePanel implements OnInit {
public chartLegend = true; public chartLegend = true;
public doughnutChartDataLocal: number[] = []; public doughnutChartDataLocal: number[] = [];
public doughnutChartLabelsLocal: string[] = []; public doughnutChartLabelsLocal: string[] = [];
public doughnutChartColors: any[] = [{ backgroundColor: [
'red',
'green',
'blue',
'purple',
'yellow',
'brown',
'magenta',
'cyan',
'orange',
'pink'
]
}];
constructor( constructor(
private api: ApiService, private api: ApiService,