[feat]:백테스팅 보고 페이지 코멘트 기능 추가

frontend/src/components/CoinPriceChart.jsx

@@ -0,0 +1,65 @@
+import ReactEcharts from "echarts-for-react";
+import useResponseStore from '../utils/useResponseStore';
+
+const CoinPriceChart = () => {
+
+    const { responseBackTest } = useResponseStore();
+
+    const {
+        trading_logs
+      } = responseBackTest.payload;
+
+    const option = {
+        legend: {
+            data: ['매수', '매도']
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            axisLine: {
+                onZero: false
+            },
+            data: trading_logs.map((log) =>{
+                const dateObj = new Date(log.date)
+                const date = dateObj.toLocaleDateString()
+                return date
+            })
+        },
+        yAxis: {
+            axisLabel: {
+                formatter: function(value) {
+                    if(value >= 1000000) return (value / 1000000) + 'M'
+                    if(value >= 1000) return (value / 1000000) + 'K'
+                    return value
+                }
+            }
+        },
+        series: [
+            {
+                name: "매수",
+                type: "bar",
+                data: trading_logs.map((log) => {
+                    if(log.type === '매수') return log.coin_price
+                    return 0
+                })
+            }, 
+            {
+                name: '매도',
+                type: 'bar',
+                data: trading_logs.map((log) => {
+                    if(log.type === '매도') return log.coin_price
+                    return 0
+                })
+            }
+        ]
+    }
+
+  return (
+    <div className="w-full h-full rounded-xl shadow-xl border pt-5">
+        <ReactEcharts option={option} style={{width:'100%', height:'100%'}} className="relative right-0"/>
+    </div>
+
+  )
+}
+
+export default CoinPriceChart

frontend/src/components/TradingLogTable.jsx

@@ -1,28 +1,65 @@
 
