<!DOCTYPE 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";

    // Retrieve total expenses
    // Retrieve total expenses
$sql_expense = "SELECT SUM(total) AS total_expense FROM $expense";
$result_expense = mysqli_query($connection, $sql_expense);
$row_expense = mysqli_fetch_assoc($result_expense);
$total_expense = $row_expense['total_expense'];


// Retrieve total sales
$sql_sell = "SELECT SUM(total) AS total_sell FROM $sell_data";
$result_sell = mysqli_query($connection, $sql_sell);
$row_sell = mysqli_fetch_assoc($result_sell);
$total_sell = $row_sell['total_sell'];

// Calculate percentage for total sales and expenses
$total = $total_sell + $total_expense;

if ($total > 0) {
    $percent_sell = ($total_sell / $total) * 100;
    $percent_expense = ($total_expense / $total) * 100;
} else {
    // Handle the case where the total is zero
    $percent_sell = 0;
    $percent_expense = 0;
}

// Prepare data for D3.js
$data = [
    ["name" => "ရောင်းရငွေ", "percent" => $percent_sell],
    ["name" => "ရောင်းရငွေ", "percent" => $percent_sell],
    ["name" => "ရောင်းရငွေ", "percent" => $percent_sell],
    ["name" => "အသုံးစရိတ်", "percent" => $percent_expense]
];

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 = 380; // Increase height to make space for the vertical legend

var outerRadius = 100; // Radius of the pie chart
var innerRadius = 60;  // Inner radius for a donut chart

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(' + (w / 2) + ',' + (outerRadius + 20) + ')' // Center the chart horizontally
  });

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.toFixed(1) + "%";
        })
        .style({
            fill: '#fff',
            'font-size': '14px'
        });

    var legendRectSize = 20;
    var legendSpacing = 7;

    // Adjust the legend position to be vertically below the chart
    var legend = svg.selectAll('.legend')
        .data(dataset)
        .enter()
        .append('g')
        .attr({
            class: 'legend',
            transform: function(d, i) {
                // Position the legend items below the pie chart, stacked vertically
                var legendX = -(outerRadius + 20); // Align to the left side of the chart
                var legendY = outerRadius + 40 + (i * (legendRectSize + legendSpacing)); // Position each item vertically below the previous one
                return 'translate(' + legendX + ',' + legendY + ')';
            }
        });

    // Legend rectangles
    legend.append('rect')
        .attr({
            width: legendRectSize,
            height: legendRectSize,
            fill: function(d) { return color(d.name); }
        });

    // Legend text
    legend.append('text')
        .attr({
            x: legendRectSize + legendSpacing,
            y: legendRectSize - legendSpacing
        })
        .text(function(d) {
            return d.name;
        })
        .style({
            fill: '#fff',
            '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>
