Echarts implementation

package.json

@@ -72,6 +72,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', 'echarts-for-react', 'zrender'],
   compiler: {
     styledComponents: true,
   },

src/client/src/components/chart/BarChartV2.tsx

@@ -0,0 +1,132 @@
+import { useContext, useMemo } from 'react';
+import { BarChart } from 'echarts/charts';
+import {
+  GraphicComponent,
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  ToolboxComponent,
+  TooltipComponent,
+} from 'echarts/components';
+import * as echarts from 'echarts/core';
+import { CanvasRenderer } from 'echarts/renderers';
+import ReactEChartsCore from 'echarts-for-react/lib/core';
+import { ThemeContext } from 'styled-components';
+import numeral from 'numeral';
+import { timeFormat, timeParse } from 'd3-time-format';
+
+echarts.use([
+  BarChart,
+  CanvasRenderer,
+  GridComponent,
+  TooltipComponent,
+  GraphicComponent,
+  TitleComponent,
+  LegendComponent,
+  ToolboxComponent,
+]);
+
+interface BarChartProps {
+  colorRange: string[];
+  data: any;
+  yAxisLabel: string;
+  title: string;
+}
+
+export const BarChartV2 = ({
+  data,
+  colorRange,
+  yAxisLabel,
+  title,
+}: BarChartProps) => {
+  const themeContext = useContext(ThemeContext);
+
+  const seriesData = useMemo(() => {
+    if (data.length === 0) return { dates: [], series: [] };
+
+    const series = [
+      {
+        name: title,
+        type: 'bar',
+        emphasis: { focus: 'series' },
+        data: data.map((d: any) => d.Invoices),
+      },
+    ];
+
+    const dates = data.map((d: any) => d.date);
+
+    return { dates, series };
+  }, [data, title]);
+
+  const option = useMemo(() => {
+    const fontColor = themeContext.mode === 'light' ? 'black' : 'white';
+
+    return {
+      color: colorRange,
+      legend: {
+        textStyle: { color: fontColor },
+        orient: 'horizontal',
+        top: 0,
+      },
+      title: {
+        text: title,
+        textStyle: { color: fontColor },
+      },
+      grid: {
+        containLabel: true,
+        top: '50px',
+        left: '100px',
+        bottom: '0px',
+        right: '100px',
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          animation: false,
+        },
+      },
+      xAxis: {
+        name: 'Dates',
+        nameLocation: 'center',
+        nameGap: 32,
+        type: 'category',
+        axisLine: { show: true, lineStyle: { color: fontColor } },
+        data: seriesData.dates,
+        axisLabel: {
+          formatter: function (value: string) {
+            const parseDate = timeParse('%Y-%m-%dT%H:%M:%S.%L%Z');
+            const formatDate = timeFormat('%b %d');
+            return formatDate(parseDate(value) as Date);
+          },
+        },
+      },
+      yAxis: {
+        name: yAxisLabel,
+        nameLocation: 'center',
+        nameGap: 48,
+        type: 'value',
+        axisLine: { show: true, lineStyle: { color: fontColor } },
+        splitLine: { show: false },
+        axisLabel: {
+          formatter: function (value: number) {
+            return numeral(value).format('0.0a');
+          },
+        },
+      },
+      series: seriesData.series,
+    };
+  }, [yAxisLabel, colorRange, themeContext, seriesData, title]);
+
+  return (
+    <ReactEChartsCore
+      echarts={echarts}
+      option={option}
+      notMerge={true}
+      lazyUpdate={true}
+      showLoading={false}
+      style={{
+        height: '100%',
+      }}
+    />
+  );
+};

src/client/src/views/home/reports/flow/TransactionGraph.tsx

@@ -1,12 +1,12 @@
 import { FC, useMemo } from 'react';
-import { BarChart } from '../../../../components/chart/BarChart';
 import { LoadingCard } from '../../../../components/loading/LoadingCard';
 import { chartColors } from '../../../../styles/Themes';
 import { getByTime } from '../../../../views/dashboard/widgets/helpers';
 import styled from 'styled-components';
 import { useGetInvoicesQuery } from '../../../../graphql/queries/__generated__/getInvoices.generated';
 import { differenceInDays } from 'date-fns';
 import { useGetPaymentsQuery } from '../../../../graphql/queries/__generated__/getPayments.generated';
+import { BarChartV2 } from '../../../../components/chart/BarChartV2';
 
 const S = {
   row: styled.div`
@@ -116,15 +116,16 @@ export const TransactionsGraph: FC<TransactionsGraphProps> = ({
   return (
     <S.wrapper>
       <S.content>
-        <BarChart
-          priceLabel={type !== 'amount'}
+        <BarChartV2
           data={finalArray.map(f => {
             return {
               [showPay ? 'Payments' : 'Invoices']: f?.[type] || 0,
               date: f.date,
             };
           })}
           colorRange={finalColor}
+          yAxisLabel={showPay ? '# of Payments' : '# of Invoices'}
+          title={showPay ? `Payments ${type}` : `Invoices ${type}`}
         />
       </S.content>
     </S.wrapper>