From 471b56f2a85f5a5e289199974a40ce893e94e065 Mon Sep 17 00:00:00 2001 From: Felix Date: Thu, 4 Jul 2019 15:34:42 +0100 Subject: [PATCH] New graph types added (not all working unfortunately), new section added for table views and probably a lot of messy code too! --- src/app/app.module.ts | 7 ++ .../dashboard-customer.component.html | 45 +++++----- .../dashboard/dashboard-customer.component.ts | 8 +- src/app/dashboard/dashboard.routing.ts | 6 ++ src/app/dashboard/new-section.component.html | 6 ++ src/app/dashboard/new-section.component.ts | 27 ++++++ src/app/layouts/full-layout.component.html | 8 ++ src/app/panels/candlestick.component.html | 19 +++++ src/app/panels/candlestick.component.ts | 84 +++++++++++++++++++ src/app/panels/pie-panel.component.ts | 3 +- src/app/panels/polar-panel.component.html | 19 +++++ src/app/panels/polar-panel.component.ts | 72 ++++++++++++++++ src/app/panels/stacked-bar.component.html | 19 +++++ src/app/panels/stacked-bar.component.ts | 68 +++++++++++++++ src/app/widgets/graph-widget.component.ts | 3 +- 15 files changed, 368 insertions(+), 26 deletions(-) create mode 100644 src/app/dashboard/new-section.component.html create mode 100644 src/app/dashboard/new-section.component.ts create mode 100644 src/app/panels/candlestick.component.html create mode 100644 src/app/panels/candlestick.component.ts create mode 100644 src/app/panels/polar-panel.component.html create mode 100644 src/app/panels/polar-panel.component.ts create mode 100644 src/app/panels/stacked-bar.component.html create mode 100644 src/app/panels/stacked-bar.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 7844b44..7fb44f7 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -40,12 +40,17 @@ import { P500Component } from './pages/500.component'; import { AuthModule } from './auth/auth.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({ imports: [ BrowserModule, HttpClientModule, + DxChartModule, NgxPaginationModule, BsDropdownModule.forRoot(), TabsModule.forRoot(), @@ -56,12 +61,14 @@ import { DashboardModule } from './dashboard/dashboard.module'; ], declarations: [ AppComponent, + StackedBarChartComponent, FullLayoutComponent, SimpleLayoutComponent, NAV_DROPDOWN_DIRECTIVES, BreadcrumbsComponent, SIDEBAR_TOGGLE_DIRECTIVES, AsideToggleDirective, + NewSectionComponent, P404Component, P500Component, ], diff --git a/src/app/dashboard/dashboard-customer.component.html b/src/app/dashboard/dashboard-customer.component.html index 07838a1..49e32b9 100644 --- a/src/app/dashboard/dashboard-customer.component.html +++ b/src/app/dashboard/dashboard-customer.component.html @@ -12,28 +12,33 @@
- -
-
-
-
-
-
-

Weekly Spending by Category

+ +
+
+
+
+
+ +
+
+
+

Weekly Spending by Category

