@scality/core-ui 0.185.0 → 0.187.0

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

@@ -2,7 +2,7 @@ import {
   TIME_FORMATER,
   DAY_MONTH_ABBREVIATED_YEAR,
   DAY_MONTH_ABBREVIATED_HOUR_MINUTE,
-} from '../date/FormattedDateTime';
+} from '../../date/FormattedDateTime';
 
 export const ONE_YEAR_MILLISECONDS = 366 * 24 * 60 * 60 * 1000;
 
@@ -11,13 +11,11 @@ export type ChartDataPoint = {
 } & Record<string, number | null>;
 
 /**
- * Formats timestamp for X-axis labels based on time format and data range:
- * For 'date-time' format, return day-month-abbreviated-hour-minute format
- * For 'date' format, return YYYY-MM-DD format if time range is greater than 1 year, otherwise return MM-DD format
+ * Formats timestamp for X-axis labels based on duration
+ *
  *
  * @param timestamp - The timestamp to format in milliseconds
- * @param timeFormat - The format type ('date-time' or 'date')
- * @param chartData - The chart data to determine time range for optimal formatting
+ * @param duration - The duration in seconds
  * @returns Formatted string for display on X-axis
  */
 export const formatXAxisLabel = (

package/src/lib/components/charts/sparkline/Sparkline.tsx

@@ -0,0 +1,80 @@
+import { useMemo } from 'react';
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  YAxis,
+} from 'recharts';
+import { useTheme } from 'styled-components';
+import { chartColors } from '../../../style/theme';
+import { addMissingDataPoint } from '../common/chartUtils';
+
+type SparklineProps = {
+  serie: {
+    data: [number, number | null][];
+    color?: string; // exa color code like '#ff0000'
+  };
+  startingTimeStamp: number;
+  sampleDuration: number;
+  sampleInterval: number;
+  yAxisType?: 'default' | 'percentage';
+};
+
+/**
+ * Sparkline is a simple dynamically sized area chart.
+ * Used to show trends in data over time.
+ * @param serie - The data series to display
+ * @param startingTimeStamp - The starting timestamp in seconds
+ * @param sampleDuration - The total duration in seconds to cover in the sparkline
+ * @param sampleInterval - The interval in seconds between data points
+ * @param yAxisType - The type of y-axis to display
+ * @returns The sparkline component
+ */
+export function Sparkline({
+  serie,
+  startingTimeStamp,
+  sampleDuration,
+  sampleInterval,
+  yAxisType,
+}: SparklineProps) {
+  const data = useMemo(() => {
+    const dataMdp = addMissingDataPoint(
+      serie.data,
+      startingTimeStamp,
+      sampleDuration,
+      sampleInterval,
+    );
+    return dataMdp.map(([x, y]) => ({ x, y }));
+  }, [serie.data]);
+  const color = serie.color ?? chartColors.lineColor1;
+  const strokeGridColor = useTheme().border;
+
+  return (
+    <ResponsiveContainer>
+      <AreaChart data={data}>
+        <defs>
+          <linearGradient id={`gradient-${color}`} x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor={color} stopOpacity={0.7} />
+            <stop offset="100%" stopColor={color} stopOpacity={0.1} />
+          </linearGradient>
+        </defs>
+        <CartesianGrid
+          horizontal={false}
+          stroke={strokeGridColor}
+          strokeOpacity={0.5}
+        />
+        <Area
+          type="linear"
+          dataKey="y"
+          stroke={color}
+          fill={`url(#gradient-${color})`}
+          dot={false}
+          activeDot={false}
+          isAnimationActive={false}
+        />
+        {yAxisType === 'percentage' && <YAxis domain={[0, 100]} hide />}
+      </AreaChart>
+    </ResponsiveContainer>
+  );
+}

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

