@scality/core-ui 0.165.0 → 0.166.0

package/src/lib/components/chartlegend/ChartLegend.tsx

@@ -18,7 +18,10 @@ const Legend = styled.div<{ direction: 'horizontal' | 'vertical' }>`
   flex-wrap: wrap;
 `;
 
-const LegendItem = styled.div<{ disabled?: boolean; selected?: boolean }>`
+export const LegendItem = styled.div<{
+  disabled?: boolean;
+  selected?: boolean;
+}>`
   display: flex;
   align-items: center;
   gap: 8px;
@@ -31,7 +34,7 @@ const LegendItem = styled.div<{ disabled?: boolean; selected?: boolean }>`
   }
 `;
 
-const LegendShape = styled.div<{
+export const LegendShape = styled.div<{
   color?: string;
   shape: 'line' | 'rectangle';
   chartColors: Record<string, string>;
@@ -69,21 +72,51 @@ export const ChartLegend = ({
     isSelected,
     addSelectedResource,
     removeSelectedResource,
+    selectAllResources,
+    getAllResourcesCount,
+    getSelectedCount,
+    selectOnlyResource,
   } = useChartLegend();
 
   const resources = listResources();
 
   const handleLegendClick = useCallback(
-    (resource: string) => {
+    (resource: string, event: React.MouseEvent) => {
       if (disabled) return;
 
-      if (isSelected(resource)) {
-        removeSelectedResource(resource);
+      const isModifierClick = event.metaKey || event.ctrlKey;
+      const itemIsSelected = isSelected(resource);
+
+      if (isModifierClick) {
+        if (itemIsSelected) {
+          if (getSelectedCount() === 1) {
+            selectAllResources();
+          } else {
+            removeSelectedResource(resource);
+          }
+        } else {
+          addSelectedResource(resource);
+        }
       } else {
-        addSelectedResource(resource);
+        if (getSelectedCount() === getAllResourcesCount()) {
+          selectOnlyResource(resource);
+        } else if (itemIsSelected) {
+          selectAllResources();
+        } else {
+          selectOnlyResource(resource);
+        }
       }
     },
-    [disabled, isSelected, addSelectedResource, removeSelectedResource],
+    [
+      disabled,
+      isSelected,
+      addSelectedResource,
+      removeSelectedResource,
+      selectAllResources,
+      selectOnlyResource,
+      getAllResourcesCount,
+      getSelectedCount,
+    ],
   );
 
   return (
@@ -97,7 +130,8 @@ export const ChartLegend = ({
             key={resource}
             disabled={disabled}
             selected={selected}
-            onClick={() => handleLegendClick(resource)}
+            aria-label={`${resource} ${selected ? 'selected' : 'not selected'}`}
+            onClick={(event) => handleLegendClick(resource, event)}
           >
             <LegendShape
               color={color}

package/src/lib/components/chartlegend/ChartLegendWrapper.tsx

@@ -1,13 +1,24 @@
-import { createContext, useContext, useState, ReactNode, useMemo, useCallback } from 'react';
+import {
+  createContext,
+  useContext,
+  useState,
+  ReactNode,
+  useMemo,
+  useCallback,
+} from 'react';
 import { ChartColors } from '../../style/theme';
 
 export type ChartLegendState = {
   selectedResources: string[];
   addSelectedResource: (resource: string) => void;
   removeSelectedResource: (resource: string) => void;
+  selectAllResources: () => void;
+  selectOnlyResource: (resource: string) => void;
   isSelected: (resource: string) => boolean;
   getColor: (resource: string) => string | undefined;
   listResources: () => string[];
+  getAllResourcesCount: () => number;
+  getSelectedCount: () => number;
 };
 
 const ChartLegendContext = createContext<ChartLegendState | null>(null);
@@ -21,7 +32,9 @@ export const ChartLegendWrapper = ({
   children,
   colorSet,
 }: ChartLegendWrapperProps) => {
-  const [selectedResources, setSelectedResources] = useState<string[]>([]);
+  const allResources = Object.keys(colorSet);
+  const [selectedResources, setSelectedResources] =
+    useState<string[]>(allResources);
 
   const addSelectedResource = useCallback((resource: string) => {
     setSelectedResources((prev) =>
@@ -33,40 +46,73 @@ export const ChartLegendWrapper = ({
     setSelectedResources((prev) => prev.filter((r) => r !== resource));
   }, []);
 
-  const isSelected = useCallback((resource: string) => {
-    return selectedResources.includes(resource);
+  const selectAllResources = useCallback(() => {
+    setSelectedResources(allResources);
+  }, [allResources]);
+
+  const selectOnlyResource = useCallback((resource: string) => {
+    setSelectedResources([resource]);
+  }, []);
+
+  const getAllResourcesCount = useCallback(() => {
+    return allResources.length;
+  }, [allResources]);
+
+  const getSelectedCount = useCallback(() => {
+    return selectedResources.length;
   }, [selectedResources]);
 
-  const getColor = useCallback((resource: string) => {
-    const color = colorSet[resource];
-    if (!color) {
-      console.warn(
-        `ChartLegendWrapper: No color defined for resource "${resource}"`,
-      );
-      return undefined;
-    }
-    return color;
-  }, [colorSet]);
+  const isSelected = useCallback(
+    (resource: string) => {
+      return selectedResources.includes(resource);
+    },
+    [selectedResources],
+  );
+
+  const getColor = useCallback(
+    (resource: string) => {
+      const color = colorSet[resource];
+      if (!color) {
+        console.warn(
+          `ChartLegendWrapper: No color defined for resource "${resource}"`,
+        );
+        return undefined;
+      }
+      return color;
+    },
+    [colorSet],
+  );
 
   const listResources = useCallback(() => {
     return Object.keys(colorSet);
   }, [colorSet]);
 
-  const chartLegendState = useMemo(() => ({
-    selectedResources,
-    addSelectedResource,
-    removeSelectedResource,
-    isSelected,
-    getColor,
-    listResources,
-  }), [
-    selectedResources,
-    addSelectedResource,
-    removeSelectedResource,
-    isSelected,
-    getColor,
-    listResources,
-  ]);
+  const chartLegendState = useMemo(
+    () => ({
+      selectedResources,
+      addSelectedResource,
+      removeSelectedResource,
+      selectAllResources,
+      selectOnlyResource,
+      isSelected,
+      getColor,
+      listResources,
+      getAllResourcesCount,
+      getSelectedCount,
+    }),
+    [
+      selectedResources,
+      addSelectedResource,
+      removeSelectedResource,
+      selectAllResources,
+      selectOnlyResource,
+      isSelected,
+      getColor,
+      listResources,
+      getAllResourcesCount,
+      getSelectedCount,
+    ],
+  );
 
   return (
     <ChartLegendContext.Provider value={chartLegendState}>

package/src/lib/components/constants.ts

@@ -40,29 +40,40 @@ export type QueryTimeSpan = {
   label: string;
   // the label display in the timespan selector
   duration: number;
+  // time difference between two samples in second
+  interval: number;
   // time span in second
+  /** @deprecated Use `interval` instead */
   frequency: number;
 };
+
 export const queryTimeSpansCodes: QueryTimeSpan[] = [
   {
     query: QUERY_LAST_SEVEN_DAYS,
     label: LAST_SEVEN_DAYS,
     duration: SAMPLE_DURATION_LAST_SEVEN_DAYS,
+    interval: SAMPLE_FREQUENCY_LAST_SEVEN_DAYS,
+    /** @deprecated Use `interval` instead */
     frequency: SAMPLE_FREQUENCY_LAST_SEVEN_DAYS,
   },
   {
     query: QUERY_LAST_TWENTY_FOUR_HOURS,
     label: LAST_TWENTY_FOUR_HOURS,
     duration: SAMPLE_DURATION_LAST_TWENTY_FOUR_HOURS,
+    interval: SAMPLE_FREQUENCY_LAST_TWENTY_FOUR_HOURS,
+    /** @deprecated Use `interval` instead */
     frequency: SAMPLE_FREQUENCY_LAST_TWENTY_FOUR_HOURS,
   },
   {
     query: QUERY_LAST_ONE_HOUR,
     label: LAST_ONE_HOUR,
     duration: SAMPLE_DURATION_LAST_ONE_HOUR,
+    interval: SAMPLE_FREQUENCY_LAST_ONE_HOUR,
+    /** @deprecated Use `interval` instead */
     frequency: SAMPLE_FREQUENCY_LAST_ONE_HOUR,
   },
 ];
+
 export const NAN_STRING = 'NAN';
 
 export const STATUS_CRITICAL = 'critical';

package/src/lib/components/constrainedtext/Constrainedtext.component.tsx

@@ -6,6 +6,7 @@ import styled from 'styled-components';
 import { Tooltip } from '../tooltip/Tooltip.component';
 import { Props as TooltipProps } from '../tooltip/Tooltip.component';
 import { Text } from '../text/Text.component';
+import { CoreUITheme } from '../../style/theme';
 
 type Props = {
   text: string | number | JSX.Element | JSX.Element[];
@@ -13,6 +14,7 @@ type Props = {
   tooltipPlacement?: $PropertyType<TooltipProps, 'placement'>;
   lineClamp?: number;
   centered?: boolean;
+  color?: keyof CoreUITheme;
 };
 // for lineClamp cf https://css-tricks.com/almanac/properties/l/line-clamp/
 // it should work on all major navigator, despite the --webkit prefix
@@ -74,6 +76,7 @@ function ConstrainedText({
   tooltipStyle,
   tooltipPlacement,
   lineClamp = 1,
+  color,
   centered = false,
 }: Props): JSX.Element {
   const [displayToolTip, setDisplayToolTip] = useState(false);
@@ -91,7 +94,7 @@ function ConstrainedText({
           overlayStyle={tooltipStyle}
           placement={tooltipPlacement}
         >
-          <Text>
+          <Text color={color}>
             {getConstrainedTextContainer(
               constrainedTextRef,
               lineClamp,
@@ -101,7 +104,7 @@ function ConstrainedText({
           </Text>
         </Tooltip>
       ) : (
-        <Text>
+        <Text color={color}>
           {getConstrainedTextContainer(
             constrainedTextRef,
             lineClamp,

package/src/lib/components/date/FormattedDateTime.tsx

@@ -1,6 +1,13 @@
 import { getDateDaysDiff } from './dateDiffer';
 import { Tooltip } from '../tooltip/Tooltip.component';
 
+export const LONG_DATE_FORMATER = Intl.DateTimeFormat('en-GB', {
+  weekday: 'long',
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric',
+});
+
 export const DATE_FORMATER = Intl.DateTimeFormat('fr-CA', {
   year: 'numeric',
   month: '2-digit',
@@ -56,7 +63,10 @@ type FormattedDateTimeProps = {
     | 'time-second'
     | 'relative'
     | 'day-month-abbreviated-hour-minute'
-    | 'day-month-abbreviated-hour-minute-second';
+    | 'day-month-abbreviated-hour-minute-second'
+    | 'long-date'
+    | 'chart-date';
+
   value: Date;
 };
 
@@ -184,6 +194,10 @@ export const FormattedDateTime = ({
           )}
         </>
       );
+    case 'long-date':
+      return <>{LONG_DATE_FORMATER.format(value)}</>;
+    case 'chart-date':
+      return <>{DAY_MONTH_FORMATER.format(value).replace(/[ ,]/g, '')}</>;
     default:
       return <></>;
   }

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

@@ -10,7 +10,6 @@ import {
 } from 'recharts';
 import { useMemo, useRef } from 'react';
 import { useTheme } from 'styled-components';
-import { useMetricsTimeSpan } from '../linetemporalchart/MetricTimespanProvider';
 import { addMissingDataPoint } from '../linetemporalchart/ChartUtil';
 import styled from 'styled-components';
 import { fontSize, fontWeight } from '../../style/theme';
@@ -123,6 +122,8 @@ export type LineChartProps = (
   title: string;
   height: number;
   startingTimeStamp: number;
+  interval: number;
+  duration: number;
   unitRange?: {
     threshold: number;
     label: string;
@@ -200,6 +201,8 @@ export function LineTimeSerieChart({
   title,
   height,
   startingTimeStamp,
+  interval,
+  duration,
   unitRange,
   isLoading = false,
   yAxisType = 'default',
@@ -208,7 +211,6 @@ export function LineTimeSerieChart({
   ...rest
 }: LineChartProps) {
   const theme = useTheme();
-  const { frequency, duration } = useMetricsTimeSpan();
   const { getColor } = useChartLegend();
   const chartRef = useRef(null);
 
@@ -223,7 +225,7 @@ export function LineTimeSerieChart({
                 line.data,
                 startingTimeStamp,
                 duration,
-                frequency,
+                interval,
               ),
             })),
             // Convert positive values to negative values
@@ -233,7 +235,7 @@ export function LineTimeSerieChart({
                 line.data,
                 startingTimeStamp,
                 duration,
-                frequency,
+                interval,
               ).map(
                 ([timestamp, value]) =>
                   [timestamp, value === null ? null : `-${Number(value)}`] as [
@@ -249,7 +251,7 @@ export function LineTimeSerieChart({
               line.data,
               startingTimeStamp,
               duration,
-              frequency,
+              interval,
             ),
           }));
 
@@ -287,7 +289,7 @@ export function LineTimeSerieChart({
         b: { timestamp: number } & Record<string, string | number | null>,
       ) => (a.timestamp as number) - (b.timestamp as number),
     );
-  }, [series, startingTimeStamp, duration, frequency, yAxisType]);
+  }, [series, startingTimeStamp, duration, interval, yAxisType]);
 
   // Calculate 5 perfectly evenly spaced ticks
   const xAxisTicks = useMemo(() => {

package/src/lib/components/text/Text.component.tsx

@@ -133,7 +133,7 @@ export const Text = styled.span<{
   isEmphazed?: boolean;
   isGentleEmphazed?: boolean;
 }>`
-  color: ${(props) => props.theme[props.color || 'textPrimary']};
+  ${(props) => props.color && `color: ${props.theme[props.color]};`}
   ${(props) =>
     props.variant === 'Larger'
       ? `

package/src/lib/components/toast/Toast.component.tsx

@@ -1,4 +1,3 @@
-import { motion } from 'framer-motion';
 import { ReactNode, useRef } from 'react';
 import { useTheme } from 'styled-components';
 import { Box } from '../box/Box';
@@ -99,6 +98,31 @@ const ContentContainer = styled.div`
   position: relative;
 `;
 
+const FadingToast = styled.div`
+  align-items: flex-end;
+  background-color: ${props => props.theme.backgroundLevel1};
+  border: 1px solid ${props => props.theme.border};
+  box-shadow: 0px 4px 10px 4px #000;
+  display: flex;
+  border-radius: 4px;
+  position: relative;
+
+  @keyframes toastEnter {
+    from {
+      opacity: 0;
+      transform: translateY(-20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+`;
+
+const ToastEnter = styled(FadingToast)`
+  animation: toastEnter 0.3s ease forwards;
+`;
+
 function Toast({
   open,
   message,
@@ -123,7 +147,6 @@ function Toast({
 
   const bgColor = useGetBackgroundColor(status);
   const rgbBgColor = useGetRgbBackgroundColor(status);
-  const theme = useTheme();
 
   if (!open) {
     return null;
@@ -141,22 +164,7 @@ function Toast({
         width,
       }}
     >
-      <motion.div
-        key="toast"
-        initial={{ opacity: 0, y: -20 }}
-        animate={{ opacity: 1, y: 0 }}
-        exit={{ opacity: 0, y: 20 }}
-        transition={{ duration: 0.3 }}
-        style={{
-          alignItems: 'flex-end',
-          backgroundColor: theme.backgroundLevel1,
-          border: `1px solid ${theme.border}`,
-          boxShadow: '0px 4px 10px 4px #000',
-          display: 'flex',
-          borderRadius: '4px',
-          position: 'relative',
-        }}
-      >
+      <ToastEnter>
         <IconContainer bgColor={rgbBgColor}>{icon}</IconContainer>
         <ContentContainer>
           <BasicText>{message}</BasicText>
@@ -169,7 +177,7 @@ function Toast({
             tooltip={{ overlay: 'Close', placement: 'top' }}
           />
         </Box>
-      </motion.div>
+      </ToastEnter>
       {withProgressBar && (
         <DurationBasedProgressBar
           duration={autoDismiss ? duration : null}

package/src/lib/next.ts

@@ -21,6 +21,7 @@ export {
   BarchartSortFn,
   BarchartTooltipFn,
 } from './components/barchartv2/Barchart.component';
+export { ChartTooltip } from './components/barchartv2/ChartTooltip';
 export { ChartLegendWrapper } from './components/chartlegend/ChartLegendWrapper';
 export { ChartLegend } from './components/chartlegend/ChartLegend';
 export { LineTimeSerieChart } from './components/linetimeseriechart/linetimeseriechart.component';

package/stories/constrainedtext.stories.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { ConstrainedText } from '../src/lib/components/constrainedtext/Constrainedtext.component';
 import { Wrapper } from './common';
 import { placementOptions } from './controls';
+import { Text } from '../src/lib/components/text/Text.component';
 export default {
   title: 'Components/Constrained Text',
   component: ConstrainedText,
@@ -34,10 +35,12 @@ export const Default = {
 };
 
 export const CustomizedTooltip = {
+  ...Default,
   args: {
-    text: 'This is a long phrase',
+    text: <Text>This is a long long phrase</Text>,
     tooltipStyle: { width: '100px', color: 'lightblue' },
     tooltipPlacement: 'right',
+    color: 'statusCritical',
   },
 };
 

package/stories/linetimeseriechart.stories.tsx

@@ -1,42 +1,41 @@
 import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
-import { MetricsTimeSpanProvider } from '../src/lib/components/linetemporalchart/MetricTimespanProvider';
 import { LineTimeSerieChart } 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 {
+  SAMPLE_DURATION_LAST_TWENTY_FOUR_HOURS,
+  SAMPLE_FREQUENCY_LAST_TWENTY_FOUR_HOURS,
+} from '../src/lib/components/constants';
 
 const ChartWithProviders = (props) => {
   return (
-    <MetricsTimeSpanProvider>
-      <ChartLegendWrapper
-        colorSet={{
-          'ip-10-160-122-207.eu-north-1.compute.internal':
-            lineTimeSeriesColorRange[0],
-        }}
-      >
-        <LineTimeSerieChart {...props} />
-        <ChartLegend shape="line" />
-      </ChartLegendWrapper>
-    </MetricsTimeSpanProvider>
+    <ChartLegendWrapper
+      colorSet={{
+        'ip-10-160-122-207.eu-north-1.compute.internal':
+          lineTimeSeriesColorRange[0],
+      }}
+    >
+      <LineTimeSerieChart {...props} />
+      <ChartLegend shape="line" />
+    </ChartLegendWrapper>
   );
 };
 
 const ChartWithProviders2 = (props) => {
   return (
-    <MetricsTimeSpanProvider>
-      <ChartLegendWrapper
-        colorSet={{
-          'ip-10-160-122-207.eu-north-1.compute.internal':
-            lineTimeSeriesColorRange[0],
-          'ip-10-160-122-207.eu-north-2.compute.internal':
-            lineTimeSeriesColorRange[1],
-        }}
-      >
-        <LineTimeSerieChart {...props} />
-        <ChartLegend shape="line" direction="vertical" />
-      </ChartLegendWrapper>
-    </MetricsTimeSpanProvider>
+    <ChartLegendWrapper
+      colorSet={{
+        'ip-10-160-122-207.eu-north-1.compute.internal':
+          lineTimeSeriesColorRange[0],
+        'ip-10-160-122-207.eu-north-2.compute.internal':
+          lineTimeSeriesColorRange[1],
+      }}
+    >
+      <LineTimeSerieChart {...props} />
+      <ChartLegend shape="line" direction="vertical" />
+    </ChartLegendWrapper>
   );
 };
 const meta: Meta<typeof LineTimeSerieChart> = {
@@ -399,6 +398,8 @@ export const PercentageChartExample: Story = {
     helpText: 'This is the help text',
     yAxisType: 'percentage',
     yAxisTitle: '',
+    interval: SAMPLE_FREQUENCY_LAST_TWENTY_FOUR_HOURS,
+    duration: SAMPLE_DURATION_LAST_TWENTY_FOUR_HOURS,
   },
 };
 const UNIT_RANGE_BS = [
@@ -464,6 +465,8 @@ export const SymmetricalAxisExample: Story = {
     isLegendHidden: false,
     yAxisType: 'symmetrical',
     yAxisTitle: 'in(+)/out(-)',
+    interval: SAMPLE_FREQUENCY_LAST_TWENTY_FOUR_HOURS,
+    duration: SAMPLE_DURATION_LAST_TWENTY_FOUR_HOURS,
   },
 };
 export const AutoUnitChartExample: Story = {
@@ -481,5 +484,7 @@ export const AutoUnitChartExample: Story = {
     height: 200,
     unitRange: UNIT_RANGE_BS,
     yAxisType: 'default',
+    interval: SAMPLE_FREQUENCY_LAST_TWENTY_FOUR_HOURS,
+    duration: SAMPLE_DURATION_LAST_TWENTY_FOUR_HOURS,
   },
 };