<!DOCaccount html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Circle Chart with D3JS</title>
  <style>

    .header {
      background-color: #29384D;
      height: 40px;
      color: #fff;
      line-height: 40px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      font-weight: 400;
      font-size: 1.5em;
      text-transform: uppercase;
      text-shadow: 1px 1px #06060d;
    }

    .chart-container {
      padding: 25px;
    }

    .shadow {
      -webkit-filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.5));
      filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.5));
    }
  </style>
</head>
<body style="background-color:#1a1d20">
  <div class="widget">
  <div class="header"><a style="margin-left:20px">အသုံးစရိတ်စာရင်း</a></div>
    <div id="chart" class="chart-container"></div>
  </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js'></script>

  <?php 
include "database/database.php";
include "database/data.php";
include "cal_expense.php";

$sql = "SELECT account, amount FROM ".$account;
$result = $connection->query($sql);

$amount_sum = 0;
$data = array();

// Calculate amount sum
while ($row = $result->fetch_assoc()) {
    $amount_sum += $row["amount"];
}

// Check if amount_sum is greater than zero to avoid division by zero
if ($amount_sum > 0) {
    // Calculate percentages and store in $data array
    $result->data_seek(0); // Reset result pointer
    while ($row = $result->fetch_assoc()) {
        $percent = floor(($row["amount"] / $amount_sum) * 100);
        $data[] = array("name" => $row["account"], "percent" => $percent);
    }
} else {
    // Handle the case where amount_sum is zero (optional)
    $data[] = array("name" => "No data", "percent" => 0);
}

echo "<script>var dataset = ".json_encode($data).";</script>";
?>

  <script>
    var pie = d3.layout.pie()
      .value(function(d) { return d.percent; })
      .sort(null)
      .padAngle(.03);

    var w = 500, h = 250; // Adjusted width to accommodate legend beside the chart

    var outerRadius = 100; // Reduced radius
    var innerRadius = 60; // Reduced radius

    var color = d3.scale.category10();

    var arc = d3.svg.arc()
      .outerRadius(outerRadius)
      .innerRadius(innerRadius);

    var svg = d3.select("#chart")
      .append("svg")
      .attr({
          width: w,
          height: h,
          class: 'shadow'
      }).append('g')
      .attr({
          transform: 'translate(' + (outerRadius + 20) + ',' + (h / 2) + ')' // Centered chart on the left
      });

    var path = svg.selectAll('path')
      .data(pie(dataset))
      .enter()
      .append('path')
      .attr({
          d: arc,
          fill: function(d, i) {
              return color(d.data.name);
          }
      });

    path.transition()
      .duration(1000)
      .attrTween('d', function(d) {
          var interpolate = d3.interpolate({ startAngle: 0, endAngle: 0 }, d);
          return function(t) {
              return arc(interpolate(t));
          };
      });

    var restOfTheData = function() {
        var text = svg.selectAll('text')
            .data(pie(dataset))
            .enter()
            .append("text")
            .transition()
            .duration(200)
            .attr("transform", function(d) {
                return "translate(" + arc.centroid(d) + ")";
            })
            .attr("dy", ".4em")
            .attr("text-anchor", "middle")
            .text(function(d) {
                return d.data.percent + "%";
            })
            .style({
                fill: '#fff',
                'font-size': '14px'
            });

        var legendRectSize = 20;
        var legendSpacing = 7;
        var legendHeight = legendRectSize + legendSpacing;

        var legend = svg.selectAll('.legend')
            .data(dataset) // Use the dataset directly
            .enter()
            .append('g')
            .attr({
                class: 'legend',
                transform: function(d, i) {
                    // Position legend closer to the chart and move down slightly
                    return 'translate(' + (outerRadius + 40) + ',' + ((i * legendHeight) - (h / 2 - 10)) + ')';
                }
            });

        legend.append('rect')
            .attr({
                width: legendRectSize,
                height: legendRectSize,
                rx: 20,
                ry: 10
            })
            .style({
                fill: function(d) { return color(d.name); },
                stroke: function(d) { return color(d.name); }
            });

        legend.append('text')
            .attr({
                x: 25,
                y: 20 // Move text down further
            })
            .text(function(d) {
                return d.name;
            }).style({
                fill: '#fff', // Change text color to white
                'font-size': '14px'
            });

        // Add logo inside the circle
        svg.append("svg:image")
            .attr({
                "xlink:href": "image/logo.png", // URL of the logo image
                x: -30, // Adjust x position
                y: -30, // Adjust y position
                width: 60, // Adjusted size
                height: 60 // Adjusted size
            });
    };

    setTimeout(restOfTheData, 1000);
  </script>
</body>
</html>
