@centreon/ui 24.9.4 → 24.9.6

package/src/Graph/Tree/stories/datas.ts

@@ -1,305 +0,0 @@
-import { Node } from '../models';
-
-export interface SimpleData {
-  id: number;
-  name: string;
-  status: 'critical' | 'warning' | 'ok';
-}
-
-export interface ComplexData {
-  count?: number;
-  id: number;
-  name: string;
-  status: 'critical' | 'warning' | 'ok';
-}
-
-export const simpleData: Node<SimpleData> = {
-  children: [
-    {
-      children: [
-        { data: { id: 2, name: 'A1', status: 'ok' } },
-        { data: { id: 3, name: 'A2', status: 'ok' } },
-        { data: { id: 4, name: 'A3', status: 'critical' } },
-        {
-          children: [
-            {
-              data: { id: 10, name: 'C1', status: 'warning' }
-            },
-            {
-              children: [
-                {
-                  data: { id: 11, name: 'D1', status: 'ok' }
-                },
-                {
-                  data: { id: 12, name: 'D2', status: 'ok' }
-                },
-                {
-                  data: { id: 13, name: 'D3', status: 'ok' }
-                }
-              ],
-              data: { id: 14, name: 'D', status: 'ok' }
-            },
-            {
-              children: [
-                {
-                  data: { id: 21, name: 'E1', status: 'critical' }
-                }
-              ],
-              data: { id: 20, name: 'E', status: 'critical' }
-            }
-          ],
-          data: { id: 3, name: 'C', status: 'critical' }
-        }
-      ],
-      data: { id: 6273286320, name: 'A', status: 'critical' }
-    },
-    { data: { id: 1, name: 'Z', status: 'ok' } },
-    {
-      children: [{ data: { id: 50, name: 'B1', status: 'warning' } }],
-      data: { id: 2, name: 'B', status: 'warning' }
-    }
-  ],
-  data: {
-    id: 0,
-    name: 'T',
-    status: 'critical'
-  }
-};
-
-export const complexData: Node<ComplexData> = {
-  children: [
-    {
-      children: [
-        { data: { id: 2, name: 'Indicator 1', status: 'critical' } },
-        {
-          children: [
-            {
-              children: [
-                { data: { id: 6, name: 'Indicator 6', status: 'critical' } },
-                { data: { id: 7, name: 'Indicator 7', status: 'ok' } }
-              ],
-              data: { count: 2, id: 0, name: 'critical', status: 'critical' }
-            },
-            {
-              children: [
-                {
-                  children: [
-                    {
-                      children: [
-                        {
-                          data: {
-                            id: 8,
-                            name: 'Indicator 8',
-                            status: 'warning'
-                          }
-                        }
-                      ],
-                      data: {
-                        count: 1,
-                        id: 4,
-                        name: 'warning',
-                        status: 'warning'
-                      }
-                    },
-                    {
-                      children: [
-                        {
-                          data: {
-                            id: 10,
-                            name: 'Indicator 10',
-                            status: 'ok'
-                          }
-                        }
-                      ],
-                      data: {
-                        count: 1,
-                        id: 0,
-                        name: 'ok',
-                        status: 'ok'
-                      }
-                    }
-                  ],
-                  data: {
-                    id: 6,
-                    name: 'BA 3',
-                    status: 'warning'
-                  }
-                }
-              ],
-              data: {
-                count: 1,
-                id: 4,
-                name: 'warning',
-                status: 'warning'
-              }
-            },
-            {
-              children: [
-                { data: { id: 9, name: 'Indicator 9', status: 'ok' } }
-              ],
-              data: { count: 1, id: 0, name: 'ok', status: 'ok' }
-            }
-          ],
-          data: { id: 3, name: 'BA 2', status: 'critical' }
-        }
-      ],
-      data: { count: 2, id: 6, name: 'critical', status: 'critical' }
-    },
-    {
-      children: [
-        { data: { id: 4, name: 'Indicator 4', status: 'warning' } },
-        { data: { id: 5, name: 'Indicator 5', status: 'warning' } }
-      ],
-      data: { count: 2, id: 4, name: 'warning', status: 'warning' }
-    },
-    {
-      children: [
-        { data: { id: 6, name: 'Indicator 2', status: 'ok' } },
-        {
-          children: [
-            {
-              children: [
-                { data: { id: 6, name: 'Indicator 2', status: 'ok' } }
-              ],
-              data: {
-                count: 1,
-                name: 'ok',
-                status: 'ok'
-              }
-            }
-          ],
-          data: { id: 0, name: 'BA 4', status: 'ok' }
-        }
-      ],
-      data: { count: 2, id: 0, name: 'ok', status: 'ok' }
-    }
-  ],
-  data: {
-    id: 1,
-    name: 'BA 1',
-    status: 'critical'
-  }
-};
-
-export const moreComplexData: Node<ComplexData> = {
-  children: [
-    {
-      children: [
-        { data: { id: 2, name: 'Indicator 1', status: 'critical' } },
-        {
-          children: [
-            {
-              children: [
-                { data: { id: 6, name: 'Indicator 6', status: 'critical' } },
-                { data: { id: 7, name: 'Indicator 7', status: 'ok' } }
-              ],
-              data: { count: 2, id: 0, name: 'critical', status: 'critical' }
-            },
-            {
-              children: [
-                {
-                  children: [
-                    {
-                      children: [
-                        {
-                          data: {
-                            id: 8,
-                            name: 'Indicator 8',
-                            status: 'warning'
-                          }
-                        }
-                      ],
-                      data: {
-                        count: 1,
-                        id: 4,
-                        name: 'warning',
-                        status: 'warning'
-                      }
-                    },
-                    {
-                      children: [
-                        {
-                          data: {
-                            id: 10,
-                            name: 'Indicator 10',
-                            status: 'ok'
-                          }
-                        }
-                      ],
-                      data: {
-                        count: 1,
-                        id: 0,
-                        name: 'ok',
-                        status: 'ok'
-                      }
-                    }
-                  ],
-                  data: {
-                    id: 6,
-                    name: 'BA 3',
-                    status: 'warning'
-                  }
-                }
-              ],
-              data: {
-                count: 1,
-                id: 4,
-                name: 'warning',
-                status: 'warning'
-              }
-            },
-            {
-              children: [
-                { data: { id: 9, name: 'Indicator 9', status: 'ok' } }
-              ],
-              data: { count: 1, id: 0, name: 'ok', status: 'ok' }
-            }
-          ],
-          data: { id: 3, name: 'BA 2', status: 'critical' }
-        }
-      ],
-      data: { count: 2, id: 6, name: 'critical', status: 'critical' }
-    },
-    {
-      children: [
-        { data: { id: 4, name: 'Indicator 4', status: 'warning' } },
-        { data: { id: 5, name: 'Indicator 5', status: 'warning' } }
-      ],
-      data: { count: 2, id: 4, name: 'warning', status: 'warning' }
-    },
-    {
-      children: [
-        {
-          children: [
-            {
-              children: [
-                { data: { id: 11, name: 'Indicator 11', status: 'ok' } }
-              ],
-              data: {
-                count: 1,
-                name: 'ok',
-                status: 'ok'
-              }
-            }
-          ],
-          data: { id: 0, name: 'BA 3', status: 'ok' }
-        },
-        { data: { id: 30, name: 'Indicator 30', status: 'ok' } },
-        { data: { id: 31, name: 'Indicator 31', status: 'ok' } },
-        { data: { id: 32, name: 'Indicator 32', status: 'ok' } },
-        { data: { id: 33, name: 'Indicator 33', status: 'ok' } },
-        { data: { id: 34, name: 'Indicator 34', status: 'ok' } },
-        { data: { id: 35, name: 'Indicator 35', status: 'ok' } },
-        { data: { id: 36, name: 'Indicator 36', status: 'ok' } },
-        { data: { id: 37, name: 'Indicator 37', status: 'ok' } },
-        { data: { id: 38, name: 'Indicator 38', status: 'ok' } }
-      ],
-      data: { count: 9, id: 0, name: 'ok', status: 'ok' }
-    }
-  ],
-  data: {
-    id: 1,
-    name: 'BA 1',
-    status: 'critical'
-  }
-};

