@centreon/ui 24.4.13 → 24.4.14

package/src/Graph/LineChart/models.ts

@@ -1,146 +0,0 @@
-import { ReactNode } from 'react';
-
-import { ScaleLinear } from 'd3-scale';
-
-import { Line, TimeValue } from '../common/timeSeries/models';
-import { LineChartData } from '../common/models';
-
-import {
-  AxisX,
-  Axis as AxisYLeft,
-  AxisYRight
-} from './BasicComponents/Axes/models';
-import {
-  AreaRegularLines,
-  AreaStackedLines
-} from './BasicComponents/Lines/models';
-import { TimelineEvent } from './InteractiveComponents/Annotations/models';
-import { FactorsVariation } from './BasicComponents/Lines/Threshold/models';
-
-export interface LineChartEndpoint {
-  baseUrl: string;
-  queryParameters: GraphInterval;
-}
-export interface Data {
-  baseAxis: number;
-  lines: Array<Line>;
-  timeSeries: Array<TimeValue>;
-  title: string;
-}
-
-export enum GraphIntervalProperty {
-  end = 'end',
-  start = 'start'
-}
-
-export interface Interval {
-  end: Date;
-  start: Date;
-}
-
-export interface GraphInterval {
-  end?: string;
-  start?: string;
-}
-
-export interface ShapeLines {
-  areaRegularLines?: AreaRegularLines;
-  areaStackedLines?: AreaStackedLines;
-}
-
-export interface Axis {
-  axisX?: AxisX;
-  axisYLeft?: AxisYLeft;
-  axisYRight?: AxisYRight;
-}
-
-export interface InteractedZone {
-  enable?: boolean;
-  getInterval?: (data: Interval) => void;
-}
-
-export interface TooltipData {
-  data: Date;
-  hideTooltip: () => void;
-  tooltipOpen: boolean;
-}
-export interface Tooltip {
-  renderComponent?: (args: TooltipData) => ReactNode;
-}
-
-export interface AnnotationEvent {
-  data?: Array<TimelineEvent>;
-}
-
-export interface LineChartHeader {
-  displayTitle?: boolean;
-  extraComponent?: ReactNode;
-}
-
-export interface DisplayAnchor {
-  displayGuidingLines?: boolean;
-  displayTooltipsGuidingLines?: boolean;
-}
-
-export interface LineChartProps {
-  annotationEvent?: AnnotationEvent;
-  axis?: Axis;
-  displayAnchor?: DisplayAnchor;
-  header?: LineChartHeader;
-  height?: number | null;
-  loading: boolean;
-  timeShiftZones?: InteractedZone;
-  tooltip?: Tooltip;
-  width: number;
-  zoomPreview?: InteractedZone;
-}
-
-export interface Area {
-  display: boolean;
-}
-
-export type PatternOrientation =
-  | 'diagonal'
-  | 'diagonalRightToLeft'
-  | 'horizontal'
-  | 'vertical';
-
-export enum ThresholdType {
-  basic = 'basic',
-  pattern = 'pattern',
-  variation = 'variation'
-}
-
-export interface PatternThreshold {
-  data: Array<LineChartData>;
-  orientation?: Array<PatternOrientation>;
-  type: ThresholdType.pattern;
-}
-export interface VariationThreshold {
-  displayCircles?: boolean;
-  factors: FactorsVariation;
-  getCountDisplayedCircles?: (value: number) => void;
-  type: ThresholdType.variation;
-}
-
-export interface BasicThreshold {
-  type: ThresholdType.basic;
-}
-
-export interface GlobalAreaLines {
-  areaRegularLines?: Area;
-  areaStackedLines?: Area;
-  areaThresholdLines?: Array<
-    PatternThreshold | VariationThreshold | BasicThreshold
-  >;
-}
-export interface LegendModel {
-  display?: boolean;
-  renderExtraComponent?: ReactNode;
-}
-
-export interface GetDate {
-  positionX: number;
-  timeSeries: Array<TimeValue>;
-  xScale: ScaleLinear<number, number>;
-}

package/src/Graph/LineChart/translatedLabels.ts

