search

zakodium-oss / react-plot

Library of React components to render SVG 2D plots. You can check the story book https://react-plot.pages.dev/ or have a look to the extensive documentation
https://react-plot.zakodium.com
MIT License
12 stars 6 forks source link

Problem with log scale #293

Open lpatiny opened 2 years ago

lpatiny commented 2 years ago

If you open the following example:

https://zakodium.github.io/react-plot/?path=/story/api-logaxis--axis-left-log-control

Towards the top of the vertical axis there is a crazy number of secondary ticks that creates this grey large line

image

@wadjih-bencheikh18 Could you investigate and try to solve this problem ?

targos commented 2 years ago

The number of secondary ticks should be the same between each power of 10

wadjih-bencheikh18 commented 2 years ago

The number of secondary ticks should be the same between each power of 10

i already mention that the number of secondary ticks is hard coded so I think we need to specify the number of secondary ticks in each case

stropitek commented 2 years ago

i already mention that the number of secondary ticks is hard coded

but that is not related to the bug right? if so let's fix the bug first and we can think of the api for configuring the number of secondary ticks after

wadjih-bencheikh18 commented 2 years ago

but that is not related to the bug right?

no i think it's related to the bug we calculate secondary ticks using density const range = Math.abs(scale?.range()[1] - scale?.range()[0]) || 0; const mainTicksDensity = range / primaryTicks.length; const density = mainTicksDensity < 50 ? 5 : 10; const secTicks = scale?.ticks(primaryTicks.length * density) || [];

wadjih-bencheikh18 commented 2 years ago

i realised that in react-d3-utils in logScale work on main and secondary ticks with this logic : (the next examples scondary ticks of react-plot are disabled ) case 1: image case 2: we have alot of data =>mainTickRatio=1 so the space will be not enough to draw scondary ticks so the result will be : image when we add react-plot scondary ticks to the last example : image normal result (we can simple work on secondary ticks density which is hardcoded in this version)

wadjih-bencheikh18 commented 2 years ago

so i think the solution is to fix useLogTicks in react-d3-utils then it will be easy to work on density here

stropitek commented 2 years ago

image

Indeed I think that even if the value changes of more than 1 power of 10, there should still be only 10 secondary ticks between each main tick

To me the secondary ticks on a log scale are not actually that useful, except from making it very clear in one glance that the axis does not have a classic linear scale.

wadjih-bencheikh18 commented 2 years ago

except from making it very clear in one glance that the axis does not have a classic linear scale.

the best way to do it is to make useLogScale in react-d3-utils only give us main ticks so we can control secondary ticks in react-plot

wadjih-bencheikh18 commented 2 years ago

https://github.com/zakodium-oss/react-d3-utils/pull/23 need to be merged in order to fix the problem