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

Merge commit '2998f0b3da1a7189fcd35b5b76bbeb42e7ed41e9' into felix/newSection-testing

Browse source
This commit is contained in:
Felix 2019-07-09 12:50:45 +01:00
commit 2ded74f63c
10 changed files with 152 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -12,7 +12,7 @@
</div><!--/.row-->
<div class=row>
<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 id="stacked-bar" dx-chart="chartOptions"></div>
</div> -->
@ -34,8 +34,7 @@
[legend]="chartLegend"
[chartType]="chartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">
</canvas>
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
<!-- </body> -->
@ -149,6 +148,16 @@
<h4 class="card-title float-left mb-0">All Purchases by Category</h4>
</div><!--/.col-->
</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">
<ul class="icons-list">
<!-- New loop -->

4
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',
'bg-danger', 'bg-warning', 'bg-info'];
public chartType = 'polarArea';
public chartType = 'doughnut';
public chartLegend = true;
public doughnutChartDataCategory: any[] = [];
public doughnutChartLabelsCategory: string[] = [];
@ -150,7 +150,9 @@ export class DashboardCustomerComponent implements OnInit {
this.setWeekData(result);
this.setChartData(result.data.cat_total);
this.totalCategoryList = result.data.cat_list;
if (this.totalCategoryList) {
this.showTotalCategoryList = true;
}
this.purchaseEssential = result.data.essentials.purchase_no_essential_total;
this.purchaseNotEssential = result.data.essentials.purchase_no_total - this.purchaseEssential;
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 { TrailMapComponent } from './trail-map.component';
import { SuppliersComponent } from './suppliers.component';
// Using child path to allow for FullLayout theming
const routes: Routes = [
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },

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

@ -24,7 +24,7 @@
<tr>
<th>Position</th>
<th>Name</th>
<th>Amount</th>
<th class="js-sort-number">Gross amount</th>
</tr>
</thead>
<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="form-group row">
<table class="table table-striped table-hover">
@ -11,23 +12,22 @@
<tbody>
<!-- 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>
<td>Supplier's Name</td>
<td>Supplier's Postcode</td>
<td>Supplier's Spend</td>
<tr>
<td>Bill's Building's</td>
<td>LA13RB</td>
<td>£34.64</td>
</tr>
<tr>
<td>Supplier 2's Name</td>
<td>Supplier 2's Postcode</td>
<td>Supplier 2's Spend</td>
<td>Sam's Snake</td>
<td>TRY3R3</td>
<td>£567.76</td>
</tr>
<tr>
<td>Supplier 3's Name</td>
<td>Supplier 3's Postcode</td>
<td>Supplier 3's Spend</td>
<td>Lloyds</td>
<td>ABV134</td>
<td>£9.00</td>
</tr>
</tbody> -->
</tbody>
</table>
</div>
</div>
</div><!--/.col-->

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 {
public chartType = 'panel-pie';
public chartType = 'doughnut';
public chartLegend = true;
public doughnutChartDataLocal: number[] = [];
public doughnutChartLabelsLocal: string[] = [];

4
src/scss/_custom.scss
View file

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