43 lines
1.7 KiB
TypeScript
43 lines
1.7 KiB
TypeScript
import { slotsFor } from "@/components/Common/UplotChart"
|
|
import { useBoundValues } from "./dataContext"
|
|
import { usePalette } from "./settings"
|
|
import { useUi } from "./ui"
|
|
import { rowsOf } from "./ui/core/config"
|
|
import { barReadings } from "./ui/core/values"
|
|
import type { WidgetProps } from "./widgets"
|
|
|
|
/**
|
|
* Several readings on one tile, a row each.
|
|
*
|
|
* It used to be one reading with up to three nested inside its own fill — the
|
|
* PV share of an inverter's input drawn within the input. That said one thing
|
|
* well, containment, and everything else badly: the nested readings all had to
|
|
* share a single colour to stay legible against the fill, three was the
|
|
* ceiling, and none of them could carry a scale of its own.
|
|
*
|
|
* A row each says the same thing where it is true — two rows on one scale
|
|
* still read as a share, because the shorter bar *is* the smaller part — and
|
|
* says the things the old shape could not: a battery percentage beside a load
|
|
* in kW, told apart by the dashboard's own data colours rather than by a
|
|
* gutter. Documents written the old way are read as rows (`rowsOf`).
|
|
*/
|
|
export function BarWidget({ widget }: WidgetProps) {
|
|
const { Bar } = useUi()
|
|
const rows = rowsOf(widget).filter((row) => row.message)
|
|
const live = useBoundValues(rows.map((row) => row.message as string))
|
|
// The dashboard's own data colours, in the order a chart would take them, so
|
|
// a bar and a chart of the same readings agree about which line is which.
|
|
const colors = slotsFor(rows.length, usePalette())
|
|
|
|
if (rows.length === 0) {
|
|
return <p className="text-muted-foreground">Pick a message.</p>
|
|
}
|
|
|
|
return (
|
|
<Bar
|
|
label={widget.title || "Readings"}
|
|
rows={barReadings(widget, live, colors)}
|
|
/>
|
|
)
|
|
}
|