fix(chartist): use native chartist instead of angular lib

johnny5tw · Feb 16, 2016 · 8bad8f4 · 8bad8f4
1 parent d3648e2
commit 8bad8f4
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 21 deletions.
diff --git a/bower.json b/bower.json
@@ -46,7 +46,6 @@
     "angular-ui-router": "~0.2.15",
     "angular-chart.js": "~0.8.8",
     "angular-chartist.js": "~3.3.12",
-    "angular-morris-chart": "~1.1.0",
     "ionrangeslider": "~2.1.2",
     "angular-bootstrap": "~0.14.3",
     "angular-animate": "~1.4.8",

diff --git a/src/app/pages/charts/chartist/chartist.html b/src/app/pages/charts/chartist/chartist.html
@@ -3,28 +3,22 @@
     <div class="col-md-6 ">
       <div ba-panel ba-panel-title="Lines" ba-panel-class="with-scroll ">
         <h5>Simple line chart</h5>
-        <chartist class="ct-chart" chartist-data="simpleLineData" chartist-chart-type="Line"
-                  chartist-chart-options="simpleLineOptions"></chartist>
+        <div id="line-chart" class="ct-chart"></div>
         <h5>Line chart with area</h5>
-        <chartist class="ct-chart" chartist-data="areaLineData" chartist-chart-type="Line"
-                  chartist-chart-options="areaLineOptions"></chartist>
+        <div id="area-chart" class="ct-chart"></div>
         <h5>Bi-polar line chart with area only</h5>
-        <chartist class="ct-chart" chartist-data="biLineData" chartist-chart-type="Line"
-                  chartist-chart-options="biLineOptions"></chartist>
+        <div id="bi-chart" class="ct-chart"></div>
       </div>
     </div>
 
     <div class="col-md-6 ">
       <div ba-panel ba-panel-title="Bars" ba-panel-class="with-scroll ">
         <h5>Simple bar chart</h5>
-        <chartist class="ct-chart" chartist-data="simpleBarData" chartist-chart-type="Bar"
-                  chartist-chart-options="simpleBarOptions"></chartist>
+        <div id="simple-bar" class="ct-chart"></div>
         <h5>Multi-line labels bar chart</h5>
-        <chartist class="ct-chart" chartist-data="multiBarData" chartist-chart-type="Bar"
-                  chartist-chart-options="multiBarOptions" chartist-responsive-options="multiBarResponsive"></chartist>
+        <div id="multi-bar" class="ct-chart"></div>
         <h5>Stacked bar chart</h5>
-        <chartist class="ct-chart stacked-bar" chartist-data="stackedBarData" chartist-chart-type="Bar"
-                  chartist-chart-options="stackedBarOptions"></chartist>
+        <div id="stacked-bar" class="ct-chart stacked-bar"></div>
       </div>
     </div>
   </div>
@@ -34,16 +28,13 @@ <h5>Stacked bar chart</h5>
       <div ba-panel ba-panel-title="Pies & Donuts" ba-panel-class="with-scroll ">
         <div class="row">
           <div class="col-md-12 col-lg-4"><h5>Simple Pie</h5>
-            <chartist class="ct-chart" chartist-data="simplePieData" chartist-chart-type="Pie"
-                      chartist-chart-options="simplePieOptions"></chartist>
+            <div id="simple-pie" class="ct-chart"></div>
           </div>
           <div class="col-md-12 col-lg-4"><h5>Pie with labels</h5>
-            <chartist class="ct-chart" chartist-data="labelsPieData" chartist-chart-type="Pie"
-                      chartist-chart-options="labelsPieOptions" chartist-responsive-options="pieResponsive"></chartist>
+            <div id="label-pie" class="ct-chart"></div>
           </div>
           <div class="col-md-12 col-lg-4"><h5>Donut</h5>
-            <chartist class="ct-chart" chartist-data="simpleDonutData" chartist-chart-type="Pie"
-                      chartist-chart-options="simpleDonutOptions" chartist-responsive-options="donutResponsive"></chartist>
+            <div id="donut" class="ct-chart"></div>
           </div>
         </div>
       </div>

diff --git a/src/app/pages/charts/chartist/chartistCtrl.js b/src/app/pages/charts/chartist/chartistCtrl.js
@@ -9,7 +9,7 @@
     .controller('chartistCtrl', chartistCtrl);
 
   /** @ngInject */
-  function chartistCtrl($scope) {
+  function chartistCtrl($scope, $timeout) {
 
     $scope.simpleLineOptions = {
       fullWidth: true,
@@ -30,6 +30,8 @@
       ]
     };
 
+
+
     $scope.areaLineData = {
       labels: [1, 2, 3, 4, 5, 6, 7, 8],
       series: [
@@ -222,6 +224,20 @@
       ];
     }
 
+    $timeout(function(){
+      new Chartist.Line('#line-chart', $scope.simpleLineData, $scope.simpleLineOptions);
+      new Chartist.Line('#area-chart', $scope.areaLineData, $scope.areaLineOptions);
+      new Chartist.Line('#bi-chart', $scope.biLineData, $scope.biLineOptions);
+
+      new Chartist.Bar('#simple-bar', $scope.simpleBarData, $scope.simpleBarOptions);
+      new Chartist.Bar('#multi-bar', $scope.multiBarData, $scope.multiBarOptions, $scope.multiBarResponsive);
+      new Chartist.Bar('#stacked-bar', $scope.stackedBarData, $scope.stackedBarOptions);
+
+      new Chartist.Pie('#simple-pie', $scope.simplePieData, $scope.simplePieOptions, $scope.pieResponsive);
+      new Chartist.Pie('#label-pie', $scope.labelsPieData, $scope.labelsPieOptions);
+      new Chartist.Pie('#donut', $scope.simpleDonutData, $scope.simpleDonutOptions, $scope.donutResponsive);
+    }, 100);
+
 
   }
 

diff --git a/src/app/theme/theme.module.js b/src/app/theme/theme.module.js
@@ -9,7 +9,6 @@
       'toastr',
       'chart.js',
       'angular-chartist',
-      'angular.morris-chart',
       'textAngular',
       'BlurAdmin.theme.components'
   ]);

diff --git a/src/assets/img/blur-bg-blurred.jpg b/src/assets/img/blur-bg-blurred.jpg
diff --git a/src/sass/app/_chartsPage.scss b/src/sass/app/_chartsPage.scss
@@ -51,6 +51,11 @@
   font-size: 1em;
 }
 
+.ct-chart svg{
+  width: 100%;
+  display: block;
+}
+
 .ct-series-a {
   .ct-bar,  .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
     stroke: $primary;