feat(morph): support funnel / pyramid / gauge in cross-type morphs

junedchhipa · junedchhipa · commit 2838f65104c4 · 2026-06-04T15:26:16.000+05:30
Adds the three first-class chart-type aliases to the morph engine so any
chart can morph to/from a funnel, pyramid, or gauge in addition to the
existing bar / pie / donut / radialBar / polarArea pairs.

Engine
- MorphTypeChange: `funnel` + `pyramid` added to BAR_FAMILY, `gauge`
  added to RADIAL_FAMILY. `_captureFromDOM` treats `fromType === 'gauge'`
  as a radialBar-shaped source (same selector, same arc-to-segment
  conversion).
- UpdateHelpers: `fromType` is now `w.config.chart.requestedType ||
  w.config.chart.type` so a chart that *started* as an alias keeps its
  user-facing identity for morph detection — without this, a chart
  rendered as funnel would internally report `bar` and any subsequent
  morph would be incorrectly classified as same-family.
- Radial.js: `morphFromFilled` check expanded to recognize funnel and
  pyramid sources (they're Bar.js variants and render as fills, so the
  donut-segment intermediate target is needed for radialBar destinations).

Update-path crash fix
- UpdateHelpers: `ch.config.normalizeAliasedChartType(options)` runs
  before the config merge. On initial render this happens inside
  `Config.init()`, but the update path constructs Config directly and
  skips init() — without normalize, an `updateOptions({chart:
  {type:'funnel'}})` would merge an unrecognized chart.type into
  w.config and crash in `Core.plotChartType`'s switch fallthrough
  (`line.draw` on a null `line` when `needsLine` was false).

Leaving-alias residue cleanup
- UpdateHelpers: when transitioning out of an alias state (the previous
  render was funnel/pyramid/gauge and the new request is a non-alias
  type), `options.chart.requestedType` is explicitly set to the new type
  and `options.plotOptions.bar.isFunnel` is cleared (when leaving funnel
  or pyramid). Without this, the second cross-type morph in/out of
  funnel/pyramid failed because the previous alias's `requestedType` and
  `isFunnel: true` lingered on w.config and would be preserved through
  the merge.

  Why this lives in UpdateHelpers and not Config.normalizeAliasedChartType:
  normalize runs on initial chart creation too, where the legacy
  contract `chart.type: 'bar' + plotOptions.bar.isFunnel: true` must
  leave `requestedType` undefined and `isFunnel: true` preserved
  verbatim. Only the update path has the context to know we're
  transitioning between modes.

Pyramid sort
- Config._applyPyramidSort: pyramid now sorts series data ascending
  (smallest value at top, largest at bottom) so the rendered shape is
  actually a pyramid regardless of input order. The same permutation is
  applied to xaxis.categories and the top-level labels array so legend
  and tooltips stay aligned. Sort is non-mutating — the user's input
  arrays are deep-cloned via Array.prototype.map before being placed on
  `opts.series` / `opts.xaxis.categories` / `opts.labels`.

  Pre-existing `defaults.pyramid()` was a stub that just returned
  `defaults.funnel()`; the comment claiming "ordering is handled in
  Config" was aspirational. This adds the missing piece.

Demo
- samples chart-type-morph: Funnel + Pyramid buttons added.
  `plotOptions.funnel: { shape: 'trapezoid', lastShape: 'taper' }` so
  the funnel renders in trapezoid mode. Bar-height slider (30–100%)
  added beneath the speed slider, controlling
  `plotOptions.bar.barHeight` live and threading through type-switch
  transitions so horizontal-bar / funnel / pyramid all honor the chosen
  thickness on subsequent morphs.

Tests
- first-class-types.spec.js: two new cases for pyramid sort —
  verifies sorted internal config (series / xaxis.categories) AND that
  the user's original arrays are not mutated; second case proves the
  same for top-level labels.
- morph-type-change.spec.js: new pair / shape rules for funnel ↔
  pie/donut/radialBar/polarArea, within-family bar ↔ funnel ↔ pyramid,
  and gauge ↔ bar / pie / radialBar.

1647/1647 unit tests pass.
diff --git a/samples/source/misc/chart-type-morph.xml b/samples/source/misc/chart-type-morph.xml
@@ -76,6 +76,8 @@ p {
     <button data-type="donut">Donut</button>
     <button data-type="polarArea">Polar area</button>
     <button data-type="radialBar">Radial bar</button>
+    <button data-type="funnel">Funnel</button>
+    <button data-type="pyramid">Pyramid</button>
   </div>
 
   <div class="actions">
@@ -87,6 +89,12 @@ p {
     <input type="range" id="speed" min="100" max="15000" step="50" value="700" />
     <span id="speed-value">700</span> ms
   </div>
+
+  <div class="speed-row">
+    Bar height (horizontal bar / funnel / pyramid):
+    <input type="range" id="bar-height" min="30" max="100" step="5" value="70" />
+    <span id="bar-height-value">70</span>%
+  </div>
 </div>
 </html>
 
@@ -119,13 +127,17 @@ plotOptions: {
     distributed: true,
   },
   radialBar: {
+    inverseOrder: true,
     hollow: {
       size: '5%'
     },
     track: {
       show: false
     }
-  }
+  },
+  funnel: {
+    shape: 'trapezoid',
+  },
 },
 yaxis: {
   show: false,
@@ -161,9 +173,10 @@ var LABELS = ['Direct', 'Organic', 'Referral', 'Social', 'Email']
 var currentType = 'bar'
 var currentHorizontal = false
 var currentValues = [44, 55, 41, 27, 33]
+var currentBarHeight = 70
 
 function buildSeriesFor(type, values) {
-  if (type === 'bar') {
+  if (type === 'bar' || type === 'funnel' || type === 'pyramid') {
     return [{ name: 'Sessions', data: values.slice() }]
   }
   return values.slice()
@@ -191,7 +204,12 @@ document.querySelectorAll('.actions button[data-type]').forEach(function (btn) {
     setActive(currentType, currentHorizontal)
     chart.updateOptions({
       chart: { type: currentType },
-      plotOptions: { bar: { horizontal: currentHorizontal } },
+      plotOptions: {
+        bar: {
+          horizontal: currentHorizontal,
+          barHeight: currentBarHeight + '%',
+        },
+      },
       series: buildSeriesFor(currentType, currentValues),
       labels: LABELS,
     })
@@ -217,4 +235,17 @@ speedInput.addEventListener('input', function () {
   )
 })
 
+var barHeightInput = document.querySelector('#bar-height')
+var barHeightValue = document.querySelector('#bar-height-value')
+barHeightInput.addEventListener('input', function () {
+  var v = parseInt(barHeightInput.value, 10)
+  barHeightValue.textContent = v
+  currentBarHeight = v
+  chart.updateOptions(
+    { plotOptions: { bar: { barHeight: v + '%' } } },
+    false,
+    false,
+  )
+})
+
 </vanilla-js-script>
diff --git a/samples/vanilla-js/misc/chart-type-morph.html b/samples/vanilla-js/misc/chart-type-morph.html
@@ -102,6 +102,8 @@ <h1>Chart-type morph</h1>
           <button data-type="donut">Donut</button>
           <button data-type="polarArea">Polar area</button>
           <button data-type="radialBar">Radial bar</button>
+          <button data-type="funnel">Funnel</button>
+          <button data-type="pyramid">Pyramid</button>
         </div>
       
         <div class="actions">
@@ -113,6 +115,12 @@ <h1>Chart-type morph</h1>
           <input type="range" id="speed" min="100" max="15000" step="50" value="700" />
           <span id="speed-value">700</span> ms
         </div>
+      
+        <div class="speed-row">
+          Bar height (horizontal bar / funnel / pyramid):
+          <input type="range" id="bar-height" min="30" max="100" step="5" value="70" />
+          <span id="bar-height-value">70</span>%
+        </div>
       </div>
 
     <script>
@@ -145,13 +153,17 @@ <h1>Chart-type morph</h1>
             distributed: true,
           },
           radialBar: {
+            inverseOrder: true,
             hollow: {
               size: '5%',
             },
             track: {
               show: false,
             },
           },
+          funnel: {
+            shape: 'trapezoid',
+          },
         },
         yaxis: {
           show: false,
@@ -184,9 +196,10 @@ <h1>Chart-type morph</h1>
       var currentType = 'bar'
       var currentHorizontal = false
       var currentValues = [44, 55, 41, 27, 33]
+      var currentBarHeight = 70
 
       function buildSeriesFor(type, values) {
-        if (type === 'bar') {
+        if (type === 'bar' || type === 'funnel' || type === 'pyramid') {
           return [{ name: 'Sessions', data: values.slice() }]
         }
         return values.slice()
@@ -215,7 +228,12 @@ <h1>Chart-type morph</h1>
           setActive(currentType, currentHorizontal)
           chart.updateOptions({
             chart: { type: currentType },
-            plotOptions: { bar: { horizontal: currentHorizontal } },
+            plotOptions: {
+              bar: {
+                horizontal: currentHorizontal,
+                barHeight: currentBarHeight + '%',
+              },
+            },
             series: buildSeriesFor(currentType, currentValues),
             labels: LABELS,
           })
@@ -241,6 +259,18 @@ <h1>Chart-type morph</h1>
         )
       })
 
+      var barHeightInput = document.querySelector('#bar-height')
+      var barHeightValue = document.querySelector('#bar-height-value')
+      barHeightInput.addEventListener('input', function () {
+        var v = parseInt(barHeightInput.value, 10)
+        barHeightValue.textContent = v
+        currentBarHeight = v
+        chart.updateOptions(
+          { plotOptions: { bar: { barHeight: v + '%' } } },
+          false,
+          false,
+        )
+      })
     </script>
 
     
diff --git a/src/charts/Radial.js b/src/charts/Radial.js
@@ -431,9 +431,13 @@ class Radial extends Pie {
       const morphFromType = morphActive
         ? this.ctx.morphTypeChange.getFromType()
         : null
+      // funnel + pyramid are Bar.js variants — same fill-based rendering as
+      // a regular bar, so they take the same morph-from-filled treatment.
       const morphFromFilled =
         !!morphFrom &&
         (morphFromType === 'bar' ||
+          morphFromType === 'funnel' ||
+          morphFromType === 'pyramid' ||
           morphFromType === 'pie' ||
           morphFromType === 'donut' ||
           morphFromType === 'polarArea')
diff --git a/src/modules/MorphTypeChange.js b/src/modules/MorphTypeChange.js
@@ -27,8 +27,13 @@ import { parsePath } from '../svg/PathMorphing'
  * chaining and the chart behaves exactly as before.
  */
 
-const BAR_FAMILY = new Set(['bar'])
-const RADIAL_FAMILY = new Set(['pie', 'donut', 'polarArea', 'radialBar'])
+// funnel + pyramid are rendered by Bar.js internally (Config.js aliases them
+// to `chart.type: 'bar'` with `plotOptions.bar.isFunnel: true, horizontal:
+// true`). gauge is aliased to radialBar. Treating them as members of the
+// bar / radial families lets the morph engine accept them as source or
+// target without any renderer-side changes.
+const BAR_FAMILY = new Set(['bar', 'funnel', 'pyramid'])
+const RADIAL_FAMILY = new Set(['pie', 'donut', 'polarArea', 'radialBar', 'gauge'])
 
 /** @param {string} type */
 function familyOf(type) {
@@ -180,7 +185,9 @@ export default class MorphTypeChange {
         })
       })
     } else if (fam === 'radial') {
-      if (fromType === 'radialBar') {
+      // `gauge` is an alias for radialBar (see Config.normalizeAliasedChartType),
+      // so it captures from the same selector / arc-shape.
+      if (fromType === 'radialBar' || fromType === 'gauge') {
         // radialBar paths are STROKED open arcs (fill=none, stroke=color,
         // stroke-width ≈ ring thickness). If we hand the raw `d` to a pie/
         // polarArea/donut element (which fills, not strokes), the implicit
diff --git a/src/modules/helpers/UpdateHelpers.js b/src/modules/helpers/UpdateHelpers.js
@@ -61,11 +61,20 @@ export default class UpdateHelpers {
         // before the config merge so it sees the OLD chart.type while the
         // outgoing DOM is still mounted. Null-safe — if the feature isn't
         // registered, this no-ops via optional chaining.
+        //
+        // `requestedType` preserves the user-facing alias (funnel, pyramid,
+        // gauge) that Config.normalizeAliasedChartType collapses into the
+        // internal chart.type (bar, radialBar). Without it, a chart that
+        // started as funnel would report `fromType: 'bar'` and lose the
+        // ability to morph FROM funnel into anything in the bar family
+        // (funnel → pyramid, funnel → bar). The incoming `options.chart.type`
+        // is the raw value the user passed and has not yet been normalized.
         if (animate && options && typeof options === 'object') {
           const newType = options?.chart?.type
-          if (newType && newType !== w.config.chart.type) {
+          const fromType = w.config.chart.requestedType || w.config.chart.type
+          if (newType && newType !== fromType) {
             ch.morphTypeChange?.captureBeforeDestroy({
-              fromType: w.config.chart.type,
+              fromType,
               toType: newType,
               newSeries: options.series || w.config.series,
             })
@@ -74,6 +83,42 @@ export default class UpdateHelpers {
 
         if (options && typeof options === 'object') {
           ch.config = new Config(options)
+          // Collapse user-facing chart-type aliases (funnel / pyramid → bar
+          // with isFunnel; gauge → radialBar). On the initial render this
+          // runs inside Config.init(), but the update path constructs Config
+          // directly and skips init(), so we'd otherwise merge an
+          // unrecognized chart.type into w.config and crash in
+          // Core.plotChartType's switch fallthrough.
+          //
+          // When transitioning OUT of an alias state (the previous render
+          // was funnel/pyramid/gauge and the new request is a non-alias
+          // type), explicitly clear the alias residue on `options` so the
+          // Utils.extend merge below overrides w.config's stale fields.
+          // We can't clear them in `normalizeAliasedChartType` itself —
+          // that runs on initial chart creation too, where the legacy
+          // contract `chart.type: 'bar' + plotOptions.bar.isFunnel: true`
+          // must leave both `requestedType` undefined and `isFunnel: true`.
+          const incomingType = options.chart && options.chart.type
+          const isAliasRequest =
+            incomingType === 'funnel' ||
+            incomingType === 'pyramid' ||
+            incomingType === 'gauge'
+          const wasAlias = !!w.config.chart.requestedType
+          if (incomingType && !isAliasRequest && wasAlias) {
+            options.chart = options.chart || {}
+            options.chart.requestedType = incomingType
+            // Only clear isFunnel when the previous alias was funnel/pyramid
+            // (gauge doesn't touch this flag).
+            const prev = w.config.chart.requestedType
+            if (prev === 'funnel' || prev === 'pyramid') {
+              options.plotOptions = options.plotOptions || {}
+              options.plotOptions.bar = options.plotOptions.bar || {}
+              if (options.plotOptions.bar.isFunnel === undefined) {
+                options.plotOptions.bar.isFunnel = false
+              }
+            }
+          }
+          ch.config.normalizeAliasedChartType(options)
           options = CoreUtils.extendArrayProps(ch.config, options, w)
 
           // fixes #914, #623
diff --git a/src/modules/settings/Config.js b/src/modules/settings/Config.js
@@ -158,12 +158,83 @@ export default class Config {
       opts.plotOptions.bar.isFunnel = true
       opts.plotOptions.bar.horizontal = true
       opts.chart.type = 'bar'
+      if (requested === 'pyramid') {
+        this._applyPyramidSort(opts)
+      }
     } else if (requested === 'gauge') {
       opts.chart.type = 'radialBar'
     }
     return opts
   }
 
+  /**
+   * Pyramid wants the smallest value at the top (the apex) and the largest
+   * at the bottom (the base), regardless of the order the user passed data
+   * in. We reuse the funnel renderer with the data array sorted ascending,
+   * keeping `xaxis.categories` paired up so the legend / category labels
+   * stay aligned with the rendered stages.
+   *
+   * Sorting is done on *clones* of the user-supplied arrays — the original
+   * input objects they passed to updateOptions / new ApexCharts are never
+   * mutated. Only `opts.series` / `opts.xaxis.categories` (which are about
+   * to be merged into `w.config`) carry the sorted view.
+   *
+   * @param {Record<string, any>} opts
+   */
+  _applyPyramidSort(opts) {
+    if (!Array.isArray(opts.series) || opts.series.length === 0) return
+
+    /** @param {any} v */
+    const valueOf = (v) => {
+      if (typeof v === 'number') return v
+      if (v && typeof v === 'object') {
+        if (typeof v.y === 'number') return v.y
+        if (Array.isArray(v)) return Number(v[1])
+      }
+      return Number(v)
+    }
+
+    // Funnel / pyramid is normally single-series. Use the first series'
+    // original data order to derive a single index permutation, then apply
+    // it to every series + the categories so they all stay paired up.
+    const firstSeries = opts.series[0]
+    if (!firstSeries || !Array.isArray(firstSeries.data)) return
+
+    const order = firstSeries.data
+      .map(/** @param {any} _v @param {number} i */ (_v, i) => i)
+      .sort(
+        /** @param {number} a @param {number} b */
+        (a, b) => valueOf(firstSeries.data[a]) - valueOf(firstSeries.data[b]),
+      )
+
+    opts.series = opts.series.map(
+      /** @param {any} s */ (s) => {
+        if (!s || !Array.isArray(s.data)) return s
+        return {
+          ...s,
+          data: order.map(/** @param {number} i */ (i) => s.data[i]),
+        }
+      },
+    )
+
+    const rawCats = opts.xaxis?.categories
+    if (Array.isArray(rawCats)) {
+      opts.xaxis = { ...opts.xaxis }
+      opts.xaxis.categories = order.map(
+        /** @param {number} i */ (i) => rawCats[i],
+      )
+    }
+
+    // Some callers pass categories via the top-level `labels` (pie-style
+    // contract that also works for distributed bars / funnel charts).
+    // Reorder it the same way so the legend and tooltip labels track.
+    if (Array.isArray(opts.labels)) {
+      opts.labels = order.map(
+        /** @param {number} i */ (i) => opts.labels[i],
+      )
+    }
+  }
+
   /**
    * @param {string} chartType
    * @param {Record<string, any>} chartDefaults
diff --git a/tests/unit/first-class-types.spec.js b/tests/unit/first-class-types.spec.js
diff --git a/tests/unit/morph-type-change.spec.js b/tests/unit/morph-type-change.spec.js
