@centreon/ui 24.4.63 → 24.4.64

package/src/Graph/LineChart/models.ts

@@ -144,3 +144,15 @@ export interface GetDate {
   timeSeries: Array<TimeValue>;
   xScale: ScaleLinear<number, number>;
 }
+
+export interface GraphTooltipData {
+  date: string;
+  highlightedMetricId: number | null;
+  metrics: Array<{
+    color: string;
+    id: number;
+    name: string;
+    unit: string;
+    value: number;
+  }>;
+}

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

@@ -31,7 +31,9 @@ import {
   last,
   cond,
   always,
-  T
+  T,
+  includes,
+  split
 } from 'ramda';
 
 import { margin } from '../../LineChart/common';
@@ -205,6 +207,17 @@ const getLineForMetric = ({
 }: LineForMetricProps): Line | undefined =>
   find(propEq(metric_id, 'metric_id'), lines);
 
+interface LinesForMetricsProps {
+  lines: Array<Line>;
+  metricIds: Array<number>;
+}
+
+export const getLinesForMetrics = ({
+  lines,
+  metricIds
+}: LinesForMetricsProps): Array<Line> =>
+  filter(({ metric_id }) => metricIds.includes(metric_id), lines);
+
 interface LinesTimeSeries {
   lines: Array<Line>;
   timeSeries: Array<TimeValue>;
@@ -601,6 +614,23 @@ const getMetricWithLatestData = (
   };
 };
 
