#include <stdio.h>
import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
 
const StudentComparison = () => {
  const data = [
    { name: "1. สมภพ", term1: 30, term2: 90 },
    { name: "2. ประวีร์", term1: 34, term2: 93 },
    { name: "3. ภูดนัย", term1: 43, term2: 92 },
    { name: "4. ณัชพล", term1: 56, term2: 93 },
    { name: "5. อรรณวินทร์", term1: 30, term2: 94 },
    { name: "6. ธีรเมธ", term1: 30, term2: 95 },
    { name: "7. รัชชานนท์", term1: 45, term2: 95 },
    { name: "8. พิชญนันธ์", term1: 34, term2: 95 },
    { name: "9. พีรพัฒน์", term1: 43, term2: 94 },
    { name: "10. ณัชฐปกรณ์", term1: 45, term2: 95 },
    { name: "11. พสธร", term1: 50, term2: 95 },
    { name: "12. ภูชิสส์", term1: 45, term2: 94 },
    { name: "13. อิทธิกร", term1: 45, term2: 96 },
    { name: "14. ชวนากร", term1: 45, term2: 95 },
    { name: "15. จิรกิตต์", term1: 40, term2: 95 },
    { name: "16. ภคพงษ์", term1: 37, term2: 95 },
    { name: "17. ณัฐวุฒิ", term1: 36, term2: 94 },
    { name: "18. ธนปกร", term1: 35, term2: 93 },
    { name: "19. สิรภัค", term1: 35, term2: 91 },
    { name: "20. จีรพัฒน์", term1: 44, term2: 93 },
    { name: "21. ปรมะ", term1: 30, term2: 95 },
    { name: "22. ธนากร", term1: 44, term2: 94 },
    { name: "23. ธนโชติ", term1: 45, term2: 90 },
    { name: "24. พีรพัฒน์", term1: 35, term2: 95 },
    { name: "25. ภูมิรัตน์", term1: 34, term2: 96 },
    { name: "26. ธนวรรธน์", term1: 33, term2: 95 },
    { name: "27. เพชรากร", term1: 46, term2: 95 },
    { name: "28. ชนาภัทร", term1: 47, term2: 97 },
    { name: "29. อารยา", term1: 45, term2: 95 },
    { name: "30. อัญญรินทร์", term1: 45, term2: 95 },
    { name: "31. สิริกร", term1: 46, term2: 95 },
    { name: "32. กัญญพัชร", term1: 45, term2: 95 },
    { name: "33. จันทรา", term1: 44, term2: 92 },
    { name: "34. ไอรดา", term1: 43, term2: 93 },
    { name: "35. นัทธมณ", term1: 45, term2: 91 },
    { name: "36. พิมพ์ชนก", term1: 46, term2: 92 },
    { name: "37. พิชญาภา", term1: 44, term2: 95 },
    { name: "38. ทัศนาวรรณ์", term1: 45, term2: 95 },
    { name: "39. เพ็ญพิชา", term1: 40, term2: 95 },
    { name: "40. ชิตากาญจน์", term1: 55, term2: 95 },
    { name: "41. ประภัสสร", term1: 56, term2: 93 },
    { name: "42. กานต์สินี", term1: 45, term2: 90 },
    { name: "43. ปิยะเนตร", term1: 44, term2: 95 },
    { name: "44. นิศรา", term1: 45, term2: 95 },
    { name: "45. อรสา", term1: 54, term2: 94 },
    { name: "46. อารีรัตน์", term1: 46, term2: 95 }
  ];
 
  // คำนวณค่าเฉลี่ยแต่ละภาคเรียน
  const averageTerm1 = (data.reduce((acc, curr) => acc + curr.term1, 0) / data.length).toFixed(2);
  const averageTerm2 = (data.reduce((acc, curr) => acc + curr.term2, 0) / data.length).toFixed(2);
 
  return (
    <Card className="w-full max-w-6xl">
      <CardHeader>
        <CardTitle>กราฟเปรียบเทียบผลการเรียนรายภาคเรียน</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          <div className="text-sm space-y-2">
            <p>ค่าเฉลี่ยภาคเรียนที่ 1: {averageTerm1}%</p>
            <p>ค่าเฉลี่ยภาคเรียนที่ 2: {averageTerm2}%</p>
          </div>
          <div className="h-96">
            <ResponsiveContainer width="100%" height="100%">
              <LineChart
                data={data}
                margin={{
                  top: 5,
                  right: 30,
                  left: 20,
                  bottom: 150
                }}
              >
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis
                  dataKey="name"
                  angle={-45}
                  textAnchor="end"
                  height={100}
                />
                <YAxis
                  domain={[0, 100]}
                  label={{ value: 'เปอร์เซ็นต์ (%)', angle: -90, position: 'insideLeft' }}
                />
                <Tooltip />
                <Legend />
                <Line
                  type="monotone"
                  dataKey="term1"
                  name="ภาคเรียนที่ 1"
                  stroke="#8884d8"
                  dot={{ r: 2 }}
                />
                <Line
                  type="monotone"
                  dataKey="term2"
                  name="ภาคเรียนที่ 2"
                  stroke="#82ca9d"
                  dot={{ r: 2 }}
                />
              </LineChart>
            </ResponsiveContainer>
          </div>
        </div>
      </CardContent>
    </Card>
  );
};
 
export default StudentComparison;

I2luY2x1ZGUgPHN0ZGlvLmg+CmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7CmltcG9ydCB7IExpbmVDaGFydCwgTGluZSwgWEF4aXMsIFlBeGlzLCBDYXJ0ZXNpYW5HcmlkLCBUb29sdGlwLCBMZWdlbmQsIFJlc3BvbnNpdmVDb250YWluZXIgfSBmcm9tICdyZWNoYXJ0cyc7CmltcG9ydCB7IENhcmQsIENhcmRIZWFkZXIsIENhcmRUaXRsZSwgQ2FyZENvbnRlbnQgfSBmcm9tICdAL2NvbXBvbmVudHMvdWkvY2FyZCc7Cgpjb25zdCBTdHVkZW50Q29tcGFyaXNvbiA9ICgpID0+IHsKICBjb25zdCBkYXRhID0gWwogICAgeyBuYW1lOiAiMS4g4Liq4Lih4Lig4LieIiwgdGVybTE6IDMwLCB0ZXJtMjogOTAgfSwKICAgIHsgbmFtZTogIjIuIOC4m+C4o+C4sOC4p+C4teC4o+C5jCIsIHRlcm0xOiAzNCwgdGVybTI6IDkzIH0sCiAgICB7IG5hbWU6ICIzLiDguKDguLnguJTguJnguLHguKIiLCB0ZXJtMTogNDMsIHRlcm0yOiA5MiB9LAogICAgeyBuYW1lOiAiNC4g4LiT4Lix4LiK4Lie4LilIiwgdGVybTE6IDU2LCB0ZXJtMjogOTMgfSwKICAgIHsgbmFtZTogIjUuIOC4reC4o+C4o+C4k+C4p+C4tOC4meC4l+C4o+C5jCIsIHRlcm0xOiAzMCwgdGVybTI6IDk0IH0sCiAgICB7IG5hbWU6ICI2LiDguJjguLXguKPguYDguKHguJgiLCB0ZXJtMTogMzAsIHRlcm0yOiA5NSB9LAogICAgeyBuYW1lOiAiNy4g4Lij4Lix4LiK4LiK4Liy4LiZ4LiZ4LiX4LmMIiwgdGVybTE6IDQ1LCB0ZXJtMjogOTUgfSwKICAgIHsgbmFtZTogIjguIOC4nuC4tOC4iuC4jeC4meC4seC4meC4mOC5jCIsIHRlcm0xOiAzNCwgdGVybTI6IDk1IH0sCiAgICB7IG5hbWU6ICI5LiDguJ7guLXguKPguJ7guLHguJLguJnguYwiLCB0ZXJtMTogNDMsIHRlcm0yOiA5NCB9LAogICAgeyBuYW1lOiAiMTAuIOC4k+C4seC4iuC4kOC4m+C4geC4o+C4k+C5jCIsIHRlcm0xOiA0NSwgdGVybTI6IDk1IH0sCiAgICB7IG5hbWU6ICIxMS4g4Lie4Liq4LiY4LijIiwgdGVybTE6IDUwLCB0ZXJtMjogOTUgfSwKICAgIHsgbmFtZTogIjEyLiDguKDguLnguIrguLTguKrguKrguYwiLCB0ZXJtMTogNDUsIHRlcm0yOiA5NCB9LAogICAgeyBuYW1lOiAiMTMuIOC4reC4tOC4l+C4mOC4tOC4geC4oyIsIHRlcm0xOiA0NSwgdGVybTI6IDk2IH0sCiAgICB7IG5hbWU6ICIxNC4g4LiK4Lin4LiZ4Liy4LiB4LijIiwgdGVybTE6IDQ1LCB0ZXJtMjogOTUgfSwKICAgIHsgbmFtZTogIjE1LiDguIjguLTguKPguIHguLTguJXguJXguYwiLCB0ZXJtMTogNDAsIHRlcm0yOiA5NSB9LAogICAgeyBuYW1lOiAiMTYuIOC4oOC4hOC4nuC4h+C4qeC5jCIsIHRlcm0xOiAzNywgdGVybTI6IDk1IH0sCiAgICB7IG5hbWU6ICIxNy4g4LiT4Lix4LiQ4Lin4Li44LiS4Li0IiwgdGVybTE6IDM2LCB0ZXJtMjogOTQgfSwKICAgIHsgbmFtZTogIjE4LiDguJjguJnguJvguIHguKMiLCB0ZXJtMTogMzUsIHRlcm0yOiA5MyB9LAogICAgeyBuYW1lOiAiMTkuIOC4quC4tOC4o+C4oOC4seC4hCIsIHRlcm0xOiAzNSwgdGVybTI6IDkxIH0sCiAgICB7IG5hbWU6ICIyMC4g4LiI4Li14Lij4Lie4Lix4LiS4LiZ4LmMIiwgdGVybTE6IDQ0LCB0ZXJtMjogOTMgfSwKICAgIHsgbmFtZTogIjIxLiDguJvguKPguKHguLAiLCB0ZXJtMTogMzAsIHRlcm0yOiA5NSB9LAogICAgeyBuYW1lOiAiMjIuIOC4mOC4meC4suC4geC4oyIsIHRlcm0xOiA0NCwgdGVybTI6IDk0IH0sCiAgICB7IG5hbWU6ICIyMy4g4LiY4LiZ4LmC4LiK4LiV4Li0IiwgdGVybTE6IDQ1LCB0ZXJtMjogOTAgfSwKICAgIHsgbmFtZTogIjI0LiDguJ7guLXguKPguJ7guLHguJLguJnguYwiLCB0ZXJtMTogMzUsIHRlcm0yOiA5NSB9LAogICAgeyBuYW1lOiAiMjUuIOC4oOC4ueC4oeC4tOC4o+C4seC4leC4meC5jCIsIHRlcm0xOiAzNCwgdGVybTI6IDk2IH0sCiAgICB7IG5hbWU6ICIyNi4g4LiY4LiZ4Lin4Lij4Lij4LiY4LiZ4LmMIiwgdGVybTE6IDMzLCB0ZXJtMjogOTUgfSwKICAgIHsgbmFtZTogIjI3LiDguYDguJ7guIrguKPguLLguIHguKMiLCB0ZXJtMTogNDYsIHRlcm0yOiA5NSB9LAogICAgeyBuYW1lOiAiMjguIOC4iuC4meC4suC4oOC4seC4l+C4oyIsIHRlcm0xOiA0NywgdGVybTI6IDk3IH0sCiAgICB7IG5hbWU6ICIyOS4g4Lit4Liy4Lij4Lii4LiyIiwgdGVybTE6IDQ1LCB0ZXJtMjogOTUgfSwKICAgIHsgbmFtZTogIjMwLiDguK3guLHguI3guI3guKPguLTguJnguJfguKPguYwiLCB0ZXJtMTogNDUsIHRlcm0yOiA5NSB9LAogICAgeyBuYW1lOiAiMzEuIOC4quC4tOC4o+C4tOC4geC4oyIsIHRlcm0xOiA0NiwgdGVybTI6IDk1IH0sCiAgICB7IG5hbWU6ICIzMi4g4LiB4Lix4LiN4LiN4Lie4Lix4LiK4LijIiwgdGVybTE6IDQ1LCB0ZXJtMjogOTUgfSwKICAgIHsgbmFtZTogIjMzLiDguIjguLHguJnguJfguKPguLIiLCB0ZXJtMTogNDQsIHRlcm0yOiA5MiB9LAogICAgeyBuYW1lOiAiMzQuIOC5hOC4reC4o+C4lOC4siIsIHRlcm0xOiA0MywgdGVybTI6IDkzIH0sCiAgICB7IG5hbWU6ICIzNS4g4LiZ4Lix4LiX4LiY4Lih4LiTIiwgdGVybTE6IDQ1LCB0ZXJtMjogOTEgfSwKICAgIHsgbmFtZTogIjM2LiDguJ7guLTguKHguJ7guYzguIrguJnguIEiLCB0ZXJtMTogNDYsIHRlcm0yOiA5MiB9LAogICAgeyBuYW1lOiAiMzcuIOC4nuC4tOC4iuC4jeC4suC4oOC4siIsIHRlcm0xOiA0NCwgdGVybTI6IDk1IH0sCiAgICB7IG5hbWU6ICIzOC4g4LiX4Lix4Lio4LiZ4Liy4Lin4Lij4Lij4LiT4LmMIiwgdGVybTE6IDQ1LCB0ZXJtMjogOTUgfSwKICAgIHsgbmFtZTogIjM5LiDguYDguJ7guYfguI3guJ7guLTguIrguLIiLCB0ZXJtMTogNDAsIHRlcm0yOiA5NSB9LAogICAgeyBuYW1lOiAiNDAuIOC4iuC4tOC4leC4suC4geC4suC4jeC4iOC4meC5jCIsIHRlcm0xOiA1NSwgdGVybTI6IDk1IH0sCiAgICB7IG5hbWU6ICI0MS4g4Lib4Lij4Liw4Lig4Lix4Liq4Liq4LijIiwgdGVybTE6IDU2LCB0ZXJtMjogOTMgfSwKICAgIHsgbmFtZTogIjQyLiDguIHguLLguJnguJXguYzguKrguLTguJnguLUiLCB0ZXJtMTogNDUsIHRlcm0yOiA5MCB9LAogICAgeyBuYW1lOiAiNDMuIOC4m+C4tOC4ouC4sOC5gOC4meC4leC4oyIsIHRlcm0xOiA0NCwgdGVybTI6IDk1IH0sCiAgICB7IG5hbWU6ICI0NC4g4LiZ4Li04Lio4Lij4LiyIiwgdGVybTE6IDQ1LCB0ZXJtMjogOTUgfSwKICAgIHsgbmFtZTogIjQ1LiDguK3guKPguKrguLIiLCB0ZXJtMTogNTQsIHRlcm0yOiA5NCB9LAogICAgeyBuYW1lOiAiNDYuIOC4reC4suC4o+C4teC4o+C4seC4leC4meC5jCIsIHRlcm0xOiA0NiwgdGVybTI6IDk1IH0KICBdOwoKICAvLyDguITguLPguJnguKfguJPguITguYjguLLguYDguInguKXguLXguYjguKLguYHguJXguYjguKXguLDguKDguLLguITguYDguKPguLXguKLguJkKICBjb25zdCBhdmVyYWdlVGVybTEgPSAoZGF0YS5yZWR1Y2UoKGFjYywgY3VycikgPT4gYWNjICsgY3Vyci50ZXJtMSwgMCkgLyBkYXRhLmxlbmd0aCkudG9GaXhlZCgyKTsKICBjb25zdCBhdmVyYWdlVGVybTIgPSAoZGF0YS5yZWR1Y2UoKGFjYywgY3VycikgPT4gYWNjICsgY3Vyci50ZXJtMiwgMCkgLyBkYXRhLmxlbmd0aCkudG9GaXhlZCgyKTsKCiAgcmV0dXJuICgKICAgIDxDYXJkIGNsYXNzTmFtZT0idy1mdWxsIG1heC13LTZ4bCI+CiAgICAgIDxDYXJkSGVhZGVyPgogICAgICAgIDxDYXJkVGl0bGU+4LiB4Lij4Liy4Lif4LmA4Lib4Lij4Li14Lii4Lia4LmA4LiX4Li14Lii4Lia4Lic4Lil4LiB4Liy4Lij4LmA4Lij4Li14Lii4LiZ4Lij4Liy4Lii4Lig4Liy4LiE4LmA4Lij4Li14Lii4LiZPC9DYXJkVGl0bGU+CiAgICAgIDwvQ2FyZEhlYWRlcj4KICAgICAgPENhcmRDb250ZW50PgogICAgICAgIDxkaXYgY2xhc3NOYW1lPSJzcGFjZS15LTQiPgogICAgICAgICAgPGRpdiBjbGFzc05hbWU9InRleHQtc20gc3BhY2UteS0yIj4KICAgICAgICAgICAgPHA+4LiE4LmI4Liy4LmA4LiJ4Lil4Li14LmI4Lii4Lig4Liy4LiE4LmA4Lij4Li14Lii4LiZ4LiX4Li14LmIIDE6IHthdmVyYWdlVGVybTF9JTwvcD4KICAgICAgICAgICAgPHA+4LiE4LmI4Liy4LmA4LiJ4Lil4Li14LmI4Lii4Lig4Liy4LiE4LmA4Lij4Li14Lii4LiZ4LiX4Li14LmIIDI6IHthdmVyYWdlVGVybTJ9JTwvcD4KICAgICAgICAgIDwvZGl2PgogICAgICAgICAgPGRpdiBjbGFzc05hbWU9ImgtOTYiPgogICAgICAgICAgICA8UmVzcG9uc2l2ZUNvbnRhaW5lciB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj4KICAgICAgICAgICAgICA8TGluZUNoYXJ0CiAgICAgICAgICAgICAgICBkYXRhPXtkYXRhfQogICAgICAgICAgICAgICAgbWFyZ2luPXt7CiAgICAgICAgICAgICAgICAgIHRvcDogNSwKICAgICAgICAgICAgICAgICAgcmlnaHQ6IDMwLAogICAgICAgICAgICAgICAgICBsZWZ0OiAyMCwKICAgICAgICAgICAgICAgICAgYm90dG9tOiAxNTAKICAgICAgICAgICAgICAgIH19CiAgICAgICAgICAgICAgPgogICAgICAgICAgICAgICAgPENhcnRlc2lhbkdyaWQgc3Ryb2tlRGFzaGFycmF5PSIzIDMiIC8+CiAgICAgICAgICAgICAgICA8WEF4aXMKICAgICAgICAgICAgICAgICAgZGF0YUtleT0ibmFtZSIKICAgICAgICAgICAgICAgICAgYW5nbGU9ey00NX0KICAgICAgICAgICAgICAgICAgdGV4dEFuY2hvcj0iZW5kIgogICAgICAgICAgICAgICAgICBoZWlnaHQ9ezEwMH0KICAgICAgICAgICAgICAgIC8+CiAgICAgICAgICAgICAgICA8WUF4aXMKICAgICAgICAgICAgICAgICAgZG9tYWluPXtbMCwgMTAwXX0KICAgICAgICAgICAgICAgICAgbGFiZWw9e3sgdmFsdWU6ICfguYDguJvguK3guKPguYzguYDguIvguYfguJnguJXguYwgKCUpJywgYW5nbGU6IC05MCwgcG9zaXRpb246ICdpbnNpZGVMZWZ0JyB9fQogICAgICAgICAgICAgICAgLz4KICAgICAgICAgICAgICAgIDxUb29sdGlwIC8+CiAgICAgICAgICAgICAgICA8TGVnZW5kIC8+CiAgICAgICAgICAgICAgICA8TGluZQogICAgICAgICAgICAgICAgICB0eXBlPSJtb25vdG9uZSIKICAgICAgICAgICAgICAgICAgZGF0YUtleT0idGVybTEiCiAgICAgICAgICAgICAgICAgIG5hbWU9IuC4oOC4suC4hOC5gOC4o+C4teC4ouC4meC4l+C4teC5iCAxIgogICAgICAgICAgICAgICAgICBzdHJva2U9IiM4ODg0ZDgiCiAgICAgICAgICAgICAgICAgIGRvdD17eyByOiAyIH19CiAgICAgICAgICAgICAgICAvPgogICAgICAgICAgICAgICAgPExpbmUKICAgICAgICAgICAgICAgICAgdHlwZT0ibW9ub3RvbmUiCiAgICAgICAgICAgICAgICAgIGRhdGFLZXk9InRlcm0yIgogICAgICAgICAgICAgICAgICBuYW1lPSLguKDguLLguITguYDguKPguLXguKLguJnguJfguLXguYggMiIKICAgICAgICAgICAgICAgICAgc3Ryb2tlPSIjODJjYTlkIgogICAgICAgICAgICAgICAgICBkb3Q9e3sgcjogMiB9fQogICAgICAgICAgICAgICAgLz4KICAgICAgICAgICAgICA8L0xpbmVDaGFydD4KICAgICAgICAgICAgPC9SZXNwb25zaXZlQ29udGFpbmVyPgogICAgICAgICAgPC9kaXY+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvQ2FyZENvbnRlbnQ+CiAgICA8L0NhcmQ+CiAgKTsKfTsKCmV4cG9ydCBkZWZhdWx0IFN0dWRlbnRDb21wYXJpc29uOw==