Add an analytics chart or metric card to a dashboard or report page. Handles the API aggregation query, react-query hook, and Recharts visualization. Use when building analytics features.
Creates a complete analytics widget: backend aggregation query → API endpoint → react-query hook → Recharts visualization. Follows the project's chart conventions (ChartContainer, design tokens).
Create the API endpoint at the relevant route file:
router.get("/analytics/{widget-name}", authenticateToken, async (req, res) => {
const orgId = req.user?.organizationId;
const period = req.query.period as string || "month";
// Prisma groupBy or raw SQL aggregation
const data = await prisma.deals.groupBy({
by: ["stage"],
where: { organizationId: orgId, createdAt: { gte: periodStart } },
_count: true,
_sum: { agreedPrice: true },
});
res.json(data);
});
Create the react-query hook using /add-react-query.
Build the chart component:
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
import { BarChart, Bar, XAxis, YAxis, CartesianGrid } from "recharts";
import { CHART_COLORS } from "@/config/design-tokens";
Follow chart conventions:
<ChartContainer config={{} as ChartConfig}>CHART_COLORS from design tokens — never hardcode colors<ChartTooltip content={<ChartTooltipContent />} /> — never nest tooltipsstyle={{ direction: "ltr" }} on chart container (Recharts is LTR)Add to the target page inside a Card with CardHeader + CardTitle.
direction: ltr, labels are Arabic/typecheck passes<ReTooltip> inside <ChartTooltip> — use <ChartTooltip content={<ChartTooltipContent />} /> directlyResponsiveContainer manually — ChartContainer already includes itCHART_COLORS or CHART_COLOR_ARRAY