@scality/core-ui 0.161.0 → 0.163.0

package/dist/next.js

@@ -13,3 +13,5 @@ export { CoreUiThemeProvider } from './components/coreuithemeprovider/CoreUiThem
 export { Box } from './components/box/Box';
 export { Input } from './components/inputv2/inputv2';
 export { Accordion } from './components/accordion/Accordion.component';
+export { Barchart, } from './components/barchartv2/Barchart.component';
+export { ChartLegendWrapper } from './components/chartlegend/ChartLegendWrapper';

package/dist/style/theme.d.ts

@@ -63,6 +63,14 @@ export declare const coreUIAvailableThemes: Record<CoreUIThemeName, CoreUITheme>
  * import { coreUIAvailableThemes } from '@scality/core-ui/dist/style/theme';
  */
 export declare const defaultTheme: Record<"darkRebrand" | "artescaLight" | "ring9dark", CoreUITheme>;
+/**
+ * @deprecated
+ * Instead should use useTheme()
+ * import { useTheme } from 'styled-components';
+ * const theme = useTheme();
+ * e.g: color={theme.statusHealthy}
+ *
+ */
 export declare const brand: CoreUITheme;
 export type ThemeColors = keyof CoreUITheme;
 export declare const lineColor1 = "#A14FBF";
@@ -73,6 +81,17 @@ export declare const lineColor5 = "#E3FF73";
 export declare const lineColor6 = "#BE2543";
 export declare const lineColor7 = "#FD8144";
 export declare const lineColor8 = "#F6B187";
