<la-timeline-seconds>

This webcomponent follows the open-wc recommendation. It is designed to render an interactive timeline chart that dynamically updates to show the passage of time for various data points.

Installation

yarn add "@hartings/la-timeline-seconds"

Usage

The default export provides the Web Component class and does not register the web component itself. This approach prevents side-effects and gives you direct access to the Web Component. To use the Web Component in your HTML, you need to register it yourself. The following code provides a simple example:

<script type="module">
  import { LaTimelineSeconds } from '@hartings/la-timeline-seconds';
  window.customElements.define('la-timeline-seconds', LaTimelineSeconds);
</script>

<la-timeline-seconds></la-timeline-seconds>

If you prefer to use the web component without defining it yourself, you can adjust the import as follows:

<script type="module">
  import '@hartings/la-timeline-seconds/la-timeline-seconds.js';
</script>

<la-timeline-seconds></la-timeline-seconds>

API Properties

The la-timeline-seconds Web Component uses reactive properties for configuration

• config: Object -> Configuration object with the following optional properties:
  • title: string - Title of the timeline.
  • subtitle: string - Subtitle of the timeline.
  • secondsToShow: number - Number of seconds to show on the timeline.
  • lineColor: string - Color of the timeline line.
  • pointBorderColor: string - Border color of the timeline points.
  • timelineUpdateInterval: number - Interval in milliseconds for updating the timeline.
  • downloadFileName: string - Filename for downloading the timeline data.
• data: Array -> Array of data objects with the following structure:
  • timestamp: string | undefined - Timestamp for the data point.
  • info: string - Information about the data point.
  • value: number | string - Timestamp or passed seconds associated with the data point.

<script type="module">
import { LaTimelineSeconds } from '@hartings/la-timeline-seconds';
window.customElements.define('la-timeline-seconds', LaTimelineSeconds);

const timeline = document.getElementById('demo-timeline');

const config = {
  title: "Example Timeline Seconds",
  subtitle: "Example Subtitle",
  secondsToShow: 30,
  lineColor: 'green',
  pointBorderColor: 'blue',
  timelineUpdateInterval: 1000,
  downloadFileName: 'example-timeline-seconds',
}

const data = [
  {info: "First Entry", value: new Date().toISOString()},
  {info: "Second Entry", value: new Date().toISOString()},
  {info: "Thrird Entry", value: new Date().toISOString()},
]

timeline.data = data;
timeline.config = config;
</script>

<la-timeline-seconds id="demo-timeline"></la-timeline-seconds>

Styling

The Web Component has a default height set, if you want to override it, please use the following css

la-timeline-seconds::part(chart) {
  height: 400px;
}

Troubleshooting

• tslib not found: please add this to your dev dependencies

yarn add tslib --dev

Testing with Web Test Runner

To execute a single test run:

yarn test

To run the tests in interactive watch mode run:

yarn test:watch

The test coverage does not function currently, as it inspects the bundle and not the single element.

Local Demo with web-dev-server

yarn start

To run a local development server that serves the basic demo located in demo/index.html