chart working

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

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>
 );