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

Misc chart work

Browse source
This commit is contained in:
Tom Slater 2019-08-20 16:47:20 +01:00
parent 4181a09b96
commit 9fbe36e401
11 changed files with 48 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/app/dashboard/add-data.component.html
View file

@ -156,14 +156,14 @@
<div class="form-group row"> <div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input"><strong>Total amount of Employees</strong></label> <label class="col-md-3 form-control-label" for="text-input"><strong>Total amount of Employees</strong></label>
<div class="col-md-9"> <div class="col-md-9">
<input type="number" class="form-control" formControlName="employee_amount" placeholder="0"> <input type="number" class="form-control" formControlName="employee_amount" placeholder="0" min="0">
<span class="help-block">Enter the amount of employees the organisation has for the entry month.</span> <span class="help-block">Enter the amount of employees the organisation has for the entry month.</span>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input"><strong>Total amount of local Employees</strong></label> <label class="col-md-3 form-control-label" for="text-input"><strong>Total amount of local Employees</strong></label>
<div class="col-md-9"> <div class="col-md-9">
<input type="number" class="form-control" formControlName="local_employee_amount" placeholder="0"> <input type="number" class="form-control" formControlName="local_employee_amount" placeholder="0" min="0">
<span class="help-block">Enter the amount of employees that live locally to the organisation for the entry month.</span> <span class="help-block">Enter the amount of employees that live locally to the organisation for the entry month.</span>
</div> </div>
</div> </div>

8
src/app/dashboard/category-month.component.html
View file

@ -1,6 +1,6 @@
<div class="animated fadeIn"> <div class="animated fadeIn">
<div class=row> <div class=row>
<div class="col-md-6"> <div *ngIf="weekList1" class="col-md-6">
<div class="card"> <div class="card">
<div class="card-block"> <div class="card-block">
<div class="row"> <div class="row">
@ -42,7 +42,7 @@
</div> </div>
</div> </div>
</div><!--/.col--> </div><!--/.col-->
<div class="col-md-6"> <div *ngIf="weekList2" class="col-md-6">
<div class="card"> <div class="card">
<div class="card-block"> <div class="card-block">
<div class="row"> <div class="row">
@ -84,7 +84,7 @@
</div> </div>
</div> </div>
</div><!--/.col--> </div><!--/.col-->
<div class="col-md-6"> <div *ngIf="weekList3" class="col-md-6">
<div class="card"> <div class="card">
<div class="card-block"> <div class="card-block">
<div class="row"> <div class="row">
@ -126,7 +126,7 @@
</div> </div>
</div> </div>
</div><!--/.col--> </div><!--/.col-->
<div class="col-md-6"> <div *ngIf="weekList4" class="col-md-6">
<div class="card"> <div class="card">
<div class="card-block"> <div class="card-block">
<div class="row"> <div class="row">

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

