diff --git a/Front/package-lock.json b/Front/package-lock.json index 2caeaed..b13a43e 100644 --- a/Front/package-lock.json +++ b/Front/package-lock.json @@ -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" } diff --git a/Front/package.json b/Front/package.json index db36b89..e678dbe 100644 --- a/Front/package.json +++ b/Front/package.json @@ -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", diff --git a/Front/src/coinDetails/coinChart.tsx b/Front/src/coinDetails/coinChart.tsx new file mode 100644 index 0000000..71a5128 --- /dev/null +++ b/Front/src/coinDetails/coinChart.tsx @@ -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 ( +
+ { + data && +
+ +
+ } + + {/* ; */} +
+ ) +} + +export default CoinChart; diff --git a/Front/src/coinDetails/coinDetails.tsx b/Front/src/coinDetails/coinDetails.tsx index 607f9a7..9699a22 100644 --- a/Front/src/coinDetails/coinDetails.tsx +++ b/Front/src/coinDetails/coinDetails.tsx @@ -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 ( -
CoinDetails +
{ - dataInfo && + dataInfo && isSuccessInfo &&
ID: {dataInfo.id}
@@ -119,14 +29,8 @@ const CoinDetails = (): JSX.Element => { } { - dataChart && isSuccessChart &&
- +
} diff --git a/Front/src/index.tsx b/Front/src/index.tsx index ba0f406..05f8b8a 100644 --- a/Front/src/index.tsx +++ b/Front/src/index.tsx @@ -13,11 +13,9 @@ const root = ReactDOM.createRoot( ); root.render( - {/* */} - {/* */} );