gui: work in progress

apps/web/src/components/report/chart/ReportLineChart.tsx

@@ -0,0 +1,90 @@
+import { api } from "@/utils/api";
+import {
+  CartesianGrid,
+  Legend,
+  Line,
+  LineChart,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import { ReportLineChartTooltip } from "./ReportLineChartTooltop";
+import { useFormatDateInterval } from "@/hooks/useFormatDateInterval";
+import {
+  type IChartBreakdown,
+  type IChartEvent,
+  type IInterval,
+} from "@/types";
+import { getChartColor } from "@/utils/theme";
+import { ReportTable } from "./ReportTable";
+
+export function ReportLineChart({
+  interval,
+  startDate,
+  endDate,
+  events,
+  breakdowns,
+}: {
+  interval: IInterval;
+  startDate: Date;
+  endDate: Date;
+  events: IChartEvent[];
+  breakdowns: IChartBreakdown[];
+}) {
+  const chart = api.chartMeta.chart.useQuery(
+    {
+      interval,
+      chartType: "linear",
+      startDate,
+      endDate,
+      events,
+      breakdowns,
+    },
+    {
+      enabled: events.length > 0,
+    },
+  );
+
+  const formatDate = useFormatDateInterval(interval);
+
+  return (
+    <>
+      {chart.isSuccess && chart.data?.series?.[0]?.data && (
+        <>
+        <LineChart width={800} height={400}>
+          <Legend />
+          <YAxis dataKey={"count"}></YAxis>
+          <Tooltip content={<ReportLineChartTooltip />} />
+          {/* <Tooltip /> */}
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis
+            dataKey="date"
+            tickFormatter={(m: Date) => {
+              return formatDate(m);
+            }}
+            tickLine={false}
+            allowDuplicatedCategory={false}
+          />
+          {chart.data?.series.slice(0, 5).map((serie, index) => {
+            const key = serie.name;
+            const strokeColor = getChartColor(index)
+            return (
+              <Line
+                type="monotone"
+                key={key}
+                isAnimationActive={false}
+                strokeWidth={2}
+                dataKey="count"
+                stroke={strokeColor}
+                data={serie.data}
+                name={serie.name}
+              />
+            );
+          })}
+        </LineChart>
+        <ReportTable data={chart.data} />
+        </>
+      )}
+    </>
+  );
+}

apps/web/src/components/report/chart/ReportLineChartTooltop.tsx

@@ -0,0 +1,54 @@
+import { type IToolTipProps } from "@/types";
+
+type ReportLineChartTooltipProps = IToolTipProps<{
+  color: string;
+  value: number;
+  payload: {
+    date: Date;
+    count: number;
+    label: string;
+  };
+}>
+
+export function ReportLineChartTooltip({
+  active,
+  payload,
+}: ReportLineChartTooltipProps) {
+  if (!active || !payload) {
+    return null;
+  }
+
+  if (!payload.length) {
+    return null;
+  }
+
+
+  const limit = 3;
+  const sorted = payload.slice(0).sort((a, b) => b.value - a.value);
+  const visible = sorted.slice(0, limit);
+  const hidden = sorted.slice(limit);
+
+  return (
+    <div className="flex flex-col gap-2 rounded-xl border bg-white p-3 text-sm shadow-xl">
+      {visible.map((item) => {
+        return (
+          <div key={item.payload.label} className="flex gap-2">
+            <div
+              className="w-[3px] rounded-full"
+              style={{ background: item.color }}
+            ></div>
+            <div className="flex flex-col">
+              <div className="min-w-0 max-w-[200px] overflow-hidden text-ellipsis whitespace-nowrap font-medium">
+                {item.payload.label}
+              </div>
+              <div>{item.payload.count}</div>
+            </div>
+          </div>
+        );
+      })}
+      {hidden.length > 0 && (
+        <div className="text-muted-foreground">and {hidden.length} more...</div>
+      )}
+    </div>
+  );
+}

apps/web/src/components/report/chart/ReportTable.tsx

@@ -0,0 +1,72 @@
+import * as React from "react";
+import { type RouterOutputs } from "@/utils/api";
+import { useFormatDateInterval } from "@/hooks/useFormatDateInterval";
+import { useSelector } from "@/redux";
+import { Checkbox } from "@/components/ui/checkbox";
+import { getChartColor } from "@/utils/theme";
+
+export function ReportTable({
+  data,
+}: {
+  data: RouterOutputs["chartMeta"]["chart"];
+}) {
+  const interval = useSelector((state) => state.report.interval);
+  const formatDate = useFormatDateInterval(interval);
+
+  return (
+    <div className="flex min-w-0">
+      {/* Labels */}
+      <div>
+        <div className="font-medium">Name</div>
+        {data.series.map((serie, index) => {
+          const checked = index < 5;
+          return (
+            <div
+              key={serie.name}
+              className="max-w-[200px] overflow-hidden text-ellipsis whitespace-nowrap flex items-center gap-2"
+            >
+              <Checkbox
+                style={checked ? {
+                  background: getChartColor(index),
+                  borderColor: getChartColor(index),
+                } : undefined}
+                checked={checked}
+              />
+              {serie.name}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* ScrollView for all values */}
+      <div className="min-w-0 overflow-auto">
+        {/* Header */}
+        <div className="flex">
+          {data.series[0]?.data.map((serie, index) => (
+            <div
+              key={serie.date.toString()}
+              className="min-w-[80px] text-right font-medium"
+            >
+              {formatDate(serie.date)}
+            </div>
+          ))}
+        </div>
+
+        {/* Values */}
+        {data.series.map((serie, index) => {
+          return (
+            <div className="flex" key={serie.name}>
+              {serie.data.map((item) => {
+                return (
+                  <div key={item.date} className="min-w-[80px] text-right">
+                    {item.count}
+                  </div>
+                );
+              })}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}