{% extends "base.html" %}

{% block title %}

{% endblock title %}


{% block style %}
    <style>
      #incomeChart, #expenseChart{
        height: 500px;
        background-color: rgba(0, 0, 0, 0.5);
      }
      #chartContainer{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }
    </style>
{% endblock style %}

{% block content %}

    <div id="chartContainer">
      <div id="incomeChart"></div>
      <div id="expenseChart"></div>
    </div>


    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);


      function drawChart() {

        var incomedata = google.visualization.arrayToDataTable({{income_by_category|safe}});
        var expensedata = google.visualization.arrayToDataTable({{expense_by_category|safe}});

        var incomeoptions = {
          title: 'Income Distribution',
          is3D: true,
          'backgroundColor': 'transparent',
          'legend': {
            textStyle: { color: "white"}
          },
          'titleTextStyle': {
              color: "white"
            }
        };

        var expenseoptions = {
          title: 'Expense Distribution',
          is3D: true,
          'backgroundColor': 'transparent',
          'legend': {
            textStyle: { color: "white"}
          },
          'titleTextStyle': {
              color: "white"
            }
        };

        var Incomechart = new google.visualization.PieChart(document.getElementById('incomeChart'));
        var Expensechart = new google.visualization.PieChart(document.getElementById('expenseChart'));

        Incomechart.draw(incomedata, incomeoptions);
        Expensechart.draw(expensedata, expenseoptions);
      }
    </script>



{% endblock content %}