+export type ChartColors = keyof typeof chartColors;
+export declare const chartColors: {
+    lineColor1: string;
+    lineColor2: string;
+    lineColor3: string;
+    lineColor4: string;
+    lineColor5: string;
+    lineColor6: string;
+    lineColor7: string;
+    lineColor8: string;
+};
 export declare const fontSize: {
     smaller: string;
     small: string;
@@ -157,4 +176,5 @@ export declare const navbarHeight = "3rem";
 export declare const navbarItemWidth = "4.286rem";
 export declare const sidebarItemHeight: string;
 export declare const sidebarWidth: string;
+export declare const lineTimeSeriesColorRange: string[];
 //# sourceMappingURL=theme.d.ts.map

package/dist/style/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/lib/style/theme.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/lib/style/theme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO,YAAY,CAAC;AACjC,eAAO,MAAM,IAAI,YAAY,CAAC;AAC9B,eAAO,MAAM,SAAS,YAAY,CAAC;AACnC,eAAO,MAAM,IAAI,YAAY,CAAC;AAC9B,eAAO,MAAM,IAAI,YAAY,CAAC;AAC9B,eAAO,MAAM,UAAU,YAAY,CAAC;AACpC,eAAO,MAAM,OAAO,YAAY,CAAC;AACjC,eAAO,MAAM,SAAS,YAAY,CAAC;AACnC,eAAO,MAAM,YAAY,YAAY,CAAC;AACtC,eAAO,MAAM,YAAY,YAAY,CAAC;AACtC,eAAO,MAAM,MAAM,YAAY,CAAC;AAChC,eAAO,MAAM,KAAK,YAAY,CAAC;AAC/B,eAAO,MAAM,KAAK,YAAY,CAAC;AAC/B,eAAO,MAAM,KAAK,YAAY,CAAC;AAC/B,eAAO,MAAM,UAAU,YAAY,CAAC;AACpC,eAAO,MAAM,WAAW,YAAY,CAAC;AACrC,eAAO,MAAM,UAAU,YAAY,CAAC;AACpC,eAAO,MAAM,QAAQ,YAAY,CAAC;AAClC,eAAO,MAAM,IAAI,YAAY,CAAC;AAC9B,eAAO,MAAM,SAAS,YAAY,CAAC;AACnC,eAAO,MAAM,WAAW,YAAY,CAAC;AACrC,eAAO,MAAM,YAAY,YAAY,CAAC;AACtC,eAAO,MAAM,WAAW,YAAY,CAAC;AACrC,eAAO,MAAM,UAAU,YAAY,CAAC;AACpC,eAAO,MAAM,QAAQ,YAAY,CAAC;AAClC,eAAO,MAAM,IAAI,YAAY,CAAC;AAC9B,eAAO,MAAM,SAAS,YAAY,CAAC;AACnC,eAAO,MAAM,WAAW,YAAY,CAAC;AACrC,eAAO,MAAM,YAAY,YAAY,CAAC;AAEtC,MAAM,MAAM,WAAW,GAAG;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,0BAA0B,uDAI7B,CAAC;AACX,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,0BAA0B,CAAC,CAAC,MAAM,CAAC,CAAC;AAE1E,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,eAAe,EAAE,WAAW,CA4EtE,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,mEAAwB,CAAC;AAElD;;;;;;;GAOG;AAEH,eAAO,MAAM,KAAK,aAAoC,CAAC;AAEvD,MAAM,MAAM,WAAW,GAAG,MAAM,WAAW,CAAC;AAG5C,eAAO,MAAM,UAAU,YAAY,CAAC;AACpC,eAAO,MAAM,UAAU,YAAY,CAAC;AACpC,eAAO,MAAM,UAAU,YAAY,CAAC;AACpC,eAAO,MAAM,UAAU,YAAY,CAAC;AACpC,eAAO,MAAM,UAAU,YAAY,CAAC;AACpC,eAAO,MAAM,UAAU,YAAY,CAAC;AACpC,eAAO,MAAM,UAAU,YAAY,CAAC;AACpC,eAAO,MAAM,UAAU,YAAY,CAAC;AAEpC,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,WAAW,CAAC;AAEnD,eAAO,MAAM,WAAW;;;;;;;;;CASvB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;CASpB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,KAAK,UAejB,CAAC;AACF,eAAO,MAAM,UAAU;;;;;CAKtB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,OAAO;;;;;;CAMnB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;CAenB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;;;CAQnB,CAAC;AACF,eAAO,MAAM,MAAM;;;;;;;;;;CAUlB,CAAC;AAEF,eAAO,MAAM,YAAY,SAAS,CAAC;AACnC,eAAO,MAAM,eAAe,aAAa,CAAC;AAE1C,eAAO,MAAM,iBAAiB,QAAe,CAAC;AAC9C,eAAO,MAAM,YAAY,QAAe,CAAC;AAGzC,eAAO,MAAM,wBAAwB,UAyBpC,CAAC"}

package/dist/style/theme.js

@@ -1,3 +1,4 @@
+import { lighten, darken } from 'polished';
 //== Colors
 export const hotPink = '#E40046';
 export const pink = '#EB4962';
@@ -118,7 +119,14 @@ export const coreUIAvailableThemes = {
  * import { coreUIAvailableThemes } from '@scality/core-ui/dist/style/theme';
  */
 export const defaultTheme = coreUIAvailableThemes;
-// Why use this and not directly coreUIAvailableThemes.darkRebrand ?
+/**
+ * @deprecated
+ * Instead should use useTheme()
+ * import { useTheme } from 'styled-components';
+ * const theme = useTheme();
+ * e.g: color={theme.statusHealthy}
+ *
+ */
 export const brand = coreUIAvailableThemes.darkRebrand;
 // LineChart colors
 export const lineColor1 = '#A14FBF';
@@ -129,6 +137,16 @@ export const lineColor5 = '#E3FF73';
 export const lineColor6 = '#BE2543';
 export const lineColor7 = '#FD8144';
 export const lineColor8 = '#F6B187';
+export const chartColors = {
+    lineColor1,
+    lineColor2,
+    lineColor3,
+    lineColor4,
+    lineColor5,
+    lineColor6,
+    lineColor7,
+    lineColor8,
+};
 export const fontSize = {
     smaller: '0.71rem',
     small: '0.85rem',
@@ -232,3 +250,30 @@ export const navbarItemWidth = '4.286rem';
 //sidebar
 export const sidebarItemHeight = spacing.sp40;
 export const sidebarWidth = spacing.sp40;
+// We use 8 main color from the palette and decline them (lighter/ darker) when we have more than 8 datasets
+export const lineTimeSeriesColorRange = [
+    lineColor1,
+    lineColor2,
+    lineColor3,
+    lineColor4,
+    lineColor5,
+    lineColor6,
+    lineColor7,
+    lineColor8,
+    lighten(0.3, lineColor1),
+    lighten(0.3, lineColor2),
+    lighten(0.3, lineColor3),
+    lighten(0.3, lineColor4),
+    lighten(0.3, lineColor5),
+    lighten(0.3, lineColor6),
+    lighten(0.3, lineColor7),
+    lighten(0.3, lineColor8),
+    darken(0.2, lineColor1),
+    darken(0.2, lineColor2),
+    darken(0.2, lineColor3),
+    darken(0.2, lineColor4),
+    darken(0.3, lineColor5),
+    darken(0.3, lineColor6),
+    darken(0.3, lineColor7),
+    darken(0.3, lineColor8),
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.161.0",
+  "version": "0.163.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",
@@ -8,6 +8,10 @@
   "types": "dist/index.d.ts",
   "mainSrc": "src/lib/index.js",
   "sideEffects": false,
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
   "scripts": {
     "analyze": "source-map-explorer 'dist/*.js'",
     "build": "rimraf dist && tsc",
@@ -104,16 +108,14 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-regular-svg-icons": "^5.15.3",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
-    "@fortawesome/react-fontawesome": "^0.1.14",
+    "@fortawesome/react-fontawesome": "^0.2.3",
     "@js-temporal/polyfill": "^0.4.4",
     "@storybook/preview-api": "^8.3.6",
     "downshift": "^7.0.5",
     "framer-motion": "^4.1.17",
     "polished": "3.4.1",
     "pretty-bytes": "^5.6.0",
-    "react": "^18.3.1",
     "react-debounce-input": "3.2.2",
-    "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.49.2",
     "react-query": "^3.34.0",
@@ -125,6 +127,7 @@
     "react-virtualized": "9.22.3",
     "react-virtualized-auto-sizer": "^1.0.24",
     "react-window": "^1.8.6",
+    "recharts": "^3.0.2",
     "styled-components": "^5.2.1",
     "styled-system": "^5.1.5",
     "vega": "^5.17.3",

package/setupTests.js

@@ -5,3 +5,9 @@ import 'regenerator-runtime/runtime';
 import { TextEncoder, TextDecoder } from 'util';
 
 Object.assign(global, { TextDecoder, TextEncoder });
+
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}));

package/src/lib/components/accordion/Accordion.component.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { spacing, Stack } from '../../spacing';
 import { Box } from '../box/Box';

package/src/lib/components/accordion/Accordion.test.tsx

@@ -1,8 +1,7 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import React, { useState } from 'react';
 import { Accordion } from './Accordion.component';
 import userEvent from '@testing-library/user-event';
-import { QueryClient, QueryClientProvider } from 'react-query';
 
 describe('Accordion', () => {
   const selectors = {
@@ -11,20 +10,18 @@ describe('Accordion', () => {
     accordionContent: () => screen.queryByText(/Test content/i),
   };
   const SUT = ({ open = false }) => {
-    const queryClient = new QueryClient();
     return (
-      <QueryClientProvider client={queryClient}>
-        <Accordion title="Advanced Testings" id="test-accordion" open={open}>
-          <div>Test content</div>
-        </Accordion>
-      </QueryClientProvider>
+      <Accordion title="Advanced Testings" id="test-accordion" open={open}>
+        <div>Test content</div>
+      </Accordion>
     );
   };
   const renderAccordion = (open = false) => {
     render(<SUT open={open} />);
   };
-  it('should render the Accordion component with title and content', () => {
+  it('should render the Accordion component with title and content', async () => {
     renderAccordion();
+    await waitFor(() => screen.findByRole('img', { hidden: true }));
 
     const accordionToggle = selectors.accordionToggle();
     expect(accordionToggle).toBeInTheDocument();
@@ -54,7 +51,6 @@ describe('Accordion', () => {
   });
 
   it('should toggle the content when open prop changes', () => {
-    const queryClient = new QueryClient();
     const TestWrapper = () => {
       const [isOpen, setisOpen] = useState(false);
       return (
@@ -65,11 +61,7 @@ describe('Accordion', () => {
       );
     };
 
-    render(
-      <QueryClientProvider client={queryClient}>
-        <TestWrapper />
-      </QueryClientProvider>,
-    );
+    render(<TestWrapper />);
 
     userEvent.click(screen.getByRole('button', { name: /Test button/i }));
     expect(selectors.accordionContent()).toBeInTheDocument();

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

@@ -0,0 +1,364 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { getWrapper } from '../../testUtils';
+import { Barchart } from './Barchart.component';
+import { ChartLegendWrapper } from '../chartlegend/ChartLegendWrapper';
+
+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;
+
+const testColorSet = {
+  Success: 'lineColor1',
+};
+
+describe('Barchart', () => {
+  describe('Basic rendering', () => {
+    it('should render the Barchart component with category data', async () => {
+      const { Wrapper } = getWrapper();
+      render(
+        <Wrapper>
+          <ChartLegendWrapper colorSet={testColorSet}>
+            <Barchart type="category" bars={testBars} />
+          </ChartLegendWrapper>
+        </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>
+          <ChartLegendWrapper colorSet={testColorSet}>
+            <Barchart
+              type={{
+                type: 'time',
+                timeRange: {
+                  startDate: new Date('2024-07-05'),
+                  endDate: new Date('2024-07-07'),
+                  interval: ONE_DAY_IN_MILLISECONDS,
+                },
+              }}
+              bars={testTimeBars}
+            />
+          </ChartLegendWrapper>
+        </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>
+          <ChartLegendWrapper colorSet={testColorSet}>
+            <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}
+            />
+          </ChartLegendWrapper>
+        </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>
+          <ChartLegendWrapper
+            colorSet={{
+              Success: 'lineColor1',
+              Failed: 'lineColor2',
+            }}
+          >
+            <Barchart type={type} bars={bars} />
+          </ChartLegendWrapper>
+        </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>
+          <ChartLegendWrapper colorSet={testColorSet}>
+            <Barchart type={type} bars={testTimeBars} />
+          </ChartLegendWrapper>
+        </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>
+          <ChartLegendWrapper colorSet={testColorSet}>
+            <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}
+            />
+          </ChartLegendWrapper>
+        </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>
+        <ChartLegendWrapper colorSet={testColorSet}>
+          <Barchart type="category" bars={testStackedBars} stacked={true} />
+        </ChartLegendWrapper>
+      </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>
+        <ChartLegendWrapper colorSet={testColorSet}>
+          <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;
+            }}
+          />
+        </ChartLegendWrapper>
+      </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>
+        <ChartLegendWrapper colorSet={testColorSet}>
+          <Barchart type="category" bars={[]} isLoading />
+        </ChartLegendWrapper>
+      </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>
+        <ChartLegendWrapper colorSet={testColorSet}>
+          <Barchart
+            type="category"
+            bars={[]}
+            title="Test Title"
+            secondaryTitle="Test Secondary Title"
+            rightTitle="Test Right Title"
+            helpTooltip="Test Help Tooltip"
+          />
+        </ChartLegendWrapper>
+      </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();
+    });
+  });
+});