@centreon/ui 23.10.114 → 23.10.115

package/src/Graph/Gauge/PieData.tsx

@@ -1,63 +0,0 @@
-import { scaleOrdinal } from '@visx/scale';
-import { Pie } from '@visx/shape';
-import { identity } from 'ramda';
-
-import { useTheme } from '@mui/material';
-
-import { getColorFromDataAndTresholds } from '../common/utils';
-
-import { thresholdThickness } from './Thresholds';
-import AnimatedPie from './AnimatedPie';
-import { GaugeProps } from './models';
-
-const dataThickness = 45;
-
-const PieData = ({
-  metric,
-  adaptedMaxValue,
-  thresholds,
-  radius,
-  baseColor
-}: Omit<
-  GaugeProps,
-  'width' | 'height' | 'showTooltip' | 'hideTooltip' | 'thresholdTooltipLabels'
->): JSX.Element => {
-  const theme = useTheme();
-
-  const pieData = [metric.data[0], adaptedMaxValue - metric.data[0]];
-  const pieColor = getColorFromDataAndTresholds({
-    baseColor,
-    data: metric.data[0],
-    theme,
-    thresholds
-  });
-
-  const getDataColor = scaleOrdinal({
-    domain: pieData,
-    range: [pieColor, 'transparent']
-  });
-
-  return (
-    <Pie
-      data={pieData}
-      endAngle={-Math.PI / 2}
-      innerRadius={radius - dataThickness}
-      outerRadius={radius - thresholdThickness * 1.3}
-      pieSortValues={() => -1}
-      pieValue={identity}
-      startAngle={Math.PI / 2}
-    >
-      {(pie) => (
-        <AnimatedPie<number>
-          {...pie}
-          animate
-          getColor={(arc) => getDataColor(arc.data)}
-          getKey={(arc) => `${arc.data}`}
-          thresholds={thresholds}
-        />
-      )}
-    </Pie>
-  );
-};
-
-export default PieData;

package/src/Graph/Gauge/ResponsiveGauge.tsx

@@ -1,148 +0,0 @@
-import { useRef } from 'react';
-
-import { Group } from '@visx/group';
-import { flatten, head, pluck } from 'ramda';
-import { Tooltip } from '@visx/visx';
-
-import { Box, Fade, useTheme } from '@mui/material';
-
-import { Metric } from '../common/timeSeries/models';
-import { formatMetricValueWithUnit } from '../common/timeSeries';
-import { getColorFromDataAndTresholds } from '../common/utils';
-import { margins } from '../common/margins';
-
-import Thresholds from './Thresholds';
-import PieData from './PieData';
-import { GaugeProps } from './models';
-
-interface Props extends Pick<GaugeProps, 'thresholds' | 'baseColor'> {
-  displayAsRaw?: boolean;
-  height: number;
-  metric: Metric;
-  width: number;
-}
-
-const baseStyles = {
-  ...Tooltip.defaultStyles,
-  textAlign: 'center'
-};
-
-const ResponsiveGauge = ({
-  width,
-  height,
-  thresholds,
-  metric,
-  displayAsRaw,
-  baseColor
-}: Props): JSX.Element => {
-  const svgRef = useRef<SVGSVGElement>(null);
-
-  const theme = useTheme();
-
-  const {
-    showTooltip,
-    hideTooltip,
-    tooltipOpen,
-    tooltipLeft,
-    tooltipTop,
-    tooltipData
-  } = Tooltip.useTooltip();
-
-  const innerWidth = width - margins.left - margins.right;
-  const innerHeight = height - margins.top - margins.bottom;
-  const centerY = innerHeight / 2;
-  const centerX = innerWidth / 2;
-  const radius = Math.min(innerWidth, innerHeight) / 2;
-  const thresholdValues = thresholds.enabled
-    ? flatten([
-        pluck('value', thresholds.warning),
-        pluck('value', thresholds.critical)
-      ])
-    : [0];
-  const adaptedMaxValue = Math.max(
-    metric.maximum_value || 0,
-    Math.max(...thresholdValues) * 1.1,
-    head(metric.data) as number
-  );
-
-  const pieColor = getColorFromDataAndTresholds({
-    baseColor,
-    data: metric.data[0],
-    theme,
-    thresholds
-  });
-
-  const svgTop = svgRef.current?.getBoundingClientRect().top || 0;
-  const svgLeft = svgRef.current?.getBoundingClientRect().left || 0;
-
-  const isSmallWidget = height < 240;
-
-  const gaugeValue = formatMetricValueWithUnit({
-    base: 1000,
-    isRaw: displayAsRaw,
-    unit: metric.unit,
-    value: metric.data[0]
-  });
-
-  return (
-    <Box
-      sx={{
-        height: '100%',
-        overflow: 'hidden',
-        position: 'relative',
-        width: '100%'
-      }}
-    >
-      <svg height={height} ref={svgRef} width={width}>
-        <Group left={centerX + margins.left} top={centerY + height / 6}>
-          <Thresholds
-            adaptedMaxValue={adaptedMaxValue}
-            hideTooltip={hideTooltip}
-            metric={metric}
-            radius={radius}
-            showTooltip={showTooltip}
-            thresholds={thresholds}
-          />
-          <PieData
-            adaptedMaxValue={adaptedMaxValue}
-            baseColor={baseColor}
-            metric={metric}
-            radius={radius}
-            thresholds={thresholds}
-          />
-        </Group>
-        <text
-          dominantBaseline="middle"
-          style={{
-            fill: pieColor,
-            ...theme.typography.h3,
-            fontSize:
-              Math.min(width, height) / 7 -
-              (isSmallWidget ? 0 : (gaugeValue?.length || 0) * 2)
-          }}
-          textAnchor="middle"
-          x="50%"
-          y={isSmallWidget ? 130 : height - height / 2.3}
-        >
-          {gaugeValue}
-        </text>
-      </svg>
-      <Fade in={tooltipOpen && thresholds.enabled}>
-        <Tooltip.Tooltip
-          left={(tooltipLeft || 0) - svgLeft}
-          style={{
-            ...baseStyles,
-            backgroundColor: theme.palette.background.paper,
-            color: theme.palette.text.primary,
-            transform: 'translate(-50%, -24px)'
-          }}
-          top={(tooltipTop || 0) - svgTop + 20}
-        >
-          {tooltipData}
-        </Tooltip.Tooltip>
-      </Fade>
-    </Box>
-  );
-};
-
-export default ResponsiveGauge;

