feat: clickable charts

Author: waltergalvao

apps/api/src/app/pull-requests/resolvers/pull-requests.schema.ts

@@ -124,6 +124,9 @@ export default /* GraphQL */ `
 
     "The size to filter by"
     sizes: [PullRequestSize!]
+
+    "The repository ids to filter by"
+    repositoryIds: [SweetID!]
   }
 
   type PullRequestsInProgressResponse {

apps/api/src/app/pull-requests/resolvers/queries/pull-requests.query.ts

@@ -34,6 +34,7 @@ export const pullRequestsQuery = createFieldResolver("Workspace", {
       },
       states: input.states || undefined,
       sizes: input.sizes || undefined,
+      repositoryIds: input.repositoryIds || undefined,
     });
 
     return pullRequests.map(transformPullRequest);

apps/api/src/app/pull-requests/services/pull-request.service.ts

@@ -117,6 +117,13 @@ export const paginatePullRequests = async (
     };
   }
 
+  if (args.repositoryIds?.length) {
+    query.where = {
+      ...query.where,
+      repositoryId: { in: args.repositoryIds },
+    };
+  }
+
   return getPrisma(workspaceId).pullRequest.findMany(query);
 };
 

apps/api/src/app/pull-requests/services/pull-request.types.ts

@@ -9,6 +9,7 @@ export interface PaginatePullRequestsArgs {
   completedAt?: DateTimeRange;
   states?: PullRequestState[];
   sizes?: PullRequestSize[];
+  repositoryIds?: number[];
 }
 
 export interface PullRequestFile {

apps/web/src/api/pull-request.api.ts

@@ -75,7 +75,13 @@ export const usePullRequestsInfiniteQuery = (
             }
           }
         `),
-        { ...args, input: { ...args.input, cursor: pageParam as string } },
+        {
+          ...args,
+          input: {
+            ...args.input,
+            cursor: pageParam as string,
+          },
+        },
       ),
     ...options,
   });

apps/web/src/app/metrics-and-insights/pr-flow/components/card-chart/card-chart.tsx

@@ -11,9 +11,11 @@ import {
 } from "@mantine/core";
 import {
   IconDotsVertical,
+  IconExternalLink,
   IconInfoCircle,
   IconSpeakerphone,
 } from "@tabler/icons-react";
