From 947308e01f047642ad8186509b46e37068c9255f Mon Sep 17 00:00:00 2001
From: Himanshu Aggarwal <aggarwah@mcmaster.ca>
Date: Sat, 19 Feb 2022 23:44:33 -0500
Subject: [PATCH] Update chart card to query data directly
---
.../components/cards/CryptoChartCard.js | 28 +++++++++++---
.../components/content/Container.js | 2 +-
.../components/sidebar/Sidebar.js | 2 +-
src/cryptometrics/constants/constants.js | 37 ++++++++++++++++++-
src/cryptometrics/pages/index.js | 16 +++-----
5 files changed, 65 insertions(+), 20 deletions(-)
diff --git a/src/cryptometrics/components/cards/CryptoChartCard.js b/src/cryptometrics/components/cards/CryptoChartCard.js
index 2700641..2323fed 100644
--- a/src/cryptometrics/components/cards/CryptoChartCard.js
+++ b/src/cryptometrics/components/cards/CryptoChartCard.js
@@ -4,6 +4,7 @@ import PlaceholderSkeleton from "../skeletons/PlaceholderSkeleton";
import classNames from "classnames";
import Image from "next/image";
import Link from "next/link";
+import { useCryptoTimeSeriesData } from "../../queries";
const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
@@ -16,19 +17,27 @@ function CryptoChartCard({
detail,
detailColor,
options,
- series,
type,
}) {
+ const cryptoQuery = useCryptoTimeSeriesData(currencyId, 1, "hourly");
return (
<Link href={`/coins/${currencyId}`} passHref>
- <a className="w-full xl:w-1/3 hover:scale-[102%] cursor-pointer">
- <div className="rounded-3xl shadow-[0_8px_25px_rgba(0,0,0,7%)] mx-4 mt-8 dark:bg-dark-700">
+ <a className="w-full xl:w-[31%] hover:scale-[102%] cursor-pointer">
+ <div className="rounded-3xl shadow-[0_8px_25px_rgba(0,0,0,7%)] dark:bg-dark-700">
<div className="relative h-60">
<div className="absolute top-0 right-0 left-0 bottom-0 z-10 rounded-3xl overflow-hidden">
- {options && series && type && (
+ {options && type && (
<Chart
options={options}
- series={series}
+ series={[
+ {
+ name: currencyId,
+ data:
+ cryptoQuery.data?.prices.filter((_, index) => {
+ return index % 8 == 0;
+ }) || [],
+ },
+ ]}
type={type}
width="100%"
height="100%"
@@ -46,7 +55,7 @@ function CryptoChartCard({
layout="fixed"
></Image>
</div>
- <div className="flex-item">
+ <div>
<p className="text-3xl font-poppins font-bold text-gray-700 dark:text-gray-100">
{currencyName || (
<PlaceholderSkeleton className="h-9 w-[60%]" />
@@ -56,6 +65,13 @@ function CryptoChartCard({
{symbol}
</p>
</div>
+ <div className="ml-auto">
+ <div className="dark:bg-white w-16 rounded-2xl mt-2">
+ <p className="text-center font-extrabold text-indigo-500">
+ 24H
+ </p>
+ </div>
+ </div>
</div>
{/* TODO: Find a way to change height below so it is auto-adjusted to fit content */}
<div className="flex flex-col h-[9.5rem]">
diff --git a/src/cryptometrics/components/content/Container.js b/src/cryptometrics/components/content/Container.js
index cfc4ec2..70c4ed6 100644
--- a/src/cryptometrics/components/content/Container.js
+++ b/src/cryptometrics/components/content/Container.js
@@ -2,7 +2,7 @@ import React from "react";
function Container(props) {
return (
- <div className="container mx-auto pt-8 p-2 sm:p-8 md:py-16 md:pr-16 md:pl-4">
+ <div className="container mx-auto pt-8 p-2 sm:p-8 md:py-16 md:pr-12 md:pl-4">
{props.children}
</div>
);
diff --git a/src/cryptometrics/components/sidebar/Sidebar.js b/src/cryptometrics/components/sidebar/Sidebar.js
index 7680729..a18fe1d 100644
--- a/src/cryptometrics/components/sidebar/Sidebar.js
+++ b/src/cryptometrics/components/sidebar/Sidebar.js
@@ -12,7 +12,7 @@ function Sidebar() {
<Image
className=""
src="/crypto_logo.png"
- width="230%"
+ width="190%"
height="100%"
objectFit="contain"
alt="CryptoMetrics-logo-large"
diff --git a/src/cryptometrics/constants/constants.js b/src/cryptometrics/constants/constants.js
index 516758f..69f6af6 100644
--- a/src/cryptometrics/constants/constants.js
+++ b/src/cryptometrics/constants/constants.js
@@ -1,4 +1,4 @@
-export const cryptoChartOptions = (dark = false) => {
+export const cryptoChartOptions = (colors = [], dark = false) => {
return {
chart: {
toolbar: {
@@ -61,7 +61,40 @@ export const cryptoChartOptions = (dark = false) => {
tooltip: {
enabled: false,
},
+ colors: colors,
};
};
-export const cryptocurrencies = ["bitcoin"];
+export const cryptocurrencies = [
+ {
+ id: "bitcoin",
+ symbol: "btc",
+ name: "Bitcoin",
+ },
+ {
+ id: "ethereum",
+ symbol: "eth",
+ name: "Ethereum",
+ },
+ {
+ id: "tether",
+ symbol: "usdt",
+ name: "Tether",
+ },
+ { id: "binancecoin", symbol: "bnb", name: "BNB" },
+ {
+ id: "usd-coin",
+ symbol: "usdc",
+ name: "USD Coin",
+ },
+ {
+ id: "ripple",
+ symbol: "xrp",
+ name: "XRP",
+ },
+ {
+ id: "cardano",
+ symbol: "ada",
+ name: "Cardano",
+ },
+];
diff --git a/src/cryptometrics/pages/index.js b/src/cryptometrics/pages/index.js
index 957c3ba..64619d3 100644
--- a/src/cryptometrics/pages/index.js
+++ b/src/cryptometrics/pages/index.js
@@ -5,13 +5,12 @@ import SearchInput from "../components/inputs/SearchInput";
import BoldGradientHeading from "../components/titles/BoldGradientHeading";
import CryptoChartCard from "../components/cards/CryptoChartCard";
import { cryptoChartOptions } from "../constants";
-import { useCryptoList, useCryptoTimeSeriesData } from "../queries";
+import { useCryptoList } from "../queries";
import numeral from "numeral";
import Wrapper from "../components/content/Wrapper";
import Sidebar from "../components/sidebar/Sidebar";
export default function Home() {
- const bitcoin = useCryptoTimeSeriesData("bitcoin", 7);
const listOfCoins = useCryptoList("usd", 5, false);
const filteredCoins = listOfCoins.data?.map((coin) => {
return (
@@ -30,13 +29,10 @@ export default function Home() {
? "text-green-500"
: "text-red-500"
}
- options={cryptoChartOptions(true)}
- series={[
- {
- name: "bitcoin",
- data: bitcoin.data?.prices || [],
- },
- ]}
+ options={cryptoChartOptions(
+ coin.price_change_percentage_24h > 0 ? ["#3DBAA2"] : ["#FF7A68"],
+ true
+ )}
type="area"
/>
);
@@ -60,7 +56,7 @@ export default function Home() {
<SearchInput />
</div>
- <div className="flex flex-row flex-wrap mb-16 p-2">
+ <div className="flex flex-wrap gap-x-10 gap-y-10 mt-10">
{!listOfCoins.isLoading && filteredCoins}
</div>
</Container>
--
GitLab