wc-syns-ribbon

Advanced ribbon-bar UI chart. This is a web component embeddable in any framework (react, angular, vue etc.) or just vanilla js.

Installation:

npm install wc-syns-ribbon

Usage:

import 'wc-syns-ribbon';

template:

<div> // container div
    <wc-syns-ribbon> </wc-syns-ribbon>
</div>

Usage with Angular:

• npm install wc-syns-ribbon
• import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; set schemas: [CUSTOM_ELEMENTS_SCHEMA] in the module. Tells Angular we will have custom tags in our templates
• import wc-syns-ribbon module.

import 'wc-syns-ribbon';

 <wc-syns-ribbon> </wc-syns-ribbon>

Parameters:

- data (by default data is mocked)

const data = {
  domain: {
    from: new Date("2021-05-10T06:00:00.000+02:00"),
    to: new Date("2021-05-10T14:00:00.000+02:00"),
  },
  states: [
    {
      from: new Date("2021-05-10T06:00:00.000+02:00"),
      to: new Date("2021-05-10T07:34:17.000+02:00"),
      description: "Excepteur sint obcaecat cupiditat",
      color: "#81B622",
    },
    {
      from: new Date("2021-05-10T07:34:17.000+02:00"),
      to: new Date("2021-05-10T09:31:02.000+02:00"),
      description: " quis nostrum exercitationem ullam laboriosam",
      color: "#2AA1A5",
    },
    {
      from: new Date("2021-05-10T09:31:02.000+02:00"),
      to: new Date("2021-05-10T10:23:04.000+02:00"),
      description: "XYZ test state description",
      color: "#DF362D",
    },
    {
      from: new Date("2021-05-10T10:23:04.000+02:00"),
      to: new Date("2021-05-10T11:00:00.000+02:00"),
      description: "consectetur adipisci elit, eiusmod",
      color: "#1b7aA1",
    },
    {
      from: new Date("2021-05-10T11:00:00.000+02:00"),
      to: new Date("2021-05-10T13:17:04.000+02:00"),
      description: "XYZ test state 23 13 ",
      color: "#BADBB1",
    },
  ],
};

<wc-syns-ribbon [data]="data"></wc-syns-ribbon>