@centreon/ui 23.10.61 → 23.10.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.61",
+  "version": "23.10.62",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Graph/LineChart/BasicComponents/Thresholds.tsx

@@ -0,0 +1,119 @@
+import { always, cond, equals, isNil } from 'ramda';
+
+import { Theme, useTheme } from '@mui/material';
+
+import { getUnits, getYScale } from '../../common/timeSeries';
+import { Line } from '../../common/timeSeries/models';
+
+interface Props {
+  displayedLines: Array<Line>;
+  hideTooltip: () => void;
+  leftScale: (value: number) => number;
+  rightScale: (value: number) => number;
+  showTooltip: (props) => void;
+  thresholdLabels?: Array<string>;
+  thresholdUnit?: string;
+  thresholds?: Array<number>;
+  width: number;
+}
+
+interface GetColorProps {
+  index: number;
+  theme: Theme;
+}
+
+const getColor = ({ index, theme }: GetColorProps): string => {
+  return cond([
+    [equals(0), always(theme.palette.warning.main)],
+    [equals(1), always(theme.palette.error.main)]
+  ])(index);
+};
+
+const Thresholds = ({
+  thresholds,
+  leftScale,
+  rightScale,
+  width,
+  displayedLines,
+  thresholdUnit,
+  showTooltip,
+  hideTooltip,
+  thresholdLabels
+}: Props): JSX.Element | null => {
+  const theme = useTheme();
+
+  if (!thresholds) {
+    return null;
+  }
+
+  const [firstUnit, secondUnit, thirdUnit] = getUnits(
+    displayedLines as Array<Line>
+  );
+
+  const shouldUseRightScale = equals(thresholdUnit, secondUnit);
+
+  const yScale = shouldUseRightScale
+    ? rightScale
+    : getYScale({
+        hasMoreThanTwoUnits: !isNil(thirdUnit),
+        invert: null,
+        leftScale,
+        rightScale,
+        secondUnit,
+        unit: firstUnit
+      });
+
+  const thresholdScaledValues = thresholds
+    .sort()
+    .map((threshold) => yScale(threshold));
+
+  return (
+    <>
+      {thresholdScaledValues.map((threshold, index) => {
+        return (
+          <line
+            data-testid={`threshold-${threshold}`}
+            key={`threshold-${thresholdLabels?.[index]}-${threshold}`}
+            stroke={getColor({
+              index,
+              theme
+            })}
+            strokeDasharray="5,5"
+            strokeWidth={2}
+            x1={0}
+            x2={width}
+            y1={threshold}
+            y2={threshold}
+          />
+        );
+      })}
+      {thresholdScaledValues.map((threshold, index) => {
+        return (
+          <line
+            data-testid={`threshold-${threshold}-tooltip`}
+            key={`threshold-${thresholdLabels?.[index]}-${threshold}-tooltip`}
+            stroke="transparent"
+            strokeWidth={4}
+            x1={0}
+            x2={width}
+            y1={threshold}
+            y2={threshold}
+            onMouseEnter={(): void => {
+              if (!thresholdLabels?.[index]) {
+                return;
+              }
+              showTooltip({
+                tooltipData: thresholdLabels?.[index],
+                tooltipLeft: 0,
+                tooltipTop: threshold
+              });
+            }}
+            onMouseLeave={hideTooltip}
+          />
+        );
+      })}
+    </>
+  );
+};
+
+export default Thresholds;

package/src/Graph/LineChart/BasicComponents/useFilterLines.ts

@@ -1,9 +1,7 @@
-import { useEffect } from 'react';
+import { Dispatch, SetStateAction, useEffect } from 'react';
 
-import { useAtom } from 'jotai';
 import { compose, equals, prop, propEq, reject, sortBy, toLower } from 'ramda';
 
