@scality/core-ui 0.186.0 → 0.188.0

package/src/lib/components/charts/common/chartUtils.ts

@@ -0,0 +1,334 @@
+import { NAN_STRING } from '../../constants';
+import { TooltipDateFormat } from './ChartTooltip';
+import { UnitRange } from '../types';
+
+/* -------------------------------------------------------------------------- */
+/*                                  constants                                 */
+/* -------------------------------------------------------------------------- */
+
+export const maxWidthTooltip = { maxWidth: '20rem' };
+
+/* -------------------------------------------------------------------------- */
+/*                               utils functions                              */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Round a value to a nice number for chart display
+ * Used by Barchart and LineTimeSerieChart for Y-axis scaling
+ */
+export const getRoundReferenceValue = (value: number): number => {
+  if (value <= 0) return 1; // Default for zero or negative values
+
+  // Buffer the value by 10% to avoid being too close to the edge of the chart
+  const bufferedValue = value * 1.1;
+
+  if (value >= 10) {
+    const remainder = value % 10;
+    const incremented = value + (10 - remainder);
+
+    // If the remainder is less than 5, round down to the nearest 10
+    if (remainder < 5) {
+      return value - remainder;
+    }
+
+    // If incrementing would exceed the buffered max, also round down
+    if (incremented > bufferedValue) {
+      return value - remainder;
+    }
+
+    // Otherwise, round up to the next 10
+    return incremented;
+  }
+
+  const magnitude = Math.pow(10, Math.floor(Math.log10(value)));
+
+  const remainder = bufferedValue % magnitude;
+
+  // Round to nice numbers based on normalized value
+  // appearance for small values
+  return remainder === 0 ? bufferedValue : bufferedValue - remainder;
+};
+
+/**
+ * Generate tick values for Y-axis
+ * Used by Barchart and LineTimeSerieChart
+ */
+export const getTicks = (topValue: number, isSymmetrical: boolean) => {
+  const possibleTickNumbers = [4, 3];
+  const numberOfTicks =
+    possibleTickNumbers.find((number) => topValue % (number - 1) === 0) || 3; // Default to 3 ticks if no match
+
+  const tickInterval = topValue / (numberOfTicks - 1);
+  const ticks = Array.from(
+    { length: numberOfTicks },
+    (_, index) => index * tickInterval,
+  );
+  if (isSymmetrical) {
+    // Create negative ticks in order without 0
+    const negativeTicks = Array.from(
+      { length: numberOfTicks - 1 },
+      (_, index) => (index - numberOfTicks + 1) * tickInterval,
+    );
+    ticks.unshift(...negativeTicks);
+  }
+  return ticks;
+};
+
+/**
+ * Return the unit label based on the current dataset, and the valueBase which is used to convert the data
+ * Used by LineTimeSerieChart
+ * @param unitRange - Array of threshold and label pairs
+ * @param maxValue - The maximum value among the data set
+ * @returns Object with valueBase and unitLabel
+ */
+export function getUnitLabel(
+  unitRange: {
+    threshold: number;
+    label: string;
+  }[],
+  maxValue: number,
+): {
+  valueBase: number;
+  unitLabel: string | undefined;
+} {
+  if (!unitRange || unitRange.length === 0) {
+    return {
+      valueBase: 1,
+      unitLabel: undefined,
+    };
+  }
+  // first sort the unitRange
+  unitRange.sort(
+    (
+      unitA: {
+        threshold: number;
+        label: string;
+      },
+      unitB: {
+        threshold: number;
+        label: string;
+      },
+    ) => {
+      return unitA.threshold - unitB.threshold;
+    },
+  );
+  let index = unitRange.findIndex((range) => range.threshold > maxValue);
+
+  // last unit
+  if (index === -1) {
+    index = unitRange.length;
+  }
+
+  if (index === 0) {
+    return {
+      valueBase: unitRange[index].threshold || 1,
+      unitLabel: unitRange[index].label,
+    };
+  }
+
+  return {
+    // if the threshold is 0, we use 1 as the value base to avoid division by 0
+    valueBase: unitRange[index - 1].threshold || 1,
+    unitLabel: unitRange[index - 1].label,
+  };
+}
+
+/**
+ * Computes unit label and normalizes chart data based on unit range.
+ * This is shared logic used by both Barchart and LineTimeSerieChart.
+ *
+ * @param data - Chart data to normalize
+ * @param maxValue - Maximum value in the dataset
+ * @param unitRange - Optional unit range configuration for automatic scaling
+ * @param excludeKey - Key to exclude from normalization (e.g., 'category' for Barchart, 'timestamp' for LineTimeSerieChart)
+ * @returns Object containing unit label, top value for Y-axis, and normalized data
+ */
+export const normalizeChartDataWithUnits = <T extends Record<string, any>>(
+  data: T[],
+  maxValue: number,
+  unitRange: UnitRange | undefined,
+  excludeKey: string,
+): {
+  unitLabel: string | undefined;
+  topValue: number;
+  rechartsData: T[];
+  topDomain: number;
+} => {
+  // If no unit range provided, just calculate top value without unit conversion
+  if (!unitRange || unitRange.length === 0) {
+    const topValue = getRoundReferenceValue(maxValue);
+    return {
+      unitLabel: undefined,
+      topValue,
+      rechartsData: data,
+      topDomain: maxValue * 1.1,
+    };
+  }
+
+  // Get appropriate unit and value base for normalization
+  const { valueBase, unitLabel } = getUnitLabel(unitRange, maxValue);
+  const basedValue = maxValue / valueBase;
+  const topValue = getRoundReferenceValue(basedValue);
+  const topDomain = basedValue * 1.1;
+  // Normalize all numeric values by dividing by valueBase
+  const rechartsData = data.map((dataPoint) => {
+    const normalizedDataPoint: Record<string, number | string> = {
+      ...dataPoint,
+    };
+    Object.entries(dataPoint).forEach(([key, value]) => {
+      if (key !== excludeKey && typeof value === 'number') {
+        normalizedDataPoint[key] = value / valueBase;
+      }
+    });
+    return normalizedDataPoint as T;
+  });
+
+  return { unitLabel, topValue, rechartsData, topDomain };
+};
+
+/**
+ * This function manually adds the missing data points with `null` value caused by downtime of the VMs
+ * Missing data points are only added when the gap between consecutive data points is bigger than 2 intervals
+ * Used by LineTimeSerieChart and Sparkline
+ *
+ * @param orginalValues - The array of the data points are already sorted according to the time series
+ * @param startingTimeStamp - The starting timestamp in seconds
+ * @param sampleDuration - The time span value in seconds
+ * @param sampleInterval - The time difference between two data points in seconds
+ */
+export function addMissingDataPoint(
+  originalValues: [number, number | string | null][],
+  startingTimeStamp?: number,
+  sampleDuration?: number,
+  sampleInterval?: number,
+): [number, number | string | null][] {
+  if (
+    !originalValues ||
+    startingTimeStamp === undefined ||
+    !sampleDuration ||
+    !sampleInterval ||
+    startingTimeStamp < 0 ||
+    sampleDuration <= 0 ||
+    sampleInterval <= 0
+  ) {
+    return [];
+  }
+
+  // If there are no original values, return empty array
+  if (originalValues.length === 0) {
+    return [];
+  }
+
+  const newValues: [number, number | string | null][] = [];
+
+  // add missing data points for the starting time
+  for (
+    let i = startingTimeStamp;
+    i < originalValues[0][0];
+    i += sampleInterval
+  ) {
+    newValues.push([i, NAN_STRING]);
+  }
+
+  // Process all but the last element
+  for (let i = 0; i < originalValues.length - 1; i++) {
+    if (
+      originalValues[i][0] < startingTimeStamp ||
+      originalValues[i][0] > startingTimeStamp + sampleDuration
+    ) {
+      continue;
+    }
+
+    // Always add the current data point
+    newValues.push(originalValues[i]);
+
+    const currentTimestamp = originalValues[i][0];
+    const nextTimestamp = originalValues[i + 1][0];
+    const gap = nextTimestamp - currentTimestamp;
+
+    // Calculate how many missing points to add
+    const missingIntervals = Math.floor(gap / sampleInterval) - 1;
+
+    // Add missing data points with NAN_STRING (only executes if missingIntervals > 0)
+    for (let j = 1; j <= missingIntervals; j++) {
+      const missingTimestamp = currentTimestamp + j * sampleInterval;
+      newValues.push([missingTimestamp, NAN_STRING]);
+    }
+  }
+
+  // Add the last element
+  newValues.push(originalValues[originalValues.length - 1]);
+
+  // add missing data points for the ending time
+  for (
+    let i = originalValues[originalValues.length - 1][0] + sampleInterval;
+    i < startingTimeStamp + sampleDuration;
+    i += sampleInterval
+  ) {
+    newValues.push([i, NAN_STRING]);
+  }
+
+  return newValues;
+}
+/**
+ * Date Format Reference Table
+ * ============================
+ *
+ * This table documents the date formatting logic used across charts:
+ * - X-Axis Format: Used for chart axis labels (formatXAxisDate + LineTimeSerieChart's formatXAxisLabel)
+ * - Tooltip Format: Used for tooltip headers (getTooltipDateFormat)
+ *
+ * ┌─────────────────┬──────────────┬────────────────────────┬──────────────────┬──────────────────────────────────────────┬───────────────────────────┐
+ * │ Interval        │ Duration (s) │ X-axis format          │ Example (X-axis) │ Tooltip format                           │ Example (Tooltip)         │
+ * ├─────────────────┼──────────────┼────────────────────────┼──────────────────┼──────────────────────────────────────────┼───────────────────────────┤
+ * │ Last hour       │ ≤ 3,600      │ HH:MM                  │ 14:05            │ DD MMM HH:MM:SS                          │ 01 Oct 00:15:00           │
+ * │ Last 24 hours   │ ≤ 86,400     │ HH:MM                  │ 23:00            │ DD MMM HH:MM                             │ 01 Oct 00:15              │
+ * │ Last 7 days     │ ≤ 604,800    │ DD MMM HH:MM           │ 27 Sep 10:12     │ DD MMM HH:MM                             │ 01 Oct 00:15              │
+ * │ Long term       │ > 604,800    │ DDMMMYY                │ 15Sep25          │ DD MMM YYYY HH:MM                        │ 01 Oct 2025 00:15         │
+ * └─────────────────┴──────────────┴────────────────────────┴──────────────────┴──────────────────────────────────────────┴───────────────────────────┘
+ *
+ * Note: Duration is in seconds. Some intervals share the same format, which is why both functions only have 3 cases.
+ */
+
+/**
+ * Get the format of the date based on the duration
+ * Used by Barchart CustomTick component
+ * @param duration - Duration in seconds
+ * @returns Formatted string type
+ */
+export const formatXAxisDate = (
+  duration: number,
+): 'time' | 'day-month-abbreviated' | 'chart-long-term-date' => {
+  if (duration <= 24 * 60 * 60) {
+    return 'time';
+  } else if (duration <= 7 * 24 * 60 * 60) {
+    return 'day-month-abbreviated';
+  } else {
+    return 'chart-long-term-date';
+  }
+};
+
+/**
+ * Get the format of the date based on the duration
+ * Used by TooltipHeader component
+ * @param duration - Duration in seconds
+ * @returns Formatted string type
+ */
+export const getTooltipDateFormat: (duration: number) => TooltipDateFormat = (
+  duration: number,
+) => {
+  if (duration <= 60 * 60) {
+    return 'day-month-abbreviated-hour-minute-second';
+  } else if (duration <= 7 * 24 * 60 * 60) {
+    return 'day-month-abbreviated-hour-minute';
+  } else {
+    return 'day-month-abbreviated-year-hour-minute';
+  }
+};
+
+export const formatToISONumber = (value: number): string => {
+  const formattedValue = new Intl.NumberFormat('fr-FR')
+    .format(value)
+    .replace(',', '.');
+  return formattedValue;
+};

