updated dashboard
All checks were successful
Deployment / deploy-docker (push) Successful in 20s

This commit is contained in:
Melchior Reimers
2026-01-27 10:19:25 +01:00
parent e71d1a061e
commit 938c345240
2 changed files with 237 additions and 129 deletions

View File

@@ -70,9 +70,39 @@
</select>
</div>
<div class="glass p-8 mb-8">
<h3 class="text-lg font-bold mb-6 text-slate-300">Moving Average: Tradezahlen & Volumen (alle Exchanges)</h3>
<div class="h-96"><canvas id="movingAverageChart"></canvas></div>
<div class="mb-8">
<h3 class="text-lg font-bold mb-6 text-slate-300">Moving Average: Tradezahlen & Volumen je Exchange</h3>
<p class="text-sm text-slate-500 mb-4">Blau = Trades (7-Tage MA), Grün = Volumen (7-Tage MA)</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="glass p-4">
<h4 class="text-md font-bold mb-3 text-sky-400">EIX</h4>
<div class="h-48"><canvas id="maChartEIX"></canvas></div>
</div>
<div class="glass p-4">
<h4 class="text-md font-bold mb-3 text-rose-400">LS (Lang & Schwarz)</h4>
<div class="h-48"><canvas id="maChartLS"></canvas></div>
</div>
<div class="glass p-4">
<h4 class="text-md font-bold mb-3 text-emerald-400">GETTEX</h4>
<div class="h-48"><canvas id="maChartGETTEX"></canvas></div>
</div>
<div class="glass p-4">
<h4 class="text-md font-bold mb-3 text-amber-400">XETRA</h4>
<div class="h-48"><canvas id="maChartXETRA"></canvas></div>
</div>
<div class="glass p-4">
<h4 class="text-md font-bold mb-3 text-violet-400">Frankfurt (FRA)</h4>
<div class="h-48"><canvas id="maChartFRA"></canvas></div>
</div>
<div class="glass p-4">
<h4 class="text-md font-bold mb-3 text-orange-400">Stuttgart (STU)</h4>
<div class="h-48"><canvas id="maChartSTU"></canvas></div>
</div>
<div class="glass p-4">
<h4 class="text-md font-bold mb-3 text-pink-400">Quotrix</h4>
<div class="h-48"><canvas id="maChartQUOTRIX"></canvas></div>
</div>
</div>
</div>
<div class="glass p-8 mb-8">
@@ -242,95 +272,95 @@
return;
}
const canvas = document.getElementById('movingAverageChart');
if (!canvas) {
console.error('Canvas element movingAverageChart not found');
return;
}
const ctx = canvas.getContext('2d');
if (charts.movingAverage) charts.movingAverage.destroy();
const dateIdx = columns.findIndex(c => c.name === 'date' || c.name === 'timestamp');
const exchangeIdx = columns.findIndex(c => c.name === 'exchange');
const countIdx = columns.findIndex(c => c.name === 'trade_count');
const volumeIdx = columns.findIndex(c => c.name === 'volume');
// Alle Daten nach Datum aggregieren (über alle Exchanges summieren)
// Alle Exchanges mit Canvas-IDs definieren
const exchangeGroups = {
'EIX': { exchanges: ['EIX'], canvasId: 'maChartEIX' },
'LS': { exchanges: ['LS'], canvasId: 'maChartLS' },
'GETTEX': { exchanges: ['GETTEX'], canvasId: 'maChartGETTEX' },
'XETRA': { exchanges: ['XETRA'], canvasId: 'maChartXETRA' },
'FRA': { exchanges: ['FRA'], canvasId: 'maChartFRA' },
'STU': { exchanges: ['STU'], canvasId: 'maChartSTU' },
'QUOTRIX': { exchanges: ['QUOTRIX'], canvasId: 'maChartQUOTRIX' }
};
// Alle Daten nach Datum sortieren
const dates = [...new Set(data.map(r => r[dateIdx]))].sort();
// Summiere Trade Count und Volume pro Tag (alle Exchanges zusammen)
const dailyTotals = {};
// Moving Average berechnen (7-Tage gleitender Durchschnitt)
const maWindow = 7;
const calculateMA = (dataArray, window) => {
return dataArray.map((val, idx) => {
if (idx < window - 1) return null;
const slice = dataArray.slice(idx - window + 1, idx + 1);
return slice.reduce((a, b) => a + b, 0) / window;
});
};
// Für jede Exchange-Gruppe einen separaten Chart erstellen
Object.entries(exchangeGroups).forEach(([groupName, config]) => {
const canvas = document.getElementById(config.canvasId);
if (!canvas) {
console.error(`Canvas element ${config.canvasId} not found`);
return;
}
// Zerstöre existierenden Chart
if (charts[config.canvasId]) charts[config.canvasId].destroy();
const ctx = canvas.getContext('2d');
// Aggregiere Daten für diese Gruppe
const groupData = {};
dates.forEach(date => {
const dayRows = data.filter(r => r[dateIdx] === date);
dailyTotals[date] = {
const dayRows = data.filter(r => {
const exchange = r[exchangeIdx];
return r[dateIdx] === date && config.exchanges.includes(exchange);
});
groupData[date] = {
tradeCount: dayRows.reduce((sum, r) => sum + (r[countIdx] || 0), 0),
volume: dayRows.reduce((sum, r) => sum + (r[volumeIdx] || 0), 0)
};
});
// Moving Average berechnen (7-Tage gleitender Durchschnitt)
const maWindow = 7;
const tradeCountData = dates.map(d => dailyTotals[d].tradeCount);
const volumeData = dates.map(d => dailyTotals[d].volume);
const tradeData = dates.map(d => groupData[d]?.tradeCount || 0);
const volumeData = dates.map(d => groupData[d]?.volume || 0);
const maTradeData = calculateMA(tradeData, maWindow);
const maVolumeData = calculateMA(volumeData, maWindow);
const calculateMA = (data, window) => {
return data.map((val, idx) => {
if (idx < window - 1) return null;
const slice = data.slice(idx - window + 1, idx + 1);
return slice.reduce((a, b) => a + b, 0) / window;
});
};
const maTradeCount = calculateMA(tradeCountData, maWindow);
const maVolume = calculateMA(volumeData, maWindow);
const datasets = [
charts[config.canvasId] = new Chart(ctx, {
type: 'line',
data: {
labels: dates.map(d => new Date(d).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' })),
datasets: [
{
label: 'Trades (täglich)',
data: tradeCountData,
label: 'Trades (MA)',
data: maTradeData,
borderColor: '#38bdf8',
backgroundColor: '#38bdf833',
borderWidth: 1,
yAxisID: 'y',
tension: 0.3,
pointRadius: 2
},
{
label: `Trades (${maWindow}-Tage MA)`,
data: maTradeCount,
borderColor: '#38bdf8',
backgroundColor: 'transparent',
borderWidth: 3,
backgroundColor: '#38bdf822',
borderWidth: 2,
fill: true,
yAxisID: 'y',
tension: 0.4,
pointRadius: 0
},
{
label: 'Volumen (täglich)',
data: volumeData,
label: 'Volumen (MA)',
data: maVolumeData,
borderColor: '#10b981',
backgroundColor: '#10b98133',
borderWidth: 1,
yAxisID: 'y1',
tension: 0.3,
pointRadius: 2
},
{
label: `Volumen (${maWindow}-Tage MA)`,
data: maVolume,
borderColor: '#10b981',
backgroundColor: 'transparent',
borderWidth: 3,
backgroundColor: '#10b98122',
borderWidth: 2,
fill: true,
yAxisID: 'y1',
tension: 0.4,
pointRadius: 0
}
];
charts.movingAverage = new Chart(ctx, {
type: 'line',
data: {
labels: dates.map(d => new Date(d).toLocaleDateString()),
datasets: datasets
]
},
options: {
responsive: true,
@@ -341,35 +371,49 @@
type: 'linear',
display: true,
position: 'left',
title: { display: true, text: 'Anzahl Trades', color: '#94a3b8' },
title: { display: false },
grid: { color: 'rgba(255,255,255,0.05)' },
ticks: { color: '#64748b' }
},
y1: {
type: 'linear',
display: true,
position: 'right',
title: { display: true, text: 'Volumen (€)', color: '#94a3b8' },
grid: { drawOnChartArea: false },
ticks: {
color: '#64748b',
font: { size: 10 },
callback: function(value) {
if (value >= 1e6) return (value / 1e6).toFixed(1) + 'M';
if (value >= 1e6) return (value / 1e6).toFixed(0) + 'M';
if (value >= 1e3) return (value / 1e3).toFixed(0) + 'k';
return value;
}
}
},
y1: {
type: 'linear',
display: true,
position: 'right',
title: { display: false },
grid: { drawOnChartArea: false },
ticks: {
color: '#64748b',
font: { size: 10 },
callback: function(value) {
if (value >= 1e6) return '€' + (value / 1e6).toFixed(0) + 'M';
if (value >= 1e3) return '€' + (value / 1e3).toFixed(0) + 'k';
return '€' + value;
}
}
},
x: {
grid: { display: false },
ticks: { color: '#64748b', maxRotation: 45 }
ticks: {
color: '#64748b',
maxRotation: 0,
font: { size: 9 },
maxTicksLimit: 8
}
}
},
plugins: {
legend: {
display: true,
position: 'bottom',
labels: { color: '#94a3b8', boxWidth: 12, usePointStyle: true, padding: 15 }
position: 'top',
labels: { color: '#94a3b8', boxWidth: 10, usePointStyle: true, padding: 8, font: { size: 10 } }
},
tooltip: {
callbacks: {
@@ -390,6 +434,7 @@
}
}
});
});
} catch (err) {
console.error('Error loading moving average:', err);
}

View File

@@ -348,9 +348,9 @@ async def get_volume_changes(days: int = 7):
if days not in [7, 30, 42, 69, 180, 365]:
raise HTTPException(status_code=400, detail="Invalid days parameter. Must be one of: 7, 30, 42, 69, 180, 365")
# Hole die neuesten Daten für den angegebenen Zeitraum
query = f"""
select
timestamp as date,
exchange,
trade_count,
volume,
@@ -359,11 +359,74 @@ async def get_volume_changes(days: int = 7):
trend
from analytics_volume_changes
where period_days = {days}
and timestamp >= dateadd('d', -{days}, now())
order by date desc, exchange asc
order by timestamp desc
limit 20
"""
data = query_questdb(query, timeout=5)
# Falls keine vorberechneten Daten vorhanden, berechne on-the-fly
if not data or not data.get('dataset'):
logger.info(f"No pre-calculated volume changes found for {days} days, calculating on-the-fly")
# Berechne Volumen-Änderungen direkt aus trades
query = f"""
with
first_half as (
select
exchange,
count(*) as trade_count,
sum(price * quantity) as volume
from trades
where timestamp >= dateadd('d', -{days}, now())
and timestamp < dateadd('d', -{days/2}, now())
group by exchange
),
second_half as (
select
exchange,
count(*) as trade_count,
sum(price * quantity) as volume
from trades
where timestamp >= dateadd('d', -{days/2}, now())
group by exchange
)
select
coalesce(f.exchange, s.exchange) as exchange,
coalesce(s.trade_count, 0) as trade_count,
coalesce(s.volume, 0) as volume,
case when f.trade_count > 0 then
((coalesce(s.trade_count, 0) - f.trade_count) * 100.0 / f.trade_count)
else 0 end as count_change_pct,
case when f.volume > 0 then
((coalesce(s.volume, 0) - f.volume) * 100.0 / f.volume)
else 0 end as volume_change_pct,
case
when f.trade_count > 0 and f.volume > 0 then
case
when ((coalesce(s.trade_count, 0) - f.trade_count) * 100.0 / f.trade_count) > 5
and ((coalesce(s.volume, 0) - f.volume) * 100.0 / f.volume) > 5
then 'mehr_trades_mehr_volumen'
when ((coalesce(s.trade_count, 0) - f.trade_count) * 100.0 / f.trade_count) > 5
and ((coalesce(s.volume, 0) - f.volume) * 100.0 / f.volume) < -5
then 'mehr_trades_weniger_volumen'
when ((coalesce(s.trade_count, 0) - f.trade_count) * 100.0 / f.trade_count) < -5
and ((coalesce(s.volume, 0) - f.volume) * 100.0 / f.volume) > 5
then 'weniger_trades_mehr_volumen'
when ((coalesce(s.trade_count, 0) - f.trade_count) * 100.0 / f.trade_count) < -5
and ((coalesce(s.volume, 0) - f.volume) * 100.0 / f.volume) < -5
then 'weniger_trades_weniger_volumen'
else 'stabil'
end
else 'neu'
end as trend
from first_half f
full outer join second_half s on f.exchange = s.exchange
order by s.volume desc
"""
data = query_questdb(query, timeout=15)
return format_questdb_response(data)
@app.get("/api/statistics/stock-trends")