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
Docs
Design system
Release
Jane Cooper
Designer
60%
40%
Wade Warren
Engineer
80%
Esther Howard
PM
70%
Usage
"use client";

import { AllocationMatrix, type MatrixAllocation, type MatrixMember, type MatrixProject } from '@photonix/ultimate';

const projects: MatrixProject[] = [
    { id: 'docs', name: 'Docs' },
    { id: 'system', name: 'Design system' },
    { id: 'release', name: 'Release' },
];

const members: MatrixMember[] = [
    { id: 'jane', name: 'Jane Cooper', role: 'Designer' },
    { id: 'wade', name: 'Wade Warren', role: 'Engineer' },
    { id: 'esther', name: 'Esther Howard', role: 'PM' },
];

const allocations: MatrixAllocation[] = [
    { memberId: 'jane', projectId: 'docs', percentage: 60 },
    { memberId: 'jane', projectId: 'system', percentage: 40 },
    { memberId: 'wade', projectId: 'system', percentage: 80 },
    { memberId: 'esther', projectId: 'release', percentage: 70 },
];

export default function AllocationMatrixBasicExample() {
    return <AllocationMatrix projects={projects} members={members} allocations={allocations} />;
}

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
"use client";

import { useState } from 'react';
import { AllocationMatrix, Box, DateRangePicker, type DateRange, type MatrixAllocation, type MatrixMember, type MatrixProject } from '@photonix/ultimate';

const projects: MatrixProject[] = [
    { id: 'p1', name: 'Project Alpha' },
    { id: 'p2', name: 'Project Beta' },
];

const members: MatrixMember[] = [
    { id: 'm1', name: 'John Doe', role: 'Developer' },
    { id: 'm2', name: 'Jane Smith', role: 'Designer' },
];

const timedAllocations: MatrixAllocation[] = [
    { projectId: 'p1', memberId: 'm1', percentage: 70, startDate: new Date(2026, 0, 1), endDate: new Date(2026, 2, 31) },
    { projectId: 'p2', memberId: 'm1', percentage: 30, startDate: new Date(2026, 0, 1), endDate: new Date(2026, 2, 31) },
    { projectId: 'p1', memberId: 'm1', percentage: 20, startDate: new Date(2026, 3, 1), endDate: new Date(2026, 5, 30) },
    { projectId: 'p2', memberId: 'm1', percentage: 80, startDate: new Date(2026, 3, 1), endDate: new Date(2026, 5, 30) },
    { projectId: 'p2', memberId: 'm2', percentage: 100, startDate: new Date(2026, 0, 1), endDate: new Date(2026, 5, 30) },
];

export default function AllocationMatrixTimeFilterExample() {
    const [dateRange, setDateRange] = useState<DateRange | undefined>({
        start: new Date(2026, 0, 1),
        end: new Date(2026, 2, 31),
    });

    return (
        <Box style={{ display: 'grid', gap: 'var(--space-md)', width: '100%' }}>
            <DateRangePicker
                variant="single"
                value={dateRange}
                onChange={setDateRange}
                labelStyle="outside"
                placeholder="Select range"
                showPresets
                fullWidth={false}
            />
            <AllocationMatrix
                projects={projects}
                members={members}
                allocations={timedAllocations}
                dateRange={dateRange}
            />
        </Box>
    );
}

On this page

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