-
{formatNumber(p99)}{" "}
-
ms
+
+ {formatNumber(p99)}
+ ms
);
},
diff --git a/apps/web/src/components/monitor-charts/chart.tsx b/apps/web/src/components/monitor-charts/chart.tsx
index 7c596f0e..6b17a17e 100644
--- a/apps/web/src/components/monitor-charts/chart.tsx
+++ b/apps/web/src/components/monitor-charts/chart.tsx
@@ -1,12 +1,15 @@
"use client";
-import type { CustomTooltipProps, EventProps } from "@tremor/react";
-import { LineChart } from "@tremor/react";
-import { useState } from "react";
-
-import { cn } from "@/lib/utils";
import type { Region } from "@openstatus/db/src/schema/constants";
-import { dataFormatter, regionFormatter } from "./utils";
+import {
+ ChartContainer,
+ ChartLegend,
+ ChartLegendContent,
+ ChartTooltip,
+ ChartTooltipContent,
+} from "@openstatus/ui";
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
+import { regionFormatter } from "./utils";
interface ChartProps {
data: { timestamp: string; [key: string]: string | number }[];
@@ -14,85 +17,132 @@ interface ChartProps {
}
export function Chart({ data, regions }: ChartProps) {
- const [value, setValue] = useState
(null);
return (
- customTooltip({ ...props, value })}
- showAnimation={true}
- />
+
+
+ }
+ verticalAlign="top"
+ />
+ {
+ const min = Math.max(Math.abs(dataMin) - 25, 0);
+ const max = dataMax + 100;
+ return [min, max];
+ }}
+ />
+ {
+ return new Date(value).toLocaleDateString("en-US", {
+ day: "numeric",
+ month: "short",
+ hour: "numeric",
+ minute: "numeric",
+ });
+ }}
+ />
+
+ {
+ return new Date(value).toLocaleDateString("en-US", {
+ day: "numeric",
+ month: "short",
+ hour: "numeric",
+ minute: "numeric",
+ });
+ }}
+ formatter={(value, name) => (
+ <>
+
+ {/* {chartConfig[name as keyof typeof chartConfig]?.label || name} */}
+ {regionFormatter(name as Region)}
+
+ {value}
+
+ ms
+
+
+
+ )}
+ />
+ }
+ />
+ {regions.map((region) => {
+ return (
+
+ );
+ })}
+
+
);
}
-const customTooltip = ({
- payload,
- active,
- label,
- value,
-}: CustomTooltipProps & { value: EventProps }) => {
- if (!active || !payload) return null;
- return (
-
-
-
- {label}
-
- {payload
- .filter((category) => category.type !== undefined) // tremor adds additional data to the payload, we don't want that
- .map((category, idx) => {
- const isActive = value
- ? value.categoryClicked === category.dataKey
- : true;
- return (
-
- key={idx}
- className={cn("flex flex-1 gap-2", !isActive && "opacity-60")}
- >
-
-
-
- {regionFormatter(category.dataKey as Region)}
-
-
- {dataFormatter(category.value as number)}
-
-
-
- );
- })}
-
-