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

More graphs with testing data

Browse source
This commit is contained in:
Tom Bloor 2019-07-15 01:17:01 +01:00
parent a3522bd902
commit 5dad9d4648
8 changed files with 304 additions and 134 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -22,7 +22,6 @@ $RECYCLE.BIN/
/bower_components /bower_components
# IDEs and editors # IDEs and editors
/.idea
.project .project
.classpath .classpath
*.launch *.launch

6
.idea/misc.xml Normal file
View file

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectRootManager">
<output url="file://$PROJECT_DIR$/out" />
</component>
</project>

8
.idea/modules.xml Normal file
View file

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/Foodloop-Web.iml" filepath="$PROJECT_DIR$/Foodloop-Web.iml" />
</modules>
</component>
</project>

6
.idea/vcs.xml Normal file
View file

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>

12
Foodloop-Web.iml Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager" inherit-compiler-output="true">
<exclude-output />
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/dist" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

1
package.json
View file

@ -8,6 +8,7 @@
"scripts": { "scripts": {
"ng": "ng", "ng": "ng",
"start": "ng serve", "start": "ng serve",
"start:dev": "ng serve --optimization=false --configuration=dev",
"build": "ng build", "build": "ng build",
"test": "ng test", "test": "ng test",
"test:ci": "ng test --watch=false", "test:ci": "ng test --watch=false",

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

@ -1,28 +1,59 @@
<script src="node_modules/chart.js/src/chart.js"></script>
<div class="animated fadeIn"> <div class="animated fadeIn">
<!-- <div class="form-group row"> --> <div class="card">
<div class="card"> <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">Spend by Company Type</h4>
<h4 class="card-title mb-0">Spend by Company Type</h4>
</div>
</div>
<div style="display: block">
<canvas baseChart
[datasets]="bubbleChartDataCategory"
[options]="bubbleChartOptionsCategory"
[colors]="sampleBubbleChartColors"
[labels]="bubbleChartLabelsCategory"
[legend]="chartLegend"
[chartType]="chartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">
<!--bootstrapColours-->
</canvas>
</div>
</div> </div>
</div>
<div>
<canvas baseChart
[datasets]="supplierBubbleChartData"
[options]="supplierBubbleChartOptions"
[colors]="sampleColours"
[labels]="supplierBubbleChartLabels"
[legend]="showLegend"
[chartType]="supplierBubbleChartType">
</canvas>
</div>
</div> </div>
<!-- </div> --> </div>
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-12">
<h4 class="card-title mb-0">Last 12 months</h4>
</div>
</div>
<div>
<canvas baseChart
[datasets]="yearSpendChartData"
[options]="yearSpendChartOptions"
[colors]="yearSpendChartColors"
[labels]="yearSpendChartLabels"
[legend]="showLegend"
[chartType]="yearSpendChartType">
</canvas>
</div>
</div>
</div>
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-12">
<h4 class="card-title mb-0">Supplier Spend History</h4>
</div>
</div>
<div>
<canvas baseChart
[datasets]="supplierMonthChartData"
[options]="supplierMonthChartOptions"
[colors]="sampleColours"
[labels]="supplierMonthChartLabels"
[legend]="showLegend"
[chartType]="supplierMonthChartType">
</canvas>
</div>
</div>
</div>
</div> </div>

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

@ -1,127 +1,26 @@
import { Component, OnInit, AfterViewInit, Input, Output, EventEmitter, ViewChild, TemplateRef } from '@angular/core'; import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
import { ApiService } from '../providers/api-service'; import {ApiService} from '../providers/api-service';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js'; import {Color} from 'ng2-charts';
import { Color } from 'ng2-charts'; import {CurrencyPipe} from '@angular/common';
import { CurrencyPipe } from '@angular/common';
import { DataType } from '../shared/data-types.enum';
import * as moment from 'moment';
import { BubbleChartComponent } from '../panels/bubble-panel.component';
import { AgmCoreModule } from '@agm/core';
import { BsModalService, ModalDirective } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
// interface RecurSupplierData {
// name : string;
// }
@Component({ @Component({
templateUrl: 'more-graphs-and-tables.component.html', templateUrl: 'more-graphs-and-tables.component.html',
}) })
export class MoreStuffComponent implements OnInit { export class MoreStuffComponent implements OnInit {
// @Input() public recurList: Array<RecurSupplierData>;
@Output() public onClick = new EventEmitter(); @Output() public onClick = new EventEmitter();
@Input() public categories: any; @Input() public categories: any;
public recurClick(event: any): void {
this.onClick.emit( event );
}
constructor( constructor(
private api: ApiService, private api: ApiService,
private currencyPipe: CurrencyPipe, private currencyPipe: CurrencyPipe,
) { } ) {
}
ngOnInit(): void { ngOnInit(): void {
} }
// main vars public showLegend = true;
public sampleColours: Color[] = [
public bootstrapColours: string[] = ['bg-primary', 'bg-secondary', 'bg-success',
'bg-danger', 'bg-warning', 'bg-info'];
// REAL chart data
public chartType = 'bubble';
public chartLegend = true;
public bubbleChartDataCategory: any[] = [
{
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',
},
{
data: [
{ x: 10, y: 2, r: 10 },
{ x: 15, y: 1, r: 15 },
{ x: 26, y: 7, r: 23 },
{ x: 5, y: 8, r: 8 },
],
label: ["Series B"],
backgroundColor: 'green',
borderColor: 'blue',
hoverBackgroundColor: 'purple',
hoverBorderColor: 'red',
},
];
public bubbleChartLabelsCategory: string[] = [];
public bubbleChartOptionsCategory:any = {
responsive: true,
scales: {
xAxes: [
{
ticks: {
min: 0,
}
}
],
yAxes: [
{
ticks: {
min: 0,
}
}
]
},
tooltips: {
callbacks: {
label: (tooltip, data) => {
return this.tooltipLabelCallback(tooltip, data);
},
},
},
}
private setChartData(dataCat: any) {
// now we just need some data and it will display!
}
public chartClicked({ event, active }: { event: MouseEvent, active: {}[] }): void {
console.log(event, active);
}
public chartHovered({ event, active }: { event: MouseEvent, active: {}[] }): void {
console.log(event, active);
}
// functions
private tooltipLabelCallback(tooltipItem: any, data: any) {
var dataset = data.datasets[tooltipItem.datasetIndex];
var value = dataset.data[tooltipItem.index];
return this.currencyPipe.transform(value, 'GBP', 'symbol', '1.2-2');
}
// SAMPLE chart data
public sampleBubbleChartColors: Color[] = [
{ {
backgroundColor: [ backgroundColor: [
'red', 'red',
@ -137,4 +36,212 @@ data: [
] ]
} }
]; ];
/*
* Supplier Bubble Chart Setup
*/
public supplierBubbleChartType = 'bubble';
public supplierBubbleChartData: any[] = [
{
data: [
{t: '20180123', y: 54.34, r: 32, supplier: 'Tims', count: 4},
{t: '20180101', y: 123.34, r: 123, supplier: 'Daves', count: 12},
{t: '20180314', y: 11.345, r: 33, supplier: 'erry', count: 13},
{t: '20180615', y: 112.6, r: 22, supplier: 'qwert', count: 124},
{t: '20180714', y: 91234.5, r: 8, supplier: 'Bobs', count: 1234},
{t: '20181230', y: 23.12, r: 67, supplier: 'Ben Bobs', count: 4},
],
label: ["Series A"],
backgroundColor: 'green',
borderColor: 'blue',
hoverBackgroundColor: 'purple',
hoverBorderColor: 'red',
},
];
public supplierBubbleChartLabels: string[] = [];
public supplierBubbleChartOptions: any = {
responsive: true,
scales: {
xAxes: [{
type: 'time',
time: {
parser: 'YYYYMMDD',
unit: 'month'
}
}],
yAxes: [
{
ticks: {
min: 0,
}
}
]
},
tooltips: {
callbacks: {
label: (tooltip, data) => {
return this.bubbleTooltipCallback(tooltip, data);
},
},
},
};
private bubbleTooltipCallback(tooltipItem: any, data: any) {
let dataset = data.datasets[tooltipItem.datasetIndex];
let value = dataset.data[tooltipItem.index];
return `${value.supplier}: ${this.currencyPipe.transform(value.y, 'GBP', 'symbol', '1.2-2')} over ${value.count} purchases`;
}
public yearSpendChartData: any[] = [
{
data: [
{t: '20180101', y: 123.34},
{t: '20180314', y: 11.345},
{t: '20180615', y: 112.6},
{t: '20180714', y: 91234.5},
{t: '20181230', y: 23.12},
],
label: ["Value"],
fill: false,
borderColor: 'red',
hoverBorderColor: 'red',
hoverBackgroundColor: 'red',
yAxisID: 'y-value',
},
{
data: [
{t: '20180101', y: 12},
{t: '20180314', y: 11},
{t: '20180615', y: 1},
{t: '20180714', y: 9},
{t: '20181230', y: 23},
],
label: ["Count"],
fill: false,
borderColor: 'blue',
hoverBackgroundColor: 'blue',
hoverBorderColor: 'blue',
yAxisID: 'y-count',
},
];
public yearSpendChartOptions: any = {
responsive: true,
scales: {
xAxes: [{
type: 'time',
time: {
parser: 'YYYYMMDD',
unit: 'month'
}
}],
yAxes: [
{id: 'y-value', position: 'left', beginAtZero: true},
{id: 'y-count', position: 'right', beginAtZero: true},
]
},
};
public yearSpendChartColors: Color[] = [
{
backgroundColor: [
'red',
'green',
'blue',
'purple',
'yellow',
'brown',
'magenta',
'cyan',
'orange',
'pink'
]
}
];
public yearSpendChartLabels: string[] = [];
public yearSpendChartType = 'line';
randomData() {
return Math.random();
}
public supplierMonthChartData: any[] = [
{
data: [
this.randomData(),
this.randomData(),
this.randomData(),
this.randomData(),
this.randomData(),
this.randomData(),
this.randomData(),
this.randomData(),
],
label: ["3 Month"],
fill: false,
borderColor: 'red',
hoverBorderColor: 'red',
hoverBackgroundColor: 'red',
},
{
data: [
this.randomData(),
this.randomData(),
this.randomData(),
this.randomData(),
this.randomData(),
this.randomData(),
this.randomData(),
this.randomData(),
],
label: ["6 Month"],
fill: false,
borderColor: 'red',
hoverBorderColor: 'red',
hoverBackgroundColor: 'red',
},
{
data: [
this.randomData(),
this.randomData(),
this.randomData(),
this.randomData(),
this.randomData(),
this.randomData(),
this.randomData(),
this.randomData(),
],
label: ["12 Month"],
fill: false,
borderColor: 'red',
hoverBorderColor: 'red',
hoverBackgroundColor: 'red',
},
];
public supplierMonthChartOptions: any = {
responsive: true,
scales: {
xAxes: [],
yAxes: []
},
};
public supplierMonthChartLabels: string[] = [
'some name',
'another name',
'more names',
'again',
'some',
'random',
'names'
];
public supplierMonthChartType = 'horizontalBar';
private setChartData(dataCat: any) {
// now we just need some data and it will display!
}
// functions
// SAMPLE chart data
} }