@hpcc-js/html 3.3.12 → 3.3.15

package/src/JSXWidget.ts

@@ -1,13 +1,13 @@
-import { HTMLWidget } from "@hpcc-js/common";
-import { React } from "@hpcc-js/react";
-
-export class JSXWidget extends HTMLWidget {
-    static Component = React.Component;
-    static createElement = React.createElement;
-    protected rootNode;
-
-    jsxRender(jsx, domNode) {
-        this.rootNode = React.render(jsx, domNode, this.rootNode);
-    }
-}
-JSXWidget.prototype._class += " html_JSXWidget";
+import { HTMLWidget } from "@hpcc-js/common";
+import { React } from "@hpcc-js/react";
+
+export class JSXWidget extends HTMLWidget {
+    static Component = React.Component;
+    static createElement = React.createElement;
+    protected rootNode;
+
+    jsxRender(jsx, domNode) {
+        this.rootNode = React.render(jsx, domNode, this.rootNode);
+    }
+}
+JSXWidget.prototype._class += " html_JSXWidget";

package/src/SimpleTable.ts

@@ -1,63 +1,63 @@
-import { HTMLWidget, select as d3Select } from "@hpcc-js/common";
-
-export class SimpleTable extends HTMLWidget {
-    protected _table;
-    protected _tbody;
-    protected _thead;
-    protected _theadRow;
-    constructor() {
-        super();
-    }
-
-    protected transformData() {
-        return this.data();
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-
-        this._table = element.append("table");
-        this._thead = this._table.append("thead");
-        this._theadRow = this._thead.append("tr");
-        this._tbody = this._table.append("tbody");
-    }
-
-    update(domNode, element) {
-        super.update(domNode, element);
-        this._table
-            .style("width", this.autoWidth() ? "auto" : "100%")
-            ;
-        const theadTrSelection = this._theadRow.selectAll("th").data(this.columns());
-        theadTrSelection.enter()
-            .append("th")
-            .attr("class", (n, i) => `th-${i}`)
-            .merge(theadTrSelection)
-            .text(_d => (_d).toString())
-            ;
-        theadTrSelection.exit().remove();
-        const trSelection = this._tbody.selectAll("tr").data(this.transformData());
-        trSelection.enter()
-            .append("tr")
-            .merge(trSelection)
-            .each(function (this, d) {
-                const tr = d3Select(this);
-                const tdSelection = tr.selectAll("td").data(d);
-                tdSelection.enter()
-                    .append("td")
-                    .attr("class", (n, i) => `col-${i}`)
-                    .merge(tdSelection as any)
-                    .text(_d => (_d).toString())
-                    ;
-                tdSelection.exit().remove();
-            })
-            ;
-        trSelection.exit().remove();
-    }
-}
-SimpleTable.prototype._class += " html_SimpleTable";
-
-export interface SimpleTable {
-    autoWidth(): boolean;
-    autoWidth(_: boolean): this;
-}
-SimpleTable.prototype.publish("autoWidth", false, "boolean", "If true, table width will be set to 'auto'. If false, the width is set to '100%'");
+import { HTMLWidget, select as d3Select } from "@hpcc-js/common";
+
+export class SimpleTable extends HTMLWidget {
+    protected _table;
+    protected _tbody;
+    protected _thead;
+    protected _theadRow;
+    constructor() {
+        super();
+    }
+
+    protected transformData() {
+        return this.data();
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+
+        this._table = element.append("table");
+        this._thead = this._table.append("thead");
+        this._theadRow = this._thead.append("tr");
+        this._tbody = this._table.append("tbody");
+    }
+
+    update(domNode, element) {
+        super.update(domNode, element);
+        this._table
+            .style("width", this.autoWidth() ? "auto" : "100%")
+            ;
+        const theadTrSelection = this._theadRow.selectAll("th").data(this.columns());
+        theadTrSelection.enter()
+            .append("th")
+            .attr("class", (n, i) => `th-${i}`)
+            .merge(theadTrSelection)
+            .text(_d => (_d).toString())
+            ;
+        theadTrSelection.exit().remove();
+        const trSelection = this._tbody.selectAll("tr").data(this.transformData());
+        trSelection.enter()
+            .append("tr")
+            .merge(trSelection)
+            .each(function (this, d) {
+                const tr = d3Select(this);
+                const tdSelection = tr.selectAll("td").data(d);
+                tdSelection.enter()
+                    .append("td")
+                    .attr("class", (n, i) => `col-${i}`)
+                    .merge(tdSelection as any)
+                    .text(_d => (_d).toString())
+                    ;
+                tdSelection.exit().remove();
+            })
+            ;
+        trSelection.exit().remove();
+    }
+}
+SimpleTable.prototype._class += " html_SimpleTable";
+
+export interface SimpleTable {
+    autoWidth(): boolean;
+    autoWidth(_: boolean): this;
+}
+SimpleTable.prototype.publish("autoWidth", false, "boolean", "If true, table width will be set to 'auto'. If false, the width is set to '100%'");

