ARTESCA-15250 Handle stacked bars

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

@@ -230,15 +230,37 @@ describe('Barchart', () => {
     });
   });
 
-  describe('Reference line', () => {
-    it('should render with reference line', () => {
-      const { Wrapper } = getWrapper();
-      render(
-        <Wrapper>
-          <Barchart type="category" bars={testBars} />
-        </Wrapper>,
-      );
-      expect(screen.getByText('50')).toBeInTheDocument();
-    });
+  it('should render stacked bars', () => {
+    const testStackedBars: BarchartProps['bars'] = [
+      {
+        label: 'Success',
+        data: [
+          ['category1', 10],
+          ['category2', 20],
+          ['category3', 30],
+        ],
+        color: 'green',
+      },
+      {
+        label: 'Failed',
+        data: [
+          ['category1', 5],
+          ['category2', 8],
+          ['category3', 12],
+        ],
+        color: 'red',
+      },
+    ];
+
+    const { Wrapper } = getWrapper();
+    render(
+      <Wrapper>
+        <Barchart type="category" bars={testStackedBars} stacked={true} />
+      </Wrapper>,
+    );
+
+    expect(screen.getByText('category1')).toBeInTheDocument();
+    expect(screen.getByText('category2')).toBeInTheDocument();
+    expect(screen.getByText('category3')).toBeInTheDocument();
   });
 });

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

@@ -13,7 +13,7 @@ import styled, { useTheme } from 'styled-components';
 import {
   computeUnitLabelAndRoundReferenceValue,
   formatPrometheusDataToChartData,
-  getMaxValue,
+  getMaxBarValue,
   UnitRange,
 } from './utils';
 
