From 58e43825463d180887432be8390553ecea0686f1 Mon Sep 17 00:00:00 2001
From: nixa <4dmitr@gmail.com>
Date: Tue, 19 Sep 2017 15:29:13 +0300
Subject: [PATCH] feat(charts): provide height for the chart containers (Safari
 issue)

---
 .../pages/charts/chartjs/chartjs.component.html    | 12 ++++++------
 .../pages/charts/chartjs/chartjs.component.scss    |  2 +-
 src/app/pages/charts/d3/d3.component.html          | 12 ++++++------
 src/app/pages/charts/d3/d3.component.scss          |  2 +-
 .../pages/charts/echarts/echarts.component.html    | 14 +++++++-------
 .../pages/charts/echarts/echarts.component.scss    |  2 +-
 6 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/app/pages/charts/chartjs/chartjs.component.html b/src/app/pages/charts/chartjs/chartjs.component.html
index 67555787..dbcafda3 100644
--- a/src/app/pages/charts/chartjs/chartjs.component.html
+++ b/src/app/pages/charts/chartjs/chartjs.component.html
@@ -1,6 +1,6 @@
 <div class="row">
   <div class="col-lg-6">
-    <nb-card size="large">
+    <nb-card>
       <nb-card-header>Pie</nb-card-header>
       <nb-card-body>
         <ngx-chartjs-pie></ngx-chartjs-pie>
@@ -8,7 +8,7 @@
     </nb-card>
   </div>
   <div class="col-lg-6">
-    <nb-card size="large">
+    <nb-card>
       <nb-card-header>Bar</nb-card-header>
       <nb-card-body>
         <ngx-chartjs-bar></ngx-chartjs-bar>
@@ -16,7 +16,7 @@
     </nb-card>
   </div>
   <div class="col-lg-6">
-    <nb-card size="large">
+    <nb-card>
       <nb-card-header>Line</nb-card-header>
       <nb-card-body>
         <ngx-chartjs-line></ngx-chartjs-line>
@@ -24,7 +24,7 @@
     </nb-card>
   </div>
   <div class="col-lg-6">
-    <nb-card size="large">
+    <nb-card>
       <nb-card-header>Multiple x-axis</nb-card-header>
       <nb-card-body>
         <ngx-chartjs-multiple-xaxis></ngx-chartjs-multiple-xaxis>
@@ -32,7 +32,7 @@
     </nb-card>
   </div>
   <div class="col-lg-6">
-    <nb-card size="large">
+    <nb-card>
       <nb-card-header>Bar Horizontal</nb-card-header>
       <nb-card-body>
         <ngx-chartjs-bar-horizontal></ngx-chartjs-bar-horizontal>
@@ -40,7 +40,7 @@
     </nb-card>
   </div>
   <div class="col-lg-6">
-    <nb-card size="large">
+    <nb-card>
       <nb-card-header>Radar</nb-card-header>
       <nb-card-body>
         <ngx-chartjs-radar></ngx-chartjs-radar>
