apexcharts 8.2.0 → 8.3.0

package/src/charts/Violin.js

@@ -4,9 +4,10 @@ import { getChartClass } from '../modules/ChartFactory'
 import Fill from '../modules/Fill'
 import Graphics from '../modules/Graphics'
 import Series from '../modules/Series'
+import { datumKey } from '../modules/animations/LengthTransition'
 import Utils from '../utils/Utils'
 import { spline, svgPath } from '../libs/monotone-cubic'
-import { buildJitterGroups, renderJitter } from './common/Jitter'
+import { buildJitterGroups, jitterExtent, renderJitter } from './common/Jitter'
 
 /**
  * ApexCharts Violin Class — draws a density curve per category (the
@@ -67,6 +68,7 @@ class Violin extends BarBase {
 
     this.violinOptions = w.config.plotOptions.violin
     this.pointsOptions = this.violinOptions.points
+    this.jx = jitterExtent(w.violinData.seriesViolinPoints, w)
     this.boxOptions = this.violinOptions.box || {}
     // Cross-axis signs: which side the density is drawn on (0 = symmetric)
     // and which side the jitter lane sits on (0 = centered on the slot).
@@ -93,7 +95,7 @@ class Violin extends BarBase {
     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-violin-series apexcharts-plot-series',
@@ -285,6 +287,7 @@ class Violin extends BarBase {
               visibleSeries: this.visibleI,
               type: 'violin',
               classes: 'apexcharts-raincloud-box',
+              noLabel: true,
             })
           })
         }
@@ -338,15 +341,18 @@ class Violin extends BarBase {
   drawVerticalViolin({ indexes, x, xDivision, barWidth, zeroH }) {
     const w = this.w
     const { realIndex, j, translationsIndex } = indexes
-    const yRatio = this.yRatio[translationsIndex]
+    const yRatio = this.yRatio[translationsIndex] * (this.isReversed ? -1 : 1)
 
+    // the group of violins at a numeric x is centred on it, as candles are
+    let barXPosition = x + barWidth * this.visibleI
     if (w.axisFlags.isXNumeric) {
-      x =
-        (w.seriesData.seriesX[realIndex][j] - w.globals.minX) / this.xRatio -
-        barWidth / 2
+      ;({ x, barXPosition } = this.getBarXForNumericXAxis({
+        x,
+        barWidth,
+        realIndex,
+        j,
+      }))
     }
-
-    const barXPosition = x + barWidth * this.visibleI
     const center = barXPosition + barWidth / 2
     const halfExtent = barWidth / 2
 
@@ -383,9 +389,7 @@ class Violin extends BarBase {
     if (morphFrom) {
       pathFrom = morphFrom
     } else if (w.globals.previousPaths.length > 0) {
-      // Keyed survivor → morph; shape-changed → snap; entering → null
-      // (falls through to the collapsed-centerline enter below).
-      pathFrom = this.getPreviousPath(realIndex, j, pathTo)
+      pathFrom = this._prevBody(realIndex, j, pathTo)
     }
     if (pathFrom == null) {
       pathFrom = this.buildBodyPath({
@@ -426,7 +430,7 @@ class Violin extends BarBase {
         alongFn,
         vertical: true,
       }),
-      alongRepresentative: alongFn(this.series[indexes.i][j] ?? 0),
+      alongRepresentative: alongFn(w.seriesData.series[realIndex][j] ?? 0),
     }
   }
 
@@ -434,7 +438,7 @@ class Violin extends BarBase {
   drawHorizontalViolin({ indexes, y, yDivision, barHeight, zeroW }) {
     const w = this.w
     const { realIndex, j } = indexes
-    const yRatio = this.invertedYRatio
+    const yRatio = this.invertedYRatio * (this.isReversed ? -1 : 1)
 
     // One band per row on its side, a date or number x included: see
     // Bar.drawBarPaths.
@@ -475,9 +479,7 @@ class Violin extends BarBase {
     if (morphFrom) {
       pathFrom = morphFrom
     } else if (w.globals.previousPaths.length > 0) {
-      // Keyed survivor → morph; shape-changed → snap; entering → null
-      // (falls through to the collapsed-centerline enter below).
-      pathFrom = this.getPreviousPath(realIndex, j, pathTo)
+      pathFrom = this._prevBody(realIndex, j, pathTo)
     }
     if (pathFrom == null) {
       pathFrom = this.buildBodyPath({
@@ -516,7 +518,7 @@ class Violin extends BarBase {
         alongFn,
         vertical: false,
       }),
-      alongRepresentative: alongFn(this.series[indexes.i][j] ?? 0),
+      alongRepresentative: alongFn(w.seriesData.series[realIndex][j] ?? 0),
     }
   }
 
@@ -631,6 +633,25 @@ class Violin extends BarBase {
     )
   }
 
+  /**
+   * The survivor's previous body when it can morph to `pathTo`, else null so
+   * the violin regrows from its centreline (a changed density node count
+   * cannot tween, and bar corner reconciliation does not apply here).
+   *
+   * @param {number} realIndex
+   * @param {number} j
+   * @param {string} pathTo
+   * @returns {string | null}
+   */
+  _prevBody(realIndex, j, pathTo) {
+    const d = this._prevKeyedPaths(realIndex)?.get(
+      datumKey(this.w, realIndex, j),
+    )?.d
+    return d && Violin.pathCommandCount(d) === Violin.pathCommandCount(pathTo)
+      ? d
+      : null
+  }
+
   /**
    * Build the five-number box sub-paths for one category — the raincloud
    * "umbrella", or a violin box overlay. Two sub-paths so each can carry its
@@ -698,26 +719,23 @@ class Violin extends BarBase {
     const full = build(capHalf, boxHalfPx)
     const collapsed = build(0, 0)
 
-    /** @param {string} pathTo @param {string} collapsedFrom */
-    const fromFor = (pathTo, collapsedFrom) => {
-      let pathFrom = null
-      if (w.globals.previousPaths.length > 0) {
-        // Keyed survivor → morph; shape-changed → snap; entering → null.
-        // (No morphTypeChange here: the body path claims the morph target.)
-        pathFrom = this.getPreviousPath(realIndex, j, pathTo)
-      }
-      return pathFrom == null ? collapsedFrom : pathFrom
-    }
+    // The box lane rides on its body's captured entry (see
+    // Series.capturePreviousPaths), matched by datum key like the body. An
+    // entering box grows out of the collapsed lane.
+    const keyed = w.globals.previousPaths.length
+      ? this._prevKeyedPaths(realIndex)
+      : null
+    const prevBox = keyed?.get(datumKey(w, realIndex, j))?.box || []
 
     return [
       {
         pathTo: full.whiskers,
-        pathFrom: fromFor(full.whiskers, collapsed.whiskers),
+        pathFrom: prevBox[0] || collapsed.whiskers,
         filled: false,
       },
       {
         pathTo: full.box,
-        pathFrom: fromFor(full.box, collapsed.box),
+        pathFrom: prevBox[1] || collapsed.box,
         filled: true,
       },
     ]
