Commodities suggestion - relative change percentage

[jenicek]

Hi, I really like the "Commodities" page, but I believe that absolute price values are not that useful. I would like to suggest to integrate a relative change percentage, which would show a percentage change w.r.t. the first row. This feature, together with the implicit ability to filter dates, would make a powerful tool for a quick market summary. If compactness is a priority, the change could be displayed the same way as profit / loss in a Balance sheet.

Separate column	Inline

I think it is easier to interpret the relative change than absolute values, so I can even imagine having the absolute value in the first row and the remaining rows being relative change only (most compact).

P.S. I'm just discovering the whole ecosystem around beancount and fava and I want to really thank you for that, both are great tools.
Tomas

[yagebu]

I like this idea. A PR would be welcome :)

[jenicek]

Glad you like it, I can prepare the PR or patch. Do you have a preference about the style? The two styles I provided seem both usable and consistent with the rest of the application to me, but I am not a designer :)

[yagebu]

Either works for me, maybe a slight tendency towards the separate column (make for easier sorting and styling)

[jenicek]

Either works for me, maybe a slight tendency towards the separate column (make for easier sorting and styling)

The sorting is a good point, but I believe the sorting order would be the same as when sorting by Price

[jenicek]

If you will still prefer separate columns, I've prepared the patch. I had to sort by the Price column (data-sort="num"), as the Change column containing percentages gets sorted as strings.

diff --git a/frontend/css/base.css b/frontend/css/base.css
index e95ad66a..a742f206 100644
--- a/frontend/css/base.css
+++ b/frontend/css/base.css
@@ -73,7 +73,9 @@ th {
 }
 
 td.num,
-th.num {
+td.pct,
+th.num,
+th.pct {
   width: 7em;
   font-family: var(--font-family-monospaced);
   color: var(--text-color);
diff --git a/src/fava/templates/commodities.html b/src/fava/templates/commodities.html
index 7e585af2..a5e9b9b8 100644
--- a/src/fava/templates/commodities.html
+++ b/src/fava/templates/commodities.html
@@ -9,12 +9,14 @@
     <thead>
       <th data-sort="string" data-sort-default="desc" data-order="asc">{{ _('Date') }}</th>
       <th data-sort="num">{{ _('Price') }}</th>
+      <th data-sort="num">{{ _('Change') }}</th>
     </thead>
     <tbody>
       {% for price in prices %}
       <tr>
         <td>{{ price.0 }}</td>
         <td class="num">{{ price.1|format_currency(commodity_pair.1) }}</td>
+        <td class="pct">{% if loop.index != 1 %}{{ (((price.1|abs)-(prices.0.1|abs))/prices.0.1*100)|round(1) }} %{% endif %}</td>
       </tr>
       {% endfor %}
     </tbody>