How to use the @hpcc-js/common.Palette.ordinal function in @hpcc-js/common

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);

describe(`${item.prototype.constructor.name}`, () => {
                    if (item.prototype instanceof Class) {
                        classDef("graph", item);
                    }
                    if (item.prototype instanceof HTMLWidget || item.prototype instanceof SVGWidget) {
                        switch (item.prototype.constructor) {
                            case Edge:
                                const graph = new Graph();
                                const vertices: any[] = [];
                                const edges: any[] = [];
                                const palette = Palette.ordinal("dark2");

                                const rawData = data.simple;
                                rawData.nodes.forEach(function (node) {
                                    vertices.push(
                                        new Vertex()
                                            .text(node.name)
                                            .textbox_shape_colorStroke(palette(node.icon))
                                            .textbox_shape_colorFill("whitesmoke")
                                            .icon_diameter(60)
                                            .icon_shape_colorStroke("transparent")
                                            .icon_shape_colorFill("transparent")
                                            .icon_image_colorFill("#333333")
                                            .textbox_shape_colorStroke("transparent")
                                            .textbox_shape_colorFill("transparent")
                                            .textbox_text_colorFill("#333333")
                                            .iconAnchor("middle")

case AdjacencyGraph:
                                render(new AdjacencyGraph()
                                    .columns(["uid", "label", "links"])
                                    .data([
                                        [1, "AdjacencyGraph 1", [[2], [3], [4]]],
                                        [2, "AdjacencyGraph 2", []],
                                        [3, "AdjacencyGraph 3", []],
                                        [4, "AdjacencyGraph 4", []]
                                    ] as any)
                                );
                                break;
                            case Graph:
                                const graph2 = new Graph();
                                const vertices2: any[] = [];
                                const edges2: any[] = [];
                                const palette2 = Palette.ordinal("dark2");

                                const rawData2 = data.simple;
                                rawData2.nodes.forEach(function (node) {
                                    vertices2.push(
                                        new Vertex()
                                            .text(node.name)
                                            .textbox_shape_colorStroke(palette2(node.icon))
                                            .textbox_shape_colorFill("whitesmoke")
                                            .icon_diameter(30)
                                            .icon_shape_colorStroke(palette2(node.icon))
                                            .icon_shape_colorFill(palette2(node.icon))
                                            .faChar(node.icon)
                                    );
                                }, graph2);

                                rawData2.links.forEach(function (link, idx) {

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

Palette.ordinal("Pretty in Pink", ["#ffc2cd", "#ff93ac", "#ff6289", "#fc3468", "#ff084a"]);

new Column()
    .target("target")
    .columns(["Subject", "Year 1", "Year 2", "Year 3"])
    .data([
        ["Geography", 75, 68, 65],
        ["English", 45, 55, -52],
        ["Math", 98, 92, 90],
        ["Science", 66, 60, 72]
    ])
    .paletteID("Pretty in Pink")
    .render()
    ;

import { Palette } from "@hpcc-js/common";
import { Column } from "@hpcc-js/chart";
import { ChartPanel } from "@hpcc-js/layout";

Palette.ordinal("Jackie Brown", ["#BAA378", "#382E1C", "#C0A172", "#453823", "#BAA378", "#2C2416"]);

const cp = new ChartPanel()
    .widget(new Column().paletteID("Jackie Brown"))
    .target("target")
    .columns(["Subject", "Year 1", "Year 2", "Year 3"])
    .data([
        ["Geography", 75, 68, 65],
        ["English", 45, 55, -52],
        ["Math", 98, 92, 90],
        ["Science", 66, 60, 72]
    ])
    .title("Exam Results 2008->10")
    .legendVisible(true)
    .render()
    ;

function createData() {
    var vertices = [];
    var edges = [];
    var palette = Palette.ordinal("dark2");
    const rawData = {
        nodes: [
            { "name": "Myriel", "group": 1 },
            { "name": "Napoleon", "group": 1 },
            { "name": "Mlle.Baptistine", "group": 1 },
            { "name": "Mme.Magloire", "group": 1 },
            { "name": "CountessdeLo", "group": 1 },
            { "name": "Geborand", "group": 1 },
            { "name": "Champtercier", "group": 1 },
            { "name": "Cravatte", "group": 1 },
            { "name": "Count", "group": 1 },
            { "name": "OldMan", "group": 1 },
            { "name": "Labarre", "group": 2 },
            { "name": "Valjean", "group": 2 },
            { "name": "Marguerite", "group": 3 },
            { "name": "Mme.deR", "group": 2 },

import { Palette } from "@hpcc-js/common";
import { Scope, Workunit, WUDetails } from "@hpcc-js/comms";
import { MiniGantt } from "@hpcc-js/timeline";
import { hashSum } from "@hpcc-js/util";

import "../src/WUGraph.css";

export class WUTimeline extends MiniGantt {

    protected _palette = Palette.ordinal("default");

    constructor() {
        super();
        this
            .columns(["label", "start", "end", "icon", "color"])
            .titleColumn("label")
            .iconColumn("icon")
            .colorColumn("color")
            .timePattern("%Y-%m-%dT%H:%M:%S.%LZ")
            .tickFormat("%H:%M")
            .tooltipTimeFormat("%H:%M:%S.%L")
            .tooltipHTML(d => {
                return d[5].calcTooltip();
            })
            ;
    }