npm package: @hartings/la-recopa-timeline
Description: Webcomponent la-recopa-timeline following open-wc recommendations
Author: la-recopa-timeline
Latest version: 0.0.6-recopa

# \<la-recopa-timeline>

IN THE CURRENT VERSION (BUILD FOR RECOPA) THE PACKAGE rollup-plugin-esbuild MAKES PROBLEMS BUILDING FOR THE DEMO.

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation. The web component was specifically developed for implementation in ReCoPa, utilizing the la-tabs, la-timeline-seconds, and la-timeline-timestamps web components to visualize xAPI statements.

## Installation

```bash
yarn add "@hartings/la-recopa-timeline"
```

## 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>
  import { LaRecopaTimeline } from "@hartings/la-recopa-timeline";
  window.customElements.define('la-recopa-timeline', LaRecopaTimeline);
</script>

<la-recopa-timeline></la-recopa-timeline>
```

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

```html
<script type="module">
  import { LaRecopaTimeline } from '@hartings/la-recopa-timeline/la-recopa-timeline.js';
</script>

<la-recopa-timeline></la-recopa-timeline>
```

## API Properties
The la-example Web Component uses reactive properties for configuration.

* config: Object -> See la-timeline-seconds or la-timeline-timestamp (passed down to both components)
* data: Array -> Array of data objects with atleast following structure:
  - actor: string -> xAPI actor
  - verb: string -> xAPI verb
  - object: string -> xAPI object
  - timestamp: string -> xAPI timestamp of entry

```html
  <la-recopa-timeline id="demo-timeline"></la-recopa-timeline>

  <script type="module">
    import { LaRecopaTimeline } from "@hartings/la-recopa-timeline";

    window.customElements.define('la-recopa-timeline', LaRecopaTimeline);

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

    const statements = [
      {
        "actor": "Anonymous",
        "verb": "drückte",
        "object": "Maus (right)",
        "timestamp": new Date().toISOString()
      },
    ];

    const timeline = document.getElementById('demo-timeline');
    timeline.config = config;
    timeline.data = statements;
  </script>
```

### Important
To use it in ReCoPa you have to use the bundled version currently (lit and package json export map problems):
```html
<script type="module">
import { LaRecopaTimeline } from './bundle.js';
window.customElements.define('la-recopa-timeline', LaRecopaTimeline);
</script>

<la-recopa-timeline ...></la-recopa-timeline>
```
## Testing with Web Test Runner

To execute a single test run:

```bash
npm run test
```

To run the tests in interactive watch mode run:

```bash
npm run 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
npm start
```

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


## Troubleshooting

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

* no points in timeline:
  - check your code, if you provide "right" timestamp
  - check if your browser blocks it, tracking settings, e.g. in Firefox