chart working

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"
       }

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",

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 (
+        <div>
+            {
+                data &&
+                <div>
+                    <Line
+                        data={{
+                            labels: formatChartLabels(data),
+                            datasets: [{
+                                label: 'Dataset',
+                                data: formatChartData(data)
+                            }],
+                        }}
+                    />
+                </div>
+            }
+
+            {/* <Line options={options} data={data} />; */}
+        </div>
+    )
+}
+
+export default CoinChart;

Front/src/coinDetails/coinDetails.tsx

@@ -1,79 +1,12 @@
 import { useParams } from 'react-router-dom';
-import { useGetCoinInfoQuery, useGetCoinChartQuery } from '../coinApi';
+import { useGetCoinInfoQuery } from '../coinApi';
-import Chart from 'react-apexcharts'
+import CoinChart from './coinChart';
-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';
-
 
 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 
+          <CoinChart coin={'flow'} />
-            // options={options}
-            series={formatChartData(dataChart)}
-            type="area"
-            width="500"
-          />
         </div>
       }
 

Front/src/index.tsx

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