Skip to content

Commit 7cde496

Browse files
wly-Liliewly-Lilie
committed
tamen
1 parent 56b52eb commit 7cde496

1 file changed

Lines changed: 100 additions & 33 deletions

File tree

‎app/(default)/(project)/TAMEn/chart/policy-rollouts-average.tsx‎

Lines changed: 100 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
"use client"
22

3-
import { TrendingUp } from "lucide-react"
3+
import * as React from "react"
44
import { Bar, BarChart, CartesianGrid, Rectangle, XAxis, YAxis } from "recharts"
55

66
import {
77
Card,
88
CardContent,
9-
CardDescription,
109
CardFooter,
1110
CardHeader,
1211
CardTitle,
@@ -57,35 +56,79 @@ const chartConfig = {
5756
},
5857
} satisfies ChartConfig
5958

59+
const X_AXIS_SHORT: Record<string, string> = {
60+
"1": "Herbal",
61+
"2": "Cable",
62+
"3": "Binder",
63+
"4": "Dish",
64+
"5": "Avg.",
65+
}
66+
6067
export function PolicyRolloutsAverage() {
68+
const [compactChart, setCompactChart] = React.useState(false)
69+
70+
React.useEffect(() => {
71+
const mq = window.matchMedia("(max-width: 640px)")
72+
const apply = () => setCompactChart(mq.matches)
73+
apply()
74+
mq.addEventListener("change", apply)
75+
return () => mq.removeEventListener("change", apply)
76+
}, [])
77+
6178
return (
6279
<Card className="border border-white/20 bg-black text-white">
6380
<CardHeader>
6481
<CardTitle className="text-sm md:text-base">Policy Success Rate (%)</CardTitle>
6582
</CardHeader>
6683
<CardContent className="p-2 md:p-4">
67-
<ChartContainer config={chartConfig} className="!aspect-auto h-[240px] md:h-[260px]">
68-
<BarChart accessibilityLayer data={chartData} margin={{
69-
top: 20,
70-
bottom: 20,
71-
left: 20,
72-
right: 20
73-
}}>
84+
<ChartContainer
85+
config={chartConfig}
86+
className="!aspect-auto h-[278px] md:h-[260px]"
87+
>
88+
<BarChart
89+
accessibilityLayer
90+
data={chartData}
91+
margin={{
92+
top: 12,
93+
bottom: compactChart ? 36 : 24,
94+
left: compactChart ? 8 : 16,
95+
right: compactChart ? 4 : 16,
96+
}}
97+
>
7498
<CartesianGrid vertical={false} />
75-
<XAxis className="select-none"
99+
<XAxis
100+
className="select-none"
76101
dataKey="category"
77102
tickLine={false}
78-
tickMargin={10}
103+
tickMargin={compactChart ? 4 : 8}
79104
axisLine={false}
80-
tickFormatter={(value) =>
81-
chartConfig[value as keyof typeof chartConfig]?.label
82-
}
105+
interval={0}
106+
height={compactChart ? 48 : 32}
107+
tick={{
108+
fontSize: compactChart ? 9 : 11,
109+
fill: "rgba(255,255,255,0.65)",
110+
}}
111+
angle={compactChart ? -32 : 0}
112+
textAnchor={compactChart ? "end" : "middle"}
113+
dy={compactChart ? 4 : 0}
114+
tickFormatter={(value) => {
115+
const v = String(value)
116+
if (compactChart && X_AXIS_SHORT[v]) return X_AXIS_SHORT[v]
117+
const full =
118+
chartConfig[v as keyof typeof chartConfig]?.label
119+
return typeof full === "string" ? full : v
120+
}}
83121
/>
84-
<YAxis
122+
<YAxis
85123
domain={[0, 100]}
86-
tickFormatter={(value) => `${(value).toFixed(0)}`}
124+
tickFormatter={(value) => `${value.toFixed(0)}`}
87125
tickLine={false}
88126
axisLine={false}
127+
width={compactChart ? 28 : 36}
128+
tick={{
129+
fontSize: compactChart ? 9 : 11,
130+
fill: "rgba(255,255,255,0.65)",
131+
}}
89132
/>
90133
<ChartTooltip
91134
cursor={false}
@@ -99,17 +142,20 @@ export function PolicyRolloutsAverage() {
99142
]
100143

101144
return (
102-
<div className="rounded-lg border border-white/20 bg-black/95 p-3 shadow-sm">
103-
<div className="mb-2 text-sm font-semibold text-white">
145+
<div className="max-w-[min(100vw-2rem,280px)] rounded-lg border border-white/20 bg-black/95 p-2 shadow-sm sm:max-w-none sm:p-3">
146+
<div className="mb-1.5 text-xs font-semibold leading-snug text-white sm:mb-2 sm:text-sm">
104147
{chartConfig[label as keyof typeof chartConfig]?.label || label}
105148
</div>
106-
<div className="grid gap-1.5">
149+
<div className="grid gap-1 sm:gap-1.5">
107150
{payload.map((entry, index) => (
108-
<div key={`${entry.dataKey}-${index}`} className="flex items-center justify-between gap-3">
109-
<span className="text-xs text-gray-300">
151+
<div
152+
key={`${entry.dataKey}-${index}`}
153+
className="flex items-start justify-between gap-2 sm:items-center sm:gap-3"
154+
>
155+
<span className="min-w-0 flex-1 text-[10px] leading-tight text-gray-300 sm:text-xs">
110156
{methodLabels[index] || String(entry.dataKey)}
111157
</span>
112-
<span className="text-sm font-semibold text-white">
158+
<span className="shrink-0 text-xs font-semibold text-white sm:text-sm">
113159
{Number(entry.value).toFixed(0)}%
114160
</span>
115161
</div>
@@ -167,19 +213,40 @@ export function PolicyRolloutsAverage() {
167213
</BarChart>
168214
</ChartContainer>
169215
</CardContent>
170-
<CardFooter className="flex-col items-start gap-2 text-sm">
171-
<div className="text-muted-foreground select-none flex flex-row gap-4">
172-
<div className="flex items-center gap-2">
173-
<div className="w-4 h-4 rounded-sm" style={{ backgroundColor: "#B8C9F0" }}></div>
174-
<span>ACT(Vision-only)</span>
216+
<CardFooter className="flex-col items-stretch gap-2 px-2 pb-4 pt-0 sm:px-6">
217+
<div className="text-muted-foreground select-none flex flex-col gap-2 text-[10px] leading-snug sm:flex-row sm:flex-wrap sm:gap-x-5 sm:gap-y-2 sm:text-xs md:text-sm">
218+
<div className="flex min-w-0 items-start gap-2 sm:items-center">
219+
<div
220+
className="mt-0.5 h-3 w-3 shrink-0 rounded-sm sm:mt-0 sm:h-4 sm:w-4"
221+
style={{ backgroundColor: "#B8C9F0" }}
222+
/>
223+
<span className="break-words text-white/80" title="ACT(Vision-only)">
224+
ACT(Vision-only)
225+
</span>
175226
</div>
176-
<div className="flex items-center gap-2">
177-
<div className="w-4 h-4 rounded-sm" style={{ backgroundColor: "#7C9AE8" }}></div>
178-
<span>Ours-a (+Tactile +Pretrained)</span>
227+
<div className="flex min-w-0 items-start gap-2 sm:items-center">
228+
<div
229+
className="mt-0.5 h-3 w-3 shrink-0 rounded-sm sm:mt-0 sm:h-4 sm:w-4"
230+
style={{ backgroundColor: "#7C9AE8" }}
231+
/>
232+
<span
233+
className="break-words text-white/80"
234+
title="Ours-a (+Tactile +Pretrained)"
235+
>
236+
Ours-a (+Tactile +Pretrained)
237+
</span>
179238
</div>
180-
<div className="flex items-center gap-2">
181-
<div className="w-4 h-4 rounded-sm" style={{ backgroundColor: "#3D56C8" }}></div>
182-
<span>Ours-B (+Tactile +Pretrained +DAgger)</span>
239+
<div className="flex min-w-0 items-start gap-2 sm:items-center">
240+
<div
241+
className="mt-0.5 h-3 w-3 shrink-0 rounded-sm sm:mt-0 sm:h-4 sm:w-4"
242+
style={{ backgroundColor: "#3D56C8" }}
243+
/>
244+
<span
245+
className="break-words text-white/80"
246+
title="Ours-B (+Tactile +Pretrained +DAgger)"
247+
>
248+
Ours-B (+Tactile +Pretrained +DAgger)
249+
</span>
183250
</div>
184251
</div>
185252
</CardFooter>

0 commit comments

Comments
 (0)