ADM-992 [frontend][docs]: update readme and change style (#1573)

* ADM-992 [backend]: add story point row for metrics csv file

* ADM-992 [frontend]: add story points column to classification table in the board detail page

* ADM-992 [frontend]: responsive

* ADM-992 [frontend]: fix sonar issues

* ADM-992 [frontend]: add switch model button in the classification chart

* ADM-992 [backend]: fix comments

* ADM-992 [frontend]: refactor

* ADM-992 [frontend]: fix e2e test

* ADM-992 [frontend][docs]: update readme and change style

* ADM-992 [frontend]: change the style for pie chart

README.md

@@ -350,9 +350,11 @@ Users can switch dates to view the dashboard for the corresponding time period.
 In report `chart` page, heartbeat provide a better visualization on delivery and below are two chart screenshot for board and dora metrics respectively.  
 
 - Board chart 
-![Image 3-22-1](https://cdn.jsdelivr.net/gh/au-heartbeat/data-hosting@main/readme/3-22-1-board-chart-1.png)
+![Image 3-22-1](https://cdn.jsdelivr.net/gh/au-heartbeat/data-hosting@main/readme/board-chart.png)
 In the classification chart of the board chart, you can click the switch button to reverse the chart. the reversed chart will show the sum of each legend in all time periods.
-![Image 3-22-1](https://cdn.jsdelivr.net/gh/au-heartbeat/data-hosting@main/readme/reverse-classification-chart-1.png)
+![Image 3-22-1](https://cdn.jsdelivr.net/gh/au-heartbeat/data-hosting@main/readme/reverse-classification-chart.png)
+In the classification chart of the board chart, you can click the button of `Value/Cards count` or `Value/Story point` to see the relative data.
+![Image 3-22-1](https://cdn.jsdelivr.net/gh/au-heartbeat/data-hosting@main/readme/switch-model-classification-chart.png)
 
 - Dora chart
 ![Image 3-22-2](https://cdn.jsdelivr.net/gh/au-heartbeat/data-hosting@main/readme/3-22-2-3.png)

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

@@ -45,7 +45,7 @@ export const SwitchButtonGroup = styled('div')({
   left: '12%',
   top: '15%',
   display: 'flex',
-  width: '30%',
+  width: '40%',
   gap: '0.5rem',
   zIndex: Z_INDEX.BUTTONS,
 });
@@ -58,7 +58,8 @@ export const SwitchModelButton = styled('button')(({ selected }: { selected: boo
     background: 'none',
     cursor: 'pointer',
     padding: '0.3rem',
-    backgroundColor: selected ? theme.main.boardChart.classificationModelColor : 'white',
+    color: theme.main.boardChart.classificationModelColor,
+    backgroundColor: selected ? theme.main.boardChart.classificationModelBackgroundColor : 'white',
     borderRadius: selected ? '0.5rem' : 0,
   };
 });

frontend/src/containers/ReportStep/ChartOption.ts

@@ -324,7 +324,8 @@ export const pieOptionMapper = (props: PieOptionProps, animation: boolean) => {
       {
         type: 'pie',
         data: series,
-        center: ['50%', '55%'],
+        radius: '55%',
+        center: ['50%', '58%'],
         label: {
           formatter: '{b} ({c}%)',
         },

frontend/src/theme.ts

@@ -37,6 +37,7 @@ declare module '@mui/material/styles' {
         lineColorA: string;
         lineColorB: string;
         gridColor: string;
+        classificationModelBackgroundColor: string;
         classificationModelColor: string;
       };
       backgroundColor: string;
@@ -155,7 +156,8 @@ export const theme = createTheme({
       lineColorA: '#163C4D',
       lineColorB: '#E16A7C',
       gridColor: '#D9D9D9',
-      classificationModelColor: '#E8EAF6',
+      classificationModelBackgroundColor: '#E8EAF6',
+      classificationModelColor: '#A1A29D',
     },
     backgroundColor: indigo[FIVE_HUNDRED],
     color: '#fff',