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

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

@ -22,22 +22,36 @@
<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="subtitle">Consumed</div> <div class="stats-block">
<div> <div class="subtitle">Consumed</div>
<span class="value">816</span> <div>
<span class="unit">kWh</span> <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> </div>
<div class="header-block"> <!--<div class="btn-group" ngbDropdown ngbDropdownToggle>-->
<div class="subtitle">Value</div> <!--<button type="button" class="btn btn-primary">Week</button>-->
<div> <!--<button type="button" class="btn btn-primary">-->
<span class="value dollar">$</span> <!--<span class="sr-only">Dropdown</span>-->
<span class="value">91</span> <!--</button>-->
<span class="unit">USD</span> <!--<ul class="dropdown-menu">-->
</div> <!--<li class="dropdown-item">Week</li>-->
</div> <!--<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 {