fix(Chart): handle no data volume to 0

Signed-off-by: reslene <reslene@numary.com>

app/routes/apps/$appName.tsx

@@ -47,7 +47,7 @@ import {
 import Table from '~/src/components/Wrappers/Table';
 import { useService } from '~/src/hooks/useService';
 import i18n from '~/src/translations';
-import { Chart } from '~/src/types/chart';
+import { Chart, ChartTypes } from '~/src/types/chart';
 import {
   Connector,
   ConnectorStatuses,
@@ -157,8 +157,13 @@ export const loader: LoaderFunction = async ({ request, params }) => {
         tasks,
         connector,
         chart: {
-          pie: buildChart(buildLabels([datasetPie]), [datasetPie]),
-          line: buildChart(buildLabels([datasetLine], 'LT'), [datasetLine]),
+          pie: buildChart(
+            buildLabels([datasetPie]),
+            [datasetPie],
+            undefined,
+            ChartTypes.PIE
+          ),
+          line: buildChart(buildLabels([datasetLine]), [datasetLine]),
         },
       };
     }

app/routes/ledgers/$ledgerId/accounts/$accountId.tsx

@@ -128,7 +128,7 @@ export const loader: LoaderFunction = async ({ params, request }) => {
     return {
       account: account ? normalizeBalance(account) : undefined,
       transactions,
-      chart: buildChart(buildLabels([dataset], 'LT'), [dataset]),
+      chart: buildChart(buildLabels([dataset]), [dataset]),
     };
   }
 

app/routes/overview/index.tsx

@@ -120,7 +120,7 @@ const getTransactionLedgerChartData = async (
       }
     }
 
-    return buildChart(buildLabels(datasets, 'dd LT'), datasets);
+    return buildChart(buildLabels(datasets, 'dd LT'), datasets, 'dd LT');
   }
 };
 
@@ -143,7 +143,7 @@ const getPaymentChartData = async (api: ApiClient) => {
   if (chart) {
     const dataset = buildLineChartDataset(chart);
 
-    return buildChart(buildLabels([dataset], 'LT'), [dataset]);
+    return buildChart(buildLabels([dataset]), [dataset]);
   }
 };
 

app/src/components/Dataviz/Charts/ChartPlaceholder/ChartPlaceholder.tsx

@@ -4,13 +4,13 @@ import { QueryStats } from '@mui/icons-material';
 import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 
-import { ChartPlaceholderProps, ChartPlaceholderTypes } from './types';
+import { ChartPlaceholderProps } from './types';
 
 import { LoadingButton, ObjectOf } from '@numaryhq/storybook';
 
 import Line from '~/src/components/Dataviz/Charts/Line';
 import Pie from '~/src/components/Dataviz/Charts/Pie';
