starred/WYGIWYH
1
0
Fork 0
mirror of https://github.com/eitchtee/WYGIWYH.git synced 2026-07-10 23:02:47 +02:00
Code Issues 14 Packages Projects Releases 10 Wiki Activity

feat: add charts to net worth

Browse Source
This commit is contained in:
Herculino Trotta
2024-10-14 11:07:22 -03:00
parent bd03eaa7a3
commit 62bb256c7d
1 changed files with 110 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/net_worth/net_worth.html
+89 -146
View File
@@ -86,174 +86,117 @@
</div> </div>
</div> </div>
<div class="col-12 col-xl-7 h-100"> <div class="col-12 col-xl-7 h-100">
<canvas id="historicalNetWorthChart"></canvas> <canvas id="currencyBalanceChart"></canvas>
<canvas id="accountBalanceChart"></canvas>
</div>
</div> </div>
</div> </div>
<script> <script>
var historicalData = {{ historical_data_json|safe }}; var chartData = JSON.parse('{{ chart_data_currency_json|safe }}');
var currencies = [ var currencies = {{ currencies|safe }};
{% for currency in currencies %}
"{{ currency.code }}",
{% endfor %}
];
var labels = Object.keys(historicalData); var ctx = document.getElementById('currencyBalanceChart').getContext('2d');
var datasets = currencies.map((currency, index) => ({
label: currency,
data: labels.map(date => parseFloat(historicalData[date][currency])),
color: `hsl(${index * 360 / currencies.length}, 70%, 50%)`,
yAxisID: `y-axis-${index}`,
}));
var ctx = document.getElementById('historicalNetWorthChart').getContext('2d');
new Chart(ctx, { new Chart(ctx, {
type: 'line', type: 'line',
data: { data: chartData,
labels: labels,
datasets: datasets
},
options: { options: {
responsive: true, responsive: true,
interaction: { interaction: {
mode: 'index', mode: 'index',
intersect: false, intersect: false,
}, },
scales: {
x: {
type: 'category',
title: {
display: true,
text: 'Date'
}
},
...currencies.reduce((acc, currency, index) => {
acc[`y-axis-${index}`] = {
type: 'linear',
beginAtZero: true,
grace: '50%',
display: true,
grid: {
drawOnChartArea: false,
},
ticks: {
display: false // This hides the tick labels (numbers)
},
};
return acc;
}, {})
},
plugins: { plugins: {
title: { title: {
display: true, display: true,
text: 'Historical Net Worth by Currency' text: '{% translate 'Evolution by currency' %}'
}, },
tooltip: { tooltip: {
mode: 'index', mode: 'index',
intersect: false, intersect: false
} }
},
scales: {
x: {
display: true,
title: {
display: false,
}
},
...Object.fromEntries(currencies.map((currency, i) => [
`y${i}`,
{
beginAtZero: true,
type: 'linear',
display: true,
grid: {
drawOnChartArea: i === 0,
},
ticks: {
display: false
},
border: {
display: false
}
}
]))
} }
} }
}); });
</script> </script>
</div>
</div> <script>
{#<canvas id="chart" width="500" height="300"></canvas>#} var chartData = JSON.parse('{{ chart_data_accounts_json|safe }}');
{##} var accounts = {{ accounts|safe }};
{#<script>#}
{# let ctx = document.getElementById("chart").getContext("2d");#} var ctx = document.getElementById('accountBalanceChart').getContext('2d');
{##} new Chart(ctx, {
{#let chart = new Chart(ctx, {#} type: 'line',
{# type: 'line',#} data: chartData,
{# responsive: true,#} options: {
{# data: {#} responsive: true,
{# labels: ["2020/01", "2020/02", "2020/03", "2020/04", "2020/05"],#} interaction: {
{# datasets: [#} mode: 'index',
{# {#} intersect: false,
{# label: "Gross volume ($)",#} },
{# data: [0.0, 0.8457, 1, 0.5],#} stacked: false,
{# yAxisID: 'y1',#} plugins: {
{# },#} title: {
{# {#} display: true,
{# label: "Gross volume ($) 2",#} text: '{% translate "Evolution by account" %}'
{# data: [85000, 89000, 96000, 100000],#} },
{# yAxisID: 'y2',#} tooltip: {
{# }#} mode: 'index',
{# ]#} intersect: false
{# },#} }
{# options: {#} },
{# title: {#} scales: {
{# text: "Gross Volume in 2020",#} x: {
{# display: true#} display: true,
{# },#} title: {
{# responsive: true,#} display: false,
{# interaction: {#} }
{# mode: 'index',#} },
{# intersect: false,#} ...Object.fromEntries(accounts.map((account, i) => [
{# scales: {#} `y-axis-${i}`,
{# y1: {#} {
{# ticks: {#} type: 'linear',
{# display: false // This hides the y-axis labels#} display: true,
{# }#} position: i % 2 === 0 ? 'left' : 'right',
{# }#} grid: {
{# }#} drawOnChartArea: i === 0,
{# },#} },
{# },#} ticks: {
{# scales: {#} display: false
{# x: {#} },
{# display: true,#} border: {
{# ticks: {#} display: false
{# display: false // This hides the y-axis labels#} }
{# }#} }
{# },#} ]))
{# y1: {#} }
{# display: true,#} }
{# type: 'logarithmic',#} });
{# ticks: {#} </script>
{# display: false // This hides the y-axis labels#}
{# }#}
{# },#}
{# y2: {#}
{# type: 'logarithmic',#}
{# display: false,#}
{# position: 'left',#}
{# ticks: {#}
{# display: false,#}
{# },#}
{##}
{# // grid line settings#}
{# grid: {#}
{# display: false,#}
{# drawOnChartArea: false, // only want the grid lines for one axis to show up#}
{# }},}#}
{#});#}
{#new Chart(ctx, {#}
{# type: 'line', // e.g., 'line', 'bar', etc.#}
{# data: {#}
{# labels: ["2020/01", "2020/02", "2020/03", "2020/04", "2020/05"],#}
{# datasets: [#}
{# {#}
{# label: "Gross volume ($)",#}
{# data: [0.0, 0.8457, 1, 0.5],#}
{# yAxisID: 'y1',#}
{# },#}
{# {#}
{# label: "Gross volume ($) 2",#}
{# data: [85000, 89000, 96000, 100000],#}
{# yAxisID: 'y2',#}
{# }#}
{# ]#}
{# },#}
{# options: {#}
{# scales: {#}
{# y: {#}
{# ticks: {#}
{# display: false // This hides the y-axis labels#}
{# }#}
{# }#}
{# }#}
{# }#}
{#});#}
{#</script>#}
{% endblock %} {% endblock %}