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: Fixed tooltip for Mobile Area Charts #1817

Merged
merged 11 commits into from
Nov 11, 2024
Merged

fix: Fixed tooltip for Mobile Area Charts #1817

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
13fa95f
fix: Fixed tooltip for Mobile Area Charts
noahonyejese Nov 6, 2024
03eeee4
feat: Added useIsMobile hook
noahonyejese Nov 7, 2024
f7c137f
feat: Introduced dynamic tooltip on Mobile
noahonyejese Nov 7, 2024
e1b17e3
fix: cleaned up isMobile
noahonyejese Nov 7, 2024
1c0f528
feat: Changed mobile View for all Chart types
noahonyejese Nov 7, 2024
6b2cee5
fix: Fixed Scenario where TooltipWidth > ChartWidth
noahonyejese Nov 7, 2024
5bf7adb
fix: Fixed all resolved comments by bartosz
noahonyejese Nov 7, 2024
06a41b5
fix: Fixed naming conventions
noahonyejese Nov 8, 2024
dab92c4
feat: Implemented Scatterplot Chart based on Design
noahonyejese Nov 11, 2024
3383b43
feat: Implemented Highlighting for Pie slices
noahonyejese Nov 11, 2024
2d6ac36
feat: Decrease stroke width based on Design
noahonyejese Nov 11, 2024
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
4 changes: 3 additions & 1 deletion app/charts/combo/combo-line-dual-state.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,9 @@ const useComboLineDualState = (
};
})
.filter(truthy);
const yAnchor = isMobile ? chartHeight : mean(values.map((d) => d.yPos));
const yAnchor = isMobile
? chartHeight + 32
noahonyejese marked this conversation as resolved.
Show resolved Hide resolved
: mean(values.map((d) => d.yPos));
const placement: TooltipPlacement = isMobile
? { x: "center", y: "bottom" }
: getCenteredTooltipPlacement({
Expand Down
15 changes: 15 additions & 0 deletions app/charts/shared/interaction/tooltip-box.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -383,6 +383,21 @@ const triangleXPos = (
tooltipWidth: number,
chartWidth: number
): number => {
if (chartWidth < tooltipWidth) {
const maxPosition = chartWidth + TRIANGLE_SIZE;
noahonyejese marked this conversation as resolved.
Show resolved Hide resolved

return Math.min(
Math.max(
value,
Math.min(
tooltipWidth / 2 - TRIANGLE_SIZE,
Math.min(chartWidth - tooltipWidth / 2 + TRIANGLE_SIZE, value)
)
),
maxPosition
);
}

const condition = chartWidth - tooltipWidth / 2 + TRIANGLE_SIZE < value;
noahonyejese marked this conversation as resolved.
Show resolved Hide resolved

if (condition) {
Expand Down
Loading