"use client"; import { useState, useMemo } from "react"; interface BarData { width: string; value: string; color: string; } const useHoverBar = () => { const [hoveredBar, setHoveredBar] = useState(null); const handleMouseEnter = (index: number) => setHoveredBar(index); const handleMouseLeave = () => setHoveredBar(null); return { hoveredBar, handleMouseEnter, handleMouseLeave }; }; const percentages = [22, 43, 27, 89, 18] as const; const tailwindColors = [ "bg-pink-300", "bg-green-300", "bg-blue-300", "bg-yellow-300", "bg-orange-300", ]; const Header = ({ colors }: { colors: readonly string[] }) => (

Horizontal Column Diagram

{colors.map((color, index) => (

))}

Legend

); const XAxis = ({ dataX }: { dataX: string[] }) => (

{dataX.map((value) => (

{value}

))}

); const Bar = ({ bar, index, hoveredBar, onMouseEnter, onMouseLeave, }: { bar: BarData; index: number; hoveredBar: number | null; onMouseEnter: (index: number) => void; onMouseLeave: () => void; }) => { const isHovered = hoveredBar === index; const barClasses = `absolute left-0 top-0 h-full border-4 border-black rounded-r-lg ${bar.color} group ${isHovered ? "shadow-[0_0_0_2px_#000,_8px_8px_0_2px_#000] transform -translate-y-1 -translate-x-1 rotate-[-2deg]" : "shadow-[8px_8px_0_#000]" } transition-all duration-300 ease-in-out`; return (

onMouseEnter(index)} onMouseLeave={onMouseLeave} >

{bar.value}

); }; const HorizontalColumnDiagram = ({ className = "" }: { className?: string }) => { const { hoveredBar, handleMouseEnter, handleMouseLeave } = useHoverBar(); const bars = useMemo( () => percentages.map((percent, index) => ({ width: `${percent}%`, value: `${percent}%`, color: tailwindColors[index % tailwindColors.length], })), [], ); return (

{bars.map((bar, index) => ( ))}

); }; export default HorizontalColumnDiagram;

Chart Components

Brutalism Chart (Horizontal)