@centreon/ui 24.8.6 → 24.9.0

package/src/Graph/BarChart/Tooltip/BarChartTooltip.tsx

@@ -1,5 +1,7 @@
 import { useAtomValue } from 'jotai';
 import {
+  path,
+  T,
   always,
   cond,
   equals,
@@ -7,20 +9,18 @@ import {
   gt,
   has,
   isNil,
-  path,
   prop,
   reverse,
-  sortBy,
-  T
+  sortBy
 } from 'ramda';
 
 import { Box, Typography } from '@mui/material';
 
-import { TimeValue } from '../../common/timeSeries/models';
 import { useLocaleDateTimeFormat } from '../../../utils';
+import { Tooltip } from '../../Chart/models';
 import { formatMetricValueWithUnit } from '../../common/timeSeries';
+import { TimeValue } from '../../common/timeSeries/models';
 import { tooltipDataAtom } from '../atoms';
-import { Tooltip } from '../../Chart/models';
 
 import { useBarChartTooltipStyles } from './useBarChartTooltipStyles';
 

package/src/Graph/BarChart/useBarStack.ts

@@ -1,9 +1,9 @@
 import { useCallback, useMemo } from 'react';
 
-import { BarStack, BarStackHorizontal } from '@visx/shape';
-import { equals, keys, omit } from 'ramda';
 import { scaleOrdinal } from '@visx/scale';
+import { BarStack, BarStackHorizontal } from '@visx/shape';
 import { useSetAtom } from 'jotai';
+import { equals, keys, omit } from 'ramda';
 
 import { useDeepMemo } from '../../utils';
 import { Line, TimeValue } from '../common/timeSeries/models';

package/src/Graph/BarStack/BarStack.cypress.spec.tsx

@@ -1,7 +1,7 @@
 import numeral from 'numeral';
 
 import BarStack from './BarStack';
-import { BarType, BarStackProps } from './models';
+import { BarStackProps, BarType } from './models';
 
 const defaultData = [
   { color: '#88B922', label: 'Ok', value: 148 },

package/src/Graph/BarStack/BarStack.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { BarType } from './models';
 import ResponsiveBarStack from './ResponsiveBarStack';
+import { BarType } from './models';
 
 import { BarStack } from '.';
 

package/src/Graph/BarStack/ResponsiveBarStack.tsx

@@ -1,19 +1,19 @@
 import { useRef } from 'react';
 
-import { BarStack as BarStackVertical, BarStackHorizontal } from '@visx/shape';
 import { Group } from '@visx/group';
-import numeral from 'numeral';
+import { BarStackHorizontal, BarStack as BarStackVertical } from '@visx/shape';
 import { Text } from '@visx/text';
-import { useTranslation } from 'react-i18next';
+import numeral from 'numeral';
 import { equals, lt } from 'ramda';
+import { useTranslation } from 'react-i18next';
 
 import { Tooltip } from '../../components';
-import { LegendProps } from '../Legend/models';
 import { Legend as LegendComponent } from '../Legend';
+import { LegendProps } from '../Legend/models';
 import { getValueByUnit } from '../common/utils';
 
-import { BarStackProps } from './models';
 import { useBarStackStyles } from './BarStack.styles';
+import { BarStackProps } from './models';
 import useResponsiveBarStack from './useResponsiveBarStack';
 
 const DefaultLengd = ({ scale, direction }: LegendProps): JSX.Element => (
@@ -152,7 +152,11 @@ const ResponsiveBarStack = ({
                             isVerticalBar ? 'right-start' : 'bottom-start'
                           }
                         >
-                          <g data-testid={bar.key} onClick={onClick}>
+                          <g
+                            data-testid={bar.key}
+                            onClick={onClick}
+                            onKeyUp={() => undefined}
+                          >
                             <rect
                               cursor="pointer"
                               fill={bar.color}

package/src/Graph/BarStack/useResponsiveBarStack.ts

@@ -1,8 +1,8 @@
 import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
 import { equals, gt, pluck } from 'ramda';
 
-import { getValueByUnit } from '../common/utils';
 import { LegendScale } from '../Legend/models';
+import { getValueByUnit } from '../common/utils';
 
 import { BarType } from './models';
 
@@ -11,7 +11,7 @@ interface Size {
   width: number;
 }
 
-interface useBarStackProps {
+interface UseBarStackProps {
   data: Array<BarType>;
   height: number;
   legendRef;
@@ -21,7 +21,7 @@ interface useBarStackProps {
   variant?: 'vertical' | 'horizontal';
   width: number;
 }
-interface useBarStackState {
+interface UseBarStackState {
   barSize: Size;
   colorScale;
   input;
@@ -43,7 +43,7 @@ const useResponsiveBarStack = ({
   titleRef,
   legendRef,
   size
-}: useBarStackProps): useBarStackState => {
+}: UseBarStackProps): UseBarStackState => {
   const isVerticalBar = equals(variant, 'vertical');
 
   const heightOfTitle = titleRef.current?.offsetHeight || 0;

package/src/Graph/Chart/BasicComponents/Lines/RegularLines/index.tsx

@@ -6,8 +6,8 @@ import { equals, isNil, pick, prop } from 'ramda';
 
 import { getTime } from '../../../../common/timeSeries';
 import { TimeValue } from '../../../../common/timeSeries/models';
-import { getCurveFactory, getFillColor } from '../../../common';
 import { getStrokeDashArray } from '../../../../common/utils';
+import { getCurveFactory, getFillColor } from '../../../common';
 
 interface Props {
   areaColor: string;

package/src/Graph/Chart/BasicComponents/Lines/RegularLines/useRegularLines.ts

@@ -1,7 +1,7 @@
 import { difference } from 'ramda';
 
-import { Line } from '../../../../common/timeSeries/models';
 import { getSortedStackedLines } from '../../../../common/timeSeries';
+import { Line } from '../../../../common/timeSeries/models';
 
 interface RegularLines {
   regularLines: Array<Line>;

package/src/Graph/Chart/BasicComponents/Lines/StackedLines/index.tsx

@@ -1,16 +1,16 @@
 import { Shape } from '@visx/visx';
 import { ScaleLinear, ScaleTime } from 'd3-scale';
-import { all, equals, isNil, map, not, nth, path, pipe, prop } from 'ramda';
+import { path, all, equals, isNil, map, not, nth, pipe, prop } from 'ramda';
 
+import { getDates, getTime } from '../../../../common/timeSeries';
+import { Line, TimeValue } from '../../../../common/timeSeries/models';
+import { getPointRadius, getStrokeDashArray } from '../../../../common/utils';
 import StackedAnchorPoint, {
   getYAnchorPoint
 } from '../../../InteractiveComponents/AnchorPoint/StackedAnchorPoint';
 import { StackValue } from '../../../InteractiveComponents/AnchorPoint/models';
 import { getCurveFactory, getFillColor } from '../../../common';
-import { getDates, getTime } from '../../../../common/timeSeries';
-import { Line, TimeValue } from '../../../../common/timeSeries/models';
 import Point from '../Point';
-import { getPointRadius, getStrokeDashArray } from '../../../../common/utils';
 
 interface Props {
   areaTransparency?: number;

package/src/Graph/Chart/BasicComponents/Lines/Threshold/ThresholdWithPatternLines.tsx

@@ -3,9 +3,9 @@ import { ScaleLinear } from 'd3-scale';
 
 import { useTheme } from '@mui/material/styles';
 
+import { LineChartData } from '../../../../common/models';
 import { adjustGraphData } from '../../../helpers/index';
 import { PatternOrientation } from '../../../models';
-import { LineChartData } from '../../../../common/models';
 
 import BasicThreshold from './BasicThreshold';
 import useScaleThreshold from './useScaleThreshold';

package/src/Graph/Chart/BasicComponents/Lines/Threshold/index.tsx

@@ -1,12 +1,12 @@
 import { equals, isNil } from 'ramda';
 
+import { TimeValue } from '../../../../common/timeSeries/models';
 import { displayArea } from '../../../helpers/index';
 import {
   PatternThreshold,
   ThresholdType,
   VariationThreshold
 } from '../../../models';
-import { TimeValue } from '../../../../common/timeSeries/models';
 
 import BasicThreshold from './BasicThreshold';
 import Circle from './Circle';

package/src/Graph/Chart/BasicComponents/Lines/Threshold/models.ts

@@ -1,8 +1,8 @@
 import { ScaleLinear } from 'd3-scale';
 import { equals, reject } from 'ramda';
 
-import { GlobalAreaLines, ThresholdType } from '../../../models';
 import { Line, TimeValue } from '../../../../common/timeSeries/models';
+import { GlobalAreaLines, ThresholdType } from '../../../models';
 
 export interface Data {
   lineColor: string;

package/src/Graph/Chart/BasicComponents/Lines/Threshold/useScaleThreshold.ts

@@ -1,9 +1,9 @@
 import { equals, isNil, prop } from 'ramda';
 
-import { ThresholdType, VariationThreshold } from '../../../models';
-import { TimeValue } from '../../../../common/timeSeries/models';
 import { getTime, getYScale } from '../../../../common/timeSeries';
+import { TimeValue } from '../../../../common/timeSeries/models';
 import { displayArea } from '../../../helpers/index';
+import { ThresholdType, VariationThreshold } from '../../../models';
 
 import { envelopeVariationFormula } from './helpers';
 import {

package/src/Graph/Chart/BasicComponents/Lines/index.tsx

@@ -3,6 +3,12 @@ import { MutableRefObject } from 'react';
 import { ScaleLinear } from 'd3-scale';
 import { isNil } from 'ramda';
 
+import {
+  getDates,
+  getTimeSeriesForLines,
+  getYScale
+} from '../../../common/timeSeries';
+import { Line, TimeValue } from '../../../common/timeSeries/models';
 import { getPointRadius } from '../../../common/utils';
 import GuidingLines from '../../InteractiveComponents/AnchorPoint/GuidingLines';
 import RegularAnchorPoint, {
@@ -10,13 +16,8 @@ import RegularAnchorPoint, {
 } from '../../InteractiveComponents/AnchorPoint/RegularAnchorPoint';
 import { displayArea } from '../../helpers/index';
 import { DisplayAnchor, GlobalAreaLines } from '../../models';
-import {
-  getDates,
-  getTimeSeriesForLines,
-  getYScale
-} from '../../../common/timeSeries';
-import { Line, TimeValue } from '../../../common/timeSeries/models';
 
+import Point from './Point';
 import RegularLine from './RegularLines';
 import useRegularLines from './RegularLines/useRegularLines';
 import StackedLines from './StackedLines';
@@ -26,7 +27,6 @@ import {
   canDisplayThreshold,
   requiredNumberLinesThreshold
 } from './Threshold/models';
-import Point from './Point';
 
 interface Props extends GlobalAreaLines {
   areaTransparency?: number;

package/src/Graph/Chart/BasicComponents/Lines/models.ts

@@ -1,7 +1,7 @@
 import { ScaleLinear } from 'd3-scale';
 
-import { Line, TimeValue } from '../../../common/timeSeries/models';
 import { LineChartData } from '../../../common/models';
+import { Line, TimeValue } from '../../../common/timeSeries/models';
 
 import { FactorsVariation } from './Threshold/models';
 

package/src/Graph/Chart/Chart.cypress.spec.tsx

@@ -1,17 +1,17 @@
 import { useState } from 'react';
 
-import { createStore, Provider } from 'jotai';
+import { Provider, createStore } from 'jotai';
 
 import { userAtom } from '@centreon/ui-context';
 
 import { LineChartData } from '../common/models';
+import dataCurvesWithSameColor from '../mockedData/curvesWithSameColor.json';
 import dataLastDay from '../mockedData/lastDay.json';
-import dataLastDayWithNullValues from '../mockedData/lastDayWithNullValues.json';
 import dataLastDayWithIncompleteValues from '../mockedData/lastDayWithIncompleteValues.json';
-import dataCurvesWithSameColor from '../mockedData/curvesWithSameColor.json';
+import dataLastDayWithNullValues from '../mockedData/lastDayWithNullValues.json';
 import dataPingServiceLinesBars from '../mockedData/pingServiceLinesBars.json';
-import dataPingServiceLinesBarsStacked from '../mockedData/pingServiceLinesBarsStacked.json';
 import dataPingServiceLinesBarsMixed from '../mockedData/pingServiceLinesBarsMixed.json';
+import dataPingServiceLinesBarsStacked from '../mockedData/pingServiceLinesBarsStacked.json';
 
 import { args as argumentsData } from './helpers/doc';
 import { LineChartProps } from './models';

package/src/Graph/Chart/Chart.stories.tsx

@@ -12,21 +12,22 @@ import { useLocaleDateTimeFormat } from '@centreon/ui';
 import TimePeriod from '../../TimePeriods';
 import { LineChartData } from '../common/models';
 import annotationData from '../mockedData/annotationData.json';
+import dataCurvesSameColor from '../mockedData/curvesWithSameColor.json';
 import exclusionPeriodFirstPeriod from '../mockedData/exclusionPeriodFirstPeriod.json';
 import exclusionPeriodSecondPeriod from '../mockedData/exclusionPeriodSecondPeriod.json';
 import exclusionPeriodThirdPeriod from '../mockedData/exclusionPeriodThirdPeriod.json';
+import dataLastDay from '../mockedData/lastDay.json';
 import dataLastDayForword from '../mockedData/lastDayForward.json';
 import dataLastDayThreshold from '../mockedData/lastDayThreshold.json';
+import dataLastDayWithLotOfUnits from '../mockedData/lastDayWithLotOfUnits.json';
 import dataLastMonth from '../mockedData/lastMonth.json';
 import dataLastWeek from '../mockedData/lastWeek.json';
-import dataZoomPreview from '../mockedData/zoomPreview.json';
-import dataLastDay from '../mockedData/lastDay.json';
-import dataCurvesSameColor from '../mockedData/curvesWithSameColor.json';
-import dataLastDayWithLotOfUnits from '../mockedData/lastDayWithLotOfUnits.json';
 import dataPingServiceLinesBars from '../mockedData/pingServiceLinesBars.json';
-import dataPingServiceLinesBarsStacked from '../mockedData/pingServiceLinesBarsStacked.json';
 import dataPingServiceLinesBarsMixed from '../mockedData/pingServiceLinesBarsMixed.json';
+import dataPingServiceLinesBarsStacked from '../mockedData/pingServiceLinesBarsStacked.json';
+import dataZoomPreview from '../mockedData/zoomPreview.json';
 
+import { dateTimeFormat } from './common';
 import {
   argTypes,
   args as argumentsData,
@@ -37,7 +38,6 @@ import {
   lastDayForwardDate,
   zoomPreviewDate
 } from './helpers/doc';
-import { dateTimeFormat } from './common';
 import { Interval, ThresholdType, TooltipData } from './models';
 
 import WrapperChart from '.';

package/src/Graph/Chart/Chart.tsx

@@ -1,10 +1,17 @@
 import { MutableRefObject, useEffect, useMemo, useRef, useState } from 'react';
 
-import { equals, flatten, isNil, pluck, reject } from 'ramda';
 import { useAtom } from 'jotai';
+import { equals, flatten, isNil, pluck, reject } from 'ramda';
 
 import { ClickAwayListener, Skeleton } from '@mui/material';
 
+import { useDeepCompare } from '../../utils';
+import BarGroup from '../BarChart/BarGroup';
+import BaseChart from '../common/BaseChart/BaseChart';
+import ChartSvgWrapper from '../common/BaseChart/ChartSvgWrapper';
+import { useComputeBaseChartDimensions } from '../common/BaseChart/useComputeBaseChartDimensions';
+import Thresholds from '../common/Thresholds/Thresholds';
+import { Thresholds as ThresholdsModel } from '../common/models';
 import {
   getUnits,
   getXScale,
@@ -12,13 +19,6 @@ import {
   getYScalePerUnit
 } from '../common/timeSeries';
 import { Line } from '../common/timeSeries/models';
-import { Thresholds as ThresholdsModel } from '../common/models';
-import BaseChart from '../common/BaseChart/BaseChart';
-import { useComputeBaseChartDimensions } from '../common/BaseChart/useComputeBaseChartDimensions';
-import ChartSvgWrapper from '../common/BaseChart/ChartSvgWrapper';
-import Thresholds from '../common/Thresholds/Thresholds';
-import { useDeepCompare } from '../../utils';
-import BarGroup from '../BarChart/BarGroup';
 
 import Lines from './BasicComponents/Lines';
 import {
@@ -27,15 +27,15 @@ import {
   lowerLineName,
   upperLineName
 } from './BasicComponents/Lines/Threshold/models';
+import { useChartStyles } from './Chart.styles';
 import InteractionWithGraph from './InteractiveComponents';
+import GraphValueTooltip from './InteractiveComponents/GraphValueTooltip/GraphValueTooltip';
 import GraphTooltip from './InteractiveComponents/Tooltip';
 import useGraphTooltip from './InteractiveComponents/Tooltip/useGraphTooltip';
 import { margin } from './common';
+import { thresholdTooltipAtom } from './graphAtoms';
 import { Data, GlobalAreaLines, GraphInterval, LineChartProps } from './models';
 import { useIntersection } from './useChartIntersection';
-import { useChartStyles } from './Chart.styles';
-import GraphValueTooltip from './InteractiveComponents/GraphValueTooltip/GraphValueTooltip';
-import { thresholdTooltipAtom } from './graphAtoms';
 
 interface Props extends LineChartProps {
   graphData: Data;

package/src/Graph/Chart/InteractiveComponents/AnchorPoint/RegularAnchorPoint.tsx

@@ -4,8 +4,8 @@ import { isNil, prop } from 'ramda';
 import { bisectDate, getDates } from '../../../common/timeSeries';
 import { TimeValue } from '../../../common/timeSeries/models';
 
-import useTickGraph from './useTickGraph';
 import { GetYAnchorPoint } from './models';
+import useTickGraph from './useTickGraph';
 
 import AnchorPoint from '.';
 

package/src/Graph/Chart/InteractiveComponents/AnchorPoint/useTickGraph.ts

@@ -4,9 +4,9 @@ import { ScaleLinear } from 'd3-scale';
 import { useAtomValue } from 'jotai';
 
 import useAxisY from '../../../common/Axes/useAxisY';
-import { margin } from '../../common';
 import { getTimeValue } from '../../../common/timeSeries';
 import { Line, TimeValue } from '../../../common/timeSeries/models';
+import { margin } from '../../common';
 import { mousePositionAtom } from '../interactionWithGraphAtoms';
 
 interface AnchorPointResult {

package/src/Graph/Chart/InteractiveComponents/Annotations/Annotation/Area.tsx

@@ -1,7 +1,7 @@
 import { Shape } from '@visx/visx';
 import { ScaleTime } from 'd3-scale';
-import { max, pick, prop } from 'ramda';
 import { useAtom, useAtomValue } from 'jotai';
+import { max, pick, prop } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 import { useLocaleDateTimeFormat, useMemoComponent } from '@centreon/ui';

package/src/Graph/Chart/InteractiveComponents/Annotations/Annotation/Line.tsx

@@ -1,7 +1,7 @@
 import { Shape } from '@visx/visx';
 import { ScaleTime } from 'd3-scale';
-import { pick } from 'ramda';
 import { useAtomValue } from 'jotai';
+import { pick } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 import { useLocaleDateTimeFormat, useMemoComponent } from '@centreon/ui';

package/src/Graph/Chart/InteractiveComponents/Annotations/Annotation/index.tsx

@@ -1,13 +1,13 @@
-import { useTranslation } from 'react-i18next';
 import { useSetAtom } from 'jotai';
+import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
-import { Tooltip, Paper, Typography } from '@mui/material';
+import { Paper, Tooltip, Typography } from '@mui/material';
 
 import { truncate } from '../../../helpers';
 import { labelBy } from '../../../translatedLabels';
-import { TimelineEvent } from '../models';
 import { annotationHoveredAtom } from '../annotationsAtoms';
+import { TimelineEvent } from '../models';
 
 const yMargin = -32;
 const iconSize = 20;

package/src/Graph/Chart/InteractiveComponents/Annotations/Area/Downtime.tsx

@@ -2,10 +2,10 @@ import { useTranslation } from 'react-i18next';
 
 import { useTheme } from '@mui/material';
 
+import { DowntimeIcon } from '../../../../../Icon';
 import { labelDowntime } from '../../../translatedLabels';
 import EventAnnotations from '../EventAnnotations';
 import { Args } from '../models';
-import { DowntimeIcon } from '../../../../../Icon';
 
 const DowntimeAnnotations = (props: Args): JSX.Element => {
   const { t } = useTranslation();

package/src/Graph/Chart/InteractiveComponents/Annotations/EventAnnotations.tsx

@@ -1,9 +1,9 @@
-import { filter, propEq, isNil } from 'ramda';
 import { ScaleTime } from 'd3-scale';
+import { filter, isNil, propEq } from 'ramda';
 
-import { TimelineEvent } from './models';
-import LineAnnotation from './Annotation/Line';
 import AreaAnnotation from './Annotation/Area';
+import LineAnnotation from './Annotation/Line';
+import { TimelineEvent } from './models';
 
 interface Props {
   Icon: (props) => JSX.Element | null;

package/src/Graph/Chart/InteractiveComponents/Annotations/Line/Comments.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 
-import { useTheme } from '@mui/material';
 import IconComment from '@mui/icons-material/Comment';
+import { useTheme } from '@mui/material';
 
 import { labelComment } from '../../../translatedLabels';
 import EventAnnotations from '../EventAnnotations';

package/src/Graph/Chart/InteractiveComponents/Annotations/annotationsAtoms.ts

@@ -1,6 +1,9 @@
 import { ScaleTime } from 'd3-scale';
 import { atom } from 'jotai';
 import {
+  Pred,
+  T,
+  __,
   always,
   both,
   cond,
@@ -14,10 +17,7 @@ import {
   lte,
   not,
   or,
-  pipe,
-  Pred,
-  T,
-  __
+  pipe
 } from 'ramda';
 
 import { alpha } from '@mui/material';

package/src/Graph/Chart/InteractiveComponents/Bar.tsx

@@ -1,5 +1,5 @@
-import { Shape } from '@visx/visx';
 import { AddSVGProps } from '@visx/shape/lib/types';
+import { Shape } from '@visx/visx';
 
 interface BarProps {
   className?: string;

package/src/Graph/Chart/InteractiveComponents/GraphValueTooltip/GraphValueTooltip.tsx

@@ -3,8 +3,8 @@ import { equals } from 'ramda';
 import { Typography } from '@mui/material';
 
 import { Tooltip as MuiTooltip } from '../../../../components/Tooltip';
-import { ThresholdTooltip, Tooltip } from '../../models';
 import { useTooltipStyles } from '../../../common/useTooltipStyles';
+import { ThresholdTooltip, Tooltip } from '../../models';
 
 import GraphValueTooltipContent from './GraphValueTooltipContent';
 

package/src/Graph/Chart/InteractiveComponents/GraphValueTooltip/GraphValueTooltipContent.tsx

@@ -3,9 +3,9 @@ import { equals, isNil } from 'ramda';
 
 import { Box, Typography } from '@mui/material';
 
-import { mousePositionAtom } from '../interactionWithGraphAtoms';
 import { formatMetricValueWithUnit } from '../../../common/timeSeries';
 import { Tooltip } from '../../models';
+import { mousePositionAtom } from '../interactionWithGraphAtoms';
 
 import { useGraphValueTooltip } from './useGraphValueTooltip';
 import { useGraphValueTooltipStyles } from './useGraphValueTooltipStyles';

package/src/Graph/Chart/InteractiveComponents/GraphValueTooltip/useGraphValueTooltip.ts

@@ -1,5 +1,6 @@
 import { useAtomValue } from 'jotai';
 import {
+  T,
   always,
   cond,
   equals,
@@ -7,13 +8,12 @@ import {
   isNil,
   prop,
   reverse,
-  sortBy,
-  T
+  sortBy
 } from 'ramda';
 
-import { graphTooltipDataAtom } from '../interactionWithGraphAtoms';
 import { useLocaleDateTimeFormat } from '../../../../utils';
 import { GraphTooltipData, Tooltip } from '../../models';
+import { graphTooltipDataAtom } from '../interactionWithGraphAtoms';
 
 interface UseGraphValueTooltipState extends Omit<GraphTooltipData, 'date'> {
   dateTime: string;

package/src/Graph/Chart/InteractiveComponents/TimeShiftZones/index.tsx

@@ -5,8 +5,8 @@ import { equals, isNil, negate } from 'ramda';
 import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
 import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
 
-import { GraphInterval, Interval } from '../../models';
 import { margin } from '../../common';
+import { GraphInterval, Interval } from '../../models';
 
 import TimeShiftIcon, { timeShiftIconSize } from './TimeShiftIcon';
 import TimeShiftZone from './TimeShiftZone';

package/src/Graph/Chart/InteractiveComponents/TimeShiftZones/models.ts

@@ -1,8 +1,8 @@
 import { GraphInterval, GraphIntervalProperty } from '../../models';
 
 export enum TimeShiftDirection {
-  backward,
-  forward
+  backward = 0,
+  forward = 1
 }
 
 export interface GetShiftDate {

package/src/Graph/Chart/InteractiveComponents/Tooltip/useGraphTooltip.ts

@@ -4,8 +4,8 @@ import { Event, Tooltip } from '@visx/visx';
 import { ScaleLinear } from 'd3-scale';
 import { useAtomValue } from 'jotai';
 
-import { getDate } from '../../helpers/index';
 import { TimeValue } from '../../../common/timeSeries/models';
+import { getDate } from '../../helpers/index';
 import { applyingZoomAtomAtom } from '../ZoomPreview/zoomPreviewAtoms';
 import { eventMouseUpAtom } from '../interactionWithGraphAtoms';
 

package/src/Graph/Chart/InteractiveComponents/index.tsx

@@ -1,7 +1,7 @@
 import { MutableRefObject } from 'react';
 
 import { Event } from '@visx/visx';
-import { ScaleTime, ScaleLinear } from 'd3-scale';
+import { ScaleLinear, ScaleTime } from 'd3-scale';
 import { useSetAtom } from 'jotai';
 import {
   all,
@@ -21,12 +21,6 @@ import {
 } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import {
-  AnnotationEvent,
-  GraphInterval,
-  InteractedZone,
-  InteractedZone as ZoomPreviewModel
-} from '../models';
 import {
   formatMetricName,
   getLineForMetric,
@@ -36,6 +30,12 @@ import {
 } from '../../common/timeSeries';
 import { Line, TimeValue } from '../../common/timeSeries/models';
 import { margin } from '../common';
+import {
+  AnnotationEvent,
+  GraphInterval,
+  InteractedZone,
+  InteractedZone as ZoomPreviewModel
+} from '../models';
 
 import Annotations from './Annotations';
 import { TimelineEvent } from './Annotations/models';