Pear-Trading/FoodLoop-Web
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Misc Chart Improvements

Browse source 
Fixed doughnut chart colour loading issues, added WIP dashboard charts, few other misc changes
This commit is contained in:
Tom Slater 2019-08-06 16:51:44 +01:00
parent 0dcf98fed3
commit 3248caed07
10 changed files with 88 additions and 177 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
src/app/dashboard/dashboard-customer.component.html
View file

@ -60,27 +60,6 @@
</div>
</div>
</div><!--/.col-->
<div *ngIf="showCategoryBarChart" class="col-xl-6">
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-12">
<h4 class="card-title mb-0">Monthly Spending by Category</h4>
</div>
</div>
<div class="chart-wrapper">
<canvas baseChart
[datasets]="barChartDataCategory"
[labels]="barChartLabelsCategory"
[options]="barChartOptionsCategory"
[legend]="barChartLegendCategory"
[chartType]="barChartTypeCategory"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
</div><!--/.col-->
<div class="col-xl-6">
<div class="card">
<div class="card-block">
@ -179,44 +158,5 @@
</div>
</div>
</div><!--/.col-->
<div class="col-12">
<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]="lineChartData"
[labels]="lineChartLabels"
[options]="lineChartOptions"
[legend]="lineChartLegend"
[chartType]="lineChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
<div *ngIf="showTotalCategoryList" class="chart-wrapper">
<ul class="icons-list">
<!-- New loop -->
<li *ngFor="let category of totalCategoryList | slice:0:totalCategoryLimit; let i=index">
<i [ngClass]="['icon-' + category.icon, getBootstrapColour(i)]"></i>
<div class="desc">
<div class="title">{{ category.category || 'N/A' }}</div>
</div>
<div class="value">
<div class="small text-muted">Bought</div>
<strong>{{ category.value || 'N/A' }}</strong>
</div>
</li>
<li *ngIf="totalCategoryList.length > totalCategoryLimit && disableCategoryButton == false" class="divider text-center">
<button type="button" class="btn btn-sm btn-link text-muted" (click)="categoryLoadMore()"><i class="icon-options"></i></button>
</li>
</ul>
</div>
</div>
</div>
</div><!--/.col-->
</div><!--/.row-->
</div>

75
src/app/dashboard/dashboard-customer.component.ts
View file