+interface FormatMetricNameProps {
+  legend: string | null;
+  name: string;
+}
+
+export const formatMetricName = ({
+  legend,
+  name
+}: FormatMetricNameProps): string => {
+  const legendName = legend || name;
+  const metricName = includes('#', legendName)
+    ? split('#')(legendName)[1]
+    : legendName;
+
+  return metricName;
+};
+
 export {
   getTimeSeries,
   getLineData,

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

@@ -1,96 +0,0 @@
-import { Tooltip } from '@visx/visx';
-
-import { Typography, useTheme } from '@mui/material';
-
-import useTooltipAnchorPoint from './useTooltipAnchorPoint';
-import { TooltipAnchorModel } from './models';
-
-const baseStyles = {
-  ...Tooltip.defaultStyles,
-  textAlign: 'center'
-};
-
-const TooltipAnchorPoint = ({
-  timeSeries,
-  xScale,
-  graphHeight,
-  leftScale,
-  rightScale,
-  graphWidth,
-  lines,
-  baseAxis
-}: TooltipAnchorModel): JSX.Element => {
-  const theme = useTheme();
-
-  const {
-    tooltipDataAxisX,
-    tooltipDataAxisYLeft,
-    tooltipLeftAxisX,
-    tooltipLeftAxisYLeft,
-    tooltipTopAxisYLeft,
-    tooltipDataAxisYRight,
-    tooltipTopAxisYRight,
-    tooltipLeftAxisYRight
-  } = useTooltipAnchorPoint({
-    baseAxis,
-    graphHeight,
-    graphWidth,
-    leftScale,
-    lines,
-    rightScale,
-    timeSeries,
-    xScale
-  });
-
-  const cardStyles = {
-    backgroundColor: theme.palette.background.paper,
-    color: theme.palette.text.primary,
-    padding: theme.spacing(0.25, 0.5)
-  };
-
-  return (
-    <>
-      {tooltipDataAxisX && (
-        <Tooltip.Tooltip
-          left={tooltipLeftAxisX}
-          style={{
-            ...baseStyles,
-            ...cardStyles,
-            transform: 'translateX(-70%)'
-          }}
-          top={0}
-        >
-          <Typography variant="caption">{tooltipDataAxisX}</Typography>
-        </Tooltip.Tooltip>
-      )}
-      {tooltipDataAxisYLeft && (
-        <Tooltip.Tooltip
-          left={tooltipLeftAxisYLeft}
-          style={{
-            ...baseStyles,
-            ...cardStyles,
-            transform: 'translateX(-70%) translateY(-100%)'
-          }}
-          top={tooltipTopAxisYLeft}
-        >
-          <Typography variant="caption">{tooltipDataAxisYLeft}</Typography>
-        </Tooltip.Tooltip>
-      )}
-      {tooltipDataAxisYRight && (
-        <Tooltip.Tooltip
-          left={tooltipLeftAxisYRight}
-          style={{
-            ...baseStyles,
-            ...cardStyles,
-            transform: 'translateX(-70%)  translateY(-80%)'
-          }}
-          top={tooltipTopAxisYRight}
-        >
-          <Typography variant="caption">{tooltipDataAxisYRight}</Typography>
-        </Tooltip.Tooltip>
-      )}
-    </>
-  );
-};
-
-export default TooltipAnchorPoint;

package/src/Graph/LineChart/InteractiveComponents/AnchorPoint/useTooltipAnchorPoint.ts

@@ -1,107 +0,0 @@
-import { useEffect } from 'react';
-
-import { Tooltip } from '@visx/visx';
-import { isNil } from 'ramda';
-
-import { useLocaleDateTimeFormat } from '@centreon/ui';
-
-import { margin, timeFormat } from '../../common/index';
-
-import { TooltipAnchorModel, UseTooltipAnchorPointResult } from './models';
-import useTickGraph from './useTickGraph';
-
-const useTooltipAnchorPoint = ({
-  timeSeries,
-  xScale,
-  graphHeight,
-  leftScale,
-  rightScale,
-  graphWidth,
-  lines,
-  baseAxis
-}: TooltipAnchorModel): UseTooltipAnchorPointResult => {
-  const { format } = useLocaleDateTimeFormat();
-
-  const { positionX, positionY, tickAxisBottom, tickAxisLeft, tickAxisRight } =
-    useTickGraph({
-      baseAxis,
-      leftScale,
-      lines,
-      rightScale,
-      timeSeries,
-      xScale
-    });
-
-  const {
-    showTooltip: showTooltipAxisYLeft,
-    tooltipData: tooltipDataAxisYLeft,
-    tooltipLeft: tooltipLeftAxisYLeft,
-    tooltipTop: tooltipTopAxisYLeft
-  } = Tooltip.useTooltip();
-  const {
-    showTooltip: showTooltipAxisX,
-    tooltipData: tooltipDataAxisX,
-    tooltipLeft: tooltipLeftAxisX,
-    tooltipTop: tooltipTopAxisX
-  } = Tooltip.useTooltip();
-
-  const {
-    showTooltip: showTooltipAxisYRight,
-    tooltipData: tooltipDataAxisYRight,
-    tooltipLeft: tooltipLeftAxisYRight,
-    tooltipTop: tooltipTopAxisYRight
-  } = Tooltip.useTooltip();
-
-  useEffect(() => {
-    if (!positionX || !positionY || !tickAxisBottom) {
-      return;
-    }
-
-    const dataAxisX = format({
-      date: tickAxisBottom,
-      formatString: timeFormat
-    });
-
-    showTooltipAxisX({
-      tooltipData: dataAxisX,
-      tooltipLeft: positionX + margin.left,
-      tooltipTop: graphHeight + margin.top
-    });
-  }, [positionX, positionY, tickAxisBottom]);
-
-  useEffect(() => {
-    if (!positionX || !positionY || !tickAxisLeft) {
-      return;
-    }
-    showTooltipAxisYLeft({
-      tooltipData: tickAxisLeft,
-      tooltipLeft: margin.left,
-      tooltipTop: positionY + margin.top
-    });
-  }, [tickAxisLeft, positionX, positionY]);
-
-  useEffect(() => {
-    if (!positionX || !positionY || !tickAxisRight) {
-      return;
-    }
-    showTooltipAxisYRight({
-      tooltipData: tickAxisRight,
-      tooltipLeft: graphWidth ? graphWidth + margin.left : 0,
-      tooltipTop: positionY + margin.top
-    });
-  }, [positionX, positionY, tickAxisRight]);
-
-  return {
-    tooltipDataAxisX: !isNil(tickAxisBottom) ? tooltipDataAxisX : null,
-    tooltipDataAxisYLeft: !isNil(tickAxisLeft) ? tooltipDataAxisYLeft : null,
-    tooltipDataAxisYRight: !isNil(tickAxisRight) ? tooltipDataAxisYRight : null,
-    tooltipLeftAxisX,
-    tooltipLeftAxisYLeft,
-    tooltipLeftAxisYRight,
-    tooltipTopAxisX,
-    tooltipTopAxisYLeft,
-    tooltipTopAxisYRight
-  } as UseTooltipAnchorPointResult;
-};
-
-export default useTooltipAnchorPoint;

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

@@ -1,22 +0,0 @@
-import { Typography } from '@mui/material';
-
-import { useLegendValueStyles } from './Legend.styles';
-
-interface Props {
-  value?: string | null;
-}
-
-const InteractiveValue = ({ value }: Props): JSX.Element | null => {
-  const { classes } = useLegendValueStyles({});
-  if (!value) {
-    return null;
-  }
-
-  return (
-    <Typography className={classes.text} variant="h6">
-      {value}
-    </Typography>
-  );
-};
-
-export default InteractiveValue;

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

@@ -1,99 +0,0 @@
-import { useMemo } from 'react';
-
-import { useAtomValue } from 'jotai';
-import { equals, find, isNil } from 'ramda';
-
-import { mousePositionAtom } from '../InteractiveComponents/interactionWithGraphAtoms';
-import {
-  formatMetricValueWithUnit,
-  getLineForMetric,
-  getMetrics,
-  getTimeValue
-} from '../../common/timeSeries';
-import { Line, TimeValue } from '../../common/timeSeries/models';
-
-import { FormattedMetricData } from './models';
-
-interface InteractiveValues {
-  getFormattedValue: (line: Line) => string | null | undefined;
-}
-
-interface Props {
-  base: number;
-  lines: Array<Line>;
-  timeSeries: Array<TimeValue>;
-  xScale;
-}
-
-const useInteractiveValues = ({
-  timeSeries,
-  lines,
-  base,
-  xScale
-}: Props): InteractiveValues => {
-  const mousePosition = useAtomValue(mousePositionAtom);
-
-  const timeValue = getTimeValue({
-    timeSeries,
-    x: mousePosition?.[0],
-    xScale
-  });
-
-  const graphTimeValue = timeSeries?.find((item) =>
-    equals(item.timeTick, timeValue?.timeTick)
-  );
-
-  const getMetricsToDisplay = (): Array<number> => {
-    if (isNil(graphTimeValue)) {
-      return [];
-    }
-    const metricsData = getMetrics(graphTimeValue as TimeValue);
-
-    const metricsToDisplay = metricsData.filter((metric_id) => {
-      const line = getLineForMetric({ lines, metric_id: Number(metric_id) });
-
-      return !isNil(graphTimeValue[metric_id]) && !isNil(line);
-    });
-
-    return metricsToDisplay.map(Number);
-  };
-
-  const metrics = useMemo(() => getMetricsToDisplay(), [graphTimeValue]);
-
-  const getFormattedMetricData = (
-    metric_id: number
-  ): FormattedMetricData | null => {
-    if (isNil(graphTimeValue)) {
-      return null;
-    }
-    const value = graphTimeValue[metric_id] as number;
-
-    const { color, name, unit } = getLineForMetric({
-      lines,
-      metric_id
-    }) as Line;
-
-    const formattedValue = formatMetricValueWithUnit({
-      base,
-      unit,
-      value
-    });
-
-    return {
-      color,
-      formattedValue,
-      name,
-      unit
-    };
-  };
-
-  const getFormattedValue = (line: Line): string | undefined | null => {
-    const metric_id = find(equals(line.metric_id), metrics);
-
-    return metric_id ? getFormattedMetricData(metric_id)?.formattedValue : null;
-  };
-
-  return { getFormattedValue };
-};
-
-export default useInteractiveValues;