From e5ee2d6b2070f7b93c134bd63fb36afc1ce51791 Mon Sep 17 00:00:00 2001
From: Maximilian Kaske <56969857+mxkaske@users.noreply.github.com>
Date: Thu, 31 Jul 2025 21:19:02 +0200
Subject: [PATCH] fix: regions chart - table (#1303)

---
 .../(dashboard)/monitors/[id]/overview/client.tsx    |  9 ++++++++-
 .../src/components/chart/chart-line-regions.tsx      | 12 ++++++++----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/apps/dashboard/src/app/(dashboard)/monitors/[id]/overview/client.tsx b/apps/dashboard/src/app/(dashboard)/monitors/[id]/overview/client.tsx
index 9016eef1..bf97213d 100644
--- a/apps/dashboard/src/app/(dashboard)/monitors/[id]/overview/client.tsx
+++ b/apps/dashboard/src/app/(dashboard)/monitors/[id]/overview/client.tsx
@@ -173,7 +173,14 @@ export function Client() {
             <TabsTrigger value="chart">Chart</TabsTrigger>
           </TabsList>
           <TabsContent value="table">
-            <DataTable data={regionMetrics} columns={regionColumns} />
+            <DataTable
+              data={regionMetrics}
+              columns={regionColumns}
+              defaultPagination={{
+                pageIndex: 0,
+                pageSize: selectedRegions.length,
+              }}
+            />
           </TabsContent>
           <TabsContent value="chart">
             <ChartLineRegions
diff --git a/apps/dashboard/src/components/chart/chart-line-regions.tsx b/apps/dashboard/src/components/chart/chart-line-regions.tsx
index 9da24025..362c79df 100644
--- a/apps/dashboard/src/components/chart/chart-line-regions.tsx
+++ b/apps/dashboard/src/components/chart/chart-line-regions.tsx
@@ -11,6 +11,7 @@ import {
   ChartTooltipContent,
 } from "@/components/ui/chart";
 import { regionColors } from "@/data/regions";
+import { useIsMobile } from "@/hooks/use-mobile";
 import { cn } from "@/lib/utils";
 import { flyRegionsDict } from "@openstatus/utils";
 import { ChartTooltipNumber } from "./chart-tooltip-number";
@@ -67,6 +68,7 @@ export function ChartLineRegions({
   data: TrendPoint[];
   regions: string[];
 }) {
+  const isMobile = useIsMobile();
   const trendData = data ?? [];
 
   console.log({ data, regions });
@@ -130,10 +132,12 @@ export function ChartLineRegions({
           orientation="right"
           tickFormatter={(value) => `${value}ms`}
         />
-        <ChartLegend
-          className="flex-wrap"
-          content={<ChartLegendContent className="text-nowrap" />}
-        />
+        {regions.length <= 6 && !isMobile ? (
+          <ChartLegend
+            className="flex-wrap"
+            content={<ChartLegendContent className="text-nowrap" />}
+          />
+        ) : null}
       </LineChart>
     </ChartContainer>
   );
-- 
2.51.2