stevaidis/crypto-coingecko
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

responsive chart

Browse Source
This commit is contained in:
Ste Vaidis 2022-12-11 17:36:04 +02:00
parent 3cb1b9a0c0
commit e33dba4584
7 changed files with 193 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
Back/src/application_controller.js
View File

@ -3,11 +3,6 @@ var router = express.Router();
const api_helper = require('./thirdparty_api')
const config = require('./config');
// total coins 13081
// per page coins 100
// max page 131
// last lenth 81
router.get('/coins/markets', function (req, res) {
let page = req.query.page || 1;
let per_page = req.query.per_page || 100;
@ -15,9 +10,6 @@ router.get('/coins/markets', function (req, res) {
api_helper.REMOTE_API_call(url)
.then(response => {
console.log("response.length : ", response.length);
console.log("response.page : ", page);
//console.log("url : ", url);
res.json(response);
})
.catch(error => {
@ -29,7 +21,6 @@ router.get('/coins/markets', function (req, res) {
router.get('/count', function (req, res) {
let url = config.coingecko.api_url + '/global';
console.log("url: ", url);
api_helper.REMOTE_API_call(url)
.then(response => {
@ -45,7 +36,6 @@ router.get('/count', function (req, res) {
router.get('/coin/:id', function (req, res) {
let id = req.params['id'];
let url = config.coingecko.api_url + '/coins/' + id;
console.log("id: ", id);
api_helper.REMOTE_API_call(url)
.then(response => {
@ -57,9 +47,11 @@ router.get('/coin/:id', function (req, res) {
})
})
router.get('/coin/:id/chart', function (req, res) {
router.get('/coin/:id/chart/:days?', function (req, res) {
let id = req.params['id'];
let url = config.coingecko.api_url + '/coins/' + id + '/market_chart?vs_currency=usd&days=max';
let days = req.params['days'] || 'max';
let url = config.coingecko.api_url + '/coins/' + id + '/market_chart?vs_currency=usd&days=' + days;
console.log("chart url:", url)
api_helper.REMOTE_API_call(url)
.then(response => {

45
Front/src/coinApi-types.ts Normal file
View File

@ -0,0 +1,45 @@
export interface IGetGlobalResponse {
active_cryptocurrencies: number;
markets: number;
}
export interface IGetCoinsListRequest {
page: number;
per_page: number;
}
export interface IGetCoinsListResponse {
[key: string]: any;
}
export interface IGetCoinsCountResponse {
count: number;
}
export interface IGetCoinInfoResponse {
[key: string]: any;
}
export interface IGetCoinInfoRequest {
id: string;
}
// export interface IGetCoinChartRequest {
// page: number;
// per_page: number;
// }
export interface IChartDataItem {
[index: number]: number,
}
export interface IGetCoinChartRequest {
coin: string;
days: string;
}
export interface IGetCoinChartResponse {
market_caps: Array<IChartDataItem>;
prices: Array<IChartDataItem>;
total_volumes: Array<IChartDataItem>;
}

63
Front/src/coinApi.ts
View File

@ -1,48 +1,21 @@
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import {
IGetGlobalResponse,
IGetCoinsListRequest,
IGetCoinsListResponse,
IGetCoinsCountResponse,
IGetCoinInfoRequest,
IGetCoinInfoResponse,
IGetCoinChartRequest,
IGetCoinChartResponse,
} from './coinApi-types'
// URL's
const baseUrl = "http://127.0.0.1:8080";
const marketsUrl = '/coins/markets';
const countUrl = '/count';
const globalUrl = '/global';
const coinInfoUrl = (id:string) => `/coin/${id}`;
const coinChartUrl = (id:string) => `/coin/${id}/chart`;
export interface IGetGlobalResponse {
active_cryptocurrencies: number;
markets: number;
}
export interface IGetCoinsListResponse {
[key: string]: any;
}
export interface IGetCoinsCountResponse {
count: number;
}
export interface IGetCoinsInfoResponse {
[key: string]: any;
}
export interface IGetCoinsInfoRequest {
id: string;
}
export interface IGetCoinsChartRequest {
page: number;
per_page: number;
}
export interface IChartDataItem {
[index: number]: number,
}
export interface IGetCoinsChartResponse {
market_caps: Array<IChartDataItem>;
prices: Array<IChartDataItem>;
total_volumes: Array<IChartDataItem>;
}
const coinInfoUrl = (id: string) => `/coin/${id}`;
const coinChartUrl = (coin: string, days: string) => `/coin/${coin}/chart/${days}`;
export const coinListApi = createApi({
baseQuery: fetchBaseQuery({ baseUrl: baseUrl }),
@ -50,17 +23,17 @@ export const coinListApi = createApi({
getGlobal: builder.query<IGetGlobalResponse, void>({
query: () => globalUrl,
}),
getCoinsList: builder.query<IGetCoinsListResponse, IGetCoinsChartRequest>({
query: (payload: IGetCoinsChartRequest) => `${marketsUrl}?per_page=${payload.per_page}&page=${payload.page}`,
getCoinsList: builder.query<IGetCoinsListResponse, IGetCoinsListRequest>({
query: (payload: IGetCoinsListRequest) => `${marketsUrl}?per_page=${payload.per_page}&page=${payload.page}`,
}),
getCoinsCount: builder.query<IGetCoinsCountResponse, void>({
query: () => countUrl,
}),
getCoinInfo: builder.query<IGetCoinsInfoResponse, string>({
getCoinInfo: builder.query<IGetCoinInfoResponse, string>({
query: (id: string) => coinInfoUrl(id),
}),
getCoinChart: builder.query<IGetCoinsChartResponse, string>({
query: (id: string) => coinChartUrl(id),
getCoinChart: builder.query<IGetCoinChartResponse, IGetCoinChartRequest>({
query: (payload: {coin: string, days: string}) => coinChartUrl(payload.coin, payload.days),
}),
}),
})
@ -71,4 +44,4 @@ export const {
useGetCoinsCountQuery,
useGetCoinInfoQuery,
useGetCoinChartQuery
} = coinListApi;
} = coinListApi;

20
Front/src/coinDetails/coinChart-types.ts Normal file
View File

@ -0,0 +1,20 @@
export interface ICoinChartProps {
coin: string;
}
export interface IChartDataItem {
[index: number]: number,
}
export interface IChartData {
market_caps: Array<IChartDataItem>;
prices: Array<IChartDataItem>;
total_volumes: Array<IChartDataItem>;
}
export interface IChartDataFormattedItem {
x: Date;
y: number;
}
export interface IChartDataFormatted extends Array<IChartDataFormattedItem> { };

132
Front/src/coinDetails/coinChart.tsx
View File

@ -1,3 +1,4 @@
import React from 'react';
import {
Chart as ChartJS,
CategoryScale,
@ -17,6 +18,13 @@ import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
import Grid from '@mui/material/Grid';
import {
ICoinChartProps,
IChartDataItem,
IChartData,
IChartDataFormatted
} from './coinChart-types';
ChartJS.register(
CategoryScale,
LinearScale,
@ -28,73 +36,110 @@ ChartJS.register(
Legend
);
export interface ICoinChartProps {
coin: string;
export interface IDurationOption {
label: string;
value: string;
}
export interface IChartDataItem {
[index: number]: number,
}
export interface IChartData {
market_caps: Array<IChartDataItem>;
prices: Array<IChartDataItem>;
total_volumes: Array<IChartDataItem>;
}
export interface IChartDataFormattedItem {
x: Date;
y: number;
}
export interface IChartDataFormatted extends Array<IChartDataFormattedItem> { };
export const options = {
responsive: false,
maintainAspectRatio: false,
plugins: {},
};
export interface IDurationOptions extends Array<IDurationOption> { }
const CoinChart = (props: ICoinChartProps): JSX.Element => {
// console.log("props: ", props);
const { data, isSuccess: isSuccessChart } = useGetCoinChartQuery(props.coin);
const ref = React.useRef<any>(null);
const [duration, setDuration] = React.useState('max')
const [redraw, setRedraw] = React.useState(false);
// BUG: responsive and redraw toghether cause double render
React.useEffect(() => {
function handleResize() {
setTimeout(function () { setRedraw(true) }, 1000);
setTimeout(function () { setRedraw(false) }, 2000);
}
window.addEventListener('resize', handleResize)
}, []);
const chartRequest = {
coin: props.coin,
days: duration
}
const { data, isSuccess, refetch } = useGetCoinChartQuery(chartRequest);
const durationOptions: IDurationOptions = [
{ label: "1D", value: '1' },
{ label: "2W", value: '14' },
{ label: "1M", value: '30' },
{ label: "3M", value: '90' },
{ label: "1Y", value: '365' },
{ label: "MAX", value: 'max' }
];
function formatChartData(data: IChartData): IChartDataFormatted {
const chartData = data['prices'].map(function (value: IChartDataItem) {
return data['prices'].map(function (value: IChartDataItem) {
return {
x: new Date(value[0]),
y: value[1],
};
});
return chartData;
}
function formatChartLabels(data: any): any {
const labels = data['prices'].map((value: (string | number | Date)[]) => format(new Date(value[0]), 'MM/dd/yyyy'));
return labels;
return data['prices'].map((value: (string | number | Date)[]) =>
format(new Date(value[0]), 'MM/dd/yyyy')
);
}
function durationHandler(value: string): void {
setDuration(value)
refetch()
}
const chartOptions = {
elements: {
point: {
radius: 0
}
},
color: '#444444',
borderColor: '#444444',
backgroundColor: '#444444',
responsive: true,
maintainAspectRatio: true,
aspectRatio: 2,
pointRadius: 0,
plugins: {
legend: {
display: false
},
},
};
return (
<div className="chart-container" style={{ margin: 5, padding: 5 }}>
<div
ref={ref}
className="chart"
>
{
data && <>
<Grid container justifyContent="flex-start" style={{ marginTop: 0 }}>
<ButtonGroup variant="contained" aria-label="outlined primary button group">
<Button onClick={() => { }}>1D</Button>
<Button onClick={() => { }}>14D</Button>
<Button onClick={() => { }}>1M</Button>
<Button onClick={() => { }}>3M</Button>
<Button onClick={() => { }}>1Y</Button>
<Button onClick={() => { }}>MAX</Button>
{
durationOptions.map(item => <Button
key={item.value}
variant={item.value === duration ? 'outlined' : 'contained'}
onClick={() => { durationHandler(item.value) }}>{item.label}
</Button>
)
}
</ButtonGroup>
</Grid>
<div className="chart-container" style={{ margin: 5, padding: 5 }}>
<Grid container justifyContent="flex-end" style={{ marginTop: 0 }}>
<div id="chart" className="chart-container" style={{ position: "relative", height: "auto", width: "80vw" }}>
<Line
options={chartOptions}
redraw={redraw}
updateMode="resize"
data={{
labels: formatChartLabels(data),
datasets: [{
@ -103,7 +148,6 @@ const CoinChart = (props: ICoinChartProps): JSX.Element => {
}],
}}
/>
</Grid>
</div>
</>
}

6
Front/src/coinDetails/coinInfo.tsx
View File

@ -40,25 +40,23 @@ const CoinInfo = (props: ICoinInfoProps): JSX.Element => {
</Grid>
</Grid>
<Grid container justifyContent="flex-start" style={{ marginTop: 30 }}>
{/* <Grid container justifyContent="flex-start" style={{ marginTop: 30 }}>
{data.links.subreddit_url &&
<Button style={{ marginRight: 10 }} variant="outlined" startIcon={<RedditIcon />} href={data.links.subreddit_url}>
Reddit
</Button>
}
{data.links.twitter_screen_name &&
<Button style={{ marginRight: 10 }} variant="outlined" startIcon={<TwitterIcon />} href={`https://twitter.com/${data.links.twitter_screen_name}`}>
Twitter
</Button>
}
{data.links.chat_url &&
<Button style={{ marginRight: 10 }} variant="outlined" startIcon={<LinkIcon />} href={data.links.chat_url}>
Discord
</Button>
}
</Grid>
</Grid> */}
</div>
)
}

6
Front/src/index.css
View File

@ -32,6 +32,12 @@ header a {
color: #e15241
}
/* #chart {
position: absolute;
height: 400px;
} */
.coinName {
font-weight: bold;
margin-left: 10px;