Empty Line Graph

[DDushkin]

Hello, after I updated to the latest version of the lib I noticed that my charts are not visible anymore After some investigation, I noticed that it might be related to the way how I build the graph points

For example, if I build points like this (got this function from your examples)

const points = generateSinusGraphData(priceList.length);

/*
[
  {
    "date": "1970-01-01T00:00:00.093Z",
    "value": -0.9482821412699473
  },
  {
    "date": "1970-01-01T00:00:00.094Z",
    "value": -0.2452519854676543
  },
  {
    "date": "1970-01-01T00:00:00.095Z",
    "value": 0.683261714736121
  },
  ...
]
*/

then I get such a Graph

But my own function doesn't show anything, however, data points look good

const points: GraphPoint[] = priceList.map(
    ({ cryptoPriceInFiat: value, intervalTimestampUtc: date }) => ({
        value,
        date: new Date(date),
    }),
);

/*
[
  {
    "value": 0.021040000021457672,
    "date": "2022-11-10T14:00:00.000Z"
  },
  {
    "value": 0.022228000685572624,
    "date": "2022-11-10T14:15:00.000Z"
  },
  {
    "value": 0.021880999207496643,
    "date": "2022-11-10T14:30:00.000Z"
  },
  ...
]
 */

This also might be related to the https://github.com/margelo/react-native-graph/issues/44

[DDushkin]

After hours of debugging couldn't find a reason why points are not rendered Couldn't you try to build a Graph with this data?

