@scality/core-ui 0.170.0 → 0.172.0

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

@@ -1,35 +1,37 @@
 import {
+  CartesianGrid,
   Line,
   LineChart,
   ReferenceLine,
   ResponsiveContainer,
   Tooltip,
+  TooltipContentProps,
   XAxis,
   YAxis,
-  CartesianGrid,
 } from 'recharts';
-import type { Payload } from 'recharts/types/component/DefaultTooltipContent';
-import { useCallback, useMemo, useRef } from 'react';
-import { useTheme } from 'styled-components';
-import { addMissingDataPoint } from '../linetemporalchart/ChartUtil';
-import styled from 'styled-components';
-import { fontSize, fontWeight } from '../../style/theme';
-import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
-import { ChartTitleText, SmallerText } from '../text/Text.component';
-import { Loader } from '../loader/Loader.component';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import styled, { useTheme } from 'styled-components';
 import { spacing } from '../../spacing';
-import { getUnitLabel } from '../linetemporalchart/ChartUtil';
+import { fontSize } from '../../style/theme';
+import { Box } from '../box/Box';
+import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
+import { FormattedDateTime } from '../date/FormattedDateTime';
 import { Icon } from '../icon/Icon.component';
+import {
+  addMissingDataPoint,
+  getUnitLabel,
+} from '../linetemporalchart/ChartUtil';
+import { Loader } from '../loader/Loader.component';
+import { ChartTitleText, SmallerText } from '../text/Text.component';
 import { Tooltip as TooltipComponent } from '../tooltip/Tooltip.component';
-import { FormattedDateTime } from '../date/FormattedDateTime';
-import { Box } from '../box/Box';
 import { formatXAxisLabel } from './utils';
