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

Work on date picker function on bubble chart

Browse source
This commit is contained in:
Tom Slater 2019-08-14 09:49:18 +01:00
parent c206a394d2
commit d550bf5e12
11 changed files with 139 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -22,8 +22,21 @@
<!-- <body style="background-color:rgb(0,0,0);"> -->
<div class="card-block">
<div class="row">
<div class="col-12">
<h4 class="card-title mb-0">Weekly Spending by Category</h4>
<div class="col-7">
<h4 class="card-title mb-0">Spending by Category</h4>
</div>
<div class="col-sm-5 hidden-sm-down">
<div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
<select>
<option value="Day">Day</option>
<option value="Week">Week</option>
<option value="Month">Month</option>
<option value="Year">Year</option>
<option value="All Time">All Time</option>
</select>
</div>
</div>
</div>
</div>
<div class="chart-wrapper">
@ -44,9 +57,22 @@
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-12">
<div class="col-7">
<h4 class="card-title mb-0">No. of Essential Purchases</h4>
</div>
<div class="col-sm-5 hidden-sm-down">
<div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
<select>
<option value="Day">Day</option>
<option value="Week">Week</option>
<option value="Month">Month</option>
<option value="Year">Year</option>
<option value="All Time">All Time</option>
</select>
</div>
</div>
</div>
</div>
<div class="chart-wrapper">
<canvas baseChart class="chart"
@ -64,9 +90,22 @@
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-12">
<div class="col-8">
<h4 class="card-title float-left mb-0">Your Purchases by Category</h4>
</div><!--/.col-->
<div class="col-sm-4 hidden-sm-down">
<div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
<select>
<option value="Day">Day</option>
<option value="Week">Week</option>
<option value="Month">Month</option>
<option value="Year">Year</option>
<option value="All Time">All Time</option>
</select>
</div>
</div>
</div>
</div><!--/.row-->
<div class="chart-wrapper">
<canvas baseChart class="chart"

48
src/app/dashboard/dashboard.component.html
View file

@ -1,3 +1,4 @@
<div class="animated fadeIn">
<snippet-bar-org></snippet-bar-org>
<div class="row">
@ -16,9 +17,22 @@
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-12">
<div class="col-7">
<h4 class="card-title mb-0">No. of Essential Purchases</h4>
</div>
<div class="col-sm-5 hidden-sm-down">
<div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
<select>
<option value="Day">Day</option>
<option value="Week">Week</option>
<option value="Month">Month</option>
<option value="Year">Year</option>
<option value="All Time">All Time</option>
</select>
</div>
</div>
</div>
</div>
<div class="chart-wrapper">
<canvas baseChart class="chart"
@ -36,9 +50,22 @@
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-12">
<div class="col-7">
<h4 class="card-title float-left mb-0">All Organisation Purchases by Category</h4>
</div><!--/.col-->
<div class="col-sm-5 hidden-sm-down">
<div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
<select>
<option value="Day">Day</option>
<option value="Week">Week</option>
<option value="Month">Month</option>
<option value="Year">Year</option>
<option value="All Time">All Time</option>
</select>
</div>
</div>
</div>
</div><!--/.row-->
<div class="chart-wrapper">
<canvas baseChart class="chart"
@ -58,8 +85,21 @@
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-12">
<h4 class="card-title mb-0">Weekly Spending by Category</h4>
<div class="col-7">
<h4 class="card-title mb-0">Spending by Category</h4>
</div>
<div class="col-sm-5 hidden-sm-down">
<div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
<select>
<option value="Day">Day</option>
<option value="Week">Week</option>
<option value="Month">Month</option>
<option value="Year">Year</option>
<option value="All Time">All Time</option>
</select>
</div>
</div>
</div>
</div>
<div class="chart-wrapper">

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

@ -76,7 +76,7 @@ export class DashboardComponent {
public bootstrapColours: string[] = ['bg-primary', 'bg-secondary', 'bg-success',
'bg-danger', 'bg-warning', 'bg-info'];
public chartType = 'pie';
public chartType = 'doughnut';
public chartLegend = true;
public doughnutChartDataCategory: any[] = [];
public doughnutChartLabelsCategory: string[] = [];

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

@ -6,17 +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">
<div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
<select>
<option value="Day">Day</option>
<option value="Week">Week</option>
<option value="Month">Month</option>
<option value="Year">Year</option>
<option value="All Time">All Time</option>
</select>
</div>
</div>
<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>
@ -37,17 +28,8 @@
<h4 class="card-title mb-0">Spend amount and number of organisations</h4>
</div>
<div class="col-sm-5 hidden-sm-down">
<div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
<select>
<option value="Day">Day</option>
<option value="Week">Week</option>
<option value="Month">Month</option>
<option value="Year">Year</option>
<option value="All Time">All Time</option>
</select>
</div>
</div>
<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>

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

@ -54,7 +54,7 @@ export class MoreStuffComponent implements OnInit {
result.data.map(item => {
graph_data.push({
t: item.date,
r: (item.value / 100000) + 5,
r: (item.value / 100000) + 4,
supplier: item.seller,
y: item.count,
value: item.value,
@ -75,6 +75,7 @@ export class MoreStuffComponent implements OnInit {
borderColor: 'blue',
hoverBackgroundColor: 'blue',
hoverBorderColor: 'blue',
radius: 5,
},
];
public supplierBubbleChartLabels: string[] = [];