[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import type { Metadata } from "next" import StockScreener from "@/components/stock-screener" export const metadata: Metadata = { title: "Indian Stock Screener", description: "A comprehensive stock screener for the Indian market with beta calculations", } export default function Page() { return (

Indian Stock Screener

Analyze stocks from NSE and BSE with real-time data

) } [V0_FILE]typescriptreact:file="components/beta-chart.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Loader2 } from "lucide-react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { BetaCalculator } from "@/components/beta-calculator" import type { Stock } from "@/components/stock-screener" interface BetaChartProps { stocks: Stock[] loading: boolean } export function BetaChart({ stocks, loading }: BetaChartProps) { const [timeframe, setTimeframe] = useState("1y") const [marketIndex, setMarketIndex] = useState("NIFTY") // Sort stocks by beta for visualization const sortedStocks = [...stocks].sort((a, b) => b.beta - a.beta) return (

Beta Analysis

Compare stock volatility relative to the Indian market

Beta Visualization Beta Calculator Stock Beta Comparison Beta values relative to{" "} {marketIndex === "NIFTY" ? "NIFTY 50" : marketIndex === "SENSEX" ? "SENSEX" : "BANK NIFTY"} over{" "} {timeframe === "3m" ? "3 months" : timeframe === "6m" ? "6 months" : timeframe === "1y" ? "1 year" : timeframe === "3y" ? "3 years" : "5 years"} {loading ? (

Loading beta data...

) : sortedStocks.length === 0 ? (

No stocks available for beta analysis

) : ( <>

3.0

2.0

1.0

0.0

{/* Market line at beta = 1 */}

Market (β = 1.0)

{/* Beta bars */}

{sortedStocks.map((stock) => (

β = {stock.beta.toFixed(2)}

1.2 ? "bg-red-500" : "bg-amber-500" } rounded-t-sm relative`} style={{ height: `${Math.min(stock.beta * 33.3, 100)}%` }} >

{stock.symbol}

))}

Low Volatility (β < 0.8)

Stocks with beta less than 0.8 tend to be less volatile than the market. In India, these often include FMCG, Pharma, and Utility stocks.

Market-like (0.8 ≤ β ≤ 1.2)

Stocks with beta between 0.8 and 1.2 tend to move similarly to the overall market. These often include large-cap stocks like TCS, HDFC Bank, and Reliance.

High Volatility (β > 1.2)

Stocks with beta greater than 1.2 tend to be more volatile than the market. In India, these often include small-caps, PSU banks, and metal stocks.

)}

) } [V0_FILE]typescriptreact:file="components/beta-calculator.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Info, Loader2 } from "lucide-react" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { calculateBetaFromSymbol } from "@/lib/api" import { useToast } from "@/components/ui/use-toast" interface BetaCalculatorProps { marketIndex: string timeframe: string } export function BetaCalculator({ marketIndex, timeframe }: BetaCalculatorProps) { const [stockReturns, setStockReturns] = useState("") const [marketReturns, setMarketReturns] = useState("") const [beta, setBeta] = useState(null) const [method, setMethod] = useState("manual") const [symbol, setSymbol] = useState("") const [loading, setLoading] = useState(false) const [error, setError] = useState("") const { toast } = useToast() // Calculate beta from returns data const calculateBeta = () => { try { // Parse the input strings into arrays of numbers const stockReturnValues = stockReturns.split(",").map((val) => Number.parseFloat(val.trim())) const marketReturnValues = marketReturns.split(",").map((val) => Number.parseFloat(val.trim())) // Check if arrays have the same length if (stockReturnValues.length !== marketReturnValues.length) { setError("Stock and market returns must have the same number of data points") return } // Calculate mean returns const stockMean = stockReturnValues.reduce((sum, val) => sum + val, 0) / stockReturnValues.length const marketMean = marketReturnValues.reduce((sum, val) => sum + val, 0) / marketReturnValues.length // Calculate covariance let covariance = 0 for (let i = 0; i < stockReturnValues.length; i++) { covariance += (stockReturnValues[i] - stockMean) * (marketReturnValues[i] - marketMean) } covariance /= stockReturnValues.length // Calculate market variance let marketVariance = 0 for (let i = 0; i < marketReturnValues.length; i++) { marketVariance += Math.pow(marketReturnValues[i] - marketMean, 2) } marketVariance /= marketReturnValues.length // Calculate beta const calculatedBeta = covariance / marketVariance setBeta(calculatedBeta) setError("") } catch (err) { setError("Error calculating beta. Please check your input format.") } } // Fetch beta for a stock symbol using API const fetchBeta = async () => { if (!symbol) { setError("Please enter a stock symbol") return } setLoading(true) setError("") try { const result = await calculateBetaFromSymbol(symbol, marketIndex, timeframe) setBeta(result.beta) setLoading(false) } catch (err) { setError("Failed to calculate beta. Please check the symbol and try again.") setLoading(false) toast({ title: "Error", description: "Failed to calculate beta. Please check the symbol and try again.", variant: "destructive", }) } } return ( Beta Calculator

How Beta is Calculated

Beta is calculated using the formula:

β = Covariance(Stock, Market) / Variance(Market)

This measures how a stock's returns move in relation to the overall market's returns.

Calculate beta using historical returns data or lookup a stock's beta Manual Calculation Symbol Lookup

Stock Returns (%)

setStockReturns(e.target.value)} />

Input Format

Enter comma-separated percentage returns for each period (e.g., monthly returns). Make sure both stock and market returns have the same number of data points.

Market Returns (%)

setMarketReturns(e.target.value)} />

Market Index

Use returns from{" "} {marketIndex === "NIFTY" ? "NIFTY 50" : marketIndex === "SENSEX" ? "SENSEX" : "BANK NIFTY"} for the same time periods as your stock returns.

Stock Symbol

setSymbol(e.target.value.toUpperCase())} />

For NSE stocks, add .NS (e.g., RELIANCE.NS). For BSE stocks, add .BO (e.g., TCS.BO)

{error && (

{error}

)} {beta !== null && (

Calculated Beta

1.2 ? "text-red-600" : "text-amber-600" }`} > {beta.toFixed(2)}

{beta < 0.8 ? "Low Volatility" : beta > 1.2 ? "High Volatility" : "Market-like Volatility"}

0.0

1.0

2.0+

)} ) } [V0_FILE]typescriptreact:file="tailwind.config.js" isEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="components/ui/toast.tsx" isMerged="true" "use client" import * as React from "react" import { X } from "lucide-react" import * as ToastPrimitives from "@radix-ui/react-toast" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const ToastProvider = ToastPrimitives.Provider const ToastViewport = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastViewport.displayName = ToastPrimitives.Viewport.displayName const toastVariants = cva( "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full", { variants: { variant: { default: "border bg-background text-foreground", destructive: "destructive group border-destructive bg-destructive text-destructive-foreground", }, }, defaultVariants: { variant: "default", }, }, ) const Toast = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, variant, ...props }, ref) => { return }) Toast.displayName = ToastPrimitives.Root.displayName const ToastAction = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastAction.displayName = ToastPrimitives.Action.displayName const ToastClose = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastClose.displayName = ToastPrimitives.Close.displayName const ToastTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastTitle.displayName = ToastPrimitives.Title.displayName const ToastDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastDescription.displayName = ToastPrimitives.Description.displayName type ToastProps = React.ComponentPropsWithoutRef type ToastActionElement = React.ReactElement export { type ToastProps, type ToastActionElement, ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, } [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="components/ui/use-toast.ts" isFixed="true" isQuickEdit="true" isMerged="true" "use client" // Adapted from: https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/default/ui/use-toast.ts import * as React from "react" import type { ToastActionElement, ToastProps } from "@/components/ui/toast" const TOAST_LIMIT = 5 const TOAST_REMOVE_DELAY = 5000 type ToasterToast = ToastProps & { id: string title?: React.ReactNode description?: React.ReactNode action?: ToastActionElement } const actionTypes = { ADD_TOAST: "ADD_TOAST", UPDATE_TOAST: "UPDATE_TOAST", DISMISS_TOAST: "DISMISS_TOAST", REMOVE_TOAST: "REMOVE_TOAST", } as const let count = 0 function genId() { count = (count + 1) % Number.MAX_SAFE_INTEGER return count.toString() } type ActionType = typeof actionTypes type Action = | { type: ActionType["ADD_TOAST"] toast: ToasterToast } | { type: ActionType["UPDATE_TOAST"] toast: Partial } | { type: ActionType["DISMISS_TOAST"] toastId?: string } | { type: ActionType["REMOVE_TOAST"] toastId?: string } interface State { toasts: ToasterToast[] } const toastTimeouts = new Map>() const reducer = (state: State, action: Action): State => { switch (action.type) { case actionTypes.ADD_TOAST: return { ...state, toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT), } case actionTypes.UPDATE_TOAST: return { ...state, toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)), } case actionTypes.DISMISS_TOAST: { const { toastId } = action if (toastId) { toastTimeouts.set( toastId, setTimeout(() => { toastTimeouts.delete(toastId) dispatch({ type: actionTypes.REMOVE_TOAST, toastId, }) }, TOAST_REMOVE_DELAY), ) } return { ...state, toasts: state.toasts.map((t) => t.id === toastId || toastId === undefined ? { ...t, open: false, } : t, ), } } case actionTypes.REMOVE_TOAST: if (action.toastId === undefined) { return { ...state, toasts: [], } } return { ...state, toasts: state.toasts.filter((t) => t.id !== action.toastId), } } } const listeners: Array<(state: State) => void> = [] let memoryState: State = { toasts: [] } function dispatch(action: Action) { memoryState = reducer(memoryState, action) listeners.forEach((listener) => { listener(memoryState) }) } type Toast = Omit function toast({ ...props }: Toast) { const id = genId() const update = (props: ToasterToast) => dispatch({ type: actionTypes.UPDATE_TOAST, toast: { ...props, id }, }) const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id }) dispatch({ type: actionTypes.ADD_TOAST, toast: { ...props, id, open: true, onOpenChange: (open) => { if (!open) dismiss() }, }, }) return { id, dismiss, update, } } function useToast() { const [state, setState] = React.useState(memoryState) React.useEffect(() => { listeners.push(setState) return () => { const index = listeners.indexOf(setState) if (index > -1) { listeners.splice(index, 1) } } }, []) return { ...state, toast, dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }), } } export { useToast, toast } [V0_FILE]typescriptreact:file="components/toaster.tsx" isMerged="true" "use client" import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast" import { useToast } from "@/components/ui/use-toast" export function Toaster() { const { toasts } = useToast() return ( {toasts.map(({ id, title, description, action, ...props }) => (

{title && {title}} {description && {description}}

{action} ))} ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import "@/app/globals.css" import { Inter } from "next/font/google" import { Toaster } from "@/components/toaster" const inter = Inter({ subsets: ["latin"] }) export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/ui/pagination.tsx" isQuickEdit="true" isMerged="true" import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react" import { Button } from "@/components/ui/button" interface PaginationProps { currentPage: number totalPages: number onPageChange: (page: number) => void } export function Pagination({ currentPage, totalPages, onPageChange }: PaginationProps) { // Generate page numbers to display const getPageNumbers = () => { const pages = [] // Always show first page pages.push(1) // Add ellipsis if needed if (currentPage > 3) { pages.push(-1) // -1 represents ellipsis } // Add pages around current page for (let i = Math.max(2, currentPage - 1); i <= Math.min(totalPages - 1, currentPage + 1); i++) { pages.push(i) } // Add ellipsis if needed if (currentPage < totalPages - 2) { pages.push(-2) // -2 represents ellipsis } // Always show last page if there is more than one page if (totalPages > 1) { pages.push(totalPages) } return pages } const pageNumbers = getPageNumbers() return (

{pageNumbers.map((page, index) => { if (page < 0) { return ( ) } return ( ) })}

) } export const PaginationContent = () => null export const PaginationItem = () => null export const PaginationLink = () => null export const PaginationEllipsis = () => null export const PaginationPrevious = () => null export const PaginationNext = () => null [V0_FILE]typescriptreact:file="components/beta-visualization.tsx" "use client" import { useState, useEffect, useMemo } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Loader2 } from "lucide-react" import { ScatterChart, Scatter, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, LineChart, Line, } from "recharts" import { fetchStockReturns } from "@/lib/api" import type { Stock } from "@/components/stock-screener" interface BetaVisualizationProps { stock: Stock loading?: boolean } export function BetaVisualization({ stock, loading }: BetaVisualizationProps) { const [timeframe, setTimeframe] = useState("1y") const [marketIndex, setMarketIndex] = useState("NIFTY") const [returns, setReturns] = useState([]) const [rollingBeta, setRollingBeta] = useState([]) const [dataLoading, setDataLoading] = useState(false) // Fetch returns data useEffect(() => { const loadReturns = async () => { setDataLoading(true) try { const data = await fetchStockReturns(stock.symbol, marketIndex, timeframe) setReturns(data.returns) setRollingBeta(data.rollingBeta) } catch (err) { console.error("Failed to fetch returns data:", err) } setDataLoading(false) } loadReturns() }, [stock.symbol, marketIndex, timeframe]) // Calculate regression line const regressionLine = useMemo(() => { if (returns.length === 0) return [] const xValues = returns.map((r) => r.marketReturn) const yValues = returns.map((r) => r.stockReturn) const xMean = xValues.reduce((a, b) => a + b, 0) / xValues.length const yMean = yValues.reduce((a, b) => a + b, 0) / yValues.length let numerator = 0 let denominator = 0 for (let i = 0; i < xValues.length; i++) { numerator += (xValues[i] - xMean) * (yValues[i] - yMean) denominator += Math.pow(xValues[i] - xMean, 2) } const slope = numerator / denominator const intercept = yMean - slope * xMean const minX = Math.min(...xValues) const maxX = Math.max(...xValues) return [ { x: minX, y: slope * minX + intercept }, { x: maxX, y: slope * maxX + intercept }, ] }, [returns]) // Calculate R-squared const rSquared = useMemo(() => { if (returns.length === 0) return 0 const xValues = returns.map((r) => r.marketReturn) const yValues = returns.map((r) => r.stockReturn) const yMean = yValues.reduce((a, b) => a + b, 0) / yValues.length let totalSS = 0 let residualSS = 0 for (let i = 0; i < returns.length; i++) { const yPred = regressionLine[0].y + ((regressionLine[1].y - regressionLine[0].y) * (xValues[i] - regressionLine[0].x)) / (regressionLine[1].x - regressionLine[0].x) totalSS += Math.pow(yValues[i] - yMean, 2) residualSS += Math.pow(yValues[i] - yPred, 2) } return 1 - residualSS / totalSS }, [returns, regressionLine]) return (

Beta Analysis for {stock.symbol} Analyzing stock's relationship with{" "} {marketIndex === "NIFTY" ? "NIFTY 50" : marketIndex === "SENSEX" ? "SENSEX" : "BANK NIFTY"}

Regression Analysis Rolling Beta {dataLoading ? (

Loading data...

) : ( <>

[`${value.toFixed(2)}%`]} /> {/* Regression line */}

Beta Slope of regression line

1.2 ? "text-red-600" : "text-amber-600" }`} > {stock.beta.toFixed(2)}

R-Squared Goodness of fit

{(rSquared * 100).toFixed(1)}%

Correlation Return correlation

{(Math.sqrt(rSquared) * (stock.beta >= 0 ? 1 : -1)).toFixed(2)}

)} {dataLoading ? (

Loading data...

) : ( <>

[value.toFixed(2), "Beta"]} labelFormatter={(label) => new Date(label).toLocaleDateString()} /> {/* Market beta line (1.0) */}

Rolling Beta Analysis

The chart shows how {stock.symbol}'s beta changes over time using a 60-day rolling window. Values above the dashed line (β = 1.0) indicate periods of higher volatility relative to the market, while values below indicate lower volatility.

)} ) } [V0_FILE]typescriptreact:file="components/stock-chart.tsx" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Button } from "@/components/ui/button" import { Loader2, ZoomIn, ZoomOut, ArrowLeftRight } from "lucide-react" import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, ReferenceLine } from "recharts" import type { Stock } from "@/components/stock-screener" import { fetchCandleData } from "@/lib/api" interface StockChartProps { stock: Stock loading?: boolean } interface CandleData { date: string open: number high: number low: number close: number volume: number } const technicalIndicators = [ { value: "sma", label: "Simple Moving Average" }, { value: "ema", label: "Exponential Moving Average" }, { value: "rsi", label: "Relative Strength Index" }, { value: "macd", label: "MACD" }, ] export function StockChart({ stock, loading }: StockChartProps) { const [timeframe, setTimeframe] = useState("1y") const [chartType, setChartType] = useState("candle") const [indicators, setIndicators] = useState([]) const [candleData, setCandleData] = useState([]) const [dataLoading, setDataLoading] = useState(false) const [zoomLevel, setZoomLevel] = useState(1) const [panOffset, setPanOffset] = useState(0) // Fetch candle data useEffect(() => { const loadCandleData = async () => { setDataLoading(true) try { const data = await fetchCandleData(stock.symbol, timeframe) setCandleData(data) } catch (err) { console.error("Failed to fetch candle data:", err) } setDataLoading(false) } loadCandleData() }, [stock.symbol, timeframe]) // Calculate technical indicators const calculateIndicators = (data: CandleData[]) => { const result = [...data] if (indicators.includes("sma")) { const period = 20 for (let i = period - 1; i < data.length; i++) { const sum = data.slice(i - period + 1, i + 1).reduce((acc, val) => acc + val.close, 0) result[i].sma = sum / period } } if (indicators.includes("ema")) { const period = 20 const multiplier = 2 / (period + 1) let ema = data[0].close for (let i = 1; i < data.length; i++) { ema = (data[i].close - ema) * multiplier + ema result[i].ema = ema } } if (indicators.includes("rsi")) { const period = 14 let gains = 0 let losses = 0 for (let i = 1; i < data.length; i++) { const change = data[i].close - data[i - 1].close if (change >= 0) { gains += change } else { losses -= change } if (i >= period) { const rs = gains / losses result[i].rsi = 100 - 100 / (1 + rs) const oldChange = data[i - period].close - data[i - period - 1].close if (oldChange >= 0) { gains -= oldChange } else { losses += oldChange } } } } if (indicators.includes("macd")) { const ema12 = [] const ema26 = [] let prevEma12 = data[0].close let prevEma26 = data[0].close for (let i = 1; i < data.length; i++) { // Calculate 12-day EMA prevEma12 = (data[i].close - prevEma12) * (2 / 13) + prevEma12 ema12.push(prevEma12) // Calculate 26-day EMA prevEma26 = (data[i].close - prevEma26) * (2 / 27) + prevEma26 ema26.push(prevEma26) // Calculate MACD line result[i].macd = prevEma12 - prevEma26 } } return result } const processedData = calculateIndicators(candleData) const visibleData = processedData.slice( Math.max(0, panOffset), Math.min(processedData.length, panOffset + Math.floor(processedData.length / zoomLevel)), ) const handleZoomIn = () => { setZoomLevel((prev) => Math.min(prev * 1.5, 4)) } const handleZoomOut = () => { setZoomLevel((prev) => Math.max(prev / 1.5, 1)) } const handlePan = (direction: "left" | "right") => { setPanOffset((prev) => { const step = Math.floor(processedData.length / zoomLevel / 4) const newOffset = direction === "left" ? Math.max(0, prev - step) : Math.min(processedData.length - Math.floor(processedData.length / zoomLevel), prev + step) return newOffset }) } return (

Price Chart - {stock.symbol} {chartType === "candle" ? "Candlestick" : "Line"} chart with technical indicators

Price Volume

{technicalIndicators.map((indicator) => ( ))}

{dataLoading ? (

Loading price data...

) : (

new Date(date).toLocaleDateString()} /> new Date(label).toLocaleDateString()} formatter={(value: number) => [`₹${value.toFixed(2)}`, "Price"]} /> {/* Price Area */} {/* Technical Indicators */} {indicators.includes("sma") && ( )} {indicators.includes("ema") && ( )} {indicators.includes("rsi") && ( )} {indicators.includes("macd") && ( )}

)}

{dataLoading ? (

Loading volume data...

) : (

new Date(date).toLocaleDateString()} /> new Date(label).toLocaleDateString()} formatter={(value: number) => [`${(value / 1000000).toFixed(2)}M`, "Volume"]} />

)} ) } [V0_FILE]typescriptreact:file="components/export-data.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Checkbox } from "@/components/ui/checkbox" import { Label } from "@/components/ui/label" import { FileSpreadsheet, FileText, FileCode, Loader2 } from "lucide-react" import type { Stock } from "@/components/stock-screener" import * as XLSX from "xlsx" import { jsPDF } from "jspdf" import "jspdf-autotable" interface ExportDataProps { stocks: Stock[] loading?: boolean } interface ExportOptions { includePrice: boolean includeBeta: boolean includeVolume: boolean includeMarketCap: boolean includePE: boolean } export function ExportData({ stocks, loading }: ExportDataProps) { const [exporting, setExporting] = useState(false) const [options, setOptions] = useState({ includePrice: true, includeBeta: true, includeVolume: true, includeMarketCap: true, includePE: true, }) // Helper function to format data based on options const formatData = () => { return stocks.map((stock) => { const data: any = { Symbol: stock.symbol, Name: stock.name, Sector: stock.sector, Exchange: stock.exchange, } if (options.includePrice) { data.Price = `₹${stock.price.toFixed(2)}` data["Change %"] = `${stock.changePercent >= 0 ? "+" : ""}${stock.changePercent.toFixed(2)}%` } if (options.includeBeta) { data.Beta = stock.beta.toFixed(2) } if (options.includeVolume) { data["Volume (M)"] = stock.volume.toFixed(2) } if (options.includeMarketCap) { data["Market Cap (Cr)"] = stock.marketCap.toFixed(0) } if (options.includePE) { data["P/E Ratio"] = stock.pe.toFixed(1) } return data }) } // Export to Excel const exportToExcel = async () => { try { setExporting(true) const data = formatData() const ws = XLSX.utils.json_to_sheet(data) const wb = XLSX.utils.book_new() XLSX.utils.book_append_sheet(wb, ws, "Stocks") XLSX.writeFile(wb, "indian-stocks-data.xlsx") } catch (err) { console.error("Failed to export Excel:", err) } finally { setExporting(false) } } // Export to PDF const exportToPDF = async () => { try { setExporting(true) const data = formatData() const doc = new jsPDF() // Add title doc.setFontSize(16) doc.text("Indian Stock Market Data", 14, 15) // Add timestamp doc.setFontSize(10) doc.text(`Generated on: ${new Date().toLocaleString()}`, 14, 22) // Convert data to format suitable for autotable const headers = Object.keys(data[0]) const rows = data.map((item) => Object.values(item)) // Add table doc.autoTable({ head: [headers], body: rows, startY: 25, styles: { fontSize: 8 }, headStyles: { fillColor: [41, 128, 185] }, // Blue header margin: { top: 15 }, }) doc.save("indian-stocks-data.pdf") } catch (err) { console.error("Failed to export PDF:", err) } finally { setExporting(false) } } // Export to HTML const exportToHTML = async () => { try { setExporting(true) const data = formatData() // Create HTML content const html = ` Indian Stock Market Data ${Object.keys(data[0]) .map((header) => ``) .join("")} ${data .map( (row) => ` ${Object.values(row) .map((value) => ``) .join("")} `, ) .join("")}

${header}
${value}

` // Create blob and download const blob = new Blob([html], { type: "text/html" }) const url = window.URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = "indian-stocks-data.html" document.body.appendChild(a) a.click() document.body.removeChild(a) window.URL.revokeObjectURL(url) } catch (err) { console.error("Failed to export HTML:", err) } finally { setExporting(false) } } return ( Export Data Download stock data in various formats

Include Fields

setOptions((prev) => ({ ...prev, includePrice: checked as boolean }))} /> Price & Change

setOptions((prev) => ({ ...prev, includeBeta: checked as boolean }))} /> Beta

setOptions((prev) => ({ ...prev, includeVolume: checked as boolean }))} /> Volume

setOptions((prev) => ({ ...prev, includeMarketCap: checked as boolean })) } /> Market Cap

setOptions((prev) => ({ ...prev, includePE: checked as boolean }))} /> P/E Ratio

) } [V0_FILE]typescriptreact:file="components/stock-details.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { X } from "lucide-react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import type { Stock } from "@/components/stock-screener" import { BetaVisualization } from "@/components/beta-visualization" import { StockChart } from "@/components/stock-chart" export function StockDetails({ stock, onClose }: { stock: Stock; onClose: () => void }) { return ( ) } [V0_FILE]typescriptreact:file="components/stock-screener.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Search, SlidersHorizontal, ArrowUpDown, Info, Loader2 } from "lucide-react" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet" import { Slider } from "@/components/ui/slider" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import { BetaChart } from "@/components/beta-chart" import { StockDetails } from "@/components/stock-details" import { fetchIndianStocks, fetchStockDetails } from "@/lib/api" import { Pagination } from "@/components/ui/pagination" import { useToast } from "@/components/ui/use-toast" import { ExportData } from "@/components/export-data" // Define stock type export type Stock = { symbol: string name: string price: number change: number changePercent: number marketCap: number volume: number beta: number sector: string pe: number exchange: string } const indianSectors = [ "All Sectors", "Information Technology", "Banking & Financial Services", "Oil & Gas", "Pharmaceuticals", "Automotive", "Consumer Goods", "Metals & Mining", "Power", "Telecom", "Infrastructure", ] const exchanges = ["All Exchanges", "NSE", "BSE"] const indices = ["All Indices", "NIFTY 50", "SENSEX", "NIFTY BANK", "NIFTY IT", "NIFTY PHARMA"] export default function StockScreener() { const [stocks, setStocks] = useState([]) const [filteredStocks, setFilteredStocks] = useState([]) const [searchTerm, setSearchTerm] = useState("") const [sortField, setSortField] = useState("symbol") const [sortDirection, setSortDirection] = useState("asc") const [selectedSector, setSelectedSector] = useState("All Sectors") const [selectedExchange, setSelectedExchange] = useState("All Exchanges") const [selectedIndex, setSelectedIndex] = useState("All Indices") const [betaRange, setBetaRange] = useState([0, 3]) const [selectedStock, setSelectedStock] = useState(null) const [loading, setLoading] = useState(true) const [error, setError] = useState("") const [page, setPage] = useState(1) const [totalPages, setTotalPages] = useState(1) const itemsPerPage = 10 const { toast } = useToast() // Fetch stocks on initial load useEffect(() => { const loadStocks = async () => { try { setLoading(true) const data = await fetchIndianStocks() setStocks(data) setLoading(false) } catch (err) { setError("Failed to load stock data. Please try again later.") setLoading(false) toast({ title: "Error", description: "Failed to load stock data. Please try again later.", variant: "destructive", }) } } loadStocks() }, [toast]) // Filter and sort stocks useEffect(() => { let result = [...stocks] // Apply search filter if (searchTerm) { result = result.filter( (stock) => stock.symbol.toLowerCase().includes(searchTerm.toLowerCase()) || stock.name.toLowerCase().includes(searchTerm.toLowerCase()), ) } // Apply sector filter if (selectedSector !== "All Sectors") { result = result.filter((stock) => stock.sector === selectedSector) } // Apply exchange filter if (selectedExchange !== "All Exchanges") { result = result.filter((stock) => stock.exchange === selectedExchange) } // Apply index filter if (selectedIndex !== "All Indices") { // In a real implementation, this would filter based on index membership // For now, we'll simulate this with a subset of stocks if (selectedIndex === "NIFTY 50") { result = result.filter((stock) => stock.marketCap > 500) // Just a simulation } else if (selectedIndex === "SENSEX") { result = result.filter((stock) => stock.marketCap > 800) // Just a simulation } } // Apply beta range filter result = result.filter((stock) => stock.beta >= betaRange[0] && stock.beta <= betaRange[1]) // Sort stocks result.sort((a, b) => { if (sortDirection === "asc") { return a[sortField as keyof Stock] > b[sortField as keyof Stock] ? 1 : -1 } else { return a[sortField as keyof Stock] < b[sortField as keyof Stock] ? 1 : -1 } }) setFilteredStocks(result) setTotalPages(Math.ceil(result.length / itemsPerPage)) // Reset to first page when filters change setPage(1) }, [stocks, searchTerm, sortField, sortDirection, selectedSector, selectedExchange, selectedIndex, betaRange]) // Handle sort const handleSort = (field: string) => { if (field === sortField) { setSortDirection(sortDirection === "asc" ? "desc" : "asc") } else { setSortField(field) setSortDirection("asc") } } // Get paginated stocks const getPaginatedStocks = () => { const startIndex = (page - 1) * itemsPerPage const endIndex = startIndex + itemsPerPage return filteredStocks.slice(startIndex, endIndex) } // Handle stock selection for details const handleStockSelect = async (stock: Stock) => { try { setLoading(true) const detailedStock = await fetchStockDetails(stock.symbol) setSelectedStock(detailedStock) setLoading(false) } catch (err) { toast({ title: "Error", description: "Failed to load stock details. Please try again.", variant: "destructive", }) setLoading(false) } } return (

setSearchTerm(e.target.value)} />

Filter Stocks Customize your Indian stock screening criteria

Exchange

Index

Sector

Beta Range {betaRange[0].toFixed(1)} - {betaRange[1].toFixed(1)}

Low Volatility High Volatility

Table View Beta Analysis {loading && stocks.length === 0 ? (

Loading stock data...

) : error ? (

{error}

) : ( <>

handleSort("symbol")}> Symbol {sortField === "symbol" && ( )} handleSort("name")}> Company {sortField === "name" && ( )} handleSort("exchange")}> Exchange {sortField === "exchange" && ( )} handleSort("price")}> Price (₹) {sortField === "price" && ( )} handleSort("changePercent")}> Change % {sortField === "changePercent" && ( )} handleSort("marketCap")}> Market Cap (Cr) {sortField === "marketCap" && ( )} handleSort("beta")}> Beta {sortField === "beta" && ( )}

Beta Explained

Beta measures a stock's volatility compared to the overall market (NIFTY 50). A beta of 1 indicates the stock moves with the market. A beta greater than 1 indicates higher volatility, while less than 1 indicates lower volatility.

Actions {getPaginatedStocks().map((stock) => ( {stock.symbol} {stock.name} {stock.sector} {stock.exchange} ₹{stock.price.toFixed(2)} = 0 ? "text-green-600" : "text-red-600"}`} > {stock.changePercent >= 0 ? "+" : ""} {stock.changePercent.toFixed(2)}% ₹{stock.marketCap.toFixed(0)} = 0.8 && stock.beta <= 1.2 ? "text-amber-600" : ""} ${stock.beta > 1.2 ? "text-red-600" : ""} `} > {stock.beta.toFixed(2)} ))} {filteredStocks.length === 0 && ( No stocks match your criteria )}

{filteredStocks.length > 0 && (

)} )} {selectedStock && setSelectedStock(null)} />}

) } [V0_FILE]typescript:file="lib/api.ts" isEdit="true" isQuickEdit="true" import type { Stock } from "@/components/stock-screener" // Mock data for Indian stocks const mockIndianStocks: Stock[] = [ { symbol: "RELIANCE.NS", name: "Reliance Industries Ltd.", price: 2875.45, change: 35.25, changePercent: 1.24, marketCap: 1945000, volume: 8.3, beta: 1.05, sector: "Oil & Gas", pe: 28.4, exchange: "NSE", }, { symbol: "TCS.NS", name: "Tata Consultancy Services Ltd.", price: 3456.7, change: -12.3, changePercent: -0.35, marketCap: 1265000, volume: 2.1, beta: 0.82, sector: "Information Technology", pe: 32.6, exchange: "NSE", }, { symbol: "HDFCBANK.NS", name: "HDFC Bank Ltd.", price: 1678.9, change: 22.45, changePercent: 1.35, marketCap: 935000, volume: 5.6, beta: 0.95, sector: "Banking & Financial Services", pe: 22.8, exchange: "NSE", }, { symbol: "INFY.NS", name: "Infosys Ltd.", price: 1542.3, change: -8.75, changePercent: -0.56, marketCap: 642000, volume: 3.8, beta: 0.88, sector: "Information Technology", pe: 29.5, exchange: "NSE", }, { symbol: "HINDUNILVR.NS", name: "Hindustan Unilever Ltd.", price: 2345.6, change: 15.3, changePercent: 0.66, marketCap: 550000, volume: 1.2, beta: 0.65, sector: "Consumer Goods", pe: 68.2, exchange: "NSE", }, { symbol: "ICICIBANK.NS", name: "ICICI Bank Ltd.", price: 945.75, change: 12.8, changePercent: 1.37, marketCap: 660000, volume: 7.5, beta: 1.12, sector: "Banking & Financial Services", pe: 21.3, exchange: "NSE", }, { symbol: "SBIN.NS", name: "State Bank of India", price: 625.4, change: 8.75, changePercent: 1.42, marketCap: 558000, volume: 9.2, beta: 1.28, sector: "Banking & Financial Services", pe: 12.5, exchange: "NSE", }, { symbol: "BHARTIARTL.NS", name: "Bharti Airtel Ltd.", price: 1078.25, change: -3.45, changePercent: -0.32, marketCap: 602000, volume: 2.8, beta: 0.92, sector: "Telecom", pe: 33.7, exchange: "NSE", }, { symbol: "ITC.NS", name: "ITC Ltd.", price: 445.8, change: 2.35, changePercent: 0.53, marketCap: 556000, volume: 6.7, beta: 0.72, sector: "Consumer Goods", pe: 25.8, exchange: "NSE", }, { symbol: "KOTAKBANK.NS", name: "Kotak Mahindra Bank Ltd.", price: 1756.9, change: -5.6, changePercent: -0.32, marketCap: 348000, volume: 1.9, beta: 1.05, sector: "Banking & Financial Services", pe: 26.4, exchange: "NSE", }, { symbol: "HCLTECH.NS", name: "HCL Technologies Ltd.", price: 1245.3, change: 18.75, changePercent: 1.53, marketCap: 338000, volume: 1.5, beta: 0.85, sector: "Information Technology", pe: 22.1, exchange: "NSE", }, { symbol: "ASIANPAINT.NS", name: "Asian Paints Ltd.", price: 3125.45, change: -28.9, changePercent: -0.92, marketCap: 299000, volume: 0.8, beta: 0.78, sector: "Consumer Goods", pe: 72.5, exchange: "NSE", }, { symbol: "AXISBANK.NS", name: "Axis Bank Ltd.", price: 1045.6, change: 12.35, changePercent: 1.19, marketCap: 321000, volume: 4.2, beta: 1.18, sector: "Banking & Financial Services", pe: 18.7, exchange: "NSE", }, { symbol: "TATASTEEL.NS", name: "Tata Steel Ltd.", price: 145.75, change: -2.3, changePercent: -1.55, marketCap: 178000, volume: 12.5, beta: 1.65, sector: "Metals & Mining", pe: 8.2, exchange: "NSE", }, { symbol: "SUNPHARMA.NS", name: "Sun Pharmaceutical Industries Ltd.", price: 1256.8, change: 15.4, changePercent: 1.24, marketCap: 301000, volume: 1.7, beta: 0.68, sector: "Pharmaceuticals", pe: 32.4, exchange: "NSE", }, { symbol: "MARUTI.NS", name: "Maruti Suzuki India Ltd.", price: 10245.3, change: 125.6, changePercent: 1.24, marketCap: 309000, volume: 0.5, beta: 1.12, sector: "Automotive", pe: 35.8, exchange: "NSE", }, { symbol: "TATAMOTORS.NS", name: "Tata Motors Ltd.", price: 875.45, change: -12.35, changePercent: -1.39, marketCap: 292000, volume: 8.9, beta: 1.72, sector: "Automotive", pe: 15.3, exchange: "NSE", }, { symbol: "NTPC.NS", name: "NTPC Ltd.", price: 325.6, change: 5.45, changePercent: 1.7, marketCap: 315000, volume: 7.2, beta: 0.75, sector: "Power", pe: 12.8, exchange: "NSE", }, { symbol: "BAJFINANCE.NS", name: "Bajaj Finance Ltd.", price: 6745.3, change: -85.6, changePercent: -1.25, marketCap: 407000, volume: 0.9, beta: 1.35, sector: "Banking & Financial Services", pe: 42.5, exchange: "NSE", }, { symbol: "WIPRO.NS", name: "Wipro Ltd.", price: 456.75, change: 3.25, changePercent: 0.72, marketCap: 249000, volume: 3.1, beta: 0.82, sector: "Information Technology", pe: 19.8, exchange: "NSE", }, { symbol: "ADANIENT.NS", name: "Adani Enterprises Ltd.", price: 2456.9, change: -45.3, changePercent: -1.81, marketCap: 280000, volume: 5.8, beta: 1.85, sector: "Infrastructure", pe: 48.2, exchange: "NSE", }, { symbol: "DRREDDY.NS", name: "Dr. Reddy's Laboratories Ltd.", price: 5678.25, change: 78.45, changePercent: 1.4, marketCap: 94000, volume: 0.4, beta: 0.62, sector: "Pharmaceuticals", pe: 28.7, exchange: "NSE", }, { symbol: "POWERGRID.NS", name: "Power Grid Corporation of India Ltd.", price: 245.6, change: 2.35, changePercent: 0.97, marketCap: 228000, volume: 6.5, beta: 0.58, sector: "Power", pe: 13.2, exchange: "NSE", }, // BSE stocks { symbol: "RELIANCE.BO", name: "Reliance Industries Ltd.", price: 2876.45, change: 36.25, changePercent: 1.28, marketCap: 1945000, volume: 2.1, beta: 1.05, sector: "Oil & Gas", pe: 28.4, exchange: "BSE", }, { symbol: "TCS.BO", name: "Tata Consultancy Services Ltd.", price: 3455.7, change: -13.3, changePercent: -0.38, marketCap: 1265000, volume: 0.8, beta: 0.82, sector: "Information Technology", pe: 32.6, exchange: "BSE", }, { symbol: "HDFCBANK.BO", name: "HDFC Bank Ltd.", price: 1679.9, change: 23.45, changePercent: 1.42, marketCap: 935000, volume: 1.2, beta: 0.95, sector: "Banking & Financial Services", pe: 22.8, exchange: "BSE", }, ] // Function to fetch Indian stocks export async function fetchIndianStocks(): Promise { // In a real implementation, this would call an API // For now, we'll return mock data with a simulated delay return new Promise((resolve) => { setTimeout(() => { resolve(mockIndianStocks) }, 1500) }) } // Function to fetch detailed stock information export async function fetchStockDetails(symbol: string): Promise { // In a real implementation, this would call an API // For now, we'll find the stock in our mock data return new Promise((resolve, reject) => { setTimeout(() => { const stock = mockIndianStocks.find((s) => s.symbol === symbol) if (stock) { resolve(stock) } else { reject(new Error("Stock not found")) } }, 800) }) } // Function to calculate beta from a stock symbol export async function calculateBetaFromSymbol( symbol: string, marketIndex: string, timeframe: string, ): Promise<{ beta: number }> { // In a real implementation, this would fetch historical data and calculate beta // For now, we'll return the beta from our mock data or generate a random one return new Promise((resolve, reject) => { setTimeout(() => { const stock = mockIndianStocks.find((s) => s.symbol === symbol) if (stock) { resolve({ beta: stock.beta }) } else { // Generate a random beta between 0.5 and 2.0 resolve({ beta: Math.random() * 1.5 + 0.5 }) } }, 1500) }) } // Function to fetch stock returns export async function fetchStockReturns(symbol: string, marketIndex: string, timeframe: string): Promise { return new Promise((resolve) => { setTimeout(() => { const numPoints = 30 const returns = [] const rollingBeta = [] for (let i = 0; i < numPoints; i++) { const marketReturn = Math.random() * 2 - 1 // Market return between -1% and 1% const stockReturn = marketReturn * 0.8 + (Math.random() * 1 - 0.5) // Stock return correlated to market returns.push({ marketReturn, stockReturn }) const date = new Date() date.setDate(date.getDate() - i) rollingBeta.push({ date: date.toISOString().split("T")[0], beta: 0.9 + Math.random() * 0.2 }) } resolve({ returns: returns.reverse(), rollingBeta: rollingBeta.reverse() }) }, 1000) }) } // Function to fetch candle data export async function fetchCandleData(symbol: string, timeframe: string): Promise { return new Promise((resolve) => { setTimeout(() => { const numPoints = 30 const candleData = [] for (let i = 0; i < numPoints; i++) { const date = new Date() date.setDate(date.getDate() - i) const open = 100 + Math.random() * 10 const close = open + (Math.random() * 5 - 2.5) const high = Math.max(open, close) + Math.random() * 2 const low = Math.min(open, close) - Math.random() * 2 const volume = Math.floor(Math.random() * 1000) candleData.push({ date: date.toISOString().split("T")[0], open, close, high, low, volume, }) } resolve(candleData.reverse()) }, 1000) }) }