"use client"; import React, { useState, useMemo } from 'react'; interface BarProps { width: string; value: string; color: string; } interface HeaderProps { colors: string[]; } interface XAxisProps { dataX: string[]; } interface HorizontalColumnDiagramProps { className?: string; } interface BarComponentProps { bar: BarProps; index: number; hoveredBar: number | null; onMouseEnter: (index: number) => void; onMouseLeave: () => void; } const useHoverBar = () => { const [hoveredBar, setHoveredBar] = useState(null); const handleMouseEnter = (index: number) => setHoveredBar(index); const handleMouseLeave = () => setHoveredBar(null); return { hoveredBar, handleMouseEnter, handleMouseLeave }; }; const percentages: number[] = [22, 43, 27, 89, 18]; const tailwindColors: string[] = [ 'bg-pink-300', 'bg-green-300', 'bg-blue-300', 'bg-yellow-300', 'bg-orange-300', ]; const Header: React.FC = ({ colors }) => (

Horizontal Column Diagram

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

))}

Legend

); const XAxis: React.FC = ({ dataX }) => { return (

{dataX.map((value, index) => (

{value}

))}

); }; const Bar: React.FC = ({ bar, index, hoveredBar, onMouseEnter, onMouseLeave }) => { const getBarClasses = (isHovered: boolean) => `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: React.FC = ({ className = '' }) => { 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)