@@ -1,9 +0,0 @@
-export const labelComment = 'Comment';
-export const labelBy = 'By';
-export const labelFrom = 'From';
-export const labelTo = 'To';
-export const labelAcknowledgement = 'Acknowledgement';
-export const labelDowntime = 'Downtime';
-export const labelMin = 'Min';
-export const labelMax = 'Max';
-export const labelAvg = 'Avg';

package/src/Graph/LineChart/useLineChartData.ts

@@ -1,49 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { compose, prop, sortBy, toLower } from 'ramda';
-
-import { LineChartData } from '../common/models';
-
-import { adjustGraphData } from './helpers';
-import { Data } from './models';
-
-interface GraphDataResult {
-  adjustedData?: Data;
-}
-
-interface Props {
-  data?: LineChartData;
-  end?: string;
-  start?: string;
-}
-
-const useGraphData = ({ data, end, start }: Props): GraphDataResult => {
-  const [adjustedData, setAdjustedData] = useState<Data>();
-
-  const prepareData = (dataToAdjust: LineChartData): void => {
-    const { timeSeries } = adjustGraphData(dataToAdjust);
-    const baseAxis = dataToAdjust.global.base;
-    const { title } = dataToAdjust.global;
-
-    const newLineData = adjustGraphData(dataToAdjust).lines;
-    const sortedLines = sortBy(compose(toLower, prop('name')), newLineData);
-
-    setAdjustedData({
-      baseAxis,
-      lines: sortedLines,
-      timeSeries,
-      title
-    });
-  };
-
-  useEffect(() => {
-    if (!data) {
-      return;
-    }
-    prepareData(data);
-  }, [end, start, data]);
-
-  return { adjustedData };
-};
-
-export default useGraphData;

package/src/Graph/LineChart/useLineChartIntersection.ts

@@ -1,36 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-
-interface GraphIntersectionState {
-  isInViewport: boolean;
-}
-
-export const useIntersection = ({ element }): GraphIntersectionState => {
-  const [entry, setEntry] = useState<IntersectionObserverEntry | null>(null);
-
-  const observer = useRef<IntersectionObserver | null>(null);
-
-  useEffect(() => {
-    if (observer.current) {
-      observer.current.disconnect();
-    }
-
-    observer.current = new window.IntersectionObserver(
-      ([newEntry]) => setEntry(newEntry),
-      {
-        threshold: 0
-      }
-    );
-
-    if (element) {
-      observer.current.observe(element);
-    }
-
-    return (): void => {
-      observer.current?.disconnect();
-    };
-  }, [element]);
-
-  return {
-    isInViewport: entry?.isIntersecting ?? true
-  };
-};

package/src/Graph/SingleBar/ResponsiveSingleBar.tsx