package/src/StatsTable.ts

@@ -1,103 +1,103 @@
-import { format as d3Format } from "d3-format";
-import { StyledTable } from "./StyledTable.ts";
-
-export class StatsTable extends StyledTable {
-
-    protected transformData() {
-        const totalRow = [["Total", 0, 0]];
-        const data = this.data();
-        data.forEach(row => {
-            totalRow[0][1] += row[1];
-            totalRow[0][2] += row[2];
-        });
-        return data
-            .concat(totalRow)
-            .map(row => {
-                return [
-                    row[0],
-                    this.secondColumnFormat_exists() ? d3Format(this.secondColumnFormat())(row[1]) : row[1],
-                    this.thirdColumnFormat_exists() ? d3Format(this.thirdColumnFormat())(row[2]) : row[2]
-                ];
-            })
-            ;
-    }
-
-    update(domNode, element) {
-        this.tbodyColumnStyles_default([
-            {
-                "font-weight": "bold",
-                "width": this.firstColumnWidth(),
-                "text-align": "left"
-            },
-            {
-                "width": this.secondColumnWidth(),
-                "text-align": "right"
-            },
-            {
-                "width": this.thirdColumnWidth(),
-                "text-align": "right"
-            }
-        ]);
-        this.evenRowStyles_default([
-            {
-                "font-weight": "bold",
-                "width": this.firstColumnWidth(),
-                "text-align": "left",
-                "font-color": this.evenRowFontColor(),
-                "background-color": this.evenRowBackgroundColor()
-            },
-            {
-                "width": this.secondColumnWidth(),
-                "text-align": "right",
-                "font-color": this.evenRowFontColor(),
-                "background-color": this.evenRowBackgroundColor()
-            },
-            {
-                "width": this.thirdColumnWidth(),
-                "text-align": "right",
-                "font-color": this.evenRowFontColor(),
-                "background-color": this.evenRowBackgroundColor()
-            }
-        ]);
-        this.lastRowStyles_default({
-            "font-weight": "bold"
-        });
-        super.update(domNode, element);
-    }
-}
-StatsTable.prototype._class += " html_StatsTable";
-
-export interface StatsTable {
-    labelColor(): string;
-    labelColor(_: string): this;
-    primaryValueColor(): string;
-    primaryValueColor(_: string): this;
-    secondaryValueColor(): string;
-    secondaryValueColor(_: string): this;
-    evenRowFontColor(): string;
-    evenRowFontColor(_: string): this;
-    evenRowBackgroundColor(): string;
-    evenRowBackgroundColor(_: string): this;
-    firstColumnWidth(): string;
-    firstColumnWidth(_: string): this;
-    secondColumnWidth(): string;
-    secondColumnWidth(_: string): this;
-    thirdColumnWidth(): string;
-    thirdColumnWidth(_: string): this;
-    secondColumnFormat(): string;
-    secondColumnFormat(_: string): this;
-    secondColumnFormat_exists(): boolean;
-    thirdColumnFormat(): string;
-    thirdColumnFormat(_: string): this;
-    thirdColumnFormat_exists(): boolean;
-}
-StatsTable.prototype.publish("labelColor", "#333", "html-color", "Color of the text in the first column");
-StatsTable.prototype.publish("primaryValueColor", "#333", "html-color", "Color of the text in the second column");
-StatsTable.prototype.publish("secondaryValueColor", "#333", "html-color", "Color of the text in the third column");
-StatsTable.prototype.publish("evenRowBackgroundColor", "#333", "html-color", "Background color of the even rows");
-StatsTable.prototype.publish("evenRowFontColor", "#333", "html-color", "Font color of the even rows");
-StatsTable.prototype.publish("firstColumnWidth", "auto", "string", "CSS style applied as the 'width' for the first column (ex: 40px)");
-StatsTable.prototype.publish("secondColumnWidth", "1%", "string", "CSS style applied as the 'width' for the second column (ex: 40px)");
-StatsTable.prototype.publish("thirdColumnWidth", "1%", "string", "CSS style applied as the 'width' for the third column (ex: 40px)");
-StatsTable.prototype.publish("secondColumnFormat", "$,.0f", "string", "d3-format specifier applied to the second column's values", undefined, { optional: true });
-StatsTable.prototype.publish("thirdColumnFormat", null, "string", "d3-format specifier applied to the third column's values", undefined, { optional: true });
+import { format as d3Format } from "d3-format";
+import { StyledTable } from "./StyledTable.ts";
+
+export class StatsTable extends StyledTable {
+
+    protected transformData() {
+        const totalRow = [["Total", 0, 0]];
+        const data = this.data();
+        data.forEach(row => {
+            totalRow[0][1] += row[1];
+            totalRow[0][2] += row[2];
+        });
+        return data
+            .concat(totalRow)
+            .map(row => {
+                return [
+                    row[0],
+                    this.secondColumnFormat_exists() ? d3Format(this.secondColumnFormat())(row[1]) : row[1],
+                    this.thirdColumnFormat_exists() ? d3Format(this.thirdColumnFormat())(row[2]) : row[2]
+                ];
+            })
+            ;
+    }
+
+    update(domNode, element) {
+        this.tbodyColumnStyles_default([
+            {
+                "font-weight": "bold",
+                "width": this.firstColumnWidth(),
+                "text-align": "left"
+            },
+            {
+                "width": this.secondColumnWidth(),
+                "text-align": "right"
+            },
+            {
+                "width": this.thirdColumnWidth(),
+                "text-align": "right"
+            }
+        ]);
+        this.evenRowStyles_default([
+            {
+                "font-weight": "bold",
+                "width": this.firstColumnWidth(),
+                "text-align": "left",
+                "font-color": this.evenRowFontColor(),
+                "background-color": this.evenRowBackgroundColor()
+            },
+            {
+                "width": this.secondColumnWidth(),
+                "text-align": "right",
+                "font-color": this.evenRowFontColor(),
+                "background-color": this.evenRowBackgroundColor()
+            },
+            {
+                "width": this.thirdColumnWidth(),
+                "text-align": "right",
+                "font-color": this.evenRowFontColor(),
+                "background-color": this.evenRowBackgroundColor()
+            }
+        ]);
+        this.lastRowStyles_default({
+            "font-weight": "bold"
+        });
+        super.update(domNode, element);
+    }
+}
+StatsTable.prototype._class += " html_StatsTable";
+
+export interface StatsTable {
+    labelColor(): string;
+    labelColor(_: string): this;
+    primaryValueColor(): string;
+    primaryValueColor(_: string): this;
+    secondaryValueColor(): string;
+    secondaryValueColor(_: string): this;
+    evenRowFontColor(): string;
+    evenRowFontColor(_: string): this;
+    evenRowBackgroundColor(): string;
+    evenRowBackgroundColor(_: string): this;
+    firstColumnWidth(): string;
+    firstColumnWidth(_: string): this;
+    secondColumnWidth(): string;
+    secondColumnWidth(_: string): this;
+    thirdColumnWidth(): string;
+    thirdColumnWidth(_: string): this;
+    secondColumnFormat(): string;
+    secondColumnFormat(_: string): this;
+    secondColumnFormat_exists(): boolean;
+    thirdColumnFormat(): string;
+    thirdColumnFormat(_: string): this;
+    thirdColumnFormat_exists(): boolean;
+}
+StatsTable.prototype.publish("labelColor", "#333", "html-color", "Color of the text in the first column");
+StatsTable.prototype.publish("primaryValueColor", "#333", "html-color", "Color of the text in the second column");
+StatsTable.prototype.publish("secondaryValueColor", "#333", "html-color", "Color of the text in the third column");
+StatsTable.prototype.publish("evenRowBackgroundColor", "#333", "html-color", "Background color of the even rows");
+StatsTable.prototype.publish("evenRowFontColor", "#333", "html-color", "Font color of the even rows");
+StatsTable.prototype.publish("firstColumnWidth", "auto", "string", "CSS style applied as the 'width' for the first column (ex: 40px)");
+StatsTable.prototype.publish("secondColumnWidth", "1%", "string", "CSS style applied as the 'width' for the second column (ex: 40px)");
+StatsTable.prototype.publish("thirdColumnWidth", "1%", "string", "CSS style applied as the 'width' for the third column (ex: 40px)");
+StatsTable.prototype.publish("secondColumnFormat", "$,.0f", "string", "d3-format specifier applied to the second column's values", undefined, { optional: true });
+StatsTable.prototype.publish("thirdColumnFormat", null, "string", "d3-format specifier applied to the third column's values", undefined, { optional: true });

