This repository has been relocated to: http://hpcc-systems.github.io/Visualization/
::: warning This is currently a POC repository and has not been released to the npmjs repository. :::
@hpcc-js/web-components is a library of Web Components that focuses on visualizations. It also includes communication libraries for interacting with HPCC Platforms.
To install the @hpcc-js/web-components library, use either npm or yarn as follows:
npm install --save @hpcc-js/web-componentsyarn add @hpcc-js/web-componentsWithin your JavaScript or TypeScript code, import the desired components (this is the recommended approach as it ensures that only the used components get included in your build - aka tree shaking):
import { HPCCSankeyElement, HPCCZoomElement } from "@hpcc-js/web-components";
HPCCSankeyElement; // Force bundler to include Sankey components
HPCCZoomElement; // Force bundler to include Zoom componentsAlternatively you can easily register all components:
import * as all from "@hpcc-js/web-components";
all; // Force bundler to include all componentsA pre-bundled script that contains all APIs needed to use FAST Foundation is available on CDN. You can use this script by adding type="module" to the script element and then importing from the CDN.
<!DOCTYPE html>
<html lang="en">
<head>
<script type="module" src="https://cdn.jsdelivr.net/npm/@hpcc-js/web-components/dist/index.min.js"></script>
</head>
<!-- ... -->
</html>The markup above always references the latest release. When deploying to production, you will want to ship with a specific version. Here's an example of the markup for that:
<script type="module" src="https://cdn.jsdelivr.net/npm/@hpcc-js/web-components@1.2.3/dist/index.min.js"></script>::: info For simplicity, examples throughout the documentation will assume the library has been installed from NPM, but you can always replace the import location with the CDN URL. :::
To start the component development environment:
git clone https://github.com/hpcc-systems/hpcc-js-wc.git
cd hpcc-js-wc
npm install
npm run serve
In vscode pressing ctrl+shift+b will start the build and serve process. Pressing F5 will start debugging in the browser.