Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-09-22 05:50:48 +02: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

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

@ -22,22 +22,36 @@
<div class="chart-container">
<div class="chart-header">
<div class="header-block">
<div class="subtitle">Consumed</div>
<div>
<span class="value">816</span>
<span class="unit">kWh</span>
<div class="header-stats">
<div class="stats-block">
<div class="subtitle">Consumed</div>
<div>
<span class="value">816</span>
<span class="unit">kWh</span>
</div>
</div>
<div class="stats-block">
<div class="subtitle">Value</div>
<div>
<span class="value dollar">$</span>
<span class="value">91</span>
<span class="unit">USD</span>
</div>
</div>
</div>
<div class="header-block">
<div class="subtitle">Value</div>
<div>
<span class="value dollar">$</span>
<span class="value">91</span>
<span class="unit">USD</span>
</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>
<ngx-electricity-chart></ngx-electricity-chart>

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

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