@centreon/ui 24.4.13 → 24.4.14

package/src/Graph/Gauge/models.ts

@@ -1,20 +0,0 @@
-import { Thresholds } from '../common/models';
-import { Metric } from '../common/timeSeries/models';
-
-export interface GaugeProps {
-  adaptedMaxValue: number;
-  baseColor?: string;
-  height: number;
-  hideTooltip: () => void;
-  metric: Metric;
-  radius: number;
-  showTooltip: (args) => void;
-  thresholds: Thresholds;
-  width: number;
-}
-
-export enum ThresholdType {
-  Warning,
-  Error,
-  Success
-}

package/src/Graph/HeatMap/HeatMap.stories.tsx

@@ -1,105 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { makeStyles } from 'tss-react/mui';
-
-import { Box, Typography } from '@mui/material';
-
-import EllipsisTypography from '../../Typography/EllipsisTypography';
-
-import heatMapData from './HeatMapData.json';
-
-import { HeatMap } from '.';
-
-interface Data {
-  counter: number;
-  host: string;
-  service: string;
-}
-
-const meta: Meta<typeof HeatMap<Data>> = {
-  component: HeatMap
-};
-
-export default meta;
-type Story = StoryObj<typeof HeatMap<Data>>;
-
-const TileContent = ({
-  isSmallestSize,
-  data
-}: {
-  data: Data;
-  isSmallestSize: boolean;
-}): JSX.Element | false =>
-  !isSmallestSize && (
-    <Box
-      sx={{
-        alignItems: 'center',
-        color: 'common.black',
-        display: 'flex',
-        flexDirection: 'column',
-        width: '100%'
-      }}
-    >
-      <EllipsisTypography textAlign="center">{data.host}</EllipsisTypography>
-      <EllipsisTypography textAlign="center">{data.service}</EllipsisTypography>
-      <EllipsisTypography textAlign="center">{data.counter}</EllipsisTypography>
-    </Box>
-  );
-
-const TooltipContent = ({ data }: { data: Data }): JSX.Element => {
-  return (
-    <Box sx={{ backgroundColor: 'common.white', color: 'common.black' }}>
-      <Box
-        sx={{
-          backgroundColor: 'common.black',
-          color: 'common.white',
-          display: 'flex',
-          justifyContent: 'center',
-          py: 1,
-          width: '100%'
-        }}
-      >
-        <Typography>{data.host}</Typography>
-      </Box>
-      <Box sx={{ px: 1, textAlign: 'center' }}>
-        <Typography>{data.service}</Typography>
-        <Typography>{data.counter}</Typography>
-      </Box>
-    </Box>
-  );
-};
-
-const useStyles = makeStyles()((theme) => ({
-  arrow: {
-    color: theme.palette.common.black
-  }
-}));
-
-const Template = (args): JSX.Element => {
-  const { classes } = useStyles();
-
-  return <HeatMap {...args} arrowClassName={classes.arrow} />;
-};
-
-export const normal: Story = {
-  args: {
-    children: TileContent,
-    tiles: heatMapData
-  }
-};
-
-export const withTooltip: Story = {
-  args: {
-    children: TileContent,
-    tiles: heatMapData,
-    tooltipContent: TooltipContent
-  },
-  render: Template
-};
-
-export const tilesWithFixedSize: Story = {
-  args: {
-    children: TileContent,
-    tileSizeFixed: true,
-    tiles: heatMapData
-  }
-};

package/src/Graph/HeatMap/HeatMap.styles.tsx