[
  {
    "value": 0.019253000617027283,
    "date": "2022-11-09T22:30:00.000Z"
  },
  {
    "value": 0.019790999591350555,
    "date": "2022-11-09T22:45:00.000Z"
  },
  {
    "value": 0.019540000706911087,
    "date": "2022-11-09T23:00:00.000Z"
  },
  {
    "value": 0.020076999440789223,
    "date": "2022-11-09T23:15:00.000Z"
  },
  {
    "value": 0.019836999475955963,
    "date": "2022-11-09T23:30:00.000Z"
  },
  {
    "value": 0.020058000460267067,
    "date": "2022-11-09T23:45:00.000Z"
  },
  {
    "value": 0.02008499950170517,
    "date": "2022-11-10T00:00:00.000Z"
  },
  {
    "value": 0.020198000594973564,
    "date": "2022-11-10T00:15:00.000Z"
  },
  {
    "value": 0.02022000029683113,
    "date": "2022-11-10T00:30:00.000Z"
  },
  {
    "value": 0.020176999270915985,
    "date": "2022-11-10T00:45:00.000Z"
  },
  {
    "value": 0.02018200047314167,
    "date": "2022-11-10T01:00:00.000Z"
  },
  {
    "value": 0.020173000171780586,
    "date": "2022-11-10T01:15:00.000Z"
  },
  {
    "value": 0.020152000710368156,
    "date": "2022-11-10T01:30:00.000Z"
  },
  {
    "value": 0.020188000053167343,
    "date": "2022-11-10T01:45:00.000Z"
  },
  {
    "value": 0.02019600011408329,
    "date": "2022-11-10T02:00:00.000Z"
  },
  {
    "value": 0.02012299932539463,
    "date": "2022-11-10T02:15:00.000Z"
  },
  {
    "value": 0.02015399932861328,
    "date": "2022-11-10T02:30:00.000Z"
  },
  {
    "value": 0.020221000537276268,
    "date": "2022-11-10T02:45:00.000Z"
  },
  {
    "value": 0.020198000594973564,
    "date": "2022-11-10T03:00:00.000Z"
  },
  {
    "value": 0.020207999274134636,
    "date": "2022-11-10T03:15:00.000Z"
  },
  {
    "value": 0.020204000174999237,
    "date": "2022-11-10T03:30:00.000Z"
  },
  {
    "value": 0.020214999094605446,
    "date": "2022-11-10T03:45:00.000Z"
  },
  {
    "value": 0.02024099975824356,
    "date": "2022-11-10T04:00:00.000Z"
  },
  {
    "value": 0.02024500072002411,
    "date": "2022-11-10T04:15:00.000Z"
  },
  {
    "value": 0.02024500072002411,
    "date": "2022-11-10T04:30:00.000Z"
  },
  {
    "value": 0.020261000841856003,
    "date": "2022-11-10T04:45:00.000Z"
  },
  {
    "value": 0.02034199982881546,
    "date": "2022-11-10T05:00:00.000Z"
  },
  {
    "value": 0.020361000671982765,
    "date": "2022-11-10T05:15:00.000Z"
  },
  {
    "value": 0.020363999530673027,
    "date": "2022-11-10T05:30:00.000Z"
  },
  {
    "value": 0.020356999710202217,
    "date": "2022-11-10T05:45:00.000Z"
  },
  {
    "value": 0.020394999533891678,
    "date": "2022-11-10T06:00:00.000Z"
  },
  {
    "value": 0.020044000819325447,
    "date": "2022-11-10T06:15:00.000Z"
  },
  {
    "value": 0.020111000165343285,
    "date": "2022-11-10T06:30:00.000Z"
  },
  {
    "value": 0.020031999796628952,
    "date": "2022-11-10T06:45:00.000Z"
  },
  {
    "value": 0.019909000024199486,
    "date": "2022-11-10T07:00:00.000Z"
  },
  {
    "value": 0.019881999120116234,
    "date": "2022-11-10T07:15:00.000Z"
  },
  {
    "value": 0.019910000264644623,
    "date": "2022-11-10T07:30:00.000Z"
  },
  {
    "value": 0.02018200047314167,
    "date": "2022-11-10T07:45:00.000Z"
  },
  {
    "value": 0.02016500011086464,
    "date": "2022-11-10T08:00:00.000Z"
  },
  {
    "value": 0.020388999953866005,
    "date": "2022-11-10T08:15:00.000Z"
  },
  {
    "value": 0.020423000678420067,
    "date": "2022-11-10T08:30:00.000Z"
  },
  {
    "value": 0.02037299983203411,
    "date": "2022-11-10T08:45:00.000Z"
  },
  {
    "value": 0.020433999598026276,
    "date": "2022-11-10T09:00:00.000Z"
  },
  {
    "value": 0.02034500055015087,
    "date": "2022-11-10T09:15:00.000Z"
  },
  {
    "value": 0.020388999953866005,
    "date": "2022-11-10T09:30:00.000Z"
  },
  {
    "value": 0.02037999965250492,
    "date": "2022-11-10T09:45:00.000Z"
  },
  {
    "value": 0.02036299929022789,
    "date": "2022-11-10T10:00:00.000Z"
  },
  {
    "value": 0.0204709991812706,
    "date": "2022-11-10T10:15:00.000Z"
  },
  {
    "value": 0.020430000498890877,
    "date": "2022-11-10T10:30:00.000Z"
  },
  {
    "value": 0.020407000556588173,
    "date": "2022-11-10T10:45:00.000Z"
  },
  {
    "value": 0.02048500068485737,
    "date": "2022-11-10T11:00:00.000Z"
  },
  {
    "value": 0.02052599936723709,
    "date": "2022-11-10T11:15:00.000Z"
  },
  {
    "value": 0.020521000027656555,
    "date": "2022-11-10T11:30:00.000Z"
  },
  {
    "value": 0.020529000088572502,
    "date": "2022-11-10T11:45:00.000Z"
  },
  {
    "value": 0.020527999848127365,
    "date": "2022-11-10T12:00:00.000Z"
  },
  {
    "value": 0.020533999428153038,
    "date": "2022-11-10T12:15:00.000Z"
  },
  {
    "value": 0.020527999848127365,
    "date": "2022-11-10T12:30:00.000Z"
  },
  {
    "value": 0.020507000386714935,
    "date": "2022-11-10T12:45:00.000Z"
  },
  {
    "value": 0.020459000021219254,
    "date": "2022-11-10T13:00:00.000Z"
  },
  {
    "value": 0.020367000252008438,
    "date": "2022-11-10T13:15:00.000Z"
  },
  {
    "value": 0.020496999844908714,
    "date": "2022-11-10T13:30:00.000Z"
  },
  {
    "value": 0.020603999495506287,
    "date": "2022-11-10T13:45:00.000Z"
  },
  {
    "value": 0.020692000165581703,
    "date": "2022-11-10T14:00:00.000Z"
  },
  {
    "value": 0.02073800005018711,
    "date": "2022-11-10T14:15:00.000Z"
  },
  {
    "value": 0.020735999569296837,
    "date": "2022-11-10T14:30:00.000Z"
  },
  {
    "value": 0.02072400040924549,
    "date": "2022-11-10T14:45:00.000Z"
  },
  {
    "value": 0.020687000826001167,
    "date": "2022-11-10T15:00:00.000Z"
  },
  {
    "value": 0.020959999412298203,
    "date": "2022-11-10T15:15:00.000Z"
  },
  {
    "value": 0.02104800008237362,
    "date": "2022-11-10T15:30:00.000Z"
  },
  {
    "value": 0.021050000563263893,
    "date": "2022-11-10T15:45:00.000Z"
  },
  {
    "value": 0.021040000021457672,
    "date": "2022-11-10T16:00:00.000Z"
  },
  {
    "value": 0.022228000685572624,
    "date": "2022-11-10T16:15:00.000Z"
  },
  {
    "value": 0.02181999944150448,
    "date": "2022-11-10T16:30:00.000Z"
  },
  {
    "value": 0.021598000079393387,
    "date": "2022-11-10T16:45:00.000Z"
  },
  {
    "value": 0.021523000672459602,
    "date": "2022-11-10T17:00:00.000Z"
  },
  {
    "value": 0.022554000839591026,
    "date": "2022-11-10T17:15:00.000Z"
  },
  {
    "value": 0.022127000615000725,
    "date": "2022-11-10T17:30:00.000Z"
  },
  {
    "value": 0.022255999967455864,
    "date": "2022-11-10T17:45:00.000Z"
  },
  {
    "value": 0.02223300002515316,
    "date": "2022-11-10T18:00:00.000Z"
  },
  {
    "value": 0.022260000929236412,
    "date": "2022-11-10T18:15:00.000Z"
  },
  {
    "value": 0.022266000509262085,
    "date": "2022-11-10T18:30:00.000Z"
  },
  {
    "value": 0.022255999967455864,
    "date": "2022-11-10T18:45:00.000Z"
  },
  {
    "value": 0.022290999069809914,
    "date": "2022-11-10T19:00:00.000Z"
  },
  {
    "value": 0.022478999570012093,
    "date": "2022-11-10T19:15:00.000Z"
  },
  {
    "value": 0.022388000041246414,
    "date": "2022-11-10T19:30:00.000Z"
  },
  {
    "value": 0.02240999974310398,
    "date": "2022-11-10T19:45:00.000Z"
  },
  {
    "value": 0.022407999262213707,
    "date": "2022-11-10T20:00:00.000Z"
  },
  {
    "value": 0.022401999682188034,
    "date": "2022-11-10T20:15:00.000Z"
  },
  {
    "value": 0.022386999800801277,
    "date": "2022-11-10T20:30:00.000Z"
  },
  {
    "value": 0.022582000121474266,
    "date": "2022-11-10T20:45:00.000Z"
  },
  {
    "value": 0.02258099988102913,
    "date": "2022-11-10T21:00:00.000Z"
  },
  {
    "value": 0.022487999871373177,
    "date": "2022-11-10T21:15:00.000Z"
  },
  {
    "value": 0.02249700017273426,
    "date": "2022-11-10T21:30:00.000Z"
  },
  {
    "value": 0.0225210003554821,
    "date": "2022-11-10T21:45:00.000Z"
  },
  {
    "value": 0.021896999329328537,
    "date": "2022-11-10T22:00:00.000Z"
  },
  {
    "value": 0.020885000005364418,
    "date": "2022-11-10T22:15:00.000Z"
  }
]

