[Feature] Make TimeAxis customizable #1813

MrAlexand0r · 2024-07-11T12:31:09Z

Hello!

I am trying to customize my Timeline to show a custom implementation of the TimeAxis, but came to the conclusion that this is currently not possible.

I would like to request a feature that allows developers to replace or extend the TimeAxis component with their own implementation. This would enable more flexibility and customization options for users who need specific functionality that is not provided by the default TimeAxis.

Use Case

In my project, I need to display a custom time axis with specific formatting and behavior that is not supported by the current implementation. For example, I want to implement click actions on sections of the time axis and change the styling substantially.

Proposed Solution

This can be achieved by either:

Adding a TimeAxis template option to be passed when creating a Timeline.
Create TypeScript Types for Component, TimeAxis, etc.. and create a Timeline function to replace Components

Example

Here is an example of how this feature could be implemented using the template option:

const options = { 
      timeAxisTemplate: {
           minor: (x, text, orientation, className) => { return <html element or string>},
           major: ...
      }
};

Or when choosing the other approach:

export class CustomTimeAxis extends TimeAxis {
  override _repaintMinorText(x: number, text: string, orientation: 'top' | 'bottom', className: string): HTMLElement {
    // create new html element here
    return label;
  }
}

timeline.replaceComponent(Components.TimeAxis, new CustomTimeAxis())

While the first proposal would be easier to implement, the second proposal would allow to customize any component and not just the TimeAxis.

Thoughts?

seanlowe · 2024-10-17T03:37:45Z

As an aside to this, being able to use substitute a different date/time library to use instead of what's currently used would be nice too. Considering writing a custom date/time library for arbitrary calendars (fantasy calendars) since I cannot find one currently. I use vis-timeline in my obsidian plugin but if anyone is using custom dates a whole lot of data is lost in translation to actual time.

Edit: typo.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feature] Make TimeAxis customizable #1813

[Feature] Make TimeAxis customizable #1813

MrAlexand0r commented Jul 11, 2024

seanlowe commented Oct 17, 2024 •

edited

Loading

[Feature] Make TimeAxis customizable #1813

[Feature] Make TimeAxis customizable #1813

Comments

MrAlexand0r commented Jul 11, 2024

Use Case

Proposed Solution

Example

seanlowe commented Oct 17, 2024 • edited Loading

seanlowe commented Oct 17, 2024 •

edited

Loading