package/src/Graph/Tree/utils.ts

@@ -1,49 +0,0 @@
-import { equals, omit } from 'ramda';
-
-import { BaseProp, Node } from './models';
-
-interface UpdateNodeFromTreeProps<TData> {
-  callback: (tree: Node<TData>) => Partial<Node<TData>>;
-  targetNode: Node<TData>;
-  tree: Node<TData>;
-}
-
-export const updateNodeFromTree = <TData extends BaseProp>({
-  tree,
-  targetNode,
-  callback
-}: UpdateNodeFromTreeProps<TData>): Node<TData> => {
-  if (!tree.children) {
-    return tree;
-  }
-
-  if (
-    equals(tree.data, targetNode.data) &&
-    equals(tree.children, targetNode.children)
-  ) {
-    return {
-      ...tree,
-      ...callback(tree)
-    };
-  }
-
-  return {
-    ...tree,
-    children: tree.children?.map((child) =>
-      updateNodeFromTree({ callback, targetNode, tree: child })
-    )
-  };
-};
-
-export const cleanUpTree = <TData extends BaseProp>(
-  tree: Node<TData>
-): Node<TData> => {
-  if (!tree.children) {
-    return tree;
-  }
-
-  return {
-    ...omit(['isExpanded'], tree),
-    children: tree.children?.map((child) => cleanUpTree(child))
-  };
-};

