Echarts implementation

package.json

@@ -49,14 +49,6 @@
     "@nestjs/throttler": "^4.0.0",
     "@nestjs/websockets": "^9.4.2",
     "@tanstack/react-table": "^8.9.1",
-    "@visx/axis": "^2.12.2",
-    "@visx/chord": "^2.10.0",
-    "@visx/event": "^2.6.0",
-    "@visx/group": "^2.10.0",
-    "@visx/responsive": "^2.10.0",
-    "@visx/scale": "^2.2.2",
-    "@visx/shape": "^2.12.2",
-    "@visx/tooltip": "^2.16.0",
     "apollo-server-express": "^3.12.0",
     "balanceofsatoshis": "^15.8.2",
     "bcryptjs": "^2.4.3",
@@ -73,6 +65,8 @@
     "d3-time-format": "^4.1.0",
     "date-fns": "^2.30.0",
     "dotenv": "^16.0.3",
+    "echarts": "^5.4.2",
+    "echarts-for-react": "^3.0.2",
     "ecpair": "^2.0.1",
     "graphql": "^16.6.0",
     "jest-fetch-mock": "^3.0.3",

src/client/next.config.js

@@ -10,6 +10,7 @@ module.exports = {
   reactStrictMode: true,
   poweredByHeader: false,
   basePath: process.env.BASE_PATH || '',
+  transpilePackages: ['echarts', 'zrender'],
   compiler: {
     styledComponents: true,
   },

src/client/pages/forwards.tsx

@@ -4,7 +4,6 @@ import { getProps } from '../src/utils/ssr';
 import { ForwardsList } from '../src/views/forwards/index';
 import { ForwardChannelsReport } from '../src/views/home/reports/forwardReport/ForwardChannelReport';
 import { useState } from 'react';
-import { ForwardChord } from '../src/views/forwards/forwardChord';
 import { ForwardTable } from '../src/views/forwards/ForwardTable';
 import { options, typeOptions } from '../src/views/home/reports/forwardReport';
 import { ForwardsGraph } from '../src/views/home/reports/forwardReport/ForwardsGraph';
@@ -18,6 +17,7 @@ import {
   CardTitle,
   Separation,
 } from '../src/components/generic/Styled';
+import { ForwardSankey } from '../src/views/forwards/forwardSankey';
 
 const S = {
   options: styled.div`
@@ -85,9 +85,12 @@ const ForwardsView = () => {
             <Card>
               <ForwardTable days={days.value} order={type.value} />
             </Card>
-            <SubTitle>Chord Graph</SubTitle>
+            <SubTitle>Sankey</SubTitle>
             <Card>
-              <ForwardChord days={days.value} order={type.value} />
+              <ForwardSankey
+                days={days.value}
+                type={type.value as 'amount' | 'fee' | 'tokens'}
+              />
             </Card>
           </>
         )}

src/client/pages/transactions.tsx

@@ -110,8 +110,6 @@ const TransactionsView = () => {
         return '';
       }
     }
-
-    console.log(lastInvoice, lastPayment);
   }, [invoiceQuery.data, paymentQuery.data, show]);
 
   const renderInvoices = useCallback(() => {