@centreon/ui 25.2.2 → 25.2.4

package/package.json

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

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

@@ -61,14 +61,14 @@ const checkWidth = (orientation): void => {
     cy.get('g[class*="visx-rows"] > line')
       .eq(0)
       .should('have.attr', 'x2')
-      .and('equal', '1135');
+      .and('equal', '1145');
 
     return;
   }
   cy.get('g[class*="visx-rows"] > line')
     .eq(0)
     .should('have.attr', 'x2')
-    .and('equal', '1170');
+    .and('equal', '1180');
 };
 
 describe('Bar chart', () => {

package/src/Graph/BarChart/BarGroup.tsx

@@ -1,10 +1,8 @@
-import { memo, useMemo } from 'react';
-
-import { Group } from '@visx/group';
 import { scaleBand, scaleOrdinal } from '@visx/scale';
 import { BarGroupHorizontal, BarGroup as VisxBarGroup } from '@visx/shape';
 import { ScaleLinear } from 'd3-scale';
 import { difference, equals, keys, omit, pick, pluck, uniq } from 'ramda';
+import { memo, useMemo } from 'react';
 
 import { useDeepMemo } from '../../utils';
 import {
@@ -14,8 +12,7 @@ import {
   getUnits
 } from '../common/timeSeries';
 import { Line, TimeValue } from '../common/timeSeries/models';
-
-import BarStack from './BarStack';
+import MemoizedGroup from './MemoizedGroup';
 import { BarStyle } from './models';
 
 // Minimum value for logarithmic scale to avoid log(0)
@@ -161,60 +158,23 @@ const BarGroup = ({
       {...barComponentBaseProps}
     >
       {(barGroups) =>
-        barGroups.map((barGroup) => (
-          <Group
-            key={`bar-group-${barGroup.index}-${barGroup.x0}`}
-            left={barGroup.x0}
-            top={barGroup.y0}
-          >
-            {barGroup.bars.map((bar) => {
-              const isStackedBar = bar.key.startsWith('stacked-');
-              const linesBar = isStackedBar
-                ? stackedLinesTimeSeriesPerUnit[bar.key.replace('stacked-', '')]
-                    .lines
-                : (notStackedLines.find(({ metric_id }) =>
-                    equals(metric_id, Number(bar.key))
-                  ) as Line);
-              const timeSeriesBar = isStackedBar
-                ? stackedLinesTimeSeriesPerUnit[bar.key.replace('stacked-', '')]
-                    .timeSeries
-                : notStackedTimeSeries.map((timeSerie) => ({
-                    timeTick: timeSerie.timeTick,
-                    [bar.key]: timeSerie[Number(bar.key)]
-                  }));
-
-              return isStackedBar ? (
-                <BarStack
-                  key={`bar-${barGroup.index}-${bar.width}-${bar.y}-${bar.height}-${bar.x}`}
-                  barIndex={barGroup.index}
-                  barPadding={isHorizontal ? bar.x : bar.y}
-                  barStyle={barStyle}
-                  barWidth={isHorizontal ? bar.width : bar.height}
-                  isHorizontal={isHorizontal}
-                  isTooltipHidden={isTooltipHidden}
-                  lines={linesBar}
-                  timeSeries={timeSeriesBar}
-                  yScale={yScalesPerUnit[bar.key.replace('stacked-', '')]}
-                  neutralValue={neutralValue}
-                />
-              ) : (
-                <BarStack
-                  key={`bar-${barGroup.index}-${bar.width}-${bar.y}-${bar.height}-${bar.x}`}
-                  barIndex={barGroup.index}
-                  barPadding={isHorizontal ? bar.x : bar.y}
-                  barStyle={barStyle}
-                  barWidth={isHorizontal ? bar.width : bar.height}
-                  isHorizontal={isHorizontal}
-                  isTooltipHidden={isTooltipHidden}
-                  lines={[linesBar]}
-                  timeSeries={timeSeriesBar}
-                  yScale={yScalesPerUnit[linesBar.unit]}
-                  neutralValue={neutralValue}
-                />
-              );
-            })}
-          </Group>
-        ))
+        barGroups.map((barGroup, index) => {
+          return (
+            <MemoizedGroup
+              key={`bar-group-${barGroup.index}-${barGroup.x0}`}
+              barGroup={barGroup}
+              barStyle={barStyle}
+              stackedLinesTimeSeriesPerUnit={stackedLinesTimeSeriesPerUnit}
+              notStackedTimeSeries={notStackedTimeSeries}
+              notStackedLines={notStackedLines}
+              isTooltipHidden={isTooltipHidden}
+              isHorizontal={isHorizontal}
+              neutralValue={neutralValue}
+              yScalesPerUnit={yScalesPerUnit}
+              barIndex={index}
+            />
+          );
+        })
       }
     </BarComponent>
   );

package/src/Graph/BarChart/MemoizedGroup.tsx

@@ -0,0 +1,123 @@
+import { Group } from '@visx/group';
+import { BarGroup } from '@visx/shape/lib/types';
+import { ScaleLinear } from 'd3-scale';
+import { equals, omit } from 'ramda';
+import { memo } from 'react';
+import { Line, TimeValue } from '../common/timeSeries/models';
+import BarStack from './BarStack';
+import { BarStyle } from './models';
+
+interface Props {
+  neutralValue: number;
+  isTooltipHidden: boolean;
+  barStyle: BarStyle;
+  yScalesPerUnit: Record<string, ScaleLinear<number, number>>;
+  stackedLinesTimeSeriesPerUnit: Record<
+    string,
+    { lines: Array<Line>; timeSeries: Array<TimeValue> }
+  >;
+  notStackedLines: Array<Line>;
+  notStackedTimeSeries: Array<TimeValue>;
+  isHorizontal: boolean;
+  barGroup: BarGroup<'id'>;
+  barIndex: number;
+}
+
+const MemoizedGroup = ({
+  barGroup,
+  stackedLinesTimeSeriesPerUnit,
+  notStackedLines,
+  notStackedTimeSeries,
+  isHorizontal,
+  barStyle,
+  isTooltipHidden,
+  neutralValue,
+  yScalesPerUnit,
+  barIndex
+}: Props): JSX.Element | null => {
+  const hasEmptyValues = barGroup.bars.every(({ key, value }) => {
+    if (key.startsWith('stacked-')) {
+      const timeValueBar =
+        stackedLinesTimeSeriesPerUnit[key.replace('stacked-', '')].timeSeries[
+          barIndex
+        ];
+
+      return Object.values(omit(['timeTick'], timeValueBar)).every(
+        (value) => !value
+      );
+    }
+
+    return !value;
+  });
+
+  if (hasEmptyValues) {
+    return null;
+  }
+
+  return (
+    <Group left={barGroup.x0} top={barGroup.y0}>
+      {barGroup.bars.map((bar) => {
+        const isStackedBar = bar.key.startsWith('stacked-');
+        const linesBar = isStackedBar
+          ? stackedLinesTimeSeriesPerUnit[bar.key.replace('stacked-', '')].lines
+          : (notStackedLines.find(({ metric_id }) =>
+              equals(metric_id, Number(bar.key))
+            ) as Line);
+        const timeSeriesBar = isStackedBar
+          ? stackedLinesTimeSeriesPerUnit[bar.key.replace('stacked-', '')]
+              .timeSeries
+          : notStackedTimeSeries.map((timeSerie) => ({
+              timeTick: timeSerie.timeTick,
+              [bar.key]: timeSerie[Number(bar.key)]
+            }));
+
+        return isStackedBar ? (
+          <BarStack
+            key={`bar-${barGroup.index}-${bar.width}-${bar.y}-${bar.height}-${bar.x}`}
+            barIndex={barGroup.index}
+            barPadding={isHorizontal ? bar.x : bar.y}
+            barStyle={barStyle}
+            barWidth={isHorizontal ? bar.width : bar.height}
+            isHorizontal={isHorizontal}
+            isTooltipHidden={isTooltipHidden}
+            lines={linesBar as Array<Line>}
+            timeSeries={timeSeriesBar}
+            yScale={yScalesPerUnit[bar.key.replace('stacked-', '')]}
+            neutralValue={neutralValue}
+          />
+        ) : (
+          <BarStack
+            key={`bar-${barGroup.index}-${bar.width}-${bar.y}-${bar.height}-${bar.x}`}
+            barIndex={barGroup.index}
+            barPadding={isHorizontal ? bar.x : bar.y}
+            barStyle={barStyle}
+            barWidth={isHorizontal ? bar.width : bar.height}
+            isHorizontal={isHorizontal}
+            isTooltipHidden={isTooltipHidden}
+            lines={[linesBar as Line]}
+            timeSeries={timeSeriesBar}
+            yScale={yScalesPerUnit[(linesBar as Line).unit]}
+            neutralValue={neutralValue}
+          />
+        );
+      })}
+    </Group>
+  );
+};
+
+export default memo(
+  MemoizedGroup,
+  (prevProps, nextProps) =>
+    equals(prevProps.barGroup, nextProps.barGroup) &&
+    equals(
+      prevProps.stackedLinesTimeSeriesPerUnit,
+      nextProps.stackedLinesTimeSeriesPerUnit
+    ) &&
+    equals(prevProps.notStackedLines, nextProps.notStackedLines) &&
+    equals(prevProps.notStackedTimeSeries, nextProps.notStackedTimeSeries) &&
+    equals(prevProps.isHorizontal, nextProps.isHorizontal) &&
+    equals(prevProps.barStyle, nextProps.barStyle) &&
+    equals(prevProps.isTooltipHidden, nextProps.isTooltipHidden) &&
+    equals(prevProps.neutralValue, nextProps.neutralValue) &&
+    equals(prevProps.barIndex, nextProps.barIndex)
+);

package/src/Graph/BarChart/ResponsiveBarChart.tsx

@@ -13,6 +13,7 @@ import { useIntersection } from '../Chart/useChartIntersection';
 import BaseChart from '../common/BaseChart/BaseChart';
 import ChartSvgWrapper from '../common/BaseChart/ChartSvgWrapper';
 import { useComputeBaseChartDimensions } from '../common/BaseChart/useComputeBaseChartDimensions';
+import { useComputeYAxisMaxCharacters } from '../common/BaseChart/useComputeYAxisMaxCharacters';
 import Thresholds from '../common/Thresholds/Thresholds';
 import { Thresholds as ThresholdsModel } from '../common/models';
 import {
@@ -22,7 +23,6 @@ import {
 } from '../common/timeSeries';
 import { Line } from '../common/timeSeries/models';
 import { useTooltipStyles } from '../common/useTooltipStyles';
-
 import BarGroup from './BarGroup';
 import BarChartTooltip from './Tooltip/BarChartTooltip';
 import { tooltipDataAtom } from './atoms';
@@ -58,7 +58,7 @@ const ResponsiveBarChart = ({
   barStyle,
   skipIntersectionObserver
 }: Props): JSX.Element => {
-  const { title, timeSeries, baseAxis, lines } = graphData;
+  const { title, timeSeries, baseAxis, lines } = graphData || {};
 
   const { classes, cx } = useTooltipStyles();
 
@@ -70,19 +70,30 @@ const ResponsiveBarChart = ({
   const { isInViewport } = useIntersection({ element: graphRef?.current });
 
   const displayedLines = useMemo(
-    () => linesGraph.filter(({ display }) => display),
+    () => (linesGraph || []).filter(({ display }) => display),
     [linesGraph]
   );
 
   const [firstUnit, secondUnit] = getUnits(displayedLines);
   const allUnits = getUnits(lines);
 
+  const { maxLeftAxisCharacters, maxRightAxisCharacters } =
+    useComputeYAxisMaxCharacters({
+      graphData,
+      thresholds,
+      thresholdUnit,
+      axis,
+      firstUnit,
+      secondUnit
+    });
+
   const { legendRef, graphWidth, graphHeight } = useComputeBaseChartDimensions({
     hasSecondUnit: Boolean(secondUnit),
     height,
     legendDisplay: legend?.display,
     legendPlacement: legend?.placement,
-    width
+    width,
+    maxAxisCharacters: maxRightAxisCharacters || maxLeftAxisCharacters
   });
 
   const thresholdValues = flatten([
@@ -216,6 +227,8 @@ const ResponsiveBarChart = ({
             svgRef={graphSvgRef}
             timeSeries={timeSeries}
             xScale={xScale}
+            maxAxisCharacters={maxLeftAxisCharacters}
+            hasSecondUnit={Boolean(secondUnit)}
           >
             <>
               <BarGroup

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

@@ -129,13 +129,13 @@ const initializeCustomUnits = ({
 };
 
 const checkGraphWidth = (): void => {
-  cy.findByTestId('graph-interaction-zone')
-    .should('have.attr', 'width')
-    .and('equal', '1170');
-
   cy.findByTestId('graph-interaction-zone')
     .should('have.attr', 'height')
     .and('equal', '393');
+
+  cy.findByTestId('graph-interaction-zone').then((graph) => {
+    expect(Number(graph[0].attributes.width.value)).to.be.greaterThan(1170);
+  });
 };
 
 describe('Line chart', () => {
@@ -158,8 +158,7 @@ describe('Line chart', () => {
       cy.contains('06/18/2023').should('be.visible');
 
       cy.contains('0.45 s').should('be.visible');
-      cy.contains('75.93%').should('be.visible');
-      cy.contains('0.43 s').should('be.visible');
+      cy.contains('73.65%').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -181,7 +180,7 @@ describe('Line chart', () => {
       cy.get('[data-metric="connTime"]').should(
         'have.attr',
         'data-highlight',
-        'true'
+        'false'
       );
 
       cy.makeSnapshot();
@@ -194,7 +193,7 @@ describe('Line chart', () => {
 
       cy.contains('Min: 70.31').should('be.visible');
 
-      cy.findByTestId('graph-interaction-zone').realMouseMove(1185, 100);
+      cy.findByTestId('graph-interaction-zone').realMouseMove(1198, 100);
 
       cy.get('[data-metric="querytime"]').should('not.exist');
 
@@ -208,10 +207,10 @@ describe('Line chart', () => {
 
       cy.contains('Min: 70.31').should('be.visible');
 
-      cy.findByTestId('graph-interaction-zone').realMouseMove(1152, 100);
+      cy.findByTestId('graph-interaction-zone').realMouseMove(1170, 100);
 
       cy.get('[data-metric="querytime"]').should('be.visible');
-      cy.get('[data-metric="hitratio"]').should('not.exist');
+      cy.get('[data-metric="hitratio"]').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -225,12 +224,12 @@ describe('Line chart', () => {
 
       cy.findByTestId('graph-interaction-zone').realMouseMove(452, 26);
 
-      cy.get('[data-metric="connTime"]').should(
+      cy.get('[data-metric="hitratio"]').should(
         'have.attr',
         'data-highlight',
         'true'
       );
-      cy.get('[data-metric="hitratio"]').should('not.exist');
+      cy.get('[data-metric="querytime"]').should('not.exist');
 
       cy.makeSnapshot();
     });
@@ -286,7 +285,7 @@ describe('Line chart', () => {
 
     cy.findByTestId('graph-interaction-zone')
       .should('have.attr', 'width')
-      .and('equal', '1212');
+      .and('equal', '1200');
 
     cy.findByLabelText('Centreon-Server: Round-Trip Average Time')
       .find('[data-icon="true"]')
@@ -362,8 +361,6 @@ describe('Line chart', () => {
       cy.get('[data-as-list="true"]').should('exist');
 
       cy.contains(':00 AM').should('be.visible');
-
-      cy.makeSnapshot();
     });
 
     it('displays the legend on the right side of the graph as list when the corresponding props are set', () => {
@@ -373,8 +370,6 @@ describe('Line chart', () => {
       cy.get('[data-as-list="true"]').should('exist');
 
       cy.contains(':00 AM').should('be.visible');
-
-      cy.makeSnapshot();
     });
   });
 
@@ -530,8 +525,7 @@ describe('Line chart', () => {
 
       checkGraphWidth();
       cy.contains(':00 AM').should('be.visible');
-      cy.get('circle[cx="4.0625"]').should('be.visible');
-      cy.get('circle[cy="105.21757370835121"]').should('be.visible');
+      cy.get('circle[cx="37.625"]').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -583,7 +577,6 @@ describe('Lines and bars', () => {
     cy.get('path[data-metric="3"]').should('be.visible');
     cy.get('path[data-metric="3"]').should('be.visible');
     cy.findByTestId('stacked-bar-10-0-7650.368581547736').should('be.visible');
-    cy.findByTestId('stacked-bar-2-0-10').should('be.visible');
 
     cy.makeSnapshot();
   });
@@ -634,7 +627,6 @@ describe('Lines and bars', () => {
     cy.get('path[data-metric="3"]').should('be.visible');
     cy.get('path[data-metric="3"]').should('be.visible');
     cy.findByTestId('stacked-bar-10-0-7650.368581547736').should('be.visible');
-    cy.findByTestId('stacked-bar-2-0-10').should('be.visible');
 
     cy.makeSnapshot();
   });

package/src/Graph/Chart/Chart.stories.tsx

@@ -669,7 +669,7 @@ export const linesAndBarsMixedCenteredZero: Story = {
   )
 };
 const CustomYUnits = (props): JSX.Element => {
-  const [leftUnit, setLeftUnit] = useState('b');
+  const [leftUnit, setLeftUnit] = useState('B');
   const [rightUnit, setRightUnit] = useState('ms');
 
   return (

package/src/Graph/Chart/Chart.tsx

@@ -16,6 +16,7 @@ import BarGroup from '../BarChart/BarGroup';
 import BaseChart from '../common/BaseChart/BaseChart';
 import ChartSvgWrapper from '../common/BaseChart/ChartSvgWrapper';
 import { useComputeBaseChartDimensions } from '../common/BaseChart/useComputeBaseChartDimensions';
+import { useComputeYAxisMaxCharacters } from '../common/BaseChart/useComputeYAxisMaxCharacters';
 import Thresholds from '../common/Thresholds/Thresholds';
 import type { Thresholds as ThresholdsModel } from '../common/models';
 import {
@@ -25,7 +26,6 @@ import {
   getYScalePerUnit
 } from '../common/timeSeries';
 import type { Line } from '../common/timeSeries/models';
-
 import Lines from './BasicComponents/Lines';
 import {
   canDisplayThreshold,
@@ -140,13 +140,24 @@ const Chart = ({
     [displayedLines]
   );
 
+  const { maxLeftAxisCharacters, maxRightAxisCharacters } =
+    useComputeYAxisMaxCharacters({
+      graphData,
+      thresholds,
+      thresholdUnit,
+      axis,
+      firstUnit,
+      secondUnit
+    });
+
   const { legendRef, graphWidth, graphHeight } = useComputeBaseChartDimensions({
     hasSecondUnit: Boolean(secondUnit),
     height,
     legendDisplay: legend?.display,
     legendHeight: legend?.height,
     legendPlacement: legend?.placement,
-    width
+    width,
+    maxAxisCharacters: maxRightAxisCharacters || maxLeftAxisCharacters
   });
 
   const xScale = useMemo(
@@ -283,39 +294,45 @@ const Chart = ({
                 svgRef={graphSvgRef}
                 timeSeries={timeSeries}
                 xScale={xScale}
+                maxAxisCharacters={maxLeftAxisCharacters}
+                hasSecondUnit={Boolean(secondUnit)}
               >
                 <>
-                  <BarGroup
-                    barStyle={barStyle}
-                    isTooltipHidden={false}
-                    lines={linesDisplayedAsBar}
-                    orientation="horizontal"
-                    size={graphHeight - margin.top - 5}
-                    timeSeries={timeSeries}
-                    xScale={xScaleBand}
-                    yScalesPerUnit={yScalesPerUnit}
-                  />
-                  <Lines
-                    areaTransparency={lineStyle?.areaTransparency}
-                    curve={lineStyle?.curve || 'linear'}
-                    dashLength={lineStyle?.dashLength}
-                    dashOffset={lineStyle?.dashOffset}
-                    displayAnchor={displayAnchor}
-                    displayedLines={linesDisplayedAsLine}
-                    dotOffset={lineStyle?.dotOffset}
-                    graphSvgRef={graphSvgRef}
-                    height={graphHeight - margin.top}
-                    lineWidth={lineStyle?.lineWidth}
-                    scale={axis?.scale}
-                    scaleLogarithmicBase={axis?.scaleLogarithmicBase}
-                    showArea={lineStyle?.showArea}
-                    showPoints={lineStyle?.showPoints}
-                    timeSeries={timeSeries}
-                    width={graphWidth}
-                    xScale={xScale}
-                    yScalesPerUnit={yScalesPerUnit}
-                    {...shapeLines}
-                  />
+                  {!isEmpty(linesDisplayedAsBar) && (
+                    <BarGroup
+                      barStyle={barStyle}
+                      isTooltipHidden={false}
+                      lines={linesDisplayedAsBar}
+                      orientation="horizontal"
+                      size={graphHeight - margin.top - 5}
+                      timeSeries={timeSeries}
+                      xScale={xScaleBand}
+                      yScalesPerUnit={yScalesPerUnit}
+                    />
+                  )}
+                  {!isEmpty(linesDisplayedAsLine) && (
+                    <Lines
+                      areaTransparency={lineStyle?.areaTransparency}
+                      curve={lineStyle?.curve || 'linear'}
+                      dashLength={lineStyle?.dashLength}
+                      dashOffset={lineStyle?.dashOffset}
+                      displayAnchor={displayAnchor}
+                      displayedLines={linesDisplayedAsLine}
+                      dotOffset={lineStyle?.dotOffset}
+                      graphSvgRef={graphSvgRef}
+                      height={graphHeight - margin.top}
+                      lineWidth={lineStyle?.lineWidth}
+                      scale={axis?.scale}
+                      scaleLogarithmicBase={axis?.scaleLogarithmicBase}
+                      showArea={lineStyle?.showArea}
+                      showPoints={lineStyle?.showPoints}
+                      timeSeries={timeSeries}
+                      width={graphWidth}
+                      xScale={xScale}
+                      yScalesPerUnit={yScalesPerUnit}
+                      {...shapeLines}
+                    />
+                  )}
                   <InteractionWithGraph
                     annotationData={{ ...annotationEvent }}
                     commonData={{

package/src/Graph/Chart/InteractiveComponents/AnchorPoint/GuidingLines.tsx

@@ -11,7 +11,7 @@ const GuidingLines = ({
   graphHeight,
   graphWidth
 }: GuidingLinesModel): JSX.Element | null => {
-  const { positionX, positionY } = useTickGraph({
+  const { positionX, positionY, guidingLinesRef } = useTickGraph({
     timeSeries,
     xScale
   });
@@ -20,7 +20,7 @@ const GuidingLines = ({
   }
 
   return (
-    <>
+    <g ref={guidingLinesRef}>
       <Shape.Line
         fill="dotted"
         from={{ x: positionX, y: 0 }}
@@ -38,7 +38,7 @@ const GuidingLines = ({
         strokeWidth={1}
         to={{ x: graphWidth, y: positionY }}
       />
-    </>
+    </g>
   );
 };
 

package/src/Graph/Chart/InteractiveComponents/AnchorPoint/useTickGraph.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { MutableRefObject, useEffect, useMemo, useRef, useState } from 'react';
 
 import { ScaleLinear } from 'd3-scale';
 import { useAtomValue } from 'jotai';
@@ -15,6 +15,7 @@ interface AnchorPointResult {
   tickAxisBottom: Date | null;
   tickAxisLeft: string | null;
   tickAxisRight: string | null;
+  guidingLinesRef: MutableRefObject<SVGGElement | null>;
 }
 
 interface Props {
@@ -34,6 +35,7 @@ const useTickGraph = ({
   lines = [],
   baseAxis = 1000
 }: Props): AnchorPointResult => {
+  const guidingLinesRef = useRef<SVGGElement | null>(null);
   const [tickAxisBottom, setTickAxisBottom] = useState<Date | null>(null);
   const [tickAxisLeft, setTickAxisLeft] = useState<string | null>(null);
   const [tickAxisRight, setTickAxisRight] = useState<string | null>(null);
@@ -42,12 +44,22 @@ const useTickGraph = ({
 
   const mousePosition = useAtomValue(mousePositionAtom);
 
+  const paddingLeftString = useMemo(
+    () =>
+      (
+        guidingLinesRef.current?.parentElement?.parentElement?.attributes
+          ?.transform.value || ''
+      ).match(/translate\(([0-9\.]+), ([0-9\.]+)\)/)?.[1] || '0',
+    [
+      guidingLinesRef.current?.parentElement?.parentElement?.attributes
+        ?.transform.value
+    ]
+  );
+
   const positionX = mousePosition
-    ? mousePosition[0] - margin.left - 4
-    : undefined;
-  const positionY = mousePosition
-    ? mousePosition[1] - margin.top + 2
+    ? mousePosition[0] - Number(paddingLeftString) - 1
     : undefined;
+  const positionY = mousePosition ? mousePosition[1] - margin.top : undefined;
 
   useEffect(() => {
     if (!mousePosition) {
@@ -86,7 +98,8 @@ const useTickGraph = ({
     positionY,
     tickAxisBottom,
     tickAxisLeft,
-    tickAxisRight
+    tickAxisRight,
+    guidingLinesRef
   };
 };
 export default useTickGraph;

package/src/Graph/common/Axes/index.tsx

@@ -97,7 +97,7 @@ const Axes = ({
         tickLabelProps={() => ({
           ...axisLeft.tickLabelProps(),
           angle: yAxisTickLabelRotation,
-          dx: isHorizontal ? -8 : 4,
+          dx: isHorizontal ? -4 : 4,
           dy: isHorizontal ? 4 : -6
         })}
         tickLength={2}