apexcharts 8.3.0 → 8.4.0

package/dist/treemap.esm.js

@@ -18,7 +18,7 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 /*!
- * ApexCharts v8.3.0
+ * ApexCharts v8.4.0
  * (c) 2018-2026 ApexCharts
  */
 import * as _core from "apexcharts/core";
@@ -198,18 +198,14 @@ class TreemapHelpers {
     this.ctx = ctx;
     this.w = w;
   }
+  /** Whether a colour range reaches zero or below. Runs once per draw. */
   checkColorRange() {
     const w = this.w;
-    let negRange = false;
-    const chartOpts = w.config.plotOptions[w.config.chart.type];
-    if (chartOpts.colorScale.ranges.length > 0) {
-      chartOpts.colorScale.ranges.map((range) => {
-        if (range.from <= 0) {
-          negRange = true;
-        }
-      });
-    }
-    return negRange;
+    this.rowExt = /** @type {number[][]} */
+    [];
+    return w.config.plotOptions[w.config.chart.type].colorScale.ranges.some(
+      (range) => range.from <= 0
+    );
   }
   /**
    * @param {string} chartType
@@ -219,51 +215,30 @@ class TreemapHelpers {
    */
   getShadeColor(chartType, i, j, negRange) {
     const w = this.w;
-    let colorShadePercent = 1;
-    const shadeIntensity = w.config.plotOptions[chartType].shadeIntensity;
+    const opts = w.config.plotOptions[chartType];
+    const shadeIntensity = opts.shadeIntensity;
+    const k = shadeIntensity * 1.25;
     const colorProps = this.determineColor(chartType, i, j);
+    const p = colorProps.percent / 100;
+    let colorShadePercent;
     if (
       /** @type {any} */
       w.globals.hasNegs || negRange
     ) {
-      if (w.config.plotOptions[chartType].reverseNegativeShade) {
-        if (colorProps.percent < 0) {
-          colorShadePercent = colorProps.percent / 100 * (shadeIntensity * 1.25);
-        } else {
-          colorShadePercent = (1 - colorProps.percent / 100) * (shadeIntensity * 1.25);
-        }
-      } else {
-        if (colorProps.percent <= 0) {
-          colorShadePercent = 1 - (1 + colorProps.percent / 100) * shadeIntensity;
-        } else {
-          colorShadePercent = (1 - colorProps.percent / 100) * shadeIntensity;
-        }
-      }
+      colorShadePercent = opts.reverseNegativeShade ? (p < 0 ? p : 1 - p) * k : p <= 0 ? 1 - (1 + p) * shadeIntensity : (1 - p) * shadeIntensity;
     } else {
-      colorShadePercent = 1 - colorProps.percent / 100;
-      if (chartType === "treemap") {
-        colorShadePercent = (1 - colorProps.percent / 100) * (shadeIntensity * 1.25);
-      }
+      colorShadePercent = chartType === "treemap" ? (1 - p) * k : 1 - p;
     }
     let color = colorProps.color;
-    const utils = new Utils();
-    if (w.config.plotOptions[chartType].enableShades) {
-      if (this.w.config.theme.mode === "dark") {
-        const shadeColor = utils.shadeColor(
-          colorShadePercent * -1,
-          colorProps.color
-        );
-        color = Utils.hexToRgba(
-          Utils.isColorHex(shadeColor) ? shadeColor : Utils.rgb2hex(shadeColor),
-          w.config.fill.opacity
-        );
-      } else {
-        const shadeColor = utils.shadeColor(colorShadePercent, colorProps.color);
-        color = Utils.hexToRgba(
-          Utils.isColorHex(shadeColor) ? shadeColor : Utils.rgb2hex(shadeColor),
-          w.config.fill.opacity
-        );
-      }
+    if (opts.enableShades) {
+      const shadeColor = new Utils().shadeColor(
+        w.config.theme.mode === "dark" ? -colorShadePercent : colorShadePercent,
+        color
+      );
+      color = Utils.hexToRgba(
+        Utils.isColorHex(shadeColor) ? shadeColor : Utils.rgb2hex(shadeColor),
+        w.config.fill.opacity
+      );
     }
     return { color, colorProps };
   }
@@ -288,13 +263,22 @@ class TreemapHelpers {
       min = w.globals.minY;
       max = w.globals.maxY;
     } else {
-      const row = w.seriesData.series[i];
-      min = row.length ? row[0] : 0;
-      max = min;
-      for (let k = 1; k < row.length; k++) {
-        if (row[k] < min) min = row[k];
-        if (row[k] > max) max = row[k];
+      let ext = (
+        /** @type {number[][]} */
+        this.rowExt[i]
+      );
+      if (!ext) {
+        const row = w.seriesData.series[i];
+        min = row.length ? row[0] : 0;
+        max = min;
+        for (let k = 1; k < row.length; k++) {
+          if (row[k] < min) min = row[k];
+          if (row[k] > max) max = row[k];
+        }
+        ext = /** @type {number[][]} */
+        this.rowExt[i] = [min, max];
       }
+      [min, max] = ext;
     }
     const csMin = chartOpts.colorScale.min;
     const csMax = chartOpts.colorScale.max;
@@ -355,6 +339,11 @@ class TreemapHelpers {
 }
 const Filters = _core.__apex_Filters;
 const Series = _core.__apex_Series;
+function nameAsHtml(name, out = name) {
+  const s = String(name != null ? name : "");
+  const tail = out === s ? "" : out === s + ": " ? ": " : null;
+  return tail === null ? out : s.replace(/&/g, "&amp;").replace(/</g, "&lt;") + tail;
+}
 const Environment = _core.__apex_Environment_Environment;
 function drilldownById(w, id) {
   const dd = w.config.drilldown;
@@ -478,8 +467,7 @@ function getTreemapRoots(w) {
   if (stashed && stashed.length) {
     return {
       roots: stashed,
-      maxDepth: w.globals.treemapMaxDepth || 1,
-      nested: true
+      maxDepth: w.globals.treemapMaxDepth || 1
     };
   }
   const roots = buildSeriesRoots(w, w.config.series, {
@@ -488,14 +476,13 @@ function getTreemapRoots(w) {
   });
   roots.forEach(fillValues);
   const { maxDepth } = annotate(roots);
-  return { roots, maxDepth, nested: false };
+  return { roots, maxDepth };
 }
 const BrowserAPIs = _core.__apex_BrowserAPIs_BrowserAPIs;
 const resolveEasing = _core.__apex_Easing_resolveEasing;
-function rafTween(w, duration, ease, onFrame, onDone) {
-  const startAt = performance.now();
+function rafTween(w, duration, ease, onFrame, onDone, alive, startAt = performance.now()) {
   const step = (now) => {
-    if (w.globals.isDestroyed) return;
+    if (w.globals.isDestroyed || alive && !alive()) return;
     const raw = Math.max(0, Math.min(1, (now - startAt) / duration));
     onFrame(ease(raw), raw);
     if (raw < 1) {
@@ -505,6 +492,9 @@ function rafTween(w, duration, ease, onFrame, onDone) {
     }
   };
   BrowserAPIs.requestAnimationFrame(step);
+  return () => {
+    alive = () => false;
+  };
 }
 const DEFAULT_DIVERGING = ["#cf4d3f", "#8f9499", "#26a75b"];
 const lerp = (a, b, t) => a + (b - a) * t;
@@ -548,14 +538,12 @@ function colorValueOfDatum(w, datum, i, j) {
   const n = Number(raw);
   return Number.isFinite(n) ? n : null;
 }
-function resolveStops(cfg, min, max, midpoint) {
-  if (Array.isArray(cfg.stops) && cfg.stops.length >= 2) {
+function resolveStops(cfg, min, max, midpoint, explicit) {
+  if (explicit) {
     return cfg.stops.filter((s) => s && Number.isFinite(Number(s.value))).map((s) => ({
       value: Number(s.value),
       color: normalizeHex(s.color)
-    })).sort(
-      (a, b) => a.value - b.value
-    );
+    })).sort((a, b) => a.value - b.value);
   }
   const colors = (Array.isArray(cfg.colors) && cfg.colors.length >= 2 ? cfg.colors : DEFAULT_DIVERGING).map(normalizeHex);
   const n = colors.length;
@@ -607,8 +595,11 @@ function buildContinuousScale(w) {
     dataMin = 0;
     dataMax = 0;
   }
-  let min = Number.isFinite(Number(cfg.min)) ? Number(cfg.min) : dataMin;
-  let max = Number.isFinite(Number(cfg.max)) ? Number(cfg.max) : dataMax;
+  const pin = (v) => Number.isFinite(Number(v)) ? Number(v) : null;
+  const pinMin = pin(cfg.min);
+  const pinMax = pin(cfg.max);
+  let min = pinMin != null ? pinMin : dataMin;
+  let max = pinMax != null ? pinMax : dataMax;
   let midpoint = null;
   if (cfg.midpoint === null) {
     midpoint = null;
@@ -617,7 +608,7 @@ function buildContinuousScale(w) {
   } else if (min < 0 && max > 0) {
     midpoint = 0;
   }
-  if (midpoint != null && cfg.symmetric !== false && !Number.isFinite(Number(cfg.min)) && !Number.isFinite(Number(cfg.max))) {
+  if (midpoint != null && cfg.symmetric !== false && pinMin == null && pinMax == null) {
     const reach = Math.max(Math.abs(min - midpoint), Math.abs(max - midpoint));
     min = midpoint - reach;
     max = midpoint + reach;
@@ -626,8 +617,13 @@ function buildContinuousScale(w) {
     min -= 0.5;
     max += 0.5;
   }
-  const stops = resolveStops(cfg, min, max, midpoint);
+  const explicit = Array.isArray(cfg.stops) && cfg.stops.length >= 2;
+  const stops = resolveStops(cfg, min, max, midpoint, explicit);
   if (stops.length < 2) return null;
+  if (explicit) {
+    if (pinMin == null) min = Math.min(min, stops[0].value);
+    if (pinMax == null) max = Math.max(max, stops[stops.length - 1].value);
+  }
   const at = (v) => {
     if (!Number.isFinite(v)) return stops[Math.floor(stops.length / 2)].color;
     if (v <= stops[0].value) return stops[0].color;
@@ -645,10 +641,13 @@ function buildContinuousScale(w) {
     return last.color;
   };
   const span = max - min;
-  const legendStops = stops.map((s) => ({
-    percent: span === 0 ? 0 : (s.value - min) / span,
-    color: s.color
-  }));
+  const legendStops = stops.map((s) => {
+    const v = Math.min(max, Math.max(min, s.value));
+    return {
+      percent: span && (v - min) / span,
+      color: v === s.value ? s.color : at(v)
+    };
+  });
   return { min, max, midpoint, stops, at, legendStops };
 }
 function readableOn(bg) {
@@ -659,15 +658,19 @@ const XHTML = "http://www.w3.org/1999/xhtml";
 const BREADCRUMB_HEIGHT = 18;
 function breadcrumbConfig(w, localCfg) {
   const shared = w.config.drilldown && w.config.drilldown.breadcrumb || {};
-  return __spreadValues(__spreadValues({
-    show: true,
-    position: "top-left",
-    separator: " / ",
-    rootLabel: "All",
-    offsetX: 0,
-    offsetY: 0,
-    formatter: void 0
-  }, shared), localCfg || {});
+  return Object.assign(
+    {
+      show: true,
+      position: "top-left",
+      separator: " / ",
+      rootLabel: "All",
+      offsetX: 0,
+      offsetY: 0,
+      formatter: void 0
+    },
+    shared,
+    localCfg
+  );
 }
 function avoidChromeOverlap(w, nav) {
   const chrome = (
@@ -783,6 +786,11 @@ function withFills(from, to, fillWas, fillNow) {
   }
   return [from, to];
 }
+const showsParents = (w) => {
+  var _a;
+  const show = w.config.plotOptions.treemap.parents.show;
+  return show === true || show !== false && !!((_a = w.globals.treemapRoots) == null ? void 0 : _a.length);
+};
 const headerLook = (el) => Series.treemapHeaderLook(el);
 class TreemapChart {
   /**
@@ -798,7 +806,6 @@ class TreemapChart {
     this.labels = [];
     this.roots = [];
     this.drawn = [];
-    this.nested = false;
     this.showParents = false;
     this.scale = null;
     this._levelCache = null;
@@ -825,13 +832,11 @@ class TreemapChart {
       });
     });
     const tree = getTreemapRoots(w);
-    this.nested = tree.nested;
     this.roots = tree.roots;
     this.scale = buildContinuousScale(w);
     const drawn = tree.roots.length === 1 ? tree.roots[0].children || [] : tree.roots;
     this.drawn = drawn;
-    const parentsCfg = w.config.plotOptions.treemap.parents;
-    this.showParents = parentsCfg.show === true || parentsCfg.show !== false && this.nested;
+    this.showParents = showsParents(w);
     const focus = this._resolveFocus(drawn);
     const layoutRoots = focus ? [focus] : drawn;
     TreemapSquared.generateNested(
@@ -1674,25 +1679,35 @@ class TreemapChart {
    * Active means the feature is loaded as well as configured: without it the
    * click navigates nowhere (the chart warns about the missing feature), so
    * standing zoom down too would leave the click doing nothing at all.
-   * @returns {boolean}
+   *
+   * Reads only `w`, so the layout, which runs before this renderer, asks it
+   * through the type registry (`prototype.zoomLive`) and reserves the
+   * breadcrumb band on the same answer: a flat treemap, with no parents to
+   * click, used to keep an empty band. Not a static: one on this class cost
+   * the default bundle about 290 B gzip.
+   * @param {any} w
+   * @param {any} drilldown the chart's drilldown feature, when loaded
+   * @returns {any} the zoom config when live, null when drilldown is what
+   *   stands it down, else false
    */
-  _zoomEnabled() {
+  zoomLive(w, drilldown) {
     var _a;
-    const w = this.w;
     const z = w.config.plotOptions.treemap.zoom;
-    if (!z || !z.enabled || !this.showParents) return false;
+    if (!(z == null ? void 0 : z.enabled) || !showsParents(w)) return false;
     const dd = w.config.drilldown;
+    return drilldown && (dd == null ? void 0 : dd.enabled) && (((_a = dd.series) == null ? void 0 : _a.length) || dd.onDrillDown) ? null : z;
+  }
+  /** @returns {boolean} */
+  _zoomEnabled() {
     const d = this.ctx.drilldown;
-    if (d && dd && dd.enabled && (((_a = dd.series) == null ? void 0 : _a.length) || dd.onDrillDown)) {
-      if (!d.zoomWarned) {
-        d.zoomWarned = true;
-        console.warn(
-          "ApexCharts treemap: zoom is ignored while drilldown is active (plotOptions.treemap.zoom vs drilldown series or onDrillDown)."
-        );
-      }
-      return false;
+    const live = this.zoomLive(this.w, d);
+    if (live === null && !d.zoomWarned) {
+      d.zoomWarned = true;
+      console.warn(
+        "ApexCharts treemap: zoom is ignored while drilldown is active (plotOptions.treemap.zoom vs drilldown series or onDrillDown)."
+      );
     }
-    return true;
+    return !!live;
   }
   /**
    * The focused branch for this render, looked up by the key stashed on the
@@ -2101,6 +2116,9 @@ class TreemapChart {
    * that grows the font - where a readable chip over the tiles beats a
    * breadcrumb clipped by the plot.
    *
+   * Breadcrumb.placeInReservedBand does the same plus a y-axis label ceiling
+   * a treemap has no use for, which would cost the default bundle its bytes.
+   *
    * @param {any} nav
    */
   _placeBreadcrumb(nav) {
@@ -2110,11 +2128,12 @@ class TreemapChart {
     const dimHelpers = (_b = (_a = this.ctx) == null ? void 0 : _a.dimensions) == null ? void 0 : _b.dimHelpers;
     const titleArea = dimHelpers ? dimHelpers.getTitleSubtitleCoords("title").height + dimHelpers.getTitleSubtitleCoords("subtitle").height : 0;
     const navH = nav.getBoundingClientRect().height || BREADCRUMB_HEIGHT;
+    const oy = this._breadcrumbCfg().offsetY || 0;
     if (gridTop - titleArea >= navH + 1) {
-      nav.style.top = `${gridTop - navH - 1}px`;
+      nav.style.top = `${gridTop - navH - 1 + oy}px`;
       return;
     }
-    nav.style.top = `${titleArea}px`;
+    nav.style.top = `${titleArea + oy}px`;
     const dark = w.config.theme.mode === "dark";
     nav.style.background = dark ? "rgba(20,24,30,0.82)" : "rgba(255,255,255,0.86)";
     nav.style.borderRadius = "4px";
@@ -2129,6 +2148,7 @@ class TreemapChart {
    * @param {any} node
    */
   _showParentTooltip(e, node) {
+    var _a;
     const w = this.w;
     const t = this._tip();
     if (!t) return;
@@ -2137,29 +2157,33 @@ class TreemapChart {
     const pctTotal = total > 0 ? (node._area / total * 100).toFixed(1) : "0.0";
     const pctParent = parentVal > 0 ? (node._area / parentVal * 100).toFixed(1) : pctTotal;
     const cfg = this.w.config.plotOptions.treemap.parents;
-    const custom = cfg && cfg.tooltip && cfg.tooltip.formatter;
     const leafCount = this._countLeaves(node);
-    let html;
-    if (typeof custom === "function") {
-      html = custom({
-        name: node.name,
-        value: node._area,
-        depth: node.depth || 0,
-        leafCount,
-        percentOfParent: Number(pctParent),
-        percentOfTotal: Number(pctTotal),
-        node,
-        w
-      });
-    } else {
+    let fn = cfg && cfg.tooltip && cfg.tooltip.formatter;
+    if (typeof fn !== "function") fn = w.config.tooltip.custom;
+    let html = (_a = Array.isArray(fn) ? fn[node._si] : fn) == null ? void 0 : _a({
+      name: node.name,
+      value: node._area,
+      depth: node.depth || 0,
+      leafCount,
+      percentOfParent: +pctParent,
+      percentOfTotal: +pctTotal,
+      node,
+      w,
+      series: w.seriesData.series,
+      seriesIndex: node._si,
+      dataPointIndex: -1,
+      ctx: this.ctx
+    });
+    if (html == null || html === false) {
       const marker = this._parentChrome(node.depth || 0).headerBg;
       const groupBg = w.config.tooltip.fillSeriesColor ? `background-color:${marker};` : "";
-      html = `<div class="apexcharts-tooltip-series-group apexcharts-active" style="display:flex;${groupBg}"><div class="apexcharts-tooltip-text"><div class="apexcharts-tooltip-y-group"><span class="apexcharts-tooltip-text-y-label">${String(node.name).replace(/&/g, "&amp;").replace(/</g, "&lt;")}: </span><span class="apexcharts-tooltip-text-y-value">${this._formatValue(
+      html = `<div class="apexcharts-tooltip-series-group apexcharts-active" style="display:flex;${groupBg}"><div class="apexcharts-tooltip-text"><div class="apexcharts-tooltip-y-group"><span class="apexcharts-tooltip-text-y-label">${nameAsHtml(node.name)}: </span><span class="apexcharts-tooltip-text-y-value">${this._formatValue(
         node._area,
         node._si
       )}</span></div><div class="apexcharts-tooltip-y-group"><span class="apexcharts-tooltip-text-y-label">${leafCount} items, </span><span class="apexcharts-tooltip-text-y-value">${pctParent}% of parent, ${pctTotal}% of total</span></div></div></div>`;
     }
-    t.innerHTML = html;
+    if (html == null ? void 0 : html.nodeName) t.replaceChildren(html.cloneNode(true));
+    else t.innerHTML = html;
     t.classList.add("apexcharts-active");
     t.removeAttribute("aria-hidden");
     this._positionTooltip(e);
@@ -2346,13 +2370,20 @@ class TreemapChart {
    * @param {number} y2
    */
   rotateToFitLabel(elText, fontSize, text, x1, y1, x2, y2) {
-    const graphics = new Graphics(this.w);
-    const textRect = this._labelRect(graphics, text, fontSize);
-    if (textRect.width + this.w.config.stroke.width + 5 > x2 - x1 && textRect.width <= y2 - y1) {
-      const labelRotatingCenter = graphics.rotateAroundCenter(elText.node);
+    const textRect = (
+      /** @type {any} */
+      this._labelRect(new Graphics(this.w), text, fontSize)
+    );
+    const t = elText.node.querySelector("text");
+    if (t && textRect.width + this.w.config.stroke.width + 5 > x2 - x1 && textRect.width <= y2 - y1) {
+      const a = t.getAttribute("text-anchor");
+      const cx = +t.getAttribute("x") + /** @type {any} */
+      ((a === "start") - /** @type {any} */
+      (a === "end")) * textRect.width / 2;
+      const cy = +t.getAttribute("y") + textRect.centerOffset;
       elText.node.setAttribute(
         "transform",
-        `rotate(-90 ${labelRotatingCenter.x} ${labelRotatingCenter.y}) translate(${textRect.height / 3})`
+        `rotate(-90 ${cx} ${cy}) translate(${textRect.height / 3})`
       );
     }
   }
@@ -2405,9 +2436,9 @@ class TreemapChart {
    * @returns {boolean}
    */
   _morphKeyed() {
-    var _a;
+    var _a, _b;
     const m = (_a = this.ctx) == null ? void 0 : _a.morphTypeChange;
-    return !!(m && typeof m.hasKeyedMarks === "function" && m.hasKeyedMarks() && typeof m.getInitialPathForKey === "function");
+    return (_b = this._keyed) != null ? _b : this._keyed = !!(m && typeof m.hasKeyedMarks === "function" && m.hasKeyedMarks() && typeof m.getInitialPathForKey === "function");
   }
   /**
    * The captured shape a LEAF tile unrolls from, or null when the outgoing