apexcharts 8.2.0 → 8.3.1

package/src/charts/Treemap.js

@@ -57,6 +57,18 @@ function withFills(from, to, fillWas, fillNow) {
   return [from, to]
 }
 
+/**
+ * Whether the treemap draws parent containers. Opt-out, but only for data
+ * authored with `children`: a flat treemap keeps drawing exactly what it
+ * always drew. Reads the tree Data stashed at parse time, so the layout can
+ * ask before the renderer runs.
+ * @param {any} w
+ */
+const showsParents = (w) => {
+  const show = w.config.plotOptions.treemap.parents.show
+  return show === true || (show !== false && !!w.globals.treemapRoots?.length)
+}
+
 const headerLook = (/** @type {Element | null | undefined} */ el) =>
   Series.treemapHeaderLook(el)
 
@@ -84,7 +96,6 @@ export default class TreemapChart {
     // Nested state, all resolved per draw.
     /** @type {any[]} */ this.roots = []
     /** @type {any[]} */ this.drawn = []
-    /** @type {boolean} */ this.nested = false
     /** @type {boolean} */ this.showParents = false
     /** @type {any} */ this.scale = null
     /** @type {any[]|null} */ this._levelCache = null
@@ -133,7 +144,6 @@ export default class TreemapChart {
     // same recursion the nested case uses; with no padding and no headers that
     // reduces to exactly the two-level squarify it always was.
     const tree = getTreemapRoots(w)
-    this.nested = tree.nested
     this.roots = tree.roots
     this.scale = buildContinuousScale(w)
 
@@ -147,10 +157,7 @@ export default class TreemapChart {
     // Parent containers are opt-out, but only appear at all when the data was
     // authored with `children`. A flat treemap must keep drawing exactly what
     // it always drew, with `seriesTitle` as its only group chrome.
-    const parentsCfg = w.config.plotOptions.treemap.parents
-    this.showParents =
-      parentsCfg.show === true ||
-      (parentsCfg.show !== false && this.nested)
+    this.showParents = showsParents(w)
 
     // Click-to-zoom: everything outside the focused branch is left out of the
     // layout entirely, so the focused group gets the whole canvas.
@@ -208,7 +215,7 @@ export default class TreemapChart {
       if (w.config.chart.dropShadow.enabled) {
         const shadow = w.config.chart.dropShadow
         const filters = new Filters(this.w)
-        filters.dropShadow(ret, shadow, i)
+        filters.dropShadow(elSeries, shadow, i)
       }
 
       const elDataLabelWrap = graphics.group({
@@ -353,6 +360,10 @@ export default class TreemapChart {
         // See Sunburst: the branch identity a cross-type morph pairs on.
         elRect.node.setAttribute('data:key', morphKey(leaf._key))
 
+        // The tile's tween (mount grow or data change), which its label
+        // rides, and the centre the label rides from (null: it fades in).
+        /** @type {any} */
+        let tileTween = null
         let fromRect = {
           x: x1 + (x2 - x1) / 2,
           y: y1 + (y2 - y1) / 2,
@@ -390,7 +401,7 @@ export default class TreemapChart {
             // delay, so they popped in one after another.
             w.globals.animationEnded = true
           } else {
-            this.animateTreemap(
+            tileTween = this.animateTreemap(
               elRect,
               fromRect,
               toRect,
@@ -401,10 +412,6 @@ export default class TreemapChart {
             )
           }
         }
-        // A data change's tile tween, which the tile's label rides, and the
-        // centre the label rides from (null for a tile the update adds).
-        /** @type {any} */
-        let tileTween = null
         /** @type {{x: number, y: number} | null} */
         let labelFrom = null
         // What the tile's label showed before ('' for none, null when not
@@ -516,7 +523,8 @@ export default class TreemapChart {
           dataLabels.node.setAttribute('data:key', morphKey(leaf._key))
           elSeries.add(dataLabels)
           // The label rides its tile from the old centre, on the tile's own
-          // tween; a tile the update adds fades its label in as it grows.
+          // tween; a tile that mounts or the update adds fades its label in
+          // as it grows.
           // It used to sit at its final spot from the first frame, over
           // whatever tile was still there.
           if (tileTween) {
@@ -879,7 +887,7 @@ export default class TreemapChart {
     const elGroup = graphics.group({
       class: 'apexcharts-treemap-parent',
       'data:depth': depth,
-      'data:name': Utils.escapeString(node.name),
+      'data:name': node.name,
     })
 
     // Cross-type morph: with branch keys on both sides, a container unrolls
@@ -1032,7 +1040,7 @@ export default class TreemapChart {
       if (typeof header.formatter === 'function') {
         text = String(
           header.formatter(node.name, {
-            value: node.value,
+            value: node._area,
             depth,
             seriesIndex: i,
             node,
@@ -1040,7 +1048,7 @@ export default class TreemapChart {
           }),
         )
       } else if (header.showValue) {
-        text = `${text}  ${this._formatValue(node.value)}`
+        text = `${text}  ${this._formatValue(node._area, node._si)}`
       }
       headerText = text
 
@@ -1053,6 +1061,8 @@ export default class TreemapChart {
         text,
         maxWidth,
         fontSize,
+        fontFamily: chrome.headerFontFamily,
+        fontWeight: chrome.headerFontWeight,
       })
 
       if (clipped) {
@@ -1158,7 +1168,7 @@ export default class TreemapChart {
     const lead =
       visibleText && String(visibleText).trim()
         ? String(visibleText).replace(/\s+/g, ' ').trim()
-        : `${node.name}, ${this._formatValue(node._area)}`
+        : `${node.name}, ${this._formatValue(node._area, node._si)}`
     return `${lead}, ${n} ${n === 1 ? 'item' : 'items'}, ${pct}% of total`
   }
 
@@ -1178,17 +1188,21 @@ export default class TreemapChart {
    * @param {string} [visibleText] the header's rendered text, unclipped
    */
   _makeParentAccessible(el, node, chrome, elRect, visibleText) {
+    const a11y = this.w.config.chart.accessibility
     if (!el || !el.setAttribute) return
-    if (!this._zoomEnabled()) return
+    if (!a11y.enabled || !a11y.keyboard.enabled || !this._zoomEnabled()) return
 
+    // The focused branch's strip zooms back out.
+    const open = this.w.globals.treemapFocusKey === node._key
+    el.tmKey = node._key
     el.setAttribute('role', 'button')
     el.setAttribute('tabindex', '0')
     el.setAttribute(
       'aria-label',
-      `${this._parentLabel(node, visibleText)}. Zoom in`,
+      `${this._parentLabel(node, visibleText)}. Zoom ${open ? 'out' : 'in'}`,
     )
     // The strip is the affordance, and it labels the group it opens.
-    el.setAttribute('aria-expanded', 'false')
+    el.setAttribute('aria-expanded', open)
 
     if (!Environment.isBrowser() || !el.addEventListener) return
 
@@ -1262,39 +1276,47 @@ export default 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() {
-    const w = this.w
+  zoomLive(w, drilldown) {
     const z = w.config.plotOptions.treemap.zoom
-    if (!z || !z.enabled || !this.showParents) return false
-
+    if (!z?.enabled || !showsParents(w)) return false
+    // An `onDrillDown` resolver drills on every click, so it counts too.
     const dd = w.config.drilldown
-    if (
-      this.ctx.drilldown &&
-      dd &&
-      dd.enabled &&
-      Array.isArray(dd.series) &&
-      dd.series.length
-    ) {
-      if (!this._warnedZoomConflict) {
-        this._warnedZoomConflict = true
-        console.warn(
-          'ApexCharts treemap: `plotOptions.treemap.zoom` and the drilldown ' +
-            'feature both navigate the hierarchy, so zoom is ignored here. ' +
-            'Drop `drilldown.series` to zoom a nested treemap instead.',
-        )
-      }
-      return false
+    return drilldown && dd?.enabled && (dd.series?.length || dd.onDrillDown)
+      ? null
+      : z
+  }
+
+  /** @returns {boolean} */
+  _zoomEnabled() {
+    // The warned flag lives on the drilldown instance, which outlives a render.
+    const d = this.ctx.drilldown
+    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
    * last click. Keys are rebuilt identically from the same data, so the focus
-   * survives a re-render; a key that no longer resolves (the data changed under
-   * it) simply falls back to the whole tree.
+   * survives a re-render; a key that no longer resolves, or a branch left with
+   * nothing to draw (the data changed under it), falls back to the whole tree.
    * @param {any[]} drawn
    * @returns {any}
    */
@@ -1314,7 +1336,16 @@ export default class TreemapChart {
     }
     drawn.forEach(walk)
     // Only a branch can be focused; a leaf has nothing to zoom into.
-    return found && found.children && found.children.length ? found : null
+    if (
+      found &&
+      found.children &&
+      found.children.length &&
+      this._subtreeArea(found) > 0
+    ) {
+      return found
+    }
+    this.w.globals.treemapFocusKey = null
+    return null
   }
 
   /**
@@ -1328,30 +1359,7 @@ export default class TreemapChart {
     const w = this.w
     if (!node || !node.children || !node.children.length) return
     const next = w.globals.treemapFocusKey === node._key ? null : node._key
-    const done = this._refocus(next)
-    if (!restoreFocus || !done || typeof done.then !== 'function') return
-    done.then(() => {
-      if (!Environment.isBrowser()) return
-      // The breadcrumb is where you are and how you get back, so it is the
-      // right landing spot after the view changes under you.
-      const crumb = /** @type {any} */ (
-        w.dom.baseEl.querySelector(
-          '.apexcharts-breadcrumb .apexcharts-breadcrumb-item',
-        )
-      )
-      if (crumb && crumb.focus) {
-        crumb.focus()
-        return
-      }
-      // Zoomed all the way back out: no breadcrumb, so return to the strip of
-      // the group that was just closed.
-      const header = /** @type {any} */ (
-        w.dom.baseEl.querySelector(
-          '.apexcharts-treemap-parent-header[tabindex]',
-        )
-      )
-      if (header && header.focus) header.focus()
-    })
+    this._refocus(next, restoreFocus)
   }
 
   /**
@@ -1363,16 +1371,17 @@ export default class TreemapChart {
    * left, which replayed the mount animation (every tile growing from
    * nothing) or snapped, while the containers, headers and labels jumped.
    * @param {string | null} next
-   * @returns {any} the update's promise
+   * @param {boolean} [restoreFocus] see _zoomTo
    */
-  _refocus(next) {
+  _refocus(next, restoreFocus) {
     const w = this.w
     const gl = w.globals
+    const from = gl.treemapFocusKey
     const anim = w.config.chart.animations
     const animate = !!(anim.enabled && anim.dynamicAnimation.enabled)
     gl.treemapZoom =
       animate && Environment.isBrowser()
-        ? { from: gl.treemapFocusKey ?? null, to: next }
+        ? { from: from ?? null, to: next }
         : null
     gl.treemapFocusKey = next
     this._hideParentTooltip()
@@ -1380,7 +1389,27 @@ export default class TreemapChart {
     gl.resized = true
     gl.dataChanged = true
     if (gl.treemapZoom) this.ctx.series.getPreviousPaths()
-    return this.ctx.update()
+    const done = this.ctx.update()
+    if (restoreFocus) {
+      done.then(() => {
+        const b = w.dom.baseEl
+        const heads = /** @type {any[]} */ (
+          Array.from(
+            b.querySelectorAll('.apexcharts-treemap-parent-header[tabindex]'),
+          )
+        )
+        // The breadcrumb is where you are and how you get back, so it is the
+        // right landing spot after the view changes under you. Zoomed all the
+        // way back out there is none: return to the strip of the group that
+        // was just closed.
+        ;(
+          b.querySelector('.apexcharts-breadcrumb-item') ||
+          heads.find((h) => h.tmKey === from) ||
+          heads[0] ||
+          b
+        ).focus()
+      })
+    }
   }
 
   /**
@@ -1756,8 +1785,9 @@ export default class TreemapChart {
       crumbs: [{ label: 'All', data: null }].concat(
         chain.map((/** @type {any} */ n) => ({ label: n.name, data: n })),
       ),
-      onNavigate: (_i, crumb) => {
-        this._refocus(crumb.data ? crumb.data._key : null)
+      // A keyboard click (detail 0) keeps focus in the chart.
+      onNavigate: (_i, crumb, e) => {
+        this._refocus(crumb.data ? crumb.data._key : null, !e.detail)
       },
     })
     if (!nav) return
@@ -1776,6 +1806,9 @@ export default 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) {
@@ -1788,12 +1821,13 @@ export default class TreemapChart {
       : 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)'
@@ -1817,7 +1851,8 @@ export default class TreemapChart {
     if (!t) return
 
     const total = this._drawnTotal()
-    const parentVal = node._parent ? node._parent._area : total
+    // A zoom lays out only the focus, so the parent may have no _area.
+    const parentVal = node._parent ? this._subtreeArea(node._parent) : total
     const pctTotal = total > 0 ? ((node._area / total) * 100).toFixed(1) : '0.0'
     const pctParent =
       parentVal > 0 ? ((node._area / parentVal) * 100).toFixed(1) : pctTotal
@@ -1843,15 +1878,18 @@ export default class TreemapChart {
       const groupBg = w.config.tooltip.fillSeriesColor
         ? `background-color:${marker};`
         : ''
+      // The name sits in element text, where escaping & and < is enough to
+      // keep markup in data inert. What a formatter returns is markup.
       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">${Utils.escapeString(
-          node.name,
-        )}: </span>` +
+        `<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(
           node._area,
+          node._si,
         )}</span>` +
         `</div>` +
         `<div class="apexcharts-tooltip-y-group">` +
@@ -1966,16 +2004,20 @@ export default class TreemapChart {
 
   /**
    * Format an aggregate the way the chart formats its own y values, so a
-   * parent's total reads like the tiles it contains.
+   * parent's total reads like the tiles it contains. A branch is no data
+   * point, so dataPointIndex is -1.
    * @param {number} v
+   * @param {number} [si] the branch's series index
    * @returns {string}
    */
-  _formatValue(v) {
+  _formatValue(v, si) {
     const w = this.w
     const fmt = w.config.tooltip?.y?.formatter || w.config.yaxis?.[0]?.labels?.formatter
     if (typeof fmt === 'function') {
       try {
-        return String(fmt(v, { seriesIndex: 0, dataPointIndex: 0, w }))
+        return String(
+          fmt(v, { seriesIndex: si || 0, dataPointIndex: -1, w }),
+        )
       } catch (_) {
         // A formatter written for leaf rows may expect fields a parent
         // aggregate has no equivalent of; fall through to the plain number.
@@ -2073,7 +2115,7 @@ export default class TreemapChart {
    */
   rotateToFitLabel(elText, fontSize, text, x1, y1, x2, y2) {
     const graphics = new Graphics(this.w)
-    const textRect = graphics.getTextRects(text, String(fontSize))
+    const textRect = this._labelRect(graphics, text, fontSize)
 
     // if the label fits better sideways then rotate it
     if (
@@ -2091,6 +2133,25 @@ export default class TreemapChart {
     }
   }
 
+  /**
+   * A tile label's box, measured at the family and weight it is drawn at
+   * (bold is wider than the default regular).
+   * @param {Graphics} graphics
+   * @param {string} text
+   * @param {string | number} fontSize
+   */
+  _labelRect(graphics, text, fontSize) {
+    const st = this.w.config.dataLabels.style
+    return graphics.getTextRects(
+      text,
+      String(fontSize),
+      st.fontFamily,
+      '',
+      true,
+      st.fontWeight,
+    )
+  }
+
   // This is an alternative label formatting method that uses a
   // consistent font size, and trims the edge of long labels
   /**
@@ -2103,7 +2164,7 @@ export default class TreemapChart {
    */
   truncateLabels(text, fontSize, x1, y1, x2, y2) {
     const graphics = new Graphics(this.w)
-    const textRect = graphics.getTextRects(text, String(fontSize))
+    const textRect = this._labelRect(graphics, text, fontSize)
 
     // Determine max width based on ideal orientation of text
     const labelMaxWidth =
@@ -2112,9 +2173,10 @@ export default class TreemapChart {
         ? y2 - y1
         : x2 - x1
     const truncatedText = graphics.getTextBasedOnMaxWidth({
-      text: text,
+      ...this.w.config.dataLabels.style,
+      text,
       maxWidth: labelMaxWidth,
-      fontSize: fontSize,
+      fontSize,
     })
 
     // Return empty label when text has been trimmed for very small rects