@hpcc-js/chart 2.84.0 → 2.84.1

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.84.1";
+var BUILD_VERSION = "2.106.1";
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -9621,6 +9621,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 +10651,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 +10675,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 +10686,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 +10702,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 +10722,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 +10767,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 +10808,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);