-
-
Notifications
You must be signed in to change notification settings - Fork 836
/
index.js
106 lines (94 loc) · 2.63 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
function dataHandler(newData, oldData) {
if (oldData) {
let chart = this.$data._chart
// Get new and old DataSet Labels
let newDatasetLabels = newData.datasets.map(dataset => {
return dataset.label
})
let oldDatasetLabels = oldData.datasets.map(dataset => {
return dataset.label
})
// Stringify 'em for easier compare
const oldLabels = JSON.stringify(oldDatasetLabels)
const newLabels = JSON.stringify(newDatasetLabels)
// Check if Labels are equal and if dataset length is equal
if (
newLabels === oldLabels &&
oldData.datasets.length === newData.datasets.length
) {
newData.datasets.forEach((dataset, i) => {
// Get new and old dataset keys
const oldDatasetKeys = Object.keys(oldData.datasets[i])
const newDatasetKeys = Object.keys(dataset)
// Get keys that aren't present in the new data
const deletionKeys = oldDatasetKeys.filter(key => {
return key !== '_meta' && newDatasetKeys.indexOf(key) === -1
})
// Remove outdated key-value pairs
deletionKeys.forEach(deletionKey => {
delete chart.data.datasets[i][deletionKey]
})
// Update attributes individually to avoid re-rendering the entire chart
for (const attribute in dataset) {
if (dataset.hasOwnProperty(attribute)) {
chart.data.datasets[i][attribute] = dataset[attribute]
}
}
})
if (newData.hasOwnProperty('labels')) {
chart.data.labels = newData.labels
this.$emit('labels:update')
}
if (newData.hasOwnProperty('xLabels')) {
chart.data.xLabels = newData.xLabels
this.$emit('xlabels:update')
}
if (newData.hasOwnProperty('yLabels')) {
chart.data.yLabels = newData.yLabels
this.$emit('ylabels:update')
}
chart.update()
this.$emit('chart:update')
} else {
if (chart) {
chart.destroy()
this.$emit('chart:destroy')
}
this.renderChart(this.chartData, this.options)
this.$emit('chart:render')
}
} else {
if (this.$data._chart) {
this.$data._chart.destroy()
this.$emit('chart:destroy')
}
this.renderChart(this.chartData, this.options)
this.$emit('chart:render')
}
}
export const reactiveData = {
data() {
return {
chartData: null
}
},
watch: {
chartData: dataHandler
}
}
export const reactiveProp = {
props: {
chartData: {
type: Object,
required: true,
default: () => {}
}
},
watch: {
chartData: dataHandler
}
}
export default {
reactiveData,
reactiveProp
}