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

package/umd/d3plus-core.full.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
@@ -5059,14 +5059,6 @@
   /**
       @namespace {Object} formatLocale
       @desc A set of default locale formatters used when assigning suffixes and currency in numbers.
-        *
-        * | Name | Default | Description |
-        * |---|---|---|
-        * | separator | "" | Separation between the number with the suffix. |
-        * | suffixes | [] | List of suffixes used to format numbers. |
-        * | grouping | [3] | The array of group sizes, |
-        * | delimiters | {thousands: ",", decimal: "."} | Decimal and group separators. |
-        * | currency | ["$", ""] | The currency prefix and suffix. |
   */ var formatLocale$2 = {
       "ar-SA": {
           separator: "",
@@ -20604,15 +20596,6 @@
   /**
       @namespace {Object} colorDefaults
       @desc A set of default color values used when assigning colors based on data.
-        *
-        * | Name | Default | Description |
-        * |---|---|---|
-        * | dark | gray-7 | Used in the [contrast](#contrast) function when the color given is very light. |
-        * | light | gray-0 | Used in the [contrast](#contrast) function when the color given is very dark. |
-        * | missing | gray-4 | Used in the [assign](#assign) function when the value passed is `null` or `undefined`. |
-        * | off | red-9 | Used in the [assign](#assign) function when the value passed is `false`. |
-        * | on | green-9 | Used in the [assign](#assign) function when the value passed is `true`. |
-        * | scale | [indigo-900, yellow-600, red-900, green-900, orange-600, grape-900, cyan-600, pink-600, lime-600, blue-300, pink-300, lime-300, violet-300, cyan-100, orange-100, green-100, grape-100, red-100] | An ordinal scale used in the [assign](#assign) function for non-valid color strings and numbers. |
   */ var defaults = {
       dark: openColor$2.colors.gray[700],
       light: openColor$2.colors.gray[50],
@@ -22155,7 +22138,7 @@
   var angleStep = 5; // step size for angles (in degrees); has linear impact on running time
   var polyCache = {};
   /**
-      @typedef {Object} LargestRect
+      @typedef {Object} largestRect
       @desc The returned Object of the largestRect function.
       @property {Number} width The width of the rectangle
       @property {Number} height The height of the rectangle
@@ -22180,7 +22163,7 @@
       @param {Number} [options.tolerance = 0.02] The simplification tolerance factor, between 0 and 1. A larger tolerance corresponds to more extensive simplification.
       @param {Array} [options.origin] The center point of the rectangle. If specified, the rectangle will be fixed at that point, otherwise the algorithm optimizes across all possible points. The given value can be either a two dimensional array specifying the x and y coordinate of the origin or an array of two dimensional points specifying multiple possible center points of the rectangle.
       @param {Boolean} [options.cache] Whether or not to cache the result, which would be used in subsequent calculations to preserve consistency and speed up calculation time.
-      @return {LargestRect}
+      @return {largestRect}
   */ function largestRect(poly) {
       var options = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
       if (poly.length < 3) {
@@ -23171,6 +23154,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
@@ -23366,16 +23364,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 (select(this).classed("d3plus-textBox")) d = d.data;
+              const 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);
-              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) select(this).call(that._applyStyle.bind(that));
                   else select(this).call(that._updateStyle.bind(that, select(this), that._hoverStyle));
@@ -31577,7 +31587,7 @@
   /**
    * Creates a reference element for popper.
    * @param {Number[]} position
-   * @prrivate
+   * @private
    */ function generateReference(position = [
       0,
       0
@@ -33604,11 +33614,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;
@@ -33806,6 +33818,7 @@
       /**
      * Applies the threshold algorithm according to the type of chart used.
      * @param {Array} data The data to process.
+     * @private
      */ _thresholdFunction(data) {
           return data;
       }
@@ -35773,15 +35786,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"
               };
@@ -35851,7 +35864,7 @@
               rounding: this._xDomain ? "none" : "outside",
               scalePadding: x.padding ? x.padding() : 0
           };
-          if (!showY) {
+          if (!showY && showX) {
               xC.barConfig = {
                   stroke: "transparent"
               };
@@ -35871,7 +35884,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
               };
@@ -36044,14 +36057,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 && elem("g.d3plus-plot-x-axis", {
+          const xGroup = elem("g.d3plus-plot-x-axis", {
               parent,
               transition,
               enter: {
                   transform
               },
               update: {
-                  transform
+                  transform,
+                  opacity: showX ? 1 : 0
               }
           });
           const x2Group = x2Exists && elem("g.d3plus-plot-x2-axis", {
@@ -36066,14 +36080,15 @@
           });
           const xTrans = xOffsetLeft > yWidth ? xOffsetLeft - yWidth : 0;
           const yTransform = `translate(${this._margin.left + xTrans}, ${this._margin.top + topOffset})`;
-          const yGroup = showY && elem("g.d3plus-plot-y-axis", {
+          const yGroup = 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})`;
@@ -36087,7 +36102,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();
           }
@@ -36104,7 +36119,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 - max$5([
                   0,
@@ -36150,6 +36165,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();
@@ -36229,8 +36246,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,
@@ -36469,14 +36484,6 @@
      */ confidenceConfig(_) {
           return arguments.length ? (this._confidenceConfig = 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.
@@ -36603,8 +36610,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) {
@@ -36618,8 +36625,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) {
@@ -36689,8 +36696,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) {
@@ -36704,8 +36711,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) {
@@ -36966,6 +36973,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: {
@@ -36986,6 +36994,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: {
@@ -37015,7 +37024,6 @@
           this._baseline = 0;
           this._discrete = "x";
           this._shape = constant$9("Area");
-          this.x("x");
       }
   }
 
@@ -37036,7 +37044,6 @@
               return defaultLegend.bind(this)(config, arr);
           };
           this._shape = constant$9("Bar");
-          this.x("x");
       }
   }
 
@@ -37049,7 +37056,6 @@
           super();
           this._discrete = "x";
           this._shape = constant$9("Box");
-          this.x("x");
           this._tooltipConfig = assign(this._tooltipConfig, {
               title: (d, i)=>{
                   if (!d) return "";
@@ -37074,7 +37080,6 @@
           super();
           this._discrete = "x";
           this._shape = constant$9("Line");
-          this.x("x");
           this.y2((d)=>this._y(d));
           this.yConfig({
               tickFormat: (val)=>{
@@ -51771,7 +51776,6 @@
           super();
           this._discrete = "x";
           this._shape = constant$9("Line");
-          this.x("x");
       }
   }
 
@@ -54120,13 +54124,13 @@
           ])(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(elem("g.d3plus-Pack", {
               parent: this._select,
@@ -54216,9 +54220,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 = pack();
           this._packOpacity = constant$9(0.25);