@centreon/ui 24.11.13 → 24.11.14

package/src/Graph/BarChart/useBarStack.ts

@@ -1,114 +0,0 @@
-import { useCallback, useMemo } from 'react';
-
-import { scaleOrdinal } from '@visx/scale';
-import { BarStack, BarStackHorizontal } from '@visx/shape';
-import { useSetAtom } from 'jotai';
-import { equals, keys, omit } from 'ramda';
-
-import { useDeepMemo } from '../../utils';
-import { Line, TimeValue } from '../common/timeSeries/models';
-
-import { tooltipDataAtom } from './atoms';
-
-interface HoverBarProps {
-  barIndex: number;
-  highlightedMetric: number;
-}
-
-export interface UseBarStackProps {
-  isHorizontal: boolean;
-  lines: Array<Line>;
-  timeSeries: Array<TimeValue>;
-  xScale;
-  yScale;
-}
-
-interface UseBarStackState {
-  BarStackComponent: typeof BarStack | typeof BarStackHorizontal;
-  colorScale;
-  commonBarStackProps;
-  exitBar: () => void;
-  hoverBar: (props: HoverBarProps) => () => void;
-  lineKeys: Array<number>;
-}
-
-export const useBarStack = ({
-  timeSeries,
-  isHorizontal,
-  lines,
-  yScale,
-  xScale
-}: UseBarStackProps): UseBarStackState => {
-  const setTooltipData = useSetAtom(tooltipDataAtom);
-
-  const BarStackComponent = useMemo(
-    () => (isHorizontal ? BarStack : BarStackHorizontal),
-    [isHorizontal]
-  );
-
-  const lineKeys = useDeepMemo({
-    deps: [timeSeries],
-    variable: keys(omit(['timeTick'], timeSeries[0]))
-  });
-  const colors = useDeepMemo({
-    deps: [lineKeys, lines],
-    variable: lineKeys.map((key) => {
-      const metric = lines.find(({ metric_id }) =>
-        equals(metric_id, Number(key))
-      );
-
-      return metric?.lineColor || '';
-    })
-  });
-
-  const colorScale = useMemo(
-    () =>
-      scaleOrdinal<number, string>({
-        domain: lineKeys,
-        range: colors
-      }),
-    [...lineKeys, ...colors]
-  );
-
-  const commonBarStackProps = isHorizontal
-    ? {
-        x: (d) => d.timeTick,
-        xScale,
-        yScale
-      }
-    : {
-        xScale: yScale,
-        y: (d) => d.timeTick,
-        yScale: xScale
-      };
-
-  const hoverBar = useCallback(
-    ({ highlightedMetric, barIndex }: HoverBarProps) =>
-      (): void => {
-        setTooltipData({
-          data: lines.map((metric) => {
-            return {
-              metric,
-              value: timeSeries[barIndex][metric.metric_id]
-            };
-          }),
-          highlightedMetric,
-          index: barIndex
-        });
-      },
-    []
-  );
-
-  const exitBar = useCallback((): void => {
-    setTooltipData(null);
-  }, []);
-
-  return {
-    BarStackComponent,
-    colorScale,
-    commonBarStackProps,
-    exitBar,
-    hoverBar,
-    lineKeys
-  };
-};

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

