@scality/core-ui 0.161.0 → 0.163.0

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

@@ -0,0 +1,534 @@
+import {
+  BarchartProps,
+  BarchartBars,
+  BarchartTooltipFn,
+} from './Barchart.component';
+import { DAY_MONTH_FORMATER, TIME_FORMATER } from '../date/FormattedDateTime';
+import { TooltipContentProps } from 'recharts';
+import { chartColors, ChartColors } from '../../style/theme';
+import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
+
+export const getRoundReferenceValue = (value: number): number => {
+  if (value <= 0) return 10; // Default for zero or negative values
+
+  // Get the magnitude (10^n where n is the number of digits - 1)
+  const magnitude = Math.pow(10, Math.floor(Math.log10(value)));
+
+  // Normalized value between 1 and 10
+  const normalized = value / magnitude;
+
+  // Round to nice numbers based on normalized value
+  if (normalized <= 1) return magnitude;
+  if (normalized <= 2.5) return 2.5 * magnitude;
+  if (normalized <= 5) return 5 * magnitude;
+  return 10 * magnitude;
+};
+
+export const getMaxBarValue = (
+  data: { [key: string]: string | number }[],
+  stacked?: boolean,
+) => {
+  const values = data.map((item) => {
+    // If stacked, we need to filter out category and sum the values in the same object
+    if (stacked) {
+      // Get objects keys except category
+      const filterOutCategory = Object.keys(item).filter(
+        (key) => key !== 'category',
+      );
+      // Sum the values in the same object (corresponding to one bar) based on the keys
+      const sumValues = filterOutCategory.reduce((acc, curr) => {
+        return acc + Number(item[curr]);
+      }, 0);
+      return sumValues;
+    }
+    //filter out the category key
+    const numberValues = Object.keys(item)
+      .filter((key) => key !== 'category')
+      .map((key) => Number(item[key]));
+    // Get the max value among the values in the object (corresponding to one bar)
+    return Math.max(...numberValues);
+  });
+  return Math.max(...values);
+};
+
+/**
+ * Generates time ranges between start and end dates based on the given interval
+ * @param startDate - Start date
+ * @param endDate - End date
+ * @param interval - Interval in milliseconds
+ * @returns Array of time ranges with start and end properties as Date objects
+ */
+const generateTimeRanges = (
+  startDate: Date,
+  endDate: Date,
+  interval: number,
+): { start: Date; end: Date }[] => {
+  const ranges: { start: Date; end: Date }[] = [];
+  if (!startDate || !endDate || !interval) {
+    return ranges;
+  }
+
+  let currentDate = new Date(startDate.getTime());
+  while (currentDate.getTime() <= endDate.getTime()) {
+    const rangeEnd = new Date(currentDate.getTime() + interval);
+
+    ranges.push({
+      start: new Date(currentDate.getTime()),
+      end: rangeEnd,
+    });
+
+    currentDate = new Date(currentDate.getTime() + interval);
+  }
+
+  return ranges;
+};
+
+/**
+ * Formats a date based on the interval
+ * @param date - Date object
+ * @param interval - Interval in milliseconds
+ * @returns Formatted string
+ */
+const formatDate = (date: Date, interval: number): string => {
+  if (interval > 24 * 60 * 60 * 1000) {
+    return (
+      DAY_MONTH_FORMATER.format(date).replace(/[ ,]/g, '') +
+      ' ' +
+      TIME_FORMATER.format(date)
+    );
+  } else if (interval === 24 * 60 * 60 * 1000) {
+    // Daily or longer intervals - use day format
+    return DAY_MONTH_FORMATER.format(date).replace(/[ ,]/g, '');
+  } else if (interval >= 60 * 1000) {
+    //Handle hourly and minute intervals - use minute format
+    return TIME_FORMATER.format(date);
+  } else {
+    // Second intervals or less - use full timestamp
+    return date.toISOString();
+  }
+};
+
+/**
+ * Finds the time range that contains the given date
+ * @param date - Data point date
+ * @param ranges - Array of time ranges
+ * @returns The range that contains the date, or null if not found
+ */
+const findRangeForDate = (
+  date: Date,
+  ranges: { start: Date; end: Date }[],
+): { start: Date; end: Date } | null => {
+  const timestamp = date.getTime();
+  return (
+    ranges.find(
+      (range) =>
+        timestamp >= range.start.getTime() && timestamp < range.end.getTime(),
+    ) || null
+  );
+};
+
+/**
+ * Transforms time-based data into chart format
+ */
+export const transformTimeData = <T extends BarchartBars>(
+  bars: T,
+  type: {
+    type: 'time';
+    timeRange: {
+      startDate: Date;
+      endDate: Date;
+      interval: number;
+    };
+  },
+  barDataKeys: string[],
+) => {
+  const timeRanges = generateTimeRanges(
+    type.timeRange.startDate,
+    type.timeRange.endDate,
+    type.timeRange.interval,
+  );
+
+  const categoryMap = new Map<
+    string | number,
+    { [key: string]: string | number }
+  >();
+
+  // Initialize all ranges with zeros
+  timeRanges.forEach((range) => {
+    const categoryDisplay = formatDate(range.start, type.timeRange.interval);
+    const initialData: { [key: string]: string | number } = {
+      category: categoryDisplay,
+    };
+    barDataKeys.forEach((dataKey) => {
+      initialData[dataKey] = 0;
+    });
+    categoryMap.set(range.start.getTime(), initialData);
+  });
+
+  // Populate with actual data
+  bars.forEach((bar) => {
+    bar.data.forEach(([dateValue, value]) => {
+      // Convert to Date if it's not already a Date object
+      const date =
+        dateValue instanceof Date
+          ? dateValue
+          : new Date(dateValue as string | number);
+      const range = findRangeForDate(date, timeRanges);
+      if (range) {
+        const existingData = categoryMap.get(range.start.getTime())!;
+        existingData[bar.label] = value;
+      }
+    });
+  });
+
+  return Array.from(categoryMap.values());
+};
+
+/**
+ * Transforms category-based data into chart format
+ */
+export const transformCategoryData = <T extends BarchartBars>(
+  bars: T,
+  barDataKeys: string[],
+) => {
+  const categoryMap = new Map<
+    string | number,
+    { [key: string]: string | number }
+  >();
+
+  bars.forEach((bar) => {
+    bar.data.forEach(([key, value]) => {
+      const categoryKey = String(key);
+
+      if (!categoryMap.has(categoryKey)) {
+        const newData: { [key: string]: string | number } = {
+          category: categoryKey,
+        };
+        barDataKeys.forEach((dataKey) => {
+          newData[dataKey] = 0;
+        });
+        categoryMap.set(categoryKey, newData);
+      }
+
+      const existingData = categoryMap.get(categoryKey)!;
+      existingData[bar.label] = value;
+    });
+  });
+
+  return Array.from(categoryMap.values());
+};
+
+/**
+ * Applies custom sorting to chart data
+ */
+export const applySortingToData = <T extends BarchartBars>(
+  data: { [key: string]: string | number }[],
+  barDataKeys: string[],
+  defaultSort: BarchartProps<T>['defaultSort'],
+) => {
+  const points = data.map((item) => {
+    const point: any = { category: item.category };
+    barDataKeys.forEach((dataKey) => {
+      point[dataKey] = Number(item[dataKey]) || 0;
+    });
+    return point;
+  });
+
+  points.sort(defaultSort);
+
+  return points.map((point) => {
+    const dataItem: { [key: string]: string | number } = {
+      category: point.category,
+    };
+    barDataKeys.forEach((dataKey) => {
+      dataItem[dataKey] = point[dataKey];
+    });
+    return dataItem;
+  });
+};
+
+const getRechartsBarsAndBarDataKeys = (
+  bars: BarchartBars,
+  colorSet: Record<string, ChartColors | string>,
+  stacked?: boolean,
+) => {
+  const rechartsBars: { dataKey: string; fill: string; stackId?: string }[] =
+    [];
+  const barDataKeys: string[] = [];
+
+  bars.forEach((bar) => {
+    const colorName = colorSet[bar.label];
+    const rechartsBar = {
+      dataKey: bar.label,
+      fill: chartColors[colorName] || colorName,
+      stackId: stacked ? 'stacked' : undefined,
+    };
+
+    rechartsBars.push(rechartsBar);
+    barDataKeys.push(bar.label);
+  });
+
+  return {
+    rechartsBars,
+    barDataKeys,
+  };
+};
+
+/**
+ * Converts prometheus data to recharts data format
+ * @param bars - The bars to convert
+ * @param type - The chart type (category or time)
+ * @returns Recharts data format
+ */
+export const formatPrometheusDataToRechartsDataAndBars = <
+  T extends BarchartBars,
+>(
+  bars: T,
+  type: BarchartProps<T>['type'],
+  colorSet: Record<string, ChartColors | string>,
+  stacked?: boolean,
+  defaultSort?: BarchartProps<T>['defaultSort'],
+): {
+  data: { [key: string]: string | number }[];
+  rechartsBars: { dataKey: string; fill: string; stackId?: string }[];
+} => {
+  const { rechartsBars, barDataKeys } = getRechartsBarsAndBarDataKeys(
+    bars,
+    colorSet,
+    stacked,
+  );
+
+  let data =
+    type !== 'category' && type.type === 'time'
+      ? transformTimeData(bars, type, barDataKeys)
+      : transformCategoryData(bars, barDataKeys);
+
+  if (type === 'category' && defaultSort) {
+    data = applySortingToData(data, barDataKeys, defaultSort);
+  }
+
+  const sortedRechartsBars = sortStackedBars(rechartsBars, data, stacked);
+
+  return {
+    rechartsBars: sortedRechartsBars,
+    data,
+  };
+};
+
+export type UnitRange = {
+  threshold: number;
+  label: string;
+}[];
+
+export const computeUnitLabelAndRoundReferenceValue = (
+  data: any,
+  maxValue: number,
+  unitRange: UnitRange | undefined,
+) => {
+  if (!unitRange) {
+    const roundReferenceValue = getRoundReferenceValue(maxValue);
+    return { unitLabel: '', roundReferenceValue, rechartsData: data };
+  }
+
+  const { valueBase, unitLabel } = getUnitLabel(unitRange ?? [], maxValue);
+  const topValue = Math.ceil(maxValue / valueBase / 10) * 10;
+  const roundReferenceValue = getRoundReferenceValue(topValue);
+  const rechartsData = data.map((dataPoint) => {
+    const normalizedDataPoint = { ...dataPoint };
+    Object.entries(dataPoint).forEach(([key, value]) => {
+      if (key !== 'category' && typeof value === 'number') {
+        normalizedDataPoint[key] = value / valueBase;
+      }
+    });
+    return normalizedDataPoint;
+  });
+  return { unitLabel, roundReferenceValue, rechartsData };
+};
+
+/**
+ * Return the unit label base on the current dataset, and the valueBase which is used to convert the data
+ * @param {any} unitRange
+ * @param {any} maxValue the maximum value among the data set
+ * @returns {any}
+ */
+export function getUnitLabel(
+  unitRange: {
+    threshold: number;
+    label: string;
+  }[],
+  maxValue: number,
+): {
+  valueBase: number;
+  unitLabel: string;
+} {
+  // first sort the unitRange
+  unitRange.sort(
+    (
+      unitA: {
+        threshold: number;
+        label: string;
+      },
+      unitB: {
+        threshold: number;
+        label: string;
+      },
+    ) => {
+      return unitA.threshold - unitB.threshold;
+    },
+  );
+  let index = unitRange.findIndex((range) => range.threshold > maxValue);
+
+  // last unit
+  if (index === -1) {
+    index = unitRange.length;
+  }
+
+  if (index === 0) {
+    return {
+      valueBase: unitRange[index].threshold,
+      unitLabel: unitRange[index].label,
+    };
+  }
+
+  return {
+    // if the threshold is 0, we use 1 as the value base to avoid division by 0
+    valueBase: unitRange[index - 1].threshold || 1,
+    unitLabel: unitRange[index - 1].label,
+  };
+}
+
+// Sort stacked bars by their average values in descending order
+// This ensures the largest bars appear at the bottom of the stack
+export const sortStackedBars = (
+  rechartsBars: {
+    dataKey: string;
+    fill: string;
+    stackId?: string;
+  }[],
+  data: {
+    [key: string]: string | number;
+  }[],
+  stacked?: boolean,
+) => {
+  if (!stacked) {
+    return rechartsBars;
+  }
+  const barAverages = rechartsBars.map((bar) => {
+    const values = data
+      .map((item) => Number(item[bar.dataKey]) || 0)
+      .filter((value) => !isNaN(value));
+    const average =
+      values.length > 0 ? values.reduce((a, b) => a + b, 0) / values.length : 0;
+    return { ...bar, average };
+  });
+
+  // Sort by average in descending order (largest first, which will be at bottom in stack)
+  barAverages.sort((a, b) => b.average - a.average);
+  // Remove the average property and keep only the bar data
+  return barAverages.map(({ average, ...bar }) => bar);
+};
+
+export const renderTooltipContent = <T extends BarchartBars>(
+  props: TooltipContentProps<number, string>,
+  tooltip: BarchartTooltipFn<T> | undefined,
+  hoveredValue: string | undefined,
+) => {
+  const { active, payload, label } = props;
+
+  if (!active || !tooltip) {
+    return null;
+  }
+
+  const tooltipValues: {
+    label: T[number]['label'];
+    value: number;
+    isHovered: boolean;
+  }[] = payload.map((item) => ({
+    label: item.name,
+    value: item.value,
+    isHovered: item.name === hoveredValue,
+  }));
+
+  const currentPoint = {
+    category: label as string | number,
+    values: tooltipValues,
+  };
+
+  return tooltip(currentPoint);
+};
+
+/**
+ * Filters both chart data and recharts bars to only include selected resources from legend
+ * @param data - Array of chart data objects with category and resource values
+ * @param rechartsBars - Array of recharts bar configurations
+ * @param selectedResources - Array of selected resource names
+ * @returns Object containing filtered data and recharts bars
+ */
+export const filterChartDataAndBarsByLegendSelection = (
+  data: { [key: string]: string | number }[],
+  rechartsBars: { dataKey: string; fill: string; stackId?: string }[],
+  selectedResources: string[],
+) => {
+  // If no resources are selected, show all data and bars (default behavior)
+  if (selectedResources.length === 0) {
+    return { filteredData: data, filteredRechartsBars: rechartsBars };
+  }
+
+  // Filter recharts bars
+  const filteredRechartsBars = rechartsBars.filter((bar) =>
+    selectedResources.includes(bar.dataKey),
+  );
+
+  // Filter data to only include selected resources
+  const filteredData = data.map((item) => {
+    const filteredItem: { [key: string]: string | number } = {
+      category: item.category,
+    };
+    selectedResources.forEach((resource) => {
+      if (resource in item) {
+        filteredItem[resource] = item[resource];
+      }
+    });
+    return filteredItem;
+  });
+
+  return { filteredData, filteredRechartsBars };
+};
+
+export const useChartData = <T extends BarchartBars>(
+  bars: T,
+  type: BarchartProps<T>['type'],
+  colorSet: Record<string, ChartColors | string>,
+  stacked?: boolean,
+  defaultSort?: BarchartProps<T>['defaultSort'],
+  unitRange?: UnitRange,
+) => {
+  const { selectedResources } = useChartLegend();
+  const { data, rechartsBars } = formatPrometheusDataToRechartsDataAndBars(
+    bars,
+    type,
+    colorSet,
+    stacked,
+    defaultSort,
+  );
+
+  // Filter both data and bars to only include selected resources for accurate maxValue calculation
+  const { filteredData, filteredRechartsBars } =
+    filterChartDataAndBarsByLegendSelection(
+      data,
+      rechartsBars,
+      selectedResources,
+    );
+
+  const maxValue = getMaxBarValue(filteredData, stacked);
+
+  const { unitLabel, roundReferenceValue, rechartsData } =
+    computeUnitLabelAndRoundReferenceValue(filteredData, maxValue, unitRange);
+
+  return {
+    rechartsBars: filteredRechartsBars,
+    unitLabel,
+    roundReferenceValue,
+    rechartsData,
+  };
+};

