import React from "react";
import {
    ResponsiveContainer,
    AreaChart as AC,
    CartesianGrid,
    XAxis,
    YAxis,
    Tooltip,
    Legend,
    Area,
} from "recharts";
import { ChartProps } from "../types";

export default function AreaChart(props: ChartProps) {
    return (
        <ResponsiveContainer height={300}>
            <AC
                width={600}
                height={300}
                data={props.data.map((d) => {
                    return {
                        name: d.name,
                        ...d.values,
                    };
                })}
            >
                {Object.keys(props.data[0].values).map((k, i) => (
                    <Area
                        type="monotone"
                        key={i}
                        dataKey={k}
                        stroke="#8884d8"
                        fill="#8884d8"
                        name={k}
                    />
                ))}
                <CartesianGrid stroke="#ccc" />
                <XAxis dataKey="name" />
                <YAxis scale={props.scale ?? "auto"} />
                <Tooltip />
                <Legend verticalAlign="top" />
            </AC>
        </ResponsiveContainer>
    );
}