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

Misc chart work

Browse source
This commit is contained in:
Tom Slater 2019-08-20 16:47:20 +01:00
parent 9e156ad57f
commit 2e00e87574
11 changed files with 48 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/app/dashboard/add-data.component.html
View file

@ -156,14 +156,14 @@
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input"><strong>Total amount of Employees</strong></label>
<div class="col-md-9">
<input type="number" class="form-control" formControlName="employee_amount" placeholder="0">
<input type="number" class="form-control" formControlName="employee_amount" placeholder="0" min="0">
<span class="help-block">Enter the amount of employees the organisation has for the entry month.</span>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input"><strong>Total amount of local Employees</strong></label>
<div class="col-md-9">
<input type="number" class="form-control" formControlName="local_employee_amount" placeholder="0">
<input type="number" class="form-control" formControlName="local_employee_amount" placeholder="0" min="0">
<span class="help-block">Enter the amount of employees that live locally to the organisation for the entry month.</span>
</div>
</div>

8
src/app/dashboard/category-month.component.html
View file

@ -1,6 +1,6 @@
<div class="animated fadeIn">
<div class=row>
<div class="col-md-6">
<div *ngIf="weekList1" class="col-md-6">
<div class="card">
<div class="card-block">
<div class="row">
@ -42,7 +42,7 @@
</div>
</div>
</div><!--/.col-->
<div class="col-md-6">
<div *ngIf="weekList2" class="col-md-6">
<div class="card">
<div class="card-block">
<div class="row">
@ -84,7 +84,7 @@
</div>
</div>
</div><!--/.col-->
<div class="col-md-6">
<div *ngIf="weekList3" class="col-md-6">
<div class="card">
<div class="card-block">
<div class="row">
@ -126,7 +126,7 @@
</div>
</div>
</div><!--/.col-->
<div class="col-md-6">
<div *ngIf="weekList4" class="col-md-6">
<div class="card">
<div class="card-block">
<div class="row">

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

@ -17,10 +17,10 @@
<div id="stacked-bar" dx-chart="chartOptions"></div>
</div> -->
</div><!--/.col-->
<div *ngIf="showCategoryDoughnutChart" class="col-xl-6">
<div class="card">
<!--<div *ngIf="showCategoryDoughnutChart" class="col-xl-6">
<div class="card"> -->
<!-- <body style="background-color:rgb(0,0,0);"> -->
<div class="card-block">
<!-- <div class="card-block">
<div class="row">
<div class="col-12">
<h4 class="card-title mb-0">Spending by Category</h4>
@ -31,15 +31,15 @@
[datasets]="doughnutChartDataCategory"
[labels]="doughnutChartLabelsCategory"
[options]="doughnutChartOptionsCategory"
[colors]= "doughnutChartColoursCategory"
[legend]="chartLegend"
[chartType]="chartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div> -->
<!-- </body> -->
</div>
</div><!--/.col-->
<!-- </div> --><!--/.col-->
<div *ngIf="showEssentialBarChart" class="col-xl-6">
<div class="card">
<div class="card-block">

17
src/app/dashboard/dashboard-customer.component.ts
View file

