apexcharts 8.2.0 → 8.3.0

package/src/charts/BoxCandleStick.js

@@ -5,9 +5,8 @@ import Fill from '../modules/Fill'
 import Graphics from '../modules/Graphics'
 import Series from '../modules/Series'
 import Utils from '../utils/Utils'
-import { buildJitterGroups, renderJitter } from './common/Jitter'
+import { buildJitterGroups, jitterExtent, renderJitter } from './common/Jitter'
 import {
-  datumKey,
   lengthTransitionEnabled,
   renderBarExitGhosts,
 } from '../modules/animations/LengthTransition'
@@ -55,7 +54,7 @@ class BoxCandleStick extends Bar {
     if (!keyed || keyed.size === 0 || !row || row.length === 0) return false
     let survivors = 0
     for (let j = 0; j < row.length; j++) {
-      if (keyed.has(datumKey(this.w, realIndex, j))) survivors++
+      if (keyed.has(this._keys(realIndex)[j])) survivors++
     }
     return survivors / keyed.size < 0.5
   }
@@ -86,7 +85,7 @@ class BoxCandleStick extends Bar {
       }
       this._prevHalves[realIndex] = map
     }
-    const halves = map && map.get(datumKey(this.w, realIndex, j))
+    const halves = map && map.get(this._keys(realIndex)[j])
     return halves && halves.length === 2 ? halves[pi] : null
   }
 
