Refactor: Fix chart change animation

creativetimofficial · Feb 22, 2021 · 2fe3779 · 2fe3779
1 parent 725c8e3
commit 2fe3779
Show file tree

Hide file tree

Showing 2 changed files with 137 additions and 87 deletions.
diff --git a/src/components/Charts/Chart.js b/src/components/Charts/Chart.js
@@ -1,84 +1,5 @@
 import Chart from "chart.js";
 
-export const salesChart = {
-  createChart(chartId, chartData) {
-    const chartColor = "#FFFFFF";
-    const fallBackColor = "#f96332";
-    const color = this.color || fallBackColor;
-    const ctx = document.getElementById(chartId).getContext("2d");
-    const gradientStroke = ctx.createLinearGradient(500, 0, 100, 0);
-    gradientStroke.addColorStop(0, color);
-    gradientStroke.addColorStop(1, chartColor);
-
-    new Chart(ctx, {
-      type: "line",
-      data: {
-        labels: ["May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
-        datasets: [
-          {
-            label: "Performance",
-            tension: 0.4,
-            borderWidth: 4,
-            borderColor: "#5e72e4",
-            pointRadius: 0,
-            backgroundColor: "transparent",
-            data: chartData,
-          },
-        ],
-      },
-      options: {
-        responsive: true,
-        maintainAspectRatio: false,
-        legend: {
-          display: false,
-        },
-        tooltips: {
-          enabled: true,
-          mode: "index",
-          intersect: false,
-        },
-        scales: {
-          yAxes: [
-            {
-              barPercentage: 1.6,
-              gridLines: {
-                drawBorder: false,
-                color: "rgba(29,140,248,0.0)",
-                zeroLineColor: "transparent",
-              },
-              ticks: {
-                padding: 0,
-                fontColor: "#8898aa",
-                fontSize: 13,
-                fontFamily: "Open Sans",
-              },
-            },
-          ],
-          xAxes: [
-            {
-              barPercentage: 1.6,
-              gridLines: {
-                drawBorder: false,
-                color: "rgba(29,140,248,0.0)",
-                zeroLineColor: "transparent",
-              },
-              ticks: {
-                padding: 10,
-                fontColor: "#8898aa",
-                fontSize: 13,
-                fontFamily: "Open Sans",
-              },
-            },
-          ],
-        },
-        layout: {
-          padding: 0,
-        },
-      },
-    });
-  },
-};
-
 export const ordersChart = {
   createChart(chartId) {
     const chartColor = "#FFFFFF";
@@ -165,8 +86,7 @@ export const ordersChart = {
 };
 
 const funcs = {
-  salesChart() {},
-  ordersChart() {},
+  ordersChart() {}
 };
 
 export default funcs;
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
@@ -149,10 +149,12 @@
 </template>
 <script>
 // Charts
-import { salesChart, ordersChart } from "@/components/Charts/Chart";
+import { ordersChart } from "@/components/Charts/Chart";
+import Chart from "chart.js";
 
 import PageVisitsTable from "./Dashboard/PageVisitsTable";
 import SocialTrafficTable from "./Dashboard/SocialTrafficTable";
+let chart;
 
 export default {
   components: {
@@ -174,15 +176,143 @@ export default {
   },
   methods: {
     initBigChart(index) {
-      salesChart.createChart(
-        this.salesChartID,
-        this.bigLineChart.allData[index]
-      );
+      chart.destroy();
+      chart = new Chart(document.getElementById(this.salesChartID).getContext("2d"), {
+        type: "line",
+        data: {
+          labels: ["May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+          datasets: [
+            {
+              label: "Performance",
+              tension: 0.4,
+              borderWidth: 4,
+              borderColor: "#5e72e4",
+              pointRadius: 0,
+              backgroundColor: "transparent",
+              data: this.bigLineChart.allData[index],
+            },
+          ],
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          legend: {
+            display: false,
+          },
+          tooltips: {
+            enabled: true,
+            mode: "index",
+            intersect: false,
+          },
+          scales: {
+            yAxes: [
+              {
+                barPercentage: 1.6,
+                gridLines: {
+                  drawBorder: false,
+                  color: "rgba(29,140,248,0.0)",
+                  zeroLineColor: "transparent",
+                },
+                ticks: {
+                  padding: 0,
+                  fontColor: "#8898aa",
+                  fontSize: 13,
+                  fontFamily: "Open Sans",
+                },
+              },
+            ],
+            xAxes: [
+              {
+                barPercentage: 1.6,
+                gridLines: {
+                  drawBorder: false,
+                  color: "rgba(29,140,248,0.0)",
+                  zeroLineColor: "transparent",
+                },
+                ticks: {
+                  padding: 10,
+                  fontColor: "#8898aa",
+                  fontSize: 13,
+                  fontFamily: "Open Sans",
+                },
+              },
+            ],
+          },
+          layout: {
+            padding: 0,
+          },
+        },
+      });
       this.bigLineChart.activeIndex = index;
     },
   },
   mounted() {
-    salesChart.createChart(this.salesChartID, this.bigLineChart.allData[0]);
+    chart = new Chart(document.getElementById(this.salesChartID).getContext("2d"), {
+      type: "line",
+      data: {
+        labels: ["May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+        datasets: [
+          {
+            label: "Performance",
+            tension: 0.4,
+            borderWidth: 4,
+            borderColor: "#5e72e4",
+            pointRadius: 0,
+            backgroundColor: "transparent",
+            data: this.bigLineChart.allData[1],
+          },
+        ],
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        legend: {
+          display: false,
+        },
+        tooltips: {
+          enabled: true,
+          mode: "index",
+          intersect: false,
+        },
+        scales: {
+          yAxes: [
+            {
+              barPercentage: 1.6,
+              gridLines: {
+                drawBorder: false,
+                color: "rgba(29,140,248,0.0)",
+                zeroLineColor: "transparent",
+              },
+              ticks: {
+                padding: 0,
+                fontColor: "#8898aa",
+                fontSize: 13,
+                fontFamily: "Open Sans",
+              },
+            },
+          ],
+          xAxes: [
+            {
+              barPercentage: 1.6,
+              gridLines: {
+                drawBorder: false,
+                color: "rgba(29,140,248,0.0)",
+                zeroLineColor: "transparent",
+              },
+              ticks: {
+                padding: 10,
+                fontColor: "#8898aa",
+                fontSize: 13,
+                fontFamily: "Open Sans",
+              },
+            },
+          ],
+        },
+        layout: {
+          padding: 0,
+        },
+      },
+    });
     ordersChart.createChart(this.ordersChartID);
   },
 };