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

package/umd/d3plus-core.js

@@ -1,5 +1,5 @@
 /*
-  @d3plus/core v3.0.0-alpha.1
+  @d3plus/core v3.0.0-alpha.3
   Data visualization made easy. A javascript library that extends the popular D3.js to enable fast and beautiful visualizations.
   Copyright (c) 2025 D3plus - https://d3plus.org
   @license MIT
@@ -574,6 +574,21 @@
       }
   }
 
+  /**
+   * @param {*} nodeList 
+   * @param {*} classNames  
+   * @private
+   */ function findLastIndexWithClass(nodeList, classNames) {
+      for(let x = 0; x < classNames.length; x++){
+          const className = classNames[x];
+          for(let 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
+  }
   class Shape extends BaseClass {
       /**
         @memberof Shape
@@ -769,16 +784,28 @@
           this._group.selectAll(`g.d3plus-${this._name}-shape, g.d3plus-${this._name}-image, g.d3plus-${this._name}-text, g.d3plus-${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;
+              const dataIndex = d.dataIndex;
               const parent = d.parentNode;
-              if (d3Selection.select(this).classed("d3plus-textBox")) d = d.data;
+              const d3plusType = d3Selection.select(this).classed("d3plus-textBox") ? "textBox" : d3Selection.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);
-              const group = !that._hover || typeof that._hover !== "function" || !that._hover(d, i) ? parent : that._hoverGroup.node();
-              if (group !== this.parentNode) group.appendChild(this);
+              const notHovering = !that._hover || typeof that._hover !== "function" || !that._hover(d, i);
+              const group = notHovering ? parent : that._hoverGroup.node();
+              if (group !== this.parentNode) {
+                  const 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) d3Selection.select(this).call(that._applyStyle.bind(that));
                   else d3Selection.select(this).call(that._updateStyle.bind(that, d3Selection.select(this), that._hoverStyle));
@@ -6128,7 +6155,7 @@
   /**
    * Creates a reference element for popper.
    * @param {Number[]} position
-   * @prrivate
+   * @private
    */ function generateReference(position = [
       0,
       0
@@ -7426,11 +7453,13 @@
 
   /**
    * 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((str, item, i)=>{
           if (!i) str += item;
@@ -7628,6 +7657,7 @@
       /**
      * Applies the threshold algorithm according to the type of chart used.
      * @param {Array} data The data to process.
+     * @private
      */ _thresholdFunction(data) {
           return data;
       }
@@ -9595,15 +9625,15 @@
           const defaultY2Config = y2Exists ? {
               data: y2Data
           } : defaultConfig;
-          const showX = this._discrete === "x" && this._width > this._discreteCutoff || this._width > this._xCutoff;
-          const showY = this._discrete === "y" && this._height > this._discreteCutoff || this._height > this._yCutoff;
+          const showX = this._discrete === "x" ? this._width > this._discreteCutoff && this._width > this._xCutoff : this._width > this._xCutoff;
+          const showY = this._discrete === "y" ? this._height > this._discreteCutoff && this._height > this._yCutoff : this._height > this._yCutoff;
           const 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"
               };
@@ -9673,7 +9703,7 @@
               rounding: this._xDomain ? "none" : "outside",
               scalePadding: x.padding ? x.padding() : 0
           };
-          if (!showY) {
+          if (!showY && showX) {
               xC.barConfig = {
                   stroke: "transparent"
               };
@@ -9693,7 +9723,7 @@
                   labelConfig: {
                       padding: 0,
                       rotate: 0,
-                      textAnchor: (d)=>d.id === xTicks[0] ? "start" : "end"
+                      textAnchor: (d)=>xTicks && d.id === xTicks[0] ? "start" : "end"
                   },
                   labelRotation: false
               };
@@ -9866,14 +9896,15 @@
           });
           const transform = `translate(${this._margin.left}, ${this._margin.top + x2Height + topOffset})`;
           const x2Transform = `translate(${this._margin.left}, ${this._margin.top + topOffset})`;
-          const xGroup = showX && dom.elem("g.d3plus-plot-x-axis", {
+          const xGroup = dom.elem("g.d3plus-plot-x-axis", {
               parent,
               transition,
               enter: {
                   transform
               },
               update: {
-                  transform
+                  transform,
+                  opacity: showX ? 1 : 0
               }
           });
           const x2Group = x2Exists && dom.elem("g.d3plus-plot-x2-axis", {
@@ -9888,14 +9919,15 @@
           });
           const xTrans = xOffsetLeft > yWidth ? xOffsetLeft - yWidth : 0;
           const yTransform = `translate(${this._margin.left + xTrans}, ${this._margin.top + topOffset})`;
-          const yGroup = showY && dom.elem("g.d3plus-plot-y-axis", {
+          const yGroup = dom.elem("g.d3plus-plot-y-axis", {
               parent,
               transition,
               enter: {
                   transform: yTransform
               },
               update: {
-                  transform: yTransform
+                  transform: yTransform,
+                  opacity: showY ? 1 : 0
               }
           });
           const y2Transform = `translate(-${this._margin.right}, ${this._margin.top + topOffset})`;
@@ -9909,7 +9941,7 @@
                   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();
           }
@@ -9926,7 +9958,7 @@
               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 - d3Array.max([
                   0,
@@ -9972,6 +10004,8 @@
                   return this._yAxis._getPosition.bind(this._yAxis)(d) - x2Height;
               }
           };
+          let yOffset = this._xAxis.barConfig()["stroke-width"];
+          if (yOffset) yOffset /= 2;
           new 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();
@@ -10051,8 +10085,6 @@
               });
               this._previousAnnotations[layer] = annotationShapes;
           });
-          let yOffset = this._xAxis.barConfig()["stroke-width"];
-          if (yOffset) yOffset /= 2;
           const discrete = this._discrete || "x";
           const shapeConfig = {
               discrete: this._discrete,
@@ -10291,14 +10323,6 @@
      */ confidenceConfig(_) {
           return arguments.length ? (this._confidenceConfig = dom.assign(this._confidenceConfig, _), this) : this._confidenceConfig;
       }
-      /**
-        @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
-    */ 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.
@@ -10425,8 +10449,8 @@
       }
       /**
         @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
     */ x(_) {
           if (arguments.length) {
@@ -10440,8 +10464,8 @@
       }
       /**
          @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
      */ x2(_) {
           if (arguments.length) {
@@ -10511,8 +10535,8 @@
       }
       /**
         @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
     */ y(_) {
           if (arguments.length) {
@@ -10526,8 +10550,8 @@
       }
       /**
          @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
      */ y2(_) {
           if (arguments.length) {
@@ -10788,6 +10812,7 @@
           });
           this._x = accessor("x");
           this._xAxis = new AxisBottom().align("end");
+          this._xKey = "x";
           this._xTest = new AxisBottom().align("end").gridSize(0);
           this._xConfig = {
               gridConfig: {
@@ -10808,6 +10833,7 @@
           };
           this._y = accessor("y");
           this._yAxis = new AxisLeft().align("start");
+          this._yKey = "y";
           this._yTest = new AxisLeft().align("start").gridSize(0);
           this._yConfig = {
               gridConfig: {
@@ -10837,7 +10863,6 @@
           this._baseline = 0;
           this._discrete = "x";
           this._shape = constant("Area");
-          this.x("x");
       }
   }
 
@@ -10858,7 +10883,6 @@
               return defaultLegend.bind(this)(config, arr);
           };
           this._shape = constant("Bar");
-          this.x("x");
       }
   }
 
@@ -10871,7 +10895,6 @@
           super();
           this._discrete = "x";
           this._shape = constant("Box");
-          this.x("x");
           this._tooltipConfig = dom.assign(this._tooltipConfig, {
               title: (d, i)=>{
                   if (!d) return "";
@@ -10896,7 +10919,6 @@
           super();
           this._discrete = "x";
           this._shape = constant("Line");
-          this.x("x");
           this.y2((d)=>this._y(d));
           this.yConfig({
               tickFormat: (val)=>{
@@ -11620,7 +11642,6 @@
           super();
           this._discrete = "x";
           this._shape = constant("Line");
-          this.x("x");
       }
   }
 
@@ -12465,13 +12486,13 @@
           ])(d3Hierarchy.hierarchy({
               key: nestedData.key,
               values: nestedData
-          }, (d)=>d.values).sum(this._sum).sort(this._sort)).descendants();
-          packData.forEach((d, i)=>{
+          }, (d)=>d.values).sum(this._sum).sort(this._sort)).descendants().filter((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(dom.elem("g.d3plus-Pack", {
               parent: this._select,
@@ -12561,9 +12582,10 @@
           const defaultMouseMoveShape = this._on["mousemove.shape"];
           this._on["mousemove.shape"] = (d, i, x, event)=>{
               if (d.__d3plusTooltip__) defaultMouseMoveShape(d, i, x, event);
-              this.hover((h)=>recursionCircles(d, [
-                      d
-                  ]).includes(h));
+              const hoverData = recursionCircles(d, [
+                  d
+              ]);
+              this.hover((h)=>hoverData.includes(h));
           };
           this._pack = d3Hierarchy.pack();
           this._packOpacity = constant(0.25);