@centreon/ui 24.11.13 → 24.11.14

package/src/Graph/SingleBar/Thresholds.tsx

@@ -1,58 +0,0 @@
-import { Thresholds as ThresholdsModel } from '../common/models';
-
-import { ThresholdLine } from './ThresholdLine';
-
-export const groupMargin = 25;
-
-interface Props {
-  barHeight: number;
-  hideTooltip: () => void;
-  isSmall: boolean;
-  showTooltip: (args) => void;
-  size: 'small' | 'medium';
-  thresholds: ThresholdsModel;
-  xScale: (value: number) => number;
-}
-
-const Thresholds = ({
-  xScale,
-  thresholds,
-  showTooltip,
-  hideTooltip,
-  size,
-  barHeight,
-  isSmall
-}: Props): JSX.Element => (
-  <>
-    {thresholds.warning.map(({ value, label }) => (
-      <ThresholdLine
-        barHeight={barHeight}
-        hideTooltip={hideTooltip}
-        isSmall={isSmall}
-        key={`warning-${value.toString()}`}
-        label={label}
-        showTooltip={showTooltip}
-        size={size}
-        thresholdType="warning"
-        value={value}
-        xScale={xScale}
-      />
-    ))}
-    {thresholds.critical.map(({ value, label }) => (
-      <ThresholdLine
-        barHeight={barHeight}
-        hideTooltip={hideTooltip}
-        isSmall={isSmall}
-        key={`critical-${value.toString()}`}
-        label={label}
-        showTooltip={showTooltip}
-        size={size}
-        thresholdType="critical"
-        value={value}
-        xScale={xScale}
-      />
-    ))}
-  </>
-);
-
-export default Thresholds;

package/src/Graph/SingleBar/index.ts

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

package/src/Graph/SingleBar/models.ts

@@ -1,10 +0,0 @@
-import { LineChartData, Thresholds } from '../common/models';
-
-export interface SingleBarProps {
-  baseColor?: string;
-  data?: LineChartData;
-  displayAsRaw?: boolean;
-  showLabels?: boolean;
-  size?: 'medium' | 'small';
-  thresholds: Thresholds;
-}

package/src/Graph/Text/Text.cypress.spec.tsx

