AreaChart

'use client';

import React, { useState } from 'react';

interface AreaChartProps {
  data: { date: string; value: number }[];
}

const AreaChart: React.FC<AreaChartProps> = ({ data }) => {
  const [hoverIndex, setHoverIndex] = useState<number | null>(null);

  const maxValue = Math.max(...data.map((item) => item.value));
  const minValue = Math.min(...data.map((item) => item.value));

  const width = 400;
  const height = 200;
  const margin = 20;

  const xScale = (x: number) => (x / (data.length - 1)) * (width - 2 * margin) + margin;
  const yScale = (y: number) => height - (y / maxValue) * (height - 2 * margin) - margin;

  const pathD = `M ${xScale(0)} ${yScale(data[0].value)} C ` + 
    data.slice(1).map((item, index) => `${xScale(index + 1)} ${yScale(item.value)}`).join(' ');

  return (
    <div className="bg-zinc-950 p-4 w-1/2 mx-auto rounded">
      <svg width={width} height={height} className="overflow-visible">
        <g transform={`translate(0, 0)`}>
          <rect x={0} y={0} width={width} height={height} fill="#0A0A0A" rx={4} />
          {Array(5)
            .fill(0)
            .map((_, index) => (
              <line
                key={index}
                x1={margin}
                y1={height - (index / 4) * (height - 2 * margin) - margin}
                x2={width - margin}
                y2={height - (index / 4) * (height - 2 * margin) - margin}
                stroke="#333"
                strokeWidth={0.5}
              />
            ))}
          <path
            d={pathD}
            fill="none"
            stroke="#C9A84C"
            strokeWidth={2}
            strokeLinecap="round"
            strokeLinejoin="round"
          />
          {data.map((item, index) => (
            <circle
              key={index}
              cx={xScale(index)}
              cy={yScale(item.value)}
              r={4}
              fill="#C9A84C"
              className={`transition-opacity duration-300 ${
                hoverIndex === index ? 'opacity-100' : 'opacity-0'
              }`}
            />
          ))}
          {hoverIndex !== null && (
            <g transform={`translate(${xScale(hoverIndex)}, ${yScale(data[hoverIndex].value)})`}>
              <rect
                x={-20}
                y={-20}
                width={40}
                height={20}
                fill="#0A0A0A"
                rx={4}
                className="text-xs text-white flex items-center justify-center"
              >
                {data[hoverIndex].value}
              </rect>
            </g>
          )}
        </g>
      </svg>
      <div className="flex justify-between text-xs text-white mt-2">
        {data.map((item, index) => (
          <div
            key={index}
            className="cursor-pointer"
            onMouseEnter={() => setHoverIndex(index)}
            onMouseLeave={() => setHoverIndex(null)}
          >
            {item.date}
          </div>
        ))}
      </div>
    </div>
  );
};

const data = [
  { date: 'Mon', value: 10 },
  { date: 'Tue', value: 20 },
  { date: 'Wed', value: 15 },
  { date: 'Thu', value: 25 },
  { date: 'Fri', value: 18 },
  { date: 'Sat', value: 22 },
  { date: 'Sun', value: 12 },
];

export default () => <AreaChart data={data} />;

Component info

About

SVG area chart with smooth curves