<!
DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Mehrere Portfolios – Gesamtvermögen</title>
<script src="[Link]
script>
<style>
body { font-family: sans-serif; margin: 20px; }
input, button { margin-top: 10px; margin-right: 10px; }
.chart { height: 300px; margin-top: 40px; }
</style>
</head>
<body>
<h2>📥 CSV hochladen</h2>
<p>Format: <code>Datum;Betrag</code></p>
<div>
<strong>Wertapapiere:</strong>
<input type="file" id="csvA" accept=".csv">
<button onclick="parseCSV('A')">Laden</button>
</div>
<div>
<strong>Bankkonto:</strong>
<input type="file" id="csvB" accept=".csv">
<button onclick="parseCSV('B')">Laden</button>
</div>
<h2>📈 Gesamtvermögen</h2>
<div id="chartTotal" class="chart"></div>
<h2>📊 Portfolio Assets/Wertpapiere</h2>
<div id="chartA" class="chart"></div>
<h2>📊 Portfolio Bankkonto</h2>
<div id="chartB" class="chart"></div>
<script>
const dataA = [], dataB = [];
const chartA = [Link]([Link]('chartA'));
const chartB = [Link]([Link]('chartB'));
const chartTotal = [Link]([Link]('chartTotal'));
function initChart(chart, title) {
[Link]({
title: { text: title },
tooltip: { trigger: 'axis' },
xAxis: {
type: 'category',
boundaryGap: false,
},
yAxis: { type: 'value' },
series: [{
name: title,
type: 'line',
smooth: true,
data: []
}]
});
}
initChart(chartA, 'Portfolio A');
initChart(chartB, 'Portfolio B');
initChart(chartTotal, 'Gesamtvermögen');
function parseCSV(portfolio) {
const fileInput = [Link](`csv${portfolio}`);
const file = [Link][0];
if (!file) {
alert(`Bitte CSV für Portfolio ${portfolio} wählen.`);
return;
}
const reader = new FileReader();
[Link] = function(e) {
const lines = [Link](/\r?\n/);
const parsed = [];
for (let i = 1; i < [Link]; i++) {
const line = lines[i].trim();
if (!line) continue;
const [datum, betragRaw] = [Link](';');
const betrag = parseFloat([Link](',', '.'));
const date = new Date(datum);
if (isNaN(date) || isNaN(betrag)) continue;
const dateStr = [Link]('sv-SE').replace(' ', '\n');
[Link]([dateStr, betrag]);
}
[Link]((a, b) => new Date(a[0]) - new Date(b[0]));
// Kumulieren
let sum = 0;
const cumulative = [Link](([zeit, wert]) => {
sum += wert;
return [zeit, sum];
});
if (portfolio === 'A') {
[Link] = 0;
[Link](...cumulative);
updateChart(chartA, dataA);
} else {
[Link] = 0;
[Link](...cumulative);
updateChart(chartB, dataB);
}
updateTotalChart();
};
[Link](file, 'UTF-8');
}
function updateChart(chart, data) {
[Link]({
xAxis: { data: [Link](d => d[0]) },
series: [{ data }]
});
}
function updateTotalChart() {
// Beide Zeitachsen zusammenführen
const allDates = new Set([...dataA, ...dataB].map(d => d[0]));
const sortedDates = [Link](allDates).sort((a, b) => new Date(a) - new
Date(b));
const totalData = [];
let i = 0, j = 0;
let lastA = 0, lastB = 0;
for (const date of sortedDates) {
while (i < [Link] && dataA[i][0] <= date) {
lastA = dataA[i][1]; i++;
}
while (j < [Link] && dataB[j][0] <= date) {
lastB = dataB[j][1]; j++;
}
[Link]([date, lastA + lastB]);
}
[Link]({
xAxis: { data: [Link](d => d[0]) },
series: [{ data: totalData }]
});
}
function addManualEntry() {
const dateInput = [Link]('inputDate').value;
const amountInput =
parseFloat([Link]('inputAmount').value);
const portfolio = [Link]('inputPortfolio').value;
if (!dateInput || isNaN(amountInput)) {
alert("Bitte gültige Werte eingeben.");
return;
}
const date = new Date(dateInput);
const dateStr = [Link]('sv-SE').replace(' ', '\n');
const targetData = (portfolio === 'A') ? dataA : dataB;
// Neue Zeile einfügen und sortieren
[Link]([dateStr, 0]); // Temporär 0
[Link]((a, b) => new Date(a[0]) - new Date(b[0]));
// Kumulieren neu berechnen
let sum = 0;
for (let i = 0; i < [Link]; i++) {
const d = targetData[i][0];
const val = (d === dateStr && targetData[i][1] === 0) ? amountInput :
getDelta(i, targetData);
sum += val;
targetData[i][1] = sum;
}
updateChart(portfolio === 'A' ? chartA : chartB, targetData);
updateTotalChart();
// Formular zurücksetzen
[Link]('inputDate').value = '';
[Link]('inputAmount').value = '';
}
function getDelta(index, data) {
if (index === 0) return data[0][1];
return data[index][1] - data[index - 1][1];
}
</script>
</body>
</html>