Skip to content

feat: support theming conversion funnel arrow via series.funnel.conve…#4623

Merged
skie1997 merged 1 commit into
VisActor:developfrom
erlanzhou:feat/funnel-conversion-arrow-theme
Jul 15, 2026
Merged

feat: support theming conversion funnel arrow via series.funnel.conve…#4623
skie1997 merged 1 commit into
VisActor:developfrom
erlanzhou:feat/funnel-conversion-arrow-theme

Conversation

@erlanzhou

@erlanzhou erlanzhou commented Jul 15, 2026

Copy link
Copy Markdown
Contributor

🤔 This is a ...

  • New feature
  • Bug fix
  • TypeScript definition update
  • Enhancement feature
  • Refactoring
  • Other

🔗 Related issue link

N/A

🔗 Related PR link

N/A

💡 Background and solution

The conversion funnel (conversionFunnel, @visactor/vchart-extension) draws each conversion-rate connector as three marks — leader line (polygon), arrow head (symbol), label (text). Their styles were hardcoded and only overridable via spec.conversionArrow.*; there was no theme-level entry point.

  • Add theme token series.funnel.conversionArrow (line / symbol / text) to IFunnelSeriesTheme, with built-in defaults in the common funnel theme.
  • Defaults equal the previous hardcoded constants (line.stroke: black, symbol.fill: black, text: #606773 / 12) → non-breaking; existing charts render unchanged.
  • The extension transformer reads getTheme('series','funnel').conversionArrow and injects it between defaults and spec. Merge order: default → theme → spec (spec wins).
  • Themeable: style attributes only. Runtime-computed attributes stay locked (line points, symbol x/y/angle, text auto-position).
new VChart(spec, {
  theme: {
    series: {
      funnel: {
        conversionArrow: {
          line:   { style: { stroke: '#00AA55', lineWidth: 2 } },
          symbol: { style: { fill: '#E8384F', symbolType: 'arrow', size: 12 } },
          text:   { style: { fill: '#2E5CFF', fontSize: 14 } }
        }
      }
    }
  }
});
Screenshot 2026-07-14 at 8 58 07 PM

📝 Changelog

Language Changelog
🇺🇸 English feat: support theming the conversion funnel conversionArrow (line / symbol / text) via the series.funnel.conversionArrow theme token (defaults unchanged, non-breaking)
🇨🇳 Chinese feat: 支持通过 series.funnel.conversionArrow 主题 token 配置转化漏斗转化率箭头(引导线 / 箭头 / 文字)样式(默认值不变,向后兼容)

☑️ Self-Check before Merge

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed

…rsionArrow

Expose the conversion funnel arrow (line / symbol / text) styles through the
series.funnel.conversionArrow theme token, so they can be styled at the theme
level in addition to the spec. Defaults mirror the previous hardcoded values,
so existing charts render unchanged.
@skie1997 skie1997 merged commit 31bb867 into VisActor:develop Jul 15, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants