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

Minor changes for Felix

Browse source
This commit is contained in:
Tom Slater 2019-07-09 12:41:17 +01:00
parent ee636b87fa
commit 2998f0b3da
10 changed files with 152 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -12,13 +12,13 @@
</div><!--/.row--> </div><!--/.row-->
<div class=row> <div class=row>
<div class="col-xl-6"> <div class="col-xl-6">
<panel-pie></panel-pie> --><!--All Purchases --> <panel-pie></panel-pie><!--All Purchases -->
<!-- <div class="demo-container" ng-app="stacked-bar" ng-controller="stacked-bar"> <!-- <div class="demo-container" ng-app="stacked-bar" ng-controller="stacked-bar">
<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">
@ -34,8 +34,7 @@
[legend]="chartLegend" [legend]="chartLegend"
[chartType]="chartType" [chartType]="chartType"
(chartHover)="chartHovered($event)" (chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"> (chartClick)="chartClicked($event)"></canvas>
</canvas>
</div> </div>
</div> </div>
<!-- </body> --> <!-- </body> -->
@ -149,6 +148,16 @@
<h4 class="card-title float-left mb-0">All Purchases by Category</h4> <h4 class="card-title float-left mb-0">All Purchases by Category</h4>
</div><!--/.col--> </div><!--/.col-->
</div><!--/.row--> </div><!--/.row-->
<div class="chart-wrapper">
<canvas baseChart class="chart"
[datasets]="barChartDataCategory"
[labels]="barChartLabelsCategory"
[options]="barChartOptionsCategory"
[legend]="barChartLegendCategory"
[chartType]="barChartTypeCategory"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
<div *ngIf="showTotalCategoryList" class="chart-wrapper"> <div *ngIf="showTotalCategoryList" class="chart-wrapper">
<ul class="icons-list"> <ul class="icons-list">
<!-- New loop --> <!-- New loop -->

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

@ -30,7 +30,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 = 'polarArea'; public chartType = 'doughnut';
public chartLegend = true; public chartLegend = true;
public doughnutChartDataCategory: any[] = []; public doughnutChartDataCategory: any[] = [];
public doughnutChartLabelsCategory: string[] = []; public doughnutChartLabelsCategory: string[] = [];
@ -150,7 +150,9 @@ export class DashboardCustomerComponent implements OnInit {
this.setWeekData(result); this.setWeekData(result);
this.setChartData(result.data.cat_total); this.setChartData(result.data.cat_total);
this.totalCategoryList = result.data.cat_list; this.totalCategoryList = result.data.cat_list;
this.showTotalCategoryList = true; if (this.totalCategoryList) {
this.showTotalCategoryList = true;
}
this.purchaseEssential = result.data.essentials.purchase_no_essential_total; this.purchaseEssential = result.data.essentials.purchase_no_essential_total;
this.purchaseNotEssential = result.data.essentials.purchase_no_total - this.purchaseEssential; this.purchaseNotEssential = result.data.essentials.purchase_no_total - this.purchaseEssential;
this.barChartDataEssential = [ this.barChartDataEssential = [

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

@ -18,7 +18,6 @@ import { LeaderboardComponent } from './leaderboard.component';
import { MapComponent } from './map.component'; import { MapComponent } from './map.component';
import { TrailMapComponent } from './trail-map.component'; import { TrailMapComponent } from './trail-map.component';
import { SuppliersComponent } from './suppliers.component'; import { SuppliersComponent } from './suppliers.component';
// Using child path to allow for FullLayout theming // Using child path to allow for FullLayout theming
const routes: Routes = [ const routes: Routes = [
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' }, { path: '', redirectTo: '/dashboard', pathMatch: 'full' },

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

@ -24,7 +24,7 @@
<tr> <tr>
<th>Position</th> <th>Position</th>
<th>Name</th> <th>Name</th>
<th>Amount</th> <th class="js-sort-number">Gross amount</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>

26
src/app/dashboard/suppliers.component.html
View file

@ -1,3 +1,4 @@
<script type="text/javascript" charset="utf8" src="/home/tomslater/Documents/FoodLoop-Web/src/sort-table.js"></script>
<div class="animated fadeIn"> <div class="animated fadeIn">
<div class="form-group row"> <div class="form-group row">
<table class="table table-striped table-hover"> <table class="table table-striped table-hover">
@ -11,23 +12,22 @@
<tbody> <tbody>
<!-- table body - name, postcode and spend data should be presented here in cost descending order --> <!-- table body - name, postcode and spend data should be presented here in cost descending order -->
<tr recur-result *ngFor="let recur of recurList" tr.names="name" tr.recur="recur" (onClick)="recurClick($event, template)"></tr> <tr recur-result *ngFor="let recur of recurList" tr.names="name" tr.recur="recur" (onClick)="recurClick($event, template)"></tr>
<!-- <tr> <tr>
<td>Supplier's Name</td> <td>Bill's Building's</td>
<td>Supplier's Postcode</td> <td>LA13RB</td>
<td>Supplier's Spend</td> <td>£34.64</td>
</tr> </tr>
<tr> <tr>
<td>Supplier 2's Name</td> <td>Sam's Snake</td>
<td>Supplier 2's Postcode</td> <td>TRY3R3</td>
<td>Supplier 2's Spend</td> <td>£567.76</td>
</tr> </tr>
<tr> <tr>
<td>Supplier 3's Name</td> <td>Lloyds</td>
<td>Supplier 3's Postcode</td> <td>ABV134</td>
<td>Supplier 3's Spend</td> <td>£9.00</td>
</tr> </tr>
</tbody> --> </tbody>
</table> </table>
</div> </div>
</div> </div><!--/.col-->

2
src/app/dashboard/suppliers.component.ts
View file

@ -26,7 +26,7 @@ export class SuppliersComponent implements OnInit, AfterViewInit {
) { } ) { }
ngOnInit(): void { ngOnInit(): void {
} }
ngAfterViewInit() { ngAfterViewInit() {

17
src/app/panels/bubble-panel.html Normal file
View file

@ -0,0 +1,17 @@
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-12">
<h4 class="card-title mb-0">Spend by company and sector</h4>
</div>
</div>
<div class"chart-wrapper">
<canvas baseChart class="chart"
[datasets]="bubbleChartData"
[options]="bubbleChartOptions"
[colors]="bubbleChartColors"
[legend]="bubbleChartLegend"
[chartType]="bubbleChartType"></canvas>
</div>
</div>
</div>

98
src/app/panels/bubble-panel.ts Normal file
View file

@ -0,0 +1,98 @@
import { Component, OnInit } from '@angular/core';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { Color } from 'ng2-charts';
@Component({
selector: 'app-bubble-chart',
templateUrl: './bubble-chart.component.html',
styleUrls: ['./bubble-chart.component.scss']
})
export class BubbleChartComponent implements OnInit {
public bubbleChartOptions: ChartOptions = {
responsive: true,
scales: {
xAxes: [
{
ticks: {
min: 0,
max: 30,
}
}
],
yAxes: [
{
ticks: {
min: 0,
max: 30,
}
}
]
}
};
public bubbleChartType: ChartType = 'bubble';
public bubbleChartLegend = true;
public bubbleChartData: ChartDataSets[] = [
{
data: [
{ x: 10, y: 10, r: 10 },
{ x: 15, y: 5, r: 15 },
{ x: 26, y: 12, r: 23 },
{ x: 7, y: 8, r: 8 },
],
label: 'Series A',
backgroundColor: 'green',
borderColor: 'blue',
hoverBackgroundColor: 'purple',
hoverBorderColor: 'red',
},
];
public bubbleChartColors: Color[] = [
{
backgroundColor: [
'red',
'green',
'blue',
'purple',
'yellow',
'brown',
'magenta',
'cyan',
'orange',
'pink'
]
}
];
constructor() { }
ngOnInit() {
}
// events
public chartClicked({ event, active }: { event: MouseEvent, active: {}[] }): void {
console.log(event, active);
}
public chartHovered({ event, active }: { event: MouseEvent, active: {}[] }): void {
console.log(event, active);
}
private rand(max: number) {
return Math.trunc(Math.random() * max);
}
private randomPoint(maxCoordinate: number) {
const x = this.rand(maxCoordinate);
const y = this.rand(maxCoordinate);
const r = this.rand(30) + 5;
return { x, y, r };
}
public randomize(): void {
const numberOfPoints = this.rand(5) + 5;
const data = Array.apply(null, { length: numberOfPoints }).map(r => this.randomPoint(30));
this.bubbleChartData[0].data = data;
}
}

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

@ -12,7 +12,7 @@ import { ChartData } from '../_interfaces/chart-data';
export class PiePanel implements OnInit { export class PiePanel implements OnInit {
public chartType = 'panel-pie'; public chartType = 'doughnut';
public chartLegend = true; public chartLegend = true;
public doughnutChartDataLocal: number[] = []; public doughnutChartDataLocal: number[] = [];
public doughnutChartLabelsLocal: string[] = []; public doughnutChartLabelsLocal: string[] = [];

4
src/scss/_custom.scss
View file

@ -73,7 +73,9 @@ agm-map {
margin-bottom: 2px; margin-bottom: 2px;
} }
} }
.small {
padding-left: 20px;
}
&.legend { &.legend {
text-align: center; text-align: center;