Installing the package

If you are using npm package manager:

npm install data-visualisation-system-stencil --save

If you are using yarn package manager:

yarn add data-visualisation-system-stencil

Adding data widget library in Angular

Include the CUSTOM_ELEMENTS_SCHEMA to module where data widget will be shown by adding such line in module:

schemas: [CUSTOM_ELEMENTS_SCHEMA]

Then you'll need to add definition of custom elements in main.ts like this:

import { defineCustomElements } from 'data-visualisation-system-stencil/loader';

defineCustomElements(window);

Adding data widget library in React

All you'll need to do is to add definition of custom elements in index.js like this:

import { defineCustomElements } from 'data-visualisation-system-stencil/loader';

defineCustomElements(window);

Adding data widget library in Vue

All you'll need to do is to add definition of custom elements in main.js like this:

import { defineCustomElements } from 'data-visualisation-system-stencil/loader';

defineCustomElements(window);

Using data widget

In order to show data widget you'll have to add such code line in a template:

    <dvs-wrapper-component widget-key="root" width="200" height="140"></dvs-wrapper-component>

• Attribute widget-key is the unique widget key that was created, when configuring data widget (only accepted format for this attribute is string).
• Attribute width is width of the data widget in px (only accepted format for this attribute is number).
• Attribute height is height of the data widget in px (only accepted format for this attribute is number)