apexcharts 8.2.0 → 8.3.1

package/src/features/raincloud.js

@@ -49,6 +49,7 @@
 import ApexCharts from '../apexcharts'
 import { registerSeriesTransform } from '../modules/SeriesTransformRegistry'
 import {
+  deriveStat,
   derivedStats,
   fiveNumberSummary,
   isDerived,
@@ -107,22 +108,27 @@ function raincloudTransform(ser, w) {
       // as before: beside a hand-supplied density the datum keeps its own.
       const out = { ...y }
       if (needDensity) {
-        const est = kernelDensity(values, {
-          bandwidth: kde.bandwidth,
-          resolution: kde.resolution,
-        })
+        const est = deriveStat(
+          ourDensity,
+          key,
+          values,
+          { bandwidth: kde.bandwidth, resolution: kde.resolution },
+          kernelDensity,
+        )
         // no density, no cloud: leave the datum as it came
         if (!est) return d
         out.density = est.density
         out.points = values
-        ourDensity.set(key, est.density)
       }
       if (needSummary) {
-        const est = fiveNumberSummary(values, { whiskers })
-        if (est) {
-          out.summary = est.summary
-          ourSummary.set(key, est.summary)
-        }
+        const est = deriveStat(
+          ourSummary,
+          key,
+          values,
+          { whiskers },
+          fiveNumberSummary,
+        )
+        if (est) out.summary = est.summary
       }
       touched = true
       return { ...d, y: out }

package/src/features/stats.js

@@ -45,6 +45,7 @@ import { collapsedIndices, stashSeries } from '../modules/helpers/RawStash'
 import {
   binCounts,
   computeBinning,
+  deriveStat,
   derivedStats,
   fiveNumberSummary,
   isDerived,
@@ -204,45 +205,19 @@ function histogramTransform(ser, w) {
  * @returns {any[]}
  */
 function boxPlotTransform(ser, w) {
-  if (!Array.isArray(ser)) return ser
-  const whiskers = w.config.plotOptions?.boxPlot?.whiskers || 'minmax'
-  const derived = derivedStats(w, 'boxPlot')
-  /** @type {Array<Array<number[] | null>>} */
-  const observed = []
-
-  const out = ser.map((/** @type {any} */ s, /** @type {number} */ i) => {
-    // A combo's other series are not samples: a violin series carries its
-    // jitter in `points` too, and would have its density replaced.
-    if (!Array.isArray(s?.data) || (s.type && s.type !== 'boxPlot')) return s
-    let touched = false
-    /** @type {Array<number[] | null>} */
-    const byPoint = new Array(s.data.length).fill(null)
-    const data = s.data.map((/** @type {any} */ d, /** @type {number} */ j) => {
-      // An existing summary wins: this is the documented input shape. Unless we
-      // are the ones who derived it, in which case the options that shaped it
-      // may have changed.
-      const key = i + ':' + j
-      if (
-        Array.isArray(d?.y) &&
-        d.y.length === 5 &&
-        !isDerived(derived, key, d.y)
-      ) {
-        return d
-      }
-      const values = observationsOf(d, false)
-      if (!values) return d
-      const summary = fiveNumberSummary(values, { whiskers })
-      if (!summary) return d
-      touched = true
-      byPoint[j] = values
-      derived.set(key, summary.summary)
-      return { ...d, y: summary.summary, points: values }
-    })
-    if (touched) observed[i] = byPoint
-    return touched ? { ...s, data } : s
-  })
-  recordObservations(w, observed, ser.length)
-  return out
+  return sampleTransform(
+    ser,
+    w,
+    'boxPlot',
+    { whiskers: w.config.plotOptions?.boxPlot?.whiskers || 'minmax' },
+    fiveNumberSummary,
+    (/** @type {any} */ d) => Array.isArray(d?.y) && d.y.length === 5 && d.y,
+    (/** @type {any} */ d, /** @type {any} */ est, /** @type {number[]} */ values) => ({
+      ...d,
+      y: est.summary,
+      points: values,
+    }),
+  )
 }
 
 /**
@@ -261,43 +236,73 @@ function boxPlotTransform(ser, w) {
  * @returns {any[]}
  */
 function violinTransform(ser, w) {
-  if (!Array.isArray(ser)) return ser
   const kde = w.config.plotOptions?.violin?.kde || {}
-  const derived = derivedStats(w, 'violin')
+  return sampleTransform(
+    ser,
+    w,
+    'violin',
+    { bandwidth: kde.bandwidth, resolution: kde.resolution },
+    kernelDensity,
+    (/** @type {any} */ d) =>
+      Array.isArray(d?.y?.density) && d.y.density.length && d.y.density,
+    (/** @type {any} */ d, /** @type {any} */ est, /** @type {number[]} */ values) => ({
+      ...d,
+      // Keep the rest of an object `y`: a summary given with the points still
+      // draws the box lane.
+      y: {
+        ...(d.y && typeof d.y === 'object' && !Array.isArray(d.y) ? d.y : {}),
+        density: est.density,
+        points: values,
+      },
+    }),
+  )
+}
+
+/**
+ * The shared walk of the boxPlot and violin transforms: every datum of every
+ * series of `type` that carries a sample and no statistic of its own (or the
+ * one this transform wrote last pass) gets `fn(sample, opts)`, written by
+ * `write`.
+ *
+ * A combo's other series are not samples: a violin series carries its jitter
+ * in `points` too, and a boxPlot's or a rangeArea's `y` is a flat number
+ * array, which a violin would estimate into a density.
+ *
+ * @param {any[]} ser
+ * @param {any} w
+ * @param {string} type
+ * @param {any} opts
+ * @param {(values: number[], opts: any) => any} fn
+ * @param {(d: any) => any} statOf - the datum's own statistic, or falsy
+ * @param {(d: any, est: any, values: number[]) => any} write
+ * @returns {any[]}
+ */
+function sampleTransform(ser, w, type, opts, fn, statOf, write) {
+  if (!Array.isArray(ser)) return ser
+  const derived = derivedStats(w, type)
   /** @type {Array<Array<number[] | null>>} */
   const observed = []
 
   const out = ser.map((/** @type {any} */ s, /** @type {number} */ i) => {
-    // A combo's other series are not samples: a boxPlot's or a rangeArea's
-    // `y` is a flat number array too, and was estimated into a density.
-    if (!Array.isArray(s?.data) || (s.type && s.type !== 'violin')) return s
+    if (!Array.isArray(s?.data) || (s.type && s.type !== type)) return s
     let touched = false
     /** @type {Array<number[] | null>} */
     const byPoint = new Array(s.data.length).fill(null)
     const data = s.data.map((/** @type {any} */ d, /** @type {number} */ j) => {
+      // An existing statistic wins: this is the documented input shape. Unless
+      // we are the ones who derived it, in which case the options that shaped
+      // it may have changed.
       const key = i + ':' + j
-      if (
-        Array.isArray(d?.y?.density) &&
-        d.y.density.length &&
-        !isDerived(derived, key, d.y.density)
-      ) {
-        return d
-      }
-      const values = observationsOf(d, true)
+      const stat = statOf(d)
+      if (stat && !isDerived(derived, key, stat)) return d
+      // Only a density-based type reads a flat number `y` as the sample.
+      const values = observationsOf(d, type === 'violin')
       if (!values) return d
-      const est = kernelDensity(values, {
-        bandwidth: kde.bandwidth,
-        resolution: kde.resolution,
-      })
+      const est = deriveStat(derived, key, values, opts, fn)
       if (!est) return d
       touched = true
       byPoint[j] = values
-      // Keep the rest of an object `y`: a summary given with the points still
-      // draws the box lane.
-      const rest =
-        d.y && typeof d.y === 'object' && !Array.isArray(d.y) ? d.y : {}
-      derived.set(key, est.density)
-      return { ...d, y: { ...rest, density: est.density, points: values } }
+      return write(d, est, values)
     })
     if (touched) observed[i] = byPoint
     return touched ? { ...s, data } : s

package/src/locales/en.json

@@ -50,7 +50,8 @@
       "zoomOut": "Zoom Out",
       "pan": "Panning",
       "reset": "Reset Zoom",
-      "measure": "Measure"
+      "measure": "Measure",
+      "wheelZoomHint": "Use {key} + scroll to zoom"
     }
   }
 }

package/src/locales/ro.json

@@ -49,7 +49,8 @@
       "zoomIn": "Mărire",
       "zoomOut": "Micșorare",
       "pan": "Panoramare",
-      "reset": "Resetare zoom"
+      "reset": "Resetare zoom",
+      "measure": "Măsurare"
     }
   }
-}
+}

package/src/modules/Animations.js

@@ -30,6 +30,57 @@ function easeOutBack(t) {
   return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2)
 }
 
+/**
+ * Each chart's mount frame loop: the steppers below (sweep, pop, draw) used
+ * to poll one requestAnimationFrame chain per element, so a line with 2,000
+ * markers and labels ran 4,000 callbacks a frame. They queue jobs here and
+ * share ONE rAF per chart per frame, which stops when the queue drains or
+ * the chart is destroyed. A job returns true to run again next frame, or a
+ * function: its writes, run once every job has done its reads. A job queued
+ * during a frame first runs on the next, as its own rAF did.
+ * State per chart: `q` the next frame's jobs, `n` the pops in flight.
+ * @type {WeakMap<object, any>}
+ */
+const loops = new WeakMap()
+
+/**
+ * @param {import('../types/internal').ChartStateW} w
+ * @param {(now: number) => any} job
+ * @returns {any} the chart's loop state
+ */
+function onFrame(w, job) {
+  let s = loops.get(w)
+  if (!s) loops.set(w, (s = { n: 0, q: [] }))
+  // The first job queued for a frame requests it.
+  if (s.q.push(job) < 2) {
+    BrowserAPIs.requestAnimationFrame((now) => {
+      const jobs = s.q
+      s.q = []
+      // for...of also visits the writes appended mid-loop, after every read.
+      for (const j of jobs) {
+        // A destroyed chart drops its queue and its pop count, checked per
+        // job: an animationEnd handler a job reaches may destroy it.
+        if (w.globals.isDestroyed) {
+          s.n = 0
+          break
+        }
+        // A throw (a user handler) loses only its own job, as when each
+        // element had its own rAF, and is reported once the frame is done.
+        try {
+          const r = j(now)
+          if (r === true) onFrame(w, j)
+          else if (r) jobs.push(r)
+        } catch (e) {
+          setTimeout(() => {
+            throw e
+          })
+        }
+      }
+    })
+  }
+  return s
+}
+
 /**
  * Cached reduced-motion query — `matchMedia` evaluation is cheap but the
  * MediaQueryList instance is reused if a chart re-renders.
@@ -116,29 +167,20 @@ export function applyProgressiveReveal(el, x, w) {
   const easedT = 1 - Math.cbrt(1 - xRatio)
   const revealDelay = easedT * drawSpeed
 
-  const node = el.node
-  const style = node.style
+  const style = el.node.style
   style.opacity = '0'
 
-  // Anchor on the first rAF after render — the same frame `animateDraw` uses
-  // as its t=0. All rAF callbacks scheduled in the current task receive the
-  // same timestamp in the next frame, so reveal and draw share an origin.
-  // Then poll rAFs (not setTimeout) so the snap happens on a frame boundary.
-  /** @type {number | null} */
-  let startAnchor = null
-  /** @param {number} now */
-  const tick = (now) => {
-    if (startAnchor === null) startAnchor = now
-    if (now - startAnchor >= revealDelay) {
-      // Clear the inline opacity rather than forcing '1' — an inline style
-      // would override the element's SVG `opacity` attribute (e.g. an
-      // x-axis range annotation rect with `opacity: 0.4`).
-      style.opacity = ''
-    } else {
-      BrowserAPIs.requestAnimationFrame(tick)
-    }
-  }
-  BrowserAPIs.requestAnimationFrame(tick)
+  // Anchor on the first frame after render, the same frame `animateDraw` uses
+  // as its t=0, so reveal and draw share an origin; snap on frame boundaries.
+  let startAnchor = -1
+  onFrame(w, (/** @type {number} */ now) => {
+    if (startAnchor < 0) startAnchor = now
+    if (now - startAnchor < revealDelay) return true
+    // Clear the inline opacity rather than forcing '1': an inline style
+    // would override the element's SVG `opacity` attribute (e.g. an
+    // x-axis range annotation rect with `opacity: 0.4`).
+    style.opacity = ''
+  })
   return true
 }
 
