"use client" import { useState, useEffect, useRef } from "react" import { motion } from "framer-motion" import { Line } from "react-chartjs-2" import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Filler, Legend, ChartOptions, } from "chart.js" // Register ChartJS components ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Filler, Legend) /** * CoinChart Component * * A component that displays cryptocurrency price charts with * different time period options and smooth animations. */ export function CoinChart() { // State for selected time period const [selectedPeriod, setSelectedPeriod] = useState("1Y") // Reference for the chart animation const chartRef = useRef(null) // Time period options const timePeriods = ["1D", "1W", "1M", "1Y", "5Y", "10Y"] // Sample data for different time periods const dailyData = { labels: Array.from({ length: 24 }, (_, i) => `${i}:00`), datasets: [ { label: "Bitcoin Price", data: [ 62100, 62300, 62200, 62400, 62350, 62500, 62700, 62900, 63100, 63000, 62800, 62600, 62400, 62200, 62000, 61800, 61900, 62100, 62300, 62500, 62700, 62600, 62420, 62450 ], borderColor: "#6366f1", backgroundColor: "rgba(99, 102, 241, 0.1)", borderWidth: 3, fill: true, tension: 0.4, pointRadius: 0, }, ], } const weeklyData = { labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], datasets: [ { label: "Bitcoin Price", data: [61200, 61500, 62000, 61800, 62200, 62100, 62420], borderColor: "#6366f1", backgroundColor: "rgba(99, 102, 241, 0.1)", borderWidth: 3, fill: true, tension: 0.4, pointRadius: 0, }, ], } const monthlyData = { labels: Array.from({ length: 30 }, (_, i) => `${i + 1}`), datasets: [ { label: "Bitcoin Price", data: [ 60000, 60200, 60400, 60300, 60500, 60700, 60900, 61100, 61300, 61200, 61400, 61600, 61500, 61300, 61100, 61000, 60800, 60900, 61100, 61300, 61500, 61700, 61900, 62100, 62300, 62100, 62000, 62200, 62300, 62420 ], borderColor: "#6366f1", backgroundColor: "rgba(99, 102, 241, 0.1)", borderWidth: 3, fill: true, tension: 0.4, pointRadius: 0, }, ], } const yearlyData = { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [ { label: "Bitcoin Price", data: [37000, 38500, 40000, 39000, 43000, 41000, 44000, 46000, 45000, 47000, 48000, 62420], borderColor: "#6366f1", backgroundColor: "rgba(99, 102, 241, 0.1)", borderWidth: 3, fill: true, tension: 0.4, pointRadius: 0, }, ], } const fiveYearData = { labels: ["2021", "2022", "2023", "2024", "2025"], datasets: [ { label: "Bitcoin Price", data: [29000, 16000, 42000, 55000, 62420], borderColor: "#6366f1", backgroundColor: "rgba(99, 102, 241, 0.1)", borderWidth: 3, fill: true, tension: 0.4, pointRadius: 0, }, ], } const tenYearData = { labels: ["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"], datasets: [ { label: "Bitcoin Price", data: [600, 19000, 3500, 7200, 29000, 69000, 16000, 42000, 55000, 62420], borderColor: "#6366f1", backgroundColor: "rgba(99, 102, 241, 0.1)", borderWidth: 3, fill: true, tension: 0.4, pointRadius: 0, }, ], } // Function to get data based on selected period const getChartData = (period: string) => { switch (period) { case "1D": return dailyData case "1W": return weeklyData case "1M": return monthlyData case "1Y": return yearlyData case "5Y": return fiveYearData case "10Y": return tenYearData default: return yearlyData } } // Get chart data based on selected period const [chartData, setChartData] = useState(getChartData(selectedPeriod)) // Chart options const options: ChartOptions<"line"> = { responsive: true, maintainAspectRatio: false, scales: { x: { grid: { color: "rgba(255, 255, 255, 0.1)", borderDash: [5, 5], }, ticks: { color: "rgba(255, 255, 255, 0.7)", font: { size: 12, }, }, }, y: { position: "left", grid: { display: false, }, ticks: { color: "rgba(255, 255, 255, 0.7)", font: { size: 12, }, callback: (value) => { return `$${value.toLocaleString()}` }, }, min: 0, max: 70000, }, }, plugins: { legend: { display: false, }, tooltip: { mode: "index", intersect: false, backgroundColor: "rgba(0, 0, 0, 0.8)", titleColor: "#fff", bodyColor: "#fff", borderColor: "rgba(255, 255, 255, 0.2)", borderWidth: 1, padding: 10, displayColors: false, callbacks: { label: (context) => { return `$${context.parsed.y.toLocaleString()}` }, }, }, }, interaction: { mode: "nearest", axis: "x", intersect: false, }, animation: { duration: 1000, }, } // Animation variants const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { when: "beforeChildren", staggerChildren: 0.1, }, }, } const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.4 }, }, } const buttonVariants = { initial: { opacity: 0.7 }, hover: { opacity: 1, scale: 1.05, transition: { duration: 0.2 } }, tap: { scale: 0.95, transition: { duration: 0.1 } }, selected: { opacity: 1, backgroundColor: "rgba(255, 255, 255, 0.1)", color: "#fff" }, } const iconVariants = { hidden: { scale: 0.8, opacity: 0 }, visible: { scale: 1, opacity: 1, transition: { type: "spring", stiffness: 300, damping: 20, delay: 0.1, }, }, } // Effect to update chart data when period changes useEffect(() => { setChartData(getChartData(selectedPeriod)) if (chartRef.current) { chartRef.current.update() } }, [selectedPeriod]) return ( {/* Header with coin info and period selectors */}

₿

Bitcoin

$62,420

{timePeriods.map((period) => ( setSelectedPeriod(period)} variants={buttonVariants} initial="initial" whileHover="hover" whileTap="tap" animate={selectedPeriod === period ? "selected" : "initial"} > {period} ))}

{/* Chart */} ) }

Coin Chart

Bitcoin