Skip to content
This repository was archived by the owner on Jun 6, 2025. It is now read-only.

Commit 3c14540

Browse files
pbojinovpbojinov
authored
Add showPercentages option on FunnelChartNext for Live View Customer Behavior card (#1852)
* Add showPercentages option on FunnelChartNext; need it for Live View * remove console log * Add test for showPercent
1 parent e6fd0fc commit 3c14540

File tree

4 files changed

+82
-42
lines changed

4 files changed

+82
-42
lines changed

‎packages/polaris-viz/src/components/FunnelChartNext/Chart.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ export interface ChartProps {
5050
dropped: string;
5151
};
5252
showTooltip?: boolean;
53+
showPercentages?: boolean;
5354
seriesNameFormatter: LabelFormatter;
5455
labelFormatter: LabelFormatter;
5556
percentageFormatter?: (value: number) => string;
@@ -60,6 +61,7 @@ export function Chart({
6061
data,
6162
tooltipLabels,
6263
showTooltip = true,
64+
showPercentages = true,
6365
seriesNameFormatter,
6466
labelFormatter,
6567
percentageFormatter = (value: number) => {
@@ -175,6 +177,7 @@ export function Chart({
175177
shouldApplyScaling={shouldApplyScaling}
176178
renderScaleIconTooltipContent={renderScaleIconTooltipContent}
177179
trends={trends}
180+
showPercentages={showPercentages}
178181
/>
179182
</g>
180183

‎packages/polaris-viz/src/components/FunnelChartNext/FunnelChartNext.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export type FunnelChartNextProps = {
2929
labelFormatter?: LabelFormatter;
3030
renderScaleIconTooltipContent?: () => ReactNode;
3131
percentageFormatter?: (value: number) => string;
32+
showPercentages?: boolean;
3233
} & ChartProps;
3334

3435
export function FunnelChartNext(props: FunnelChartNextProps) {
@@ -43,6 +44,7 @@ export function FunnelChartNext(props: FunnelChartNextProps) {
4344
errorText,
4445
tooltipLabels = DEFAULT_TOOLTIP_LABELS,
4546
showTooltip = true,
47+
showPercentages = true,
4648
seriesNameFormatter = DEFAULT_LABEL_FORMATTER,
4749
labelFormatter = DEFAULT_LABEL_FORMATTER,
4850
percentageFormatter,
@@ -73,6 +75,7 @@ export function FunnelChartNext(props: FunnelChartNextProps) {
7375
data={data}
7476
tooltipLabels={tooltipLabels}
7577
showTooltip={showTooltip}
78+
showPercentages={showPercentages}
7679
seriesNameFormatter={seriesNameFormatter}
7780
labelFormatter={labelFormatter}
7881
percentageFormatter={percentageFormatter}

‎packages/polaris-viz/src/components/FunnelChartNext/components/FunnelChartLabels/FunnelChartLabels.tsx‎

Lines changed: 58 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export interface FunnelChartLabelsProps {
3838
trends?: FunnelChartMetaData['trends'];
3939
xScale: ScaleBand<string>;
4040
shouldApplyScaling: boolean;
41+
showPercentages?: boolean;
4142
renderScaleIconTooltipContent?: () => ReactNode;
4243
}
4344

@@ -56,6 +57,7 @@ export function FunnelChartLabels({
5657
trends,
5758
xScale,
5859
shouldApplyScaling,
60+
showPercentages = true,
5961
renderScaleIconTooltipContent,
6062
}: FunnelChartLabelsProps) {
6163
const {characterWidths, containerBounds} = useChartContext();
@@ -76,11 +78,13 @@ export function FunnelChartLabels({
7678
const currentTargetWidth = isLast
7779
? barWidth - GROUP_OFFSET * 2
7880
: labelWidth - GROUP_OFFSET * 2;
79-
const currentPercentWidth = estimateStringWidthWithOffset(
80-
percentages[i],
81-
VALUE_FONT_SIZE,
82-
VALUE_FONT_WEIGHT,
83-
);
81+
const currentPercentWidth = showPercentages
82+
? estimateStringWidthWithOffset(
83+
percentages[i],
84+
VALUE_FONT_SIZE,
85+
VALUE_FONT_WEIGHT,
86+
)
87+
: 0;
8488
const currentCountStringWidth = estimateStringWidthWithOffset(
8589
formattedValues[i],
8690
VALUE_FONT_SIZE,
@@ -151,6 +155,7 @@ export function FunnelChartLabels({
151155
labelWidth,
152156
barWidth,
153157
chartContainerWidth,
158+
showPercentages,
154159
]);
155160

156161
function displayChartLabels(
@@ -161,22 +166,25 @@ export function FunnelChartLabels({
161166
countStringWidth: number,
162167
trendIndicatorProps: any,
163168
trendIndicatorWidth: number,
169+
showPercentages: boolean,
164170
) {
165171
if (layoutStrategy === LAYOUT_STRATEGY.ONE_LINE_ALL) {
166172
return (
167173
<Fragment>
168-
<SingleTextLine
169-
color={TEXT_COLOR}
170-
text={percentages[index]}
171-
targetWidth={percentWidth}
172-
textAnchor="start"
173-
fontSize={VALUE_FONT_SIZE}
174-
fontWeight={VALUE_FONT_WEIGHT}
175-
/>
174+
{showPercentages ? (
175+
<SingleTextLine
176+
color={TEXT_COLOR}
177+
text={percentages[index]}
178+
targetWidth={percentWidth}
179+
textAnchor="start"
180+
fontSize={VALUE_FONT_SIZE}
181+
fontWeight={VALUE_FONT_WEIGHT}
182+
/>
183+
) : null}
176184
<SingleTextLine
177185
color={TEXT_COLOR}
178186
text={formattedValues[index]}
179-
x={percentWidth + LINE_PADDING}
187+
x={showPercentages ? percentWidth + LINE_PADDING : 0}
180188
targetWidth={
181189
currentTargetWidth -
182190
(percentWidth + LINE_PADDING) -
@@ -202,19 +210,22 @@ export function FunnelChartLabels({
202210
}
203211

204212
if (layoutStrategy === LAYOUT_STRATEGY.ONE_LINE_COUNTS_AND_TRENDS) {
213+
const formattedValueTransformY = showPercentages
214+
? LINE_HEIGHT + VERTICAL_STACK_SPACING
215+
: 0;
205216
return (
206217
<Fragment>
207-
<SingleTextLine
208-
color={TEXT_COLOR}
209-
text={percentages[index]}
210-
targetWidth={currentTargetWidth}
211-
textAnchor="start"
212-
fontSize={VALUE_FONT_SIZE}
213-
fontWeight={VALUE_FONT_WEIGHT}
214-
/>
215-
<g
216-
transform={`translate(0, ${LINE_HEIGHT + VERTICAL_STACK_SPACING})`}
217-
>
218+
{showPercentages ? (
219+
<SingleTextLine
220+
color={TEXT_COLOR}
221+
text={percentages[index]}
222+
targetWidth={currentTargetWidth}
223+
textAnchor="start"
224+
fontSize={VALUE_FONT_SIZE}
225+
fontWeight={VALUE_FONT_WEIGHT}
226+
/>
227+
) : null}
228+
<g transform={`translate(0, ${formattedValueTransformY})`}>
218229
<SingleTextLine
219230
color={TEXT_COLOR}
220231
text={formattedValues[index]}
@@ -240,19 +251,25 @@ export function FunnelChartLabels({
240251
}
241252

242253
if (layoutStrategy === LAYOUT_STRATEGY.VERTICAL_STACKING) {
254+
const formattedValueTransformY = showPercentages
255+
? LINE_HEIGHT + VERTICAL_STACK_SPACING
256+
: 0;
257+
const trendIndicatorTransformY = showPercentages
258+
? LINE_HEIGHT * 2 + VERTICAL_STACK_SPACING * 2
259+
: LINE_HEIGHT + VERTICAL_STACK_SPACING * 2;
243260
return (
244261
<Fragment>
245-
<SingleTextLine
246-
color={TEXT_COLOR}
247-
text={percentages[index]}
248-
targetWidth={currentTargetWidth}
249-
textAnchor="start"
250-
fontSize={VALUE_FONT_SIZE}
251-
fontWeight={VALUE_FONT_WEIGHT}
252-
/>
253-
<g
254-
transform={`translate(0, ${LINE_HEIGHT + VERTICAL_STACK_SPACING})`}
255-
>
262+
{showPercentages ? (
263+
<SingleTextLine
264+
color={TEXT_COLOR}
265+
text={percentages[index]}
266+
targetWidth={currentTargetWidth}
267+
textAnchor="start"
268+
fontSize={VALUE_FONT_SIZE}
269+
fontWeight={VALUE_FONT_WEIGHT}
270+
/>
271+
) : null}
272+
<g transform={`translate(0, ${formattedValueTransformY})`}>
256273
<SingleTextLine
257274
color={TEXT_COLOR}
258275
text={formattedValues[index]}
@@ -264,11 +281,7 @@ export function FunnelChartLabels({
264281
/>
265282
</g>
266283
{trendIndicatorProps && (
267-
<g
268-
transform={`translate(0, ${
269-
LINE_HEIGHT * 2 + VERTICAL_STACK_SPACING * 2
270-
})`}
271-
>
284+
<g transform={`translate(0, ${trendIndicatorTransformY})`}>
272285
<g transform={`translate(0, ${-LABEL_VERTICAL_OFFSET})`}>
273286
<TrendIndicator {...trendIndicatorProps} />
274287
</g>
@@ -307,6 +320,8 @@ export function FunnelChartLabels({
307320
const {trendIndicatorProps, trendIndicatorWidth} =
308321
getTrendIndicatorData(trends?.[index]?.reached);
309322

323+
const updatedPercentWidth = showPercentages ? percentWidth : 0;
324+
310325
return (
311326
<g
312327
transform={`translate(${
@@ -344,10 +359,11 @@ export function FunnelChartLabels({
344359
layoutStrategy,
345360
index,
346361
currentTargetWidth,
347-
percentWidth,
362+
updatedPercentWidth,
348363
countStringWidth,
349364
trendIndicatorProps,
350365
trendIndicatorWidth,
366+
showPercentages,
351367
)}
352368
</g>
353369
</g>

‎packages/polaris-viz/src/components/FunnelChartNext/components/FunnelChartLabels/tests/FunnelChartLabels.test.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ describe('<FunnelChartLabels />', () => {
3030
percentages: ['100%', '75%', '50%'],
3131
xScale: scaleBand().domain(['0', '1', '2']).range([0, 300]),
3232
shouldApplyScaling: false,
33+
showPercentages: true,
3334
renderScaleIconTooltipContent: () => <div>Tooltip content</div>,
3435
trends: [
3536
{
@@ -108,6 +109,23 @@ describe('<FunnelChartLabels />', () => {
108109
text: '100%',
109110
});
110111
});
112+
113+
it('hides percentages when showPercentages is false', () => {
114+
const component = wrapper({
115+
...mockProps,
116+
showPercentages: false,
117+
});
118+
119+
expect(component).toContainReactComponent(SingleTextLine, {
120+
text: 'Step 1',
121+
});
122+
expect(component).not.toContainReactComponent(SingleTextLine, {
123+
text: '100%',
124+
});
125+
expect(component).toContainReactComponent(SingleTextLine, {
126+
text: '1,000',
127+
});
128+
});
111129
});
112130

113131
describe('trend indicators', () => {

0 commit comments

Comments
 (0)