@scality/core-ui 0.186.0 → 0.188.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/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/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/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>
     );
   },

package/dist/components/barchart/BarChart.component.d.ts

@@ -1,17 +0,0 @@
-type Props = {
-    id: string;
-    data: Array<Record<string, any>>;
-    xAxis: Record<string, any>;
-    yAxis: Record<string, any>;
-    color?: Record<string, any>;
-    height?: number;
-    barConfig?: Record<string, any>;
-};
-/**
- * @deprecated Use Barchart v2 instead
- * @example import { Barchart } from '@scality/core-ui/dist/next';
-
- */
-declare function BarChart({ id, data, xAxis, yAxis, color, height, barConfig, }: Props): import("react/jsx-runtime").JSX.Element;
-export { BarChart };
-//# sourceMappingURL=BarChart.component.d.ts.map

package/dist/components/barchart/BarChart.component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BarChart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchart/BarChart.component.tsx"],"names":[],"mappings":"AACA,KAAK,KAAK,GAAG;IACX,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACjC,CAAC;AAEF;;;;GAIG;AACH,iBAAS,QAAQ,CAAC,EAChB,EAAE,EACF,IAAI,EACJ,KAAK,EACL,KAAK,EACL,KAAK,EACL,MAAY,EACZ,SAAS,GACV,EAAE,KAAK,2CAwBP;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/barchart/BarChart.component.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { VegaChart } from '../vegachartv2/VegaChartV2.component';
-/**
- * @deprecated Use Barchart v2 instead
- * @example import { Barchart } from '@scality/core-ui/dist/next';
-
- */
-function BarChart({ id, data, xAxis, yAxis, color, height = 200, barConfig, }) {
-    const spec = {
-        mark: {
-            type: 'bar',
-            ...barConfig,
-        },
-        width: 'container',
-        height,
-        data: {
-            values: data,
-        },
-        encoding: {
-            x: xAxis,
-            y: yAxis,
-            color,
-        },
-    };
-    return (_jsx(VegaChart, { id: id, spec: spec }, `barchart-${id}-${data.length}`));
-}
-export { BarChart };

package/dist/components/barchartv2/Barchart.component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Barchart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/Barchart.component.tsx"],"names":[],"mappings":"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"}