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',
|
||||
'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,
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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[] = [];
|
||||
|
|
|
@ -9,6 +9,7 @@
|
|||
<canvas baseChart class="chart"
|
||||
[data]="doughnutChartDataLocal"
|
||||
[labels]="doughnutChartLabelsLocal"
|
||||
[colors]="doughnutChartColors"
|
||||
[legend]="chartLegend"
|
||||
[chartType]="chartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
|
|
|
@ -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,
|
||||
|
|
Reference in a new issue