"<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BTC-USDC Trading Simulation</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0/dist/chartjs-adapter-moment.min.js"></script>
</head>
<body>
    <h1>BTC-USDC Trading Simulation</h1>
    <div>
        <label for="startDate">Start Date:</label>
        <input type="datetime-local" id="startDate">
        <label for="endDate">End Date:</label>
        <input type="datetime-local" id="endDate">
        <button onclick="runSimulation()">Run Simulation</button>
    </div>
    <canvas id="chart" width="800" height="400"></canvas>

    <script>
        const movingAveragePeriod = 19;
        const tradeAmount = 10; // USDC

        async function fetchData(startTime, endTime) {
            let allData = [];
            let currentStartTime = startTime;

            while (currentStartTime < endTime) {
                const url = `https://fapi.binance.com/fapi/v1/klines?symbol=SOLUSDC&interval=1m&limit=1000&startTime=${currentStartTime}&endTime=${endTime}`;
                const response = await fetch(url);
                const data = await response.json();

                if (data.length === 0) break;

                allData = allData.concat(data);
                currentStartTime = data[data.length - 1][0] + 60000; // Next minute after the last received data point
            }

            return allData.map(candle => ({
                time: new Date(candle[0]),
                price: parseFloat(candle[4])
            }));
        }

        function calculateMA(prices, period) {
            const ma = [];
            for (let i = 0; i < prices.length; i++) {
                if (i < period - 1) {
                    ma.push(null);
                } else {
                    const slice = prices.slice(i - period + 1, i + 1);
                    const average = slice.reduce((a, b) => a + b) / period;
                    ma.push(average);
                }
            }
            return ma;
        }

        function simulateTrading(data, ma) {
            let btcBalance = 0;
            let usdcBalance = 0;
            let totalValue = [];

            for (let i = 0; i < data.length; i++) {
                const { price } = data[i];
                
                if (ma[i] !== null) {
                    if (price < ma[i]) {
                        // Sell BTC
                        btcBalance -= tradeAmount / (price*0.9994);
                        usdcBalance += tradeAmount;
                    } else {
                        // Buy BTC
                        btcBalance += tradeAmount / (price*1.0006);
                        usdcBalance -= tradeAmount;
                    }
                }

                // Calculate total value in USDC
                const currentTotalValue = btcBalance * price + usdcBalance;
                totalValue.push(currentTotalValue);
            }

            return { totalValue };
        }

        let chart;

        function drawChart(data, totalValue) {
            const ctx = document.getElementById('chart').getContext('2d');

            if (chart) {
                chart.destroy();
            }

            chart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: data.map(d => d.time),
                    datasets: [
                        {
                            label: 'Total Value (USDC)',
                            data: totalValue.map((value, index) => ({ x: data[index].time, y: value })),
                            borderColor: 'blue',
                            fill: false
                        }
                    ]
                },
                options: {
                    responsive: true,
                    title: {
                        display: true,
                        text: 'BTC-USDC Trading Simulation'
                    },
                    scales: {
                        x: {
                            type: 'time',
                            time: {
                                unit: 'day'
                            },
                            display: true,
                            title: {
                                display: true,
                                text: 'Date'
                            }
                        },
                        y: {
                            display: true,
                            title: {
                                display: true,
                                text: 'Total Value (USDC)'
                            }
                        }
                    }
                }
            });
        }

        async function runSimulation() {
            const startDate = new Date(document.getElementById('startDate').value);
            const endDate = new Date(document.getElementById('endDate').value);

            if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
                alert('Please select valid start and end dates.');
                return;
            }

            const data = await fetchData(startDate.getTime(), endDate.getTime());
            const prices = data.map(d => d.price);
            const ma = calculateMA(prices, movingAveragePeriod);
            const { totalValue } = simulateTrading(data, ma);

            drawChart(data, totalValue);
        }
    </script>
</body>
</html>" this is my strategy testing code. i want that calculate a new value percentage; (Total Value)/((Number of Opened Positions)*10). draw it on graph too. this value will not be calculated for first 19 data points since positions are not opened until then yet.