{"size": 1172, "ext": "js", "max_stars_repo_path": "src/components/BiorhythmChart.js", "max_stars_repo_name": "AdrianaAC/biorhythmClaculatorIonic", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/BiorhythmChart.js", "max_issues_repo_name": "AdrianaAC/biorhythmClaculatorIonic", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/BiorhythmChart.js", "max_forks_repo_name": "AdrianaAC/biorhythmClaculatorIonic", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 37.8064516129, "max_line_length": 101, "alphanum_fraction": 0.6740614334}
import React from "react";
import dayjs from "dayjs";
import { LineChart, ResponsiveContainer, Line, XAxis, ReferenceLine, CartesianGrid } from "recharts";
import { calculateBiorhythmsSeries } from "../calculations";

function formatDate(isoString) {
    return dayjs(isoString).format("D MMM");
}


function BiorhythmChart({ birthDate, targetDate }) {
  const startDate = dayjs(targetDate).subtract(15, "days").toISOString();
  const data = calculateBiorhythmsSeries(birthDate, startDate, 31)
  .map((item) => ({...item, date: formatDate(item.date)}));
  return (
    <ResponsiveContainer width="100%" height={200}>
      <LineChart data={data}>
        <XAxis dataKey="date" 
        ticks={[data[2].date, data[15].date, data[28].date]}/>
        <CartesianGrid vertical={false} strokeDasharray="3 3"/>
        <ReferenceLine x={data[15].date}/>
        <Line type="natural" dot={false} dataKey="physical" stroke="blue" />
        <Line type="natural" dot={false} dataKey="emotional" stroke="green" />
        <Line type="natural" dot={false} dataKey="intellectual" stroke="yellow" />
      </LineChart>
    </ResponsiveContainer>
  );
}

export default BiorhythmChart;