@@ -809,8 +827,8 @@ class Violin extends BarBase {
         ? cloudMaxPx
         : halfExtent
     return buildJitterGroups({
-      w: this.w,
       points: this.w.violinData.seriesViolinPoints[realIndex]?.[j],
+      extent: /** @type {number[]} */ (this.jx),
       seedA: realIndex,
       seedB: j,
       center: scatterCenter,

package/src/charts/common/Breadcrumb.js

@@ -191,7 +191,7 @@ export function clearBreadcrumb(w) {
  * @param {any} w
  * @param {{
  *   crumbs: Array<{ label: string, data?: any }>,
- *   onNavigate: (index: number, crumb: any) => void,
+ *   onNavigate: (index: number, crumb: any, e: MouseEvent) => void,
  *   ariaLabel?: string,
  *   config?: any,
  *   compact?: boolean,
@@ -270,7 +270,7 @@ export function renderBreadcrumb(w, opts) {
     text.setAttribute('class', 'apexcharts-breadcrumb-label')
     text.textContent = String(label)
     btn.appendChild(text)
-    btn.addEventListener('click', () => opts.onNavigate(i, crumb))
+    btn.addEventListener('click', (e) => opts.onNavigate(i, crumb, e))
     nav.appendChild(btn)
   })
 

package/src/charts/common/Hierarchy.js

@@ -12,8 +12,9 @@
  *      a nested view does not pull the feature in)
  *
  * A node is `{ name, value, color?, _key, children? }`. `_key` is the node's
- * identity across data updates: the path of names, indexed so same-named
- * siblings stay distinct, which is what update animations match on.
+ * identity across data updates: the path of names, each counted among its
+ * same-named siblings so duplicates stay distinct while an inserted or removed
+ * sibling leaves the others alone. Update animations match on it.
  *
  * `value` is left as authored here; call `fillValues` to roll a missing parent
  * value up from its children.
@@ -38,6 +39,20 @@ export function drilldownById(w, id) {
   return list.find((/** @type {any} */ s) => s && s.id === id)
 }
 
+/**
+ * One key segment: the name ('/' escaped, it is the separator) prefixed by how
+ * many earlier siblings share it.
+ * @param {any} name
+ * @param {Map<string, number>} seen  per sibling list
+ * @returns {string}
+ */
+function segment(name, seen) {
+  const n = String(name).replace(/\//g, '%2F')
+  const o = (seen.get(n) ?? -1) + 1
+  seen.set(n, o)
+  return `${o}:${n}`
+}
+
 /**
  * Resolve one datum (and everything under it) into a node.
  *
@@ -56,6 +71,7 @@ export function drilldownById(w, id) {
  *   The treemap turns this off unless asked: there, a `drilldown` id has always
  *   meant "descend on click" via the drilldown feature, and silently rendering
  *   those levels nested instead would change what existing charts draw.
+ * @param {Map<string, number>} [seen]  names already keyed among the siblings
  * @returns {any}
  */
 export function toNode(
@@ -66,28 +82,30 @@ export function toNode(
   parentKey,
   seenIds = null,
   opts = {},
+  seen = new Map(),
 ) {
   const isObj = d && typeof d === 'object'
   const name = isObj ? (d.x ?? d.name ?? '') : ''
-  const value = isObj ? Number(d.y ?? d.value) : Number(d)
+  // null / '' is a missing value (rolled up by fillValues), not a zero.
+  const raw = isObj ? (d.y ?? d.value) : d
+  const value = raw == null || raw === '' ? NaN : Number(raw)
   /** @type {any} */
   const node = {
     name: String(name),
     value: isNaN(value) ? null : value,
     color: isObj && d.color ? d.color : undefined,
-    // Identity across data updates: the path of names (indexed so same-named
-    // siblings stay distinct). Update animations morph matched keys in place.
-    _key: `${parentKey}/${i}:${name}`,
+    _key: `${parentKey}/${segment(name, seen)}`,
   }
   if (paletteFromParent && !node.color) {
     node.color = paletteFromParent[i % paletteFromParent.length]
   }
   if (opts.keepDatum) node._datum = d
 
+  const kids = new Map()
   if (isObj && Array.isArray(d.children) && d.children.length) {
     node.children = d.children.map(
       (/** @type {any} */ c, /** @type {number} */ j) =>
-        toNode(w, c, j, null, node._key, seenIds, opts),
+        toNode(w, c, j, null, node._key, seenIds, opts, kids),
     )
   } else if (isObj && d.drilldown != null && opts.expandDrilldown !== false) {
     // Drilldown ids resolve indirectly, so a self- or mutually-referential id
@@ -102,7 +120,7 @@ export function toNode(
         const palette = Array.isArray(dd.colors) ? dd.colors : null
         node.children = dd.data.map(
           (/** @type {any} */ c, /** @type {number} */ j) =>
-            toNode(w, c, j, palette, node._key, nextSeen, opts),
+            toNode(w, c, j, palette, node._key, nextSeen, opts, kids),
         )
       }
     }
@@ -123,8 +141,9 @@ export function buildHierarchy(w, opts = {}) {
   const first = cfgSeries && cfgSeries[0]
   const data = first && Array.isArray(first.data) ? first.data : cfgSeries
   if (!Array.isArray(data)) return []
+  const seen = new Map()
   return data.map((/** @type {any} */ d, /** @type {number} */ i) =>
-    toNode(w, d, i, null, '', null, opts),
+    toNode(w, d, i, null, '', null, opts, seen),
   )
 }
 
@@ -142,9 +161,11 @@ export function buildHierarchy(w, opts = {}) {
 export function buildSeriesRoots(w, series, opts = {}) {
   const cfgSeries = /** @type {any} */ (series || w.config.series)
   if (!Array.isArray(cfgSeries)) return []
+  const seen = new Map()
   return cfgSeries.map((/** @type {any} */ s, /** @type {number} */ i) => {
     const data = s && Array.isArray(s.data) ? s.data : []
-    const key = `${i}:${s?.name ?? ''}`
+    const key = segment(s?.name ?? '', seen)
+    const kids = new Map()
     /** @type {any} */
     const root = {
       name: String(s?.name ?? ''),
@@ -153,7 +174,7 @@ export function buildSeriesRoots(w, series, opts = {}) {
       _key: key,
       _seriesIndex: i,
       children: data.map((/** @type {any} */ d, /** @type {number} */ j) =>
-        toNode(w, d, j, null, key, null, opts),
+        toNode(w, d, j, null, key, null, opts, kids),
       ),
     }
     return root

package/src/charts/common/Jitter.js

@@ -14,6 +14,28 @@ import Utils from '../../utils/Utils'
  * @module common/Jitter
  **/
 
+/**
+ * The value range of the drawn series' observations, for a colorScale ramp.
+ * Once per draw; stale slots past the series count and non-numbers are skipped.
+ * @param {any[]} pool per-series, per-datum observations
+ * @param {any} w
+ * @returns {number[]}
+ */
+export function jitterExtent(pool, w) {
+  let lo = Infinity
+  let hi = -Infinity
+  pool
+    .slice(0, w.seriesData.series.length)
+    .flat(2)
+    .forEach((v) => {
+      if (v === +v) {
+        if (v < lo) lo = v
+        if (v > hi) hi = v
+      }
+    })
+  return [lo, hi]
+}
+
 /**
  * Build the jitter sub-path groups for ONE category. Returns `[]` when points
  * are hidden/absent. Normally one group (single dot colour); with
@@ -22,8 +44,8 @@ import Utils from '../../utils/Utils'
  * caller's resolved default colour.
  *
  * @param {{
- *   w: any,
  *   points: number[] | undefined,
+ *   extent: number[],
  *   seedA: number,
  *   seedB: number,
  *   center: number,
@@ -37,8 +59,8 @@ import Utils from '../../utils/Utils'
  * @returns {{fill:string|null, d:string}[]}
  */
 export function buildJitterGroups({
-  w,
   points,
+  extent,
   seedA,
   seedB,
   center,
@@ -67,8 +89,10 @@ export function buildJitterGroups({
   const useScale =
     scale && Array.isArray(scale.colors) && scale.colors.length > 0
   const steps = useScale ? Math.max(2, scale.steps || 24) : 1
-  const sMin = useScale && scale.min != null ? scale.min : w.globals.minY
-  const sMax = useScale && scale.max != null ? scale.max : w.globals.maxY
+  // The ramp spans the observations (jitterExtent) unless colorScale says
+  // otherwise: an axis's nice scale overshoots them, so the ends never showed.
+  const sMin = scale?.min ?? extent[0]
+  const sMax = scale?.max ?? extent[1]
   const span = sMax - sMin || 1
   /** @type {string[]} */
   const buckets = useScale ? new Array(steps).fill('') : ['']
@@ -206,13 +230,14 @@ export function renderJitter({
 /**
  * Darken a colour toward black by `amount` (0 = unchanged, 1 = black),
  * returning an `rgb(...)` string. Falls back to the input when it can't be
- * parsed as hex.
- * @param {string} color hex colour
+ * parsed (hex, rgb()/rgba(), or a named colour the browser resolves).
+ * @param {string} color
  * @param {number} amount 0..1
  * @returns {string}
  */
 export function darkenColor(color, amount) {
-  const rgb = Utils.parseHex(color)
+  const rgb =
+    Utils.parseColor(color) || Utils.parseColor(Utils.resolveColor(color))
   if (!rgb) return color
   const f = Math.max(0, 1 - amount)
   return `rgb(${Math.round(rgb[0] * f)},${Math.round(rgb[1] * f)},${Math.round(rgb[2] * f)})`