-
-type TooltipPayload = Payload<number, string> & {
-  value: number;
-  name: string;
-  color: string;
-};
+import {
+  ChartTooltipContainer,
+  ChartTooltipItem,
+  ChartTooltipHeader,
+  ChartTooltipItemsContainer,
+} from '../charttooltip/ChartTooltip';
+import { LegendShape } from '../chartlegend/ChartLegend';
 
 const LineTemporalChartWrapper = styled.div`
   display: flex;
@@ -43,61 +45,6 @@ const ChartHeader = styled.div`
   align-items: center;
 `;
 
-const TooltipContainer = styled.div`
-  background-color: ${(props) => props.theme.backgroundLevel1};
-  padding: ${spacing.r8};
-  border: 1px solid ${(props) => props.theme.border};
-  border-radius: 4px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  max-width: 250px;
-`;
-
-const TooltipTime = styled.div`
-  margin-bottom: ${spacing.r8};
-  color: ${(props) => props.theme.textPrimary};
-  font-size: ${fontSize.smaller};
-  font-weight: ${fontWeight.bold};
-  text-align: center;
-`;
-
-const TooltipValue = styled.div`
-  font-size: ${fontSize.smaller};
-  margin-top: 4px;
-  color: ${(props) => props.theme.textSecondary};
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  width: 100%;
-`;
-
-const TooltipLegend = styled.div<{ color: string }>`
-  width: 12px;
-  height: 3px;
-  background-color: ${(props) => props.color};
-  margin-right: 8px;
-  flex-shrink: 0;
-  margin-top: 8px;
-`;
-
-const TooltipLeftGroup = styled.div`
-  display: flex;
-  align-items: flex-start;
-  min-width: 0;
-  flex: 1;
-`;
-
-const TooltipName = styled.div`
-  word-wrap: break-word;
-  word-break: break-word;
-  flex: 1;
-`;
-
-const TooltipInstanceValue = styled.div`
-  margin-left: 16px;
-  flex-shrink: 0;
-  text-align: right;
-`;
-
 export type Serie = {
   // the name of the resource
   resource: string;
@@ -113,16 +60,18 @@ export type Serie = {
 
 type NonSymmetricalChartSerie = {
   yAxisType?: 'default' | 'percentage';
-  series: Serie[];
+  series: Serie[] | undefined;
 };
 
 // The symmetrical chart props are used to display two series on the same chart, such as in/out, write/read
 type SymmetricalChartSerie = {
   yAxisType: 'symmetrical';
-  series: {
-    above: Serie[];
-    below: Serie[];
-  };
+  series:
+    | {
+        above: Serie[] | undefined;
+        below: Serie[] | undefined;
+      }
+    | undefined;
 };
 
 export type LineChartProps = (
@@ -138,6 +87,7 @@ export type LineChartProps = (
     threshold: number;
     label: string;
   }[];
+  syncId?: string;
   isLoading?: boolean;
   /**
    * The format of the x axis, default is 'date-time' which is like 01 Sep 16:00
@@ -147,22 +97,40 @@ export type LineChartProps = (
   timeFormat?: 'date-time' | 'date';
   yAxisTitle?: string;
   helpText?: string;
+  renderTooltip?: (
+    tooltipProps: TooltipContentProps<number, string>,
+    unitLabel?: string,
+    timeFormat?: 'date-time' | 'date',
+  ) => React.ReactNode;
 };
 
-const CustomTooltip = ({
-  active,
-  payload,
-  label,
+const LineTimeSerieChartTooltip = ({
   unitLabel,
   timeFormat,
+  isChartActive,
+  tooltipProps,
+  renderTooltip,
+  hoveredValue,
 }: {
-  active?: boolean;
-  payload?: Array<TooltipPayload>;
-  label?: string;
+  tooltipProps: TooltipContentProps<number, string>;
   unitLabel?: string;
   timeFormat?: 'date-time' | 'date';
+  isChartActive?: boolean;
+  renderTooltip?: (
+    tooltipProps: TooltipContentProps<number, string>,
+    unitLabel?: string,
+    timeFormat?: 'date-time' | 'date',
+  ) => React.ReactNode;
+  hoveredValue?: string;
 }) => {
-  if (!active || !payload || !payload.length || !label) return null;
+  const { active, payload, label } = tooltipProps;
+
+  if (!active || !payload || !payload.length || !label || !isChartActive)
+    return null;
+
+  if (renderTooltip) {
+    return renderTooltip(tooltipProps, unitLabel, timeFormat);
+  }
   // 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) => {
@@ -179,8 +147,8 @@ const CustomTooltip = ({
   });
 
   return (
-    <TooltipContainer>
-      <TooltipTime>
+    <ChartTooltipContainer>
+      <ChartTooltipHeader>
         <FormattedDateTime
           format={
             timeFormat === 'date-time'
@@ -189,26 +157,40 @@ const CustomTooltip = ({
           }
           value={new Date(label)}
         />
-      </TooltipTime>
-      {sortedPayload.map((entry, index) => (
-        <TooltipValue key={index}>
-          <TooltipLeftGroup>
-            <TooltipLegend color={entry.color} />
-            <TooltipName>{entry.name}</TooltipName>
-          </TooltipLeftGroup>
-          <TooltipInstanceValue>
-            {!Number.isFinite(entry.value)
-              ? '-'
-              : `${entry.value.toFixed(2)} ${unitLabel}`}
-          </TooltipInstanceValue>
-        </TooltipValue>
-      ))}
-    </TooltipContainer>
+      </ChartTooltipHeader>
+      <ChartTooltipItemsContainer>
+        {sortedPayload.map((entry, index) => {
+          const legendIcon = (
+            <LegendShape
+              color={entry.color}
+              shape="line"
+              chartColors={{ [entry.color]: entry.color }}
+            />
+          );
+
+          const isHovered = entry.name === hoveredValue;
+
+          const formattedValue = !Number.isFinite(entry.value)
+            ? '-'
+            : `${entry.value.toFixed(2)} ${unitLabel}`;
+
+          return (
+            <ChartTooltipItem
+              key={index}
+              label={entry.name}
+              value={formattedValue}
+              legendIcon={legendIcon}
+              isHovered={isHovered}
+            />
+          );
+        })}
+      </ChartTooltipItemsContainer>
+    </ChartTooltipContainer>
   );
 };
 
 const isSymmetricalSeries = (
-  series: Serie[] | { above: Serie[]; below: Serie[] },
+  series: Serie[] | { above: Serie[] | undefined; below: Serie[] | undefined },
 ): series is { above: Serie[]; below: Serie[] } => {
   return 'above' in series && 'below' in series;
 };
@@ -226,42 +208,67 @@ export function LineTimeSerieChart({
   yAxisType = 'default',
   yAxisTitle,
   helpText,
+  syncId,
+  renderTooltip,
   ...rest
 }: LineChartProps) {
   const theme = useTheme();
-  const { getColor } = useChartLegend();
+  const { getColor, selectedResources } = useChartLegend();
   const chartRef = useRef(null);
 
+  const [isChartActive, setIsChartActive] = useState(false);
+  const [hoveredValue, setHoveredValue] = useState<string | undefined>(
+    undefined,
+  );
   const chartData = useMemo(() => {
+    // Guard against empty/undefined series data
+    if (!series || (Array.isArray(series) && series.length === 0)) {
+      return [];
+    }
+
+    // Handle symmetrical series with empty above/below arrays
+    if (isSymmetricalSeries(series)) {
+      if (
+        (!series.above || series.above.length === 0) &&
+        (!series.below || series.below.length === 0)
+      ) {
+        return [];
+      }
+    }
+
     // 1. Add missing data points
     const normalizedSeries =
       yAxisType === 'symmetrical' && isSymmetricalSeries(series)
         ? {
-            above: series.above.map((line) => ({
-              ...line,
-              data: addMissingDataPoint(
-                line.data,
-                startingTimeStamp,
-                duration,
-                interval,
-              ),
-            })),
+            above: series.above
+              ? series.above.map((line) => ({
+                  ...line,
+                  data: addMissingDataPoint(
+                    line.data,
+                    startingTimeStamp,
+                    duration,
+                    interval,
+                  ),
+                }))
+              : [],
             // Convert positive values to negative values
-            below: series.below.map((line) => ({
-              ...line,
-              data: addMissingDataPoint(
-                line.data,
-                startingTimeStamp,
-                duration,
-                interval,
-              ).map(
-                ([timestamp, value]) =>
-                  [timestamp, value === null ? null : `-${Number(value)}`] as [
-                    number,
-                    string | null,
-                  ],
-              ),
-            })),
+            below: series.below
+              ? series.below.map((line) => ({
+                  ...line,
+                  data: addMissingDataPoint(
+                    line.data,
+                    startingTimeStamp,
+                    duration,
+                    interval,
+                  ).map(
+                    ([timestamp, value]) =>
+                      [
+                        timestamp,
+                        value === null ? null : `-${Number(value)}`,
+                      ] as [number, string | null],
+                  ),
+                }))
+              : [],
           }
         : (series as Serie[]).map((line) => ({
             ...line,
@@ -356,6 +363,15 @@ export function LineTimeSerieChart({
         .filter((value): value is number => value !== null),
     );
 
+    // Guard against empty values array
+    if (values.length === 0) {
+      return {
+        topValue: 100, // Default value for empty charts
+        unitLabel: '',
+        rechartsData: [],
+      };
+    }
+
     const top = Math.abs(Math.max(...values));
     const bottom = Math.abs(Math.min(...values));
     const maxValue = Math.max(top, bottom);
@@ -380,22 +396,30 @@ export function LineTimeSerieChart({
   // Group series by resource and create color mapping
   const { colorMapping, groupedSeries } = useMemo(() => {
     const mapping: Record<string, string> = {};
+
+    // Guard against empty/undefined series
+    if (!series) {
+      return { colorMapping: mapping, groupedSeries: {} };
+    }
+
     const allSeries = isSymmetricalSeries(series)
-      ? [...series.above, ...series.below]
+      ? [...(series.above || []), ...(series.below || [])]
       : (series as Serie[]);
 
     // Group series by resource
-    const groups = allSeries.reduce(
-      (acc, serie) => {
-        const key = serie.resource;
-        if (!acc[key]) {
-          acc[key] = [];
-        }
-        acc[key].push(serie);
-        return acc;
-      },
-      {} as Record<string, Serie[]>,
-    );
+    const groups = allSeries
+      .filter((serie) => selectedResources.includes(serie.resource))
+      .reduce(
+        (acc, serie) => {
+          const key = serie.resource;
+          if (!acc[key]) {
+            acc[key] = [];
+          }
+          acc[key].push(serie);
+          return acc;
+        },
+        {} as Record<string, Serie[]>,
+      );
 
     // Get colors from the ChartLegend context
     Object.keys(groups).forEach((resource) => {
@@ -411,7 +435,7 @@ export function LineTimeSerieChart({
       colorMapping: mapping,
       groupedSeries: groups,
     };
-  }, [series, getColor]);
+  }, [series, getColor, selectedResources]);
 
   // Format time for display the tick in the x axis
   const formatXAxisLabelCallback = useCallback(
@@ -437,95 +461,114 @@ export function LineTimeSerieChart({
         )}
         {isLoading && <Loader />}
       </ChartHeader>
-      <ResponsiveContainer width="100%" height={height}>
-        <LineChart
-          data={rechartsData}
-          ref={chartRef}
-          margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
-          aria-label={`Time series chart for ${title}`}
-        >
-          <CartesianGrid
-            vertical={true}
-            horizontal={true}
-            verticalPoints={[0]}
-            horizontalPoints={[0]}
-            stroke={theme.border}
-            fill={theme.backgroundLevel4}
-            strokeWidth={1}
-          />
-          <XAxis
-            dataKey="timestamp"
-            type="number"
-            domain={['dataMin', 'dataMax']}
-            ticks={xAxisTicks}
-            tickFormatter={formatXAxisLabelCallback}
-            tickCount={5}
-            tick={{
-              fill: theme.textSecondary,
-              fontSize: fontSize.smaller,
-            }}
-            axisLine={{ stroke: theme.border }}
-          />
-          <YAxis
-            orientation="right"
-            allowDataOverflow={false}
-            label={{
-              value: yAxisTitle,
-              angle: 90,
-              position: 'insideRight',
-              style: {
-                textAnchor: 'middle',
+      <div
+        onFocus={() => setIsChartActive(true)}
+        onBlur={() => setIsChartActive(false)}
+        onFocusCapture={() => setIsChartActive(true)}
+        onBlurCapture={() => setIsChartActive(false)}
+      >
+        <ResponsiveContainer width="100%" height={height}>
+          <LineChart
+            data={rechartsData}
+            ref={chartRef}
+            margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
+            aria-label={`Time series chart for ${title}`}
+            syncId={syncId}
+            onMouseEnter={() => setIsChartActive(true)}
+            onMouseLeave={() => setIsChartActive(false)}
+          >
+            <CartesianGrid
+              vertical={true}
+              horizontal={true}
+              verticalPoints={[0]}
+              horizontalPoints={[0]}
+              stroke={theme.border}
+              fill={theme.backgroundLevel4}
+              strokeWidth={1}
+            />
+            <XAxis
+              dataKey="timestamp"
+              type="number"
+              domain={['dataMin', 'dataMax']}
+              ticks={xAxisTicks}
+              tickFormatter={formatXAxisLabelCallback}
+              tickCount={5}
+              tick={{
+                fill: theme.textSecondary,
+                fontSize: fontSize.smaller,
+              }}
+              axisLine={{ stroke: theme.border }}
+            />
+            <YAxis
+              orientation="right"
+              allowDataOverflow={false}
+              label={{
+                value: yAxisTitle,
+                angle: 90,
+                position: 'insideRight',
+                style: {
+                  textAnchor: 'middle',
+                  fill: theme.textSecondary,
+                  fontSize: fontSize.smaller,
+                },
+              }}
+              domain={
+                yAxisType === 'percentage'
+                  ? [0, 100]
+                  : yAxisType === 'symmetrical'
+                    ? [-topValue, topValue]
+                    : [0, topValue]
+              }
+              axisLine={{ stroke: theme.border }}
+              tick={{
                 fill: theme.textSecondary,
                 fontSize: fontSize.smaller,
-              },
-            }}
-            domain={
-              yAxisType === 'percentage'
-                ? [0, 100]
-                : yAxisType === 'symmetrical'
-                  ? [-topValue, topValue]
-                  : [0, topValue]
-            }
-            axisLine={{ stroke: theme.border }}
-            tick={{
-              fill: theme.textSecondary,
-              fontSize: fontSize.smaller,
-            }}
-            tickFormatter={(value) => Math.round(value).toString()}
-            tickCount={5}
-            interval={'preserveStartEnd'}
-          />
-          <Tooltip
-            content={
-              <CustomTooltip unitLabel={unitLabel} timeFormat={timeFormat} />
-            }
-          />
-          {/* Add horizontal line at y=0 for symmetrical charts */}
-          {yAxisType === 'symmetrical' && (
-            <ReferenceLine y={0} stroke={theme.border} />
-          )}
-
-          {/* Chart lines */}
-          {Object.entries(groupedSeries).map(([resource, resourceSeries]) =>
-            resourceSeries.map((serie, serieIndex) => {
-              const label = serie.getTooltipLabel(
-                serie.metricPrefix,
-                serie.resource,
-              );
-              return (
-                <Line
-                  key={`${title}-${resource}-${serieIndex}`}
-                  type="monotone"
-                  dataKey={label}
-                  stroke={colorMapping[resource]}
-                  dot={false}
-                  isAnimationActive={false}
+              }}
+              tickFormatter={(value) => Math.round(value).toString()}
+              tickCount={5}
+              interval={'preserveStartEnd'}
+            />
+            <Tooltip
+              content={(props: TooltipContentProps<number, string>) => (
+                <LineTimeSerieChartTooltip
+                  unitLabel={unitLabel}
+                  timeFormat={timeFormat}
+                  renderTooltip={renderTooltip}
+                  tooltipProps={props}
+                  isChartActive={isChartActive}
+                  hoveredValue={hoveredValue}
                 />
-              );
-            }),
-          )}
-        </LineChart>
-      </ResponsiveContainer>
+              )}
+            />
+            {/* Add horizontal line at y=0 for symmetrical charts */}
+            {yAxisType === 'symmetrical' && (
+              <ReferenceLine y={0} stroke={theme.border} />
+            )}
+
+            {/* Chart lines */}
+            {Object.entries(groupedSeries).map(([resource, resourceSeries]) =>
+              resourceSeries.map((serie, serieIndex) => {
+                const label = serie.getTooltipLabel(
+                  serie.metricPrefix,
+                  serie.resource,
+                );
+                return (
+                  <Line
+                    key={`${title}-${resource}-${serieIndex}`}
+                    type="monotone"
+                    dataKey={label}
+                    stroke={colorMapping[resource]}
+                    dot={false}
+                    isAnimationActive={false}
+                    onMouseEnter={() => setHoveredValue(label)}
+                    onMouseLeave={() => setHoveredValue(undefined)}
+                  />
+                );
+              }),
+            )}
+          </LineChart>
+        </ResponsiveContainer>
+      </div>
     </LineTemporalChartWrapper>
   );
 }

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

@@ -0,0 +1,54 @@
+import { useMemo } from "react";
+import { Area, AreaChart, CartesianGrid, ResponsiveContainer } from "recharts";
+import { useTheme } from "styled-components";
+import { chartColors } from "../../style/theme";
+import { addMissingDataPoint } from "../linetemporalchart/ChartUtil";
+
+type SparklineProps = {
+  serie: {
+    data: [number, number|null][],
+    color?: string, // exa color code like '#ff0000'
+  },
+  startingTimeStamp: number,
+  sampleDuration: number,
+  sampleInterval: number
+};
+
+/**
+ * Sparkline is a simple dynamically sized area chart.
+ * Used to show trends in data over time.
+ */
+export function Sparkline({ serie, startingTimeStamp, sampleDuration, sampleInterval }: 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}
+      />
+      </AreaChart>
+    </ResponsiveContainer>
+  );
+}