Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ticks map using tick.position #437

Closed
ghost opened this issue Oct 28, 2022 · 6 comments
Closed

Ticks map using tick.position #437

ghost opened this issue Oct 28, 2022 · 6 comments
Assignees

Comments

@ghost
Copy link

ghost commented Oct 28, 2022

Edit: this is just a warning in the console but may be possible to fix?

Example

  <LineSeries data={[ {x:0, y:0}, {x:0, y:1} ]} />

There should not be x:0 repeated but this would be common when having multiple possible axis combinations:

Error seems to come from this line. where the getPositions takes an x value to make the ticks (it seems so.)

Console Log
This is the text error from the console:

Warning: Encountered two children with the same key, `0`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
Ticks@http://localhost:3000/static/js/bundle.js:34723:7
VerticalAxis@http://localhost:3000/static/js/bundle.js:34910:7
LinearAxis@http://localhost:3000/static/js/bundle.js:34522:7
Axis@http://localhost:3000/static/js/bundle.js:34113:7
@targos
Copy link
Member

targos commented Oct 29, 2022

The stack trace shows that the error happens with VerticalAxis, so it seems that we should use the y position instead of x.

@targos targos self-assigned this Oct 31, 2022
@ghost
Copy link
Author

ghost commented Oct 31, 2022

It seems to be always the axis for which the min and max value is the same, and disappear if there is max and min in the Axis props. From what I see here at least.

This line could be adding too many Ticks.

The problem seems to disappear with:

  • in primary ticks
        if(i>0 && primaryTicks[i-1].position === tick.position) return null
  • and in secondary ticks:
            if(i>0 && tick.position === secondaryTicks[i-1].position) return null

@targos
Copy link
Member

targos commented Nov 1, 2022

I've tried the example you posted above and there's only one tick:

image

targos added a commit that referenced this issue Nov 1, 2022
@ghost
Copy link
Author

ghost commented Nov 1, 2022

It seems that the warning happens if the data is modified while the live server is running (if it is started from scratch with it, there is no error. Maybe you can test that.)

The same thing seems to happen if a click button is allowed to change the data:

And the source.

@targos
Copy link
Member

targos commented Nov 1, 2022

OK I see, thank you for the reproducible example. The bug is in https://github.com/zakodium-oss/react-d3-utils/blob/6bdf5d6c3983973352bc4a27c72332398cbda5f6/src/hooks/useLinearPrimaryTicks.ts#L27-L39 (we apply the new scale to old ticks from the state). Working on a fix...

targos added a commit to zakodium-oss/react-d3-utils that referenced this issue Nov 1, 2022
targos added a commit that referenced this issue Nov 1, 2022
@ghost
Copy link
Author

ghost commented Nov 1, 2022

Oh, I see. It makes more sense now. You are welcome.

targos added a commit that referenced this issue Nov 1, 2022
@targos targos closed this as completed in cbd1391 Nov 1, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant