apexcharts 8.2.0 → 8.3.1

package/src/charts/BarStacked.js

@@ -27,7 +27,7 @@ class BarStacked extends Bar {
     series = coreUtils.getLogSeries(series)
     this.yRatio = coreUtils.getLogYRatios(this.yRatio)
 
-    this.barHelpers.initVariables(series)
+    this.barHelpers.initVariables(series, seriesIndex)
 
     if (w.config.chart.stackType === '100%') {
       series = w.globals.comboCharts
@@ -74,10 +74,6 @@ class BarStacked extends Bar {
 
       const translationsIndex = this.setSeriesAxis(realIndex)
 
-      this.isReversed =
-        w.config.yaxis[this.yaxisIndex] &&
-        w.config.yaxis[this.yaxisIndex].reversed
-
       // el to which series will be drawn
       let elSeries = this.graphics.group({
         class: `apexcharts-series`,
@@ -160,6 +156,11 @@ class BarStacked extends Bar {
         if (this.isHorizontal) {
           paths = this.drawStackedBarPaths({
             ...commonPathOpts,
+            ...(this.barHelpers.rows && {
+              y:
+                initPositions.y +
+                this.barHelpers.barRow(realIndex, j) * yDivision,
+            }),
             zeroW,
             barHeight,
             yDivision,
@@ -263,6 +264,7 @@ class BarStacked extends Bar {
           series,
           barHeight,
           barWidth,
+          barXPosition: paths.barXPosition,
           elDataLabelsWrap,
           elGoalsMarkers,
           type: 'bar',
@@ -286,7 +288,7 @@ class BarStacked extends Bar {
       ret.add(elSeries)
     }
 
-    if (heldMirrors) this.settleHeldMirrors()
+    if (heldMirrors) this.settleHeldMirrors(ret)
 
     return ret
   }
@@ -310,8 +312,12 @@ class BarStacked extends Bar {
    * 'bottom' → 'top', where the endpoint really is rounded at the other end;
    * everywhere else the mirror is an exact identity on the settled shape, so
    * removing it changes nothing on screen.
+   *
+   * The marks are collected now, not when the timer fires: a query then also
+   * stripped the mirrors a LATER update was still holding mid-tween.
+   * @param {any} [ret] this draw's series group (default: the whole chart)
    */
-  settleHeldMirrors() {
+  settleHeldMirrors(ret) {
     const w = this.w
     if (!Environment.isBrowser()) return
 
@@ -319,18 +325,18 @@ class BarStacked extends Bar {
     // Matches the collapsing-series hold: morphSVG applies the stagger delay
     // twice, so the real tail runs past dynamicAnimation.speed on its own.
     const hold = (anim.dynamicAnimation.speed || 0) + (anim.speed || 0) + 100
+    const held = (ret ? ret.node : w.dom.baseEl).querySelectorAll(
+      '.apexcharts-flip-held',
+    )
 
     setTimeout(() => {
-      if (w.globals.isDestroyed || !Utils.elementExists(w.dom.baseEl)) return
-      w.dom.baseEl
-        .querySelectorAll('.apexcharts-flip-held')
-        .forEach((/** @type {Element} */ el) => {
-          el.classList.remove(
-            'apexcharts-flip-held',
-            'apexcharts-flip-y',
-            'apexcharts-flip-x',
-          )
-        })
+      held.forEach((/** @type {Element} */ el) => {
+        el.classList.remove(
+          'apexcharts-flip-held',
+          'apexcharts-flip-y',
+          'apexcharts-flip-x',
+        )
+      })
     }, hold)
   }
 
@@ -454,53 +460,34 @@ class BarStacked extends Bar {
     const j = indexes.j
     const realIndex = indexes.realIndex
     const translationsIndex = indexes.translationsIndex
+    // past the end of a short series reads as null, as a padded one would
+    const v = /** @type {any} */ (this.series)[i]?.[j] ?? null
 
-    let prevBarW = 0
-    for (let k = 0; k < this.groupCtx.prevXF.length; k++) {
-      prevBarW = prevBarW + this.groupCtx.prevXF[k][j]
-    }
-
-    // Where this series sits in its group's stack. See the note in
-    // drawStackedColumnPaths: the index has to count the series this renderer
-    // has already drawn for the group, which is exactly what prevX holds.
-    const gsi = this.groupCtx.prevX.length
-
-    if (gsi > 0) {
-      let bXP = zeroW
-
-      if (this.groupCtx.prevXVal[gsi - 1][j] < 0) {
-        bXP =
-          /** @type {any} */ (this.series)[i]?.[j] >= 0
-            ? this.groupCtx.prevX[gsi - 1][j] +
-              prevBarW -
-              (this.isReversed ? prevBarW : 0) * 2
-            : this.groupCtx.prevX[gsi - 1][j]
-      } else if (this.groupCtx.prevXVal[gsi - 1][j] >= 0) {
-        bXP =
-          /** @type {any} */ (this.series)[i]?.[j] >= 0
-            ? this.groupCtx.prevX[gsi - 1][j]
-            : this.groupCtx.prevX[gsi - 1][j] -
-              prevBarW +
-              (this.isReversed ? prevBarW : 0) * 2
-      }
-
-      barXPosition = bXP
+    // The layer below is found by x on a numeric axis, as for columns (see
+    // drawStackedColumnPaths): a series without a row's x leaves that row's
+    // stack as it was.
+    const g = this.groupCtx
+    const key = w.axisFlags.isXNumeric ? w.seriesData.seriesX[realIndex][j] : j
+    const top = g.tops.get(key)
+    if (top) {
+      const [prevX, prevVal, prevBarW] = top
+      const flip = (this.isReversed ? prevBarW : 0) * 2
+      barXPosition =
+        prevVal < 0
+          ? v >= 0
+            ? prevX + prevBarW - flip
+            : prevX
+          : v >= 0
+            ? prevX
+            : prevX - prevBarW + flip
     } else {
-      // the first series will not have prevX values
+      // nothing is stacked in this row yet
       barXPosition = zeroW
     }
 
-    if (/** @type {any} */ (this.series)[i]?.[j] === null) {
-      x = barXPosition
-    } else {
-      x =
-        barXPosition +
-        /** @type {any} */ (this.series)[i]?.[j] / this.invertedYRatio -
-        (this.isReversed
-          ? /** @type {any} */ (this.series)[i]?.[j] / this.invertedYRatio
-          : 0) *
-          2
-    }
+    x =
+      barXPosition +
+      (v / this.invertedYRatio) * (this.isReversed ? -1 : 1)
 
     const paths = this.barHelpers.getBarpaths({
       barYPosition,
@@ -516,6 +503,8 @@ class BarStacked extends Bar {
       w,
     })
 
+    this._setTop(key, top, g.xArrj[j], g.xArrjVal[j], g.xArrjF[j], realIndex, j)
+
     this.barHelpers.barBackground({
       j,
       i,
@@ -561,6 +550,7 @@ class BarStacked extends Bar {
     const bc = indexes.bc
     const realIndex = indexes.realIndex
     const translationsIndex = indexes.translationsIndex
+    const v = /** @type {any} */ (this.series)[i]?.[j] ?? null
 
     if (w.axisFlags.isXNumeric) {
       let seriesVal = w.seriesData.seriesX[realIndex][j]
@@ -589,12 +579,12 @@ class BarStacked extends Bar {
       let bYP
       if (prevVal < 0) {
         bYP =
-          /** @type {any} */ (this.series)[i]?.[j] >= 0
+          v >= 0
             ? prevYValue - prevBarH + (this.isReversed ? prevBarH : 0) * 2
             : prevYValue
       } else if (prevVal >= 0) {
         bYP =
-          /** @type {any} */ (this.series)[i]?.[j] >= 0
+          v >= 0
             ? prevYValue
             : prevYValue + prevBarH - (this.isReversed ? prevBarH : 0) * 2
       }
@@ -621,20 +611,10 @@ class BarStacked extends Bar {
       barYPosition = zeroH
     }
 
-    if (/** @type {any} */ (this.series)[i]?.[j]) {
-      y =
-        barYPosition -
-        /** @type {any} */ (this.series)[i]?.[j] /
-          this.yRatio[translationsIndex] +
-        (this.isReversed
-          ? /** @type {any} */ (this.series)[i]?.[j] /
-            this.yRatio[translationsIndex]
-          : 0) *
-          2
-    } else {
-      // fixes #3610
-      y = barYPosition
-    }
+    // a null stays on its layer below (#3610)
+    y =
+      barYPosition -
+      (v / this.yRatio[translationsIndex]) * (this.isReversed ? -1 : 1)
 
     const paths = this.barHelpers.getColumnPaths({
       barXPosition,
@@ -642,7 +622,9 @@ class BarStacked extends Bar {
       y1: barYPosition,
       y2: y,
       yRatio: this.yRatio[translationsIndex],
-      strokeWidth: this.strokeWidth,
+      // the series' width even for an empty segment, so a hidden layer keeps
+      // its place, but no inset at all when no stroke is drawn
+      strokeWidth: w.config.stroke.show ? this.strokeWidth : 0,
       isReversed: this.isReversed,
       series: this.series,
       realIndex: indexes.realIndex,
@@ -651,17 +633,7 @@ class BarStacked extends Bar {
       w,
     })
 
-    const t = g.yArrj[j]
-    if (!isNaN(t)) {
-      g.tops.set(key, [
-        t,
-        g.yArrjVal[j],
-        (top ? top[2] : 0) + g.yArrjF[j],
-        (top ? top[3] : 0) + (w.seriesData.series[realIndex][j] || 0),
-        top ? Math.min(top[0], top[4]) : 1 / 0,
-        top ? Math.max(top[0], top[5]) : -1 / 0,
-      ])
-    }
+    this._setTop(key, top, g.yArrj[j], g.yArrjVal[j], g.yArrjF[j], realIndex, j)
 
     this.barHelpers.barBackground({
       bc,
@@ -681,13 +653,33 @@ class BarStacked extends Bar {
         zeroH,
         realIndex,
         j,
-        0,
+        translationsIndex,
       ),
       barXPosition,
       x: w.axisFlags.isXNumeric ? x : x + xDivision,
       y,
     }
   }
+
+  /**
+   * Record the segment just drawn as the top of its stack. Per key it holds
+   * the top and value of the last segment drawn there, the summed lengths and
+   * raw values of every segment so far (the total label's value), and the
+   * extreme tops below that segment (the total label's position).
+   * @param {any} key @param {any} top @param {number} t @param {any} val
+   * @param {number} len @param {number} realIndex @param {number} j
+   */
+  _setTop(key, top, t, val, len, realIndex, j) {
+    if (isNaN(t)) return
+    this.groupCtx.tops.set(key, [
+      t,
+      val,
+      (top ? top[2] : 0) + len,
+      (top ? top[3] : 0) + (this.w.seriesData.series[realIndex][j] || 0),
+      top ? Math.min(top[0], top[4]) : 1 / 0,
+      top ? Math.max(top[0], top[5]) : -1 / 0,
+    ])
+  }
 }
 
 export default BarStacked

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,
     }
   }