@hpcc-js/tree 3.2.12 → 3.2.15

package/src/Treemap.ts

@@ -1,346 +1,346 @@
-import { ITree } from "@hpcc-js/api";
-import { HTMLWidget, Palette, PropertyExt, Utility } from "@hpcc-js/common";
-import { rgb as d3rgb } from "d3-color";
-import { hierarchy as d3Hierarchy, treemap as d3Treemap, treemapBinary as d3treemapBinary, treemapDice as d3treemapDice, treemapResquarify as d3treemapResquarify, treemapSlice as d3treemapSlice, treemapSliceDice as d3treemapSliceDice, treemapSquarify as d3treemapSquarify } from "d3-hierarchy";
-
-import "../src/Treemap.css";
-
-export class TreemapColumn extends PropertyExt {
-    _owner: Treemap;
-
-    constructor() {
-        super();
-    }
-
-    owner(): Treemap;
-    owner(_: Treemap): this;
-    owner(_?: Treemap): Treemap | this {
-        if (!arguments.length) return this._owner;
-        this._owner = _;
-        return this;
-    }
-
-    valid(): boolean {
-        return !!this.column();
-    }
-
-    column: { (): string; (_: string): TreemapColumn; };
-}
-TreemapColumn.prototype._class += " tree_Dendrogram.TreemapColumn";
-
-TreemapColumn.prototype.publish("column", null, "set", "Field", function (this: TreemapColumn) { return this._owner ? this._owner.columns() : []; }, { optional: true });
-
-// ===
-export class Treemap extends HTMLWidget {
-    Column;
-    protected _d3Treemap;
-    protected _elementDIV;
-    protected _selection;
-    constructor() {
-        super();
-        ITree.call(this);
-        Utility.SimpleSelectionMixin.call(this, true);
-    }
-
-    private getTilingMethod() {
-        switch (this.tilingMethod()) {
-            case "treemapBinary":
-                return d3treemapBinary;
-            case "treemapDice":
-                return d3treemapDice;
-            case "treemapSlice":
-                return d3treemapSlice;
-            case "treemapSliceDice":
-                return d3treemapSliceDice;
-            case "treemapResquarify":
-                return d3treemapResquarify;
-            case "treemapSquarify":
-            default:
-                return d3treemapSquarify;
-        }
-    }
-
-    treemapData() {
-        if (!this.mappings().filter(mapping => mapping.valid()).length) {
-            return this.data();
-        }
-
-        const view = this._db.aggregateView(this.mappings().map(function (mapping) { return mapping.column(); }), this.aggrType(), this.aggrColumn());
-        const retVal = {
-            key: "root",
-            values: view.entries()
-        };
-        return formatData(retVal);
-
-        function formatData(node): any {
-            if (node.values instanceof Array) {
-                const children = node.values.filter(function (value) {
-                    return !(value instanceof Array);
-                }).map(function (value) {
-                    return formatData(value);
-                });
-                const retVal2: any = {
-                    label: node.key
-                };
-                if (children.length) {
-                    retVal2.children = children;
-                } else {
-                    retVal2.size = 22;
-                }
-                return retVal2;
-            }
-            return {
-                label: node.key,
-                size: node.values.aggregate,
-                origRows: node.values
-            };
-        }
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-        this._d3Treemap = d3Treemap();
-
-        this._elementDIV = element.append("div");
-        this._selection.widgetElement(this._elementDIV);
-    }
-
-    update(domNode, element) {
-        super.update(domNode, element);
-        const context = this;
-
-        this._palette = this._palette.switch(this.paletteID());
-        if (this.useClonedPalette()) {
-            this._palette = this._palette.cloneNotExists(this.paletteID() + "_" + this.id());
-        }
-
-        const root = d3Hierarchy(this.treemapData())
-            .sum(this.nodeWeight)
-            ;
-
-        this._d3Treemap
-            .size([this.width(), this.height()])
-            .paddingInner(this.paddingInner())
-            .paddingOuter(this.paddingOuter())
-            .paddingTop(this.paddingTop())
-            ;
-        if (["treemapSquarify", "treemapResquarify"].indexOf(this.tilingMethod()) !== -1) {
-            this._d3Treemap.tile(this.getTilingMethod()["ratio"](this.squarifyRatio()));
-        } else {
-            this._d3Treemap.tile(this.getTilingMethod());
-        }
-        this._d3Treemap(root);
-
-        this._elementDIV
-            .style("font-size", this.fontSize_exists() ? this.fontSize() + "px" : null)
-            .style("line-height", this.fontSize_exists() ? (this.fontSize() + 2) + "px" : null)
-            ;
-
-        const node = this._elementDIV.selectAll(".node").data(root.descendants());
-        node.enter().append("div")
-            .attr("class", "node")
-            .call(this._selection.enter.bind(this._selection))
-            .on("click", function (d) {
-                if (d) {
-                    let columnLabel = "";
-                    context.mappings().forEach(function (mapping) {
-                        if (mapping.column()) {
-                            columnLabel = mapping.column();
-                        }
-                    });
-                    if (d.origRows) {
-                        context.click(context.rowToObj(d.origRows[0]), columnLabel, context._selection.selected(this));
-                    } else {
-                        context.click(d.data, columnLabel, context._selection.selected(this));
-                    }
-                }
-            })
-            .on("dblclick", function (d) {
-                if (d) {
-                    let columnLabel = "";
-                    context.mappings().forEach(function (mapping) {
-                        if (mapping.column()) {
-                            columnLabel = mapping.column();
-                        }
-                    });
-                    if (d.origRows) {
-                        context.dblclick(context.rowToObj(d.origRows[0]), columnLabel, context._selection.selected(this));
-                    } else {
-                        context.dblclick(d.data, columnLabel, context._selection.selected(this));
-                    }
-                }
-            })
-            .merge(node)
-            .style("left", function (d) { return (d.x0 + Math.max(0, d.x1 - d.x0) / 2) + "px"; })
-            .style("top", function (d) { return (d.y0 + Math.max(0, d.y1 - d.y0) / 2) + "px"; })
-            .style("width", function () { return 0 + "px"; })
-            .style("height", function () { return 0 + "px"; })
-            .style("font-size", function (d) { return (d.children ? context.parentFontSize() : context.leafFontSize()) + "px"; })
-            .style("line-height", function (d) { return (d.children ? context.parentFontSize() : context.leafFontSize()) + "px"; })
-            .attr("title", tooltip)
-            .html(function (d) {
-                if (!context.showRoot() && d.depth === 0) {
-                    return null;
-                }
-                if (d.children) {
-                    if (context.enableParentLabels()) {
-                        return context.parentWeightHTML(d);
-                    } else {
-                        return null;
-                    }
-                } else {
-                    return context.leafWeightHTML(d);
-                }
-            })
-            .style("background", function (d) {
-                if (!context.showRoot() && d.depth === 0) {
-                    this.style.color = "transparent";
-                    return "transparent";
-                }
-                const light_dark = context.brighterLeafNodes() ? "brighter" : "darker";
-                let _color;
-                if (context.usePaletteOnParentNodes()) {
-                    _color = d.children ? context._palette(d.data.label) : d3rgb(context._palette(d.parent.data.label))[light_dark](1);
-                } else {
-                    if (d.depth > context.depthColorLimit()) {
-                        _color = d3rgb(d.parent.color)[light_dark](1);
-                    } else {
-                        _color = context._palette(d.data.label);
-                    }
-                    d.color = _color;
-                }
-                this.style.color = Palette.textColor(_color);
-                return _color;
-            })
-            .transition().duration(this.transitionDuration())
-            .style("pointer-events", function (d) { return !context.showRoot() && d.depth === 0 ? "none" : "all"; })
-            .style("opacity", function (d) { return d.children ? 1 : null; })
-            .style("left", function (d) { return d.x0 + "px"; })
-            .style("top", function (d) { return d.y0 + "px"; })
-            .style("width", function (d) { return Math.max(0, d.x1 - d.x0) + "px"; })
-            .style("height", function (d) { return Math.max(0, d.y1 - d.y0) + "px"; })
-            .each(function (d) {
-                if (d.depth === 0) {
-                    this.style.color = !context.showRoot() ? "transparent" : "";
-                    this.style.borderColor = !context.showRoot() ? "transparent" : "";
-                }
-            })
-            ;
-        node.exit().transition().duration(this.transitionDuration())
-            .style("opacity", 0)
-            .remove()
-            ;
-        function tooltip(d) {
-            if (d.children && !context.enableParentTooltips()) {
-                return null;
-            }
-            let retVal = d.data.label + " (" + d.value + ")";
-            while (d.parent && d.parent.parent) {
-                retVal = d.parent.data.label + " -> " + retVal;
-                d = d.parent;
-            }
-            return retVal;
-        }
-    }
-
-    exit(domNode, element) {
-        super.exit(domNode, element);
-    }
-
-    nodeWeight(d) {
-        return d.size || 1;
-    }
-
-    parentWeightHTML(d) {
-        return this.showParentWeight() ? `<span class="treemap-parent-label">${d.data.label}</span><span class="treemap-parent-value">${d.value}${this.weightSuffix()}</span>` : `<span class="treemap-parent-label">${d.data.label}</span>`;
-    }
-
-    leafWeightHTML(d) {
-        return this.showLeafWeight() ? `<span class="treemap-leaf-label">${d.data.label}</span><span class="treemap-leaf-value">${d.value}${this.weightSuffix()}</span>` : `<span class="treemap-leaf-label">${d.data.label}</span>`;
-    }
-}
-Treemap.prototype._class += " tree_Treemap";
-Treemap.prototype.implements(ITree.prototype);
-Treemap.prototype.mixin(Utility.SimpleSelectionMixin);
-Treemap.prototype.Column = TreemapColumn;
-
-export interface Treemap {
-    _palette;
-
-    //  ITree  ---
-    click(row, column, selected): void;
-    dblclick(row, column, selected): void;
-
-    //  Properties  ---
-    paletteID(): string;
-    paletteID(_: string): this;
-    useClonedPalette(): boolean;
-    useClonedPalette(_: boolean): this;
-    mappings(): TreemapColumn[];
-    mappings(_: TreemapColumn[]): this;
-    aggrType(): string;
-    aggrType(_: string): this;
-    aggrColumn(): string;
-    aggrColumn(_: string): this;
-    fontSize(): number;
-    fontSize(_: number): this;
-    fontSize_exists(): boolean;
-    paddingInner(): number;
-    paddingInner(_: number): this;
-    paddingOuter(): number;
-    paddingOuter(_: number): this;
-    paddingTop(): number;
-    paddingTop(_: number): this;
-    showRoot(): boolean;
-    showRoot(_: boolean): this;
-    parentFontSize(): number;
-    parentFontSize(_: number): this;
-    leafFontSize(): number;
-    leafFontSize(_: number): this;
-    usePaletteOnParentNodes(): boolean;
-    usePaletteOnParentNodes(_: boolean): this;
-    depthColorLimit(): number;
-    depthColorLimit(_: number): this;
-    squarifyRatio(): number;
-    squarifyRatio(_: number): this;
-    showParentWeight(): boolean;
-    showParentWeight(_: boolean): this;
-    showLeafWeight(): boolean;
-    showLeafWeight(_: boolean): this;
-    weightSuffix(): string;
-    weightSuffix(_: string): this;
-    brighterLeafNodes(): boolean;
-    brighterLeafNodes(_: boolean): this;
-    enableParentLabels(): boolean;
-    enableParentLabels(_: boolean): this;
-    enableParentTooltips(): boolean;
-    enableParentTooltips(_: boolean): this;
-    transitionDuration(): number[];
-    transitionDuration(_: number[]): this;
-    tilingMethod(): string;
-    tilingMethod(_: string): this;
-}
-
-Treemap.prototype.publish("paletteID", "default", "set", "Color palette for this widget", Treemap.prototype._palette.switch(), { tags: ["Basic", "Shared"] });
-Treemap.prototype.publish("useClonedPalette", false, "boolean", "Enable or disable using a cloned palette", null, { tags: ["Intermediate", "Shared"] });
-Treemap.prototype.publish("mappings", [], "propertyArray", "Source Columns", null, { autoExpand: TreemapColumn });
-Treemap.prototype.publish("aggrType", null, "set", "Aggregation Type", [null, "mean", "median", "sum", "min", "max"], { optional: true });
-Treemap.prototype.publish("aggrColumn", null, "set", "Aggregation Field", function () { return this.columns(); }, { optional: true, disable: (w) => !w.aggrType() });
-Treemap.prototype.publish("fontSize", null, "number", "Font Size", null, { optional: true });
-Treemap.prototype.publish("paddingInner", 18.6, "number", "Pixel spacing between each sibling node");
-Treemap.prototype.publish("paddingOuter", 30, "number", "Pixel padding of parent nodes");
-Treemap.prototype.publish("paddingTop", 41.4, "number", "Additional top pixel padding of parent nodes");
-Treemap.prototype.publish("showRoot", false, "boolean", "Show root element");
-Treemap.prototype.publish("parentFontSize", 18, "number", "Parent font-size");
-Treemap.prototype.publish("leafFontSize", 16, "number", "Leaf font-size");
-Treemap.prototype.publish("usePaletteOnParentNodes", false, "boolean", "Assign a color from the palette to every parent node");
-Treemap.prototype.publish("depthColorLimit", 1, "number", "Assign a color from the palette to node with depth lower than this value", null, { optional: true, disable: (w) => w.usePaletteOnParentNodes() });
-Treemap.prototype.publish("squarifyRatio", 1, "number", "Specifies the desired aspect ratio of the generated rectangles (must be >= 1)", null, { optional: true, disable: (w) => ["treemapSquarify", "treemapResquarify"].indexOf(w.tilingMethod()) === -1 });
-Treemap.prototype.publish("showParentWeight", true, "boolean", "Show weight of parent nodes");
-Treemap.prototype.publish("showLeafWeight", true, "boolean", "Show weight of leaf nodes");
-Treemap.prototype.publish("weightSuffix", "", "string", "Weight suffix (ex: 'ms')");
-Treemap.prototype.publish("brighterLeafNodes", false, "boolean", "Brighter/darker leaf node color (false = darker)");
-Treemap.prototype.publish("enableParentLabels", true, "boolean", "Enable parent labels");
-Treemap.prototype.publish("enableParentTooltips", true, "boolean", "Enable parent tooltips");
-Treemap.prototype.publish("transitionDuration", 250, "number", "Transition Duration");
-Treemap.prototype.publish("tilingMethod", "treemapSquarify", "set", "Transition Duration", ["treemapBinary", "treemapDice", "treemapResquarify", "treemapSlice", "treemapSliceDice", "treemapSquarify"]);
+import { ITree } from "@hpcc-js/api";
+import { HTMLWidget, Palette, PropertyExt, Utility } from "@hpcc-js/common";
+import { rgb as d3rgb } from "d3-color";
+import { hierarchy as d3Hierarchy, treemap as d3Treemap, treemapBinary as d3treemapBinary, treemapDice as d3treemapDice, treemapResquarify as d3treemapResquarify, treemapSlice as d3treemapSlice, treemapSliceDice as d3treemapSliceDice, treemapSquarify as d3treemapSquarify } from "d3-hierarchy";
+
+import "../src/Treemap.css";
+
+export class TreemapColumn extends PropertyExt {
+    _owner: Treemap;
+
+    constructor() {
+        super();
+    }
+
+    owner(): Treemap;
+    owner(_: Treemap): this;
+    owner(_?: Treemap): Treemap | this {
+        if (!arguments.length) return this._owner;
+        this._owner = _;
+        return this;
+    }
+
+    valid(): boolean {
+        return !!this.column();
+    }
+
+    column: { (): string; (_: string): TreemapColumn; };
+}
+TreemapColumn.prototype._class += " tree_Dendrogram.TreemapColumn";
+
+TreemapColumn.prototype.publish("column", null, "set", "Field", function (this: TreemapColumn) { return this._owner ? this._owner.columns() : []; }, { optional: true });
+
+// ===
+export class Treemap extends HTMLWidget {
+    Column;
+    protected _d3Treemap;
+    protected _elementDIV;
+    protected _selection;
+    constructor() {
+        super();
+        ITree.call(this);
+        Utility.SimpleSelectionMixin.call(this, true);
+    }
+
+    private getTilingMethod() {
+        switch (this.tilingMethod()) {
+            case "treemapBinary":
+                return d3treemapBinary;
+            case "treemapDice":
+                return d3treemapDice;
+            case "treemapSlice":
+                return d3treemapSlice;
+            case "treemapSliceDice":
+                return d3treemapSliceDice;
+            case "treemapResquarify":
+                return d3treemapResquarify;
+            case "treemapSquarify":
+            default:
+                return d3treemapSquarify;
+        }
+    }
+
+    treemapData() {
+        if (!this.mappings().filter(mapping => mapping.valid()).length) {
+            return this.data();
+        }
+
+        const view = this._db.aggregateView(this.mappings().map(function (mapping) { return mapping.column(); }), this.aggrType(), this.aggrColumn());
+        const retVal = {
+            key: "root",
+            values: view.entries()
+        };
+        return formatData(retVal);
+
+        function formatData(node): any {
+            if (node.values instanceof Array) {
+                const children = node.values.filter(function (value) {
+                    return !(value instanceof Array);
+                }).map(function (value) {
+                    return formatData(value);
+                });
+                const retVal2: any = {
+                    label: node.key
+                };
+                if (children.length) {
+                    retVal2.children = children;
+                } else {
+                    retVal2.size = 22;
+                }
+                return retVal2;
+            }
+            return {
+                label: node.key,
+                size: node.values.aggregate,
+                origRows: node.values
+            };
+        }
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+        this._d3Treemap = d3Treemap();
+
+        this._elementDIV = element.append("div");
+        this._selection.widgetElement(this._elementDIV);
+    }
+
+    update(domNode, element) {
+        super.update(domNode, element);
+        const context = this;
+
+        this._palette = this._palette.switch(this.paletteID());
+        if (this.useClonedPalette()) {
+            this._palette = this._palette.cloneNotExists(this.paletteID() + "_" + this.id());
+        }
+
+        const root = d3Hierarchy(this.treemapData())
+            .sum(this.nodeWeight)
+            ;
+
+        this._d3Treemap
+            .size([this.width(), this.height()])
+            .paddingInner(this.paddingInner())
+            .paddingOuter(this.paddingOuter())
+            .paddingTop(this.paddingTop())
+            ;
+        if (["treemapSquarify", "treemapResquarify"].indexOf(this.tilingMethod()) !== -1) {
+            this._d3Treemap.tile(this.getTilingMethod()["ratio"](this.squarifyRatio()));
+        } else {
+            this._d3Treemap.tile(this.getTilingMethod());
+        }
+        this._d3Treemap(root);
+
+        this._elementDIV
+            .style("font-size", this.fontSize_exists() ? this.fontSize() + "px" : null)
+            .style("line-height", this.fontSize_exists() ? (this.fontSize() + 2) + "px" : null)
+            ;
+
+        const node = this._elementDIV.selectAll(".node").data(root.descendants());
+        node.enter().append("div")
+            .attr("class", "node")
+            .call(this._selection.enter.bind(this._selection))
+            .on("click", function (d) {
+                if (d) {
+                    let columnLabel = "";
+                    context.mappings().forEach(function (mapping) {
+                        if (mapping.column()) {
+                            columnLabel = mapping.column();
+                        }
+                    });
+                    if (d.origRows) {
+                        context.click(context.rowToObj(d.origRows[0]), columnLabel, context._selection.selected(this));
+                    } else {
+                        context.click(d.data, columnLabel, context._selection.selected(this));
+                    }
+                }
+            })
+            .on("dblclick", function (d) {
+                if (d) {
+                    let columnLabel = "";
+                    context.mappings().forEach(function (mapping) {
+                        if (mapping.column()) {
+                            columnLabel = mapping.column();
+                        }
+                    });
+                    if (d.origRows) {
+                        context.dblclick(context.rowToObj(d.origRows[0]), columnLabel, context._selection.selected(this));
+                    } else {
+                        context.dblclick(d.data, columnLabel, context._selection.selected(this));
+                    }
+                }
+            })
+            .merge(node)
+            .style("left", function (d) { return (d.x0 + Math.max(0, d.x1 - d.x0) / 2) + "px"; })
+            .style("top", function (d) { return (d.y0 + Math.max(0, d.y1 - d.y0) / 2) + "px"; })
+            .style("width", function () { return 0 + "px"; })
+            .style("height", function () { return 0 + "px"; })
+            .style("font-size", function (d) { return (d.children ? context.parentFontSize() : context.leafFontSize()) + "px"; })
+            .style("line-height", function (d) { return (d.children ? context.parentFontSize() : context.leafFontSize()) + "px"; })
+            .attr("title", tooltip)
+            .html(function (d) {
+                if (!context.showRoot() && d.depth === 0) {
+                    return null;
+                }
+                if (d.children) {
+                    if (context.enableParentLabels()) {
+                        return context.parentWeightHTML(d);
+                    } else {
+                        return null;
+                    }
+                } else {
+                    return context.leafWeightHTML(d);
+                }
+            })
+            .style("background", function (d) {
+                if (!context.showRoot() && d.depth === 0) {
+                    this.style.color = "transparent";
+                    return "transparent";
+                }
+                const light_dark = context.brighterLeafNodes() ? "brighter" : "darker";
+                let _color;
+                if (context.usePaletteOnParentNodes()) {
+                    _color = d.children ? context._palette(d.data.label) : d3rgb(context._palette(d.parent.data.label))[light_dark](1);
+                } else {
+                    if (d.depth > context.depthColorLimit()) {
+                        _color = d3rgb(d.parent.color)[light_dark](1);
+                    } else {
+                        _color = context._palette(d.data.label);
+                    }
+                    d.color = _color;
+                }
+                this.style.color = Palette.textColor(_color);
+                return _color;
+            })
+            .transition().duration(this.transitionDuration())
+            .style("pointer-events", function (d) { return !context.showRoot() && d.depth === 0 ? "none" : "all"; })
+            .style("opacity", function (d) { return d.children ? 1 : null; })
+            .style("left", function (d) { return d.x0 + "px"; })
+            .style("top", function (d) { return d.y0 + "px"; })
+            .style("width", function (d) { return Math.max(0, d.x1 - d.x0) + "px"; })
+            .style("height", function (d) { return Math.max(0, d.y1 - d.y0) + "px"; })
+            .each(function (d) {
+                if (d.depth === 0) {
+                    this.style.color = !context.showRoot() ? "transparent" : "";
+                    this.style.borderColor = !context.showRoot() ? "transparent" : "";
+                }
+            })
+            ;
+        node.exit().transition().duration(this.transitionDuration())
+            .style("opacity", 0)
+            .remove()
+            ;
+        function tooltip(d) {
+            if (d.children && !context.enableParentTooltips()) {
+                return null;
+            }
+            let retVal = d.data.label + " (" + d.value + ")";
+            while (d.parent && d.parent.parent) {
+                retVal = d.parent.data.label + " -> " + retVal;
+                d = d.parent;
+            }
+            return retVal;
+        }
+    }
+
+    exit(domNode, element) {
+        super.exit(domNode, element);
+    }
+
+    nodeWeight(d) {
+        return d.size || 1;
+    }
+
+    parentWeightHTML(d) {
+        return this.showParentWeight() ? `<span class="treemap-parent-label">${d.data.label}</span><span class="treemap-parent-value">${d.value}${this.weightSuffix()}</span>` : `<span class="treemap-parent-label">${d.data.label}</span>`;
+    }
+
+    leafWeightHTML(d) {
+        return this.showLeafWeight() ? `<span class="treemap-leaf-label">${d.data.label}</span><span class="treemap-leaf-value">${d.value}${this.weightSuffix()}</span>` : `<span class="treemap-leaf-label">${d.data.label}</span>`;
+    }
+}
+Treemap.prototype._class += " tree_Treemap";
+Treemap.prototype.implements(ITree.prototype);
+Treemap.prototype.mixin(Utility.SimpleSelectionMixin);
+Treemap.prototype.Column = TreemapColumn;
+
+export interface Treemap {
+    _palette;
+
+    //  ITree  ---
+    click(row, column, selected): void;
+    dblclick(row, column, selected): void;
+
+    //  Properties  ---
+    paletteID(): string;
+    paletteID(_: string): this;
+    useClonedPalette(): boolean;
+    useClonedPalette(_: boolean): this;
+    mappings(): TreemapColumn[];
+    mappings(_: TreemapColumn[]): this;
+    aggrType(): string;
+    aggrType(_: string): this;
+    aggrColumn(): string;
+    aggrColumn(_: string): this;
+    fontSize(): number;
+    fontSize(_: number): this;
+    fontSize_exists(): boolean;
+    paddingInner(): number;
+    paddingInner(_: number): this;
+    paddingOuter(): number;
+    paddingOuter(_: number): this;
+    paddingTop(): number;
+    paddingTop(_: number): this;
+    showRoot(): boolean;
+    showRoot(_: boolean): this;
+    parentFontSize(): number;
+    parentFontSize(_: number): this;
+    leafFontSize(): number;
+    leafFontSize(_: number): this;
+    usePaletteOnParentNodes(): boolean;
+    usePaletteOnParentNodes(_: boolean): this;
+    depthColorLimit(): number;
+    depthColorLimit(_: number): this;
+    squarifyRatio(): number;
+    squarifyRatio(_: number): this;
+    showParentWeight(): boolean;
+    showParentWeight(_: boolean): this;
+    showLeafWeight(): boolean;
+    showLeafWeight(_: boolean): this;
+    weightSuffix(): string;
+    weightSuffix(_: string): this;
+    brighterLeafNodes(): boolean;
+    brighterLeafNodes(_: boolean): this;
+    enableParentLabels(): boolean;
+    enableParentLabels(_: boolean): this;
+    enableParentTooltips(): boolean;
+    enableParentTooltips(_: boolean): this;
+    transitionDuration(): number[];
+    transitionDuration(_: number[]): this;
+    tilingMethod(): string;
+    tilingMethod(_: string): this;
+}
+
+Treemap.prototype.publish("paletteID", "default", "set", "Color palette for this widget", Treemap.prototype._palette.switch(), { tags: ["Basic", "Shared"] });
+Treemap.prototype.publish("useClonedPalette", false, "boolean", "Enable or disable using a cloned palette", null, { tags: ["Intermediate", "Shared"] });
+Treemap.prototype.publish("mappings", [], "propertyArray", "Source Columns", null, { autoExpand: TreemapColumn });
+Treemap.prototype.publish("aggrType", null, "set", "Aggregation Type", [null, "mean", "median", "sum", "min", "max"], { optional: true });
+Treemap.prototype.publish("aggrColumn", null, "set", "Aggregation Field", function () { return this.columns(); }, { optional: true, disable: (w) => !w.aggrType() });
+Treemap.prototype.publish("fontSize", null, "number", "Font Size", null, { optional: true });
+Treemap.prototype.publish("paddingInner", 18.6, "number", "Pixel spacing between each sibling node");
+Treemap.prototype.publish("paddingOuter", 30, "number", "Pixel padding of parent nodes");
+Treemap.prototype.publish("paddingTop", 41.4, "number", "Additional top pixel padding of parent nodes");
+Treemap.prototype.publish("showRoot", false, "boolean", "Show root element");
+Treemap.prototype.publish("parentFontSize", 18, "number", "Parent font-size");
+Treemap.prototype.publish("leafFontSize", 16, "number", "Leaf font-size");
+Treemap.prototype.publish("usePaletteOnParentNodes", false, "boolean", "Assign a color from the palette to every parent node");
+Treemap.prototype.publish("depthColorLimit", 1, "number", "Assign a color from the palette to node with depth lower than this value", null, { optional: true, disable: (w) => w.usePaletteOnParentNodes() });
+Treemap.prototype.publish("squarifyRatio", 1, "number", "Specifies the desired aspect ratio of the generated rectangles (must be >= 1)", null, { optional: true, disable: (w) => ["treemapSquarify", "treemapResquarify"].indexOf(w.tilingMethod()) === -1 });
+Treemap.prototype.publish("showParentWeight", true, "boolean", "Show weight of parent nodes");
+Treemap.prototype.publish("showLeafWeight", true, "boolean", "Show weight of leaf nodes");
+Treemap.prototype.publish("weightSuffix", "", "string", "Weight suffix (ex: 'ms')");
+Treemap.prototype.publish("brighterLeafNodes", false, "boolean", "Brighter/darker leaf node color (false = darker)");
+Treemap.prototype.publish("enableParentLabels", true, "boolean", "Enable parent labels");
+Treemap.prototype.publish("enableParentTooltips", true, "boolean", "Enable parent tooltips");
+Treemap.prototype.publish("transitionDuration", 250, "number", "Transition Duration");
+Treemap.prototype.publish("tilingMethod", "treemapSquarify", "set", "Transition Duration", ["treemapBinary", "treemapDice", "treemapResquarify", "treemapSlice", "treemapSliceDice", "treemapSquarify"]);