@@ -0,0 +1,36 @@
+/**
+ * Shared types used across chart components
+ */
+
+/**
+ * Unit range configuration for automatic unit scaling
+ * Should at least have base unit with threshold 1
+ * @example [{ threshold: 1, label: 'B' }, { threshold: 1000, label: 'kB' }]
+ */
+export type UnitRange = {
+  threshold: number;
+  label: string;
+}[];
+
+/**
+ * Time-based chart configuration
+ * @param startDate - Start date
+ * @param endDate - End date
+ * @param interval - Interval in milliseconds
+ */
+export type TimeType = {
+  type: 'time';
+  timeRange: {
+    startDate: Date;
+    endDate: Date;
+    interval: number;
+  };
+};
+
+/**
+ * Category-based chart configuration
+ */
+export type CategoryType = {
+  type: 'category';
+  gap?: number;
+};

package/src/lib/components/icon/Icon.component.tsx

@@ -143,6 +143,7 @@ export const iconTable = {
   ThumbsUp: 'far faThumbsUp',
   ThumbsDown: 'far faThumbsDown',
   Sidebar: 'fas faColumns',
+  Bookopen: 'fas faBookOpen',
 };
 
 type IconProps = {
@@ -153,7 +154,10 @@ type IconProps = {
   title?: string;
 };
 
-export const customIcons: Record<string, ((props: IconProps) => JSX.Element) & { displayName?: string }> = {
+export const customIcons: Record<
+  string,
+  ((props: IconProps) => JSX.Element) & { displayName?: string }
+> = {
   'Remote-user': ({ 'aria-label': ariaLabel, color, size }) => (
     <RemoteUser ariaLabel={ariaLabel} color={color} size={size} />
   ),
@@ -259,7 +263,8 @@ function NonWrappedIcon({
     }
 
     const [iconType, iconClass] = iconInfo.split(' ');
-    const fontAwesomeType = iconType === 'far' ? 'free-regular-svg-icons' : 'free-solid-svg-icons';
+    const fontAwesomeType =
+      iconType === 'far' ? 'free-regular-svg-icons' : 'free-solid-svg-icons';
     const cacheKey = `${fontAwesomeType}/${iconClass}`;
     if (iconCache[cacheKey]) {
       setIcon(iconCache[cacheKey]);
@@ -267,11 +272,10 @@ function NonWrappedIcon({
     }
 
     // Handle FontAwesome icons with dynamic import
-    import(`@fortawesome/${fontAwesomeType}/${iconClass}.js`)
-      .then((module) => {
-        setIcon(module[iconClass]);
-        iconCache[cacheKey] = module[iconClass];
-      });
+    import(`@fortawesome/${fontAwesomeType}/${iconClass}.js`).then((module) => {
+      setIcon(module[iconClass]);
+      iconCache[cacheKey] = module[iconClass];
+    });
     return () => setIcon(undefined);
   }, [name, iconInfo]);
 
@@ -292,7 +296,7 @@ function NonWrappedIcon({
       title={title}
       aria-label={`${name} ${ariaLabel}`}
       {...rest}
-      />
+    />
   );
 }
 

package/src/lib/components/textbadge/TextBadge.component.tsx

@@ -24,7 +24,7 @@ const StyledTextBadge = styled.span<{ variant: TextBadgeVariant }>`
     `}
 `;
 type Props = {
-  text: string;
+  text: React.ReactNode;
   className?: string;
   variant?: TextBadgeVariant;
 } & React.HTMLAttributes<HTMLSpanElement>;

package/src/lib/components/tooltip/Tooltip.component.tsx

@@ -1,5 +1,6 @@
-import { computePosition, flip, offset, shift } from '@floating-ui/dom';
-import { CSSProperties, useEffect, useRef, useState } from 'react';
+import { flip, offset, shift, useFloating } from '@floating-ui/react';
+import { CSSProperties, useState } from 'react';
+import { createPortal } from 'react-dom';
 import styled from 'styled-components';
 import { spacing } from '../../spacing';
 import { fontSize, zIndex } from '../../style/theme';
@@ -44,8 +45,6 @@ const TooltipOverLayContainer = styled.div<{
   style?: CSSProperties;
 }>`
   display: inline-block;
-  opacity: 0;
-  position: fixed;
   width: max-content;
   border: 1px solid ${getThemePropSelector('border')};
   background-color: ${(props) =>
@@ -85,51 +84,42 @@ function Tooltip({
   overlay,
   ...rest
 }: Props) {
-  const childrenRef = useRef<HTMLDivElement | null>(null);
-  const tooltipRef = useRef<HTMLDivElement | null>(null);
-
   const [isTooltipVisible, setIsTooltipVisible] = useState(false);
-  useEffect(() => {
-    if (childrenRef.current && tooltipRef.current) {
-      computePosition(childrenRef.current, tooltipRef.current, {
-        placement,
-        middleware: [offset(5), shift(), flip()],
-      }).then(({ x, y }) => {
-        if (tooltipRef.current) {
-          Object.assign(tooltipRef.current.style, {
-            opacity: '1',
-            // we set opacity to 1 to make sure the tooltip is not displayed before the position is computed
-            left: `${x}px`,
-            top: `${y}px`,
-          });
-        }
-      });
-    }
-  }, [tooltipRef.current, childrenRef.current, isTooltipVisible]);
+
+  const { refs, floatingStyles } = useFloating({
+    placement,
+    open: isTooltipVisible,
+    middleware: [offset(5), shift(), flip()],
+  });
   return (
-    <TooltipContainer
-      className="sc-tooltip"
-      onPointerEnter={() => {
-        setIsTooltipVisible(true);
-      }}
-      onPointerLeave={() => {
-        setIsTooltipVisible(false);
-      }}
-    >
-      {isTooltipVisible && overlay ? (
-        <TooltipOverLayContainer
-          ref={tooltipRef}
-          className="sc-tooltip-overlay"
-          placement={placement}
-          style={overlayStyle}
-        >
-          <TooltipText className="sc-tooltip-overlay-text">
-            {overlay}
-          </TooltipText>
-        </TooltipOverLayContainer>
-      ) : null}
-      <div ref={childrenRef}>{children}</div>
-    </TooltipContainer>
+    <>
+      <TooltipContainer
+        className="sc-tooltip"
+        onPointerEnter={() => {
+          setIsTooltipVisible(true);
+        }}
+        onPointerLeave={() => {
+          setIsTooltipVisible(false);
+        }}
+      >
+        <div ref={refs.setReference}>{children}</div>
+      </TooltipContainer>
+      {isTooltipVisible &&
+        overlay &&
+        createPortal(
+          <TooltipOverLayContainer
+            ref={refs.setFloating}
+            className="sc-tooltip-overlay"
+            placement={placement}
+            style={{ ...floatingStyles, ...overlayStyle }}
+          >
+            <TooltipText className="sc-tooltip-overlay-text">
+              {overlay}
+            </TooltipText>
+          </TooltipOverLayContainer>,
+          document.body,
+        )}
+    </>
   );
 }
 

package/src/lib/index.ts

@@ -28,11 +28,13 @@ export { Tooltip } from './components/tooltip/Tooltip.component';
 export { ProgressBar } from './components/progressbar/ProgressBar.component';
 export { TextArea } from './components/textarea/TextArea.component';
 
-export { BarChart } from './components/barchart/BarChart.component';
+// BarChart (deprecated) - Use Barchart from @scality/core-ui/dist/next instead
+// export { BarChart } from './components/barchart/BarChart.component';
 export { CircularProgressBar } from './components/circularprogressbar/CircularProgressBar.component';
 
 export { LateralNavbarLayout } from './components/lateralnavbarlayout/LateralNavbarLayout.component';
-export { GlobalHealthBar } from './components/globalhealthbar/GlobalHealthBar.component';
+// GlobalHealthBar (deprecated vega version) - Use GlobalHealthBar from @scality/core-ui/dist/next instead
+// export { GlobalHealthBar } from './components/globalhealthbar/GlobalHealthBar.component';
 export { ConstrainedText } from './components/constrainedtext/Constrainedtext.component';
 export { EmptyState } from './components/emptystate/Emptystate.component';
 export { EmptyTable } from './components/emptytable/Emptytable.component';

package/src/lib/next.ts

@@ -4,36 +4,49 @@ export { Button } from './components/buttonv2/Buttonv2.component';
 export { CopyButton } from './components/buttonv2/CopyButton.component';
 export { Tabs, Tab } from './components/tabsv2/Tabsv2.component';
 export { Table } from './components/tablev2/Tablev2.component';
-export { LineTemporalChart } from './components/linetemporalchart/LineTemporalChart.component';
+
+// Keep MetricsTimeSpanProvider for backward compatibility (still used in external projects)
 export {
   MetricsTimeSpanProvider,
   useMetricsTimeSpan,
-} from './components/linetemporalchart/MetricTimespanProvider';
-export { SyncedCursorCharts } from './components/vegachartv2/SyncedCursorCharts';
+} from './components/charts/MetricsTimeSpanProvider';
+
 export { Select } from './components/selectv2/Selectv2.component';
 export { HealthSelector } from './components/healthselectorv2/HealthSelector.component';
 export { CoreUiThemeProvider } from './components/coreuithemeprovider/CoreUiThemeProvider';
 export { Box } from './components/box/Box';
 export { Input } from './components/inputv2/inputv2';
 export { Accordion } from './components/accordion/Accordion.component';
+
+// Export all chart components from the consolidated charts folder
 export {
   Barchart,
   BarchartSortFn,
   BarchartTooltipFn,
-} from './components/barchartv2/Barchart.component';
-export { BarchartTooltip } from './components/barchartv2/BarchartTooltip';
-export {
+  BarchartTooltip,
+  LineTimeSerieChart,
+  GlobalHealthBar,
+  Sparkline,
+  ChartLegend,
   ChartLegendWrapper,
   useChartId,
-} from './components/chartlegend/ChartLegendWrapper';
-export { ChartLegend } from './components/chartlegend/ChartLegend';
-export { LineTimeSerieChart } from './components/linetimeseriechart/linetimeseriechart.component';
-export {
+  useChartLegend,
   ChartTooltipContainer,
   ChartTooltipItem,
   ChartTooltipHeader,
   ChartTooltipItemsContainer,
-} from './components/charttooltip/ChartTooltip';
+} from './components/charts';
+
+export type {
+  BarchartProps,
+  BarchartBars,
+  LineChartProps,
+  Serie,
+  GlobalHealthProps,
+  Alert,
+  UnitRange,
+  TimeType,
+  CategoryType,
+} from './components/charts';
+
 export { CoreUITheme } from './style/theme';
-export { GlobalHealthBar } from './components/globalhealthbar/GlobalHealthBarRecharts.component';
-export { Sparkline } from './components/sparkline/sparkline.component';

package/stories/BarChart/barchart.stories.tsx

@@ -6,14 +6,14 @@ import {
   BarchartProps,
   BarchartSortFn,
   BarchartTooltipFn,
-} from '../../src/lib/components/barchartv2/Barchart.component';
+  ChartLegendWrapper,
+  ChartLegend,
+} from '../../src/lib/components/charts';
 import { Button } from '../../src/lib/components/buttonv2/Buttonv2.component';
 import { Text } from '../../src/lib/components/text/Text.component';
 import { spacing, Stack, Wrap } from '../../src/lib/spacing';
 import { CoreUITheme } from '../../src/lib/style/theme';
 import { Wrapper } from '../common';
-import { ChartLegendWrapper } from '../../src/lib/components/chartlegend/ChartLegendWrapper';
-import { ChartLegend } from '../../src/lib/components/chartlegend/ChartLegend';
 
 type Story = StoryObj<typeof Barchart>;
 
@@ -39,17 +39,17 @@ export const Playground: Story = {
       {
         label: 'Success',
         data: [
-          ['category1', 1],
-          ['category2', 1],
-          ['category3', 2],
+          ['category1', 0.001],
+          ['category2', 0.005],
+          ['category3', 0.002],
         ],
       },
       {
         label: 'Failed',
         data: [
-          ['category1', 1],
-          ['category2', 1],
-          ['category3', 2],
+          ['category1', 0.01],
+          ['category2', 0.05],
+          ['category3', 0.02],
         ],
       },
     ] as const;
@@ -197,6 +197,7 @@ export const Time7DaysWithMissingData: Story = {
           Success: theme.statusHealthy,
           Failed: theme.statusCritical,
         }}
