Empty Line Graph
DDushkin opened this issue · comments
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 #44
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"
}
]
I have the same issue, can't see graph on the screen
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.
Interesting observation, can you create a PR to fix this issue here so I can take a closer look and merge it? Thanks!
When will these changes in the npm?
When I have a PR