@ -116,81 +116,6 @@ export class DashboardCustomerComponent implements OnInit {
totalCategoryLimit: number = 10;
totalCategoryList: any[]=[];
public lineChartData: ChartDataSets[] = [
{ data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
{ data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' },
{ data: [180, 480, 770, 90, 1000, 270, 400], label: 'Series C', yAxisID: 'y-axis-1' }
];
public lineChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July','August','September','October','November','December'];
public lineChartOptions: (ChartOptions & { annotation: any }) = {
responsive: true,
scales: {
// We use this empty structure as a placeholder for dynamic theming.
xAxes: [{}],
yAxes: [
{
id: 'y-axis-0',
position: 'left',
},
{
id: 'y-axis-1',
position: 'right',
gridLines: {
color: 'rgba(255,0,0,0.3)',
},
ticks: {
fontColor: 'red',
}
}
]
},
annotation: {
annotations: [
{
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: 'March',
borderColor: 'orange',
borderWidth: 2,
label: {
enabled: true,
fontColor: 'orange',
content: 'LineAnno'
}
},
],
},
};
public lineChartColors: 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 lineChartLegend = true;
public lineChartType = 'line';
// Graph widgets
public widgetList = [

13
src/app/dashboard/dashboard.component.ts
View file

@ -44,6 +44,13 @@ export class DashboardComponent {
title: 'Sales Last 30 Days',
dataType: DataType.currency,
},
{
type: 'graph',
name: 'sales_last_365_days',
icon: 'icon-diamond',
title: 'Sales Last Year',
dataType: DataType.currency,
},
{
type: 'graph',
name: 'purchases_last_7_days',
@ -56,6 +63,12 @@ export class DashboardComponent {
title: 'Purchases Last 30 Days',
dataType: DataType.currency,
},
{
type: 'graph',
name: 'purchases_last_365_days;',
title: 'Purchases Last Year',
dataType: DataType.currency,
},
];
disableCategoryButton: boolean = false;

2
src/app/dashboard/dashboard.routing.ts
View file

@ -95,7 +95,7 @@ const routes: Routes = [
{
path: 'more-graphs-and-tables',
component: MoreStuffComponent,
data: { title: 'More Stuff'}
data: { title: 'Infographics'}
}
],
}

16
src/app/dashboard/more-graphs-and-tables.component.html
View file

@ -10,7 +10,6 @@
<canvas baseChart
[datasets]="supplierBubbleChartData"
[options]="supplierBubbleChartOptions"
[colors]="sampleColours"
[labels]="supplierBubbleChartLabels"
[legend]="showLegend"
[chartType]="supplierBubbleChartType">
@ -22,14 +21,13 @@
<div class="card-block">
<div class="row">
<div class="col-12">
<h4 class="card-title mb-0">Last 12 months</h4>
<h4 class="card-title mb-0">Spend amount and number of organisations</h4>
</div>
</div>
<div>
<canvas baseChart
[datasets]="yearSpendChartData"
[options]="yearSpendChartOptions"
[colors]="yearSpendChartColors"
[labels]="yearSpendChartLabels"
[legend]="showLegend"
[chartType]="yearSpendChartType">
@ -40,15 +38,23 @@
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-12">
<div class="col-sm-5">
<h4 class="card-title mb-0">Supplier Spend History</h4>
</div>
<div class="col-sm-7 hidden-sm-down">
<div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
<button class="btn btn-outline-secondary active" onclick="newGroup()"> New Group
</button>
</div>
</div>
</div>
</div>
<div>
<canvas baseChart #supplierChart
[datasets]="supplierMonthChartData"
[options]="supplierMonthChartOptions"
[colors]="sampleColours"
[colors]="supplierMonthChartColours"
[labels]="supplierMonthChartLabels"
[legend]="showLegend"
[chartType]="supplierMonthChartType">

48
src/app/dashboard/more-graphs-and-tables.component.ts
View file

@ -72,10 +72,9 @@ export class MoreStuffComponent implements OnInit {
{
data: [],
label: ["Spend"],
backgroundColor: 'green',
borderColor: 'blue',
hoverBackgroundColor: 'purple',
hoverBorderColor: 'red',
hoverBackgroundColor: 'blue',
hoverBorderColor: 'blue',
},
];
public supplierBubbleChartLabels: string[] = [];
@ -137,8 +136,8 @@ export class MoreStuffComponent implements OnInit {
label: ["Value"],
fill: false,
borderColor: 'red',
hoverBackgroundColor: '#ffa1b5',
hoverBorderColor: 'red',
hoverBackgroundColor: 'red',
yAxisID: 'y-value',
},
{
@ -146,7 +145,7 @@ export class MoreStuffComponent implements OnInit {
label: ["Count"],
fill: false,
borderColor: 'blue',
hoverBackgroundColor: 'blue',
hoverBackgroundColor: '#52afed',
hoverBorderColor: 'blue',
yAxisID: 'y-count',
},
@ -169,16 +168,8 @@ export class MoreStuffComponent implements OnInit {
public yearSpendChartColors: Color[] = [
{
backgroundColor: [
'red',
'green',
'blue',
'purple',
'yellow',
'brown',
'magenta',
'cyan',
'orange',
'pink'
'#ffa1b5',
'#52afed'
]
}
];
@ -204,14 +195,19 @@ export class MoreStuffComponent implements OnInit {
half.push(item.half_total);
quarter.push(item.quarter_total);
});
this.supplierMonthChartData[0].data = quarter.slice(0,10);
this.supplierMonthChartData[1].data = half.slice(0,10);
this.supplierMonthChartData[2].data = year.slice(0,10);
this.supplierMonthChartLabels = labels.slice(0,10);
this.supplierMonthChartData[0].data = quarter.slice(0,15);
this.supplierMonthChartData[1].data = half.slice(0,15);
this.supplierMonthChartData[2].data = year.slice(0,15);
this.supplierMonthChartLabels = labels.slice(0,15);
}
)
}
public newGroup() {
this.supplierMonthChartData[0].data = quarter.slice(0,15);
this.supplierMonthChartData[1].data = half.slice(0,15);
this.supplierMonthChartData[2].data = year.slice(0,15);
this.supplierMonthChartLabels = labels.slice(0,15);
}
public supplierMonthChartData: any[] = [
{
data: [],
@ -225,17 +221,17 @@ export class MoreStuffComponent implements OnInit {
data: [],
label: ["6 Month"],
fill: false,
borderColor: 'red',
hoverBorderColor: 'red',
hoverBackgroundColor: 'red',
borderColor: 'blue',
hoverBorderColor: 'blue',
hoverBackgroundColor: 'blue',
},
{
data: [],
label: ["12 Month"],
fill: false,
borderColor: 'red',
hoverBorderColor: 'red',
hoverBackgroundColor: 'red',
borderColor: 'orange',
hoverBorderColor: 'orange',
hoverBackgroundColor: 'orange',
},
];
public supplierMonthChartOptions: any = {

16
src/app/layouts/full-layout.component.html
View file

@ -38,6 +38,14 @@
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/more-graphs-and-tables']">
<div class="row no-gutters align-items-center">
<div class="col-2"><i class="icon-map"></i></div>
<div class="col-10">Infographics</div>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/add-data']">
<div class="row no-gutters align-items-center">
@ -102,14 +110,6 @@
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/more-graphs-and-tables']">
<div class="row no-gutters align-items-center">
<div class="col-2"><i class="icon-map"></i></div>
<div class="col-10">Bubble Charts</div>
</div>
</a>
</li>
<li *ngIf="accountType == 'organisation'" class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/payroll-log']">
<div class="row no-gutters align-items-center">

3
src/app/panels/graph-panel.component.html
View file

@ -7,8 +7,7 @@
<div class="col-sm-7 hidden-sm-down">
<div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
<label class="btn btn-outline-secondary active">
<input type="radio" name="options" id="option2" checked> Week
<label class="btn btn-outline-secondary active"> Week
</label>
</div>
</div>

1
src/app/panels/org-pie-panel.component.html
View file

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

31
src/app/panels/org-pie-panel.component.ts
View file

@ -15,6 +15,37 @@ export class OrgPiePanel implements OnInit {
public chartType = 'doughnut';
public chartLegend = true;
public doughnutChartDataLocal: number[] = [];
public doughnutChartColors: any[] = [
{
backgroundColor: [
'red',
'green',
'pink',
'purple',
'yellow',
'brown',
'magenta',
'cyan',
'orange',
'blue'
]
},
{
borderColor: [
'red',
'green',
'pink',
'purple',
'yellow',
'brown',
'magenta',
'cyan',
'orange',
'blue'
]
}
];
public doughnutChartLabelsLocal: string[] = [];
constructor(