package/src/Graph/common/Axes/AxisStyles.ts

@@ -1,11 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useYAxisStyles = makeStyles()((theme) => ({
-  axisInput: {
-    maxHeight: theme.spacing(3),
-    minHeight: theme.spacing(3)
-  },
-  unitContainer: {
-    marginTop: '2px'
-  }
-}));

package/src/Graph/common/Axes/UnitLabel.tsx

@@ -1,51 +0,0 @@
-import SelectField from '../../../InputField/Select';
-import { commonTickLabelProps } from '../utils';
-
-import { useYAxisStyles } from './AxisStyles';
-
-interface UnitLabelProps {
-  onUnitChange?: (newUnit: string) => void;
-  unit: string;
-  units: Array<string>;
-  x: number;
-  y?: number;
-}
-
-const UnitLabel = ({
-  x,
-  y = 16,
-  unit,
-  onUnitChange,
-  units
-}: UnitLabelProps): JSX.Element => {
-  const { classes } = useYAxisStyles();
-
-  return onUnitChange ? (
-    <foreignObject height={36} width={60} x={x - 20} y={-y * 2}>
-      <div className={classes.unitContainer}>
-        <SelectField
-          className={classes.axisInput}
-          dataTestId="unit-selector"
-          options={units.map((unitOption) => ({
-            id: unitOption,
-            name: unitOption
-          }))}
-          selectedOptionId={unit}
-          size="small"
-          onChange={(e) => onUnitChange(e.target.value)}
-        />
-      </div>
-    </foreignObject>
-  ) : (
-    <text
-      fontFamily={commonTickLabelProps.fontFamily}
-      fontSize={commonTickLabelProps.fontSize}
-      x={x}
-      y={-y}
-    >
-      {unit}
-    </text>
-  );
-};
-
-export default UnitLabel;

package/src/Graph/common/Axes/index.tsx

