search

carbon-design-system / carbon-charts

:bar_chart: :chart_with_upwards_trend:⠀Robust dataviz framework implemented using D3 & typescript
https://charts.carbondesignsystem.com
Apache License 2.0
907 stars 184 forks source link

[ZoomBar] graph_view has performance problems #751

Open sstone2423 opened 4 years ago

sstone2423 commented 4 years ago

I am submitting a...

charts version: v0.34.10

Issue description

The graph_view zoomBar is actually rendering a second chart causing performance problems when there are many data points.

Current behavior

A second chart is being rendered in the zoombar

Expected behavior

Don't render the second chart and instead render a static, generic graph image if there are too many data points.

Maybe this could be a prop to toggle static vs dynamic?

theiliad commented 4 years ago

What you're talking about isn't possible, unless we use canvas to generate an image (which is still the same thing but would just perform a bit better). Are you asking for a prop for you to provide an image? That also wouldn't really be dynamic...

theiliad commented 4 years ago

This is also exactly why I pushed for the slider view. It is significantly more efficient performance-wise

theiliad commented 4 years ago

Might be a bit advanced for a hacktoberfest PR, but if someone does end up looking into this, basically what needs to happen is: within the zoom bar component we'll need to investigate using Canvas instead of SVGs to draw the graph. hopefully this'll improve performance

scottdickerson commented 4 years ago

@theiliad I can take a look at this one, we need it pretty bad

MoritzKronberger commented 1 year ago

For anybody else running into this issue, adding an empty data array to the zoombar options like this:

zoomBar: {
    top: {
        enabled: zoomBar,
        data: [],
    },
}

avoids running setZoomBarData and, at least for me, improved performance drastically while still rendering the preview chart. I haven't had the time to look into why, but I thought it might be worth sharing anyways.