Chart Labels and clean up
Added axis labels and cleaned up charts a little.
This commit is contained in:
parent
3248caed07
commit
7ee0b64351
7 changed files with 96 additions and 32 deletions
|
@ -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,
|
||||||
}]
|
}]
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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[] = [];
|
||||||
|
|
|
@ -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)"
|
||||||
|
|
|
@ -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,
|
||||||
|
|
Reference in a new issue