Lars
97dbb0f80b
- Introduced the `history_overview_viz` widget to the dashboard, allowing users to visualize consolidated history data across various metrics. - Updated widget configuration to include `history_overview_viz` in the allowed widgets and added validation for its configuration. - Enhanced the widget catalog with details for the new `history_overview_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 `history_overview_viz` widget configuration. - Bumped application version to reflect the addition of the new widget.
36 lines
1.6 KiB
JavaScript
36 lines
1.6 KiB
JavaScript
import { useNavigate } from 'react-router-dom'
|
||
import HistoryOverviewVizSection from '../history/HistoryOverviewVizSection'
|
||
import { normalizeHistoryOverviewVizConfig } from '../../widgetSystem/historyOverviewVizConfig'
|
||
import { normalizeBodyChartDays } from '../../widgetSystem/bodyChartDays'
|
||
|
||
/**
|
||
* Verlauf — Gesamtübersicht als Dashboard-Widget: GET /charts/history-overview-viz (inkl. chart_payloads C1–C4).
|
||
* @param {{ refreshTick?: number, historyOverviewVizConfig?: Record<string, unknown> }} props
|
||
*/
|
||
export default function HistoryOverviewVizWidget({ refreshTick = 0, historyOverviewVizConfig }) {
|
||
const nav = useNavigate()
|
||
const cfg = normalizeHistoryOverviewVizConfig(historyOverviewVizConfig)
|
||
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)' }}>Gesamtübersicht (Verlauf)</div>
|
||
<div style={{ fontSize: 12, color: 'var(--text3)' }}>history-overview-viz · {days} Tage</div>
|
||
</div>
|
||
<button type="button" className="btn btn-secondary" style={{ fontSize: 12, padding: '6px 12px' }} onClick={() => nav('/history', { state: { tab: 'overview' } })}>
|
||
Verlauf →
|
||
</button>
|
||
</div>
|
||
<HistoryOverviewVizSection
|
||
key={`${refreshTick}-${days}`}
|
||
externalPeriod={days}
|
||
hidePeriodSelector
|
||
embedded
|
||
visibility={cfg}
|
||
/>
|
||
</div>
|
||
)
|
||
}
|