adrianbonpin
cd72b7a948
- Move web app into apps/web/ - Create packages/shared/ with shared types - Create plugins/decky-vault/ scaffold - Root package.json manages workspaces only
102 lines
3.0 KiB
TypeScript
102 lines
3.0 KiB
TypeScript
"use client"
|
|
|
|
import { EChartWrapper, getDeviceColor } from "./EChartWrapper"
|
|
|
|
interface BatteryLifePoint {
|
|
id: string
|
|
hardwareSlug: string
|
|
tdpWatts: number
|
|
estimatedBatteryHours: number
|
|
wattHours: number | null
|
|
tdpMax: number | null
|
|
estimatedAtMaxTdpMin: number | null
|
|
}
|
|
|
|
interface BatteryLifeChartProps {
|
|
data: BatteryLifePoint[]
|
|
deviceNames?: Record<string, string>
|
|
}
|
|
|
|
export function BatteryLifeChart({ data, deviceNames }: BatteryLifeChartProps) {
|
|
if (!data || data.length === 0) {
|
|
return <div className="flex items-center justify-center h-48 text-sm text-text/40">No battery data available</div>
|
|
}
|
|
|
|
// Group by device for separate series
|
|
const deviceGroups = new Map<string, BatteryLifePoint[]>()
|
|
for (const point of data) {
|
|
const existing = deviceGroups.get(point.hardwareSlug) || []
|
|
existing.push(point)
|
|
deviceGroups.set(point.hardwareSlug, existing)
|
|
}
|
|
|
|
// Build trend lines: for each device, compute wattHours / tdp = hours for a range of TDPs
|
|
const series: Array<Record<string, unknown>> = []
|
|
let seriesIdx = 0
|
|
|
|
for (const [slug, points] of deviceGroups.entries()) {
|
|
const color = getDeviceColor(seriesIdx)
|
|
const name = deviceNames?.[slug] || slug
|
|
|
|
// Scatter points: TDP vs battery hours
|
|
series.push({
|
|
name,
|
|
type: "scatter" as const,
|
|
data: points.map((p) => [p.tdpWatts, p.estimatedBatteryHours]),
|
|
itemStyle: { color },
|
|
symbolSize: 10,
|
|
})
|
|
|
|
// Trend line: compute theoretical curve using average wattHours for this device
|
|
const avgWh = points.reduce((sum, p) => sum + (p.wattHours ?? 0), 0) / points.length
|
|
if (avgWh > 0) {
|
|
const tdpRange = [2, 5, 8, 10, 12, 15, 18, 20, 25, 30].filter(
|
|
(tdp) => tdp <= (points[0].tdpMax ?? 30),
|
|
)
|
|
series.push({
|
|
name: `${name} (est.)`,
|
|
type: "line" as const,
|
|
data: tdpRange.map((tdp) => [tdp, Math.round((avgWh / tdp) * 10) / 10]),
|
|
lineStyle: { color, type: "dashed" as const, width: 1 },
|
|
symbol: "none",
|
|
silent: true,
|
|
})
|
|
}
|
|
|
|
seriesIdx++
|
|
}
|
|
|
|
const option = {
|
|
tooltip: {
|
|
trigger: "item" as const,
|
|
formatter: (params: unknown) => {
|
|
const p = params as { seriesName?: string; value?: [number, number] }
|
|
if (!p.seriesName || p.seriesName.includes("(est.)")) return ""
|
|
return `${p.seriesName}<br/>TDP: ${p.value?.[0]}W<br/>Battery: ~${p.value?.[1]}h`
|
|
},
|
|
},
|
|
legend: {
|
|
textStyle: { color: "#999" },
|
|
top: 0,
|
|
},
|
|
grid: { left: 60, right: 20, top: 40, bottom: 40 },
|
|
xAxis: {
|
|
type: "value" as const,
|
|
name: "TDP (W)",
|
|
nameTextStyle: { color: "#999" },
|
|
splitLine: { lineStyle: { color: "#333" } },
|
|
axisLabel: { color: "#999" },
|
|
},
|
|
yAxis: {
|
|
type: "value" as const,
|
|
name: "Battery (h)",
|
|
nameTextStyle: { color: "#999" },
|
|
splitLine: { lineStyle: { color: "#333" } },
|
|
axisLabel: { color: "#999" },
|
|
},
|
|
series,
|
|
}
|
|
|
|
return <EChartWrapper option={option} height={300} />
|
|
}
|