@@ -1,29 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useHeatMapStyles = makeStyles()((theme) => ({
-  arrow: {
-    transform: 'transled3d(0px, 8px, 0px)'
-  },
-  heatMapTile: {
-    alignItems: 'center',
-    aspectRatio: '1 / 1',
-    borderRadius: theme.shape.borderRadius,
-    display: 'flex',
-    justifyContent: 'center',
-    width: '100%'
-  },
-  heatMapTileContent: {
-    height: `calc(100% - ${theme.spacing(1)})`,
-    width: `calc(100% - ${theme.spacing(1)})`
-  },
-  heatMapTooltip: {
-    backgroundColor: theme.palette.background.paper,
-    color: theme.palette.text.primary,
-    marginLeft: `${theme.spacing(1.25)} !important`,
-    padding: 0,
-    position: 'relative'
-  },
-  heatMapTooltipArrow: {
-    transform: `translate3d(0px, ${theme.spacing(1)}, 0px) !important`
-  }
-}));

package/src/Graph/HeatMap/HeatMap.tsx

@@ -1,12 +0,0 @@
-import { ParentSize } from '../..';
-
-import ResponsiveHeatMap from './ResponsiveHeatMap';
-import { HeatMapProps } from './model';
-
-const HeatMap = <TData,>(props: HeatMapProps<TData>): JSX.Element => (
-  <ParentSize>
-    {({ width }) => <ResponsiveHeatMap<TData> {...props} width={width} />}
-  </ParentSize>
-);
-
-export default HeatMap;

package/src/Graph/HeatMap/HeatMapData.json

@@ -1,137 +0,0 @@
-[
-  {
-    "id": "Orbaxter",
-    "backgroundColor": "#88B922",
-    "data": {
-      "host": "Server",
-      "service": "Service Counter",
-      "counter": 53
-    }
-  },
-  {
-    "id": "Interfind",
-    "backgroundColor": "#88B922",
-    "data": {
-      "host": "Server",
-      "service": "Service Counter",
-      "counter": 779
-    }
-  },
-  {
-    "id": "Ecratic",
-    "backgroundColor": "#E3E3E3",
-    "data": {
-      "host": "Server",
-      "service": "Service Counter",
-      "counter": 504
-    }
-  },
-  {
-    "id": "Earthwax",
-    "backgroundColor": "#88B922",
-    "data": {
-      "host": "Server",
-      "service": "Service Counter",
-      "counter": 374
-    }
-  },
-  {
-    "id": "Cytrak",
-    "backgroundColor": "#FF6666",
-    "data": {
-      "host": "Server",
-      "service": "Service Counter",
-      "counter": 957
-    }
-  },
-  {
-    "id": "Exiand",
-    "backgroundColor": "#1EBEB3",
-    "data": {
-      "host": "Server",
-      "service": "Service Counter",
-      "counter": 281
-    }
-  },
-  {
-    "id": "Ginkogene",
-    "backgroundColor": "#FF6666",
-    "data": {
-      "host": "Server",
-      "service": "Service Counter",
-      "counter": 472
-    }
-  },
-  {
-    "id": "Quailcom",
-    "backgroundColor": "#88B922",
-    "data": {
-      "host": "Server",
-      "service": "Service Counter",
-      "counter": 770
-    }
-  },
-  {
-    "id": "Cormoran",
-    "backgroundColor": "#FF6666",
-    "data": {
-      "host": "Server",
-      "service": "Service Counter",
-      "counter": 908
-    }
-  },
-  {
-    "id": "Emergent",
-    "backgroundColor": "#1EBEB3",
-    "data": {
-      "host": "Server",
-      "service": "Service Counter",
-      "counter": 969
-    }
-  },
-  {
-    "id": "Limozen",
-    "backgroundColor": "#E3E3E3",
-    "data": {
-      "host": "Server",
-      "service": "Service Counter",
-      "counter": 33
-    }
-  },
-  {
-    "id": "Gogol",
-    "backgroundColor": "#1EBEB3",
-    "data": {
-      "host": "Server",
-      "service": "Service Counter",
-      "counter": 870
-    }
-  },
-  {
-    "id": "Luxuria",
-    "backgroundColor": "#FD9B27",
-    "data": {
-      "host": "Server",
-      "service": "Service Counter",
-      "counter": 270
-    }
-  },
-  {
-    "id": "Fossiel",
-    "backgroundColor": "#1EBEB3",
-    "data": {
-      "host": "Server",
-      "service": "Service Counter",
-      "counter": 955
-    }
-  },
-  {
-    "id": "Hawkster",
-    "backgroundColor": "#88B922",
-    "data": {
-      "host": "Server",
-      "service": "Service Counter",
-      "counter": 28
-    }
-  }
-]

