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,136 @@
+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';
+import { getFormatDate } from '../generic/helpers';
+
+echarts.use([
+  BarChart,
+  CanvasRenderer,
+  GridComponent,
+  TooltipComponent,
+  GraphicComponent,
+  TitleComponent,
+  LegendComponent,
+  ToolboxComponent,
+]);
+
+interface BarChartProps {
+  colorRange: string[];
+  data: any;
+  yAxisLabel: string;
+  title: string;
+  dataKey: string;
+}
+
+export const BarChartV2 = ({
+  data,
+  colorRange,
+  yAxisLabel,
+  title,
+  dataKey,
+}: 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[dataKey]),
+      },
+    ];
+
+    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,
+      title: {
+        text: title,
+        textStyle: { color: fontColor },
+      },
+      grid: {
+        containLabel: true,
+        top: '50px',
+        left: '100px',
+        bottom: '0px',
+        right: '100px',
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          animation: false,
+        },
+        formatter: (params: any) => {
+          return `Date: ${getFormatDate(params[0].axisValue)}<br />
+          ${params[0].seriesName}: ${params[0].value}<br />`;
+        },
+      },
+      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',
+        minInterval: 1,
+        splitLine: { show: false },
+        axisLine: { show: true, lineStyle: { color: fontColor } },
+        axisTick: { show: true },
+        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/components/generic/helpers.tsx

@@ -160,10 +160,11 @@ export const getPastFutureStr = (
 };
 
 export const getFormatDate = (
-  date: string | null | undefined
+  date: string | null | undefined,
+  style?: string
 ): string | null => {
   if (!date) return null;
-  return format(new Date(date), 'dd/MM/yyyy - HH:mm:ss');
+  return format(new Date(date), style || 'dd/MM/yyyy - HH:mm:ss');
 };
 
 export const getMessageDate = (

src/client/src/views/dashboard/widgets/helpers.tsx

@@ -12,6 +12,8 @@ import { widgetList, WidgetProps } from './widgetList';
 import { GetInvoicesQuery } from '../../../graphql/queries/__generated__/getInvoices.generated';
 import { GetPaymentsQuery } from '../../../graphql/queries/__generated__/getPayments.generated';
 
+const ONE_WEEK = 7;
+
 const getColumns = (width: number): number => {
   const { lg, md, sm, xs } = defaultGrid.breakpoints;
 
@@ -82,12 +84,14 @@ export const getByTime = (array: ArrayType, time: number): any[] => {
     fee?: number;
   }[] = [];
 
+  // check to see if we're working in days (isDay = false) or hours (isDay = true)
   const isDay = time <= 1;
 
   const today = isDay
     ? new Date().setMinutes(0, 0, 0)
     : new Date().setHours(0, 0, 0, 0);
 
+  // Look through each transaction in the array and build an array of transactions with the difference between today and the day (or hour) that the tx occurred
   array.forEach((transaction: ArrayType[0]) => {
     if (!transaction?.__typename) return;
 
@@ -149,10 +153,16 @@ export const getByTime = (array: ArrayType, time: number): any[] => {
 
   if (!transactions?.length) return [];
 
+  // Group the transactionw in the array according to the 'difference' property of the object
   const grouped = groupBy(transactions, 'difference');
 
   const final: any[] = [];
-  const differences = Array.from({ length: isDay ? 24 : time }, (_, i) => i);
+
+  // If were working with a single day, divide the array in 24 pieces, one for each hour, otherwise, go back 7 days
+  const differences = Array.from(
+    { length: isDay ? 24 : ONE_WEEK },
+    (_, i) => i
+  );
 
   differences.forEach(key => {
     const group = grouped[key];