Repository: beancount/fava

Issue:
Show balance difference in journal view
The journal view (global or per account) does show both the balance as written in the directive, as well as the accumulated amount from transactions, when it doesn't match. But the difference between these two is only shown in the errors view.
To save the back-and-forth between the views (or having to calculate the value manually), it'd be nice if the difference could be shown right in the journal view.

Options could be

* A tooltip when hovering the row
* Inline, like in the error message: "Assets:Foo accumulated 10 EUR (2 EUR too much)"

Discussion:

Patch:
diff --git a/frontend/css/journal-table.css b/frontend/css/journal-table.css
index 0b4e3358..06620439 100644
--- a/frontend/css/journal-table.css
+++ b/frontend/css/journal-table.css
@@ -116,8 +116,10 @@
   cursor: pointer;
 }
 
+/* There's three number columns (units, cost, price).
+ * They should add about to about half of the width */
 .journal p > .num {
-  width: 9rem;
+  width: min(calc(15%), 20rem);
   border-left: 1px solid var(--table-border);
 }
 
diff --git a/src/fava/templates/_journal_table.html b/src/fava/templates/_journal_table.html
index 030cb494..01a42bc8 100644
--- a/src/fava/templates/_journal_table.html
+++ b/src/fava/templates/_journal_table.html
@@ -48,13 +48,9 @@
         <span class="datecell" data-sort="num" data-sort-name="date" data-order="asc">{{ _('Date') }}</span>
         <span class="flag" data-sort="string" data-sort-name="flag">{{ _('F') }}</span>
         <span class="description" data-sort="string" data-sort-name="narration">{{ _('Payee/Narration') }}</span>
-        <span class="num">{{ _('Position') }}</span>
-        <span class="num">{{ _('Price') }}</span>
-        <span class="num">{{ _('Cost') }}</span>
-        {% if show_change_and_balance %}
-        <span class="num">{{ _('Change') }}</span>
-        <span class="num">{{ _('Balance') }}</span>
-        {% endif %}
+        <span class="num">{{ _('Units') }}</span>
+        <span class="cost num">{{ _('Cost') }}{% if show_change_and_balance %} / {{ _('Change') }}{% endif %}</span>
+        <span class="num">{{ _('Price') }}{% if show_change_and_balance %} / {{ _('Balance') }}{% endif %}</span>
         </p>
     </li>
 {% for entry in entries %}
@@ -111,11 +107,23 @@
         </span>
         {% if type == 'balance' %}
           {{ commodity_macros.render_amount(ledger, entry.amount, 'num bal' + (' pending' if entry.diff_amount else '')) }}
+            {% if entry.diff_amount %}
+              <span class="change num bal pending">
+              {{ commodity_macros.render_num(ledger, entry.diff_amount.currency, entry.diff_amount.number) }}
+              </span>
+            {% else %}
+              <span class="change num"></span>
+            {% endif %}
+            {% if not show_change_and_balance %}
+              <span class="change num"></span>
+            {% endif %}
         {% endif %}
         {% if show_change_and_balance %}
-          <span class="change num">
-          {%- for currency, number in change.items() %}{{ commodity_macros.render_num(ledger, currency, number) }}<br>{% endfor -%}
-          </span>
+          {% if type == 'transaction' %}
+            <span class="change num">
+            {%- for currency, number in change.items() %}{{ commodity_macros.render_num(ledger, currency, number) }}<br>{% endfor -%}
+            </span>
+          {% endif %}
           <span class="num">
           {%- for currency, number in balance.items() %}{{ commodity_macros.render_num(ledger, currency, number) }}<br>{% endfor -%}
           </span>
