vue-funnel-graph-js icon indicating copy to clipboard operation
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?

Open dhertzb opened this issue 6 years ago • 2 comments

dhertzb avatar Aug 20 '19 17:08 dhertzb

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.

pcm0nk avatar Sep 02 '19 12:09 pcm0nk

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);
  }

nullablebool avatar Apr 19 '20 21:04 nullablebool