almende / vis

⚠️ This project is not maintained anymore! Please go to https://github.com/visjs
7.85k stars 1.48k forks source link

Invalid start "NaN" when adding rollingMode to options #4226

Open sushitommy opened 5 years ago

sushitommy commented 5 years ago

I am using vis timeline in a React project. However, I get this error when I try to enable rollingMode in the timeline. This is my function that returns a options object:

private getTimelineOptions = (stage: IStage): TimelineOptions => {
    const now = new Date();
    const isStageRunning = isWithinRange(now, stage.startTime, stage.endTime);
    const spanStart = isStageRunning ? subMinutes(now, 10) : stage.startTime;
    const spanEnd = isStageRunning ? addMinutes(now, 10) : stage.endTime;

    return {
      orientation: { axis: "top" },
      stack: false,
      stackSubgroups: false,
      showMajorLabels: false,
      maxMinorChars: 0,
      showCurrentTime: true,
      timeAxis: { scale: "minute" as any, step: 15 },
      maxHeight: "100%",
      start: spanStart,
      end: spanEnd,
      min: subMinutes(stage.startTime, 30),
      max: addMinutes(stage.endTime, 30),
      zoomMin: 200000,
      zoomMax: differenceInMilliseconds(stage.endTime, stage.startTime),
      zoomable: true,
      horizontalScroll: true,
      verticalScroll: true,
      onInitialDrawComplete: this.onInitialDrawComplete,
      onMoving: this.onItemMoving,
      rollingMode: {
        follow: true
      },
      groupTemplate: (feedItem: IVisGroupItem, element: HTMLElement): any => {
        if (!feedItem) {
          return "";
        }
        ReactDOM.unmountComponentAtNode(element);
        ReactDOM.render(<FeedLabel feedItem={feedItem} />, element);
        return "";
      },
      showTooltips: false,
      editable: {
        add: false,
        remove: false,
        updateGroup: false,
        updateTime: true,
        overrideItems: false
      },
      snap: (date: Date, scale: string, step: number) => {
        return date;
      }
    } as TimelineOptions;
  };

When rollingMode is left out, the timeline works without problems. With rollingMode enabled I get this error:

vis.js?4f27:8826 Uncaught Error: Invalid start "NaN"
    at Range._applyRange (vis.js?4f27:8826)
    at Range.setRange (vis.js?4f27:8763)
    at update (vis.js?4f27:8643)
    at Range.startRolling (vis.js?4f27:8656)
    at Range.setOptions (vis.js?4f27:8602)
    at new Range (vis.js?4f27:8574)
    at new Timeline (vis.js?4f27:40729)
    at Timeline.eval [as componentDidUpdate] (Timeline.tsx?dea2:61)
    at commitLifeCycles (react-dom.development.js?61bb:16242)
    at commitAllLifeCycles (react-dom.development.js?61bb:17592)

It seems it is an issue when using Timeline in React. When I call it with a timeout it works.

mojoaxel commented 5 years ago

@sushitommy Could you please provide an online example that shows this problem. Thanks!