+        sortOrder="status"
       >
         <Barchart
           title="Time 7 Days With Missing Data"

package/stories/GlobalHealthBar/{globalhealthbarRecharts.stories.tsx → globalhealthbar.stories.tsx}

@@ -1,33 +1,15 @@
-import React, { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 import {
   Alert,
   GlobalHealthBar,
   GlobalHealthProps,
-} from '../../src/lib/components/globalhealthbar/GlobalHealthBarRecharts.component';
-
-import {
-  DATE_FORMATER,
-  TIME_SECOND_FORMATER,
-} from '../../src/lib/components/date/FormattedDateTime';
-import {
-  MetricsTimeSpanProvider,
-  useMetricsTimeSpan,
-} from '../../src/lib/next';
-import { Dropdown, Icon, Stack } from '../../src/lib';
-import {
-  LAST_ONE_HOUR,
-  LAST_SEVEN_DAYS,
-  LAST_TWENTY_FOUR_HOURS,
-  SAMPLE_DURATION_LAST_ONE_HOUR,
-  SAMPLE_DURATION_LAST_SEVEN_DAYS,
-  SAMPLE_DURATION_LAST_TWENTY_FOUR_HOURS,
-} from '../../src/lib/components/constants';
+} from '../../src/lib/components/charts';
 
 type Story = StoryObj<GlobalHealthProps>;
 
 const meta: Meta<GlobalHealthProps> = {
-  title: 'Components/GlobalHealthBarRecharts',
+  title: 'Components/DataDisplay/Charts/GlobalHealthBar',
   component: GlobalHealthBar,
 };
 export default meta;

