Merge pull request #111 from siliataider/eliott-dev

add graph
siliataider · Jan 18, 2024 · f7b7792 · f7b7792
2 parents ea60c1d + 1d2f342
commit f7b7792
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 9 deletions.
diff --git a/BackSimulation/src/main/java/com/example/BackSimulation/DTO/AgentDTO.java b/BackSimulation/src/main/java/com/example/BackSimulation/DTO/AgentDTO.java
@@ -3,6 +3,9 @@
 import com.google.gson.internal.LinkedTreeMap;
 import org.springframework.lang.Nullable;
 
+import java.util.ArrayList;
+import java.util.List;
+
 public class AgentDTO {
     private int id;
     @Nullable
@@ -11,12 +14,14 @@ public class AgentDTO {
     private String algo;
 
     private LinkedTreeMap<String,Double> state;
+    private List<Double> rewardmoyen;
 
-    public AgentDTO(int id, String action, String algo, LinkedTreeMap<String,Double> state) {
+    public AgentDTO(int id, String action, String algo, LinkedTreeMap<String,Double> state, List<Double> rewardmoyen) {
         this.id = id;
         this.action = action;
         this.algo = algo;
         this.state = state;
+        this.rewardmoyen = rewardmoyen;
     }
 
     public int getId() {
@@ -43,6 +48,10 @@ public LinkedTreeMap<String, Double> getState() {
         return state;
     }
 
+    public List<Double> getRewardmoyen() {
+        return rewardmoyen;
+    }
+
     @Override
     public String toString() {
         return "AgentDTO{" +

diff --git a/BackSimulation/src/main/java/com/example/BackSimulation/Model/MapObjectManager.java b/BackSimulation/src/main/java/com/example/BackSimulation/Model/MapObjectManager.java
@@ -7,6 +7,7 @@
 
 import java.awt.*;
 import java.util.ArrayList;
+import java.util.List;
 
 public class MapObjectManager {
 
@@ -37,7 +38,8 @@ public void setAgents(ArrayList<AgentDTO> agentDTOList) {
             }
             String algo = agentDTOList.get(i).getAlgo();
             State state = new State(agentDTOList.get(i).getState(), coords.getX(), coords.getY());
-            trueAgents.add(new Agent(agentDTOList.get(i).getId(), coords, state, algo));
+            List<Double> rewardMoyen = agentDTOList.get(i).getRewardmoyen();
+            trueAgents.add(new Agent(agentDTOList.get(i).getId(), coords, state, algo, rewardMoyen));
         }
 
         agents = trueAgents;

diff --git a/BackSimulation/src/main/java/com/example/BackSimulation/Model/MapObjects/Agent.java b/BackSimulation/src/main/java/com/example/BackSimulation/Model/MapObjects/Agent.java
@@ -1,18 +1,21 @@
 package com.example.BackSimulation.Model.MapObjects;
 
 import java.awt.*;
+import java.util.List;
 
 public class Agent extends MapObject{
     private State state;
 
     private String color;
 
+    private List<Double> rewardMoyen;
+
     public Agent(int id, Point coords) {
         super(id, coords);
         state = new State();
     }
 
-    public Agent(int id, Point coords, State state, String algo) {
+    public Agent(int id, Point coords, State state, String algo, List<Double> rewardMoyen) {
         super(id, coords);
         this.state = state;
         if(algo.equals("QL")){
@@ -21,6 +24,7 @@ public Agent(int id, Point coords, State state, String algo) {
         if(algo.equals("DQL")){
             color = "blue";
         }
+        this.rewardMoyen = rewardMoyen;
     }
 
     @Override
@@ -36,7 +40,8 @@ public String toJSONString() {
         String ret = "{" +
                 "\"id\": " + getId() + "," +
                 "\"color\": \"" + color + "\"," +
-                "\"state\": " + state.toJSONString() +
+                "\"state\": " + state.toJSONString() + "," +
+                "\"rewardMoyen\": " + rewardMoyen +
                 "}";
         return ret;
     }

diff --git a/BackSimulation/src/main/java/com/example/BackSimulation/Simulator.java b/BackSimulation/src/main/java/com/example/BackSimulation/Simulator.java
@@ -16,6 +16,7 @@
 import java.net.URISyntaxException;
 import java.util.ArrayList;
 import java.awt.*;
+import java.util.List;
 
 @Service
 public class Simulator {
@@ -124,8 +125,8 @@ public void onConnect(SocketIOClient client) {
 
     private void initPythonWebSocketClient() {
         try {
-            pythonWebSocketClient = new WebSocketClient(new URI("wss://citymanagerpython.onrender.com")) {
-            //pythonWebSocketClient = new WebSocketClient(new URI("ws://localhost:8765")) {
+            //pythonWebSocketClient = new WebSocketClient(new URI("wss://citymanagerpython.onrender.com")) {
+            pythonWebSocketClient = new WebSocketClient(new URI("ws://localhost:8765")) {
                 @Override
                 public void onOpen(ServerHandshake handshakedata) {
                     System.out.println("Connected to Python WebSocket server");
@@ -147,7 +148,8 @@ public void onMessage(String message) {
                         String action = (String) agentListRaw.get(i).get("action");
                         String algo = (String) agentListRaw.get(i).get("algo");
                         LinkedTreeMap<String,Double> state = (LinkedTreeMap<String, Double>) agentListRaw.get(i).get("state");
-                        agentList.add(new AgentDTO(id,action,algo,state));
+                        List<Double> rewardMoyen = (List<Double>) agentListRaw.get(i).get("reward_moyen");
+                        agentList.add(new AgentDTO(id,action,algo,state, rewardMoyen));
                     }
 
                     try {

diff --git a/front/package.json b/front/package.json
@@ -11,8 +11,10 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "^2.0.1",
+    "chart.js": "^4.4.1",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^9.0.4",
     "reactjs-popup": "^2.0.6",

diff --git a/front/src/assets/graph/GraphReward.jsx b/front/src/assets/graph/GraphReward.jsx
@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from 'react';
+import "chart.js/auto";
+import { Line } from 'react-chartjs-2';
+
+const GraphReward = ({ data }) => {
+    const [chartData, setChartData] = useState({
+      labels: [],
+      datasets: [
+        {
+          label: 'Reward Moyen en fonction des episode',
+          data: [],
+          fill: false,
+          borderColor: 'rgba(75,192,192,1)',
+          borderWidth: 2,
+        },
+      ],
+    });
+
+    useEffect(() => {
+      // Mettez à jour le graphique chaque fois que les données changent
+      setChartData((prevChartData) => ({
+        ...prevChartData,
+        labels: data.map((_, index) => index), // Utilisez les indices comme labels
+        datasets: [
+          {
+            ...prevChartData.datasets[0],
+            data,
+          },
+        ],
+      }));
+    }, [data]);
+
+    return (
+      <div>
+        <Line data={chartData} />
+      </div>
+    );
+  };
+
+export default GraphReward;
diff --git a/front/src/assets/panel/GamePanel.jsx b/front/src/assets/panel/GamePanel.jsx
@@ -1,18 +1,20 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import {useDispatch, useSelector} from 'react-redux';
 
 import socketEvents from "../socket/socketEvents";
 
 import { clearMapObjects, setAgents } from "../canvas/drawSlice";
 import CreationPanel from "./CreationPanel";
 import { clearCanavas } from "../canvas/canavasTools";
-
+import GraphReward from "../graph/GraphReward";
 
 
 const GamePanel = (props) => {
 
     const dispatch = useDispatch();
     const socket = useSelector( (state) => state.socket.socket);
+    const agents = useSelector( (state) => state.draw.agents);
+    const [isAgentSet, setIsAgentSet] = useState(false);
 
     function stop(){
       socket.on(socketEvents.stop_simulation, (message) => {
@@ -49,9 +51,11 @@ const GamePanel = (props) => {
                 y : agent.state.y,
                 color : agent.color,
                 size : 10,
+                rewardMoyen: agent.rewardMoyen
             })
           }
           dispatch( setAgents( agentList) );
+          setIsAgentSet(true)
         });
       }, [])
 
@@ -74,6 +78,7 @@ const GamePanel = (props) => {
         <br></br>
         <button onClick={stop}>STOP</button>
         <br></br>
+        {isAgentSet && <GraphReward data={agents[0].rewardMoyen} />}
     </>
     );