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

New graph types added (not all working unfortunately), new section added for table views and probably a lot of messy code too!

Browse source
This commit is contained in:
Felix 2019-07-04 15:34:42 +01:00
parent 6376d570af
commit 471b56f2a8
15 changed files with 368 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/app/app.module.ts
View file

@ -40,12 +40,17 @@ import { P500Component } from './pages/500.component';
import { AuthModule } from './auth/auth.module'; import { AuthModule } from './auth/auth.module';
import { DashboardModule } from './dashboard/dashboard.module'; import { DashboardModule } from './dashboard/dashboard.module';
import { DxChartModule } from 'devextreme-angular';
import { StackedBarChartComponent } from './panels/stacked-bar.component';
import { NewSectionComponent } from './dashboard/new-section.component';
@NgModule({ @NgModule({
imports: [ imports: [
BrowserModule, BrowserModule,
HttpClientModule, HttpClientModule,
DxChartModule,
NgxPaginationModule, NgxPaginationModule,
BsDropdownModule.forRoot(), BsDropdownModule.forRoot(),
TabsModule.forRoot(), TabsModule.forRoot(),
@ -56,12 +61,14 @@ import { DashboardModule } from './dashboard/dashboard.module';
], ],
declarations: [ declarations: [
AppComponent, AppComponent,
StackedBarChartComponent,
FullLayoutComponent, FullLayoutComponent,
SimpleLayoutComponent, SimpleLayoutComponent,
NAV_DROPDOWN_DIRECTIVES, NAV_DROPDOWN_DIRECTIVES,
BreadcrumbsComponent, BreadcrumbsComponent,
SIDEBAR_TOGGLE_DIRECTIVES, SIDEBAR_TOGGLE_DIRECTIVES,
AsideToggleDirective, AsideToggleDirective,
NewSectionComponent,
P404Component, P404Component,
P500Component, P500Component,
], ],

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

@ -12,28 +12,33 @@
</div><!--/.row--> </div><!--/.row-->
<div class=row> <div class=row>
<div class="col-xl-6"> <div class="col-xl-6">
<panel-pie></panel-pie> <!--<panel-pie></panel-pie> --><!--All Purchases-->
</div><!--/.col--> <div class="demo-container" ng-app="stacked-bar" ng-controller="stacked-bar">
<div *ngIf="showCategoryDoughnutChart" class="col-xl-6"> <div id="stacked-bar" dx-chart="chartOptions"></div>
<div class="card"> </div> </div><!--/.col-->
<div class="card-block"> <div *ngIf="showCategoryDoughnutChart" class="col-xl-6">
<div class="row"> <div class="card">
<div class="col-12"> <!-- <body style="background-color:rgb(0,0,0);"> -->
<h4 class="card-title mb-0">Weekly Spending by Category</h4> <div class="card-block">
<div class="row">
<div class="col-12">
<h4 class="card-title mb-0">Weekly Spending by Category</h4>
</div>
</div>
<div class="chart-wrapper">
<canvas baseChart class="chart"
[datasets]="doughnutChartDataCategory"
[labels]="doughnutChartLabelsCategory"
[options]="doughnutChartOptionsCategory"
[legend]="chartLegend"
[chartType]="chartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">
</canvas>
</div>
</div> </div>
</div> <!-- </body> -->
<div class="chart-wrapper">
<canvas baseChart class="chart"
[datasets]="doughnutChartDataCategory"
[labels]="doughnutChartLabelsCategory"
[options]="doughnutChartOptionsCategory"
[legend]="chartLegend"
[chartType]="chartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div> </div>
</div>
</div><!--/.col--> </div><!--/.col-->
<div *ngIf="showEssentialBarChart" class="col-xl-6"> <div *ngIf="showEssentialBarChart" class="col-xl-6">
<div class="card"> <div class="card">

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

@ -7,6 +7,8 @@ import { CustBarSnippetComponent } from '../snippets/cust-snippet-bar.component'
import { PiePanel } from '../panels/pie-panel.component'; import { PiePanel } from '../panels/pie-panel.component';
import { DataType } from '../shared/data-types.enum'; import { DataType } from '../shared/data-types.enum';
import * as moment from 'moment'; import * as moment from 'moment';
import { NewSectionComponent } from '../dashboard/new-section.component';
import { StackedBarChartComponent } from '../panels/stacked-bar.component';
@Component({ @Component({
@ -28,7 +30,7 @@ export class DashboardCustomerComponent implements OnInit {
public bootstrapColours: string[] = ['bg-primary', 'bg-secondary', 'bg-success', public bootstrapColours: string[] = ['bg-primary', 'bg-secondary', 'bg-success',
'bg-danger', 'bg-warning', 'bg-info']; 'bg-danger', 'bg-warning', 'bg-info'];
public chartType = 'doughnut'; public chartType = 'polarArea';
public chartLegend = true; public chartLegend = true;
public doughnutChartDataCategory: any[] = []; public doughnutChartDataCategory: any[] = [];
public doughnutChartLabelsCategory: string[] = []; public doughnutChartLabelsCategory: string[] = [];
@ -148,9 +150,7 @@ export class DashboardCustomerComponent implements OnInit {
this.setWeekData(result); this.setWeekData(result);
this.setChartData(result.data.cat_total); this.setChartData(result.data.cat_total);
this.totalCategoryList = result.data.cat_list; this.totalCategoryList = result.data.cat_list;
if (this.totalCategoryList) { this.showTotalCategoryList = true;
this.showTotalCategoryList = true;
}
this.purchaseEssential = result.data.essentials.purchase_no_essential_total; this.purchaseEssential = result.data.essentials.purchase_no_essential_total;
this.purchaseNotEssential = result.data.essentials.purchase_no_total - this.purchaseEssential; this.purchaseNotEssential = result.data.essentials.purchase_no_total - this.purchaseEssential;
this.barChartDataEssential = [ this.barChartDataEssential = [

6
src/app/dashboard/dashboard.routing.ts
View file

@ -17,6 +17,7 @@ import { PayrollLogComponent } from './payroll-log.component';
import { LeaderboardComponent } from './leaderboard.component'; import { LeaderboardComponent } from './leaderboard.component';
import { MapComponent } from './map.component'; import { MapComponent } from './map.component';
import { TrailMapComponent } from './trail-map.component'; import { TrailMapComponent } from './trail-map.component';
import { NewSectionComponent } from './new-section.component';
// Using child path to allow for FullLayout theming // Using child path to allow for FullLayout theming
const routes: Routes = [ const routes: Routes = [
@ -84,6 +85,11 @@ const routes: Routes = [
path: 'feedback', path: 'feedback',
component: FeedbackComponent, component: FeedbackComponent,
data: { title: 'Give Feedback' }, data: { title: 'Give Feedback' },
},
{
path: 'new-section',
component: NewSectionComponent,
data: { title: 'New Section' }
} }
], ],
} }

6
src/app/dashboard/new-section.component.html Normal file
View file

@ -0,0 +1,6 @@
<div class="animated fadeIn">
<div class="row">
<h1>Hello World!</h1>
</div><!--/.row-->
</div>

27
src/app/dashboard/new-section.component.ts Normal file
View file

@ -0,0 +1,27 @@
import { Component, OnInit, AfterViewInit, Input, Output, EventEmitter, ViewChild, TemplateRef } from '@angular/core';
import { ApiService } from '../providers/api-service';
import { AgmCoreModule } from '@agm/core';
import { BsModalService, ModalDirective } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
@Component({
templateUrl: 'new-section.component.html',
})
export class NewSectionComponent implements OnInit, AfterViewInit {
constructor(
private api: ApiService,
) { }
ngOnInit(): void {
}
ngAfterViewInit() {
}
}

8
src/app/layouts/full-layout.component.html
View file

@ -94,6 +94,14 @@
</div> </div>
</a> </a>
</li> </li>
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/new-section']">
<div class="row no-gutters align-items-center">
<div class="col-2"><i class="icon-speedometer"></i></div>
<div class="col-10">New section</div>
</div>
</a>
</li>
<li *ngIf="accountType == 'organisation'" class="nav-item"> <li *ngIf="accountType == 'organisation'" class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/payroll-log']"> <a class="nav-link" routerLinkActive="active" [routerLink]="['/payroll-log']">
<div class="row no-gutters align-items-center"> <div class="row no-gutters align-items-center">

19
src/app/panels/candlestick.component.html Normal file
View file

@ -0,0 +1,19 @@
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-12">
<h4 class="card-title mb-0">All Purchases</h4>
</div>
</div>
<div class="chart-wrapper">
<canvas baseChart class="chart"
[data]="doughnutChartDataLocal"
[labels]="doughnutChartLabelsLocal"
[legend]="chartLegend"
[chartType]="chartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>

84
src/app/panels/candlestick.component.ts Normal file
View file

@ -0,0 +1,84 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import 'dist/chartjs-chart-financial/chartjs-chart-financial';
import * as luxon from 'luxon';
import 'chartjs-adapter-luxon';
import { ChartOptions } from 'chart.js';
import { Color, BaseChartDirective } from 'ng2-charts';
@Component({
selector: 'app-financial-chart',
templateUrl: './financial-chart.component.html',
styleUrls: ['./financial-chart.component.css']
})
export class FinancialChartComponent implements OnInit {
barCount = 60;
initialDateStr = '01 Apr 2017 00:00 Z';
public financialChartData = [
{
label: 'CHRT - Chart.js Corporation',
data: this.getRandomData(this.initialDateStr, this.barCount)
},
];
public financialChartOptions: ChartOptions = {
responsive: true,
maintainAspectRatio: false,
};
public financialChartColors: Color[] = [
{
borderColor: 'black',
backgroundColor: 'rgba(255,0,0,0.3)',
},
];
public financialChartLegend : Boolean;
public chartLegend : Boolean;
public financialChartType = 'candlestick';
public chartType : string;
public financialChartPlugins = [];
@ViewChild(BaseChartDirective, { static: true }) chart: BaseChartDirective;
constructor() { }
ngOnInit() {
this.financialChartType = 'candlestick';
this.chartType=this.financialChartType;
this.financialChartLegend = this.chartLegend;
}
randomNumber(min: number, max: number) {
return Math.random() * (max - min) + min;
}
randomBar(date: luxon.DateTime, lastClose: number) {
const open = this.randomNumber(lastClose * 0.95, lastClose * 1.05);
const close = this.randomNumber(open * 0.95, open * 1.05);
const high = this.randomNumber(Math.max(open, close), Math.max(open, close) * 1.1);
const low = this.randomNumber(Math.min(open, close) * 0.9, Math.min(open, close));
return {
t: date.valueOf(),
o: open,
h: high,
l: low,
c: close
};
}
getRandomData(dateStr: string, count: number) {
let date = luxon.DateTime.fromRFC2822(dateStr);
const data = [this.randomBar(date, 30)];
while (data.length < count) {
date = date.plus({ days: 1 });
if (date.weekday <= 5) {
data.push(this.randomBar(date, data[data.length - 1].c));
}
}
return data;
}
update() {
// candlestick vs ohlc
this.financialChartType = this.financialChartType === 'candlestick' ? 'ohlc' : 'candlestick';
}
}

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

@ -9,9 +9,10 @@ import { ChartData } from '../_interfaces/chart-data';
selector: 'panel-pie', selector: 'panel-pie',
templateUrl: 'pie-panel.component.html', templateUrl: 'pie-panel.component.html',
}) })
export class PiePanel implements OnInit { export class PiePanel implements OnInit {
public chartType = 'doughnut'; public chartType = 'panel-pie';
public chartLegend = true; public chartLegend = true;
public doughnutChartDataLocal: number[] = []; public doughnutChartDataLocal: number[] = [];
public doughnutChartLabelsLocal: string[] = []; public doughnutChartLabelsLocal: string[] = [];

19
src/app/panels/polar-panel.component.html Normal file
View file

@ -0,0 +1,19 @@
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-12">
<h4 class="card-title mb-0">All Purchases</h4>
</div>
</div>
<div class="chart-wrapper">
<canvas baseChart class="chart"
[data]="doughnutChartDataLocal"
[labels]="doughnutChartLabelsLocal"
[legend]="chartLegend"
[chartType]="chartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>

72
src/app/panels/polar-panel.component.ts Normal file
View file

@ -0,0 +1,72 @@
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { SingleDataSet, Label } from 'ng2-charts';
import { ChartType } from 'chart.js';
import { ApiService } from '../providers/api-service';
import { CustPiesService } from '../providers/cust-pies.service';
import { DataType } from '../shared/data-types.enum';
import { ChartData } from '../_interfaces/chart-data';
@Component({
selector: 'polar-area',
templateUrl: 'polar-panel.component.html',
})
export class PolarAreaChartComponent implements OnInit {
// PolarArea
public chartType : 'polar-area';
public polarAreaChartLabels: Label[];
public polarAreaChartData: SingleDataSet;
public chartLegend : Boolean;
public polarAreaLegend : Boolean;
public polarChartLabelsLocal: string[] = [];
public polarChartDataLocal: number[] = [];
public polarAreaChartType: ChartType = 'polarArea';
constructor(
private api: ApiService,
private pieService: CustPiesService,
) {
this.pieService.getPie().subscribe(
result => {
this.setChartData(result.local_all);
},
error => {
console.log('Retrieval Error');
console.log( error._body );
}
);
}
ngOnInit() {
this.polarAreaLegend = this.chartLegend;
this.polarAreaLegend = true;
}
private setChartData(dataLocal: any) {
this.polarChartDataLocal = Object.keys(dataLocal).map(key => dataLocal[key]);
// setTimeout is currently a workaround for ng2-charts labels
setTimeout(() => this.polarChartLabelsLocal = Object.keys(dataLocal), 0);
}
public convertHex(hex: string, opacity: number) {
hex = hex.replace('#', '');
const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);
const rgba = 'rgba(' + r + ', ' + g + ', ' + b + ', ' + opacity / 100 + ')';
return rgba;
}
// events
public chartClicked({ event, active }: { event: MouseEvent, active: {}[] }): void {
console.log(event, active);
}
public chartHovered({ event, active }: { event: MouseEvent, active: {}[] }): void {
console.log(event, active);
}
}

19
src/app/panels/stacked-bar.component.html Normal file
View file

@ -0,0 +1,19 @@
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-12">
<h4 class="card-title mb-0">All Purchases</h4>
</div>
</div>
<div class="chart-wrapper">
<canvas baseChart class="chart"
attr.[data]="doughnutChartDataLocal"
attr.[labels]="doughnutChartLabelsLocal"
attr.[legend]="chartLegend"
attr.[chartType]="chartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>

68
src/app/panels/stacked-bar.component.ts Normal file
View file

@ -0,0 +1,68 @@
import { NgModule, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { ApiService } from '../providers/api-service';
import { CustPiesService } from '../providers/cust-pies.service';
import { DataType } from '../shared/data-types.enum';
import { ChartData } from '../_interfaces/chart-data';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DxChartModule } from 'devextreme-angular';
if(!/localhost/.test(document.location.host)) {
enableProdMode();
}
@Component({
selector: 'stacked-bar',
templateUrl: 'stacked-bar.component.html',
})
@NgModule({
imports: [
BrowserModule,
DxChartModule
],
declarations: [StackedBarChartComponent],
bootstrap: [StackedBarChartComponent]
})
export class StackedBarChartComponent {
public chartType: 'stacked-bar';
public chartLegend = true;
public stackedBarChartDataLocal : number[] = [];
public stackedBarChartLabelsLocal : string[] = [];
constructor(
private api: ApiService,
private pieService: CustPiesService,
) {
this.pieService.getPie().subscribe(
result => {
this.setChartData(result.local_all);
},
error => {
console.log('Retrieval Error');
console.log( error._body );
}
);
}
public ngOnInit(): void {
console.log("stacked bar graph tried to initialise");
}
private setChartData(dataLocal: any) {
this.stackedBarChartDataLocal = Object.keys(dataLocal).map(key => dataLocal[key]);
// setTimeout is currently a workaround for ng2-charts labels
setTimeout(() => this.stackedBarChartLabelsLocal = Object.keys(dataLocal), 0);
}
customizeTooltip(arg: any) {
return {
text: arg.percentText + ' - ' + arg.valueText
};
}
}
platformBrowserDynamic().bootstrapModule(StackedBarChartComponent);

3
src/app/widgets/graph-widget.component.ts
View file

@ -12,6 +12,7 @@ interface ChartData {
selector: 'widget-graph', selector: 'widget-graph',
templateUrl: 'graph-widget.component.html', templateUrl: 'graph-widget.component.html',
}) })
export class GraphWidget implements OnInit { export class GraphWidget implements OnInit {
@Input() public graphName: string; @Input() public graphName: string;
@Input() public graphTitle = 'Graph'; @Input() public graphTitle = 'Graph';
@ -63,7 +64,7 @@ export class GraphWidget implements OnInit {
}, },
elements: { elements: {
line: { line: {
borderWidth: 1 borderWidth: 2
}, },
point: { point: {
radius: 4, radius: 4,