"Timeline" with just Numeric Value

[samuelarbibe]

Discussed in #31

^{Originally posted by FTInterritus7624 June 18, 2024}
Hi there,

I was trying to build a 'timeline' when given just a min and max value rather than a start/end date. As I was going about it, there was no doubt that I had to make certain adjustments to the built in types and functions that dnd-timeline had to offer. Essentially having to create my own versions of these types and functions (e.g. ItemDefinition, generateItems, groupItemstoRow).

This pretty much led me down a rabbit hole of customizing everything that had to do with Relevance and/or datetime especially when I came across having to look into potentially customizing my own useItem as it appears to rely on the type Relevance and time-related functions in pieces of the code. So before I continue the rabbit hole, I just wanted to ask, if dnd-timeline offers a simpler way to handle min-max numeric values (whether it be time axis or items), or would it require a bit of customization/overhaul as I've been doing?

Thanks!

After thinking about it, there is no point in using dates in dnd-timeline.
Internally, dnd-timeline already converts dates to numbers to manipulate them more easily, and converting back-and-forth creates an unnecessary hassle.

Therfore, I have decided to completly remove dates from the library, and rely purely on numbers.
This makes the library more generic, and opens it to usage with number ranges that are not necessarily dates.

This may also help performance because alot of conversions from dates to number and numbers to dates are reducted.

It will introduce a few breaking changes, that will also be documented.

Breaking Changes

The Relevance and Timeframe types

-export interface Relevance {
-	start: Date;
-	end: Date;
+export interface Range {
+	start: number;
+	end: number;
}

-export type Timeframe = Relevance;
+export interface Span extends Range {}

---

The ItemDefinition type

export interface ItemDefinition {
	id: string;
	rowId: string;
	disabled?: boolean;
-	relevance: Relevance;
+	span: Span;
}

---

GetRelevanceFromResizeEvent and GetRelevanceFromDragEvent

-export type GetRelevanceFromDragEvent = (
+export type GetSpanFromDragEvent = (
	event: DragStartEvent | DragEndEvent | DragCancelEvent | DragMoveEvent,
-) => Relevance | null;
+) => Range | null;

-export type GetRelevanceFromResizeEvent = (
-	event: ResizeEndEvent,
-) => Relevance | null;
+export type GetSpanFromResizeEvent = (event: ResizeEndEvent) => Range | null;

-export type GetDateFromScreenX = (screenX: number) => Date;
+export type GetValueFromScreenX = (screenX: number) => number;

-export type PixelsToMilliseconds = (
-	pixels: number,
-	timeframe?: Timeframe,
-) => number;
-export type MillisecondsToPixels = (
-	milliseconds: number,
-	timeframe?: Timeframe,
-) => number;
+export type PixelsToValue = (pixels: number, range?: Range) => number;
+export type ValueToPixels = (value: number, range?: Range) => number;

You can check out the rest of the breaking changed here:
https://github.com/samuelarbibe/dnd-timeline/pull/32/files#diff-73566eadae017028cd5bb10a6e48cf3c6f64e6fb4706f66735966887be62cb8b