openstatus.dev
Openstatus
www.openstatus.dev
fix: regions chart - table (#1303)
authored by
Maximilian Kaske
and committed by
GitHub
e5ee2d6b
c14536d3
+16
-5
+8
-1
apps/dashboard/src/app/(dashboard)/monitors/[id]/overview/client.tsx
+8
-1
apps/dashboard/src/app/(dashboard)/monitors/[id]/overview/client.tsx
···
173
173
<TabsTrigger value="chart">Chart</TabsTrigger>
174
174
</TabsList>
175
175
<TabsContent value="table">
176
-
<DataTable data={regionMetrics} columns={regionColumns} />
176
+
<DataTable
177
+
data={regionMetrics}
178
+
columns={regionColumns}
179
+
defaultPagination={{
180
+
pageIndex: 0,
181
+
pageSize: selectedRegions.length,
182
+
}}
183
+
/>
177
184
</TabsContent>
178
185
<TabsContent value="chart">
179
186
<ChartLineRegions
+8
-4
apps/dashboard/src/components/chart/chart-line-regions.tsx
+8
-4
apps/dashboard/src/components/chart/chart-line-regions.tsx
···
11
11
ChartTooltipContent,
12
12
} from "@/components/ui/chart";
13
13
import { regionColors } from "@/data/regions";
14
+
import { useIsMobile } from "@/hooks/use-mobile";
14
15
import { cn } from "@/lib/utils";
15
16
import { flyRegionsDict } from "@openstatus/utils";
16
17
import { ChartTooltipNumber } from "./chart-tooltip-number";
···
67
68
data: TrendPoint[];
68
69
regions: string[];
69
70
}) {
71
+
const isMobile = useIsMobile();
70
72
const trendData = data ?? [];
71
73
72
74
console.log({ data, regions });
···
130
132
orientation="right"
131
133
tickFormatter={(value) => `${value}ms`}
132
134
/>
133
-
<ChartLegend
134
-
className="flex-wrap"
135
-
content={<ChartLegendContent className="text-nowrap" />}
136
-
/>
135
+
{regions.length <= 6 && !isMobile ? (
136
+
<ChartLegend
137
+
className="flex-wrap"
138
+
content={<ChartLegendContent className="text-nowrap" />}
139
+
/>
140
+
) : null}
137
141
</LineChart>
138
142
</ChartContainer>
139
143
);