@ -17,10 +17,10 @@
<div id="stacked-bar" dx-chart="chartOptions"></div> <div id="stacked-bar" dx-chart="chartOptions"></div>
</div> --> </div> -->
</div><!--/.col--> </div><!--/.col-->
<div *ngIf="showCategoryDoughnutChart" class="col-xl-6"> <!--<div *ngIf="showCategoryDoughnutChart" class="col-xl-6">
<div class="card"> <div class="card"> -->
<!-- <body style="background-color:rgb(0,0,0);"> --> <!-- <body style="background-color:rgb(0,0,0);"> -->
<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">Spending by Category</h4> <h4 class="card-title mb-0">Spending by Category</h4>
@ -31,15 +31,15 @@
[datasets]="doughnutChartDataCategory" [datasets]="doughnutChartDataCategory"
[labels]="doughnutChartLabelsCategory" [labels]="doughnutChartLabelsCategory"
[options]="doughnutChartOptionsCategory" [options]="doughnutChartOptionsCategory"
[colors]= "doughnutChartColoursCategory"
[legend]="chartLegend" [legend]="chartLegend"
[chartType]="chartType" [chartType]="chartType"
(chartHover)="chartHovered($event)" (chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas> (chartClick)="chartClicked($event)"></canvas>
</div> </div>
</div> </div> -->
<!-- </body> --> <!-- </body> -->
</div> <!-- </div> --><!--/.col-->
</div><!--/.col-->
<div *ngIf="showEssentialBarChart" class="col-xl-6"> <div *ngIf="showEssentialBarChart" class="col-xl-6">
<div class="card"> <div class="card">
<div class="card-block"> <div class="card-block">

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

@ -35,10 +35,25 @@ 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 = 'bar'; public chartType = 'doughnut';
public chartLegend = true; public chartLegend = true;
public doughnutChartDataCategory: any[] = []; public doughnutChartDataCategory: any[] = [];
public doughnutChartLabelsCategory: string[] = []; public doughnutChartLabelsCategory: string[] = [];
public doughnutChartColoursCategory: any[] = [
{
backgroundColor:[
'red',
'green',
'blue',
'purple',
'yellow',
'brown',
'magenta',
'cyan',
'orange',
'pink'
]
}];
public doughnutChartOptionsCategory:any = { public doughnutChartOptionsCategory:any = {
tooltips: { tooltips: {

2
src/app/dashboard/dashboard.component.html
View file

@ -60,7 +60,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">Spending by Category</h4> <h4 class="card-title mb-0">Last week's spending by Category</h4>
</div> </div>
</div> </div>
<div class="chart-wrapper"> <div class="chart-wrapper">

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

@ -46,9 +46,9 @@ export class DashboardComponent {
}, },
{ {
type: 'graph', type: 'graph',
name: 'sales_last_year', name: 'sales_last_quart',
icon: 'icon-diamond', icon: 'icon-diamond',
title: 'Sales Last Year', title: 'Sales Last Quart',
dataType: DataType.currency, dataType: DataType.currency,
}, },
{ {
@ -65,8 +65,8 @@ export class DashboardComponent {
}, },
{ {
type: 'graph', type: 'graph',
name: 'purchases_last_year;', name: 'purchases_last_quart;',
title: 'Purchases Last Year', title: 'Purchases Last Quart',
dataType: DataType.currency, dataType: DataType.currency,
}, },
]; ];

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

@ -5,12 +5,12 @@
<div class="col-sm-8"> <div class="col-sm-8">
<h4 class="card-title mb-0">Supplier spend amount and number of purchases</h4> <h4 class="card-title mb-0">Supplier spend amount and number of purchases</h4>
</div> </div>
<div class="col-sm-5 hidden-sm-down" *ngIf="isBubbleChartLoaded"> <div class="col-sm-4 hidden-sm-down" *ngIf="isBubbleChartLoaded">
<input type="date" [(ngModel)]="bubbleChartBegin" (change)="bubbleChartUpdate()"> <input type="date" [(ngModel)]="bubbleChartBegin" (change)="bubbleChartUpdate()">
<input type="date" [(ngModel)]="bubbleChartEnd" (change)="bubbleChartUpdate()"> <input type="date" [(ngModel)]="bubbleChartEnd" (change)="bubbleChartUpdate()">
</div> </div>
</div> </div>
<div class="col-sm-7" *ngIf="!isBubbleChartLoaded"> <div class="col-sm-12" *ngIf="!isBubbleChartLoaded">
<div class="spinner"></div> <div class="spinner"></div>
</div> </div>
<div *ngIf="isBubbleChartLoaded"> <div *ngIf="isBubbleChartLoaded">
@ -30,10 +30,6 @@
<div class="col-sm-8"> <div class="col-sm-8">
<h4 class="card-title mb-0">Spend amount and number of organisations</h4> <h4 class="card-title mb-0">Spend amount and number of organisations</h4>
</div> </div>
<div class="col-sm-5 hidden-sm-down">
<!-- <input type="date" id="yearSpendChartBegin" name="yearSpendChartBegin" ng-model="yearSpendChartBegin" ng-change="yearSpendChartBegin"> -->
<!-- <input type="date" id="yearSpendChartEnd" name="yearSpendChartEnd" ng-model="yearSpendChartEnd" ng-change="yearSpendChartEnd"> -->
</div>
</div> </div>
<div> <div>
<canvas baseChart <canvas baseChart
@ -65,4 +61,4 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>

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

@ -41,7 +41,7 @@ export class MoreStuffComponent implements OnInit {
backgroundColor: [ backgroundColor: [
'red', 'red',
'green', 'green',
'blue', '#52afed',
'purple', 'purple',
'yellow', 'yellow',
'brown', 'brown',
@ -66,7 +66,7 @@ export class MoreStuffComponent implements OnInit {
passed_graph_data.data.map(item=> { passed_graph_data.data.map(item=> {
let is_item_in_range = (new Date(item.date.substring(0, 10)) >= new Date(start_range) && new Date(item.date.substring(0, 10)) <= new Date(end_range)); let is_item_in_range = (new Date(item.date.substring(0, 10)) >= new Date(start_range) && new Date(item.date.substring(0, 10)) <= new Date(end_range));
// there are a lot of `new Date(blah)` but that is what works for some reason. // there are a lot of `new Date(blah)` but that is what works for some reason.
// console.log("item.date : " + (item.date)); // console.log("item.date : " + (item.date));
// console.log("Date(item.date) : " + new Date(item.date)); // console.log("Date(item.date) : " + new Date(item.date));
// console.log("Date(item.date.substring(0, 10)) : " + new Date(item.date.substring(0, 10))); // console.log("Date(item.date.substring(0, 10)) : " + new Date(item.date.substring(0, 10)));
@ -78,11 +78,11 @@ export class MoreStuffComponent implements OnInit {
// console.log("item.date <= end_range: " + (new Date(item.date) <= new Date(end_range))); // console.log("item.date <= end_range: " + (new Date(item.date) <= new Date(end_range)));
// console.log("is_item_in_range: " + is_item_in_range); // console.log("is_item_in_range: " + is_item_in_range);
// console.log("----------------------"); // console.log("----------------------");
if (is_item_in_range) { if (is_item_in_range) {
graph_data.push({ graph_data.push({
t: new Date(item.date.substring(0, 10)), t: new Date(item.date.substring(0, 10)),
r: item.value > 1000000 ? (item.value / 1000000) + 10 : (item.value / 100000) + 5, r: item.value > 1000000 ? (item.value / 100000) : (item.value / 100000) + 5,
supplier: item.seller, supplier: item.seller,
y: item.count, y: item.count,
value: item.value, value: item.value,
@ -96,7 +96,7 @@ export class MoreStuffComponent implements OnInit {
passed_graph_data.data.map(item => { passed_graph_data.data.map(item => {
graph_data.push({ graph_data.push({
t: item.date, t: item.date,
r: item.value > 1000000 ? (item.value / 1000000) + 10 : (item.value / 100000) + 5, r: item.value > 1000000 ? (item.value / 200000) : (item.value / 100000) + 5,
supplier: item.seller, supplier: item.seller,
y: item.count, y: item.count,
value: item.value, value: item.value,

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

@ -18,30 +18,30 @@ export class OrgPiePanel implements OnInit {
public doughnutChartColors: any[] = [ public doughnutChartColors: any[] = [
{ {
backgroundColor: [ backgroundColor: [
'red', '#ffa1b5',
'green', 'green',
'pink', '#52afed',
'purple', 'purple',
'yellow', 'yellow',
'brown', 'brown',
'magenta', 'magenta',
'cyan', 'cyan',
'orange', 'orange',
'blue' 'pink'
] ]
}, },
{ {
borderColor: [ borderColor: [
'red', 'red',
'green', 'green',
'pink', 'blue',
'purple', 'purple',
'yellow', 'yellow',
'brown', 'brown',
'magenta', 'magenta',
'cyan', 'cyan',
'orange', 'orange',
'blue' 'pink'
] ]
}, },
{ borderWidth: [100] { borderWidth: [100]

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

@ -1,22 +1,9 @@
<div class="card"> <div class="card">
<div class="card-block"> <div class="card-block">
<div class="row"> <div class="row">
<div class="col-7"> <div class="col-12">
<h4 class="card-title mb-0">All Purchases by Category</h4> <h4 class="card-title mb-0">All Purchases by Category</h4>
</div> </div>
<div class="col-sm-5 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">
<select>
<option value="Day">Day</option>
<option value="Week">Week</option>
<option value="Month">Month</option>
<option value="Year">Year</option>
<option value="All Time">All Time</option>
</select>
</div>
</div>
</div>
</div> </div>
<div class="chart-wrapper"> <div class="chart-wrapper">
<canvas baseChart class="chart" <canvas baseChart class="chart"

2
src/environments/environment.ts
View file

@ -5,7 +5,7 @@
export const environment = { export const environment = {
production: false, production: false,
apiUrl: 'https://dev.peartrade.org/api', apiUrl: 'https://dev.localspend.co.uk/api',
mapApiKey: 'CHANGEME', mapApiKey: 'CHANGEME',
enableAnalytics: false, enableAnalytics: false,
analyticsKey: 'CHANGEME', analyticsKey: 'CHANGEME',