@centreon/ui 24.12.3 → 24.12.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.12.3",
+  "version": "24.12.5",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

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

@@ -55,21 +55,43 @@ describe('Bar stack', () => {
   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.get('.visx-bar-rounded')
+      .eq(0)
+      .should(
+        'have.attr',
+        'd',
+        'M8,95.18828451882847 h193 h8v8 v138.81171548117152 a8,8 0 0 1 -8,8 h-193 a8,8 0 0 1 -8,-8 v-138.81171548117152 v-8h8z'
+      );
 
     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.get('.visx-bar-rounded')
+      .eq(0)
+      .should(
+        'have.attr',
+        'd',
+        'M8,0 h231.69874476987445 h8v8 v295 v8h-8 h-231.69874476987445 a8,8 0 0 1 -8,-8 v-295 a8,8 0 0 1 8,-8z'
+      );
+    cy.get('[data-is-vertical="false"]').should('be.visible');
 
     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.get('.visx-bar-rounded')
+      .eq(0)
+      .should(
+        'have.attr',
+        'd',
+        'M8,133.26359832635984 h293 h8v8 v200.73640167364016 a8,8 0 0 1 -8,8 h-293 a8,8 0 0 1 -8,-8 v-200.73640167364016 v-8h8z'
+      );
+    cy.get('[data-is-vertical="true"]').should('be.visible');
 
     cy.makeSnapshot();
   });