package/src/Graph/HeatMap/ResponsiveHeatMap.tsx

@@ -1,98 +0,0 @@
-import { useMemo } from 'react';
-
-import { scaleLinear } from '@visx/scale';
-import { T, equals, gt, lt } from 'ramda';
-
-import { Box } from '@mui/material';
-
-import { Tooltip } from '../../components';
-
-import { HeatMapProps } from './model';
-import { useHeatMapStyles } from './HeatMap.styles';
-
-const gap = 8;
-const maxTileSize = 120;
-const smallestTileSize = 44;
-
-const ResponsiveHeatMap = <TData,>({
-  width,
-  children,
-  tiles,
-  arrowClassName,
-  tooltipContent,
-  tileSizeFixed,
-  displayTooltipCondition = T
-}: HeatMapProps<TData> & { width: number }): JSX.Element | null => {
-  const { classes, cx } = useHeatMapStyles();
-
-  const tileSize = useMemo(() => {
-    const scaleWidth = scaleLinear({
-      clamp: true,
-      domain: [680, 1056],
-      range: [76, maxTileSize]
-    });
-    const tileWidth = scaleWidth(width);
-
-    const tilesLength = tiles.length;
-
-    const maxTotalTilesWidth =
-      tilesLength * maxTileSize + (tilesLength - 1) * gap;
-    const theoricalTotalTilesWidth =
-      tilesLength * tileWidth + (tilesLength - 1) * gap;
-
-    if (lt(width, 680) && gt(maxTotalTilesWidth, width)) {
-      return smallestTileSize;
-    }
-
-    if (lt(theoricalTotalTilesWidth, width)) {
-      return maxTileSize;
-    }
-
-    return tileSizeFixed ? maxTileSize : tileWidth;
-  }, [width, tiles]);
-
-  const isSmallestSize = equals(tileSize, smallestTileSize);
-
-  if (equals(width, 0)) {
-    return null;
-  }
-
-  return (
-    <Box
-      sx={{
-        display: 'grid',
-        gap: 1,
-        gridTemplateColumns: `repeat(auto-fit, ${tileSize}px)`
-      }}
-    >
-      {tiles.map(({ backgroundColor, id, data }) => (
-        <Box className={classes.heatMapTile} key={id} sx={{ backgroundColor }}>
-          <Tooltip
-            hasCaret
-            classes={{
-              arrow: cx(classes.heatMapTooltipArrow, arrowClassName),
-              tooltip: classes.heatMapTooltip
-            }}
-            followCursor={false}
-            label={
-              displayTooltipCondition?.(data) &&
-              tooltipContent?.({
-                backgroundColor,
-                data,
-                id,
-                isSmallestSize
-              })
-            }
-            position="right-start"
-          >
-            <div className={classes.heatMapTileContent}>
-              {children({ backgroundColor, data, id, isSmallestSize })}
-            </div>
-          </Tooltip>
-        </Box>
-      ))}
-    </Box>
-  );
-};
-
-export default ResponsiveHeatMap;

package/src/Graph/HeatMap/index.ts

@@ -1 +0,0 @@
-export { default as HeatMap } from './HeatMap';

package/src/Graph/HeatMap/model.ts

