Momentum Chart

1"use client";
2import { HugeiconsIcon } from "@hugeicons/react";
3import { DotPattern } from "./dot-pattern";
4import { ArrowUpRight01Icon } from "@hugeicons/core-free-icons";
5import { Area, AreaChart, ResponsiveContainer, XAxis } from "recharts";
6import { useSpring, motion, useTransform } from "motion/react";
7import { useEffect } from "react";
8
9const momentumData = [
10  { day: "Mon", value: 90000 },
11  { day: "Tue", value: 140000 },
12  { day: "Wed", value: 175000 },
13  { day: "Thu", value: 150000 },
14  { day: "Fri", value: 110000 },
15  { day: "Sat", value: 200000 },
16  { day: "Sun", value: 264802.43 },
17];
18
19export const MomentumChart = () => {
20  const lastPrice = momentumData[momentumData.length - 1];
21  const priceSpring = useSpring(lastPrice.value, {
22    damping: 20,
23    stiffness: 300,
24  });
25
26  const basePrice = momentumData[0].value;
27  const delta = useTransform(priceSpring, (v) => v - basePrice);
28  const percentage = useTransform(priceSpring, (v) => {
29    const change = v - basePrice;
30    return (change / basePrice) * 100;
31  });
32
33  const formattedPrice = useTransform(priceSpring, (v) =>
34    v.toLocaleString("en-US", {
35      minimumFractionDigits: 2,
36      maximumFractionDigits: 2,
37    }),
38  );
39  const formattedDelta = useTransform(delta, (v) => {
40    const sign = v >= 0 ? "+" : "-";
41    return `${sign} $${Math.abs(v).toLocaleString("en-US", {
42      minimumFractionDigits: 2,
43      maximumFractionDigits: 2,
44    })}`;
45  });
46
47  const formattedPercentage = useTransform(percentage, (v) => {
48    const sign = v >= 0 ? "+" : "-";
49    return `(${sign}${Math.abs(v).toFixed(2)}%)`;
50  });
51
52  const isPositive = useTransform(delta, (v) => v >= 0);
53  const deltaColor = useTransform(isPositive, (v) =>
54    v ? "#60a5fa" : "#f87171",
55  );
56
57  const previousWeekClose = momentumData[0].value;
58  const weekComparison = useTransform(priceSpring, (v) => {
59    const change = v - previousWeekClose;
60    return (change / previousWeekClose) * 100;
61  });
62  const weekSentence = useTransform(weekComparison, (v) => {
63    const sign = v >= 0 ? "+" : "-";
64    const word = v >= 0 ? "More" : "Less";
65
66    return `${sign}${Math.abs(v).toFixed(2)}% ${word} than last week`;
67  });
68
69  useEffect(() => {
70    priceSpring.set(lastPrice.value);
71  }, [lastPrice.value]);
72
73  return (
74// … truncated