@centreon/ui 24.4.21 → 24.4.23

package/src/Graph/LineChart/models.ts

@@ -0,0 +1,146 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,197 @@
+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

@@ -0,0 +1,204 @@
+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

@@ -0,0 +1,25 @@
+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;