style(Chart): improve UI

Signed-off-by: reslene <reslene@numary.com>
formancehq · Apr 11, 2023 · 0a76ca8 · 0a76ca8
1 parent a966d9a
commit 0a76ca8
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 13 deletions.
diff --git a/app/routes/overview/index.tsx b/app/routes/overview/index.tsx
@@ -32,6 +32,7 @@ import {
   buildRange,
   buildTermsAggs,
 } from '~/src/components/Dataviz/Charts/utils';
+import { subtitleSx, titleSx } from '~/src/components/Dataviz/utils';
 import { CONNECTORS_ROUTE, overview } from '~/src/components/Layout/routes';
 import { useOpen } from '~/src/hooks/useOpen';
 import { useService } from '~/src/hooks/useService';
@@ -340,6 +341,8 @@ const Overview: FunctionComponent<{ data?: OverviewData }> = ({ data }) => {
                         }}
                       >
                         <Line
+                          sxTitle={{ ...titleSx, fontSize: '20px' }}
+                          sxSubtitle={{ ...subtitleSx, fontSize: '14px' }}
                           title={t('pages.overview.charts.transaction')}
                           data={transactionChart}
                           time={{ value: '24', kind: 'hours' }}
@@ -361,6 +364,8 @@ const Overview: FunctionComponent<{ data?: OverviewData }> = ({ data }) => {
                         }}
                       >
                         <Line
+                          sxTitle={{ ...titleSx, fontSize: '20px' }}
+                          sxSubtitle={{ ...subtitleSx, fontSize: '14px' }}
                           title={t('pages.overview.charts.payment')}
                           data={paymentChart}
                         />

diff --git a/app/src/components/Dataviz/Charts/ChartPlaceholder/ChartPlaceholder.tsx b/app/src/components/Dataviz/Charts/ChartPlaceholder/ChartPlaceholder.tsx
@@ -10,6 +10,7 @@ import { LoadingButton, ObjectOf } from '@numaryhq/storybook';
 
 import Line from '~/src/components/Dataviz/Charts/Line';
 import Pie from '~/src/components/Dataviz/Charts/Pie';
+import { subtitleSx, titleSx } from '~/src/components/Dataviz/utils';
 import { Chart, ChartTypes } from '~/src/types/chart';
 
 const lineDataMock = {
@@ -57,17 +58,17 @@ const ChartPlaceholder: FunctionComponent<ChartPlaceholderProps> = ({
             opacity: '0.1',
           }}
         >
-          <Typography variant="h2" mb={1} mt={1}>
+          <Typography mb={1} mt={1} sx={titleSx}>
             {title}
           </Typography>
-          <Typography variant="h2" mb={1} mt={1}>
+          <Typography mb={1} mt={1} sx={subtitleSx}>
             {t('common.chart.last', { value: time.value, kind: time.kind })}
           </Typography>
         </Box>
       )}
       <Box
         display="flex"
