Graph made for table

EmoruwaTolu · Apr 23, 2024 · 0d2f780 · 0d2f780
1 parent 5e7824c
commit 0d2f780
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 10 deletions.
diff --git a/prem-data/package-lock.json b/prem-data/package-lock.json
diff --git 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
@@ -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
@@ -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;