@@ -1,133 +0,0 @@
-import { Axis } from '@visx/visx';
-import { ScaleLinear } from 'd3-scale';
-import { equals, isNil } from 'ramda';
-
-import { useLocaleDateTimeFormat } from '@centreon/ui';
-
-import { margin } from '../../Chart/common';
-import { getXAxisTickFormat } from '../../Chart/helpers';
-import { getUnits } from '../timeSeries';
-
-import UnitLabel from './UnitLabel';
-import { Data } from './models';
-import useAxisY from './useAxisY';
-
-interface Props {
-  allUnits: Array<string>;
-  data: Data;
-  height: number;
-  leftScale: ScaleLinear<number, number>;
-  orientation: 'horizontal' | 'vertical';
-  rightScale: ScaleLinear<number, number>;
-  width: number;
-  xScale: ScaleLinear<number, number>;
-}
-
-const Axes = ({
-  height,
-  width,
-  data,
-  rightScale,
-  leftScale,
-  xScale,
-  orientation,
-  allUnits
-}: Props): JSX.Element => {
-  const { format } = useLocaleDateTimeFormat();
-  const { lines, showBorder, yAxisTickLabelRotation } = data;
-  const isHorizontal = equals(orientation, 'horizontal');
-
-  const { axisLeft, axisRight } = useAxisY({
-    data,
-    graphHeight: height,
-    graphWidth: width,
-    isHorizontal
-  });
-
-  const [, secondUnit] = getUnits(lines);
-
-  const xTickCount = Math.min(Math.ceil(width / 82), 12);
-
-  const [start, end] = xScale.domain();
-
-  const tickFormat =
-    data?.axisX?.xAxisTickFormat ?? getXAxisTickFormat({ end, start });
-
-  const formatAxisTick = (tick): string =>
-    format({ date: new Date(tick), formatString: tickFormat });
-
-  const displayAxisRight = !isNil(secondUnit);
-
-  const AxisBottom = isHorizontal ? Axis.AxisBottom : Axis.AxisLeft;
-  const AxisLeft = isHorizontal ? Axis.AxisLeft : Axis.AxisTop;
-  const AxisRight = isHorizontal ? Axis.AxisRight : Axis.AxisBottom;
-
-  return (
-    <g>
-      <AxisBottom
-        numTicks={xTickCount}
-        scale={xScale}
-        strokeWidth={!isNil(showBorder) && !showBorder ? 0 : 1}
-        tickFormat={formatAxisTick}
-        tickLabelProps={() => ({
-          ...axisLeft.tickLabelProps(),
-          dx: isHorizontal ? 16 : -4
-        })}
-        top={isHorizontal ? height - margin.bottom : 0}
-      />
-
-      {axisLeft.displayUnit && (
-        <UnitLabel
-          unit={axisLeft.unit}
-          units={allUnits}
-          x={isHorizontal ? -8 : width + 8}
-          y={isHorizontal ? 16 : -2}
-          onUnitChange={data.axisYLeft?.onUnitChange}
-        />
-      )}
-
-      <AxisLeft
-        numTicks={axisLeft?.numTicks}
-        scale={leftScale}
-        strokeWidth={!isNil(showBorder) && !showBorder ? 0 : 1}
-        tickFormat={axisLeft.tickFormat}
-        tickLabelProps={() => ({
-          ...axisLeft.tickLabelProps(),
-          angle: yAxisTickLabelRotation,
-          dx: isHorizontal ? -8 : 4,
-          dy: isHorizontal ? 4 : -6
-        })}
-        tickLength={2}
-      />
-
-      {displayAxisRight && (
-        <AxisRight
-          left={isHorizontal ? width : 0}
-          numTicks={axisRight?.numTicks}
-          scale={rightScale}
-          strokeWidth={!isNil(showBorder) && !showBorder ? 0 : 1}
-          tickFormat={axisRight.tickFormat}
-          tickLabelProps={() => ({
-            ...axisRight.tickLabelProps(),
-            angle: yAxisTickLabelRotation,
-            dx: isHorizontal ? 4 : -4,
-            dy: 4
-          })}
-          tickLength={2}
-          top={isHorizontal ? 0 : height - margin.bottom}
-        />
-      )}
-      {axisRight.displayUnit && (
-        <UnitLabel
-          unit={axisRight.unit}
-          units={allUnits}
-          x={width}
-          y={isHorizontal ? 16 : -(height + 8)}
-          onUnitChange={data.axisYRight?.onUnitChange}
-        />
-      )}
-    </g>
-  );
-};
-
-export default Axes;

package/src/Graph/common/Axes/models.ts

