From 0d2f7805e8963106b3e66334998229552143c2b3 Mon Sep 17 00:00:00 2001
From: Tolu <emoruwatoluwanimi@gmail.com>
Date: Tue, 23 Apr 2024 12:36:26 -0400
Subject: [PATCH] Graph made for table

---
 prem-data/package-lock.json                   | 14 +++---
 prem-data/package.json                        |  2 +-
 .../src/components/home-layer-1/pl-table.js   |  6 ++-
 .../components/scatter-chart/scatter-chart.js | 48 +++++++++++++++++++
 4 files changed, 60 insertions(+), 10 deletions(-)
 create mode 100644 prem-data/src/components/scatter-chart/scatter-chart.js

diff --git a/prem-data/package-lock.json b/prem-data/package-lock.json
index 8775cb7..0ab60bc 100644
--- a/prem-data/package-lock.json
+++ b/prem-data/package-lock.json
@@ -19,7 +19,7 @@
         "axios": "^1.4.0",
         "brfs": "^2.0.2",
         "chart.js": "^4.4.1",
-        "d3": "^7.8.4",
+        "d3": "^7.9.0",
         "drei": "^2.2.21",
         "path": "^0.12.7",
         "path-browserify": "^1.0.1",
@@ -7435,9 +7435,9 @@
       }
     },
     "node_modules/d3": {
-      "version": "7.8.5",
-      "resolved": "https://registry.npmjs.org/d3/-/d3-7.8.5.tgz",
-      "integrity": "sha512-JgoahDG51ncUfJu6wX/1vWQEqOflgXyl4MaHqlcSruTez7yhaRKR9i8VjjcQGeS2en/jnFivXuaIMnseMMt0XA==",
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-7.9.0.tgz",
+      "integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==",
       "dependencies": {
         "d3-array": "3",
         "d3-axis": "3",
@@ -24824,9 +24824,9 @@
       }
     },
     "d3": {
-      "version": "7.8.5",
-      "resolved": "https://registry.npmjs.org/d3/-/d3-7.8.5.tgz",
-      "integrity": "sha512-JgoahDG51ncUfJu6wX/1vWQEqOflgXyl4MaHqlcSruTez7yhaRKR9i8VjjcQGeS2en/jnFivXuaIMnseMMt0XA==",
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-7.9.0.tgz",
+      "integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==",
       "requires": {
         "d3-array": "3",
         "d3-axis": "3",
diff --git a/prem-data/package.json b/prem-data/package.json
index c42d469..1ddd0bd 100644
--- a/prem-data/package.json
+++ b/prem-data/package.json
@@ -15,7 +15,7 @@
     "axios": "^1.4.0",
     "brfs": "^2.0.2",
     "chart.js": "^4.4.1",
-    "d3": "^7.8.4",
+    "d3": "^7.9.0",
     "drei": "^2.2.21",
     "path": "^0.12.7",
     "path-browserify": "^1.0.1",
diff --git a/prem-data/src/components/home-layer-1/pl-table.js b/prem-data/src/components/home-layer-1/pl-table.js
index 56de53d..8a36efd 100644
--- a/prem-data/src/components/home-layer-1/pl-table.js
+++ b/prem-data/src/components/home-layer-1/pl-table.js
@@ -3,6 +3,7 @@ import DataTable from 'react-data-table-component';
 import { Link } from 'react-router-dom';
 import { ScatterChart, Scatter, XAxis, YAxis, ZAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell } from 'recharts';
 import { teamColours } from '../player-tab';
+import ScatterGraph from '../scatter-chart/scatter-chart';
 import './layer1-style.css';
 
 const cellDummyProps = {
@@ -160,7 +161,7 @@ export default function BasicTabs() {
                         </div>
                         <div className='graph'>
                             <div className='home-graph-header'>xGD/Points Table</div>
-                            <ResponsiveContainer width="99%" height="90%" aspect={1.4}> 
+                            {/* <ResponsiveContainer width="99%" height="90%" aspect={1.4}> 
                                 <ScatterChart>
                                     <CartesianGrid />
                                     <ZAxis type="string" dataKey="clubname" name="club" />
@@ -173,7 +174,8 @@ export default function BasicTabs() {
                                         ))}
                                     </Scatter>
                                 </ScatterChart>
-                            </ResponsiveContainer>
+                            </ResponsiveContainer> */}
+                            <ScatterGraph data={data[0]}/>
                         </div>
                     </div>
                     )
diff --git a/prem-data/src/components/scatter-chart/scatter-chart.js b/prem-data/src/components/scatter-chart/scatter-chart.js
new file mode 100644
index 0000000..9aac542
--- /dev/null
+++ b/prem-data/src/components/scatter-chart/scatter-chart.js
@@ -0,0 +1,48 @@
+import { useState, useRef, useEffect } from "react";
+import * as d3 from 'd3';
+
+function ScatterGraph({data}){
+
+    const [plotData, setPlotData] =  useState(data);
+
+    const svgRef = useRef();
+
+    useEffect(() => {
+        const w = 400
+        const h = 300
+        const svg = d3.select(svgRef.current)
+            .attr('width', w)
+            .attr('height', h)
+            .style('overflow', 'visible')
+            .style('margin-top', '100px')
+
+        const xScale = d3.scaleLinear()
+            .domain([0, 100])
+            .range([0, w])
+
+        const yScale = d3.scaleLinear()
+            .domain([0, 200])
+            .range([h, 0])
+
+        const xAxis = d3.axisBottom(xScale).ticks(plotData.length)
+        const yAxis = d3.axisLeft(yScale).ticks(10)
+
+        svg.append('g')
+            .call(xAxis)
+            .attr('transform', `translate(0, ${h})`);
+        
+        svg.append('g')
+            .call(yAxis)
+
+    }, [plotData])
+
+    console.log(plotData)
+
+    return(
+        <div>
+            {/* <svg ref={svgRef}/> */}
+        </div>
+    )
+}
+
+export default ScatterGraph;
\ No newline at end of file