apexcharts 8.2.0 → 8.3.1

package/src/charts/RangeBar.js

@@ -4,8 +4,8 @@ import Graphics from '../modules/Graphics'
 import Series from '../modules/Series'
 import Utils from '../utils/Utils'
 import {
-  datumKey,
   renderBarExitGhosts,
+  uniquifyKeys,
 } from '../modules/animations/LengthTransition'
 
 /**
@@ -29,7 +29,7 @@ class RangeBar extends Bar {
     this.seriesRangeStart = w.rangeData.seriesRangeStart
     this.seriesRangeEnd = w.rangeData.seriesRangeEnd
 
-    this.barHelpers.initVariables(series)
+    this.barHelpers.initVariables(series, seriesIndex)
 
     const ret = graphics.group({
       class: 'apexcharts-rangebar-series apexcharts-plot-series',
@@ -58,6 +58,10 @@ class RangeBar extends Bar {
       }
 
       const translationsIndex = this.setSeriesAxis(realIndex)
+      // a time axis's labels never reverse, so its bars may not either
+      if (this.isHorizontal && w.labelData.timescaleLabels.length) {
+        this.isReversed = false
+      }
 
       const initPositions = this.barHelpers.initialPositions(realIndex)
       const {
@@ -66,8 +70,6 @@ class RangeBar extends Bar {
         x: initX,
         zeroH, // zeroH is the baseline where 0 meets y axis
       } = initPositions
-      let barWidth = initPositions.barWidth ?? 0
-      let barHeight = initPositions.barHeight ?? 0
       const yDivision = initPositions.yDivision ?? 0
       const xDivision = initPositions.xDivision ?? 0
 
@@ -84,11 +86,16 @@ class RangeBar extends Bar {
         class: 'apexcharts-rangebar-goals-markers',
       })
 
+      const data = /** @type {any} */ (w.config.series[realIndex]).data
+
       for (let j = 0; j < w.globals.dataPoints; j++) {
         const strokeWidth = this.barHelpers.getStrokeWidth(i, j, realIndex)
+        // per datum: an overlap row shrinks only its own bars
+        let barWidth = initPositions.barWidth ?? 0
+        let barHeight = initPositions.barHeight ?? 0
 
-        const y1 = this.seriesRangeStart[i][j]
-        const y2 = this.seriesRangeEnd[i][j]
+        const y1 = this.seriesRangeStart[realIndex][j]
+        const y2 = this.seriesRangeEnd[realIndex][j]
 
         let paths = /** @type {any} */ (null)
         let barXPosition = null
@@ -100,10 +107,7 @@ class RangeBar extends Bar {
           seriesLen = 1
         }
 
-        if (
-          typeof /** @type {Record<string,any>} */ (w.config.series[i]).data?.[j] ===
-          'undefined'
-        ) {
+        if (typeof data?.[j] === 'undefined') {
           // no data exists for further indexes, hence we need to get out the innr loop.
           // As we are iterating over total datapoints, there is a possiblity the series might not have data for j index
           break
@@ -114,9 +118,9 @@ class RangeBar extends Bar {
 
           const srty = (yDivision - barHeight * seriesLen) / 2
 
-          if (/** @type {Record<string,any>} */ (w.config.series[i]).data?.[j]?.x) {
+          if (data[j]?.x != null) {
             const positions = this.detectOverlappingBars({
-              i,
+              i: realIndex,
               j,
               barYPosition,
               srty,
@@ -144,7 +148,8 @@ class RangeBar extends Bar {
         } else {
           if (w.axisFlags.isXNumeric) {
             x =
-              (w.seriesData.seriesX[i][j] - w.globals.minX) / this.xRatio -
+              (w.seriesData.seriesX[realIndex][j] - w.globals.minX) /
+                this.xRatio -
               barWidth / 2
           }
 
@@ -152,9 +157,9 @@ class RangeBar extends Bar {
 
           const srtx = (xDivision - barWidth * seriesLen) / 2
 
-          if (/** @type {Record<string,any>} */ (w.config.series[i]).data?.[j]?.x) {
+          if (data[j]?.x != null) {
             const positions = this.detectOverlappingBars({
-              i,
+              i: realIndex,
               j,
               barXPosition,
               srtx,
@@ -177,10 +182,11 @@ class RangeBar extends Bar {
           })
 
           barHeight = paths.barHeight
+          barXPosition = paths.barXPosition
         }
 
         const barGoalLine = this.barHelpers.drawGoalLine({
-          barXPosition: paths.barXPosition,
+          barXPosition,
           barYPosition,
           goalX: paths.goalX,
           goalY: paths.goalY,
@@ -236,16 +242,11 @@ class RangeBar extends Bar {
       // overrides draw() and never made this call, so a series hidden from the
       // legend (no datums left) dropped every bar on the click.
       if (w.globals.previousPaths.length > 0) {
-        const data = /** @type {Record<string,any>} */ (w.config.series[i]).data || []
-        const newKeys = []
-        for (let j = 0; j < data.length; j++) {
-          newKeys.push(datumKey(w, realIndex, j))
-        }
         renderBarExitGhosts({
           w,
           elSeries,
           record: this._prevRecord(realIndex),
-          newKeys,
+          newKeys: this._keys(realIndex),
           isHorizontal: this.isHorizontal,
           speed: w.config.chart.animations.dynamicAnimation.speed,
         })
@@ -308,18 +309,11 @@ class RangeBar extends Bar {
 
         if (overlaps.indexOf(rangeName) > -1) {
           barHeight = initPositions.barHeight / overlaps.length
-
-          barYPosition =
-            barHeight * this.visibleI +
-            (yDivision * (100 - parseInt(this.barOptions.barHeight, 10))) /
-              100 /
-              2 +
-            barHeight * (this.visibleI + overlaps.indexOf(rangeName)) +
-            yDivision * rowIndex
+          barYPosition += barHeight * overlaps.indexOf(rangeName)
         }
       }
     } else {
-      if (rowIndex > -1 && !w.labelData.timescaleLabels.length) {
+      if (rowIndex > -1 && !w.axisFlags.isXNumeric) {
         if (w.config.plotOptions.bar.rangeBarGroupRows) {
           barXPosition = srtx + xDivision * rowIndex
         } else {
@@ -335,14 +329,7 @@ class RangeBar extends Bar {
 
         if (overlaps.indexOf(rangeName) > -1) {
           barWidth = initPositions.barWidth / overlaps.length
-
-          barXPosition =
-            barWidth * this.visibleI +
-            (xDivision * (100 - parseInt(this.barOptions.barWidth, 10))) /
-              100 /
-              2 +
-            barWidth * (this.visibleI + overlaps.indexOf(rangeName)) +
-            xDivision * rowIndex
+          barXPosition += barWidth * overlaps.indexOf(rangeName)
         }
       }
     }
@@ -368,7 +355,7 @@ class RangeBar extends Bar {
 
     const { i, j, realIndex, translationsIndex } = indexes
 
-    const yRatio = this.yRatio[translationsIndex]
+    const yRatio = this.yRatio[translationsIndex] * (this.isReversed ? -1 : 1)
 
     const range = this.getRangeValue(realIndex, j)
 
@@ -381,7 +368,7 @@ class RangeBar extends Bar {
     )
 
     if (!hasValue) {
-      y1 = zeroH
+      y1 = y2 = zeroH
     } else {
       y1 = zeroH - y1 / yRatio
       y2 = zeroH - y2 / yRatio
@@ -448,6 +435,22 @@ class RangeBar extends Bar {
     }
   }
 
+  /**
+   * Timeline datums key by their own row, not by the j-th label: a row can
+   * hold several bars, so labels[j] names some other datum's row.
+   * @param {number} realIndex
+   * @returns {string[]}
+   */
+  _keys(realIndex) {
+    const c = (/** @type {any} */ (this)._keyCache ||= {})
+    const data = /** @type {any} */ (this.w.config.series[realIndex]).data
+    return (c[realIndex] ||= uniquifyKeys(
+      (data || []).map(
+        (/** @type {any} */ d, /** @type {number} */ j) => 'c:' + (d?.x ?? j),
+      ),
+    ))
+  }
+
   /**
    * @param {number} val
    */
@@ -479,8 +482,9 @@ class RangeBar extends Bar {
 
     const { realIndex, j } = indexes
 
-    const x1 = this.preventBarOverflow(zeroW + y1 / this.invertedYRatio)
-    const x2 = this.preventBarOverflow(zeroW + y2 / this.invertedYRatio)
+    const ratio = this.invertedYRatio * (this.isReversed ? -1 : 1)
+    const x1 = this.preventBarOverflow(zeroW + y1 / ratio)
+    const x2 = this.preventBarOverflow(zeroW + y2 / ratio)
 
     const range = this.getRangeValue(realIndex, j)
 

package/src/charts/Sunburst.js

@@ -33,10 +33,12 @@ import { avoidChromeOverlap } from './common/Breadcrumb'
 import {
   bandScale,
   farEdge,
+  focusByKey,
   focusChain,
   parseSize,
   placeTree,
   resolveFocus,
+  setZoomCursor,
   validateStrict,
 } from './common/partition/Partition'
 import { colorPass } from './common/partition/Tint'
@@ -129,15 +131,22 @@ export default class SunburstChart {
       (!w.config.chart.sparkline.enabled ? w.config.chart.dropShadow.blur : 0)
     if (this.maxRadius < 5) return g
 
-    // Build + colour the hierarchy once (angles/radii are recomputed per zoom).
-    this._roots = this._buildHierarchy()
+    // Build + colour the hierarchy once (angles/radii are recomputed per zoom),
+    // through the helpers shared with the treemap and icicle: a node's explicit
+    // `color` wins, else it takes its parent's tinted lighter.
+    this._roots = buildHierarchy(w)
     if (!this._roots.length) return g
-    this._roots.forEach((r) => this._fillValues(r))
+    this._roots.forEach(fillValues)
     this._validateStrict()
     this._nodesAll = []
     const colors = w.globals.colors || []
     this._roots.forEach((r, i) => {
-      this._colorPass(r, r.color || colors[i % colors.length] || '#008FFB')
+      colorPass(
+        r,
+        r.color || colors[i % colors.length] || '#008FFB',
+        this.cfg.tint,
+        this._nodesAll,
+      )
     })
     this.total = this._roots.reduce((s, r) => s + Math.max(0, r.value), 0) || 1
     this._tooltip.total = this.total
@@ -147,7 +156,12 @@ export default class SunburstChart {
     g.add(this._ringsG)
     g.add(this._labelsG)
 
-    this._focus = null
+    // The focus outlives this instance by key (_relayout clears a stale one).
+    this._focus = focusByKey(
+      w.globals.sunburstFocusKey,
+      this._nodesAll,
+      this._roots,
+    )
     this._relayout(this._focus)
 
     // Same gating as Pie: angular clock-sweep intro on first render, a morph
@@ -158,7 +172,7 @@ export default class SunburstChart {
     let mode = 'none'
     if (anims.enabled) {
       if (w.globals.dataChanged) {
-        if (anims.dynamicAnimation.enabled) mode = 'update'
+        if (w.globals.shouldAnimate !== false) mode = 'update'
       } else if (!w.globals.resized) {
         mode = 'intro'
       }
@@ -171,24 +185,6 @@ export default class SunburstChart {
 
   // ------------------------------------------------------------------ data
 
-  /**
-   * Resolve the config into root nodes `{ name, value, color?, children? }`.
-   * Each datum may carry `children` (native) or `drilldown: '<id>'` (adapter).
-   * Shared with the treemap - see charts/common/Hierarchy.
-   * @returns {any[]}
-   */
-  _buildHierarchy() {
-    return buildHierarchy(this.w)
-  }
-
-  /**
-   * Fill a parent's value from its children when missing.
-   * @param {any} node
-   */
-  _fillValues(node) {
-    fillValues(node)
-  }
-
   /**
    * With `partition: 'strict'`, warn (once) when a parent's value does not
    * match the sum of its children. The angles are still normalized to fill the
@@ -203,17 +199,6 @@ export default class SunburstChart {
     })
   }
 
-  /**
-   * Assign a colour to every node (explicit `color` wins, else the parent's
-   * colour tinted lighter). Done once so zoom preserves colours.
-   * Shared with the icicle - see charts/common/partition/Tint.
-   * @param {any} node
-   * @param {string} color
-   */
-  _colorPass(node, color) {
-    colorPass(node, color, this.cfg.tint, this._nodesAll)
-  }
-
   // ---------------------------------------------------------------- layout
 
   /**
@@ -221,6 +206,7 @@ export default class SunburstChart {
    * @param {any} focus
    */
   _relayout(focus) {
+    this.w.globals.sunburstFocusKey = focus && focus._key
     // The angular partition. `_t0`/`_t1` come back in degrees because that is
     // the interval handed in; the icicle passes pixels to the same recursion.
     this._focusMaxDepth = placeTree({
@@ -271,13 +257,15 @@ export default class SunburstChart {
   _applyLayout(mode) {
     const w = this.w
     const anims = w.config.chart.animations
-    const dur = !anims.enabled
-      ? 0
-      : mode === 'none'
+    const dyn = anims.dynamicAnimation
+    const dur =
+      !anims.enabled || mode === 'none'
         ? 0
-        : mode === 'update'
-          ? anims.dynamicAnimation.speed || 350
-          : anims.speed || 500
+        : mode === 'intro'
+          ? (anims.speed ?? 500)
+          : dyn.enabled
+            ? (dyn.speed ?? 350)
+            : 0
 
     // Supersede any in-flight zoom: stale frames from the previous pass check
     // this and stop, so a fast re-click can't leave two animations fighting.
@@ -299,10 +287,19 @@ export default class SunburstChart {
     const morphDur = morphActive ? morph.getSpeed() : 0
     this._morphLeafIndex = 0
 
-    // Geometry of the PREVIOUS render (stashed on the persistent chart ctx —
-    // this module is re-instantiated on every data update).
+    // The PREVIOUS render's nodes (stashed on the persistent chart ctx, as
+    // this module is re-instantiated on every data update), read live so an
+    // update landing mid-tween starts where each arc actually is.
     const prev =
       mode === 'update' ? /** @type {any} */ (this.ctx)._sunburstPrevGeoms : null
+    /** @param {any} n */
+    const geo = (n) =>
+      n._cur || { a0: n._t0, a1: n._t1, iR: n._iR, oR: n._oR }
+    /** @param {any} c  the arc pinched to nothing at its mid angle */
+    const pinch = (c) => {
+      const m = (c.a0 + c.a1) / 2
+      return { a0: m, a1: m, iR: c.iR, oR: c.iR }
+    }
 
     this._nodesAll.forEach((node) => {
       if (node._show) {
@@ -313,6 +310,7 @@ export default class SunburstChart {
           oR: node._oR,
         }
         if (!node._el) node._el = this._createArcEl(node)
+        setZoomCursor(this, node)
 
         // Cross-type morph (treemap -> sunburst): a leaf starts as the tile
         // that stood for the same row and unrolls into its arc. Interior rings
@@ -325,36 +323,58 @@ export default class SunburstChart {
         } else if ((mode === 'intro' || morphActive) && dur > 0) {
           this._sweepArc(node, target, morphActive ? morphDur : dur, gen)
         } else {
-          let from
-          let isNew = false
-          if (node._cur) {
-            // `_cur` is the arc's LIVE geometry (updated each frame), so an
-            // interrupted zoom continues smoothly from where it actually is.
-            from = node._cur
-          } else if (prev && prev.get(node._key)) {
-            from = prev.get(node._key) // survived a data update: morph in place
-          } else {
-            const mid = (target.a0 + target.a1) / 2 // new arc: unfurl from its slot
-            from = { a0: mid, a1: mid, iR: target.iR, oR: target.iR }
-            isNew = true
-          }
-          // Only genuinely new arcs fade in; arcs morphing from a previous
-          // geometry stay fully opaque while their shape tweens.
-          this._animateArc(node, from, target, dur, false, isNew, gen)
+          const p = prev && prev.get(node._key)
+          // `_cur` is the arc's LIVE geometry (updated each frame), so an
+          // interrupted zoom continues smoothly from where it actually is; a
+          // survivor of a data update morphs in place; a new arc unfurls from
+          // its slot and is the only one that fades in.
+          const from = node._cur || (p ? geo(p) : pinch(target))
+          this._animateArc(node, from, target, dur, false, !node._cur && !p, gen)
         }
       } else if (node._el && node._cur) {
-        const mid = (node._cur.a0 + node._cur.a1) / 2
-        const target = { a0: mid, a1: mid, iR: node._cur.iR, oR: node._cur.iR }
-        this._animateArc(node, node._cur, target, dur, true, false, gen)
+        this._animateArc(node, node._cur, pinch(node._cur), dur, true, false, gen)
       }
     })
 
+    // An arc the update dropped (or no longer places) collapses out with the
+    // morph, as a hidden one does, instead of vanishing at frame 0. The ghost
+    // joins _nodesAll (never shown), so a zoom or the next update picks it up
+    // mid-collapse like any other arc.
+    if (prev && dur && !morphActive) {
+      const keys = new Set(this._nodesAll.map((n) => n._show && n._key))
+      prev.forEach((/** @type {any} */ p, /** @type {string} */ k) => {
+        if (keys.has(k) || !(p._show || p._cur)) return
+        const el = this._graphics.drawPath({
+          fill: p._color,
+          stroke: this.strokeColor,
+          strokeWidth: this.strokeWidth,
+          classes: 'apexcharts-sunburst-arc',
+        })
+        el.node.setAttribute('data:name', p.name)
+        this._ringsG.add(el.attr({ opacity: p._el.attr('opacity') }))
+        const c = geo(p)
+        const g = { _el: el, _color: p._color, name: p.name, _key: k, _cur: c }
+        this._nodesAll.push(g)
+        this._animateArc(g, c, pinch(c), dur, true, false, gen)
+      })
+    }
+
+    // Over when the last arc lands (a newer layout takes that over), or now
+    // when nothing moves.
+    const end = Math.max(dur, morphDur)
+    if (end) {
+      this._ringsG.animate(end).after(() => {
+        if (this._zoomGen === gen && this._ringsG.node.isConnected)
+          new Animations(w, /** @type {any} */ (this.ctx)).animationCompleted(
+            this._ringsG.node,
+          )
+      })
+    } else w.globals.animationEnded = true
+
     // Stash what is now on screen so the NEXT data update can morph from it.
     const geoms = new Map()
     this._nodesAll.forEach((n) => {
-      if (n._show) {
-        geoms.set(n._key, { a0: n._t0, a1: n._t1, iR: n._iR, oR: n._oR })
-      }
+      if (n._show || n._cur) geoms.set(n._key, n)
     })
     ;/** @type {any} */ (this.ctx)._sunburstPrevGeoms = geoms
 
@@ -480,11 +500,9 @@ export default class SunburstChart {
    */
   _createArcEl(node) {
     const path = this._graphics.drawPath({
-      d: '',
       fill: node._color,
       stroke: this.strokeColor,
       strokeWidth: this.strokeWidth,
-      fillOpacity: 1,
       classes: 'apexcharts-sunburst-arc',
     })
     const el = path.node
@@ -501,9 +519,8 @@ export default class SunburstChart {
       String(!(node.children && node.children.length)),
     )
     this._tooltip.attach(el, node)
-    if (Environment.isBrowser()) {
+    if (Environment.isBrowser() && this.cfg.zoomOnClick !== false) {
       el.addEventListener('click', () => this._zoomTo(node))
-      el.style.cursor = 'pointer'
     }
     this._ringsG.add(path)
     return path
@@ -579,11 +596,14 @@ export default class SunburstChart {
       this._renderCurvedLabel(node)
     })
 
+    // Gen-checked: a superseded zoom's fade must not reveal labels over arcs
+    // the newer zoom is still moving.
+    const gen = this._zoomGen
+    labelsG.attr({ opacity: dur > 0 ? 0 : 1 })
     if (dur > 0) {
-      labelsG.attr({ opacity: 0 })
-      labelsG.animate(250, dur).attr({ opacity: 1 })
-    } else {
-      labelsG.attr({ opacity: 1 })
+      labelsG.animate(250, dur).during((/** @type {number} */ p) => {
+        if (this._zoomGen === gen) labelsG.attr({ opacity: p })
+      })
     }
   }
 
@@ -593,11 +613,11 @@ export default class SunburstChart {
    * @param {any} node
    */
   _renderCurvedLabel(node) {
-    if (!Environment.isBrowser()) return
     const style = this.cfg.dataLabels.style
     const w = this.w
     const r = (node._iR + node._oR) / 2
-    const mid = (node._t0 + node._t1) / 2
+    // Normalised, so a negative or past-360 startAngle flips the same half.
+    const mid = ((((node._t0 + node._t1) / 2) % 360) + 360) % 360
     const flip = mid > 90 && mid < 270
 
     // Small angular padding so text does not touch the radial edges.
@@ -667,7 +687,7 @@ export default class SunburstChart {
    */
   _zoomTo(node) {
     if (this.cfg.zoomOnClick === false) return
-    const next = resolveFocus(node, this._focus)
+    const next = resolveFocus(node, this._focus, this._roots)
     if (!next.changed) return
     this._focus = next.focus
     this._relayout(this._focus)
@@ -675,11 +695,6 @@ export default class SunburstChart {
     this._renderBreadcrumb()
   }
 
-  /** Root -> focus chain of nodes. */
-  _focusChain() {
-    return focusChain(this._focus)
-  }
-
   /**
    * Minimal self-contained breadcrumb (reuses the shared `.apexcharts-breadcrumb`
    * CSS classes, but does NOT depend on the drilldown feature).
@@ -702,7 +717,7 @@ export default class SunburstChart {
     nav.style.left = '0px'
 
     const crumbs = [{ name: 'All', node: null }].concat(
-      this._focusChain().map((n) => ({ name: n.name, node: n })),
+      focusChain(this._focus).map((n) => ({ name: n.name, node: n })),
     )
 
     crumbs.forEach((crumb, i) => {
@@ -746,22 +761,10 @@ export default class SunburstChart {
     })
 
     elWrap.appendChild(nav)
-    this._avoidChromeOverlap(nav)
-  }
-
-  /**
-   * The breadcrumb is an absolute overlay at top-left, so it can sit on top of
-   * a left-aligned title (or subtitle). After mounting, push it below any chart
-   * chrome it intersects. (Duplicated from drilldown's Breadcrumb on purpose —
-   * sunburst must not import the drilldown feature.)
-   * @param {any} nav
-   */
-  /**
-   * Shared with the treemap - see charts/common/Breadcrumb.
-   * @param {any} nav
-   */
-  _avoidChromeOverlap(nav) {
-    avoidChromeOverlap(this.w, nav)
+    // The breadcrumb is an absolute overlay at top-left: push it below any
+    // chart chrome it intersects (shared with the treemap, see
+    // charts/common/Breadcrumb).
+    avoidChromeOverlap(w, nav)
   }
 
   // ------------------------------------------------------------ geometry