How to use @finos/perspective-viewer - 3 common examples

* This file is part of the Perspective library, distributed under the terms of
 * the Apache License 2.0.  The full license can be found in the LICENSE file.
 *
 */
import * as d3 from "d3";

import style from "../../less/chart.less";
import template from "../../html/d3fc-chart.html";
import {areArraysEqualSimple} from "../utils/utils";
import {initialiseStyles} from "../series/colorStyles";

import {bindTemplate} from "@finos/perspective-viewer/dist/esm/utils";

const styleWithD3FC = `${style}${getD3FCStyles()}`;

@bindTemplate(template, styleWithD3FC) // eslint-disable-next-line no-unused-vars
class D3FCChartElement extends HTMLElement {
    constructor() {
        super();
        this._chart = null;
        this._settings = null;
    }

    connectedCallback() {
        console.log("connected callback");
        this._container = this.shadowRoot.querySelector(".chart");
    }

    render(chart, settings) {
        this._chart = chart;
        this._settings = this._configureSettings(this._settings, settings);
        initialiseStyles(this._container, this._settings);

},
                        labels: {overflow: "justify"}
                    }
                });
            }
        } finally {
            element = get_or_create_element.call(this, el);
            if (restyle || this.hasAttribute("updating")) {
                element.delete();
            }
        }

        element.render(mode, configs, this);
    };

@bindTemplate(template, style) // eslint-disable-next-line no-unused-vars
class HighchartsElement extends HTMLElement {
    constructor() {
        super();
        this._charts = [];
    }

    connectedCallback() {
        this._container = this.shadowRoot.querySelector("#container");
    }

    render(mode, configs, callee) {
        if (this._charts.length > 0 && this._charts.length === configs.length) {
            let idx = 0;
            for (let cidx = 0; cidx < this._charts.length; cidx++) {
                const chart = this._charts[cidx];
                let config = configs[idx++];

/******************************************************************************
 *
 * Copyright (c) 2017, the Perspective Authors.
 *
 * This file is part of the Perspective library, distributed under the terms of
 * the Apache License 2.0.  The full license can be found in the LICENSE file.
 *
 */

import {PropsBuilder} from "@finos/perspective-viewer/dist/esm/custom_styles";
import {cloneDeep} from "lodash";

const properties = new PropsBuilder();
const title = `--hypergrid`;

properties.add_fonts({
    font: title,
    columnHeaderFont: `${title}-header`,
    columnHeaderForegroundSelectionFont: `${title}-header`,
    foregroundSelectionFont: `${title}-header`,
    rowHeaderFont: title,
    treeHeaderFont: title
});

properties.add_styles({
    treeHeaderBackgroundColor: `${title}-tree-header--background`,
    backgroundColor: `${title}--background`,
    treeHeaderColor: `${title}-tree-header--color`,
    treeHeaderForegroundSelectionColor: `${title}-tree-header--color`,