How to get TimelinesChart instance in vue or react?

[yueveron]

I use timelines-chart in react. I found can not get the TimelinesChart instance. So that I can't use TimelinesChart instance reset Data.

[vasturiano]

@yueveron thanks for reaching out.

If you're integrating this chart with React you must have access to the instance as you certainly needed it for the binding. But it certainly depends on your implementation of the integration.

Also, which method are you invoking for resetting the data?

[BartosStore]

Hi @vasturiano, your timelines-chart helped me in plain JS. Thanks!

But now I have same question as @yueveron. Is it possible to render TimelinesChart as React component? I have script like this:

export function renderAggregateStateGraph(graphId, graphData) { const chartBuilder = TimelinesChart().data(graphData); return chartBuilder(); }

But "chartBuilder" const is actually function. Do you have some tips how to move on?

[vasturiano]

@BartosStore your chartBuilder is a function because it expects the DOM element that it should be bound to. You'd need to extract that from React.

Perhaps easier is to use a library like react-kapsule to automatically wrap this generic component in a React syntax. It should be as simple as:

const TimelinesChartComp = fromKapsule(timelinesChart);

and then in your JSX:

<TimelinesChartComp
  data={graphData}
  ...
/>

[BartosStore]

Yes, it works. Thanks.

Small tip for future developers like me... TimelinesChart is encapsulated by Kapsule by default.

[AndriyKarpyak]

Hello,

Could you please help me with the follow-up question?

I'm attempting to add your component to a React app based on TypeScript, but I'm encountering the following error:

Argument of type 'TimelinesChartInstance' is not assignable to parameter of type 'Kapsule'.
  Types of parameters 'element' and 'initOptions' are incompatible.
    Type 'object | undefined' is not assignable to type 'HTMLElement'.
      Type 'undefined' is not assignable to type 'HTMLElement'.ts(2345)

My code is quite simple:

const timelinesChart = TimelinesChart();

const TimelinesChartComp = fromKapsule(timelinesChart);

and error is reported on fromKapsule parameter.

Here are my dependencies:

    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-kapsule": "^2.4.0",
    "timelines-chart": "^2.12.1",
    "tslib": "2.5.0"

Please let me know if you can help me resolve this issue. Thank you!