apexcharts 8.2.0 → 8.3.0

package/src/modules/Series.js

@@ -63,8 +63,9 @@ export default class Series {
    * @param {string} seriesName
    */
   isSeriesHidden(seriesName) {
-    const targetElement = this.getSeriesByName(seriesName)
-    const el = /** @type {Element} */ (targetElement)
+    const el = this.getSeriesByName(seriesName)
+    // An unknown name (or a type that draws no series group) is a no-op.
+    if (!el) return { isHidden: false, realIndex: -1 }
     const realIndex = parseInt(el.getAttribute('data:realIndex') ?? '0', 10)
     // The collapse is recorded per index for every type; the class only on
     // the types that draw a series group for it. A pie, donut or polarArea
@@ -295,11 +296,11 @@ export default class Series {
    * @param {string} seriesName
    */
   toggleSeries(seriesName) {
-    const isSeriesHidden = this.isSeriesHidden(seriesName)
+    const { isHidden, realIndex } = this.isSeriesHidden(seriesName)
 
-    this._toggleDataSeries?.(isSeriesHidden.realIndex, isSeriesHidden.isHidden)
+    if (realIndex > -1) this._toggleDataSeries?.(realIndex, isHidden)
 
-    return isSeriesHidden.isHidden
+    return isHidden
   }
 
   /**
@@ -319,7 +320,7 @@ export default class Series {
   hideSeries(seriesName) {
     const isSeriesHidden = this.isSeriesHidden(seriesName)
 
-    if (!isSeriesHidden.isHidden) {
+    if (!isSeriesHidden.isHidden && isSeriesHidden.realIndex > -1) {
       this._toggleDataSeries?.(isSeriesHidden.realIndex, false)
     }
   }
@@ -409,10 +410,14 @@ export default class Series {
    * @param {any[]} series
    */
   emptyCollapsedSeries(series) {
-    const w = this.w
+    const gl = this.w.globals
     if (!Array.isArray(series)) return series
     for (let i = 0; i < series.length; i++) {
-      if (w.globals.collapsedSeriesIndices.indexOf(i) > -1) {
+      // A series hidden on a showAlways y axis sits on the ancillary list.
+      if (
+        gl.collapsedSeriesIndices.includes(i) ||
+        gl.ancillaryCollapsedSeriesIndices.includes(i)
+      ) {
         // Axis charts carry {name, data}; non-axis charts (pie / donut / unit)
         // carry a bare numeric value. Empty each in its own shape: setting
         // `.data` on a number throws ("Cannot create property 'data' on number"),
@@ -656,8 +661,10 @@ export default class Series {
    */
   highlightRangeInSeries(rangeIndex, action) {
     const w = this.w
+    // a treemap's gradient legend draws range bands too
+    const t = w.config.chart.type === 'treemap' ? 'treemap' : 'heatmap'
     const allHeatMapElements = w.dom.baseEl.getElementsByClassName(
-      'apexcharts-heatmap-rect',
+      `apexcharts-${t}-rect`,
     )
 
     /**
@@ -677,17 +684,24 @@ export default class Series {
       return
     }
 
-    const ranges = w.config.plotOptions.heatmap.colorScale.ranges
+    const ranges = w.config.plotOptions[t].colorScale.ranges
     const range = ranges && ranges[rangeIndex]
     if (!range) return
 
     toggleAllInactive('add')
     for (let i = 0; i < allHeatMapElements.length; i++) {
-      const val = Number(allHeatMapElements[i].getAttribute('val'))
+      const el = allHeatMapElements[i]
+      // treemap tiles carry no val; they are coloured by series[i][j]
+      const val = Number(
+        el.getAttribute('val') ??
+          w.seriesData.series[/** @type {any} */ (el.getAttribute('i'))]?.[
+            /** @type {any} */ (el.getAttribute('j'))
+          ],
+      )
       // Match the inclusive bounds used by determineColor (treemap/Helpers.js)
       // so the same cells that were colored by this range get highlighted.
       if (val >= range.from && val <= range.to) {
-        allHeatMapElements[i].classList.remove(this.legendInactiveClass)
+        el.classList.remove(this.legendInactiveClass)
       }
     }
   }
@@ -711,10 +725,7 @@ export default class Series {
             return (
               chartTypes.length === 0 ||
               (chartTypes.length &&
-                chartTypes.indexOf(
-                  /** @type {Record<string,any>} */ (w.config.series[index])
-                    .type,
-                ) > -1)
+                chartTypes.indexOf(s.type || w.config.chart.type) > -1)
             )
           }
           return true
@@ -765,7 +776,7 @@ export default class Series {
         if (
           w.globals.comboCharts &&
           chartTypes.length &&
-          chartTypes.indexOf(s.type) === -1
+          chartTypes.indexOf(s.type || w.config.chart.type) === -1
         ) {
           return
         }
@@ -786,7 +797,9 @@ export default class Series {
     if (w.globals.comboCharts) {
       return this.w.config.series
         .map((/** @type {any} */ s, /** @type {number} */ i) => {
-          return s.type === 'bar' || s.type === 'column' ? i : -1
+          // An untyped series draws as chart.type.
+          const t = s.type || w.config.chart.type
+          return t === 'bar' || t === 'column' ? i : -1
         })
         .filter((/** @type {number} */ i) => {
           return i !== -1
@@ -892,6 +905,13 @@ export default class Series {
             ((type === 'line' || type === 'area') &&
               paths[j].getAttribute('d')) ||
             paths[j].getAttribute('pathTo')
+          // A violin's box lane shares its body's datum key: ride on the
+          // body's entry so the keyed join stays one path per datum.
+          if (paths[j].classList.contains('apexcharts-raincloud-box')) {
+            const body = dArr.paths[dArr.paths.length - 1]
+            if (body) (body.box ||= []).push(d)
+            continue
+          }
           // Datum key + fill stamped by the bar renderer: the key lets the
           // next render match survivors by identity (not position) and detect
           // exited datums; the fill paints their exit ghosts.
@@ -935,6 +955,7 @@ export default class Series {
       'candlestick',
       'boxPlot',
       'radar',
+      'violin',
     ]
     chartTypes.forEach((type) => {
       const paths = getPaths(type)

package/src/modules/Theme.js

@@ -406,7 +406,7 @@ export default class Theme {
         c
       ].colors =
         w.config[c].colors === undefined
-          ? this.isColorFn
+          ? this.isColorFn && w.config.colors
             ? w.config.colors.slice()
             : defaultColors
           : w.config[c].colors.slice()

package/src/modules/ZoomPanSelection.js

@@ -5,6 +5,7 @@ import Toolbar from './Toolbar'
 import AxisMapping from './AxisMapping'
 import TooltipUtils from './tooltip/Utils'
 import { Box } from '../svg/index'
+import { BrowserAPIs } from '../ssr/BrowserAPIs.js'
 
 // Wheel-zoom feel: scrolling this many deltaY pixels doubles (or halves) the
 // visible x-window. 240px is about two discrete wheel notches per 2x zoom
@@ -381,6 +382,67 @@ export default class ZoomPanSelection extends Toolbar {
     return this._incidentalZoomEnabled(zoom && zoom.allowMouseWheelZoom)
   }
 
+  /** An explicit `true` zooms on every wheel; 'auto' needs Ctrl/Cmd. */
+  _wheelZoomGreedy() {
+    return this.w.config.chart.zoom.allowMouseWheelZoom === true
+  }
+
+  /**
+   * Tell a viewer whose bare wheel just scrolled past the chart how to zoom it.
+   * Shown over the chart while the scroll goes on and faded out shortly after
+   * it stops. Only for a mostly vertical wheel: a sideways trackpad swipe is
+   * not someone reaching for zoom.
+   *
+   * The node lives in elWrap and the timer on w.interact, since a re-render can
+   * replace both this instance and the wrapper's contents while it is up.
+   *
+   * @param {any} e
+   */
+  _showWheelHint(e) {
+    const w = this.w
+    if (w.config.chart.zoom.wheelHint === false) return
+    if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return
+    const wrap = w.dom.elWrap
+    if (!wrap) return
+
+    let el = wrap.querySelector('.apexcharts-wheel-hint')
+    if (!el) {
+      const win = BrowserAPIs.getWindow()
+      const nav = win && win.navigator
+      const mac = !!nav && /Mac|iPhone|iPad/.test(nav.platform || nav.userAgent)
+      const text = (w.globals.locale.toolbar.wheelZoomHint || '').replace(
+        '{key}',
+        mac ? '⌘' : 'Ctrl',
+      )
+      el = BrowserAPIs.createElement('div')
+      el.className = 'apexcharts-wheel-hint'
+      el.setAttribute('aria-hidden', 'true')
+      const label = BrowserAPIs.createElement('span')
+      label.textContent = text
+      label.style.fontFamily = w.config.chart.fontFamily
+      el.appendChild(label)
+      wrap.appendChild(el)
+      // lay the hidden state out before showing it, so it fades in
+      void (/** @type {HTMLElement} */ (el).offsetWidth)
+    }
+    el.classList.add('apexcharts-wheel-hint-visible')
+
+    const it = w.interact
+    if (it.wheelHintTimer) clearTimeout(it.wheelHintTimer)
+    it.wheelHintTimer = setTimeout(() => this._hideWheelHint(), 1200)
+  }
+
+  _hideWheelHint() {
+    const w = this.w
+    const it = w.interact
+    if (it.wheelHintTimer) {
+      clearTimeout(it.wheelHintTimer)
+      it.wheelHintTimer = null
+    }
+    const el = w.dom.elWrap?.querySelector('.apexcharts-wheel-hint')
+    if (el) el.classList.remove('apexcharts-wheel-hint-visible')
+  }
+
   /**
    * Put keyboard focus on the chart, where the chart is focusable at all.
    *
@@ -454,10 +516,28 @@ export default class ZoomPanSelection extends Toolbar {
    * @param {any} e
    */
   mouseWheelEvent(e) {
-    e.preventDefault()
-
     const st = this._wheel()
 
+    // Cooperative wheel ('auto'): a bare wheel belongs to the page, so a
+    // dashboard of charts scrolls past them instead of zooming each one it
+    // crosses. Ctrl/Cmd + wheel zooms, and so does a trackpad pinch, which
+    // browsers deliver as a wheel event with ctrlKey set. Once a zoom gesture
+    // is under way it keeps the wheel until it settles, so a trackpad's
+    // momentum tail after the key comes up does not spill into a page scroll.
+    // An explicit `true` keeps the greedy wheel (every scroll zooms).
+    if (
+      !this._wheelZoomGreedy() &&
+      !e.ctrlKey &&
+      !e.metaKey &&
+      st.endTimer == null
+    ) {
+      this._showWheelHint(e)
+      return
+    }
+
+    e.preventDefault()
+    this._hideWheelHint()
+
     // normalize the delta to pixels (deltaMode 1 = lines, 2 = pages)
     let dy = e.deltaY
     if (e.deltaMode === 1) dy *= 33
@@ -1520,6 +1600,43 @@ export default class ZoomPanSelection extends Toolbar {
     this.ctx.events.fireEvent('scrolled', args)
   }
 
+  /**
+   * Pan a zoomed x-window by `fraction` of its width (keyboard Shift+Arrow),
+   * clamped to the data as a drag pan is, and reported as one (`scrolled`).
+   * @param {number} fraction
+   */
+  panBy(fraction) {
+    const w = this.w
+    if (!w.interact.zoomed) return
+    const { min, max } = this._currentXWindow()
+    let d = (max - min) * fraction
+    // a category window moves by whole categories
+    if (w.config.xaxis.convertedCatToNumeric) {
+      d = d > 0 ? Math.ceil(d) : Math.floor(d)
+    }
+    // _clampBounds has none for a rangeBar: stop at the ends of its bars
+    if (w.axisFlags.isRangeBar) {
+      const r = w.rangeData
+      let lo = Infinity
+      let hi = -Infinity
+      r.seriesRangeStart
+        .concat(r.seriesRangeEnd)
+        .flat()
+        .forEach((/** @type {any} */ y) => {
+          if (y != null) {
+            lo = Math.min(lo, y)
+            hi = Math.max(hi, y)
+          }
+        })
+      d =
+        d > 0
+          ? Math.min(d, Math.max(0, hi - max))
+          : Math.max(d, Math.min(0, lo - min))
+      if (!d) return
+    }
+    if (this._applyXRange(min + d, max + d, false)) this._fireScrolled()
+  }
+
   /** @param {number} x @param {number} t */
   _pushSample(x, t) {
     const s = this._m().samples