♻️ use linechart

This commit is contained in:
Fred KISSIE
2025-11-21 06:33:47 +01:00
parent 1b643fb4b6
commit 6368b9d837

View File

@@ -34,7 +34,7 @@ import {
} from "./InfoSection"; } from "./InfoSection";
import { WorldMap } from "./WorldMap"; import { WorldMap } from "./WorldMap";
import { countryCodeToFlagEmoji } from "@app/lib/countryCodeToFlagEmoji"; import { countryCodeToFlagEmoji } from "@app/lib/countryCodeToFlagEmoji";
import { useTheme } from "next-themes";
import { import {
Tooltip, Tooltip,
TooltipContent, TooltipContent,
@@ -49,7 +49,7 @@ import {
ChartTooltipContent, ChartTooltipContent,
type ChartConfig type ChartConfig
} from "./ui/chart"; } from "./ui/chart";
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"; import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
export type AnalyticsContentProps = { export type AnalyticsContentProps = {
orgId: string; orgId: string;
@@ -365,7 +365,7 @@ function RequestChart(props: RequestChartProps) {
config={chartConfig} config={chartConfig}
className="min-h-[200px] w-full h-80" className="min-h-[200px] w-full h-80"
> >
<AreaChart accessibilityLayer data={props.data}> <LineChart accessibilityLayer data={props.data}>
<ChartLegend content={<ChartLegendContent />} /> <ChartLegend content={<ChartLegendContent />} />
<ChartTooltip <ChartTooltip
content={ content={
@@ -412,23 +412,25 @@ function RequestChart(props: RequestChartProps) {
}} }}
/> />
<Area <Line
dataKey="allowedCount" dataKey="allowedCount"
stroke="var(--color-allowedCount)" stroke="var(--color-allowedCount)"
strokeWidth={2} strokeWidth={2}
fill="transparent" fill="transparent"
radius={4} radius={4}
isAnimationActive={false} isAnimationActive={false}
dot={false}
/> />
<Area <Line
dataKey="blockedCount" dataKey="blockedCount"
stroke="var(--color-blockedCount)" stroke="var(--color-blockedCount)"
strokeWidth={2} strokeWidth={2}
fill="transparent" fill="transparent"
radius={4} radius={4}
isAnimationActive={false} isAnimationActive={false}
dot={false}
/> />
</AreaChart> </LineChart>
</ChartContainer> </ChartContainer>
); );
} }