Added working snippets and placeholder pie chart

This commit is contained in:
piratefinn 2017-12-13 12:37:11 +00:00
parent 6eb6425fb8
commit 32bebd7c24
9 changed files with 142 additions and 41 deletions

View file

@ -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>

View file

@ -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',

View file

@ -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,

View 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>

View 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);
}
}

View file

@ -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);
}
}

View file

@ -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) { }

View file

@ -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>

View file

@ -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;
}
);
}