@centreon/ui 24.5.12 → 24.5.13

package/src/Graph/LineChart/models.ts

@@ -0,0 +1,157 @@
+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;
+  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>;
+}
+
+export interface GraphTooltipData {
+  date: string;
+  highlightedMetricId: number | null;
+  metrics: Array<{
+    color: string;
+    id: number;
+    name: string;
+    unit: string;
+    value: 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,88 @@
+import { useCallback, useMemo, useRef } from 'react';
+
+import {
+  compose,
+  flatten,
+  groupBy,
+  isNil,
+  lensPath,
+  pipe,
+  prop,
+  set,
+  sortBy,
+  toLower
+} from 'ramda';
+
+import { LineChartData } from '../common/models';
+import { emphasizeCurveColor } from '../common/utils';
+
+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 adjustedDataRef = useRef<Data>();
+
+  const dataWithAdjustedMetricsColor = useMemo(() => {
+    if (isNil(data)) {
+      return data;
+    }
+    const metricsGroupedByColor = groupBy(
+      (metric) => metric.ds_data.ds_color_line
+    )(data?.metrics || []);
+
+    const newMetrics = Object.entries(metricsGroupedByColor).map(
+      ([color, value]) => {
+        return value?.map((metric, index) =>
+          set(
+            lensPath(['ds_data', 'ds_color_line']),
+            emphasizeCurveColor({ color, index }),
+            metric
+          )
+        );
+      }
+    );
+
+    const sortedMetrics = pipe(flatten, sortBy(prop('metric')))(newMetrics);
+
+    return {
+      ...data,
+      metrics: sortedMetrics
+    };
+  }, [data]);
+
+  const prepareData = useCallback((): void => {
+    if (isNil(dataWithAdjustedMetricsColor)) {
+      return;
+    }
+
+    const { timeSeries } = adjustGraphData(dataWithAdjustedMetricsColor);
+    const baseAxis = dataWithAdjustedMetricsColor.global.base;
+    const { title } = dataWithAdjustedMetricsColor.global;
+
+    const newLineData = adjustGraphData(dataWithAdjustedMetricsColor).lines;
+    const sortedLines = sortBy(compose(toLower, prop('name')), newLineData);
+
+    adjustedDataRef.current = {
+      baseAxis,
+      lines: sortedLines,
+      timeSeries,
+      title
+    };
+  }, [dataWithAdjustedMetricsColor, end, start]);
+
+  prepareData();
+
+  return { adjustedData: adjustedDataRef.current };
+};
+
+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/PieChart/PieChart.cypress.spec.tsx

@@ -0,0 +1,154 @@
+import numeral from 'numeral';
+
+import PieChart from './PieChart';
+import { ArcType, PieProps } from './models';
+
+const defaultData = [
+  { color: '#88B922', label: 'Ok', value: 148 },
+  { color: '#999999', label: 'Unknown', value: 13 },
+  { color: '#F7931A', label: 'Warning', value: 16 },
+  { color: '#FF6666', label: 'Down', value: 62 }
+];
+
+const total = Math.floor(
+  defaultData.reduce((acc, { value }) => acc + value, 0)
+);
+
+const TooltipContent = ({ label, color, value }: ArcType): JSX.Element => {
+  return (
+    <div data-testid={`tooltip-${label}`} style={{ color }}>
+      {label} : {value}
+    </div>
+  );
+};
+
+const initialize = ({
+  width = '500px',
+  height = '500px',
+  data = defaultData,
+  ...args
+}: Omit<PieProps, 'data'> & {
+  data?;
+  height?: string;
+  width?: string;
+}): void => {
+  cy.mount({
+    Component: (
+      <div style={{ height, width }}>
+        <PieChart {...args} data={data} />
+      </div>
+    )
+  });
+};
+
+describe('Pie chart', () => {
+  it('renders pie chart correctly with provided data', () => {
+    initialize({});
+
+    defaultData.forEach(({ label }) => {
+      cy.findByTestId(label).should('be.visible');
+    });
+
+    cy.makeSnapshot();
+  });
+
+  it('adjusts size based on the provided width and height', () => {
+    initialize({ displayLegend: false, height: '300px', width: '300px' });
+
+    cy.findByTestId('pieChart')
+      .should('have.css', 'width', '300px')
+      .and('have.css', 'height', '300px');
+
+    cy.makeSnapshot();
+  });
+
+  it('renders as a donut when variant is set to "donut"', () => {
+    initialize({ variant: 'donut' });
+    cy.get('[data-variant="donut"]').should('exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('renders as a pie when variant is set to "pie"', () => {
+    initialize({ variant: 'pie' });
+    cy.get('[data-variant="pie"]').should('exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays tooltip with correct information on hover', () => {
+    initialize({ TooltipContent });
+
+    defaultData.forEach(({ label, value }) => {
+      cy.findByTestId(label).trigger('mouseover', { force: true });
+
+      cy.findByTestId(`tooltip-${label}`)
+        .should('contain', label)
+        .and('contain', numeral(value).format('0a').toUpperCase());
+    });
+
+    cy.makeSnapshot();
+  });
+  it('conditionally displays values on arcs based on displayValues prop', () => {
+    initialize({ displayValues: true });
+    defaultData.forEach(({ value }, index) => {
+      cy.findAllByTestId('value')
+        .eq(index)
+        .children()
+        .eq(0)
+        .should('have.text', value);
+    });
+
+    initialize({ displayValues: false });
+    cy.findAllByTestId('value').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays values on arcs in percentage unit when displayValues is set to true and unit to percentage', () => {
+    initialize({ displayValues: true, unit: 'percentage' });
+    defaultData.forEach(({ value }, index) => {
+      cy.findAllByTestId('value')
+        .eq(index)
+        .children()
+        .eq(0)
+        .should('have.text', `${((value * 100) / total).toFixed(1)}%`);
+    });
+
+    cy.makeSnapshot();
+  });
+
+  it('displays Legend component based on displayLegend prop', () => {
+    initialize({ displayLegend: true });
+    cy.findByTestId('Legend').should('be.visible');
+
+    initialize({ displayLegend: false });
+    cy.findByTestId('Legend').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the title when the title is giving', () => {
+    initialize({ title: 'host' });
+    cy.findByTestId('Title').should('be.visible');
+
+    initialize({});
+    cy.findByTestId('Title').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('adjusts outer radius when chart dimensions are too small', () => {
+    initialize({
+      displayLegend: false,
+      height: '120px',
+      title: 'hosts',
+      variant: 'donut',
+      width: '120px'
+    });
+
+    cy.get('[data-variant="donut"]').should('have.css', 'width', '100px');
+
+    cy.makeSnapshot();
+  });
+});

package/src/Graph/PieChart/PieChart.stories.tsx

@@ -0,0 +1,190 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ArcType } from './models';
+import ResponsivePie from './ResponsivePie';
+
+const data = [
+  { color: '#88B922', label: 'Ok', value: 148 },
+  { color: '#999999', label: 'Unknown', value: 13 },
+  { color: '#F7931A', label: 'Warning', value: 16 },
+  { color: '#FF6666', label: 'Down', value: 62 }
+];
+
+const dataWithBigNumbers = [
+  { color: '#88B922', label: 'Ok', value: 260000 },
+  { color: '#999999', label: 'Unknown', value: 1010900 },
+  { color: '#F7931A', label: 'Warning', value: 63114 },
+  { color: '#FF6666', label: 'Down', value: 122222 }
+];
+
+const meta: Meta<typeof ResponsivePie> = {
+  component: ResponsivePie,
+  parameters: {
+    chromatic: {
+      delay: 1000
+    }
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof ResponsivePie>;
+
+const Template = (args): JSX.Element => {
+  return <ResponsivePie height={350} width={350} {...args} />;
+};
+
+export const Pie: Story = {
+  args: {
+    data,
+    title: 'hosts'
+  },
+  render: Template
+};
+
+export const Donut: Story = {
+  args: {
+    data,
+    title: 'hosts',
+    variant: 'donut'
+  },
+  render: Template
+};
+
+export const WithPencentage: Story = {
+  args: {
+    data,
+    title: 'hosts',
+    unit: 'percentage',
+    variant: 'donut'
+  },
+  render: Template
+};
+
+export const WithBigNumbers: Story = {
+  args: {
+    data: dataWithBigNumbers,
+    title: 'hosts',
+    unit: 'number',
+    variant: 'donut'
+  },
+  render: Template
+};
+
+export const WithoutLegend: Story = {
+  args: {
+    data,
+    displayLegend: false,
+    title: 'hosts',
+    variant: 'donut'
+  },
+  render: Template
+};
+
+export const DonutWithoutTitle: Story = {
+  args: {
+    data,
+    variant: 'donut'
+  },
+  render: Template
+};
+
+export const PieWithoutTitle: Story = {
+  args: {
+    data
+  },
+  render: Template
+};
+
+export const DonutWithDisplayedValues: Story = {
+  args: {
+    data,
+    displayValues: true,
+    variant: 'donut'
+  },
+  render: Template
+};
+
+export const PieWithDisplayedValues: Story = {
+  args: {
+    data,
+    displayValues: true
+  },
+  render: Template
+};
+
+const TooltipContent = ({ label, color, value }: ArcType): JSX.Element => {
+  return (
+    <div style={{ color }}>
+      {label} : {value}
+    </div>
+  );
+};
+
+export const PieWithTooltip: Story = {
+  args: {
+    TooltipContent,
+    data,
+    displayValues: true,
+    unit: 'percentage'
+  },
+  render: Template
+};
+
+export const DonutWithTooltip: Story = {
+  args: {
+    TooltipContent,
+    data,
+    displayValues: true,
+    variant: 'donut'
+  },
+  render: Template
+};
+
+const TemplateForSmallDimensions = (args): JSX.Element => {
+  return <ResponsivePie height={130} width={130} {...args} />;
+};
+
+export const PieWithSmallDimensions: Story = {
+  args: {
+    data,
+    displayLegend: false
+  },
+  render: TemplateForSmallDimensions
+};
+
+export const DonutWithSmallDimensions: Story = {
+  args: {
+    data,
+    displayLegend: false,
+    title: 'hosts',
+    variant: 'donut'
+  },
+  render: TemplateForSmallDimensions
+};
+
+const dataWidthOneNoZeroValue = [
+  { color: '#88B922', label: 'Ok', value: 13 },
+  { color: '#999999', label: 'Unknown', value: 0 },
+  { color: '#F7931A', label: 'Warning', value: 0 },
+  { color: '#FF6666', label: 'Down', value: 0 }
+];
+
+export const PieWithOneNoZeroValue: Story = {
+  args: {
+    data: dataWidthOneNoZeroValue,
+    displayLegend: false,
+    title: 'hosts',
+    variant: 'pie'
+  },
+  render: Template
+};
+
+export const donutWithOneNoZeroValue: Story = {
+  args: {
+    data: dataWidthOneNoZeroValue,
+    displayLegend: false,
+    title: 'hosts',
+    variant: 'donut'
+  },
+  render: Template
+};

package/src/Graph/PieChart/PieChart.styles.ts

@@ -0,0 +1,39 @@
+import { lt } from 'ramda';
+import { makeStyles } from 'tss-react/mui';
+
+export const usePieStyles = makeStyles<{ svgSize: number }>()(
+  (theme, { svgSize }) => ({
+    container: {
+      alignItems: 'center',
+      display: 'flex',
+      gap: theme.spacing(2),
+      justifyContent: 'center'
+    },
+    pieChartTooltip: {
+      backgroundColor: theme.palette.background.paper,
+      color: theme.palette.text.primary,
+      padding: 0,
+      position: 'relative'
+    },
+    svgContainer: {
+      alignItems: 'center',
+      backgroundColor: theme.palette.background.panelGroups,
+      borderRadius: '100%',
+      display: 'flex',
+      justifyContent: 'center'
+    },
+    svgWrapper: {
+      alignItems: 'center',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: theme.spacing(1),
+      justifyContent: 'center'
+    },
+    title: {
+      fontSize: lt(svgSize, 150)
+        ? theme.typography.body1.fontSize
+        : theme.typography.h6.fontSize,
+      fontWeight: theme.typography.fontWeightMedium
+    }
+  })
+);

package/src/Graph/PieChart/PieChart.tsx

@@ -0,0 +1,14 @@
+import { ParentSize } from '../..';
+
+import ResponsivePie from './ResponsivePie';
+import { PieProps } from './models';
+
+const PieChart = (props: PieProps): JSX.Element => (
+  <ParentSize>
+    {({ width, height }) => (
+      <ResponsivePie {...props} height={height} width={width} />
+    )}
+  </ParentSize>
+);
+
+export default PieChart;