@@ -111,10 +111,15 @@ const StyledResponsiveContainer = styled(ResponsiveContainer)`
 const Barchart = (props: BarchartProps) => {
   const theme = useTheme();
 
-  const { height = 200, bars, type = 'category', unitRange } = props;
+  const { height = 200, bars, type = 'category', unitRange, stacked } = props;
 
-  const { data, rechartsBars } = formatPrometheusDataToChartData(bars, type);
-  const maxValue = getMaxValue(data);
+  const { data, rechartsBars } = formatPrometheusDataToChartData(
+    bars,
+    type,
+    stacked,
+  );
+
+  const maxValue = getMaxBarValue(data, stacked);
 
   const { unitLabel, roundReferenceValue, rechartsData } =
     computeUnitLabelAndRoundReferenceValue(data, maxValue, unitRange);
@@ -128,6 +133,7 @@ const Barchart = (props: BarchartProps) => {
             dataKey={bar.dataKey}
             fill={bar.fill}
             minPointSize={3}
+            stackId={stacked ? 'stacked' : undefined}
           />
         ))}
 

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

@@ -1,8 +1,11 @@
+import { BarchartProps } from './Barchart.component';
+
 import {
   computeUnitLabelAndRoundReferenceValue,
   formatPrometheusDataToChartData,
-  getMaxValue,
+  getMaxBarValue,
   getRoundReferenceValue,
+  sortStackedBars,
   UnitRange,
 } from './utils';
 
@@ -25,19 +28,28 @@ describe('getRoundReferenceValue', () => {
   });
 });
 
-describe('getMaxValue', () => {
+describe('getMaxBarValue', () => {
   it('should return the maximum value from chart data', () => {
     const data = [
       { category: 'A', value1: 10, value2: 5 },
       { category: 'B', value1: 20, value2: 15 },
       { category: 'C', value1: 8, value2: 25 },
     ];
-    expect(getMaxValue(data)).toBe(25);
+    expect(getMaxBarValue(data)).toBe(25);
   });
 
   it('should handle single value data', () => {
     const data = [{ category: 'A', value: 42 }];
-    expect(getMaxValue(data)).toBe(42);
+    expect(getMaxBarValue(data)).toBe(42);
+  });
+
+  it('should return the maximum value from stacked data', () => {
+    const data = [
+      { category: 'A', value1: 10, value2: 5 },
+      { category: 'B', value1: 20, value2: 15 },
+      { category: 'C', value1: 8, value2: 25 },
+    ];
+    expect(getMaxBarValue(data, true)).toBe(35);
   });
 });
 
@@ -219,65 +231,150 @@ describe('formatPrometheusDataToChartData', () => {
       ]);
     });
   });
-  describe('computeUnitLabelAndRoundReferenceValue', () => {
-    it('should compute the unit label and round reference value correctly when reaching threshold', () => {
-      const data = [
-        {
-          category: 'category1',
-          success: 1680,
-        },
-      ];
-      const maxValue = 1680;
-      const unitRange: UnitRange = [
-        {
-          threshold: 1000,
-          label: 'kB',
-        },
-      ];
-      const result = computeUnitLabelAndRoundReferenceValue(
-        data,
-        maxValue,
-        unitRange,
-      );
+  describe('Stacked Bar Sorting', () => {
+    const bars: BarchartProps['bars'] = [
+      {
+        label: 'Small Bar',
+        data: [
+          ['category1', 5],
+          ['category2', 10],
+          ['category3', 15],
+        ],
+        color: 'blue',
+      },
+      {
+        label: 'Large Bar',
+        data: [
+          ['category1', 50],
+          ['category2', 60],
+          ['category3', 70],
+        ],
+        color: 'red',
+      },
+      {
+        label: 'Medium Bar',
+        data: [
+          ['category1', 20],
+          ['category2', 25],
+          ['category3', 30],
+        ],
+        color: 'green',
+      },
+    ];
+    const type: BarchartProps['type'] = 'category';
+    it('should sort bars by average values in descending order when stacked is true', () => {
+      const result = formatPrometheusDataToChartData(bars, type, true);
 
-      expect(result.unitLabel).toBe('kB');
-      expect(result.roundReferenceValue).toBe(10);
-      expect(result.rechartsData).toEqual([
-        {
-          category: 'category1',
-          success: 1.68,
-        },
-      ]);
+      // Bars should be sorted by average in descending order (largest first)
+      expect(result.rechartsBars[0].dataKey).toBe('largebar'); // Average: 60
+      expect(result.rechartsBars[1].dataKey).toBe('mediumbar'); // Average: 25
+      expect(result.rechartsBars[2].dataKey).toBe('smallbar'); // Average: 10
     });
-    it('should compute the unit label and round reference value correctly when threshold is 0', () => {
-      const data = [
-        {
-          category: 'category1',
-          success: 680,
-        },
-      ];
-      const maxValue = 680;
-      const unitRange: UnitRange = [
-        {
-          threshold: 0,
-          label: 'B',
-        },
-        {
-          threshold: 1000,
-          label: 'kB',
-        },
-      ];
-      const result = computeUnitLabelAndRoundReferenceValue(
-        data,
-        maxValue,
-        unitRange,
-      );
 
-      expect(result.unitLabel).toBe('B');
-      expect(result.roundReferenceValue).toBe(1000);
-      expect(result.rechartsData).toEqual([
-        { category: 'category1', success: 680 },
-      ]);
+    it('should not sort bars when stacked is false or undefined', () => {
+      const result = formatPrometheusDataToChartData(bars, type, false);
+
+      // Bars should maintain original order
+      expect(result.rechartsBars[0].dataKey).toBe('smallbar');
+      expect(result.rechartsBars[1].dataKey).toBe('largebar');
     });
   });
 });
+
+describe('computeUnitLabelAndRoundReferenceValue', () => {
+  it('should compute the unit label and round reference value correctly when reaching threshold', () => {
+    const data = [
+      {
+        category: 'category1',
+        success: 1680,
+      },
+    ];
+    const maxValue = 1680;
+    const unitRange: UnitRange = [
+      {
+        threshold: 1000,
+        label: 'kB',
+      },
+    ];
+    const result = computeUnitLabelAndRoundReferenceValue(
+      data,
+      maxValue,
+      unitRange,
+    );
+
+    expect(result.unitLabel).toBe('kB');
+    expect(result.roundReferenceValue).toBe(10);
+    expect(result.rechartsData).toEqual([
+      {
+        category: 'category1',
+        success: 1.68,
+      },
+    ]);
+  });
+  it('should compute the unit label and round reference value correctly when threshold is 0', () => {
+    const data = [
+      {
+        category: 'category1',
+        success: 680,
+      },
+    ];
+    const maxValue = 680;
+    const unitRange: UnitRange = [
+      {
+        threshold: 0,
+        label: 'B',
+      },
+      {
+        threshold: 1000,
+        label: 'kB',
+      },
+    ];
+    const result = computeUnitLabelAndRoundReferenceValue(
+      data,
+      maxValue,
+      unitRange,
+    );
+
+    expect(result.unitLabel).toBe('B');
+    expect(result.roundReferenceValue).toBe(1000);
+    expect(result.rechartsData).toEqual([
+      { category: 'category1', success: 680 },
+    ]);
+  });
+});
+describe('sortStackedBars', () => {
+  const bars = [
+    { dataKey: 'bar1', fill: 'blue' },
+    { dataKey: 'bar2', fill: 'red' },
+    { dataKey: 'bar3', fill: 'green' },
+  ];
+  const data = [
+    { bar1: 10, bar2: 20, bar3: 30 },
+    { bar1: 40, bar2: 50, bar3: 60 },
+    { bar1: 70, bar2: 80, bar3: 90 },
+  ];
+  it('should sort bars by average values in descending order when stacked is true', () => {
+    const result = sortStackedBars(bars, data, true);
+    expect(result).toEqual([
+      { dataKey: 'bar3', fill: 'green' },
+      { dataKey: 'bar2', fill: 'red' },
+      { dataKey: 'bar1', fill: 'blue' },
+    ]);
+  });
+  it('should not sort bars when stacked is false', () => {
+    const result = sortStackedBars(bars, data, false);
+    expect(result).toEqual([
+      { dataKey: 'bar1', fill: 'blue' },
+      { dataKey: 'bar2', fill: 'red' },
+      { dataKey: 'bar3', fill: 'green' },
+    ]);
+  });
+  it('should not sort bars when stacked is undefined', () => {
+    const result = sortStackedBars(bars, data, undefined);
+    expect(result).toEqual([
+      { dataKey: 'bar1', fill: 'blue' },
+      { dataKey: 'bar2', fill: 'red' },
+      { dataKey: 'bar3', fill: 'green' },
+    ]);
+  });
+});