@@ -1,139 +0,0 @@
-import numeral from 'numeral';
-
-import BarStack from './BarStack';
-import { BarStackProps, BarType } from './models';
-
-const defaultData = [
-  { color: '#88B922', label: 'Ok', value: 148 },
-  { color: '#999999', label: 'Unknown', value: 13 },
-  { color: '#F7931A', label: 'Warning', value: 16 },
-  { color: '#FF6666', label: 'Down', value: 62 }
-];
-
-const total = Math.floor(
-  defaultData.reduce((acc, { value }) => acc + value, 0)
-);
-
-const TooltipContent = ({ label, color, value }: BarType): JSX.Element => {
-  return (
-    <div data-testid={`tooltip-${label}`} style={{ color }}>
-      {label} : {value}
-    </div>
-  );
-};
-
-const initialize = ({
-  width = '400px',
-  height = '400px',
-  data = defaultData,
-  ...args
-}: Omit<BarStackProps, 'data'> & {
-  data?;
-  height?: string;
-  width?: string;
-}): void => {
-  cy.mount({
-    Component: (
-      <div style={{ height, width }}>
-        <BarStack {...args} data={data} />
-      </div>
-    )
-  });
-};
-
-describe('Bar stack', () => {
-  it('renders Bar stack correctly with provided data', () => {
-    initialize({});
-
-    defaultData.forEach(({ label }) => {
-      cy.findByTestId(label).should('be.visible');
-    });
-
-    cy.makeSnapshot();
-  });
-
-  it('adjusts size based on the provided width and height', () => {
-    initialize({ displayLegend: false, height: '300px', width: '300px' });
-
-    cy.findByTestId('barStack').should('have.css', 'height', '270px');
-
-    cy.makeSnapshot();
-  });
-
-  it('renders as a horizontal bar when variant is set to "horizontal"', () => {
-    initialize({ variant: 'horizontal' });
-    cy.get('[data-variant="horizontal"]').should('exist');
-
-    cy.makeSnapshot();
-  });
-
-  it('renders as a vertical bar when variant is set to "vertical"', () => {
-    initialize({ variant: 'vertical' });
-    cy.get('[data-variant="vertical"]').should('exist');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays tooltip with correct information on hover', () => {
-    initialize({ TooltipContent });
-
-    defaultData.forEach(({ label, value }) => {
-      cy.findByTestId(label).trigger('mouseover', { force: true });
-
-      cy.findByTestId(`tooltip-${label}`)
-        .should('contain', label)
-        .and('contain', numeral(value).format('0a').toUpperCase());
-    });
-
-    cy.makeSnapshot();
-  });
-
-  it('conditionally displays values on rects based on displayValues prop', () => {
-    initialize({ displayValues: true });
-    defaultData.forEach(({ value }, index) => {
-      cy.findAllByTestId('value')
-        .eq(index)
-        .children()
-        .eq(0)
-        .should('have.text', value);
-    });
-
-    initialize({ displayValues: false });
-    cy.findAllByTestId('value').should('not.exist');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays values on rects in percentage unit when displayValues is set to true and unit to percentage', () => {
-    initialize({ displayValues: true, unit: 'percentage' });
-    defaultData.forEach(({ value }, index) => {
-      cy.findAllByTestId('value')
-        .eq(index)
-        .children()
-        .eq(0)
-        .should('have.text', `${((value * 100) / total).toFixed(1)}%`);
-    });
-
-    cy.makeSnapshot();
-  });
-
-  it('displays Legend component based on displayLegend prop', () => {
-    initialize({ displayLegend: true });
-    cy.findByTestId('Legend').should('be.visible');
-
-    initialize({ displayLegend: false });
-    cy.findByTestId('Legend').should('not.exist');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the title when the title is giving', () => {
-    initialize({ title: 'host' });
-    cy.findByTestId('Title').should('be.visible');
-
-    initialize({});
-    cy.findByTestId('Title').should('not.exist');
-
-    cy.makeSnapshot();
-  });
-});

package/src/Graph/BarStack/BarStack.stories.tsx