@@ -1,197 +0,0 @@
-import { useMemo, useRef } from 'react';
-
-import { Group, Tooltip } from '@visx/visx';
-import { scaleLinear } from '@visx/scale';
-import { equals, flatten, head, pluck } from 'ramda';
-import { Bar } from '@visx/shape';
-import { useSpring, animated } from '@react-spring/web';
-
-import { alpha, Box, Fade, useTheme } from '@mui/material';
-
-import {
-  formatMetricValueWithUnit,
-  getMetricWithLatestData
-} from '../common/timeSeries';
-import { Metric } from '../common/timeSeries/models';
-import { getColorFromDataAndTresholds } from '../common/utils';
-import { margins } from '../common/margins';
-
-import { SingleBarProps } from './models';
-import Thresholds, { groupMargin } from './Thresholds';
-import { barHeights } from './ThresholdLine';
-
-interface Props extends SingleBarProps {
-  height: number;
-  width: number;
-}
-
-const baseStyles = {
-  ...Tooltip.defaultStyles,
-  textAlign: 'center'
-};
-
-const ResponsiveSingleBar = ({
-  data,
-  thresholds,
-  width,
-  height,
-  displayAsRaw,
-  baseColor,
-  size = 'medium',
-  showLabels = true
-}: Props): JSX.Element => {
-  const theme = useTheme();
-
-  const metric = getMetricWithLatestData(data) as Metric;
-  const latestMetricData = head(metric.data) as number;
-  const thresholdValues = thresholds.enabled
-    ? flatten([
-        pluck('value', thresholds.warning),
-        pluck('value', thresholds.critical)
-      ])
-    : [0];
-
-  const adaptedMaxValue = Math.max(
-    metric.maximum_value || 0,
-    Math.max(...thresholdValues) * 1.1,
-    head(metric.data) as number
-  );
-
-  const {
-    showTooltip,
-    hideTooltip,
-    tooltipOpen,
-    tooltipLeft,
-    tooltipTop,
-    tooltipData
-  } = Tooltip.useTooltip();
-  const svgRef = useRef<SVGSVGElement | null>(null);
-
-  const barColor = useMemo(
-    () =>
-      getColorFromDataAndTresholds({
-        baseColor,
-        data: latestMetricData,
-        theme,
-        thresholds
-      }),
-    [latestMetricData, thresholds, theme]
-  );
-
-  const isSmall = equals(size, 'small');
-
-  const textStyle = isSmall
-    ? {
-        ...theme.typography.h6
-      }
-    : theme.typography.h3;
-
-  const text = showLabels && (
-    <text
-      dominantBaseline="middle"
-      style={{
-        fill: barColor,
-        ...textStyle
-      }}
-      textAnchor="middle"
-      x="50%"
-      y={isSmall ? 10 : 25}
-    >
-      {formatMetricValueWithUnit({
-        base: 1000,
-        isRaw: displayAsRaw,
-        unit: metric.unit,
-        value: metric.data[0]
-      })}
-    </text>
-  );
-
-  const xScale = useMemo(
-    () =>
-      scaleLinear<number>({
-        domain: [0, adaptedMaxValue],
-        range: [0, width - 10 || 0]
-      }),
-    [width, adaptedMaxValue]
-  );
-
-  const metricBarWidth = useMemo(
-    () => xScale(latestMetricData),
-    [xScale, latestMetricData]
-  );
-  const maxBarWidth = useMemo(
-    () => xScale(adaptedMaxValue),
-    [xScale, adaptedMaxValue]
-  );
-
-  const springStyle = useSpring({ width: metricBarWidth });
-
-  return (
-    <div
-      style={{
-        height: '100%',
-        position: 'relative'
-      }}
-    >
-      <Box
-        sx={{
-          height: '100%',
-          overflow: 'hidden',
-          position: 'relative',
-          width: '100%'
-        }}
-      >
-        <svg height={height} ref={svgRef} width={width}>
-          <Group.Group>
-            {text}
-            <animated.rect
-              data-testid={`${latestMetricData}-bar-${barColor}`}
-              fill={barColor}
-              height={barHeights[size]}
-              rx={4}
-              style={springStyle}
-              x={5}
-              y={groupMargin + (isSmall ? 0 : 2 * margins.top)}
-            />
-            <Bar
-              fill="transparent"
-              height={barHeights[size]}
-              rx={4}
-              ry={4}
-              stroke={alpha(theme.palette.text.primary, 0.3)}
-              width={maxBarWidth}
-              x={5}
-              y={groupMargin + (isSmall ? 0 : 2 * margins.top)}
-            />
-            {thresholds.enabled && (
-              <Thresholds
-                hideTooltip={hideTooltip}
-                showTooltip={showTooltip}
-                size={size}
-                thresholds={thresholds}
-                xScale={xScale}
-              />
-            )}
-          </Group.Group>
-        </svg>
-      </Box>
-      <Fade in={tooltipOpen}>
-        <Tooltip.Tooltip
-          left={tooltipLeft}
-          style={{
-            ...baseStyles,
-            backgroundColor: theme.palette.background.paper,
-            color: theme.palette.text.primary,
-            transform: `translate(-50%, ${isSmall ? -100 : -120}px)`,
-            zIndex: theme.zIndex.tooltip
-          }}
-          top={tooltipTop}
-        >
-          {tooltipData}
-        </Tooltip.Tooltip>
-      </Fade>
-    </div>
-  );
-};
-
-export default ResponsiveSingleBar;

package/src/Graph/SingleBar/SingleBar.stories.tsx

