@scality/core-ui 0.161.0 → 0.162.0

package/src/lib/components/barchartv2/Barchart.component.test.tsx

@@ -0,0 +1,383 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { getWrapper } from '../../testUtils';
+import { Barchart } from './Barchart.component';
+
+const ONE_DAY_IN_MILLISECONDS = 24 * 60 * 60 * 1000;
+const ONE_HOUR_IN_MILLISECONDS = 60 * 60 * 1000;
+
+// Mock ResponsiveContainer to test the Barchart component
+jest.mock('recharts', () => {
+  const OriginalResponsiveContainerModule = jest.requireActual('recharts');
+
+  return {
+    ...OriginalResponsiveContainerModule,
+    ResponsiveContainer: ({ height, children }) => (
+      <OriginalResponsiveContainerModule.ResponsiveContainer
+        width={800}
+        height={300}
+        data-testid="responsive-container"
+      >
+        {children}
+      </OriginalResponsiveContainerModule.ResponsiveContainer>
+    ),
+  };
+});
+
+const testBars = [
+  {
+    label: 'Success',
+    data: [
+      ['category1', 10],
+      ['category2', 20],
+      ['category3', 30],
+    ],
+    color: 'green',
+  },
+] as const;
+
+const testTimeBars = [
+  {
+    label: 'Success',
+    data: [
+      [new Date('2024-07-05'), 10],
+      [new Date('2024-07-06'), 20],
+      [new Date('2024-07-07'), 30],
+    ],
+    color: 'green',
+  },
+] as const;
+
+describe('Barchart', () => {
+  describe('Basic rendering', () => {
+    it('should render the Barchart component with category data', async () => {
+      const { Wrapper } = getWrapper();
+      render(
+        <Wrapper>
+          <Barchart
+            type="category"
+            bars={testBars}
+            colorSet={{
+              Success: 'lineColor1',
+            }}
+          />
+        </Wrapper>,
+      );
+
+      expect(screen.getByText('category1')).toBeInTheDocument();
+      expect(screen.getByText('category2')).toBeInTheDocument();
+      expect(screen.getByText('category3')).toBeInTheDocument();
+    });
+    it('should render the Barchart component with time data', async () => {
+      const { Wrapper } = getWrapper();
+      render(
+        <Wrapper>
+          <Barchart
+            type={{
+              type: 'time',
+              timeRange: {
+                startDate: new Date('2024-07-05'),
+                endDate: new Date('2024-07-07'),
+                interval: ONE_DAY_IN_MILLISECONDS,
+              },
+            }}
+            bars={testTimeBars}
+            colorSet={{
+              Success: 'lineColor1',
+            }}
+          />
+        </Wrapper>,
+      );
+
+      expect(screen.getByText('Fri05Jul')).toBeInTheDocument();
+      expect(screen.getByText('Sat06Jul')).toBeInTheDocument();
+      expect(screen.getByText('Sun07Jul')).toBeInTheDocument();
+    });
+  });
+
+  describe('Time data', () => {
+    it('should render the chart with correct starting days even if the data is missing', async () => {
+      const { Wrapper } = getWrapper();
+      render(
+        <Wrapper>
+          <Barchart
+            type={{
+              type: 'time',
+              timeRange: {
+                startDate: new Date('2024-07-03'),
+                endDate: new Date('2024-07-07'),
+                interval: ONE_DAY_IN_MILLISECONDS,
+              },
+            }}
+            // data starts on 2024-07-05
+            bars={testTimeBars}
+            colorSet={{
+              Success: 'lineColor1',
+            }}
+          />
+        </Wrapper>,
+      );
+      expect(screen.getByText('Wed03Jul')).toBeInTheDocument();
+      expect(screen.getByText('Thu04Jul')).toBeInTheDocument();
+      expect(screen.getByText('Fri05Jul')).toBeInTheDocument();
+      expect(screen.getByText('Sat06Jul')).toBeInTheDocument();
+      expect(screen.getByText('Sun07Jul')).toBeInTheDocument();
+    });
+    it('should render when there are missing data in the time range', async () => {
+      const bars = [
+        {
+          label: 'Success',
+          data: [
+            [new Date('2024-07-05'), 10], // Friday
+            [new Date('2024-07-08'), 15], // Monday
+          ] as [Date, number][],
+          color: 'green',
+        },
+        {
+          label: 'Failed',
+          data: [
+            [new Date('2024-07-05'), 2], // Friday
+            [new Date('2024-07-08'), 3], // Monday
+          ] as [Date, number][],
+          color: 'red',
+        },
+      ] as const;
+
+      const type = {
+        type: 'time' as const,
+        timeRange: {
+          startDate: new Date('2024-07-05'),
+          endDate: new Date('2024-07-08'),
+          interval: ONE_DAY_IN_MILLISECONDS,
+        },
+      };
+      const { Wrapper } = getWrapper();
+      render(
+        <Wrapper>
+          <Barchart
+            type={type}
+            bars={bars}
+            colorSet={{
+              Success: 'lineColor1',
+              Failed: 'lineColor2',
+            }}
+          />
+        </Wrapper>,
+      );
+
+      // Check that all days are present
+      await waitFor(() => {
+        expect(screen.getByText('Fri05Jul')).toBeInTheDocument();
+        expect(screen.getByText('Sat06Jul')).toBeInTheDocument();
+        expect(screen.getByText('Sun07Jul')).toBeInTheDocument();
+        expect(screen.getByText('Mon08Jul')).toBeInTheDocument();
+      });
+    });
+    it('should render for a specific time range', async () => {
+      // 7 days data from 2024-07-05 to 2024-07-11
+      const testTimeBars = [
+        {
+          label: 'Success',
+          data: [
+            [new Date('2024-07-05'), 10],
+            [new Date('2024-07-06'), 10],
+            [new Date('2024-07-07'), 10],
+            [new Date('2024-07-08'), 10],
+            [new Date('2024-07-09'), 10],
+            [new Date('2024-07-10'), 10],
+            [new Date('2024-07-11'), 10],
+          ],
+          color: 'green',
+        },
+      ] as const;
+
+      const type = {
+        type: 'time' as const,
+        timeRange: {
+          startDate: new Date('2024-07-05'),
+          endDate: new Date('2024-07-11'),
+          interval: ONE_DAY_IN_MILLISECONDS,
+        },
+      };
+      const { Wrapper } = getWrapper();
+      render(
+        <Wrapper>
+          <Barchart
+            type={type}
+            bars={testTimeBars}
+            colorSet={{
+              Success: 'lineColor1',
+            }}
+          />
+        </Wrapper>,
+      );
+      await waitFor(() => {
+        expect(screen.getByText('Fri05Jul')).toBeInTheDocument();
+        expect(screen.getByText('Sat06Jul')).toBeInTheDocument();
+        expect(screen.getByText('Sun07Jul')).toBeInTheDocument();
+        expect(screen.getByText('Mon08Jul')).toBeInTheDocument();
+        expect(screen.getByText('Tue09Jul')).toBeInTheDocument();
+        expect(screen.getByText('Wed10Jul')).toBeInTheDocument();
+        expect(screen.getByText('Thu11Jul')).toBeInTheDocument();
+      });
+    });
+    it('should render the Barchart component with hourly intervals', async () => {
+      const testHourlyBars = [
+        {
+          label: 'Success',
+          data: [
+            [new Date('2024-07-05T10:00:00'), 10],
+            [new Date('2024-07-05T12:00:00'), 20],
+          ],
+          color: 'green',
+        },
+      ] as const;
+
+      const { Wrapper } = getWrapper();
+      render(
+        <Wrapper>
+          <Barchart
+            type={{
+              type: 'time',
+              timeRange: {
+                startDate: new Date('2024-07-05T10:00:00'),
+                endDate: new Date('2024-07-05T12:00:00'),
+                interval: ONE_HOUR_IN_MILLISECONDS,
+              },
+            }}
+            bars={testHourlyBars}
+            colorSet={{
+              Success: 'lineColor1',
+            }}
+          />
+        </Wrapper>,
+      );
+
+      expect(screen.getByText('10:00')).toBeInTheDocument();
+      expect(screen.getByText('11:00')).toBeInTheDocument();
+      expect(screen.getByText('12:00')).toBeInTheDocument();
+    });
+  });
+
+  it('should render stacked bars', () => {
+    const testStackedBars = [
+      {
+        label: 'Success',
+        data: [
+          ['category1', 10],
+          ['category2', 20],
+          ['category3', 30],
+        ],
+        color: 'green',
+      },
+      {
+        label: 'Failed',
+        data: [
+          ['category1', 5],
+          ['category2', 8],
+          ['category3', 12],
+        ],
+        color: 'red',
+      },
+    ] as const;
+
+    const { Wrapper } = getWrapper();
+    render(
+      <Wrapper>
+        <Barchart
+          type="category"
+          bars={testStackedBars}
+          stacked={true}
+          colorSet={{
+            Success: 'lineColor1',
+            Failed: 'lineColor2',
+          }}
+        />
+      </Wrapper>,
+    );
+
+    expect(screen.getByText('category1')).toBeInTheDocument();
+    expect(screen.getByText('category2')).toBeInTheDocument();
+    expect(screen.getByText('category3')).toBeInTheDocument();
+  });
+
+  it('should sort categories using defaultSort function', () => {
+    const testBars = [
+      {
+        label: 'Success',
+        data: [
+          ['category1', 10],
+          ['category2', 20],
+          ['category3', 30],
+        ],
+        color: 'green',
+      },
+    ] as const;
+
+    const { Wrapper } = getWrapper();
+    render(
+      <Wrapper>
+        <Barchart
+          type="category"
+          bars={testBars}
+          defaultSort={(pointA, pointB) => {
+            const valueA = pointA.Success;
+            const valueB = pointB.Success;
+            return valueB - valueA > 0 ? 1 : valueB - valueA < 0 ? -1 : 0;
+          }}
+          colorSet={{
+            Success: 'lineColor1',
+          }}
+        />
+      </Wrapper>,
+    );
+
+    // Categories should be rendered in descending order by value
+    const categories = screen.getAllByText(/category[123]/);
+    expect(categories[0]).toHaveTextContent('category3'); // 30 (highest)
+    expect(categories[1]).toHaveTextContent('category2'); // 20 (middle)
+    expect(categories[2]).toHaveTextContent('category1'); // 10 (lowest)
+  });
+
+  it('should render the Barchart component with loading state', () => {
+    const { Wrapper } = getWrapper();
+    render(
+      <Wrapper>
+        <Barchart
+          type="category"
+          bars={[]}
+          isLoading
+          colorSet={{
+            Success: 'lineColor1',
+          }}
+        />
+      </Wrapper>,
+    );
+    expect(screen.getByText('Loading Chart Data...')).toBeInTheDocument();
+  });
+  it('should render header with title, secondary title, right title and help tooltip', async () => {
+    const { Wrapper } = getWrapper();
+    render(
+      <Wrapper>
+        <Barchart
+          type="category"
+          bars={[]}
+          title="Test Title"
+          secondaryTitle="Test Secondary Title"
+          rightTitle="Test Right Title"
+          helpTooltip="Test Help Tooltip"
+          colorSet={{
+            Success: 'lineColor1',
+          }}
+        />
+      </Wrapper>,
+    );
+
+    expect(screen.getByText('Test Title')).toBeInTheDocument();
+    expect(screen.getByText('Test Secondary Title')).toBeInTheDocument();
+    expect(screen.getByText('Test Right Title')).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByLabelText('Test Help Tooltip')).toBeInTheDocument();
+    });
+  });
+});

