{% extends "base.html" %}
{% block title %}{{ _("Cash Flow") }} · Wealth Dashboard{% endblock %}
{% block heading %}{{ _("Cash Flow") }}{% endblock %}
{% block lede %}
<p class="lede">{{ _("Money in against money out, per month. Internal transfers are excluded — moving money between your own accounts is not income and not spending, and counting it would inflate both by the same amount. Investment is separated for the same reason: a month you invested €3,000 is not a month you overspent.") }}</p>
{% endblock %}
{% block content %}
{% macro fx_note(x) %}
{% if x.converted %}
{% set amounts %}{% for u in x.converted %}<strong>{{ money(u.amount, u.currency) }}</strong>{{ ", " if not loop.last }}{% endfor %}{% endset %}
<p class="sub">{{ _f("Includes {amounts}, converted at ECB rates — each month at its own rate, and months older than the rates on file at the oldest.", amounts=amounts) | safe }}</p>
{% endif %}
{% if x.unconverted %}
<p class="sub">{{ _("Not counted, because no rate here covers them:") }}
  {% for u in x.unconverted %}<strong>{{ money(u.amount, u.currency) }}</strong>{{ ", " if not loop.last }}{% endfor %}
  {% set settings_link %}<a href="{{ url_for('settings_page') }}">{{ _("Settings") }}</a>{% endset %}
  {{ _f("Fetch rates under {settings}.", settings=settings_link) | safe }}</p>
{% endif %}
{% endmacro %}

<section class="stat-strip">
  <div class="stat-card stat-green">
    <div class="stat-label">{{ _("Income") }}</div>
    <div class="stat-value gain">{{ money(data.average_income, data.base_currency) }}</div>
    <div class="stat-sub">{{ _n(data.months_covered, "a month, over {n} month", "a month, over {n} months") }}</div>
  </div>
  <div class="stat-card stat-purple">
    <div class="stat-label">{{ _("Spending") }}</div>
    <div class="stat-value">{{ money(data.average_spending, data.base_currency) }}</div>
    <div class="stat-sub">{{ _("a month") }}</div>
  </div>
  <div class="stat-card stat-blue">
    <div class="stat-label">{{ _("Invested") }}</div>
    <div class="stat-value">{{ money(data.total_investment, data.base_currency) }}</div>
    <div class="stat-sub">{{ _("over the period") }}</div>
  </div>
  <div class="stat-card stat-gold">
    <div class="stat-label">{{ _("Kept") }}</div>
    {% set kept = data.total_income - data.total_spending %}
    <div class="stat-value {{ 'gain' if kept >= 0 else 'loss' }}">{{ money(kept, data.base_currency) }}</div>
    <div class="stat-sub">{{ _("income less spending") }}</div>
  </div>
</section>
{{ fx_note(data) }}

{% if data.months %}
<section class="card">
  <div class="card-header"><h2>{{ _("By month") }}</h2>
    <span class="card-subtitle">{{ _f("in {currency}", currency=data.base_currency) }}</span></div>
  <div class="chart-wrap" style="height:290px"><canvas id="chart-months"></canvas></div>
</section>

<section class="grid-2">
  <div class="card">
    <div class="card-header"><h2>{{ _("Where it goes") }}</h2></div>
    <div class="chart-wrap"><canvas id="chart-cats"></canvas></div>
  </div>
  <div class="card">
    <div class="card-header"><h2>{{ _("By category") }}</h2>
      <span class="card-subtitle">{{ _("per month on average") }}</span></div>
    <div class="table-wrap">
      <table class="grid">
        <thead><tr><th>{{ _("Category") }}</th><th class="num">{{ _("Per month") }}</th><th class="num">{{ _("Total") }}</th></tr></thead>
        <tbody>
        {% for c in data.by_category %}
          <tr>
            <td><span class="tag tag-muted" style="color:{{ c.colour }};border-color:{{ c.colour }}44">{{ c.label }}</span></td>
            <td class="num">{{ money(c.per_month, data.base_currency) }}</td>
            <td class="num sub">{{ money(c.total, data.base_currency) }}</td>
          </tr>
        {% endfor %}
        {% if data.income_by_category %}
          <tr><th colspan="3" class="sub">{{ _("Where it comes from") }}</th></tr>
          {% for c in data.income_by_category %}
          <tr>
            <td><span class="tag tag-muted" style="color:{{ c.colour }};border-color:{{ c.colour }}44">{{ c.label }}</span></td>
            <td class="num">{{ money(c.per_month, data.base_currency) }}</td>
            <td class="num sub">{{ money(c.total, data.base_currency) }}</td>
          </tr>
          {% endfor %}
        {% endif %}
        </tbody>
      </table>
    </div>
  </div>
</section>
{% else %}
<section class="card empty">
  <p>{{ _("No transactions in the base currency yet.") }}</p>
  {% set cat_link %}<a href="{{ url_for('categorize') }}">{{ _("Categorize") }}</a>{% endset %}
  <p class="sub">{{ _f("Connect a bank or import a statement, then categorise on the {page} page — until things have categories, this page has nothing to add up.", page=cat_link) | safe }}</p>
</section>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
const D = {{ data.months | tojson }};
const CATS = {{ data.by_category | tojson }};
const INCOME = {{ data.income_by_category | tojson }};
const GRID = '#232c44', TICK = '#95a0b9';
{# Month names come from the server, so the chart is in the same language
   as the page around it rather than the browser's. #}
const MONTH_LABELS = [{% for m in data.months %}{{ mon(m.month) | tojson }}{{ "," if not loop.last }}{% endfor %}];

if (D.length) {
  new Chart(document.getElementById('chart-months'), {
    type: 'bar',
    data: {
      labels: MONTH_LABELS,
      {# Income is one bar built from its categories — a salary, a rent
         coming in, interest, each in its own colour — beside a spending
         bar and an invested bar. Three stacks, side by side. #}
      datasets: [
        ...(INCOME.length ? INCOME.map(c => ({ label: c.label, stack: 'in', data: D.map(m => m.income_categories[c.category] || 0), backgroundColor: c.colour }))
                          : [{ label: {{ _("Income") | tojson }}, stack: 'in', data: D.map(m => m.income), backgroundColor: '#34d399' }]),
        { label: {{ _("Spending") | tojson }}, stack: 'out', data: D.map(m => -m.spending), backgroundColor: '#f87171' },
        { label: {{ _("Invested") | tojson }}, stack: 'inv', data: D.map(m => -m.investment), backgroundColor: '#5b9dff' },
      ],
    },
    options: {
      responsive: true, maintainAspectRatio: false,
      scales: {
        x: { stacked: true, grid: { color: GRID }, ticks: { color: TICK } },
        y: { stacked: true, grid: { color: GRID }, ticks: { color: TICK } },
      },
      plugins: { legend: { labels: { color: TICK } } },
    },
  });
}

if (CATS.length) {
  new Chart(document.getElementById('chart-cats'), {
    type: 'doughnut',
    data: {
      labels: CATS.map(c => c.label),
      datasets: [{ data: CATS.map(c => c.total),
                   backgroundColor: CATS.map(c => c.colour),
                   borderColor: '#131826', borderWidth: 2 }],
    },
    options: {
      responsive: true, maintainAspectRatio: false, cutout: '62%',
      plugins: { legend: { position: 'right',
                 labels: { color: TICK, boxWidth: 12, padding: 10, font: { size: 12 } } } },
    },
  });
}
</script>
{% endblock %}