@@ -1,33 +0,0 @@
-import { ReactElement } from 'react';
-
-interface Tile<TData> {
-  backgroundColor: string;
-  data: TData;
-  id: string;
-}
-
-interface ChildrenProps<TData> {
-  backgroundColor: string;
-  data: TData;
-  id: string;
-  isSmallestSize: boolean;
-}
-
-export interface HeatMapProps<TData> {
-  arrowClassName?: string;
-  children: ({
-    backgroundColor,
-    id,
-    data,
-    isSmallestSize
-  }: ChildrenProps<TData>) => ReactElement | boolean | null;
-  displayTooltipCondition?: (data: TData) => boolean;
-  tileSizeFixed?: boolean;
-  tiles: Array<Tile<TData>>;
-  tooltipContent?: ({
-    backgroundColor,
-    id,
-    data,
-    isSmallestSize
-  }: ChildrenProps<TData>) => ReactElement | boolean | null;
-}

package/src/Graph/LineChart/BasicComponents/Axes/UnitLabel.tsx

@@ -1,20 +0,0 @@
-import { commonTickLabelProps } from '../../common';
-
-interface UnitLabelProps {
-  unit: string;
-  x: number;
-  y?: number;
-}
-
-const UnitLabel = ({ x, y = 16, unit }: UnitLabelProps): JSX.Element => (
-  <text
-    fontFamily={commonTickLabelProps.fontFamily}
-    fontSize={commonTickLabelProps.fontSize}
-    x={x}
-    y={-y}
-  >
-    {unit}
-  </text>
-);
-
-export default UnitLabel;

package/src/Graph/LineChart/BasicComponents/Axes/index.tsx

@@ -1,88 +0,0 @@
-import { Axis } from '@visx/visx';
-import { ScaleLinear } from 'd3-scale';
-import { isNil } from 'ramda';
-
-import { useLocaleDateTimeFormat } from '@centreon/ui';
-
-import { getXAxisTickFormat } from '../../helpers';
-import { GraphInterval } from '../../models';
-import { getUnits } from '../../../common/timeSeries';
-
-import UnitLabel from './UnitLabel';
-import { Data } from './models';
-import useAxisY from './useAxisY';
-
-interface Props {
-  data: Data;
-  graphInterval: GraphInterval;
-  height: number;
-  leftScale: ScaleLinear<number, number>;
-  rightScale: ScaleLinear<number, number>;
-  width: number;
-  xScale: ScaleLinear<number, number>;
-}
-
-const Axes = ({
-  height,
-  width,
-  data,
-  rightScale,
-  leftScale,
-  xScale,
-  graphInterval
-}: Props): JSX.Element => {
-  const { format } = useLocaleDateTimeFormat();
-  const { lines } = data;
-
-  const { axisLeft, axisRight } = useAxisY({ data, graphHeight: height });
-
-  const [firstUnit, secondUnit, thirdUnit] = getUnits(lines);
-
-  const xTickCount = Math.min(Math.ceil(width / 82), 12);
-
-  const tickFormat =
-    data?.axisX?.xAxisTickFormat ?? getXAxisTickFormat(graphInterval);
-
-  const formatAxisTick = (tick): string =>
-    format({ date: new Date(tick), formatString: tickFormat });
-
-  const hasMoreThanTwoUnits = !isNil(thirdUnit);
-  const displayAxisRight = !isNil(secondUnit) && !hasMoreThanTwoUnits;
-
-  return (
-    <g>
-      <Axis.AxisBottom
-        numTicks={xTickCount}
-        scale={xScale}
-        tickFormat={formatAxisTick}
-        top={height - 5}
-      />
-
-      {axisLeft.displayUnit && <UnitLabel unit={firstUnit} x={-4} />}
-
-      <Axis.AxisLeft
-        numTicks={axisLeft?.numTicks}
-        orientation="left"
-        scale={leftScale}
-        tickFormat={axisLeft.tickFormat}
-        tickLabelProps={axisLeft.tickLabelProps}
-        tickLength={2}
-      />
-
-      {displayAxisRight && (
-        <Axis.AxisRight
-          left={width}
-          numTicks={axisRight?.numTicks}
-          orientation="right"
-          scale={rightScale}
-          tickFormat={axisRight.tickFormat}
-          tickLabelProps={axisRight.tickLabelProps}
-          tickLength={2}
-        />
-      )}
-      {axisRight.displayUnit && <UnitLabel unit={secondUnit} x={width} />}
-    </g>
-  );
-};
-
-export default Axes;