@@ -1,101 +0,0 @@
-import {
-  criticalThresholds,
-  rangedThresholds,
-  successThresholds,
-  warningThresholds
-} from '../common/testUtils';
-import dataLastWeek from '../mockedData/lastWeek.json';
-
-import { Props, Text } from './Text';
-
-const initialize = (
-  args: Omit<Props, 'data' | 'labels' | 'baseColor'>
-): void => {
-  cy.mount({
-    Component: (
-      <div style={{ height: '100vh', width: '100vw' }}>
-        <Text
-          baseColor="#000"
-          data={dataLastWeek}
-          labels={{
-            critical: 'Critical',
-            warning: 'Warning'
-          }}
-          {...args}
-        />
-      </div>
-    )
-  });
-};
-
-describe('Text', () => {
-  it('displays the text as success when corresponding thresholds are set', () => {
-    initialize({ thresholds: successThresholds });
-
-    cy.contains('0.41 s').should('have.css', 'color', 'rgb(136, 185, 34)');
-    cy.contains('Warning: 0.5 s').should('be.visible');
-    cy.contains('Critical: 1.5 s').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the text as warning when corresponding thresholds are set', () => {
-    initialize({ thresholds: warningThresholds });
-
-    cy.contains('0.41 s').should('have.css', 'color', 'rgb(253, 155, 39)');
-    cy.contains('Warning: 0.4 s').should('be.visible');
-    cy.contains('Critical: 1.5 s').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the text as critical when corresponding thresholds are set', () => {
-    initialize({ thresholds: criticalThresholds });
-
-    cy.contains('0.41 s').should('have.css', 'color', 'rgb(255, 74, 74)');
-    cy.contains('Warning: 0.2 s').should('be.visible');
-    cy.contains('Critical: 0.3 s').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays ranged thresholds', () => {
-    initialize({ thresholds: rangedThresholds });
-
-    cy.contains('Warning: 0.13 s - 0.5 s').should('be.visible');
-    cy.contains('Critical: 0.55 s - 0.65 s').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the value as raw when the prop is set', () => {
-    initialize({ displayAsRaw: true, thresholds: successThresholds });
-
-    cy.contains('0.40663333333 s').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('does not display the text', () => {
-    initialize({ data: undefined, thresholds: successThresholds });
-
-    cy.contains('0.41 s').should('not.exist');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays text with default values when the data is empty', () => {
-    initialize({
-      data: {
-        global: {},
-        metrics: [],
-        times: []
-      },
-      thresholds: successThresholds
-    });
-
-    cy.contains('0').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-});

package/src/Graph/Text/Text.stories.tsx

@@ -1,155 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import dataLastWeek from '../mockedData/lastWeek.json';
-
-import { Text } from '.';
-
-const meta: Meta<typeof Text> = {
-  component: Text
-};
-
-export default meta;
-type Story = StoryObj<typeof Text>;
-
-const Template = (props): JSX.Element => (
-  <div style={{ height: '500px', width: '500px' }}>
-    <Text {...props} />
-  </div>
-);
-
-const SmallTemplate = (props): JSX.Element => (
-  <div style={{ height: '100px', width: '200px' }}>
-    <Text {...props} />
-  </div>
-);
-
-export const success: Story = {
-  args: {
-    data: dataLastWeek,
-    labels: {
-      critical: 'Critical',
-      warning: 'Warning'
-    },
-    thresholds: {
-      critical: [
-        {
-          label: 'Critical',
-          value: 1.5
-        }
-      ],
-      enabled: true,
-      warning: [
-        {
-          label: 'Warning',
-          value: 0.5
-        }
-      ]
-    }
-  },
-  render: Template
-};
-
-export const warning: Story = {
-  args: {
-    data: dataLastWeek,
-    labels: {
-      critical: 'Critical',
-      warning: 'Warning'
-    },
-    thresholds: {
-      critical: [
-        {
-          label: 'Critical',
-          value: 1.5
-        }
-      ],
-      enabled: true,
-      warning: [
-        {
-          label: 'Warning',
-          value: 0.4
-        }
-      ]
-    }
-  },
-  render: Template
-};
-
-export const critical: Story = {
-  args: {
-    data: dataLastWeek,
-    labels: {
-      critical: 'Critical',
-      warning: 'Warning'
-    },
-    thresholds: {
-      critical: [
-        {
-          label: 'Critical',
-          value: 0.3
-        }
-      ],
-      enabled: true,
-      warning: [
-        {
-          label: 'Warning',
-          value: 0.2
-        }
-      ]
-    }
-  },
-  render: Template
-};
-
-export const rawValue: Story = {
-  args: {
-    data: dataLastWeek,
-    displayAsRaw: true,
-    labels: {
-      critical: 'Critical',
-      warning: 'Warning'
-    },
-    thresholds: {
-      critical: [
-        {
-          label: 'Critical',
-          value: 1.5
-        }
-      ],
-      enabled: true,
-      warning: [
-        {
-          label: 'Warning',
-          value: 0.5
-        }
-      ]
-    }
-  },
-  render: Template
-};
-
-export const smallDisplay: Story = {
-  args: {
-    data: dataLastWeek,
-    labels: {
-      critical: 'Critical',
-      warning: 'Warning'
-    },
-    thresholds: {
-      critical: [
-        {
-          label: 'Critical',
-          value: 1.5
-        }
-      ],
-      enabled: true,
-      warning: [
-        {
-          label: 'Warning',
-          value: 0.5
-        }
-      ]
-    }
-  },
-  render: SmallTemplate
-};

package/src/Graph/Text/Text.styles.ts

@@ -1,27 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useTextStyles = makeStyles()((theme) => ({
-  critical: {
-    color: theme.palette.error.main
-  },
-  graphText: {
-    alignItems: 'center',
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(1),
-    justifyContent: 'center'
-  },
-  threshold: {
-    textAlign: 'center'
-  },
-  thresholds: {
-    display: 'flex',
-    flexDirection: 'row',
-    gap: theme.spacing(5),
-    whiteSpace: 'nowrap',
-    width: '100%'
-  },
-  warning: {
-    color: theme.palette.warning.main
-  }
-}));

package/src/Graph/Text/Text.tsx

@@ -1,100 +0,0 @@
-import { isNil } from 'ramda';
-
-import { useTheme } from '@mui/material';
-
-import FluidTypography from '../../Typography/FluidTypography';
-import { LineChartData, Thresholds } from '../common/models';
-import {
-  formatMetricValueWithUnit,
-  getMetricWithLatestData
-} from '../common/timeSeries';
-import { getColorFromDataAndTresholds } from '../common/utils';
-
-import { useTextStyles } from './Text.styles';
-
-export interface Props {
-  baseColor?: string;
-  data?: LineChartData;
-  displayAsRaw?: boolean;
-  labels: {
-    critical: string;
-    warning: string;
-  };
-  thresholds: Thresholds;
-}
-
-export const Text = ({
-  thresholds,
-  data,
-  displayAsRaw,
-  labels,
-  baseColor
-}: Props): JSX.Element | null => {
-  const theme = useTheme();
-  const { classes, cx } = useTextStyles();
-
-  if (isNil(data)) {
-    return null;
-  }
-
-  const metric = getMetricWithLatestData(data);
-  const metricValue = metric?.data[0] ?? 0;
-  const metricUnit = metric?.unit ?? '';
-
-  const color = getColorFromDataAndTresholds({
-    baseColor,
-    data: metricValue,
-    theme,
-    thresholds
-  });
-
-  const warningThresholdLabels = thresholds.warning.map(({ value }) =>
-    formatMetricValueWithUnit({
-      unit: metricUnit,
-      value
-    })
-  );
-
-  const criticalThresholdLabels = thresholds.critical.map(({ value }) =>
-    formatMetricValueWithUnit({
-      unit: metricUnit,
-      value
-    })
-  );
-
-  return (
-    <div className={classes.graphText}>
-      <FluidTypography
-        max="40px"
-        pref={16}
-        sx={{ color, fontWeight: 'bold', textAlign: 'center' }}
-        text={
-          formatMetricValueWithUnit({
-            isRaw: displayAsRaw,
-            unit: metricUnit,
-            value: metricValue
-          }) || ''
-        }
-        variant="h2"
-      />
-      {thresholds.enabled && (
-        <div className={classes.thresholds}>
-          <FluidTypography
-            containerClassName={cx(classes.threshold, classes.warning)}
-            max="30px"
-            pref={14}
-            text={`${labels.warning}: ${warningThresholdLabels.join(' - ')}`}
-            variant="h5"
-          />
-          <FluidTypography
-            containerClassName={cx(classes.threshold, classes.critical)}
-            max="30px"
-            pref={14}
-            text={`${labels.critical}: ${criticalThresholdLabels.join(' - ')}`}
-            variant="h5"
-          />
-        </div>
-      )}
-    </div>
-  );
-};

package/src/Graph/Text/index.ts

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

package/src/Graph/Timeline/ResponsiveTimeline.tsx

@@ -1,147 +0,0 @@
-import {
-  dateTimeFormat,
-  getXAxisTickFormat,
-  useLocaleDateTimeFormat
-} from '@centreon/ui';
-
-import { Typography, useTheme } from '@mui/material';
-
-import dayjs from 'dayjs';
-
-import { userAtom } from '@centreon/ui-context';
-import { Axis } from '@visx/visx';
-
-import { scaleTime } from '@visx/scale';
-import { BarRounded } from '@visx/shape';
-import { useAtomValue } from 'jotai';
-import { equals } from 'ramda';
-import { useCallback } from 'react';
-import { Tooltip } from '../../components';
-import { margins } from '../common/margins';
-import type { TimelineProps } from './models';
-import { useStyles } from './timeline.styles';
-import { useTimeline } from './useTimeline';
-
-interface Props extends TimelineProps {
-  width: number;
-  height: number;
-}
-
-const axisPadding = 4;
-
-const Timeline = ({
-  data,
-  startDate,
-  endDate,
-  width,
-  height,
-  TooltipContent,
-  tooltipClassName
-}: Props) => {
-  const { classes, cx } = useStyles();
-  const { format } = useLocaleDateTimeFormat();
-  const { timezone } = useAtomValue(userAtom);
-
-  const theme = useTheme();
-
-  const xScale = scaleTime({
-    domain: [new Date(startDate), new Date(endDate)],
-    range: [margins.left, width - margins.right],
-    clamp: true
-  });
-
-  const numTicks = Math.min(Math.ceil(width / 82), 12);
-
-  const { getTimeDifference } = useTimeline();
-
-  const getFormattedStart = useCallback(
-    (start) =>
-      format({
-        date: dayjs(start).tz(timezone).toDate(),
-        formatString: dateTimeFormat
-      }),
-    [dateTimeFormat, timezone]
-  );
-
-  const getFormattedEnd = useCallback(
-    (end) =>
-      format({
-        date: dayjs(end).tz(timezone).toDate(),
-        formatString: dateTimeFormat
-      }),
-    [dateTimeFormat, timezone]
-  );
-
-  return (
-    <svg width={width} height={height + axisPadding}>
-      {data.map(({ start, end, color }, idx) => (
-        <Tooltip
-          hasCaret
-          classes={{
-            tooltip: cx(classes.tooltip, tooltipClassName)
-          }}
-          followCursor={false}
-          key={`rect-${start}--${end}`}
-          label={
-            TooltipContent ? (
-              <TooltipContent
-                start={getFormattedStart(start)}
-                end={getFormattedEnd(end)}
-                color={color}
-                duration={getTimeDifference({
-                  start: dayjs(start),
-                  end: dayjs(end)
-                })}
-              />
-            ) : (
-              <div style={{ color }}>
-                <Typography variant="body2">
-                  {getTimeDifference({ start: dayjs(start), end: dayjs(end) })}
-                </Typography>
-                <Typography variant="body2">{`${format({ date: start, formatString: 'L LT' })} - ${format({ date: end, formatString: 'L LT' })}`}</Typography>
-              </div>
-            )
-          }
-          position="top"
-        >
-          <g>
-            <BarRounded
-              x={xScale(dayjs(start).tz(timezone))}
-              y={0}
-              width={
-                xScale(dayjs(end).tz(timezone)) -
-                xScale(dayjs(start).tz(timezone))
-              }
-              height={height - margins.bottom}
-              fill={color}
-              left={equals(idx, 0)}
-              radius={4}
-              right={equals(idx, data.length - 1)}
-            />
-          </g>
-        </Tooltip>
-      ))}
-
-      <Axis.AxisBottom
-        top={height - margins.bottom + axisPadding}
-        scale={xScale}
-        numTicks={numTicks}
-        tickFormat={(value) =>
-          format({
-            date: new Date(value),
-            formatString: getXAxisTickFormat({ end: endDate, start: startDate })
-          })
-        }
-        stroke={theme.palette.text.primary}
-        tickStroke={theme.palette.text.primary}
-        tickLabelProps={() => ({
-          fill: theme.palette.text.primary,
-          fontSize: theme.typography.caption.fontSize,
-          textAnchor: 'middle'
-        })}
-      />
-    </svg>
-  );
-};
-
-export default Timeline;