Can't create LineMarkSeries as separate component

[lucypoly]

The issue is that <LineMarkSeries> should be the direct child of <XYPlot>. If I wrap <LineMarkSeries> in <Line> component, it is not rendered. The code:

export default function App() {
  return (
    <div className="App">
      <XYPlot height={500} width={500}>
        {LINES.map(line => (
          <Line key={line.color} color={line.color} stations={line.stations} />
        ))}
      </XYPlot>
    </div>
  )
}

<Line> is not rendered.

export const Line: React.SFC<LineType> = props => (
  <LineMarkSeries
    style={{
      strokeWidth: '3px',
    }}
    lineStyle={{ stroke: props.color }}
    markStyle={{ stroke: props.color }}
    data={props.stations}
  />
)

No plot at all.

[mcnuttandrew]

I think the issue is that react-vis only knows how to render children that explicitly extend off of the abstract series type. If you make your Line component extend AbstractSeries (see some of the showcase/examples for an example) then it should work.

[lucypoly]

Actually LineSeries also extends AbstractSeries, so probably I didn't get what you meant.

вт, 29 окт. 2019 г., 16:36 Andrew McNutt [email protected]:

I think the issue is that react-vis only knows how to render children that explicitly extend off of the abstract series type. If you make your Line component extend AbstractSeries (see some of the showcase/examples for an example) then it should work.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/uber/react-vis/issues/1260?email_source=notifications&email_token=AEICSHFUBRIS55D5QPG2HHDQRBDALA5CNFSM4JGGCX3KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECQW7CI#issuecomment-547450761, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEICSHHJDRYEKKIA5HSQ62DQRBDALANCNFSM4JGGCX3A .

[asherccohen]

Hi, I have been working with React-vis for a while and just discovered that I cannot specialize my Series (Line, etc) as separate react components.

The reason is to be found here: https://github.com/uber/react-vis/blob/2ac4544b9ea3abf0861d2a0268f2746301cefdbf/packages/react-vis/src/plot/xy-plot.js#L139

In my opinion this completely defeats the purpose of having a library that uses composition as its main selling point.

A typical use case is to keep state very close to the Series definition, rather than sharing it with the whole Chart component, which enhances performance.

Is there a reason why this has not been highlighted and prioritized before? Can I suggest letting us wrap our Series in react components? Is there a workaround that doesn't include writing class components?