@centreon/ui 26.3.3 → 26.3.5

package/package.json

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

package/src/Graph/BarChart/BarStack.tsx

@@ -1,4 +1,4 @@
-import { memo, ReactElement } from 'react';
+import { ReactElement, memo } from 'react';
 
 import { ScaleType, scaleBand } from '@visx/scale';
 import { BarRounded } from '@visx/shape';
@@ -123,10 +123,10 @@ const BarStack = ({
             const barY =
               isNegativeValue && isStacked && !shouldApplyRadiusOnBottom
                 ? getPadding({
-                  isNegativeValue,
-                  padding: bar.y,
-                  size: bar.height
-                })
+                    isNegativeValue,
+                    padding: bar.y,
+                    size: bar.height
+                  })
                 : bar.y;
 
             return (
@@ -139,10 +139,10 @@ const BarStack = ({
                   barWidth,
                   y: isHorizontal
                     ? getPadding({
-                      isNegativeValue,
-                      padding: bar.y,
-                      size: bar.height
-                    })
+                        isNegativeValue,
+                        padding: bar.y,
+                        size: bar.height
+                      })
                     : barPadding,
                   isFirstBar: shouldApplyRadiusOnBottom,
                   isHorizontal,
@@ -157,19 +157,19 @@ const BarStack = ({
                   isHorizontal
                     ? barPadding
                     : getPadding({
-                      isNegativeValue,
-                      padding: bar.x,
-                      size: bar.width
-                    })
+                        isNegativeValue,
+                        padding: bar.x,
+                        size: bar.width
+                      })
                 }
                 y={isHorizontal ? barY : barPadding}
                 onMouseEnter={
                   isTooltipHidden
                     ? undefined
                     : hoverBar({
-                      barIndex,
-                      highlightedMetric: Number(bar.key)
-                    })
+                        barIndex,
+                        highlightedMetric: Number(bar.key)
+                      })
                 }
                 onMouseLeave={isTooltipHidden ? undefined : exitBar}
               />

package/src/Graph/BarChart/MemoizedGroup.tsx

@@ -59,17 +59,22 @@ const MemoizedGroup = ({
         const linesBar = isStackedBar
           ? stackedLinesTimeSeriesPerStackKeyAndUnit[bar.key].lines
           : (notStackedLines.find(({ metric_id }) =>
-            equals(metric_id, Number(bar.key))
-          ) as Line);
+              equals(metric_id, Number(bar.key))
+            ) as Line);
         const timeSeriesBar = isStackedBar
           ? stackedLinesTimeSeriesPerStackKeyAndUnit[bar.key].timeSeries
           : notStackedTimeSeries.map((timeSerie) => ({
-            timeTick: timeSerie.timeTick,
-            [bar.key]: timeSerie[Number(bar.key)]
-          }));
+              timeTick: timeSerie.timeTick,
+              [bar.key]: timeSerie[Number(bar.key)]
+            }));
 
