Pear-Trading/FoodLoop-Web
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

working graph widgets and local doughnut chart

Browse source
This commit is contained in:
piratefinn 2017-12-14 16:44:23 +00:00
parent 846c21f967
commit df9ea2436c
7 changed files with 194 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

151
src/app/dashboard/dashboard-customer.component.html
View file

@ -12,8 +12,151 @@
</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 class="col-md-4">
<panel-pie></panel-pie>
</div><!--/.col-->
<div class="col-md-4">
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-12">
<h4 class="card-title float-left mb-0">Purchases Per Week</h4>
</div><!--/.col-->
</div><!--/.row-->
<div class="chart-wrapper">
<ul class="horizontal-bars type-2">
<li>
<span class="title">This Week</span>
<span class="value">191,235 <span class="text-muted small">(56%)</span></span>
<div class="bars">
<div class="progress progress-xs">
<div class="progress-bar bg-success" role="progressbar" style="width: 56%" aria-valuenow="56" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</li>
<li>
<span class="title">Last Week</span>
<span class="value">51,223 <span class="text-muted small">(15%)</span></span>
<div class="bars">
<div class="progress progress-xs">
<div class="progress-bar bg-success" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</li>
<li>
<span class="title">2 Weeks Ago</span>
<span class="value">37,564 <span class="text-muted small">(11%)</span></span>
<div class="bars">
<div class="progress progress-xs">
<div class="progress-bar bg-success" role="progressbar" style="width: 11%" aria-valuenow="11" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</li>
<li>
<span class="title">3 Weeks Ago</span>
<span class="value">27,319 <span class="text-muted small">(8%)</span></span>
<div class="bars">
<div class="progress progress-xs">
<div class="progress-bar bg-success" role="progressbar" style="width: 8%" aria-valuenow="8" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div><!--/.col-->
<div class="col-md-4">
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-12">
<h4 class="card-title float-left mb-0">Sector Purchase Amounts</h4>
</div><!--/.col-->
</div><!--/.row-->
<div class="chart-wrapper">
<ul class="icons-list">
<li>
<i class="icon-screen-desktop bg-primary"></i>
<div class="desc">
<div class="title">Sector A</div>
<small>Lorem ipsum dolor sit amet</small>
</div>
<div class="value">
<div class="small text-muted">Bought this week</div>
<strong>1.924</strong>
</div>
</li>
<li>
<i class="icon-screen-smartphone bg-info"></i>
<div class="desc">
<div class="title">Sector B</div>
<small>Lorem ipsum dolor sit amet</small>
</div>
<div class="value">
<div class="small text-muted">Bought this week</div>
<strong>1.224</strong>
</div>
</li>
<li>
<i class="icon-screen-smartphone bg-warning"></i>
<div class="desc">
<div class="title">Sector C</div>
<small>Lorem ipsum dolor sit amet</small>
</div>
<div class="value">
<div class="small text-muted">Bought this week</div>
<strong>1.163</strong>
</div>
</li>
<li>
<i class="icon-user bg-danger"></i>
<div class="desc">
<div class="title">Sector D</div>
<small>Lorem ipsum dolor sit amet</small>
</div>
<div class="value">
<div class="small text-muted">Bought this week</div>
<strong>928</strong>
</div>
</li>
<li>
<i class="icon-social-spotify bg-success"></i>
<div class="desc">
<div class="title">Sector E</div>
<small>Lorem ipsum dolor sit amet</small>
</div>
<div class="value">
<div class="small text-muted">Bought this week</div>
<strong>893</strong>
</div>
</li>
<li>
<i class="icon-cloud-download bg-danger"></i>
<div class="desc">
<div class="title">Sector F</div>
<small>Lorem ipsum dolor sit amet</small>
</div>
<div class="value">
<div class="small text-muted">Bought this week</div>
<strong>121.924</strong>
</div>
</li>
<li>
<i class="icon-camera bg-warning"></i>
<div class="desc">
<div class="title">Sector G</div>
<small>Lorem ipsum dolor sit amet</small>
</div>
<div class="value">
<div class="small text-muted">Bought this week</div>
<strong>12.125</strong>
</div>
</li>
</ul>
</div>
</div>
</div>
</div><!--/.col-->
</div><!--/.row-->
</div>

24
src/app/dashboard/dashboard-customer.component.ts
View file

@ -26,18 +26,6 @@ export class DashboardCustomerComponent implements OnInit {
public polarAreaChartType = 'polarArea';
public widgetList = [
{
type: 'graph',
name: 'total_today',
title: 'Total Today',
dataType: DataType.currency,
},
{
type: 'graph',
name: 'avg_spend_today',
title: 'Avg. Spend Today',
dataType: DataType.currency,
},
{
type: 'graph',
name: 'total_last_week',
@ -64,18 +52,6 @@ export class DashboardCustomerComponent implements OnInit {
title: 'Last Month Avg. Spend',
dataType: DataType.currency,
},
{
type: 'graph',
name: 'total_user',
title: 'User Total',
dataType: DataType.currency,
},
{
type: 'graph',
name: 'avg_spend_user',
title: 'User Avg. Spend',
dataType: DataType.currency,
},
];
constructor(