Timeline
A timeline component is a graphical representation of events or data points arranged chronologically along a horizontal or vertical axis. It allows users to visualize and navigate through a series of events or milestones in a linear fashion.
Properties
Timeline's available properties. JavaScript may be written to read or alter information about components.
| Properties | Description |
|---|---|
| Items | the collection of individual events or data points that are displayed on the timeline |
| Direction | the orientation or layout of the timeline component (horizontal or vertical) |
| Pending | the status of an item in the timeline |
| Height | vertical size or height of the timeline component |
| Hidden | whether the timeline component is visible or hidden |
Methods
You can use other components to control the component. We support the following two methods:
- setValue
To set the text area input value, for example, {{"value1"}}
| Properties | Description |
|---|---|
| Value | Input value |
- clearValue
To clear the value of the selected component
Data
The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.
| Property name | Description |
|---|---|
| direction | orientation or layout of the timeline |
| dynamicHeight | the ability to adjust the height of the timeline dynamically based on its content or other factors. |
| displayName | the name of this component (ie timeline1) |
| hidden | whether the timeline component is visible or hidden |
| items | the collection of individual events or data points displayed on the timeline |
| pending | the status of an item in the timeline |
| resizeDirection | the direction in which the timeline component can be resized by the user |
Example: {{timeline1.items}}
Use case
Next, we will demonstrate how to map the data from the data source to the timeline component.
Step 1 Add an action
Let us create a table in Supabase called timeline, including only 1 columns: milestones. There are 4 milestones we want to map to the timeline component.
Then we can create a new action for Supabase from the action list and named supabasedb1.
To list all data in milestone, put the code snippet below in the SQL query section.
select * from timeline;
Since the output data is a list of dictionary pair, we want to transform it into an array. In Transformer, enable it and put down the code below.
const transformedData = data.map((obj) => Object.values(obj)[0]);
return transformedData;
Click Save and Run to activate this action.
Step 2 Add Components
Next, we can add a timeline component to the canvas.
In the **Items** field in the Inspect page after clicking on the component, put {{supabasedb1.data}} to retrieve the data from supabase.
Step 3 Test
The final look should be as shown.
