Added working snippets and placeholder pie chart
This commit is contained in:
parent
6eb6425fb8
commit
32bebd7c24
9 changed files with 142 additions and 41 deletions
|
@ -10,4 +10,10 @@
|
|||
</widget-graph>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<!-- http://www.chartjs.org/docs/latest/charts/polar.html?h=polar -->
|
||||
<div class=row>
|
||||
<div class="col-12 col-md-4 no-gutters">
|
||||
<panel-pie></panel-pie>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -3,16 +3,13 @@ import { ApiService } from '../providers/api-service';
|
|||
import { Router } from '@angular/router';
|
||||
import { GraphWidget } from '../widgets/graph-widget.component';
|
||||
import { CustBarSnippetComponent } from '../snippets/cust-snippet-bar.component';
|
||||
import { PiePanel } from '../panels/pie-panel.component';
|
||||
import { DataType } from '../shared/data-types.enum';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'dashboard-customer.component.html'
|
||||
})
|
||||
export class DashboardCustomerComponent implements OnInit {
|
||||
customersThisMonth: any;
|
||||
moneySpentThisMonth: any;
|
||||
pointsTotal: any;
|
||||
averageTransactionToday: any;
|
||||
|
||||
/* Setting up dashboard's main variables*/
|
||||
name: any;
|
||||
|
@ -22,6 +19,12 @@ export class DashboardCustomerComponent implements OnInit {
|
|||
myRank: any;
|
||||
username: any;
|
||||
|
||||
// PolarArea
|
||||
public polarAreaChartLabels: string[] = ['Local', 'Not Local'];
|
||||
public polarAreaChartData: number[] = [400, 100];
|
||||
public polarAreaLegend = true;
|
||||
public polarAreaChartType = 'polarArea';
|
||||
|
||||
public widgetList = [
|
||||
{
|
||||
type: 'graph',
|
||||
|
|
|
@ -25,6 +25,7 @@ import { GraphWidget } from '../widgets/graph-widget.component';
|
|||
import { OrgBarSnippetComponent } from '../snippets/org-snippet-bar.component';
|
||||
import { CustBarSnippetComponent } from '../snippets/cust-snippet-bar.component';
|
||||
import { GraphPanel } from '../panels/graph-panel.component';
|
||||
import { PiePanel } from '../panels/pie-panel.component';
|
||||
|
||||
import { DashboardRoutingModule } from './dashboard.routing';
|
||||
import { OrgResultComponent } from '../shared/org-result.component';
|
||||
|
@ -72,6 +73,7 @@ import { environment } from '../../environments/environment';
|
|||
OrgBarSnippetComponent,
|
||||
CustBarSnippetComponent,
|
||||
GraphPanel,
|
||||
PiePanel,
|
||||
],
|
||||
providers: [
|
||||
CurrencyPipe,
|
||||
|
|
27
src/app/panels/pie-panel.component.html
Normal file
27
src/app/panels/pie-panel.component.html
Normal file
|
@ -0,0 +1,27 @@
|
|||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-sm-5">
|
||||
<h4 class="card-title mb-0">Local Purchases</h4>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-7 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">
|
||||
<label class="btn btn-outline-secondary active">
|
||||
<input type="radio" name="options" id="option2" checked> Week
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[data]="placeholderChartData"
|
||||
[labels]="placeholderChartLabels"
|
||||
[legend]="chartLegend"
|
||||
[chartType]="chartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
85
src/app/panels/pie-panel.component.ts
Normal file
85
src/app/panels/pie-panel.component.ts
Normal file
|
@ -0,0 +1,85 @@
|
|||
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
|
||||
import { OrgGraphsService } from '../providers/org-graphs.service';
|
||||
import { DataType } from '../shared/data-types.enum';
|
||||
import { ChartData } from '../_interfaces/chart-data';
|
||||
import * as moment from 'moment';
|
||||
|
||||
@Component({
|
||||
selector: 'panel-pie',
|
||||
templateUrl: 'pie-panel.component.html',
|
||||
})
|
||||
export class PiePanel implements OnInit {
|
||||
|
||||
// Placeholder
|
||||
public placeholderChartLabels: string[] = ['Local to Me', 'Local Store', 'Not Local'];
|
||||
public placeholderChartData: number[] = [400, 100, 100];
|
||||
|
||||
|
||||
public chartType = 'doughnut';
|
||||
public chartLegend = true;
|
||||
|
||||
//Old
|
||||
|
||||
public rawChartData: Array<number> = [];
|
||||
|
||||
public chartData: Array<ChartData> = [
|
||||
{
|
||||
data: [],
|
||||
label: 'This Week'
|
||||
},
|
||||
{
|
||||
data: [],
|
||||
label: 'Last Week'
|
||||
},
|
||||
{
|
||||
data: [],
|
||||
label: 'Week Before Last'
|
||||
}
|
||||
];
|
||||
|
||||
public rawChartLabels: Array<string> = [];
|
||||
public chartLabels: Array<string> = [];
|
||||
|
||||
// public mainChartElements = 7;
|
||||
|
||||
constructor(
|
||||
private graphService: OrgGraphsService,
|
||||
) { }
|
||||
|
||||
public ngOnInit(): void {
|
||||
// const end = moment().startOf('day');
|
||||
// const start = end.clone().subtract(this.mainChartElements * 3, 'days');
|
||||
// this.graphService.getGraph('customers_range', {
|
||||
// start: start.format('YYYY-MM-DD'),
|
||||
// end: end.format('YYYY-MM-DD'),
|
||||
// }).subscribe( result => this.setData(result.graph) );
|
||||
}
|
||||
|
||||
// private setData(data: any) {
|
||||
// this.chartLabels = data.labels.slice(this.mainChartElements * 2, this.mainChartElements * 3);
|
||||
// this.chartData[2].data = data.data.slice(0, this.mainChartElements);
|
||||
// this.chartData[1].data = data.data.slice(this.mainChartElements, this.mainChartElements * 2);
|
||||
// this.chartData[0].data = data.data.slice(this.mainChartElements * 2, this.mainChartElements * 3);
|
||||
// }
|
||||
|
||||
// convert Hex to RGBA
|
||||
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(e: any): void {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
public chartHovered(e: any): void {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
}
|
|
@ -4,12 +4,12 @@ import { Observable } from 'rxjs/Rx';
|
|||
|
||||
@Injectable()
|
||||
export class CustSnippetsService {
|
||||
private orgSnippetsUrl = '/v1/organisation/snippets';
|
||||
private custSnippetsUrl = '/v1/customer/snippets';
|
||||
|
||||
constructor(private api: ApiService) { }
|
||||
|
||||
// This endpoint should mimic basicStats
|
||||
public getData(): Observable<any> {
|
||||
return this.api.post(this.orgSnippetsUrl);
|
||||
return this.api.post(this.custSnippetsUrl);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -3,7 +3,7 @@ import { ApiService } from './api-service';
|
|||
|
||||
@Injectable()
|
||||
export class OrgGraphsService {
|
||||
private orgGraphUrl = '/v1/organisation/graphs';
|
||||
private orgGraphUrl = '/v1/customer/graphs';
|
||||
|
||||
constructor(private api: ApiService) { }
|
||||
|
||||
|
|
|
@ -3,24 +3,24 @@
|
|||
<ul>
|
||||
<li class="hidden-sm-down">
|
||||
<div class="text-muted">My Points</div>
|
||||
<strong>{{ basicStats.user_sum / 10 | number:'1.0-0' }}</strong>
|
||||
<strong>{{ userSum / 10 | number:'1.0-0' }}</strong>
|
||||
</li>
|
||||
<li class="hidden-sm-down">
|
||||
<div class="text-muted">My Rank</div>
|
||||
<div *ngIf="basicStats.user_position == 0" class="statuscontent">
|
||||
<div *ngIf="userPosition == 0" class="statuscontent">
|
||||
<strong>Unranked</strong>
|
||||
</div>
|
||||
<div *ngIf="basicStats.user_position != 0" class="statuscontent">
|
||||
<strong>{{ basicStats.user_position }}</strong>
|
||||
<div *ngIf="userPosition != 0" class="statuscontent">
|
||||
<strong>{{ userPosition }}</strong>
|
||||
</div>
|
||||
</li>
|
||||
<li class="hidden-sm-down">
|
||||
<div class="text-muted">My Total Spend</div>
|
||||
<strong>{{ basicStats.user_sum | currency:'GBP':'symbol':'1.2-2' }}</strong>
|
||||
<strong>{{ userSum | currency:'GBP':'symbol':'1.2-2' }}</strong>
|
||||
</li>
|
||||
<li class="hidden-sm-down">
|
||||
<div class="text-muted">Value to Local Economy</div>
|
||||
<strong>{{ basicStats.user_sum * 2.3 | currency:'GBP':'symbol':'1.2-2' }}</strong>
|
||||
<strong>{{ userSum * 2.3 | currency:'GBP':'symbol':'1.2-2' }}</strong>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { OrgSnippetsService } from '../providers/org-snippets.service';
|
||||
import { CustSnippetsService } from '../providers/cust-snippets.service';
|
||||
|
||||
@Component({
|
||||
selector: 'snippet-bar-cust',
|
||||
|
@ -7,41 +7,19 @@ import { OrgSnippetsService } from '../providers/org-snippets.service';
|
|||
})
|
||||
export class CustBarSnippetComponent implements OnInit {
|
||||
|
||||
public thisMonthSalesCount = 0;
|
||||
public thisMonthSalesTotal = 0;
|
||||
public thisWeekSalesCount = 0;
|
||||
public thisWeekSalesTotal = 0;
|
||||
public todaySalesCount = 0;
|
||||
public todaySalesTotal = 0;
|
||||
|
||||
public thisMonthPurchasesCount = 0;
|
||||
public thisMonthPurchasesTotal = 0;
|
||||
public thisWeekPurchasesCount = 0;
|
||||
public thisWeekPurchasesTotal = 0;
|
||||
public todayPurchasesCount = 0;
|
||||
public todayPurchasesTotal = 0;
|
||||
public userSum = 0;
|
||||
public userPosition = 0;
|
||||
|
||||
constructor(
|
||||
private snippetsService: OrgSnippetsService,
|
||||
private snippetsService: CustSnippetsService,
|
||||
) { }
|
||||
|
||||
public ngOnInit(): void {
|
||||
this.snippetsService.getData()
|
||||
.subscribe(
|
||||
result => {
|
||||
this.thisMonthSalesCount = result.snippets.this_month_sales_count;
|
||||
this.thisMonthSalesTotal = result.snippets.this_month_sales_total;
|
||||
this.thisWeekSalesCount = result.snippets.this_week_sales_count;
|
||||
this.thisWeekSalesTotal = result.snippets.this_week_sales_total;
|
||||
this.todaySalesCount = result.snippets.today_sales_count;
|
||||
this.todaySalesTotal = result.snippets.today_sales_total;
|
||||
|
||||
this.thisMonthPurchasesCount = result.snippets.this_week_purchases_count;
|
||||
this.thisMonthPurchasesTotal = result.snippets.this_week_purchases_total;
|
||||
this.thisWeekPurchasesCount = result.snippets.this_month_purchases_count;
|
||||
this.thisWeekPurchasesTotal = result.snippets.this_month_purchases_total;
|
||||
this.todayPurchasesCount = result.snippets.today_purchases_count;
|
||||
this.todayPurchasesTotal = result.snippets.today_purchases_total;
|
||||
this.userSum = result.snippets.user_sum;
|
||||
this.userPosition = result.snippets.user_position;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
|
Reference in a new issue