package/src/lib/components/barchartv2/Barchart.component.tsx

@@ -0,0 +1,309 @@
+import { useState } from 'react';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  ReferenceLine,
+  ResponsiveContainer,
+  Tooltip,
+  TooltipContentProps,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import styled, { useTheme } from 'styled-components';
+import { spacing, Stack, Wrap } from '../../spacing';
+import { chartColors, ChartColors, fontSize } from '../../style/theme';
+import { Box } from '../box/Box';
+import { ConstrainedText } from '../constrainedtext/Constrainedtext.component';
+import { IconHelp } from '../iconhelper/IconHelper';
+import { Loader } from '../loader/Loader.component';
+import { Text } from '../text/Text.component';
+import { renderTooltipContent, UnitRange, useChartData } from './utils';
+
+const CHART_CONSTANTS = {
+  TICK_WIDTH_OFFSET: 5,
+  BAR_SIZE: 12,
+  MIN_POINT_SIZE: 1,
+  DEFAULT_HEIGHT: 200,
+  CHART_MARGIN: {
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+  },
+} as const;
+
+/* ---------------------------------- TYPE ---------------------------------- */
+
+export type TimeType = {
+  type: 'time';
+  timeRange: {
+    startDate: Date;
+    endDate: Date;
+    interval: number;
+  };
+};
+export type Point = {
+  key: string | number;
+  values: { label: string; value: number }[];
+};
+
+export type BarchartBars = readonly {
+  readonly label: string;
+  /**
+   * When using a time type, the data should be an array of [Date, value]
+   * so use Date instead of timestamp for transformation data in format fn
+   */
+  readonly data: readonly (readonly [string | Date, number | string])[];
+}[];
+
+export type BarchartTooltipFn<T extends BarchartBars> = (currentPoint: {
+  category: string | number;
+  values: { label: T[number]['label']; value: number; isHovered: boolean }[];
+}) => React.ReactNode;
+
+export type BarchartSortFn<T extends BarchartBars> = (
+  pointA: Record<T[number]['label'], number> & { category: string | number },
+  pointB: Record<T[number]['label'], number> & { category: string | number },
+) => 1 | -1 | 0;
+
+export type BarchartProps<T extends BarchartBars> = {
+  type: 'category' | TimeType;
+  bars: T;
+  colorSet: Record<T[number]['label'], ChartColors | (string & {})>;
+  tooltip?: BarchartTooltipFn<T>;
+  defaultSort?: BarchartSortFn<T>;
+  unitRange?: UnitRange;
+  helpTooltip?: string;
+  stacked?: boolean;
+  title?: string;
+  secondaryTitle?: string;
+  rightTitle?: React.ReactNode;
+  height?: number;
+  isLoading?: boolean;
+};
+
+interface CustomTickProps {
+  x: number;
+  y: number;
+  payload: {
+    value: string | number;
+  };
+  visibleTicksCount: number;
+  width: number;
+}
+
+/* ---------------------------------- COMPONENTS ---------------------------------- */
+
+const CustomTick = ({
+  x,
+  y,
+  payload,
+  visibleTicksCount,
+  width,
+}: CustomTickProps) => {
+  const theme = useTheme();
+  const tickWidth =
+    width / visibleTicksCount - CHART_CONSTANTS.TICK_WIDTH_OFFSET;
+  const centerX = x - tickWidth / 2;
+
+  return (
+    <foreignObject
+      x={centerX}
+      y={y}
+      width={tickWidth}
+      color={theme.textSecondary}
+      overflow="visible"
+    >
+      <ConstrainedText
+        text={
+          <Text variant="Smaller" color="textSecondary">
+            {String(payload.value)}
+          </Text>
+        }
+        centered
+        tooltipStyle={{
+          backgroundColor: theme.backgroundLevel1,
+          padding: spacing.r10,
+          borderRadius: spacing.r8,
+          border: `1px solid ${theme.border}`,
+          position: 'absolute',
+        }}
+      />
+    </foreignObject>
+  );
+};
+
+const StyledResponsiveContainer = styled(ResponsiveContainer)`
+  // Avoid tooltip over constrained text to be cut off
+  & .recharts-surface {
+    overflow: visible;
+  }
+`;
+
+const ChartHeader = ({
+  title,
+  secondaryTitle,
+  helpTooltip,
+  rightTitle,
+}: {
+  title?: string;
+  secondaryTitle?: string;
+  helpTooltip?: string;
+  rightTitle?: React.ReactNode;
+}) => {
+  return (
+    <Wrap>
+      <Stack gap="r4">
+        <Text variant="ChartTitle">{title}</Text>
+        {helpTooltip && (
+          <IconHelp tooltipMessage={helpTooltip} title={helpTooltip} />
+        )}
+
+        {secondaryTitle && (
+          <Text
+            color="textSecondary"
+            style={{
+              marginLeft: spacing.r8,
+            }}
+          >
+            {secondaryTitle}
+          </Text>
+        )}
+      </Stack>
+
+      {rightTitle && <Text>{rightTitle}</Text>}
+    </Wrap>
+  );
+};
+
+const Loading = ({ height }: { height: number }) => {
+  return (
+    <Box
+      height={height}
+      style={{
+        alignItems: 'center',
+        justifyContent: 'center',
+        display: 'flex',
+      }}
+    >
+      <Loader size="larger" children={<Text>Loading Chart Data...</Text>} />
+    </Box>
+  );
+};
+
+/* ---------------------------------- MAIN COMPONENT ---------------------------------- */
+
+export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
+  const theme = useTheme();
+  const [hoveredValue, setHoveredValue] = useState<string | undefined>();
+
+  const {
+    height = CHART_CONSTANTS.DEFAULT_HEIGHT,
+    bars,
+    type = 'category',
+    colorSet,
+    unitRange,
+    stacked,
+    defaultSort,
+    tooltip,
+    title,
+    secondaryTitle,
+    helpTooltip,
+    rightTitle,
+    isLoading,
+  } = props;
+
+  const { rechartsBars, unitLabel, roundReferenceValue, rechartsData } =
+    useChartData(bars, type, colorSet, stacked, defaultSort, unitRange);
+
+  return (
+    <Stack direction="vertical" gap="r8">
+      <ChartHeader
+        title={title}
+        secondaryTitle={secondaryTitle}
+        helpTooltip={helpTooltip}
+        rightTitle={rightTitle}
+      />
+      {isLoading ? (
+        <Loading height={height} />
+      ) : (
+        <StyledResponsiveContainer width="100%" height={height}>
+          <BarChart
+            data={rechartsData}
+            accessibilityLayer
+            barSize={CHART_CONSTANTS.BAR_SIZE}
+            height={height}
+            margin={CHART_CONSTANTS.CHART_MARGIN}
+          >
+            <CartesianGrid
+              vertical={false}
+              horizontal={false}
+              fill={theme.backgroundLevel1}
+            />
+            {rechartsBars.map((bar) => {
+              const { fill, dataKey, stackId } = bar;
+              return (
+                <Bar
+                  key={dataKey}
+                  dataKey={dataKey}
+                  fill={chartColors[fill] || fill}
+                  minPointSize={CHART_CONSTANTS.MIN_POINT_SIZE}
+                  stackId={stackId}
+                  onMouseOver={() => setHoveredValue(dataKey)}
+                  onMouseLeave={() => setHoveredValue(undefined)}
+                />
+              );
+            })}
+
+            <YAxis
+              tickCount={1}
+              unit={` ${unitLabel}`}
+              domain={[0, roundReferenceValue]}
+              tickFormatter={
+                (value) =>
+                  new Intl.NumberFormat('fr-FR').format(value.toFixed(0)) // Add a space as thousand separator
+              }
+              axisLine={false}
+              tick={{
+                fill: theme.textSecondary,
+                fontSize: fontSize.smaller,
+              }}
+              tickLine={false}
+              label={{
+                fill: theme.textSecondary,
+              }}
+              orientation="right"
+            />
+
+            <ReferenceLine
+              y={roundReferenceValue}
+              fill={theme.border}
+              strokeWidth={0.5} // Reduce stroke width to make it less visible
+            />
+            <XAxis
+              dataKey="category"
+              tick={(props) => <CustomTick {...props} />}
+              type="category"
+              interval={0}
+              allowDataOverflow={true}
+              tickLine={{
+                stroke: theme.textSecondary,
+              }}
+              axisLine={{
+                stroke: theme.textSecondary,
+              }}
+            />
+
+            <Tooltip
+              content={(props: TooltipContentProps<number, string>) =>
+                renderTooltipContent(props, tooltip, hoveredValue)
+              }
+              cursor={false}
+            />
+          </BarChart>
+        </StyledResponsiveContainer>
+      )}
+    </Stack>
+  );
+};