-        height={300}
+        height={250}
         flexDirection="column"
         alignItems="center"
         sx={{
@@ -77,7 +78,7 @@ const ChartPlaceholder: FunctionComponent<ChartPlaceholderProps> = ({
         }}
       >
         <Box sx={{ opacity: '0.1', width: '100%' }}>{chartsMap[type]}</Box>
-        <Box>
+        <Box sx={{ position: 'absolute', top: '40%' }}>
           <LoadingButton
             variant="stroke"
             content={t('common.noActivity')}

diff --git a/app/src/components/Dataviz/Charts/Line/Line.tsx b/app/src/components/Dataviz/Charts/Line/Line.tsx
@@ -18,6 +18,7 @@ import { LineProps } from './types';
 
 import ChartPlaceholder from '~/src/components/Dataviz/Charts/ChartPlaceholder';
 import { getChartOptions } from '~/src/components/Dataviz/Charts/utils';
+import { subtitleSx, titleSx } from '~/src/components/Dataviz/utils';
 import { ChartTypes } from '~/src/types/chart';
 
 ChartJS.register(
@@ -34,9 +35,12 @@ const Line: FunctionComponent<LineProps> = ({
   data,
   options,
   title,
-  height = 300,
+  height = 200,
   time = { value: '12', kind: 'hours' },
+  sxTitle = titleSx,
+  sxSubtitle = subtitleSx,
 }) => {
+  console.log(sxTitle);
   const { t } = useTranslation();
   if (data.datasets.length === 0 || data.labels.length === 0) {
     return (
@@ -48,10 +52,10 @@ const Line: FunctionComponent<LineProps> = ({
     <>
       {title && (
         <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
-          <Typography variant="h2" mb={1} mt={1}>
+          <Typography variant="h2" mb={1} mt={1} sx={sxTitle}>
             {title}
           </Typography>
-          <Typography variant="h2" mb={1} mt={1}>
+          <Typography mb={1} mt={1} sx={sxSubtitle}>
             {t('common.chart.last', { value: time.value, kind: time.kind })}
           </Typography>
         </Box>

diff --git a/app/src/components/Dataviz/Charts/Line/types.ts b/app/src/components/Dataviz/Charts/Line/types.ts
@@ -1,3 +1,4 @@
+import { SxProps } from '@mui/system';
 import { ChartOptions } from 'chart.js';
 
 import { Chart } from '~/src/types/chart';
@@ -8,4 +9,6 @@ export type LineProps = {
   title?: string;
   height?: number;
   time?: { value: string; kind: string };
+  sxTitle?: SxProps;
+  sxSubtitle?: SxProps;
 };
diff --git a/app/src/components/Dataviz/Charts/Pie/Pie.tsx b/app/src/components/Dataviz/Charts/Pie/Pie.tsx
@@ -9,6 +9,7 @@ import { PieProps } from './types';
 
 import ChartPlaceholder from '~/src/components/Dataviz/Charts/ChartPlaceholder';
 import { getChartOptions } from '~/src/components/Dataviz/Charts/utils';
+import { subtitleSx, titleSx } from '~/src/components/Dataviz/utils';
 import { ChartTypes } from '~/src/types/chart';
 
 ChartJS.register(ArcElement, Tooltip, Legend);
@@ -17,8 +18,10 @@ const Pie: FunctionComponent<PieProps> = ({
   data,
   options,
   title,
-  height = 300,
+  height = 200,
   time = { value: '12', kind: 'hours' },
+  sxTitle = titleSx,
+  sxSubtitle = subtitleSx,
 }) => {
   const { t } = useTranslation();
 
@@ -30,10 +33,10 @@ const Pie: FunctionComponent<PieProps> = ({
     <>
       {title && (
         <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
-          <Typography variant="h2" mb={1} mt={1}>
+          <Typography variant="h2" mb={1} mt={1} sx={sxTitle}>
             {title}
           </Typography>
-          <Typography variant="h2" mb={1} mt={1}>
+          <Typography variant="h2" mb={1} mt={1} sx={sxSubtitle}>
             {t('common.chart.last', { value: time.value, kind: time.kind })}
           </Typography>
         </Box>

diff --git a/app/src/components/Dataviz/Charts/Pie/types.ts b/app/src/components/Dataviz/Charts/Pie/types.ts
@@ -1,3 +1,4 @@
+import { SxProps } from '@mui/system';
 import { ChartOptions } from 'chart.js';
 
 import { Chart } from '~/src/types/chart';
@@ -8,4 +9,6 @@ export type PieProps = {
   title?: string;
   height?: number;
   time?: { value: string; kind: string };
+  sxTitle?: SxProps;
+  sxSubtitle?: SxProps;
 };
diff --git a/app/src/components/Dataviz/utils.ts b/app/src/components/Dataviz/utils.ts
@@ -0,0 +1,10 @@
+import { theme } from '@numaryhq/storybook';
+
+export const titleSx = {
+  ...theme.typography.h2,
+};
+
+export const subtitleSx = {
+  ...theme.typography.h2,
+  fontSize: '16px',
+};
diff --git a/app/src/translations/en/translations.ts b/app/src/translations/en/translations.ts
@@ -93,7 +93,7 @@ export default {
         title: 'Overview',
         status: 'Activity',
         charts: {
-          transaction: 'Transactions volume per ledger top 3',
+          transaction: 'Transactions volume per top ledgers',
           payment: 'Payments volume',
         },
         tasks: {
@@ -408,8 +408,8 @@ export default {
       app: {
         sections: {
           charts: {
-            transaction: '{{provider}} payments volume',
-            payment: '{{provider}} type',
+            transaction: 'Payments volume',
+            payment: 'Payments type',
           },
           dangerZone: {
             title: 'Manage connector',