comments

2026-03-09 14:20:15 +01:00
parent 0f9e5f6e93
commit df0258f532
12 changed files with 186 additions and 76 deletions
--- a/apps/start/src/components/page/gsc-breakdown-table.tsx
+++ b/apps/start/src/components/page/gsc-breakdown-table.tsx
@@ -43,6 +43,7 @@ export function GscBreakdownTable({ projectId, value, type }: GscBreakdownTableP

  const breakdownKey = type === 'page' ? 'query' : 'page';
  const breakdownLabel = type === 'page' ? 'Query' : 'Page';
+  const pluralLabel = type === 'page' ? 'queries' : 'pages';

  const maxClicks = Math.max(
    ...(breakdownRows as { clicks: number }[]).map((r) => r.clicks),
@@ -52,7 +53,7 @@ export function GscBreakdownTable({ projectId, value, type }: GscBreakdownTableP
  return (
    <div className="card overflow-hidden">
      <div className="border-b p-4">
-        <h3 className="font-medium text-sm">Top {breakdownLabel.toLowerCase()}s</h3>
+        <h3 className="font-medium text-sm">Top {pluralLabel}</h3>
      </div>
      {isLoading ? (
        <OverviewWidgetTable
--- a/apps/start/src/components/page/gsc-cannibalization.tsx
+++ b/apps/start/src/components/page/gsc-cannibalization.tsx
@@ -1,6 +1,7 @@
+import type { IChartRange, IInterval } from '@openpanel/validation';
 import { keepPreviousData, useQuery } from '@tanstack/react-query';
 import { AlertCircleIcon, ChevronsUpDownIcon } from 'lucide-react';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Pagination } from '@/components/pagination';
 import { useAppContext } from '@/hooks/use-app-context';
 import { useTRPC } from '@/integrations/trpc/react';
@@ -9,8 +10,8 @@ import { cn } from '@/utils/cn';

 interface GscCannibalizationProps {
  projectId: string;
-  range: string;
-  interval: string;
+  range: IChartRange;
+  interval: IInterval;
  startDate?: string;
  endDate?: string;
 }
@@ -30,7 +31,13 @@ export function GscCannibalization({

  const query = useQuery(
    trpc.gsc.getCannibalization.queryOptions(
-      { projectId, range: range as any, interval: interval as any },
+      {
+        projectId,
+        range,
+        interval,
+        startDate,
+        endDate,
+      },
      { placeholderData: keepPreviousData }
    )
  );
@@ -50,6 +57,9 @@ export function GscCannibalization({
  const items = query.data ?? [];

  const pageCount = Math.ceil(items.length / pageSize) || 1;
+  useEffect(() => {
+    setPage((p) => Math.max(0, Math.min(p, pageCount - 1)));
+  }, [items, pageSize, pageCount]);
  const paginatedItems = useMemo(
    () => items.slice(page * pageSize, (page + 1) * pageSize),
    [items, page, pageSize]
@@ -99,7 +109,6 @@ export function GscCannibalization({
          ))}
        {paginatedItems.map((item) => {
          const isOpen = expanded.has(item.query);
-          const winner = item.pages[0];
          const avgCtr =
            item.pages.reduce((s, p) => s + p.ctr, 0) / item.pages.length;

--- a/apps/start/src/components/pages/page-sparkline.tsx
+++ b/apps/start/src/components/pages/page-sparkline.tsx
@@ -8,7 +8,7 @@ interface SparklineBarsProps {
  data: { date: string; pageviews: number }[];
 }

-const gap = 1;
+const defaultGap = 1;
 const height = 24;
 const width = 100;

@@ -38,7 +38,16 @@ function SparklineBars({ data }: SparklineBarsProps) {
  }
  const max = Math.max(...data.map((d) => d.pageviews), 1);
  const total = data.length;
-  const barW = Math.max(2, Math.floor((width - gap * (total - 1)) / total));
+  // Compute bar width to fit SVG width; reduce gap if needed so barW >= 1 when possible
+  let gap = defaultGap;
+  let barW = Math.floor((width - gap * (total - 1)) / total);
+  if (barW < 1 && total > 1) {
+    gap = 0;
+    barW = Math.floor((width - gap * (total - 1)) / total);
+  }
+  if (barW < 1) {
+    barW = 1;
+  }
  const trend = getTrendDirection(data);
  const trendColor =
    trend === '↑'
@@ -71,9 +80,9 @@ function SparklineBars({ data }: SparklineBarsProps) {
      <Tooltiper
        content={
          trend === '↑'
-            ? 'Upgoing trend'
+            ? 'Upward trend'
            : trend === '↓'
-              ? 'Downgoing trend'
+              ? 'Downward trend'
              : 'Stable trend'
        }
      >
--- a/apps/start/src/components/pages/table/columns.tsx
+++ b/apps/start/src/components/pages/table/columns.tsx
@@ -103,6 +103,16 @@ export function useColumns({
          if (prev == null) {
            return <span className="text-muted-foreground">—</span>;
          }
+          if (prev === 0) {
+            return (
+              <div className="flex items-center gap-2">
+                <span className="font-mono text-sm tabular-nums">
+                  {number.short(row.original.sessions)}
+                </span>
+                <span className="text-muted-foreground">new</span>
+              </div>
+            );
+          }

          const pct = ((row.original.sessions - prev) / prev) * 100;
          const isPos = pct >= 0;
@@ -112,15 +122,12 @@ export function useColumns({
              <span className="font-mono text-sm tabular-nums">
                {number.short(row.original.sessions)}
              </span>
-              {prev === 0 && <span className="text-muted-foreground">new</span>}
-              {prev > 0 && (
-                <span
-                  className={`font-mono text-sm tabular-nums ${isPos ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400'}`}
-                >
-                  {isPos ? '+' : ''}
-                  {pct.toFixed(1)}%
-                </span>
-              )}
+              <span
+                className={`font-mono text-sm tabular-nums ${isPos ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400'}`}
+              >
+                {isPos ? '+' : ''}
+                {pct.toFixed(1)}%
+              </span>
            </div>
          );
        },
--- a/apps/start/src/components/pages/table/index.tsx
+++ b/apps/start/src/components/pages/table/index.tsx
@@ -26,7 +26,12 @@ export function PagesTable({ projectId }: PagesTableProps) {

  const pagesQuery = useQuery(
    trpc.event.pages.queryOptions(
-      { projectId, cursor: 1, take: 1000, search: undefined, range, interval },
+      {
+        projectId,
+        search: debouncedSearch ?? undefined,
+        range,
+        interval,
+      },
      { placeholderData: keepPreviousData },
    ),
  );
@@ -44,7 +49,7 @@ export function PagesTable({ projectId }: PagesTableProps) {
        range,
        startDate: startDate ?? undefined,
        endDate: endDate ?? undefined,
-        limit: 1000,
+        limit: 10_000,
      },
      { enabled: isGscConnected },
    ),
@@ -88,22 +93,11 @@ export function PagesTable({ projectId }: PagesTableProps) {
    }));
  }, [pagesQuery.data, gscMap]);

-  const filteredData = useMemo(() => {
-    if (!debouncedSearch) return rawData;
-    const q = debouncedSearch.toLowerCase();
-    return rawData.filter(
-      (p) =>
-        p.path.toLowerCase().includes(q) ||
-        p.origin.toLowerCase().includes(q) ||
-        (p.title ?? '').toLowerCase().includes(q),
-    );
-  }, [rawData, debouncedSearch]);
-
  const columns = useColumns({ projectId, isGscConnected, previousMap });

  const { table } = useTable({
    columns,
-    data: filteredData,
+    data: rawData,
    loading: pagesQuery.isLoading,
    pageSize: 50,
    name: 'pages',
@@ -133,7 +127,9 @@ export function PagesTable({ projectId }: PagesTableProps) {
            : 'Integrate our web SDK to your site to get pages here.',
        }}
        onRowClick={(row) => {
-          if (!isGscConnected) return;
+          if (!isGscConnected) {
+            return;
+          }
          const page = row.original;
          pushModal('PageDetails', {
            type: 'page',
--- a/apps/start/src/modals/gsc-details.tsx
+++ b/apps/start/src/modals/gsc-details.tsx
@@ -23,33 +23,65 @@ import { SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
 import { useTRPC } from '@/integrations/trpc/react';
 import { getChartColor } from '@/utils/theme';

-type GscChartData = { date: string; clicks: number; impressions: number };
+interface GscChartData {
+  date: string;
+  clicks: number;
+  impressions: number;
+}
+interface GscViewsChartData {
+  date: string;
+  views: number;
+}

 const { TooltipProvider, Tooltip: GscTooltip } = createChartTooltip<
-  GscChartData,
+  GscChartData | GscViewsChartData,
  Record<string, unknown>
 >(({ data }) => {
  const item = data[0];
  if (!item) {
    return null;
  }
+  if (!('date' in item)) {
+    return null;
+  }
+  if ('views' in item && item.views != null) {
+    return (
+      <>
+        <ChartTooltipHeader>
+          <div>{item.date}</div>
+        </ChartTooltipHeader>
+        <ChartTooltipItem color={getChartColor(0)}>
+          <div className="flex justify-between gap-8 font-medium font-mono">
+            <span>Views</span>
+            <span>{item.views.toLocaleString()}</span>
+          </div>
+        </ChartTooltipItem>
+      </>
+    );
+  }
+  const clicks = 'clicks' in item ? item.clicks : undefined;
+  const impressions = 'impressions' in item ? item.impressions : undefined;
  return (
    <>
      <ChartTooltipHeader>
        <div>{item.date}</div>
      </ChartTooltipHeader>
-      <ChartTooltipItem color={getChartColor(0)}>
-        <div className="flex justify-between gap-8 font-medium font-mono">
-          <span>Clicks</span>
-          <span>{item.clicks.toLocaleString()}</span>
-        </div>
-      </ChartTooltipItem>
-      <ChartTooltipItem color={getChartColor(1)}>
-        <div className="flex justify-between gap-8 font-medium font-mono">
-          <span>Impressions</span>
-          <span>{item.impressions.toLocaleString()}</span>
-        </div>
-      </ChartTooltipItem>
+      {clicks != null && (
+        <ChartTooltipItem color={getChartColor(0)}>
+          <div className="flex justify-between gap-8 font-medium font-mono">
+            <span>Clicks</span>
+            <span>{clicks.toLocaleString()}</span>
+          </div>
+        </ChartTooltipItem>
+      )}
+      {impressions != null && (
+        <ChartTooltipItem color={getChartColor(1)}>
+          <div className="flex justify-between gap-8 font-medium font-mono">
+            <span>Impressions</span>
+            <span>{impressions.toLocaleString()}</span>
+          </div>
+        </ChartTooltipItem>
+      )}
    </>
  );
 });
@@ -93,10 +125,25 @@ export default function GscDetails(props: Props) {
    )
  );

-  const pagesTimeseriesQuery = useQuery(
-    trpc.event.pagesTimeseries.queryOptions(
-      { projectId, ...dateInput },
-      { enabled: type === 'page' }
+  const { origin: pageOrigin, path: pagePath } =
+    type === 'page'
+      ? (() => {
+          try {
+            const url = new URL(value);
+            return { origin: url.origin, path: url.pathname + url.search };
+          } catch {
+            return {
+              origin: typeof window !== 'undefined' ? window.location.origin : '',
+              path: value,
+            };
+          }
+        })()
+      : { origin: '', path: '' };
+
+  const pageTimeseriesQuery = useQuery(
+    trpc.event.pageTimeseries.queryOptions(
+      { projectId, ...dateInput, origin: pageOrigin, path: pagePath },
+      { enabled: type === 'page' && !!pagePath }
    )
  );

@@ -105,7 +152,7 @@ export default function GscDetails(props: Props) {
    type === 'page' ? pageQuery.isLoading : queryQuery.isLoading;

  const timeseries = data?.timeseries ?? [];
-  const pagesTimeseries = pagesTimeseriesQuery.data ?? [];
+  const pageTimeseries = pageTimeseriesQuery.data ?? [];
  const breakdownRows =
    type === 'page'
      ? ((data as { queries?: unknown[] } | undefined)?.queries ?? [])
@@ -131,13 +178,14 @@ export default function GscDetails(props: Props) {
        {type === 'page' && (
          <div className="card p-4">
            <h3 className="mb-4 font-medium text-sm">Views & Sessions</h3>
-            {isLoading ? (
+            {isLoading || pageTimeseriesQuery.isLoading ? (
              <Skeleton className="h-40 w-full" />
            ) : (
              <GscViewsChart
-                data={pagesTimeseries
-                  .filter((r) => r.origin + r.path === value)
-                  .map((r) => ({ date: r.date, views: r.pageviews }))}
+                data={pageTimeseries.map((r) => ({
+                  date: r.date,
+                  views: r.pageviews,
+                }))}
              />
            )}
          </div>
--- a/apps/start/src/modals/page-details.tsx
+++ b/apps/start/src/modals/page-details.tsx
@@ -21,14 +21,17 @@ export default function PageDetails({ type, projectId, value }: Props) {
      <div className="col gap-6">
        {type === 'page' &&
          (() => {
-            let origin = value;
-            let path = '/';
+            let origin: string;
+            let path: string;
            try {
              const url = new URL(value);
              origin = url.origin;
              path = url.pathname + url.search;
            } catch {
-              // value might already be just a path
+              // value is path-only (e.g. "/docs/foo")
+              origin =
+                typeof window !== 'undefined' ? window.location.origin : '';
+              path = value;
            }
            return (
              <PageViewsChart