fix: Tooltip zeigt vollen Wochenbereich (15.06.-21.06.) statt nur Wochenanfang
This commit is contained in:
@@ -24,12 +24,10 @@ const CAT_COLORS = { Filament:'#4ecdc4', Zubehör:'#ffe66d', Ersatzteile:'#ff6b9
|
|||||||
const fmt = v => `${(v||0).toFixed(2)} €`;
|
const fmt = v => `${(v||0).toFixed(2)} €`;
|
||||||
const fmtMonth = m => {
|
const fmtMonth = m => {
|
||||||
if (!m) return '';
|
if (!m) return '';
|
||||||
// YYYY-MM → "Jan 26"
|
|
||||||
if (/^\d{4}-\d{2}$/.test(m)) {
|
if (/^\d{4}-\d{2}$/.test(m)) {
|
||||||
const [y,mo] = m.split('-');
|
const [y,mo] = m.split('-');
|
||||||
return ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'][parseInt(mo)-1]+' '+y.slice(2);
|
return ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'][parseInt(mo)-1]+' '+y.slice(2);
|
||||||
}
|
}
|
||||||
// YYYY-MM-DD → "15.06."
|
|
||||||
if (/^\d{4}-\d{2}-\d{2}$/.test(m)) {
|
if (/^\d{4}-\d{2}-\d{2}$/.test(m)) {
|
||||||
const [,mo,d] = m.split('-');
|
const [,mo,d] = m.split('-');
|
||||||
return `${d}.${mo}.`;
|
return `${d}.${mo}.`;
|
||||||
@@ -37,6 +35,16 @@ const fmtMonth = m => {
|
|||||||
return m;
|
return m;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Bei Wochen-Granularität: zeigt "15.06. – 21.06." statt nur den Montag
|
||||||
|
const fmtMonthRange = (m, granularity) => {
|
||||||
|
if (!m || granularity !== 'week' || !/^\d{4}-\d{2}-\d{2}$/.test(m)) return fmtMonth(m);
|
||||||
|
const [y,mo,d] = m.split('-').map(Number);
|
||||||
|
const start = new Date(y, mo-1, d);
|
||||||
|
const end = new Date(y, mo-1, d+6);
|
||||||
|
const f = dt => `${String(dt.getDate()).padStart(2,'0')}.${String(dt.getMonth()+1).padStart(2,'0')}.`;
|
||||||
|
return `${f(start)} – ${f(end)}`;
|
||||||
|
};
|
||||||
|
|
||||||
const PERIODS = [
|
const PERIODS = [
|
||||||
{ id:'week', label:'Diese Woche' },
|
{ id:'week', label:'Diese Woche' },
|
||||||
{ id:'month', label:'Dieser Monat' },
|
{ id:'month', label:'Dieser Monat' },
|
||||||
@@ -317,7 +325,7 @@ export default function Statistik({ mobile }) {
|
|||||||
<Tooltip contentStyle={{background:'#1a1d2e',border:'1px solid rgba(255,255,255,0.1)',borderRadius:8,fontFamily:'monospace',fontSize:11,color:'#fff'}}
|
<Tooltip contentStyle={{background:'#1a1d2e',border:'1px solid rgba(255,255,255,0.1)',borderRadius:8,fontFamily:'monospace',fontSize:11,color:'#fff'}}
|
||||||
labelStyle={{color:'rgba(255,255,255,0.6)'}} itemStyle={{color:'#fff'}}
|
labelStyle={{color:'rgba(255,255,255,0.6)'}} itemStyle={{color:'#fff'}}
|
||||||
formatter={(v,n)=>[`${v.toFixed(2)} €`, n==='revenue'?'Einnahmen':'Ausgaben']}
|
formatter={(v,n)=>[`${v.toFixed(2)} €`, n==='revenue'?'Einnahmen':'Ausgaben']}
|
||||||
labelFormatter={fmtMonth}/>
|
labelFormatter={m => fmtMonthRange(m, data.granularity)}/>
|
||||||
<Bar dataKey="revenue" fill="#4ade80" radius={[4,4,0,0]} maxBarSize={28}/>
|
<Bar dataKey="revenue" fill="#4ade80" radius={[4,4,0,0]} maxBarSize={28}/>
|
||||||
<Bar dataKey="expenses" fill="#f87171" radius={[4,4,0,0]} maxBarSize={28}/>
|
<Bar dataKey="expenses" fill="#f87171" radius={[4,4,0,0]} maxBarSize={28}/>
|
||||||
</BarChart>
|
</BarChart>
|
||||||
@@ -336,7 +344,7 @@ export default function Statistik({ mobile }) {
|
|||||||
<YAxis tick={{fill:'rgba(255,255,255,0.3)',fontSize:9}} axisLine={false} tickLine={false} tickFormatter={v=>`${v}€`} width={42}/>
|
<YAxis tick={{fill:'rgba(255,255,255,0.3)',fontSize:9}} axisLine={false} tickLine={false} tickFormatter={v=>`${v}€`} width={42}/>
|
||||||
<Tooltip contentStyle={{background:'#1a1d2e',border:'1px solid rgba(255,255,255,0.1)',borderRadius:8,fontFamily:'monospace',fontSize:11,color:'#fff'}}
|
<Tooltip contentStyle={{background:'#1a1d2e',border:'1px solid rgba(255,255,255,0.1)',borderRadius:8,fontFamily:'monospace',fontSize:11,color:'#fff'}}
|
||||||
labelStyle={{color:'rgba(255,255,255,0.6)'}} itemStyle={{color:'#4ecdc4'}}
|
labelStyle={{color:'rgba(255,255,255,0.6)'}} itemStyle={{color:'#4ecdc4'}}
|
||||||
formatter={v=>[`${v.toFixed(2)} €`, 'Gewinn kumuliert']} labelFormatter={fmtMonth}/>
|
formatter={v=>[`${v.toFixed(2)} €`, 'Gewinn kumuliert']} labelFormatter={m => fmtMonthRange(m, data.granularity)}/>
|
||||||
<Line type="monotone" dataKey="value" stroke="#4ecdc4" strokeWidth={2} dot={false}/>
|
<Line type="monotone" dataKey="value" stroke="#4ecdc4" strokeWidth={2} dot={false}/>
|
||||||
</LineChart>
|
</LineChart>
|
||||||
</ResponsiveContainer>
|
</ResponsiveContainer>
|
||||||
|
|||||||
Reference in New Issue
Block a user