Mixing up Viewport Min and Max Causes Infinite Memory Usage

[lordmilko]

While experimenting with random date values, trying to figure out how I would use vue-timeline-chart in my application, I've found that, if you mix up the order of your viewportMin and viewportMax, your page freezes and you consume infinite memory until your browser tab crashes from running out of memory.

e.g. consider the following from the Getting Started page, with the viewportMin / viewportMax flipped

<script setup>
  import { Timeline } from 'vue-timeline-chart';
  import 'vue-timeline-chart/style.css';

  const groups = [
    { id: 'group1', label: 'Group 1' },
    { id: 'group2', label: 'Group 2' },
  ];

  const items = [
    { group: 'group1', type: 'point', start: 1705878000000, cssVariables: { '--item-background': 'var(--color-2)' } },
    { group: 'group1', type: 'range', start: 1707135072000, end: 1708431072000, cssVariables: { '--item-background': 'var(--color-4)' } },
    { group: 'group2', type: 'range', start: 1706790600000, end: 1706877000000 },
  ];
</script>

<template>
  <Timeline
    :groups="groups"
    :items="items"
    :viewportMin="1714566600000"
    :viewportMax="1703112200000"
  />
</template>

This is an easy mistake to make when trying to randomly plug new Date().getTime() in random places to observe how the graph changes. I'm not sure if other places that consume times may also have this issue. Ideally, vue-timeline-chart would not cause infinite memory usage, and perhaps throw an error saying that viewportMin must be before viewportMax, etc.

[laurens94]

Thanks for the suggestion! 👍 I added some checks to prevent it. It will now throw an error whenever the values are invalid.