package/src/lib/components/buttonv2/Buttonv2.component.tsx

@@ -1,4 +1,4 @@
-import React, { ButtonHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes } from 'react';
 import styled, { css } from 'styled-components';
 import { spacing } from '../../spacing';
 import { fontSize, fontWeight } from '../../style/theme';

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

@@ -0,0 +1,113 @@
+import styled from 'styled-components';
+import { useChartLegend } from './ChartLegendWrapper';
+import { Text } from '../text/Text.component';
+import { chartColors } from '../../style/theme';
+import { useCallback } from 'react';
+
+type ChartLegendProps = {
+  shape: 'line' | 'rectangle';
+  disabled?: boolean;
+  direction?: 'horizontal' | 'vertical';
+};
+
+const Legend = styled.div<{ direction: 'horizontal' | 'vertical' }>`
+  display: flex;
+  flex-direction: ${({ direction }) =>
+    direction === 'horizontal' ? 'row' : 'column'};
+  gap: ${({ direction }) => (direction === 'horizontal' ? '16px' : '8px')};
+  flex-wrap: wrap;
+`;
+
+const LegendItem = styled.div<{ disabled?: boolean; selected?: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ selected, disabled }) => (disabled ? 0.5 : selected ? 1 : 0.7)};
+  transition: opacity 0.2s ease;
+
+  &:hover {
+    opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
+  }
+`;
+
+const LegendShape = styled.div<{
+  color?: string;
+  shape: 'line' | 'rectangle';
+  chartColors: Record<string, string>;
+}>`
+  ${({ shape, color, chartColors }) => {
+    if (shape === 'line') {
+      return `
+        width: 20px;
+        height: 2px;
+        background-color: ${chartColors[color as keyof typeof chartColors] || color};
+      `;
+    } else if (shape === 'rectangle') {
+      return `
+        width: 12px;
+        height: 12px;
+        background-color: ${chartColors[color as keyof typeof chartColors] || color};
+        border-radius: 2px;
+      `;
+    } else {
+      console.error(
+        'The shape is not valid. Please use "line" or "rectangle".',
+      );
+    }
+  }}
+`;
+
+export const ChartLegend = ({
+  shape,
+  disabled = false,
+  direction = 'horizontal',
+}: ChartLegendProps) => {
+  const {
+    listResources,
+    getColor,
+    isSelected,
+    addSelectedResource,
+    removeSelectedResource,
+  } = useChartLegend();
+
+  const resources = listResources();
+
+  const handleLegendClick = useCallback(
+    (resource: string) => {
+      if (disabled) return;
+
+      if (isSelected(resource)) {
+        removeSelectedResource(resource);
+      } else {
+        addSelectedResource(resource);
+      }
+    },
+    [disabled, isSelected, addSelectedResource, removeSelectedResource],
+  );
+
+  return (
+    <Legend direction={direction}>
+      {resources.map((resource) => {
+        const color = getColor(resource);
+        const selected = isSelected(resource);
+
+        return (
+          <LegendItem
+            key={resource}
+            disabled={disabled}
+            selected={selected}
+            onClick={() => handleLegendClick(resource)}
+          >
+            <LegendShape
+              color={color}
+              shape={shape}
+              chartColors={chartColors}
+            />
+            <Text variant="Basic">{resource}</Text>
+          </LegendItem>
+        );
+      })}
+    </Legend>
+  );
+};