-const TradingLogTable = ({trading_logs}) => {
+import { useState } from 'react';
+
+const TradingLogTable = ({ trading_logs }) => {
+  const [sortConfig, setSortConfig] = useState({ key: null, direction: 'ascending' });
+
+  const sortedLogs = [...trading_logs].sort((a, b) => {
+    if (sortConfig.key === null) return 0;
+
+    const aValue = a[sortConfig.key];
+    const bValue = b[sortConfig.key];
+
+    if (sortConfig.key === 'date') {
+      const aDate = new Date(aValue);
+      const bDate = new Date(bValue);
+      if (sortConfig.direction === 'ascending') {
+        return aDate - bDate;
+      } else {
+        return bDate - aDate;
+      }
+    }
+
+    if (aValue < bValue) {
+      return sortConfig.direction === 'ascending' ? -1 : 1;
+    }
+    if (aValue > bValue) {
+      return sortConfig.direction === 'ascending' ? 1 : -1;
+    }
+    return 0;
+  });
+
   const formatTime = (date) => {
     const hours = date.getHours();
     const minutes = date.getMinutes().toString().padStart(2, '0');
     const seconds = date.getSeconds().toString().padStart(2, '0');
     const period = hours >= 12 ? 'PM' : 'AM';
-    const adjustedHours = hours % 12 || 12; // 0을 12로 변환
+    const adjustedHours = hours % 12 || 12;
 
     return `${period} ${adjustedHours}:${minutes}:${seconds}`;
   };
 
+  const requestSort = (key) => {
+    let direction = 'ascending';
+    if (sortConfig.key === key && sortConfig.direction === 'ascending') {
+      direction = 'descending';
+    }
+    setSortConfig({ key, direction });
+  };
+
   return (
     <table className="min-w-full bg-white">
       <thead>
         <tr>
-          <th className="py-2">Type</th>
-          <th className="py-2">Date</th>
+          <th className="py-2 cursor-pointer" onClick={() => requestSort('type')}>Type</th>
+          <th className="py-2 cursor-pointer" onClick={() => requestSort('date')}>Date</th>
           <th className="py-2">Time</th>
-          <th className="py-2">Coin Price</th>
-          <th className="py-2">Rate</th>
+          <th className="py-2 cursor-pointer" onClick={() => requestSort('coin_price')}>Coin Price</th>
+          <th className="py-2 cursor-pointer" onClick={() => requestSort('rate')}>Rate</th>
         </tr>
       </thead>
       <tbody>
-        {trading_logs.map((log, index) => {
+        {sortedLogs.map((log, index) => {
           const dateObj = new Date(log.date);
           const date = dateObj.toLocaleDateString();
           const time = formatTime(dateObj);

frontend/src/components/TradingProfitRateChart.jsx

@@ -0,0 +1,61 @@
+import ReactEcharts from "echarts-for-react";
+import useResponseStore from '../utils/useResponseStore';
+
+const TradingProfitRateChart = () => {
+
+  const { responseBackTest } = useResponseStore();
+
+    const {
+        trading_logs
+      } = responseBackTest.payload;
+
+    const tradeDate = trading_logs.map((log) =>{
+      if(log.type === '매도'){
+        const dateObj = new Date(log.date)
+        const date = dateObj.toLocaleDateString()
+        return date
+      }
+    })
+    const tradeRate = trading_logs.map((log) => {
+      if(log.type ==='매도') return log.rate
+    })
+
+    const option = {
+        legend: {
+            data: ['매도']
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            axisLine: {
+                onZero: false
+            },
+            data: tradeDate.filter(item => item !== undefined)
+        },
+        yAxis: {
+          scale:true,
+          axisLabel: {
+              formatter: function(value) {
+                  return value
+              }
+          }
+        },
+        series: [
+            {
+                name: '매도',
+                type: 'bar',
+                data: tradeRate.filter(item => item !== undefined)
+            }
+        ]
+    }
+
+
+
+  return (
+    <div className="h-full rounded-xl shadow-xl border pt-5">
+      <ReactEcharts option={option} style={{width:'100%', height:'100%'}} className="relative right-0"/>
+    </div>
+  )
+}
+
+export default TradingProfitRateChart

frontend/src/components/WinLossChart.jsx

@@ -0,0 +1,96 @@
+import ReactEcharts from "echarts-for-react";
+
+const WinLossChart = ({performance}) => {
+
+    const option = {
+        series: [
+            {
+              type: 'gauge',
+              startAngle: 180,
+              endAngle: 0,
+              center: ['50%', '86%'],
+              radius: '125%',
+              min: 0,
+              max: 100,
+              splitNumber: 8,
+              axisLine: {
+                lineStyle: {
+                  width: 6,
+                  color: [
+                    [0.25, '#FF6E76'],
+                    [0.5, '#FDDD60'],
+                    [0.75, '#58D9F9'],
+                    [1, '#7CFFB2']
+                  ]
+                }
+              },
+              pointer: {
+                icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
+                length: '12%',
+                width: 20,
+                offsetCenter: [0, '-60%'],
+                itemStyle: {
+                  color: 'auto'
+                }
+              },
+              axisTick: {
+                length: 12,
+                lineStyle: {
+                  color: 'auto',
+                  width: 2
+                }
+              },
+              splitLine: {
+                length: 20,
+                lineStyle: {
+                  color: 'auto',
+                  width: 5
+                }
+              },
+              axisLabel: {
+                color: '#464646',
+                fontSize: 16,
+                distance: -50,
+                rotate: 'tangential',
+                formatter: function (value) {
+                  if (value === 87.5) {
+                    return 'Grade A';
+                  } else if (value === 62.5) {
+                    return 'Grade B';
+                  } else if (value === 37.5) {
+                    return 'Grade C';
+                  } else if (value === 12.5) {
+                    return 'Grade D';
+                  }
+                  return '';
+                }
+              },
+              title: {
+                offsetCenter: [0, '-10%'],
+                fontSize: 18
+              },
+              detail: {
+                fontSize: 32,
+                offsetCenter: [0, '-35%'],
+                valueAnimation: true,
+                formatter: function (value) {
+                  return Math.round(value) + '%';
+                },
+                color: 'inherit'
+              },
+              data: [
+                {
+                  value: performance.win_rate,
+                  name: 'Win Rating'
+                }
+              ]
+            }
+          ]
+    }
+
+  return (
+    <ReactEcharts option={option} style={{width:'100%', height:'100%'}}/>
+  )
+}
+
+export default WinLossChart