package/src/StyledTable.ts

@@ -1,68 +1,68 @@
-import { SimpleTable } from "./SimpleTable.ts";
-
-export class StyledTable extends SimpleTable {
-    constructor() {
-        super();
-    }
-
-    protected applyStyleObject(selection, styleObject) {
-        Object.keys(styleObject).forEach(styleName => {
-            selection.style(styleName, styleObject[styleName]);
-        });
-    }
-
-    update(domNode, element) {
-        super.update(domNode, element);
-
-        element.selectAll("tr,th,td")
-            .attr("style", "")
-            .style("font-family", this.fontFamily())
-            .style("color", this.fontColor())
-            ;
-
-        this.theadColumnStyles().forEach((styleObj, i) => {
-            this.applyStyleObject(element.select(`.th-${i}`), styleObj);
-        });
-        this.tbodyColumnStyles().forEach((styleObj, i) => {
-            this.applyStyleObject(element.selectAll(`.col-${i}`), styleObj);
-        });
-        const evenRowStylesExist = Object.keys(this.evenRowStyles()).length > 0;
-        const lastRowStylesExist = Object.keys(this.lastRowStyles()).length > 0;
-        const tbodyRows = element.selectAll("tbody > tr");
-        if (evenRowStylesExist) {
-            const tbodyEvenRows = tbodyRows.select(function (this: HTMLElement, d, i) { return i % 2 ? this : null; });
-            this.applyStyleObject(tbodyEvenRows, this.evenRowStyles());
-        }
-        if (lastRowStylesExist) {
-            const tbodyLastRow = tbodyRows.select(function (this: HTMLElement, d, i, arr) { return i === arr.length - 1 ? this : null; });
-            this.applyStyleObject(tbodyLastRow, this.lastRowStyles());
-        }
-    }
-}
-StyledTable.prototype._class += " html_StyledTable";
-
-export interface StyledTable {
-    fontFamily(): string;
-    fontFamily(_: string): this;
-    fontColor(): string;
-    fontColor(_: string): this;
-    tbodyColumnStyles(): Array<{ [styleID: string]: any }>;
-    tbodyColumnStyles(_: Array<{ [styleID: string]: any }>): this;
-    tbodyColumnStyles_default(_: Array<{ [styleID: string]: any }>): this;
-    theadColumnStyles(): Array<{ [styleID: string]: any }>;
-    theadColumnStyles(_: Array<{ [styleID: string]: any }>): this;
-    theadColumnStyles_default(_: Array<{ [styleID: string]: any }>): this;
-    lastRowStyles(): { [styleID: string]: any };
-    lastRowStyles(_: { [styleID: string]: any }): this;
-    lastRowStyles_default(_: { [styleID: string]: any }): this;
-    evenRowStyles(): { [styleID: string]: any };
-    evenRowStyles(_: { [styleID: string]: any }): this;
-    evenRowStyles_default(_: { [styleID: string]: any }): this;
-}
-
-StyledTable.prototype.publish("fontFamily", "Verdana", "string", "Base font-family used within the table");
-StyledTable.prototype.publish("fontColor", "#333", "string", "Base font color used within the table");
-StyledTable.prototype.publish("theadColumnStyles", [], "array", 'Array of objects containing styles for the thead columns (ex: [{"color":"red"},{"color":"blue"}])');
-StyledTable.prototype.publish("tbodyColumnStyles", [], "array", 'Array of objects containing styles for the tbody columns (ex: [{"color":"red"},{"color":"blue"}])');
-StyledTable.prototype.publish("lastRowStyles", {}, "object", 'Object containing styles for the last row (ex: {"color":"red"})');
-StyledTable.prototype.publish("evenRowStyles", {}, "object", 'Object containing styles for even rows (ex: {"background-color":"#AAA"})');
+import { SimpleTable } from "./SimpleTable.ts";
+
+export class StyledTable extends SimpleTable {
+    constructor() {
+        super();
+    }
+
+    protected applyStyleObject(selection, styleObject) {
+        Object.keys(styleObject).forEach(styleName => {
+            selection.style(styleName, styleObject[styleName]);
+        });
+    }
+
+    update(domNode, element) {
+        super.update(domNode, element);
+
+        element.selectAll("tr,th,td")
+            .attr("style", "")
+            .style("font-family", this.fontFamily())
+            .style("color", this.fontColor())
+            ;
+
+        this.theadColumnStyles().forEach((styleObj, i) => {
+            this.applyStyleObject(element.select(`.th-${i}`), styleObj);
+        });
+        this.tbodyColumnStyles().forEach((styleObj, i) => {
+            this.applyStyleObject(element.selectAll(`.col-${i}`), styleObj);
+        });
+        const evenRowStylesExist = Object.keys(this.evenRowStyles()).length > 0;
+        const lastRowStylesExist = Object.keys(this.lastRowStyles()).length > 0;
+        const tbodyRows = element.selectAll("tbody > tr");
+        if (evenRowStylesExist) {
+            const tbodyEvenRows = tbodyRows.select(function (this: HTMLElement, d, i) { return i % 2 ? this : null; });
+            this.applyStyleObject(tbodyEvenRows, this.evenRowStyles());
+        }
+        if (lastRowStylesExist) {
+            const tbodyLastRow = tbodyRows.select(function (this: HTMLElement, d, i, arr) { return i === arr.length - 1 ? this : null; });
+            this.applyStyleObject(tbodyLastRow, this.lastRowStyles());
+        }
+    }
+}
+StyledTable.prototype._class += " html_StyledTable";
+
+export interface StyledTable {
+    fontFamily(): string;
+    fontFamily(_: string): this;
+    fontColor(): string;
+    fontColor(_: string): this;
+    tbodyColumnStyles(): Array<{ [styleID: string]: any }>;
+    tbodyColumnStyles(_: Array<{ [styleID: string]: any }>): this;
+    tbodyColumnStyles_default(_: Array<{ [styleID: string]: any }>): this;
+    theadColumnStyles(): Array<{ [styleID: string]: any }>;
+    theadColumnStyles(_: Array<{ [styleID: string]: any }>): this;
+    theadColumnStyles_default(_: Array<{ [styleID: string]: any }>): this;
+    lastRowStyles(): { [styleID: string]: any };
+    lastRowStyles(_: { [styleID: string]: any }): this;
+    lastRowStyles_default(_: { [styleID: string]: any }): this;
+    evenRowStyles(): { [styleID: string]: any };
+    evenRowStyles(_: { [styleID: string]: any }): this;
+    evenRowStyles_default(_: { [styleID: string]: any }): this;
+}
+
+StyledTable.prototype.publish("fontFamily", "Verdana", "string", "Base font-family used within the table");
+StyledTable.prototype.publish("fontColor", "#333", "string", "Base font color used within the table");
+StyledTable.prototype.publish("theadColumnStyles", [], "array", 'Array of objects containing styles for the thead columns (ex: [{"color":"red"},{"color":"blue"}])');
+StyledTable.prototype.publish("tbodyColumnStyles", [], "array", 'Array of objects containing styles for the tbody columns (ex: [{"color":"red"},{"color":"blue"}])');
+StyledTable.prototype.publish("lastRowStyles", {}, "object", 'Object containing styles for the last row (ex: {"color":"red"})');
+StyledTable.prototype.publish("evenRowStyles", {}, "object", 'Object containing styles for even rows (ex: {"background-color":"#AAA"})');