@@ -301,30 +343,25 @@ export default class Animations {
     style.transform = 'scale(0)'
     style.opacity = '0'
 
+    // Pops land in stagger order, so the animation is over when the LAST one
+    // lands: completion waits for the chart's pop count to drain. A destroyed
+    // chart's loop stops before it, so animationEnd never fires on a
+    // torn-down chart (react-apexcharts#602).
     const startAt = performance.now() + delay
-    /** @param {number} now */
-    const step = (now) => {
-      // Chart may have been destroyed before this frame ran (React StrictMode
-      // mount/unmount, route change). Bail without rescheduling and without
-      // onComplete, which would fire animationEnd on a torn-down chart. Mirrors
-      // the guard in animateDraw (see react-apexcharts#602).
-      if (w.globals.isDestroyed) return
+    const s = onFrame(w, (/** @type {number} */ now) => {
       const t = Math.max(0, Math.min(1, (now - startAt) / speed))
       style.transform = `scale(${easeOutBack(t)})`
       // Fade in over the first half so the back-out overshoot is visible
       // (rather than blasted in at full opacity from frame 1).
       style.opacity = String(Math.min(1, t * 2))
-      if (t < 1) {
-        BrowserAPIs.requestAnimationFrame(step)
-      } else {
-        style.transform = ''
-        style.transformOrigin = ''
-        style.transformBox = ''
-        style.opacity = ''
-        if (onComplete) onComplete()
-      }
-    }
-    BrowserAPIs.requestAnimationFrame(step)
+      if (t < 1) return true
+      style.transform = ''
+      style.transformOrigin = ''
+      style.transformBox = ''
+      style.opacity = ''
+      if (!--s.n && onComplete) onComplete()
+    })
+    s.n++
   }
 
   /*
@@ -423,9 +460,8 @@ export default class Animations {
 
     if (!w.globals.bulkRevealScheduled) {
       w.globals.bulkRevealScheduled = true
-      BrowserAPIs.requestAnimationFrame(() => {
-        // chart may have been destroyed before this frame ran (see animateDraw)
-        if (w.globals.isDestroyed) return
+      // the frame loop skips it on a chart destroyed before it ran
+      onFrame(w, () => {
         w.globals.bulkRevealScheduled = false
         const faded = w.globals.fadeRevealEls
         w.globals.fadeRevealEls = []
@@ -566,9 +602,7 @@ export default class Animations {
       node.setAttribute('mask', `url(#${maskId})`)
 
       const startAt = performance.now() + (delay || 0)
-      /** @param {number} now */
-      const step = (now) => {
-        if (w.globals.isDestroyed) return
+      onFrame(w, (/** @type {number} */ now) => {
         const t = Math.max(0, Math.min(1, (now - startAt) / speed))
         const eased = easeOutCubic(t)
         if (isRadial) {
@@ -576,15 +610,11 @@ export default class Animations {
         } else {
           revealEl.setAttribute('width', String(eased * targetWidth))
         }
-        if (t < 1) {
-          BrowserAPIs.requestAnimationFrame(step)
-        } else {
-          node.removeAttribute('mask')
-          if (mask.parentNode) mask.parentNode.removeChild(mask)
-          finalize()
-        }
-      }
-      BrowserAPIs.requestAnimationFrame(step)
+        if (t < 1) return true
+        node.removeAttribute('mask')
+        if (mask.parentNode) mask.parentNode.removeChild(mask)
+        finalize()
+      })
     }
 
     // Stroke draw via stroke-dashoffset (only safe when no custom dash pattern exists).
