Skip to content

Instantly share code, notes, and snippets.

Created May 29, 2017 05:53
Show Gist options
  • Save anonymous/d323358a233f04414b5dcbc2666b8509 to your computer and use it in GitHub Desktop.
Save anonymous/d323358a233f04414b5dcbc2666b8509 to your computer and use it in GitHub Desktop.
Vue.js + C3.js
<script>
import { debounce, cloneDeep, defaultsDeep } from 'lodash'
import c3 from 'c3'
require('c3/c3.css')
export default {
name: 'c3-chart',
props: {
config: {
type: Object,
default: () => ({})
},
data: {
type: Object,
default: () => ({})
}
},
watch: {
data: {
handler: 'reload',
deep: true
}
},
methods: {
getArgs () {
const data = this.getData()
const config = this.getConfig()
return cloneDeep({ data, ...config })
},
getData () {
return cloneDeep(this.data)
},
getConfig () {
const config = cloneDeep(this.config)
const axis = {
x: {
type: 'category',
padding: {
left: 0,
right: 0
},
tick: {
multiline: true
}
}
}
return defaultsDeep({ axis }, config)
},
update: debounce(function update () {
const data = this.getData()
this.$chart.load(data)
this.$emit('update', data)
}, 500),
reload: debounce(function reload () {
this.$emit('reloading')
this.$chart.unload()
this.$nextTick(() => {
this.update()
})
}, 700)
},
mounted () {
const args = this.getArgs()
this.$chart = c3.generate({
bindto: this.$refs.root,
...args
})
this.$emit('init', args)
},
beforeDestroy () {
this.$chart = this.$chart.destroy()
}
}
</script>
<template>
<div ref="root"></div>
</template>
@KrishnaPG
Copy link

Good work. Thanks for sharing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment