Skip to content

[Studio] Enhance MiniLine/MiniBar chart components - #661

Open
zhaohai666 wants to merge 1 commit into
apache:rocketmq-studiofrom
zhaohai666:pr-fe-03-miniline-minibar-enhancement
Open

[Studio] Enhance MiniLine/MiniBar chart components#661
zhaohai666 wants to merge 1 commit into
apache:rocketmq-studiofrom
zhaohai666:pr-fe-03-miniline-minibar-enhancement

Conversation

@zhaohai666

Copy link
Copy Markdown

Summary

Upgrade MiniLine from a simple polyline chart to a smooth, animated SVG
component with gradient fill and responsive mode support.

MiniLine enhancements:

  • Catmull-Rom → Bézier spline interpolation for smooth curves
  • SVG linear gradient fill under the curve
  • Animated stroke-dasharray on mount
  • Endpoint dot indicator on the last data point
  • responsive prop for 100% width with preserved aspect ratio
  • Unique gradient/glow IDs per instance to prevent multi-component conflicts
  • New optional props: strokeWidth, showDot, animated, responsive
    (all backward-compatible with defaults)

MiniBar fix:

  • Remove special-case for zero values; all bars now have minimum 4px height
    for visual consistency

Test plan

  • MiniLine renders smooth curves with gradient fill
  • Animation plays on mount, no animation when animated=false
  • Multiple MiniLine instances on same page have independent gradients
  • responsive=true makes SVG fill parent width
  • MiniBar: zero-value bars show 4px height (not 0px)

MiniLine: upgrade from simple polyline to smooth Catmull-Rom spline with
gradient fill, animated stroke, endpoint dot indicator, and responsive
mode. Unique SVG gradient IDs prevent multi-instance conflicts.

MiniBar: unify minimum bar height to 4px for all values including zero.
@zhaohai666 zhaohai666 changed the title [studio] Enhance MiniLine/MiniBar chart components [Studio] Enhance MiniLine/MiniBar chart components Jul 29, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant