feat: introduce custom ECharts candlestick chart for stock history, displayed conditionally for logged-in users.

Author: DigHuang

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

@@ -0,0 +1,93 @@
+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 { TimeUtils } from "@/lib/time";
+import { cn } from "@/lib/utils";
+import type { 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" },
+];
+
+export const StockHistoryChart = ({
+  ticker,
+  className,
+}: StockHistoryChartProps) => {
+  const [interval, setInterval] = useState<StockInterval>("1d");
+
+  // Calculate date range based on interval
+  const { startDate, endDate } = useMemo(() => {
+    const now = TimeUtils.now();
+
+    let start = now;
+    switch (interval) {
+      case "1h":
+        start = now.subtract(6, "month");
+        break;
+      case "1d":
+        start = now.subtract(3, "year");
+        break;
+      case "1w":
+        start = now.subtract(10, "year");
+        break;
+      default:
+        start = now.subtract(3, "year");
+    }
+
+    return {
+      startDate: start.format("YYYY-MM-DD"),
+      endDate: now.format("YYYY-MM-DD"),
+    };
+  }, [interval]);
+
+  const { data: historyData, isLoading } = useGetStockHistory({
+    ticker,
+    interval,
+    start_date: startDate,
+    end_date: endDate,
+  });
+
+  // Transform data to CandlestickChart format
+  const chartData = useMemo(() => {
+    if (!historyData) return [];
+    return historyData.map((item) => ({
+      time: item.time,
+      open: item.open,
+      high: item.high,
+      low: item.low,
+      close: item.close,
+      volume: item.volume,
+    }));
+  }, [historyData]);
+
+  return (
+    <div className={cn("flex flex-col gap-4", className)}>
+      <Tabs
+        value={interval}
+        onValueChange={(value) => setInterval(value as StockInterval)}
+      >
+        <TabsList>
+          {INTERVALS.map((item) => (
+            <TabsTrigger key={item.value} value={item.value}>
+              {item.label}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      </Tabs>
+      <CandlestickChart
+        data={chartData}
+        height={500}
+        loading={isLoading}
+        showVolume
+      />
+    </div>
+  );
+};

frontend/src/app/home/stock.tsx

@@ -5,14 +5,18 @@ import { useGetStockDetail, useRemoveStockFromWatchlist } from "@/api/stock";
 import TradingViewAdvancedChart from "@/components/tradingview/tradingview-advanced-chart";
 import { Button } from "@/components/ui/button";
 import LinkButton from "@/components/valuecell/button/link-button";
+import { useIsLoggedIn } from "@/store/system-store";
 import type { Route } from "./+types/stock";
+import { StockHistoryChart } from "./components/stock-history-chart";
 
 function Stock() {
   const { stockId } = useParams<Route.LoaderArgs["params"]>();
   const navigate = useNavigate();
   // Use stockId as ticker to fetch real data from API
   const ticker = stockId || "";
 
+  const isLoggedIn = useIsLoggedIn();
+
   // Fetch stock detail data
   const {
     data: stockDetailData,
@@ -73,22 +77,28 @@ function Stock() {
         </div>
       </div>
       <div className="w-full">
-        <TradingViewAdvancedChart
-          ticker={ticker}
-          interval="D"
-          minHeight={420}
-          theme="light"
-          locale="en"
-          timezone="UTC"
-        />
+        {isLoggedIn ? (
+          <StockHistoryChart ticker={ticker} />
+        ) : (
+          <TradingViewAdvancedChart
+            ticker={ticker}
+            interval="D"
+            minHeight={420}
+            theme="light"
+            locale="en"
+            timezone="UTC"
+          />
+        )}
       </div>
 
-      <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-2">
         <h2 className="font-bold text-lg">About</h2>
 
-        <p className="line-clamp-4 text-neutral-500 text-sm leading-6">
-          {stockDetailData?.properties?.business_summary}
-        </p>
+        {stockDetailData?.properties.business_summary && (
+          <p className="line-clamp-4 text-neutral-500 text-sm leading-6">
+            {stockDetailData?.properties?.business_summary}
+          </p>
+        )}
 
         {stockDetailData?.properties && (
           <div className="mt-4 grid grid-cols-2 gap-4 text-sm">