Performance issues and console debugs about recharts-to-png HOT 5 CLOSED

@HarmNullix Thanks for that fantastic response! I think the way you handled the ref is much better. Unless you want to do a PR, I'll go ahead and start working on implementing this fix.

from recharts-to-png.

Same issue, very slow due to direct rendering instead of on demand and console logs

from recharts-to-png.

Thanks for the feedback. I need to find time to look into this, just been busy with the day job. Do either of you have a reproduction you can share?

from recharts-to-png.

Apparently html2canvas has the logger turned on by default.

The logger will be on if no options are passed:

const [png, ref] = useRechartToPng();

The logger will be off if any option is passed:

const [png, ref] = useRechartToPng({ backgroundColor: '#000' });

Or you can explicitly disable it:

const [png, ref] = useRechartToPng({ logger: false });

I'll push out a patch later this week that will disable the logger by default unless the user explicitly enables it. In the meantime, you can turn it off and see if that helps the performance.

The issue I'm running into with the Brush component is that moving the brush doesn't seem to trigger the png to update.

If you have any examples of using the Brush or implementing zoom that you can share, I would appreciate it.

from recharts-to-png.

Hi man!

I was fiddling around with this repo and found out the same!

Besides that, I saw that the png gets calculated every rerender. I don't know if this is a wrong on my side, or on the lib side, i'm not that into React.

What i did was this:

...
            if (node !== null && node?.container) {
                console.log(node.container)
                const data = await html2canvas(node.container as HTMLElement, options).then((canvas) =>
...

My output in the console was this on intial load:

As you can see, it loaded 4 times! This makes a huge impact on performance. I think this is were something goes wrong.
For the app side i used the default example:

...
const [png, ref] = useRechartToPng();

    const handleDownload = React.useCallback(async () => {
        console.log("png :: ", png)

    }, [png]);
....
<Button onClick={handleDownload}>download</Button>
<ResponsiveContainer height={300} minHeight={200}>
                        <BarChart
                            ref={ref}
                            data={data}
...

I think it is due to that the useCallback already gets called a couple of times, don't know why.
What I did to fix it myself: Made an util function out of it:

import html2canvas from 'html2canvas';

export default async (ref) => {
    if (ref !== null && ref?.current?.container) {
        return await html2canvas(ref.current.container as HTMLElement, {
            backgroundColor: '#efefef',
            foreignObjectRendering: false,
            logging: false,
            removeContainer: false
        }).then((canvas) =>
            canvas.toDataURL('image/png', 1.0)
        )
    }
}

called with:

...
    const ref = React.createRef<any>()
    const handleDownload = () => {
   
        refToPng(ref).then(window.open)
    }
...
<Button onClick={handleDownload}>download</Button>
                    <ResponsiveContainer height={300} minHeight={200}>
                        <BarChart
                            ref={ref}
...

As you can see, my function currently lags the functionality of passing options, but it works for me and only renders the image when i actually hit the download button

from recharts-to-png.