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
76 lines
2.0 KiB
TypeScript
76 lines
2.0 KiB
TypeScript
"use client"
|
|
|
|
import { useMemo } from "react"
|
|
import { EChartWrapper, CHART_THEME, getDeviceColor } from "./EChartWrapper"
|
|
import type { EChartsOption } from "echarts"
|
|
|
|
interface RangeEntry {
|
|
id: string
|
|
hardwareSlug: string
|
|
fpsLow: number
|
|
fpsAvg: number
|
|
fpsHigh: number
|
|
isRawPerformer: boolean
|
|
}
|
|
|
|
export function FpsRangeChart({
|
|
data,
|
|
className,
|
|
}: {
|
|
data: RangeEntry[]
|
|
className?: string
|
|
}) {
|
|
const option = useMemo<EChartsOption>(() => {
|
|
const devices = [...new Set(data.map((d) => d.hardwareSlug))]
|
|
const sorted = [...data].sort((a, b) => b.fpsAvg - a.fpsAvg)
|
|
const labels = sorted.map((_, i) => `#${i + 1}`)
|
|
|
|
const series = devices.map((device, idx) => ({
|
|
name: device.replace(/-/g, " "),
|
|
type: "bar" as const,
|
|
stack: "range",
|
|
data: sorted.map((entry) => {
|
|
if (entry.hardwareSlug !== device) return 0
|
|
return entry.fpsHigh - entry.fpsLow
|
|
}),
|
|
itemStyle: {
|
|
color: getDeviceColor(idx),
|
|
borderRadius: [2, 2, 0, 0],
|
|
},
|
|
barWidth: "60%",
|
|
}))
|
|
|
|
return {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
backgroundColor: "#1a1025",
|
|
borderColor: CHART_THEME.border,
|
|
textStyle: { color: CHART_THEME.text, fontSize: 12 },
|
|
},
|
|
legend: {
|
|
top: 0,
|
|
textStyle: { color: CHART_THEME.textMuted, fontSize: 11 },
|
|
},
|
|
grid: { top: 30, right: 16, bottom: 24, left: 40 },
|
|
xAxis: {
|
|
type: "category",
|
|
data: labels,
|
|
axisLabel: { color: CHART_THEME.textMuted, fontSize: 10 },
|
|
axisLine: { lineStyle: { color: CHART_THEME.border } },
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
name: "FPS Range",
|
|
nameTextStyle: { color: CHART_THEME.textMuted, fontSize: 10 },
|
|
axisLabel: { color: CHART_THEME.textMuted, fontSize: 10 },
|
|
splitLine: { lineStyle: { color: CHART_THEME.border, opacity: 0.3 } },
|
|
},
|
|
series,
|
|
}
|
|
}, [data])
|
|
|
|
if (data.length === 0) return null
|
|
|
|
return <EChartWrapper option={option} height={220} className={className} />
|
|
}
|