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

View file

@ -11,25 +11,6 @@
</div><!--/.col-->
</div><!--/.row-->
<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="col-xl-6">
<div class="card">
@ -51,6 +32,28 @@
</div>
</div>
</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 class="card">
<div class="card-block">

View file

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

View file

@ -3,7 +3,7 @@
<div class="card-block">
<div class="row">
<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>

View file

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

View file

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

View file

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