package/src/Graph/Gauge/Thresholds.tsx

@@ -1,117 +0,0 @@
-import { scaleOrdinal } from '@visx/scale';
-import { Pie } from '@visx/shape';
-import { equals, pluck } from 'ramda';
-
-import { useTheme } from '@mui/material';
-
-import AnimatedPie from './AnimatedPie';
-import { GaugeProps } from './models';
-
-export const thresholdThickness = 12;
-
-const Thresholds = ({
-  thresholds,
-  radius,
-  adaptedMaxValue,
-  showTooltip,
-  hideTooltip,
-  metric
-}: Omit<GaugeProps, 'width' | 'height'>): JSX.Element | null => {
-  const theme = useTheme();
-
-  const criticalThresholdValues = pluck('value', thresholds.critical);
-  const warningThresholdValues = pluck('value', thresholds.warning);
-
-  const isCriticalLowerThanWarning =
-    criticalThresholdValues[0] < warningThresholdValues[0];
-
-  const criticalThreshold = isCriticalLowerThanWarning
-    ? [0, ...criticalThresholdValues, adaptedMaxValue]
-    : [...criticalThresholdValues, adaptedMaxValue];
-  const criticalThresholdArc = criticalThreshold.map((value, index) => {
-    return {
-      name: equals(1, index) ? 'critical' : `transparent-${index}-critical`,
-      value: value - (criticalThreshold[index - 1] || 0)
-    };
-  });
-  const criticalThresholdScaleOrdinal = scaleOrdinal({
-    domain: pluck('name', criticalThresholdArc),
-    range: ['transparent', theme.palette.error.main, 'transparent']
-  });
-
-  const warningThreshold = isCriticalLowerThanWarning
-    ? [0, ...warningThresholdValues, adaptedMaxValue]
-    : [...warningThresholdValues, adaptedMaxValue];
-  const warningThresholdArc = warningThreshold.map((value, index) => {
-    return {
-      name: equals(1, index) ? 'warning' : `transparent-${index}-warning`,
-      value: value - (warningThreshold[index - 1] || 0)
-    };
-  });
-  const warningThresholdScaleOrdinal = scaleOrdinal({
-    domain: pluck('name', warningThresholdArc),
-    range: ['transparent', theme.palette.warning.main, 'transparent']
-  });
-
-  const successThresholdArc = [adaptedMaxValue].map((value) => {
-    return {
-      name: 'success',
-      value
-    };
-  });
-  const successThresholdScaleOrdinal = scaleOrdinal({
-    domain: pluck('name', successThresholdArc),
-    range: [theme.palette.success.main]
-  });
-
-  if (!thresholds.enabled) {
-    return null;
-  }
-
-  const arcs = [
-    {
-      thresholdArc: successThresholdArc,
-      thresholdScaleOrdinal: successThresholdScaleOrdinal
-    },
-    {
-      thresholdArc: warningThresholdArc,
-      thresholdScaleOrdinal: warningThresholdScaleOrdinal
-    },
-    {
-      thresholdArc: criticalThresholdArc,
-      thresholdScaleOrdinal: criticalThresholdScaleOrdinal
-    }
-  ];
-
-  return (
-    <>
-      {arcs.map(({ thresholdArc, thresholdScaleOrdinal }) => (
-        <Pie
-          data={thresholdArc}
-          endAngle={-Math.PI / 2}
-          innerRadius={radius - thresholdThickness}
-          key={`arc-${thresholdArc[0].name}`}
-          outerRadius={radius}
-          pieSortValues={() => -1}
-          pieValue={(d) => d.value}
-          startAngle={Math.PI / 2}
-        >
-          {(pie) => (
-            <AnimatedPie<{ name: string; value: number }>
-              {...pie}
-              animate
-              getColor={(arc) => thresholdScaleOrdinal(arc.data.name)}
-              getKey={(arc) => `${arc.data.name}_${arc.data.value}`}
-              hideTooltip={hideTooltip}
-              metric={metric}
-              showTooltip={showTooltip}
-              thresholds={thresholds}
-            />
-          )}
-        </Pie>
-      ))}
-    </>
-  );
-};
-
-export default Thresholds;

