changing chart lib

Front/src/coinApi.ts

@@ -5,27 +5,29 @@ const baseUrl = "http://127.0.0.1:8080";
 const marketsUrl = '/coins/markets';
 const countUrl = '/count';
 const coinInfoUrl = (id:string) => `/coin/${id}`;
-const coinGraphUrl = (id:string) => `/coin/${id}`;
+const coinChartUrl = (id:string) => `/coin/${id}/chart`;
 
 export const coinListApi = createApi({
   baseQuery: fetchBaseQuery({ baseUrl: baseUrl }),
   endpoints: (builder) => ({
-    getMarkets: builder.query<any, any>({
+    getCoinsList: builder.query<any, any>({
       query: (payload: {page: number, per_page: number}) => `${marketsUrl}?per_page=${payload.per_page}&page=${payload.page}`,
     }),
-    getCount: builder.query<any, number | void>({
+    getCoinsCount: builder.query<any, number | void>({
       query: () => countUrl,
     }),
     getCoinInfo: builder.query<any, string>({
       query: (id: string) => coinInfoUrl(id),
     }),
-    getCoinGraph: builder.query<any, string>({
-      query: (id: string) => coinGraphUrl(id),
+    getCoinChart: builder.query<any, string>({
+      query: (id: string) => coinChartUrl(id),
     }), 
   }),
 })
 
 export const { 
-  useGetMarketsQuery,
-  useGetCountQuery,
-  useGetCoinInfoQuery } = coinListApi;
+  useGetCoinsListQuery,
+  useGetCoinsCountQuery,
+  useGetCoinInfoQuery,
+  useGetCoinChartQuery
+ } = coinListApi;

Front/src/coinDetails/coinDetails.tsx

@@ -1,34 +1,137 @@
 import { useParams } from 'react-router-dom';
-import { useGetCoinInfoQuery } from '../coinApi';
+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';
+
 
 const CoinDetails = (): JSX.Element => {
-    const { id } = useParams();
-    console.log("id: ", id)
+  const { id } = useParams();
+  console.log("id: ", id)
 
-    const { 
-        data,
-        error,
-        isLoading,
-        isSuccess,
-        refetch 
-    } = useGetCoinInfoQuery(id || 'btc');
+  const {
+    data: dataInfo,
+    error: errorInfo,
+    isLoading: isLoadingInfo,
+    isSuccess: isSuccessInfo,
+    refetch: refetchInfo
+  } = useGetCoinInfoQuery(id || 'btc'); // Todo: 404
 
-    // const { id } = data;
-    
-    return (
-        <div>CoinDetails
-            {
-                data  &&
-                <div className="info">
-                    <div>ID: {data.id}</div>
-                    <div className="links">
-                        <div>Homepage: {data.links.homepage}</div>
-                    </div>
-                    <div>Description{data.description.en}</div>
-                </div>
-            }
-        </div>
-    )
+  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],
+      };
+    });
   }
-  
-  export default CoinDetails;
+
+  return (
+    <div>CoinDetails
+      {
+        dataInfo &&
+        <div className="info">
+          <div>ID: {dataInfo.id}</div>
+          <div className="links">
+            <div>Homepage: {dataInfo.links.homepage}</div>
+          </div>
+          <div>Description{dataInfo.description.en}</div>
+        </div>
+      }
+
+      {
+        dataChart && isSuccessChart &&
+        <div className="chart">
+          <Chart 
+            // options={options}
+            series={formatChartData(dataChart)}
+            type="area"
+            width="500"
+          />
+        </div>
+      }
+
+    </div>
+  )
+}
+
+export default CoinDetails;

Front/src/coinList/coinList.tsx

@@ -1,5 +1,5 @@
 import {useSearchParams} from 'react-router-dom';
-import { useGetMarketsQuery } from '../coinApi';
+import { useGetCoinsListQuery } from '../coinApi';
 import Pager from './coinListPager';
 
 const CoinList = (): JSX.Element => {
@@ -8,7 +8,7 @@ const CoinList = (): JSX.Element => {
     const page = Number(searchParams.get('page')) || 1
     const per_page = Number(searchParams.get('per_page')) || 20
     const payload = {page, per_page}
-    const { data, error, isLoading, isSuccess, refetch } = useGetMarketsQuery(payload);
+    const { data, error, isLoading, isSuccess, refetch } = useGetCoinsListQuery(payload);
     console.log("payload: ", payload);
     
     return (
@@ -21,8 +21,7 @@ const CoinList = (): JSX.Element => {
         <thead>
 
         </thead>
-          <tbody>
-            
+          <tbody>          
             { data && isSuccess &&
               data.map((item: any, index: any) => {
                 return (

Front/src/coinList/coinListPager.tsx

@@ -1,4 +1,4 @@
-import { useGetCountQuery } from '../coinApi';
+import { useGetCoinsCountQuery } from '../coinApi';
 import { useNavigate } from "react-router-dom";
 
 const Pager = (props:any): JSX.Element => {
@@ -7,7 +7,7 @@ const Pager = (props:any): JSX.Element => {
 
     const { page, per_page, } = props;
 
-    const { data, error, isLoading, isSuccess, refetch } = useGetCountQuery();
+    const { data, error, isLoading, isSuccess, refetch } = useGetCoinsCountQuery();
     const navigate = useNavigate();
 
     const lastPage = Math.ceil(data / per_page)