package/src/Graph/LineChart/BasicComponents/Axes/models.ts

@@ -1,26 +0,0 @@
-import { Line, TimeValue } from '../../../common/timeSeries/models';
-
-export interface LabelProps {
-  [x: string]: unknown;
-  textAnchor?: string;
-}
-
-export interface Axis {
-  displayUnit?: boolean;
-}
-
-export interface AxisYRight extends Axis {
-  display?: boolean;
-}
-
-export interface AxisX {
-  xAxisTickFormat?: string;
-}
-export interface Data {
-  axisX?: AxisX;
-  axisYLeft?: Axis;
-  axisYRight?: AxisYRight;
-  baseAxis: number;
-  lines: Array<Line>;
-  timeSeries: Array<TimeValue>;
-}

package/src/Graph/LineChart/BasicComponents/Axes/useAxisY.ts

@@ -1,100 +0,0 @@
-import { isNil } from 'ramda';
-import { Axis } from '@visx/visx';
-
-import { useTheme } from '@mui/material';
-
-import { formatMetricValue, getUnits } from '../../../common/timeSeries';
-import { commonTickLabelProps } from '../../common';
-
-import { Data, LabelProps } from './models';
-
-interface AxisYData {
-  displayUnit: boolean;
-  numTicks?: number;
-  tickFormat: (value: unknown) => string;
-  tickLabelProps: Axis.TickLabelProps<unknown>;
-}
-
-interface AxisRightData extends AxisYData {
-  display: boolean;
-}
-
-interface AxisY {
-  axisLeft: AxisYData;
-  axisRight: AxisRightData;
-}
-
-interface Props {
-  data: Omit<Data, 'timeSeries'>;
-  graphHeight?: number;
-}
-
-const useAxisY = ({ data, graphHeight }: Props): AxisY => {
-  const theme = useTheme();
-
-  const { lines } = data;
-  const [firstUnit, secondUnit, thirdUnit] = getUnits(lines);
-
-  const numTicks = graphHeight && Math.ceil(graphHeight / 30);
-
-  const hasMoreThanTwoUnits = !isNil(thirdUnit);
-  const hasTwoUnits = !isNil(secondUnit) && !hasMoreThanTwoUnits;
-
-  const displayAxisRight = data?.axisYRight?.display ?? hasTwoUnits;
-  const displayUnitAxisRight = data?.axisYRight?.displayUnit ?? hasTwoUnits;
-  const displayUnitAxisLeft =
-    data?.axisYLeft?.displayUnit ?? !hasMoreThanTwoUnits;
-
-  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: hasMoreThanTwoUnits ? '' : firstUnit
-      }),
-      tickLabelProps: tickLabelPropsAxisLeft
-    },
-    axisRight: {
-      display: displayAxisRight,
-      displayUnit: displayUnitAxisRight,
-      numTicks,
-      tickFormat: formatTick({ unit: secondUnit }),
-      tickLabelProps: tickLabelPropsAxisRight
-    }
-  };
-};
-
-export default useAxisY;

package/src/Graph/LineChart/BasicComponents/Grids/index.tsx

@@ -1,20 +0,0 @@
-import { Grid } from '@visx/visx';
-import { ScaleLinear } from 'd3-scale';
-
-interface Props {
-  height: number;
-  leftScale: ScaleLinear<number, number>;
-  width: number;
-  xScale: ScaleLinear<number, number>;
-}
-
-const Grids = ({ height, width, leftScale, xScale }: Props): JSX.Element => {
-  return (
-    <g>
-      <Grid.GridRows height={height} scale={leftScale} width={width} />
-      <Grid.GridColumns height={height} scale={xScale} width={width} />
-    </g>
-  );
-};
-
-export default Grids;