This generic frontend can be used to visualize data on a timeline. It requires a specific format for data exposed on a certain endpoint.
The application requires to be opened on a specific url which serves as configuration. The url format is
/:resourceCollection/:resourceId and is used to generate both target endpoints for data
/timeline/:resourceCollection/json and for live search
Allowed query strings are:
selected: used to prefill the input search and automatically search for data;
liveSearch: enables live search when set to
By default a checkpoint looks like the following image:
The top-level property
level defines the importance of the displayed data. Higher the level, lower the importance and, consequently,
a smaller checkpoint dot and title will be rendered. As of now the available levels are 1 (default) and 2.
The style of the checkpoint can be customized through the top-level object property
style. The property itself and all
of its attributes are optional.
primaryColor allows to define the main color of the checkpoint. The value has to be a valid hex color
code (for example:
inverted allows to specify if the dot and title coloring pattern have to be inverted. The value must be a boolean
icon allows to define the name of the icon to visualize inside of the checkpoint dot (only for level 1,
by default no icon is rendered).
Through the flag
iconInDescription one can specify if the icon has to be displayed also in the description (works for
both level 1 and 2, default false).
The selectable icons are the ones provided by ant.design v3 and can be found here.
By default, level 1 checkpoints define the positioning of all the following elements with lower importance (the first element of the timeline is on the right).
position allows to define a custom position for a checkpoint. If the checkpoint is of level 1, the custom
position will affect all the following elements, while if it is of level 2, the custom position will only affect that
particular element, and the following ones will maintain the default positioning.
Possible values for the property are
The result shown in the picture at the top of this page can be achieved passing the following data: