Data & Charts

ECharts integration, data visualization and table components

ECharts (via phia_chart)

Line Chart

Interactive line chart with tooltips — powered by Apache ECharts

Area Chart

Filled area with gradient — revenue trend

Bar Chart

Grouped vertical bars — multiple series comparison

Pie Chart

Traffic distribution by source

Radar Chart

Multi-dimensional skill comparison

Pie Chart (Browser Share)

Proportional breakdown — browser market share distribution

Multi-Series Line

Product growth comparison — two lines over the same period

Bar Chart (Conversion Funnel)

Conversion stages — progressive reduction through the pipeline

Area Chart (Revenue Breakdown)

Stacked area showing cumulative revenue categories over time

Bar Chart (Weekly Activity)

Multi-series bar — activity breakdown by day of week

Pie Chart (Market Cap)

Proportional market capitalization — top tech companies

Bar Chart (Distribution)

Response time distribution — frequency across time ranges

Specialized Components

StatCard + MetricGrid

KPI cards with trend indicators in a responsive grid

Total Revenue

+12.5%

$284,590

vs. last month

Active Users

+8.2%

12,847

vs. last month

SparklineCard

Compact metric card with inline SVG sparkline trend

Revenue

$33,100

+12.5%

Active Users

12,847

+8.2%

Bounce Rate

32.1%

-2.1%

GaugeChart

Semi-circular SVG gauge — 5 colors, 3 sizes

78 / 100

45%

92%

15% (sm)

UptimeBar

Status bar with colored segments — inspired by Statuspage.io

API Gateway

90 days ago 93.3% uptime Today

Database

90 days ago 100.0% uptime Today

FilterBar, FilterSearch, FilterSelect, FilterToggle, FilterReset

Composable filter toolbar — 5 components: filter_bar + 4 sub-components

Role

Show inactive

Filter: query="" role="" archived=false

DataGrid, DataGridHead, DataGridBody, DataGridRow, DataGridCell

Feature-rich server-side sortable table — 5 sub-components

			Status
Alice Brown	alice@acme.com	Admin	Active
Bob Chen	bob@acme.com	Editor	Active
Carol Davis	carol@acme.com	Viewer	Inactive
David Evans	david@acme.com	Editor	Active
Elena Fox	elena@acme.com	Admin	Pending

Resizable, ResizablePanel, ResizableHandle

Drag-to-resize split panels — 3 sub-components, keyboard accessible

Horizontal split

Left panel — drag the handle

Right panel

Vertical split

Top panel

Bottom panel

Data Components

BarList

Horizontal ranked bars — showing relative values in a category

Google

456

Direct

351

Twitter

271

GitHub

191

CategoryBar

Stacked percentage bar — showing proportional breakdown of a whole

Storage Usage

Documents 35.0%

Photos 25.0%

Videos 20.0%

Other 20.0%

With Marker (Budget — 60% spent)

BadgeDelta

KPI trend badges with directional icons — 5 delta types

+12.5% +3.2% 0.0% -1.8% -8.4%

+22% +22% +22% +22%

BulletChart

SVG bullet gauge with ranges and target marker — compact KPI display

Revenue (Target: $280k)

Performance Score

MeterGroup

Multiple labeled meters in a collection — resource allocation

Storage: 68/100
Memory: 42/100
CPU: 87/100
Network: 23/100

System Resources

Leaderboard

Ranked list with medals, metrics, and delta badges

1
S
Sarah Connor 2,847 pts +124
2
J
John Smith 2,614 pts +89
3
A
Ana Costa 2,398 pts -12
4
D
Diego Melo 2,201 pts +45
5
E
Elena Rocha 1,987 pts 0

Tracker

Status blocks for time-series monitoring — inspired by Statuspage.io

API Gateway — 30 days

Database — 30 days