pharox-ui-lib

React KPI components for stats and charts.

Install

npm install pharox-ui-lib react react-dom

Wrap your dashboard with LayoutProvider and choose a chart library like recharts or chartjs.

Direct Usage

Use this when you write the JSX yourself.

import { LayoutProvider } from 'pharox-ui-lib/core'
import { ChartKpi, StatKpi } from 'pharox-ui-lib/kpi'

export function Dashboard() {
	return (
		<LayoutProvider chartLibrary="recharts">
			<StatKpi
				title="Monthly recurring revenue"
				description="Direct stat config with metadata on the component itself."
				ariaLabel="Monthly recurring revenue stat"
				kpi={{
					type: 'stat',
					value: 'EUR 428k',
					changeLabel: '+8.4% vs last month',
					tone: 'positive',
				}}
			/>

			<ChartKpi
				title="Revenue vs target"
				description="Direct chart config with metadata on the component itself."
				ariaLabel="Revenue versus target line chart"
				kind="line"
				xKey="month"
				options={{
					legend: { show: true },
					tooltip: { show: true },
					line: { strokeWidth: 2, curve: 'monotone', showDot: false },
				}}
				series={[
					{ key: 'revenue', label: 'Revenue', color: '#2563eb' },
					{ key: 'target', label: 'Target', color: '#94a3b8' },
				]}
				data={[
					{ month: 'Jan', revenue: 342, target: 330 },
					{ month: 'Feb', revenue: 358, target: 340 },
					{ month: 'Mar', revenue: 371, target: 350 },
					{ month: 'Apr', revenue: 389, target: 370 },
					{ month: 'May', revenue: 428, target: 390 },
				]}
			/>
		</LayoutProvider>
	)
}

Backend Usage

Use this when KPI data comes from your backend. The library defines the shape and renders it, but your app still provides the data.

import { LayoutProvider } from 'pharox-ui-lib'
import { KpiRenderer, kpiType, type KpiDefinition } from 'pharox-ui-lib/kpi'

const salesKpis: KpiDefinition[] = [
	{
		type: kpiType.stat,
		title: 'Monthly revenue',
		description: 'Compared with last month',
		ariaLabel: 'Monthly revenue KPI',
		value: 'EUR 82,400',
		changeLabel: '+12.4%',
		tone: 'positive',
	},
	{
		type: kpiType.lineChart,
		title: 'Revenue trend',
		chart: {
			kind: 'line',
			xKey: 'month',
			data: [
				{ month: 'Jan', revenue: 44 },
				{ month: 'Feb', revenue: 58 },
				{ month: 'Mar', revenue: 82 },
			],
			series: [{ key: 'revenue', label: 'Revenue', color: '#0f766e' }],
			options: {
				tooltip: { show: true },
			},
		},
	},
]

export function Dashboard() {
	return (
		<LayoutProvider chartLibrary="recharts">
			{salesKpis.map((kpi, index) => (
				<KpiRenderer key={index} kpi={kpi} />
			))}
		</LayoutProvider>
	)
}

Summary

From pharox-ui-lib/core:

• LayoutProvider
• createLayoutClient

From pharox-ui-lib/kpi:

• StatKpi
• ChartKpi
• KpiRenderer
• kpiType
• KpiDefinition
• chart config types such as LineChartConfig and BarChartConfig

Use StatKpi and ChartKpi as a example for hand-written dashboards. Use KpiRenderer when the backend decides what should be rendered.