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

2019-07-04 15:34:42 +01:00 · 2019-07-04 15:34:42 +01:00 · 471b56f2a8
commit 471b56f2a8
parent 6376d570af
15 changed files with 368 additions and 26 deletions
--- 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,
  ],
--- a/src/app/dashboard/dashboard-customer.component.html
+++ b/src/app/dashboard/dashboard-customer.component.html
@ -12,10 +12,13 @@
  </div><!--/.row-->
  <div class=row>
    <div class="col-xl-6">
-      <panel-pie></panel-pie>
-    </div><!--/.col-->
+      <!--<panel-pie></panel-pie> --><!--All Purchases-->
+      <div class="demo-container" ng-app="stacked-bar" ng-controller="stacked-bar">
+          <div id="stacked-bar" dx-chart="chartOptions"></div>
+      </div>    </div><!--/.col-->
      <div *ngIf="showCategoryDoughnutChart" class="col-xl-6">
        <div class="card">
+          <!-- <body style="background-color:rgb(0,0,0);"> -->
            <div class="card-block">
              <div class="row">
                <div class="col-12">
@ -30,9 +33,11 @@
                [legend]="chartLegend"
                [chartType]="chartType"
                (chartHover)="chartHovered($event)"
-            (chartClick)="chartClicked($event)"></canvas>
+                (chartClick)="chartClicked($event)">
+              </canvas>
              </div>
            </div>
+          <!-- </body> -->
        </div>
    </div><!--/.col-->
    <div *ngIf="showEssentialBarChart" class="col-xl-6">
--- 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.purchaseEssential = result.data.essentials.purchase_no_essential_total;
        this.purchaseNotEssential = result.data.essentials.purchase_no_total - this.purchaseEssential;
        this.barChartDataEssential = [
--- 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' }
      }
    ],
  }
--- a/src/app/dashboard/new-section.component.html
+++ b/src/app/dashboard/new-section.component.html
@ -0,0 +1,6 @@
+<div class="animated fadeIn">
+        <div class="row">
+            <h1>Hello World!</h1>
+        </div><!--/.row-->
+      </div>
+      
--- a/src/app/dashboard/new-section.component.ts
+++ 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() {
+  }
+
+
+
+
+}
--- a/src/app/layouts/full-layout.component.html
+++ b/src/app/layouts/full-layout.component.html
@ -94,6 +94,14 @@
            </div>
          </a>
        </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">
          <a class="nav-link" routerLinkActive="active" [routerLink]="['/payroll-log']">
            <div class="row no-gutters align-items-center">
--- a/src/app/panels/candlestick.component.html
+++ b/src/app/panels/candlestick.component.html
@ -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>
+  
--- a/src/app/panels/candlestick.component.ts
+++ 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';
+  }
+}
--- 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[] = [];
--- a/src/app/panels/polar-panel.component.html
+++ b/src/app/panels/polar-panel.component.html
@ -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>
+  
--- a/src/app/panels/polar-panel.component.ts
+++ 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);
+  }
+}
--- a/src/app/panels/stacked-bar.component.html
+++ b/src/app/panels/stacked-bar.component.html
@ -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>
+  
--- a/src/app/panels/stacked-bar.component.ts
+++ 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);
--- 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,