108 lines
2.4 KiB
TypeScript
108 lines
2.4 KiB
TypeScript
import { omit } from '@/utils/omit'
|
|
import { DashboardGraphData } from '@/utils/parseDashboard'
|
|
import { useEffect, useState } from 'preact/hooks'
|
|
|
|
type Props = {
|
|
value?: DashboardGraphData
|
|
onChange: (data: DashboardGraphData) => void
|
|
}
|
|
|
|
export const GraphSettings = ({ value, onChange }: Props) => {
|
|
const [formState, setFormState] = useState(() => ({
|
|
...(value && omit(value, ['type'])),
|
|
}))
|
|
|
|
const handleChange = (e: Event) => {
|
|
const target = e.target as HTMLSelectElement | HTMLInputElement
|
|
|
|
setFormState({
|
|
...formState,
|
|
[target.name]: target.value,
|
|
})
|
|
}
|
|
|
|
useEffect(() => {
|
|
onChange({ ...formState, type: 'graph' })
|
|
}, [formState])
|
|
|
|
return (
|
|
<>
|
|
<div className="input">
|
|
<label>Graph Type</label>
|
|
<select
|
|
name="graphType"
|
|
value={formState.graphType || 'line'}
|
|
onChange={handleChange}
|
|
>
|
|
<option value="line">Line</option>
|
|
<option value="points">Points</option>
|
|
<option value="lineAndPoints">Line + Points</option>
|
|
<option value="bar">Bar</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="input">
|
|
<label>Fill area</label>
|
|
<select
|
|
name="fill"
|
|
value={formState.fill || ''}
|
|
onChange={handleChange}
|
|
>
|
|
<option value="">None</option>
|
|
<option value="tozeroy">To zero</option>
|
|
<option value="tonexty">To next value</option>
|
|
<option value="toself">To self</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="input">
|
|
<label>Unit</label>
|
|
<input name="unit" value={formState.unit} onChange={handleChange} />
|
|
</div>
|
|
<div className="input">
|
|
<label>Min value</label>
|
|
<input
|
|
type="number"
|
|
step="any"
|
|
name="min"
|
|
value={formState.min}
|
|
onChange={handleChange}
|
|
/>
|
|
</div>
|
|
<div className="input">
|
|
<label>Max value</label>
|
|
<input
|
|
type="number"
|
|
step="any"
|
|
name="max"
|
|
value={formState.max}
|
|
onChange={handleChange}
|
|
/>
|
|
</div>
|
|
<div className="input">
|
|
<label>Color mode</label>
|
|
<select
|
|
name="colorMode"
|
|
value={formState.colorMode ?? ''}
|
|
onChange={handleChange}
|
|
>
|
|
<option value="">None</option>
|
|
<option value="static">Static</option>
|
|
</select>
|
|
</div>
|
|
|
|
{formState.colorMode === 'static' && (
|
|
<div className="input">
|
|
<label>Max value</label>
|
|
<input
|
|
type="color"
|
|
name="staticColor"
|
|
value={formState.staticColor}
|
|
onChange={handleChange}
|
|
/>
|
|
</div>
|
|
)}
|
|
</>
|
|
)
|
|
}
|