apexcharts 7.7.0 → 7.9.0

package/src/modules/Animations.js

@@ -237,6 +237,18 @@ export function computeStagger(opts) {
   }
 }
 
+/**
+ * The chart instance behind each chart state `w`, recorded by the first
+ * Animations built with one (the chart-level instance InitCtxVariables makes
+ * in the chart constructor). Most renderers build their Animations from `w`
+ * alone, and whichever of them finishes the mount animation is the one that
+ * fires `chart.events.animationEnd`, so without this lookup a line, pie or
+ * heatmap chart would hand the user `undefined` where the chart belongs.
+ * A WeakMap keeps `w` free of a reference back to the chart.
+ * @type {WeakMap<object, import('../types/internal').ChartContext>}
+ */
+const chartByState = new WeakMap()
+
 /**
  * ApexCharts Animation Class.
  *
@@ -251,6 +263,7 @@ export default class Animations {
   constructor(w, ctx) {
     this.w = w
     this.ctx = ctx // kept for animationEnd user callback: chart.events.animationEnd(ctx, …)
+    if (ctx && w && !chartByState.has(w)) chartByState.set(w, ctx)
   }
 
   /**
@@ -347,7 +360,8 @@ export default class Animations {
    */
   /** @param {any} el @param {any} from @param {any} to @param {any} speed @param {any} fn @param {number} [delay] */
   animateRect(el, from, to, speed, fn, delay = 0) {
-    el.attr(from)
+    return el
+      .attr(from)
       .animate(speed, delay)
       .attr(to)
       .after(() => fn())
@@ -406,10 +420,10 @@ export default class Animations {
   /**
    * Opacity-fade reveal (see Graphics.renderPaths `revealViaFade`): hide this
    * path immediately, then reveal the whole series in a single CSS opacity fade
-   * once the synchronous draw pass has finished. Used for two cases that both
-   * want to avoid per-path morphs: the large-dataset bulk render (>
-   * largeDatasetThreshold) and candlestick/boxPlot data-change updates (where an
-   * index-based morph would slide candles around on zoom). Every faded path is
+   * once the synchronous draw pass has finished. Used by the large-dataset bulk
+   * render (> largeDatasetThreshold), where per-path morphs cost too much.
+   * (Candlestick/boxPlot data changes used to fade too; they now morph, keyed
+   * by datum, see Graphics.renderPaths.) Every faded path is
    * pushed to delayedElements, but only the first one schedules the reveal — a
    * lone requestAnimationFrame fires after all paths are in the DOM, so N paths
    * cost one frame callback instead of N morph timelines. The guard flag is
@@ -421,6 +435,7 @@ export default class Animations {
     const w = this.w
     el.node.classList.add('apexcharts-element-hidden')
     w.globals.delayedElements.push({ el: el.node })
+    w.globals.fadeRevealEls.push(el.node)
 
     if (!Environment.isBrowser() || !w.globals.shouldAnimate) {
       // No animation frame to wait on (SSR / animation off) — reveal at once so
@@ -435,6 +450,21 @@ export default class Animations {
         // chart may have been destroyed before this frame ran (see animateDraw)
         if (w.globals.isDestroyed) return
         w.globals.bulkRevealScheduled = false
+        const faded = w.globals.fadeRevealEls
+        w.globals.fadeRevealEls = []
+        const batch = w.globals.morphBatch
+        if (batch && batch.pending > 0) {
+          // A series that fades can share the render with series that
+          // morph (candles that lost their identity beside a line). The
+          // animation is not over until those land: reveal only what faded
+          // now, and complete when the last morph does.
+          faded.forEach((n) => {
+            n.classList.remove('apexcharts-element-hidden')
+            n.classList.add('apexcharts-hidden-element-shown')
+          })
+          batch.onDone = () => this.animationCompleted(el)
+          return
+        }
         this.animationCompleted(el)
       })
     }
@@ -468,7 +498,10 @@ export default class Animations {
     this.showDelayedElements()
 
     if (typeof w.config.chart.events.animationEnd === 'function') {
-      w.config.chart.events.animationEnd(this.ctx, { el, w })
+      w.config.chart.events.animationEnd(this.ctx || chartByState.get(w), {
+        el,
+        w,
+      })
     }
   }
 
@@ -740,6 +773,11 @@ export default class Animations {
     // _executeChain, so every staggered bar started at 2x its intended offset,
     // drifting away from the axis/data labels that share its clock. The
     // synchronous plot(pathFrom) already pins the start shape during the wait.
+    // The morphs this render started, so a fade sharing the render can wait
+    // for the last of them (see revealBulk).
+    const batch = w.globals.morphBatch
+    if (batch) batch.pending++
+    const landed = Animations.trackSeriesTween(w, realIndex)
     const runner = el.plot(pathFrom).animate(speed, delay)
     if (morphEase) {
       runner.ease(morphEase)
@@ -771,6 +809,48 @@ export default class Animations {
         }
 
         this.showDelayedElements()
+
+        if (batch) {
+          batch.pending--
+          if (batch.pending <= 0 && batch.onDone) {
+            const done = batch.onDone
+            batch.onDone = null
+            done()
+          }
+        }
+        landed()
       })
   }
+
+  /**
+   * Count one tween of series `realIndex` in this render's batch, and return
+   * the call to make when it lands. A legend-hidden series is cleared the
+   * moment its LAST tween lands (Series.settleCollapsedShapes): a line that
+   * has flattened onto the baseline must not lie there waiting for a timer.
+   * @param {import('../types/internal').ChartStateW} w
+   * @param {any} realIndex
+   * @returns {() => void}
+   */
+  static trackSeriesTween(w, realIndex) {
+    const series = w.globals.morphBatch?.series
+    if (!series || !Utils.isNumber(realIndex)) return () => {}
+    let s = series.get(realIndex)
+    if (!s) {
+      s = { pending: 0, onDone: null }
+      series.set(realIndex, s)
+    }
+    const entry = s
+    entry.pending++
+    let done = false
+    return () => {
+      if (done) return
+      done = true
+      entry.pending--
+      if (entry.pending <= 0 && entry.onDone) {
+        const fn = entry.onDone
+        entry.onDone = null
+        fn()
+      }
+    }
+  }
 }

package/src/modules/Base.js

@@ -156,6 +156,13 @@ export default class Base {
       //   carrier     = the series index the merged rows were written to
       //   hidden[]    = endpoint indices collapsed from the legend
       dumbbellData: null,
+      // Highlight filter parts (features/highlight-filter), built each parse:
+      //   active   = a part is present and the option is on
+      //   parts    = parts[i][j], null where a datum has none
+      //   ext      = the parts again when they may stretch the value axis
+      //   capture  = called by Series when it captures the outgoing frame
+      // null when the feature is not loaded.
+      highlightData: null,
       // Streamgraph bands, written by the streamgraph series transform
       // (features/streamgraph) each parse; null for every other chart type.
       //   names[k]     = band k's series name

package/src/modules/Core.js

@@ -3,6 +3,7 @@ import CoreUtils from './CoreUtils'
 import Crosshairs from './Crosshairs'
 import Globals from '../modules/settings/Globals'
 import Graphics from './Graphics'
+import Animations from './Animations'
 import Range from './Range'
 import Utils from '../utils/Utils'
 import TimeScale from './TimeScale'
@@ -10,6 +11,12 @@ import { Environment } from '../utils/Environment.js'
 import { BrowserAPIs } from '../ssr/BrowserAPIs.js'
 import { SVGNS } from '../svg/math'
 import { getChartClass, isCustom } from './ChartFactory'
+import {
+  XY_TYPES,
+  AXIS_TYPES,
+  BUILTIN_TYPES,
+  SOLO_TYPES,
+} from './settings/TypeAliases'
 
 /**
  * ApexCharts Core Class responsible for major calculations and creating elements.
@@ -33,36 +40,14 @@ export default class Core {
     const { globals: gl, config: cnf } = this.w
 
     const ct = cnf.chart.type
-    const xyChartsArrTypes = [
-      'line',
-      'area',
-      'bar',
-      'rangeBar',
-      'rangeArea',
-      'candlestick',
-      'boxPlot',
-      'violin',
-      'scatter',
-      'bubble',
-    ]
-
-    const axisChartsArrTypes = [
-      ...xyChartsArrTypes,
-      'radar',
-      'heatmap',
-      'treemap',
-    ]
 
     // Marks (#11): a registered custom series type used as the chart type is an
     // xy/axis chart (it draws in series space and needs the axis/grid/scale
-    // pipeline). Non-axis built-ins (pie/radialBar/...) are never custom here.
-    const isCustomType =
-      !axisChartsArrTypes.includes(ct) &&
-      !['pie', 'donut', 'polarArea', 'radialBar'].includes(ct) &&
-      isCustom(ct)
+    // pipeline). A built-in name is never custom, whatever the registry says.
+    const isCustomType = !BUILTIN_TYPES.includes(ct) && isCustom(ct)
 
-    gl.axisCharts = axisChartsArrTypes.includes(ct) || isCustomType
-    gl.xyCharts = xyChartsArrTypes.includes(ct) || isCustomType
+    gl.axisCharts = AXIS_TYPES.includes(ct) || isCustomType
+    gl.xyCharts = XY_TYPES.includes(ct) || isCustomType
 
     gl.isBarHorizontal =
       ['bar', 'rangeBar', 'boxPlot', 'violin'].includes(ct) &&
@@ -250,20 +235,7 @@ export default class Core {
         st_[seriesType].i.push(st)
 
         if (seriesType === 'bar') w.globals.columnSeries = seriesTypes.bar
-      } else if (
-        [
-          'heatmap',
-          'treemap',
-          'pie',
-          'donut',
-          'polarArea',
-          'radialBar',
-          'radar',
-          'unit',
-          'sunburst',
-          'icicle',
-        ].includes(seriesType)
-      ) {
+      } else if (SOLO_TYPES.includes(seriesType)) {
         nonComboType = seriesType
       } else if (isCustom(seriesType)) {
         // Marks (#11): a registered custom series type.
@@ -311,7 +283,13 @@ export default class Core {
     // Series marks emitted during draw() below are recorded, not added to the
     // DOM; they are painted at the end of this method (see the wrap below).
     const canvasMode = ctx.renderer && ctx.renderer.kind === 'canvas'
-    if (canvasMode) ctx.renderer.beginSeries()
+    if (canvasMode) {
+      ctx.renderer.beginSeries()
+      // What Bar.renderSeries caches for the painted marks describes this
+      // pass alone; a mark painted in several paths grows its extent over
+      // the entry, so nothing may be left from an earlier pass.
+      w.globals.barCanvasCoords = null
+    }
 
     const { seriesTypes, customBuckets } = this._classifySeriesByType(ser)
 
@@ -325,6 +303,13 @@ export default class Core {
     )
 
     if (canvasMode) {
+      // The canvas paints the final frame in this pass, so no series
+      // animation runs whose end would reveal the SVG chrome held back for
+      // it: goal markers (a box plot's outlier dots among them), bar data
+      // labels and bar shadows wait in delayedElements, hidden for good.
+      // They show now, as they do on SVG when nothing animates.
+      new Animations(w).showDelayedElements()
+
       // Paint the recorded series display list into a <foreignObject><canvas>
       // and wrap it with the real SVG chrome groups (data labels etc.) the
       // draw() built. Canvas sits at the back of the wrap (behind the chrome);
@@ -651,8 +636,20 @@ export default class Core {
             // Marks (#11): a registered custom series type as the chart type.
             const cs = new (getChartClass(type))(ctx.w, ctx, xyRatios)
             elGraph = cs.draw(this.w.seriesData.series, type)
-          } else {
+          } else if (line) {
             elGraph = line.draw(this.w.seriesData.series)
+          } else {
+            // Unreachable: Config.assertKnownChartType rejects a type with no
+            // renderer before a chart is ever built, and every name it lets
+            // through has a case above or is custom. Guarded anyway because
+            // the unguarded version of this line is what #5325 actually threw
+            // (`line` is null whenever setupElements decided the chart was
+            // not an xy one, and "fall back to a line" cannot be done with a
+            // renderer that was never instantiated). Fail with the option name
+            // rather than with a property access on null.
+            throw new Error(
+              `ApexCharts: no renderer for chart.type "${type}".`,
+            )
           }
       }
     }

package/src/modules/CoreUtils.js

@@ -213,8 +213,10 @@ class CoreUtils {
     const seriesYAxisReverseMap = []
     /** @type {any[]} */
     const unassignedSeriesIndices = []
+    // cnf.series, not seriesData.series: the first call (parseDataAxisCharts)
+    // runs before seriesData.series is filled, and its map sets default groups.
     const seriesNameArrayStyle =
-      this.w.seriesData.series.length > cnf.yaxis.length ||
+      cnf.series.length > cnf.yaxis.length ||
       /**
        * @param {ApexYAxis} a
        */
@@ -371,16 +373,22 @@ class CoreUtils {
    */
   isSeriesNull(index = null) {
     let r = []
-    const series = /** @type {any[]} */ (this.w.config.series)
     if (index === null) {
       // non-plot chart types - pie / donut / circle
+      const series = /** @type {any[]} */ (this.w.config.series)
       r = series.filter((/** @type {any} */ d) => d !== null)
-    } else if (series[index] && Array.isArray(series[index].data)) {
-      // axis charts - supporting multiple series
-      r = series[index].data.filter((/** @type {any} */ d) => d !== null)
     } else {
-      // pie/donut/polarArea/radialBar called per-index from legend loop
-      r = series[index] !== null && series[index] !== undefined ? [series[index]] : []
+      const seriesAtIndex = this.w.seriesData.series[index]
+      if (Array.isArray(seriesAtIndex)) {
+        // axis charts - supporting multiple series
+        r = seriesAtIndex.filter((/** @type {any} */ d) => d !== null)
+      } else {
+        // pie/donut/polarArea/radialBar called per-index from legend loop
+        r =
+          seriesAtIndex !== null && seriesAtIndex !== undefined
+            ? [seriesAtIndex]
+            : []
+      }
     }
 
     return r.length === 0

package/src/modules/Data.js

@@ -41,11 +41,22 @@ function subtreeTotal(d) {
 export default class Data {
   /**
    * @param {import('../types/internal').ChartStateW} w
+   * @param {{resetGlobals?: () => any, isMultipleY?: () => any, highlight?: () => any}} [hooks]
    */
-  constructor(w, { resetGlobals = () => {}, isMultipleY = () => {} } = {}) {
+  constructor(
+    w,
+    {
+      resetGlobals = () => {},
+      isMultipleY = () => {},
+      highlight = () => null,
+    } = {},
+  ) {
     this.w = w
     this.resetGlobals = resetGlobals
     this.isMultipleY = isMultipleY
+    // The highlight filter feature, or null (see InitCtxVariables).
+    this.highlight = highlight
+    this._warnedHighlight = false
 
     /** @type {any} */
     this.twoDSeries = []
@@ -232,9 +243,26 @@ export default class Data {
     const cnf = this.w.config
     const data = ser[i].data
 
-    const isBoxPlot =
-      cnf.chart.type === 'boxPlot' ||
-      /** @type {any} */ (cnf.series[i]).type === 'boxPlot'
+    // A legend-collapsed series arrives here as `data: []`, and a stacked chart
+    // then pads its y with zeros (Series.setNullSeriesToZeroValues). Without
+    // x values to go with them every point lands at x = NaN, the stack lookup
+    // (Line._stackKey keys by x value) misses, and the keyed morph join reads
+    // every datum as an exit plus an enter. The hidden layer then tweens into
+    // the plot's bottom-left corner instead of flattening onto the series
+    // below it. Borrow the active series' x, as handleFormatXY has done for
+    // the {x, y} format since #368, so both formats exit the same way.
+    if (data.length === 0 && this._isCollapsedIndex(i)) {
+      const activeData = ser[this.activeSeriesIndex]?.data || []
+      for (let j = 0; j < activeData.length; j++) {
+        const x = Array.isArray(activeData[j]) ? activeData[j][0] : undefined
+        this.twoDSeriesX.push(
+          cnf.xaxis.type === 'datetime' ? new Date(x).getTime() : x,
+        )
+      }
+      return
+    }
+
+    const isBoxPlot = this._isBoxPlotSeries(i)
 
     if (
       !isBoxPlot &&
@@ -270,13 +298,70 @@ export default class Data {
         this.twoDSeriesX.push(x)
       }
 
-      if (typeof z !== 'undefined') {
-        this.threeDSeries.push(z)
-        this.w.axisFlags.isDataXYZ = true
-      }
+      this.pushZ(z, j)
     }
   }
 
+  /**
+   * Record one point's `z`, the third dimension a bubble sizes itself by and
+   * the tooltip reports as "Size".
+   *
+   * Two rules, both of which used to be broken (#5323):
+   *
+   * 1. The slot is positional. `seriesZ[i][j]` is read by data-point index, so
+   *    a point WITHOUT `z` still owns its slot. Otherwise a series where only
+   *    some points carry `z` reports the previous point's value for every
+   *    point after the first gap. Nothing is allocated for a series that
+   *    carries no `z` at all: the backfill only runs once the first `z` shows
+   *    up, so an ordinary line chart pays nothing.
+   *
+   * 2. Only a MEASURABLE value makes the chart three-dimensional. `z: NaN`,
+   *    `z: ''` and `z: null` are the shapes a missing value arrives in from a
+   *    database or a CSV, and they used to set `isDataXYZ` just by being
+   *    present, which grew a stray "Size:" row on charts that have no third
+   *    dimension. A numeric string goes the other way and is coerced, the way
+   *    `y` already is, so `z: '99'` sizes a bubble instead of sitting in
+   *    `seriesZ` as a string that `Range.setZRange` then skips. Anything else
+   *    is stored as given, since a custom `tooltip.z.formatter` may still want
+   *    it; it just cannot be what declares the chart 3-D.
+   *
+   * @param {any} z the point's raw `z`, or undefined when it has none
+   * @param {number} j the point's index within the series
+   */
+  pushZ(z, j) {
+    if (typeof z === 'undefined') {
+      // Only hold the slot for a series already carrying z (rule 1).
+      if (this.threeDSeries.length) this.threeDSeries.push(null)
+      return
+    }
+
+    const num = typeof z === 'string' && z.trim() !== '' ? Number(z) : z
+    // The same test Range.setZRange applies, so a value that counts as the
+    // third dimension here is one the z extent can actually be built from.
+    const measurable = Utils.isNumber(num)
+
+    while (this.threeDSeries.length < j) this.threeDSeries.push(null)
+    this.threeDSeries.push(measurable ? num : z)
+
+    if (measurable) {
+      this.w.axisFlags.isDataXYZ = true
+    }
+  }
+
+  /**
+   * Hidden through the legend, either outright or as an ancillary series whose
+   * y axis stays drawn (`yaxis.showAlways`). Both empty the series' data.
+   * @param {number} i
+   * @returns {boolean}
+   */
+  _isCollapsedIndex(i) {
+    const gl = this.w.globals
+    return (
+      gl.collapsedSeriesIndices.indexOf(i) > -1 ||
+      gl.ancillaryCollapsedSeriesIndices.indexOf(i) > -1
+    )
+  }
+
   /**
    * @param {any[]} ser
    * @param {number} i
@@ -288,7 +373,7 @@ export default class Data {
     const data = ser[i].data
 
     let activeI = i
-    if (gl.collapsedSeriesIndices.indexOf(i) > -1) {
+    if (this._isCollapsedIndex(i)) {
       // fix #368
       activeI = this.activeSeriesIndex
     }
@@ -314,10 +399,7 @@ export default class Data {
         this.seriesGoals[i].push(null)
       }
 
-      if (typeof point.z !== 'undefined') {
-        this.threeDSeries.push(point.z)
-        this.w.axisFlags.isDataXYZ = true
-      }
+      this.pushZ(point.z, j)
     }
 
     // get seriesX
@@ -708,16 +790,27 @@ export default class Data {
     }
   }
 
+  /**
+   * Is series `i` read as a box plot (o, q1, median, q3, c) rather than as
+   * candles (o, h, l, c)? A box or candle series is read as its own type, as
+   * BoxCandleStick draws it, so a candlestick series in a 'boxPlot' chart is
+   * read as candles. Any other series goes by the chart's type, as before.
+   * @param {number} i
+   * @returns {boolean}
+   */
+  _isBoxPlotSeries(i) {
+    const own = /** @type {any} */ (this.w.config.series[i])?.type
+    if (own === 'boxPlot' || own === 'candlestick') return own === 'boxPlot'
+    return this.w.config.chart.type === 'boxPlot'
+  }
+
   /**
    * @param {string} format
    * @param {any[]} ser
    * @param {number} i
    */
   handleCandleStickBoxDataFormat(format, ser, i) {
-    const w = this.w
-    const isBoxPlot =
-      w.config.chart.type === 'boxPlot' ||
-      /** @type {Record<string,any>} */ (w.config.series[i]).type === 'boxPlot'
+    const isBoxPlot = this._isBoxPlotSeries(i)
 
     const serO = []
     const serH = []
@@ -2135,6 +2228,28 @@ export default class Data {
       }
     }
 
+    // Highlight filter: the feature reads the parts off the parsed rows. When
+    // it is not loaded, a chart handed parts would otherwise just draw without
+    // them, so say once what is missing. Checked per series, never per point.
+    const hf = this.highlight()
+    if (hf) {
+      hf.parse()
+    } else if (
+      !this._warnedHighlight &&
+      (cnf.highlightFilter?.data ||
+        ser.some(
+          (/** @type {any} */ s) =>
+            s &&
+            (s.highlightData ||
+              (s.data?.[0] && typeof s.data[0] === 'object' && 'highlight' in s.data[0])),
+        ))
+    ) {
+      this._warnedHighlight = true
+      console.warn(
+        "ApexCharts: series carry highlight parts but the highlight filter is not loaded. Add import 'apexcharts/features/highlight-filter' (or load dist/features/highlight-filter.js after apexcharts.js).",
+      )
+    }
+
     // Return a snapshot of all parsed state grouped by future w.* slice destinations.
     // Phase 1: callers use named writer stubs (no-ops — mutations above already wrote to gl).
     // Phase 2: writers will assign to typed slices instead of gl.*.