// ===== Optimierung → Reports & Analytics (Dashboard-Builder) ===== const { useState: useRpS, useEffect: useRpE } = React; const RP_KEY = 'solver.reports'; // Datenquellen: Aufträge (A_ORDERS) + Shopfloor-Maßnahmen (SfStore) const RP_SOURCES = { orders: { label: 'Aufträge', get: () => window.A_ORDERS || [], dims: [['system', 'Arbeitssystem'], ['kunde', 'Kunde'], ['abc', 'ABC'], ['status', 'Status'], ['produkt', 'Produkt']], measures: [['count', 'Anzahl'], ['istArbeit', 'Σ Ist-Arbeit [h]'], ['avgDLZ', 'Ø Durchlaufzeit [T]'], ['avgTA', 'Ø Terminabw. [T]'], ['spät', 'Verspätet']] }, measures: { label: 'Maßnahmen', get: () => (window.SfStore ? window.SfStore.list : []), dims: [['cat', 'Kategorie'], ['owner', 'Verantwortlich'], ['status', 'Status'], ['ref', 'Bezug']], measures: [['count', 'Anzahl'], ['offen', 'Offen']] }, comments: { label: 'Kommentare', get: () => (window.KkStore ? window.KkStore.list : []), dims: [['cat', 'Kategorie'], ['kind', 'Objekttyp']], measures: [['count', 'Anzahl']] }, }; const RP_PALETTE = [['bar', 'Balken', 'layers'], ['donut', 'Donut', 'target'], ['table', 'Tabelle', 'box']]; const RP_COLORS = ['#2A4D74', '#3269B4', '#5B8AC9', '#A7C2E7', '#E0A53B', '#8C8A85', '#9AA3AE', '#46586E']; function rpVal(src, dim, r) { const v = r[dim]; if (v == null || v === '') return '—'; if (src === 'measures' && dim === 'cat') return (window.SF_CAT_LABELS && window.SF_CAT_LABELS[v]) || v; if (src === 'measures' && dim === 'status') return ({ offen: 'Offen', arbeit: 'In Arbeit', erledigt: 'Erledigt' })[v] || v; return String(v); } function rpMeasure(recs, src, measure) { const n = recs.length; if (measure === 'count') return n; if (measure === 'istArbeit') return Math.round(recs.reduce((s, r) => s + (r.istArbeit || 0), 0)); if (measure === 'avgDLZ') { const d = recs.filter(r => r.istEnde); return d.length ? Math.round(d.reduce((s, r) => s + (r.istDLZ || 0), 0) / d.length * 10) / 10 : 0; } if (measure === 'avgTA') { const d = recs.filter(r => r.istEnde); return d.length ? Math.round(d.reduce((s, r) => s + (r.taAbgang || 0), 0) / d.length * 10) / 10 : 0; } if (measure === 'spät') return recs.filter(r => r.istEnde && r.taAbgang > 0).length; if (measure === 'offen') return recs.filter(r => r.status !== 'erledigt').length; return n; } function rpAgg(w) { const list = (RP_SOURCES[w.source].get() || []); const g = {}; list.forEach(r => { const k = rpVal(w.source, w.dim, r); (g[k] = g[k] || []).push(r); }); return Object.keys(g).map(k => ({ key: k, value: rpMeasure(g[k], w.source, w.measure) })).sort((a, b) => b.value - a.value); } function rpDefaults(viz) { return { id: 'w' + Date.now() + Math.floor(Math.random() * 99), viz, title: 'Neues Widget', source: 'orders', dim: 'system', measure: 'count', wide: viz === 'bar' }; } function RpWidget({ w, onChange, onRemove }) { const data = rpAgg(w); const max = Math.max(1, ...data.map(d => d.value)); const src = RP_SOURCES[w.source]; const set = (k, v) => { const nw = { ...w, [k]: v }; if (k === 'source') { nw.dim = RP_SOURCES[v].dims[0][0]; nw.measure = RP_SOURCES[v].measures[0][0]; } onChange(nw); }; const total = data.reduce((s, d) => s + d.value, 0) || 1; let acc = 0; const segs = data.slice(0, 8).map((d, i) => { const a0 = acc / total * 360; acc += d.value; const a1 = acc / total * 360; return { d, a0, a1, c: RP_COLORS[i % RP_COLORS.length] }; }); const arc = (cx, cy, r, a0, a1) => { const p = (a) => [cx + r * Math.cos((a - 90) * Math.PI / 180), cy + r * Math.sin((a - 90) * Math.PI / 180)]; const [x0, y0] = p(a0), [x1, y1] = p(a1); const large = a1 - a0 > 180 ? 1 : 0; return `M ${cx} ${cy} L ${x0} ${y0} A ${r} ${r} 0 ${large} 1 ${x1} ${y1} Z`; }; const sel = { height: 30, padding: '0 8px', borderRadius: 6, border: '1px solid var(--line-2)', background: 'var(--surface)', color: 'var(--ink)', fontSize: 12 }; return (
set('title', e.target.value)} style={{ flex: 1, border: 'none', background: 'transparent', fontSize: 13.5, fontWeight: 600, color: 'var(--ink)', outline: 'none' }} />
{data.length === 0 ?
Keine Daten
: w.viz === 'bar' ? (
{data.slice(0, 10).map((d, i) => (
{d.key} {d.value.toLocaleString('de-DE')}
))}
) : w.viz === 'donut' ? (
{segs.map((s, i) => )}
{segs.map((s, i) =>
{s.d.key}{s.d.value.toLocaleString('de-DE')}
)}
) : ( {data.map((d, i) => )}
{d.key}{d.value.toLocaleString('de-DE')}
)}
); } function ReportsView() { const [, force] = useRpS(0); useRpE(() => { const u1 = window.SfStore ? window.SfStore.sub(() => force(n => n + 1)) : null; const u2 = window.KkStore ? window.KkStore.sub(() => force(n => n + 1)) : null; return () => { u1 && u1(); u2 && u2(); }; }, []); const [widgets, setWidgets] = useRpS(() => { try { const s = JSON.parse(localStorage.getItem(RP_KEY) || 'null'); return Array.isArray(s) ? s : seedReports(); } catch (e) { return seedReports(); } }); const save = (ws) => { setWidgets(ws); try { localStorage.setItem(RP_KEY, JSON.stringify(ws)); } catch (e) {} }; const add = (viz) => save([...widgets, rpDefaults(viz)]); const change = (id, nw) => save(widgets.map(w => w.id === id ? nw : w)); const remove = (id) => save(widgets.filter(w => w.id !== id)); const [over, setOver] = useRpS(false); return (
Reports & Analytics Dashboard-Builder · live aus den Daten {widgets.length > 0 && }
{ e.preventDefault(); setOver(true); }} onDragLeave={() => setOver(false)} onDrop={e => { e.preventDefault(); setOver(false); const v = e.dataTransfer.getData('text/plain'); if (['bar', 'donut', 'table'].includes(v)) add(v); }} style={{ flex: 1, minWidth: 0, borderRadius: 10, outline: over ? '2px dashed var(--accent-ink)' : 'none', outlineOffset: -4 }}> {widgets.length === 0 ? (
Leeres DashboardWidget aus der Leiste hierher ziehen — oder anklicken.
) : (
{widgets.map(w => change(w.id, nw)} onRemove={() => remove(w.id)} />)}
)}
); } function seedReports() { return [ { id: 'r1', viz: 'bar', title: 'Aufträge je Arbeitssystem', source: 'orders', dim: 'system', measure: 'count', wide: true }, { id: 'r2', viz: 'donut', title: 'Aufträge nach ABC', source: 'orders', dim: 'abc', measure: 'count', wide: false }, { id: 'r3', viz: 'bar', title: 'Ø Terminabweichung je System', source: 'orders', dim: 'system', measure: 'avgTA', wide: false }, { id: 'r4', viz: 'donut', title: 'Offene Maßnahmen nach Kategorie', source: 'measures', dim: 'cat', measure: 'offen', wide: false }, { id: 'r5', viz: 'table', title: 'Σ Ist-Arbeit je Kunde', source: 'orders', dim: 'kunde', measure: 'istArbeit', wide: false }, ]; } Object.assign(window, { ReportsView });