@centreon/ui 26.5.14 → 26.5.15

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

@@ -18,8 +18,16 @@ import Annotation, {
   yMargin
 } from '.';
 
+interface IconProps {
+  'aria-label'?: string;
+  className?: string;
+  height?: number | string;
+  width?: number | string;
+  style?: React.CSSProperties;
+}
+
 type Props = {
-  Icon: (props) => JSX.Element | null;
+  Icon: (props: IconProps) => JSX.Element | null;
   ariaLabel: string;
   color: string;
   endDate: string;

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

@@ -18,8 +18,16 @@ import Annotation, {
   yMargin
 } from '.';
 
+interface IconProps {
+  'aria-label'?: string;
+  className?: string;
+  height?: number | string;
+  width?: number | string;
+  style?: React.CSSProperties;
+}
+
 type Props = {
-  Icon: (props) => JSX.Element | null;
+  Icon: (props: IconProps) => JSX.Element | null;
   ariaLabel: string;
   color: string;
   date: string;

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

@@ -5,8 +5,16 @@ import AreaAnnotation from './Annotation/Area';
 import LineAnnotation from './Annotation/Line';
 import type { TimelineEvent } from './models';
 
+interface IconProps {
+  'aria-label'?: string;
+  className?: string;
+  height?: number | string;
+  width?: number | string;
+  style?: React.CSSProperties;
+}
+
 interface Props {
-  Icon: (props) => JSX.Element | null;
+  Icon: (props: IconProps) => JSX.Element | null;
   annotationHoveredId: number;
   ariaLabel: string;
   color: string;

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

@@ -2,10 +2,7 @@ import { useAtomValue, useSetAtom } from 'jotai';
 import { useEffect } from 'react';
 
 import { margin } from '../../common';
-import {
-  eventMouseLeaveAtom,
-  mousePositionAtom
-} from '../interactionWithGraphAtoms';
+import { mousePositionAtom } from '../interactionWithGraphAtoms';
 import type { Props } from '.';
 import {
   annotationHoveredAtom,
@@ -20,7 +17,6 @@ const useAnnotation = ({
   const [annotationHoveredId] = crypto.getRandomValues(new Uint16Array(1));
 
   const mousePosition = useAtomValue(mousePositionAtom);
-  const _mouseLeaveEvent = useAtomValue(eventMouseLeaveAtom);
 
   const setAnnotationHovered = useSetAtom(annotationHoveredAtom);
   const changeAnnotationHovered = useSetAtom(

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

@@ -1,5 +1,5 @@
 import { Event, Tooltip } from '@visx/visx';
-import type { ScaleLinear } from 'd3-scale';
+import type { ScaleLinear, ScaleTime } from 'd3-scale';
 import { useAtomValue } from 'jotai';
 import { useEffect } from 'react';
 
@@ -13,7 +13,7 @@ interface Props {
   graphWidth: number;
   timeSeries: Array<TimeValue>;
   tooltipWidth?: number;
-  xScale: ScaleLinear<number, number>;
+  xScale: ScaleLinear<number, number> | ScaleTime<number, number>;
 }
 
 const useGraphTooltip = ({

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

@@ -71,10 +71,10 @@ interface CommonData {
   graphHeight: number;
   graphSvgRef: MutableRefObject<SVGSVGElement | null>;
   graphWidth: number;
-  lines;
+  lines: Array<Line>;
   timeSeries: Array<TimeValue>;
   xScale: ScaleTime<number, number>;
-  yScalesPerUnit: Record<string, ScaleLinear<string, string>>;
+  yScalesPerUnit: Record<string, ScaleLinear<number, number>>;
 }
 
 interface TimeShiftZonesData extends InteractedZone {
@@ -129,15 +129,15 @@ const InteractionWithGraph = ({
     !isNil(annotationData?.data) && !isEmpty(annotationData?.data);
   const displayTimeShiftZones = timeShiftZonesData?.enable ?? true;
 
-  const mouseLeave = (event): void => {
-    setEventMouseLeave(event);
+  const mouseLeave = (event: MouseEvent): void => {
+    setEventMouseLeave(event.nativeEvent);
     setEventMouseDown(null);
     updateMousePosition(null);
     setGraphTooltipData(null);
   };
 
-  const mouseUp = (event): void => {
-    setEventMouseUp(event);
+  const mouseUp = (event: MouseEvent): void => {
+    setEventMouseUp(event.nativeEvent);
     setEventMouseDown(null);
   };
 
@@ -164,8 +164,8 @@ const InteractionWithGraph = ({
     }
   };
 
-  const mouseDown = (event): void => {
-    setEventMouseDown(event);
+  const mouseDown = (event: MouseEvent): void => {
+    setEventMouseDown(event.nativeEvent);
   };
 
   const graphMarginLeft = useMemo(

package/src/Graph/Chart/Legend/LegendHeader.tsx

@@ -12,11 +12,16 @@ import type { Line } from '../../common/timeSeries/models';
 import LegendContent from './LegendContent';
 import { LegendDisplayMode } from './models';
 
+interface MinMaxAvgEntry {
+  label: string;
+  value: number | null;
+}
+
 interface Props {
   isDisplayedOnSide: boolean;
   isListMode: boolean;
   line: Line;
-  minMaxAvg?;
+  minMaxAvg?: Array<MinMaxAvgEntry>;
   unit: string;
   value?: string | null;
 }

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

@@ -151,7 +151,10 @@ const MainLegend = ({
               label: labelAvg,
               value: line.average_value
             }
-          ].filter(Boolean);
+          ].filter(Boolean) as Array<{
+            label: string;
+            value: number | null;
+          }>;
 
           return (
             <li

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

@@ -30,7 +30,7 @@ const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
   const getLineByMetric = (metric_id: number): Line =>
     find(propEq(metric_id, 'metric_id'), lines) as Line;
 
-  const toggleMetricLine = (metric_id): void => {
+  const toggleMetricLine = (metric_id: number): void => {
     const data = lines.map((line) => ({
       ...line,
       display: equals(line.metric_id, metric_id) ? !line.display : line.display
@@ -39,7 +39,7 @@ const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
     setLinesGraph(data);
   };
 
-  const highlightLine = (metric_id): void => {
+  const highlightLine = (metric_id: number): void => {
     const data = lines.map((line) => ({
       ...line,
       highlight: equals(line.metric_id, metric_id)

package/src/Graph/Chart/helpers/doc.ts

@@ -47,7 +47,17 @@ export const lastDayForwardDate = '2023-06-07';
 export const getCustomText = (text: string): string =>
   `<span style="color:#1EA7FD;fontSize:12px">(${text})</span>`;
 
-export const getBodyDescription = ({ key, description, type }): string => {
+interface BodyDescriptionProps {
+  key: string;
+  description: string;
+  type?: string;
+}
+
+export const getBodyDescription = ({
+  key,
+  description,
+  type
+}: BodyDescriptionProps): string => {
   const body = !type
     ? `${description} <br>`
     : `${description} ${getCustomText(type)} <br>`;

package/src/Graph/Chart/models.ts

@@ -1,4 +1,4 @@
-import type { ScaleLinear } from 'd3-scale';
+import type { ScaleLinear, ScaleTime } from 'd3-scale';
 import type { ReactNode } from 'react';
 
 import type { BarStyle } from '../BarChart/models';
@@ -188,7 +188,7 @@ export interface LegendModel {
 export interface GetDate {
   positionX: number;
   timeSeries: Array<TimeValue>;
-  xScale: ScaleLinear<number, number>;
+  xScale: ScaleLinear<number, number> | ScaleTime<number, number>;
 }
 
 export interface GraphTooltipData {

package/src/Graph/Chart/useChartData.ts

@@ -28,7 +28,7 @@ interface Props {
   start?: string;
 }
 
-const getBoolean = (value) => Boolean(Number(value));
+const getBoolean = (value: unknown): boolean => Boolean(Number(value));
 const defaultDsData = {
   ds_color_line: '#000000',
   ds_filled: false,
@@ -108,8 +108,9 @@ const useGraphData = ({ data }: Props): GraphDataResult => {
     }
 
     const { timeSeries } = adjustGraphData(dataWithAdjustedMetricsColor);
-    const baseAxis = dataWithAdjustedMetricsColor.global.base;
-    const { title } = dataWithAdjustedMetricsColor.global;
+    const baseAxis =
+      (dataWithAdjustedMetricsColor.global.base as number) ?? 1000;
+    const title = (dataWithAdjustedMetricsColor.global.title as string) ?? '';
 
     const newLineData = adjustGraphData(dataWithAdjustedMetricsColor).lines;
 

package/src/Graph/Chart/useChartIntersection.ts

@@ -4,7 +4,11 @@ interface GraphIntersectionState {
   isInViewport: boolean;
 }
 
-export const useIntersection = ({ element }): GraphIntersectionState => {
+export const useIntersection = ({
+  element
+}: {
+  element: Element | null;
+}): GraphIntersectionState => {
   const [entry, setEntry] = useState<IntersectionObserverEntry | null>(null);
 
   const observer = useRef<IntersectionObserver | null>(null);

package/src/Graph/Gauge/AnimatedPie.tsx

@@ -8,7 +8,11 @@ import type { Thresholds } from '../common/models';
 
 type AnimatedStyles = { endAngle: number; opacity: number; startAngle: number };
 
-const fromLeaveTransition = ({ endAngle }): AnimatedStyles => ({
+const fromLeaveTransition = ({
+  endAngle
+}: {
+  endAngle: number;
+}): AnimatedStyles => ({
   endAngle,
   opacity: 0,
   startAngle: -(Math.PI / 2)
@@ -27,7 +31,8 @@ type AnimatedPieProps<Datum> = ProvidedProps<Datum> & {
   getColor: (d: PieArcDatum<Datum>) => string;
   getKey: (d: PieArcDatum<Datum>) => string;
   hideTooltip?: () => void;
-  showTooltip?: (args) => void;
+  // biome-ignore lint/suspicious/noExplicitAny: visx useTooltip generic parameter
+  showTooltip?: (args: any) => void;
   thresholds: Thresholds;
 };
 

package/src/Graph/Gauge/models.ts

@@ -1,6 +1,12 @@
 import type { Thresholds } from '../common/models';
 import type { Metric } from '../common/timeSeries/models';
 
+export interface ShowTooltipArgs<T = {}> {
+  tooltipData?: T;
+  tooltipLeft?: number;
+  tooltipTop?: number;
+}
+
 export interface GaugeProps {
   adaptedMaxValue: number;
   baseColor?: string;
@@ -8,7 +14,7 @@ export interface GaugeProps {
   hideTooltip: () => void;
   metric: Metric;
   radius: number;
-  showTooltip: (args) => void;
+  showTooltip: (args: ShowTooltipArgs) => void;
   thresholds: Thresholds;
   width: number;
 }

package/src/Graph/PieChart/ResponsivePie.tsx

@@ -22,7 +22,13 @@ const DefaultLegend = ({ scale, direction }: LegendProps): JSX.Element => (
 
 type Placement = 'left' | 'right' | 'top' | 'bottom';
 
-const getTooltipPlacement = ({ radianX, radianY }): Placement => {
+const getTooltipPlacement = ({
+  radianX,
+  radianY
+}: {
+  radianX: number;
+  radianY: number;
+}): Placement => {
   if (gt(Math.abs(radianX), Math.abs(radianY))) {
     return ifElse<[b: number], Placement, Placement>(
       lt(0),

package/src/Graph/PieChart/models.ts

@@ -1,12 +1,31 @@
+import type { LegendProps as BaseLegendProps } from '../Legend/models';
+
 export interface ArcType {
   color: string;
   label: string;
   value: number;
 }
 
+export interface PieLegendProps extends BaseLegendProps {
+  data: Array<ArcType>;
+  title?: string;
+  total: number;
+  unit?: 'percentage' | 'number';
+}
+
+export interface PieTooltipContentProps {
+  color: string;
+  label: string;
+  title?: string;
+  total: number;
+  value: number;
+}
+
 export interface PieProps {
-  Legend?: ({ scale, direction, data, title, total, unit }) => JSX.Element;
-  TooltipContent?: (arcData) => JSX.Element | boolean | null;
+  Legend?: (props: PieLegendProps) => JSX.Element;
+  TooltipContent?: (
+    arcData: PieTooltipContentProps
+  ) => JSX.Element | boolean | null;
   data: Array<ArcType>;
   displayLegend?: boolean;
   displayTotal?: boolean;
@@ -14,7 +33,7 @@ export interface PieProps {
   innerRadius?: number;
   innerRadiusNoLimit?: boolean;
   legendDirection?: 'row' | 'column';
-  onArcClick?: (arcData) => void;
+  onArcClick?: (arcData: ArcType) => void;
   opacity: number;
   padAngle?: number;
   title?: string;

package/src/Graph/PieChart/useResponsivePie.ts

@@ -1,4 +1,5 @@
 import { equals, pluck, reject } from 'ramda';
+import type { RefObject } from 'react';
 
 import { getValueByUnit } from '../common/utils';
 import type { LegendScale } from '../Legend/models';
@@ -9,8 +10,8 @@ interface ResponsivePieProps {
   defaultInnerRadius: number;
   height: number;
   innerRadiusNoLimit: boolean;
-  legendRef;
-  titleRef;
+  legendRef: RefObject<HTMLElement | null>;
+  titleRef: RefObject<HTMLElement | null>;
   unit: 'percentage' | 'number';
   width: number;
 }

package/src/Graph/SingleBar/ThresholdLine.tsx

@@ -18,12 +18,16 @@ export const lineMargins = {
   small: 5
 };
 
+interface ShowTooltipArgs {
+  tooltipData: string;
+}
+
 interface Props extends Pick<SingleBarProps, 'direction'> {
   barHeight: number;
   hideTooltip: () => void;
   isSmall: boolean;
   label: string;
-  showTooltip: (args) => void;
+  showTooltip: (args: ShowTooltipArgs) => void;
   size: 'small' | 'medium';
   thresholdType: string;
   value: number;

package/src/Graph/SingleBar/Thresholds.tsx

@@ -4,11 +4,15 @@ import { ThresholdLine } from './ThresholdLine';
 
 export const groupMargin = 25;
 
+interface ShowTooltipArgs {
+  tooltipData: string;
+}
+
 interface Props extends Pick<SingleBarProps, 'direction'> {
   barHeight: number;
   hideTooltip: () => void;
   isSmall: boolean;
-  showTooltip: (args) => void;
+  showTooltip: (args: ShowTooltipArgs) => void;
   size: 'small' | 'medium';
   thresholds: ThresholdsModel;
   xScale: (value: number) => number;

package/src/Graph/Timeline/ResponsiveTimeline.tsx

@@ -58,7 +58,7 @@ const Timeline = ({
   const { getTimeDifference } = useTimeline();
 
   const getFormattedStart = useCallback(
-    (start) =>
+    (start: string | Date) =>
       format({
         date: dayjs(start).tz(timezone).toDate(),
         formatString: dateTimeFormat
@@ -67,7 +67,7 @@ const Timeline = ({
   );
 
   const getFormattedEnd = useCallback(
-    (end) =>
+    (end: string | Date) =>
       format({
         date: dayjs(end).tz(timezone).toDate(),
         formatString: dateTimeFormat

package/src/Graph/Timeline/useTimeline.ts

@@ -1,5 +1,6 @@
 import { usePluralizedTranslation } from '@centreon/ui';
 
+import type { ScaleTime } from 'd3-scale';
 import dayjs, { type Dayjs } from 'dayjs';
 import { lt } from 'ramda';
 import { useCallback } from 'react';
@@ -19,7 +20,7 @@ interface StartEndProps {
 
 interface GetWidthProps extends StartEndProps {
   timezone: string;
-  xScale;
+  xScale: ScaleTime<number, number>;
 }
 
 interface UseTimelineState {

package/src/Graph/Tree/DescendantNodes.tsx

@@ -1,6 +1,7 @@
 import { Group } from '@visx/group';
 import type { HierarchyPointNode } from '@visx/hierarchy/lib/types';
 import { gt, isNil, pluck } from 'ramda';
+import type { MouseEvent as ReactMouseEvent } from 'react';
 import { useState } from 'react';
 
 import type { BaseProp, Node, TreeProps } from './models';
@@ -26,13 +27,13 @@ const DescendantNodes = <TData extends BaseProp>({
     null
   );
 
-  const mouseDown = (e: MouseEvent): void => {
+  const mouseDown = (e: ReactMouseEvent): void => {
     setPressEventTimeStamp(e.timeStamp);
   };
 
   const mouseUp =
-    (callback) =>
-    (e: MouseEvent): void => {
+    (callback: () => void) =>
+    (e: ReactMouseEvent): void => {
       if (isNil(pressEventTimeStamp)) {
         callback();
 

package/src/Graph/Tree/Tree.tsx

@@ -28,7 +28,13 @@ export const Tree = <TData extends BaseProp>({
   );
 
   const toggleTreeNodesExpanded = useCallback(
-    ({ currentTree, targetNode }): Node<TData> => {
+    ({
+      currentTree,
+      targetNode
+    }: {
+      currentTree: Node<TData>;
+      targetNode: Node<TData>;
+    }): Node<TData> => {
       return updateNodeFromTree({
         callback: (subTree) => {
           if (isNil(subTree.isExpanded) && isNil(node.isDefaultExpanded)) {

package/src/Graph/Tree/models.ts

@@ -26,8 +26,8 @@ export interface ChildrenProps<TData> {
     height: number;
     width: number;
   };
-  onMouseDown: (e) => void;
-  onMouseUp: (callback) => (e) => void;
+  onMouseDown: (e: React.MouseEvent) => void;
+  onMouseUp: (callback: () => void) => (e: React.MouseEvent) => void;
 }
 
 export interface TreeProps<TData> {

package/src/Graph/common/Axes/UnitLabel.tsx

@@ -25,7 +25,7 @@ const UnitLabel = ({
         <SelectField
           className={classes.axisInput}
           dataTestId="unit-selector"
-          onChange={(e) => onUnitChange(e.target.value)}
+          onChange={(e) => onUnitChange(e.target.value as string)}
           options={units.map((unitOption) => ({
             id: unitOption,
             name: unitOption

package/src/Graph/common/Axes/index.tsx

@@ -1,7 +1,7 @@
 import { useLocaleDateTimeFormat } from '@centreon/ui';
 
 import { Axis } from '@visx/visx';
-import type { ScaleLinear } from 'd3-scale';
+import type { ScaleBand, ScaleLinear, ScaleTime } from 'd3-scale';
 import { equals, head, isNil, last } from 'ramda';
 
 import { margin } from '../../Chart/common';
@@ -19,7 +19,10 @@ interface Props {
   orientation: 'horizontal' | 'vertical';
   rightScale: ScaleLinear<number, number>;
   width: number;
-  xScale: ScaleLinear<number, number>;
+  xScale:
+    | ScaleLinear<number, number>
+    | ScaleTime<number, number>
+    | ScaleBand<number>;
 }
 
 const Axes = ({
@@ -47,16 +50,22 @@ const Axes = ({
 
   const xTickCount = Math.floor(Math.min(width / 100, 12));
 
-  const domain = xScale.domain();
+  const domain = xScale.domain() as Array<number | Date>;
 
   const start = head(domain);
   const end = last(domain);
 
+  const toISOString = (v: number | Date | undefined): string | undefined =>
+    v !== undefined
+      ? (v instanceof Date ? v : new Date(v)).toISOString()
+      : undefined;
+
   const tickFormat =
-    data?.axisX?.xAxisTickFormat ?? getXAxisTickFormat({ end, start });
+    data?.axisX?.xAxisTickFormat ??
+    getXAxisTickFormat({ end: toISOString(end), start: toISOString(start) });
 
-  const formatAxisTick = (tick): string =>
-    format({ date: new Date(tick), formatString: tickFormat });
+  const formatAxisTick = (tick: unknown): string =>
+    format({ date: new Date(tick as number | Date), formatString: tickFormat });
 
   const displayAxisRight = !isNil(secondUnit) && !isNil(rightScale);
 

package/src/Graph/common/Axes/useAxisY.ts

@@ -61,8 +61,8 @@ const useAxisY = ({
   );
 
   const formatTick =
-    ({ unit }) =>
-    (value): string => {
+    ({ unit }: { unit: string }) =>
+    (value: unknown): string => {
       if (isNil(value)) {
         return '';
       }
@@ -70,7 +70,7 @@ const useAxisY = ({
       return formatMetricValueWithUnit({
         base: data.baseAxis,
         unit,
-        value
+        value: value as number
       }) as string;
     };
 

package/src/Graph/common/BaseChart/AdditionalLine.tsx

@@ -1,10 +1,11 @@
+import type { ScaleLinear } from 'd3-scale';
 import { useMemo } from 'react';
 
 import type { AdditionalLineProps } from '../models';
 
 interface Props extends AdditionalLineProps {
   graphWidth: number;
-  yScale;
+  yScale: ScaleLinear<number, number>;
 }
 
 const AdditionalLine = ({

package/src/Graph/common/BaseChart/ChartSvgWrapper.tsx

@@ -1,4 +1,5 @@
 import { Group } from '@visx/visx';
+import type { ScaleBand, ScaleLinear, ScaleTime } from 'd3-scale';
 import { equals } from 'ramda';
 import type { MutableRefObject, ReactElement } from 'react';
 
@@ -19,13 +20,16 @@ interface Props {
   graphHeight: number;
   graphWidth: number;
   gridLinesType?: string;
-  leftScale;
+  leftScale: ScaleLinear<number, number>;
   orientation?: 'horizontal' | 'vertical';
-  rightScale;
+  rightScale: ScaleLinear<number, number>;
   showGridLines: boolean;
   svgRef: MutableRefObject<SVGSVGElement | null>;
   timeSeries: Array<TimeValue>;
-  xScale;
+  xScale:
+    | ScaleTime<number, number>
+    | ScaleLinear<number, number>
+    | ScaleBand<number>;
   maxAxisCharacters?: number;
   hasSecondUnit?: boolean;
   title?: string;

package/src/Graph/common/Grids/index.tsx

@@ -1,5 +1,5 @@
 import { Grid } from '@visx/visx';
-import type { ScaleLinear } from 'd3-scale';
+import type { ScaleBand, ScaleLinear, ScaleTime } from 'd3-scale';
 import { includes } from 'ramda';
 import { useMemo } from 'react';
 
@@ -7,9 +7,15 @@ import type { ChartAxis } from '../../Chart/models';
 
 interface Props extends Pick<ChartAxis, 'gridLinesType'> {
   height: number;
-  leftScale?: ScaleLinear<number, number>;
+  leftScale?:
+    | ScaleLinear<number, number>
+    | ScaleTime<number, number>
+    | ScaleBand<number>;
   width: number;
-  xScale?: ScaleLinear<number, number>;
+  xScale?:
+    | ScaleLinear<number, number>
+    | ScaleTime<number, number>
+    | ScaleBand<number>;
 }
 
 const Grids = ({