From e4d31c1cc8964e38cffcb040ecadf954b827c7df Mon Sep 17 00:00:00 2001
From: nixa <4dmitr@gmail.com>
Date: Tue, 3 May 2016 17:10:49 +0300
Subject: [PATCH] not really animated bar and radar charts

---
 .../components/chartJs/chartJs.component.ts   | 21 ++++++++++++++--
 .../charts/components/chartJs/chartJs.html    | 25 ++++++++++++++++---
 2 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/src/app/pages/charts/components/chartJs/chartJs.component.ts b/src/app/pages/charts/components/chartJs/chartJs.component.ts
index 76641b0d..847dce88 100644
--- a/src/app/pages/charts/components/chartJs/chartJs.component.ts
+++ b/src/app/pages/charts/components/chartJs/chartJs.component.ts
@@ -17,8 +17,14 @@ import {chartColors} from "../../../../theme/theme.constants";
 })
 export class ChartJs {
 
-  public labels = ["Sleeping", "Designing", "Coding", "Cycling"];
-  public data = [20, 40, 5, 35];
+  public labels = {
+    one: ["Sleeping", "Designing", "Coding", "Cycling"],
+    two: ["April", "May", "June", "Jule", "August", "September", "October", "November", "December"]
+  };
+  public data = {
+    one: [20, 40, 5, 35],
+    two: [[1, 9, 3, 4, 5, 6, 7, 8, 2].map((e) => {return Math.sin(e) * 25 + 25})]
+  };
   public colours = chartColors;
   public options = {
     scaleShowLabelBackdrop : false,
@@ -32,6 +38,17 @@ export class ChartJs {
   constructor(private _chartJsService:ChartJsService) {
   }
 
+  ngOnInit() {
+    // var self = this;
+    // setInterval(() => {
+    //
+    //   var temp = [...this.data.two];
+    //   temp[0].unshift(temp[0].pop());
+    //   this.data.two = temp;
+    //
+    // }, 300);
+  }
+
   chartType(type) {
     return type;
   }
diff --git a/src/app/pages/charts/components/chartJs/chartJs.html b/src/app/pages/charts/components/chartJs/chartJs.html
index 95c8887e..2a666eff 100644
--- a/src/app/pages/charts/components/chartJs/chartJs.html
+++ b/src/app/pages/charts/components/chartJs/chartJs.html
@@ -2,7 +2,7 @@
   <div class="col-md-4">
     <ba-card title="Pie" baCardClass="medium-card">
       <base-chart class="chart chart-pie"
-              [legend]="true" [colours]="colours" [options]="options" [data]="data" [chartType]="chartType('Pie')" [labels]="labels" (chartClick)="changeData($event)">
+              [legend]="true" [colours]="colours" [options]="options" [data]="data.one" [chartType]="chartType('Pie')" [labels]="labels.one" (chartClick)="changeData($event)">
       </base-chart>
     </ba-card>
   </div>
@@ -10,7 +10,7 @@
   <div class="col-md-4">
     <ba-card title="Doughnut" baCardClass="medium-card">
       <base-chart class="doughnut chart-doughnut"
-                  [legend]="true" [colours]="colours" [options]="options" [data]="data" [chartType]="chartType('Doughnut')" [labels]="labels" (chartClick)="changeData($event)">
+                  [legend]="true" [colours]="colours" [options]="options" [data]="data.one" [chartType]="chartType('Doughnut')" [labels]="labels.one" (chartClick)="changeData($event)">
       </base-chart>
     </ba-card>
   </div>
@@ -18,8 +18,25 @@
   <div class="col-md-4">
     <ba-card title="Polar" baCardClass="medium-card">
       <base-chart class="polar chart-polar"
-                  [legend]="true" [colours]="colours" [options]="options" [data]="data" [chartType]="chartType('PolarArea')" [labels]="labels" (chartClick)="changeData($event)">
+                  [legend]="true" [colours]="colours" [options]="options" [data]="data.one" [chartType]="chartType('PolarArea')" [labels]="labels.one" (chartClick)="changeData($event)">
       </base-chart>
-      </ba-card>
+    </ba-card>
+  </div>
+</div>
+
+<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"
+                  [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"
+                  [legend]="false" [colours]="colours" [options]="options" [data]="data.two" [chartType]="chartType('Bar')" [labels]="labels.two" (chartClick)="changeData($event)">
+      </base-chart>
+    </ba-card>
   </div>
 </div>