@centreon/ui 24.11.14 → 24.11.21

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

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

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

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

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

@@ -0,0 +1,136 @@
+import { Axis } from '@visx/visx';
+import { ScaleLinear } from 'd3-scale';
+import { equals, head, isNil, last } 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 domain = xScale.domain();
+
+  const start = head(domain);
+  const end = last(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

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

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