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

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