starred/WYGIWYH
1
0
Fork 0
mirror of https://github.com/eitchtee/WYGIWYH.git synced 2026-07-06 21:05:15 +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
+110 -167
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>
<script>
var historicalData = {{ historical_data_json|safe }};
var currencies = [
{% for currency in currencies %}
"{{ currency.code }}",
{% endfor %}
];
var labels = Object.keys(historicalData);
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, {
type: 'line',
data: {
labels: labels,
datasets: datasets
},
options: {
responsive: true,
interaction: {
mode: 'index',
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: {
title: {
display: true,
text: 'Historical Net Worth by Currency'
},
tooltip: {
mode: 'index',
intersect: false,
}
}
}
});
</script>
</div>
</div> </div>
{#<canvas id="chart" width="500" height="300"></canvas>#}
{##} <script>
{#<script>#} var chartData = JSON.parse('{{ chart_data_currency_json|safe }}');
{# let ctx = document.getElementById("chart").getContext("2d");#} var currencies = {{ currencies|safe }};
{##}
{#let chart = new Chart(ctx, {#} var ctx = document.getElementById('currencyBalanceChart').getContext('2d');
{# type: 'line',#} new Chart(ctx, {
{# responsive: true,#} type: 'line',
{# data: {#} data: chartData,
{# labels: ["2020/01", "2020/02", "2020/03", "2020/04", "2020/05"],#} options: {
{# datasets: [#} responsive: true,
{# {#} interaction: {
{# label: "Gross volume ($)",#} mode: 'index',
{# data: [0.0, 0.8457, 1, 0.5],#} intersect: false,
{# yAxisID: 'y1',#} },
{# },#} plugins: {
{# {#} title: {
{# label: "Gross volume ($) 2",#} display: true,
{# data: [85000, 89000, 96000, 100000],#} text: '{% translate 'Evolution by currency' %}'
{# yAxisID: 'y2',#} },
{# }#} tooltip: {
{# ]#} mode: 'index',
{# },#} intersect: false
{# options: {#} }
{# title: {#} },
{# text: "Gross Volume in 2020",#} scales: {
{# display: true#} x: {
{# },#} display: true,
{# responsive: true,#} title: {
{# interaction: {#} display: false,
{# mode: 'index',#} }
{# intersect: false,#} },
{# scales: {#} ...Object.fromEntries(currencies.map((currency, i) => [
{# y1: {#} `y${i}`,
{# ticks: {#} {
{# display: false // This hides the y-axis labels#} beginAtZero: true,
{# }#} type: 'linear',
{# }#} display: true,
{# }#} grid: {
{# },#} drawOnChartArea: i === 0,
{# },#} },
{# scales: {#} ticks: {
{# x: {#} display: false
{# display: true,#} },
{# ticks: {#} border: {
{# display: false // This hides the y-axis labels#} display: false
{# }#} }
{# },#} }
{# y1: {#} ]))
{# display: true,#} }
{# type: 'logarithmic',#} }
{# ticks: {#} });
{# display: false // This hides the y-axis labels#} </script>
{# }#}
{# },#} <script>
{# y2: {#} var chartData = JSON.parse('{{ chart_data_accounts_json|safe }}');
{# type: 'logarithmic',#} var accounts = {{ accounts|safe }};
{# display: false,#}
{# position: 'left',#} var ctx = document.getElementById('accountBalanceChart').getContext('2d');
{# ticks: {#} new Chart(ctx, {
{# display: false,#} type: 'line',
{# },#} data: chartData,
{##} options: {
{# // grid line settings#} responsive: true,
{# grid: {#} interaction: {
{# display: false,#} mode: 'index',
{# drawOnChartArea: false, // only want the grid lines for one axis to show up#} intersect: false,
{# }},}#} },
{#});#} stacked: false,
{#new Chart(ctx, {#} plugins: {
{# type: 'line', // e.g., 'line', 'bar', etc.#} title: {
{# data: {#} display: true,
{# labels: ["2020/01", "2020/02", "2020/03", "2020/04", "2020/05"],#} text: '{% translate "Evolution by account" %}'
{# datasets: [#} },
{# {#} tooltip: {
{# label: "Gross volume ($)",#} mode: 'index',
{# data: [0.0, 0.8457, 1, 0.5],#} intersect: false
{# yAxisID: 'y1',#} }
{# },#} },
{# {#} scales: {
{# label: "Gross volume ($) 2",#} x: {
{# data: [85000, 89000, 96000, 100000],#} display: true,
{# yAxisID: 'y2',#} title: {
{# }#} display: false,
{# ]#} }
{# },#} },
{# options: {#} ...Object.fromEntries(accounts.map((account, i) => [
{# scales: {#} `y-axis-${i}`,
{# y: {#} {
{# ticks: {#} type: 'linear',
{# display: false // This hides the y-axis labels#} display: true,
{# }#} position: i % 2 === 0 ? 'left' : 'right',
{# }#} grid: {
{# }#} drawOnChartArea: i === 0,
{# }#} },
{#});#} ticks: {
{#</script>#} display: false
},
border: {
display: false
}
}
]))
}
}
});
</script>
{% endblock %} {% endblock %}