@hartings/la-recopa-timeline

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

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:

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

<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

  <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):

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

npm run test

To run the tests in interactive watch mode run:

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

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

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