margelo / react-native-graph

📈 Beautiful, high-performance Graphs and Charts for React Native built with Skia
https://margelo.io
MIT License
2.08k stars 118 forks source link

Migration to 1.0.0 gives straight line #70

Closed TwistedMinda closed 1 year ago

TwistedMinda commented 1 year ago

Hello! I've been using the lib with much success until the new 1.0.0 changes

My chart is drawing as a straightline as soon as there are more than 6 points

Here is how it looks with exactly 6 points:

Screenshot 2023-03-09 at 16 41 09
const myPoints = [
    { value: 9.29, date: new Date(1675904400000) },
    { value: 8.98, date: new Date(1675990800000) },
    { value: 9.02, date: new Date(1676250000000) },
    { value: 9.15, date: new Date(1676336400000) },
    { value: 9.39, date: new Date(1676422800000) },
    { value: 9.08, date: new Date(1676509200000) },
  ]

Which is fine, it goes up & down following the prices, that's what I expected. Now if I add just one point (or more), I get this graph:

Screenshot 2023-03-09 at 16 42 01
const myPoints = [
    { value: 9.29, date: new Date(1675904400000) },
    { value: 8.98, date: new Date(1675990800000) },
    { value: 9.02, date: new Date(1676250000000) },
    { value: 9.15, date: new Date(1676336400000) },
    { value: 9.39, date: new Date(1676422800000) },
    { value: 9.08, date: new Date(1676509200000) },
    { value: 8.27, date: new Date(1676941200000) },
  ]

Am I doing something wrong? Thank you very much

TwistedMinda commented 1 year ago

It seems that the timestamps need to be perfectly spaced in order for the graph to draw correctly:

const day = 3600 * 24 * 1000
const myPoints = [
    // Working graph with more than 6 points
    { value: 9.29, date: new Date(1678448549109 - day * 8) },
    { value: 8.98, date: new Date(1678448549109 - day * 7) },
    { value: 9.02, date: new Date(1678448549109 - day * 6) },
    { value: 9.15, date: new Date(1678448549109 - day * 5) },
    { value: 9.39, date: new Date(1678448549109 - day * 4) },
    { value: 9.08, date: new Date(1678448549109 - day * 3) },
    { value: 8.08, date: new Date(1678448549109 - day * 2) },

    // Now this breaks the graph and draws a straight line for the whole graph
    { value: 9.08, date: new Date(1678448549109 - day * 1.9) },
    { value: 9.08, date: new Date(1678448549109 - day * 1.8) },
    { value: 8.08, date: new Date(1678448549109 - day * 1.2) },
    { value: 10.08, date: new Date(1678448549109 - day * 1.1) },
]

It seems less practical, anything I can do to have the old behavior?

TwistedMinda commented 1 year ago

Nevermind, it's just that the lib tries to find "exact points" by default. By commenting out : if (!isExactPointInsidePixelRatio) continue in createGraphPathBase (node_modules/react-native-graph/src/CreateGraphPath.ts) it's the same algorithm as the previous versions of the lib.

Oof!