chart working
This commit is contained in:
parent
fd4d25b263
commit
c7ab55ceb5
71
Front/package-lock.json
generated
71
Front/package-lock.json
generated
@ -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"
|
||||
}
|
||||
|
||||
@ -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
91
Front/src/coinDetails/coinChart.tsx
Normal 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;
|
||||
@ -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>
|
||||
}
|
||||
|
||||
|
||||
@ -13,11 +13,9 @@ const root = ReactDOM.createRoot(
|
||||
);
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
{/* <Router> */}
|
||||
<Provider store={store}>
|
||||
<App />
|
||||
</Provider>
|
||||
{/* </Router> */}
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user