@@ -1,140 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import ResponsiveBarStack from './ResponsiveBarStack';
-import { BarType } from './models';
-
-import { BarStack } from '.';
-
-const data = [
-  { color: '#88B922', label: 'Ok', value: 148 },
-  { color: '#999999', label: 'Unknown', value: 63 },
-  { color: '#F7931A', label: 'Warning', value: 16 },
-  { color: '#FF6666', label: 'Down', value: 13 }
-];
-
-const dataWithBigNumbers = [
-  { color: '#88B922', label: 'Ok', value: 260000 },
-  { color: '#999999', label: 'Unknown', value: 1010900 },
-  { color: '#F7931A', label: 'Warning', value: 63114 },
-  { color: '#FF6666', label: 'Down', value: 122222 }
-];
-
-const dataWithSmallNumber = [
-  { color: '#88B922', label: 'Ok', value: 148 },
-  { color: '#999999', label: 'Unknown', value: 42 },
-  { color: '#F7931A', label: 'Warning', value: 7 },
-  { color: '#FF6666', label: 'Down', value: 5 }
-];
-
-const meta: Meta<typeof BarStack> = {
-  component: BarStack,
-  parameters: {
-    chromatic: {
-      delay: 1000
-    }
-  }
-};
-
-export default meta;
-type Story = StoryObj<typeof BarStack>;
-
-const TooltipContent = ({ label, color, value }: BarType): JSX.Element => {
-  return (
-    <div style={{ color }}>
-      {label} : {value}
-    </div>
-  );
-};
-
-const Template = (args): JSX.Element => {
-  return <ResponsiveBarStack height={300} width={500} {...args} />;
-};
-
-const SmallTemplate = (args): JSX.Element => {
-  return <ResponsiveBarStack height={120} width={120} {...args} />;
-};
-
-export const Vertical: Story = {
-  args: { data, title: 'hosts' },
-  render: Template
-};
-
-export const WithoutTitle: Story = {
-  args: { data },
-  render: Template
-};
-
-export const WithoutLegend: Story = {
-  args: { data, displayLegend: false, title: 'hosts' },
-
-  render: Template
-};
-
-export const withDisplayedValues: Story = {
-  args: { data, displayValues: true, title: 'hosts' },
-  render: Template
-};
-
-export const WithPencentage: Story = {
-  args: { data, displayValues: true, title: 'hosts', unit: 'percentage' },
-  render: Template
-};
-
-export const WithTooltip: Story = {
-  args: { TooltipContent, data, title: 'hosts' },
-  render: Template
-};
-
-export const WithBigNumbers: Story = {
-  args: {
-    TooltipContent,
-    data: dataWithBigNumbers,
-    displayValues: true,
-    title: 'hosts'
-  },
-  render: Template
-};
-
-export const WithSmallNumbers: Story = {
-  args: {
-    TooltipContent,
-    data: dataWithSmallNumber,
-    displayValues: true,
-    title: 'hosts'
-  },
-  render: Template
-};
-
-export const Horizontal: Story = {
-  args: {
-    TooltipContent,
-    data,
-    displayValues: true,
-    title: 'hosts',
-    variant: 'horizontal'
-  },
-  render: Template
-};
-
-export const HorizontalWithoutLegend: Story = {
-  args: {
-    TooltipContent,
-    data,
-    displayLegend: false,
-    displayValues: true,
-    title: 'hosts',
-    variant: 'horizontal'
-  },
-  render: Template
-};
-
-export const SmallDisplay: Story = {
-  args: {
-    TooltipContent,
-    data,
-    displayValues: true,
-    title: 'hosts',
-    variant: 'horizontal'
-  },
-  render: SmallTemplate
-};

package/src/Graph/BarStack/BarStack.styles.ts

@@ -1,41 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useBarStackStyles = makeStyles()((theme) => ({
-  barStackTooltip: {
-    backgroundColor: theme.palette.background.paper,
-    color: theme.palette.text.primary,
-    padding: 0,
-    position: 'relative'
-  },
-  container: {
-    alignItems: 'center',
-    display: 'flex',
-    gap: theme.spacing(1.5),
-    justifyContent: 'center'
-  },
-  smallTitle: {
-    fontSize: theme.typography.body1.fontSize
-  },
-  svgContainer: {
-    alignItems: 'center',
-    backgroundColor: theme.palette.background.panelGroups,
-    borderRadius: theme.spacing(1.25),
-    display: 'flex',
-    justifyContent: 'center',
-    padding: theme.spacing(1)
-  },
-  svgWrapper: {
-    alignItems: 'center',
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(1),
-    justifyContent: 'center'
-  },
-  title: {
-    fontSize: theme.typography.h6.fontSize,
-    fontWeight: theme.typography.fontWeightMedium,
-    margin: 0,
-    padding: 0,
-    textAlign: 'center'
-  }
-}));

