@hpcc-js/chart 2.81.10 → 2.83.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hpcc-js/chart",
-    "version": "2.81.10",
+    "version": "2.83.1",
     "description": "hpcc-js - Viz Chart",
     "main": "dist/index.js",
     "module": "dist/index.es6",
@@ -78,5 +78,5 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "6a9c3dabbcea36fec7d25461ca3149c4846926da"
+    "gitHead": "fed2428e5cdf328d07d8b5521e0ab9c18e2044fb"
 }

package/src/Axis.ts

@@ -311,6 +311,7 @@ export class Axis extends SVGWidget {
                     break;
             }
         }
+
         this.d3Axis
             .scale(this.d3Scale)
             .tickFormat(this.formatter)
@@ -550,7 +551,8 @@ export class Axis extends SVGWidget {
         const overlap = this.calcOverflow(element);
 
         const lowerPos: number = this.isHorizontal() ? overlap.left : this.height() - overlap.top - overlap.bottom;
-        const upperPos: number = this.isHorizontal() ? this.width() - overlap.right : 0;
+        const upperPos: number = this.isHorizontal() ? this.width() - overlap.right - this.padding() : 0 + this.padding();
+
         this.range(this.reverse() ? [upperPos, lowerPos] : [lowerPos, upperPos]);
 
         const context = this;
@@ -703,6 +705,8 @@ export interface Axis {
     ordinalMappings(_: { [key: string]: string }): this;
     ordinalMappings(): { [key: string]: string };
     ordinalMappings_exists(): boolean;
+    padding(): number;
+    padding(_: number): this;
 }
 
 Axis.prototype.publish("title", null, "string", "Title");
@@ -726,3 +730,4 @@ Axis.prototype.publish("hidden", false, "boolean", "Hides axis when 'true'");
 Axis.prototype.publish("ordinalPaddingInner", 0.1, "number", "Determines the ratio of the range that is reserved for blank space between band (0->1)", null, { disable: (w: Axis) => w.type() !== "ordinal" });
 Axis.prototype.publish("ordinalPaddingOuter", 0.1, "number", "Determines the ratio of the range that is reserved for blank space before the first band and after the last band (0->1)", null, { disable: (w: Axis) => w.type() !== "ordinal" });
 Axis.prototype.publish("ordinalMappings", null, "object", "Alternative label mappings (icons)", null, { optional: true });
+Axis.prototype.publish("padding", 0, "number", "Padding space at top of axis (pixels)", null, { optional: true });

package/src/Column.ts

@@ -19,6 +19,7 @@ export class Column extends XYAxis {
 
     protected _linearGap: number;
     private textLocal = d3Local<Text>();
+    private stackedTextLocal = d3Local<Text>();
     private isHorizontal: boolean;
 
     constructor() {
@@ -87,6 +88,7 @@ export class Column extends XYAxis {
         if (this.useClonedPalette()) {
             this._palette = this._palette.cloneNotExists(this.paletteID() + "_" + this.id());
         }
+        const formatPct = d3Format(context.showValueAsPercentFormat());
 
         let dataLen = 10;
         let offset = 0;
@@ -111,34 +113,29 @@ export class Column extends XYAxis {
             .paddingInner(this.xAxisSeriesPaddingInner())
             .paddingOuter(0)
             ;
-        const rowData = this.adjustedData(host);
         let domainSums = [];
         const seriesSums = [];
         const columnLength = this.columns().length;
-        if (this.showValue()) {
-            switch (this.showValueAsPercent()) {
-                case "series":
-                    rowData.forEach((row) => {
-                        row.filter((_, idx) => idx > 0 && idx < columnLength).forEach((col, idx) => {
-                            if (seriesSums[idx + 1] === undefined) {
-                                seriesSums[idx + 1] = 0;
-                            }
-                            seriesSums[idx + 1] += col;
-                        });
+        const rowData = this.data();
+        if (this.showValue() && this.showValueAsPercent() === "series") {
+            rowData.forEach((row) => {
+                row.filter((_, idx) => idx > 0 && idx < columnLength).forEach((col, idx) => {
+                    if (seriesSums[idx + 1] === undefined) {
+                        seriesSums[idx + 1] = 0;
+                    }
+                    seriesSums[idx + 1] += col;
+                });
+            });
+        }
 
-                    });
-                    break;
-                case "domain":
-                    domainSums = rowData.map(row => {
-                        return row.filter((cell, idx) => idx > 0 && idx < columnLength).reduce((sum, cell) => {
-                            return sum + cell;
-                        }, 0);
-                    });
-                    break;
-                case null:
-                default:
-            }
+        if (this.showDomainTotal() || (this.showValue() && this.showValueAsPercent() === "domain")) {
+            domainSums = rowData.map(row => {
+                return row.filter((cell, idx) => idx > 0 && idx < columnLength).reduce((sum, cell) => {
+                    return sum + cell;
+                }, 0);
+            });
         }
+
         const column = element.selectAll(".dataRow")
             .data(this.adjustedData(host))
             ;
@@ -206,11 +203,11 @@ export class Column extends XYAxis {
                         switch (context.showValueAsPercent()) {
                             case "series":
                                 const seriesSum = typeof dm.sum !== "undefined" ? dm.sum : seriesSums[d.idx];
-                                valueText = d3Format(context.showValueAsPercentFormat())(valueText / seriesSum);
+                                valueText = formatPct(valueText / seriesSum);
                                 break;
                             case "domain":
-                                const domainSum = typeof dm.sum !== "undefined" ? dm.sum : domainSums[d.idx];
-                                valueText = d3Format(context.showValueAsPercentFormat())(valueText / domainSum);
+                                const domainSum = typeof dm.sum !== "undefined" ? dm.sum : domainSums[dataRowIdx];
+                                valueText = formatPct(valueText / domainSum);
                                 break;
                             case null:
                             default:
@@ -395,7 +392,6 @@ export class Column extends XYAxis {
                                         pos.y = dataRect.y + (dataRect.height / 2);
                                     }
                                 } else { // Bar
-
                                     noRoomInside = dataRect.width < textSize.width;
                                     isOutside = !context.valueCentered() || noRoomInside;
 
@@ -436,7 +432,8 @@ export class Column extends XYAxis {
 
                             //  Prevent overlapping labels on stacked columns
                             const columns = context.columns();
-                            const hideValue = isOutside && context.yAxisStacked() && columns.indexOf(d.column) !== columns.length - 1;
+                            const hideValue = (context.yAxisStacked() && noRoomInside) ||
+                                (isOutside && context.yAxisStacked() && columns.indexOf(d.column) !== columns.length - 1);
                             context.textLocal.get(this)
                                 .pos(pos)
                                 .anchor(valueAnchor)
@@ -460,6 +457,59 @@ export class Column extends XYAxis {
                     .style("opacity", 0)
                     .remove()
                     ;
+
+                const value4pos = host.yAxisStacked() ? domainSums[dataRowIdx] : Math.max(...dataRow.filter((_, idx) => idx > 0 && idx < columnLength));
+                const stackedTotalText = element.selectAll(".stackedTotalText").data(context.showDomainTotal() ? [domainSums[dataRowIdx]] : []);
+                const stackedTotalTextEnter = stackedTotalText.enter().append("g")
+                    .attr("class", "stackedTotalText")
+                    .each(function (this: SVGElement, d) {
+                        context.stackedTextLocal.set(this, new Text().target(this).colorStroke_default("transparent"));
+                    });
+                stackedTotalTextEnter.merge(stackedTotalText as any)
+                    .each(function (this: SVGElement, d: any) {
+                        const pos = { x: 0, y: 0 };
+                        const domainPos = host.dataPos(dataRow[0]);
+                        const valuePos = host.valuePos(value4pos);
+
+                        const valueFontFamily = context.valueFontFamily();
+                        const valueFontSize = context.valueFontSize();
+                        const textSize = context.textSize(d, valueFontFamily, valueFontSize);
+
+                        const isPositive = parseFloat(d) >= 0;
+                        let valueAnchor: "start" | "middle" | "end" = "middle";
+                        if (isHorizontal) {
+                            pos.x = domainPos;
+                            if (isPositive) {
+                                pos.y = valuePos - textSize.height / 2;
+                            } else {
+                                pos.y = valuePos + textSize.height / 2;
+                            }
+                        } else {
+                            valueAnchor = "start";
+                            pos.y = domainPos;
+                            if (isPositive) {
+                                pos.x = valuePos + textSize.width / 2;
+                            } else {
+                                pos.x = valuePos - textSize.width / 2;
+                            }
+                        }
+
+                        context.stackedTextLocal.get(this)
+                            .pos(pos)
+                            .anchor(valueAnchor)
+                            .fontFamily(valueFontFamily)
+                            .fontSize(valueFontSize)
+                            .text(d)
+                            .render()
+                            ;
+
+                    });
+                stackedTotalText.exit()
+                    .each(function (this: SVGElement, d) {
+                        context.textLocal.get(this).target(null);
+                    })
+                    .remove()
+                    ;
             });
         column.exit().transition().duration(duration)
             .remove()
@@ -554,6 +604,8 @@ export interface Column {
     showValueAsPercent(_: null | "series" | "domain"): this;
     showValueAsPercentFormat(): string;
     showValueAsPercentFormat(_: string): this;
+    showDomainTotal(): boolean;
+    showDomainTotal(_: boolean): this;
     valueCentered(): boolean;
     valueCentered(_: boolean): this;
     valueAnchor(): "start" | "middle" | "end";
@@ -589,6 +641,7 @@ Column.prototype.publish("showInnerText", false, "boolean", "Show Label in colum
 Column.prototype.publish("showValueFormat", ",", "string", "D3 Format for Value", null, { disable: (w: Column) => !w.showValue() || !!w.showValueAsPercent() });
 Column.prototype.publish("showValueAsPercent", null, "set", "If showValue is true, optionally show value as a percentage by Series or Domain", [null, "series", "domain"], { disable: w => !w.showValue(), optional: true });
 Column.prototype.publish("showValueAsPercentFormat", ".0%", "string", "D3 Format for %", null, { disable: (w: Column) => !w.showValue() || !w.showValueAsPercent() });
+Column.prototype.publish("showDomainTotal", false, "boolean", "Show Total Value for Stacked Columns", null);
 Column.prototype.publish("valueCentered", false, "boolean", "Show Value in center of column");
 Column.prototype.publish("valueAnchor", "middle", "set", "text-anchor for shown value text", ["start", "middle", "end"]);
 Column.prototype.publish("xAxisSeriesPaddingInner", 0, "number", "Determines the ratio of the range that is reserved for blank space between band (0->1)");

package/src/XYAxis.ts

@@ -750,6 +750,10 @@ export interface XYAxis {
     regions(_: object[]): this;
     layers(): XYAxis[];
     layers(_: XYAxis[]): this;
+    xAxisPadding(): number;
+    xAxisPadding(_: number): this;
+    yAxisPadding(): number;
+    yAxisPadding(_: number): this;
 }
 
 XYAxis.prototype.publish("orientation", "horizontal", "set", "Selects orientation for the axis", ["horizontal", "vertical"]);
@@ -795,3 +799,5 @@ XYAxis.prototype.publish("yAxisGuideLines", true, "boolean", "Y-Axis Guide Lines
 XYAxis.prototype.publishProxy("yAxisHidden", "valueAxis", "hidden");
 XYAxis.prototype.publish("regions", [], "array", "Regions");
 XYAxis.prototype.publish("layers", [], "widgetArray", "Layers", null, { render: false });
+XYAxis.prototype.publishProxy("xAxisPadding", "domainAxis", "padding");
+XYAxis.prototype.publishProxy("yAxisPadding", "valueAxis", "padding");

package/src/__package__.ts

@@ -1,3 +1,3 @@
 export const PKG_NAME = "@hpcc-js/chart";
-export const PKG_VERSION = "2.81.10";
-export const BUILD_VERSION = "2.104.37";
+export const PKG_VERSION = "2.83.1";
+export const BUILD_VERSION = "2.105.2";