@scality/core-ui 0.176.0 → 0.177.0

package/src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx

@@ -10,21 +10,18 @@ import {
 } from 'recharts';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import styled, { useTheme } from 'styled-components';
-import { spacing } from '../../spacing';
+import { Stack } from '../../spacing';
 import { fontSize } from '../../style/theme';
-import { Box } from '../box/Box';
 import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
-import { Icon } from '../icon/Icon.component';
 import {
   addMissingDataPoint,
   getUnitLabel,
 } from '../linetemporalchart/ChartUtil';
 import { Loader } from '../loader/Loader.component';
-import { ChartTitleText, Text } from '../text/Text.component';
-import { Tooltip as TooltipComponent } from '../tooltip/Tooltip.component';
+import { ChartTitleText } from '../text/Text.component';
 import { formatXAxisLabel } from './utils';
 import {
-  ChartTooltipContainer,
+  ChartTooltipPortal,
   ChartTooltipItem,
   ChartTooltipHeader,
   ChartTooltipItemsContainer,
@@ -33,6 +30,10 @@ import {
 } 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' };
 
 const LineTemporalChartWrapper = styled.div`
   display: flex;
@@ -40,11 +41,6 @@ const LineTemporalChartWrapper = styled.div`
   justify-content: flex-start;
 `;
 
-const ChartHeader = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
 export type Serie = {
   // the name of the resource
   resource: string;
@@ -112,6 +108,7 @@ const LineTimeSerieChartTooltip = ({
   renderTooltip,
   hoveredValue,
   isSymmetrical,
+  chartContainerRef,
 }: {
   tooltipProps: TooltipContentProps<number, string>;
   unitLabel?: string;
@@ -124,73 +121,87 @@ const LineTimeSerieChartTooltip = ({
   ) => React.ReactNode;
   hoveredValue?: string;
   isSymmetrical?: boolean;
+  chartContainerRef: React.RefObject<HTMLDivElement>;
 }) => {
-  const { active, payload, label } = tooltipProps;
+  const { active, payload, label, coordinate } = tooltipProps;
 
   if (!active || !payload || !payload.length || !label || !isChartActive)
     return null;
 
-  if (renderTooltip) {
-    return renderTooltip(tooltipProps, unitLabel, duration);
-  }
-  // We can't use the default itemSorter method because it's a custom tooltip.
-  // Sort the payload here instead
-  const sortedPayload = [...payload].sort((a, b) => {
-    const aValue = a.value;
-    const bValue = b.value;
-
-    if (aValue >= 0 && bValue >= 0) {
-      return bValue - aValue; // Higher positive values first
-    }
-    if (aValue < 0 && bValue < 0) {
-      return bValue - aValue; // Lower negative values first
-    }
-    return bValue - aValue; // Positives before negatives
-  });
-
-  // Find the transition point between positive and negative values
-  const separatorIndex = sortedPayload.findIndex((entry) => entry.value < 0);
-  const hasBothPositiveAndNegative =
-    separatorIndex > 0 && separatorIndex < sortedPayload.length;
-
-  return (
-    <ChartTooltipContainer>
+  const tooltipContent = renderTooltip ? (
+    renderTooltip(tooltipProps, unitLabel, duration)
+  ) : (
+    <>
       <ChartTooltipHeader>
         <TooltipHeader duration={duration} value={label} />
       </ChartTooltipHeader>
       <ChartTooltipItemsContainer>
-        {sortedPayload.map((entry, index) => {
-          const legendIcon = (
-            <LegendShape
-              color={entry.color}
-              shape="line"
-              chartColors={{ [entry.color]: entry.color }}
-            />
+        {(() => {
+          // We can't use the default itemSorter method because it's a custom tooltip.
+          // Sort the payload here instead
+          const sortedPayload = [...payload].sort((a, b) => {
+            const aValue = a.value;
+            const bValue = b.value;
+
+            if (aValue >= 0 && bValue >= 0) {
+              return bValue - aValue; // Higher positive values first
+            }
+            if (aValue < 0 && bValue < 0) {
+              return bValue - aValue; // Lower negative values first
+            }
+            return bValue - aValue; // Positives before negatives
+          });
+
+          // Find the transition point between positive and negative values
+          const separatorIndex = sortedPayload.findIndex(
+            (entry) => entry.value < 0,
           );
-
-          const isHovered = entry.name === hoveredValue;
-
-          const formattedValue = !Number.isFinite(entry.value)
-            ? '-'
-            : `${entry.value.toFixed(2)} ${unitLabel}`;
-
-          return (
-            <React.Fragment key={index}>
-              {/* Add separator between positive and negative values for symmetrical charts */}
-              {isSymmetrical &&
-                hasBothPositiveAndNegative &&
-                index === separatorIndex && <ChartTooltipSeparator />}
-              <ChartTooltipItem
-                label={entry.name}
-                value={formattedValue}
-                legendIcon={legendIcon}
-                isHovered={isHovered}
+          const hasBothPositiveAndNegative =
+            separatorIndex > 0 && separatorIndex < sortedPayload.length;
+
+          return sortedPayload.map((entry, index) => {
+            const legendIcon = (
+              <LegendShape
+                color={entry.color}
+                shape="line"
+                chartColors={{ [entry.color]: entry.color }}
               />
-            </React.Fragment>
-          );
-        })}
+            );
+
+            const isHovered = entry.name === hoveredValue;
+
+            const formattedValue = !Number.isFinite(entry.value)
+              ? '-'
+              : `${entry.value.toFixed(2)} ${unitLabel}`;
+
+            return (
+              <React.Fragment key={index}>
+                {/* Add separator between positive and negative values for symmetrical charts */}
+                {isSymmetrical &&
+                  hasBothPositiveAndNegative &&
+                  index === separatorIndex && <ChartTooltipSeparator />}
+                <ChartTooltipItem
+                  label={entry.name}
+                  value={formattedValue}
+                  legendIcon={legendIcon}
+                  isHovered={isHovered}
+                />
+              </React.Fragment>
+            );
+          });
+        })()}
       </ChartTooltipItemsContainer>
-    </ChartTooltipContainer>
+    </>
+  );
+
+  return (
+    <ChartTooltipPortal
+      coordinate={coordinate}
+      chartContainerRef={chartContainerRef}
+      isVisible={active && isChartActive}
+    >
+      {tooltipContent}
+    </ChartTooltipPortal>
   );
 };
 
@@ -382,8 +393,8 @@ export function LineTimeSerieChart({
     const maxValue = Math.max(top, bottom);
 
     const { valueBase, unitLabel } = getUnitLabel(unitRange ?? [], maxValue);
-
-    const topValue = Math.ceil(maxValue / valueBase / 10) * 10;
+    // Use round reference value to add extra padding to the top value
+    const topValue = getRoundReferenceValue(maxValue / valueBase);
 
     const rechartsData = chartData.map((dataPoint) => {
       const normalizedDataPoint = { ...dataPoint };
@@ -450,22 +461,15 @@ export function LineTimeSerieChart({
 
   return (
     <LineTemporalChartWrapper>
-      <ChartHeader>
+      <Stack gap="r4">
         <ChartTitleText>
           {title} {unitLabel && `(${unitLabel})`}
         </ChartTitleText>
         {helpText && (
-          <Box ml={spacing.r4}>
-            <TooltipComponent
-              placement={'right'}
-              overlay={<Text>{helpText}</Text>}
-            >
-              <Icon name="Info" color={theme.buttonSecondary} />
-            </TooltipComponent>
-          </Box>
+          <IconHelp tooltipMessage={helpText} overlayStyle={maxWidthTooltip} />
         )}
         {isLoading && <Loader />}
-      </ChartHeader>
+      </Stack>
       <div
         onFocus={() => setIsChartActive(true)}
         onBlur={() => setIsChartActive(false)}
@@ -510,9 +514,8 @@ export function LineTimeSerieChart({
               label={{
                 value: yAxisTitle,
                 angle: 90,
-                position: 'insideRight',
+                dx: 20,
                 style: {
-                  textAnchor: 'middle',
                   fill: theme.textSecondary,
                   fontSize: fontSize.smaller,
                 },
@@ -530,9 +533,9 @@ export function LineTimeSerieChart({
                 fontSize: fontSize.smaller,
               }}
               tickFormatter={(value) =>
-                new Intl.NumberFormat('fr-FR').format(value.toFixed(0))
+                new Intl.NumberFormat('fr-FR').format(value)
               }
-              tickCount={5}
+              ticks={getTicks(topValue, yAxisType === 'symmetrical')}
               interval={0}
             />
             <Tooltip
@@ -545,6 +548,7 @@ export function LineTimeSerieChart({
                   tooltipProps={props}
                   isChartActive={isChartActive}
                   hoveredValue={hoveredValue}
+                  chartContainerRef={chartRef}
                 />
               )}
             />

package/src/lib/components/linetimeseriechart/utils.test.ts

@@ -12,10 +12,10 @@ describe('formatXAxisLabel', () => {
   });
 
   describe('medium duration (≤ 7 days)', () => {
-    it('should format timestamp with day-month-abbreviated format', () => {
+    it('should format timestamp with day-month-abbreviated-hour-minute format', () => {
       const duration = 3 * 24 * 60 * 60; // 3 days
       const result = formatXAxisLabel(mockTimestamp, duration);
-      expect(result).toBe('15 Sep');
+      expect(result).toBe('15 Sep 14:30');
     });
   });
 
@@ -37,7 +37,7 @@ describe('formatXAxisLabel', () => {
     it('should handle exactly 7 days duration', () => {
       const duration = 7 * 24 * 60 * 60; // exactly 7 days
       const result = formatXAxisLabel(mockTimestamp, duration);
-      expect(result).toBe('15 Sep');
+      expect(result).toBe('15 Sep 14:30');
     });
 
     it('should handle just over 7 days duration', () => {

package/src/lib/components/linetimeseriechart/utils.ts

@@ -1,7 +1,7 @@
 import {
   TIME_FORMATER,
-  DAY_MONTH_ABBREVIATED,
   DAY_MONTH_ABBREVIATED_YEAR,
+  DAY_MONTH_ABBREVIATED_HOUR_MINUTE,
 } from '../date/FormattedDateTime';
 
 export const ONE_YEAR_MILLISECONDS = 366 * 24 * 60 * 60 * 1000;
@@ -28,7 +28,7 @@ export const formatXAxisLabel = (
   if (duration <= 24 * 60 * 60) {
     return TIME_FORMATER.format(date);
   } else if (duration <= 7 * 24 * 60 * 60) {
-    return DAY_MONTH_ABBREVIATED.format(date)
+    return DAY_MONTH_ABBREVIATED_HOUR_MINUTE.format(date)
       .replace(',', '')
       .replace(/Sept/g, 'Sep');
   } else {

package/src/lib/style/theme.ts

@@ -60,7 +60,7 @@ export const coreUIAvailableThemesNames = [
   'darkRebrand',
   'artescaLight',
   'ring9dark',
-  'G-Dark'
+  'G-Dark',
 ] as const;
 export type CoreUIThemeName = (typeof coreUIAvailableThemesNames)[number];
 

package/stories/BarChart/barchart.stories.tsx

@@ -39,17 +39,17 @@ export const Playground: Story = {
       {
         label: 'Success',
         data: [
-          ['category1', 2],
-          ['category2', 4],
-          ['category3', 6],
+          ['category1', 1],
+          ['category2', 1],
+          ['category3', 2],
         ],
       },
       {
         label: 'Failed',
         data: [
-          ['category1', 8],
-          ['category2', 10],
-          ['category3', 12],
+          ['category1', 1],
+          ['category2', 1],
+          ['category3', 2],
         ],
       },
     ] as const;
@@ -61,7 +61,11 @@ export const Playground: Story = {
         }}
       >
         <Stack direction="vertical" gap="r16">
-          <Barchart type={{ type: 'category' }} bars={exampleData} />
+          <Barchart
+            type={{ type: 'category' }}
+            bars={exampleData}
+            title="Playground"
+          />
           <ChartLegend shape="rectangle" direction="horizontal" />
         </Stack>
       </ChartLegendWrapper>
@@ -122,6 +126,7 @@ export const Time7Days: Story = {
       >
         <Stack direction="vertical" gap="r16">
           <Barchart
+            title="Time 7 Days"
             type={{
               type: 'time',
               timeRange: {
@@ -192,6 +197,7 @@ export const Time7DaysWithMissingData: Story = {
         }}
       >
         <Barchart
+          title="Time 7 Days With Missing Data"
           type={{
             type: 'time',
             timeRange: {
@@ -285,6 +291,7 @@ export const TimeLast24Hours: Story = {
         }}
       >
         <Barchart
+          title="Time Last 24 Hours"
           type={{
             type: 'time',
             timeRange: {
@@ -332,6 +339,7 @@ export const CapacityWithUnitRange: Story = {
         }}
       >
         <Barchart
+          title="Capacity With Unit Range"
           type={{ type: 'category' }}
           bars={capacityDataWithUnitRange}
           unitRange={[
@@ -402,7 +410,12 @@ export const Stacked: Story = {
         }}
       >
         <Stack direction="vertical" gap="r16">
-          <Barchart type={{ type: 'category' }} bars={stackedData} stacked />
+          <Barchart
+            type={{ type: 'category' }}
+            bars={stackedData}
+            stacked
+            title="Stacked"
+          />
           <ChartLegend shape="rectangle" />
         </Stack>
       </ChartLegendWrapper>
@@ -457,6 +470,7 @@ export const DefaultSort: Story = {
           stacked
           bars={defaultSortData}
           defaultSort={customSort}
+          title="Default Sort"
         />
       </ChartLegendWrapper>
     );
@@ -531,6 +545,7 @@ export const WithCustomTooltip: Story = {
         >
           <Stack direction="vertical" gap="r16">
             <Barchart
+              title="Custom Tooltip"
               type={{ type: 'category' }}
               bars={exampleData}
               tooltip={customTooltip}