package/src/Graph/BarStack/BarStack.tsx

@@ -1,14 +0,0 @@
-import { ParentSize } from '../..';
-
-import ResponsiveBarStack from './ResponsiveBarStack';
-import { BarStackProps } from './models';
-
-const Bar = (props: BarStackProps): JSX.Element => (
-  <ParentSize>
-    {({ width, height }) => (
-      <ResponsiveBarStack {...props} height={height} width={width} />
-    )}
-  </ParentSize>
-);
-
-export default Bar;

package/src/Graph/BarStack/ResponsiveBarStack.tsx

@@ -1,218 +0,0 @@
-import { useRef } from 'react';
-
-import { Group } from '@visx/group';
-import { BarStackHorizontal, BarStack as BarStackVertical } from '@visx/shape';
-import { Text } from '@visx/text';
-import numeral from 'numeral';
-import { equals, lt } from 'ramda';
-import { useTranslation } from 'react-i18next';
-
-import { Tooltip } from '../../components';
-import { Legend as LegendComponent } from '../Legend';
-import { LegendProps } from '../Legend/models';
-import { getValueByUnit } from '../common/utils';
-
-import { useBarStackStyles } from './BarStack.styles';
-import { BarStackProps } from './models';
-import useResponsiveBarStack from './useResponsiveBarStack';
-
-const DefaultLengd = ({ scale, direction }: LegendProps): JSX.Element => (
-  <LegendComponent direction={direction} scale={scale} />
-);
-
-const ResponsiveBarStack = ({
-  title,
-  data,
-  width,
-  height,
-  size = 72,
-  onSingleBarClick,
-  displayLegend = true,
-  TooltipContent,
-  Legend = DefaultLengd,
-  unit = 'number',
-  displayValues,
-  variant = 'vertical',
-  legendDirection = 'column',
-  tooltipProps = {}
-}: BarStackProps & { height: number; width: number }): JSX.Element => {
-  const { t } = useTranslation();
-  const { classes, cx } = useBarStackStyles();
-
-  const titleRef = useRef(null);
-  const legendRef = useRef(null);
-
-  const {
-    barSize,
-    colorScale,
-    input,
-    keys,
-    legendScale,
-    total,
-    xScale,
-    yScale,
-    svgContainerSize,
-    isVerticalBar
-  } = useResponsiveBarStack({
-    data,
-    height,
-    legendRef,
-    size,
-    titleRef,
-    unit,
-    variant,
-    width
-  });
-
-  const BarStackComponent = isVerticalBar
-    ? BarStackVertical
-    : BarStackHorizontal;
-
-  const isSmallHeight = isVerticalBar ? lt(height, 190) : lt(height, 100);
-  const isSmallWidth = isVerticalBar ? lt(width, 80) : lt(width, 350);
-  const mustDisplayLegend = isSmallWidth ? false : displayLegend;
-
-  return (
-    <div className={classes.container} style={{ width }}>
-      <div className={classes.svgWrapper}>
-        {title && (
-          <div
-            className={cx(classes.title, isSmallHeight && classes.smallTitle)}
-            data-testid="Title"
-            ref={titleRef}
-          >
-            {`${numeral(total).format('0a').toUpperCase()} `} {t(title)}
-          </div>
-        )}
-        <div
-          className={classes.svgContainer}
-          data-testid="barStack"
-          style={{
-            width: svgContainerSize.width
-          }}
-        >
-          <svg
-            data-variant={variant}
-            height={barSize.height}
-            width={barSize.width}
-          >
-            <Group>
-              <BarStackComponent
-                color={colorScale}
-                data={[input]}
-                keys={keys}
-                {...(isVerticalBar
-                  ? { x: () => undefined }
-                  : { y: () => undefined })}
-                xScale={xScale}
-                yScale={yScale}
-              >
-                {(barStacks) =>
-                  barStacks.map((barStack) =>
-                    barStack.bars.map((bar) => {
-                      const shouldDisplayValues = (): boolean => {
-                        if (bar.height < 10) {
-                          return false;
-                        }
-
-                        return (
-                          (equals(unit, 'number') && bar.width > 10) ||
-                          (equals(unit, 'percentage') && bar.width > 25)
-                        );
-                      };
-
-                      const TextX = bar.x + bar.width / 2;
-                      const TextY = bar.y + bar.height / 2;
-
-                      const onClick = (): void => {
-                        onSingleBarClick?.(bar);
-                      };
-
-                      return (
-                        <Tooltip
-                          hasCaret
-                          classes={{
-                            tooltip: classes.barStackTooltip
-                          }}
-                          followCursor={false}
-                          key={`bar-stack-${barStack.index}-${bar.index}`}
-                          label={
-                            TooltipContent && (
-                              <TooltipContent
-                                color={bar.color}
-                                label={bar.key}
-                                title={title}
-                                total={total}
-                                value={barStack.bars[0].bar.data[barStack.key]}
-                                {...tooltipProps}
-                              />
-                            )
-                          }
-                          position={
-                            isVerticalBar ? 'right-start' : 'bottom-start'
-                          }
-                        >
-                          <g
-                            data-testid={bar.key}
-                            onClick={onClick}
-                            onKeyUp={() => undefined}
-                          >
-                            <rect
-                              cursor="pointer"
-                              fill={bar.color}
-                              height={
-                                isVerticalBar ? bar.height - 1 : bar.height
-                              }
-                              key={`bar-stack-${barStack.index}-${bar.index}`}
-                              ry={4}
-                              width={isVerticalBar ? bar.width : bar.width - 1}
-                              x={bar.x}
-                              y={bar.y}
-                            />
-                            {displayValues && shouldDisplayValues() && (
-                              <Text
-                                cursor="pointer"
-                                data-testid="value"
-                                fill="#000"
-                                fontSize={12}
-                                fontWeight={600}
-                                textAnchor="middle"
-                                verticalAnchor="middle"
-                                x={TextX}
-                                y={TextY}
-                              >
-                                {getValueByUnit({
-                                  total,
-                                  unit,
-                                  value: barStack.bars[0].bar.data[barStack.key]
-                                })}
-                              </Text>
-                            )}
-                          </g>
-                        </Tooltip>
-                      );
-                    })
-                  )
-                }
-              </BarStackComponent>
-            </Group>
-          </svg>
-        </div>
-      </div>
-      {mustDisplayLegend && (
-        <div data-testid="Legend" ref={legendRef}>
-          <Legend
-            data={data}
-            direction={legendDirection}
-            scale={legendScale}
-            title={title}
-            total={total}
-            unit={unit}
-          />
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default ResponsiveBarStack;

package/src/Graph/BarStack/index.ts

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

package/src/Graph/BarStack/models.ts

@@ -1,20 +0,0 @@
-export interface BarType {
-  color: string;
-  label: string;
-  value: number;
-}
-
-export type BarStackProps = {
-  Legend?: ({ scale, data, title, total, unit, direction }) => JSX.Element;
-  TooltipContent?: (barData) => JSX.Element | boolean | null;
-  data: Array<BarType>;
-  displayLegend?: boolean;
-  displayValues?: boolean;
-  legendDirection?: 'row' | 'column';
-  onSingleBarClick?: (barData) => void;
-  size?: number;
-  title?: string;
-  tooltipProps?: object;
-  unit?: 'percentage' | 'number';
-  variant?: 'vertical' | 'horizontal';
-};