@@ -105,15 +104,13 @@ class BoxCandleStick extends Bar {
     this.candlestickOptions = this.w.config.plotOptions.candlestick
     this.boxOptions = this.w.config.plotOptions.boxPlot
     this.isHorizontal = w.config.plotOptions.bar.horizontal
-    this.isOHLC =
-      this.candlestickOptions && this.candlestickOptions.type === 'ohlc'
 
     this.coreUtils = new CoreUtils(this.w)
     series = this.coreUtils.getLogSeries(series)
     this.series = series
     this.yRatio = this.coreUtils.getLogYRatios(this.yRatio)
 
-    this.barHelpers.initVariables(series)
+    this.barHelpers.initVariables(series, seriesIndex)
 
     const ret = graphics.group({
       class: `apexcharts-${type}-series apexcharts-plot-series`,
@@ -124,6 +121,8 @@ class BoxCandleStick extends Bar {
     // beside candles), and `i` counts only this type's series, not the
     // config's: reading either drew a candle as a box, or a box as a candle.
     this.isBoxPlot = type === 'boxPlot'
+    this.isOHLC = !this.isBoxPlot && this.candlestickOptions?.type === 'ohlc'
+    const jx = jitterExtent(w.candleData.seriesBoxPoints, w)
 
     for (let i = 0; i < series.length; i++) {
       /** @type {any} */
@@ -264,7 +263,7 @@ class BoxCandleStick extends Bar {
         yArrj.push(y)
 
         // drawVerticalBoxPaths returns culled:true for off-screen bars (it
-        // skipped the path-string build). Horizontal bars are never culled.
+        // skipped the path-string build), and both do for a null datum.
         if (paths.culled) {
           continue
         }
@@ -310,6 +309,7 @@ class BoxCandleStick extends Bar {
               i,
               pathFrom: this._prevBoxHalf(realIndex, j, pi) ?? paths.pathFrom,
               fadeReveal,
+              noLabel: pi > 0,
               pathTo,
               strokeWidth,
               elSeries,
@@ -343,14 +343,14 @@ class BoxCandleStick extends Bar {
               )
             let center, halfExtent, alongFn
             if (this.isHorizontal) {
-              const yRatio = this.invertedYRatio
+              const yRatio = this.invertedYRatio * (this.isReversed ? -1 : 1)
               const bh = barHeight ?? 0
               const z = zeroW ?? 0
               center = paths.barYPosition + bh / 2
               halfExtent = bh / 2
               alongFn = (/** @type {number} */ v) => z + logVal(v) / yRatio
             } else {
-              const yRatio = this.yRatio[translationsIndex]
+              const yRatio = this.yRatio[translationsIndex] * (this.isReversed ? -1 : 1)
               const bw = barWidth ?? 0
               const z = zeroH ?? 0
               center = paths.barXPosition + bw / 2
@@ -358,8 +358,8 @@ class BoxCandleStick extends Bar {
               alongFn = (/** @type {number} */ v) => z - logVal(v) / yRatio
             }
             const groups = buildJitterGroups({
-              w,
               points: pts,
+              extent: jx,
               seedA: realIndex,
               seedB: j,
               center,
@@ -397,18 +397,16 @@ class BoxCandleStick extends Bar {
       // gone (a series hidden from the legend, rows removed) shrink away under
       // the survivors instead of vanishing. Keyed by every datum the series
       // still has, culled ones included: a candle only scrolled off-screen
-      // has not left, it is just not drawn.
+      // has not left, it is just not drawn. One turned null has left.
       // (Not when the series fades: the fade replaces the whole set at once.)
       if (w.globals.previousPaths.length > 0 && !fadeReveal) {
-        const newKeys = []
-        for (let j = 0; j < series[i].length; j++) {
-          newKeys.push(datumKey(w, realIndex, j))
-        }
         renderBarExitGhosts({
           w,
           elSeries,
           record: this._prevRecord(realIndex),
-          newKeys,
+          newKeys: this._keys(realIndex).filter(
+            (_, j) => series[i][j] != null,
+          ),
           isHorizontal: this.isHorizontal,
           speed: w.config.chart.animations.dynamicAnimation.speed,
         })
@@ -449,7 +447,7 @@ class BoxCandleStick extends Bar {
     const colorPos = getColor(candleColors.upward)
     const colorNeg = getColor(candleColors.downward)
 
-    const yRatio = this.yRatio[indexes.translationsIndex]
+    const yRatio = this.yRatio[indexes.translationsIndex] * (this.isReversed ? -1 : 1)
 
     const ohlc = this.getOHLCValue(realIndex, j)
     let l1 = zeroH
@@ -478,10 +476,9 @@ class BoxCandleStick extends Bar {
       barXPosition = pos.barXPosition
     }
 
-    if (
-      typeof /** @type {any} */ (this.series)[i]?.[j] === 'undefined' ||
-      /** @type {any} */ (this.series)[i]?.[j] === null
-    ) {
+    // a null or missing datum draws nothing, culled like an off-screen one
+    const hole = /** @type {any} */ (this.series)[i]?.[j] == null
+    if (hole) {
       y1 = zeroH
       y2 = zeroH
     } else {
@@ -506,10 +503,11 @@ class BoxCandleStick extends Bar {
     // are bounded by what was visible before, and large datasets skip the
     // morph for the bulk fade anyway.
     if (
-      cullBounds &&
-      (barXPosition + barWidth < cullBounds.lo ||
-        barXPosition > cullBounds.hi) &&
-      !this._wasOnScreen(realIndex, j)
+      hole ||
+      (cullBounds &&
+        (barXPosition + barWidth < cullBounds.lo ||
+          barXPosition > cullBounds.hi) &&
+        !this._wasOnScreen(realIndex, j))
     ) {
       return {
         pathTo: null,
@@ -646,7 +644,7 @@ class BoxCandleStick extends Bar {
     const getColor = (color) =>
       Array.isArray(color) ? color[realIndex] : color
 
-    const yRatio = this.invertedYRatio
+    const yRatio = this.invertedYRatio * (this.isReversed ? -1 : 1)
     const ohlc = this.getOHLCValue(realIndex, j)
 
     let color =
@@ -669,10 +667,8 @@ class BoxCandleStick extends Bar {
     // Bar.drawBarPaths.
     const barYPosition = y + barHeight * this.visibleI
 
-    if (
-      typeof /** @type {any} */ (this.series)[i]?.[j] === 'undefined' ||
-      /** @type {any} */ (this.series)[i]?.[j] === null
-    ) {
+    const hole = /** @type {any} */ (this.series)[i]?.[j] == null
+    if (hole) {
       x1 = zeroW
       x2 = zeroW
     } else {
@@ -743,6 +739,7 @@ class BoxCandleStick extends Bar {
       ),
       barYPosition,
       color,
+      culled: hole,
     }
   }
 

package/src/charts/Icicle.js

@@ -38,10 +38,12 @@ import {
 import {
   bandScale,
   farEdge,
+  focusByKey,
   focusChain,
   parseSize,
   placeTree,
   resolveFocus,
+  setZoomCursor,
   sortTree,
   validateStrict,
 } from './common/partition/Partition'
@@ -131,6 +133,10 @@ export default class IcicleChart {
     this._roots = buildHierarchy(this.w)
     if (!this._roots.length) return g
     this._roots.forEach((r) => fillValues(r))
+    // Colour before sorting, so a branch keeps its authored palette slot (the
+    // one its legend marker shows) whatever `sort` does to its position.
+    this._nodesAll = []
+    this._colorNodes()
     sortTree(this._roots, this.cfg.sort)
     if (this.cfg.partition === 'strict') {
       validateStrict(this._roots, {
@@ -139,8 +145,6 @@ export default class IcicleChart {
       })
     }
 
-    this._nodesAll = []
-    this._colorNodes()
     this.total = this._roots.reduce((s, r) => s + Math.max(0, r.value), 0) || 1
     this._tooltip.total = this.total
 
@@ -149,7 +153,12 @@ export default class IcicleChart {
     g.add(this._cellsG)
     g.add(this._labelsG)
 
-    this._focus = null
+    // The focus outlives this instance by key (_relayout clears a stale one).
+    this._focus = focusByKey(
+      w.globals.icicleFocusKey,
+      this._nodesAll,
+      this._roots,
+    )
     this._relayout(this._focus)
 
     // Same gating as the sunburst and the pie family: a wipe intro on first
@@ -194,7 +203,7 @@ export default class IcicleChart {
     while (
       level.length === 1 &&
       level[0].children &&
-      level[0].children.length > 1
+      level[0].children.length
     ) {
       trunk.push(level[0])
       level = level[0].children
@@ -233,6 +242,7 @@ export default class IcicleChart {
    * @param {any} focus
    */
   _relayout(focus) {
+    this.w.globals.icicleFocusKey = focus && focus._key
     const extent = this._valueExtent()
     const maxDepth = this.cfg.maxDepth
     // `maxDepth` counts LEVELS; the walk wants a depth index.
@@ -378,13 +388,15 @@ export default class IcicleChart {
     // (`dynamicAnimation.speed`) like an update, NOT on `animations.speed`,
     // which paces the first render. Reading the intro's clock made a click take
     // 800ms by default, which feels like lag rather than motion.
-    const dur = !anims.enabled
-      ? 0
-      : mode === 'none'
+    const dyn = anims.dynamicAnimation
+    const dur =
+      !anims.enabled || mode === 'none'
         ? 0
-        : mode === 'update' || mode === 'zoom'
-          ? 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.
@@ -401,7 +413,7 @@ export default class IcicleChart {
         if (!node._el) node._el = this._createCellEl(node)
         // Per-layout, not per-element: a zoom changes which branches are cut.
         node._el.node.setAttribute('data:clipped', String(!!node._clipped))
-        this._setCursor(node)
+        setZoomCursor(this, node)
 
         if (mode === 'intro' && dur > 0) {
           this._wipeCell(node, to, dur, gen)
@@ -415,7 +427,7 @@ export default class IcicleChart {
           // interrupted zoom continues from where it actually is.
           from = node._cur
         } else if (prev && prev.get(node._key)) {
-          from = prev.get(node._key) // survived a data update: tween in place
+          from = prev.get(node._key)() // survived a data update: tween in place
         } else {
           // A new cell grows out of the middle of the slot it is taking.
           from = {
@@ -439,10 +451,12 @@ export default class IcicleChart {
       }
     })
 
-    // Stash what is now on screen so the NEXT data update can tween from it.
+    // Stash what is on screen so the NEXT data update can tween from it: read
+    // live, so an update landing mid-tween starts where the cell actually is.
     const geoms = new Map()
     this._nodesAll.forEach((n) => {
-      if (n._show) geoms.set(n._key, this._box(n))
+      const b = this._box(n)
+      if (n._show) geoms.set(n._key, () => n._cur || b)
     })
     ;/** @type {any} */ (this.ctx)._iciclePrevGeoms = geoms
 
@@ -624,11 +638,14 @@ export default class IcicleChart {
       if (node._clipped) this._renderMoreMark(node)
     })
 
+    // Gen-checked: a superseded zoom's fade must not reveal labels over cells
+    // 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 })
+      })
     }
   }
 
@@ -642,7 +659,6 @@ export default class IcicleChart {
    * @param {any} node
    */
   _renderLabel(node) {
-    if (!Environment.isBrowser()) return
     const dl = this.cfg.dataLabels
     const style = dl.style
     const box = this._box(node)
@@ -669,7 +685,8 @@ export default class IcicleChart {
     const room = along - 8
     let label = node.name
     if (dl.showValue) {
-      const full = `${node.name}: ${node.value}`
+      // Trimmed like the node tooltip, so a rolled-up 0.1 + 0.2 reads 0.3.
+      const full = `${node.name}: ${+node.value.toPrecision(12)}`
       if (this._fits(full, room, fontPx)) label = full
     }
     const text = this._truncate(label, room, fontPx)
@@ -726,7 +743,6 @@ export default class IcicleChart {
    * @param {any} node
    */
   _renderMoreMark(node) {
-    if (!Environment.isBrowser()) return
     const box = this._box(node)
     const along = this._vertical ? box.w : box.h
     if (along < 18) return
@@ -790,22 +806,6 @@ export default class IcicleChart {
 
   // ----------------------------------------------------------------- zoom
 
-  /**
-   * A cell offers the pointer only while clicking it would change the view.
-   * A leaf under the current focus, or the single root of a one-root tree,
-   * resolves to the focus the reader is already on, and a pointer there
-   * promises a zoom that cannot happen. Asked on every layout, because a zoom
-   * changes the answer for every cell.
-   * @param {any} node
-   */
-  _setCursor(node) {
-    if (!Environment.isBrowser() || this.cfg.zoomOnClick === false) return
-    node._el.node.style.cursor = resolveFocus(node, this._focus, this._roots)
-      .changed
-      ? 'pointer'
-      : 'default'
-  }
-
   /**
    * Focus a node (zoom in), or zoom out one level when the current focus is
    * clicked.