Skip to content

Commit 14055b3

Browse files
rohanoid5rohanoid5
committed
Added a deep cloner to remove observer object from dataSource
1 parent 18ae92f commit 14055b3

File tree

6 files changed

+43
-64
lines changed

6 files changed

+43
-64
lines changed

‎example/index.html

Lines changed: 9 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -19,25 +19,15 @@
1919
<body>
2020
<div id="chart1">
2121
<fusioncharts
22-
:width="width"
23-
:height="height"
24-
:type="type"
25-
:dataFormat="dataFormat"
26-
:dataSource="dataSource"
27-
>
28-
FusionCharts will render here...
29-
</fusioncharts>
30-
</div>
31-
<!-- <button type="button" @click="component = !component">
32-
Swap component
33-
</button>
34-
<button v-show="component" type="button" @click="show = !show">
35-
Toggle chart show
36-
</button>
37-
<button @click="changeFirstChartAttr">Change 1st Chart Attributes</button>
38-
<button @click="changeSecondChartAttr">
39-
Change 2nd Chart Attributes
40-
</button> -->
22+
:width="width"
23+
:height="height"
24+
:type="type"
25+
:dataFormat="dataFormat"
26+
:dataSource="dataSource"
27+
>
28+
FusionCharts will render here...
29+
</fusioncharts>
30+
<button @click="changeChartAttr">Update Chart</button>
4131
</div>
4232
<script type="text/javascript" src="bundle.js"></script>
4333
</body>

‎example/index.js

Lines changed: 7 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ var chart = new Vue({
5656
subcaption: {
5757
text: 'Grocery & Footwear'
5858
},
59-
series: 'ABC',
59+
series: 'Type',
6060
yAxis: [
6161
{
6262
plot: 'Sales Value',
@@ -126,37 +126,17 @@ var chart = new Vue({
126126
var max = 5,
127127
min = 2;
128128
return Math.round((max - min) * Math.random() + min);
129+
},
130+
changeChartAttr: function() {
131+
let dataSource = Object.assign({}, this.dataSource);
132+
dataSource.caption.text = 'Changed to something else';
133+
this.dataSource = dataSource;
129134
}
130135
},
131136
mounted: function() {
132-
// Promise.all([dataFetch, schemaFetch]).then(res => {
133-
// const data = res[0];
134-
// const schema = res[1];
135-
// const fusionTable = new FusionCharts.DataStore().createDataTable(
136-
// data,
137-
// schema
138-
// );
139-
// this.dataSource.data = fusionTable;
140-
// });
141-
},
142-
beforeMount: function() {
143137
Promise.all([dataFetch, schemaFetch]).then(res => {
144138
const data = res[0];
145-
const schema = [
146-
{
147-
name: 'Time',
148-
type: 'date',
149-
format: '%d-%b-%y'
150-
},
151-
{
152-
name: 'ABC',
153-
type: 'string'
154-
},
155-
{
156-
name: 'Sales Value',
157-
type: 'number'
158-
}
159-
];
139+
const schema = res[1];
160140
const fusionTable = new FusionCharts.DataStore().createDataTable(
161141
data,
162142
schema

‎package-lock.json

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@
8080
"yards": "^0.1.4"
8181
},
8282
"dependencies": {
83-
"fusioncharts": "^3.13.3-sr.1",
83+
"fusioncharts": "^3.13.4",
8484
"underscore": "^1.9.1"
8585
}
8686
}

‎src/utils.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
import Vue from 'vue';
2+
3+
const Observer = new Vue().$data.__ob__.constructor;
4+
5+
export function makeNonreactive(obj) {
6+
obj.__ob__ = new Observer({});
7+
}
8+
19
export const addDep = (FC, _FC, modules) => {
210
if (FC) {
311
if (

‎src/vue-fusioncharts-component.js

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import _FC from 'fusioncharts';
22
const { optionsMap, props } = require('./config.js');
3+
const _ = require('lodash');
34
import { addDep, checkIfDataTableExists, cloneDataSource } from './utils';
45

56
export default (FC, ...options) => {
@@ -147,12 +148,12 @@ export default (FC, ...options) => {
147148
'datasource.data': {
148149
handler: function(newVal, prevVal) {
149150
if (newVal !== prevVal) {
150-
let data = {};
151-
for (let d in this.datasource) {
152-
data[d] = this.datasource[d];
153-
}
151+
let clonedDataSource;
152+
if (this.datasource.series) {
153+
clonedDataSource = _.cloneDeep(this.datasource);
154+
} else clonedDataSource = this.datasource;
154155
this.chartObj.setChartData(
155-
data,
156+
clonedDataSource,
156157
this.dataFormat || this.dataformat
157158
);
158159
}
@@ -162,12 +163,12 @@ export default (FC, ...options) => {
162163
'dataSource.data': {
163164
handler: function(newVal, prevVal) {
164165
if (newVal !== prevVal) {
165-
let data = {};
166-
for (let d in this.dataSource) {
167-
data[d] = this.dataSource[d];
168-
}
166+
let clonedDataSource;
167+
if (this.dataSource.series) {
168+
clonedDataSource = _.cloneDeep(this.dataSource);
169+
} else clonedDataSource = this.dataSource;
169170
this.chartObj.setChartData(
170-
data,
171+
clonedDataSource,
171172
this.dataFormat || this.dataformat
172173
);
173174
}
@@ -189,15 +190,15 @@ export default (FC, ...options) => {
189190
},
190191
beforeUpdate: function() {
191192
const strPrevClonedDataSource = JSON.stringify(this.prevDataSource);
192-
const ds = this.datasource || this.dataSource || this.options.dataSource;
193+
let ds = this.datasource || this.dataSource || this.options.dataSource;
193194
const strCurrClonedDataSource = JSON.stringify(
194195
cloneDataSource(ds, 'diff')
195196
);
196197
if (strPrevClonedDataSource !== strCurrClonedDataSource) {
197198
this.prevDataSource = cloneDataSource(ds, 'diff');
198-
// if (ds.series) {
199-
// return null;
200-
// }
199+
if (ds.series) {
200+
ds = _.cloneDeep(ds);
201+
}
201202
this.chartObj.setChartData(ds, this.dataFormat || this.dataformat);
202203
}
203204
}

0 commit comments

Comments
 (0)