<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio Performance</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        /* CSS Code as per your existing styles */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f6fa;
            color: #333;
        }

        .dashboard {
            display: flex;
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .sidebar {
            max-width: 240px;
            background-color: #fff;
            padding: 20px;
            border-right: 1px solid #eee;
        }

        .logo {
            color: #7c5cfc;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 30px;
        }

        .sidebar ul {
            list-style-type: none;
            padding: 0;
        }

        .sidebar li {
            padding: 10px 0;
            cursor: pointer;
            display: flex;
            align-items: center;
        }

        .sidebar li i {
            margin-right: 10px;
            width: 20px;
            text-align: center;
        }
        /* Reusing the same styles as in the main dashboard */
        .main-content {
            flex-grow: 1;
            padding: 20px;
        }

        /* Additional styles for the Portfolio Performance page if needed */
        /* Keep other styles similar to the original */
    </style>
</head>
<body>
    <div class="dashboard">
        <aside class="sidebar">
            <div class="logo">Zapper</div>
            <nav>
                <ul>
    <li><a href="index.html"><i>⬜</i> Dashboard</a></li>
                <li><a href="portfolio-performance.html"><i>📈</i> Portfolio Performance</a></li>
                <li><a href="transactions.html"><i>💼</i> Transactions</a></li>
                <li><a href="/upload.html"><i>📤</i> Upload</a></li> <!-- Новая строка -->
                <li><i>🌾</i> Farm</li>
                <li><i>🌉</i> Bridge</li>
                <li><i>📜</i> History</li>
                <li><i>⚙️</i> Settings</li>
                </ul>
            </nav>
            <div class="logout">Logout</div>
        </aside>
        <main class="main-content">
            <header class="header">
                <h1>Portfolio Performance</h1>
            </header>
            <section class="chart-container">
                <div class="chart-header">
                    <h3>Monthly Portfolio Performance</h3>
                    <select>
                        <option>Monthly</option>
                        <option>Yearly</option>
                    </select>
                </div>
                <canvas id="portfolioChart"></canvas>
            </section>
            <section class="chart-container">
                <div class="chart-header">
                    <h3>Weekly Performance</h3>
                    <select>
                        <option>This Week</option>
                        <option>Last Week</option>
                    </select>
                </div>
                <canvas id="weeklyChart"></canvas>
            </section>
        </main>
    </div>

    <script>
        async function loadWeeklyData() {
            try {
                const response = await fetch('getWeeklyData.php');
                if (!response.ok) throw new Error('Network response was not ok');
                const data = await response.json();

                const labels = data.map(item => item.day);
                const values = data.map(item => item.value);

                const ctx = document.getElementById('weeklyChart').getContext('2d');
                new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Weekly Value',
                            data: values,
                            backgroundColor: '#4caf50',
                            borderColor: '#4caf50',
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    callback: function(value) {
                                        return '$' + value;
                                    }
                                }
                            }
                        }
                    }
                });
            } catch (error) {
                console.error('Error loading weekly data:', error);
            }
        }

        loadWeeklyData();

        async function loadPortfolioData() {
            try {
                const response = await fetch('getPortfolioData.php');
                if (!response.ok) throw new Error('Network response was not ok');
                const data = await response.json();

                const labels = data.map(item => item.month);
                const values = data.map(item => item.value);

                const ctx = document.getElementById('portfolioChart').getContext('2d');
                new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Portfolio Value',
                            data: values,
                            backgroundColor: 'rgba(124, 92, 252, 0.2)',
                            borderColor: '#7c5cfc',
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    callback: function(value) {
                                        return '$' + value;
                                    }
                                }
                            }
                        }
                    }
                });
            } catch (error) {
                console.error('Error loading portfolio data:', error);
            }
        }

        loadPortfolioData();
    </script>
</body>
</html>
<?php
// Database connection details
$servername = "fdb1030.awardspace.net";
$username = "4252301_714514419";
$password = "7gkczqm8PR6H";
$dbname = "4252301_714514419";

try {
    $pdo = new PDO("mysql:host=$host;dbname=$db", $user, $pass);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    // Prepare SQL statement
    $stmt = $pdo->prepare("INSERT INTO weekly_data (week, value) VALUES (:week, :value)");
    
    // Bind parameters
    $stmt->bindParam(':week', $_POST['week']);
    $stmt->bindParam(':value', $_POST['value']);

    // Execute the statement
    $stmt->execute();

    echo "Data inserted successfully!";
} catch (PDOException $e) {
    echo "Error: " . $e->getMessage();
}
?>
<?php
$servername = "fdb1030.awardspace.net";
$port = 3306;
$username = "4252301_714514419";
$password = "7gkczqm8PR6H"; // Замените на ваш пароль
$dbname = "4252301_714514419";

// Создание соединения
$conn = new mysqli($servername, $username, $password, $dbname, $port);

// Проверка соединения
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT month, value FROM portfolio";
$result = $conn->query($sql);

$data = [];
if ($result->num_rows > 0) {
    // Вывод данных каждой строки
    while($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
}

$conn->close();

header('Content-Type: application/json');
echo json_encode($data);
?>

Улучши код