Components
Loading preview...
A quadrant chart with tooltips
@charlesinwald
npx shadcn@latest add https://21st.dev/r/charlesinwald/quadrant-chart// This is a demo of a preview
// That's what users will see in the preview
import { Component } from "@/components/ui/quadrant-chart";
interface QuadrantItem {
id: string
x: number // Effort (0-1)
y: number // Priority (0-1)
label: string
description?: string
}
const sampleItems: QuadrantItem[] = [
{
id: '1',
x: 0.2,
y: 0.8,
label: 'Feature A',
description: 'High priority, low effort.',
},
{
id: '2',
x: 0.7,
y: 0.7,
label: 'Feature B',
description: 'High priority, high effort.',
},
{
id: '3',
x: 0.3,
y: 0.3,
label: 'Feature C',
description: 'Low priority, low effort.',
},
{
id: '4',
x: 0.8,
y: 0.2,
label: 'Feature D',
description: 'Low priority, high effort.',
},
{
id: '5',
x: 0.5,
y: 0.6,
label: 'Feature E',
description: 'Medium everything.',
},
{
id: '6',
x: 0.6,
y: 0.4,
label: 'Feature F',
description: 'Medium effort, low priority.',
},
{ id: '7', x: 0.4, y: 0.5, label: 'Feature G', description: 'Balanced.' },
]
const DemoOne = () => {
return (
<div className="flex items-center justify-center">
<Component items={sampleItems} />
</div>
);
};
export default { DemoOne };