Added a deep cloner to remove observer object from dataSource

rohanoid5 · rohanoid5 · commit 14055b306ac0 · 2019-05-10T15:06:46.000+05:30
diff --git a/example/index.html b/example/index.html
@@ -19,25 +19,15 @@
   <body>
     <div id="chart1">
       <fusioncharts
-          :width="width"
-          :height="height"
-          :type="type"
-          :dataFormat="dataFormat"
-          :dataSource="dataSource"
-        >
-          FusionCharts will render here...
-        </fusioncharts>
-      </div>
-      <!-- <button type="button" @click="component = !component">
-        Swap component
-      </button>
-      <button v-show="component" type="button" @click="show = !show">
-        Toggle chart show
-      </button>
-      <button @click="changeFirstChartAttr">Change 1st Chart Attributes</button>
-      <button @click="changeSecondChartAttr">
-        Change 2nd Chart Attributes
-      </button> -->
+        :width="width"
+        :height="height"
+        :type="type"
+        :dataFormat="dataFormat"
+        :dataSource="dataSource"
+      >
+        FusionCharts will render here...
+      </fusioncharts>
+      <button @click="changeChartAttr">Update Chart</button>
     </div>
     <script type="text/javascript" src="bundle.js"></script>
   </body>
diff --git a/example/index.js b/example/index.js
@@ -56,7 +56,7 @@ var chart = new Vue({
       subcaption: {
         text: 'Grocery & Footwear'
       },
-      series: 'ABC',
+      series: 'Type',
       yAxis: [
         {
           plot: 'Sales Value',
@@ -126,37 +126,17 @@ var chart = new Vue({
       var max = 5,
         min = 2;
       return Math.round((max - min) * Math.random() + min);
+    },
+    changeChartAttr: function() {
+      let dataSource = Object.assign({}, this.dataSource);
+      dataSource.caption.text = 'Changed to something else';
+      this.dataSource = dataSource;
     }
   },
   mounted: function() {
-    // Promise.all([dataFetch, schemaFetch]).then(res => {
-    //   const data = res[0];
-    //   const schema = res[1];
-    //   const fusionTable = new FusionCharts.DataStore().createDataTable(
-    //     data,
-    //     schema
-    //   );
-    //   this.dataSource.data = fusionTable;
-    // });
-  },
-  beforeMount: function() {
     Promise.all([dataFetch, schemaFetch]).then(res => {
       const data = res[0];
-      const schema = [
-        {
-          name: 'Time',
-          type: 'date',
-          format: '%d-%b-%y'
-        },
-        {
-          name: 'ABC',
-          type: 'string'
-        },
-        {
-          name: 'Sales Value',
-          type: 'number'
-        }
-      ];
+      const schema = res[1];
       const fusionTable = new FusionCharts.DataStore().createDataTable(
         data,
         schema
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -80,7 +80,7 @@
     "yards": "^0.1.4"
   },
   "dependencies": {
-    "fusioncharts": "^3.13.3-sr.1",
+    "fusioncharts": "^3.13.4",
     "underscore": "^1.9.1"
   }
 }
diff --git a/src/utils.js b/src/utils.js
@@ -1,3 +1,11 @@
+import Vue from 'vue';
+
+const Observer = new Vue().$data.__ob__.constructor;
+
+export function makeNonreactive(obj) {
+  obj.__ob__ = new Observer({});
+}
+
 export const addDep = (FC, _FC, modules) => {
   if (FC) {
     if (
diff --git a/src/vue-fusioncharts-component.js b/src/vue-fusioncharts-component.js
@@ -1,5 +1,6 @@
 import _FC from 'fusioncharts';
 const { optionsMap, props } = require('./config.js');
+const _ = require('lodash');
 import { addDep, checkIfDataTableExists, cloneDataSource } from './utils';
 
 export default (FC, ...options) => {
@@ -147,12 +148,12 @@ export default (FC, ...options) => {
       'datasource.data': {
         handler: function(newVal, prevVal) {
           if (newVal !== prevVal) {
-            let data = {};
-            for (let d in this.datasource) {
-              data[d] = this.datasource[d];
-            }
+            let clonedDataSource;
+            if (this.datasource.series) {
+              clonedDataSource = _.cloneDeep(this.datasource);
+            } else clonedDataSource = this.datasource;
             this.chartObj.setChartData(
-              data,
+              clonedDataSource,
               this.dataFormat || this.dataformat
             );
           }
@@ -162,12 +163,12 @@ export default (FC, ...options) => {
       'dataSource.data': {
         handler: function(newVal, prevVal) {
           if (newVal !== prevVal) {
-            let data = {};
-            for (let d in this.dataSource) {
-              data[d] = this.dataSource[d];
-            }
+            let clonedDataSource;
+            if (this.dataSource.series) {
+              clonedDataSource = _.cloneDeep(this.dataSource);
+            } else clonedDataSource = this.dataSource;
             this.chartObj.setChartData(
-              data,
+              clonedDataSource,
               this.dataFormat || this.dataformat
             );
           }
@@ -189,15 +190,15 @@ export default (FC, ...options) => {
     },
     beforeUpdate: function() {
       const strPrevClonedDataSource = JSON.stringify(this.prevDataSource);
-      const ds = this.datasource || this.dataSource || this.options.dataSource;
+      let ds = this.datasource || this.dataSource || this.options.dataSource;
       const strCurrClonedDataSource = JSON.stringify(
         cloneDataSource(ds, 'diff')
       );
       if (strPrevClonedDataSource !== strCurrClonedDataSource) {
         this.prevDataSource = cloneDataSource(ds, 'diff');
-        // if (ds.series) {
-        //   return null;
-        // }
+        if (ds.series) {
+          ds = _.cloneDeep(ds);
+        }
         this.chartObj.setChartData(ds, this.dataFormat || this.dataformat);
       }
     }

Original file line number	Diff line number	Diff line change
`@@ -80,7 +80,7 @@`
`80`	`80`	`"yards": "^0.1.4"`
`81`	`81`	`},`
`82`	`82`	`"dependencies": {`
`83`		`- "fusioncharts": "^3.13.3-sr.1",`
	`83`	`+ "fusioncharts": "^3.13.4",`
`84`	`84`	`"underscore": "^1.9.1"`
`85`	`85`	`}`
`86`	`86`	`}`