mirror of
https://github.com/eitchtee/WYGIWYH.git
synced 2026-04-23 17:18:44 +02:00
feat: initial work for DCA tool
This commit is contained in:
Herculino Trotta
228
app/templates/dca/strategy_detail.html
Normal file
228
app/templates/dca/strategy_detail.html
Normal file
@@ -0,0 +1,228 @@
|
||||
{% extends "layouts/base.html" %}
|
||||
{% load i18n %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<h1>{{ strategy.name }}</h1>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">{% trans "Total Invested" %}</h5>
|
||||
{# <p class="card-text">{{ strategy.total_invested }} {{ strategy.payment_currency }}</p>#}
|
||||
<div class="card-text">
|
||||
<c-amount.display
|
||||
:amount="strategy.total_invested"
|
||||
:prefix="strategy.payment_currency.prefix"
|
||||
:suffix="strategy.payment_currency.suffix"
|
||||
:decimal_places="strategy.payment_currency.decimal_places"></c-amount.display>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">{% trans "Total Received" %}</h5>
|
||||
<div class="card-text">
|
||||
<c-amount.display
|
||||
:amount="strategy.total_received"
|
||||
:prefix="strategy.target_currency.prefix"
|
||||
:suffix="strategy.target_currency.suffix"
|
||||
:decimal_places="strategy.target_currency.decimal_places"></c-amount.display>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">{% trans "Average Entry Price" %}</h5>
|
||||
<div class="card-text">
|
||||
<c-amount.display
|
||||
:amount="strategy.average_entry_price"
|
||||
:prefix="strategy.payment_currency.prefix"
|
||||
:suffix="strategy.payment_currency.suffix"
|
||||
:decimal_places="strategy.payment_currency.decimal_places"></c-amount.display>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">{% trans "Current Total Value" %}</h5>
|
||||
<div class="card-text">
|
||||
<c-amount.display
|
||||
:amount="strategy.current_total_value"
|
||||
:prefix="strategy.payment_currency.prefix"
|
||||
:suffix="strategy.payment_currency.suffix"
|
||||
:decimal_places="strategy.payment_currency.decimal_places"></c-amount.display>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">{% trans "Total P/L" %}</h5>
|
||||
<div class="card-text {% if strategy.total_profit_loss >= 0 %}text-success{% else %}text-danger{% endif %}">
|
||||
<c-amount.display
|
||||
:amount="strategy.total_profit_loss"
|
||||
:prefix="strategy.payment_currency.prefix"
|
||||
:suffix="strategy.payment_currency.suffix"
|
||||
:decimal_places="strategy.payment_currency.decimal_places">
|
||||
</c-amount.display>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">{% trans "Total % P/L" %}</h5>
|
||||
<div class="card-text {% if strategy.total_profit_loss >= 0 %}text-success{% else %}text-danger{% endif %}">
|
||||
{{ strategy.total_profit_loss_percentage|floatformat:2 }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Monthly Chart -->
|
||||
<div class="row mt-4">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<canvas id="monthlyChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Entries Table -->
|
||||
<div class="row mt-4">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">{% trans "Entries" %}</h5>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover text-nowrap">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{% trans "Date" %}</th>
|
||||
<th>{% trans "Amount Paid" %}</th>
|
||||
<th>{% trans "Amount Received" %}</th>
|
||||
<th>{% trans "Current Value" %}</th>
|
||||
<th>{% trans "P/L" %}</th>
|
||||
<th>{% trans "Actions" %}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for entry in entries %}
|
||||
<tr>
|
||||
<td>{{ entry.date|date:"SHORT_DATE_FORMAT" }}</td>
|
||||
<td><c-amount.display
|
||||
:amount="entry.amount_paid"
|
||||
:prefix="entry.strategy.payment_currency.prefix"
|
||||
:suffix="entry.strategy.payment_currency.suffix"
|
||||
:decimal_places="entry.strategy.payment_currency.decimal_places"></c-amount.display></td>
|
||||
<td><c-amount.display
|
||||
:amount="entry.amount_received"
|
||||
:prefix="entry.strategy.target_currency.prefix"
|
||||
:suffix="entry.strategy.target_currency.suffix"
|
||||
:decimal_places="entry.strategy.target_currency.decimal_places"></c-amount.display></td>
|
||||
<td><c-amount.display
|
||||
:amount="entry.current_value"
|
||||
:prefix="entry.strategy.payment_currency.prefix"
|
||||
:suffix="entry.strategy.payment_currency.suffix"
|
||||
:decimal_places="entry.strategy.payment_currency.decimal_places"></c-amount.display></td>
|
||||
<td>
|
||||
{% if entry.profit_loss_percentage > 0 %}
|
||||
<span class="badge text-bg-success"><i class="fa-solid fa-up-long me-2"></i>{{ entry.profit_loss_percentage|floatformat:"2g" }}%</span>
|
||||
{% elif entry.profit_loss_percentage < 0 %}
|
||||
<span class="badge text-bg-danger"><i class="fa-solid fa-down-long me-2"></i>{{ entry.profit_loss_percentage|floatformat:"2g" }}%</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<!-- Add action buttons -->
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-4">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">{% trans "Performance Over Time" %}</h5>
|
||||
<canvas id="performanceChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js_body %}
|
||||
<script>
|
||||
// Add Chart.js initialization for performance visualization
|
||||
const perfomancectx = document.getElementById('performanceChart').getContext('2d');
|
||||
const performanceChart = new Chart(perfomancectx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [{% for entry in entries_data %}'{{ entry.entry.date|date:"Y-m-d" }}'{% if not forloop.last %}, {% endif %}{% endfor %}],
|
||||
datasets: [{
|
||||
label: '{% trans "P/L %" %}',
|
||||
data: [{% for entry in entries_data %}{{ entry.profit_loss_percentage|floatformat:2 }}{% if not forloop.last %}, {% endif %}{% endfor %}],
|
||||
borderColor: 'rgb(75, 192, 192)',
|
||||
tension: 0.1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
// Add Chart.js initialization for performance visualization
|
||||
const ctx = document.getElementById('monthlyChart').getContext('2d');
|
||||
const chart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [{% for entry in monthly_data %}'{{ entry.date|date:"Y-m-d" }}'{% if not forloop.last %}, {% endif %}{% endfor %}],
|
||||
datasets: [{
|
||||
label: '{% trans "P/L %" %}',
|
||||
data: [{% for entry in monthly_data %}{{ entry.total_paid|floatformat:2 }}{% if not forloop.last %}, {% endif %}{% endfor %}],
|
||||
borderColor: 'rgb(75, 192, 192)',
|
||||
tension: 0.1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user