BarChart

'use client';

import React, { useState, useEffect } from 'react';

interface BarChartProps {
  data: { label: string; value: number }[];
}

interface Bar {
  label: string;
  value: number;
  height: number;
  opacity: number;
}

const BarChart: React.FC<BarChartProps> = ({ data }) => {
  const [bars, setBars] = useState<Bar[]>([]);
  const [hoveredBar, setHoveredBar] = useState<number | null>(null);

  useEffect(() => {
    const barsData: Bar[] = data.map((item, index) => ({
      label: item.label,
      value: item.value,
      height: 0,
      opacity: 0,
    }));

    const animateBars = () => {
      const animatedBars: Bar[] = barsData.map((bar, index) => ({
        ...bar,
        height: (bar.value / Math.max(...data.map(item => item.value))) * 200,
        opacity: 1,
      }));

      setBars(animatedBars);
    };

    animateBars();
  }, [data]);

  return (
    <div className="w-full h-full bg-zinc-950 p-4">
      <div className="flex justify-between mb-4">
        <h2 className="text-lg text-gray-200">Bar Chart</h2>
        <div className="flex space-x-2">
          {['Category 1', 'Category 2', 'Category 3'].map((legend, index) => (
            <div key={index} className="flex items-center space-x-2">
              <div
                className={`w-4 h-4 rounded-full bg-${
                  index === 0 ? 'yellow' : index === 1 ? 'green' : 'blue'
                }-500`}
              />
              <span className="text-gray-200">{legend}</span>
            </div>
          ))}
        </div>
      </div>
      <svg width="100%" height="300" className="overflow-visible">
        {bars.map((bar, index) => (
          <rect
            key={index}
            x={index * 50}
            y={300 - bar.height}
            width={40}
            height={bar.height}
            fill="#C9A84C"
            opacity={bar.opacity}
            className="transition-all duration-500"
            onMouseOver={() => setHoveredBar(index)}
            onMouseOut={() => setHoveredBar(null)}
          />
        ))}
        {hoveredBar !== null && (
          <text
            x={hoveredBar * 50 + 20}
            y={300 - (bars[hoveredBar].height / 2)}
            textAnchor="middle"
            fill="#fff"
            fontSize={14}
            className="transition-all duration-500"
          >
            {bars[hoveredBar].value}
          </text>
        )}
      </svg>
    </div>
  );
};

export default BarChart;

Component info

About

Animated bar chart component