package/src/Graph/Gauge/index.ts

@@ -1 +0,0 @@
-export { Gauge } from './Gauge';

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/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;

package/src/Graph/LineChart/BasicComponents/Lines/RegularLines/index.tsx

@@ -1,99 +0,0 @@
-import { memo } from 'react';
-
-import { Shape } from '@visx/visx';
-import { ScaleLinear, ScaleTime } from 'd3-scale';
-import { equals, isNil, prop } from 'ramda';
-
-import { getTime } from '../../../../common/timeSeries';
-import { TimeValue } from '../../../../common/timeSeries/models';
-import { getFillColor } from '../../../common';
-import { CurveType } from '../models';
-
-interface Props {
-  areaColor: string;
-  curve: CurveType;
-  filled: boolean;
-  graphHeight: number;
-  highlight?: boolean;
-  lineColor: string;
-  metric_id: number;
-  shapeAreaClosed?: Record<string, unknown>;
-  shapeLinePath?: Record<string, unknown>;
-  timeSeries: Array<TimeValue>;
-  transparency: number;
-  unit: string;
-  xScale: ScaleTime<number, number>;
-  yScale: ScaleLinear<number, number>;
-}
-
-const RegularLine = ({
-  filled,
-  timeSeries,
-  highlight,
-  metric_id,
-  lineColor,
-  unit,
-  yScale,
-  xScale,
-  areaColor,
-  transparency,
-  graphHeight,
-  curve
-}: Props): JSX.Element => {
-  const props = {
-    curve,
-    data: timeSeries,
-    defined: (value): boolean => !isNil(value[metric_id]),
-    opacity: 1,
-    stroke: lineColor,
-    strokeWidth: !highlight ? 2 : 3,
-    unit,
-    x: (timeValue): number => xScale(getTime(timeValue)) as number,
-    y: (timeValue): number => yScale(prop(metric_id, timeValue)) ?? null
-  };
-
-  if (filled) {
-    return (
-      <Shape.AreaClosed<TimeValue>
-        fill={getFillColor({ areaColor, transparency })}
-        fillRule="nonzero"
-        key={metric_id}
-        y0={Math.min(yScale(0), graphHeight)}
-        yScale={yScale}
-        {...props}
-      />
-    );
-  }
-
-  return <Shape.LinePath<TimeValue> {...props} />;
-};
-
-export default memo(RegularLine, (prevProps, nextProps) => {
-  const {
-    timeSeries: prevTimeSeries,
-    graphHeight: prevGraphHeight,
-    highlight: prevHighlight,
-    xScale: prevXScale,
-    yScale: prevYScale
-  } = prevProps;
-  const {
-    timeSeries: nextTimeSeries,
-    graphHeight: nextGraphHeight,
-    highlight: nextHighlight,
-    xScale: nextXScale,
-    yScale: nextYScale
-  } = nextProps;
-
-  const prevXScaleRange = prevXScale.range();
-  const nextXScaleRange = nextXScale.range();
-  const prevYScaleDomain = prevYScale.domain();
-  const nextYScaleDomain = nextYScale.domain();
-
-  return (
-    equals(prevTimeSeries, nextTimeSeries) &&
-    equals(prevGraphHeight, nextGraphHeight) &&
-    equals(prevHighlight, nextHighlight) &&
-    equals(prevXScaleRange, nextXScaleRange) &&
-    equals(prevYScaleDomain, nextYScaleDomain)
-  );
-});