fix for border radius in the StackedBar component (#725)

* fix for border radius in the StackedBar component * added conditions and tests for only 0 but last and only 0 but first
gsoft-inc · Feb 26, 2024 · a783512 · a783512
1 parent 572ff29
commit a783512
Show file tree

Hide file tree

Showing 3 changed files with 132 additions and 4 deletions.
diff --git a/.changeset/khaki-penguins-design.md b/.changeset/khaki-penguins-design.md
@@ -0,0 +1,5 @@
+---
+"@igloo-ui/stacked-bar": patch
+---
+
+Addressed a bug in the StackedBar component where the radius wasn't applied with items of value 0.
diff --git a/packages/StackedBar/src/StackedBar.stories.tsx b/packages/StackedBar/src/StackedBar.stories.tsx
@@ -207,6 +207,107 @@ export const CustomRangeAndFormat = {
   },
 };
 
+export const ZeroFirstAndLast = {
+    args: {
+      showValue: true,
+      valueRange: { min: 0, max: 'dataMax' },
+      formatValue: (value: number) => {
+        return `${value} units`;
+      },
+      dataSet: [
+        {
+          key: 'stronglyUnfavorable',
+          label: 'Strongly Unfavorable',
+          value: 0,
+          strength: -2,
+        },
+        {
+          key: 'unfavorable',
+          label: 'Unfavorable',
+          value: 135,
+          strength: -2,
+        },
+        {
+          key: 'skipped',
+          label: 'Skipped',
+          value: 120,
+        },
+        {
+          key: 'favorable',
+          label: 'Favorable',
+          value: 245,
+          strength: 2,
+        },
+        {
+          key: 'stronglyFavorable',
+          label: 'Strongly Favorable',
+          value: 0,
+          strength: 2,
+        },
+      ],
+    },
+};
+
+export const OnlyZeroButLast = {
+    args: {
+      showValue: true,
+      valueRange: { min: 0, max: 'dataMax' },
+      formatValue: (value: number) => {
+        return `${value} units`;
+      },
+      dataSet: [
+        {
+          key: 'stronglyUnfavorable',
+          label: 'Strongly Unfavorable',
+          value: 0,
+          strength: -2,
+        },
+        {
+          key: 'unfavorable',
+          label: 'Unfavorable',
+          value: 0,
+          strength: -2,
+        },
+        {
+          key: 'favorable',
+          label: 'Favorable',
+          value: 245,
+          strength: 2,
+        }
+      ],
+    },
+};
+
+export const OnlyZeroButFirst = {
+    args: {
+      showValue: true,
+      valueRange: { min: 0, max: 'dataMax' },
+      formatValue: (value: number) => {
+        return `${value} units`;
+      },
+      dataSet: [
+        {
+          key: 'stronglyUnfavorable',
+          label: 'Strongly Unfavorable',
+          value: 245,
+          strength: -2,
+        },
+        {
+          key: 'unfavorable',
+          label: 'Unfavorable',
+          value: 0,
+          strength: -2,
+        },
+        {
+          key: 'favorable',
+          label: 'Favorable',
+          value: 0,
+          strength: 2,
+        }
+      ],
+    },
+};
+
 export const CustomClassAndPopoverTitle = {
   args: {
     showValue: true,

diff --git a/packages/StackedBar/src/StackedBar.tsx b/packages/StackedBar/src/StackedBar.tsx
@@ -22,7 +22,7 @@ export interface StackedBarLabel extends LabelProps {
     dataKey?: string;
 }
 
-export type Pos = "first" | "last";
+export type Pos = "first" | "last" | "firstAndLast";
 
 export type Strength = -2 | -1 | 0 | 1 | 2;
 
@@ -117,6 +117,10 @@ const StackedBar: React.FunctionComponent<StackedBarProps> = ({
     });
 
     const getRadius = (position?: Pos): [number, number, number, number] => {
+        if (position === "firstAndLast") {
+            return [4, 4, 4, 4];
+        }
+
         return [
             position === "first" ? 4 : 0,
             position === "last" ? 4 : 0,
@@ -196,19 +200,37 @@ const StackedBar: React.FunctionComponent<StackedBarProps> = ({
     let bars = null;
 
     if (dataSet && dataSet.length) {
+        let firstNonZeroIndex = -1;
+        let lastNonZeroIndex = -1;
+
+        dataSet.forEach((barInfo, index) => {
+            if (barInfo.value && firstNonZeroIndex === -1) {
+                firstNonZeroIndex = index;
+            }
+            if (barInfo.value) {
+                lastNonZeroIndex = index;
+            }
+        });
+
         bars = dataSet.map((barInfo, key) => {
             if (barInfo.value) {
                 const dataKey = barInfo.key;
                 let pos;
 
-                if (key === 0) {
+                if (key === firstNonZeroIndex && key !== lastNonZeroIndex) {
                     pos = "first" as Pos;
                 }
 
-                if (key === dataSet.length - 1) {
+                if (key === lastNonZeroIndex && key !== firstNonZeroIndex) {
                     pos = "last" as Pos;
                 }
 
+                if (key === lastNonZeroIndex && key === firstNonZeroIndex) {
+                    pos = "firstAndLast" as Pos;
+                }
+
+                const radius = getRadius(pos); // Use the getRadius function to get the border-radius
+
                 barDataObj[dataKey] = barInfo.value;
 
                 return (
@@ -230,7 +252,7 @@ const StackedBar: React.FunctionComponent<StackedBarProps> = ({
                         dataKey={dataKey}
                         label={getLabel(dataKey)}
                         fill={getColor(barInfo)}
-                        radius={getRadius(pos)}
+                        radius={radius}
                     />
                 );
             }