package/stories/GlobalHealthBar/globalheathbarrecharts.guideline.mdx

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/blocks';
-import { GlobalHealthBar } from '../../src/lib/components/globalhealthbar/GlobalHealthBarRecharts.component';
-import * as GlobalHealthBarStories from './globalhealthbarRecharts.stories';
+import { GlobalHealthBar } from '../../src/lib/components/charts';
+import * as GlobalHealthBarStories from './globalhealthbar.stories';
 
 <Meta name="Guideline" of={GlobalHealthBarStories} />

package/stories/common.tsx

@@ -10,7 +10,7 @@ const StyledWrapper = styled.div`
       background-color: ${theme[style?.backgroundColor || 'backgroundLevel3']};
       color: ${theme.textPrimary};
       box-sizing: border-box;
-      overflow: scroll;
+      overflow: auto;
     `;
   }}
 `;

package/stories/guideline/chart-guideline.mdx

@@ -1,5 +1,4 @@
 import { Meta, Story } from '@storybook/blocks';
-import { ChartExample } from './mdxExampleComponents';
 import { SuccessBanner } from '../banner.stories';
 
 <Meta title="Guidelines/Chart" />
@@ -14,10 +13,6 @@ Used mostly for monitoring-related tasks.
 
 Don’t depend too heavily on tooltips. They are as providing supplemental or expanded information, but shouldn’t be the only way a user can see the plotted value.
 
-### Grid lines
-
-Only use grid lines when it’s helpful. Possible to use only horizontal or vertical.
-
 ### Elements
 
 - Title
@@ -28,36 +23,4 @@ _produce an example WIP_
 
 ## Type
 
-4 types for most cases: pie/donut, bar/column, line, or area.
-
-### Pie charts
-
-- No more than 6 categories
-- Values should be different enough (otherwise select Bar charts)
-- Should be a 100% total
-- Categories in the desc order
-
-_produce an example WIP_
-
-_(Currently, there is no Pie chart in the UI)_
-
-### Bar and column charts
-
-- Should start at a baseline of zero.
-  {/* <ChartExample /> */}
-
-### Line charts
-
-- No more than 5–7 different lines
-- Avoid randomly chosen color (otherwise risk of contrast issues)
-
-Here, the colors for Get and List are too close.
-
-Components/Chart/LineChart
-
-Area charts
-
-- Could be a single area, overlapping area, or stacked area
-- Max 3-4 categories
-
-{/* <SuccessBanner /> */}
+{/* TODO: add Guidelines for charts types and add date format guidelines  here or in format.mdx */}

package/stories/linetimeseriechart.stories.tsx

@@ -3,14 +3,12 @@ import { Meta, StoryObj } from '@storybook/react';
 import {
   LineTimeSerieChart,
   Serie,
-} from '../src/lib/components/linetimeseriechart/linetimeseriechart.component';
-import { ChartLegendWrapper } from '../src/lib/components/chartlegend/ChartLegendWrapper';
-import { lineTimeSeriesColorRange } from '../src/lib/style/theme';
-import { ChartLegend } from '../src/lib/components/chartlegend/ChartLegend';
-import {
+  ChartLegendWrapper,
+  ChartLegend,
   useChartId,
   useChartLegend,
-} from '../src/lib/components/chartlegend/ChartLegendWrapper';
+} from '../src/lib/components/charts';
+import { lineTimeSeriesColorRange } from '../src/lib/style/theme';
 import { useEffect } from 'react';
 import {
   SAMPLE_DURATION_LAST_TWENTY_FOUR_HOURS,

package/stories/sparkline.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Sparkline } from '../src/lib/components/sparkline/sparkline.component';
+import React from 'react';
+import { Sparkline } from '../src/lib/components/charts';
 import { lineColor5, lineColor6 } from '../src/lib/style/theme';
 
 const meta: Meta<typeof Sparkline> = {
@@ -10,21 +11,21 @@ const meta: Meta<typeof Sparkline> = {
   },
   tags: ['autodocs'],
   argTypes: {
-    serie: { 
+    serie: {
       control: 'object',
-      description: 'Data series containing array of [timestamp, value] pairs'
+      description: 'Data series containing array of [timestamp, value] pairs',
     },
-    startingTimeStamp: { 
+    startingTimeStamp: {
       control: 'number',
-      description: 'Starting timestamp in seconds for the data series'
+      description: 'Starting timestamp in seconds for the data series',
     },
-    sampleDuration: { 
+    sampleDuration: {
       control: 'number',
-      description: 'Total duration in seconds to cover in the sparkline'
+      description: 'Total duration in seconds to cover in the sparkline',
     },
-    sampleInterval: { 
+    sampleInterval: {
       control: 'number',
-      description: 'Interval in seconds between data points'
+      description: 'Interval in seconds between data points',
     },
   },
   decorators: [
@@ -82,7 +83,7 @@ const trendingDownData: [number, number][] = [
   [1740412800, 22.1],
 ];
 
-const flatData: [number, number|null][] = [
+const flatData: [number, number | null][] = [
   [1740405600, 50.0],
   [1740406320, 50.0],
   [1740407760, 50.0],
@@ -105,7 +106,8 @@ export const Default: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Sparkline displaying highly volatile data with frequent peaks and valleys.',
+        story:
+          'Sparkline displaying highly volatile data with frequent peaks and valleys.',
       },
     },
   },

package/stories/tablev2.stories.tsx

@@ -651,7 +651,7 @@ export const TableWithSyncButton = {
     };
 
     return (
-      <Box>
+      <Box width="500px" height="250px">
         <Title>Table with Sync Button</Title>
         <Box
           display="flex"

package/stories/textbadge.stories.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { TextBadge } from '../src/lib/components/textbadge/TextBadge.component';
 import { Wrapper, Title } from './common';
+import { IconHelp } from '../src/lib/components/iconhelper/IconHelper';
+import { Text } from '../src/lib/components/text/Text.component';
 export default {
   title: 'Components/TextBadge',
   component: TextBadge,
@@ -21,6 +23,19 @@ export const Default = {
         <TextBadge text="2" variant="statusWarning" />
         <TextBadge text="3" variant="statusCritical" />
         <TextBadge text="Badge" variant="infoSecondary" />
+        <TextBadge
+          text={
+            <>
+              <Text>This is a badge with a tooltip</Text>
+              <span style={{ marginLeft: '8px' }}>
+                <IconHelp
+                  tooltipMessage={<div>This is a tooltip</div>}
+                  title="Info"
+                />
+              </span>
+            </>
+          }
+        />
       </Wrapper>
     );
   },