apexcharts 8.2.0 → 8.3.0

package/src/charts/Treemap.js

@@ -208,7 +208,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 +353,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 +394,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 +405,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 +516,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 +880,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 +1033,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 +1041,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 +1054,8 @@ export default class TreemapChart {
         text,
         maxWidth,
         fontSize,
+        fontFamily: chrome.headerFontFamily,
+        fontWeight: chrome.headerFontWeight,
       })
 
       if (clipped) {
@@ -1158,7 +1161,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 +1181,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
 
@@ -1269,20 +1276,21 @@ export default class TreemapChart {
     const z = w.config.plotOptions.treemap.zoom
     if (!z || !z.enabled || !this.showParents) return false
 
+    // An `onDrillDown` resolver drills on every click, so it counts too. The
+    // warned flag lives on the drilldown instance, which outlives a render.
     const dd = w.config.drilldown
+    const d = this.ctx.drilldown
     if (
-      this.ctx.drilldown &&
+      d &&
       dd &&
       dd.enabled &&
-      Array.isArray(dd.series) &&
-      dd.series.length
+      (dd.series?.length || dd.onDrillDown)
     ) {
-      if (!this._warnedZoomConflict) {
-        this._warnedZoomConflict = true
+      if (!d.zoomWarned) {
+        d.zoomWarned = 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.',
+          'ApexCharts treemap: zoom is ignored while drilldown is active ' +
+            '(plotOptions.treemap.zoom vs drilldown series or onDrillDown).',
         )
       }
       return false
@@ -1293,8 +1301,8 @@ export default class TreemapChart {
   /**
    * 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 +1322,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 +1345,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 +1357,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 +1375,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 +1771,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
@@ -1817,7 +1833,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
@@ -1847,11 +1864,12 @@ export default class TreemapChart {
         `<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 +1984,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 +2095,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 +2113,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 +2144,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 +2153,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