[V0_FILE]typescriptreact:file="tailwind.config.js" 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="app/globals.css" isEdit="true" isQuickEdit="true" 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; /* Chart colors */ --chart-1: 142 76% 36%; /* Green */ --chart-2: 221 83% 53%; /* Blue */ --chart-3: 0 84% 60%; /* Red */ } .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%; } @keyframes pulse { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.5); } 100% { opacity: 0; transform: scale(2); } } .animate-pulse { animation: pulse 1s ease-out; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="real-time-chart.tsx" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useState, useRef } from "react" import { Area, AreaChart, CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts" import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Switch } from "@/components/ui/switch" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" // Mock initial data const initialData = Array.from({ length: 20 }, (_, i) => ({ time: new Date(Date.now() - (19 - i) * 1000).toISOString(), price: 100 + Math.random() * 10, isNew: false, })) export default function RealTimeChart() { const [data, setData] = useState(initialData) const [darkMode, setDarkMode] = useState(true) const [isRunning, setIsRunning] = useState(true) const prevDataRef = useRef([...initialData]) // Get the latest price and calculate change const latestPrice = data[data.length - 1]?.price || 0 const previousPrice = data[data.length - 2]?.price || 0 const priceChange = latestPrice - previousPrice const percentChange = (priceChange / previousPrice) * 100 // Format the price and change const formattedPrice = latestPrice.toFixed(2) const formattedChange = priceChange.toFixed(2) const formattedPercent = percentChange.toFixed(2) // Determine if price is up or down const isPriceUp = priceChange >= 0 useEffect(() => { if (!isRunning) return // Update data every second const interval = setInterval(() => { setData((currentData) => { // Store the current data for reference prevDataRef.current = [...currentData] // Generate a new price based on the previous price with some randomness const lastPrice = currentData[currentData.length - 1].price const newPrice = lastPrice + (Math.random() - 0.5) * 2 // Random walk // Create a new data point and mark it as new for animation const newDataPoint = { time: new Date().toISOString(), price: newPrice, isNew: true, // Flag to indicate this is the new point to animate } // Reset the isNew flag for all existing points const updatedData = currentData.map((point) => ({ ...point, isNew: false, })) // Keep only the last 20 data points return [...updatedData.slice(1), newDataPoint] }) }, 1000) return () => clearInterval(interval) }, [isRunning]) // Format time for display const formatTime = (time: string) => { const date = new Date(time) return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" }) } // Toggle dark mode const toggleDarkMode = () => { setDarkMode(!darkMode) document.documentElement.classList.toggle("dark") } // Custom dot component that only animates new points const CustomDot = (props: any) => { const { cx, cy, payload } = props // Check if payload exists and has the isNew property if (!payload || !payload.isNew) return null return } // Custom active dot component const CustomActiveDot = (props: any) => { const { cx, cy } = props return } return (

BTC/USD Real-Time Chart Live price updates with 1-second intervals

Dark Mode

Live Updates

${formattedPrice}

{isPriceUp ? "▲" : "▼"} ${formattedChange} ({formattedPercent}%)

Line Area

`$${value.toFixed(2)}`} /> `$${Number(value).toFixed(2)}`} labelFormatter={formatTime} /> } /> } activeDot={(props) => } isAnimationActive={false} /> `$${value.toFixed(2)}`} /> `$${Number(value).toFixed(2)}`} labelFormatter={formatTime} /> } /> } activeDot={(props) => } isAnimationActive={false} />

) }

About

About