ADM-960 [frontend]: make cursor to pointer when hover tooltips (#1475)

* ADM-960 [frontend]: make cursor to pointer when hover tooltips

* ADM-960 [frontend]: fix the rework chart tooltip issue

* ADM-960 [frontend]: fix the coverage

* ADM-960 [frontend]: modify the cycle time name

frontend/__tests__/utils/Util.test.tsx

@@ -17,6 +17,7 @@ import {
   sortDisabledOptions,
   transformToCleanedBuildKiteEmoji,
   updateResponseCrews,
+  valueFormatter,
   xAxisLabelDateFormatter,
 } from '@src/utils/util';
 import {
@@ -722,3 +723,19 @@ describe('percentageFormatter function', () => {
     expect(result).toEqual('66.66');
   });
 });
+
+describe('valueFormatter function', () => {
+  it('should return the percent data format with number', () => {
+    const inputData: number = 66.66;
+
+    const result: string = valueFormatter(inputData);
+
+    expect(result).toEqual('66.66%');
+  });
+
+  it('should return symbol when data is NaN', () => {
+    const result: string = valueFormatter(NaN);
+
+    expect(result).toEqual('-');
+  });
+});

frontend/e2e/pages/metrics/report-step.ts

@@ -70,7 +70,7 @@ export class ReportStep {
   readonly displayBoardChartTab: Locator;
   readonly displayDoraChartTab: Locator;
   readonly velocityChart: Locator;
-  readonly averageCycleTimeChart: Locator;
+  readonly cycleTimeChart: Locator;
   readonly cycleTimeAllocationChart: Locator;
   readonly reworkChart: Locator;
   readonly leadTimeForChangeChart: Locator;
@@ -80,11 +80,11 @@ export class ReportStep {
   readonly velocityTrendContainer: Locator;
   readonly reworkTrendContainer: Locator;
   readonly cycleTimeAllocationTrendContainer: Locator;
-  readonly averageCycleTimeTrendContainer: Locator;
+  readonly cycleTimeTrendContainer: Locator;
   readonly velocityTrendIcon: Locator;
   readonly reworkTrendIcon: Locator;
   readonly cycleTimeAllocationTrendIcon: Locator;
-  readonly averageCycleTimeTrendIcon: Locator;
+  readonly cycleTimeTrendIcon: Locator;
   readonly devMeanTimeToRecoveryTrendContainer: Locator;
   readonly devChangeFailureRateTrendContainer: Locator;
   readonly deploymentFrequencyTrendContainer: Locator;
@@ -145,19 +145,19 @@ export class ReportStep {
     this.displayBoardChartTab = this.chartTabsContainer.getByLabel('board chart');
     this.displayDoraChartTab = this.chartTabsContainer.getByLabel('dora chart');
     this.velocityChart = this.page.getByLabel('velocity chart');
-    this.averageCycleTimeChart = this.page.getByLabel('average cycle time chart');
+    this.cycleTimeChart = this.page.getByLabel('cycle time chart');
     this.cycleTimeAllocationChart = this.page.getByLabel('cycle time allocation chart');
     this.reworkChart = this.page.getByLabel('rework chart');
     this.leadTimeForChangeChart = this.page.getByLabel('lead time for changes chart');
     this.deploymentFrequencyChart = this.page.getByLabel('deployment frequency chart');
     this.changeFailureRateChart = this.page.getByLabel('change failure rate chart');
     this.meanTimeToRecoveryChart = this.page.getByLabel('mean time to recovery chart');
     this.velocityTrendContainer = this.page.getByLabel('velocity trend container');
-    this.averageCycleTimeTrendContainer = this.page.getByLabel('average cycle time trend container');
+    this.cycleTimeTrendContainer = this.page.getByLabel('cycle time trend container');
     this.cycleTimeAllocationTrendContainer = this.page.getByLabel('cycle time allocation trend container');
     this.reworkTrendContainer = this.page.getByLabel('rework trend container');
     this.velocityTrendIcon = this.velocityTrendContainer.getByLabel('trend up');
-    this.averageCycleTimeTrendIcon = this.averageCycleTimeTrendContainer.getByLabel('trend up');
+    this.cycleTimeTrendIcon = this.cycleTimeTrendContainer.getByLabel('trend up');
     this.cycleTimeAllocationTrendIcon = this.cycleTimeAllocationTrendContainer.getByLabel('trend up');
     this.reworkTrendIcon = this.reworkTrendContainer.getByLabel('trend up');
 
@@ -655,7 +655,7 @@ export class ReportStep {
     expect(await this.displayBoardChartTab.getAttribute('aria-selected')).toEqual('true');
     expect(await this.displayDoraChartTab.getAttribute('aria-selected')).toEqual('false');
     await expect(this.velocityChart).toBeVisible();
-    await expect(this.averageCycleTimeChart).toBeVisible();
+    await expect(this.cycleTimeChart).toBeVisible();
     await expect(this.cycleTimeAllocationChart).toBeVisible();
     await expect(this.reworkChart).toBeVisible();
 
@@ -664,13 +664,10 @@ export class ReportStep {
     await expect(this.velocityTrendIcon).toBeVisible();
     await expect(this.velocityTrendContainer).toContainText(BOARD_CHART_VALUE.Velocity.value);
 
-    await expect(this.averageCycleTimeTrendContainer).toBeVisible();
-    await expect(this.averageCycleTimeTrendContainer).toHaveAttribute(
-      'color',
-      BOARD_CHART_VALUE['Average Cycle Time'].color,
-    );
-    await expect(this.averageCycleTimeTrendIcon).toBeVisible();
-    await expect(this.averageCycleTimeTrendContainer).toContainText(BOARD_CHART_VALUE['Average Cycle Time'].value);
+    await expect(this.cycleTimeTrendContainer).toBeVisible();
+    await expect(this.cycleTimeTrendContainer).toHaveAttribute('color', BOARD_CHART_VALUE['Average Cycle Time'].color);
+    await expect(this.cycleTimeTrendIcon).toBeVisible();
+    await expect(this.cycleTimeTrendContainer).toContainText(BOARD_CHART_VALUE['Average Cycle Time'].value);
 
     await expect(this.cycleTimeAllocationTrendContainer).toBeVisible();
     await expect(this.cycleTimeAllocationTrendContainer).toHaveAttribute(

frontend/src/constants/resources.ts

@@ -87,7 +87,7 @@ export enum MetricsTitle {
 
 export enum ChartType {
   Velocity = 'Velocity',
-  AverageCycleTime = 'Average Cycle Time',
+  CycleTime = 'Cycle Time',
   CycleTimeAllocation = 'Cycle Time Allocation',
   Rework = 'Rework',
   LeadTimeForChanges = 'Lead Time For Changes',
@@ -108,7 +108,7 @@ export enum TrendType {
 
 export const CHART_TREND_TIP = {
   [ChartType.Velocity]: 'Velocity(Story point)',
-  [ChartType.AverageCycleTime]: 'Days/Story point',
+  [ChartType.CycleTime]: 'Days/Story point',
   [ChartType.CycleTimeAllocation]: 'Total development time/Total cycle time',
   [ChartType.Rework]: 'Total rework times',
   [ChartType.LeadTimeForChanges]: 'PR Lead Time',
@@ -124,7 +124,7 @@ export const UP_TREND_IS_BETTER: ChartType[] = [
 ];
 export const DOWN_TREND_IS_BETTER: ChartType[] = [
   ChartType.Rework,
-  ChartType.AverageCycleTime,
+  ChartType.CycleTime,
   ChartType.LeadTimeForChanges,
   ChartType.DevMeanTimeToRecovery,
   ChartType.DevChangeFailureRate,

frontend/src/containers/ReportStep/BoardMetricsChart/ChartOption.ts

@@ -22,6 +22,7 @@ export interface Series {
   smooth?: boolean;
   areaStyle?: unknown;
   yAxisIndex?: number;
+  tooltip?: object;
 }
 
 export interface XAxis {
@@ -125,7 +126,7 @@ export const stackedAreaOptionMapper = (props: AreaOptionProps) => {
         yAxisIndex: item.yAxisIndex,
         smooth: item.smooth,
         areaStyle: item.areaStyle,
-        ...commonConfig.seriesConfig,
+        tooltip: item.tooltip,
       };
     }),
   };

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

@@ -3,8 +3,8 @@ import {
   stackedBarOptionMapper,
 } from '@src/containers/ReportStep/BoardMetricsChart/ChartOption';
 import { ChartType, CYCLE_TIME_CHARTS_MAPPING, METRICS_CONSTANTS } from '@src/constants/resources';
+import { calculateTrendInfo, valueFormatter, xAxisLabelDateFormatter } from '@src/utils/util';
 import ChartAndTitleWrapper from '@src/containers/ReportStep/ChartAndTitleWrapper';
-import { calculateTrendInfo, xAxisLabelDateFormatter } from '@src/utils/util';
 import { ReportResponse, Swimlane } from '@src/clients/report/dto/response';
 import { ChartContainer } from '@src/containers/MetricsStep/style';
 import { IReportInfo } from '@src/hooks/useGenerateReportEffect';
@@ -109,7 +109,7 @@ function extractAverageCycleTimeData(dateRanges: string[], mappedData?: ReportRe
   const data = mappedData?.map((item) => item.cycleTimeList);
   const storyPoints = data?.map((item) => item?.[0]?.valueList?.[0]?.value as number);
   const cardCount = data?.map((item) => item?.[0]?.valueList?.[1]?.value as number);
-  const trendInfo = calculateTrendInfo(storyPoints, dateRanges, ChartType.AverageCycleTime);
+  const trendInfo = calculateTrendInfo(storyPoints, dateRanges, ChartType.CycleTime);
   return {
     xAxis: {
       data: dateRanges,
@@ -211,8 +211,9 @@ function extractReworkData(dateRanges: string[], mappedData?: ReportResponse[])
     ],
     series: [
       {
-        name: 'Rework cards ratrio',
+        name: 'Rework cards ratio',
         type: 'line',
+        tooltip: { valueFormatter },
         data: reworkCardsRatio!,
         yAxisIndex: 1,
         setAreaStyle: false,

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

@@ -27,6 +27,9 @@ export const TrendContainer = styled('div')(({ color }: { color: string }) => ({
   color: color,
   marginLeft: '0.5rem',
   fontSize: '1.125rem',
+  '&:hover': {
+    cursor: 'pointer',
+  },
 }));
 
 export const StyledTooltipContent = styled('div')({

frontend/src/utils/util.ts

@@ -269,3 +269,9 @@ export const convertNumberToPercent = (num: number): string => {
 export const percentageFormatter = (showPercentage = true) => {
   return (value: number) => value + (showPercentage ? '%' : '');
 };
+export const valueFormatter = (value: number) => {
+  if (isNaN(value)) {
+    return '-';
+  }
+  return value.toFixed(2) + '%';
+};