From 4d516986b1305c57b155490de03818b33a4e0b20 Mon Sep 17 00:00:00 2001
From: nixa <4dmitr@gmail.com>
Date: Tue, 19 Sep 2017 16:48:38 +0300
Subject: [PATCH] fix(dashboard): fix height inheritance for charts (Safari
 issue)

---
 .../pages/dashboard/dashboard.component.html  |  7 +----
 .../electricity-chart.component.scss          |  3 +++
 .../dashboard/solar/solar.component.scss      | 27 +++++++++----------
 .../pages/dashboard/solar/solar.component.ts  | 18 ++++++++-----
 .../dashboard/traffic/traffic.component.scss  |  2 ++
 5 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/src/app/pages/dashboard/dashboard.component.html b/src/app/pages/dashboard/dashboard.component.html
index 0e64926f..db83f0b9 100644
--- a/src/app/pages/dashboard/dashboard.component.html
+++ b/src/app/pages/dashboard/dashboard.component.html
@@ -44,12 +44,7 @@
   </div>
 
   <div class="col-xxxl-3 col-xxl-4 col-lg-5 col-md-6">
-    <nb-card size="xsmall" class="solar-card">
-      <nb-card-header>Solar Energy Consumption</nb-card-header>
-      <nb-card-body>
-        <ngx-solar [chartValue]="72"></ngx-solar>
-      </nb-card-body>
-    </nb-card>
+    <ngx-solar [chartValue]="72"></ngx-solar>
 
     <ngx-kitten></ngx-kitten>
   </div>
diff --git a/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.scss b/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.scss
index 098d6f7d..3debfa43 100644
--- a/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.scss
+++ b/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.scss
@@ -4,8 +4,11 @@
 
   display: block;
   flex: 1;
+  position: relative;
 
   .echart {
+    position: absolute;
+    width: 100%;
     height: 100%;
   }
 }
diff --git a/src/app/pages/dashboard/solar/solar.component.scss b/src/app/pages/dashboard/solar/solar.component.scss
index c4d4332f..1eab347f 100644
--- a/src/app/pages/dashboard/solar/solar.component.scss
+++ b/src/app/pages/dashboard/solar/solar.component.scss
@@ -4,27 +4,24 @@
 
 @include nb-install-component() {
 
-  display: flex;
-  height: 100%;
-  color: nb-theme(color-fg);
+  $padding: 1rem;
+  $padding: 1rem;
+
+  nb-card-body {
+    overflow: hidden;
+    padding: $padding;
+  }
 
   .echart {
-    flex: 1;
-    height: 100%;
+    position: absolute;
+    height: calc(100% - 2 * #{$padding});
     width: 40%;
   }
 
   .info {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    align-self: center;
-  }
-
-  .date {
-    font-size: 1.25rem;
-    font-weight: nb-theme(font-weight-bolder);
-    margin-bottom: 0.5rem;
+    margin-left: 45%;
+    padding-top: 1.5rem;
+    color: nb-theme(color-fg);
   }
 
   .value {
diff --git a/src/app/pages/dashboard/solar/solar.component.ts b/src/app/pages/dashboard/solar/solar.component.ts
index 7a6f5473..05502d77 100644
--- a/src/app/pages/dashboard/solar/solar.component.ts
+++ b/src/app/pages/dashboard/solar/solar.component.ts
@@ -7,13 +7,17 @@ declare const echarts: any;
   selector: 'ngx-solar',
   styleUrls: ['./solar.component.scss'],
   template: `
-    <div echarts [options]="option" class="echart">
-    </div>
-    <div class="info">
-      <div class="date">June 7, 2017</div>
-      <div class="value">6. 421 kWh</div>
-      <div class="details"><span>out of</span> 8.421 kWh</div>
-    </div>
+    <nb-card size="xsmall" class="solar-card">
+      <nb-card-header>Solar Energy Consumption</nb-card-header>
+      <nb-card-body>
+        <div echarts [options]="option" class="echart">
+        </div>
+        <div class="info">
+          <div class="value">6. 421 kWh</div>
+          <div class="details"><span>out of</span> 8.421 kWh</div>
+        </div>
+      </nb-card-body>
+    </nb-card>
   `,
 })
 export class SolarComponent implements AfterViewInit {
diff --git a/src/app/pages/dashboard/traffic/traffic.component.scss b/src/app/pages/dashboard/traffic/traffic.component.scss
index 592b4a53..04dbfb0a 100644
--- a/src/app/pages/dashboard/traffic/traffic.component.scss
+++ b/src/app/pages/dashboard/traffic/traffic.component.scss
@@ -12,6 +12,7 @@
 
   nb-card-body {
     overflow: hidden;
+    position: relative;
   }
 
   /deep/ canvas {
@@ -20,6 +21,7 @@
   }
 
   .echart {
+    position: absolute;
     height: 100%;
     width: 100%;
   }