49 lines
939 B
Vue
49 lines
939 B
Vue
<template>
|
|
<div></div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as JSC from 'jscharting';
|
|
|
|
export default {
|
|
name: 'JSCGrid',
|
|
props: {
|
|
options: { type: Object, required: true },
|
|
mutable: { type: Boolean, default: true }
|
|
},
|
|
mounted: function() {
|
|
this.renderGrid();
|
|
},
|
|
beforeUnmount: function() {
|
|
this.destroyGrid();
|
|
},
|
|
watch: {
|
|
options: function() {
|
|
this.renderGrid();
|
|
}
|
|
},
|
|
methods: {
|
|
destroyGrid: function() {
|
|
if (this.instance) {
|
|
this.instance.destroy();
|
|
this.instance = undefined;
|
|
}
|
|
},
|
|
renderGrid: function() {
|
|
const options = this.options;
|
|
const updateExisting = this.instance && this.mutable !== false;
|
|
if (updateExisting) {
|
|
this.instance.options(this.options);
|
|
} else {
|
|
this.destroyGrid();
|
|
const containerElement = this.$el;
|
|
JSC.Grid(containerElement, options).then(grid => {
|
|
this.instance = grid;
|
|
this.$emit('rendered', grid);
|
|
});
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|