Rose Pie Panel

Rose PiePreview

A Nightingale rose chart (also called a polar area chart) where both the angle and radius of each petal encode the expense amount. Larger spending categories have proportionally larger petals, making relative magnitude immediately visible.

Chart Type

Property	Value
Library	Apache ECharts via BaseChart
Series type	pie with roseType: 'area'
Source file	src/components/panels/RosePiePanel.tsx

What It Shows

Monthly expenses broken down by category. Each petal represents one expense category. The area rose type means both the angle and the radius scale with the value -- so the visual area of each petal is proportional to spending.

Data is filtered from monthlySummary to include only expense entries (type === 'EXPENSE' and total < 0), then sorted largest-first.

Key Features

Feature	Detail
Rose type	area -- both petal angle and radius encode value
Total expenses in header	Formatted as NZD in the panel header
Sorted by value	Largest expense category first
Bouncy entry animation	elasticOut easing with random delay per segment
Connecting label lines	Smooth curves (smooth: 0.2) linking labels to petals

Visual Details

Property	Value
Radius	Inner 15%, outer 80%
Center	[50%, 50%]
Border	Panel background color, 2px
Shadow	10px blur, rgba(0,0,0,0.15)
Label font	Mono, 10px, secondary text color
Label line	Panel border color, 10px + 15px lengths
Animation	animationType: 'scale', animationEasing: 'elasticOut'
Animation delay	Math.random() * 200 ms per segment

Tooltip

Shows a color dot, category name, NZD amount, and percentage of total:

[dot] Groceries
$1,250.00 (28.5%)

Interactivity

• Hover -- standard ECharts pie tooltip with category color swatch, name, amount, and percentage
• Animation -- each segment scales in with a bouncy elastic easing and a randomized delay, creating a staggered bloom effect on load

Data Source

Store	Fields
useFinanceStore	monthlySummary (filtered to EXPENSE type)
useChartTheme	Panel background, border, and text colors

Empty State

Displays "No spending data" centered in the panel when there are no expense entries in the monthly summary.