@@ -133,14 +141,10 @@
                 {# We want the output these amounts with the same precision as in the input file.
                    For computed values this might give a lot of digits, so format the price using the DisplayContext for now.#}
                 <span class="num">{{ posting.units or '' }}</span>
-                {{ commodity_macros.render_amount(ledger, posting.price) }}
                 <span class="num">{{ posting.cost.number }} {{ posting.cost.currency }}
                     {{- ', {}'.format(posting.cost.date) if posting.cost.date else '' }}
                     {{- ', "{}"'.format(posting.cost.label) if posting.cost.label else '' }}</span>
-                {% if show_change_and_balance %}
-                <span class="change num"></span>
-                <span class="num"></span>
-                {% endif %}
+                {{ commodity_macros.render_amount(ledger, posting.price) }}
             </p>
             {{ render_metadata(posting.meta|meta_items) }}
         </li>


Test patch:
diff --git a/tests/__snapshots__/test_json_api-test_api-account_report_off_by_one_journal.json b/tests/__snapshots__/test_json_api-test_api-account_report_off_by_one_journal.json
index 47339a66..850b5c55 100644
--- a/tests/__snapshots__/test_json_api-test_api-account_report_off_by_one_journal.json
+++ b/tests/__snapshots__/test_json_api-test_api-account_report_off_by_one_journal.json
@@ -50,5 +50,5 @@
       "type": "bar"
     }
   ],
