Errors when data array contains single value about react-trend HOT 5 CLOSED

Gonna close this, as I don't foresee it being resolved any time soon.

As Sami suggests, the user-land solution is pretty simple:

data.length > 0
  ? <Trend data={data} />
  : <SomeFallbackComponent />

from react-trend.

Yeah, a flat line would indeed be inaccurate. The correct behaviour as far as I see it is to not render a graph at all if there's less than 2 points, without crashing/erroring. A fallback could be nice, although part of me feels that it's more the end-user's concern.

from react-trend.

Is this an intended use case for react-trend? I know it's typically used for line graphs. This is the source code of Trend.js on line 118-121 indicating why it won't render:

    // We need at least 2 points to draw a graph.
    if (!data || data.length < 2) {
      return null;
    }

from react-trend.

Is this an intended use case for react-trend?

Don't see why it wouldn't be, since I just need a spark line to show up/down trends. Would also be an issue depending on how logging is done for uptime of new servers/activity of new users.

It's more that it has a fairly destructive exit if length < 2

Work around is to just duplicate single values:

return <Trend data={props.data.length > 1 ? props.data : props.data.concat(props.data)}/>

from react-trend.

Ah, right. Yeah, this was an oversight; from a purely mathematical perspective, you can't have a line with only 1 point, so I assumed any attempt to draw a line with a single data point would be a mistake. Never considered data that resets at the start of a period.

That said, I almost feel like a flat line is a little misleading... It gives the impression that the data is flat, when in actuality the trend might be increasing or decreasing from the previous period.

At any rate, I certainly don't think it should crash; my proposed solution would be to just render nothing. We could even have a prop that takes an element to render when not enough data is available, so you could render a fallback:

<Trend
  data={...}
  fallback={<h1>🚫</h1>}
/>

@samijaber thoughts?

from react-trend.