-        const unit = isStackedBar ? bar.key.split('-')[1] : (linesBar as Line).unit;
-        const yScale = unit === '' && yScalesPerUnit[unit] === undefined ? yScalesPerUnit[undefined] : yScalesPerUnit[unit];
+        const unit = isStackedBar
+          ? bar.key.split('-')[1]
+          : (linesBar as Line).unit;
+        const yScale =
+          unit === '' && yScalesPerUnit[unit] === undefined
+            ? yScalesPerUnit[undefined]
+            : yScalesPerUnit[unit];
 
         return isStackedBar ? (
           <BarStack

package/src/Graph/Chart/BasicComponents/Lines/StackedLines/index.tsx

@@ -13,6 +13,7 @@ import {
   type
 } from 'ramda';
 
+import { ReactElement } from 'react';
 import { getDates, getTime } from '../../../../common/timeSeries';
 import { Line, TimeValue } from '../../../../common/timeSeries/models';
 import {
@@ -27,7 +28,6 @@ import { StackValue } from '../../../InteractiveComponents/AnchorPoint/models';
 import { getCurveFactory, getFillColor } from '../../../common';
 import { LineStyle } from '../../../models';
 import Point from '../Point';
-import { ReactElement } from 'react';
 
 interface Props {
   areaTransparency?: number;
@@ -135,9 +135,9 @@ const StackLines = ({
                   equals(style?.showArea, false)
                     ? 'transparent'
                     : getFillColor({
-                      areaColor: areaColor || lineColor,
-                      transparency: formattedTransparency
-                    })
+                        areaColor: areaColor || lineColor,
+                        transparency: formattedTransparency
+                      })
                 }
                 opacity={highlight === false ? 0.3 : 1}
                 stroke={lineColor}

package/src/Graph/Chart/BasicComponents/Lines/index.tsx

@@ -103,13 +103,18 @@ const Lines = ({
           {Object.entries(stackedLinesData).map(
             ([stackedKey, { lines, timeSeries: stackedTimeSeries }]) => {
               const [, unit] = stackedKey.split('-');
+              const yScale =
+                unit === '' && yScalesPerUnit[unit] === undefined
+                  ? yScalesPerUnit[undefined]
+                  : yScalesPerUnit[unit];
+
               return (
                 <StackedLines
                   lineStyle={lineStyle}
                   key={`stacked-${unit}`}
                   lines={lines}
                   timeSeries={stackedTimeSeries}
-                  yScale={yScalesPerUnit[unit ?? undefined]}
+                  yScale={yScale}
                   {...commonStackedLinesProps}
                 />
               );
@@ -128,7 +133,10 @@ const Lines = ({
                     invert: '1',
                     scale,
                     scaleLogarithmicBase,
-                    unit: unit ?? undefined,
+                    unit:
+                      unit === '' && yScalesPerUnit[unit] === undefined
+                        ? undefined
+                        : unit,
                     yScalesPerUnit
                   })}
                   {...commonStackedLinesProps}
@@ -152,107 +160,107 @@ const Lines = ({
 
       {displayAreaRegularLines
         ? regularLines.map(
-          ({
-            areaColor,
-            transparency,
-            lineColor,
-            filled,
-            unit,
-            highlight,
-            invert,
-            metric_id,
-            ...rest
-          }) => {
-            const yScale = getYScale({
-              invert,
-              scale,
-              scaleLogarithmicBase,
+            ({
+              areaColor,
+              transparency,
+              lineColor,
+              filled,
               unit,
-              yScalesPerUnit
-            });
-            const relatedTimeSeries = getTimeSeriesForLines({
+              highlight,
               invert,
-              lines: [
-                {
-                  areaColor,
-                  filled,
-                  highlight,
-                  invert,
-                  lineColor,
-                  metric_id,
-                  transparency,
-                  unit,
-                  ...rest
-                }
-              ],
-              timeSeries
-            });
+              metric_id,
+              ...rest
+            }) => {
+              const yScale = getYScale({
+                invert,
+                scale,
+                scaleLogarithmicBase,
+                unit,
+                yScalesPerUnit
+              });
+              const relatedTimeSeries = getTimeSeriesForLines({
+                invert,
+                lines: [
+                  {
+                    areaColor,
+                    filled,
+                    highlight,
+                    invert,
+                    lineColor,
+                    metric_id,
+                    transparency,
+                    unit,
+                    ...rest
+                  }
+                ],
+                timeSeries
+              });
 
-            const style = getStyle({
-              style: lineStyle,
-              metricId: metric_id
-            }) as LineStyle;
+              const style = getStyle({
+                style: lineStyle,
+                metricId: metric_id
+              }) as LineStyle;
 
-            return (
-              <g key={metric_id}>
-                {displayGuidingLines && (
-                  <RegularAnchorPoint
+              return (
+                <g key={metric_id}>
+                  {displayGuidingLines && (
+                    <RegularAnchorPoint
+                      areaColor={areaColor || lineColor}
+                      lineColor={lineColor}
+                      metric_id={metric_id}
+                      timeSeries={relatedTimeSeries}
+                      transparency={transparency}
+                      xScale={xScale}
+                      yScale={yScale}
+                      maxLeftAxisCharacters={maxLeftAxisCharacters}
+                      hasSecondUnit={hasSecondUnit}
+                    />
+                  )}
+                  {style?.showPoints &&
+                    getDates(relatedTimeSeries).map((timeTick) => (
+                      <Point
+                        key={timeTick.toString()}
+                        lineColor={lineColor}
+                        metric_id={metric_id}
+                        radius={getPointRadius(style?.lineWidth)}
+                        timeSeries={relatedTimeSeries}
+                        timeTick={timeTick}
+                        xScale={xScale}
+                        yPoint={getYAnchorPoint({
+                          metric_id,
+                          timeSeries: relatedTimeSeries,
+                          timeTick,
+                          yScale
+                        })}
+                        yScale={yScale}
+                      />
+                    ))}
+                  <RegularLine
                     areaColor={areaColor || lineColor}
+                    curve={style?.curve || 'linear'}
+                    dashLength={style?.dashLength}
+                    dashOffset={style?.dashOffset}
+                    dotOffset={style?.dotOffset}
+                    filled={isNil(style?.showArea) ? filled : style.showArea}
+                    graphHeight={height}
+                    highlight={highlight}
                     lineColor={lineColor}
+                    lineWidth={style?.lineWidth || 2}
                     metric_id={metric_id}
                     timeSeries={relatedTimeSeries}
-                    transparency={transparency}
+                    transparency={
+                      isNil(style?.areaTransparency)
+                        ? transparency || 80
+                        : style.areaTransparency
+                    }
+                    unit={unit}
                     xScale={xScale}
                     yScale={yScale}
-                    maxLeftAxisCharacters={maxLeftAxisCharacters}
-                    hasSecondUnit={hasSecondUnit}
                   />
-                )}
-                {style?.showPoints &&
-                  getDates(relatedTimeSeries).map((timeTick) => (
-                    <Point
-                      key={timeTick.toString()}
-                      lineColor={lineColor}
-                      metric_id={metric_id}
-                      radius={getPointRadius(style?.lineWidth)}
-                      timeSeries={relatedTimeSeries}
-                      timeTick={timeTick}
-                      xScale={xScale}
-                      yPoint={getYAnchorPoint({
-                        metric_id,
-                        timeSeries: relatedTimeSeries,
-                        timeTick,
-                        yScale
-                      })}
-                      yScale={yScale}
-                    />
-                  ))}
-                <RegularLine
-                  areaColor={areaColor || lineColor}
-                  curve={style?.curve || 'linear'}
-                  dashLength={style?.dashLength}
-                  dashOffset={style?.dashOffset}
-                  dotOffset={style?.dotOffset}
-                  filled={isNil(style?.showArea) ? filled : style.showArea}
-                  graphHeight={height}
-                  highlight={highlight}
-                  lineColor={lineColor}
-                  lineWidth={style?.lineWidth || 2}
-                  metric_id={metric_id}
-                  timeSeries={relatedTimeSeries}
-                  transparency={
-                    isNil(style?.areaTransparency)
-                      ? transparency || 80
-                      : style.areaTransparency
-                  }
-                  unit={unit}
-                  xScale={xScale}
-                  yScale={yScale}
-                />
-              </g>
-            );
-          }
-        )
+                </g>
+              );
+            }
+          )
         : null}
     </g>
   );

package/src/Graph/Chart/Legend/index.tsx

@@ -81,17 +81,17 @@ const MainLegend = ({
 
   const contextMenuClick =
     (metricId: number) =>
-      (event: MouseEvent): void => {
-        if (!secondaryClick) {
-          return;
-        }
-        event.preventDefault();
-        secondaryClick({
-          element: event.target,
-          metricId,
-          position: [event.pageX, event.pageY]
-        });
-      };
+    (event: MouseEvent): void => {
+      if (!secondaryClick) {
+        return;
+      }
+      event.preventDefault();
+      secondaryClick({
+        element: event.target,
+        metricId,
+        position: [event.pageX, event.pageY]
+      });
+    };
 
   const selectMetric = ({
     event,

package/src/Graph/SingleBar/ResponsiveSingleBar.tsx

@@ -18,7 +18,7 @@ import { Metric } from '../common/timeSeries/models';
 import { useTooltipStyles } from '../common/useTooltipStyles';
 import { getColorFromDataAndTresholds } from '../common/utils';
 
-import { barHeights } from './ThresholdLine';
+import { barHeights, lineMargins } from './ThresholdLine';
 import Thresholds, { groupMargin } from './Thresholds';
 import { SingleBarProps } from './models';
 
@@ -36,7 +36,9 @@ const ResponsiveSingleBar = ({
   baseColor,
   size = 'medium',
   showLabels = true,
-  max
+  max,
+  direction = 'column',
+  textWidth
 }: Props): JSX.Element => {
   const { classes } = useTooltipStyles();
   const theme = useTheme();
@@ -79,16 +81,26 @@ const ResponsiveSingleBar = ({
 
   const textHeight = isSmall ? 46 : 27;
 
+  const textY = useMemo(() => {
+    if (direction === 'row' && isSmall) {
+      return 2;
+    }
+    if (direction === 'row' && !isSmall) {
+      return 22;
+    }
+    return isSmall ? 10 : 25;
+  }, [direction, isSmall]);
+
   const text = showLabels && (
     <text
-      dominantBaseline="middle"
+      dominantBaseline={direction === 'row' ? 'hanging' : 'middle'}
       style={{
         fill: barColor,
         ...textStyle
       }}
-      textAnchor="middle"
-      x="50%"
-      y={isSmall ? 10 : 25}
+      textAnchor={direction === 'row' ? 'start' : 'middle'}
+      x={direction === 'row' ? 0 : '50%'}
+      y={textY}
     >
       {formatMetricValueWithUnit({
         base: 1000,
@@ -99,13 +111,18 @@ const ResponsiveSingleBar = ({
     </text>
   );
 
+  const widthMargin = useMemo(
+    () => (direction === 'row' && textWidth) || 0,
+    [direction, textWidth]
+  );
+
   const xScale = useMemo(
     () =>
       scaleLinear<number>({
         domain: [0, adaptedMaxValue],
-        range: [0, width - 10 || 0]
+        range: [0, width - widthMargin - 10 || 0]
       }),
-    [width, adaptedMaxValue]
+    [width, adaptedMaxValue, widthMargin]
   );
 
   const metricBarWidth = useMemo(
@@ -119,7 +136,10 @@ const ResponsiveSingleBar = ({
 
   const springStyle = useSpring({ width: metricBarWidth });
 
-  const barY = groupMargin + (isSmall ? 0 : 2 * margins.top);
+  const barY =
+    direction === 'row'
+      ? lineMargins[size] / 2
+      : groupMargin + (isSmall ? 0 : 2 * margins.top);
 
   const realBarHeight = !isSmall
     ? clamp(
@@ -161,7 +181,7 @@ const ResponsiveSingleBar = ({
                 height={realBarHeight}
                 rx={4}
                 style={springStyle}
-                x={5}
+                x={direction === 'row' ? textWidth : 5}
                 y={barY}
               />
               <Bar
@@ -171,7 +191,7 @@ const ResponsiveSingleBar = ({
                 ry={4}
                 stroke={alpha(theme.palette.text.primary, 0.3)}
                 width={maxBarWidth}
-                x={5}
+                x={direction === 'row' ? textWidth : 5}
                 y={barY}
               />
               {thresholds.enabled && (
@@ -183,6 +203,8 @@ const ResponsiveSingleBar = ({
                   size={size}
                   thresholds={thresholds}
                   xScale={xScale}
+                  direction={direction}
+                  textWidth={textWidth}
                 />
               )}
             </Group.Group>

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

@@ -118,4 +118,29 @@ describe('Single bar', () => {
 
     cy.makeSnapshot();
   });
+
+  it('displays the value on the left of the bar when the corresponding prop is set', () => {
+    initialize({
+      thresholds: successThresholds,
+      direction: 'row',
+      textWidth: 100
+    });
+
+    cy.contains('0.41 s').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the value on the left of the bar when the corresponding prop is set and the size is mall', () => {
+    initialize({
+      thresholds: criticalThresholds,
+      direction: 'row',
+      textWidth: 70,
+      size: 'small'
+    });
+
+    cy.contains('0.41 s').should('be.visible');
+
+    cy.makeSnapshot();
+  });
 });

package/src/Graph/SingleBar/SingleBar.stories.tsx

@@ -12,7 +12,7 @@ export default meta;
 type Story = StoryObj<typeof SingleBar>;
 
 const Template = (props): JSX.Element => (
-  <div style={{ height: '500px', width: '500px' }}>
+  <div style={{ height: '500px', width: '200px' }}>
     <SingleBar {...props} />
   </div>
 );
@@ -230,3 +230,52 @@ export const smallDisplay: Story = {
   },
   render: SmallTemplate
 };
+
+export const RowDirection: Story = {
+  args: {
+    data: dataLastWeek,
+    direction: 'row',
+    textWidth: 100,
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.6
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
+  },
+  render: Template
+};
+
+export const RowDirectionSmall: Story = {
+  args: {
+    data: dataLastWeek,
+    size: 'small',
+    direction: 'row',
+    textWidth: 70,
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.6
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
+  },
+  render: Template
+};

package/src/Graph/SingleBar/ThresholdLine.tsx

@@ -4,7 +4,9 @@ import { useTheme } from '@mui/material';
 
 import { margins } from '../common/margins';
 
+import { useMemo } from 'react';
 import { groupMargin } from './Thresholds';
+import { SingleBarProps } from './models';
 
 export const barHeights = {
   medium: 72,
@@ -12,12 +14,12 @@ export const barHeights = {
 };
 export const margin = 40;
 
-const lineMargins = {
+export const lineMargins = {
   medium: 10,
   small: 5
 };
 
-interface Props {
+interface Props extends Pick<SingleBarProps, 'direction'> {
   barHeight: number;
   hideTooltip: () => void;
   isSmall: boolean;
@@ -27,6 +29,7 @@ interface Props {
   thresholdType: string;
   value: number;
   xScale: (value: number) => number;
+  textWidth?: number;
 }
 
 export const ThresholdLine = ({
@@ -38,11 +41,13 @@ export const ThresholdLine = ({
   hideTooltip,
   size,
   barHeight,
-  isSmall
+  isSmall,
+  direction,
+  textWidth
 }: Props): JSX.Element => {
   const theme = useTheme();
 
-  const scaledValue = xScale(value) || 0;
+  const scaledValue = xScale(value) + (textWidth || 0) || 0;
 
   const lineMargin = lineMargins[size];
 
@@ -55,25 +60,35 @@ export const ThresholdLine = ({
     ? theme.palette.warning.main
     : theme.palette.error.main;
 
+  const lineY1 = useMemo(() => {
+    if (direction === 'row') {
+      return 0;
+    }
+    return isSmall
+      ? groupMargin - lineMargin
+      : groupMargin + lineMargin + margins.top;
+  }, [direction, isSmall, groupMargin, lineMargin, margins]);
+
+  const lineY2 = useMemo(() => {
+    if (direction === 'row') {
+      return barHeight + lineMargin;
+    }
+    return isSmall
+      ? barHeight + groupMargin - lineMargin + margins.top - 6
+      : barHeight + groupMargin + lineMargin + 2 * margins.top;
+  }, [direction, isSmall, groupMargin, lineMargin, margins]);
+
   return (
     <>
       <line
         data-testid={`${thresholdType}-line-${value}`}
         stroke={lineColor}
-        strokeDasharray="6, 6"
+        strokeDasharray="6, 5"
         strokeWidth={2}
         x1={scaledValue}
         x2={scaledValue + 1}
-        y1={
-          isSmall
-            ? groupMargin - lineMargin
-            : groupMargin + lineMargin + margins.top
-        }
-        y2={
-          isSmall
-            ? barHeight + groupMargin - lineMargin + margins.top - 6
-            : barHeight + groupMargin + lineMargin + 2 * margins.top
-        }
+        y1={lineY1}
+        y2={lineY2}
       />
       <line
         data-testid={`${thresholdType}-line-${value}-tooltip`}
@@ -81,16 +96,8 @@ export const ThresholdLine = ({
         strokeWidth={5}
         x1={scaledValue}
         x2={scaledValue + 1}
-        y1={
-          isSmall
-            ? groupMargin - lineMargin
-            : groupMargin + lineMargin + margins.top
-        }
-        y2={
-          isSmall
-            ? barHeight + groupMargin - lineMargin + margins.top - 6
-            : barHeight + groupMargin + lineMargin + 2 * margins.top
-        }
+        y1={lineY1}
+        y2={lineY2}
         onMouseEnter={onMouseEnter}
         onMouseLeave={hideTooltip}
       />

package/src/Graph/SingleBar/Thresholds.tsx

@@ -1,10 +1,11 @@
 import { Thresholds as ThresholdsModel } from '../common/models';
+import { SingleBarProps } from './models';
 
 import { ThresholdLine } from './ThresholdLine';
 
 export const groupMargin = 25;
 
-interface Props {
+interface Props extends Pick<SingleBarProps, 'direction'> {
   barHeight: number;
   hideTooltip: () => void;
   isSmall: boolean;
@@ -12,6 +13,7 @@ interface Props {
   size: 'small' | 'medium';
   thresholds: ThresholdsModel;
   xScale: (value: number) => number;
+  textWidth?: number;
 }
 
 const Thresholds = ({
@@ -21,7 +23,9 @@ const Thresholds = ({
   hideTooltip,
   size,
   barHeight,
-  isSmall
+  isSmall,
+  direction,
+  textWidth
 }: Props): JSX.Element => (
   <>
     {thresholds.warning.map(({ value, label }) => (
@@ -36,6 +40,8 @@ const Thresholds = ({
         thresholdType="warning"
         value={value}
         xScale={xScale}
+        direction={direction}
+        textWidth={textWidth}
       />
     ))}
     {thresholds.critical.map(({ value, label }) => (
@@ -50,6 +56,8 @@ const Thresholds = ({
         thresholdType="critical"
         value={value}
         xScale={xScale}
+        direction={direction}
+        textWidth={textWidth}
       />
     ))}
   </>

package/src/Graph/SingleBar/models.ts

@@ -8,4 +8,6 @@ export interface SingleBarProps {
   size?: 'medium' | 'small';
   thresholds: Thresholds;
   max?: number;
+  direction?: 'column' | 'row';
+  textWidth?: number; // Applied only when the direction is row
 }

package/src/Graph/common/BaseChart/BaseChart.tsx

@@ -35,8 +35,8 @@ interface Props {
   limitLegend?: number | false;
   lines: Array<Line>;
   setLines:
-  | Dispatch<SetStateAction<Array<Line> | null>>
-  | Dispatch<SetStateAction<Array<Line>>>;
+    | Dispatch<SetStateAction<Array<Line> | null>>
+    | Dispatch<SetStateAction<Array<Line>>>;
   title: string;
   graphHeight: number;
 }
@@ -93,8 +93,8 @@ const BaseChart = ({
                 className={cx(
                   classes.legendContainer,
                   equals(legend?.placement, 'right') &&
-                  !isHorizontal &&
-                  classes.legendContainerVerticalSide
+                    !isHorizontal &&
+                    classes.legendContainerVerticalSide
                 )}
                 ref={legendRef}
               >

package/src/Graph/common/BaseChart/ChartSvgWrapper.tsx

@@ -2,13 +2,13 @@ import { MutableRefObject, ReactElement } from 'react';
 
 import { Group } from '@visx/visx';
 import { equals } from 'ramda';
+import { margin } from '../../Chart/common';
 import { ChartAxis } from '../../Chart/models';
 import Axes from '../Axes';
 import Grids from '../Grids';
 import { Line, TimeValue } from '../timeSeries/models';
 import { useMarginTop } from '../useMarginTop';
 import { computeGElementMarginLeft } from '../utils';
-import { margin } from '../../Chart/common';
 
 interface Props {
   allUnits: Array<string>;

package/src/Graph/common/BaseChart/useComputeBaseChartDimensions.ts

@@ -52,21 +52,21 @@ export const useComputeBaseChartDimensions = ({
 
   const legendBoundingHeight =
     !equals(legendDisplay, false) &&
-      (isNil(legendPlacement) || equals(legendPlacement, 'bottom'))
+    (isNil(legendPlacement) || equals(legendPlacement, 'bottom'))
       ? currentLegendHeight
       : 0;
   const legendBoundingWidth =
     !equals(legendDisplay, false) &&
-      (equals(legendPlacement, 'left') || equals(legendPlacement, 'right'))
+    (equals(legendPlacement, 'left') || equals(legendPlacement, 'right'))
       ? legendRefWidth || 0
       : 0;
 
   const graphWidth =
     width > 0
       ? width -
-      (hasSecondUnit ? maxAxisCharacters * 2 : maxAxisCharacters) * 6 -
-      (hasSecondUnit ? margins.left * 0.8 : margin.left) -
-      legendBoundingWidth
+        (hasSecondUnit ? maxAxisCharacters * 2 : maxAxisCharacters) * 6 -
+        (hasSecondUnit ? margins.left * 0.8 : margin.left) -
+        legendBoundingWidth
       : 0;
   const graphHeight =
     (height || 0) > 0

package/src/Graph/common/timeSeries/index.ts

@@ -20,6 +20,7 @@ import {
   includes,
   isEmpty,
   isNil,
+  isNotNil,
   keys,
   last,
   lt,
@@ -33,8 +34,7 @@ import {
   reject,
   sortBy,
   split,
-  uniq,
-  isNotNil
+  uniq
 } from 'ramda';
 
 import { margin } from '../../Chart/common';
@@ -161,8 +161,8 @@ const getMetrics = (timeValue: TimeValue): Array<string> =>
 
 const getValueForMetric =
   (timeValue: TimeValue) =>
-    (metric_id: number): number =>
-      prop(metric_id, timeValue) as number;
+  (metric_id: number): number =>
+    prop(metric_id, timeValue) as number;
 
 const getUnits = (lines: Array<Line>): Array<string> =>
   pipe(map(prop('unit')), uniq)(lines);
@@ -309,8 +309,8 @@ const getTimeSeriesForLines = ({
             ...acc,
             [metric_id]:
               invert &&
-                metricsValue[metric_id] &&
-                gt(metricsValue[metric_id], 0)
+              metricsValue[metric_id] &&
+              gt(metricsValue[metric_id], 0)
                 ? negate(metricsValue[metric_id])
                 : metricsValue[metric_id]
           };
@@ -343,10 +343,10 @@ const getYScale = ({
 
   return invert
     ? getScaleType(scale)({
-      base: scaleLogarithmicBase,
-      domain: yScale.domain().reverse(),
-      range: yScale.range().reverse()
-    })
+        base: scaleLogarithmicBase,
+        domain: yScale.domain().reverse(),
+        range: yScale.range().reverse()
+      })
     : yScale;
 };
 
@@ -391,40 +391,40 @@ const getScale = ({
   const sanitizedValuesForMinimum = min
     ? [min]
     : getSanitizedValues([
-      invert && graphValues.every(lt(0))
-        ? negate(getMax(graphValues))
-        : getMin(graphValues),
-      !isEmpty(stackedValues) &&
-      !equals(stackedValues, [0]) &&
-      getMin(stackedValues),
-      Math.min(...thresholds)
-    ]);
+        invert && graphValues.every(lt(0))
+          ? negate(getMax(graphValues))
+          : getMin(graphValues),
+        !isEmpty(stackedValues) &&
+          !equals(stackedValues, [0]) &&
+          getMin(stackedValues),
+        Math.min(...thresholds)
+      ]);
   const minValue = Math.min(...sanitizedValuesForMinimum.filter(isNotNil));
 
   const sanitizedValuesForMaximum = max
     ? [max]
     : getSanitizedValues([
-      getMax(graphValues),
-      getMax(stackedValues),
-      hasOnlyZeroesHasValue(graphValues) ? 1 : null,
-      Math.max(...thresholds)
-    ]);
+        getMax(graphValues),
+        getMax(stackedValues),
+        hasOnlyZeroesHasValue(graphValues) ? 1 : null,
+        Math.max(...thresholds)
+      ]);
   const maxValue = Math.max(...sanitizedValuesForMaximum.filter(isNotNil));
 
   const minValueWithMargin =
     (hasDisplayAsBar && minValue > 0) ||
-      (hasLineFilled &&
-        Math.max(maxValue, minValue) > minValue &&
-        minValue > 0) ||
-      (hasStackedLines && minValue > maxValue)
+    (hasLineFilled &&
+      Math.max(maxValue, minValue) > minValue &&
+      minValue > 0) ||
+    (hasStackedLines && minValue > maxValue)
       ? 0
       : minValue - Math.abs(minValue) * 0.05;
   const maxValueWithMargin =
     (hasDisplayAsBar && maxValue < 0) ||
-      (hasLineFilled &&
-        Math.min(maxValue, minValue) < maxValue &&
-        maxValue < 0) ||
-      (hasStackedLines && minValue > maxValue)
+    (hasLineFilled &&
+      Math.min(maxValue, minValue) < maxValue &&
+      maxValue < 0) ||
+    (hasStackedLines && minValue > maxValue)
       ? 0
       : maxValue + Math.abs(maxValue) * 0.05;
 
@@ -521,11 +521,11 @@ const getYScaleUnit = ({
 
   const stackedValues = hasStackedLines
     ? getStackedMetricValues({
-      lines: getSortedStackedLines(dataLines).filter(
-        ({ unit: stackedUnit }) => equals(unit, stackedUnit)
-      ),
-      timeSeries: dataTimeSeries
-    })
+        lines: getSortedStackedLines(dataLines).filter(
+          ({ unit: stackedUnit }) => equals(unit, stackedUnit)
+        ),
+        timeSeries: dataTimeSeries
+      })
     : [];
 
   return getScale({
@@ -538,8 +538,8 @@ const getYScaleUnit = ({
       ),
     hasLineFilled: isNil(isFilled)
       ? dataLines.some(
-        ({ unit: lineUnit, filled }) => equals(unit, lineUnit) && filled
-      )
+          ({ unit: lineUnit, filled }) => equals(unit, lineUnit) && filled
+        )
       : isFilled,
     hasStackedLines: dataLines.some(
       ({ unit: lineUnit, stackKey, stackOrder }) =>

package/src/RichTextEditor/RichTextEditor.tsx

@@ -55,12 +55,6 @@ const useStyles = makeStyles<{ toolbarPositions: 'start' | 'end' }>()(
     bold: {
       fontWeight: theme.typography.fontWeightBold
     },
-    container: equals(toolbarPositions, 'end')
-      ? {
-          display: 'flex',
-          flexDirection: 'column-reverse'
-        }
-      : {},
     error: {
       color: theme.palette.error.main,
       fontSize: theme.spacing(1.5),
@@ -190,7 +184,9 @@ const RichTextEditor = ({
 
   return (
     <LexicalComposer initialConfig={initialConfig}>
-      <div className={classes.container}>
+      <div
+        className={`flex ${toolbarPositions === 'end' ? 'flex-col-reverse' : 'flex-col'}`}
+      >
         <div className={classes.toolbar}>
           <ToolbarPlugin
             className={toolbarClassName}

package/src/RichTextEditor/plugins/ToolbarPlugin/index.tsx

@@ -1,7 +1,6 @@
-import { makeStyles } from 'tss-react/mui';
-
 import { Divider } from '@mui/material';
 
+import { ReactElement } from 'react';
 import AlignPicker from './AlignPicker';
 import BlockButtons from './BlockButtons';
 import FormatButtons from './FormatButtons';
@@ -18,26 +17,17 @@ interface Props {
   editable: boolean;
 }
 
-export const useStyles = makeStyles()((theme) => ({
-  container: {
-    alignItems: 'center',
-    columnGap: theme.spacing(1),
-    display: 'flex',
-    marginBottom: theme.spacing(1)
-  }
-}));
-
 const ToolbarPlugin = ({
   editable,
   displayMacrosButton,
   disabled,
   displayBlockButtons,
   className
-}: Props): JSX.Element | null => {
-  const { cx, classes } = useStyles();
-
+}: Props): ReactElement | null => {
   return editable ? (
-    <div className={cx(classes.container, className)}>
+    <div
+      className={`flex items-center gap-2 mb-2 overflow-y-auto ${className}`}
+    >
       <UndoRedoButtons disabled={disabled} />
       {displayBlockButtons && (
         <>

package/src/api/buildListingEndpoint/index.ts

@@ -1,6 +1,5 @@
 import toRawQueryParameters from '../../queryParameters';
 import { QueryParameter } from '../../queryParameters/models';
-
 import { getSearchQueryParameterValue } from './getSearchQueryParameterValue';
 import { BuildListingEndpointParameters, Parameters } from './models';
 
@@ -27,11 +26,25 @@ const buildEndpoint = ({ baseEndpoint, queryParameters }): string => {
   return `${baseEndpoint}?${toRawQueryParameters(queryParameters)}`;
 };
 
+const buildCustomEndpoint = ({ baseEndpoint, queryParameters }): string => {
+  return `${baseEndpoint}&${toRawQueryParameters(queryParameters)}`;
+};
+
 const buildListingEndpoint = ({
   baseEndpoint,
   parameters,
-  customQueryParameters
+  customQueryParameters,
+  isCustomEndpoint = false
 }: BuildListingEndpointParameters): string => {
+  if (isCustomEndpoint) {
+    return buildCustomEndpoint({
+      baseEndpoint,
+      queryParameters: [
+        ...getQueryParameters({ ...parameters, customQueryParameters })
+      ]
+    });
+  }
+  
   return buildEndpoint({
     baseEndpoint,
     queryParameters: [

package/src/api/buildListingEndpoint/models.ts

@@ -4,6 +4,7 @@ export interface BuildListingEndpointParameters {
   baseEndpoint?: string;
   customQueryParameters?: Array<QueryParameter>;
   parameters: Parameters;
+  isCustomEndpoint?: boolean;
 }
 
 export interface SearchMatch {

package/src/components/ItemComposition/ItemComposition.tsx

@@ -19,6 +19,8 @@ export type Props = {
   labelAdd?: string;
   onAddItem?: () => void;
   secondaryLabel?: string;
+  isAddButtonSticky?: boolean;
+  addButtonClassName?: string;
 };
 
 export const ItemComposition = ({
@@ -29,8 +31,10 @@ export const ItemComposition = ({
   addButtonHidden,
   IconAdd,
   displayItemsAsLinked,
-  secondaryLabel
-}: Props): JSX.Element => {
+  secondaryLabel,
+  isAddButtonSticky,
+  addButtonClassName
+}: Props): ReactElement => {
   const { classes } = useItemCompositionStyles();
 
   const hasMoreThanOneChildren = gt(children.length, 1);
@@ -45,7 +49,9 @@ export const ItemComposition = ({
           </div>
         )}
       </div>
-      <div className={classes.buttonAndSecondaryLabel}>
+      <div
+        className={`flex justify-between items-center w-full ${isAddButtonSticky && 'bg-background-paper sticky bottom-0 z-2'} ${addButtonClassName}`}
+      >
         {!addButtonHidden && (
           <Button
             aria-label={labelAdd}

package/src/components/Modal/Modal.styles.ts

@@ -12,7 +12,12 @@ const useStyles = makeStyles<{
       padding: theme.spacing(2.5)
     },
     '&[data-size="fullscreen"]': {
-      zIndex: 0
+      zIndex: 0,
+      margin: 0,
+      marginLeft: props?.left ?? 0,
+      marginRight: props?.right ?? 0,
+      marginTop: props?.top ?? 0,
+      marginBottom: props?.bottom ?? 0
     },
     '&[data-size="fullscreen"] .MuiBackdrop-root': {
       display: 'none'
@@ -20,18 +25,18 @@ const useStyles = makeStyles<{
     '&[data-size="fullscreen"] .MuiDialog-container': {
       alignItems: 'flex-end',
       height: '100vh',
-      justifyContent: 'flex-end'
+      justifyContent: 'flex-end',
+      position: 'relative'
     },
     '&[data-size="fullscreen"] .MuiDialog-paper': {
-      bottom: props?.bottom ?? 0,
-      height: 'calc(100vh - 90px)',
-      left: props?.left ?? 0,
+      bottom: 0,
+      left: 0,
       margin: 0,
       maxWidth: 'unset',
       paddingBottom: theme.spacing(8),
       position: 'absolute',
-      right: props?.right ?? 0,
-      top: props?.top ?? 0,
+      right: 0,
+      top: 0,
       transition: theme.transitions.create('left')
     },
     '&[data-size="large"] .MuiDialog-paper': {
@@ -46,15 +51,13 @@ const useStyles = makeStyles<{
     },
     '&[data-size="xlarge"] .MuiDialog-paper': {
       maxWidth: '900px',
-      width: 'calc(100% - 64px)'
+      width: 'calc(100% - 78px)'
     }
   },
   modalActions: {
     '&[data-fixed="true"]': {
-      background: theme.palette.background.paper,
       padding: theme.spacing(1, 2.5, 2.5, 0),
-      position: 'fixed',
-      width: '100%'
+      position: 'fixed'
     },
     bottom: 0,
     display: 'flex',
@@ -64,14 +67,6 @@ const useStyles = makeStyles<{
     padding: theme.spacing(1, 0, 0, 0),
     right: 0,
     zIndex: theme.zIndex.modal
-  },
-  modalCloseButton: {
-    position: 'absolute',
-    right: theme.spacing(1),
-    svg: {
-      opacity: 0.6
-    },
-    top: theme.spacing(1)
   }
 }));
 

package/src/components/Modal/Modal.tsx

@@ -61,7 +61,7 @@ const Modal = ({
       {...attr}
     >
       {hasCloseButton && (
-        <div className={classes.modalCloseButton}>
+        <div className="absolute top-2 right-3 opacity-60">
           <IconButton
             aria-label="close"
             icon={<CloseIcon />}

package/src/components/Modal/modal.module.css

@@ -12,5 +12,4 @@
   overflow-y: auto;
   overflow-x: hidden;
   height: 100%;
-  padding-right: var(--spacing-4); /* To prevent scrollbar from overlapping content */
 }