apexcharts 8.2.0 → 8.3.0

package/src/charts/Line.js

@@ -111,17 +111,35 @@ class Line {
     // We call draw() for each series group
     this.prevSeriesY = []
     this.prevSeriesYByX = new Map()
+    // Ragged stacked x: the sorted union of the shown series' x, so each edge
+    // can pass through the stack at an x it lacks (see _iterateOverDataPoints)
+    /** @type {any[] | null} */
+    this._stackXs = null
+    if (w.config.chart.stacked && w.axisFlags.isXNumeric) {
+      const xs = series
+        .map((_, i) =>
+          w.globals.comboCharts ? /** @type {any} */ (seriesIndex)[i] : i,
+        )
+        .filter((ri) => !this._hidden(ri))
+        .map((ri) => w.seriesData.seriesX[ri] || [])
+      if (
+        xs.some(
+          (a) => a.length !== xs[0].length || a.some((v, k) => v !== xs[0][k]),
+        )
+      ) {
+        this._stackXs = [...new Set(xs.flat())].sort((a, b) => a - b)
+      }
+    }
 
     // push all series in an array, so we can draw in reverse order
     // (for stacked charts)
     const allSeries = []
 
     for (let i = 0; i < series.length; i++) {
-      series = this.lineHelpers.sameValueSeriesFix(i, series)
-
       const realIndex = w.globals.comboCharts
         ? /** @type {any} */ (seriesIndex)[i]
         : i
+      series = this.lineHelpers.sameValueSeriesFix(i, series, realIndex)
       const translationsIndex = this.yRatio.length > 1 ? realIndex : 0
 
       // A series hidden from the legend is drawn flat on the baseline instead
@@ -386,12 +404,7 @@ class Line {
     // (LengthTransition.shrinkCollapsingMarkers).
     if (w.config.chart.stacked || this.pointsChart) return null
     if (!Array.isArray(series[i]) || series[i].length !== 0) return null
-    if (
-      gl.collapsedSeriesIndices.indexOf(realIndex) === -1 &&
-      gl.ancillaryCollapsedSeriesIndices.indexOf(realIndex) === -1
-    ) {
-      return null
-    }
+    if (!this._hidden(realIndex)) return null
     const n = w.axisFlags.isXNumeric
       ? (w.seriesData.seriesX[realIndex] || []).length
       : gl.dataPoints
@@ -573,6 +586,15 @@ class Line {
     return this.prevSeriesYByX.get(key)
   }
 
+  /** @param {number} ri */
+  _hidden(ri) {
+    const g = this.w.globals
+    return (
+      g.collapsedSeriesIndices.indexOf(ri) > -1 ||
+      g.ancillaryCollapsedSeriesIndices.indexOf(ri) > -1
+    )
+  }
+
   /**
    * Fold a drawn series into the running stack top, so the next series can find
    * its baseline by x (#4886).
@@ -588,19 +610,19 @@ class Line {
    * correct if that representation ever changes.
    * @param {number} realIndex
    * @param {any[]} yArrj
+   * @param {any[]} [row] the drawn row, if not the series' own (a part)
    */
-  _recordStackTops(realIndex, yArrj) {
+  _recordStackTops(
+    realIndex,
+    yArrj,
+    row = this.w.seriesData.series[realIndex],
+  ) {
     const w = this.w
     // Only stacked series read the map back (stackTopAt), and the walk costs a
     // Map write per point: 4.7ms per update on a 50k line that is not stacked.
     if (!w.config.chart.stacked) return
     if (!Array.isArray(yArrj)) return
-    if (
-      w.globals.collapsedSeriesIndices.indexOf(realIndex) !== -1 ||
-      w.globals.ancillaryCollapsedSeriesIndices.indexOf(realIndex) !== -1
-    ) {
-      return
-    }
+    if (this._hidden(realIndex)) return
 
     for (let j = 0; j < yArrj.length; j++) {
       const key = this._stackKey(realIndex, j)
@@ -608,9 +630,10 @@ class Line {
       // A null y is a gap in this series, not a new top: leave whatever the
       // series below contributed. The ordinal path used to hand the null
       // straight to the next series as its baseline, where it coerced to 0 and
-      // put that point at the top of the plot.
+      // put that point at the top of the plot. Decided from the datum: the
+      // straight and step curves park a null at getY(minY), a real number.
       const y = yArrj[j]
-      if (!Utils.isNumber(y)) continue
+      if (!Utils.isNumber(y) || row?.[j] == null) continue
       this.prevSeriesYByX.set(key, y)
     }
   }
@@ -665,10 +688,14 @@ class Line {
 
     const forecast = w.config.forecastDataPoints
     if (forecast.count > 0 && type !== 'rangeArea') {
-      const forecastCutoff =
-        w.globals.seriesXvalues[realIndex][
-          w.globals.seriesXvalues[realIndex].length - forecast.count - 1
-        ]
+      // From the axis, not seriesXvalues: that holds null for a null value,
+      // which put the cutoff at 0 and dashed the whole series.
+      const ci = paths.xArrj.length - forecast.count - 1
+      const forecastCutoff = w.axisFlags.isXNumeric
+        ? (w.seriesData.seriesX[realIndex][ci] - w.globals.minX) / this.xRatio
+        : w.globals.padHorizontal +
+          this.categoryAxisCorrection +
+          ci * this.xDivision
       const elForecastMask = graphics.drawRect(
         forecastCutoff,
         0,
@@ -815,7 +842,7 @@ class Line {
           scrollMorph: !!streamScroll,
           stroke: 'none',
           strokeWidth: 0,
-          strokeLineCap: null,
+          strokeLinecap: null,
           fill: pathFill,
         })
         this.elSeries.add(renderedPath)
@@ -866,7 +893,7 @@ class Line {
           scrollMorph: !!streamScroll,
           stroke: lineFill,
           strokeWidth: this.strokeWidth,
-          strokeLineCap: w.config.stroke.lineCap,
+          strokeLinecap: w.config.stroke.lineCap,
           fill: type === 'rangeArea' ? pathFill : 'none',
         }
         const renderedPath = emit.renderPaths(linePathCommonOpts)
@@ -1018,6 +1045,15 @@ class Line {
       if (fast) return fast
     }
 
+    // Between two of its points a ragged stacked series contributes 0 at any
+    // x it lacks, so its edge passes through the stack top there (the axis
+    // when nothing below has that x), or the layers cross. midsAt[j] holds
+    // those vertices before point j.
+    const ks = stackSeries ? this._stackXs : null
+    let kp = 0
+    /** @type {any[][]} */
+    const midsAt = []
+
     for (let j = 0; j < iterations; j++) {
       if (series[i].length === 0) break
 
@@ -1025,12 +1061,24 @@ class Line {
         typeof series[i][j + 1] === 'undefined' || series[i][j + 1] === null
 
       if (w.axisFlags.isXNumeric) {
-        let sX = w.seriesData.seriesX[realIndex][j + 1]
-        if (typeof w.seriesData.seriesX[realIndex][j + 1] === 'undefined') {
+        const sxs = w.seriesData.seriesX[realIndex]
+        let sX = sxs[j + 1]
+        if (typeof sX === 'undefined') {
           /* fix #374 */
-          sX = w.seriesData.seriesX[realIndex][iterations - 1]
+          sX = sxs[iterations - 1]
         }
         x = (sX - w.globals.minX) / this.xRatio
+        if (ks) {
+          const m = []
+          while (ks[kp] <= sxs[j]) kp++
+          while (ks[kp] < sX) {
+            m.push([
+              (ks[kp] - w.globals.minX) / this.xRatio,
+              this.prevSeriesYByX.get(ks[kp++]) ?? this.zeroY,
+            ])
+          }
+          if (m.length) midsAt[j + 1] = m
+        }
       } else {
         x = x + this.xDivision
       }
@@ -1078,12 +1126,7 @@ class Line {
           const prevIndex = (pi) => {
             for (let pii = pi; pii >= 0; pii--) {
               const ri = seriesIndex?.[pii] ?? pii
-              if (
-                w.globals.collapsedSeriesIndices.indexOf(ri) === -1 &&
-                w.globals.ancillaryCollapsedSeriesIndices.indexOf(ri) === -1
-              ) {
-                return pii
-              }
+              if (!this._hidden(ri)) return pii
             }
             return -1
           }
@@ -1163,6 +1206,7 @@ class Line {
         j,
         x,
         y,
+        midsAt,
         y2,
         xArrj,
         yArrj,
@@ -1469,7 +1513,7 @@ class Line {
     }
   }
 
-  /** @param {{type: any, series: any, i: any, j: any, x: any, y: any, xArrj: any, yArrj: any, y2: any, y2Arrj: any, pX: any, pY: any, pathState: any, segmentStartX: any, linePath: any, areaPath: any, linePaths: any, areaPaths: any, curve: any, isRangeStart: any}} opts */
+  /** @param {{type: any, series: any, i: any, j: any, x: any, y: any, midsAt: any[][], xArrj: any, yArrj: any, y2: any, y2Arrj: any, pX: any, pY: any, pathState: any, segmentStartX: any, linePath: any, areaPath: any, linePaths: any, areaPaths: any, curve: any, isRangeStart: any}} opts */
   _createPaths({
     type,
     series,
@@ -1477,6 +1521,7 @@ class Line {
     j,
     x,
     y,
+    midsAt,
     xArrj,
     yArrj,
     y2,
@@ -1496,6 +1541,15 @@ class Line {
     const areaBottomY = this.areaBottomY
     const rangeArea = type === 'rangeArea'
     const isLowerRangeAreaPath = type === 'rangeArea' && isRangeStart
+    const mids = midsAt[j + 1]
+    // one segment per vertex, through any stack tops in between
+    /** @param {(...p: number[]) => string} f */
+    const via = (f) =>
+      mids
+        ? [...mids, [x, y]]
+            .map(([bx, by], k, a) => f(...(k ? a[k - 1] : [pX, pY]), bx, by))
+            .join('')
+        : f(pX, pY, x, y)
 
     switch (curve) {
       case 'monotoneCubic': {
@@ -1577,8 +1631,20 @@ class Line {
           case 2: {
             // Interpolate the full series with nulls excluded then extract the
             // null delimited segments with interpolated points included.
-            const _xAj = isRangeStart ? xArrj : xArrj.slice().reverse()
-            const _yAj = isRangeStart ? yAj : yAj.slice().reverse()
+            let _xAj = isRangeStart ? xArrj : xArrj.slice().reverse()
+            let _yAj = isRangeStart ? yAj : yAj.slice().reverse()
+            if (midsAt.length && !rangeArea) {
+              // fit through the stack tops between points too (see via)
+              /** @type {any[]} */ const P = []
+              _xAj.forEach((/** @type {any} */ v, /** @type {number} */ k) => {
+                if (_yAj[k] !== null && _yAj[k - 1] != null && midsAt[k]) {
+                  P.push(...midsAt[k])
+                }
+                P.push([v, _yAj[k]])
+              })
+              _xAj = P.map((p) => p[0])
+              _yAj = P.map((p) => p[1])
+            }
 
             const smoothInputs = getSmoothInputs(_xAj, _yAj)
             const points =
@@ -1664,7 +1730,16 @@ class Line {
         break
       }
       case 'smooth': {
-        const length = (x - pX) * 0.35
+        /**
+         * @param {number} ax
+         * @param {number} ay
+         * @param {number} bx
+         * @param {number} by
+         */
+        const toPoint = (ax, ay, bx, by) => {
+          const l = (bx - ax) * 0.35
+          return graphics.curve(ax + l, ay, bx - l, by, bx, by)
+        }
         if (series[i][j] === null) {
           pathState = 0
         } else {
@@ -1692,7 +1767,7 @@ class Line {
               }
               pathState = 1
               if (j < series[i].length - 2) {
-                const p = graphics.curve(pX + length, pY, x - length, y, x, y)
+                const p = via(toPoint)
                 linePath += p
                 areaPath += p
                 break
@@ -1715,7 +1790,7 @@ class Line {
                 areaPaths.push(areaPath)
                 pathState = -1
               } else {
-                const p = graphics.curve(pX + length, pY, x - length, y, x, y)
+                const p = via(toPoint)
                 linePath += p
                 areaPath += p
                 if (j >= series[i].length - 2) {
@@ -1744,11 +1819,12 @@ class Line {
       }
       default: {
         /**
-         * @param {string} curve
+         * @param {number} _ax
+         * @param {number} _ay
          * @param {number} x
          * @param {number} y
          */
-        const pathToPoint = (curve, x, y) => {
+        const pathToPoint = (_ax, _ay, x, y) => {
           /** @type {string} */ let path = ''
           switch (curve) {
             case 'stepline':
@@ -1790,7 +1866,7 @@ class Line {
               }
               pathState = 1
               if (j < series[i].length - 2) {
-                const p = pathToPoint(curve, x, y)
+                const p = via(pathToPoint)
                 linePath += p
                 areaPath += p
                 break
@@ -1813,7 +1889,7 @@ class Line {
                 areaPaths.push(areaPath)
                 pathState = -1
               } else {
-                const p = pathToPoint(curve, x, y)
+                const p = via(pathToPoint)
                 linePath += p
                 areaPath += p
                 if (j >= series[i].length - 2) {

package/src/charts/Radar.js

@@ -206,7 +206,8 @@ class Radar {
        */
       s.forEach((/** @type {any} */ dv, /** @type {any} */ j) => {
         const range = Math.abs(this.maxValue - this.minValue)
-        dv = dv - this.minValue
+        // below yaxis.min sits at the centre, not on the opposite spoke
+        dv = Math.max(0, dv - this.minValue)
 
         if (this.isLog) {
           dv = this.coreUtils.getLogVal(this.logBase, dv, 0)
@@ -253,7 +254,7 @@ class Radar {
         shouldClipToGrid: false,
         bindEventsOnPaths: false,
         stroke: w.globals.stroke.colors[i],
-        strokeLineCap: w.config.stroke.lineCap,
+        strokeLinecap: w.config.stroke.lineCap,
       }
 
       let pathFrom = null
@@ -514,6 +515,7 @@ class Radar {
     const w = this.w
 
     const xaxisLabelsConfig = w.config.xaxis.labels
+    const lc = xaxisLabelsConfig.style.colors
     const elXAxisWrap = this.graphics.group({
       class: 'apexcharts-xaxis',
     })
@@ -551,11 +553,7 @@ class Radar {
           j: i,
           parent: elXAxisWrap,
           className: 'apexcharts-xaxis-label',
-          color:
-            Array.isArray(xaxisLabelsConfig.style.colors) &&
-            xaxisLabelsConfig.style.colors[i]
-              ? xaxisLabelsConfig.style.colors[i]
-              : '#a8a8a8',
+          color: (Array.isArray(lc) ? lc[i] : lc) || '#a8a8a8',
           dataLabelsConfig: {
             textAnchor: textPos.textAnchor,
             dropShadow: { enabled: false },

package/src/charts/RangeBar.js

@@ -4,8 +4,8 @@ import Graphics from '../modules/Graphics'
 import Series from '../modules/Series'
 import Utils from '../utils/Utils'
 import {
-  datumKey,
   renderBarExitGhosts,
+  uniquifyKeys,
 } from '../modules/animations/LengthTransition'
 
 /**
@@ -29,7 +29,7 @@ class RangeBar extends Bar {
     this.seriesRangeStart = w.rangeData.seriesRangeStart
     this.seriesRangeEnd = w.rangeData.seriesRangeEnd
 
-    this.barHelpers.initVariables(series)
+    this.barHelpers.initVariables(series, seriesIndex)
 
     const ret = graphics.group({
       class: 'apexcharts-rangebar-series apexcharts-plot-series',
@@ -58,6 +58,10 @@ class RangeBar extends Bar {
       }
 
       const translationsIndex = this.setSeriesAxis(realIndex)
+      // a time axis's labels never reverse, so its bars may not either
+      if (this.isHorizontal && w.labelData.timescaleLabels.length) {
+        this.isReversed = false
+      }
 
       const initPositions = this.barHelpers.initialPositions(realIndex)
       const {
@@ -66,8 +70,6 @@ class RangeBar extends Bar {
         x: initX,
         zeroH, // zeroH is the baseline where 0 meets y axis
       } = initPositions
-      let barWidth = initPositions.barWidth ?? 0
-      let barHeight = initPositions.barHeight ?? 0
       const yDivision = initPositions.yDivision ?? 0
       const xDivision = initPositions.xDivision ?? 0
 
@@ -84,11 +86,16 @@ class RangeBar extends Bar {
         class: 'apexcharts-rangebar-goals-markers',
       })
 
+      const data = /** @type {any} */ (w.config.series[realIndex]).data
+
       for (let j = 0; j < w.globals.dataPoints; j++) {
         const strokeWidth = this.barHelpers.getStrokeWidth(i, j, realIndex)
+        // per datum: an overlap row shrinks only its own bars
+        let barWidth = initPositions.barWidth ?? 0
+        let barHeight = initPositions.barHeight ?? 0
 
-        const y1 = this.seriesRangeStart[i][j]
-        const y2 = this.seriesRangeEnd[i][j]
+        const y1 = this.seriesRangeStart[realIndex][j]
+        const y2 = this.seriesRangeEnd[realIndex][j]
 
         let paths = /** @type {any} */ (null)
         let barXPosition = null
@@ -100,10 +107,7 @@ class RangeBar extends Bar {
           seriesLen = 1
         }
 
-        if (
-          typeof /** @type {Record<string,any>} */ (w.config.series[i]).data?.[j] ===
-          'undefined'
-        ) {
+        if (typeof data?.[j] === 'undefined') {
           // no data exists for further indexes, hence we need to get out the innr loop.
           // As we are iterating over total datapoints, there is a possiblity the series might not have data for j index
           break
@@ -114,9 +118,9 @@ class RangeBar extends Bar {
 
           const srty = (yDivision - barHeight * seriesLen) / 2
 
-          if (/** @type {Record<string,any>} */ (w.config.series[i]).data?.[j]?.x) {
+          if (data[j]?.x != null) {
             const positions = this.detectOverlappingBars({
-              i,
+              i: realIndex,
               j,
               barYPosition,
               srty,
@@ -144,7 +148,8 @@ class RangeBar extends Bar {
         } else {
           if (w.axisFlags.isXNumeric) {
             x =
-              (w.seriesData.seriesX[i][j] - w.globals.minX) / this.xRatio -
+              (w.seriesData.seriesX[realIndex][j] - w.globals.minX) /
+                this.xRatio -
               barWidth / 2
           }
 
@@ -152,9 +157,9 @@ class RangeBar extends Bar {
 
           const srtx = (xDivision - barWidth * seriesLen) / 2
 
-          if (/** @type {Record<string,any>} */ (w.config.series[i]).data?.[j]?.x) {
+          if (data[j]?.x != null) {
             const positions = this.detectOverlappingBars({
-              i,
+              i: realIndex,
               j,
               barXPosition,
               srtx,
@@ -177,10 +182,11 @@ class RangeBar extends Bar {
           })
 
           barHeight = paths.barHeight
+          barXPosition = paths.barXPosition
         }
 
         const barGoalLine = this.barHelpers.drawGoalLine({
-          barXPosition: paths.barXPosition,
+          barXPosition,
           barYPosition,
           goalX: paths.goalX,
           goalY: paths.goalY,
@@ -236,16 +242,11 @@ class RangeBar extends Bar {
       // overrides draw() and never made this call, so a series hidden from the
       // legend (no datums left) dropped every bar on the click.
       if (w.globals.previousPaths.length > 0) {
-        const data = /** @type {Record<string,any>} */ (w.config.series[i]).data || []
-        const newKeys = []
-        for (let j = 0; j < data.length; j++) {
-          newKeys.push(datumKey(w, realIndex, j))
-        }
         renderBarExitGhosts({
           w,
           elSeries,
           record: this._prevRecord(realIndex),
-          newKeys,
+          newKeys: this._keys(realIndex),
           isHorizontal: this.isHorizontal,
           speed: w.config.chart.animations.dynamicAnimation.speed,
         })
@@ -308,18 +309,11 @@ class RangeBar extends Bar {
 
         if (overlaps.indexOf(rangeName) > -1) {
           barHeight = initPositions.barHeight / overlaps.length
-
-          barYPosition =
-            barHeight * this.visibleI +
-            (yDivision * (100 - parseInt(this.barOptions.barHeight, 10))) /
-              100 /
-              2 +
-            barHeight * (this.visibleI + overlaps.indexOf(rangeName)) +
-            yDivision * rowIndex
+          barYPosition += barHeight * overlaps.indexOf(rangeName)
         }
       }
     } else {
-      if (rowIndex > -1 && !w.labelData.timescaleLabels.length) {
+      if (rowIndex > -1 && !w.axisFlags.isXNumeric) {
         if (w.config.plotOptions.bar.rangeBarGroupRows) {
           barXPosition = srtx + xDivision * rowIndex
         } else {
@@ -335,14 +329,7 @@ class RangeBar extends Bar {
 
         if (overlaps.indexOf(rangeName) > -1) {
           barWidth = initPositions.barWidth / overlaps.length
-
-          barXPosition =
-            barWidth * this.visibleI +
-            (xDivision * (100 - parseInt(this.barOptions.barWidth, 10))) /
-              100 /
-              2 +
-            barWidth * (this.visibleI + overlaps.indexOf(rangeName)) +
-            xDivision * rowIndex
+          barXPosition += barWidth * overlaps.indexOf(rangeName)
         }
       }
     }
@@ -368,7 +355,7 @@ class RangeBar extends Bar {
 
     const { i, j, realIndex, translationsIndex } = indexes
 
-    const yRatio = this.yRatio[translationsIndex]
+    const yRatio = this.yRatio[translationsIndex] * (this.isReversed ? -1 : 1)
 
     const range = this.getRangeValue(realIndex, j)
 
@@ -381,7 +368,7 @@ class RangeBar extends Bar {
     )
 
     if (!hasValue) {
-      y1 = zeroH
+      y1 = y2 = zeroH
     } else {
       y1 = zeroH - y1 / yRatio
       y2 = zeroH - y2 / yRatio
@@ -448,6 +435,22 @@ class RangeBar extends Bar {
     }
   }
 
+  /**
+   * Timeline datums key by their own row, not by the j-th label: a row can
+   * hold several bars, so labels[j] names some other datum's row.
+   * @param {number} realIndex
+   * @returns {string[]}
+   */
+  _keys(realIndex) {
+    const c = (/** @type {any} */ (this)._keyCache ||= {})
+    const data = /** @type {any} */ (this.w.config.series[realIndex]).data
+    return (c[realIndex] ||= uniquifyKeys(
+      (data || []).map(
+        (/** @type {any} */ d, /** @type {number} */ j) => 'c:' + (d?.x ?? j),
+      ),
+    ))
+  }
+
   /**
    * @param {number} val
    */
@@ -479,8 +482,9 @@ class RangeBar extends Bar {
 
     const { realIndex, j } = indexes
 
-    const x1 = this.preventBarOverflow(zeroW + y1 / this.invertedYRatio)
-    const x2 = this.preventBarOverflow(zeroW + y2 / this.invertedYRatio)
+    const ratio = this.invertedYRatio * (this.isReversed ? -1 : 1)
+    const x1 = this.preventBarOverflow(zeroW + y1 / ratio)
+    const x2 = this.preventBarOverflow(zeroW + y2 / ratio)
 
     const range = this.getRangeValue(realIndex, j)