Lars
db5557e4aa
- Introduced the `nutrition_history_viz` widget to the dashboard, allowing users to visualize nutrition history data. - Updated widget configuration to include `nutrition_history_viz` in the allowed widgets and added validation for its configuration. - Enhanced the widget catalog with details for the new `nutrition_history_viz` entry. - Implemented default values and validation logic for the widget's configuration, ensuring proper handling of user inputs. - Added tests to ensure proper validation of the `nutrition_history_viz` widget configuration. - Bumped application version to reflect the addition of the new widget.
93 lines
3.9 KiB
JavaScript
93 lines
3.9 KiB
JavaScript
import { NUTRITION_HISTORY_VIZ_WIDGET_DEFAULTS, normalizeNutritionHistoryVizConfig } from './nutritionHistoryVizConfig'
|
|
|
|
const CHART_TOGGLES = [
|
|
{ key: 'show_kcal_vs_weight', label: 'Kalorien vs. Gewicht' },
|
|
{ key: 'show_calorie_balance_chart', label: 'Kalorienbilanz' },
|
|
{ key: 'show_protein_lean_chart', label: 'Protein vs. Magermasse' },
|
|
{ key: 'show_heuristics', label: 'Kurz-Einordnung (Heuristiken)' },
|
|
{ key: 'show_macro_daily_bars', label: 'Makros täglich (Balken)' },
|
|
{ key: 'show_macro_distribution_pair', label: 'Donut + Wochen-Makros' },
|
|
{ key: 'show_energy_protein_charts', label: 'Zeitverläufe (NutritionCharts, Bundle-Payloads)' },
|
|
]
|
|
|
|
const OTHER_TOGGLES = [
|
|
{ key: 'show_goals_strip', label: 'Ernährungs-Ziele (Strip)' },
|
|
{ key: 'show_intro_blurb', label: 'Hinweistext (Data-Layer)' },
|
|
{ key: 'show_kpis', label: 'KPI-Kacheln' },
|
|
]
|
|
|
|
/**
|
|
* @param {{ config: Record<string, unknown>, onChange: (next: Record<string, unknown>) => void }} props
|
|
*/
|
|
export default function NutritionHistoryVizConfigEditor({ config, onChange }) {
|
|
const merged = normalizeNutritionHistoryVizConfig(config)
|
|
|
|
const patch = (partial) => {
|
|
const next = { ...merged, ...partial }
|
|
const def = NUTRITION_HISTORY_VIZ_WIDGET_DEFAULTS
|
|
const stored = {}
|
|
for (const k of Object.keys(def)) {
|
|
if (next[k] !== def[k]) stored[k] = next[k]
|
|
}
|
|
onChange(stored)
|
|
}
|
|
|
|
const setBool = (key, checked) => {
|
|
patch({ [key]: checked })
|
|
}
|
|
|
|
return (
|
|
<div style={{ marginTop: 10, marginLeft: 28 }}>
|
|
<div style={{ fontSize: 12, color: 'var(--text2)', marginBottom: 8, lineHeight: 1.5 }}>
|
|
<strong>Ernährung (Verlauf-Bundle):</strong> welche Blöcke auf der Übersicht erscheinen. Unbelegte Felder = schlanker
|
|
Standard (KPI kompakt, kcal vs. Gewicht, Makro-Balken + Donut/Woche).
|
|
</div>
|
|
<div style={{ fontSize: 12, color: 'var(--text2)', marginBottom: 6 }}>KPI-Umfang</div>
|
|
<label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, marginBottom: 10, cursor: 'pointer' }}>
|
|
<input
|
|
type="radio"
|
|
name="nutrition_hist_kpi_detail"
|
|
checked={merged.kpi_detail === 'compact'}
|
|
onChange={() => patch({ kpi_detail: 'compact' })}
|
|
/>
|
|
<span>Kompakt (erste 4 Kacheln)</span>
|
|
</label>
|
|
<label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, marginBottom: 12, cursor: 'pointer' }}>
|
|
<input
|
|
type="radio"
|
|
name="nutrition_hist_kpi_detail"
|
|
checked={merged.kpi_detail === 'full'}
|
|
onChange={() => patch({ kpi_detail: 'full' })}
|
|
/>
|
|
<span>Voll (wie Verlauf — alle Kacheln)</span>
|
|
</label>
|
|
<div style={{ fontSize: 12, color: 'var(--text2)', marginBottom: 6 }}>Bereiche</div>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
|
{OTHER_TOGGLES.map(({ key, label }) => (
|
|
<label key={key} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, cursor: 'pointer' }}>
|
|
<input type="checkbox" checked={merged[key]} onChange={(e) => setBool(key, e.target.checked)} />
|
|
<span>{label}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
<div style={{ fontSize: 12, color: 'var(--text2)', margin: '12px 0 6px' }}>Charts</div>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
|
{CHART_TOGGLES.map(({ key, label }) => (
|
|
<label key={key} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, cursor: 'pointer' }}>
|
|
<input type="checkbox" checked={merged[key]} onChange={(e) => setBool(key, e.target.checked)} />
|
|
<span>{label}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
<button
|
|
type="button"
|
|
className="btn btn-secondary"
|
|
style={{ marginTop: 10, fontSize: 12, padding: '6px 12px' }}
|
|
onClick={() => onChange({})}
|
|
>
|
|
Auf schlanken Standard zurück
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|