xanderdeseyn / react-native-responsive-linechart

A customizable and responsive line or area chart for react-native
https://react-native-responsive-linechart.surge.sh
MIT License
202 stars 46 forks source link

Application crash if data points are <= 2 A #39

Closed adderly closed 3 years ago

adderly commented 3 years ago

InvalidNumber: M 0 NaN

-[RNSVGPathParser parse_number] RNSVGPathParser.m:543 -[RNSVGPathParser parse_list_number] -[RNSVGPathParser getPath] -[RNSVGPath setD:] 49-[RCTComponentData createPropBlock:isShadowView:]_block_invoke.101 49-[RCTComponentData createPropBlock:isShadowView:]_block_invoke_2.102 49-[RCTComponentData propBlockForKey:isShadowView:]_block_invoke_2 RCTPerformBlockWithLogFunction RCTPerformBlockWithLogPrefix 49-[RCTComponentData propBlockForKey:isShadowView:]_block_invoke 37-[RCTComponentData setProps:forView:]_block_invoke NSDICTIONARY_IS_CALLING_OUT_TO_A_BLOCK -[NSDictionaryM enumerateKeysAndObjectsWithOptions:usingBlock:] -[RCTComponentData setProps:forView:] 50-[RCTUIManager createView:viewName:rootTag:props:]_block_invoke.423 44-[RCTUIManager flushUIBlocksWithCompletion:]_block_invoke 44-[RCTUIManager flushUIBlocksWithCompletion:]_block_invoke.489 __RCTExecuteOnMainQueue_block_invoke _dispatch_call_block_and_release _dispatch_client_callout _dispatch_main_queue_callback_4CF CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE CFRunLoopRun CFRunLoopRunSpecific GSEventRunModal -[UIApplication _run] UIApplicationMain main start

xanderdeseyn commented 3 years ago

Which chart props did you use?

xanderdeseyn commented 3 years ago

Closing for inactivity. Feel free to re-open if you have a bit more information.

adderly commented 3 years ago
  const viewportWidth = 28;
 const xDomainLength = Math.max(viewportWidth, graphItems.length);
    let graphConfig = {
      xDomain: { min: 0, max: xDomainLength },
      yDomain: { min: minValue, max: maxValue + leftOver * 0.5 },
      padding: { left: 22, top: 0, bottom: 55, right: 10 },
      viewport: { size: { width: viewportWidth } },
      tickValues: tickValues,
      tickCount: xDomainLength,
      verticalTickCount: segmentCount,
    };

That is the properties i am using, but somehow if i add a couple of items with the same proportions(dimensions) the graph it crashes.

Invariant Violation: [5463,"RNSVGLine",11,{"matrix":[1,0,0,1,0,0],"propList":["stroke","strokeWidth","strokeOpacity"],"opacity":1,"fill":[0,4278190080],"fillRule":1,"fillOpacity":1,"stroke":[0,4291611852],"strokeOpacity":1,"strokeLinecap":0,"strokeLinejoin":0,"strokeDasharray":null,"strokeWidth":1,"strokeDashoffset":null,"strokeMiterlimit":4,"vectorEffect":0,"x1":0,"y1":"<>","x2":362,"y2":"<>"}] is not usable as a native method argument

What do you imagine it could be?

@N1ghtly

adderly commented 3 years ago

I discovered my problem, it was that i was calculating my ydomain. And the values i was getting where min: 50, max: 50; apparently that is a no go zone. It crashed the program.

xanderdeseyn commented 3 years ago

Ahh that makes sense! Thanks for letting me know 👍

BlackWild commented 3 years ago

@N1ghtly I am not sure why this issue is closed because I believe there is a bug here! Currently, when I do not provide min and max to yDomain prop of the chart, min and max values should be calculated automatically. However, if I pass data as:

[
  {x: 1, y: 1},
  {x: 2, y: 1},
]

it causes the whole app to crash which I believe should not happen! I think it makes sense to add a small margin to the calculated min and max values to avoid this kind of scenarios.

BlackWild commented 3 years ago

I think it may be a good idea to add two optional keys to the yDomain and xDomain props as minMargin and maxMargin. Which will be subtracted/added to the calculated min and max values.