diff --git a/src/app/pages/charts/chartjs/chartjs.component.scss b/src/app/pages/charts/chartjs/chartjs.component.scss
index ae365847..90f4b0a0 100644
--- a/src/app/pages/charts/chartjs/chartjs.component.scss
+++ b/src/app/pages/charts/chartjs/chartjs.component.scss
@@ -8,7 +8,7 @@
   ngx-chartjs-bar-horizontal,
   ngx-chartjs-radar {
     display: block;
-    height: 100%;
+    height: nb-theme(card-height-medium);
     width: 100%;
 
     /deep/ chart {
diff --git a/src/app/pages/charts/d3/d3.component.html b/src/app/pages/charts/d3/d3.component.html
index 85a0fa27..b848d38b 100644
--- a/src/app/pages/charts/d3/d3.component.html
+++ b/src/app/pages/charts/d3/d3.component.html
@@ -1,6 +1,6 @@
 <div class="row">
   <div class="col-lg-6">
-    <nb-card size="large">
+    <nb-card>
       <nb-card-header>Pie</nb-card-header>
       <nb-card-body>
         <ngx-d3-pie></ngx-d3-pie>
@@ -8,7 +8,7 @@
     </nb-card>
   </div>
   <div class="col-lg-6">
-    <nb-card size="large">
+    <nb-card>
       <nb-card-header>Bar</nb-card-header>
       <nb-card-body>
         <ngx-d3-bar></ngx-d3-bar>
@@ -16,7 +16,7 @@
     </nb-card>
   </div>
   <div class="col-lg-6">
-    <nb-card size="large">
+    <nb-card>
       <nb-card-header>Line</nb-card-header>
       <nb-card-body>
         <ngx-d3-line></ngx-d3-line>
@@ -24,7 +24,7 @@
     </nb-card>
   </div>
   <div class="col-lg-6">
-    <nb-card size="large">
+    <nb-card>
       <nb-card-header>Advanced Pie</nb-card-header>
       <nb-card-body>
         <ngx-d3-advanced-pie></ngx-d3-advanced-pie>
@@ -32,7 +32,7 @@
     </nb-card>
   </div>
   <div class="col-lg-6">
-    <nb-card size="large">
+    <nb-card>
       <nb-card-header>Area Chart</nb-card-header>
       <nb-card-body>
         <ngx-d3-area-stack></ngx-d3-area-stack>
@@ -40,7 +40,7 @@
     </nb-card>
   </div>
   <div class="col-lg-6">
-    <nb-card size="large">
+    <nb-card>
       <nb-card-header>Polar Chart</nb-card-header>
       <nb-card-body>
         <ngx-d3-polar></ngx-d3-polar>
diff --git a/src/app/pages/charts/d3/d3.component.scss b/src/app/pages/charts/d3/d3.component.scss
index 96979fc4..f2adca97 100644
--- a/src/app/pages/charts/d3/d3.component.scss
+++ b/src/app/pages/charts/d3/d3.component.scss
@@ -9,7 +9,7 @@
   ngx-d3-polar {
     display: block;
     width: 100%;
-    height: 100%;
+    height: nb-theme(card-height-medium);
 
     /deep/ {
       .pie-label {
diff --git a/src/app/pages/charts/echarts/echarts.component.html b/src/app/pages/charts/echarts/echarts.component.html
index 8d90841e..b3a7ec4b 100644
--- a/src/app/pages/charts/echarts/echarts.component.html
+++ b/src/app/pages/charts/echarts/echarts.component.html
@@ -1,6 +1,6 @@
 <div class="row">
   <div class="col-lg-6">
-    <nb-card size="large">
+    <nb-card>
       <nb-card-header>Pie</nb-card-header>
       <nb-card-body>
         <ngx-echarts-pie></ngx-echarts-pie>
@@ -8,7 +8,7 @@
     </nb-card>
   </div>
   <div class="col-lg-6">
-    <nb-card size="large">
+    <nb-card>
       <nb-card-header>Bar</nb-card-header>
       <nb-card-body>
         <ngx-echarts-bar></ngx-echarts-bar>
@@ -16,7 +16,7 @@
     </nb-card>
   </div>
   <div class="col-lg-6">
-    <nb-card size="large">
+    <nb-card>
       <nb-card-header>Line</nb-card-header>
       <nb-card-body>
         <ngx-echarts-line></ngx-echarts-line>
@@ -24,7 +24,7 @@
     </nb-card>
   </div>
   <div class="col-lg-6">
-    <nb-card size="large">
+    <nb-card>
       <nb-card-header>Multiple x-axis</nb-card-header>
       <nb-card-body>
         <ngx-echarts-multiple-xaxis></ngx-echarts-multiple-xaxis>
@@ -32,7 +32,7 @@
     </nb-card>
   </div>
   <div class="col-lg-6">
-    <nb-card size="large">
+    <nb-card>
       <nb-card-header>Area Stack</nb-card-header>
       <nb-card-body>
         <ngx-echarts-area-stack></ngx-echarts-area-stack>
@@ -40,7 +40,7 @@
     </nb-card>
   </div>
   <div class="col-lg-6">
-    <nb-card size="large">
+    <nb-card>
       <nb-card-header>Bar Animation</nb-card-header>
       <nb-card-body>
         <ngx-echarts-bar-animation></ngx-echarts-bar-animation>
@@ -48,7 +48,7 @@
     </nb-card>
   </div>
   <div class="col-lg-6">
-    <nb-card size="large">
+    <nb-card>
       <nb-card-header>Radar</nb-card-header>
       <nb-card-body>
         <ngx-echarts-radar></ngx-echarts-radar>
diff --git a/src/app/pages/charts/echarts/echarts.component.scss b/src/app/pages/charts/echarts/echarts.component.scss
index 1b1c0fcf..bd7f3998 100644
--- a/src/app/pages/charts/echarts/echarts.component.scss
+++ b/src/app/pages/charts/echarts/echarts.component.scss
@@ -9,7 +9,7 @@
   ngx-echarts-bar-animation,
   ngx-echarts-radar {
     display: block;
-    height: 100%;
+    height: nb-theme(card-height-medium);
     width: 100%;
   }