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

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;

}
}
ColumnPalette.prototype._class += " dgrid_Table.ColumnPalette";

export interface ColumnPalette {
    column(): string;
    column(_: string): this;
    paletteID(): string;
    paletteID(_: string): this;
    min(): number;
    min(_: number): this;
    max(): number;
    max(_: number): this;
}
ColumnPalette.prototype.publish("column", null, "set", "Column", function (this: ColumnPalette) { return this._owner.columns(); }, { optional: true });
ColumnPalette.prototype.publish("paletteID", "default", "set", "Palette ID", Palette.rainbow("default").switch());
ColumnPalette.prototype.publish("min", 0, "number", "Min Value");
ColumnPalette.prototype.publish("max", 100, "number", "Max Value");

//  Table ---
export class Table extends Common {
    private _prevColsHash;
    private _prevFieldsHash;
    private _prevDataHash;
    _colsRefresh = false;
    _forceRefresh = false;

    constructor() {
        super();
    }

    fields(_?: any): any | this {

import { Palette } from "@hpcc-js/common";
import { Gauge } from "@hpcc-js/chart";
import { GetTargetClusterUsageEx, MachineService } from "@hpcc-js/comms";
import { FlexGrid } from "@hpcc-js/layout";
import { ColumnFormat, Table } from "@hpcc-js/dgrid";
import "dojo/i18n";
// @ts-ignore
import * as nlsHPCC from "dojo/i18n!hpcc/nls/hpcc";

Palette.rainbow("DiskUsage", ["green", "green", "green", "green", "green", "green", "green", "green", "orange", "red", "red"]);

export class Summary extends FlexGrid {

    private _connection = new MachineService({ baseUrl: "", timeoutSecs: 360 });
    private _loadingMsg;
    private _usage: { [id: string]: { details: GetTargetClusterUsageEx.TargetClusterUsage, gauge: Gauge } } = {};

    constructor() {
        super();
        this
            .itemMinHeight(100)
            .itemMinWidth(100)
            .forceYScroll(true)
            .widgetsFlexGrow([1, 1, 1])
    }

data.forEach(row => {
            const circle = new Marker(latLongFunc(row), {
                icon: this.createIcon(weightFunc(row), this._palette(weightFunc(row), extent[0], extent[1]), format),
                origRow: row
            } as any).on("click", e => this.clickHandler(e, row));
            circle.bindTooltip("Weight:  " + weightFunc(row));
            this.add(circle);
        });
    }

    //  Events  ---
    clickHandler(e, row) {
    }
}
ClusterCircles.prototype._class += " map_ClusterCircles";
ClusterCircles.prototype._palette = Palette.rainbow("default");

export interface ClusterCircles {
    paletteID(): string;
    paletteID(_: string): this;
    paletteID_exists(): boolean;
    useClonedPalette(): boolean;
    useClonedPalette(_: boolean): this;
    useClonedPalette_exists(): boolean;

    latitudeColumn(): string;
    latitudeColumn(_: string): this;
    longitudeColumn(): string;
    longitudeColumn(_: string): this;
    weightColumn(): string;
    weightColumn(_: string): this;
    weightFormat(): string;

dateColumn_exists: () => boolean;
    datePattern: { (): string; (_: string): CalendarHeatMap };
    datePattern_exists: () => boolean;
    aggrType: { (): string; (_: string): CalendarHeatMap };
    aggrType_exists: () => boolean;
    aggrColumn: { (): string; (_: string): CalendarHeatMap };
    aggrColumn_exists: () => boolean;
    aggrDeltaColumn: { (): string; (_: string): CalendarHeatMap };
    aggrDeltaColumn_exists: () => boolean;

    //  SimpleSelectionMixin
    _selection;
}
CalendarHeatMap.prototype._class += " other_CalendarHeatMap";
CalendarHeatMap.prototype.mixin(Utility.SimpleSelectionMixin);
CalendarHeatMap.prototype._palette = Palette.rainbow("default");

export interface CalendarHeatMap {
    dayStrokeColor(): string;
    dayStrokeColor(_: string): this;
    monthStrokeColor(): string;
    monthStrokeColor(_: string): this;
    dayStrokeWidth(): number;
    dayStrokeWidth(_: number): this;
    monthStrokeWidth(): number;
    monthStrokeWidth(_: number): this;
}
CalendarHeatMap.prototype.publish("paletteID", "YlOrRd", "set", "Color palette for this widget", CalendarHeatMap.prototype._palette.switch(), { tags: ["Basic", "Shared"] });
CalendarHeatMap.prototype.publish("dayStrokeColor", "#ccc", "html-color", "Color of day border");
CalendarHeatMap.prototype.publish("monthStrokeColor", "#000", "html-color", "Color of month border");
CalendarHeatMap.prototype.publish("dayStrokeWidth", 1, "number", "Pixel width of day border");
CalendarHeatMap.prototype.publish("monthStrokeWidth", 2, "number", "Pixel width of month border");

//  Events  ---
    zoomEnd(e: LeafletEvent) {
        super.zoomEnd(e);
        // this.updateHexagons();
    }