+import { Link } from "react-router";
 import { useDisclosure } from "@mantine/hooks";
 
 interface ChartCardProps {
@@ -22,6 +24,7 @@ interface ChartCardProps {
   children: ReactNode;
   height?: number;
   style?: React.CSSProperties;
+  href?: string;
 }
 
 export const CardChart = ({
@@ -30,6 +33,7 @@ export const CardChart = ({
   children,
   height = 340,
   style,
+  href,
 }: ChartCardProps) => {
   const [menuOpened, { toggle: toggleMenu, close: closeMenu }] =
     useDisclosure(false);
@@ -99,6 +103,16 @@ export const CardChart = ({
           </Menu.Target>
 
           <Menu.Dropdown>
+            {href && (
+              <Menu.Item
+                leftSection={<IconExternalLink size={14} stroke={1.5} />}
+                component={Link}
+                to={href}
+                onClick={closeMenu}
+              >
+                View Pull Requests
+              </Menu.Item>
+            )}
             <Menu.Item
               leftSection={<IconSpeakerphone size={14} stroke={1.5} />}
               component="a"

apps/web/src/app/metrics-and-insights/pr-flow/components/chart-cycle-time-breakdown/chart-cycle-time-breakdown.tsx

@@ -18,6 +18,7 @@ interface ChartCycleTimeBreakdownProps {
   chartId: string;
   chartData?: CycleTimeBreakdownChartData | null;
   period: Period;
+  onColumnClick?: (columnDate: string) => void;
 }
 
 const STACKED_SERIES: {
@@ -28,8 +29,8 @@ const STACKED_SERIES: {
   name: string;
   color: string;
 }[] = [
-  { key: "timeToCode", name: "Coding", color: "#FFF " },
-  { key: "timeToFirstReview", name: "First Review", color: "#38d9a9" },
+  { key: "timeToCode", name: "Coding", color: "#8ce0e9 " },
+  { key: "timeToFirstReview", name: "First Review", color: "#8ce9c7" },
   { key: "timeToApproval", name: "Approval", color: "#8ce99a" },
   { key: "timeToMerge", name: "Merge", color: "#b197fc" },
 ];
@@ -43,6 +44,7 @@ export const ChartCycleTimeBreakdown = ({
   chartId,
   chartData,
   period,
+  onColumnClick,
 }: ChartCycleTimeBreakdownProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -56,11 +58,34 @@ export const ChartCycleTimeBreakdown = ({
     chart.group = PR_FLOW_GROUP;
     echarts.connect(PR_FLOW_GROUP);
 
-    const stackedSeries = STACKED_SERIES.map(({ key, name, color }, i) => ({
+    // ECharts' barMinHeight breaks stacking (segments overlap instead of stack).
+    // Instead, we clamp non-zero values to a % of the tallest column so every
+    // phase stays visible regardless of how small it is relative to others.
+    // Tooltips and labels read from the original chartData to show real values.
+    const maxColumnTotal = Math.max(
+      ...columns.map((_, idx) =>
+        STACKED_SERIES.reduce(
+          (sum, { key }) => sum + (Number(chartData[key][idx]) || 0),
+          0,
+        ),
+      ),
+    );
+    const minVisibleValue = maxColumnTotal * 0.03;
+
+    const clampedData: Record<string, number[]> = {};
+    for (const { key } of STACKED_SERIES) {
+      clampedData[key] = chartData[key].map((_, idx) => {
+        const raw = Number(chartData[key][idx]) || 0;
+        if (raw === 0) return 0;
+        return Math.max(raw, minVisibleValue);
+      });
+    }
+
+    const stackedSeries = STACKED_SERIES.map(({ key, name, color }) => ({
       type: "bar" as const,
       name,
       stack: "cycle-time",
-      data: chartData[key],
+      data: clampedData[key],
       color,
       barMaxWidth: 24,
       itemStyle: {
@@ -70,20 +95,29 @@ export const ChartCycleTimeBreakdown = ({
       emphasis: { focus: "series" as const },
     }));
 
+    // Line must use clamped totals so it sits above the inflated bars.
+    const clampedCycleTime = columns.map((_, idx) =>
+      STACKED_SERIES.reduce(
+        (sum, { key }) => sum + (clampedData[key][idx] || 0),
+        0,
+      ),
+    );
+
     const cycleTimeSeries = {
       type: "line" as const,
       name: "Cycle Time",
-      data: cycleTime,
+      data: clampedCycleTime,
       smooth: true,
       connectNulls: true,
-      color: "#8ce99a",
+      color: "#FFFFFF",
       symbolSize: 0,
       lineStyle: { width: 2 },
       label: {
-        show: true,
+        show: cycleTime.length <= 15,
         position: "top" as const,
-        formatter: ({ value }: { value?: unknown }) => {
-          const val = Number(value) || 0;
+        // Use original cycleTime, not the clamped value ECharts passes.
+        formatter: ({ dataIndex }: { dataIndex?: number }) => {
+          const val = Number(cycleTime[dataIndex ?? 0]) || 0;
           if (!val) return "0s";
           return getAbbreviatedDuration(val);
         },
@@ -138,7 +172,7 @@ export const ChartCycleTimeBreakdown = ({
 
           html += `
             <div style="margin: 0 -15px; padding: 5px 15px; border-top:1px solid #404040; display:flex; align-items:center; gap:5px;">
-              <span style="display:inline-block;width:10px;height:10px;border-radius:2px;background:#8ce99a"></span>
+              <span style="display:inline-block;width:10px;height:10px;border-radius:2px;background:#FFFFFF"></span>
               <span>Cycle Time</span>
               <span style="margin-left:auto;font-weight:600">${formatDurationValue(cycleTime[idx])}</span>
             </div>`;
@@ -177,14 +211,31 @@ export const ChartCycleTimeBreakdown = ({
 
     chart.setOption(options);
 
+    if (onColumnClick) {
+      chart.getZr().on("click", (e) => {
+        if (!chart.containPixel("grid", [e.offsetX, e.offsetY])) return;
+        const [dataIndex] = chart.convertFromPixel("grid", [
+          e.offsetX,
+          e.offsetY,
+        ]);
+        const col = columns[Math.round(dataIndex)];
+        if (col) onColumnClick(col);
+      });
+      chart.getZr().on("mousemove", (e) => {
+        if (chart.containPixel("grid", [e.offsetX, e.offsetY])) {
+          chart.getZr().setCursorStyle("pointer");
+        }
+      });
+    }
+
     const handleResize = () => chart.resize();
     window.addEventListener("resize", handleResize);
 
     return () => {
       window.removeEventListener("resize", handleResize);
       chart.dispose();
     };
-  }, [chartData, period, chartId]);
+  }, [chartData, period, chartId, onColumnClick]);
 
   return (
     <div

apps/web/src/app/metrics-and-insights/pr-flow/components/chart-size-distribution/chart-size-distribution.tsx

@@ -17,12 +17,14 @@ interface ChartSizeDistributionProps {
   chartId: string;
   chartData?: PullRequestSizeDistributionChartData | null;
   period: Period;
+  onColumnClick?: (columnDate: string) => void;
 }
 
 export const ChartSizeDistribution = ({
   chartId,
   chartData,
   period,
+  onColumnClick,
 }: ChartSizeDistributionProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -152,16 +154,18 @@ export const ChartSizeDistribution = ({
       ],
       series: [
         ...chartData.series.map((chartSeries) => ({
-          barCategoryGap: "50%",
-          barGap: "50%",
           name: chartSeries.name,
           data: chartSeries.data,
           color: chartSeries.color || undefined,
-          smooth: true,
-          symbolSize: 7,
           type: "bar" as const,
           stack: "Total",
           yAxisIndex: 0,
+          barMaxWidth: 24,
+          itemStyle: {
+            borderColor: "#1A1B1E",
+            borderWidth: 1,
+          },
+          emphasis: { focus: "series" as const },
         })),
         {
           name: "Avg. Lines Changed",
@@ -180,14 +184,31 @@ export const ChartSizeDistribution = ({
 
     chart.setOption(options);
 
+    if (onColumnClick) {
+      chart.getZr().on("click", (e) => {
+        if (!chart.containPixel("grid", [e.offsetX, e.offsetY])) return;
+        const [dataIndex] = chart.convertFromPixel("grid", [
+          e.offsetX,
+          e.offsetY,
+        ]);
+        const col = chartData.columns[Math.round(dataIndex)];
+        if (col) onColumnClick(col);
+      });
+      chart.getZr().on("mousemove", (e) => {
+        if (chart.containPixel("grid", [e.offsetX, e.offsetY])) {
+          chart.getZr().setCursorStyle("pointer");
+        }
+      });
+    }
+
     const handleResize = () => chart.resize();
     window.addEventListener("resize", handleResize);
 
     return () => {
       window.removeEventListener("resize", handleResize);
       chart.dispose();
     };
-  }, [chartData, period, chartId]);
+  }, [chartData, period, chartId, onColumnClick]);
 
   return (
     <div