npm package: @hartings/la-timeline-seconds
Description: Webcomponent la-timeline-seconds for a timeline showing events since x seconds ago following open-wc recommendations
Author: Robert Hartings
Latest version: 1.0.4

# \<la-timeline-seconds>

This webcomponent follows the [open-wc](https://github.com/open-wc/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

```bash
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:

```html
<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:

```html
<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.

```html
<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
```css
la-timeline-seconds::part(chart) {
  height: 400px;
}
```


## Troubleshooting

* tslib not found: please add this to your dev dependencies
```bash
yarn add tslib --dev
```

## Testing with Web Test Runner

To execute a single test run:

```bash
yarn test
```

To run the tests in interactive watch mode run:

```bash
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`

```bash
yarn start
```

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