MON-1440 [Reference Comparison]

cypress/e2e/analysis_screen_advanced.cy.ts

@@ -10,7 +10,10 @@ describe("Analysis screen drilldown", () => {
       })
       .then(() => {
         cy.visit("/analysis");
-        cy.contains("span", "Compare with previous period").click({
+        cy.contains("div", "No comparison").click({
+          force: true,
+        });
+        cy.contains("li", "Compare with previous period").click({
           force: true,
         });
         // cy.get('input[value="11/05/2022 - 11/08/2022"]')

frontend/src/components/Analysis/AnalysisHeader/components/AnalysisHeaderOptions.tsx

@@ -1,36 +1,32 @@
 import React, { useState, useContext, useEffect } from 'react';
+import { MenuItem, SelectChangeEvent } from '@mui/material';
 import dayjs from 'dayjs';
 
 import { ModelManagmentSchema, useGetModelAutoFrequencyApiV1ModelsModelIdAutoFrequencyGet } from 'api/generated';
 import { AnalysisContext, frequencyData } from 'helpers/context/AnalysisProvider';
-
-import { Box, MenuItem, SelectChangeEvent } from '@mui/material';
+import { frequencyValues } from 'helpers/utils/frequency';
 
 import { DateRange } from 'components/DateRange';
 import { CustomStyledSelect } from 'components/Select/CustomStyledSelect';
-import { SwitchButton } from 'components/base/Button/SwitchButton';
 
 import { StyledDivider } from '../AnalysisHeader.style';
-import { frequencyValues } from 'helpers/utils/frequency';
+
+import { constants } from 'components/Analysis/analysis.constants';
 
 interface AnalysisHeaderOptions {
   model: ModelManagmentSchema;
 }
 
 const MAX_WINDOWS_COUNT = 31;
+const periodComparison = constants.header.periodComparison;
+const referenceComparison = constants.header.referenceComparison;
+const noComparison = constants.header.noComparison;
+const comparisonDropdownValues = [noComparison, referenceComparison, periodComparison];
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const AnalysisHeaderOptions = ({ model }: AnalysisHeaderOptions) => {
-  const {
-    compareWithPreviousPeriod,
-    setCompareWithPreviousPeriod,
-    period,
-    setPeriod,
-    frequency,
-    setFrequency
-    // compareByReference,
-    // setCompareByReference
-  } = useContext(AnalysisContext);
+  const { period, setPeriod, frequency, setFrequency, setCompareByReference, setCompareWithPreviousPeriod } =
+    useContext(AnalysisContext);
 
   const [minDate, setMinDate] = useState<Date | null>(
     model.start_time && frequency ? dayjs.unix(model.start_time).toDate() : null
@@ -39,6 +35,8 @@ export const AnalysisHeaderOptions = ({ model }: AnalysisHeaderOptions) => {
     model.latest_time && frequency ? dayjs.unix(model.latest_time + frequencyValues.DAY).toDate() : null
   );
 
+  const [comparisonDropdownVal, setComparisonDropdownVal] = useState(noComparison);
+
   useEffect(() => {
     if (frequency) {
       model.start_time && setMinDate(dayjs.unix(model.start_time).toDate());
@@ -123,6 +121,19 @@ export const AnalysisHeaderOptions = ({ model }: AnalysisHeaderOptions) => {
     }
   };
 
+  useEffect(() => {
+    if (comparisonDropdownVal === referenceComparison) {
+      setCompareByReference(true);
+      setCompareWithPreviousPeriod(false);
+    } else if (comparisonDropdownVal === periodComparison) {
+      setCompareByReference(false);
+      setCompareWithPreviousPeriod(true);
+    } else {
+      setCompareByReference(false);
+      setCompareWithPreviousPeriod(false);
+    }
+  }, [comparisonDropdownVal]);
+
   return (
     <>
       {defaultFrequency && (
@@ -150,19 +161,18 @@ export const AnalysisHeaderOptions = ({ model }: AnalysisHeaderOptions) => {
         </>
       )}
       <StyledDivider orientation="vertical" flexItem sx={{ marginRight: '29px' }} />
-      <Box display="flex" flexDirection="column" gap="8px">
-        <SwitchButton
-          checked={compareWithPreviousPeriod}
-          setChecked={setCompareWithPreviousPeriod}
-          label="Compare with previous period"
-        />
-        {/* <SwitchButton
-          checked={compareByReference}
-          setChecked={setCompareByReference}
-          label="Compare by reference"
-          sx={{ marginRight: 'auto' }}
-            /> */}
-      </Box>
+      <CustomStyledSelect
+        sx={{ minWidth: '115px', marginRight: '12px' }}
+        size="small"
+        value={comparisonDropdownVal}
+        onChange={e => setComparisonDropdownVal(e.target.value as string)}
+      >
+        {comparisonDropdownValues.map((itemVal: string) => (
+          <MenuItem key={itemVal} value={itemVal}>
+            {itemVal}
+          </MenuItem>
+        ))}
+      </CustomStyledSelect>
     </>
   );
 };

frontend/src/components/Analysis/analysis.constants.ts

@@ -0,0 +1,7 @@
+export const constants = {
+  header: {
+    noComparison: 'No comparison',
+    referenceComparison: 'Compare by reference',
+    periodComparison: 'Compare with previous period'
+  }
+};