Lars
e20b321b64
- Introduced the `recovery_history_viz` widget to the dashboard, enabling users to visualize recovery history data. - Updated widget configuration to include `recovery_history_viz` in the allowed widgets and added validation for its configuration. - Enhanced the widget catalog with details for the new `recovery_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 `recovery_history_viz` widget configuration. - Bumped application version to reflect the addition of the new widget.
30 lines
1.5 KiB
JavaScript
30 lines
1.5 KiB
JavaScript
import { useNavigate } from 'react-router-dom'
|
|
import RecoveryHistoryVizSection from '../history/RecoveryHistoryVizSection'
|
|
import { normalizeBodyChartDays } from '../../widgetSystem/bodyChartDays'
|
|
import { normalizeRecoveryHistoryVizConfig } from '../../widgetSystem/recoveryHistoryVizConfig'
|
|
|
|
/**
|
|
* Verlauf → Erholung als Dashboard-Widget: GET /charts/recovery-dashboard-viz (Layer 2b), Umfang über Layout-Config.
|
|
* @param {{ refreshTick?: number, recoveryHistoryVizConfig?: Record<string, unknown> }} props
|
|
*/
|
|
export default function RecoveryHistoryVizWidget({ refreshTick = 0, recoveryHistoryVizConfig }) {
|
|
const nav = useNavigate()
|
|
const cfg = normalizeRecoveryHistoryVizConfig(recoveryHistoryVizConfig)
|
|
const days = normalizeBodyChartDays(cfg.chart_days)
|
|
|
|
return (
|
|
<div className="card section-gap" style={{ marginBottom: 16 }}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
|
|
<div>
|
|
<div style={{ fontSize: 14, fontWeight: 700, color: 'var(--text1)' }}>Erholung (Verlauf-Bundle)</div>
|
|
<div style={{ fontSize: 12, color: 'var(--text3)' }}>recovery-dashboard-viz · {days} Tage</div>
|
|
</div>
|
|
<button type="button" className="btn btn-secondary" style={{ fontSize: 12, padding: '6px 12px' }} onClick={() => nav('/history', { state: { tab: 'activity' } })}>
|
|
Verlauf →
|
|
</button>
|
|
</div>
|
|
<RecoveryHistoryVizSection key={`${refreshTick}-${days}`} externalPeriod={days} embedded visibility={cfg} />
|
|
</div>
|
|
)
|
|
}
|