@centreon/ui 24.7.2 → 24.7.4

package/src/Graph/LineChart/models.ts

@@ -1,179 +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 '../common/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 LineChartAxis {
-  axisX?: AxisX;
-  axisYLeft?: AxisYLeft;
-  axisYRight?: AxisYRight;
-  gridLinesType?: 'horizontal' | 'vertical' | 'all';
-  isCenteredZero?: boolean;
-  scale?: 'linear' | 'logarithimc';
-  scaleLogarithmicBase?: number;
-  showBorder?: boolean;
-  showGridLines?: boolean;
-  yAxisTickLabelRotation?: number;
-}
-
-export interface InteractedZone {
-  enable?: boolean;
-  getInterval?: (data: Interval) => void;
-}
-
-export interface TooltipData {
-  data: Date;
-  hideTooltip: () => void;
-  tooltipOpen: boolean;
-}
-export interface Tooltip {
-  mode: 'all' | 'single' | 'hidden';
-  renderComponent?: (args: TooltipData) => ReactNode;
-  sortOrder: 'name' | 'ascending' | 'descending';
-}
-
-export interface AnnotationEvent {
-  data?: Array<TimelineEvent>;
-}
-
-export interface LineChartHeader {
-  displayTitle?: boolean;
-  extraComponent?: ReactNode;
-}
-
-export interface DisplayAnchor {
-  displayGuidingLines?: boolean;
-  displayTooltipsGuidingLines?: boolean;
-}
-
-export interface LineStyle {
-  areaTransparency?: number;
-  curve?: 'linear' | 'step' | 'natural';
-  dashLength?: number;
-  dashOffset?: number;
-  dotOffset?: number;
-  lineWidth?: number;
-  pathStyle?: 'solid' | 'dash' | 'dotted';
-  showArea?: boolean;
-  showPoints?: boolean;
-}
-
-export interface LineChartProps {
-  annotationEvent?: AnnotationEvent;
-  axis?: LineChartAxis;
-  displayAnchor?: DisplayAnchor;
-  header?: LineChartHeader;
-  height?: number | null;
-  legend?: LegendModel;
-  lineStyle?: LineStyle;
-  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;
-  height?: number;
-  mode: 'grid' | 'list';
-  placement: 'bottom' | 'left' | 'right';
-  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

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

@@ -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/PieChart/PieChart.cypress.spec.tsx

@@ -1,150 +0,0 @@
-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');
-  });
-
-  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');
-  });
-
-  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', '76px');
-
-    cy.makeSnapshot();
-  });
-});

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

@@ -1,204 +0,0 @@
-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} />;
-};
-
-const SmallTemplate = (args): JSX.Element => {
-  return <ResponsivePie height={100} width={100} {...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
-};
-
-export const smallDisplay: Story = {
-  args: {
-    data,
-    displayLegend: false,
-    title: 'hosts',
-    variant: 'donut'
-  },
-  render: SmallTemplate
-};

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

@@ -1,39 +0,0 @@
-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
-    }
-  })
-);