diff --git a/.changeset/khaki-penguins-design.md b/.changeset/khaki-penguins-design.md new file mode 100644 index 00000000..321b6b5f --- /dev/null +++ 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 index d255311e..8bfa75fd 100644 --- 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 index 36ca2f7e..2f32f07a 100644 --- 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 = ({ }); 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 = ({ 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 = ({ dataKey={dataKey} label={getLabel(dataKey)} fill={getColor(barInfo)} - radius={getRadius(pos)} + radius={radius} /> ); }