diff --git a/cypress/e2e/analysis_screen_advanced.cy.ts b/cypress/e2e/analysis_screen_advanced.cy.ts index e90f31df3..8532684ba 100644 --- a/cypress/e2e/analysis_screen_advanced.cy.ts +++ b/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"]') diff --git a/frontend/src/components/Analysis/AnalysisHeader/components/AnalysisHeaderOptions.tsx b/frontend/src/components/Analysis/AnalysisHeader/components/AnalysisHeaderOptions.tsx index 201e98af5..8da95d850 100644 --- a/frontend/src/components/Analysis/AnalysisHeader/components/AnalysisHeaderOptions.tsx +++ b/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( 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) => { )} - - - {/* */} - + setComparisonDropdownVal(e.target.value as string)} + > + {comparisonDropdownValues.map((itemVal: string) => ( + + {itemVal} + + ))} + ); }; diff --git a/frontend/src/components/Analysis/analysis.constants.ts b/frontend/src/components/Analysis/analysis.constants.ts new file mode 100644 index 000000000..30867d6ea --- /dev/null +++ b/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' + } +};