scatterplot

Birck10 · Aug 15, 2023 · 8969e05 · 8969e05
1 parent 3114bbc
commit 8969e05
Show file tree

Hide file tree

Showing 5 changed files with 132 additions and 8 deletions.
diff --git a/website/package.json b/website/package.json
@@ -27,7 +27,8 @@
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.15.0",
-    "recharts": "^2.7.3"
+    "recharts": "^2.7.3",
+    "victory": "^36.6.11"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

diff --git a/website/src/components/Home.tsx b/website/src/components/Home.tsx
@@ -9,8 +9,12 @@ function Home() {
                 <div className="h4">Features</div>
                 This pokerbot plays automatically on Pokerstars, Partypoker and GG Poker. Any other table can be mapped as well. It works with image recognition, montecarlo simulation and a basic genetic algorithm. The mouse is moved automatically and the bot can potentially play for hours based on a large number of parameters.
             </div>
-            <div className="titleimage">
+            {/* <div className="titleimage">
                 <img src="https://github.com/dickreuter/Poker/blob/e53d795e563abdc3e32656306ac46d1dcffc8816/doc/partypoker.gif?raw=true" style={{ transform: 'scale(1)' }} />
+            </div> */}
+            <div>
+            <iframe src="https://app.colossyan.com/embed/c7b9e132-cc19-4ff5-b311-2ffb48fc3204" width="850" height="470" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
+            {/* <iframe width="850" height="470" src="https://www.youtube.com/embed/EOqDSSeBXmQ?si=mNoG1KZMOmhlHQ7a" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> */}
             </div>
             {/* <div className="pirateimage">
                 <img src={pirate} height="200px" width="200px" />

diff --git a/website/src/components/PaymentCards.tsx b/website/src/components/PaymentCards.tsx
@@ -17,7 +17,7 @@ function PaymentCards() {
                         <div className="card shadow-lg rounded custom-card-size">
                             <div className="card-body">
                                 <div> Free</div>
-                                <div> Trial </div>
+                                <div> Version </div>
                                 <div><Button onClick={() => goToLink(dl_link)}
                                     variant="contained">Download</Button>
                                 </div>
@@ -91,7 +91,7 @@ function PaymentCards() {
                         <div className="card shadow-lg rounded custom-card-size">
                             <div className="card-body">
                                 <div> Lifetime</div>
-                                <div> $99 / life </div>
+                                <div> $499 / life </div>
                                 <div>
                                     <Button onClick={() => goToLink('https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=PQX6RA3CEEED6')}
                                         variant="contained">Buy</Button>

diff --git a/website/src/components/ScatterPlot.tsx b/website/src/components/ScatterPlot.tsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import { VictoryChart, VictoryScatter, VictoryTooltip, VictoryAxis } from 'victory';
+
+interface RawData {
+    wins: string;
+    losses: string;
+}
+
+interface ScatterData {
+    x: number;
+    y: number;
+    z?: number;
+}
+
+interface ScatterplotProps {
+    data: RawData;
+}
+
+const parseData = (rawData: RawData): { wins: ScatterData[], losses: ScatterData[] } => {
+    if (!rawData.wins || !rawData.losses) {
+        console.error('Data is not defined:', rawData);
+        return { wins: [], losses: [] };
+    }
+
+    let wins: ScatterData[] = [];
+    let losses: ScatterData[] = [];
+    try {
+        wins = JSON.parse(rawData.wins).map((entry: any) => ({
+            // z: parseFloat(entry.FinalFundsChange),
+            x: Number(entry.equity),
+            y: parseFloat(entry.minCall)
+        }));
+
+        losses = JSON.parse(rawData.losses).map((entry: any) => ({
+            // z: parseFloat(entry.FinalFundsChange),
+            x: Number(entry.equity),
+            y: parseFloat(entry.minCall)
+        }));
+    } catch (error) {
+        console.error('Error parsing the data:', error);
+    }
+
+    return { wins, losses };
+}
+
+const ScatterplotComponent: React.FC<ScatterplotProps> = ({ data }) => {
+    const parsedData = parseData(data);
+
+    return (
+        <VictoryChart
+            domainPadding={20}
+            width={800}
+            height={300}
+            domain={{ x: [0, 1] }, { y: [0, 2] }}
+        >
+            <VictoryAxis
+                label="Equity"
+            />
+            <VictoryAxis
+                dependentAxis
+                label="Minimum Call"
+            />
+            <VictoryScatter
+                data={parsedData.wins}
+                x="x"
+                y="y"
+                size={5}  // Set a constant dot size. Adjust this value as needed.
+                labels={({ datum }) => `Equity: ${datum.x}\nMinimum Call: ${datum.y}\nPayoff: ${datum.z}`}
+                labelComponent={<VictoryTooltip />}
+                style={{ data: { fill: "green" } }}
+            />
+            <VictoryScatter
+                data={parsedData.losses}
+                x="x"
+                y="y"
+                size={5}  // Set a constant dot size. Adjust this value as needed.
+                labels={({ datum }) => `Equity: ${datum.x}\nMinimum Call: ${datum.y}`}
+                labelComponent={<VictoryTooltip />}
+                style={{ data: { fill: "red" } }}
+            />
+        </VictoryChart>
+    );
+}
+
+export default ScatterplotComponent;
diff --git a/website/src/components/StrategyAnalyzer.tsx b/website/src/components/StrategyAnalyzer.tsx
@@ -4,18 +4,21 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import React, { useEffect, useState } from 'react';
 import { pirate } from '../assets/Images';
 import GroupedStackedBarChart from './GroupedBarChart';
+import ScatterPlot from './ScatterPlot';
 
 
 const StrategyAnalyzer: React.FC = () => {
-    const API_URL = import.meta.env.REACT_APP_API_URL || 'http://dickreuter.com:7777';
+    const API_URL = import.meta.env.VITE_REACT_APP_API_URL || 'http://dickreuter.com:7777';
     const [strategies, setStrategies] = useState<string[]>([]);
     const [selectedStrategy, setSelectedStrategy] = useState<string | null>(null);
     const [endStage, setEndStage] = useState<string>('All');
     const [actionAtEndStage, setActionAtEndStage] = useState<string>('All');
     const [barChartData, setBarChartData] = useState<any[]>([]);
     const [loadingStrategies, setLoadingStrategies] = useState<boolean>(true);
+    const [loadingScatter, setLoadingScatter] = useState<boolean>(true);
     const [loadingBarChartData, setLoadingBarChartData] = useState<boolean>(true);
     const [firstVisit, setFirstVisit] = useState<boolean>(true);
+    const [scatterplotData, setScatterplotData] = useState<string[]>([]);
 
 
     const fetchData = async () => {
@@ -38,6 +41,26 @@ const StrategyAnalyzer: React.FC = () => {
             }
         }
     };
+    const fetchScatterplotData = async () => {
+        if (selectedStrategy) {
+            try {
+                const response = await axios.post(`${API_URL}/get_scatterplot_data`, null, {
+                    params: {
+                        p_value: selectedStrategy,
+                        game_stage: endStage,
+                        decision: actionAtEndStage
+                    }
+                });
+                setScatterplotData(response.data);
+            } catch (error) {
+                console.error("Error fetching scatterplot data:", error);
+            }
+            finally {
+                setLoadingScatter(false); // Set loading to false after fetching scatterplot data
+            }
+        }
+    };
+
 
     useEffect(() => {
         async function fetchStrategies() {
@@ -61,10 +84,12 @@ const StrategyAnalyzer: React.FC = () => {
 
     useEffect(() => {
         fetchData();
+        fetchScatterplotData();
     }, [selectedStrategy, endStage, actionAtEndStage]);
 
     const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
         setLoadingBarChartData(true);
+        setLoadingScatter(true);
         setFirstVisit(false);
         setSelectedStrategy(event.target.value);
     };
@@ -141,9 +166,18 @@ const StrategyAnalyzer: React.FC = () => {
                         <CircularProgress />
                     </div>
                 ) :
-                    (<div style={{ marginTop: '20px' }}>
-                        {barChartData.length > 0 && <GroupedStackedBarChart data={JSON.parse(barChartData)} />}
-                    </div>)}
+                    (
+                        <>
+                            <div style={{ marginTop: '20px' }}>
+                                {barChartData.length > 0 && <GroupedStackedBarChart data={JSON.parse(barChartData)} />}
+                            </div>
+
+                            <div style={{ marginTop: '20px' }}>
+                                <ScatterPlot data={scatterplotData} />
+                            </div>
+                        </>
+
+                    )}
 
 
         </div>