@ -35,10 +35,25 @@ export class DashboardCustomerComponent implements OnInit {
public bootstrapColours: string[] = ['bg-primary', 'bg-secondary', 'bg-success',
'bg-danger', 'bg-warning', 'bg-info'];
public chartType = 'bar';
public chartType = 'doughnut';
public chartLegend = true;
public doughnutChartDataCategory: any[] = [];
public doughnutChartLabelsCategory: string[] = [];
public doughnutChartColoursCategory: any[] = [
{
backgroundColor:[
'red',
'green',
'blue',
'purple',
'yellow',
'brown',
'magenta',
'cyan',
'orange',
'pink'
]
}];
public doughnutChartOptionsCategory:any = {
tooltips: {

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

@ -60,7 +60,7 @@
<div class="card-block">
<div class="row">
<div class="col-12">
<h4 class="card-title mb-0">Spending by Category</h4>
<h4 class="card-title mb-0">Last week's spending by Category</h4>
</div>
</div>
<div class="chart-wrapper">

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

@ -46,9 +46,9 @@ export class DashboardComponent {
},
{
type: 'graph',
name: 'sales_last_year',
name: 'sales_last_quart',
icon: 'icon-diamond',
title: 'Sales Last Year',
title: 'Sales Last Quart',
dataType: DataType.currency,
},
{
@ -65,8 +65,8 @@ export class DashboardComponent {
},
{
type: 'graph',
name: 'purchases_last_year;',
title: 'Purchases Last Year',
name: 'purchases_last_quart;',
title: 'Purchases Last Quart',
dataType: DataType.currency,
},
];

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

@ -5,12 +5,12 @@
<div class="col-sm-8">
<h4 class="card-title mb-0">Supplier spend amount and number of purchases</h4>
</div>
<div class="col-sm-5 hidden-sm-down" *ngIf="isBubbleChartLoaded">
<div class="col-sm-4 hidden-sm-down" *ngIf="isBubbleChartLoaded">
<input type="date" [(ngModel)]="bubbleChartBegin" (change)="bubbleChartUpdate()">
<input type="date" [(ngModel)]="bubbleChartEnd" (change)="bubbleChartUpdate()">
</div>
</div>
<div class="col-sm-7" *ngIf="!isBubbleChartLoaded">
<div class="col-sm-12" *ngIf="!isBubbleChartLoaded">
<div class="spinner"></div>
</div>
<div *ngIf="isBubbleChartLoaded">
@ -30,10 +30,6 @@
<div class="col-sm-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"> -->
</div>
</div>
<div>
<canvas baseChart
@ -65,4 +61,4 @@
</div>
</div>
</div>
</div>
</div>

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

@ -41,7 +41,7 @@ export class MoreStuffComponent implements OnInit {
backgroundColor: [
'red',
'green',
'blue',
'#52afed',
'purple',
'yellow',
'brown',
@ -66,7 +66,7 @@ export class MoreStuffComponent implements OnInit {
passed_graph_data.data.map(item=> {
let is_item_in_range = (new Date(item.date.substring(0, 10)) >= new Date(start_range) && new Date(item.date.substring(0, 10)) <= new Date(end_range));
// there are a lot of `new Date(blah)` but that is what works for some reason.
// console.log("item.date : " + (item.date));
// console.log("Date(item.date) : " + new Date(item.date));
// console.log("Date(item.date.substring(0, 10)) : " + new Date(item.date.substring(0, 10)));
@ -78,11 +78,11 @@ export class MoreStuffComponent implements OnInit {
// console.log("item.date <= end_range: " + (new Date(item.date) <= new Date(end_range)));
// console.log("is_item_in_range: " + is_item_in_range);
// console.log("----------------------");
if (is_item_in_range) {
graph_data.push({
t: new Date(item.date.substring(0, 10)),
r: item.value > 1000000 ? (item.value / 1000000) + 10 : (item.value / 100000) + 5,
r: item.value > 1000000 ? (item.value / 100000) : (item.value / 100000) + 5,
supplier: item.seller,
y: item.count,
value: item.value,
@ -96,7 +96,7 @@ export class MoreStuffComponent implements OnInit {
passed_graph_data.data.map(item => {
graph_data.push({
t: item.date,
r: item.value > 1000000 ? (item.value / 1000000) + 10 : (item.value / 100000) + 5,
r: item.value > 1000000 ? (item.value / 200000) : (item.value / 100000) + 5,
supplier: item.seller,
y: item.count,
value: item.value,

10
src/app/panels/org-pie-panel.component.ts
View file

@ -18,30 +18,30 @@ export class OrgPiePanel implements OnInit {
public doughnutChartColors: any[] = [
{
backgroundColor: [
'red',
'#ffa1b5',
'green',
'pink',
'#52afed',
'purple',
'yellow',
'brown',
'magenta',
'cyan',
'orange',
'blue'
'pink'
]
},
{
borderColor: [
'red',
'green',
'pink',
'blue',
'purple',
'yellow',
'brown',
'magenta',
'cyan',
'orange',
'blue'
'pink'
]
},
{ borderWidth: [100]

15
src/app/panels/pie-panel.component.html
View file

@ -1,22 +1,9 @@
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-7">
<div class="col-12">
<h4 class="card-title mb-0">All Purchases 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">
<canvas baseChart class="chart"

2
src/environments/environment.ts
View file

@ -5,7 +5,7 @@
export const environment = {
production: false,
apiUrl: 'https://dev.peartrade.org/api',
apiUrl: 'https://dev.localspend.co.uk/api',
mapApiKey: 'CHANGEME',
enableAnalytics: false,
analyticsKey: 'CHANGEME',