Typescript examples?

[larrywal]

Does anyone have examples of visjs timeline usage in typescript? I see types exist, but it's really been frustrating trying to reverse engineer which types to use where. I'm a newer developer. Could really use examples that leverage the types. Thanks.

[ccvca]

After some time I got this working in react with typescript. But it requires the very bad workaround: items as any as DataItem[]. I was not able to find any type, which contains a "x:" Property.

import React, { useEffect, useRef } from "react";
import { DataSet } from "vis-data";
import vis, { DataItem, DataSetDataItem, Graph2d, Graph2dOptions } from "vis-timeline";
import 'vis-timeline/styles/vis-timeline-graph2d.min.css';

export default function Test() {

    // DOM element where the Timeline will be attached
    const container = useRef<HTMLDivElement>(null);
    let timeline :Graph2d | null = null;
    useEffect(
        () => {
            if (!container.current) {
                return;
            }

            const items = [
                {x: '2014-06-11', y: 10},
                {x: '2014-06-12', y: 25},
                {x: '2014-06-13', y: 30},
                {x: '2014-06-14', y: 10},
                {x: '2014-06-15', y: 15},
                {x: '2014-06-16', y: 30}
              ];
            
              var options : Graph2dOptions = {
                start: '2014-06-10',
                end: '2014-06-18',
                width: '500px',
                height: '500px'
              };
              var graph2d = new Graph2d(container.current, items as any as DataItem[], options);
        }
    );

    return (
        <div>
            <h1>Test</h1>
            <div className="graph" ref={container}></div>
        </div>
    );
}

[dennissterzenbach]

Huh. Yeah you are right. It seems to me, that things got a little tangled there.

From what I see in the code: You want to set up Graph2d to plot Points. Examples and your code show that this works fine. But the typescript type definitions seem to link to the same as Timeline, which does not work the same way with items of the Graph2s type "point" or "line".

@mojoaxel @Thomaash - I think we need a fix in the index.d.ts here, what do you think?

[ricardodoberstein]

@dennissterzenbach right now the requirements for DataItem to work in ts are: start: DateType (required) content: string (required)

Would it be reasonable to assume then that we can still use the same interface, as long as we make "start" and "x" mutually exclusive? And adding the (optional) y: number attribute to DataItem?

For example: { x: '2014-05-05', y: 10 } // Works { x: '2014-05-05', start: '2014-05-05', y: 10 } // TS error, provide only x OR start.

I am wondering how this will work with the Y value tho, is it reasonable to assume its really optional? In the Javascript code do we cover if the y is unset possibility?

I am just basically trying to figure out if we should make a brand new type definition for the points or we could re-use the same as long as we can keep the rules of exclusivity of the fields.