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

chart working

Browse Source
This commit is contained in:
Ste Vaidis 2022-12-10 14:19:13 +02:00
parent fd4d25b263
commit c7ab55ceb5
5 changed files with 168 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
Front/package-lock.json generated
View File

@ -17,9 +17,11 @@
"@types/react": "^18.0.26",
"@types/react-dom": "^18.0.9",
"@types/react-redux": "^7.1.24",
"apexcharts": "^3.36.3",
"chart.js": "^4.0.1",
"date-fns": "^2.29.3",
"react": "^18.2.0",
"react-apexcharts": "^1.4.0",
"react-chartjs-2": "^5.0.1",
"react-dom": "^18.2.0",
"react-redux": "^8.0.5",
"react-router-dom": "^6.4.4",
@ -4606,6 +4608,7 @@
"version": "3.36.3",
"resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.36.3.tgz",
"integrity": "sha512-8/FXEs0ohXMff07Gv28XjhPwEJphIUdq2/wii/pcvi54Tw6z1mjrV8ydN8rlWi/ve8BAPBefJkLmRWv7UOBsLw==",
"peer": true,
"dependencies": {
"svg.draggable.js": "^2.2.2",
"svg.easing.js": "^2.0.0",
@ -5402,6 +5405,14 @@
"node": ">=10"
}
},
"node_modules/chart.js": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.0.1.tgz",
"integrity": "sha512-5/8/9eBivwBZK81mKvmIwTb2Pmw4D/5h1RK9fBWZLLZ8mCJ+kfYNmV9rMrGoa5Hgy2/wVDBMLSUDudul2/9ihA==",
"engines": {
"pnpm": "^7.0.0"
}
},
"node_modules/check-types": {
"version": "11.2.2",
"resolved": "https://registry.npmjs.org/check-types/-/check-types-11.2.2.tgz",
@ -6162,6 +6173,18 @@
"node": ">=10"
}
},
"node_modules/date-fns": {
"version": "2.29.3",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
"integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==",
"engines": {
"node": ">=0.11"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/date-fns"
}
},
"node_modules/debug": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@ -13890,6 +13913,15 @@
"node": ">=14"
}
},
"node_modules/react-chartjs-2": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.0.1.tgz",
"integrity": "sha512-u38C9OxynlNCBp+79grgXRs7DSJ9w8FuQ5/HO5FbYBbri8HSZW+9SWgjVshLkbXBfXnMGWakbHEtvN0nL2UG7Q==",
"peerDependencies": {
"chart.js": "^4.0.0",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/react-dev-utils": {
"version": "12.0.1",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@ -15361,6 +15393,7 @@
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
"integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
"peer": true,
"dependencies": {
"svg.js": "^2.0.1"
},
@ -15372,6 +15405,7 @@
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
"integrity": "sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==",
"peer": true,
"dependencies": {
"svg.js": ">=2.3.x"
},
@ -15383,6 +15417,7 @@
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
"integrity": "sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==",
"peer": true,
"dependencies": {
"svg.js": "^2.2.5"
},
@ -15393,12 +15428,14 @@
"node_modules/svg.js": {
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
"integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
"integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==",
"peer": true
},
"node_modules/svg.pathmorphing.js": {
"version": "0.1.3",
"resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
"integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
"peer": true,
"dependencies": {
"svg.js": "^2.4.0"
},
@ -15410,6 +15447,7 @@
"version": "1.4.3",
"resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
"integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
"peer": true,
"dependencies": {
"svg.js": "^2.6.5",
"svg.select.js": "^2.1.2"
@ -15422,6 +15460,7 @@
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
"integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
"peer": true,
"dependencies": {
"svg.js": "^2.2.5"
},
@ -15433,6 +15472,7 @@
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
"integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
"peer": true,
"dependencies": {
"svg.js": "^2.6.5"
},
@ -20249,6 +20289,7 @@
"version": "3.36.3",
"resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.36.3.tgz",
"integrity": "sha512-8/FXEs0ohXMff07Gv28XjhPwEJphIUdq2/wii/pcvi54Tw6z1mjrV8ydN8rlWi/ve8BAPBefJkLmRWv7UOBsLw==",
"peer": true,
"requires": {
"svg.draggable.js": "^2.2.2",
"svg.easing.js": "^2.0.0",
@ -20837,6 +20878,11 @@
"resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
"integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw=="
},
"chart.js": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.0.1.tgz",
"integrity": "sha512-5/8/9eBivwBZK81mKvmIwTb2Pmw4D/5h1RK9fBWZLLZ8mCJ+kfYNmV9rMrGoa5Hgy2/wVDBMLSUDudul2/9ihA=="
},
"check-types": {
"version": "11.2.2",
"resolved": "https://registry.npmjs.org/check-types/-/check-types-11.2.2.tgz",
@ -21385,6 +21431,11 @@
"whatwg-url": "^8.0.0"
}
},
"date-fns": {
"version": "2.29.3",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
"integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA=="
},
"debug": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@ -26800,6 +26851,12 @@
"whatwg-fetch": "^3.6.2"
}
},
"react-chartjs-2": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.0.1.tgz",
"integrity": "sha512-u38C9OxynlNCBp+79grgXRs7DSJ9w8FuQ5/HO5FbYBbri8HSZW+9SWgjVshLkbXBfXnMGWakbHEtvN0nL2UG7Q==",
"requires": {}
},
"react-dev-utils": {
"version": "12.0.1",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@ -27866,6 +27923,7 @@
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
"integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
"peer": true,
"requires": {
"svg.js": "^2.0.1"
}
@ -27874,6 +27932,7 @@
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
"integrity": "sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==",
"peer": true,
"requires": {
"svg.js": ">=2.3.x"
}
@ -27882,6 +27941,7 @@
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
"integrity": "sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==",
"peer": true,
"requires": {
"svg.js": "^2.2.5"
}
@ -27889,12 +27949,14 @@
"svg.js": {
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
"integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
"integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==",
"peer": true
},
"svg.pathmorphing.js": {
"version": "0.1.3",
"resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
"integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
"peer": true,
"requires": {
"svg.js": "^2.4.0"
}
@ -27903,6 +27965,7 @@
"version": "1.4.3",
"resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
"integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
"peer": true,
"requires": {
"svg.js": "^2.6.5",
"svg.select.js": "^2.1.2"
@ -27912,6 +27975,7 @@
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
"integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
"peer": true,
"requires": {
"svg.js": "^2.2.5"
}
@ -27922,6 +27986,7 @@
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
"integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
"peer": true,
"requires": {
"svg.js": "^2.6.5"
}

4
Front/package.json
View File

@ -12,9 +12,11 @@
"@types/react": "^18.0.26",
"@types/react-dom": "^18.0.9",
"@types/react-redux": "^7.1.24",
"apexcharts": "^3.36.3",
"chart.js": "^4.0.1",
"date-fns": "^2.29.3",
"react": "^18.2.0",
"react-apexcharts": "^1.4.0",
"react-chartjs-2": "^5.0.1",
"react-dom": "^18.2.0",
"react-redux": "^8.0.5",
"react-router-dom": "^6.4.4",

91
Front/src/coinDetails/coinChart.tsx Normal file
View File

@ -0,0 +1,91 @@
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Filler,
Legend,
} from 'chart.js';
import { Line } from 'react-chartjs-2';
import { useGetCoinChartQuery } from '../coinApi';
import { format } from 'date-fns';
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Filler,
Legend
);
export const options = {
responsive: true,
plugins: {
legend: {
position: 'top' as const,
},
title: {
display: true,
text: 'Chart.js Line Chart',
},
},
};
const CoinChart = (props: any): JSX.Element => {
// console.log("props: ", props);
// get chart data -------------------------------------------
const {
data,
isSuccess: isSuccessChart
} = useGetCoinChartQuery(props.coin || 'btc'); // Todo: 404
// format chart data ----------------------------------------
function formatChartData(data: any): any {
const chartData = data['prices'].map(function (value: any) {
// return value[1];
return {
x: new Date(value[0]),
y: value[1],
};
});
console.log('formatChartData: ', chartData)
return chartData;
}
// format data ----------------------------------------------
function formatChartLabels(data: any): any {
const labels = data['prices'].map((value: (string | number | Date)[]) => format(new Date(value[0]), 'MM/dd/yyyy'));
console.log('formatChartLabels: ', labels)
return labels;
}
return (
<div>
{
data &&
<div>
<Line
data={{
labels: formatChartLabels(data),
datasets: [{
label: 'Dataset',
data: formatChartData(data)
}],
}}
/>
</div>
}
{/* <Line options={options} data={data} />; */}
</div>
)
}
export default CoinChart;

108
Front/src/coinDetails/coinDetails.tsx
View File

@ -1,79 +1,12 @@
import { useParams } from 'react-router-dom';
import { useGetCoinInfoQuery, useGetCoinChartQuery } from '../coinApi';
import Chart from 'react-apexcharts'
import React from 'react';
const options = {
chart: {
id: 'area-datetime',
type: 'area',
height: 350,
zoom: {
autoScaleYaxis: true
}
},
annotations: {
yaxis: [{
y: 30,
borderColor: '#999',
label: {
show: true,
text: 'Support',
style: {
color: "#fff",
background: '#00E396'
}
}
}],
xaxis: [{
x: new Date('14 Nov 2012').getTime(),
borderColor: '#999',
yAxisIndex: 0,
label: {
show: true,
text: 'Rally',
style: {
color: "#fff",
background: '#775DD0'
}
}
}]
},
dataLabels: {
enabled: false
},
markers: {
size: 0,
style: 'hollow',
},
xaxis: {
type: 'datetime',
min: new Date('01 Mar 2012').getTime(),
tickAmount: 6,
},
tooltip: {
x: {
format: 'dd MMM yyyy'
}
},
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
opacityFrom: 0.7,
opacityTo: 0.9,
stops: [0, 100]
}
},
}
const selection = 'one_year';
import { useGetCoinInfoQuery } from '../coinApi';
import CoinChart from './coinChart';
const CoinDetails = (): JSX.Element => {
const { id } = useParams();
console.log("id: ", id)
// get info data
const {
data: dataInfo,
error: errorInfo,
@ -82,33 +15,10 @@ const CoinDetails = (): JSX.Element => {
refetch: refetchInfo
} = useGetCoinInfoQuery(id || 'btc'); // Todo: 404
const {
data: dataChart,
error: errorChart,
isLoading: isLoadingChart,
isSuccess: isSuccessChart,
refetch: refetchChart
} = useGetCoinChartQuery(id || 'btc'); // Todo: 404
React.useEffect(() => {
if (dataChart) {
console.log(dataChart['prices'])
}
}, [dataChart]);
function formatChartData(data: any): any {
return data['prices'].map(function (value: any) {
return {
x: new Date(value[0]),
y: value[1],
};
});
}
return (
<div>CoinDetails
<div>
{
dataInfo &&
dataInfo && isSuccessInfo &&
<div className="info">
<div>ID: {dataInfo.id}</div>
<div className="links">
@ -119,14 +29,8 @@ const CoinDetails = (): JSX.Element => {
}
{
dataChart && isSuccessChart &&
<div className="chart">
<Chart
// options={options}
series={formatChartData(dataChart)}
type="area"
width="500"
/>
<CoinChart coin={'flow'} />
</div>
}

2
Front/src/index.tsx
View File

@ -13,11 +13,9 @@ const root = ReactDOM.createRoot(
);
root.render(
<React.StrictMode>
{/* <Router> */}
<Provider store={store}>
<App />
</Provider>
{/* </Router> */}
</React.StrictMode>
);