@d3plus/core 3.0.0-alpha.1 → 3.0.0-alpha.3

package/es/src/charts/AreaPlot.js

@@ -69,7 +69,6 @@ var AreaPlot = /*#__PURE__*/ function(Plot) {
         _this._baseline = 0;
         _this._discrete = "x";
         _this._shape = constant("Area");
-        _this.x("x");
         return _this;
     }
     return AreaPlot;

package/es/src/charts/BarChart.js

@@ -76,7 +76,6 @@ var BarChart = /*#__PURE__*/ function(Plot) {
             return defaultLegend.bind(_this)(config, arr);
         };
         _this._shape = constant("Bar");
-        _this.x("x");
         return _this;
     }
     return BarChart;

package/es/src/charts/BoxWhisker.js

@@ -69,7 +69,6 @@ var BoxWhisker = /*#__PURE__*/ function(Plot) {
         _this = _call_super(this, BoxWhisker);
         _this._discrete = "x";
         _this._shape = constant("Box");
-        _this.x("x");
         _this._tooltipConfig = assign(_this._tooltipConfig, {
             title: function(d, i) {
                 if (!d) return "";

package/es/src/charts/BumpChart.js

@@ -75,7 +75,6 @@ var BumpChart = /*#__PURE__*/ function(Plot) {
         _this = _call_super(this, BumpChart);
         _this._discrete = "x";
         _this._shape = constant("Line");
-        _this.x("x");
         _this.y2(function(d) {
             return _this._y(d);
         });
@@ -123,7 +122,6 @@ var BumpChart = /*#__PURE__*/ function(Plot) {
 new d3plus.Plot()
   .discrete("x")
   .shape("Line")
-  .x("x")
   .y2(d => this._y(d))
   .yConfig({
     tickFormat: val => {

package/es/src/charts/LinePlot.js

@@ -68,7 +68,6 @@ var LinePlot = /*#__PURE__*/ function(Plot) {
         _this = _call_super(this, LinePlot);
         _this._discrete = "x";
         _this._shape = constant("Line");
-        _this.x("x");
         return _this;
     }
     return LinePlot;

package/es/src/charts/Pack.js

@@ -173,10 +173,11 @@ var Pack = /*#__PURE__*/ function(Viz) {
         var defaultMouseMoveShape = _this._on["mousemove.shape"];
         _this._on["mousemove.shape"] = function(d, i, x, event) {
             if (d.__d3plusTooltip__) defaultMouseMoveShape(d, i, x, event);
+            var hoverData = recursionCircles(d, [
+                d
+            ]);
             _this.hover(function(h) {
-                return recursionCircles(d, [
-                    d
-                ]).includes(h);
+                return hoverData.includes(h);
             });
         };
         _this._pack = pack();
@@ -224,13 +225,13 @@ var Pack = /*#__PURE__*/ function(Viz) {
                     values: nestedData
                 }, function(d) {
                     return d.values;
-                }).sum(this._sum).sort(this._sort)).descendants();
-                packData.forEach(function(d, i) {
+                }).sum(this._sum).sort(this._sort)).descendants().filter(function(d, i) {
                     d.__d3plus__ = true;
                     d.i = i;
-                    d.id = d.parent ? d.parent.data.key : null;
+                    d.id = d.parent ? d.parent.data.key : "root";
                     d.data.__d3plusOpacity__ = d.height ? _this._packOpacity(d.data, i) : 1;
                     d.data.__d3plusTooltip__ = !d.height ? true : false;
+                    return !d.children || d.children.length > 1;
                 });
                 this._shapes.push(new Circle().data(packData).select(elem("g.d3plus-Pack", {
                     parent: this._select,

package/es/src/charts/Plot.js

@@ -461,6 +461,7 @@ var Plot = /*#__PURE__*/ function(Viz) {
         });
         _this._x = accessor("x");
         _this._xAxis = new AxisBottom().align("end");
+        _this._xKey = "x";
         _this._xTest = new AxisBottom().align("end").gridSize(0);
         _this._xConfig = {
             gridConfig: {
@@ -481,6 +482,7 @@ var Plot = /*#__PURE__*/ function(Viz) {
         };
         _this._y = accessor("y");
         _this._yAxis = new AxisLeft().align("start");
+        _this._yKey = "y";
         _this._yTest = new AxisLeft().align("start").gridSize(0);
         _this._yConfig = {
             gridConfig: {
@@ -904,15 +906,15 @@ var Plot = /*#__PURE__*/ function(Viz) {
                 var defaultY2Config = y2Exists ? {
                     data: y2Data
                 } : defaultConfig;
-                var showX = this._discrete === "x" && this._width > this._discreteCutoff || this._width > this._xCutoff;
-                var showY = this._discrete === "y" && this._height > this._discreteCutoff || this._height > this._yCutoff;
+                var showX = this._discrete === "x" ? this._width > this._discreteCutoff && this._width > this._xCutoff : this._width > this._xCutoff;
+                var showY = this._discrete === "y" ? this._height > this._discreteCutoff && this._height > this._yCutoff : this._height > this._yCutoff;
                 var yC = {
                     data: yData,
                     locale: this._locale,
                     rounding: this._yDomain ? "none" : "outside",
                     scalePadding: y.padding ? y.padding() : 0
                 };
-                if (!showX) {
+                if (!showX && showY) {
                     yC.barConfig = {
                         stroke: "transparent"
                     };
@@ -1002,7 +1004,7 @@ var Plot = /*#__PURE__*/ function(Viz) {
                     rounding: this._xDomain ? "none" : "outside",
                     scalePadding: x.padding ? x.padding() : 0
                 };
-                if (!showY) {
+                if (!showY && showX) {
                     xC.barConfig = {
                         stroke: "transparent"
                     };
@@ -1023,7 +1025,7 @@ var Plot = /*#__PURE__*/ function(Viz) {
                             padding: 0,
                             rotate: 0,
                             textAnchor: function(d) {
-                                return d.id === xTicks[0] ? "start" : "end";
+                                return xTicks && d.id === xTicks[0] ? "start" : "end";
                             }
                         },
                         labelRotation: false
@@ -1223,14 +1225,15 @@ var Plot = /*#__PURE__*/ function(Viz) {
                 });
                 var transform = "translate(".concat(this._margin.left, ", ").concat(this._margin.top + x2Height + topOffset, ")");
                 var x2Transform = "translate(".concat(this._margin.left, ", ").concat(this._margin.top + topOffset, ")");
-                var xGroup = showX && elem("g.d3plus-plot-x-axis", {
+                var xGroup = elem("g.d3plus-plot-x-axis", {
                     parent: parent,
                     transition: transition,
                     enter: {
                         transform: transform
                     },
                     update: {
-                        transform: transform
+                        transform: transform,
+                        opacity: showX ? 1 : 0
                     }
                 });
                 var x2Group = x2Exists && elem("g.d3plus-plot-x2-axis", {
@@ -1245,14 +1248,15 @@ var Plot = /*#__PURE__*/ function(Viz) {
                 });
                 var xTrans = xOffsetLeft > yWidth ? xOffsetLeft - yWidth : 0;
                 var yTransform = "translate(".concat(this._margin.left + xTrans, ", ").concat(this._margin.top + topOffset, ")");
-                var yGroup = showY && elem("g.d3plus-plot-y-axis", {
+                var yGroup = elem("g.d3plus-plot-y-axis", {
                     parent: parent,
                     transition: transition,
                     enter: {
                         transform: yTransform
                     },
                     update: {
-                        transform: yTransform
+                        transform: yTransform,
+                        opacity: showY ? 1 : 0
                     }
                 });
                 var y2Transform = "translate(-".concat(this._margin.right, ", ").concat(this._margin.top + topOffset, ")");
@@ -1266,7 +1270,7 @@ var Plot = /*#__PURE__*/ function(Viz) {
                         transform: y2Transform
                     }
                 });
-                this._xAxis.domain(xDomain).height(height - (x2Height + topOffset + verticalMargin)).maxSize(height / 2).range(xRange).select(showX ? xGroup.node() : undefined).ticks(xTicks).width(width).config(xC).config(this._xConfig).scale(xConfigScale).render();
+                this._xAxis.domain(xDomain).height(height - (x2Height + topOffset + verticalMargin)).maxSize(height / 2).range(xRange).select(xGroup.node()).ticks(xTicks).width(width).config(xC).config(this._xConfig).scale(xConfigScale).render();
                 if (x2Exists) {
                     this._x2Axis.domain(x2Domain).height(height - (xHeight + topOffset + verticalMargin)).range(xRange).select(x2Group.node()).ticks(x2Ticks).width(width).config(xC).config(defaultX2Config).config(this._x2Config).scale(x2ConfigScale).render();
                 }
@@ -1283,7 +1287,7 @@ var Plot = /*#__PURE__*/ function(Viz) {
                     this._xAxis.outerBounds().y + x2Height,
                     height - (xHeight + topOffset + verticalMargin)
                 ];
-                this._yAxis.domain(yDomain).height(height).maxSize(width / 2).range(yRange).select(showY ? yGroup.node() : undefined).ticks(yTicks).width(xRange[xRange.length - 1]).config(yC).config(this._yConfig).scale(yConfigScale).render();
+                this._yAxis.domain(yDomain).height(height).maxSize(width / 2).range(yRange).select(yGroup.node()).ticks(yTicks).width(xRange[xRange.length - 1]).config(yC).config(this._yConfig).scale(yConfigScale).render();
                 if (y2Exists) {
                     this._y2Axis.config(yC).domain(y2Exists ? y2Domain : yDomain).gridSize(0).height(height).range(yRange).select(y2Group.node()).width(width - max([
                         0,
@@ -1336,6 +1340,8 @@ var Plot = /*#__PURE__*/ function(Viz) {
                         return _this._yAxis._getPosition.bind(_this._yAxis)(d) - x2Height;
                     }
                 };
+                var yOffset = this._xAxis.barConfig()["stroke-width"];
+                if (yOffset) yOffset /= 2;
                 new shapes.Rect().data([
                     {}
                 ]).select(rectGroup.node()).x(xRange[0] + (xRange[1] - xRange[0]) / 2).width(xRange[1] - xRange[0]).y(this._margin.top + topOffset + yRange[0] + (yRange[1] - yRange[0]) / 2).height(yRange[1] - yRange[0]).config(this._backgroundConfig).render();
@@ -1445,8 +1451,6 @@ var Plot = /*#__PURE__*/ function(Viz) {
                     });
                     _this._previousAnnotations[layer] = annotationShapes;
                 });
-                var yOffset = this._xAxis.barConfig()["stroke-width"];
-                if (yOffset) yOffset /= 2;
                 var discrete1 = this._discrete || "x";
                 var shapeConfig = {
                     discrete: this._discrete,
@@ -1789,17 +1793,6 @@ Additionally, each config object can also contain an optional "layer" key, which
         {
             /**
       @memberof Plot
-      @desc Sets the discrete axis to the specified string. If *value* is not specified, returns the current discrete axis.
-      @param {String} *value*
-      @chainable
-  */ key: "discrete",
-            value: function discrete(_) {
-                return arguments.length ? (this._discrete = _, this) : this._discrete;
-            }
-        },
-        {
-            /**
-      @memberof Plot
       @desc When the width or height of the chart is less than or equal to this pixel value, the discrete axis will not be shown. This helps produce slick sparklines. Set this value to `0` to disable the behavior entirely.
       @param {Number} *value*
       @chainable
@@ -1969,8 +1962,8 @@ Additionally, each config object can also contain an optional "layer" key, which
         {
             /**
       @memberof Plot
-      @desc Sets the x accessor to the specified function or number. If *value* is not specified, returns the current x accessor.
-      @param {Function|Number} *value*
+      @desc Sets the x accessor to the specified accessor Function or String representing which key in the data to reference. If *value* is not specified, returns the current x accessor.
+      @param {Function|String} *value*
       @chainable
   */ key: "x",
             value: function x(_) {
@@ -1987,8 +1980,8 @@ Additionally, each config object can also contain an optional "layer" key, which
         {
             /**
        @memberof Plot
-       @desc Sets the x2 accessor to the specified function or number. If *value* is not specified, returns the current x2 accessor.
-       @param {Function|Number} *value*
+       @desc Sets the x2 accessor to the specified accessor Function or String representing which key in the data to reference. If *value* is not specified, returns the current x2 accessor.
+       @param {Function|String} *value*
        @chainable
    */ key: "x2",
             value: function x2(_) {
@@ -2082,8 +2075,8 @@ Additionally, each config object can also contain an optional "layer" key, which
         {
             /**
       @memberof Plot
-      @desc Sets the y accessor to the specified function or number. If *value* is not specified, returns the current y accessor.
-      @param {Function|Number} *value*
+      @desc Sets the y accessor to the specified accessor Function or String representing which key in the data to reference. If *value* is not specified, returns the current y accessor.
+      @param {Function|String} *value*
       @chainable
   */ key: "y",
             value: function y(_) {
@@ -2100,8 +2093,8 @@ Additionally, each config object can also contain an optional "layer" key, which
         {
             /**
        @memberof Plot
-       @desc Sets the y2 accessor to the specified function or number. If *value* is not specified, returns the current y2 accessor.
-       @param {Function|Number} *value*
+       @desc Sets the y2 accessor to the specified accessor Function or String representing which key in the data to reference. If *value* is not specified, returns the current y2 accessor.
+       @param {Function|String} *value*
        @chainable
    */ key: "y2",
             value: function y2(_) {

package/es/src/charts/Viz.js

@@ -223,11 +223,13 @@ import mousemoveShape from "./events/mousemove.shape.js";
 import touchstartBody from "./events/touchstart.body.js";
 /**
  * Default padding logic that will return false if the screen is less than 600 pixels wide.
+ * @private
  */ function defaultPadding() {
     return typeof window !== "undefined" ? window.innerWidth > 600 : true;
 }
 /**
  * Turns an array of values into a list string.
+ * @private
  */ function listify(n) {
     return n.reduce(function(str, item, i) {
         if (!i) str += item;
@@ -707,6 +709,7 @@ var Viz = /*#__PURE__*/ function(BaseClass) {
             /**
    * Applies the threshold algorithm according to the type of chart used.
    * @param {Array} data The data to process.
+   * @private
    */ key: "_thresholdFunction",
             value: function _thresholdFunction(data) {
                 return data;

package/es/src/components/Tooltip.js

@@ -80,7 +80,7 @@ import { accessor, BaseClass, constant } from "../utils/index.js";
 /**
  * Creates a reference element for popper.
  * @param {Number[]} position
- * @prrivate
+ * @private
  */ function generateReference() {
     var position = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [
         0,

package/es/src/shapes/Shape.js

@@ -91,6 +91,21 @@ import { pointDistance } from "@d3plus/math";
 import { strip } from "@d3plus/text";
 import { TextBox } from "../components/index.js";
 import { accessor, BaseClass, configPrep, constant } from "../utils/index.js";
+/**
+ * @param {*} nodeList 
+ * @param {*} classNames  
+ * @private
+ */ function findLastIndexWithClass(nodeList, classNames) {
+    for(var x = 0; x < classNames.length; x++){
+        var className = classNames[x];
+        for(var i = nodeList.length - 1; i >= 0; i--){
+            if (nodeList[i].classList.contains(className)) {
+                return i; // Return the index if found
+            }
+        }
+    }
+    return 0; // Return -1 if no element is found with the class
+}
 import Image from "./Image.js";
 var Shape = /*#__PURE__*/ function(BaseClass) {
     "use strict";
@@ -405,16 +420,28 @@ var Shape = /*#__PURE__*/ function(BaseClass) {
                 this._group.selectAll("g.d3plus-".concat(this._name, "-shape, g.d3plus-").concat(this._name, "-image, g.d3plus-").concat(this._name, "-text, g.d3plus-").concat(this._name, "-hover")).selectAll(".d3plus-Shape, .d3plus-Image, .d3plus-textBox").each(function(d, i) {
                     if (!d) d = {};
                     if (!d.parentNode) d.parentNode = this.parentNode;
+                    if (!d.dataIndex) d.dataIndex = i;
+                    var dataIndex = d.dataIndex;
                     var parent = d.parentNode;
-                    if (select(this).classed("d3plus-textBox")) d = d.data;
+                    var d3plusType = select(this).classed("d3plus-textBox") ? "textBox" : select(this).classed("d3plus-Image") ? "Image" : "Shape";
+                    if (d3plusType === "textBox") d = d.data;
                     if (d.__d3plusShape__ || d.__d3plus__) {
                         while(d && (d.__d3plusShape__ || d.__d3plus__)){
                             i = d.i;
                             d = d.data;
                         }
                     } else i = that._data.indexOf(d);
-                    var group = !that._hover || typeof that._hover !== "function" || !that._hover(d, i) ? parent : that._hoverGroup.node();
-                    if (group !== this.parentNode) group.appendChild(this);
+                    var notHovering = !that._hover || typeof that._hover !== "function" || !that._hover(d, i);
+                    var group = notHovering ? parent : that._hoverGroup.node();
+                    if (group !== this.parentNode) {
+                        var offset = d3plusType === "textBox" ? findLastIndexWithClass(group.childNodes, [
+                            "d3plus-Image",
+                            "d3plus-Shape"
+                        ]) : d3plusType === "Image" ? findLastIndexWithClass(group.childNodes, [
+                            "d3plus-Shape"
+                        ]) : 0;
+                        group.insertBefore(this, group.childNodes[offset + dataIndex]);
+                    }
                     if (this.className.baseVal.includes("d3plus-Shape")) {
                         if (parent === group) select(this).call(that._applyStyle.bind(that));
                         else select(this).call(that._updateStyle.bind(that, select(this), that._hoverStyle));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@d3plus/core",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.3",
   "description": "Data visualization made easy. A javascript library that extends the popular D3.js to enable fast and beautiful visualizations.",
   "license": "MIT",
   "type": "module",
@@ -34,13 +34,13 @@
     "test": "eslint index.js src/**/*.js && eslint --global=it test && mocha 'test/**/*-test.js'"
   },
   "dependencies": {
-    "@d3plus/color": "3.0.0-alpha.1",
-    "@d3plus/data": "3.0.0-alpha.1",
-    "@d3plus/dom": "3.0.0-alpha.1",
-    "@d3plus/format": "3.0.0-alpha.1",
-    "@d3plus/locales": "3.0.0-alpha.1",
-    "@d3plus/math": "3.0.0-alpha.1",
-    "@d3plus/text": "3.0.0-alpha.1",
+    "@d3plus/color": "3.0.0-alpha.3",
+    "@d3plus/data": "3.0.0-alpha.3",
+    "@d3plus/dom": "3.0.0-alpha.3",
+    "@d3plus/format": "3.0.0-alpha.3",
+    "@d3plus/locales": "3.0.0-alpha.3",
+    "@d3plus/math": "3.0.0-alpha.3",
+    "@d3plus/text": "3.0.0-alpha.3",
     "@popperjs/core": "^2.11.8",
     "d3-array": "^3.2.4",
     "d3-brush": "^3.0.0",