From d15dc83f958ef05bfbcf4a15e51a649f98d7bbd1 Mon Sep 17 00:00:00 2001 From: dredshep Date: Thu, 11 Apr 2024 12:13:26 +0100 Subject: [PATCH] make tiny chart & update footer --- components/Footer.tsx | 41 +++++++++++++++---- components/app/atoms/TinyVegaChart/index.tsx | 38 +++++++++++++++++ .../FinancialTable/FinancialDataRow.tsx | 3 +- .../organisms/FinancialTable/TableHeaders.tsx | 2 +- hooks/useResizeObserver.tsx | 18 ++++++++ pages/app/tokens/index.tsx | 2 +- types/charts/index.ts | 8 ++++ utils/apis/getTinyChartData.ts | 38 +++++++++++++++++ utils/charts/createSpec.ts | 29 +++++++++++++ utils/charts/determineTrend.ts | 9 ++++ utils/charts/index.ts | 2 + 11 files changed, 179 insertions(+), 11 deletions(-) create mode 100644 components/app/atoms/TinyVegaChart/index.tsx create mode 100644 hooks/useResizeObserver.tsx create mode 100644 types/charts/index.ts create mode 100644 utils/apis/getTinyChartData.ts create mode 100644 utils/charts/createSpec.ts create mode 100644 utils/charts/determineTrend.ts create mode 100644 utils/charts/index.ts diff --git a/components/Footer.tsx b/components/Footer.tsx index cb09dc6..34b0bd3 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -1,4 +1,10 @@ -import { FaDiscord, FaTwitter, FaMediumM, FaRedditAlien } from "react-icons/fa"; +import { + FaDiscord, + FaTwitter, + FaMediumM, + FaRedditAlien, + FaGithub, +} from "react-icons/fa"; import { SiTelegram } from "react-icons/si"; import Link from "next/link"; @@ -8,19 +14,40 @@ const Footer = () => {
Adamant.fi ©2024 – - + Privacy policy - + Contact
-
- +
+ {/* discord */} + - - + {/* twitter */} + + + + {/* github */} + +
diff --git a/components/app/atoms/TinyVegaChart/index.tsx b/components/app/atoms/TinyVegaChart/index.tsx new file mode 100644 index 0000000..191e3da --- /dev/null +++ b/components/app/atoms/TinyVegaChart/index.tsx @@ -0,0 +1,38 @@ +import React, { useEffect, useState, useRef } from "react"; +import { VegaLite, VisualizationSpec } from "react-vega"; +import { useResizeObserver } from "@/hooks/useResizeObserver"; +import { getTinyChartData } from "@/utils/apis/getTinyChartData"; +import { TinyVegaChartProps } from "@/types/charts"; +import { determineTrend, createSpec } from "@/utils/charts"; + +const TinyVegaChart: React.FC = ({ tokenAddress }) => { + const [spec, setSpec] = useState({}); + const containerRef = useRef(null); + + useResizeObserver(containerRef, ([entry]) => + updateSpecWidth(entry.contentRect.width) + ); + + useEffect(() => { + const fetchDataAndUpdateSpec = async () => { + const values = await getTinyChartData(tokenAddress); + const trend = determineTrend(values); + const newSpec = createSpec(values, trend); + setSpec(newSpec); + }; + + fetchDataAndUpdateSpec(); + }, [tokenAddress]); + + const updateSpecWidth = (width: number) => { + setSpec((currentSpec) => ({ ...currentSpec, width })); + }; + + return ( +
+ +
+ ); +}; + +export default TinyVegaChart; diff --git a/components/app/organisms/FinancialTable/FinancialDataRow.tsx b/components/app/organisms/FinancialTable/FinancialDataRow.tsx index 78b501e..6bca955 100644 --- a/components/app/organisms/FinancialTable/FinancialDataRow.tsx +++ b/components/app/organisms/FinancialTable/FinancialDataRow.tsx @@ -25,8 +25,7 @@ const FinancialDataRow: React.FC = ({ cells }) => { "flex-1", { "text-green-500": cell.modifier === "positive" }, { "text-red-500": cell.modifier === "negative" }, - { "font-bold": cell.bold }, - { "rounded-b-[10px]": index === cells.length - 1 } + { "font-bold": cell.bold } )} style={{ minWidth: cell.minWidth }} > diff --git a/components/app/organisms/FinancialTable/TableHeaders.tsx b/components/app/organisms/FinancialTable/TableHeaders.tsx index 4f8bbbe..43cca91 100644 --- a/components/app/organisms/FinancialTable/TableHeaders.tsx +++ b/components/app/organisms/FinancialTable/TableHeaders.tsx @@ -7,7 +7,7 @@ interface TableHeaderProps { const TableHeaders: React.FC = ({ headers }) => { return ( -
+
{headers.map((header, index) => (
, + callback: ResizeObserverCallback +) => { + useEffect(() => { + const observer = new ResizeObserver(callback); + + if (ref.current) { + observer.observe(ref.current); + } + + return () => { + observer.disconnect(); + }; + }, [ref, callback]); +}; diff --git a/pages/app/tokens/index.tsx b/pages/app/tokens/index.tsx index cc586d6..89947a7 100644 --- a/pages/app/tokens/index.tsx +++ b/pages/app/tokens/index.tsx @@ -39,7 +39,7 @@ export default function TokensPage() { {tokens.map((token, index) => ( => { + // Define mock data for different tokens + const data: Record = { + secret1k0jntykt7e4g3y88ltc60czgjuqdy4c9e8fzek: [ + // Slight upward trend + { time: 1, value: 50 }, + { time: 2, value: 52 }, + { time: 3, value: 51 }, + { time: 4, value: 53 }, + ], + secret15l9cqgz5uezgydrglaak5ahfac69kmx2qpd6xt: [ + // Slight downward trend + { time: 1, value: 50 }, + { time: 2, value: 49 }, + { time: 3, value: 50 }, + { time: 4, value: 48 }, + ], + secret1yxwnyk8htvvq25x2z87yj0r5tqpev452fk6h5h: [ + // Dramatic changes + { time: 1, value: 50 }, + { time: 2, value: 60 }, + { time: 3, value: 40 }, + { time: 4, value: 65 }, + ], + }; + + // Simulate fetching data by returning the mock data for the requested token address + // If the token address is not found, return an empty array + return data[tokenAddress] || []; +}; diff --git a/utils/charts/createSpec.ts b/utils/charts/createSpec.ts new file mode 100644 index 0000000..deb0e6f --- /dev/null +++ b/utils/charts/createSpec.ts @@ -0,0 +1,29 @@ +import { ChartValue } from "@/types/charts"; +import { VisualizationSpec } from "react-vega"; + +export const createSpec = ( + values: ChartValue[], + trend: "growing" | "ungrowing" +): VisualizationSpec => { + const color = trend === "growing" ? "green" : "red"; + + return { + $schema: "https://vega.github.io/schema/vega-lite/v5.json", + width: 65, + height: 30, + background: "transparent", + data: { values }, + mark: { + type: "line", + strokeWidth: 3, + color, + }, + encoding: { + x: { field: "time", type: "quantitative", axis: null }, + y: { field: "value", type: "quantitative", axis: null }, + }, + config: { + view: { stroke: "none" }, + }, + }; +}; diff --git a/utils/charts/determineTrend.ts b/utils/charts/determineTrend.ts new file mode 100644 index 0000000..a70bedf --- /dev/null +++ b/utils/charts/determineTrend.ts @@ -0,0 +1,9 @@ +import { ChartValue } from "@/types/charts"; + +export const determineTrend = ( + values: ChartValue[] +): "growing" | "ungrowing" => { + return values[values.length - 1].value > values[0].value + ? "growing" + : "ungrowing"; +}; diff --git a/utils/charts/index.ts b/utils/charts/index.ts new file mode 100644 index 0000000..54f59a3 --- /dev/null +++ b/utils/charts/index.ts @@ -0,0 +1,2 @@ +export * from "@/utils/charts/determineTrend"; +export * from "@/utils/charts/createSpec";