apexcharts 8.3.0 → 8.4.0

package/src/modules/trellis/TrellisChrome.js

@@ -26,6 +26,21 @@ const ICONS = {
     '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 4v11"/><path d="M7 11l5 5 5-5"/><path d="M4 20h16"/></svg>',
 }
 
+/**
+ * Paint one legend item from the trellis's state: the marker from the
+ * colour map, the inactive look from the hidden set (which every panel
+ * mounted from it honours too, so the two always agree).
+ * @param {import('./Trellis').default} t
+ * @param {any} item
+ * @param {string} name
+ */
+function paintItem(t, item, name) {
+  const hidden = t.sync.isHidden(name)
+  item.firstChild.style.background = t.scales ? t.scales.colorOf(name) : '#008FFB'
+  item.classList.toggle('apexcharts-inactive-legend', hidden)
+  item.setAttribute('data:collapsed', String(hidden))
+}
+
 export default class TrellisChrome {
   /**
    * @param {import('./Trellis').default} trellis
@@ -39,6 +54,8 @@ export default class TrellisChrome {
     /** @type {HTMLElement|null} */
     this.elTitle = null
     /** @type {HTMLElement|null} */
+    this.elSubtitle = null
+    /** @type {HTMLElement|null} */
     this.elBreadcrumb = null
     /** @type {HeatmapGradientLegend|null} shared gradient strip (P5, heatmap) */
     this.gradientLegend = null
@@ -170,21 +187,42 @@ export default class TrellisChrome {
   }
 
   /**
-   * The trellis-level title, from the host's own `title` config (panels have
-   * theirs suppressed).
+   * The trellis-level title and subtitle, from the host's own `title` and
+   * `subtitle` config (panels have theirs suppressed). The title keeps the
+   * stylesheet's lighter weight unless the page set `title.style.fontWeight`
+   * itself (the merged core default, 900, is heavier than the grid chrome).
    * @param {HTMLElement} host
    */
   buildTitle(host) {
-    const title = this.trellis.w.config.title
-    if (!title || !title.text) return
-    const el = BrowserAPIs.createElement('div')
-    el.className = 'apexcharts-trellis-title'
-    el.textContent = title.text
-    const style = title.style || {}
-    if (style.fontSize) el.style.fontSize = style.fontSize
-    if (style.color) el.style.color = style.color
-    host.appendChild(el)
-    this.elTitle = el
+    const config = this.trellis.w.config
+    /** @param {'title'|'subtitle'} k */
+    const make = (k) => {
+      const cfg = config[k]
+      if (!cfg || !cfg.text) return null
+      const el = BrowserAPIs.createElement('div')
+      el.className = 'apexcharts-trellis-' + k
+      el.textContent = cfg.text
+      const { fontSize, fontWeight, fontFamily, color } = cfg.style || {}
+      const s = el.style
+      if (fontSize) s.fontSize = fontSize
+      // the title's stylesheet weight stands unless the page set one
+      const fw =
+        k === 'title'
+          ? this.trellis.ctx.opts?.title?.style?.fontWeight
+          : fontWeight
+      if (fw) s.fontWeight = String(fw)
+      if (fontFamily) s.fontFamily = fontFamily
+      if (color || k !== 'title') {
+        // no stylesheet rule for the subtitle (core CSS stays untouched)
+        s.color = color || 'var(--apx-fore, var(--apx-trellis-fore, #373d3f))'
+      }
+      if (k !== 'title') s.padding = '0 0 6px'
+      if (cfg.align && cfg.align !== 'left') s.textAlign = cfg.align
+      host.appendChild(el)
+      return el
+    }
+    this.elTitle = make('title')
+    this.elSubtitle = make('subtitle')
   }
 
   /**
@@ -194,6 +232,8 @@ export default class TrellisChrome {
    */
   buildLegend(host) {
     const t = this.trellis
+    /** @type {string|null} the categorical legend's names, as JSON */
+    this._names = null
     if ((t.cfg.legend || 'shared') !== 'shared') return
     // A heatmap's legend IS its color scale (P5): one shared gradient strip
     // for the grid instead of a categorical name list.
@@ -215,11 +255,9 @@ export default class TrellisChrome {
       item.className = 'apexcharts-legend-series apexcharts-trellis-legend-item'
       item.setAttribute('role', 'listitem')
       item.setAttribute('tabindex', '0')
-      item.setAttribute('data:collapsed', 'false')
 
       const marker = BrowserAPIs.createElement('span')
       marker.className = 'apexcharts-legend-marker'
-      marker.style.background = t.scales ? t.scales.colorOf(name) : '#008FFB'
 
       const text = BrowserAPIs.createElement('span')
       text.className = 'apexcharts-legend-text'
@@ -227,11 +265,11 @@ export default class TrellisChrome {
 
       item.appendChild(marker)
       item.appendChild(text)
+      paintItem(t, item, name)
 
       const toggle = () => {
-        const hidden = t.sync.toggleSeries(name)
-        item.classList.toggle('apexcharts-inactive-legend', hidden)
-        item.setAttribute('data:collapsed', String(hidden))
+        t.sync.toggleSeries(name)
+        paintItem(t, item, name)
       }
       item.addEventListener('click', toggle)
       item.addEventListener('keydown', (/** @type {any} */ e) => {
@@ -245,25 +283,33 @@ export default class TrellisChrome {
 
     host.appendChild(wrap)
     this.elLegend = wrap
+    this._names = JSON.stringify(names)
   }
 
   /**
-   * Repaint the shared legend's markers from the current colour map, without
-   * rebuilding the legend (which would drop the collapsed state a viewer has
-   * toggled). Used by the in-place option update, where `colors` may have
-   * moved but nothing structural has.
+   * Bring the shared legend up to date after an in-place update: new data
+   * may add or drop names (and a heatmap strip has to span the new colour
+   * range); a `colors` change moves the markers. The same names repaint in
+   * place, so a streaming grid neither churns the DOM nor takes keyboard
+   * focus off an item. Otherwise the legend is rebuilt where it stood.
    */
-  refreshLegendColors() {
+  rebuildLegend() {
     const t = this.trellis
-    const legend = this.elLegend
-    const scales = t.scales
-    if (!legend || !scales) return
-    const items = legend.querySelectorAll('.apexcharts-trellis-legend-item')
-    items.forEach((/** @type {any} */ item) => {
-      const name = item.querySelector('.apexcharts-legend-text')?.textContent
-      const marker = item.querySelector('.apexcharts-legend-marker')
-      if (name && marker) marker.style.background = scales.colorOf(name)
-    })
+    const old = this.elLegend
+    const names = t.split ? t.split.seriesNames : []
+    if (old && this._names === JSON.stringify(names)) {
+      names.forEach((n, i) =>
+        paintItem(t, old.children[i], n),
+      )
+      return
+    }
+    this.destroyGradientLegend()
+    this.elLegend = null
+    if (t.elWrap) this.buildLegend(t.elWrap)
+    // (buildLegend set it; the cast undoes the narrowing to null above)
+    const el = /** @type {HTMLElement|null} */ (this.elLegend)
+    // the new legend takes the old one's place in the wrap
+    if (old) el ? old.replaceWith(el) : old.remove()
   }
 
   /**
@@ -328,11 +374,19 @@ export default class TrellisChrome {
       t.ctx.events.removeEventListener?.('panelMounted', this._gradPending)
       this._gradPending = null
     }
-    // the panels' own buses die with them right after (teardown)
     t.ctx.events.removeEventListener('panelMounted', this._gradWire)
-    if (this.gradientLegend) {
+    this._gradWire = null
+    const legend = this.gradientLegend
+    if (legend) {
+      // Live panels outlive a strip rebuilt in place (an update), so their
+      // hover wiring has to go with it; on teardown they die right after.
+      t.panels.forEach((p) => {
+        const ev = /** @type {any} */ (p.chart)?.ctx.events
+        ev?.removeEventListener('dataPointMouseEnter', legend._onCellEnter)
+        ev?.removeEventListener('dataPointMouseLeave', legend._onCellLeave)
+      })
       try {
-        this.gradientLegend.destroy()
+        legend.destroy()
       } catch (e) {
         // The carrier panel may already be destroyed; the strip DOM goes
         // with the trellis wrap either way.
@@ -358,10 +412,13 @@ export default class TrellisChrome {
     const buttons = {}
     /** @param {'zoom'|'pan'} tool */
     const arm = (tool) => {
+      // kept on the trellis, so panels mounted later start with this tool
+      t._tool = tool
       t.panels.forEach((p) => {
         if (!p.chart) return
         const it = p.chart.w.interact
-        it.zoomEnabled = tool === 'zoom'
+        // never arms a zoom the panel's config turned off
+        it.zoomEnabled = tool === 'zoom' && p.chart.w.config.chart.zoom.enabled
         it.panEnabled = tool === 'pan'
         it.selectionEnabled = false
       })
@@ -389,11 +446,17 @@ export default class TrellisChrome {
       return b
     }
 
-    makeButton('zoom', 'Selection zoom', () => arm('zoom'))
-    makeButton('pan', 'Pan', () => arm('pan'))
-    makeButton('reset', 'Reset zoom', () => {
-      t.sync.resetAll()
-    })
+    // Same rule as the panels' zoom.enabled: with zoom off for the grid there
+    // is nothing for zoom, pan or reset to do, so they are left out.
+    const zoom =
+      t.cfg.zoom !== 'none' && t.ctx.opts?.chart?.zoom?.enabled !== false
+    if (zoom) {
+      makeButton('zoom', 'Selection zoom', () => arm('zoom'))
+      makeButton('pan', 'Pan', () => arm('pan'))
+      makeButton('reset', 'Reset zoom', () => {
+        t.sync.resetAll()
+      })
+    }
 
     // The download tool (P3): one composed artifact for the whole grid.
     // Requires the exports feature on the panels; omitted otherwise.
@@ -421,10 +484,13 @@ export default class TrellisChrome {
       bar.appendChild(menu)
     }
 
-    // Default tool mirrors the per-chart default (toolbar.autoSelected 'zoom').
-    buttons.zoom.classList.add('apexcharts-selected')
-    buttons.zoom.setAttribute('aria-pressed', 'true')
-    buttons.pan.setAttribute('aria-pressed', 'false')
+    if (!bar.firstChild) return
+    if (zoom) {
+      // Default tool mirrors the per-chart default (toolbar.autoSelected 'zoom').
+      buttons.zoom.classList.add('apexcharts-selected')
+      buttons.zoom.setAttribute('aria-pressed', 'true')
+      buttons.pan.setAttribute('aria-pressed', 'false')
+    }
 
     host.appendChild(bar)
     this.elToolbar = bar

package/src/modules/trellis/TrellisExports.js

@@ -49,6 +49,17 @@ export default class TrellisExports {
     }
   }
 
+  /**
+   * Panels on screen. A promotion parks the rest as display:none, whose
+   * rects collapse onto the wrap origin; the export is what the user sees,
+   * so a promoted grid exports the promoted panel alone.
+   */
+  _shown() {
+    return this.trellis.panels.filter(
+      (p) => !p.cellEl?.classList.contains('apexcharts-trellis-cell-parked'),
+    )
+  }
+
   /** Export surface size = the wrap's own box. */
   _size() {
     const wrap = /** @type {HTMLElement} */ (this.trellis.elWrap)
@@ -67,19 +78,28 @@ export default class TrellisExports {
     return '#fff'
   }
 
-  /** Text pieces to compose: title + one header per cell (+ legend items). */
+  /**
+   * Text pieces to compose: title + subtitle + one header per cell (+ legend
+   * items). An inline `text-align` (the title's `align`) wins over the
+   * piece's default anchor.
+   */
   _chromeTexts() {
     const t = this.trellis
-    /** @type {Array<{ text: string, x: number, y: number, font: string, fontSize: number, color: string, align: 'left'|'center' }>} */
+    /** @type {Array<{ text: string, x: number, y: number, font: string, fontSize: number, color: string, align: 'left'|'center'|'right' }>} */
     const texts = []
-    /** @param {Element|null} el @param {'left'|'center'} align */
-    const push = (el, align) => {
+    /** @param {Element|null} el @param {'left'|'center'} fallback */
+    const push = (el, fallback) => {
       if (!el || !el.textContent) return
       const rect = this._rectIn(el)
       const cs = getComputedStyle(/** @type {HTMLElement} */ (el))
+      const align = /** @type {'left'|'center'|'right'} */ (
+        /** @type {HTMLElement} */ (el).style.textAlign || fallback
+      )
       texts.push({
         text: el.textContent,
-        x: align === 'center' ? rect.x + rect.w / 2 : rect.x,
+        x:
+          rect.x +
+          (align === 'left' ? 0 : align === 'right' ? rect.w : rect.w / 2),
         y: rect.y + rect.h / 2,
         font: `${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`,
         fontSize: parseFloat(cs.fontSize) || 12,
@@ -88,7 +108,8 @@ export default class TrellisExports {
       })
     }
     push(t.chrome.elTitle, 'left')
-    t.panels.forEach((p) => {
+    push(t.chrome.elSubtitle, 'left')
+    this._shown().forEach((p) => {
       if (!p.cellEl) return
       push(p.cellEl.querySelector('.apexcharts-trellis-header'), 'center')
     })
@@ -122,7 +143,6 @@ export default class TrellisExports {
    * @returns {Promise<{ imgURI: string }>}
    */
   async dataURI(options = {}) {
-    const t = this.trellis
     const scale = options.scale || 1
     const size = this._size()
     const canvas = document.createElement('canvas')
@@ -136,7 +156,7 @@ export default class TrellisExports {
     ctx.fillRect(0, 0, size.w, size.h)
 
     // Panels first (their own export path), skeleton tint for unmounted.
-    for (const p of t.panels) {
+    for (const p of this._shown()) {
       if (!p.el) continue
       const rect = this._rectIn(p.el)
       if (!p.chart) {
@@ -180,7 +200,6 @@ export default class TrellisExports {
    * @returns {Promise<string>}
    */
   async svgString(scale = 1) {
-    const t = this.trellis
     const size = this._size()
     /** @type {string[]} */
     const parts = []
@@ -190,7 +209,7 @@ export default class TrellisExports {
     parts.push(
       `<rect width="${size.w}" height="${size.h}" fill="${this._background()}"/>`,
     )
-    for (const p of t.panels) {
+    for (const p of this._shown()) {
       if (!p.el) continue
       const rect = this._rectIn(p.el)
       if (!p.chart) {
@@ -205,7 +224,12 @@ export default class TrellisExports {
       )
     }
     for (const piece of this._chromeTexts()) {
-      const anchor = piece.align === 'center' ? 'middle' : 'start'
+      const anchor =
+        piece.align === 'left'
+          ? 'start'
+          : piece.align === 'right'
+            ? 'end'
+            : 'middle'
       parts.push(
         `<text x="${piece.x}" y="${piece.y}" text-anchor="${anchor}" dominant-baseline="central" style="font:${escapeAttr(
           piece.font,
@@ -248,9 +272,20 @@ export default class TrellisExports {
         ? `"${s.replace(/"/g, '""')}"`
         : s
     }
+    // Plain value arrays carry no x: the union holds positions, so write the
+    // label the axis shows there (categories, then labels, then 1-based).
+    const cats =
+      split.xForm === 'plain' &&
+      (w.config.xaxis.categories?.length
+        ? w.config.xaxis.categories
+        : w.config.labels || [])
     /** @param {any} x */
-    const xOut = (x) =>
-      isDatetime && typeof x === 'number' ? new Date(x).toISOString() : x
+    const xOut = (x) => {
+      if (cats) x = cats[x] ?? x + 1
+      // a multi-line category reads as one line, as in a plain chart's CSV
+      if (Array.isArray(x)) x = x.join(' ')
+      return isDatetime && typeof x === 'number' ? new Date(x).toISOString() : x
+    }
 
     const names = split.seriesNames
     const lines = [

package/src/modules/trellis/TrellisFrames.js

@@ -78,13 +78,12 @@ function observationValues(data) {
 
 /**
  * Raw observation ARRAYS of one series' data (the violin/boxPlot raw form:
- * `{ x: 'A', y: [obs...] }`), flattened.
+ * `{ x: 'A', y: [obs...] }`), flattened onto `out`.
  * @param {any} data
+ * @param {number[]} out appended to in place, so a union grows in one pass
  * @returns {number[]}
  */
-function rawObservationArrays(data) {
-  /** @type {number[]} */
-  const out = []
+function rawObservationArrays(data, out) {
   if (!Array.isArray(data)) return out
   data.forEach((/** @type {any} */ d) => {
     const y = d && typeof d === 'object' ? d.y : null
@@ -146,16 +145,13 @@ export function buildTypeFrames(splitResult, cfg, hostConfig, chartType) {
   // which pins the edges no matter what each panel's own extent is.
   if (chartType === 'histogram') {
     const hcfg = plot.histogram || {}
-    /** @type {number[]} */
-    let union = []
     /** @type {number[][][]} per panel, per series */
     const panelSeriesVals = panels.map((p) =>
-      p.series.map((/** @type {any} */ s) => {
-        const vals = observationValues(s.data)
-        union = union.concat(vals)
-        return vals
-      }),
+      p.series.map((/** @type {any} */ s) => observationValues(s.data)),
     )
+    // One flatten: re-concatenating the growing union per series copied it
+    // once per series (quadratic in the panel count).
+    const union = panelSeriesVals.flat(2)
     const binning = computeBinning(union, {
       bins: hcfg.bins,
       binWidth: hcfg.binWidth,
@@ -203,11 +199,11 @@ export function buildTypeFrames(splitResult, cfg, hostConfig, chartType) {
     const kde = plot.violin?.kde || {}
     if (!(typeof kde.bandwidth === 'number' && kde.bandwidth > 0)) {
       /** @type {number[]} */
-      let union = []
+      const union = []
       panels.forEach((p) =>
-        p.series.forEach((/** @type {any} */ s) => {
-          union = union.concat(rawObservationArrays(s.data))
-        }),
+        p.series.forEach((/** @type {any} */ s) =>
+          rawObservationArrays(s.data, union),
+        ),
       )
       const est = union.length
         ? kernelDensity(union, { resolution: 8 })