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

Merge branch 'improve-table-ui' into 'table-view' 

Improve Table UI and make it more modular

See merge request !4
parents 9cee2c39 70eb4b50
No related branches found
No related tags found
3 merge requests!7Merge develop to main,!6Add a Table View for Cryptocurrencies,!4Improve Table UI and make it more modular
Expand all Hide whitespace changes
Inline Side-by-side
src/cryptometrics/components/charts/CryptoRowLineChart.js 0 → 100644
+ 20
− 0
View file @ 14b3a14c
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/table/Table.js 0 → 100644
+ 32
− 0
View file @ 14b3a14c
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 @ 14b3a14c
export const cryptoChartOptions = (colors = [], dark = false) => { export const cryptoChartOptions = (
colors = [],
dark = false,
animationsEnabled = false
) => {
return { return {
chart: { chart: {
toolbar: { toolbar: {
...@@ -7,6 +11,9 @@ export const cryptoChartOptions = (colors = [], dark = false) => { ...@@ -7,6 +11,9 @@ export const cryptoChartOptions = (colors = [], dark = false) => {
sparkline: { sparkline: {
enabled: true, enabled: true,
}, },
animations: {
enabled: animationsEnabled,
},
}, },
dataLabels: { dataLabels: {
enabled: false, enabled: false,
...@@ -65,6 +72,77 @@ export const cryptoChartOptions = (colors = [], dark = 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 = [ export const cryptocurrencies = [
{ {
id: "bitcoin", id: "bitcoin",
......
src/cryptometrics/package.json
+ 2
− 1
View file @ 14b3a14c
...@@ -21,7 +21,8 @@ ...@@ -21,7 +21,8 @@
"react": "17.0.2", "react": "17.0.2",
"react-apexcharts": "^1.3.9", "react-apexcharts": "^1.3.9",
"react-dom": "17.0.2", "react-dom": "17.0.2",
"react-query": "^3.34.15" "react-query": "^3.34.15",
"sharp": "^0.30.2"
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "^10.4.2", "autoprefixer": "^10.4.2",
......
src/cryptometrics/pages/index.js
+ 133
− 21
View file @ 14b3a14c
import React, { useState } from "react";
import Head from "next/head"; import Head from "next/head";
import Container from "../components/content/Container"; import Container from "../components/content/Container";
import Main from "../components/content/Main"; import Main from "../components/content/Main";
...@@ -11,8 +12,11 @@ import Wrapper from "../components/content/Wrapper"; ...@@ -11,8 +12,11 @@ import Wrapper from "../components/content/Wrapper";
import Sidebar from "../components/sidebar/Sidebar"; import Sidebar from "../components/sidebar/Sidebar";
import { Tabs, Tab } from "../components/tabs/Tab"; import { Tabs, Tab } from "../components/tabs/Tab";
import { CollectionIcon, TableIcon } from "@heroicons/react/outline"; import { CollectionIcon, TableIcon } from "@heroicons/react/outline";
import { useState } from "react"; import { Table, TableCell, TableRow } from "../components/table/Table";
import Coin from "../components/coin/Coin"; import Image from "next/image";
import CryptoRowLineChart from "../components/charts/CryptoRowLineChart";
import classNames from "classnames";
import Link from "next/link";
export default function Home() { export default function Home() {
const [searchText, setSearchText] = useState(""); const [searchText, setSearchText] = useState("");
...@@ -86,25 +90,133 @@ export default function Home() { ...@@ -86,25 +90,133 @@ export default function Home() {
id="list-view" id="list-view"
content={<TableIcon className="w-6 h-6 dark:text-white" />} content={<TableIcon className="w-6 h-6 dark:text-white" />}
> >
{!listOfCoins.isLoading && <Table>
filteredCoins.map((coin) => { <TableRow className="h-14 items-center sticky top-0 z-50">
return ( <TableCell className="w-6 h-10"></TableCell>
<Coin <TableCell className="w-24 h-10">
key={coin.id} <p className="font-medium text-base text-center">Name</p>
name={coin.name} </TableCell>
image={coin.image} <TableCell className="w-24 h-10">
symbol={coin.symbol} <p className="font-medium text-base text-center">Price</p>
marketcap={coin.market_cap} </TableCell>
price={numeral(coin.current_price).format( <TableCell className="w-[10%] h-10">
"0,0.[0000000]" <p className="font-medium text-base text-center">
)} Market Cap
priceChange={coin.price_change_percentage_24h} </p>
volume={numeral(coin.total_volume).format( </TableCell>
"0,0.[0000000]" <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> </Tab>
</Tabs> </Tabs>
</Container> </Container>
......
src/cryptometrics/yarn.lock
+ 422
− 6
View file @ 14b3a14c
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