From f837e21006d163fb7c73cb9ca7c54065b2bb510e Mon Sep 17 00:00:00 2001
From: sivaprasath2004 <prasathsiva2004@gmail.com>
Date: Wed, 24 Jul 2024 18:21:50 +0530
Subject: [PATCH] finish

---
 src/components/Courses/MyChart.tsx | 68 ++++++++++++++++++++++++++++++
 src/components/Courses/index.tsx   |  5 +++
 2 files changed, 73 insertions(+)
 create mode 100644 src/components/Courses/MyChart.tsx

diff --git a/src/components/Courses/MyChart.tsx b/src/components/Courses/MyChart.tsx
new file mode 100644
index 000000000..819736cbd
--- /dev/null
+++ b/src/components/Courses/MyChart.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Cell, Legend, ResponsiveContainer } from 'recharts';
+
+const data = [
+  { name: 'Javascript', language: 78 },
+  { name: 'Python', language: 58 },
+  { name: 'Java', language: 50 },
+  { name: 'C#', language: 42 },
+  { name: 'php', language: 38 },
+  { name: 'C++', language: 35 },
+  { name: 'TypeScript', language: 30 },
+  { name: 'Ruby', language: 20 },
+  { name: 'Swift', language: 18 },
+  { name: 'go', language: 23 },
+];
+
+const colors = [
+  'rgba(239,216,29,0.9)',
+  'rgba(49,105,148,0.9)',
+  'rgba(234,140,16,0.9)',
+  'rgba(42,1,100,0.9)',
+  'rgba(115,119,173,0.9)',
+  'rgba(8,67,128,0.9)',
+  'rgba(47,116,192,0.9)',
+  'rgba(175,13,0,0.9)',
+  'rgba(247,70,42,0.9)',
+  'rgb(103,208,222,0.9)'
+];
+
+const CustomTooltip = ({ active, payload, label }) => {
+  if (active && payload && payload.length) {
+    return (
+      <div className="custom-tooltip">
+        <p className="label" style={{ fontWeight: "600", fontFamily: "monospace", fontSize: "0.9rem", color: "rgb(198, 3, 252)" }}>{label}</p>
+      </div>
+    );
+  }
+  return null;
+};
+
+const MyChart: React.FC = () => {
+  return (
+    <>
+      <h2>Most Popular Programming Languages</h2>
+      <ResponsiveContainer width="100%" height={400}>
+        <BarChart
+          data={data}
+          margin={{
+            top: 20, right: 30, left: 20, bottom: 5,
+          }}
+        >
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis dataKey="name" />
+          <YAxis />
+          <Tooltip content={<CustomTooltip />} />
+          <Legend />
+          <Bar dataKey="language" fill='rgb(198,3,252)'>
+            {data.map((entry, index) => (
+              <Cell key={`cell-${index}`} fill={colors[index]} />
+            ))}
+          </Bar>
+        </BarChart>
+      </ResponsiveContainer>
+    </>
+  );
+};
+
+export default MyChart;
diff --git a/src/components/Courses/index.tsx b/src/components/Courses/index.tsx
index 1a91e3c62..d0b0f1baa 100644
--- a/src/components/Courses/index.tsx
+++ b/src/components/Courses/index.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import styled from "styled-components";
+import MyChart from "./MyChart";
 
 // Define the Course interface to type the props
 interface Course {
@@ -128,6 +129,10 @@ const Courses: React.FC<Props> = ({ courses }) => {
 
   return (
     <CoursesContainer>
+   
+   {/* Chart */}
+      <MyChart />
+
       {/* Filter buttons */}
       <FilterButtons>
         <Button onClick={() => setFilter("all")}>All</Button>