@@ -594,58 +624,35 @@ export default class Animations {
       node.setAttribute('stroke-dashoffset', String(len))
 
       const startAt = performance.now() + (delay || 0)
-      /** @param {number} now */
-      const step = (now) => {
-        if (w.globals.isDestroyed) return
+      onFrame(w, (/** @type {number} */ now) => {
         const t = Math.max(0, Math.min(1, (now - startAt) / speed))
         node.setAttribute('stroke-dashoffset', String(len * (1 - easeOutCubic(t))))
-        if (t < 1) {
-          BrowserAPIs.requestAnimationFrame(step)
-        } else {
-          node.removeAttribute('stroke-dasharray')
-          node.removeAttribute('stroke-dashoffset')
-          finalize()
-        }
-      }
-      BrowserAPIs.requestAnimationFrame(step)
+        if (t < 1) return true
+        node.removeAttribute('stroke-dasharray')
+        node.removeAttribute('stroke-dashoffset')
+        finalize()
+      })
     }
 
     // Defer one frame: callers (e.g. Line.js for forecast paths) set stroke-dasharray
-    // *after* renderPaths returns, so a sync check would miss it.
-    BrowserAPIs.requestAnimationFrame(() => {
-      // The chart may have been destroyed before this frame ran (e.g. React
-      // StrictMode mounts, unmounts, then remounts). Its DOM is gone, so bail
-      // before touching it. Fixes "Cannot read properties of null (reading
-      // 'node')" in runMaskReveal. See react-apexcharts#602.
-      if (w.globals.isDestroyed) return
-
-      if (isFill) {
-        runMaskReveal()
-        return
-      }
-
+    // *after* renderPaths returns, so a sync check would miss it. The job only
+    // reads (dash, length) and hands back its writes, which the loop runs
+    // after every path's reads, so N series cost one style and layout flush,
+    // not N. The loop skips it on a destroyed chart, whose DOM is gone
+    // (react-apexcharts#602).
+    onFrame(w, () => {
+      // A stroke with a custom dash pattern keeps it and reveals via the mask
+      // instead of fighting dashoffset.
       const existingDash = node.getAttribute('stroke-dasharray')
-      const hasCustomDash =
-        !!existingDash && existingDash !== '0' && existingDash !== ''
-      if (hasCustomDash) {
-        // Preserve dash pattern; reveal via mask instead of fighting dashoffset.
-        runMaskReveal()
-        return
-      }
+      if (isFill || (existingDash && existingDash !== '0')) return runMaskReveal
 
       let len = 0
       try {
-        if (typeof node.getTotalLength === 'function') {
-          len = node.getTotalLength()
-        }
+        len = node.getTotalLength()
       } catch (_) {
-        len = 0
-      }
-      if (!len) {
-        finalize()
-        return
+        // no geometry to measure: nothing to draw
       }
-      runStrokeDraw(len)
+      return len ? () => runStrokeDraw(len) : finalize
     })
   }
 

package/src/modules/AxisMapping.js

@@ -65,21 +65,56 @@ export default class AxisMapping {
   }
 
   /**
-   * Client (screen) x -> pixels from the plot origin. The origin is the svg
-   * element's left edge plus `translateX`, never the `.apexcharts-grid` box
-   * (fact 2 above), so the result does not depend on what the grid happens to
-   * render. `svgWidth` is the unscaled width the svg was drawn at, so the ratio
-   * against the measured one is the CSS zoom of any container the chart sits in.
+   * The plot area on screen, in client px: its corner is where the plot's
+   * group is translated to (translateX, translateY into the svg), and it is
+   * gridWidth by gridHeight. The one screen-to-plot measurement: the tooltip,
+   * zoom, selection and every other pointer reader map through it, so x and y
+   * cannot disagree under CSS zoom.
+   *
+   * Never the `.apexcharts-grid` group's box: a group measures to the union
+   * of what it happens to draw (fact 2 above). The plot's outline starts a
+   * pixel down (`Grid.drawGridArea`), so unless gridlines or row bands reach
+   * the top edge the box starts a pixel below the plot, and on a numeric-x bar
+   * chart the horizontal gridlines run `barPadForNumericAxis` out past both
+   * sides.
+   *
+   * `zoom` is the CSS zoom of any container the chart sits in (screen px per
+   * plot px): the measured svg width over `svgWidth`, the unscaled width it
+   * was drawn at. A distance measured on screen from this corner is divided
+   * by it to land in plot px, the space the series are laid out and painted in.
+   * With nothing mounted to measure, screen px are taken as svg px.
+   *
+   * @param {import('../types/internal').ChartStateW} w
+   * @returns {{ left: number, top: number, width: number, height: number, zoom: number }}
+   */
+  static plotRect(w) {
+    const svg =
+      w.dom.Paper?.node || w.dom.baseEl?.querySelector('.apexcharts-svg')
+    const box = (svg || w.dom.elWrap)?.getBoundingClientRect() || {
+      left: 0,
+      top: 0,
+      width: 0,
+    }
+    const zoom =
+      (svg && w.globals.svgWidth ? box.width / w.globals.svgWidth : 1) || 1
+    return {
+      left: box.left + w.layout.translateX * zoom,
+      top: box.top + w.layout.translateY * zoom,
+      width: w.layout.gridWidth * zoom,
+      height: w.layout.gridHeight * zoom,
+      zoom,
+    }
+  }
+
+  /**
+   * Client (screen) x -> pixels from the plot origin of {@link plotRect}.
+   * Pass the rect when the caller has already measured it.
    * @param {import('../types/internal').ChartStateW} w
    * @param {number} screenX
+   * @param {{ left: number, zoom: number }} [plot]
    * @returns {number}
    */
-  static screenXToPlotPx(w, screenX) {
-    const baseEl = w.dom.baseEl
-    const svg = baseEl && baseEl.querySelector('.apexcharts-svg')
-    if (!svg) return screenX - w.layout.translateX
-    const svgRect = svg.getBoundingClientRect()
-    const zoom = w.globals.svgWidth ? svgRect.width / w.globals.svgWidth : 1
-    return (screenX - svgRect.left) / (zoom || 1) - w.layout.translateX
+  static screenXToPlotPx(w, screenX, plot = AxisMapping.plotRect(w)) {
+    return (screenX - plot.left) / plot.zoom
   }
 }

package/src/modules/Core.js

@@ -446,6 +446,10 @@ export default class Core {
     const { config: cnf, globals: gl } = w
     const { line, boxCandlestick, violin } = renderers
 
+    // A unit chart tweens from the slots of the last render; once another type
+    // has drawn over them they are not on screen to tween from.
+    if (cnf.chart.type !== 'unit') ctx._unitPrevDots = null
+
     let elGraph = []
 
     if (gl.comboCharts) {