[vtantai99]

I have the same issue, can't see graph on the screen

[gmencz]

I narrowed it down to the selectCurve() function in src/GetYForX, it is returning undefined when not using that specific working date. I don't know what the fix is as that is a pretty complex function but investigating...

Actually it seems like the issue is with the path creation which then makes other things not work properly... the function causing the error is createGraphPathBase in src/CreateGraphPath.ts

So I have managed to fix it by changing line 222 in src/CreateGraphPath.ts to:

const drawingFactor = pixelFactorX(
  point.date,
  range.x.min,
  range.x.max
)

Previously it was:

const drawingFactor = pixelFactorX(
  new Date(point.date.getTime() - prev.date.getTime()),
  range.x.min,
  range.x.max
)

Not sure why the logic was initially like this, it seems like a bug because with that logic only dates starting at UTC 0 would work.

@DDushkin @mrousavy

[mrousavy]

Interesting observation, can you create a PR to fix this issue here so I can take a closer look and merge it? Thanks!

[Voznov]

When will these changes in the npm?

[mrousavy]

When I have a PR

[Voznov]

@mrousavy Looks like this one (#58)

[thomas-coldwell]

Hey thanks @Voznov - that introduces quite a lot of lag as seen in #56. The latest changes there should fix this by correctly calculating the drawingFactor using properly normalised values