Automatic resizing with parent div

[FlorianBEME]

Hello,

I'm looking to figure out how to make the gauge always match the size of the parent div and resize along with the parent div when I resize it. Just to provide some context, I'm using https://github.com/react-grid-layout/react-grid-layout to manage my cards, and I embed a gauge within them. If any of you have any ideas to help me, I would greatly appreciate it! 😄

Thanks in advance and have a great day!

Florian

[antoniolago]

Hello, thanks for opening this issue and sorry for the delay, this was related to #41, @rbedemann's fix pavimented the way for fixing this issue aswell with some adjustments.

[rswlkr]

I'm still seeing this issue in 1.2.2

[arvindh123]

Yes this issue still in version 1.2.2 @antoniolago @rswlkr
Is there any workaround for this issue ?

[antoniolago]

Sorry guys, not having time lately to update the project and handle issues, I'm finishing my graduation this semester (I hope) and it's being some very busy weeks, so any help is very much appreciated.

The tests I made for my "fix" was to change the bootstrap columns size onclicks, so the gauge was resizing in this test specifically, but clearly something is missing out.

[arvindh123]

@antoniolago
Thank you for the reply, I have found that if the gauge is present inside the flex, then it is not resizing. Still, I could not find the solution, If I found the "fix", I will send PR for this issue.

[wyllys66]

Not sure how to make it automatically size with the parent, but you can control the overall size of the gauge by adding "style" to the component. For example:

  <GaugeComponent
     type="semicircle"
     style={{
          height: 100,
          width: 200,
          display: "block",
      }}
     ...

[PaddingtonTheBear]

I got a hack in place to make this work, as I noticed when I manually resized my window (CTRL + scroll wheel), the Gauge would resize correctly. That obviously isn't ideal, so I implemented yet another Resize observer in my component that wraps the Gauge. I also wrapped my Gauge in a div with a ref. I added a key to the Gauge so that when the key changes, the Gauge will re-render. Thus, when the resize observer triggers, I generate a new key value to force the Gauge to re-render. I also added a lodash debouncer so that it doesn't fire constantly while resizing.

It's definitely a hack but it works for my solution where I have wrapped the Gauge in React RND that allows for moving and resizing.

Example below:

export const Gauge= (props) => {
    const gaugeRef = useRef(null);
    const [key, setKey] = useState(uuidv4()); // uuidv4 is a custom function in my repo for generating 32 bit ids

        ...

    useEffect(() => {
        // Setup ResizeObserver
        const updateGaugeKey = debounce(() => {
            setKey(uuidv4());
        }, 50);

        const resizeObserver = new ResizeObserver((entries) => {
            updateGaugeKey();
        });

        if (gaugeRef.current) {
            resizeObserver.observe(gaugeRef.current);
        }

        // Cleanup
        return () => {
            if (gaugeRef.current) {
                resizeObserver.unobserve(gaugeRef.current);
            }
        };
    }, []);

    return (
        <div ref={gaugeRef}>
            <GaugeComponent
                key={key}
                ...
            />
        </div>
    );
};

Not sure how to integrate this into react-gauge-component just yet though...

[bondarev123]

My workaround is:

  useEffect(() => {
    // workaround to trigger recomputing of gauge size on first load (e.g. F5)
    setTimeout(() => window.dispatchEvent(new Event('resize')), 10);
  }, []);