ADM-975 [frontend]: change the style of charts

frontend/__tests__/containers/ReportStep/ReportStep.test.tsx

@@ -32,11 +32,11 @@ import { addADeploymentFrequencySetting, updateDeploymentFrequencySettings } fro
 import { act, render, renderHook, screen, waitFor, within } from '@testing-library/react';
 import { DATA_LOADING_FAILED, DEFAULT_MESSAGE, MESSAGE } from '@src/constants/resources';
 import { closeNotification } from '@src/context/notification/NotificationSlice';
+import ReportStep, { resizeChart, showChart } from '@src/containers/ReportStep';
 import { addNotification } from '@src/context/notification/NotificationSlice';
 import { useGenerateReportEffect } from '@src/hooks/useGenerateReportEffect';
 import { backStep, updateReportId } from '@src/context/stepper/StepperSlice';
 import { useExportCsvEffect } from '@src/hooks/useExportCsvEffect';
-import ReportStep, { showChart } from '@src/containers/ReportStep';
 import { setupStore } from '../../utils/setupStoreUtil';
 import userEvent from '@testing-library/user-event';
 import React, { ReactNode } from 'react';
@@ -696,6 +696,27 @@ describe('Report Step', () => {
     });
   });
 
+  describe('resizeChart', () => {
+    beforeEach(() => {
+      jest.spyOn(echarts, 'init').mockImplementation(
+        () =>
+          ({
+            setOption: jest.fn(),
+            resize: jest.fn(),
+            dispatchAction: jest.fn(),
+            dispose: jest.fn(),
+          }) as unknown as echarts.ECharts,
+      );
+    });
+    it('should resize', () => {
+      const chart = echarts.init();
+      const resizeFunction = resizeChart(chart);
+
+      resizeFunction();
+      expect(chart.resize).toHaveBeenCalledTimes(1);
+    });
+  });
+
   describe('showChart test', () => {
     const chart = {
       setOption: jest.fn(),

frontend/src/containers/MetricsStep/style.tsx

@@ -74,9 +74,10 @@ export const ChartWrapper = styled('div')({
 });
 
 export const ChartContainer = styled('div')({
-  display: 'grid',
-  gridTemplateColumns: 'repeat(2, 1fr)',
-  gap: '1.25rem',
+  display: 'flex',
+  width: '100%',
+  flexWrap: 'wrap',
+  justifyContent: 'space-around',
   marginTop: '1.25rem',
   [theme.breakpoints.down('lg')]: {
     gridTemplateColumns: '1fr',

frontend/src/containers/ReportStep/ChartAndTitleWrapper/style.tsx

@@ -3,11 +3,16 @@ import { theme } from '@src/theme';
 
 export const StyledChartAndTitleWrapper = styled('div')({
   position: 'relative',
+  flex: '0 0 calc(50% - 1.25rem)',
   height: '25rem',
+  marginBottom: '1.25rem',
   borderRadius: '0.75rem',
   border: theme.main.cardBorder,
   background: theme.main.color,
   boxShadow: theme.main.cardShadow,
+  [theme.breakpoints.down('lg')]: {
+    flex: '0 0 100%',
+  },
 });
 
 export const ChartTitle = styled('div')({

frontend/src/containers/ReportStep/index.tsx

@@ -25,6 +25,7 @@ import ReportContent from './ReportContent';
 import { useAppSelector } from '@src/hooks';
 import { useEffect, useState } from 'react';
 import * as echarts from 'echarts';
+import { ECharts } from 'echarts';
 
 export interface ReportStepProps {
   handleSave: () => void;
@@ -36,10 +37,18 @@ export interface DateRangeRequestResult {
   reportData: ReportResponseDTO | undefined;
 }
 
+export const resizeChart = (chart: ECharts) => {
+  return () => {
+    chart.resize();
+  };
+};
+
 export function showChart(div: HTMLDivElement | null, isFinished: boolean, options: echarts.EChartsCoreOption) {
   if (div) {
     const chart = echarts.init(div);
     chart.setOption(options);
+    const resize = resizeChart(chart);
+    window.addEventListener('resize', resize);
     return () => {
       chart.dispose();
     };