FEAT-6: Gesundheit/Gewicht/Fotos tab components + hand-rolled SVG LineChart (no chart dependency)
This commit is contained in:
217
gerbil-manager-web/src/components/GerbilHealthTab.tsx
Normal file
217
gerbil-manager-web/src/components/GerbilHealthTab.tsx
Normal file
@@ -0,0 +1,217 @@
|
|||||||
|
/**
|
||||||
|
* FEAT-6: Gesundheit-Tab — Gesundheitseinträge eines Tieres:
|
||||||
|
* Liste (Datum absteigend) + Inline-Formular zum Anlegen/Bearbeiten,
|
||||||
|
* Löschen mit Bestätigung. Deutsch durchgehend.
|
||||||
|
*/
|
||||||
|
import { useState, type FormEvent } from 'react'
|
||||||
|
import { de } from '../strings/de'
|
||||||
|
import {
|
||||||
|
createHealthRecord,
|
||||||
|
deleteHealthRecord,
|
||||||
|
listHealthRecords,
|
||||||
|
updateHealthRecord,
|
||||||
|
HEALTH_RECORD_TYPES,
|
||||||
|
type CreateHealthRecord,
|
||||||
|
type HealthRecord,
|
||||||
|
type HealthRecordType,
|
||||||
|
} from '../api/healthRecords'
|
||||||
|
import { useApi, useMutation } from '../hooks/useApi'
|
||||||
|
import { formatDate } from '../format/labels'
|
||||||
|
import { todayISO } from '../format/dates'
|
||||||
|
|
||||||
|
interface FormState {
|
||||||
|
date: string
|
||||||
|
type: HealthRecordType
|
||||||
|
description: string
|
||||||
|
veterinarian: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const emptyForm = (): FormState => ({
|
||||||
|
date: todayISO(),
|
||||||
|
type: 'Examination',
|
||||||
|
description: '',
|
||||||
|
veterinarian: '',
|
||||||
|
})
|
||||||
|
|
||||||
|
export default function GerbilHealthTab({ gerbilId }: { gerbilId: string }) {
|
||||||
|
const t = de.pages.tierTabs.health
|
||||||
|
const ta = de.pages.tierTabs.actions
|
||||||
|
|
||||||
|
const records = useApi(() => listHealthRecords(gerbilId), [gerbilId])
|
||||||
|
|
||||||
|
// editing: null = kein Formular, 'new' = anlegen, sonst Record-Id (bearbeiten)
|
||||||
|
const [editing, setEditing] = useState<string | null>(null)
|
||||||
|
const [form, setForm] = useState<FormState>(emptyForm)
|
||||||
|
const [errors, setErrors] = useState<Partial<Record<keyof FormState, string>>>({})
|
||||||
|
|
||||||
|
const save = useMutation((body: CreateHealthRecord) =>
|
||||||
|
editing && editing !== 'new'
|
||||||
|
? updateHealthRecord(editing, body)
|
||||||
|
: createHealthRecord(body),
|
||||||
|
)
|
||||||
|
const removal = useMutation((recordId: string) => deleteHealthRecord(recordId))
|
||||||
|
|
||||||
|
const set = <K extends keyof FormState>(key: K, value: FormState[K]) =>
|
||||||
|
setForm((f) => ({ ...f, [key]: value }))
|
||||||
|
|
||||||
|
function openCreate() {
|
||||||
|
setForm(emptyForm())
|
||||||
|
setErrors({})
|
||||||
|
setEditing('new')
|
||||||
|
}
|
||||||
|
|
||||||
|
function openEdit(r: HealthRecord) {
|
||||||
|
setForm({
|
||||||
|
date: r.date,
|
||||||
|
type: r.type,
|
||||||
|
description: r.description,
|
||||||
|
veterinarian: r.veterinarian ?? '',
|
||||||
|
})
|
||||||
|
setErrors({})
|
||||||
|
setEditing(r.id)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onSubmit(e: FormEvent) {
|
||||||
|
e.preventDefault()
|
||||||
|
const next: Partial<Record<keyof FormState, string>> = {}
|
||||||
|
if (!form.date) next.date = t.validation.dateRequired
|
||||||
|
if (form.description.trim() === '') next.description = t.validation.descriptionRequired
|
||||||
|
setErrors(next)
|
||||||
|
if (Object.keys(next).length > 0) return
|
||||||
|
|
||||||
|
await save.run({
|
||||||
|
gerbilId,
|
||||||
|
date: form.date,
|
||||||
|
type: form.type,
|
||||||
|
description: form.description.trim(),
|
||||||
|
veterinarian: form.veterinarian.trim() === '' ? null : form.veterinarian.trim(),
|
||||||
|
})
|
||||||
|
setEditing(null)
|
||||||
|
records.reload()
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onDelete(recordId: string) {
|
||||||
|
if (!window.confirm(t.deleteConfirm)) return
|
||||||
|
await removal.run(recordId)
|
||||||
|
records.reload()
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{editing === null && (
|
||||||
|
<button type="button" className="btn btn--primary" onClick={openCreate}>
|
||||||
|
+ {t.newButton}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{editing !== null && (
|
||||||
|
<form className="form" onSubmit={onSubmit} noValidate>
|
||||||
|
<h4>{editing === 'new' ? t.createTitle : t.editTitle}</h4>
|
||||||
|
|
||||||
|
<label className="field">
|
||||||
|
<span>{t.fields.date} *</span>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
className="input"
|
||||||
|
value={form.date}
|
||||||
|
onChange={(e) => set('date', e.target.value)}
|
||||||
|
aria-invalid={Boolean(errors.date)}
|
||||||
|
/>
|
||||||
|
{errors.date && <small className="error-text">{errors.date}</small>}
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label className="field">
|
||||||
|
<span>{t.fields.type}</span>
|
||||||
|
<select
|
||||||
|
value={form.type}
|
||||||
|
onChange={(e) => set('type', e.target.value as HealthRecordType)}
|
||||||
|
>
|
||||||
|
{HEALTH_RECORD_TYPES.map((ty) => (
|
||||||
|
<option key={ty} value={ty}>
|
||||||
|
{t.typeLabels[ty]}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label className="field">
|
||||||
|
<span>{t.fields.description} *</span>
|
||||||
|
<textarea
|
||||||
|
value={form.description}
|
||||||
|
onChange={(e) => set('description', e.target.value)}
|
||||||
|
aria-invalid={Boolean(errors.description)}
|
||||||
|
/>
|
||||||
|
{errors.description && <small className="error-text">{errors.description}</small>}
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label className="field">
|
||||||
|
<span>{t.fields.veterinarian}</span>
|
||||||
|
<input
|
||||||
|
className="input"
|
||||||
|
value={form.veterinarian}
|
||||||
|
onChange={(e) => set('veterinarian', e.target.value)}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
{save.error && <div className="alert alert--error">{save.error}</div>}
|
||||||
|
|
||||||
|
<div className="form-actions">
|
||||||
|
<button type="submit" className="btn btn--primary" disabled={save.pending}>
|
||||||
|
{save.pending ? ta.saving : ta.save}
|
||||||
|
</button>
|
||||||
|
<button type="button" className="btn" onClick={() => setEditing(null)}>
|
||||||
|
{ta.cancel}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{records.loading && <p className="muted">{de.common.loading}</p>}
|
||||||
|
{records.error && (
|
||||||
|
<div className="alert alert--error">
|
||||||
|
<span>{records.error}</span>
|
||||||
|
<button type="button" className="btn" onClick={records.reload}>
|
||||||
|
{de.common.retry}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{removal.error && <div className="alert alert--error">{removal.error}</div>}
|
||||||
|
|
||||||
|
{!records.loading && !records.error && (records.data ?? []).length === 0 && (
|
||||||
|
<p className="muted">{t.empty}</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{(records.data ?? []).length > 0 && (
|
||||||
|
<ul className="card-list" style={{ marginTop: '1rem' }}>
|
||||||
|
{(records.data ?? []).map((r) => (
|
||||||
|
<li key={r.id} className="record-card">
|
||||||
|
<div className="record-card__head">
|
||||||
|
<span className="record-card__date">{formatDate(r.date)}</span>
|
||||||
|
<span className="badge">{t.typeLabels[r.type]}</span>
|
||||||
|
</div>
|
||||||
|
<p className="record-card__body">{r.description}</p>
|
||||||
|
{r.veterinarian && (
|
||||||
|
<p className="muted">
|
||||||
|
{t.fields.veterinarian}: {r.veterinarian}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
<div className="record-card__actions">
|
||||||
|
<button type="button" className="btn" onClick={() => openEdit(r)}>
|
||||||
|
{ta.edit}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn--danger"
|
||||||
|
onClick={() => onDelete(r.id)}
|
||||||
|
disabled={removal.pending}
|
||||||
|
>
|
||||||
|
{ta.delete}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
118
gerbil-manager-web/src/components/GerbilPhotosTab.tsx
Normal file
118
gerbil-manager-web/src/components/GerbilPhotosTab.tsx
Normal file
@@ -0,0 +1,118 @@
|
|||||||
|
/**
|
||||||
|
* FEAT-6: Fotos-Tab — Galerie-Raster + Upload (multipart) + Löschen.
|
||||||
|
* Erstes Foto nach sortOrder = Profilfoto (Badge). Endpunkte entstehen in
|
||||||
|
* FEAT-1b Phase 2 (Pam) — bis dahin zeigt der Tab saubere deutsche
|
||||||
|
* Fehler-/Leerzustände.
|
||||||
|
*/
|
||||||
|
import { useRef, useState, type FormEvent } from 'react'
|
||||||
|
import { de } from '../strings/de'
|
||||||
|
import {
|
||||||
|
deleteGerbilPhoto,
|
||||||
|
listGerbilPhotos,
|
||||||
|
photoSrc,
|
||||||
|
profilePhoto,
|
||||||
|
uploadGerbilPhoto,
|
||||||
|
} from '../api/photos'
|
||||||
|
import { useApi, useMutation } from '../hooks/useApi'
|
||||||
|
|
||||||
|
export default function GerbilPhotosTab({ gerbilId }: { gerbilId: string }) {
|
||||||
|
const t = de.pages.tierTabs.photos
|
||||||
|
|
||||||
|
const photos = useApi(() => listGerbilPhotos(gerbilId), [gerbilId])
|
||||||
|
|
||||||
|
const fileInput = useRef<HTMLInputElement>(null)
|
||||||
|
const [caption, setCaption] = useState('')
|
||||||
|
const [fileError, setFileError] = useState<string | null>(null)
|
||||||
|
|
||||||
|
const upload = useMutation((file: File) =>
|
||||||
|
uploadGerbilPhoto(gerbilId, file, caption.trim() === '' ? null : caption.trim()),
|
||||||
|
)
|
||||||
|
const removal = useMutation((photoId: string) => deleteGerbilPhoto(photoId))
|
||||||
|
|
||||||
|
async function onUpload(e: FormEvent) {
|
||||||
|
e.preventDefault()
|
||||||
|
const file = fileInput.current?.files?.[0]
|
||||||
|
if (!file) {
|
||||||
|
setFileError(t.validation.fileRequired)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
setFileError(null)
|
||||||
|
await upload.run(file)
|
||||||
|
setCaption('')
|
||||||
|
if (fileInput.current) fileInput.current.value = ''
|
||||||
|
photos.reload()
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onDelete(photoId: string) {
|
||||||
|
if (!window.confirm(t.deleteConfirm)) return
|
||||||
|
await removal.run(photoId)
|
||||||
|
photos.reload()
|
||||||
|
}
|
||||||
|
|
||||||
|
const items = photos.data ?? []
|
||||||
|
const profile = profilePhoto(items)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<form className="form" onSubmit={onUpload} noValidate>
|
||||||
|
<h4>{t.uploadTitle}</h4>
|
||||||
|
<label className="field">
|
||||||
|
<span>{t.chooseFile}</span>
|
||||||
|
<input ref={fileInput} type="file" accept="image/*" className="input" />
|
||||||
|
{fileError && <small className="error-text">{fileError}</small>}
|
||||||
|
</label>
|
||||||
|
<label className="field">
|
||||||
|
<span>{t.captionLabel}</span>
|
||||||
|
<input className="input" value={caption} onChange={(e) => setCaption(e.target.value)} />
|
||||||
|
</label>
|
||||||
|
{upload.error && <div className="alert alert--error">{upload.error}</div>}
|
||||||
|
<div className="form-actions">
|
||||||
|
<button type="submit" className="btn btn--primary" disabled={upload.pending}>
|
||||||
|
{upload.pending ? t.uploading : t.uploadButton}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
{photos.loading && <p className="muted">{de.common.loading}</p>}
|
||||||
|
{photos.error && (
|
||||||
|
<div className="alert alert--error">
|
||||||
|
<span>{photos.error}</span>
|
||||||
|
<button type="button" className="btn" onClick={photos.reload}>
|
||||||
|
{de.common.retry}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{removal.error && <div className="alert alert--error">{removal.error}</div>}
|
||||||
|
|
||||||
|
{!photos.loading && !photos.error && items.length === 0 && (
|
||||||
|
<p className="muted">{t.empty}</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{items.length > 0 && (
|
||||||
|
<ul className="photo-grid">
|
||||||
|
{[...items]
|
||||||
|
.sort((a, b) => a.sortOrder - b.sortOrder)
|
||||||
|
.map((p) => (
|
||||||
|
<li key={p.id} className="photo-card">
|
||||||
|
<img src={photoSrc(p)} alt={p.caption ?? p.fileName} loading="lazy" />
|
||||||
|
<div className="photo-card__bar">
|
||||||
|
<span className="photo-card__caption">
|
||||||
|
{profile?.id === p.id && <span className="badge">{t.profileBadge}</span>}{' '}
|
||||||
|
{p.caption ?? ''}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn--danger"
|
||||||
|
onClick={() => onDelete(p.id)}
|
||||||
|
disabled={removal.pending}
|
||||||
|
>
|
||||||
|
{de.common.delete}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
148
gerbil-manager-web/src/components/GerbilWeightTab.tsx
Normal file
148
gerbil-manager-web/src/components/GerbilWeightTab.tsx
Normal file
@@ -0,0 +1,148 @@
|
|||||||
|
/**
|
||||||
|
* FEAT-6: Gewicht-Tab — Schnell-Erfassung (Datum vorbelegt mit heute,
|
||||||
|
* großes touch-freundliches Gramm-Feld), Wachstumskurve (eigenes SVG,
|
||||||
|
* keine Chart-Bibliothek) + Verlaufsliste mit Löschen.
|
||||||
|
*/
|
||||||
|
import { useState, type FormEvent } from 'react'
|
||||||
|
import { de } from '../strings/de'
|
||||||
|
import {
|
||||||
|
createWeightRecord,
|
||||||
|
deleteWeightRecord,
|
||||||
|
listWeightRecords,
|
||||||
|
} from '../api/weightRecords'
|
||||||
|
import { useApi, useMutation } from '../hooks/useApi'
|
||||||
|
import { formatDate } from '../format/labels'
|
||||||
|
import { todayISO } from '../format/dates'
|
||||||
|
import LineChart from './LineChart'
|
||||||
|
|
||||||
|
export default function GerbilWeightTab({ gerbilId }: { gerbilId: string }) {
|
||||||
|
const t = de.pages.tierTabs.weight
|
||||||
|
|
||||||
|
const records = useApi(() => listWeightRecords(gerbilId), [gerbilId])
|
||||||
|
|
||||||
|
const [date, setDate] = useState(todayISO())
|
||||||
|
const [grams, setGrams] = useState('')
|
||||||
|
const [errors, setErrors] = useState<{ date?: string; grams?: string }>({})
|
||||||
|
|
||||||
|
const add = useMutation((weightGrams: number) =>
|
||||||
|
createWeightRecord({ gerbilId, date, weightGrams }),
|
||||||
|
)
|
||||||
|
const removal = useMutation((recordId: string) => deleteWeightRecord(recordId))
|
||||||
|
|
||||||
|
async function onSubmit(e: FormEvent) {
|
||||||
|
e.preventDefault()
|
||||||
|
const value = Number(grams)
|
||||||
|
const next: { date?: string; grams?: string } = {}
|
||||||
|
if (!date) next.date = t.validation.dateRequired
|
||||||
|
if (grams.trim() === '' || Number.isNaN(value)) next.grams = t.validation.weightRequired
|
||||||
|
else if (value < 1 || value > 500 || !Number.isInteger(value))
|
||||||
|
next.grams = t.validation.weightRange
|
||||||
|
setErrors(next)
|
||||||
|
if (Object.keys(next).length > 0) return
|
||||||
|
|
||||||
|
await add.run(value)
|
||||||
|
setGrams('')
|
||||||
|
setDate(todayISO())
|
||||||
|
records.reload()
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onDelete(recordId: string) {
|
||||||
|
if (!window.confirm(t.deleteConfirm)) return
|
||||||
|
await removal.run(recordId)
|
||||||
|
records.reload()
|
||||||
|
}
|
||||||
|
|
||||||
|
const items = records.data ?? []
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{/* Schnell-Erfassung: ein Daumen, eine Rennmaus in der anderen Hand. */}
|
||||||
|
<form className="weight-quick-add" onSubmit={onSubmit} noValidate>
|
||||||
|
<h4>{t.addTitle}</h4>
|
||||||
|
<div className="weight-quick-add__row">
|
||||||
|
<label className="field">
|
||||||
|
<span>{t.fields.date}</span>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
className="input"
|
||||||
|
value={date}
|
||||||
|
onChange={(e) => setDate(e.target.value)}
|
||||||
|
aria-invalid={Boolean(errors.date)}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label className="field">
|
||||||
|
<span>{t.fields.weightGrams}</span>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
inputMode="numeric"
|
||||||
|
min={1}
|
||||||
|
max={500}
|
||||||
|
step={1}
|
||||||
|
className="input input--xl"
|
||||||
|
value={grams}
|
||||||
|
placeholder="0"
|
||||||
|
onChange={(e) => setGrams(e.target.value)}
|
||||||
|
aria-invalid={Boolean(errors.grams)}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<button type="submit" className="btn btn--primary" disabled={add.pending}>
|
||||||
|
{add.pending ? t.adding : t.addButton}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{errors.date && <small className="error-text">{errors.date}</small>}
|
||||||
|
{errors.grams && <small className="error-text">{errors.grams}</small>}
|
||||||
|
{add.error && <div className="alert alert--error">{add.error}</div>}
|
||||||
|
</form>
|
||||||
|
|
||||||
|
{records.loading && <p className="muted">{de.common.loading}</p>}
|
||||||
|
{records.error && (
|
||||||
|
<div className="alert alert--error">
|
||||||
|
<span>{records.error}</span>
|
||||||
|
<button type="button" className="btn" onClick={records.reload}>
|
||||||
|
{de.common.retry}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{removal.error && <div className="alert alert--error">{removal.error}</div>}
|
||||||
|
|
||||||
|
{!records.loading && !records.error && items.length === 0 && (
|
||||||
|
<p className="muted">{t.empty}</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{items.length > 0 && (
|
||||||
|
<>
|
||||||
|
<h4>{t.chartTitle}</h4>
|
||||||
|
{items.length >= 2 ? (
|
||||||
|
<LineChart
|
||||||
|
title={t.chartTitle}
|
||||||
|
unit={t.gramsSuffix}
|
||||||
|
points={items.map((r) => ({ date: r.date, value: r.weightGrams }))}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<p className="muted">{t.chartNeedsTwo}</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<h4>{t.historyTitle}</h4>
|
||||||
|
<ul className="card-list">
|
||||||
|
{items.map((r) => (
|
||||||
|
<li key={r.id} className="record-card record-card--row">
|
||||||
|
<span className="record-card__date">{formatDate(r.date)}</span>
|
||||||
|
<strong>
|
||||||
|
{r.weightGrams} {t.gramsSuffix}
|
||||||
|
</strong>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn--danger"
|
||||||
|
onClick={() => onDelete(r.id)}
|
||||||
|
disabled={removal.pending}
|
||||||
|
>
|
||||||
|
{de.common.delete}
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
121
gerbil-manager-web/src/components/LineChart.tsx
Normal file
121
gerbil-manager-web/src/components/LineChart.tsx
Normal file
@@ -0,0 +1,121 @@
|
|||||||
|
/**
|
||||||
|
* FEAT-6: Schlichtes, responsives SVG-Liniendiagramm (eine Serie) —
|
||||||
|
* bewusst OHNE Chart-Bibliothek (god-Entscheidung für v1).
|
||||||
|
* X-Achse: Datum (TT.MM.JJ), Y-Achse: Wert mit Einheiten-Suffix.
|
||||||
|
*/
|
||||||
|
|
||||||
|
export interface ChartPoint {
|
||||||
|
/** ISO-Datum "YYYY-MM-DD". */
|
||||||
|
date: string
|
||||||
|
value: number
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
points: ChartPoint[]
|
||||||
|
/** Einheiten-Suffix der Y-Achse, z. B. "g". */
|
||||||
|
unit: string
|
||||||
|
/** Zugänglicher Titel des Diagramms. */
|
||||||
|
title: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const W = 600
|
||||||
|
const H = 260
|
||||||
|
const PAD = { top: 16, right: 16, bottom: 36, left: 48 }
|
||||||
|
|
||||||
|
function shortDate(iso: string): string {
|
||||||
|
const [y, m, d] = iso.split('-')
|
||||||
|
return y && m && d ? `${d}.${m}.${y.slice(2)}` : iso
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function LineChart({ points, unit, title }: Props) {
|
||||||
|
// Aufsteigend nach Datum; mindestens 2 Punkte werden vom Aufrufer garantiert.
|
||||||
|
const sorted = [...points].sort((a, b) => a.date.localeCompare(b.date))
|
||||||
|
const xs = sorted.map((p) => Date.parse(p.date))
|
||||||
|
const ys = sorted.map((p) => p.value)
|
||||||
|
|
||||||
|
const xMin = Math.min(...xs)
|
||||||
|
const xMax = Math.max(...xs)
|
||||||
|
const yLo = Math.min(...ys)
|
||||||
|
const yHi = Math.max(...ys)
|
||||||
|
// Y-Skala mit Luft nach oben/unten, auf ganze Werte gerundet.
|
||||||
|
const yPad = Math.max(1, Math.round((yHi - yLo) * 0.15))
|
||||||
|
const yMin = Math.max(0, yLo - yPad)
|
||||||
|
const yMax = yHi + yPad
|
||||||
|
|
||||||
|
const x = (t: number) =>
|
||||||
|
xMax === xMin
|
||||||
|
? (PAD.left + (W - PAD.right)) / 2
|
||||||
|
: PAD.left + ((t - xMin) / (xMax - xMin)) * (W - PAD.left - PAD.right)
|
||||||
|
const y = (v: number) => H - PAD.bottom - ((v - yMin) / (yMax - yMin)) * (H - PAD.top - PAD.bottom)
|
||||||
|
|
||||||
|
const path = sorted
|
||||||
|
.map((p, i) => `${i === 0 ? 'M' : 'L'}${x(Date.parse(p.date)).toFixed(1)},${y(p.value).toFixed(1)}`)
|
||||||
|
.join(' ')
|
||||||
|
|
||||||
|
const yTicks = [yMin, Math.round((yMin + yMax) / 2), yMax]
|
||||||
|
// X-Ticks: erstes, mittleres und letztes Datum (dedupliziert).
|
||||||
|
const xTickPoints = [...new Set([0, Math.floor((sorted.length - 1) / 2), sorted.length - 1])].map(
|
||||||
|
(i) => sorted[i],
|
||||||
|
)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
className="line-chart"
|
||||||
|
viewBox={`0 0 ${W} ${H}`}
|
||||||
|
role="img"
|
||||||
|
aria-label={title}
|
||||||
|
preserveAspectRatio="xMidYMid meet"
|
||||||
|
>
|
||||||
|
{/* Achsen */}
|
||||||
|
<line x1={PAD.left} y1={PAD.top} x2={PAD.left} y2={H - PAD.bottom} className="line-chart__axis" />
|
||||||
|
<line
|
||||||
|
x1={PAD.left}
|
||||||
|
y1={H - PAD.bottom}
|
||||||
|
x2={W - PAD.right}
|
||||||
|
y2={H - PAD.bottom}
|
||||||
|
className="line-chart__axis"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Y-Beschriftung + Hilfslinien */}
|
||||||
|
{yTicks.map((v) => (
|
||||||
|
<g key={v}>
|
||||||
|
<line
|
||||||
|
x1={PAD.left}
|
||||||
|
y1={y(v)}
|
||||||
|
x2={W - PAD.right}
|
||||||
|
y2={y(v)}
|
||||||
|
className="line-chart__grid"
|
||||||
|
/>
|
||||||
|
<text x={PAD.left - 6} y={y(v) + 4} textAnchor="end" className="line-chart__label">
|
||||||
|
{v} {unit}
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* X-Beschriftung */}
|
||||||
|
{xTickPoints.map((p) => (
|
||||||
|
<text
|
||||||
|
key={p.date}
|
||||||
|
x={x(Date.parse(p.date))}
|
||||||
|
y={H - PAD.bottom + 18}
|
||||||
|
textAnchor="middle"
|
||||||
|
className="line-chart__label"
|
||||||
|
>
|
||||||
|
{shortDate(p.date)}
|
||||||
|
</text>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* Serie */}
|
||||||
|
<path d={path} className="line-chart__line" fill="none" />
|
||||||
|
{sorted.map((p) => (
|
||||||
|
<circle
|
||||||
|
key={`${p.date}-${p.value}`}
|
||||||
|
cx={x(Date.parse(p.date))}
|
||||||
|
cy={y(p.value)}
|
||||||
|
r={3.5}
|
||||||
|
className="line-chart__dot"
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
}
|
||||||
9
gerbil-manager-web/src/format/dates.ts
Normal file
9
gerbil-manager-web/src/format/dates.ts
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
/** FEAT-6: Datums-Helfer für Formulare. */
|
||||||
|
|
||||||
|
/** Heutiges Datum als ISO "YYYY-MM-DD" in LOKALER Zeit (nicht UTC). */
|
||||||
|
export function todayISO(): string {
|
||||||
|
const d = new Date()
|
||||||
|
const m = String(d.getMonth() + 1).padStart(2, '0')
|
||||||
|
const day = String(d.getDate()).padStart(2, '0')
|
||||||
|
return `${d.getFullYear()}-${m}-${day}`
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user