feat: Add resolution/lookback support to charts

Author: fhqvst

apps/insights/src/app/historical-prices/route.ts

@@ -1,17 +1,102 @@
 import type { NextRequest } from "next/server";
+import { z } from "zod";
 
 import { getHistoricalPrices } from "../../services/clickhouse";
 
+const queryParamsSchema = z.object({
+  symbol: z.string().transform(decodeURIComponent),
+  publisher: z
+    .string()
+    .nullable()
+    .transform((value) => value ?? undefined),
+  cluster: z.enum(["pythnet", "pythtest"]),
+  from: z.string().transform(Number),
+  to: z.string().transform(Number),
+  resolution: z.enum(["1s", "1m", "5m", "1H", "1D"]).transform((value) => {
+    switch (value) {
+      case "1s": {
+        return "1 SECOND";
+      }
+      case "1m": {
+        return "1 MINUTE";
+      }
+      case "5m": {
+        return "5 MINUTE";
+      }
+      case "1H": {
+        return "1 HOUR";
+      }
+      case "1D": {
+        return "1 DAY";
+      }
+    }
+  }),
+});
+
 export async function GET(req: NextRequest) {
-  const symbol = req.nextUrl.searchParams.get("symbol");
-  const until = req.nextUrl.searchParams.get("until");
-  if (symbol && until) {
-    const res = await getHistoricalPrices({
-      symbol: decodeURIComponent(symbol),
-      until,
+  const parsed = queryParamsSchema.safeParse(
+    Object.fromEntries(
+      Object.keys(queryParamsSchema.shape).map((key) => [
+        key,
+        req.nextUrl.searchParams.get(key),
+      ]),
+    ),
+  );
+  if (!parsed.success) {
+    return new Response(`Invalid params: ${parsed.error.message}`, {
+      status: 400,
+    });
+  }
+
+  const { symbol, publisher, cluster, from, to, resolution } = parsed.data;
+
+  try {
+    checkMaxDataPointsInvariant(from, to, resolution);
+  } catch {
+    return new Response("Unsupported resolution for date range", {
+      status: 400,
     });
-    return Response.json(res);
-  } else {
-    return new Response("Must provide `symbol` and `until`", { status: 400 });
+  }
+
+  const res = await getHistoricalPrices({
+    symbol,
+    from,
+    to,
+    publisher,
+    cluster,
+    resolution,
+  });
+
+  return Response.json(res);
+}
+
+const MAX_DATA_POINTS = 3000;
+function checkMaxDataPointsInvariant(
+  from: number,
+  to: number,
+  resolution: "1 SECOND" | "1 MINUTE" | "5 MINUTE" | "1 HOUR" | "1 DAY",
+) {
+  let diff = to - from;
+  switch (resolution) {
+    case "1 MINUTE": {
+      diff = diff / 60;
+      break;
+    }
+    case "5 MINUTE": {
+      diff = diff / 60 / 5;
+      break;
+    }
+    case "1 HOUR": {
+      diff = diff / 3600;
+      break;
+    }
+    case "1 DAY": {
+      diff = diff / 86_400;
+      break;
+    }
+  }
+
+  if (diff > MAX_DATA_POINTS) {
+    throw new Error("Unsupported resolution for date range");
   }
 }

apps/insights/src/components/PriceFeed/Chart/chart-page.tsx

@@ -6,6 +6,7 @@ import { Spinner } from "@pythnetwork/component-library/Spinner";
 import { Chart } from "./chart";
 import styles from "./chart-page.module.scss";
 import { getFeed } from "../get-feed";
+import { ChartToolbar } from "./chart-toolbar";
 
 type Props = {
   params: Promise<{
@@ -26,7 +27,7 @@ type ChartPageImplProps =
     });
 
 const ChartPageImpl = (props: ChartPageImplProps) => (
-  <Card title="Chart" className={styles.chartCard}>
+  <Card title="Chart" className={styles.chartCard} toolbar={<ChartToolbar />}>
     <div className={styles.chart}>
       {props.isLoading ? (
         <div className={styles.spinnerContainer}>

apps/insights/src/components/PriceFeed/Chart/chart-toolbar.tsx

@@ -0,0 +1,95 @@
+"use client";
+import { Select } from "@pythnetwork/component-library/Select";
+import { SingleToggleGroup } from "@pythnetwork/component-library/SingleToggleGroup";
+import { useLogger } from "@pythnetwork/component-library/useLogger";
+import { useCallback } from "react";
+import type { Key } from "react-aria";
+
+import type { Lookback, Resolution } from "./use-chart-toolbar";
+import {
+  LOOKBACK_TO_RESOLUTION,
+  LOOKBACKS,
+  RESOLUTION_TO_LOOKBACK,
+  RESOLUTIONS,
+  useChartLookback,
+  useChartResolution,
+} from "./use-chart-toolbar";
+
+export const ChartToolbar = () => {
+  const logger = useLogger();
+  const [lookback, setLookback] = useChartLookback();
+  const [resolution, setResolution] = useChartResolution();
+
+  const handleLookbackChange = useCallback(
+    (newValue: Key) => {
+      if (!isLookback(newValue)) {
+        throw new TypeError("Invalid lookback");
+      }
+      const lookback: Lookback = newValue;
+      setLookback(lookback).catch((error: unknown) => {
+        logger.error("Failed to update lookback", error);
+      });
+      setResolution(LOOKBACK_TO_RESOLUTION[lookback]).catch(
+        (error: unknown) => {
+          logger.error("Failed to update resolution", error);
+        },
+      );
+    },
+    [logger, setLookback, setResolution],
+  );
+
+  const handleResolutionChanged = useCallback(
+    (newValue: Key) => {
+      if (!isResolution(newValue)) {
+        throw new TypeError("Invalid resolution");
+      }
+      const resolution: Resolution = newValue;
+      setResolution(resolution).catch((error: unknown) => {
+        logger.error("Failed to update resolution", error);
+      });
+      setLookback(RESOLUTION_TO_LOOKBACK[resolution]).catch(
+        (error: unknown) => {
+          logger.error("Failed to update lookback", error);
+        },
+      );
+    },
+    [logger, setResolution, setLookback],
+  );
+
+  return (
+    <>
+      <Select
+        label="Resolution"
+        hideLabel={true}
+        options={RESOLUTIONS.map((resolution) => ({
+          id: resolution,
+          label: resolution,
+        }))}
+        selectedKey={resolution}
+        onSelectionChange={handleResolutionChanged}
+        size="sm"
+        variant="outline"
+      />
+      <SingleToggleGroup
+        selectedKey={lookback}
+        onSelectionChange={handleLookbackChange}
+        rounded
+        items={[
+          { id: "1m", children: "1m" },
+          { id: "1H", children: "1H" },
+          { id: "1D", children: "1D" },
+          { id: "1W", children: "1W" },
+          { id: "1M", children: "1M" },
+        ]}
+      />
+    </>
+  );
+};
+
+function isLookback(value: Key): value is Lookback {
+  return LOOKBACKS.includes(value as Lookback);
+}
+
+function isResolution(value: Key): value is Resolution {
+  return RESOLUTIONS.includes(value as Resolution);
+}

apps/insights/src/components/PriceFeed/Chart/chart.module.scss

@@ -1,12 +1,16 @@
 @use "@pythnetwork/component-library/theme";
 
 .chart {
-  --border-light: #{theme.pallette-color("stone", 300)};
-  --border-dark: #{theme.pallette-color("steel", 600)};
+  --chart-background-light: #{theme.pallette-color("white")};
+  --chart-background-dark: #{theme.pallette-color("steel", 900)};
+  --border-light: #{theme.pallette-color("stone", 100)};
+  --border-dark: #{theme.pallette-color("steel", 900)};
   --muted-light: #{theme.pallette-color("stone", 700)};
   --muted-dark: #{theme.pallette-color("steel", 300)};
   --chart-series-primary-light: #{theme.pallette-color("violet", 500)};
   --chart-series-primary-dark: #{theme.pallette-color("violet", 400)};
   --chart-series-neutral-light: #{theme.pallette-color("stone", 500)};
   --chart-series-neutral-dark: #{theme.pallette-color("steel", 300)};
+  --chart-series-muted-light: #{theme.pallette-color("violet", 100)};
+  --chart-series-muted-dark: #{theme.pallette-color("violet", 950)};
 }