@hpcc-js/chart 2.84.0 → 2.85.0

package/dist/index.es6.js

@@ -3,8 +3,8 @@ import { publish, select, scaleTime, timeParse, timeFormat, scaleLog, format, sc
 import { normalizeRadians, degreesToRadians } from '@hpcc-js/util';
 
 var PKG_NAME = "@hpcc-js/chart";
-var PKG_VERSION = "2.84.0";
-var BUILD_VERSION = "2.106.0";
+var PKG_VERSION = "2.85.0";
+var BUILD_VERSION = "2.106.4";
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -9041,6 +9041,8 @@ Gauge.prototype.publish("tickColor", "black", "html-color", "Color of the tick")
 var css_248z$6 = ".chart_Pie path,.chart_Pie>g>text{cursor:pointer}.chart_Pie .arc path{stroke:#fff;stroke-width:.75px}.chart_Pie .arc.selected path{stroke:red;stroke-width:1.5px}.chart_Pie polyline{stroke:#000;stroke-width:2px;fill:none;opacity:.3}";
 styleInject(css_248z$6);
 
+var sortAscending = function (a, b) { return a[1] - b[1] > 0 ? 1 : -1; };
+var sortDescending = function (a, b) { return a[1] - b[1] > 0 ? -1 : 1; };
 var Pie = /** @class */ (function (_super) {
     __extends(Pie, _super);
     function Pie() {
@@ -9187,9 +9189,15 @@ var Pie = /** @class */ (function (_super) {
             .padRadius(outerRadius)
             .outerRadius(outerRadius);
         this._quadIdxArr = [[], [], [], []];
-        var data = __spreadArray([], __read(this.data()), false).sort(function (a, b) {
-            return a[1] - b[1] > 0 ? -1 : 1;
-        });
+        var data = __spreadArray([], __read(this.data()), false);
+        switch (this.sortDataByValue()) {
+            case "ascending":
+                data.sort(sortAscending);
+                break;
+            case "descending":
+                data.sort(sortDescending);
+                break;
+        }
         var arc = this._slices.selectAll(".arc").data(this.d3Pie(data), function (d) { return d.data[0]; });
         this._labelPositions = [];
         //  Enter  ---
@@ -9391,13 +9399,20 @@ var Pie = /** @class */ (function (_super) {
     };
     Pie.prototype.updateD3Pie = function () {
         var startAngle = normalizeRadians(degreesToRadians(this.startAngle()));
+        switch (this.sortDataByValue()) {
+            case "ascending":
+                this.d3Pie.sort(sortAscending);
+                break;
+            case "descending":
+                this.d3Pie.sort(sortDescending);
+                break;
+            default:
+                this.d3Pie.sort(null);
+        }
         this.d3Pie
             .padAngle(0.0025)
             .startAngle(startAngle)
             .endAngle(2 * Math.PI + startAngle)
-            .sort(function (b, a) {
-            return a[1] < b[1] ? -1 : a[1] > b[1] ? 1 : 0;
-        })
             .value(function (d) {
             return d[1];
         });
@@ -9426,6 +9441,7 @@ Pie.prototype.publish("innerRadius", 0, "number", "Sets inner pie hole radius as
 Pie.prototype.publish("minOuterRadius", 20, "number", "Minimum outer radius (pixels)");
 Pie.prototype.publish("startAngle", 0, "number", "Starting angle of the first (and largest) wedge (degrees)");
 Pie.prototype.publish("labelHeight", 12, "number", "Font size of labels (pixels)", null, { disable: function (w) { return !w.showLabels(); } });
+Pie.prototype.publish("sortDataByValue", "descending", "set", "Sort data by value", ["none", "ascending", "descending"]);
 
 var HalfPie = /** @class */ (function (_super) {
     __extends(HalfPie, _super);
@@ -9621,6 +9637,12 @@ simpleheat.prototype = {
         // draw a grayscale heatmap by putting a blurred ellipse at each data point
         for (var i = 0, len = this._data.length, p = void 0; i < len; i++) {
             p = this._data[i];
+            if (p[2] < 0) {
+                p[2] = 0;
+            }
+            else if (p[2] > this._max) {
+                p[2] = this._max;
+            }
             ctx.globalAlpha = Math.max(p[2] / this._max, minOpacity === undefined ? 0.05 : minOpacity);
             ctx.drawImage(this._ellipse, p[0] - this._r, p[1] - this._r);
         }
@@ -10645,7 +10667,7 @@ function myFormatter(format$1) {
 var StatChart = /** @class */ (function (_super) {
     __extends(StatChart, _super);
     function StatChart() {
-        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
+        var _this = _super.call(this) || this;
         _this._bellCurve = new Scatter()
             .columns(["", "Std. Dev."])
             .paletteID("Quartile")
@@ -10669,6 +10691,8 @@ var StatChart = /** @class */ (function (_super) {
             .valueFontSize(0)
             .lineColor(rainbow(90, 0, 100))
             .innerRectColor(rainbow(10, 0, 100));
+        _this
+            .columns(["Min", "25%", "50%", "75%", "Max", "Mean", "Std. Dev."]);
         return _this;
     }
     StatChart.prototype.stdDev = function (degrees) {
@@ -10678,7 +10702,7 @@ var StatChart = /** @class */ (function (_super) {
         return this._tickFormatter(this.stdDev(degrees));
     };
     StatChart.prototype.quartile = function (q) {
-        return this.data()[0][q];
+        return this.quartiles()[q];
     };
     StatChart.prototype.formatQ = function (q) {
         return this._tickFormatter(this.quartile(q));
@@ -10694,31 +10718,19 @@ var StatChart = /** @class */ (function (_super) {
                 return [this.quartile(0), this.quartile(4)];
         }
     };
-    StatChart.prototype.mean = function (_) {
-        if (!arguments.length)
-            return this._mean;
-        this._mean = _;
-        if (this.data()[0]) {
-            this.data()[0][5] = _;
-        }
-        return this;
+    StatChart.prototype.min = function () {
+        return this.quartile(0);
     };
-    StatChart.prototype.standardDeviation = function (_) {
-        if (!arguments.length)
-            return this._standardDeviation;
-        this._standardDeviation = _;
-        if (this.data()[0]) {
-            this.data()[0][6] = _;
-        }
-        return this;
+    StatChart.prototype.max = function () {
+        return this.quartile(4);
     };
-    StatChart.prototype.quartiles = function (_) {
+    StatChart.prototype.data = function (_) {
         if (!arguments.length)
-            return this._quartiles;
-        this._quartiles = _;
-        if (this.data()[0]) {
-            this.data()[0] = _.concat(this.data()[0].slice(-2));
-        }
+            return [__spreadArray(__spreadArray([], __read(this.quartiles()), false), [this.mean(), this.standardDeviation()], false)];
+        var row = _[0];
+        this.quartiles([row[0], row[1], row[2], row[3], row[4]]);
+        this.mean(row[5]);
+        this.standardDeviation(row[6]);
         return this;
     };
     StatChart.prototype.enter = function (domNode, element) {
@@ -10726,16 +10738,17 @@ var StatChart = /** @class */ (function (_super) {
         _super.prototype.enter.call(this, domNode, element);
         this._bellCurve.target(element.append("div").node());
         this._candle.target(element.append("div").node());
-        this._selectMode = element.append("div")
+        this._selectElement = element.append("div")
             .style("position", "absolute")
             .style("top", "0px")
             .style("right", "0px").append("select")
             .on("change", function () {
-            _this.render();
+            _this.view(_this._selectElement.node().value);
+            _this.lazyRender();
         });
-        this._selectMode.append("option").attr("value", "min_max").text("Min / Max");
-        this._selectMode.append("option").attr("value", "25_75").text("25% / 75%");
-        this._selectMode.append("option").attr("value", "normal").text("Normal");
+        this._selectElement.append("option").attr("value", "min_max").text("Min / Max");
+        this._selectElement.append("option").attr("value", "25_75").text("25% / 75%");
+        this._selectElement.append("option").attr("value", "normal").text("Normal");
     };
     StatChart.prototype.bellTicks = function (mode) {
         var ticks;
@@ -10770,13 +10783,13 @@ var StatChart = /** @class */ (function (_super) {
                     { label: this.formatQ(4), value: this.quartile(4) }
                 ];
         }
-        var _a = __read(this.domain(this._selectMode.node().value), 2), domainLow = _a[0], domainHigh = _a[1];
+        var _a = __read(this.domain(this._selectElement.node().value), 2), domainLow = _a[0], domainHigh = _a[1];
         return ticks
             .filter(function (sd) { return sd.value >= domainLow && sd.value <= domainHigh; })
             .map(function (sd) { return ({ label: sd.label, value: sd.value.toString() }); });
     };
     StatChart.prototype.updateScatter = function () {
-        var mode = this._selectMode.node().value;
+        var mode = this._selectElement.node().value;
         var _a = __read(this.domain(mode), 2), domainLow = _a[0], domainHigh = _a[1];
         var padding = (domainHigh - domainLow) * (this.domainPadding() / 100);
         this._bellCurve
@@ -10811,19 +10824,20 @@ var StatChart = /** @class */ (function (_super) {
     StatChart.prototype.update = function (domNode, element) {
         _super.prototype.update.call(this, domNode, element);
         this._tickFormatter = myFormatter(this.tickFormat());
-        if (this.data()[0] && this.data()[0].length === 7) {
-            this.quartiles(this.data()[0].slice(0, 5));
-            this.mean(this.data()[0][5]);
-            this.standardDeviation(this.data()[0][6]);
-        }
+        this._selectElement.node().value = this.view();
         this.updateScatter();
         this.updateCandle();
     };
     return StatChart;
 }(HTMLWidget));
+StatChart.prototype._class += " chart_Stat";
+StatChart.prototype.publish("view", "min_max", "set", "View", ["min_max", "25_75", "normal"]);
 StatChart.prototype.publish("tickFormat", ".2e", "string", "X-Axis Tick Format");
 StatChart.prototype.publish("candleHeight", 20, "number", "Height of candle widget (pixels)");
 StatChart.prototype.publish("domainPadding", 10, "number", "Domain value padding");
+StatChart.prototype.publish("mean", .5, "number", "Mean");
+StatChart.prototype.publish("standardDeviation", .125, "number", "Standard Deviation (σ)");
+StatChart.prototype.publish("quartiles", [0, .25, .5, .75, 1], "object", "Quartiles (Min, 25%, 50%, 75%, Max)");
 
 var Step = /** @class */ (function (_super) {
     __extends(Step, _super);