From 3f8e6235842190f24d7470448a89dd05fd1afe15 Mon Sep 17 00:00:00 2001
From: nixa <4dmitr@gmail.com>
Date: Wed, 11 May 2016 11:54:31 +0300
Subject: [PATCH] chart.js responsive error fix

---
 .../components/chartJs/chartJs.component.ts   |  3 +-
 .../charts/components/chartJs/chartJs.html    | 28 +++++++++----------
 .../charts/components/chartJs/chartJs.scss    |  7 +++++
 .../theme/sass/bootstrap-overrides/_card.scss |  1 +
 4 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/app/pages/charts/components/chartJs/chartJs.component.ts b/src/app/pages/charts/components/chartJs/chartJs.component.ts
index 86d40557..b10b3672 100644
--- a/src/app/pages/charts/components/chartJs/chartJs.component.ts
+++ b/src/app/pages/charts/components/chartJs/chartJs.component.ts
@@ -35,8 +35,7 @@ export class ChartJs {
   public options = {
     scaleShowLabelBackdrop : false,
     segmentShowStroke : false,
-    // TODO: produce an error
-    // responsive: true,
+    responsive: true,
     scaleFontColor: "rgba(255,255,255,.7)",
     scaleLineColor: "rgba(255,255,255,.7)",
     pointLabelFontColor: "rgba(255,255,255,.7)"
diff --git a/src/app/pages/charts/components/chartJs/chartJs.html b/src/app/pages/charts/components/chartJs/chartJs.html
index f5872bbf..118723eb 100644
--- a/src/app/pages/charts/components/chartJs/chartJs.html
+++ b/src/app/pages/charts/components/chartJs/chartJs.html
@@ -1,23 +1,23 @@
 <div class="row">
   <div class="col-md-4">
-    <ba-card title="Pie" baCardClass="medium-card">
-      <base-chart class="chart chart-pie"
+    <ba-card title="Pie" baCardClass="with-scroll">
+      <base-chart class="chartjs chart chart-pie"
               [legend]="true" [colours]="colours" [options]="options" [data]="data.one" [chartType]="chartType('Pie')" [labels]="labels.one" (chartClick)="changeData($event)">
       </base-chart>
     </ba-card>
   </div>
 
   <div class="col-md-4">
-    <ba-card title="Doughnut" baCardClass="medium-card">
-      <base-chart class="doughnut chart-doughnut"
+    <ba-card title="Doughnut" baCardClass="with-scroll">
+      <base-chart class="chartjs doughnut chart-doughnut"
                   [legend]="true" [colours]="colours" [options]="options" [data]="data.one" [chartType]="chartType('Doughnut')" [labels]="labels.one" (chartClick)="changeData($event)">
       </base-chart>
     </ba-card>
   </div>
 
   <div class="col-md-4">
-    <ba-card title="Polar" baCardClass="medium-card">
-      <base-chart class="polar chart-polar"
+    <ba-card title="Polar" baCardClass="with-scroll">
+      <base-chart class="chartjs polar chart-polar"
                   [legend]="true" [colours]="colours" [options]="options" [data]="data.one" [chartType]="chartType('PolarArea')" [labels]="labels.one" (chartClick)="changeData($event)">
       </base-chart>
     </ba-card>
@@ -27,14 +27,14 @@
 <div class="row ">
   <div class="col-md-6">
     <ba-card title="Animated Radar" baCardClass="with-scroll col-eq-height">
-      <base-chart class="waveLine chart-waveLine"
+      <base-chart class="chartjs waveLine chart-waveLine"
                   [legend]="false" [colours]="colours" [options]="options" [data]="data.two" [chartType]="chartType('Radar')" [labels]="labels.two" (chartClick)="changeData($event)">
       </base-chart>
     </ba-card>
   </div>
   <div class="col-md-6">
     <ba-card title="Animated Bars" baCardClass="with-scroll col-eq-height">
-      <base-chart class="waveBars chart-waveBars"
+      <base-chart class="chartjs waveBars chart-waveBars"
                   [legend]="false" [colours]="colours" [options]="options" [data]="data.two" [chartType]="chartType('Bar')" [labels]="labels.two" (chartClick)="changeData($event)">
       </base-chart>
     </ba-card>
@@ -43,22 +43,22 @@
 
 <div class="row ">
   <div class="col-lg-4 col-md-6">
-    <ba-card title="Radar" baCardClass="with-scroll ">
-      <base-chart id="radar" class="chart chart-radar"
+    <ba-card title="Radar" baCardClass="with-scroll">
+      <base-chart id="radar" class="chartjs chart chart-radar"
                   [legend]="false" [series]="series" [colours]="colours" [options]="options" [data]="data.three" [chartType]="chartType('Radar')" [labels]="labels.three" (chartClick)="changeData($event)">
       </base-chart>
     </ba-card>
   </div>
   <div class="col-lg-4 col-md-6">
-    <ba-card title="Line" baCardClass="with-scroll ">
-      <base-chart id="line" class="chart chart-line"
+    <ba-card title="Line" baCardClass="with-scroll">
+      <base-chart id="line" class="chartjs chart chart-line"
                   [legend]="false" [series]="series" [colours]="colours" [options]="options" [data]="data.three" [chartType]="chartType('Line')" [labels]="labels.two" (chartClick)="changeData($event)">
       </base-chart>
     </ba-card>
   </div>
   <div class="col-lg-4 col-md-12">
-    <ba-card title="Bars" baCardClass="with-scroll ">
-      <base-chart id="bar" class="chart chart-bar"
+    <ba-card title="Bars" baCardClass="with-scroll">
+      <base-chart id="bar" class="chartjs chart chart-bar"
                   [legend]="false" [series]="series" [colours]="colours" [options]="options" [data]="data.three" [chartType]="chartType('Bar')" [labels]="labels.two" (chartClick)="changeData($event)">
       </base-chart>
     </ba-card>
diff --git a/src/app/pages/charts/components/chartJs/chartJs.scss b/src/app/pages/charts/components/chartJs/chartJs.scss
index e6598ee4..b3236b5a 100644
--- a/src/app/pages/charts/components/chartJs/chartJs.scss
+++ b/src/app/pages/charts/components/chartJs/chartJs.scss
@@ -1,3 +1,8 @@
+.chartjs {
+  display: block;
+  width: 100%;
+}
+
 .chart-legend,
 .bar-legend,
 .line-legend,
@@ -16,6 +21,7 @@
   padding-left: 0;
   /* IE (handles all cases, really, but we should also include the vendor-specific properties just to be safe) */
 }
+
 .chart-legend li,
 .bar-legend li,
 .line-legend li,
@@ -32,6 +38,7 @@
   font-size: smaller;
   cursor: default;
 }
+
 .chart-legend li span,
 .bar-legend li span,
 .line-legend li span,
diff --git a/src/app/theme/sass/bootstrap-overrides/_card.scss b/src/app/theme/sass/bootstrap-overrides/_card.scss
index 6eb554ba..fd55317e 100644
--- a/src/app/theme/sass/bootstrap-overrides/_card.scss
+++ b/src/app/theme/sass/bootstrap-overrides/_card.scss
@@ -60,6 +60,7 @@ $card-header-font-size: 16px;
   font-weight: $font-normal;
   text-transform: uppercase;
   opacity: 0.9;
+  font-size: $card-header-font-size;
   //text-transform: uppercase;
 }