Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-17 07:50:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(dashboard): add dropdown to the electricity chart

Browse source
This commit is contained in:
KostyaDanovsky 2017-07-17 15:17:33 +03:00
parent 7675d56104
commit b9e03cf8cd
2 changed files with 34 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/app/pages/dashboard/electricity/electricity.component.html
View file

@ -22,7 +22,8 @@
<div class="chart-container"> <div class="chart-container">
<div class="chart-header"> <div class="chart-header">
<div class="header-block"> <div class="header-stats">
<div class="stats-block">
<div class="subtitle">Consumed</div> <div class="subtitle">Consumed</div>
<div> <div>
<span class="value">816</span> <span class="value">816</span>
@ -30,7 +31,7 @@
</div> </div>
</div> </div>
<div class="header-block"> <div class="stats-block">
<div class="subtitle">Value</div> <div class="subtitle">Value</div>
<div> <div>
<span class="value dollar">$</span> <span class="value dollar">$</span>
@ -38,6 +39,19 @@
<span class="unit">USD</span> <span class="unit">USD</span>
</div> </div>
</div> </div>
</div>
<!--<div class="btn-group" ngbDropdown ngbDropdownToggle>-->
<!--<button type="button" class="btn btn-primary">Week</button>-->
<!--<button type="button" class="btn btn-primary">-->
<!--<span class="sr-only">Dropdown</span>-->
<!--</button>-->
<!--<ul class="dropdown-menu">-->
<!--<li class="dropdown-item">Week</li>-->
<!--<li class="dropdown-item">Month</li>-->
<!--<li class="dropdown-item">Year</li>-->
<!--</ul>-->
<!--</div>-->
</div> </div>
<ngx-electricity-chart></ngx-electricity-chart> <ngx-electricity-chart></ngx-electricity-chart>

8
src/app/pages/dashboard/electricity/electricity.component.scss
View file

@ -139,10 +139,16 @@
.chart-header { .chart-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
padding: 1rem 2rem; padding: 1rem 2rem;
} }
.header-block { .header-stats {
display: flex;
align-items: center;
}
.stats-block {
margin-right: 3rem; margin-right: 3rem;
.subtitle { .subtitle {