-import { Chart } from '~/src/types/chart';
+import { Chart, ChartTypes } from '~/src/types/chart';
 
 const lineDataMock = {
   labels: ['11:00 PM', '1:00 PM', '2:00 PM', '4:00 PM', '8:00 PM', '9:00 PM'],
@@ -43,8 +43,8 @@ const ChartPlaceholder: FunctionComponent<ChartPlaceholderProps> = ({
 }) => {
   const { t } = useTranslation();
   const chartsMap = {
-    [ChartPlaceholderTypes.LINE]: <Line data={lineDataMock} height={220} />,
-    [ChartPlaceholderTypes.PIE]: <Pie data={pieDataMock} height={220} />,
+    [ChartTypes.LINE]: <Line data={lineDataMock} height={220} />,
+    [ChartTypes.PIE]: <Pie data={pieDataMock} height={220} />,
   } as ObjectOf<ReactElement>;
 
   return (

app/src/components/Dataviz/Charts/ChartPlaceholder/types.ts

@@ -1,10 +1,7 @@
-export enum ChartPlaceholderTypes {
-  LINE = 'line',
-  PIE = 'pie',
-}
+import { ChartTypes } from '~/src/types/chart';
 
 export type ChartPlaceholderProps = {
-  type: ChartPlaceholderTypes;
+  type: ChartTypes;
   title?: string;
   time?: { value: string; kind: string };
 };

app/src/components/Dataviz/Charts/Line/Line.tsx

@@ -17,8 +17,8 @@ import { useTranslation } from 'react-i18next';
 import { LineProps } from './types';
 
 import ChartPlaceholder from '~/src/components/Dataviz/Charts/ChartPlaceholder';
-import { ChartPlaceholderTypes } from '~/src/components/Dataviz/Charts/ChartPlaceholder/types';
 import { getChartOptions } from '~/src/components/Dataviz/Charts/utils';
+import { ChartTypes } from '~/src/types/chart';
 
 ChartJS.register(
   CategoryScale,
@@ -40,11 +40,7 @@ const Line: FunctionComponent<LineProps> = ({
   const { t } = useTranslation();
   if (data.datasets.length === 0 || data.labels.length === 0) {
     return (
-      <ChartPlaceholder
-        type={ChartPlaceholderTypes.LINE}
-        title={title}
-        time={time}
-      />
+      <ChartPlaceholder type={ChartTypes.LINE} title={title} time={time} />
     );
   }
 

app/src/components/Dataviz/Charts/Pie/Pie.tsx

@@ -8,8 +8,8 @@ import { useTranslation } from 'react-i18next';
 import { PieProps } from './types';
 
 import ChartPlaceholder from '~/src/components/Dataviz/Charts/ChartPlaceholder';
-import { ChartPlaceholderTypes } from '~/src/components/Dataviz/Charts/ChartPlaceholder/types';
 import { getChartOptions } from '~/src/components/Dataviz/Charts/utils';
+import { ChartTypes } from '~/src/types/chart';
 
 ChartJS.register(ArcElement, Tooltip, Legend);
 
@@ -23,13 +23,7 @@ const Pie: FunctionComponent<PieProps> = ({
   const { t } = useTranslation();
 
   if (data.datasets.length === 0 || data.labels.length === 0) {
-    return (
-      <ChartPlaceholder
-        type={ChartPlaceholderTypes.PIE}
-        title={title}
-        time={time}
-      />
-    );
+    return <ChartPlaceholder type={ChartTypes.PIE} title={title} time={time} />;
   }
 
   return (

app/src/components/Dataviz/Charts/utils.ts

@@ -4,7 +4,7 @@ import { compact, flatten, get, omit, sortedUniq } from 'lodash';
 
 import { ObjectOf, theme } from '@numaryhq/storybook';
 
-import { Chart, ChartDataset } from '~/src/types/chart';
+import { Chart, ChartDataset, ChartTypes } from '~/src/types/chart';
 import { BooleanConfig, SearchTargets } from '~/src/types/search';
 
 export const buildQueryPayloadMatchPhrase = (
@@ -125,21 +125,40 @@ export const getRandomContrast = (): 'bright' | 'normal' | 'darker' =>
 
 export const buildChart = (
   labels: (string | Date)[],
-  datasets: any
-): Chart => ({
-  labels,
-  datasets: compact(
-    datasets.map((dataset: ChartDataset) => {
-      if (dataset && dataset.data) {
-        return omit(dataset, ['labels']);
-      }
-    })
-  ),
-});
+  datasets: any,
+  reverseDateFormat = 'LT',
+  type = ChartTypes.LINE
+): Chart => {
+  console.log(type);
+  if (type === ChartTypes.LINE) {
+    datasets.forEach((dataset: ChartDataset) => {
+      const dataFormated = labels.map(() => 0);
+      dataset.labels.forEach((label: string | Date, index: number) => {
+        const myIndex = labels.findIndex(
+          (item: string | Date) =>
+            dayjs(label).format(reverseDateFormat) === item
+        );
+        dataFormated[myIndex] = dataset.data[index];
+      });
+      dataset.data = dataFormated;
+    });
+  }
+
+  return {
+    labels,
+    datasets: compact(
+      datasets.map((dataset: ChartDataset) => {
+        if (dataset && dataset.data) {
+          return omit(dataset, ['labels']);
+        }
+      })
+    ),
+  };
+};
 
 export const buildLabels = (
   datasets: any,
-  dateFormat = 'ddd D MMM'
+  dateFormat = 'LT'
 ): (string | Date)[] => {
   const labels = sortedUniq(
     flatten(compact(datasets.map((dataset: ChartDataset) => dataset.labels)))
@@ -149,7 +168,6 @@ export const buildLabels = (
   ) as string[];
 
   return uniqLabels
-
     .sort((a, b) => (dayjs(a) < dayjs(b) ? 1 : -1))
     .reverse()
     .map((item: Date | string) => {

app/src/translations/en/translations.ts

@@ -93,7 +93,7 @@ export default {
         title: 'Overview',
         status: 'Activity',
         charts: {
-          transaction: 'Transactions per ledger top 3',
+          transaction: 'Transactions volume per ledger top 3',
           payment: 'Payments volume',
         },
         tasks: {

app/src/types/chart.ts

@@ -14,3 +14,8 @@ export type Chart = {
   labels: (Date | string)[];
   datasets: Omit<ChartDataset, 'labels'>[];
 };
+
+export enum ChartTypes {
+  LINE = 'line',
+  PIE = 'pie',
+}