Skip to content
Snippets Groups Projects
Commit c335538e authored by Aggarwal Himanshu's avatar Aggarwal Himanshu
Browse files

Merge branch 'table-view' into 'develop' 

Add a Table View for Cryptocurrencies

See merge request !6
parents f19e2d17 14b3a14c
No related branches found
No related tags found
2 merge requests!7Merge develop to main,!6Add a Table View for Cryptocurrencies
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 873 additions and 43 deletions
src/cryptometrics/components/charts/CryptoRowLineChart.js 0 → 100644
+ 20
− 0
View file @ c335538e
import React, { useRef } from "react";
import ReactECharts from "echarts-for-react";
import { cryptoLineChartOptions } from "../../constants";
import { useCryptoTimeSeriesData } from "../../queries";
function CryptoRowLineChart({ currencyId, color }) {
const cryptoQuery = useCryptoTimeSeriesData(currencyId, 1, "hourly");
const chartRef = useRef(null);
return (
<ReactECharts
ref={chartRef}
option={cryptoLineChartOptions(cryptoQuery.data?.prices, color)}
style={{
height: "100%",
}}
/>
);
}
export default CryptoRowLineChart;
src/cryptometrics/components/coin/Coin.js 0 → 100644
+ 37
− 0
View file @ c335538e
import React from "react";
const Coin = ({
name,
image,
symbol,
price,
volume,
priceChange,
marketcap,
}) => {
return (
<div className="coin-container">
<div className="coin-row">
<div className="coin">
<img src={image} alt="crypto" />
<p className="coin-name">{name}</p>
<p className="coin-symbol">{symbol}</p>
</div>
<div className="coin-data">
<p className="coin-price">$ {price}</p>
<p className="coin-volume">$ {volume}</p>
{priceChange < 0 ? (
<p className="coin-percent red">{priceChange.toFixed(2)}%</p>
) : (
<p className="coin-percent green">{priceChange.toFixed(2)}%</p>
)}
<p className="coin-marketcap">
Mkt Cap : {marketcap.toLocaleString()}
</p>
</div>
</div>
</div>
);
};
export default Coin;
src/cryptometrics/components/table/Table.js 0 → 100644
+ 32
− 0
View file @ c335538e
import classNames from "classnames";
import React from "react";
export function Table({ children, className }) {
return <table className={classNames("w-full", className)}>{children}</table>;
}
export function TableRow({ children, className }) {
return (
<tr
className={classNames(
"w-full flex justify-between dark:bg-dark-600 my-4 mx-2 px-6 rounded-2xl cursor-pointer text-slate-900 dark:text-white hover:dark:bg-slate-900",
className
)}
>
{children}
</tr>
);
}
export function TableCell({ children, className }) {
return (
<td
className={classNames(
"flex flex-col justify-center items-center align-middle h-20 px-4 font-semibold",
className
)}
>
{children}
</td>
);
}
src/cryptometrics/constants/constants.js
+ 79
− 1
View file @ c335538e
export const cryptoChartOptions = (colors = [], dark = false) => {
export const cryptoChartOptions = (
colors = [],
dark = false,
animationsEnabled = false
) => {
return {
chart: {
toolbar: {
......@@ -7,6 +11,9 @@ export const cryptoChartOptions = (colors = [], dark = false) => {
sparkline: {
enabled: true,
},
animations: {
enabled: animationsEnabled,
},
},
dataLabels: {
enabled: false,
......@@ -65,6 +72,77 @@ export const cryptoChartOptions = (colors = [], dark = false) => {
};
};
export const cryptoLineChartOptions = (seriesData = [], color = "#3590F3") => {
return {
grid: {
bottom: 10,
right: 10,
top: 10,
left: 10,
},
xAxis: {
show: false,
type: "time",
silent: false,
splitLine: {
show: false,
},
splitArea: {
show: false,
},
},
yAxis: {
show: false,
type: "value",
splitArea: {
show: false,
},
splitLine: {
show: false,
},
min: "dataMin",
max: "dataMax",
},
series: [
{
type: "line",
data: seriesData,
name: "Solana",
smooth: true,
symbol: "none",
lineStyle: {
width: 3,
shadowOffsetY: -1,
color: color,
shadowColor: color,
shadowOffsetX: 0,
shadowBlur: 5,
cap: "round",
opacity: 1,
},
animation: false,
},
{
type: "scatter",
data: seriesData.slice(-1),
name: "ABC",
smooth: true,
symbol: "circle",
symbolSize: 20,
itemStyle: {
shadowOffsetY: 0,
color: color,
shadowColor: color,
shadowOffsetX: 0,
shadowBlur: 15,
opacity: 0.1,
},
animation: false,
},
],
};
};
export const cryptocurrencies = [
{
id: "bitcoin",
......
src/cryptometrics/package.json
+ 2
− 1
View file @ c335538e
......@@ -21,7 +21,8 @@
"react": "17.0.2",
"react-apexcharts": "^1.3.9",
"react-dom": "17.0.2",
"react-query": "^3.34.15"
"react-query": "^3.34.15",
"sharp": "^0.30.2"
},
"devDependencies": {
"autoprefixer": "^10.4.2",
......
src/cryptometrics/pages/index.js
+ 170
− 35
View file @ c335538e
import React, { useState } from "react";
import Head from "next/head";
import Container from "../components/content/Container";
import Main from "../components/content/Main";
......@@ -11,40 +12,19 @@ import Wrapper from "../components/content/Wrapper";
import Sidebar from "../components/sidebar/Sidebar";
import { Tabs, Tab } from "../components/tabs/Tab";
import { CollectionIcon, TableIcon } from "@heroicons/react/outline";
import { useState } from "react";
import { Table, TableCell, TableRow } from "../components/table/Table";
import Image from "next/image";
import CryptoRowLineChart from "../components/charts/CryptoRowLineChart";
import classNames from "classnames";
import Link from "next/link";
export default function Home() {
const [searchText, setSearchText] = useState("");
const listOfCoins = useCryptoList("usd", 21, false);
const filteredCoins = listOfCoins.data
?.filter((coin) => {
return coin.name.toLowerCase().includes(searchText.toLowerCase());
})
.map((coin) => {
return (
<CryptoChartCard
key={coin.symbol}
currencyId={coin.id}
currencyName={coin.name}
symbol={coin.symbol.toUpperCase()}
icon={coin.image}
info={"$" + numeral(coin.current_price).format("0,0.[0000000]")}
detail={
numeral(coin.price_change_percentage_24h).format("+0.0[00]") + "%"
}
detailColor={
coin.price_change_percentage_24h > 0
? "text-green-500"
: "text-red-500"
}
options={cryptoChartOptions(
coin.price_change_percentage_24h > 0 ? ["#3DBAA2"] : ["#FF7A68"],
true
)}
type="area"
/>
);
});
const filteredCoins = listOfCoins.data?.filter((coin) => {
return coin.name.toLowerCase().includes(searchText.toLowerCase());
});
return (
<div>
<Head>
......@@ -71,17 +51,172 @@ export default function Home() {
content={<CollectionIcon className="w-6 h-6 dark:text-white" />}
>
<div className="flex flex-wrap gap-x-10 gap-y-10 mt-3">
{!listOfCoins.isLoading && filteredCoins}
{!listOfCoins.isLoading &&
filteredCoins.map((coin) => {
return (
<CryptoChartCard
key={coin.symbol}
currencyId={coin.id}
currencyName={coin.name}
symbol={coin.symbol.toUpperCase()}
icon={coin.image}
info={
"$" +
numeral(coin.current_price).format("0,0.[0000000]")
}
detail={
numeral(coin.price_change_percentage_24h).format(
"+0.0[00]"
) + "%"
}
detailColor={
coin.price_change_percentage_24h > 0
? "text-green-500"
: "text-red-500"
}
options={cryptoChartOptions(
coin.price_change_percentage_24h > 0
? ["#3DBAA2"]
: ["#FF7A68"],
true
)}
type="area"
/>
);
})}
</div>
</Tab>
<Tab
id="list-view"
content={<TableIcon className="w-6 h-6 dark:text-white" />}
>
{/* TODO: Add Table Component Here */}
<div className="flex flex-wrap gap-x-10 gap-y-10 mt-3">
<h1 className="dark:text-white">TABLE</h1>
</div>
<Table>
<TableRow className="h-14 items-center sticky top-0 z-50">
<TableCell className="w-6 h-10"></TableCell>
<TableCell className="w-24 h-10">
<p className="font-medium text-base text-center">Name</p>
</TableCell>
<TableCell className="w-24 h-10">
<p className="font-medium text-base text-center">Price</p>
</TableCell>
<TableCell className="w-[10%] h-10">
<p className="font-medium text-base text-center">
Market Cap
</p>
</TableCell>
<TableCell className="w-40 h-10">
<p className="font-medium text-base text-center">
24h change in %
</p>
</TableCell>
<TableCell className="w-40 h-10">
<p className="font-medium text-base text-center">
24h change in $
</p>
</TableCell>
<TableCell className="h-10">
<div className="w-52">
<p className="font-medium text-base text-center">
Chart
</p>
</div>
</TableCell>
</TableRow>
{!listOfCoins.isLoading &&
filteredCoins.map((coin, index) => {
return (
<Link
key={"table_row_" + index}
href={`/coins/${coin.id}`}
passHref
>
<a>
<TableRow>
<TableCell className="w-6">
<Image
src={coin.image}
width="32px"
height="32px"
alt={`${coin.id}_icon`}
layout="fixed"
></Image>
</TableCell>
<TableCell className="w-24">
<p className="font-medium text-base text-center">
{coin.name}
</p>
<p className="font-light text-gray-300 text-sm mt-1">
{coin.symbol.toUpperCase()}
</p>
</TableCell>
<TableCell className="w-24">
<p className="font-light text-base text-blue-500 mt-1">
$
{numeral(coin.current_price).format(
"0,0.[0000000]"
)}
</p>
</TableCell>
<TableCell className="w-[10%]">
<p className="font-light text-base text-pink-400 mt-1">
$
{numeral(coin.market_cap).format(
"0,0.[000]a"
)}
</p>
</TableCell>
<TableCell className="w-40">
<p
className={classNames(
"font-light text-base mt-1",
{
"text-red-400":
coin.price_change_percentage_24h < 0,
"text-green-400":
coin.price_change_percentage_24h >= 0,
}
)}
>
{numeral(
coin.price_change_percentage_24h
).format("+0.0[00]")}
%
</p>
</TableCell>
<TableCell className="w-40">
<p
className={classNames(
"font-light text-base mt-1",
{
"text-red-400": coin.price_change_24h < 0,
"text-green-400":
coin.price_change_24h >= 0,
}
)}
>
{numeral(coin.price_change_24h).format(
"$0,0.[0000]"
)}
</p>
</TableCell>
<TableCell>
<div className="h-[50px] w-52">
<CryptoRowLineChart
currencyId={coin.id}
color={
coin.price_change_24h >= 0
? "#10B981"
: "#EF4444"
}
/>
</div>
</TableCell>
</TableRow>
</a>
</Link>
);
})}
</Table>
</Tab>
</Tabs>
</Container>
......
src/cryptometrics/styles/globals.css
+ 111
− 0
View file @ c335538e
......@@ -24,3 +24,114 @@
#nprogress .peg {
box-shadow: 0 0 10px rgb(37 99 235), 0 0 5px rgb(37 99 235) !important;
}
.coin-app {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 64px;
color: white;
}
.coin-search {
margin-bottom: 64px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.coin-text {
margin-bottom: 32px;
text-align: center;
}
.coin-refresh {
/* padding-left: 8px; */
width: 100px;
height: 50px;
border-radius: 4px;
border: none;
background: linear-gradient(to right, #50c9c3, #96deda);
margin-bottom: 20px;
}
.coin-input {
padding-left: 16px;
width: 300px;
height: 50px;
border-radius: 4px;
border: none;
background-image: linear-gradient(to right, #f2709c, #ff9472);
}
.coin-input::placeholder {
color: #e2e2e2;
}
.coin-container {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 17px;
display: flex;
justify-content: center;
}
.coin-row {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
height: 80px;
color: white;
width: 1500px;
}
.coin {
display: flex;
align-items: center;
padding-right: 24px;
min-width: 300px;
}
.coin .coin-name {
width: 250px;
}
.coin img {
height: 30px;
width: 30px;
margin-right: 10px;
}
.coin-symbol {
text-transform: uppercase;
}
.coin-data {
display: flex;
text-align: right;
justify-content: space-between;
width: 100%;
}
.coin-price {
width: 110px;
}
.coin-volume {
width: 155px;
}
.coin-marketcap {
width: 230px;
}
.coin-percent {
width: 100px;
}
.red {
color: #f00606;
}
.green {
color: #11d811;
}
src/cryptometrics/yarn.lock
+ 422
− 6
View file @ c335538e
This diff is collapsed.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment