Photonix

AllocationMatrix

Visualizes data distribution across two dimensions. For a version with a header, loading states, and integrated layout, see the AllocationMatrixWidget.

Preview

Members / Projects
Project Alpha
Project Beta
John Doe
Developer
70%
30%
Jane Smith
Designer
100%
Usage
import { AllocationMatrix } from '@photonix/ultimate';

<AllocationMatrix
  projects={projects}
  members={members}
  allocations={allocations}
  dateRange={{ start: new Date(2026, 0, 1), end: new Date(2026, 2, 31) }}
/>

Component API

AllocationMatrix

Prop
Type
Default
Description
projects
MatrixProject[]
-
members
MatrixMember[]
-
allocations
MatrixAllocation[]
-
dateRange
AllocationMatrixDateRange
-
Optional date range used to filter or aggregate time-based allocations
className
string
-
style
React.CSSProperties
-
memberCapacityMap
Record<string, number>
-
Map of memberId -> total capacity percentage (e.g., 100). Used to warn if over-allocated. Default is 100 per member.
onCellClick
((memberId: string, projectId: string) => void)
-
borderless
boolean
false
If true, removes outer borders and border-radius.

Variants

Native Time Filter

Allocations with startDate and endDate are aggregated automatically when dateRange is provided.

Members / Projects
Project Alpha
Project Beta
John Doe
Developer
70%
30%
Jane Smith
Designer
100%
Native Time Filter
const [dateRange, setDateRange] = useState<DateRange | undefined>({
  start: new Date(2026, 0, 1),
  end: new Date(2026, 2, 31),
});

<DateRangePicker
  variant="single"
  value={dateRange}
  onChange={setDateRange}
  labelStyle="outside"
  placeholder="Select range"
  showPresets
  fullWidth={false}
/>

<AllocationMatrix
  projects={projects}
  members={members}
  allocations={timedAllocations}
  dateRange={dateRange}
/>

On this page

Preview
Component API
Variants
Photonix UI - React Components, Templates & Figma Design System