New graph types added (not all working unfortunately), new section added for table views and probably a lot of messy code too!
This commit is contained in:
parent
6649888876
commit
68cf9ee049
15 changed files with 368 additions and 26 deletions
|
@ -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,
|
||||
],
|
||||
|
|
|
@ -12,28 +12,33 @@
|
|||
</div><!--/.row-->
|
||||
<div class=row>
|
||||
<div class="col-xl-6">
|
||||
<panel-pie></panel-pie>
|
||||
</div><!--/.col-->
|
||||
<div *ngIf="showCategoryDoughnutChart" class="col-xl-6">
|
||||
<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>
|
||||
<!--<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">
|
||||
<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 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>
|
||||
<!-- </body> -->
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div *ngIf="showEssentialBarChart" class="col-xl-6">
|
||||
<div class="card">
|
||||
|
|
|
@ -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 = [
|
||||
|
|
|
@ -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' }
|
||||
}
|
||||
],
|
||||
}
|
||||
|
|
6
src/app/dashboard/new-section.component.html
Normal file
6
src/app/dashboard/new-section.component.html
Normal 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
27
src/app/dashboard/new-section.component.ts
Normal 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() {
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
|
@ -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">
|
||||
|
|
19
src/app/panels/candlestick.component.html
Normal file
19
src/app/panels/candlestick.component.html
Normal 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
84
src/app/panels/candlestick.component.ts
Normal 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';
|
||||
}
|
||||
}
|
|
@ -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[] = [];
|
||||
|
|
19
src/app/panels/polar-panel.component.html
Normal file
19
src/app/panels/polar-panel.component.html
Normal 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
72
src/app/panels/polar-panel.component.ts
Normal 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
19
src/app/panels/stacked-bar.component.html
Normal 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
68
src/app/panels/stacked-bar.component.ts
Normal 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);
|
|
@ -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,
|
||||
|
|
Reference in a new issue