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

work on date picker bubble chart

Browse source
This commit is contained in:
Tom Slater 2019-08-14 12:07:05 +01:00
parent d550bf5e12
commit a605d66d37
2 changed files with 14 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,8 +6,8 @@
<h4 class="card-title mb-0">Spend amount and number of purchases by supplier name</h4> <h4 class="card-title mb-0">Spend amount and number of purchases by supplier name</h4>
</div> </div>
<div class="col-sm-5 hidden-sm-down"> <div class="col-sm-5 hidden-sm-down">
<input type="date" id="bubbleChartBegin" name="bubbleChartBegin" [(ngModel="bubbleChartBegin")] (ngModelChange)="bubbleChartUpdate"> <input type="date" id="bubbleChartBegin" name="bubbleChartBegin" [(ngModel)]="bubbleChartBegin" (ngModelChange)="bubbleChartUpdate()">
<input type="date" id="bubbleChartEnd" name="bubbleChartEnd" [(ngModel="bubbleChartEnd")] (ngModelChange)="bubbleChartUpdate"> <input type="date" id="bubbleChartEnd" name="bubbleChartEnd" [(ngModel)]="bubbleChartEnd" (ngModelChange)="bubbleChartUpdate()">
</div> </div>
</div> </div>
<div> <div>
@ -28,8 +28,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"> <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="yearSpendChartBegin" name="yearSpendChartBegin" ng-model="yearSpendChartBegin" ng-change="yearSpendChartBegin"> -->
<input type="date" id="yearSpendChartEnd" name="yearSpendChartEnd" ng-model="yearSpendChartEnd" ng-change="yearSpendChartEnd"> <!-- <input type="date" id="yearSpendChartEnd" name="yearSpendChartEnd" ng-model="yearSpendChartEnd" ng-change="yearSpendChartEnd"> -->
</div> </div>
</div> </div>
<div> <div>

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

@ -3,6 +3,7 @@ import {ApiService} from '../providers/api-service';
import {BaseChartDirective, Color} from 'ng2-charts'; import {BaseChartDirective, Color} from 'ng2-charts';
import {CurrencyPipe} from '@angular/common'; import {CurrencyPipe} from '@angular/common';
import {ChartType} from "chart.js"; import {ChartType} from "chart.js";
import * as moment from 'moment';
@Component({ @Component({
templateUrl: 'more-graphs-and-tables.component.html', templateUrl: 'more-graphs-and-tables.component.html',
@ -10,11 +11,14 @@ import {ChartType} from "chart.js";
export class MoreStuffComponent implements OnInit { export class MoreStuffComponent implements OnInit {
@Output() public onClick = new EventEmitter(); @Output() public onClick = new EventEmitter();
@Input() public categories: any; @Input() public categories: any;
bubbleChartBegin: any;
bubbleChartEnd: any;
constructor( constructor(
private api: ApiService, private api: ApiService,
private currencyPipe: CurrencyPipe, private currencyPipe: CurrencyPipe,
) { ) {
this.bubbleChartBegin = moment().format('YYYY-MM-DD');
this.bubbleChartEnd = moment().format('YYYY-MM-DD');
} }
ngOnInit(): void { ngOnInit(): void {
@ -54,7 +58,7 @@ export class MoreStuffComponent implements OnInit {
result.data.map(item => { result.data.map(item => {
graph_data.push({ graph_data.push({
t: item.date, t: item.date,
r: (item.value / 100000) + 4, r: item.value > 1000000 ? (item.value / 1000000) + 10 : (item.value / 100000) + 5,
supplier: item.seller, supplier: item.seller,
y: item.count, y: item.count,
value: item.value, value: item.value,
@ -140,6 +144,10 @@ export class MoreStuffComponent implements OnInit {
) )
} }
bubbleChartUpdate() {
}
public yearSpendChartData: any[] = [ public yearSpendChartData: any[] = [
{ {
data: [], data: [],