@@ -1,204 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import dataLastWeek from '../LineChart/mockedData/lastWeek.json';
-
-import { SingleBar } from '.';
-
-const meta: Meta<typeof SingleBar> = {
-  component: SingleBar
-};
-
-export default meta;
-type Story = StoryObj<typeof SingleBar>;
-
-const Template = (props): JSX.Element => (
-  <div style={{ height: '500px', width: '500px' }}>
-    <SingleBar {...props} />
-  </div>
-);
-
-export const success: Story = {
-  args: {
-    data: dataLastWeek,
-    thresholds: {
-      critical: [
-        {
-          label: 'Critical',
-          value: 0.6
-        }
-      ],
-      enabled: true,
-      warning: [
-        {
-          label: 'Warning',
-          value: 0.5
-        }
-      ]
-    }
-  },
-  render: Template
-};
-
-export const warning: Story = {
-  args: {
-    data: dataLastWeek,
-    thresholds: {
-      critical: [
-        {
-          label: 'Critical',
-          value: 0.5
-        }
-      ],
-      enabled: true,
-      warning: [
-        {
-          label: 'Warning',
-          value: 0.2
-        }
-      ]
-    }
-  },
-  render: Template
-};
-
-export const critical: Story = {
-  args: {
-    data: dataLastWeek,
-    thresholds: {
-      critical: [
-        {
-          label: 'Critical',
-          value: 0.35
-        }
-      ],
-      enabled: true,
-      warning: [
-        {
-          label: 'Warning',
-          value: 0.13
-        }
-      ]
-    }
-  },
-  render: Template
-};
-
-export const disabled: Story = {
-  args: {
-    data: dataLastWeek,
-    thresholds: {
-      critical: [
-        {
-          label: 'Critical',
-          value: 0.35
-        }
-      ],
-      enabled: false,
-      warning: [
-        {
-          label: 'Warning',
-          value: 0.13
-        }
-      ]
-    }
-  },
-  render: Template
-};
-
-export const criticalLowerThanWarning: Story = {
-  args: {
-    data: dataLastWeek,
-    thresholds: {
-      critical: [
-        {
-          label: 'Critical',
-          value: 0.13
-        }
-      ],
-      enabled: true,
-      warning: [
-        {
-          label: 'Warning',
-          value: 0.5
-        }
-      ]
-    }
-  },
-  render: Template
-};
-
-export const rangeThresholds: Story = {
-  args: {
-    data: dataLastWeek,
-    thresholds: {
-      critical: [
-        {
-          label: 'Critical 1',
-          value: 0.5
-        },
-        {
-          label: 'Critical 2',
-          value: 0.6
-        }
-      ],
-      enabled: true,
-      warning: [
-        {
-          label: 'Warning 1',
-          value: 0.13
-        },
-        {
-          label: 'Warning 2',
-          value: 0.3
-        }
-      ]
-    }
-  },
-  render: Template
-};
-
-export const RawValue: Story = {
-  args: {
-    data: dataLastWeek,
-    displayAsRaw: true,
-    thresholds: {
-      critical: [
-        {
-          label: 'Critical',
-          value: 0.6
-        }
-      ],
-      enabled: false,
-      warning: [
-        {
-          label: 'Warning',
-          value: 0.5
-        }
-      ]
-    }
-  },
-  render: Template
-};
-
-export const Small: Story = {
-  args: {
-    data: dataLastWeek,
-    size: 'small',
-    thresholds: {
-      critical: [
-        {
-          label: 'Critical',
-          value: 0.6
-        }
-      ],
-      enabled: true,
-      warning: [
-        {
-          label: 'Warning',
-          value: 0.5
-        }
-      ]
-    }
-  },
-  render: Template
-};

package/src/Graph/SingleBar/SingleBar.tsx

@@ -1,25 +0,0 @@
-import { ParentSize } from '../..';
-
-import { SingleBarProps } from './models';
-import ResponsiveSingleBar from './ResponsiveSingleBar';
-
-const SingleBar = ({ data, ...props }: SingleBarProps): JSX.Element | null => {
-  if (!data) {
-    return null;
-  }
-
-  return (
-    <ParentSize>
-      {({ width, height }) => (
-        <ResponsiveSingleBar
-          {...props}
-          data={data}
-          height={height}
-          width={width}
-        />
-      )}
-    </ParentSize>
-  );
-};
-
-export default SingleBar;