110 lines
3.1 KiB
TypeScript
110 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@basango/ui/components/card";
|
|
import {
|
|
ChartConfig,
|
|
ChartContainer,
|
|
ChartTooltip,
|
|
ChartTooltipContent,
|
|
} from "@basango/ui/components/chart";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@basango/ui/components/select";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import * as React from "react";
|
|
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
|
|
|
|
import { useTRPC } from "#dashboard/trpc/client";
|
|
import { formatDate } from "#dashboard/utils/utils";
|
|
|
|
const chartConfig = {
|
|
count: {
|
|
color: "var(--chart-2)",
|
|
label: "Articles",
|
|
},
|
|
views: {
|
|
label: "Articles",
|
|
},
|
|
} satisfies ChartConfig;
|
|
|
|
type Props = {
|
|
sourceId: string;
|
|
};
|
|
|
|
export function SourcePublicationgGraphChart({ sourceId }: Props) {
|
|
const trpc = useTRPC();
|
|
const [timeRange, setTimeRange] = React.useState("30");
|
|
|
|
const { data } = useQuery(
|
|
trpc.sources.getPublicationGraph.queryOptions({
|
|
days: Number(timeRange),
|
|
id: sourceId,
|
|
}),
|
|
);
|
|
|
|
return (
|
|
<Card className="pt-0">
|
|
<CardHeader className="flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row">
|
|
<div className="grid flex-1 gap-1">
|
|
<CardTitle>Publication Graph</CardTitle>
|
|
<CardDescription>
|
|
Showing total crawled articles for the last {timeRange} days
|
|
</CardDescription>
|
|
</div>
|
|
<Select onValueChange={setTimeRange} value={timeRange}>
|
|
<SelectTrigger
|
|
aria-label="Select a value"
|
|
className="hidden w-40 rounded-lg sm:ml-auto sm:flex"
|
|
>
|
|
<SelectValue placeholder="Last 3 months" />
|
|
</SelectTrigger>
|
|
<SelectContent className="rounded-xl">
|
|
<SelectItem className="rounded-lg" value="7">
|
|
Last 7 days
|
|
</SelectItem>
|
|
<SelectItem className="rounded-lg" value="30">
|
|
Last 30 days
|
|
</SelectItem>
|
|
<SelectItem className="rounded-lg" value="90">
|
|
Last 3 months
|
|
</SelectItem>
|
|
<SelectItem className="rounded-lg" value="180">
|
|
Last 6 months
|
|
</SelectItem>
|
|
<SelectItem className="rounded-lg" value="365">
|
|
Last 12 months
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</CardHeader>
|
|
<CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
|
|
<ChartContainer className="aspect-auto h-[250px] w-full" config={chartConfig}>
|
|
<BarChart accessibilityLayer data={data?.items}>
|
|
<CartesianGrid vertical={false} />
|
|
<XAxis
|
|
axisLine={false}
|
|
dataKey="date"
|
|
minTickGap={32}
|
|
tickFormatter={(value) => formatDate(value)}
|
|
tickLine={false}
|
|
tickMargin={8}
|
|
/>
|
|
<ChartTooltip content={<ChartTooltipContent indicator="dashed" />} cursor={false} />
|
|
<Bar dataKey="count" fill="var(--color-count)" radius={4} />
|
|
</BarChart>
|
|
</ChartContainer>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|