percent per week data viewing done
This commit is contained in:
parent
93f15ae6de
commit
7e7bb4ccf3
3 changed files with 104 additions and 30 deletions
|
@ -10,12 +10,11 @@
|
||||||
</widget-graph>
|
</widget-graph>
|
||||||
</div><!--/.col-->
|
</div><!--/.col-->
|
||||||
</div><!--/.row-->
|
</div><!--/.row-->
|
||||||
<!-- http://www.chartjs.org/docs/latest/charts/polar.html?h=polar -->
|
|
||||||
<div class=row>
|
<div class=row>
|
||||||
<div class="col-md-4">
|
<div class="col-xl-4 col-md-6">
|
||||||
<panel-pie></panel-pie>
|
<panel-pie></panel-pie>
|
||||||
</div><!--/.col-->
|
</div><!--/.col-->
|
||||||
<div class="col-md-4">
|
<div class="col-xl-4 col-md-6">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-block">
|
<div class="card-block">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
@ -27,37 +26,78 @@
|
||||||
<ul class="horizontal-bars type-2">
|
<ul class="horizontal-bars type-2">
|
||||||
<li>
|
<li>
|
||||||
<span class="title">This Week</span>
|
<span class="title">This Week</span>
|
||||||
<span class="value">191,235 <span class="text-muted small">(56%)</span></span>
|
<span class="value">{{ (weekPurchaseList.week_0 || 0 ) }} <span
|
||||||
|
class="text-muted small">({{ (weekPurchaseList.week_0 || 0 ) / maxPurchase | percent:'1.0-0' }})</span></span>
|
||||||
<div class="bars">
|
<div class="bars">
|
||||||
<div class="progress progress-xs">
|
<div class="progress" style="height: 6px;">
|
||||||
<div class="progress-bar bg-success" role="progressbar" style="width: 56%" aria-valuenow="56" aria-valuemin="0" aria-valuemax="100"></div>
|
<div class="progress-bar bg-success" role="progressbar"
|
||||||
|
[style.width]="(weekPurchaseList.week_0 || 0 ) / maxPurchase | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span class="title">Last Week</span>
|
<span class="title">Last Week</span>
|
||||||
<span class="value">51,223 <span class="text-muted small">(15%)</span></span>
|
<span class="value">{{ weekPurchaseList.week_1 || 0 }} <span
|
||||||
|
class="text-muted small">({{ (weekPurchaseList.week_1 || 0 ) / maxPurchase | percent:'1.0-0' }})</span></span>
|
||||||
<div class="bars">
|
<div class="bars">
|
||||||
<div class="progress progress-xs">
|
<div class="progress" style="height: 6px;">
|
||||||
<div class="progress-bar bg-success" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
|
<div class="progress-bar bg-success" role="progressbar"
|
||||||
|
[style.width]="(weekPurchaseList.week_1 || 0 ) / maxPurchase | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span class="title">2 Weeks Ago</span>
|
<span class="title">2 Weeks Ago</span>
|
||||||
<span class="value">37,564 <span class="text-muted small">(11%)</span></span>
|
<span class="value">{{ weekPurchaseList.week_2 || 0 }} <span
|
||||||
|
class="text-muted small">({{ (weekPurchaseList.week_2 || 0 ) / maxPurchase | percent:'1.0-0' }})</span></span>
|
||||||
<div class="bars">
|
<div class="bars">
|
||||||
<div class="progress progress-xs">
|
<div class="progress" style="height: 6px;">
|
||||||
<div class="progress-bar bg-success" role="progressbar" style="width: 11%" aria-valuenow="11" aria-valuemin="0" aria-valuemax="100"></div>
|
<div class="progress-bar bg-success" role="progressbar"
|
||||||
|
[style.width]="(weekPurchaseList.week_2 || 0 ) / maxPurchase | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span class="title">3 Weeks Ago</span>
|
<span class="title">3 Weeks Ago</span>
|
||||||
<span class="value">27,319 <span class="text-muted small">(8%)</span></span>
|
<span class="value">{{ weekPurchaseList.week_3 || 0 }} <span
|
||||||
|
class="text-muted small">({{ (weekPurchaseList.week_3 || 0 ) / maxPurchase | percent:'1.0-0' }})</span></span>
|
||||||
<div class="bars">
|
<div class="bars">
|
||||||
<div class="progress progress-xs">
|
<div class="progress" style="height: 6px;">
|
||||||
<div class="progress-bar bg-success" role="progressbar" style="width: 8%" aria-valuenow="8" aria-valuemin="0" aria-valuemax="100"></div>
|
<div class="progress-bar bg-success" role="progressbar"
|
||||||
|
[style.width]="(weekPurchaseList.week_3 || 0 ) / maxPurchase | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span class="title">4 Weeks Ago</span>
|
||||||
|
<span class="value">{{ weekPurchaseList.week_4 || 0 }} <span
|
||||||
|
class="text-muted small">({{ (weekPurchaseList.week_4 || 0 ) / maxPurchase | percent:'1.0-0' }})</span></span>
|
||||||
|
<div class="bars">
|
||||||
|
<div class="progress" style="height: 6px;">
|
||||||
|
<div class="progress-bar bg-success" role="progressbar"
|
||||||
|
[style.width]="(weekPurchaseList.week_4 || 0 ) / maxPurchase | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span class="title">5 Weeks Ago</span>
|
||||||
|
<span class="value">{{ weekPurchaseList.week_5 || 0 }} <span
|
||||||
|
class="text-muted small">({{ (weekPurchaseList.week_5 || 0 ) / maxPurchase | percent:'1.0-0' }})</span></span>
|
||||||
|
<div class="bars">
|
||||||
|
<div class="progress" style="height: 6px;">
|
||||||
|
<div class="progress-bar bg-success" role="progressbar"
|
||||||
|
[style.width]="(weekPurchaseList.week_5 || 0 ) / maxPurchase | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span class="title">6 Weeks Ago</span>
|
||||||
|
<span class="value">{{ weekPurchaseList.week_6 || 0 }} <span
|
||||||
|
class="text-muted small">({{ (weekPurchaseList.week_6 || 0 ) / maxPurchase | percent:'1.0-0' }})</span></span>
|
||||||
|
<div class="bars">
|
||||||
|
<div class="progress" style="height: 6px;">
|
||||||
|
<div class="progress-bar bg-success" role="progressbar"
|
||||||
|
[style.width]="(weekPurchaseList.week_6 || 0 ) / maxPurchase | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
@ -66,7 +106,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div><!--/.col-->
|
</div><!--/.col-->
|
||||||
<div class="col-md-4">
|
<div class="col-xl-4">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-block">
|
<div class="card-block">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
@ -83,7 +123,7 @@
|
||||||
<small>Lorem ipsum dolor sit amet</small>
|
<small>Lorem ipsum dolor sit amet</small>
|
||||||
</div>
|
</div>
|
||||||
<div class="value">
|
<div class="value">
|
||||||
<div class="small text-muted">Bought this week</div>
|
<div class="small text-muted">Bought from Sector</div>
|
||||||
<strong>1.924</strong>
|
<strong>1.924</strong>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
@ -94,7 +134,7 @@
|
||||||
<small>Lorem ipsum dolor sit amet</small>
|
<small>Lorem ipsum dolor sit amet</small>
|
||||||
</div>
|
</div>
|
||||||
<div class="value">
|
<div class="value">
|
||||||
<div class="small text-muted">Bought this week</div>
|
<div class="small text-muted">Bought from Sector</div>
|
||||||
<strong>1.224</strong>
|
<strong>1.224</strong>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
@ -105,7 +145,7 @@
|
||||||
<small>Lorem ipsum dolor sit amet</small>
|
<small>Lorem ipsum dolor sit amet</small>
|
||||||
</div>
|
</div>
|
||||||
<div class="value">
|
<div class="value">
|
||||||
<div class="small text-muted">Bought this week</div>
|
<div class="small text-muted">Bought from Sector</div>
|
||||||
<strong>1.163</strong>
|
<strong>1.163</strong>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
@ -116,7 +156,7 @@
|
||||||
<small>Lorem ipsum dolor sit amet</small>
|
<small>Lorem ipsum dolor sit amet</small>
|
||||||
</div>
|
</div>
|
||||||
<div class="value">
|
<div class="value">
|
||||||
<div class="small text-muted">Bought this week</div>
|
<div class="small text-muted">Bought from Sector</div>
|
||||||
<strong>928</strong>
|
<strong>928</strong>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
@ -127,7 +167,7 @@
|
||||||
<small>Lorem ipsum dolor sit amet</small>
|
<small>Lorem ipsum dolor sit amet</small>
|
||||||
</div>
|
</div>
|
||||||
<div class="value">
|
<div class="value">
|
||||||
<div class="small text-muted">Bought this week</div>
|
<div class="small text-muted">Bought from Sector</div>
|
||||||
<strong>893</strong>
|
<strong>893</strong>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
@ -138,7 +178,7 @@
|
||||||
<small>Lorem ipsum dolor sit amet</small>
|
<small>Lorem ipsum dolor sit amet</small>
|
||||||
</div>
|
</div>
|
||||||
<div class="value">
|
<div class="value">
|
||||||
<div class="small text-muted">Bought this week</div>
|
<div class="small text-muted">Bought from Sector</div>
|
||||||
<strong>121.924</strong>
|
<strong>121.924</strong>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
@ -149,7 +189,7 @@
|
||||||
<small>Lorem ipsum dolor sit amet</small>
|
<small>Lorem ipsum dolor sit amet</small>
|
||||||
</div>
|
</div>
|
||||||
<div class="value">
|
<div class="value">
|
||||||
<div class="small text-muted">Bought this week</div>
|
<div class="small text-muted">Bought from Sector</div>
|
||||||
<strong>12.125</strong>
|
<strong>12.125</strong>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
|
|
@ -19,12 +19,19 @@ export class DashboardCustomerComponent implements OnInit {
|
||||||
myRank: any;
|
myRank: any;
|
||||||
username: any;
|
username: any;
|
||||||
|
|
||||||
// PolarArea
|
weekPurchaseList = {
|
||||||
public polarAreaChartLabels: string[] = ['Local', 'Not Local'];
|
week_0: 0,
|
||||||
public polarAreaChartData: number[] = [400, 100];
|
week_1: 0,
|
||||||
public polarAreaLegend = true;
|
week_2: 0,
|
||||||
public polarAreaChartType = 'polarArea';
|
week_3: 0,
|
||||||
|
week_4: 0,
|
||||||
|
week_5: 0,
|
||||||
|
week_6: 0,
|
||||||
|
};
|
||||||
|
|
||||||
|
sectorList: any;
|
||||||
|
|
||||||
|
// Graph widgets
|
||||||
public widgetList = [
|
public widgetList = [
|
||||||
{
|
{
|
||||||
type: 'graph',
|
type: 'graph',
|
||||||
|
@ -57,6 +64,35 @@ export class DashboardCustomerComponent implements OnInit {
|
||||||
constructor(
|
constructor(
|
||||||
private api: ApiService,
|
private api: ApiService,
|
||||||
) {
|
) {
|
||||||
|
this.api.basicStats().subscribe(
|
||||||
|
result => {
|
||||||
|
this.setWeekPurchaseList(result.data);
|
||||||
|
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
console.log('Retrieval Error');
|
||||||
|
console.log( error._body );
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
public setWeekPurchaseList (data: any) {
|
||||||
|
this.weekPurchaseList = {
|
||||||
|
week_0: data.purchases[0],
|
||||||
|
week_1: data.purchases[1],
|
||||||
|
week_2: data.purchases[2],
|
||||||
|
week_3: data.purchases[3],
|
||||||
|
week_4: data.purchases[4],
|
||||||
|
week_5: data.purchases[5],
|
||||||
|
week_6: data.purchases[6],
|
||||||
|
};
|
||||||
|
//this.maxPurchase = Math.max(...this.weekPurchaseList);
|
||||||
|
this.maxPurchase = Object.values(this.weekPurchaseList).reduce((a,b) => {
|
||||||
|
if (! a) { a = 0 }
|
||||||
|
if (! b) { b = 0 }
|
||||||
|
return Math.max(a,b);
|
||||||
|
});
|
||||||
|
console.log(this.maxPurchase);
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
|
|
|
@ -30,10 +30,8 @@ export class PiePanel implements OnInit {
|
||||||
|
|
||||||
private setData(data: any) {
|
private setData(data: any) {
|
||||||
this.doughnutChartData = Object.values(data);
|
this.doughnutChartData = Object.values(data);
|
||||||
console.log(this.chartData);
|
|
||||||
// setTimeout is currently a workaround for ng2-charts labels
|
// setTimeout is currently a workaround for ng2-charts labels
|
||||||
setTimeout(() => this.doughnutChartLabels = Object.keys(data), 0);
|
setTimeout(() => this.doughnutChartLabels = Object.keys(data), 0);
|
||||||
console.log(this.chartLabels);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// convert Hex to RGBA
|
// convert Hex to RGBA
|
||||||
|
|
Reference in a new issue