package/src/lib/components/{globalhealthbar/useHealthBarData.spec.tsx → charts/globalhealthbar/GlobalHealthBar.hooks.test.tsx}

@@ -1,4 +1,4 @@
-import { useHealthBarData, Alert } from './useHealthBarData';
+import { useHealthBarData, Alert } from './GlobalHealthBar.hooks';
 import { renderHook } from '@testing-library/react';
 describe('useHealthBarData', () => {
   const mockTimestamp = {

package/src/lib/components/{globalhealthbar/GlobalHealthBarRecharts.component.tsx → charts/globalhealthbar/GlobalHealthBar.tsx}

@@ -8,14 +8,14 @@ import {
   YAxis,
 } from 'recharts';
 import styled, { useTheme } from 'styled-components';
-import { GlobalHealthBarTooltip } from './components/GlobalHealthBarTooltip';
-import { HealthBarXAxis } from './components/HealthBarXAxis';
+import { GlobalHealthBarTooltip } from './GlobalHealthBarTooltip';
+import { HealthBarXAxis } from './HealthBarXAxis';
 import {
   CHART_CONFIG,
   getNavigationAction,
   getNavigationStateUpdate,
-} from './healthBarUtils';
-import { Alert, useHealthBarData } from './useHealthBarData';
+} from './GlobalHealthBar.utils';
+import { Alert, useHealthBarData } from './GlobalHealthBar.hooks';
 
 export interface GlobalHealthProps {
   id: string;

package/src/lib/components/{globalhealthbar/healthBarUtils.spec.ts → charts/globalhealthbar/GlobalHealthBar.utils.test.ts}

@@ -10,7 +10,7 @@ import {
   getNavigationAction,
   calculateNavigationIndex,
   getNavigationStateUpdate,
-} from './healthBarUtils';
+} from './GlobalHealthBar.utils';
 
 describe('Health Bar Utils', () => {
   describe('Tick Calculations', () => {

package/src/lib/components/{globalhealthbar/healthBarUtils.ts → charts/globalhealthbar/GlobalHealthBar.utils.ts}

@@ -1,4 +1,4 @@
-import { fontSize } from '../../style/theme';
+import { fontSize } from '../../../style/theme';
 
 // =============================================================================
 // CONSTANTS

package/src/lib/components/{globalhealthbar/components → charts/globalhealthbar}/GlobalHealthBarTooltip.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
 import styled, { css, useTheme } from 'styled-components';
-import { FormattedDateTime, Stack, Text, Wrap, spacing } from '../../../index';
-import { Alert } from '../GlobalHealthBarRecharts.component';
 import { TooltipContentProps } from 'recharts';
+import { FormattedDateTime } from '../../date/FormattedDateTime';
+import { Stack } from '../../../spacing';
+import { Text } from '../../text/Text.component';
+import { Wrap } from '../../../spacing';
+import { spacing } from '../../../spacing';
+import { Alert } from './GlobalHealthBar.hooks';
 import { zIndex } from '../../../style/theme';
-import { CHART_CONFIG, getTooltipPosition } from '../healthBarUtils';
-import { ChartTooltipPortal } from '../../charttooltip/ChartTooltip';
+import { CHART_CONFIG, getTooltipPosition } from './GlobalHealthBar.utils';
+import { ChartTooltipPortal } from '../common/ChartTooltip';
 
 interface GlobalHealthBarTooltipProps {
   tooltipData: Alert | null;

package/src/lib/components/{globalhealthbar/components → charts/globalhealthbar}/HealthBarXAxis.tsx

@@ -6,7 +6,7 @@ import {
   calculateLabelVisibility,
   TIME_CONSTANTS,
   getEdgeMargin,
-} from '../healthBarUtils';
+} from './GlobalHealthBar.utils';
 import { FormattedDateTime } from '../../date/FormattedDateTime';
 
 interface HealthBarXAxisProps {

package/src/lib/components/charts/index.ts

@@ -0,0 +1,59 @@
+// Components
+export { Barchart } from './barchart/Barchart';
+export type {
+  BarchartProps,
+  BarchartBars,
+  BarchartTooltipFn,
+  BarchartSortFn,
+  Point,
+} from './barchart/Barchart';
+
+export { LineTimeSerieChart } from './linetimeseries/LineTimeSerieChart';
+export type {
+  LineChartProps,
+  Serie,
+} from './linetimeseries/LineTimeSerieChart';
+
+export { GlobalHealthBar } from './globalhealthbar/GlobalHealthBar';
+export type { GlobalHealthProps } from './globalhealthbar/GlobalHealthBar';
+export type { Alert } from './globalhealthbar/GlobalHealthBar.hooks';
+
+export { Sparkline } from './sparkline/Sparkline';
+
+// Legend
+export { ChartLegend } from './legend/ChartLegend';
+export {
+  ChartLegendWrapper,
+  useChartId,
+  useChartLegend,
+} from './legend/ChartLegendWrapper';
+
+// Tooltips (for advanced usage)
+export { BarchartTooltip } from './barchart/BarchartTooltip';
+export {
+  ChartTooltipContainer,
+  ChartTooltipItem,
+  ChartTooltipHeader,
+  ChartTooltipItemsContainer,
+  ChartTooltipPortal,
+} from './common/ChartTooltip';
+
+// Shared utilities (for advanced usage)
+export {
+  getRoundReferenceValue,
+  getTicks,
+  getUnitLabel,
+  addMissingDataPoint,
+  formatXAxisDate,
+  getTooltipDateFormat,
+  normalizeChartDataWithUnits,
+} from './common/chartUtils';
+
+// Context Providers (for backward compatibility)
+export {
+  MetricsTimeSpanProvider,
+  useMetricsTimeSpan,
+} from './MetricsTimeSpanProvider';
+
+// Types
+export type { UnitRange, TimeType, CategoryType } from './types';

package/src/lib/components/{chartlegend → charts/legend}/ChartLegend.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { useChartLegend } from './ChartLegendWrapper';
-import { Text, TextVariant } from '../text/Text.component';
-import { chartColors } from '../../style/theme';
+import { Text, TextVariant } from '../../text/Text.component';
+import { chartColors } from '../../../style/theme';
 import { useCallback } from 'react';
 
 type ChartLegendProps = {

package/src/lib/components/{chartlegend → charts/legend}/ChartLegendWrapper.tsx

@@ -9,7 +9,7 @@ import {
   useRef,
 } from 'react';
 import { v4 as uuidv4 } from 'uuid';
-import { ChartColors } from '../../style/theme';
+import { ChartColors } from '../../../style/theme';
 
 export const useChartId = (): string => {
   const idRef = useRef<string | null>(null);

package/src/lib/components/{linetimeseriechart/linetimeseriechart.test.tsx → charts/linetimeseries/LineTimeSerieChart.test.tsx}

@@ -1,12 +1,9 @@
 import { render } from '@testing-library/react';
 import React from 'react';
-import {
-  LineChartProps,
-  LineTimeSerieChart,
-} from './linetimeseriechart.component';
-import { ChartLegendWrapper } from '../chartlegend/ChartLegendWrapper';
+import { LineChartProps, LineTimeSerieChart } from './LineTimeSerieChart';
+import { ChartLegendWrapper } from '../legend/ChartLegendWrapper';
 import { ThemeProvider } from 'styled-components';
-import { coreUIAvailableThemes } from '../../style/theme';
+import { coreUIAvailableThemes } from '../../../style/theme';
 
 const TestSeries = [
   {

package/src/lib/components/{linetimeseriechart/linetimeseriechart.component.tsx → charts/linetimeseries/LineTimeSerieChart.tsx}

@@ -1,3 +1,4 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import {
   CartesianGrid,
   Line,
@@ -8,32 +9,31 @@ import {
   XAxis,
   YAxis,
 } from 'recharts';
-import React, { useCallback, useMemo, useRef, useState } from 'react';
 import styled, { useTheme } from 'styled-components';
-import { Stack } from '../../spacing';
-import { fontSize } from '../../style/theme';
-import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
+import { Stack } from '../../../spacing';
+import { fontSize } from '../../../style/theme';
+import { IconHelp } from '../../iconhelper/IconHelper';
+import { Loader } from '../../loader/Loader.component';
+import { ChartTitleText } from '../../text/Text.component';
+import { LegendShape } from '../legend/ChartLegend';
+import { useChartLegend } from '../legend/ChartLegendWrapper';
+import { StyledResponsiveContainer } from '../common/SharedComponents';
 import {
-  addMissingDataPoint,
-  getUnitLabel,
-} from '../linetemporalchart/ChartUtil';
-import { Loader } from '../loader/Loader.component';
-import { ChartTitleText } from '../text/Text.component';
-import { formatXAxisLabel } from './utils';
-import {
-  ChartTooltipPortal,
-  ChartTooltipItem,
   ChartTooltipHeader,
+  ChartTooltipItem,
   ChartTooltipItemsContainer,
+  ChartTooltipPortal,
   ChartTooltipSeparator,
   TooltipHeader,
-} from '../charttooltip/ChartTooltip';
-import { LegendShape } from '../chartlegend/ChartLegend';
-import { StyledResponsiveContainer } from '../barchartv2/Barchart.component';
-import { getRoundReferenceValue, getTicks } from '../barchartv2/utils';
-import { IconHelp } from '../iconhelper/IconHelper';
-
-const maxWidthTooltip = { maxWidth: '20rem' };
+} from '../common/ChartTooltip';
+import {
+  addMissingDataPoint,
+  formatToISONumber,
+  getTicks,
+  maxWidthTooltip,
+  normalizeChartDataWithUnits,
+} from '../common/chartUtils';
+import { formatXAxisLabel } from './LineTimeSerieChart.utils';
 
 const LineTemporalChartWrapper = styled.div`
   display: flex;
@@ -211,6 +211,16 @@ const isSymmetricalSeries = (
   return 'above' in series && 'below' in series;
 };
 
+/**
+ * Props for LineTimeSerieChart component
+ * @param series - The data series to display
+ * @param title - The title of the chart
+ * @param height - The height of the chart in pixels
+ * @param startingTimeStamp - Starting timestamp in seconds
+ * @param interval - Interval between data points in seconds
+ * @param duration - Total duration of the chart in seconds
+ *
+ */
 export function LineTimeSerieChart({
   series,
   title,
@@ -361,7 +371,6 @@ export function LineTimeSerieChart({
 
   // 3. Transform the data base on the valuebase
   const { topValue, unitLabel, rechartsData, topDomain } = useMemo(() => {
-
     const values = chartData.flatMap((dataPoint) =>
       Object.entries(dataPoint)
         .filter(([key]) => key !== 'timestamp')
@@ -386,22 +395,21 @@ export function LineTimeSerieChart({
     const top = Math.abs(Math.max(...values));
     const bottom = Math.abs(Math.min(...values));
     const maxValue = Math.max(top, bottom);
-    const { valueBase, unitLabel } = yAxisType === 'percentage' ? { valueBase: 1, unitLabel: '%' } : getUnitLabel(unitRange ?? [], maxValue);
-    // Use round reference value to add extra padding to the top value
-    const basedValue = maxValue / valueBase
-    const topDomain = basedValue * 1.1;
-    const topValue = getRoundReferenceValue(basedValue);
-    const rechartsData = chartData.map((dataPoint) => {
-      const normalizedDataPoint = { ...dataPoint };
-      Object.entries(dataPoint).forEach(([key, value]) => {
-        if (key !== 'timestamp' && typeof value === 'number') {
-          normalizedDataPoint[key] = value / valueBase;
-        }
-      });
-      return normalizedDataPoint;
-    });
 
-    return { topValue, unitLabel, rechartsData, topDomain };
+    // Use shared normalization function
+    const result = normalizeChartDataWithUnits(
+      chartData,
+      maxValue,
+      unitRange,
+      'timestamp', // LineTimeSerieChart uses 'timestamp' as the key to exclude
+    );
+
+    return {
+      topValue: result.topValue,
+      unitLabel: result.unitLabel,
+      rechartsData: result.rechartsData,
+      topDomain: result.topDomain,
+    };
   }, [chartData, yAxisType, unitRange]);
 
   // Group series by resource and create color mapping
@@ -516,20 +524,16 @@ export function LineTimeSerieChart({
                 },
               }}
               domain={
-                yAxisType === 'percentage'
-                  ? [0, topDomain]
-                  : yAxisType === 'symmetrical'
-                    ? [-topDomain, topDomain]
-                    : [0, topDomain]
+                yAxisType === 'symmetrical'
+                  ? [-topDomain, topDomain]
+                  : [0, topDomain]
               }
               axisLine={{ stroke: theme.border }}
               tick={{
                 fill: theme.textSecondary,
                 fontSize: fontSize.smaller,
               }}
-              tickFormatter={(value) =>
-                new Intl.NumberFormat('fr-FR').format(value)
-              }
+              tickFormatter={(value) => formatToISONumber(value)}
               ticks={getTicks(topValue, yAxisType === 'symmetrical')}
               interval={0}
             />

package/src/lib/components/{linetimeseriechart/utils.test.ts → charts/linetimeseries/LineTimeSerieChart.utils.test.ts}

@@ -1,4 +1,4 @@
-import { formatXAxisLabel } from './utils';
+import { formatXAxisLabel } from './LineTimeSerieChart.utils';
 
 describe('formatXAxisLabel', () => {
   const mockTimestamp = new Date('2025-09-15T14:30:00Z').getTime();