-import { linesGraphAtom } from '../graphAtoms';
 import { Line } from '../../common/timeSeries/models';
 
 import {
@@ -15,6 +13,8 @@ import {
 interface UseFilterLines {
   displayThreshold?: boolean;
   lines: Array<Line>;
+  linesGraph: Array<Line> | null;
+  setLinesGraph: Dispatch<SetStateAction<Array<Line> | null>>;
 }
 
 interface Result {
@@ -24,10 +24,10 @@ interface Result {
 
 const useFilterLines = ({
   displayThreshold = false,
-  lines
+  lines,
+  linesGraph,
+  setLinesGraph
 }: UseFilterLines): Result => {
-  const [linesGraph, setLinesGraph] = useAtom(linesGraphAtom);
-
   const displayedLines = reject(propEq('display', false), linesGraph ?? lines);
   const filterLines = (): Array<Line> => {
     const lineOriginMetric = findLineOfOriginMetricThreshold(lines);
@@ -45,7 +45,9 @@ const useFilterLines = ({
 
   useEffect(() => {
     const filteredLines = filterLines();
-    if (!lines || !displayThreshold || filteredLines.length <= 0) {
+    if (!lines || !displayThreshold) {
+      setLinesGraph(lines);
+
       return;
     }
 

package/src/Graph/LineChart/InteractiveComponents/AnchorPoint/index.tsx

@@ -8,14 +8,12 @@ interface Props {
 
 const Point = ({ lineColor, x, y }: Props): JSX.Element => (
   <circle
+    cx={x}
+    cy={y}
     fill={alpha(lineColor, 0.5)}
     r={4}
     stroke={lineColor}
     strokeWidth={2}
-    style={{
-      transform: `translate(${x}px, ${y}px)`,
-      transition: 'transform 0.08s ease-out'
-    }}
   />
 );
 

package/src/Graph/LineChart/InteractiveComponents/interactionWithGraphAtoms.ts

@@ -44,6 +44,7 @@ export const changeMousePositionAndTimeValueDerivedAtom = atom(
 
       return;
     }
+
     set(mousePositionAtom, position);
 
     set(timeValueAtom, timeValue);

package/src/Graph/LineChart/Legend/index.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { Dispatch, ReactNode, SetStateAction } from 'react';
 
 import { slice } from 'ramda';
 import { useAtomValue } from 'jotai';
@@ -28,8 +28,10 @@ interface Props {
   limitLegendRows?: boolean;
   lines: Array<Line>;
   renderExtraComponent?: ReactNode;
+  setLinesGraph: Dispatch<SetStateAction<Array<Line> | null>>;
   timeSeries: Array<TimeValue>;
   toggable?: boolean;
+  xScale;
 }
 
 const MainLegend = ({
@@ -39,18 +41,21 @@ const MainLegend = ({
   toggable = true,
   limitLegendRows = true,
   renderExtraComponent,
-  displayAnchor = true
+  displayAnchor = true,
+  setLinesGraph,
+  xScale
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ limitLegendRows });
   const theme = useTheme();
 
   const { selectMetricLine, clearHighlight, highlightLine, toggleMetricLine } =
-    useLegend({ lines });
+    useLegend({ lines, setLinesGraph });
 
   const { getFormattedValue } = useInteractiveValues({
     base,
     lines,
-    timeSeries
+    timeSeries,
+    xScale
   });
 
   const displayedLines = limitLegendRows

package/src/Graph/LineChart/Legend/useInteractiveValues.ts

@@ -3,11 +3,12 @@ import { useMemo } from 'react';
 import { useAtomValue } from 'jotai';
 import { equals, find, isNil } from 'ramda';
 
-import { timeValueAtom } from '../InteractiveComponents/interactionWithGraphAtoms';
+import { mousePositionAtom } from '../InteractiveComponents/interactionWithGraphAtoms';
 import {
   formatMetricValue,
   getLineForMetric,
-  getMetrics
+  getMetrics,
+  getTimeValue
 } from '../../common/timeSeries';
 import { Line, TimeValue } from '../../common/timeSeries/models';
 
@@ -21,14 +22,22 @@ interface Props {
   base: number;
   lines: Array<Line>;
   timeSeries: Array<TimeValue>;
+  xScale;
 }
 
 const useInteractiveValues = ({
   timeSeries,
   lines,
-  base
+  base,
+  xScale
 }: Props): InteractiveValues => {
-  const timeValue = useAtomValue(timeValueAtom);
+  const mousePosition = useAtomValue(mousePositionAtom);
+
+  const timeValue = getTimeValue({
+    timeSeries,
+    x: mousePosition?.[0],
+    xScale
+  });
 
   const graphTimeValue = timeSeries?.find((item) =>
     equals(item.timeTick, timeValue?.timeTick)

package/src/Graph/LineChart/Legend/useLegend.ts

@@ -1,6 +1,5 @@
-import { useEffect } from 'react';
+import { Dispatch, SetStateAction, useEffect } from 'react';
 
-import { useSetAtom } from 'jotai';
 import {
   equals,
   find,
@@ -17,7 +16,6 @@ import {
   toLower
 } from 'ramda';
 
-import { linesGraphAtom } from '../graphAtoms';
 import { Line } from '../../common/timeSeries/models';
 
 interface LegendActions {
@@ -29,11 +27,10 @@ interface LegendActions {
 
 interface Props {
   lines: Array<Line>;
+  setLinesGraph: Dispatch<SetStateAction<Array<Line> | null>>;
 }
 
-const useLegend = ({ lines }: Props): LegendActions => {
-  const setLines = useSetAtom(linesGraphAtom);
-
+const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
   const displayedLines = reject(propEq('display', false), lines);
   const getLineByMetric = (metric: string): Line =>
     find(propEq('metric', metric), lines) as Line;
@@ -41,7 +38,7 @@ const useLegend = ({ lines }: Props): LegendActions => {
   const toggleMetricLine = (metric): void => {
     const line = getLineByMetric(metric);
 
-    setLines([
+    setLinesGraph([
       ...reject(propEq('metric', metric), lines),
       { ...line, display: !line.display }
     ]);
@@ -56,11 +53,11 @@ const useLegend = ({ lines }: Props): LegendActions => {
 
     const sortedData = sortBy(compose(toLower, prop('name')), data);
 
-    setLines(sortedData);
+    setLinesGraph(sortedData);
   };
 
   const clearHighlight = (): void => {
-    setLines(map((line) => ({ ...line, highlight: undefined }), lines));
+    setLinesGraph(map((line) => ({ ...line, highlight: undefined }), lines));
   };
 
   const selectMetricLine = (metric: string): void => {
@@ -71,7 +68,7 @@ const useLegend = ({ lines }: Props): LegendActions => {
       equals(displayedLines.length, 1) && isLineDisplayed;
 
     if (isOnlyLineDisplayed || isEmpty(displayedLines)) {
-      setLines(
+      setLinesGraph(
         map(
           (line) => ({
             ...line,
@@ -84,7 +81,7 @@ const useLegend = ({ lines }: Props): LegendActions => {
       return;
     }
 
-    setLines(
+    setLinesGraph(
       map(
         (line) => ({
           ...line,
@@ -105,8 +102,8 @@ const useLegend = ({ lines }: Props): LegendActions => {
       display: find(propEq('name', line.name), lines)?.display ?? true
     }));
 
-    setLines(newLines);
-  }, []);
+    setLinesGraph(newLines);
+  }, [lines]);
 
   return { clearHighlight, highlightLine, selectMetricLine, toggleMetricLine };
 };

package/src/Graph/LineChart/LineChart.tsx

@@ -1,11 +1,12 @@
-import { MutableRefObject, useMemo, useRef } from 'react';
+import { MutableRefObject, useMemo, useRef, useState } from 'react';
 
-import { Group } from '@visx/visx';
+import { Group, Tooltip } from '@visx/visx';
 import { isNil } from 'ramda';
 
-import { ClickAwayListener, Skeleton } from '@mui/material';
+import { ClickAwayListener, Fade, Skeleton, useTheme } from '@mui/material';
 
 import { getLeftScale, getRightScale, getXScale } from '../common/timeSeries';
+import { Line } from '../common/timeSeries/models';
 
 import Axes from './BasicComponents/Axes';
 import Grids from './BasicComponents/Grids';
@@ -30,17 +31,27 @@ import {
 } from './models';
 import { useIntersection } from './useLineChartIntersection';
 import { CurveType } from './BasicComponents/Lines/models';
+import Thresholds from './BasicComponents/Thresholds';
 
 interface Props extends LineChartProps {
   curve: CurveType;
+  disabledThresholds?: boolean;
   graphData: Data;
   graphInterval: GraphInterval;
   graphRef: MutableRefObject<HTMLDivElement | null>;
   legend?: LegendModel;
   marginBottom: number;
   shapeLines?: GlobalAreaLines;
+  thresholdLabels?: Array<string>;
+  thresholdUnit?: string;
+  thresholds?: Array<number>;
 }
 
+const baseStyles = {
+  ...Tooltip.defaultStyles,
+  textAlign: 'center'
+};
+
 const LineChart = ({
   graphData,
   height = 500,
@@ -58,15 +69,32 @@ const LineChart = ({
   graphRef,
   header,
   curve,
-  marginBottom
+  marginBottom,
+  thresholds,
+  thresholdUnit,
+  thresholdLabels,
+  disabledThresholds
 }: Props): JSX.Element => {
+  const { classes } = useStyles();
+
+  const theme = useTheme();
+
+  const [linesGraph, setLinesGraph] = useState<Array<Line> | null>(null);
   const graphSvgRef = useRef<SVGSVGElement | null>(null);
 
-  const { classes } = useStyles();
   const { isInViewport } = useIntersection({ element: graphRef?.current });
 
   const legendRef = useRef<HTMLDivElement | null>(null);
 
+  const {
+    tooltipOpen: thresholdTooltipOpen,
+    tooltipLeft: thresholdTooltipLeft,
+    tooltipTop: thresholdTooltipTop,
+    tooltipData: thresholdTooltipData,
+    hideTooltip: hideThresholdTooltip,
+    showTooltip: showThresholdTooltip
+  } = Tooltip.useTooltip();
+
   const graphWidth = width > 0 ? width - margin.left - margin.right : 0;
   const graphHeight =
     (height || 0) > 0
@@ -81,7 +109,9 @@ const LineChart = ({
 
   const { displayedLines, newLines } = useFilterLines({
     displayThreshold: canDisplayThreshold(shapeLines?.areaThresholdLines),
-    lines
+    lines,
+    linesGraph,
+    setLinesGraph
   });
 
   const xScale = useMemo(
@@ -98,6 +128,8 @@ const LineChart = ({
       getLeftScale({
         dataLines: displayedLines,
         dataTimeSeries: timeSeries,
+        thresholdUnit,
+        thresholds: (!disabledThresholds && thresholds) || [],
         valueGraphHeight: graphHeight - 35
       }),
     [displayedLines, timeSeries, graphHeight]
@@ -108,6 +140,8 @@ const LineChart = ({
       getRightScale({
         dataLines: displayedLines,
         dataTimeSeries: timeSeries,
+        thresholdUnit,
+        thresholds: (!disabledThresholds && thresholds) || [],
         valueGraphHeight: graphHeight - 35
       }),
     [timeSeries, displayedLines, graphHeight]
@@ -201,6 +235,20 @@ const LineChart = ({
                 }}
                 zoomData={{ ...zoomPreview }}
               />
+
+              {!disabledThresholds && (
+                <Thresholds
+                  displayedLines={displayedLines}
+                  hideTooltip={hideThresholdTooltip}
+                  leftScale={leftScale}
+                  rightScale={rightScale}
+                  showTooltip={showThresholdTooltip}
+                  thresholdLabels={thresholdLabels}
+                  thresholdUnit={thresholdUnit}
+                  thresholds={thresholds}
+                  width={graphWidth}
+                />
+              )}
             </Group.Group>
           </svg>
           {displayTooltip && (
@@ -218,6 +266,20 @@ const LineChart = ({
               xScale={xScale}
             />
           )}
+          <Fade in={thresholdTooltipOpen}>
+            <Tooltip.Tooltip
+              left={thresholdTooltipLeft}
+              style={{
+                ...baseStyles,
+                backgroundColor: theme.palette.background.paper,
+                color: theme.palette.text.primary,
+                transform: `translate(${graphWidth / 2}px, -10px)`
+              }}
+              top={thresholdTooltipTop}
+            >
+              {thresholdTooltipData}
+            </Tooltip.Tooltip>
+          </Fade>
         </div>
       </ClickAwayListener>
       {displayLegend && (
@@ -227,7 +289,9 @@ const LineChart = ({
             displayAnchor={displayAnchor?.displayGuidingLines ?? true}
             lines={newLines}
             renderExtraComponent={legend?.renderExtraComponent}
+            setLinesGraph={setLinesGraph}
             timeSeries={timeSeries}
+            xScale={xScale}
           />
         </div>
       )}

package/src/Graph/LineChart/graphAtoms.ts

@@ -1,6 +1,3 @@
 import { atom } from 'jotai';
 
-import { Line } from '../common/timeSeries/models';
-
-export const linesGraphAtom = atom<Array<Line> | null>(null);
 export const timeTickGraphAtom = atom<Date | null>(null);

package/src/Graph/LineChart/index.stories.tsx

@@ -29,10 +29,11 @@ import exclusionPeriodFirstPeriod from './mockedData/exclusionPeriodFirstPeriod.
 import exclusionPeriodSecondPeriod from './mockedData/exclusionPeriodSecondPeriod.json';
 import exclusionPeriodThirdPeriod from './mockedData/exclusionPeriodThirdPeriod.json';
 import dataLastDayForword from './mockedData/lastDayForward.json';
-import dataLastDay from './mockedData/lastDayThreshold.json';
+import dataLastDayThreshold from './mockedData/lastDayThreshold.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 { Interval, ThresholdType, TooltipData } from './models';
 
 import WrapperLineChart from './index';
@@ -75,7 +76,7 @@ const Threshold = (args): JSX.Element => {
 
       <WrapperLineChart
         {...args}
-        data={dataLastDay}
+        data={dataLastDayThreshold}
         shapeLines={{
           areaThresholdLines: [
             { type: ThresholdType.basic },
@@ -123,7 +124,7 @@ const LineChartAndCLS = (args): JSX.Element => {
   useEffect(() => {
     setTimeout(() => {
       setLoading(false);
-      setData(dataLastDay as unknown as LineChartData);
+      setData(dataLastDayThreshold as unknown as LineChartData);
     }, 100000);
   }, []);
 
@@ -187,7 +188,7 @@ const LineChartAndTimePeriod = (args): JSX.Element => {
     }
 
     if (start.includes(`${defaultStart.split('T')[0]}`)) {
-      setCurrentData(dataLastDay as unknown as LineChartData);
+      setCurrentData(dataLastDayThreshold as unknown as LineChartData);
 
       return;
     }
@@ -281,7 +282,7 @@ const LineChartAndExclusionPeriod = (args): JSX.Element => {
       </ButtonGroup>
       <WrapperLineChart
         {...args}
-        data={dataLastDay as unknown as LineChartData}
+        data={dataLastDayThreshold as unknown as LineChartData}
         shapeLines={{
           areaThresholdLines: [
             {
@@ -303,7 +304,7 @@ const Template: Story = {
   render: (args) => (
     <WrapperLineChart
       {...args}
-      data={dataLastDay as unknown as LineChartData}
+      data={dataLastDayThreshold as unknown as LineChartData}
       shapeLines={{
         areaThresholdLines: [
           {
@@ -381,3 +382,33 @@ export const withCLS: Story = {
     start: defaultStart
   }
 };
+
+export const withThresholds: Story = {
+  argTypes,
+  args: {
+    ...argumentsData,
+    thresholdLabels: ['threshold 1', 'threshold 2'],
+    thresholds: [300, 350]
+  },
+  render: (args) => (
+    <WrapperLineChart
+      {...args}
+      data={dataLastDay as unknown as LineChartData}
+    />
+  )
+};
+
+export const withThresholdsAndUnit: Story = {
+  argTypes,
+  args: {
+    ...argumentsData,
+    thresholdUnit: '%',
+    thresholds: [65, 79]
+  },
+  render: (args) => (
+    <WrapperLineChart
+      {...args}
+      data={dataLastDay as unknown as LineChartData}
+    />
+  )
+};

package/src/Graph/LineChart/index.tsx

@@ -25,12 +25,16 @@ dayjs.extend(timezonePlugin);
 interface Props extends Partial<LineChartProps> {
   curve?: CurveType;
   data?: LineChartData;
+  disabledThresholds?: boolean;
   end: string;
   legend: LegendModel;
   loading: boolean;
   marginBottom?: number;
   shapeLines?: GlobalAreaLines;
   start: string;
+  thresholdLabels?: Array<string>;
+  thresholdUnit?: string;
+  thresholds?: Array<number>;
 }
 
 const WrapperLineChart = ({
@@ -50,12 +54,16 @@ const WrapperLineChart = ({
   legend,
   header,
   curve = Curve.curveLinear,
-  marginBottom = 0
+  marginBottom = 0,
+  thresholds,
+  thresholdUnit,
+  thresholdLabels,
+  disabledThresholds
 }: Props): JSX.Element | null => {
   const { adjustedData } = useLineChartData({ data, end, start });
   const lineChartRef = useRef<HTMLDivElement | null>(null);
 
-  if (loading || !adjustedData) {
+  if (loading && !adjustedData) {
     return (
       <LoadingSkeleton
         displayTitleSkeleton={header?.displayTitle ?? true}
@@ -64,6 +72,10 @@ const WrapperLineChart = ({
     );
   }
 
+  if (!adjustedData) {
+    return null;
+  }
+
   return (
     <div
       ref={lineChartRef as MutableRefObject<HTMLDivElement>}
@@ -79,6 +91,7 @@ const WrapperLineChart = ({
               annotationEvent={annotationEvent}
               axis={axis}
               curve={curve}
+              disabledThresholds={disabledThresholds}
               displayAnchor={displayAnchor}
               graphData={adjustedData}
               graphInterval={{ end, start }}
@@ -89,6 +102,9 @@ const WrapperLineChart = ({
               loading={loading}
               marginBottom={marginBottom}
               shapeLines={shapeLines}
+              thresholdLabels={thresholdLabels}
+              thresholdUnit={thresholdUnit}
+              thresholds={thresholds}
               timeShiftZones={timeShiftZones}
               tooltip={tooltip}
               width={width ?? responsiveWidth}

package/src/Graph/common/timeSeries/index.ts

@@ -326,10 +326,19 @@ const getYScale = ({
 const getScale = ({
   graphValues,
   height,
-  stackedValues
+  stackedValues,
+  thresholds
 }): ScaleLinear<number, number> => {
-  const minValue = min(getMin(graphValues), getMin(stackedValues));
-  const maxValue = max(getMax(graphValues), getMax(stackedValues));
+  const minValue = Math.min(
+    getMin(graphValues),
+    getMin(stackedValues),
+    Math.min(...thresholds)
+  );
+  const maxValue = Math.max(
+    getMax(graphValues),
+    getMax(stackedValues),
+    Math.max(...thresholds)
+  );
 
   const upperRangeValue = minValue === maxValue && maxValue === 0 ? height : 0;
 
@@ -343,10 +352,17 @@ const getScale = ({
 const getLeftScale = ({
   dataLines,
   dataTimeSeries,
-  valueGraphHeight
+  valueGraphHeight,
+  thresholds,
+  thresholdUnit
 }: AxeScale): ScaleLinear<number, number> => {
   const [firstUnit, , thirdUnit] = getUnits(dataLines);
 
+  const shouldApplyThresholds =
+    equals(thresholdUnit, firstUnit) ||
+    equals(thresholdUnit, thirdUnit) ||
+    !thresholdUnit;
+
   const graphValues = isNil(thirdUnit)
     ? getMetricValuesForUnit({
         lines: dataLines,
@@ -370,7 +386,12 @@ const getLeftScale = ({
       })
     : [0];
 
-  return getScale({ graphValues, height: valueGraphHeight, stackedValues });
+  return getScale({
+    graphValues,
+    height: valueGraphHeight,
+    stackedValues,
+    thresholds: shouldApplyThresholds ? thresholds : []
+  });
 };
 
 const getXScale = ({
@@ -386,7 +407,9 @@ const getXScale = ({
 const getRightScale = ({
   dataLines,
   dataTimeSeries,
-  valueGraphHeight
+  valueGraphHeight,
+  thresholds,
+  thresholdUnit
 }: AxeScale): ScaleLinear<number, number> => {
   const [, secondUnit] = getUnits(dataLines);
 
@@ -396,6 +419,8 @@ const getRightScale = ({
     unit: secondUnit
   });
 
+  const shouldApplyThresholds = equals(thresholdUnit, secondUnit);
+
   const secondUnitHasStackedLines = isNil(secondUnit)
     ? false
     : hasUnitStackedLines({ lines: dataLines, unit: secondUnit });
@@ -407,7 +432,12 @@ const getRightScale = ({
       })
     : [0];
 
-  return getScale({ graphValues, height: valueGraphHeight, stackedValues });
+  return getScale({
+    graphValues,
+    height: valueGraphHeight,
+    stackedValues,
+    thresholds: shouldApplyThresholds ? thresholds : []
+  });
 };
 
 const formatMetricValue = ({
@@ -476,7 +506,10 @@ const getTimeValue = ({
   xScale,
   timeSeries,
   marginLeft = margin.left
-}: TimeValueProps): TimeValue => {
+}: TimeValueProps): TimeValue | null => {
+  if (isNil(x)) {
+    return null;
+  }
   const date = xScale.invert(x - marginLeft);
   const index = bisectDate(getDates(timeSeries), date);
 

package/src/Graph/common/timeSeries/models.ts

@@ -65,6 +65,8 @@ export interface Xscale {
 export interface AxeScale {
   dataLines: Array<Line>;
   dataTimeSeries: Array<TimeValue>;
+  thresholdUnit?: string;
+  thresholds: Array<number>;
   valueGraphHeight: number;
 }
 
@@ -117,6 +119,6 @@ export interface YScales {
 export interface TimeValueProps {
   marginLeft?: number;
   timeSeries: Array<TimeValue>;
-  x: number;
+  x?: number;
   xScale: ScaleLinear<number, number>;
 }

package/src/api/useGraphQuery/index.ts

@@ -1,15 +1,24 @@
-import { T, always, cond, flatten, isEmpty, join, pipe, pluck } from 'ramda';
+import { equals, flatten, has, isEmpty, join, pipe, pluck } from 'ramda';
 import dayjs from 'dayjs';
 
 import { LineChartData, useFetchQuery } from '../..';
 
 import { ServiceMetric } from './models';
 
+interface CustomTimePeriod {
+  end: string;
+  start: string;
+}
+
 interface UseMetricsQueryProps {
   baseEndpoint: string;
   metrics: Array<ServiceMetric>;
   refreshInterval?: number | false;
-  timePeriod?: TimePeriod;
+  timePeriod?: {
+    end?: string | null;
+    start?: string | null;
+    timePeriodType: number;
+  };
 }
 
 interface UseMetricsQueryState {
@@ -20,24 +29,24 @@ interface UseMetricsQueryState {
   start: string;
 }
 
-enum TimePeriod {
-  lastDay = 'last_day'
-}
-
 const getStartEndFromTimePeriod = (
-  timePeriod: TimePeriod
+  timePeriod: number
 ): { end: string; start: string } => {
-  return cond([
-    [
-      T,
-      always({
-        end: dayjs().toISOString(),
-        start: dayjs().subtract(1, 'day').toISOString()
-      })
-    ]
-  ])(timePeriod);
+  return {
+    end: dayjs().toISOString(),
+    start: dayjs().subtract(timePeriod, 'hour').toISOString()
+  };
 };
 
+const isCustomTimePeriod = (
+  timePeriod:
+    | number
+    | {
+        end?: string | null;
+        start?: string | null;
+      }
+): boolean => has('end', timePeriod) && has('start', timePeriod);
+
 interface PerformanceGraphData extends Omit<LineChartData, 'global'> {
   base: number;
 }
@@ -45,7 +54,9 @@ interface PerformanceGraphData extends Omit<LineChartData, 'global'> {
 const useGraphQuery = ({
   metrics,
   baseEndpoint,
-  timePeriod = TimePeriod.lastDay,
+  timePeriod = {
+    timePeriodType: 1
+  },
   refreshInterval = false
 }: UseMetricsQueryProps): UseMetricsQueryState => {
   const metricIds = pipe(
@@ -55,16 +66,32 @@ const useGraphQuery = ({
     join(',')
   )(metrics);
 
-  const { end, start } = getStartEndFromTimePeriod(timePeriod);
+  const timePeriodToUse = equals(timePeriod?.timePeriodType, -1)
+    ? {
+        end: timePeriod.end,
+        start: timePeriod.start
+      }
+    : timePeriod?.timePeriodType;
 
   const {
     data: graphData,
     isFetching,
     isLoading
   } = useFetchQuery<PerformanceGraphData>({
-    getEndpoint: () =>
-      `${baseEndpoint}?metricIds=[${metricIds}]&start=${start}&end=${end}`,
-    getQueryKey: () => ['graph', metricIds],
+    getEndpoint: () => {
+      if (isCustomTimePeriod(timePeriodToUse)) {
+        return `${baseEndpoint}?metricIds=[${metricIds}]&start=${
+          (timePeriodToUse as CustomTimePeriod).start
+        }&end=${(timePeriodToUse as CustomTimePeriod).end}`;
+      }
+
+      const { end, start } = getStartEndFromTimePeriod(
+        timePeriodToUse as number
+      );
+
+      return `${baseEndpoint}?metricIds=[${metricIds}]&start=${start}&end=${end}`;
+    },
+    getQueryKey: () => ['graph', metricIds, timePeriod],
     queryOptions: {
       enabled: !isEmpty(metricIds),
       refetchInterval: refreshInterval,
@@ -83,6 +110,10 @@ const useGraphQuery = ({
       }
     : undefined;
 
+  const { end, start } = isCustomTimePeriod(timePeriodToUse)
+    ? (timePeriodToUse as CustomTimePeriod)
+    : getStartEndFromTimePeriod(timePeriodToUse as number);
+
   return {
     end,
     graphData: formattedGraphData,

package/src/components/Modal/Modal.styles.ts

@@ -61,8 +61,7 @@ const useStyles = makeStyles<{
       color: theme.palette.text.secondary,
       margin: theme.spacing(1, 0, 1, 0),
       width: '90%'
-    },
-    height: '100%'
+    }
   },
   modalCloseButton: {
     position: 'absolute',

package/src/utils/index.ts

@@ -18,3 +18,4 @@ export * from './sanitizedHTML';
 export * from './docsURL';
 export * from './useInfiniteScrollListing';
 export * from './useLicenseExpirationWarning';
+export * from './useRefreshInterval';

package/src/utils/useRefreshInterval.ts

@@ -0,0 +1,21 @@
+import { always, cond, equals } from 'ramda';
+
+interface Props {
+  globalRefreshInterval?: number;
+  refreshInterval: 'default' | 'custom' | 'manual';
+  refreshIntervalCustom?: number;
+}
+
+export const useRefreshInterval = ({
+  refreshInterval,
+  refreshIntervalCustom,
+  globalRefreshInterval
+}: Props): number | false => {
+  const refreshIntervalToUse = cond([
+    [equals('default'), always(globalRefreshInterval)],
+    [equals('custom'), always(refreshIntervalCustom)],
+    [equals('manual'), always(0)]
+  ])(refreshInterval);
+
+  return refreshIntervalToUse ? refreshIntervalToUse * 1000 : false;
+};