@@ -77,6 +99,14 @@ describe('Bar stack', () => {
   it('displays tooltip with correct information on hover', () => {
     initialize({ TooltipContent });
 
+    cy.get('.visx-bar-rounded')
+      .eq(0)
+      .should(
+        'have.attr',
+        'd',
+        'M8,133.26359832635984 h293 h8v8 v200.73640167364016 a8,8 0 0 1 -8,8 h-293 a8,8 0 0 1 -8,-8 v-200.73640167364016 v-8h8z'
+      );
+
     defaultData.forEach(({ label, value }) => {
       cy.findByTestId(label).trigger('mouseover', { force: true });
 
@@ -90,6 +120,14 @@ describe('Bar stack', () => {
 
   it('conditionally displays values on rects based on displayValues prop', () => {
     initialize({ displayValues: true });
+
+    cy.get('.visx-bar-rounded')
+      .eq(0)
+      .should(
+        'have.attr',
+        'd',
+        'M8,133.26359832635984 h293 h8v8 v200.73640167364016 a8,8 0 0 1 -8,8 h-293 a8,8 0 0 1 -8,-8 v-200.73640167364016 v-8h8z'
+      );
     defaultData.forEach(({ value }, index) => {
       cy.findAllByTestId('value')
         .eq(index)
@@ -106,6 +144,14 @@ describe('Bar stack', () => {
 
   it('displays values on rects in percentage unit when displayValues is set to true and unit to percentage', () => {
     initialize({ displayValues: true, unit: 'percentage' });
+
+    cy.get('.visx-bar-rounded')
+      .eq(0)
+      .should(
+        'have.attr',
+        'd',
+        'M8,133.26359832635984 h293 h8v8 v200.73640167364016 a8,8 0 0 1 -8,8 h-293 a8,8 0 0 1 -8,-8 v-200.73640167364016 v-8h8z'
+      );
     defaultData.forEach(({ value }, index) => {
       cy.findAllByTestId('value')
         .eq(index)
@@ -118,21 +164,53 @@ describe('Bar stack', () => {
   });
 
   it('displays Legend component based on displayLegend prop', () => {
-    initialize({ displayLegend: true });
-    cy.findByTestId('Legend').should('be.visible');
-
     initialize({ displayLegend: false });
+
+    cy.get('.visx-bar-rounded')
+      .eq(0)
+      .should(
+        'have.attr',
+        'd',
+        'M8,133.26359832635984 h293 h8v8 v200.73640167364016 a8,8 0 0 1 -8,8 h-293 a8,8 0 0 1 -8,-8 v-200.73640167364016 v-8h8z'
+      );
+    cy.findByTestId('Ok').should('be.visible');
     cy.findByTestId('Legend').should('not.exist');
 
     cy.makeSnapshot();
   });
 
-  it('displays the title when the title is giving', () => {
+  it('displays the title when the title is given', () => {
     initialize({ title: 'host' });
+
+    cy.get('.visx-bar-rounded')
+      .eq(0)
+      .should(
+        'have.attr',
+        'd',
+        'M8,133.26359832635984 h293 h8v8 v200.73640167364016 a8,8 0 0 1 -8,8 h-293 a8,8 0 0 1 -8,-8 v-200.73640167364016 v-8h8z'
+      );
+    cy.findByTestId('Ok').should('be.visible');
     cy.findByTestId('Title').should('be.visible');
 
-    initialize({});
-    cy.findByTestId('Title').should('not.exist');
+    cy.makeSnapshot();
+  });
+
+  it('displays the bars within a small display', () => {
+    initialize({
+      width: '120px',
+      height: '89px',
+      title: 'host',
+      displayLegend: true
+    });
+
+    cy.get('.visx-bar-rounded')
+      .eq(0)
+      .should(
+        'have.attr',
+        'd',
+        'M8,20.941422594142264 h94 h8v8 v18.058577405857733 a8,8 0 0 1 -8,8 h-94 a8,8 0 0 1 -8,-8 v-18.058577405857733 v-8h8z'
+      );
+    cy.findByTestId('Ok').should('be.visible');
 
     cy.makeSnapshot();
   });

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

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import ResponsiveBarStack from './ResponsiveBarStack';
+import ResponsiveBarStack from './BarStack';
 import { BarType } from './models';
 
 import { BarStack } from '.';
@@ -47,11 +47,19 @@ const TooltipContent = ({ label, color, value }: BarType): JSX.Element => {
 };
 
 const Template = (args): JSX.Element => {
-  return <ResponsiveBarStack height={300} width={500} {...args} />;
+  return (
+    <div style={{ width: '400px', height: '400px' }}>
+      <ResponsiveBarStack {...args} />
+    </div>
+  );
 };
 
 const SmallTemplate = (args): JSX.Element => {
-  return <ResponsiveBarStack height={120} width={120} {...args} />;
+  return (
+    <div style={{ width: '150px', height: '90px' }}>
+      <ResponsiveBarStack {...args} />
+    </div>
+  );
 };
 
 export const Vertical: Story = {
@@ -111,7 +119,8 @@ export const Horizontal: Story = {
     data,
     displayValues: true,
     title: 'hosts',
-    variant: 'horizontal'
+    variant: 'horizontal',
+    legendDirection: 'row'
   },
   render: Template
 };

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

@@ -1,41 +1,65 @@
 import { makeStyles } from 'tss-react/mui';
+import { legendMaxHeight, legendMaxWidth } from './constants';
 
-export const useBarStackStyles = makeStyles()((theme) => ({
-  barStackTooltip: {
-    backgroundColor: theme.palette.background.paper,
-    color: theme.palette.text.primary,
-    padding: 0,
-    position: 'relative'
-  },
+export const useStyles = makeStyles()({
   container: {
-    alignItems: 'center',
-    display: 'flex',
-    gap: theme.spacing(1.5),
-    justifyContent: 'center'
+    display: 'grid',
+    '&[data-has-title="false"]': {
+      gridTemplateRows: 'auto'
+    },
+    '&[data-title-variant="xs"]': {
+      gridTemplateRows: '40px auto'
+    },
+    '&[data-title-variant="sm"]': {
+      gridTemplateRows: '20px auto'
+    },
+    '&[data-title-variant="md"]': {
+      gridTemplateRows: '36px auto',
+      textOverflow: 'clip',
+      overflow: 'hidden'
+    },
+    height: '100%'
   },
-  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'
+  clippedTitle: {
+    textOverflow: 'clip',
+    overflow: 'hidden'
+  }
+});
+
+export const useGraphAndLegendStyles = makeStyles()((theme) => ({
+  graphAndLegend: {
+    height: '100%',
+    display: 'grid',
+    '&[data-is-vertical="true"][data-display-legend="false"]': {
+      gridTemplateColumns: '1fr'
+    },
+    '&[data-is-vertical="true"][data-display-legend="true"]': {
+      gridTemplateColumns: `1fr ${legendMaxWidth}px`,
+      gap: theme.spacing(0.5)
+    },
+    '&[data-display-legend="false"][data-is-vertical="false"]': {
+      gridTemplateRows: '1fr'
+    },
+    '&[data-display-legend="true"][data-is-vertical="false"]': {
+      gridTemplateRows: `1fr ${legendMaxHeight}px`,
+      gap: theme.spacing(0.5)
+    }
   },
-  title: {
-    fontSize: theme.typography.h6.fontSize,
-    fontWeight: theme.typography.fontWeightMedium,
-    margin: 0,
+  legend: {
+    '&[data-is-vertical="false"]': {
+      overflowY: 'auto'
+    },
+    '&[data-is-vertical="true"]': {
+      alignSelf: 'center'
+    }
+  }
+}));
+
+export const useGraphStyles = makeStyles()((theme) => ({
+  tooltip: {
+    backgroundColor: theme.palette.background.paper,
+    color: theme.palette.text.primary,
     padding: 0,
-    textAlign: 'center'
+    boxShadow: theme.shadows[3]
   }
 }));

package/src/Graph/BarStack/Graph.tsx

@@ -0,0 +1,173 @@
+import {
+  BarRounded,
+  BarStackHorizontal,
+  BarStack as BarStackVertical
+} from '@visx/shape';
+import { Text } from '@visx/text';
+import { equals, props } from 'ramda';
+import { memo, useMemo } from 'react';
+import { Tooltip } from '../../components';
+import { getValueByUnit } from '../common/utils';
+import { useGraphStyles } from './BarStack.styles';
+import { BarStackProps } from './models';
+import { useGraphAndLegend } from './useGraphAndLegend';
+
+interface Props
+  extends Pick<
+    BarStackProps,
+    | 'data'
+    | 'displayValues'
+    | 'onSingleBarClick'
+    | 'unit'
+    | 'TooltipContent'
+    | 'tooltipProps'
+  > {
+  width: number;
+  height: number;
+  isVerticalBar: boolean;
+  colorScale;
+  total: number;
+}
+
+const Graph = ({
+  width,
+  height,
+  isVerticalBar,
+  colorScale,
+  data,
+  total,
+  unit,
+  displayValues,
+  onSingleBarClick,
+  tooltipProps,
+  TooltipContent
+}: Props): JSX.Element => {
+  const { classes } = useGraphStyles();
+
+  const BarStackComponent = useMemo(
+    () => (isVerticalBar ? BarStackVertical : BarStackHorizontal),
+    [isVerticalBar]
+  );
+
+  const normalizedHeight = useMemo(() => height - 10, [height]);
+
+  const { barStackData, xScale, yScale, keys } = useGraphAndLegend({
+    data,
+    width,
+    height: normalizedHeight,
+    isVerticalBar,
+    total
+  });
+
+  return (
+    <svg width="100%" height={normalizedHeight}>
+      <BarStackComponent
+        color={colorScale}
+        data={[barStackData]}
+        keys={keys}
+        {...(isVerticalBar ? { x: () => undefined } : { y: () => undefined })}
+        xScale={xScale}
+        yScale={yScale}
+      >
+        {(barStacks) =>
+          barStacks.map((barStack, index) =>
+            barStack.bars.map((bar) => {
+              const isFirstBar = equals(index, 0);
+              const isLastBar = equals(index, barStacks.length - 1);
+              const fitsInBar = isVerticalBar
+                ? bar.height >= 18
+                : (equals(unit, 'number') && bar.width > 15) ||
+                  (equals(unit, 'percentage') && bar.width > 35);
+
+              const textX = bar.x + bar.width / 2;
+              const textY = bar.y + bar.height / 2;
+
+              const click = onSingleBarClick
+                ? (e: MouseEvent): void => {
+                    if (!equals(e.button, 0)) {
+                      return;
+                    }
+                    onSingleBarClick(bar);
+                  }
+                : undefined;
+
+              return (
+                <Tooltip
+                  followCursor={false}
+                  classes={classes}
+                  key={`bar-stack-${barStack.index}-${bar.index}`}
+                  label={
+                    TooltipContent && (
+                      <TooltipContent
+                        color={bar.color}
+                        label={bar.key}
+                        total={total}
+                        value={barStack.bars[0].bar.data[barStack.key]}
+                        {...tooltipProps}
+                      />
+                    )
+                  }
+                  position={isVerticalBar ? 'right' : 'bottom'}
+                >
+                  <g data-testid={bar.key} key={bar.key}>
+                    <BarRounded
+                      radius={8}
+                      cursor={onSingleBarClick ? 'pointer' : 'default'}
+                      fill={bar.color}
+                      height={bar.height}
+                      key={`bar-stack-${barStack.index}-${bar.index}`}
+                      width={isVerticalBar ? bar.width - 10 : bar.width}
+                      x={bar.x}
+                      y={bar.y}
+                      left={!isVerticalBar && isFirstBar}
+                      right={!isVerticalBar && isLastBar}
+                      bottom={isVerticalBar && isFirstBar}
+                      top={isVerticalBar && isLastBar}
+                      onMouseDown={click}
+                    />
+                    {displayValues && fitsInBar && (
+                      <Text
+                        cursor={onSingleBarClick ? 'pointer' : 'default'}
+                        data-testid="value"
+                        fill="#000"
+                        fontSize={12}
+                        fontWeight={600}
+                        textAnchor="middle"
+                        verticalAnchor="middle"
+                        x={textX}
+                        y={textY}
+                        onMouseUp={click}
+                      >
+                        {getValueByUnit({
+                          total,
+                          unit: unit || 'number',
+                          value: barStack.bars[0].bar.data[barStack.key]
+                        })}
+                      </Text>
+                    )}
+                  </g>
+                </Tooltip>
+              );
+            })
+          )
+        }
+      </BarStackComponent>
+    </svg>
+  );
+};
+
+const propsToMemoize = [
+  'width',
+  'height',
+  'isVerticalBar',
+  'colorScale',
+  'data',
+  'total',
+  'unit',
+  'displayValues',
+  'tooltipProps'
+];
+
+export default memo(Graph, (prevProps, nextProps) =>
+  equals(props(propsToMemoize, prevProps), props(propsToMemoize, nextProps))
+);

package/src/Graph/BarStack/GraphAndLegend.tsx

@@ -0,0 +1,117 @@
+import { equals, props } from 'ramda';
+import { memo, useMemo } from 'react';
+import { useGraphAndLegendStyles } from './BarStack.styles';
+import Graph from './Graph';
+import { gap, legendMaxHeight, legendMaxWidth } from './constants';
+import { BarStackProps } from './models';
+
+interface Props
+  extends Pick<
+    BarStackProps,
+    | 'data'
+    | 'displayValues'
+    | 'onSingleBarClick'
+    | 'unit'
+    | 'TooltipContent'
+    | 'tooltipProps'
+  > {
+  isVerticalBar: boolean;
+  legend: JSX.Element;
+  displayLegend: boolean;
+  height: number;
+  width: number;
+  colorScale;
+  total: number;
+}
+
+const GraphAndLegend = ({
+  isVerticalBar,
+  legend,
+  displayLegend,
+  height,
+  width,
+  colorScale,
+  total,
+  unit,
+  data,
+  displayValues,
+  onSingleBarClick,
+  tooltipProps,
+  TooltipContent
+}: Props): JSX.Element => {
+  const { classes } = useGraphAndLegendStyles();
+
+  const isSmall = useMemo(
+    () =>
+      (!isVerticalBar && Math.floor(height) <= 80) ||
+      (isVerticalBar && Math.floor(width) <= 150),
+    [isVerticalBar, height, width]
+  );
+
+  const mustDisplayLegend = useMemo(
+    () => displayLegend && !isSmall,
+    [isSmall, displayLegend]
+  );
+
+  const graphWidth = useMemo(
+    () =>
+      isVerticalBar ? width - (isSmall ? 0 : legendMaxWidth - gap) : width,
+    [width, isVerticalBar, isSmall]
+  );
+
+  const graphHeight = useMemo(
+    () =>
+      isVerticalBar ? height : height - (isSmall ? 0 : legendMaxHeight - gap),
+    [height, isVerticalBar, isSmall]
+  );
+
+  return (
+    <div
+      className={classes.graphAndLegend}
+      data-display-legend={mustDisplayLegend}
+      data-is-vertical={isVerticalBar}
+      style={{ height }}
+    >
+      <Graph
+        isVerticalBar={isVerticalBar}
+        data={data}
+        width={graphWidth}
+        height={graphHeight}
+        colorScale={colorScale}
+        unit={unit}
+        total={total}
+        displayValues={displayValues}
+        onSingleBarClick={onSingleBarClick}
+        tooltipProps={tooltipProps}
+        TooltipContent={TooltipContent}
+      />
+      {mustDisplayLegend && (
+        <div
+          className={classes.legend}
+          data-is-vertical={isVerticalBar}
+          data-testid="Legend"
+        >
+          {legend}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const propsToMemoize = [
+  'width',
+  'height',
+  'isVerticalBar',
+  'colorScale',
+  'data',
+  'total',
+  'unit',
+  'displayValues',
+  'tooltipProps',
+  'displayLegend',
+  'legend'
+];
+
+export default memo(GraphAndLegend, (prevProps, nextProps) =>
+  equals(props(propsToMemoize, prevProps), props(propsToMemoize, nextProps))
+);

package/src/Graph/BarStack/ResponsiveBarStack.tsx

@@ -1,18 +1,14 @@
-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 { useStyles } from './BarStack.styles';
 
-import { useBarStackStyles } from './BarStack.styles';
+import { Typography } from '@mui/material';
+import numeral from 'numeral';
+import { equals } from 'ramda';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import GraphAndLegend from './GraphAndLegend';
+import { gap, smallTitleHeight, titleHeight } from './constants';
 import { BarStackProps } from './models';
 import useResponsiveBarStack from './useResponsiveBarStack';
 
@@ -23,9 +19,8 @@ const DefaultLengd = ({ scale, direction }: LegendProps): JSX.Element => (
 const ResponsiveBarStack = ({
   title,
   data,
-  width,
   height,
-  size = 72,
+  width,
   onSingleBarClick,
   displayLegend = true,
   TooltipContent,
@@ -33,184 +28,82 @@ const ResponsiveBarStack = ({
   unit = 'number',
   displayValues,
   variant = 'vertical',
-  legendDirection = 'column',
+  legendDirection,
   tooltipProps = {}
 }: BarStackProps & { height: number; width: number }): JSX.Element => {
   const { t } = useTranslation();
-  const { classes, cx } = useBarStackStyles();
-
-  const titleRef = useRef(null);
-  const legendRef = useRef(null);
+  const { classes, cx } = useStyles();
 
   const {
-    barSize,
-    colorScale,
-    input,
-    keys,
-    legendScale,
     total,
-    xScale,
-    yScale,
-    svgContainerSize,
-    isVerticalBar
+    titleVariant,
+    legendScale,
+    isVerticalBar,
+    colorScale,
+    formattedLegendDirection
   } = useResponsiveBarStack({
     data,
     height,
-    legendRef,
-    size,
-    titleRef,
+    width,
     unit,
     variant,
-    width
+    legendDirection
   });
 
-  const BarStackComponent = isVerticalBar
-    ? BarStackVertical
-    : BarStackHorizontal;
+  const graphAndLegendHeight = useMemo(() => {
+    if (equals(titleVariant, 'xs')) {
+      return height - 2 * smallTitleHeight - gap;
+    }
 
-  const isSmallHeight = isVerticalBar ? lt(height, 190) : lt(height, 100);
-  const isSmallWidth = isVerticalBar ? lt(width, 80) : lt(width, 350);
-  const mustDisplayLegend = isSmallWidth ? false : displayLegend;
+    if (equals(titleVariant, 'sm')) {
+      return height - smallTitleHeight - gap;
+    }
+
+    return height - titleHeight - gap;
+  }, [titleVariant, height]);
 
   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
-          }}
+    <div
+      className={classes.container}
+      data-has-title={!!title}
+      data-title-variant={titleVariant}
+      data-variant={variant}
+    >
+      {title && (
+        <Typography
+          data-testid="Title"
+          variant={equals(titleVariant, 'md') ? 'h6' : 'body1'}
+          textAlign="center"
+          fontWeight="bold"
+          className={cx(equals(titleVariant, 'md') && classes.clippedTitle)}
         >
-          <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}>
+          {`${numeral(total).format('0a')}`} {t(title)}
+        </Typography>
+      )}
+      <GraphAndLegend
+        height={graphAndLegendHeight}
+        width={width}
+        isVerticalBar={isVerticalBar}
+        displayLegend={displayLegend}
+        colorScale={colorScale}
+        total={total}
+        data={data}
+        unit={unit}
+        displayValues={displayValues}
+        onSingleBarClick={onSingleBarClick}
+        tooltipProps={tooltipProps}
+        TooltipContent={TooltipContent}
+        legend={
           <Legend
             data={data}
-            direction={legendDirection}
+            direction={formattedLegendDirection}
             scale={legendScale}
             title={title}
             total={total}
             unit={unit}
           />
-        </div>
-      )}
+        }
+      />
     </div>
   );
 };

package/src/Graph/BarStack/constants.ts

@@ -0,0 +1,5 @@
+export const legendMaxWidth = 85;
+export const legendMaxHeight = 43;
+export const titleHeight = 36;
+export const smallTitleHeight = 20;
+export const gap = 4;

package/src/Graph/BarStack/models.ts

@@ -12,7 +12,6 @@ export type BarStackProps = {
   displayValues?: boolean;
   legendDirection?: 'row' | 'column';
   onSingleBarClick?: (barData) => void;
-  size?: number;
   title?: string;
   tooltipProps?: object;
   unit?: 'percentage' | 'number';

package/src/Graph/BarStack/useGraphAndLegend.ts

@@ -0,0 +1,84 @@
+import { scaleBand, scaleLinear } from '@visx/scale';
+import { pluck } from 'ramda';
+import { useMemo } from 'react';
+import { BarType } from './models';
+
+interface UseGraphandLegendProps {
+  data: Array<BarType>;
+  isVerticalBar: boolean;
+  total: number;
+  width: number;
+  height: number;
+}
+
+interface UseGraphAndLegendState {
+  barStackData: Record<string, number>;
+  xScale;
+  yScale;
+  keys: Array<string>;
+}
+
+export const useGraphAndLegend = ({
+  data,
+  isVerticalBar,
+  total,
+  width,
+  height
+}: UseGraphandLegendProps): UseGraphAndLegendState => {
+  const dataWithNonEmptyValue = useMemo(
+    () => data.filter(({ value }) => value),
+    [data]
+  );
+
+  const keys = useMemo(
+    () => pluck('label', dataWithNonEmptyValue),
+    [dataWithNonEmptyValue]
+  );
+
+  const barStackData = useMemo(
+    () =>
+      dataWithNonEmptyValue.reduce((acc, { label, value }) => {
+        acc[label] = value;
+
+        return acc;
+      }, {}),
+    [dataWithNonEmptyValue]
+  );
+
+  const yScale = useMemo(
+    () =>
+      isVerticalBar
+        ? scaleLinear({
+            domain: [0, total],
+            range: [height, 0]
+          })
+        : scaleBand({
+            domain: [0, 0],
+            padding: 0,
+            range: [height, 0]
+          }),
+    [isVerticalBar, total, height]
+  );
+
+  const xScale = useMemo(
+    () =>
+      isVerticalBar
+        ? scaleBand({
+            domain: [0, 0],
+            padding: 0,
+            range: [0, width]
+          })
+        : scaleLinear({
+            domain: [0, total],
+            range: [0, width]
+          }),
+    [total, width, isVerticalBar]
+  );
+
+  return {
+    barStackData,
+    xScale,
+    yScale,
+    keys
+  };
+};

package/src/Graph/BarStack/useResponsiveBarStack.ts

@@ -1,37 +1,27 @@
-import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
-import { equals, gt, pluck } from 'ramda';
-
+import { scaleOrdinal } from '@visx/scale';
+import { equals, isNil, pluck } from 'ramda';
+import { useMemo } from 'react';
 import { LegendScale } from '../Legend/models';
 import { getValueByUnit } from '../common/utils';
-
 import { BarType } from './models';
 
-interface Size {
-  height: number;
-  width: number;
-}
-
 interface UseBarStackProps {
   data: Array<BarType>;
   height: number;
-  legendRef;
-  size: number;
-  titleRef;
+  width: number;
   unit?: 'percentage' | 'number';
   variant?: 'vertical' | 'horizontal';
-  width: number;
+  legendDirection?: 'column' | 'row';
 }
+
 interface UseBarStackState {
-  barSize: Size;
-  colorScale;
-  input;
+  total: number;
+  isSmall: boolean;
+  titleVariant: 'xs' | 'sm' | 'md';
   isVerticalBar: boolean;
-  keys: Array<string>;
   legendScale: LegendScale;
-  svgContainerSize: Size;
-  total: number;
-  xScale;
-  yScale;
+  colorScale;
+  formattedLegendDirection: 'column' | 'row';
 }
 
 const useResponsiveBarStack = ({
@@ -40,87 +30,73 @@ const useResponsiveBarStack = ({
   height,
   width,
   unit = 'number',
-  titleRef,
-  legendRef,
-  size
+  legendDirection
 }: UseBarStackProps): UseBarStackState => {
-  const isVerticalBar = equals(variant, 'vertical');
-
-  const heightOfTitle = titleRef.current?.offsetHeight || 0;
-  const widthOfLegend = legendRef.current?.offsetWidth || 0;
-
-  const horizontalGap = widthOfLegend > 0 ? 12 : 0;
-  const verticalGap = heightOfTitle > 0 ? 8 : 0;
-
-  const svgContainerSize = {
-    height: isVerticalBar ? height - heightOfTitle - verticalGap : size,
-    width: isVerticalBar ? size : width - widthOfLegend - horizontalGap
-  };
-
-  const barSize = {
-    height: gt(height / 2, svgContainerSize.height - 16)
-      ? svgContainerSize.height - 16
-      : svgContainerSize.height - 46,
-    width: svgContainerSize.width - 16
-  };
-
-  const total = Math.floor(data.reduce((acc, { value }) => acc + value, 0));
-
-  const yScale = isVerticalBar
-    ? scaleLinear({
-        domain: [0, total]
-      })
-    : scaleBand({
-        domain: [0, 0],
-        padding: 0
-      });
-
-  const xScale = isVerticalBar
-    ? scaleBand({
-        domain: [0, 0],
-        padding: 0
-      })
-    : scaleLinear({
-        domain: [0, total]
-      });
-
-  const keys = pluck('label', data);
-
-  const colorsRange = pluck('color', data);
-
-  const colorScale = scaleOrdinal({
-    domain: keys,
-    range: colorsRange
-  });
-
-  const legendScale = {
-    domain: data.map(({ value }) => getValueByUnit({ total, unit, value })),
-    range: colorsRange
-  };
-
-  const xMax = barSize.width;
-  const yMax = barSize.height;
-
-  xScale.rangeRound([0, xMax]);
-  yScale.range([yMax, 0]);
-
-  const input = data.reduce((acc, { label, value }) => {
-    acc[label] = value;
-
-    return acc;
-  }, {});
+  const total = useMemo(
+    () => Math.floor(data.reduce((acc, { value }) => acc + value, 0)),
+    [data]
+  );
+
+  const isVerticalBar = useMemo(() => equals(variant, 'vertical'), [variant]);
+
+  const isSmall = useMemo(
+    () => Math.floor(height) < 90,
+    [isVerticalBar, height]
+  );
+
+  const titleVariant = useMemo(() => {
+    if (width <= 105) {
+      return 'xs';
+    }
+
+    if (width <= 150 || isSmall) {
+      return 'sm';
+    }
+
+    return 'md';
+  }, [isSmall, width]);
+
+  const keys = useMemo(() => pluck('label', data), [data]);
+
+  const colorsRange = useMemo(() => pluck('color', data), [data]);
+
+  const colorScale = useMemo(
+    () =>
+      scaleOrdinal({
+        domain: keys,
+        range: colorsRange
+      }),
+    [keys, colorsRange]
+  );
+
+  const legendScale = useMemo(
+    () => ({
+      domain: data.map(({ value }) => getValueByUnit({ total, unit, value })),
+      range: colorsRange
+    }),
+    [data, colorsRange]
+  );
+
+  const formattedLegendDirection = useMemo(() => {
+    if (!isNil(legendDirection)) {
+      return legendDirection;
+    }
+
+    if (equals(variant, 'horizontal')) {
+      return 'row';
+    }
+
+    return 'column';
+  }, [legendDirection, variant]);
 
   return {
-    barSize,
-    colorScale,
-    input,
+    total,
+    isSmall,
     isVerticalBar,
-    keys,
+    titleVariant,
     legendScale,
-    svgContainerSize,
-    total,
-    xScale,
-    yScale
+    colorScale,
+    formattedLegendDirection
   };
 };
 

package/src/Graph/Legend/Legend.styles.ts

@@ -0,0 +1,10 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()((theme) => ({
+  container: {
+    padding: theme.spacing(1),
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius,
+    width: 'fit-content'
+  }
+}));

package/src/Graph/Legend/Legend.tsx

@@ -1,9 +1,13 @@
 import { LegendOrdinal } from '@visx/legend';
 import { scaleOrdinal } from '@visx/scale';
 
+import { equals } from 'ramda';
+import { useStyles } from './Legend.styles';
 import { LegendProps } from './models';
 
 const Legend = ({ scale, direction = 'column' }: LegendProps): JSX.Element => {
+  const { classes } = useStyles();
+
   const legendScale = scaleOrdinal({
     domain: scale.domain,
     range: scale.range
@@ -12,8 +16,9 @@ const Legend = ({ scale, direction = 'column' }: LegendProps): JSX.Element => {
   return (
     <LegendOrdinal
       direction={direction}
-      labelMargin="0 16px 0 0"
       scale={legendScale}
+      labelMargin={equals(direction, 'row') ? '0 12px 0 0' : '0 0 0 0'}
+      className={classes.container}
     />
   );
 };