Skip to content

USING_FACETS.md

Latest commit

 

History

History
56 lines (45 loc) · 1.94 KB

USING_FACETS.md

File metadata and controls

56 lines (45 loc) · 1.94 KB

Uncharted Facets

Using Facets in Javascript/Typescript

Install

Use yarn to install the desired packages:

yarn add @uncharted.software/facets-core
yarn add @uncharted.software/facets-plugins

or npm:

npm install @uncharted.software/facets-core
npm install @uncharted.software/facets-plugins

Instantiating Facets

First, import the libraries as usual.

// It is important to import facets-plugins first if using them, and early in your application startup (e.g. main.ts)
// before any components / templates are used.
import * as Plugins from '@uncharted.software/facets-plugins';
import * as Facets from '@uncharted.software/facets-core';

Then instantiate facets as you would any web component, or for example, just use them in your Vue.js templates as custom elements.

const termsFacet = document.createElement('facet-terms');

Next assign data to the facet's data property. (See the HTML examples for details of the data structures and requirements.)

termsFacet.data = {
    label: "Simple Facets",
    values: [
        { "ratio": 0.05, "label": "5%" },
        { "ratio": 0.15, "label": "15%" },
        // etc.
    ]
};

Facet Messages

Facets support a single message type, facet-element-updated. This message is dispatched whenever any of the properties of a facet changes. Subscribe to the message by adding a listener to the facet.

termsFacet.addEventListener('facet-element-updated', (event) => { /* Do Stuff */ });

event.detail.changedProperties contains the list of properties that have changed. For example you can listen for selection changes by checking event.detail.changedProperties.has('selection'). After which you can check termsFacet.selection to see what is selected. The structure of the selection varies by facet type.