-  "journal": "<fava-journal>\n<ol class=\"flex-table journal\">\n    <li class=\"head\">\n        <p>\n        <span class=\"datecell\" data-sort=\"num\" data-sort-name=\"date\" data-order=\"asc\">Date</span>\n        <span class=\"flag\" data-sort=\"string\" data-sort-name=\"flag\">F</span>\n        <span class=\"description\" data-sort=\"string\" data-sort-name=\"narration\">Payee/Narration</span>\n        <span class=\"num\">Position</span>\n        <span class=\"num\">Price</span>\n        <span class=\"num\">Cost</span>\n        <span class=\"num\">Change</span>\n        <span class=\"num\">Balance</span>\n        </p>\n    </li>\n    <li class=\"open  \">\n        <p>\n        <span class=\"datecell\" data-sort-value=1><a href=\"#context-ENTRY_HASH\">2022-01-01</a></span>\n        <span class=\"flag\">Open</span>\n        <span class=\"description\">\n            <a href=\"/off-by-one/account/Assets:Commodity/?conversion=at_value&amp;interval=day\">Assets:Commodity</a>\n        </span>\n        <span class=\"indicators\">\n          \n        </span>\n          <span class=\"change num\"></span>\n          <span class=\"num\"></span>\n        </p>\n        \n    </li>\n    <li class=\"open  \">\n        <p>\n        <span class=\"datecell\" data-sort-value=2><a href=\"#context-ENTRY_HASH\">2022-01-01</a></span>\n        <span class=\"flag\">Open</span>\n        <span class=\"description\">\n            <a href=\"/off-by-one/account/Assets:Cash/?conversion=at_value&amp;interval=day\">Assets:Cash</a>\n        </span>\n        <span class=\"indicators\">\n          \n        </span>\n          <span class=\"change num\"></span>\n          <span class=\"num\"></span>\n        </p>\n        \n    </li>\n    <li class=\"transaction  cleared\">\n        <p>\n        <span class=\"datecell\" data-sort-value=3><a href=\"#context-ENTRY_HASH\">2022-01-01</a></span>\n        <span class=\"flag\">*</span>\n        <span class=\"description droptarget\" data-entry=\"ENTRY_HASH\" data-entry-date=\"2022-01-01\" data-account-name=\"Assets:Cash\">\n            <strong class=\"payee\"></strong>Transfer\n            \n        </span>\n        <span class=\"indicators\">\n          \n          <span></span>\n          \n          <span></span>\n          \n        </span>\n          <span class=\"change num\"><span title=\"USD\">100 USD</span><br></span>\n          <span class=\"num\"><span title=\"USD\">100 USD</span><br></span>\n        </p>\n        \n          <ul class=\"postings\">\n        <li>\n            <p>\n                <span class=\"datecell\"></span>\n                <span class=\"flag\"></span>\n                <span class=\"description droptarget\" data-entry=\"ENTRY_HASH\" data-account-name=\"Assets:Cash\" data-entry-date=\"2022-01-01\"><a href=\"/off-by-one/account/Assets:Cash/?conversion=at_value&amp;interval=day\">Assets:Cash</a></span>\n                <span class=\"num\">100 USD</span>\n                <span class=\"num\"></span>\n                <span class=\"num\"> </span>\n                <span class=\"change num\"></span>\n                <span class=\"num\"></span>\n            </p>\n            \n        </li>\n        <li>\n            <p>\n                <span class=\"datecell\"></span>\n                <span class=\"flag\"></span>\n                <span class=\"description droptarget\" data-entry=\"ENTRY_HASH\" data-account-name=\"Income:All\" data-entry-date=\"2022-01-01\"><a href=\"/off-by-one/account/Income:All/?conversion=at_value&amp;interval=day\">Income:All</a></span>\n                <span class=\"num\">-100 USD</span>\n                <span class=\"num\"></span>\n                <span class=\"num\"> </span>\n                <span class=\"change num\"></span>\n                <span class=\"num\"></span>\n            </p>\n            \n        </li>\n        </ul>\n    </li>\n    <li class=\"transaction  cleared\">\n        <p>\n        <span class=\"datecell\" data-sort-value=4><a href=\"#context-ENTRY_HASH\">2022-01-01</a></span>\n        <span class=\"flag\">*</span>\n        <span class=\"description droptarget\" data-entry=\"ENTRY_HASH\" data-entry-date=\"2022-01-01\" data-account-name=\"Assets:Cash\">\n            <strong class=\"payee\"></strong>Buy\n            \n        </span>\n        <span class=\"indicators\">\n          \n          <span></span>\n          \n          <span></span>\n          \n        </span>\n          <span class=\"change num\"><span title=\"USD\">1 USD</span><br></span>\n          <span class=\"num\"><span title=\"USD\">101 USD</span><br></span>\n        </p>\n        \n          <ul class=\"postings\">\n        <li>\n            <p>\n                <span class=\"datecell\"></span>\n                <span class=\"flag\"></span>\n                <span class=\"description droptarget\" data-entry=\"ENTRY_HASH\" data-account-name=\"Assets:Cash\" data-entry-date=\"2022-01-01\"><a href=\"/off-by-one/account/Assets:Cash/?conversion=at_value&amp;interval=day\">Assets:Cash</a></span>\n                <span class=\"num\">-100 USD</span>\n                <span class=\"num\"></span>\n                <span class=\"num\"> </span>\n                <span class=\"change num\"></span>\n                <span class=\"num\"></span>\n            </p>\n            \n        </li>\n        <li>\n            <p>\n                <span class=\"datecell\"></span>\n                <span class=\"flag\"></span>\n                <span class=\"description droptarget\" data-entry=\"ENTRY_HASH\" data-account-name=\"Assets:Commodity\" data-entry-date=\"2022-01-01\"><a href=\"/off-by-one/account/Assets:Commodity/?conversion=at_value&amp;interval=day\">Assets:Commodity</a></span>\n                <span class=\"num\">1 COM</span>\n                <span class=\"num\"></span>\n                <span class=\"num\">100 USD, 2022-01-01</span>\n                <span class=\"change num\"></span>\n                <span class=\"num\"></span>\n            </p>\n            \n        </li>\n        </ul>\n    </li>\n</ol>\n</fava-journal>\n"
+  "journal": "<fava-journal>\n<ol class=\"flex-table journal\">\n    <li class=\"head\">\n        <p>\n        <span class=\"datecell\" data-sort=\"num\" data-sort-name=\"date\" data-order=\"asc\">Date</span>\n        <span class=\"flag\" data-sort=\"string\" data-sort-name=\"flag\">F</span>\n        <span class=\"description\" data-sort=\"string\" data-sort-name=\"narration\">Payee/Narration</span>\n        <span class=\"num\">Units</span>\n        <span class=\"cost num\">Cost / Change</span>\n        <span class=\"num\">Price / Balance</span>\n        </p>\n    </li>\n    <li class=\"open  \">\n        <p>\n        <span class=\"datecell\" data-sort-value=1><a href=\"#context-ENTRY_HASH\">2022-01-01</a></span>\n        <span class=\"flag\">Open</span>\n        <span class=\"description\">\n            <a href=\"/off-by-one/account/Assets:Commodity/?conversion=at_value&amp;interval=day\">Assets:Commodity</a>\n        </span>\n        <span class=\"indicators\">\n          \n        </span>\n          <span class=\"num\"></span>\n        </p>\n        \n    </li>\n    <li class=\"open  \">\n        <p>\n        <span class=\"datecell\" data-sort-value=2><a href=\"#context-ENTRY_HASH\">2022-01-01</a></span>\n        <span class=\"flag\">Open</span>\n        <span class=\"description\">\n            <a href=\"/off-by-one/account/Assets:Cash/?conversion=at_value&amp;interval=day\">Assets:Cash</a>\n        </span>\n        <span class=\"indicators\">\n          \n        </span>\n          <span class=\"num\"></span>\n        </p>\n        \n    </li>\n    <li class=\"transaction  cleared\">\n        <p>\n        <span class=\"datecell\" data-sort-value=3><a href=\"#context-ENTRY_HASH\">2022-01-01</a></span>\n        <span class=\"flag\">*</span>\n        <span class=\"description droptarget\" data-entry=\"ENTRY_HASH\" data-entry-date=\"2022-01-01\" data-account-name=\"Assets:Cash\">\n            <strong class=\"payee\"></strong>Transfer\n            \n        </span>\n        <span class=\"indicators\">\n          \n          <span></span>\n          \n          <span></span>\n          \n        </span>\n            <span class=\"change num\"><span title=\"USD\">100 USD</span><br></span>\n          <span class=\"num\"><span title=\"USD\">100 USD</span><br></span>\n        </p>\n        \n          <ul class=\"postings\">\n        <li>\n            <p>\n                <span class=\"datecell\"></span>\n                <span class=\"flag\"></span>\n                <span class=\"description droptarget\" data-entry=\"ENTRY_HASH\" data-account-name=\"Assets:Cash\" data-entry-date=\"2022-01-01\"><a href=\"/off-by-one/account/Assets:Cash/?conversion=at_value&amp;interval=day\">Assets:Cash</a></span>\n                <span class=\"num\">100 USD</span>\n                <span class=\"num\"> </span>\n                <span class=\"num\"></span>\n            </p>\n            \n        </li>\n        <li>\n            <p>\n                <span class=\"datecell\"></span>\n                <span class=\"flag\"></span>\n                <span class=\"description droptarget\" data-entry=\"ENTRY_HASH\" data-account-name=\"Income:All\" data-entry-date=\"2022-01-01\"><a href=\"/off-by-one/account/Income:All/?conversion=at_value&amp;interval=day\">Income:All</a></span>\n                <span class=\"num\">-100 USD</span>\n                <span class=\"num\"> </span>\n                <span class=\"num\"></span>\n            </p>\n            \n        </li>\n        </ul>\n    </li>\n    <li class=\"transaction  cleared\">\n        <p>\n        <span class=\"datecell\" data-sort-value=4><a href=\"#context-ENTRY_HASH\">2022-01-01</a></span>\n        <span class=\"flag\">*</span>\n        <span class=\"description droptarget\" data-entry=\"ENTRY_HASH\" data-entry-date=\"2022-01-01\" data-account-name=\"Assets:Cash\">\n            <strong class=\"payee\"></strong>Buy\n            \n        </span>\n        <span class=\"indicators\">\n          \n          <span></span>\n          \n          <span></span>\n          \n        </span>\n            <span class=\"change num\"><span title=\"USD\">1 USD</span><br></span>\n          <span class=\"num\"><span title=\"USD\">101 USD</span><br></span>\n        </p>\n        \n          <ul class=\"postings\">\n        <li>\n            <p>\n                <span class=\"datecell\"></span>\n                <span class=\"flag\"></span>\n                <span class=\"description droptarget\" data-entry=\"ENTRY_HASH\" data-account-name=\"Assets:Cash\" data-entry-date=\"2022-01-01\"><a href=\"/off-by-one/account/Assets:Cash/?conversion=at_value&amp;interval=day\">Assets:Cash</a></span>\n                <span class=\"num\">-100 USD</span>\n                <span class=\"num\"> </span>\n                <span class=\"num\"></span>\n            </p>\n            \n        </li>\n        <li>\n            <p>\n                <span class=\"datecell\"></span>\n                <span class=\"flag\"></span>\n                <span class=\"description droptarget\" data-entry=\"ENTRY_HASH\" data-account-name=\"Assets:Commodity\" data-entry-date=\"2022-01-01\"><a href=\"/off-by-one/account/Assets:Commodity/?conversion=at_value&amp;interval=day\">Assets:Commodity</a></span>\n                <span class=\"num\">1 COM</span>\n                <span class=\"num\">100 USD, 2022-01-01</span>\n                <span class=\"num\"></span>\n            </p>\n            \n        </li>\n        </ul>\n    </li>\n</ol>\n</fava-journal>\n"
 }
\ No newline at end of file