From b9e03cf8cdc354022b1e0a0c3addb88afe7d7f87 Mon Sep 17 00:00:00 2001
From: KostyaDanovsky <kostya.danovsky@gmail.com>
Date: Mon, 17 Jul 2017 15:17:33 +0300
Subject: [PATCH] fix(dashboard): add dropdown to the electricity chart

---
 .../electricity/electricity.component.html    | 40 +++++++++++++------
 .../electricity/electricity.component.scss    |  8 +++-
 2 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/src/app/pages/dashboard/electricity/electricity.component.html b/src/app/pages/dashboard/electricity/electricity.component.html
index a16a525c..a1c59f36 100644
--- a/src/app/pages/dashboard/electricity/electricity.component.html
+++ b/src/app/pages/dashboard/electricity/electricity.component.html
@@ -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>
diff --git a/src/app/pages/dashboard/electricity/electricity.component.scss b/src/app/pages/dashboard/electricity/electricity.component.scss
index 6a503f82..2b206f08 100644
--- a/src/app/pages/dashboard/electricity/electricity.component.scss
+++ b/src/app/pages/dashboard/electricity/electricity.component.scss
@@ -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 {