+
+
+
+ + +
-
-
- -
+
-
diff --git a/src/app/dashboard/dashboard-customer.component.ts b/src/app/dashboard/dashboard-customer.component.ts index 6c8cd77..ccca9ee 100644 --- a/src/app/dashboard/dashboard-customer.component.ts +++ b/src/app/dashboard/dashboard-customer.component.ts @@ -7,6 +7,8 @@ import { CustBarSnippetComponent } from '../snippets/cust-snippet-bar.component' import { PiePanel } from '../panels/pie-panel.component'; import { DataType } from '../shared/data-types.enum'; import * as moment from 'moment'; +import { NewSectionComponent } from '../dashboard/new-section.component'; +import { StackedBarChartComponent } from '../panels/stacked-bar.component'; @Component({ @@ -28,7 +30,7 @@ export class DashboardCustomerComponent implements OnInit { public bootstrapColours: string[] = ['bg-primary', 'bg-secondary', 'bg-success', 'bg-danger', 'bg-warning', 'bg-info']; - public chartType = 'doughnut'; + public chartType = 'polarArea'; public chartLegend = true; public doughnutChartDataCategory: any[] = []; public doughnutChartLabelsCategory: string[] = []; @@ -148,9 +150,7 @@ export class DashboardCustomerComponent implements OnInit { this.setWeekData(result); this.setChartData(result.data.cat_total); 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.purchaseNotEssential = result.data.essentials.purchase_no_total - this.purchaseEssential; this.barChartDataEssential = [ diff --git a/src/app/dashboard/dashboard.routing.ts b/src/app/dashboard/dashboard.routing.ts index 6505f9a..9df0646 100644 --- a/src/app/dashboard/dashboard.routing.ts +++ b/src/app/dashboard/dashboard.routing.ts @@ -17,6 +17,7 @@ import { PayrollLogComponent } from './payroll-log.component'; import { LeaderboardComponent } from './leaderboard.component'; import { MapComponent } from './map.component'; import { TrailMapComponent } from './trail-map.component'; +import { NewSectionComponent } from './new-section.component'; // Using child path to allow for FullLayout theming const routes: Routes = [ @@ -84,6 +85,11 @@ const routes: Routes = [ path: 'feedback', component: FeedbackComponent, data: { title: 'Give Feedback' }, + }, + { + path: 'new-section', + component: NewSectionComponent, + data: { title: 'New Section' } } ], } diff --git a/src/app/dashboard/new-section.component.html b/src/app/dashboard/new-section.component.html new file mode 100644 index 0000000..58e17c9 --- /dev/null +++ b/src/app/dashboard/new-section.component.html @@ -0,0 +1,6 @@ +
+
+

Hello World!

+
+
+ \ No newline at end of file diff --git a/src/app/dashboard/new-section.component.ts b/src/app/dashboard/new-section.component.ts new file mode 100644 index 0000000..28ec0ff --- /dev/null +++ b/src/app/dashboard/new-section.component.ts @@ -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() { + } + + + + +} diff --git a/src/app/layouts/full-layout.component.html b/src/app/layouts/full-layout.component.html index 58baf2c..0769c82 100644 --- a/src/app/layouts/full-layout.component.html +++ b/src/app/layouts/full-layout.component.html @@ -94,6 +94,14 @@
+
  • + +
    +
    +
    New section
    +
    +     +
  • diff --git a/src/app/panels/candlestick.component.html b/src/app/panels/candlestick.component.html new file mode 100644 index 0000000..9aa9cb5 --- /dev/null +++ b/src/app/panels/candlestick.component.html @@ -0,0 +1,19 @@ +
    +
    +
    +
    +

    All Purchases

    +
    +
    +
    + +
    +
    +
    + \ No newline at end of file diff --git a/src/app/panels/candlestick.component.ts b/src/app/panels/candlestick.component.ts new file mode 100644 index 0000000..4f8d3c0 --- /dev/null +++ b/src/app/panels/candlestick.component.ts @@ -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'; + } +} \ No newline at end of file diff --git a/src/app/panels/pie-panel.component.ts b/src/app/panels/pie-panel.component.ts index a438811..b4b180c 100644 --- a/src/app/panels/pie-panel.component.ts +++ b/src/app/panels/pie-panel.component.ts @@ -9,9 +9,10 @@ import { ChartData } from '../_interfaces/chart-data'; selector: 'panel-pie', templateUrl: 'pie-panel.component.html', }) + export class PiePanel implements OnInit { - public chartType = 'doughnut'; + public chartType = 'panel-pie'; public chartLegend = true; public doughnutChartDataLocal: number[] = []; public doughnutChartLabelsLocal: string[] = []; diff --git a/src/app/panels/polar-panel.component.html b/src/app/panels/polar-panel.component.html new file mode 100644 index 0000000..9aa9cb5 --- /dev/null +++ b/src/app/panels/polar-panel.component.html @@ -0,0 +1,19 @@ +
    +
    +
    +
    +

    All Purchases

    +
    +
    +
    + +
    +
    +
    + \ No newline at end of file diff --git a/src/app/panels/polar-panel.component.ts b/src/app/panels/polar-panel.component.ts new file mode 100644 index 0000000..e698fb4 --- /dev/null +++ b/src/app/panels/polar-panel.component.ts @@ -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); + } +} \ No newline at end of file diff --git a/src/app/panels/stacked-bar.component.html b/src/app/panels/stacked-bar.component.html new file mode 100644 index 0000000..8a95a2e --- /dev/null +++ b/src/app/panels/stacked-bar.component.html @@ -0,0 +1,19 @@ +
    +
    +
    +
    +

    All Purchases

    +
    +
    +
    + +
    +
    +
    + \ No newline at end of file diff --git a/src/app/panels/stacked-bar.component.ts b/src/app/panels/stacked-bar.component.ts new file mode 100644 index 0000000..3987dc5 --- /dev/null +++ b/src/app/panels/stacked-bar.component.ts @@ -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); \ No newline at end of file diff --git a/src/app/widgets/graph-widget.component.ts b/src/app/widgets/graph-widget.component.ts index 8c5b55d..1e1ca21 100644 --- a/src/app/widgets/graph-widget.component.ts +++ b/src/app/widgets/graph-widget.component.ts @@ -12,6 +12,7 @@ interface ChartData { selector: 'widget-graph', templateUrl: 'graph-widget.component.html', }) + export class GraphWidget implements OnInit { @Input() public graphName: string; @Input() public graphTitle = 'Graph'; @@ -63,7 +64,7 @@ export class GraphWidget implements OnInit { }, elements: { line: { - borderWidth: 1 + borderWidth: 2 }, point: { radius: 4,