Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(flags/tagsDrawer): ensure distribution percentages add to 100 #87308

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
+12 −10
Open

fix(flags/tagsDrawer): ensure distribution percentages add to 100 #87308

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a642362
ref(flags/tagsDrawer): ensure distribution percentages add to 100
aliu39 Mar 18, 2025
277e837
Show 0% for topValues
aliu39 Mar 18, 2025
6a61109
Revert 'show 0%'
aliu39 Mar 18, 2025
6500ce1
Update details and preview
aliu39 Mar 18, 2025
0d7d632
Fix edge case jest
aliu39 Mar 18, 2025
eec65dc
Merge branch 'master' into aliu/flag-rounding
aliu39 Mar 18, 2025
d4e01ea
Merge branch 'master' into aliu/flag-rounding
aliu39 Mar 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion static/app/views/issueDetails/groupTags/tagDetailsDrawerContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ function TagDetailsRow({
pathname: `/organizations/${organization.slug}/issues/${group.id}/events/`,
query,
};
const percentage = Math.floor(percent(tagValue.count ?? 0, tag.totalValues ?? 0));
const percentage = Math.round(percent(tagValue.count ?? 0, tag.totalValues ?? 0));
const displayPercentage = percentage < 1 ? '<1%' : `${percentage.toFixed(0)}%`;

return (
Expand Down
11 changes: 7 additions & 4 deletions static/app/views/issueDetails/groupTags/tagDistribution.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,12 @@ export function TagDistribution({tag}: {tag: GroupTag}) {
const totalVisible = visibleTagValues.reduce((sum, value) => sum + value.count, 0);
const hasOther = totalVisible < tag.totalValues;

const otherPercentage = Math.floor(
percent(tag.totalValues - totalVisible, tag.totalValues)
);
const otherPercentage =
100 -
visibleTagValues.reduce(
(sum, value) => sum + Math.round(percent(value.count, tag.totalValues)),
0
);
const otherDisplayPercentage =
otherPercentage < 1 ? '<1%' : `${otherPercentage.toFixed(0)}%`;

Expand All @@ -30,7 +33,7 @@ export function TagDistribution({tag}: {tag: GroupTag}) {
</TagHeader>
<TagValueContent>
{visibleTagValues.map((tagValue, tagValueIdx) => {
const percentage = Math.floor(percent(tagValue.count, tag.totalValues));
const percentage = Math.round(percent(tagValue.count, tag.totalValues));
const displayPercentage = percentage < 1 ? '<1%' : `${percentage.toFixed(0)}%`;
return (
<TagValueRow key={tagValueIdx}>
Expand Down
2 changes: 1 addition & 1 deletion static/app/views/issueDetails/streamline/issueTagsPreview.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ describe('IssueTagsPreview', () => {
);

expect(await screen.findByText('Chrome')).toBeInTheDocument();
expect(await screen.findByText('66%')).toBeInTheDocument();
expect(await screen.findByText('67%')).toBeInTheDocument();

await userEvent.hover(screen.getByText('Chrome'));
expect(await screen.findByText('Firefox')).toBeInTheDocument(); // tooltip description
Expand Down
7 changes: 3 additions & 4 deletions static/app/views/issueDetails/streamline/issueTagsPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ type Segment = {
const bgColor = (index: number) =>
Color(CHART_PALETTE[4].at(index)).alpha(0.8).toString();
const getRoundedPercentage = (percentage: number) =>
percentage < 1 ? '<1%' : `${Math.floor(percentage)}%`;
percentage < 1 ? '<1%' : `${Math.round(percentage)}%`;

function SegmentedBar({segments}: {segments: Segment[]}) {
return (
Expand Down Expand Up @@ -104,9 +104,8 @@ function TagPreviewProgressBar({tag, groupId}: {groupId: string; tag: GroupTag})
const topPercentageString = getRoundedPercentage(topSegment.percentage);
const totalVisible = segments.reduce((sum, value) => sum + value.count, 0);
const hasOther = totalVisible < tag.totalValues;
const otherPercentage = Math.floor(
percent(tag.totalValues - totalVisible, tag.totalValues)
);
const otherPercentage =
100 - segments.reduce((sum, seg) => sum + Math.round(seg.percentage), 0);
const otherPercentageString = getRoundedPercentage(otherPercentage);

const tooltipContent = (
Expand Down
Loading