From fa7a8e1b37409aa4dce51fa3ddc6d53fb484bffa Mon Sep 17 00:00:00 2001
From: zhou-yinyuan <147299494+zhou-yinyuan@users.noreply.github.com>
Date: Tue, 13 Aug 2024 15:00:49 +0800
Subject: [PATCH] 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                                                   | 6 ++++--
 .../containers/ReportStep/ChartAndTitleWrapper/style.tsx    | 5 +++--
 frontend/src/containers/ReportStep/ChartOption.ts           | 3 ++-
 frontend/src/theme.ts                                       | 4 +++-
 4 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index eff01f968..a16e3a665 100644
--- a/README.md
+++ b/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)
diff --git a/frontend/src/containers/ReportStep/ChartAndTitleWrapper/style.tsx b/frontend/src/containers/ReportStep/ChartAndTitleWrapper/style.tsx
index 97f10bd2d..86bfdacbc 100644
--- a/frontend/src/containers/ReportStep/ChartAndTitleWrapper/style.tsx
+++ b/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,
   };
 });
diff --git a/frontend/src/containers/ReportStep/ChartOption.ts b/frontend/src/containers/ReportStep/ChartOption.ts
index c78738b34..2e518492e 100644
--- a/frontend/src/containers/ReportStep/ChartOption.ts
+++ b/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}%)',
         },
diff --git a/frontend/src/theme.ts b/frontend/src/theme.ts
index f89c680cf..b64efee26 100644
--- a/frontend/src/theme.ts
+++ b/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',