edpibu/nummi
1
Fork 0
Code Issues 4 Releases Activity

Improve history plot with empty segments

Browse source
This commit is contained in:
Edgar P. Burkhart 2023-12-30 10:10:53 +01:00
parent 55923e7709
commit ee4e6b7ceb
Signed by: edpibu
GPG key ID: 9833D3C5A25BD227
3 changed files with 50 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

90
nummi/history/templates/history/plot.html
View file

@ -21,52 +21,54 @@
{% spaceless %}
{% for y in history.years reversed %}
{% for date in y.d reversed %}
{% if date %}
<tr>
<td class="icon">
<span class="ri-{% if date.sum > 0 %}arrow-up-s-line green{% elif date.sum < 0 %}arrow-down-s-line red{% endif %}"></span>
</td>
<th class="date" scope="row">
{% if date.has_transactions %}
{% if account %}
<a href="{% url "account_transaction_month" account=account.pk year=date.month.year month=date.month.month %}">{{ date.month|date:"Y-m" }}</a>
{% elif category %}
<a href="{% url "category_transaction_month" category=category.pk year=date.month.year month=date.month.month %}">{{ date.month|date:"Y-m" }}</a>
{% ifchanged %}
{% if date %}
<tr {% if not date.month.month|divisibleby:"2" %}class="even"{% endif %}>
<td class="icon">
<span class="ri-{% if date.sum > 0 %}arrow-up-s-line green{% elif date.sum < 0 %}arrow-down-s-line red{% endif %}"></span>
</td>
<th class="date" scope="row">
{% if date.has_transactions %}
{% if account %}
<a href="{% url "account_transaction_month" account=account.pk year=date.month.year month=date.month.month %}">{{ date.month|date:"Y-m" }}</a>
{% elif category %}
<a href="{% url "category_transaction_month" category=category.pk year=date.month.year month=date.month.month %}">{{ date.month|date:"Y-m" }}</a>
{% else %}
<a href="{% url "transaction_month" year=date.month.year month=date.month.month %}">{{ date.month|date:"Y-m" }}</a>
{% endif %}
{% else %}
<a href="{% url "transaction_month" year=date.month.year month=date.month.month %}">{{ date.month|date:"Y-m" }}</a>
{{ date.month|date:"Y-m" }}
{% endif %}
{% else %}
{{ date.month|date:"Y-m" }}
{% endif %}
</th>
<td class="value">{{ date.sum_m|pmrvalue }}</td>
<td class="bar m">
{% if date.sum_m %}
<div style="width: {% widthratio date.sum_m history.max -100 %}%"></div>
{% endif %}
{% if date.sum < 0 %}
<div class="tot" style="width:{% widthratio date.sum history.max -100 %}%">
<span>{{ date.sum|pmrvalue }}</span>
</div>
{% endif %}
</td>
<td class="bar p">
{% if date.sum_p %}
<div style="width: {% widthratio date.sum_p history.max 100 %}%"></div>
{% endif %}
{% if date.sum > 0 %}
<div class="tot" style="width:{% widthratio date.sum history.max 100 %}%">
<span>{{ date.sum|pmrvalue }}</span>
</div>
{% endif %}
</td>
<td class="value">{{ date.sum_p|pmrvalue }}</td>
</tr>
{% else %}
<tr class="empty">
<td colspan="6" class="empty"></td>
</tr>
{% endif %}
</th>
<td class="value">{{ date.sum_m|pmrvalue }}</td>
<td class="bar m">
{% if date.sum_m %}
<div style="width: {% widthratio date.sum_m history.max -100 %}%"></div>
{% endif %}
{% if date.sum < 0 %}
<div class="tot" style="width:{% widthratio date.sum history.max -100 %}%">
<span>{{ date.sum|pmrvalue }}</span>
</div>
{% endif %}
</td>
<td class="bar p">
{% if date.sum_p %}
<div style="width: {% widthratio date.sum_p history.max 100 %}%"></div>
{% endif %}
{% if date.sum > 0 %}
<div class="tot" style="width:{% widthratio date.sum history.max 100 %}%">
<span>{{ date.sum|pmrvalue }}</span>
</div>
{% endif %}
</td>
<td class="value">{{ date.sum_p|pmrvalue }}</td>
</tr>
{% else %}
<tr class="empty">
<td colspan="6" class="empty"></td>
</tr>
{% endif %}
{% endifchanged %}
{% endfor %}
{% endfor %}
{% endspaceless %}

3
nummi/main/static/main/css/plot.css
View file

@ -66,6 +66,9 @@ table.full-width col.bar {
.plot tr.empty {
height: 0.5rem;
}
.plot tr.even {
background: #eeeeff;
}
@media (width < 720px) {
.plot .bar {

2
nummi/main/static/main/css/table.css
View file

@ -25,7 +25,7 @@ tr {
height: 2rem;
line-height: 2rem;
}
tbody tr:nth-of-type(even) {
.table tbody tr:nth-of-type(even) {
background: #eeeeff;
}
td,