<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  /* CSS for styling */
  svg {
    margin-top: 20px;
    width: 100%;
    height: 100%;
  }

  text {
    font-family: Arial, sans-serif;
    font-size: 12px;
  }
</style>
</head>
<body style="background-color:#1a1d20">

<!-- Container for the chart -->
<div id="chart-container"></div>

<?php
// Example PHP code to fetch data from MySQL
include "database/database.php";
include "database/data.php";

// Assuming $sell_data and $connection are defined in included files

// Query to fetch data
$sql = "SELECT account, SUM(total) AS total_expense FROM $expense GROUP BY account ORDER BY total_expense DESC";
$result = $connection->query($sql);

// Prepare data array
$data = array();
if ($result && $result->num_rows > 0) {
  while ($row = $result->fetch_assoc()) {
    $data[] = array(
      'label' => $row['account'],
      'value' => (int)$row['total_expense']
    );
  }
}
?>

<script>
  // JavaScript section
  // Data for the bar chart (loaded from PHP)
  const data = <?php echo json_encode($data); ?>;

  // Dimensions for the chart
  const svgWidth = 600;
  const svgHeight = 300;
  const barHeight = 40;
  const barMargin = 10;
  const maxValue = Math.max(...data.map(d => d.value));

  // Create SVG element
  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  svg.setAttribute('width', svgWidth);
  svg.setAttribute('height', svgHeight);

  // Create bars and labels
  data.forEach((d, i) => {
    // Calculate bar width based on data value
    const barWidth = (d.value / maxValue) * (svgWidth - 100);

    // Create rectangle for the bar
    const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    rect.setAttribute('x', 50);
    rect.setAttribute('y', i * (barHeight + barMargin));
    rect.setAttribute('width', 0); // Start width at 0 for animation
    rect.setAttribute('height', barHeight);
    rect.setAttribute('fill', 'steelblue');

    // Animate the width of the bar
    const animate = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
    animate.setAttribute('attributeName', 'width');
    animate.setAttribute('from', 0);
    animate.setAttribute('to', barWidth);
    animate.setAttribute('dur', '1s');
    animate.setAttribute('fill', 'freeze');
    rect.appendChild(animate);

    // Add label text
    const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    text.setAttribute('x', 10); // Adjusted x position for labels
    text.setAttribute('y', i * (barHeight + barMargin) + barHeight / 2 + 5);
    text.setAttribute('fill', 'white');
    text.textContent = d.label;

    // Add value text
    const valueText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    valueText.setAttribute('x', barWidth + 55); // Adjusted x position for values
    valueText.setAttribute('y', i * (barHeight + barMargin) + barHeight / 2 + 5);
    valueText.setAttribute('fill', 'white'); // Set the fill color to white
    valueText.textContent = d.value;

    // Append elements to SVG
    svg.appendChild(rect);
    svg.appendChild(text);
    svg.appendChild(valueText);
  });

  // Append SVG to the HTML container
  document.getElementById('chart-container').appendChild(svg);
</script>

</body>
</html>
