Live component development with hot reload

@fieldflow360/org-ui

Active tab
charts

Charts

FieldFlowBarChart

<FieldFlowBarChart
  data={[{ client: 'Acme', jobs: 42 }]}
  xKey="client"
  yKey="jobs"
  emptyTitle="No client data yet"
/>

Top clients (bar)

Acme Co42North Field28River Bend19Summit Ag14

Empty bar chart

No client data yet

Jobs by client will appear after your first records.

FieldFlowTrendChart

<FieldFlowTrendChart
  data={trendData}
  xKey="month"
  series={[{ key: 'jobs', label: 'Jobs' }]}
/>

Job trend (line)

Jobs

FieldFlowRadialChart

<FieldFlowRadialChart
  data={[{ id: 'active', label: 'Active', value: 48 }]}
  centerLabel={{ value: '143', subtitle: 'Total jobs' }}
/>

Jobs by status (radial)

Active48Pending22Completed64On hold9

Empty radial chart

No status breakdown

Status distribution appears when jobs exist.

Chart legend (standalone)

Active48Pending22Completed64

Custom empty state

Use ChartEmptyState for any chart slot without data.