search

plouc / nivo

nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
https://nivo.rocks
MIT License
13.19k stars 1.03k forks source link

Wrong X or Y axis scale/labels after updating the data or resize the window with Bars #1373

Closed teddybee closed 3 years ago

teddybee commented 3 years ago

Describe/explain the bug Bar chart's axises usually messed up, when data is updating, or div has been resized. For examle: the dates in the X scale won't update itself or the Y scale labels shows totally wrong numbers, sumetimes overlap the horizontal lines/labels themself. I assume there is something wrong with the animation. The bug is appears only when I compile a release version. In debug mode its slow, but working well.

To Reproduce You can see the strange behaviour on https://coronahu.site For example in the main screen you can see some bar charts, if you click on the "Széles oszlopok" switch, the Bars are updating and behaves wrong. There are some other charts as well on the page that also has bugs at updating or resizing.

Desktop (please complete the following information):

Sw versions that I use:

Screenshots After browser resize. the X labels don't stretch out to its place: image

After data update the X labels should show months instead of 3 weeks (not updating at all): image

After data update, the Y labels/lines are messed up, wrong place, wrong values, even the order as well: image

limal commented 3 years ago

Not sure if it's applicable but I have got a strange bug that was only manifesting itself on the production version of my app.

What helped was assigning new id to the data. It looks like nivo is using some caching mechanism when not used on http://localhost.

Similar refresh bugs happened with linear gradients as well. So I used a refreshed id that depended to data to fix the graph:

      fill: [{ match: "*", id: `gradient-${id}` }],
      defs: [
        linearGradientDef(`gradient-${id}`, [
          { offset: 0, color: "hsl(0, 50%, 100%)", opacity: 0.3 },
          { offset: 30, color: "hsl(0, 50%, 100%)", opacity: 0.3 },
          { offset: 90, color: "hsl(0, 50%, 100%)", opacity: 0 },
        ]),
      ],

TL;DR Change id as well to make sure nivo is re-rendering the graph with refreshed data.

JayLim-Signifyd commented 3 years ago

TypeError: r.willAdvance is not a function could be related to: https://github.com/plouc/nivo/issues/1290

teddybee commented 3 years ago

Same error message at me as well: TypeError: r.willAdvance is not a function at 2.e3af67e6.chunk.js:2 at Module.gu (2.e3af67e6.chunk.js:2) at v.advance (2.e3af67e6.chunk.js:2) at n (2.e3af67e6.chunk.js:2)

There is no such error with debug run.

taemoor commented 3 years ago

I am seeing exactly the same issue. The issues manifests itself only in production. The versions I am using are:

"@nivo/bar": "^0.67.0",
"@nivo/core": "^0.67.0",
"@nivo/line": "^0.67.0",
"react": "^17.0.1",
Node 14.15.1

I also see the same error on the console:

FrameLoop.ts:110 TypeError: r.willAdvance is not a function at FrameLoop.ts:173 at Module.mc (react-dom.production.min.js:244) at v.advance (FrameLoop.ts:169) at n (FrameLoop.ts:107)

Don't notice this error when running localhost

taemoor commented 3 years ago

Downgrading to version 0.62.0 solved the problem for now, hopefully it gets fixed in a release soon. I didn't try the other versions in between 0.62 and 0.67.

edusx commented 3 years ago

Is there any known way to resolve this for ResponsiveLine?

Same happening here: react-dom.production.min.js:23 Error: attribute d: Expected moveto path command ('M' or 'm'), "null". w @ react-dom.production.min.js:23 is @ react-dom.production.min.js:208 Tu @ react-dom.production.min.js:251 ju @ react-dom.production.min.js:250 ku @ react-dom.production.min.js:250 xu @ react-dom.production.min.js:250 bu @ react-dom.production.min.js:243 (anonymous) @ react-dom.production.min.js:123 (anonymous) @ scheduler.production.min.js:18 Bi @ react-dom.production.min.js:122 Gi @ react-dom.production.min.js:123 Hi @ react-dom.production.min.js:122 fu @ react-dom.production.min.js:237 Ta @ react-dom.production.min.js:170 (anonymous) @ useMeasure.js:12 react-dom.production.min.js:23 Error: attribute d: Expected moveto path command ('M' or 'm'), "null". w @ react-dom.production.min.js:23 is @ react-dom.production.min.js:208 Tu @ react-dom.production.min.js:251 ju @ react-dom.production.min.js:250 ku @ react-dom.production.min.js:250 xu @ react-dom.production.min.js:250 bu @ react-dom.production.min.js:243 (anonymous) @ react-dom.production.min.js:123 (anonymous) @ scheduler.production.min.js:18 Bi @ react-dom.production.min.js:122 Gi @ react-dom.production.min.js:123 Hi @ react-dom.production.min.js:122 fu @ react-dom.production.min.js:237 Ta @ react-dom.production.min.js:170 (anonymous) @ useMeasure.js:12 react_devtools_backend.js:2430 TypeError: r.willAdvance is not a function at FrameLoop.ts:173 at Module.mu (react-dom.production.min.js:244) at FrameLoop.ts:169 at n (FrameLoop.ts:107)

jawsper commented 3 years ago

I ran into this issue too, also got the TypeError: r.willAdvance is not a function error in production only.

I upgraded to 0.69.x and that resolved this issue for me.

wyze commented 3 years ago

@teddybee Please update to the latest version and let me know if the problem is still present.

stale[bot] commented 3 years ago

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

stale[bot] commented 3 years ago

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!