    moveEnd(e: LeafletEvent) {
        super.moveEnd(e);
        this.updateHexagons();
    }

    clickHandler(e, row) {
    }
}
Polygons.prototype._class += " map_Polygons";
Polygons.prototype._palette = Palette.rainbow("default");

export interface Polygons {
    paletteID(): string;
    paletteID(_: string): this;
    paletteID_exists(): boolean;
    useClonedPalette(): boolean;
    useClonedPalette(_: boolean): this;
    useClonedPalette_exists(): boolean;

    polygonColumn(): string;
    polygonColumn(_: string): this;
    weightColumn(): string;
    weightColumn(_: string): this;

    opacity(): number;
    opacity(_: number): this;

paletteID: { (): string; (_: string): GeoHash };
    paletteID_exists: () => boolean;
    useClonedPalette: { (): boolean; (_: boolean): GeoHash };
    useClonedPalette_exists: () => boolean;
    opacity: { (): number; (_: number): GeoHash };
    opacity_exists: () => boolean;
    meshVisible: { (): boolean; (_: boolean): GeoHash };
    meshVisible_exists: () => boolean;
    meshColor: { (): string; (_: string): GeoHash };
    meshColor_exists: () => boolean;
    meshStrokeWidth: { (): number; (_: number): GeoHash };
    meshStrokeWidth_exists: () => boolean;
}
GeoHash.prototype._class += " map_GeoHash";

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

GeoHash.prototype.publish("paletteID", "YlOrRd", "set", "Color palette for this widget", GeoHash.prototype._palette.switch(), { tags: ["Basic", "Shared"] });
GeoHash.prototype.publish("useClonedPalette", false, "boolean", "Enable or disable using a cloned palette", null, { tags: ["Intermediate", "Shared"] });

GeoHash.prototype.publish("opacity", 1.0, "number", "Opacity", null, { tags: ["Advanced"] });

GeoHash.prototype.publish("meshVisible", true, "boolean", "Mesh Visibility");
GeoHash.prototype.publish("meshColor", null, "html-color", "Stroke Color", null, { optional: true });
GeoHash.prototype.publish("meshStrokeWidth", 0.25, "number", "Stroke Width");

colorCount_exists: () => boolean;
    paletteID: { (): string; (_: string): HeatMap };
    paletteID_exists: () => boolean;
    useClonedPalette: { (): boolean; (_: boolean): HeatMap };
    useClonedPalette_exists: () => boolean;
    topLeftX: { (): number; (_: number): HeatMap };
    topLeftX_exists: () => boolean;
    topLeftY: { (): number; (_: number): HeatMap };
    topLeftY_exists: () => boolean;
    bottomRightX: { (): number; (_: number): HeatMap };
    bottomRightX_exists: () => boolean;
    bottomRightY: { (): number; (_: number): HeatMap };
    bottomRightY_exists: () => boolean;
}
HeatMap.prototype._class += " other_HeatMap";
HeatMap.prototype._palette = Palette.rainbow("default");

HeatMap.prototype.publish("radius", 15, "number", "Set point radius", null, { tags: ["Basic"] });
HeatMap.prototype.publish("blur", 15, "number", "Set point blur", null, { tags: ["Basic"] });
HeatMap.prototype.publish("max", 1, "number", "Set max data value", null, { tags: ["Basic"] });

HeatMap.prototype.publish("gradient", { 0.4: "blue", 0.6: "cyan", 0.7: "lime", 0.8: "yellow", 1.0: "red" }, "object", "Set gradient colors", null, { tags: ["Basic"] });

HeatMap.prototype.publish("usePalette", false, "boolean", "If true, uses paletteID and colorCount to determine gradient", null, { tags: ["Basic"] });

HeatMap.prototype.publish("colorCount", 10, "number", "Top left x-value", null, { tags: ["Basic"] });
HeatMap.prototype.publish("paletteID", "default", "set", "Color palette for this widget", HeatMap.prototype._palette.switch(), { tags: ["Basic"] });
HeatMap.prototype.publish("useClonedPalette", false, "boolean", "Enable or disable using a cloned palette", null, { tags: ["Intermediate", "Shared"] });

HeatMap.prototype.publish("topLeftX", null, "number", "Top left x-value", null, { tags: ["Basic"], optional: true });
HeatMap.prototype.publish("topLeftY", null, "number", "Top left y-value", null, { tags: ["Basic"], optional: true });
HeatMap.prototype.publish("bottomRightX", null, "number", "Bottom right x-value", null, { tags: ["Basic"], optional: true });

columnPalettes.forEach((columnPalette, idx) => {
        if (columnPalette.column()) {
            palettes[columns.indexOf(columnPalette.column())] = {
                palette: Palette.rainbow(columnPalette.paletteID()),
                min: columnPalette.min(),
                max: columnPalette.max()
            };
        }
    });
    return function (this: ColumnType, row: RowType, cell: any, cellElement: HTMLElement): HTMLElement | void {