How to use @hpcc-js/common - 10 common examples

exit(domNode, element) {
        super.exit(domNode, element);
    }

    //  Events  ---
    click(row, column, selected) {
        console.log("Click:  " + JSON.stringify(row) + ", " + column + "," + selected);
    }

    dblclick(row, column, selected) {
        console.log("Double Click:  " + JSON.stringify(row) + ", " + column + "," + selected);
    }
}
Sankey.prototype._class += " graph_Sankey";
Sankey.prototype.Column = SankeyColumn;
Sankey.prototype.mixin(Utility.SimpleSelectionMixin);

Sankey.prototype._palette = Palette.ordinal("default");

Sankey.prototype.publish("paletteID", "default", "set", "Palette ID", Sankey.prototype._palette.switch());
Sankey.prototype.publish("mappings", [], "propertyArray", "Source Columns", null, { autoExpand: SankeyColumn });
Sankey.prototype.publish("vertexWidth", 36, "number", "Vertex Width");
Sankey.prototype.publish("vertexPadding", 40, "number", "Vertex Padding");
Sankey.prototype.publish("xAxisMovement", false, "boolean", "Enable x-axis movement");
Sankey.prototype.publish("yAxisMovement", false, "boolean", "Enable y-axis movement");

export function retrofit_114_serialization(state, replacement_version) {
    replacement_version = !replacement_version || replacement_version === "1.14.2-dev" ? "1.18.0" : replacement_version;
    if (!state.__version) return state;
    const state_version_obj = Utility.parseVersionString(state.__version);
    const target_version_obj = Utility.parseVersionString(replacement_version);
    if (state_version_obj.major === 1 && state_version_obj.minor === 14) {
        console.log("Upgrading old persist from " + state.__version + " to " + replacement_version);
        let _json_str = JSON.stringify(state);
        _json_str = _json_str.split('"' + state.__version).join('"' + replacement_version);

        const ret_obj = JSON.parse(_json_str);
        if (ret_obj.__properties && ret_obj.__properties.content) {
            ret_obj.__properties.content.forEach(function (n) {// FOR EACH top tier layout_Cell
                if (JSON.stringify(n).split("graph_Graph").length > 1 && target_version_obj.minor >= 16) {
                    n.__properties.widget.__id = n.__properties.widget.__properties.widget.__id;
                    n.__properties.widget.__class = "composite_MegaChart";
                    n.__properties.widget.__properties.showCSV = false;
                    n.__properties.widget.__properties.chartType = "GRAPH";
                    n.__properties.widget.__properties.chart = n.__properties.widget.__properties.widget;
                    delete n.__properties.widget.__properties.chart.__id;

export function retrofit_114_serialization(state, replacement_version) {
    replacement_version = !replacement_version || replacement_version === "1.14.2-dev" ? "1.18.0" : replacement_version;
    if (!state.__version) return state;
    const state_version_obj = Utility.parseVersionString(state.__version);
    const target_version_obj = Utility.parseVersionString(replacement_version);
    if (state_version_obj.major === 1 && state_version_obj.minor === 14) {
        console.log("Upgrading old persist from " + state.__version + " to " + replacement_version);
        let _json_str = JSON.stringify(state);
        _json_str = _json_str.split('"' + state.__version).join('"' + replacement_version);

        const ret_obj = JSON.parse(_json_str);
        if (ret_obj.__properties && ret_obj.__properties.content) {
            ret_obj.__properties.content.forEach(function (n) {// FOR EACH top tier layout_Cell
                if (JSON.stringify(n).split("graph_Graph").length > 1 && target_version_obj.minor >= 16) {
                    n.__properties.widget.__id = n.__properties.widget.__properties.widget.__id;
                    n.__properties.widget.__class = "composite_MegaChart";
                    n.__properties.widget.__properties.showCSV = false;
                    n.__properties.widget.__properties.chartType = "GRAPH";
                    n.__properties.widget.__properties.chart = n.__properties.widget.__properties.widget;
                    delete n.__properties.widget.__properties.chart.__id;
                    delete n.__properties.widget.__properties.widget;

import { Palette } from "@hpcc-js/common";

export class ITree {
    _palette;

    //  Events  ---
    click(row, column, selected) {
        console.log("Click:  " + JSON.stringify(row) + ", " + column + ", " + selected);
    }

    dblclick(row, column, selected) {
        console.log("Double click:  " + JSON.stringify(row) + ", " + column + ", " + selected);
    }
}
ITree.prototype._palette = Palette.ordinal("default");

import { Palette } from "@hpcc-js/common";
import { hsl as d3Hsl } from "d3-color";

export function INDChart() {
}
INDChart.prototype._dataFamily = "ND";
INDChart.prototype._palette = Palette.ordinal("default");

INDChart.prototype.fillColor = function (row: any[], column: string, value: number): string {
    return this._palette(column);
};

INDChart.prototype.strokeColor = function (row: any[], column: string, value: number): string {
    return d3Hsl(this.fillColor(row, column, value)).darker().toString();
};

INDChart.prototype.textColor = function (row: any[], column: string, value: number): string {
    return Palette.textColor(this.fillColor(row, column, value));
};

//  Events  ---
INDChart.prototype.click = function (row, column, selected) {
    console.log("Click:  " + JSON.stringify(row) + ", " + column + ", " + selected);

}

    //  Events  ---
    click(row, column, selected) {
        console.log("Click:  " + JSON.stringify(row) + ", " + column + "," + selected);
    }

    dblclick(row, column, selected) {
        console.log("Double Click:  " + JSON.stringify(row) + ", " + column + "," + selected);
    }
}
Sankey.prototype._class += " graph_Sankey";
Sankey.prototype.Column = SankeyColumn;
Sankey.prototype.mixin(Utility.SimpleSelectionMixin);

Sankey.prototype._palette = Palette.ordinal("default");

Sankey.prototype.publish("paletteID", "default", "set", "Palette ID", Sankey.prototype._palette.switch());
Sankey.prototype.publish("mappings", [], "propertyArray", "Source Columns", null, { autoExpand: SankeyColumn });
Sankey.prototype.publish("vertexWidth", 36, "number", "Vertex Width");
Sankey.prototype.publish("vertexPadding", 40, "number", "Vertex Padding");
Sankey.prototype.publish("xAxisMovement", false, "boolean", "Enable x-axis movement");
Sankey.prototype.publish("yAxisMovement", false, "boolean", "Enable y-axis movement");

import { Palette } from "@hpcc-js/common";
import { hsl as d3Hsl } from "d3-color";

export function I2DChart() {
}
I2DChart.prototype._dataFamily = "2D";
I2DChart.prototype._palette = Palette.ordinal("default");

I2DChart.prototype.fillColor = function (row: any[], column, value): string {
    return this._palette(row[0]);
};

I2DChart.prototype.strokeColor = function (row: any[], column, value): string {
    return d3Hsl(this.fillColor(row, column, value)).darker().toString();
};

I2DChart.prototype.textColor = function (row: any[], column, value): string {
    return Palette.textColor(this.fillColor(row, column, value));
};

//  Events  ---
I2DChart.prototype.click = function (row: object, column, selected) {
    console.log("Click:  " + JSON.stringify(row) + ", " + column + ", " + selected);

import { Palette } from "@hpcc-js/common";
export function IChoropleth() {
}
IChoropleth.prototype._palette = Palette.rainbow("default");

//  Events  ---
IChoropleth.prototype.click = function (row, column, selected) {
    console.log("Click:  " + JSON.stringify(row) + ", " + column + ", " + selected);
};

;
    }

    //  Events  ---
    click(row, column, selected) {
        console.log("Click:  " + JSON.stringify(row) + ", " + column + ", " + selected);
    }

    dblclick(row, column, selected) {
        console.log("Double click:  " + JSON.stringify(row) + ", " + column + ", " + selected);
    }
}
Choropleth.prototype._class += " map_Choropleth";
Choropleth.prototype.mixin(Utility.SimpleSelectionMixin);

Choropleth.prototype._palette = Palette.rainbow("default");

export interface Choropleth {
    autoScaleMode(): string;
    autoScaleMode(_: string): this;
    autoScaleMode_exists(): boolean;
    paletteID(): string;
    paletteID(_: string): this;
    paletteID_exists(): boolean;
    useClonedPalette(): boolean;
    useClonedPalette(_: boolean): this;
    useClonedPalette_exists(): boolean;
    opacity(): number;
    opacity(_: number): this;
    opacity_exists(): boolean;
    meshVisible(): boolean;
    meshVisible(_: boolean): this;

processResponse(response, request, updates) {
        const lowerResponse = {};
        for (const responseKey in response) {
            lowerResponse[responseKey.toLowerCase()] = response[responseKey];
        }
        const promises = [];
        for (const key in this._outputs) {
            const from = this._outputs[key].id;
            if (Utility.exists(from, response)) {
                if (!Utility.exists(from + _CHANGED, response) || (Utility.exists(from + _CHANGED, response) && response[from + _CHANGED].length && response[from + _CHANGED][0][from + _CHANGED])) {
                    promises.push(this._outputs[key].setData(response[from], updates));
                } else {
                    //  TODO - I Suspect there is a HIPIE/Roxie issue here (empty request)
                    promises.push(this._outputs[key].vizNotify(updates));
                }
            } else if (Utility.exists(from, lowerResponse)) {
                console.log("DDL 'Datasource.From' case is Incorrect");
                if (!Utility.exists(from + _CHANGED, lowerResponse) || (Utility.exists(from + _CHANGED, lowerResponse) && response[from + _CHANGED].length && lowerResponse[from + _CHANGED][0][from + _CHANGED])) {
                    promises.push(this._outputs[key].setData(lowerResponse[from], updates));
                } else {
                    //  TODO - I Suspect there is a HIPIE/Roxie issue here (empty request)
                    promises.push(this._outputs[key].vizNotify(updates));
                }
            } else {
                const responseItems = [];
                for (const responseKey2 in response) {
                    responseItems.push(responseKey2);
                }
                console.log("Unable to locate '" + from + "' in response {" + responseItems.join(", ") + "}");
            }
        }
        return Promise.all(promises);