apexcharts 8.2.0 → 8.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apexcharts",
-  "version": "8.2.0",
+  "version": "8.3.1",
   "description": "A JavaScript Chart Library",
   "repository": {
     "type": "git",

package/src/apexcharts.js

@@ -862,6 +862,9 @@ export default class ApexCharts {
         ) {
           me.keyboardNavigation?.init()
         }
+        // The focus note is for this render only: one that nav was off for
+        // must not pull focus back when a later update turns nav on
+        w.interact.keyNav = null
 
         if (
           Environment.isBrowser() &&
@@ -1055,50 +1058,30 @@ export default class ApexCharts {
     // fixes apexcharts.js#1488
     w.interact.selection = undefined
 
-    // try shallow comparison first before expensive JSON.stringify
-    if (this.lastUpdateOptions) {
-      // quick shallow check on top-level keys
-      if (Utils.shallowEqual(this.lastUpdateOptions, options)) {
-        return Promise.resolve(this)
-      }
-
-      // If shallow check fails, do deep comparison only for critical paths
-      // check series separately (skipped for data-heavy series, where the
-      // stringify costs more than the render it might save)
-      if (
-        options.series &&
-        this.lastUpdateOptions.series &&
-        !ApexCharts._optionsTooBigToCompare(options)
-      ) {
-        if (
-          Utils.stringifyForCompare(this.lastUpdateOptions.series) ===
-          Utils.stringifyForCompare(options.series)
-        ) {
-          // series unchanged, check other options
-          const optionsWithoutSeries = { ...options }
-          const lastWithoutSeries = { ...this.lastUpdateOptions }
-          delete optionsWithoutSeries.series
-          delete lastWithoutSeries.series
-
-          if (Utils.shallowEqual(optionsWithoutSeries, lastWithoutSeries)) {
-            return Promise.resolve(this)
-          }
-        }
-      }
-    }
+    // An identical update is skipped in update(), against the options it
+    // last rendered. The checks that used to run here compared this raw
+    // payload with those processed options, so they could only match a
+    // payload of bare values, and a series payload never.
 
     if (options.series) {
       this.data.resetParsingFlags()
+      this.series.clearSeriesCache()
 
-      this.series.resetSeries(false, true, false)
       if (options.series.length && options.series[0].data) {
+        // A partial row inherits from the baseline resetSeries() restores,
+        // collapsed rows emptied. Shallow rows: restoring it in place deep
+        // cloned every old point twice, and the merge then replaced it.
+        const peek = w.globals._initialSeriesPeek
+        const base = this.series.emptyCollapsedSeries(
+          Utils.copySeriesShallow(Array.isArray(peek) ? peek : w.config.series),
+        )
         /**
          * @param {Record<string, any>} s
          * @param {number} i
          */
         options.series = options.series.map(
           (/** @type {any} */ s, /** @type {any} */ i) => {
-            return this.updateHelpers._extendSeries(s, i)
+            return this.updateHelpers._extendSeries(s, i, base[i])
           },
         )
       }
@@ -1232,11 +1215,7 @@ export default class ApexCharts {
     // zoom, a brush moving its target, updateSeries(data, false)) silently
     // switched off the animation of every append after it.
     me.w.globals.shouldAnimate = true
-    // previous paths feed the update morph; with animations off nothing
-    // consumes them, and the capture is O(n) (stream-frame + DOM walk)
-    if (me.w.config.chart.animations.enabled) {
-      me.series.getPreviousPaths()
-    }
+    me.updateHelpers.capture(true)
 
     // Histogram, waterfall and dumbbell: `config.series` holds rows this
     // library derived (binned counts, accumulated [start, end] pairs, merged
@@ -1347,24 +1326,22 @@ export default class ApexCharts {
       // and cloning megabytes of series data costs more per update than the
       // render it might save. Data-heavy paths (updateSeries/appendData) call
       // update() with no options at all and skip straight through.
-      if (
-        options &&
-        this.lastUpdateOptions &&
-        !ApexCharts._optionsTooBigToCompare(options) &&
-        Utils.stringifyForCompare(this.lastUpdateOptions) ===
-          Utils.stringifyForCompare(options)
-      ) {
+      //
+      // The comparison string is taken now and kept: a deep clone kept to be
+      // stringified on the next call cost a clone per update. The options
+      // themselves are kept by reference (the payload copied at the boundary
+      // is the chart's own) for the highlight filter's radial pass.
+      const key =
+        options && !ApexCharts._optionsTooBigToCompare(options)
+          ? Utils.stringifyForCompare(options)
+          : null
+      // (Every reset nulls lastUpdateOptions, which disarms the key too.)
+      if (this.lastUpdateOptions && key === this._lastUpdateKey) {
         // Options are identical, skip the update
         return resolve(this)
       }
-
-      // Series data changed (or is too big to compare cheaply): any previously
-      // stored options no longer describe the chart, so clear rather than
-      // deep-clone a potentially huge object.
-      this.lastUpdateOptions =
-        options && !ApexCharts._optionsTooBigToCompare(options)
-          ? Utils.clone(options)
-          : null
+      this._lastUpdateKey = key
+      this.lastUpdateOptions = key && options
 
       // A type-change morph that has already been shown is over for this
       // render: it starts from the screen, not from the old chart's shapes.
@@ -2609,22 +2586,26 @@ export default class ApexCharts {
    * Returns the highest y value in the specified series.
    *
    * @param {number} [seriesIndex=0]
-   * @returns {number}
+   * @returns {number | undefined}
    */
   getHighestValueInSeries(seriesIndex = 0) {
-    const range = new Range(this.w)
-    return range.getMinYMaxY(seriesIndex).highestY
+    return (
+      this.w.seriesData.series[seriesIndex] &&
+      new Range(this.w).getMinYMaxY(seriesIndex).highestY
+    )
   }
 
   /**
    * Returns the lowest y value in the specified series.
    *
    * @param {number} [seriesIndex=0]
-   * @returns {number}
+   * @returns {number | undefined}
    */
   getLowestValueInSeries(seriesIndex = 0) {
-    const range = new Range(this.w)
-    return range.getMinYMaxY(seriesIndex).lowestY
+    return (
+      this.w.seriesData.series[seriesIndex] &&
+      new Range(this.w).getMinYMaxY(seriesIndex).lowestY
+    )
   }
 
   /**

package/src/assets/apexcharts.css

@@ -1040,6 +1040,41 @@ rect.legend-mouseover-inactive,
   cursor: move
 }
 
+.apexcharts-wheel-hint {
+  position: absolute;
+  inset: 0;
+  z-index: 12;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.apexcharts-wheel-hint-visible {
+  opacity: 1;
+}
+
+.apexcharts-wheel-hint span {
+  padding: 6px 12px;
+  border-radius: 8px;
+  font-size: 13px;
+  color: #fff;
+  background: rgba(28, 28, 31, 0.82);
+}
+
+.apexcharts-theme-dark .apexcharts-wheel-hint span {
+  color: #1c1c1f;
+  background: rgba(255, 255, 255, 0.9);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .apexcharts-wheel-hint {
+    transition: none;
+  }
+}
+
 .apexcharts-menu-icon,
 .apexcharts-measure-icon,
 .apexcharts-pan-icon,
@@ -1262,21 +1297,16 @@ rect.legend-mouseover-inactive,
   fill: none
 }
 
-.apexcharts-pie-label-delay,
+/* A slow fade, on purpose: these come in while the dots are still easing
+   into place, so a longer fade reads as arriving WITH the crowd. */
 .apexcharts-unit-label-delay {
   opacity: 0;
   animation-name: opaque;
-  animation-duration: .3s;
+  animation-duration: .5s;
   animation-fill-mode: forwards;
   animation-timing-function: ease
 }
 
-/* Slower than the pie's, on purpose: these come in while the dots are still
-   easing into place, so a longer fade reads as arriving WITH the crowd. */
-.apexcharts-unit-label-delay {
-  animation-duration: .5s
-}
-
 .apexcharts-radialbar-label {
   cursor: pointer;
 }

package/src/charts/Bar.js

@@ -7,10 +7,10 @@ import Filters from '../modules/Filters'
 import Graphics from '../modules/Graphics'
 import Animations, { computeStagger } from '../modules/Animations'
 import {
-  datumKey,
   lengthTransitionEnabled,
   renderBarExitGhosts,
   seriesJoin,
+  seriesKeys,
 } from '../modules/animations/LengthTransition'
 import Series from '../modules/Series'
 import AxisMapping from '../modules/AxisMapping'
@@ -136,7 +136,7 @@ class Bar {
   /**
    * Point the per-series axis state at this series' y axis. Every bar-family
    * renderer calls it before initialPositions, which reads the baseline by
-   * this.translationsIndex.
+   * this.translationsIndex and flips it for a reversed axis.
    * @param {number} realIndex
    * @return {number} translationsIndex
    */
@@ -145,6 +145,7 @@ class Bar {
       this.yaxisIndex = this.w.globals.seriesYAxisReverseMap[realIndex]
       this.translationsIndex = realIndex
     }
+    this.isReversed = this.w.config.yaxis[this.yaxisIndex]?.reversed
     return this.translationsIndex
   }
 
@@ -163,7 +164,7 @@ class Bar {
     this.series = series
     this.yRatio = coreUtils.getLogYRatios(this.yRatio)
 
-    this.barHelpers.initVariables(series)
+    this.barHelpers.initVariables(series, seriesIndex)
 
     const ret = graphics.group({
       class: 'apexcharts-bar-series apexcharts-plot-series',
@@ -210,10 +211,6 @@ class Bar {
 
       const translationsIndex = this.setSeriesAxis(realIndex)
 
-      this.isReversed =
-        w.config.yaxis[this.yaxisIndex] &&
-        w.config.yaxis[this.yaxisIndex].reversed
-
       if (this.isPyramid) {
         // Recompute the per-segment trapezoid layout once per series, before
         // drawing any of its segments. Each entry yields the segment's top
@@ -322,6 +319,9 @@ class Bar {
         if (this.isHorizontal) {
           paths = this.drawBarPaths({
             ...pathsParams,
+            ...(this.barHelpers.rows && {
+              y: initY + this.barHelpers.barRow(realIndex, j) * yDivision,
+            }),
             barHeight,
             zeroW,
             yDivision,
@@ -426,6 +426,7 @@ class Bar {
           series,
           barHeight: Math.abs(paths.barHeight ? paths.barHeight : barHeight),
           barWidth: Math.abs(paths.barWidth ? paths.barWidth : barWidth),
+          barXPosition: paths.barXPosition,
           elDataLabelsWrap,
           elGoalsMarkers,
           elBarShadows,
@@ -441,15 +442,11 @@ class Bar {
       // Exit ghosts: previous datums whose keys are gone shrink to their
       // baseline edge and fade under the reflowing survivors.
       if (w.globals.previousPaths.length > 0) {
-        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),
           isHorizontal: this.isHorizontal,
           speed: w.config.chart.animations.dynamicAnimation.speed,
         })
@@ -461,7 +458,7 @@ class Bar {
     return ret
   }
 
-  /** @param {{ hl?: any, realIndex?: any, pathFill?: any, lineFill?: any, j?: any, i?: any, columnGroupIndex?: any, pathFrom?: any, pathTo?: any, strokeWidth?: any, elSeries?: any, x?: any, y?: any, y1?: any, y2?: any, series?: any, barHeight?: any, barWidth?: any, barXPosition?: any, barYPosition?: any, elDataLabelsWrap?: any, elGoalsMarkers?: any, elBarShadows?: any, visibleSeries?: any, type?: any, classes?: any, fadeReveal?: boolean }} opts */
+  /** @param {{ hl?: any, realIndex?: any, pathFill?: any, lineFill?: any, j?: any, i?: any, columnGroupIndex?: any, pathFrom?: any, pathTo?: any, strokeWidth?: any, elSeries?: any, x?: any, y?: any, y1?: any, y2?: any, series?: any, barHeight?: any, barWidth?: any, barXPosition?: any, barYPosition?: any, elDataLabelsWrap?: any, elGoalsMarkers?: any, elBarShadows?: any, visibleSeries?: any, type?: any, classes?: any, fadeReveal?: boolean, noLabel?: boolean }} opts */
   renderSeries({
     hl,
     realIndex,
@@ -490,6 +487,7 @@ class Bar {
     type,
     classes,
     fadeReveal = false,
+    noLabel, // a datum's extra paths (box halves, box lane) label nothing
   }) {
     const w = this.w
     const graphics = new Graphics(this.w, this.ctx)
@@ -619,6 +617,7 @@ class Bar {
         barYPosition,
         visibleSeries,
         hl: hl?.label,
+        noLabel,
       })
     )
 
@@ -640,28 +639,23 @@ class Bar {
 
     // Drawn only to slide out of view (see _wasOnScreen): removed once the
     // update has landed, so nothing is left lying off-screen.
+    // Culled on the bar's own centre: the label x carries dataLabels.offsetX,
+    // which dropped the first or last columns even with labels off.
     let leaving = false
     if (!w.globals.isBarHorizontal) {
-      if (
-        dataLabelsObj.dataLabelsPos.dataLabelsX +
-          Math.max(barWidth, w.globals.barPadForNumericAxis) <
-          0 ||
-        dataLabelsObj.dataLabelsPos.dataLabelsX -
-          Math.max(barWidth, w.globals.barPadForNumericAxis) >
-          w.layout.gridWidth
-      ) {
+      const cx =
+        barXPosition === undefined
+          ? dataLabelsObj.dataLabelsPos.dataLabelsX
+          : barXPosition + barWidth / 2
+      const pad = Math.max(barWidth, w.globals.barPadForNumericAxis)
+      if (cx + pad < 0 || cx - pad > w.layout.gridWidth) {
         if (this._wasOnScreen(realIndex, j)) leaving = true
         else skipDrawing = true
       }
     }
 
-    if (
-      /** @type {Record<string,any>} */ (w.config.series[i]).data[j] &&
-      /** @type {Record<string,any>} */ (w.config.series[i]).data[j].strokeColor
-    ) {
-      lineFill = /** @type {Record<string,any>} */ (w.config.series[i]).data[j]
-        .strokeColor
-    }
+    const datum = /** @type {any} */ (w.config.series[realIndex]).data[j]
+    if (datum && datum.strokeColor) lineFill = datum.strokeColor
 
     const fill = pathFill
 
@@ -711,7 +705,7 @@ class Bar {
           pathTo,
           stroke: lineFill,
           strokeWidth,
-          strokeLineCap: w.config.stroke.lineCap,
+          strokeLinecap: w.config.stroke.lineCap,
           fill: pathFill,
           pathToInterp,
           animationDelay: delay,
@@ -777,12 +771,12 @@ class Bar {
         cy: dataLabelsObj.dataLabelsPos.bcy,
         cx: dataLabelsObj.dataLabelsPos.bcx,
         j,
-        val: w.seriesData.series[i][j],
+        val: w.seriesData.series[realIndex][j],
         barHeight,
         barWidth,
         // Datum identity for the next update's keyed join (see
         // LengthTransition): survivors match by key, not array position.
-        'data:pathKey': datumKey(w, realIndex, j),
+        'data:pathKey': this._keys(realIndex)[j],
       })
 
       // Highlight filter: fade this whole and draw its part above it (below
@@ -886,7 +880,10 @@ class Bar {
     // band.
     if (w.config.plotOptions.bar.hideZeroBarsWhenGrouped) {
       const { nonZeroColumns, zeroEncounters } =
-        this.barHelpers.getZeroValueEncounters({ i, j })
+        this.barHelpers.getZeroValueEncounters({
+          i: indexes.realIndex,
+          j,
+        })
 
       if (nonZeroColumns > 0) {
         barHeight = (this.seriesLen * barHeight) / nonZeroColumns
@@ -1054,7 +1051,7 @@ class Bar {
     } else {
       if (w.config.plotOptions.bar.hideZeroBarsWhenGrouped) {
         const { nonZeroColumns, zeroEncounters } =
-          this.barHelpers.getZeroValueEncounters({ i, j })
+          this.barHelpers.getZeroValueEncounters({ i: realIndex, j })
 
         if (nonZeroColumns > 0) {
           barWidth = (this.seriesLen * barWidth) / nonZeroColumns
@@ -1122,6 +1119,7 @@ class Bar {
   /** @param {{x: any, barWidth: any, realIndex: any, j: any}} opts */
   getBarXForNumericXAxis({ x, barWidth, realIndex, j }) {
     const w = this.w
+    const overlay = isHistogramOverlay(w)
     let sxI = realIndex
     if (!w.seriesData.seriesX[realIndex].length) {
       sxI = w.globals.maxValsInArrayIndex
@@ -1133,15 +1131,15 @@ class Bar {
       // ranges cannot drift apart.
       x =
         AxisMapping.dataXToPx(w, w.seriesData.seriesX[sxI][j]) -
-        (barWidth * this.seriesLen) / 2
+        (barWidth * (overlay ? 1 : this.seriesLen)) / 2
     }
 
     // Overlaid histogram series all sit on the bin, rather than stepping across
-    // it one series-width at a time. `seriesLen` is already forced to 1 above,
-    // so `barWidth` is the whole bin and stepping would march each series clear
-    // of the last.
+    // it one series-width at a time. `barWidth` is already the whole bin, so
+    // centring on seriesLen bars or stepping would march each series clear of
+    // the last.
     return {
-      barXPosition: x + (isHistogramOverlay(w) ? 0 : barWidth * this.visibleI),
+      barXPosition: x + (overlay ? 0 : barWidth * this.visibleI),
       x,
     }
   }
@@ -1163,7 +1161,18 @@ class Bar {
   _wasOnScreen(realIndex, j) {
     if (!lengthTransitionEnabled(this.w)) return false
     const keyed = this._prevKeyedPaths(realIndex)
-    return !!keyed && keyed.has(datumKey(this.w, realIndex, j))
+    return !!keyed && keyed.has(this._keys(realIndex)[j])
+  }
+
+  /**
+   * This render's datum keys for a series (see seriesKeys), as stamped on
+   * each bar and looked up in the previous render's.
+   * @param {number} realIndex
+   * @returns {string[]}
+   */
+  _keys(realIndex) {
+    const c = (/** @type {any} */ (this)._keyCache ||= {})
+    return (c[realIndex] ||= seriesKeys(this.w, realIndex))
   }
 
   /**
@@ -1235,20 +1244,21 @@ class Bar {
     if (lengthTransitionEnabled(w) && w.globals.previousPaths.length > 0) {
       const record = this._prevRecord(realIndex)
       const dataLen = w.seriesData.series[realIndex]?.length ?? 0
+      const keyed = record && this._prevKeyedPaths(realIndex)
       if (!record) {
         result = dataLen > 0 // a brand-new series entering
-      } else if (record.paths.length !== dataLen) {
-        result = true
+      } else if (keyed) {
+        // Off-screen bars are not drawn, so a zoomed series has fewer paths
+        // than points and comparing counts called every value update a
+        // layout change. The datum count comes from the previous frame; a
+        // drawn datum whose key is gone has left.
+        const now = new Set(this._keys(realIndex))
+        result =
+          (w.globals.prevStreamFrame?.seriesY?.[realIndex]?.length ??
+            dataLen) !== dataLen ||
+          [...keyed.keys()].some((k) => !now.has(k))
       } else {
-        const keyed = this._prevKeyedPaths(realIndex)
-        if (keyed) {
-          for (let j = 0; j < dataLen; j++) {
-            if (!keyed.has(datumKey(w, realIndex, j))) {
-              result = true
-              break
-            }
-          }
-        }
+        result = record.paths.length !== dataLen
       }
     }
     this._ltCache[realIndex] = result
@@ -1317,7 +1327,7 @@ class Bar {
     let isNewDatum = false
     const keyed = this._prevKeyedPaths(realIndex)
     if (keyed) {
-      const prev = keyed.get(datumKey(w, realIndex, j))
+      const prev = keyed.get(this._keys(realIndex)[j])
       if (prev) {
         oldD = prev.d
       } else {
@@ -1535,14 +1545,11 @@ class Bar {
    * @returns {boolean | null} null when there is no previous record to consult
    */
   getPreviousFlip(realIndex, j) {
-    const w = this.w
     const record = this._prevRecord(realIndex)
     if (!record) return null
 
     const keyed = this._prevKeyedPaths(realIndex)
-    const prev = keyed
-      ? keyed.get(datumKey(w, realIndex, j))
-      : record.paths[j]
+    const prev = keyed ? keyed.get(this._keys(realIndex)[j]) : record.paths[j]
     return prev ? !!prev.flip : null
   }