@@ -1,30 +0,0 @@
-import { ChartAxis } from '../../Chart/models';
-import { Line, TimeValue } from '../timeSeries/models';
-
-export interface LabelProps {
-  [x: string]: unknown;
-  textAnchor?: string;
-}
-
-export interface Axis {
-  displayUnit?: boolean;
-  onUnitChange?: (newUnit: string) => void;
-  unit?: string;
-}
-
-export interface AxisYRight extends Axis {
-  display?: boolean;
-}
-
-export interface AxisX {
-  xAxisTickFormat?: string;
-}
-export interface Data
-  extends Omit<ChartAxis, 'axisX' | 'axisYLeft' | 'axisYRight'> {
-  axisX?: AxisX;
-  axisYLeft?: Axis;
-  axisYRight?: AxisYRight;
-  baseAxis: number;
-  lines: Array<Line>;
-  timeSeries: Array<TimeValue>;
-}

package/src/Graph/common/Axes/useAxisY.ts

@@ -1,119 +0,0 @@
-import { useMemo } from 'react';
-
-import { Axis } from '@visx/visx';
-import { isNil } from 'ramda';
-
-import { useTheme } from '@mui/material';
-
-import { formatMetricValue, getUnits } from '../timeSeries';
-import { commonTickLabelProps } from '../utils';
-
-import { Data, LabelProps } from './models';
-
-interface AxisYData {
-  displayUnit: boolean;
-  numTicks?: number;
-  tickFormat: (value: unknown) => string;
-  tickLabelProps: Axis.TickLabelProps<unknown>;
-  unit: string;
-}
-
-interface AxisRightData extends AxisYData {
-  display: boolean;
-}
-
-interface AxisY {
-  axisLeft: AxisYData;
-  axisRight: AxisRightData;
-}
-
-interface Props {
-  data: Omit<Data, 'timeSeries'>;
-  graphHeight?: number;
-  graphWidth?: number;
-  isHorizontal: boolean;
-}
-
-const useAxisY = ({
-  data,
-  graphHeight,
-  graphWidth,
-  isHorizontal
-}: Props): AxisY => {
-  const theme = useTheme();
-
-  const { lines } = data;
-  const [firstUnit, secondUnit] = getUnits(lines);
-
-  const numTicks = isHorizontal
-    ? graphHeight && Math.ceil(graphHeight / 30)
-    : graphWidth && Math.ceil(graphWidth / 60);
-
-  const displayAxisRight = data?.axisYRight?.display || Boolean(secondUnit);
-  const displayUnitAxisRight =
-    data?.axisYRight?.displayUnit || Boolean(secondUnit);
-  const displayUnitAxisLeft = data?.axisYLeft?.displayUnit || true;
-  const leftUnit = useMemo(
-    () => data.axisYLeft?.unit ?? firstUnit,
-    [data.axisYLeft?.unit, firstUnit]
-  );
-  const rightUnit = useMemo(
-    () => data.axisYRight?.unit ?? secondUnit,
-    [data.axisYRight?.unit, secondUnit]
-  );
-
-  const formatTick =
-    ({ unit }) =>
-    (value): string => {
-      if (isNil(value)) {
-        return '';
-      }
-
-      return formatMetricValue({ base: data.baseAxis, unit, value }) as string;
-    };
-
-  const labelProps = ({
-    textAnchor,
-    ...rest
-  }: LabelProps): Record<string, unknown> => ({
-    ...commonTickLabelProps,
-    textAnchor,
-    ...rest
-  });
-
-  const tickLabelPropsAxisLeft = (): Record<string, unknown> =>
-    labelProps({
-      dx: theme.spacing(-1),
-      dy: theme.spacing(0.5),
-      textAnchor: 'end'
-    });
-
-  const tickLabelPropsAxisRight = (): Record<string, unknown> =>
-    labelProps({
-      dx: theme.spacing(0.5),
-      dy: theme.spacing(0.5),
-      textAnchor: 'start'
-    });
-
-  return {
-    axisLeft: {
-      displayUnit: displayUnitAxisLeft,
-      numTicks,
-      tickFormat: formatTick({
-        unit: leftUnit
-      }),
-      tickLabelProps: tickLabelPropsAxisLeft,
-      unit: leftUnit
-    },
-    axisRight: {
-      display: displayAxisRight,
-      displayUnit: displayUnitAxisRight,
-      numTicks,
-      tickFormat: formatTick({ unit: rightUnit }),
-      tickLabelProps: tickLabelPropsAxisRight,
-      unit: rightUnit
-    }
-  };
-};
-
-export default useAxisY;