@centreon/ui 26.5.14 → 26.7.0

package/src/Graph/BarChart/Bar.tsx

@@ -1,6 +1,6 @@
 import { BarRounded } from '@visx/shape';
 import { BarGroupBar, SeriesPoint, StackKey } from '@visx/shape/lib/types';
-import type { ScaleLinear } from 'd3-scale';
+import type { ScaleBand, ScaleLinear } from 'd3-scale';
 import { equals } from 'ramda';
 import { ReactElement } from 'react';
 
@@ -16,7 +16,7 @@ interface GetFirstBarHeightProps {
   barWidth: number;
   y: number;
   isFirstBar: boolean;
-  yScale: ScaleLinear<number, number>;
+  yScale: ScaleLinear<number, number> | ScaleBand<number>;
   neutralValue: number;
 }
 
@@ -42,13 +42,23 @@ const getFirstBarHeight = ({
   }
 
   if (isHorizontal) {
-    return Math.abs(bar.width) - (y - yScale(neutralValue));
+    return Math.abs(bar.width) - (y - (yScale(neutralValue) ?? 0));
   }
 
   return barWidth;
 };
 
-const getPadding = ({ padding, size, isNegativeValue }): number => {
+interface GetPaddingProps {
+  padding: number;
+  size: number;
+  isNegativeValue: boolean;
+}
+
+const getPadding = ({
+  padding,
+  size,
+  isNegativeValue
+}: GetPaddingProps): number => {
   if (!isNegativeValue) {
     return padding;
   }
@@ -56,6 +66,30 @@ const getPadding = ({ padding, size, isNegativeValue }): number => {
   return padding + size;
 };
 
+interface BarProps {
+  barRoundedProps: Record<string, boolean>;
+  bar: Omit<BarGroupBar<StackKey>, 'key' | 'value'> & {
+    bar: SeriesPoint<unknown>;
+    key: StackKey;
+  };
+  isTooltipHidden: boolean;
+  isHorizontal: boolean;
+  shouldApplyRadiusOnBottom: boolean;
+  barPadding: number;
+  barWidth: number;
+  neutralValue: number;
+  isNegativeValue: boolean;
+  barIndex: number;
+  exitBar: () => void;
+  hoverBar: (props: {
+    barIndex: number;
+    highlightedMetric: number;
+  }) => () => void;
+  barY: number;
+  barStyle: BarStyle;
+  yScale: ScaleLinear<number, number> | ScaleBand<number>;
+}
+
 export const Bar = ({
   barRoundedProps,
   bar,
@@ -72,7 +106,7 @@ export const Bar = ({
   barY,
   barStyle,
   yScale
-}): ReactElement => {
+}: BarProps): ReactElement => {
   const style = getStyle({
     metricId: Number(bar.key),
     style: barStyle

package/src/Graph/BarChart/BarGroup.tsx

@@ -2,6 +2,7 @@ import { scaleBand, scaleOrdinal } from '@visx/scale';
 import { BarGroupHorizontal, BarGroup as VisxBarGroup } from '@visx/shape';
 import type { ScaleLinear } from 'd3-scale';
 import { difference, equals, keys, omit, pick } from 'ramda';
+import type { ComponentType } from 'react';
 import { memo, useMemo } from 'react';
 
 import { useDeepMemo } from '../../utils';
@@ -29,7 +30,8 @@ interface Props {
   orientation: 'horizontal' | 'vertical';
   size: number;
   timeSeries: Array<TimeValue>;
-  xScale;
+  // biome-ignore lint/suspicious/noExplicitAny: visx bandwidth scale typing
+  xScale: any;
   yScalesPerUnit: Record<string, ScaleLinear<number, number>>;
   scaleType?: 'linear' | 'logarithmic';
 }
@@ -50,7 +52,9 @@ const BarGroup = ({
   const [firstUnit] = getUnits(lines);
 
   const BarComponent = useMemo(
-    () => (isHorizontal ? VisxBarGroup : BarGroupHorizontal),
+    () =>
+      // biome-ignore lint/suspicious/noExplicitAny: visx BarGroup union type
+      (isHorizontal ? VisxBarGroup : BarGroupHorizontal) as ComponentType<any>,
     [isHorizontal]
   );
 
@@ -139,15 +143,15 @@ const BarGroup = ({
   const neutralValue = useMemo(() => getNeutralValue(scaleType), [scaleType]);
 
   return (
-    <BarComponent<TimeValue>
-      // @ts-expect-error - suppressing pre-existing type mismatch
+    <BarComponent
       color={colorScale}
       data={normalizedTimeSeries}
       height={size}
       keys={sortedLineKeys}
       {...barComponentBaseProps}
     >
-      {(barGroups) =>
+      {/* biome-ignore lint/suspicious/noExplicitAny: visx BarGroup union type */}
+      {(barGroups: Array<any>) =>
         barGroups.map((barGroup, index) => {
           return (
             <MemoizedGroup

package/src/Graph/BarChart/BarStack.tsx

@@ -22,7 +22,17 @@ interface Props extends Omit<UseBarStackProps, 'xScale'> {
   isStacked?: boolean;
 }
 
-const getPadding = ({ padding, size, isNegativeValue }): number => {
+interface GetPaddingProps {
+  padding: number;
+  size: number;
+  isNegativeValue: boolean;
+}
+
+const getPadding = ({
+  padding,
+  size,
+  isNegativeValue
+}: GetPaddingProps): number => {
   if (!isNegativeValue) {
     return padding;
   }
@@ -59,9 +69,12 @@ const BarStack = ({
       keys={lineKeys}
       {...commonBarStackProps}
     >
-      {(barStacks) => {
-        return barStacks.map((barStack, index) =>
-          barStack.bars.map((bar) => {
+      {/* biome-ignore lint/suspicious/noExplicitAny: visx BarStack union */}
+      {(barStacks: Array<any>) => {
+        // biome-ignore lint/suspicious/noExplicitAny: visx BarStack union
+        return barStacks.map((barStack: any, index: number) =>
+          // biome-ignore lint/suspicious/noExplicitAny: visx BarStack union
+          barStack.bars.map((bar: any) => {
             const shouldApplyRadiusOnBottom = equals(index, 0);
             const shouldApplyRadiusOnTop = equals(index, dec(barStacks.length));
             const isNegativeValue = gt(0, bar.bar[1]);

package/src/Graph/BarChart/useBarStack.ts

@@ -1,7 +1,9 @@
 import { scaleOrdinal } from '@visx/scale';
 import { BarStack, BarStackHorizontal } from '@visx/shape';
+import type { ScaleBand, ScaleLinear, ScaleOrdinal } from 'd3-scale';
 import { useSetAtom } from 'jotai';
 import { equals, keys, omit } from 'ramda';
+import type { ComponentType } from 'react';
 import { useCallback, useMemo } from 'react';
 
 import { useDeepMemo } from '../../utils';
@@ -17,14 +19,18 @@ export interface UseBarStackProps {
   isHorizontal: boolean;
   lines: Array<Line>;
   timeSeries: Array<TimeValue>;
-  xScale;
-  yScale;
+  xScale: ScaleBand<number> | ScaleLinear<number, number>;
+  yScale: ScaleBand<number> | ScaleLinear<number, number>;
 }
 
+// biome-ignore lint/suspicious/noExplicitAny: scale union with visx
+type CommonBarStackProps = Record<string, any>;
+
 interface UseBarStackState {
-  BarStackComponent: typeof BarStack | typeof BarStackHorizontal;
-  colorScale;
-  commonBarStackProps;
+  // biome-ignore lint/suspicious/noExplicitAny: visx BarStack/BarStackHorizontal union
+  BarStackComponent: ComponentType<any>;
+  colorScale: ScaleOrdinal<number, string>;
+  commonBarStackProps: CommonBarStackProps;
   exitBar: () => void;
   hoverBar: (props: HoverBarProps) => () => void;
   lineKeys: Array<number>;
@@ -40,7 +46,9 @@ export const useBarStack = ({
   const setTooltipData = useSetAtom(tooltipDataAtom);
 
   const BarStackComponent = useMemo(
-    () => (isHorizontal ? BarStack : BarStackHorizontal),
+    () =>
+      // biome-ignore lint/suspicious/noExplicitAny: visx BarStack/BarStackHorizontal union
+      (isHorizontal ? BarStack : BarStackHorizontal) as ComponentType<any>,
     [isHorizontal]
   );
 
@@ -70,13 +78,13 @@ export const useBarStack = ({
 
   const commonBarStackProps = isHorizontal
     ? {
-        x: (d) => d.timeTick,
+        x: (d: TimeValue) => d.timeTick,
         xScale,
         yScale
       }
     : {
         xScale: yScale,
-        y: (d) => d.timeTick,
+        y: (d: TimeValue) => d.timeTick,
         yScale: xScale
       };
 

package/src/Graph/BarStack/Graph.tsx

@@ -4,13 +4,14 @@ import {
   BarStack as BarStackVertical
 } from '@visx/shape';
 import { Text } from '@visx/text';
+import type { ScaleOrdinal } from 'd3-scale';
 import { equals, props } from 'ramda';
 import { memo, useMemo } from 'react';
 
 import { Tooltip } from '../../components';
 import { getValueByUnit } from '../common/utils';
 import { useGraphStyles } from './BarStack.styles';
-import type { BarStackProps } from './models';
+import type { BarStackProps, BarType } from './models';
 import { useGraphAndLegend } from './useGraphAndLegend';
 
 interface Props
@@ -26,11 +27,21 @@ interface Props
   width: number;
   height: number;
   isVerticalBar: boolean;
-  colorScale;
+  colorScale: ScaleOrdinal<string, string>;
   total: number;
 }
 
-const getFitsInBar = ({ isVerticalBar, bar, unit }): boolean => {
+interface GetFitsInBarProps {
+  isVerticalBar: boolean;
+  bar: { width: number; height: number };
+  unit?: 'percentage' | 'number';
+}
+
+const getFitsInBar = ({
+  isVerticalBar,
+  bar,
+  unit
+}: GetFitsInBarProps): boolean => {
   if (isVerticalBar) {
     return bar.height >= 18;
   }
@@ -41,16 +52,21 @@ const getFitsInBar = ({ isVerticalBar, bar, unit }): boolean => {
   );
 };
 
+interface GetClickProps {
+  onSingleBarClick?: (barData: BarType) => void;
+  bar: BarType | unknown;
+}
+
 const getClick = ({
   onSingleBarClick,
   bar
-}): ((e: MouseEvent) => void) | undefined => {
+}: GetClickProps): ((e: MouseEvent) => void) | undefined => {
   if (onSingleBarClick) {
     return (e: MouseEvent): void => {
       if (!equals(e.button, 0)) {
         return;
       }
-      onSingleBarClick(bar);
+      onSingleBarClick(bar as BarType);
     };
   }
 

package/src/Graph/BarStack/GraphAndLegend.tsx

@@ -1,3 +1,4 @@
+import type { ScaleOrdinal } from 'd3-scale';
 import { equals, props } from 'ramda';
 import { memo, useMemo } from 'react';
 
@@ -21,7 +22,7 @@ interface Props
   displayLegend: boolean;
   height: number;
   width: number;
-  colorScale;
+  colorScale: ScaleOrdinal<string, string>;
   total: number;
 }
 

package/src/Graph/BarStack/models.ts

@@ -1,17 +1,37 @@
+import type { LegendScale } from '../Legend/models';
+
 export interface BarType {
   color: string;
   label: string;
   value: number;
 }
 
+export interface LegendProps {
+  scale: LegendScale;
+  data: Array<BarType>;
+  title?: string;
+  total: number;
+  unit?: 'percentage' | 'number';
+  direction?: 'row' | 'column';
+}
+
+export interface TooltipContentProps {
+  color: string;
+  label: string;
+  total: number;
+  value: number;
+}
+
 export type BarStackProps = {
-  Legend?: ({ scale, data, title, total, unit, direction }) => JSX.Element;
-  TooltipContent?: (barData) => JSX.Element | boolean | null;
+  Legend?: (props: LegendProps) => JSX.Element;
+  TooltipContent?: (
+    barData: TooltipContentProps
+  ) => JSX.Element | boolean | null;
   data: Array<BarType>;
   displayLegend?: boolean;
   displayValues?: boolean;
   legendDirection?: 'row' | 'column';
-  onSingleBarClick?: (barData) => void;
+  onSingleBarClick?: (barData: BarType) => void;
   title?: string;
   tooltipProps?: object;
   unit?: 'percentage' | 'number';

package/src/Graph/BarStack/useGraphAndLegend.ts

@@ -1,4 +1,5 @@
 import { scaleBand, scaleLinear } from '@visx/scale';
+import type { ScaleBand, ScaleLinear } from 'd3-scale';
 import { pluck } from 'ramda';
 import { useMemo } from 'react';
 
@@ -14,8 +15,8 @@ interface UseGraphandLegendProps {
 
 interface UseGraphAndLegendState {
   barStackData: Record<string, number>;
-  xScale;
-  yScale;
+  xScale: ScaleBand<number> | ScaleLinear<number, number>;
+  yScale: ScaleBand<number> | ScaleLinear<number, number>;
   keys: Array<string>;
 }
 
@@ -38,11 +39,14 @@ export const useGraphAndLegend = ({
 
   const barStackData = useMemo(
     () =>
-      dataWithNonEmptyValue.reduce((acc, { label, value }) => {
-        acc[label] = value;
+      dataWithNonEmptyValue.reduce<Record<string, number>>(
+        (acc, { label, value }) => {
+          acc[label] = value;
 
-        return acc;
-      }, {}),
+          return acc;
+        },
+        {}
+      ),
     [dataWithNonEmptyValue]
   );
 

package/src/Graph/BarStack/useResponsiveBarStack.ts

@@ -1,4 +1,5 @@
 import { scaleOrdinal } from '@visx/scale';
+import type { ScaleOrdinal } from 'd3-scale';
 import { equals, isNil, pluck } from 'ramda';
 import { useMemo } from 'react';
 
@@ -21,7 +22,7 @@ interface UseBarStackState {
   titleVariant: 'xs' | 'sm' | 'md';
   isVerticalBar: boolean;
   legendScale: LegendScale;
-  colorScale;
+  colorScale: ScaleOrdinal<string, string>;
   formattedLegendDirection: 'column' | 'row';
 }
 

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

@@ -1,10 +1,11 @@
+import type { ScaleTime } from 'd3-scale';
 import { isNil } from 'ramda';
 
 interface Props {
   lineColor: string;
   radius: number;
   timeTick: Date;
-  xScale;
+  xScale: ScaleTime<number, number>;
   yPoint: number | null;
 }
 

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

@@ -53,7 +53,7 @@ const RegularLine = ({
   const props = {
     curve: curveType,
     data: timeSeries,
-    defined: (value): boolean => !isNil(value[metric_id]),
+    defined: (value: TimeValue): boolean => !isNil(value[metric_id]),
     opacity: 1,
     stroke: lineColor,
     strokeDasharray: getStrokeDashArray({
@@ -66,8 +66,9 @@ const RegularLine = ({
       ? Math.ceil((formattedLineWidth || 1) * 1.3)
       : formattedLineWidth,
     unit,
-    x: (timeValue): number => xScale(getTime(timeValue)) as number,
-    y: (timeValue): number => yScale(prop(metric_id, timeValue)) ?? null
+    x: (timeValue: TimeValue): number => xScale(getTime(timeValue)) as number,
+    y: (timeValue: TimeValue): number =>
+      yScale(prop(metric_id, timeValue)) ?? null
   };
 
   if (filled) {

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

@@ -6,7 +6,7 @@ import type { Line } from '../../../../common/timeSeries/models';
 interface RegularLines {
   regularLines: Array<Line>;
 }
-const useRegularLines = ({ lines }): RegularLines => {
+const useRegularLines = ({ lines }: { lines: Array<Line> }): RegularLines => {
   const stackedLines = getSortedStackedLines(lines);
 
   return { regularLines: difference(lines, stackedLines) };

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

@@ -60,9 +60,8 @@ const StackLines = ({
 }: Props): ReactElement => {
   const curveType = getCurveFactory(
     (equals(type(lineStyle), 'Array')
-      ? lineStyle?.[0].curve
-      : // @ts-expect-error - suppressing pre-existing type mismatch
-        lineStyle?.curve) || 'linear'
+      ? (lineStyle as Array<LineStyle>)?.[0].curve
+      : (lineStyle as LineStyle)?.curve) || 'linear'
   );
   return (
     <Shape.AreaStack
@@ -72,7 +71,7 @@ const StackLines = ({
         return pipe(
           // @ts-expect-error - suppressing pre-existing type mismatch
           map(prop('metric_id')) as unknown as (
-            displayedLines
+            displayedLines: Array<Line>
           ) => Array<string>,
           all((metric_id) => pipe(path(['data', metric_id]), isNil, not)(d))
         )(lines);
@@ -177,7 +176,7 @@ const StackLines = ({
                 }
                 // @ts-expect-error - suppressing pre-existing type mismatch
                 x={(d) => xScale(getTime(d.data)) ?? 0}
-                y={(d) => yScale(d[1]) ?? 0}
+                y={(d) => yScale(d[1] ?? 0) ?? 0}
               />
             </g>
           );

package/src/Graph/Chart/BasicComponents/Lines/StackedLines/useStackedLines.ts

@@ -3,6 +3,7 @@ import {
   getNotInvertedStackedLines,
   getStackedLinesTimeSeriesPerStackAndUnit
 } from '../../../../common/timeSeries';
+import type { Line, TimeValue } from '../../../../common/timeSeries/models';
 import type { LinesData } from '../models';
 
 interface StackedLinesState {
@@ -10,7 +11,15 @@ interface StackedLinesState {
   stackedLinesData: Record<string, LinesData>;
 }
 
-const useStackedLines = ({ lines, timeSeries }): StackedLinesState => {
+interface UseStackedLinesProps {
+  lines: Array<Line>;
+  timeSeries: Array<TimeValue>;
+}
+
+const useStackedLines = ({
+  lines,
+  timeSeries
+}: UseStackedLinesProps): StackedLinesState => {
   const regularStackedLines = getNotInvertedStackedLines(lines);
   const {
     stackedLinesTimeSeriesPerStackKeyAndUnit:

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

@@ -15,7 +15,7 @@ import ThresholdWithVariation from './ThresholdWithVariation';
 import useScaleThreshold from './useScaleThreshold';
 
 interface Props extends WrapperThresholdLinesModel {
-  curve: 'linear' | 'natural' | 'step';
+  curve?: 'linear' | 'natural' | 'step';
   graphHeight: number;
   timeSeries: Array<TimeValue>;
 }
@@ -126,9 +126,18 @@ const WrapperThresholdLines = ({
   return (
     <g>
       {filteredThresholdLines.map((element) =>
-        element?.map(({ Component, props, key }) => (
-          <Component {...props} id={props?.id ?? key} key={key} />
-        ))
+        element?.map(({ Component, props, key }) => {
+          const componentProps = props as { id?: string | number };
+
+          return (
+            <Component
+              // biome-ignore lint/suspicious/noExplicitAny: union of threshold component props
+              {...(props as any)}
+              id={componentProps?.id ?? key}
+              key={key}
+            />
+          );
+        })
       )}
     </g>
   );

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

@@ -1,4 +1,4 @@
-import type { ScaleLinear } from 'd3-scale';
+import type { ScaleLinear, ScaleTime } from 'd3-scale';
 import { equals, reject } from 'ramda';
 
 import type { Line, TimeValue } from '../../../../common/timeSeries/models';
@@ -60,7 +60,7 @@ export interface LinesThreshold {
 export interface WrapperThresholdLinesModel {
   areaThresholdLines?: GlobalAreaLines['areaThresholdLines'];
   lines: Array<Line>;
-  xScale: ScaleLinear<number, number>;
+  xScale: ScaleLinear<number, number> | ScaleTime<number, number>;
   yScalesPerUnit: Record<string, ScaleLinear<number, number>>;
 }
 

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

@@ -1,4 +1,4 @@
-import type { ScaleLinear } from 'd3-scale';
+import type { ScaleLinear, ScaleTime } from 'd3-scale';
 import { isNil } from 'ramda';
 import type { MutableRefObject } from 'react';
 
@@ -36,7 +36,7 @@ interface Props extends GlobalAreaLines {
   scaleLogarithmicBase?: number;
   timeSeries: Array<TimeValue>;
   width: number;
-  xScale: ScaleLinear<number, number>;
+  xScale: ScaleTime<number, number>;
   yScalesPerUnit: Record<string, ScaleLinear<number, number>>;
   lineStyle: LineStyle | Array<LineStyle>;
   hasSecondUnit?: boolean;
@@ -177,7 +177,6 @@ const Lines = ({
       )}
 
       {displayThresholdArea && (
-        // @ts-expect-error - suppressing pre-existing type mismatch
         <WrapperThresholdLines
           areaThresholdLines={areaThresholdLines}
           graphHeight={height}
@@ -236,14 +235,11 @@ const Lines = ({
                 <g key={metric_id}>
                   {displayGuidingLines && (
                     <RegularAnchorPoint
-                      // @ts-expect-error - suppressing pre-existing type mismatch
-                      areaColor={areaColor || lineColor}
                       hasSecondUnit={hasSecondUnit}
                       lineColor={lineColor}
                       maxLeftAxisCharacters={maxLeftAxisCharacters}
                       metric_id={metric_id}
                       timeSeries={relatedTimeSeries}
-                      transparency={transparency}
                       xScale={xScale}
                       yScale={yScale}
                     />
@@ -253,10 +249,7 @@ const Lines = ({
                       <Point
                         key={timeTick.toString()}
                         lineColor={lineColor}
-                        // @ts-expect-error - suppressing pre-existing type mismatch
-                        metric_id={metric_id}
                         radius={getPointRadius(style?.lineWidth)}
-                        timeSeries={relatedTimeSeries}
                         timeTick={timeTick}
                         xScale={xScale}
                         yPoint={getYAnchorPoint({
@@ -265,7 +258,6 @@ const Lines = ({
                           timeTick,
                           yScale
                         })}
-                        yScale={yScale}
                       />
                     ))}
                   <RegularLine

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

@@ -20,15 +20,19 @@ interface Props {
 interface GetYAnchorPoint {
   stackValues: Array<StackValue>;
   timeTick: Date | null;
-  yScale: ScaleTime<number, number>;
+  yScale: ScaleLinear<number, number> | ScaleTime<number, number>;
 }
 
 const getStackedDates = (stackValues: Array<StackValue>): Array<Date> => {
-  const toTimeTick = (stackValue): string => stackValue?.data?.timeTick;
+  const toTimeTick = (stackValue: { data?: { timeTick: string } }): string =>
+    stackValue?.data?.timeTick as string;
 
   const toDate = (tick: string): Date => new Date(tick);
 
-  return pipe(map(toTimeTick), map(toDate))(stackValues);
+  return pipe(
+    map(toTimeTick),
+    map(toDate)
+  )(stackValues as unknown as Array<{ data?: { timeTick: string } }>);
 };
 
 export const getYAnchorPoint = ({

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

@@ -16,7 +16,7 @@ export interface RegularLinesAnchorPoint extends AnchorPoint {
 }
 
 export interface StackedAnchorPoint extends AnchorPoint {
-  stack;
+  stack: Array<StackValue>;
 }
 
 export interface StackData {
@@ -28,7 +28,7 @@ export interface GuidingLines {
   graphHeight: number;
   graphWidth: number;
   timeSeries: Array<TimeValue>;
-  xScale: ScaleLinear<number, number>;
+  xScale: ScaleTime<number, number>;
   maxLeftAxisCharacters: number;
   hasSecondUnit?: boolean;
   leftScale?: ScaleLinear<number, number>;

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

@@ -1,4 +1,4 @@
-import type { ScaleLinear } from 'd3-scale';
+import type { ScaleLinear, ScaleTime } from 'd3-scale';
 import { useAtomValue } from 'jotai';
 import { type MutableRefObject, useEffect, useState } from 'react';
 
@@ -26,7 +26,7 @@ interface Props {
   lines?: Array<Line>;
   rightScale?: ScaleLinear<number, number>;
   timeSeries: Array<TimeValue>;
-  xScale: ScaleLinear<number, number>;
+  xScale: ScaleTime<number, number>;
   hasSecondUnit?: boolean;
   maxLeftAxisCharacters: number;
   hasUnit?: boolean;
@@ -89,7 +89,7 @@ const useTickGraph = ({
 
     setTickAxisBottom(timeTickValue);
 
-    const valueTickAxisLeft = leftScale?.invert(positionY);
+    const valueTickAxisLeft = leftScale?.invert(positionY ?? 0);
     const formattedTickAxisLeft = axisLeft?.tickFormat?.(valueTickAxisLeft);
 
     setTickAxisLeft(formattedTickAxisLeft);
@@ -99,7 +99,7 @@ const useTickGraph = ({
 
       return;
     }
-    const valueTickAxisRight = rightScale?.invert(positionY);
+    const valueTickAxisRight = rightScale?.invert(positionY ?? 0);
     const formattedTickAxisRight = axisRight?.tickFormat?.(valueTickAxisRight);
     setTickAxisRight(formattedTickAxisRight);
   }, [mousePosition]);