WYGIWYH/app/templates/net_worth/net_worth.html

{% extends "layouts/base.html" %}
{% load currency_display %}
{% load crispy_forms_tags %}
{% load i18n %}
{% load month_name %}
{% load static %}
{% load webpack_loader %}

{% block title %}{% translate 'Net Worth' %}{% endblock %}

{% block content %}
<div class="container px-md-3 py-3 column-gap-5">
  <div class="row gx-xl-4 gy-3">
    <div class="col-12 col-xl-5">
      <div class="row row-cols-1 g-4 mb-3">
        <div class="col">
          <div class="card tw-relative h-100 shadow">
          <div class="tw-absolute tw-h-8 tw-w-8 tw-right-2 tw-top-2 tw-bg-yellow-300 tw-text-yellow-800 text-center
          align-items-center d-flex justify-content-center rounded-2">
            <i class="fa-solid fa-coins"></i>
          </div>
          <div class="card-body">
            <h5 class="tw-text-yellow-400 fw-bold mb-3">{% translate 'By currency' %}</h5>
            {% for currency in currency_net_worth %}
            <div class="d-flex justify-content-between mt-2">
                <div class="d-flex align-items-baseline w-100">
                    <div class="currency-name text-start font-monospace tw-text-gray-300">{{ currency.name }}</div>
                    <div class="dotted-line flex-grow-1"></div>
                    <div class="amount text-end font-monospace" data-original-value="{% currency_display amount=currency.amount prefix=currency.prefix suffix=currency.suffix decimal_places=currency.decimal_places %}"></div>
                </div>
            </div>
            {% endfor %}
          </div>
        </div>
        </div>
        <div class="col">
          <div class="card tw-relative h-100 shadow">
          <div class="tw-absolute tw-h-8 tw-w-8 tw-right-2 tw-top-2 tw-bg-blue-300 tw-text-blue-800 text-center
          align-items-center d-flex justify-content-center rounded-2">
            <i class="fa-solid fa-wallet"></i>
          </div>
          <div class="card-body">
            <h5 class="tw-text-blue-400 fw-bold mb-3">{% translate 'By account' %}</h5>
            {% for group_id, group_data in account_net_worth.items %}
              {% if group_id %}
                <div class="d-flex justify-content-between mt-2">
                  <div class="d-flex align-items-baseline w-100">
                      <div class="text-start font-monospace tw-text-gray-300"><span class="badge !tw-bg-blue-300
                      !tw-text-blue-800">
                        {{ group_data.name }}</span></div>
                  </div>
                </div>
                {% for account_id, account_data in group_data.accounts.items %}
                  <div class="d-flex justify-content-between mt-2">
                    <div class="d-flex align-items-baseline w-100">
                        <div class="text-start font-monospace tw-text-gray-300">
                          <span class="hierarchy-line-icon"></span>{{ account_data.name }}</div>
                        <div class="dotted-line flex-grow-1"></div>
                        <div class="amount" data-original-value="{% currency_display amount=account_data.balance prefix=account_data.currency.prefix suffix=account_data.currency.suffix decimal_places=account_data.currency.decimal_places%}"></div>
                    </div>
                  </div>
                  {% if account_data.exchange %}
                    <div class="amount text-end tw-text-gray-400" data-original-value=
                        "{% currency_display amount=account_data.exchange.amount prefix=account_data.exchange.prefix suffix=account_data.exchange.suffix decimal_places=account_data.exchange.decimal_places%}"></div>
                  {% endif %}
                {% endfor %}
              {% else %}
                {% for account_id, account_data in group_data.accounts.items %}
                  <div class="d-flex justify-content-between mt-2">
                    <div class="d-flex align-items-baseline w-100">
                        <div class="currency-name text-start font-monospace tw-text-gray-300">{{ account_data.name }}</div>
                        <div class="dotted-line flex-grow-1"></div>
                        <div class="amount" data-original-value="{% currency_display amount=account_data.balance prefix=account_data.currency.prefix suffix=account_data.currency.suffix decimal_places=account_data.currency.decimal_places%}"></div>
                        {% if account_data.exchange %}
                        <div class="amount text-end tw-text-gray-400" data-original-value=
                            "{% currency_display amount=account_data.balance prefix=account_data.currency.prefix suffix=account_data.currency.suffix decimal_places=account_data.currency.decimal_places%}"></div>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
              {% endif %}
              {% endfor %}
          </div>
        </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-xl-7 h-100">
      <canvas id="currencyBalanceChart"></canvas>
      <canvas id="accountBalanceChart"></canvas>
    </div>
  </div>
</div>

<script>
  var chartData = JSON.parse('{{ chart_data_currency_json|safe }}');
  var currencies = {{ currencies|safe }};

  var ctx = document.getElementById('currencyBalanceChart').getContext('2d');
  new Chart(ctx, {
      type: 'line',
      data: chartData,
      options: {
          responsive: true,
          interaction: {
              mode: 'index',
              intersect: false,
          },
          plugins: {
              title: {
                  display: true,
                  text: '{% translate 'Evolution by currency' %}'
              },
              tooltip: {
                  mode: 'index',
                  intersect: false
              }
          },
          scales: {
              x: {
                  display: true,
                  title: {
                      display: false,
                  }
              },
              ...Object.fromEntries(currencies.map((currency, i) => [
                  `y${i}`,
                  {
                      type: 'linear',
                      display: true,
                      grid: {
                          drawOnChartArea: i === 0,
                      },
                      ticks: {
                          display: false
                      },
                      border: {
                          display: false
                      }
                  }
              ]))
          }
      }
  });
</script>

<script>
  var chartData = JSON.parse('{{ chart_data_accounts_json|safe }}');
  var accounts = {{ accounts|safe }};

  var ctx = document.getElementById('accountBalanceChart').getContext('2d');
  new Chart(ctx, {
      type: 'line',
      data: chartData,
      options: {
          responsive: true,
          interaction: {
              mode: 'index',
              intersect: false,
          },
          stacked: false,
          plugins: {
              title: {
                  display: true,
                  text: '{% translate "Evolution by account" %}'
              },
              tooltip: {
                  mode: 'index',
                  intersect: false
              }
          },
          scales: {
              x: {
                  display: true,
                  title: {
                      display: false,
                  }
              },
              ...Object.fromEntries(accounts.map((account, i) => [
                  `y-axis-${i}`,
                  {
                      type: 'linear',
                      display: true,
                      position: i % 2 === 0 ? 'left' : 'right',
                      grid: {
                          drawOnChartArea: i === 0,
                      },
                      ticks: {
                          display: false
                      },
                      border: {
                          display: false
                      }
                  }
              ]))
          }
      }
  });
</script>

{% endblock %}