@hpcc-js/html 3.3.15 → 3.3.17

package/src/BreakdownTable.ts

@@ -1,218 +1,218 @@
-import { HTMLTooltip } from "./HTMLTooltip.ts";
-import { StyledTable } from "./StyledTable.ts";
-
-export class BreakdownTable extends StyledTable {
-    // protected _table;
-    // protected _tbody;
-    protected _tooltip: HTMLTooltip;
-    constructor() {
-        super();
-    }
-
-    protected transformData() {
-        const rowCount = this.useCalculatedRowCount() ? this.calculateRowCount() : this.rowCount();
-        return this.breakdownData(rowCount);
-    }
-
-    protected breakdownData(limit: number): any[] {
-        const len = this.data().length;
-        const sum = this.data().reduce((acc, row) => acc + row[1], 0);
-        const data = [];
-        let percSum = 0;
-        this.data().sort((a, b) => a[1] > b[1] ? -1 : 1);
-        const hiddenRowCount = len - limit;
-        const showOther = hiddenRowCount > 0;
-        this.data()
-            .filter((_, i) => showOther ? i < limit - 1 : true)
-            .forEach(row => {
-                const perc = Math.round((row[1] / sum) * 100);
-                percSum += perc;
-                data.push([row[0], perc + "%"]);
-            });
-        if (showOther) {
-            const otherLabel = `${this.otherLabel()} (${len - limit + 1})`;
-            const otherPercentage = "~" + (100 - percSum) + "%";
-            data.push([otherLabel, otherPercentage]);
-        }
-        return data;
-    }
-
-    protected calculateRowCount(): number {
-        const theadRowHeight = this.columns().length > 0 ? this.thFontSize() + 5 : 0;
-        const tbodyRowHeight = this.fontSize() + 5;
-        const tbodyAvailableHeight = this.height() - theadRowHeight;
-        const rowCount = Math.floor(tbodyAvailableHeight / tbodyRowHeight);
-        return rowCount;
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-        this._tooltip = new HTMLTooltip()
-            .target(domNode)
-            ;
-        this._tooltip
-            .tooltipHTML(data => {
-                const rowCount = this.useCalculatedRowCount() ? this.calculateRowCount() : this.rowCount();
-                const rowHeight = Math.max(...data.map(row => this.textSize(row[0], this.fontFamily(), this.fontSize()).height)) ?? this.fontSize();
-                const widestLabel = Math.max(...data.map(row => this.textSize(row[0], this.fontFamily(), this.fontSize()).width));
-                const widestPerc = 30;
-                const colCount = 2;
-                const w = colCount * (widestLabel + widestPerc) + (this._tooltip.padding() * 2);
-                const h = rowHeight * Math.ceil((data.length - rowCount) / colCount) + (this._tooltip.padding() * 2);
-                this._tooltip.tooltipWidth(w);
-                this._tooltip.tooltipHeight(h);
-                const otherData = this.breakdownData(this.data().length).slice(rowCount - 1);
-                return `<div style="
-                    width: 100%;
-                    height: 100%;
-                    font-size: ${this.fontSize()}px;
-                ">${otherData.map(row =>
-                    `<div style="
-                        float:left;
-                        width:${Math.floor(99 / colCount)}%;
-                    ">${row[0]}: ${row[1]}</div>`
-                ).join("")
-                    }</div>`;
-            })
-            ;
-    }
-
-    update(domNode, element) {
-        this.theadColumnStyles_default([
-            {
-                "color": this.thFirstColor(),
-                "font-size": this.thFontSize() + "px",
-                "font-weight": this.thFontWeight(),
-                "text-align": this.labelAlignment(),
-                "width": "auto",
-                "padding": "0px"
-            },
-            {
-                "width": "1%",
-                "font-size": this.thFontSize() + "px",
-                "font-weight": this.thFontWeight(),
-                "text-align": this.percentageAlignment(),
-                "padding": "0px"
-            }
-        ]);
-        this.tbodyColumnStyles_default([
-            {
-                "color": this.topLabelColor(),
-                "font-size": this.fontSize() + "px",
-                "font-weight": "normal",
-                "text-align": this.labelAlignment(),
-                "width": "auto",
-                "padding": "0px"
-            },
-            {
-                "color": this.topPercentageColor(),
-                "font-size": this.fontSize() + "px",
-                "font-weight": "normal",
-                "text-align": this.percentageAlignment(),
-                "width": "1%",
-                "padding": "0px"
-            }
-        ]);
-        this.lastRowStyles_default([
-            {
-                "color": this.otherLabelColor(),
-                "font-size": this.fontSize() + "px",
-                "font-weight": this.otherLabelBold() ? "bold" : "normal",
-                "text-align": this.labelAlignment(),
-                "width": "auto",
-                "padding": "0px"
-            },
-            {
-                "color": this.otherLabelColor(),
-                "font-size": this.fontSize() + "px",
-                "font-weight": this.otherPercentageBold() ? "bold" : "normal",
-                "text-align": this.percentageAlignment(),
-                "width": "1%",
-                "padding": "0px"
-            }
-        ]);
-
-        super.update(domNode, element);
-
-        const rowCount = this.useCalculatedRowCount() ? this.calculateRowCount() : this.rowCount();
-        if (rowCount < this.data().length) {
-            const lastRow = element.select("tbody > tr:last-child");
-            const context = this;
-            lastRow
-                .on("mouseout.tooltip", d => {
-                    context._tooltip._triggerElement = lastRow;
-                    context._tooltip
-                        .visible(false)
-                        .render()
-                        ;
-                })
-                .on("mouseenter.tooltip", d => {
-                    context._tooltip._triggerElement = lastRow;
-                    context._tooltip
-                        .direction("n")
-                        .data(context.data())
-                        .visible(true)
-                        .render()
-                        ;
-                })
-                ;
-        }
-    }
-
-}
-BreakdownTable.prototype._class += " html_BreakdownTable";
-
-export interface BreakdownTable {
-    useCalculatedRowCount(): boolean;
-    useCalculatedRowCount(_: boolean): this;
-    rowCount(): number;
-    rowCount(_: number): this;
-    fontSize(): number;
-    fontSize(_: number): this;
-    thFirstColor(): string;
-    thFirstColor(_: string): this;
-    thLastColor(): string;
-    thLastColor(_: string): this;
-    thFontSize(): number;
-    thFontSize(_: number): this;
-    thFontWeight(): string;
-    thFontWeight(_: string): this;
-    labelAlignment(): "left" | "center" | "right";
-    labelAlignment(_: "left" | "center" | "right"): this;
-    percentageAlignment(): "left" | "center" | "right";
-    percentageAlignment(_: "left" | "center" | "right"): this;
-    topLabelColor(): string;
-    topLabelColor(_: string): this;
-    topPercentageColor(): string;
-    topPercentageColor(_: string): this;
-    topPercentageBold(): boolean;
-    topPercentageBold(_: boolean): this;
-    otherLabel(): string;
-    otherLabel(_: string): this;
-    otherLabelColor(): string;
-    otherLabelColor(_: string): this;
-    otherLabelBold(): boolean;
-    otherLabelBold(_: boolean): this;
-    otherPercentageColor(): string;
-    otherPercentageColor(_: string): this;
-    otherPercentageBold(): boolean;
-    otherPercentageBold(_: boolean): this;
-}
-
-BreakdownTable.prototype.publish("useCalculatedRowCount", true, "boolean", "If true, rowCount will be calculated and its default will be overwritten");
-BreakdownTable.prototype.publish("rowCount", 5, "number", "Number of total rows to display (including the 'other' row)", undefined, { disable: w => w.useCalculatedRowCount() });
-BreakdownTable.prototype.publish("fontSize", 14, "number", "Font size (pixels)");
-BreakdownTable.prototype.publish("labelAlignment", "left", "set", "Alignment of the label column text", ["left", "center", "right"]);
-BreakdownTable.prototype.publish("percentageAlignment", "center", "set", "Alignment of the percentage column text", ["left", "center", "right"]);
-BreakdownTable.prototype.publish("topLabelColor", "#333", "html-color", "Color of displayed 'top' labels");
-BreakdownTable.prototype.publish("topPercentageColor", "#1A99D5", "html-color", "Color of displayed 'top' percentages");
-BreakdownTable.prototype.publish("topPercentageBold", true, "html-color", "If true, the 'top' percentages will be bold");
-BreakdownTable.prototype.publish("otherLabel", "Other", "string", "Label text for the 'other' row");
-BreakdownTable.prototype.publish("otherLabelColor", "#AAA", "html-color", "Color of the 'other' label");
-BreakdownTable.prototype.publish("otherLabelBold", false, "html-color", "If true, the 'other' label will be bold");
-BreakdownTable.prototype.publish("otherPercentageColor", "#AAA", "html-color", "Color of the 'other' percentage");
-BreakdownTable.prototype.publish("otherPercentageBold", false, "html-color", "If true, the 'other' percentage will be bold");
-BreakdownTable.prototype.publish("thFontWeight", "bold", "string", "Font weight for th elements");
-BreakdownTable.prototype.publish("thFontSize", 26, "number", "Font size for th elements");
-BreakdownTable.prototype.publish("thFirstColor", "#333", "html-color", "Text color of the first th element");
-BreakdownTable.prototype.publish("thLastColor", "#333", "html-color", "Text color of the last th element");
+import { HTMLTooltip } from "./HTMLTooltip.ts";
+import { StyledTable } from "./StyledTable.ts";
+
+export class BreakdownTable extends StyledTable {
+    // protected _table;
+    // protected _tbody;
+    protected _tooltip: HTMLTooltip;
+    constructor() {
+        super();
+    }
+
+    protected transformData() {
+        const rowCount = this.useCalculatedRowCount() ? this.calculateRowCount() : this.rowCount();
+        return this.breakdownData(rowCount);
+    }
+
+    protected breakdownData(limit: number): any[] {
+        const len = this.data().length;
+        const sum = this.data().reduce((acc, row) => acc + row[1], 0);
+        const data = [];
+        let percSum = 0;
+        this.data().sort((a, b) => a[1] > b[1] ? -1 : 1);
+        const hiddenRowCount = len - limit;
+        const showOther = hiddenRowCount > 0;
+        this.data()
+            .filter((_, i) => showOther ? i < limit - 1 : true)
+            .forEach(row => {
+                const perc = Math.round((row[1] / sum) * 100);
+                percSum += perc;
+                data.push([row[0], perc + "%"]);
+            });
+        if (showOther) {
+            const otherLabel = `${this.otherLabel()} (${len - limit + 1})`;
+            const otherPercentage = "~" + (100 - percSum) + "%";
+            data.push([otherLabel, otherPercentage]);
+        }
+        return data;
+    }
+
+    protected calculateRowCount(): number {
+        const theadRowHeight = this.columns().length > 0 ? this.thFontSize() + 5 : 0;
+        const tbodyRowHeight = this.fontSize() + 5;
+        const tbodyAvailableHeight = this.height() - theadRowHeight;
+        const rowCount = Math.floor(tbodyAvailableHeight / tbodyRowHeight);
+        return rowCount;
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+        this._tooltip = new HTMLTooltip()
+            .target(domNode)
+            ;
+        this._tooltip
+            .tooltipHTML(data => {
+                const rowCount = this.useCalculatedRowCount() ? this.calculateRowCount() : this.rowCount();
+                const rowHeight = Math.max(...data.map(row => this.textSize(row[0], this.fontFamily(), this.fontSize()).height)) ?? this.fontSize();
+                const widestLabel = Math.max(...data.map(row => this.textSize(row[0], this.fontFamily(), this.fontSize()).width));
+                const widestPerc = 30;
+                const colCount = 2;
+                const w = colCount * (widestLabel + widestPerc) + (this._tooltip.padding() * 2);
+                const h = rowHeight * Math.ceil((data.length - rowCount) / colCount) + (this._tooltip.padding() * 2);
+                this._tooltip.tooltipWidth(w);
+                this._tooltip.tooltipHeight(h);
+                const otherData = this.breakdownData(this.data().length).slice(rowCount - 1);
+                return `<div style="
+                    width: 100%;
+                    height: 100%;
+                    font-size: ${this.fontSize()}px;
+                ">${otherData.map(row =>
+                    `<div style="
+                        float:left;
+                        width:${Math.floor(99 / colCount)}%;
+                    ">${row[0]}: ${row[1]}</div>`
+                ).join("")
+                    }</div>`;
+            })
+            ;
+    }
+
+    update(domNode, element) {
+        this.theadColumnStyles_default([
+            {
+                "color": this.thFirstColor(),
+                "font-size": this.thFontSize() + "px",
+                "font-weight": this.thFontWeight(),
+                "text-align": this.labelAlignment(),
+                "width": "auto",
+                "padding": "0px"
+            },
+            {
+                "width": "1%",
+                "font-size": this.thFontSize() + "px",
+                "font-weight": this.thFontWeight(),
+                "text-align": this.percentageAlignment(),
+                "padding": "0px"
+            }
+        ]);
+        this.tbodyColumnStyles_default([
+            {
+                "color": this.topLabelColor(),
+                "font-size": this.fontSize() + "px",
+                "font-weight": "normal",
+                "text-align": this.labelAlignment(),
+                "width": "auto",
+                "padding": "0px"
+            },
+            {
+                "color": this.topPercentageColor(),
+                "font-size": this.fontSize() + "px",
+                "font-weight": "normal",
+                "text-align": this.percentageAlignment(),
+                "width": "1%",
+                "padding": "0px"
+            }
+        ]);
+        this.lastRowStyles_default([
+            {
+                "color": this.otherLabelColor(),
+                "font-size": this.fontSize() + "px",
+                "font-weight": this.otherLabelBold() ? "bold" : "normal",
+                "text-align": this.labelAlignment(),
+                "width": "auto",
+                "padding": "0px"
+            },
+            {
+                "color": this.otherLabelColor(),
+                "font-size": this.fontSize() + "px",
+                "font-weight": this.otherPercentageBold() ? "bold" : "normal",
+                "text-align": this.percentageAlignment(),
+                "width": "1%",
+                "padding": "0px"
+            }
+        ]);
+
+        super.update(domNode, element);
+
+        const rowCount = this.useCalculatedRowCount() ? this.calculateRowCount() : this.rowCount();
+        if (rowCount < this.data().length) {
+            const lastRow = element.select("tbody > tr:last-child");
+            const context = this;
+            lastRow
+                .on("mouseout.tooltip", d => {
+                    context._tooltip._triggerElement = lastRow;
+                    context._tooltip
+                        .visible(false)
+                        .render()
+                        ;
+                })
+                .on("mouseenter.tooltip", d => {
+                    context._tooltip._triggerElement = lastRow;
+                    context._tooltip
+                        .direction("n")
+                        .data(context.data())
+                        .visible(true)
+                        .render()
+                        ;
+                })
+                ;
+        }
+    }
+
+}
+BreakdownTable.prototype._class += " html_BreakdownTable";
+
+export interface BreakdownTable {
+    useCalculatedRowCount(): boolean;
+    useCalculatedRowCount(_: boolean): this;
+    rowCount(): number;
+    rowCount(_: number): this;
+    fontSize(): number;
+    fontSize(_: number): this;
+    thFirstColor(): string;
+    thFirstColor(_: string): this;
+    thLastColor(): string;
+    thLastColor(_: string): this;
+    thFontSize(): number;
+    thFontSize(_: number): this;
+    thFontWeight(): string;
+    thFontWeight(_: string): this;
+    labelAlignment(): "left" | "center" | "right";
+    labelAlignment(_: "left" | "center" | "right"): this;
+    percentageAlignment(): "left" | "center" | "right";
+    percentageAlignment(_: "left" | "center" | "right"): this;
+    topLabelColor(): string;
+    topLabelColor(_: string): this;
+    topPercentageColor(): string;
+    topPercentageColor(_: string): this;
+    topPercentageBold(): boolean;
+    topPercentageBold(_: boolean): this;
+    otherLabel(): string;
+    otherLabel(_: string): this;
+    otherLabelColor(): string;
+    otherLabelColor(_: string): this;
+    otherLabelBold(): boolean;
+    otherLabelBold(_: boolean): this;
+    otherPercentageColor(): string;
+    otherPercentageColor(_: string): this;
+    otherPercentageBold(): boolean;
+    otherPercentageBold(_: boolean): this;
+}
+
+BreakdownTable.prototype.publish("useCalculatedRowCount", true, "boolean", "If true, rowCount will be calculated and its default will be overwritten");
+BreakdownTable.prototype.publish("rowCount", 5, "number", "Number of total rows to display (including the 'other' row)", undefined, { disable: w => w.useCalculatedRowCount() });
+BreakdownTable.prototype.publish("fontSize", 14, "number", "Font size (pixels)");
+BreakdownTable.prototype.publish("labelAlignment", "left", "set", "Alignment of the label column text", ["left", "center", "right"]);
+BreakdownTable.prototype.publish("percentageAlignment", "center", "set", "Alignment of the percentage column text", ["left", "center", "right"]);
+BreakdownTable.prototype.publish("topLabelColor", "#333", "html-color", "Color of displayed 'top' labels");
+BreakdownTable.prototype.publish("topPercentageColor", "#1A99D5", "html-color", "Color of displayed 'top' percentages");
+BreakdownTable.prototype.publish("topPercentageBold", true, "html-color", "If true, the 'top' percentages will be bold");
+BreakdownTable.prototype.publish("otherLabel", "Other", "string", "Label text for the 'other' row");
+BreakdownTable.prototype.publish("otherLabelColor", "#AAA", "html-color", "Color of the 'other' label");
+BreakdownTable.prototype.publish("otherLabelBold", false, "html-color", "If true, the 'other' label will be bold");
+BreakdownTable.prototype.publish("otherPercentageColor", "#AAA", "html-color", "Color of the 'other' percentage");
+BreakdownTable.prototype.publish("otherPercentageBold", false, "html-color", "If true, the 'other' percentage will be bold");
+BreakdownTable.prototype.publish("thFontWeight", "bold", "string", "Font weight for th elements");
+BreakdownTable.prototype.publish("thFontSize", 26, "number", "Font size for th elements");
+BreakdownTable.prototype.publish("thFirstColor", "#333", "html-color", "Text color of the first th element");
+BreakdownTable.prototype.publish("thLastColor", "#333", "html-color", "Text color of the last th element");