vue-funnel-graph-js
vue-funnel-graph-js copied to clipboard
There is a way to re-render the graph according to width to the window to make it respnsive?
The way i made it responsive was putting it in a responsive box and made it center , then getting the width of that box minus one hundered would be the width of my funnel
var element = document.getElementById('cardbox')
this.thefunnelwidth = element.offsetWidth - 100
and in the funnel component
<funnelcomponent v-if="thefunnelwidth != ''" :width="this.thefunnelwidth"></funnelcomponent>
the v-if holds the component from rendering if the funnelwidth is not set
you can do the same with height if its needed and some minor adjustment.
It would be great to see support for this. A more robust approach, to support resizing, would be:
<vue-funnel-graph
:width="$refs.wrapper && $refs.wrapper.offsetWidth"
...
v-if="isFunnelVisible"
/>
data() {
return {
isFunnelVisible: false,
resizeTimeout: null
};
},
mounted() {
this.isFunnelVisible =
this.$refs.wrapper && this.$refs.wrapper.offsetWidth > 0;
window.addEventListener('resize', this.handleResize);
},
methods: {
handleResize() {
if (this.resizeTimeout) clearTimeout(this.resizeTimeout);
this.resizeTimeout = setTimeout(() => {
this.isFunnelVisible = false;
this.$nextTick(() => {
this.isFunnelVisible = true;
});
}, 200);
}
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize);
}