@hpcc-js/chart 2.81.10 → 2.83.1

package/dist/index.es6.js

@@ -3,8 +3,8 @@ import { select, scaleTime, timeParse, timeFormat, scaleLog, format, scalePow, s
 import { normalizeRadians, degreesToRadians } from '@hpcc-js/util';
 
 var PKG_NAME = "@hpcc-js/chart";
-var PKG_VERSION = "2.81.10";
-var BUILD_VERSION = "2.104.37";
+var PKG_VERSION = "2.83.1";
+var BUILD_VERSION = "2.105.2";
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -1892,7 +1892,7 @@ var Axis = /** @class */ (function (_super) {
         this.svg.style("display", this.hidden() ? "none" : null);
         var overlap = this.calcOverflow(element);
         var lowerPos = this.isHorizontal() ? overlap.left : this.height() - overlap.top - overlap.bottom;
-        var upperPos = this.isHorizontal() ? this.width() - overlap.right : 0;
+        var upperPos = this.isHorizontal() ? this.width() - overlap.right - this.padding() : 0 + this.padding();
         this.range(this.reverse() ? [upperPos, lowerPos] : [lowerPos, upperPos]);
         var context = this;
         function doPosition(element) {
@@ -2020,6 +2020,7 @@ 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: function (w) { return 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: function (w) { return 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 });
 
 var css_248z$b = ".chart_XYAxis .axis{fill:#000}.chart_XYAxis .axis,.chart_XYAxis .tick>text{font:10px sans-serif}.chart_XYAxis .focus .chart_Axis.value .tick{visibility:hidden}.chart_XYAxis .axis line,.chart_XYAxis .axis path{fill:none;stroke:#000;shape-rendering:crispEdges}.chart_XYAxis .region{opacity:.33}.chart_XYAxis .brush rect.background{z-index:-999}.chart_XYAxis .brush .selection{stroke:#4682b4;stroke-opacity:1;stroke-width:1px;fill:#4682b4;fill-opacity:.125;shape-rendering:crispEdges}.chart_XYAxis .brush path.handle--custom{fill:#eee;stroke:#666}";
 styleInject(css_248z$b);
@@ -2613,6 +2614,8 @@ 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");
 
 var css_248z$a = ".chart_Scatter .area,.chart_Scatter .line,.chart_Scatter .pointShape{pointer-events:none}.chart_Scatter .point .pointSelection{fill:none;stroke:none;pointer-events:all}.chart_Scatter .point .pointSelection.selected{fill:none;stroke:red}";
 styleInject(css_248z$a);
@@ -2932,6 +2935,7 @@ var Column = /** @class */ (function (_super) {
     function Column() {
         var _this = _super.call(this) || this;
         _this.textLocal = local();
+        _this.stackedTextLocal = local();
         INDChart.call(_this);
         ITooltip.call(_this);
         _this._selection.skipBringToTop(true);
@@ -2993,6 +2997,7 @@ var Column = /** @class */ (function (_super) {
         if (this.useClonedPalette()) {
             this._palette = this._palette.cloneNotExists(this.paletteID() + "_" + this.id());
         }
+        var formatPct = format(context.showValueAsPercentFormat());
         var dataLen = 10;
         var offset = 0;
         switch (host.xAxisType()) {
@@ -3012,30 +3017,26 @@ var Column = /** @class */ (function (_super) {
             .rangeRound(isHorizontal ? [0, dataLen] : [dataLen, 0])
             .paddingInner(this.xAxisSeriesPaddingInner())
             .paddingOuter(0);
-        var rowData = this.adjustedData(host);
         var domainSums = [];
         var seriesSums = [];
         var columnLength = this.columns().length;
-        if (this.showValue()) {
-            switch (this.showValueAsPercent()) {
-                case "series":
-                    rowData.forEach(function (row) {
-                        row.filter(function (_, idx) { return idx > 0 && idx < columnLength; }).forEach(function (col, idx) {
-                            if (seriesSums[idx + 1] === undefined) {
-                                seriesSums[idx + 1] = 0;
-                            }
-                            seriesSums[idx + 1] += col;
-                        });
-                    });
-                    break;
-                case "domain":
-                    domainSums = rowData.map(function (row) {
-                        return row.filter(function (cell, idx) { return idx > 0 && idx < columnLength; }).reduce(function (sum, cell) {
-                            return sum + cell;
-                        }, 0);
-                    });
-                    break;
-            }
+        var rowData = this.data();
+        if (this.showValue() && this.showValueAsPercent() === "series") {
+            rowData.forEach(function (row) {
+                row.filter(function (_, idx) { return idx > 0 && idx < columnLength; }).forEach(function (col, idx) {
+                    if (seriesSums[idx + 1] === undefined) {
+                        seriesSums[idx + 1] = 0;
+                    }
+                    seriesSums[idx + 1] += col;
+                });
+            });
+        }
+        if (this.showDomainTotal() || (this.showValue() && this.showValueAsPercent() === "domain")) {
+            domainSums = rowData.map(function (row) {
+                return row.filter(function (cell, idx) { return idx > 0 && idx < columnLength; }).reduce(function (sum, cell) {
+                    return sum + cell;
+                }, 0);
+            });
         }
         var column = element.selectAll(".dataRow")
             .data(this.adjustedData(host));
@@ -3097,11 +3098,11 @@ var Column = /** @class */ (function (_super) {
                     switch (context.showValueAsPercent()) {
                         case "series":
                             var seriesSum = typeof dm.sum !== "undefined" ? dm.sum : seriesSums[d.idx];
-                            valueText = format(context.showValueAsPercentFormat())(valueText / seriesSum);
+                            valueText = formatPct(valueText / seriesSum);
                             break;
                         case "domain":
-                            var domainSum = typeof dm.sum !== "undefined" ? dm.sum : domainSums[d.idx];
-                            valueText = format(context.showValueAsPercentFormat())(valueText / domainSum);
+                            var domainSum = typeof dm.sum !== "undefined" ? dm.sum : domainSums[dataRowIdx];
+                            valueText = formatPct(valueText / domainSum);
                             break;
                         case null:
                         default:
@@ -3314,7 +3315,8 @@ var Column = /** @class */ (function (_super) {
                     var textColor = isOutside ? null : context.textColor(d.row, d.column, d.value, d.origRow);
                     //  Prevent overlapping labels on stacked columns
                     var columns = context.columns();
-                    var hideValue = isOutside && context.yAxisStacked() && columns.indexOf(d.column) !== columns.length - 1;
+                    var hideValue = (context.yAxisStacked() && noRoomInside) ||
+                        (isOutside && context.yAxisStacked() && columns.indexOf(d.column) !== columns.length - 1);
                     context.textLocal.get(this)
                         .pos(pos)
                         .anchor(valueAnchor)
@@ -3334,6 +3336,55 @@ var Column = /** @class */ (function (_super) {
             columnGRect.exit().transition().duration(duration)
                 .style("opacity", 0)
                 .remove();
+            var value4pos = host.yAxisStacked() ? domainSums[dataRowIdx] : Math.max.apply(Math, dataRow.filter(function (_, idx) { return idx > 0 && idx < columnLength; }));
+            var stackedTotalText = element.selectAll(".stackedTotalText").data(context.showDomainTotal() ? [domainSums[dataRowIdx]] : []);
+            var stackedTotalTextEnter = stackedTotalText.enter().append("g")
+                .attr("class", "stackedTotalText")
+                .each(function (d) {
+                context.stackedTextLocal.set(this, new Text().target(this).colorStroke_default("transparent"));
+            });
+            stackedTotalTextEnter.merge(stackedTotalText)
+                .each(function (d) {
+                var pos = { x: 0, y: 0 };
+                var domainPos = host.dataPos(dataRow[0]);
+                var valuePos = host.valuePos(value4pos);
+                var valueFontFamily = context.valueFontFamily();
+                var valueFontSize = context.valueFontSize();
+                var textSize = context.textSize(d, valueFontFamily, valueFontSize);
+                var isPositive = parseFloat(d) >= 0;
+                var valueAnchor = "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 (d) {
+                context.textLocal.get(this).target(null);
+            })
+                .remove();
         });
         column.exit().transition().duration(duration)
             .remove();
@@ -3420,6 +3471,7 @@ Column.prototype.publish("showInnerText", false, "boolean", "Show Label in colum
 Column.prototype.publish("showValueFormat", ",", "string", "D3 Format for Value", null, { disable: function (w) { return !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: function (w) { return !w.showValue(); }, optional: true });
 Column.prototype.publish("showValueAsPercentFormat", ".0%", "string", "D3 Format for %", null, { disable: function (w) { return !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)");