Adm 944 [frontend] change thumbup icon position

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

@@ -1,6 +1,7 @@
 import ChartAndTitleWrapper from '@src/containers/ReportStep/ChartAndTitleWrapper';
 import { CHART_TYPE, TREND_ICON, TREND_TYPE } from '@src/constants/resources';
 import { render, screen } from '@testing-library/react';
+import { theme } from '@src/theme';
 
 describe('ChartAndTitleWrapper', () => {
   it('should render green up icon given icon is set to up and better', () => {
@@ -14,7 +15,7 @@ describe('ChartAndTitleWrapper', () => {
     const icon = screen.getByTestId('TrendingUpSharpIcon');
 
     expect(icon).toBeInTheDocument();
-    expect(icon.parentElement?.parentElement).toHaveStyle({ color: 'green' });
+    expect(icon.parentElement?.parentElement).toHaveStyle({ color: theme.main.chartTrend.betterColor });
   });
 
   it('should render down icon given icon is set to down and worse', () => {
@@ -28,7 +29,7 @@ describe('ChartAndTitleWrapper', () => {
     const icon = screen.getByTestId('TrendingDownSharpIcon');
 
     expect(screen.getByTestId('TrendingDownSharpIcon')).toBeInTheDocument();
-    expect(icon.parentElement?.parentElement).toHaveStyle({ color: 'red' });
+    expect(icon.parentElement?.parentElement).toHaveStyle({ color: theme.main.chartTrend.worseColor });
   });
 
   it('should show positive trend number even if the tend number is negative', () => {

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

@@ -32,7 +32,15 @@ describe('ChartAndTitleWrapper styled component', () => {
         <ThumbUpIcon />
       </TrendTypeIcon>,
     );
-    console.log(screen.getByLabelText('test component 1'));
     expect(screen.getByLabelText('test component 1').children[0]).toHaveStyle({ color: 'red' });
   });
+
+  it('should render the TrendTypeIcon with the reverse style', () => {
+    render(
+      <TrendTypeIcon aria-label='test component 2' color='red' reverse>
+        <ThumbUpIcon />
+      </TrendTypeIcon>,
+    );
+    expect(screen.getByLabelText('test component 2').children[0]).toHaveStyle({ transform: 'scaleY(-1)' });
+  });
 });

frontend/e2e/fixtures/import-file/chart-result.ts

@@ -1,45 +1,45 @@
 export const BOARD_CHART_VALUE = {
   Velocity: {
     type: 'trend up',
-    color: 'green',
+    color: '#02C4A8',
     value: '160.00%',
   },
   'Average Cycle Time': {
     type: 'trend up',
-    color: 'red',
+    color: '#E82107',
     value: '75.25%',
   },
   'Cycle Time Allocation': {
     type: 'trend up',
-    color: 'green',
+    color: '#02C4A8',
     value: '1.93%',
   },
   Rework: {
     type: 'trend up',
-    color: 'red',
+    color: '#E82107',
     value: '266.67%',
   },
 };
 
 export const DORA_CHART_VALUE = {
   'Lead Time For Changes': {
     type: 'trend down',
-    color: 'green',
+    color: '#02C4A8',
     value: '40.28%',
   },
   'Deployment Frequency': {
     type: 'trend down',
-    color: 'red',
+    color: '#E82107',
     value: '6.67%',
   },
   'Dev Change Failure Rate': {
     type: 'trend down',
-    color: 'green',
+    color: '#02C4A8',
     value: '59.99%',
   },
   'Dev Mean Time To Recovery': {
     type: 'trend down',
-    color: 'green',
+    color: '#02C4A8',
     value: '22.19%',
   },
 };

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

@@ -1,7 +1,6 @@
 import {
   ChartTitle,
   StyledTooltipContent,
-  StyledTooltipWrapper,
   TrendContainer,
   TrendIcon,
   TrendTypeIcon,
@@ -10,7 +9,6 @@ import { CHART_TREND_TIP, CHART_TYPE, TREND_ICON, TREND_TYPE, UP_TREND_IS_BETTER
 import TrendingDownSharpIcon from '@mui/icons-material/TrendingDownSharp';
 import TrendingUpSharpIcon from '@mui/icons-material/TrendingUpSharp';
 import { ChartWrapper } from '@src/containers/MetricsStep/style';
-import ThumbDownIcon from '@mui/icons-material/ThumbDown';
 import { convertNumberToPercent } from '@src/utils/util';
 import React, { ForwardedRef, forwardRef } from 'react';
 import ThumbUpIcon from '@mui/icons-material/ThumbUp';
@@ -30,11 +28,6 @@ const TREND_ICON_MAPPING = {
   [TREND_ICON.DOWN]: <TrendingDownSharpIcon aria-label={'trend down'} />,
 };
 
-const TREND_TYPE_ICON_MAPPING = {
-  [TREND_TYPE.BETTER]: <ThumbUpIcon />,
-  [TREND_TYPE.WORSE]: <ThumbDownIcon />,
-};
-
 const TREND_COLOR_MAP = {
   [TREND_TYPE.BETTER]: theme.main.chartTrend.betterColor,
   [TREND_TYPE.WORSE]: theme.main.chartTrend.worseColor,
@@ -65,15 +58,13 @@ const ChartAndTitleWrapper = forwardRef(
       }
     };
     const tipContent = (
-      <StyledTooltipWrapper>
-        <TrendTypeIcon color={TREND_COLOR_MAP[trendInfo.trendType!]}>
-          {TREND_TYPE_ICON_MAPPING[trendInfo.trendType!]}
+      <StyledTooltipContent>
+        <p>{`The rate of ${trendDescribe()} for ${CHART_TREND_TIP[trendInfo.type]}: `}</p>
+        {trendInfo.dateRangeList?.map((dateRange) => <p key={dateRange}>{dateRange}</p>)}
+        <TrendTypeIcon color={TREND_COLOR_MAP[trendInfo.trendType!]} reverse={trendInfo.trendType === TREND_TYPE.WORSE}>
+          <ThumbUpIcon />
         </TrendTypeIcon>
-        <StyledTooltipContent>
-          <p>{`The rate of ${trendDescribe()} for ${CHART_TREND_TIP[trendInfo.type]}: `}</p>
-          {trendInfo.dateRangeList?.map((dateRange) => <p key={dateRange}>{dateRange}</p>)}
-        </StyledTooltipContent>
-      </StyledTooltipWrapper>
+      </StyledTooltipContent>
     );
 
     return (

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

@@ -1,5 +1,4 @@
 import { styled } from '@mui/material/styles';
-
 export const ChartTitle = styled('div')({
   display: 'flex',
   alignItems: 'center',
@@ -31,20 +30,20 @@ export const TrendContainer = styled('div')(({ color }: { color: string }) => ({
 }));
 
 export const StyledTooltipContent = styled('div')({
+  position: 'relative',
   fontSize: '0.85rem',
   display: 'flex',
   flexDirection: 'column',
   gap: '0.5rem',
 });
 
-export const StyledTooltipWrapper = styled('div')({
-  display: 'flex',
-});
-
-export const TrendTypeIcon = styled('div')(({ color }: { color: string }) => ({
+export const TrendTypeIcon = styled('div')(({ color, reverse }: { color: string; reverse?: boolean }) => ({
+  position: 'absolute',
+  right: '0',
+  bottom: '0',
   '& svg': {
     color: color,
-    fontSize: '1rem',
-    marginRight: '0.5rem',
+    fontSize: '1.125rem',
+    transform: reverse ? 'scaleY(-1)' : 'none',
   },
 }));

frontend/src/theme.ts

@@ -122,8 +122,8 @@ export const theme = createTheme({
   },
   main: {
     chartTrend: {
-      betterColor: 'green',
-      worseColor: 'red',
+      betterColor: '#02C4A8',
+      worseColor: '#E82107',
     },
     doraChart: {
       barColorA: '#003D4F',

ops/check.sh

@@ -229,6 +229,7 @@ hex_check() {
   result=$(grep -rinE \
     --exclude-dir='node_modules' \
     --exclude-dir='coverage' \
+    --exclude='chart-result.ts' \
     --exclude='*.html' \
     --exclude='*.svg' \
     --exclude='*.xml' \