feat: implement sparkline charts for stock history with updated intervals.

Author: DigHuang

frontend/src/app/home/components/stock-history-chart.tsx

@@ -1,50 +1,51 @@
 import { useMemo, useState } from "react";
 import { useGetStockHistory } from "@/api/stock";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import CandlestickChart from "@/components/valuecell/charts/candlestick-chart";
+import Sparkline from "@/components/valuecell/charts/sparkline";
 import { TimeUtils } from "@/lib/time";
 import { cn } from "@/lib/utils";
-import type { StockInterval } from "@/types/stock";
+import type { SparklineData } from "@/types/chart";
+import type { StockChangeType, StockInterval } from "@/types/stock";
 
 interface StockHistoryChartProps {
   ticker: string;
   className?: string;
 }
 
 const INTERVALS: { label: string; value: StockInterval }[] = [
-  { label: "1H", value: "1h" },
-  { label: "1D", value: "1d" },
-  { label: "1W", value: "1w" },
+  { label: "24h", value: "1m" },
+  { label: "7d", value: "1h" },
+  { label: "30d", value: "1d" },
 ];
 
 export const StockHistoryChart = ({
   ticker,
   className,
 }: StockHistoryChartProps) => {
-  const [interval, setInterval] = useState<StockInterval>("1d");
+  const [interval, setInterval] = useState<StockInterval>("1h");
 
   // Calculate date range based on interval
   const { startDate, endDate } = useMemo(() => {
     const now = TimeUtils.now();
 
     let start = now;
     switch (interval) {
+      case "1m":
+        start = now.subtract(1, "day");
+        break;
       case "1h":
-        start = now.subtract(6, "month");
+        start = now.subtract(1, "week");
         break;
       case "1d":
-        start = now.subtract(3, "year");
-        break;
-      case "1w":
-        start = now.subtract(10, "year");
+        start = now.subtract(1, "month");
         break;
       default:
-        start = now.subtract(3, "year");
+        start = now.subtract(1, "week");
     }
 
     return {
-      startDate: start.format("YYYY-MM-DD"),
-      endDate: now.format("YYYY-MM-DD"),
+      startDate: start.utc().toISOString(),
+      endDate: now.utc().toISOString(),
     };
   }, [interval]);
 
@@ -55,9 +56,39 @@ export const StockHistoryChart = ({
     end_date: endDate,
   });
 
+  // Convert StockHistory[] to SparklineData format and calculate changeType
+  const { sparklineData, changeType } = useMemo(() => {
+    if (!historyData || historyData.length === 0) {
+      return {
+        sparklineData: [] as SparklineData,
+        changeType: "neutral" as StockChangeType,
+      };
+    }
+
+    // Convert to SparklineData format: [timestamp, price]
+    const data: SparklineData = historyData.map((item) => [
+      item.time,
+      item.price,
+    ]);
+
+    // Determine changeType based on first and last price
+    const firstPrice = historyData[0].price;
+    const lastPrice = historyData[historyData.length - 1].price;
+
+    let type: StockChangeType = "neutral";
+    if (lastPrice > firstPrice) {
+      type = "positive";
+    } else if (lastPrice < firstPrice) {
+      type = "negative";
+    }
+
+    return { sparklineData: data, changeType: type };
+  }, [historyData]);
+
   return (
     <div className={cn("flex flex-col gap-4", className)}>
       <Tabs
+        className="self-end"
         value={interval}
         onValueChange={(value) => setInterval(value as StockInterval)}
       >
@@ -69,12 +100,13 @@ export const StockHistoryChart = ({
           ))}
         </TabsList>
       </Tabs>
-      <CandlestickChart
-        data={historyData ?? []}
-        height={500}
-        loading={isLoading}
-        showVolume
-      />
+      {isLoading ? (
+        <div className="flex h-[500px] items-center justify-center">
+          <div className="text-muted-foreground">Loading...</div>
+        </div>
+      ) : (
+        <Sparkline data={sparklineData} changeType={changeType} height={300} />
+      )}
     </div>
   );
 };

frontend/src/components/valuecell/charts/sparkline.tsx

@@ -78,6 +78,7 @@ function Sparkline({
         {
           type: "line",
           data: data,
+          smooth: true,
           symbol: "circle",
           symbolSize: 12,
           showSymbol: false,

frontend/src/types/stock.ts

@@ -34,22 +34,13 @@ export interface StockPrice {
  */
 export type StockInterval =
   | "1m" // 1 minute
-  | "5m" // 5 minutes
-  | "15m" // 15 minutes
-  | "30m" // 30 minutes
-  | "60m" // 60 minutes
   | "1h" // 1 hour
   | "1d" // 1 day (default)
-  | "1w" // 1 week
-  | "1mo"; // 1 month
+  | "1w"; // 1 week
 
 export interface StockHistory {
   time: string;
-  open: number;
-  high: number;
-  low: number;
-  close: number;
-  volume: number;
+  price: number;
 }
 
 export interface StockDetail {