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

Added scroll and responsiveness to the plots page #9815

Closed
wants to merge 8 commits into from
Closed

Added scroll and responsiveness to the plots page #9815

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1a6607d
Added scroll and responsiveness to the plots page
Utkarsh-Anandani Jan 7, 2025
623d7d1
used useWindowDimensions hook
Utkarsh-Anandani Jan 7, 2025
24ce109
used useBreakpoints hook instead of useWindowDimensions
Utkarsh-Anandani Jan 7, 2025
b6480b1
Merge branch 'develop' into issues/#9788/Alignment-of-plots-and-overf…
Utkarsh-Anandani Jan 7, 2025
fbdad74
requested changes
Utkarsh-Anandani Jan 7, 2025
8eb6c3e
updates
Utkarsh-Anandani Jan 7, 2025
8b30429
Merge branch 'ohcnetwork:develop' into issues/#9788/Alignment-of-plot…
Utkarsh-Anandani Jan 7, 2025
4bf98ec
Merge branch 'issues/#9788/Alignment-of-plots-and-overflowing' of htt…
Utkarsh-Anandani Jan 7, 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
22 changes: 14 additions & 8 deletions src/pages/Encounters/tabs/EncounterPlotsTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import {
} from "@/components/Common/Charts/ObservationChart";
import Loading from "@/components/Common/Loading";

import useBreakpoints from "@/hooks/useBreakpoints";

import { EncounterTabProps } from "@/pages/Encounters/EncounterShow";

type QueryParams = {
Expand All @@ -21,6 +23,8 @@ export const EncounterPlotsTab = (props: EncounterTabProps) => {
const { t } = useTranslation();
const [qParams, setQParams] = useQueryParams<QueryParams>();

const plotColumns = useBreakpoints({ default: 1, md: 2 });

const { data, isLoading } = useQuery<ObservationPlotConfig>({
queryKey: ["plots-config"],
queryFn: () => fetch(careConfig.plotsConfigUrl).then((res) => res.json()),
Expand All @@ -43,21 +47,23 @@ export const EncounterPlotsTab = (props: EncounterTabProps) => {
value={currentTabId}
onValueChange={(value) => setQParams({ plot: value })}
>
Comment on lines 48 to 49
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

instead of adding a div with className, we can simply add className to the parent Tabs component ryt?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I tried that but it gives scroll to the whole component including the plots idk if that behavior was wanted, looks weird to me...
image

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh my bad. Tried on TabsList? lots of other usages seems to be working fine with TabsList

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, it gives a vertical scroll but not a horizontal scroll

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are you sure? it's working fine for me

Copy link
Author

@Utkarsh-Anandani Utkarsh-Anandani Jan 7, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<TabsList className="overflow-x-scroll">
You're using this className?

<TabsList className="overflow-auto w-full">
using this it cuts out at left

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why does it cut out?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

like cuts out means it just overflows at left side
image

are you sure? it's working fine for me

what classes are you using for it to work??

<TabsList>
{data.map((tab) => (
<TabsTrigger key={tab.id} value={tab.id}>
{tab.name}
</TabsTrigger>
))}
</TabsList>
<div className="overflow-x-scroll w-full">
<TabsList>
{data.map((tab) => (
<TabsTrigger key={tab.id} value={tab.id}>
{tab.name}
</TabsTrigger>
))}
</TabsList>
</div>

{data.map((tab) => (
<TabsContent key={tab.id} value={tab.id}>
<ObservationVisualizer
patientId={props.patient.id}
encounterId={props.encounter.id}
codeGroups={tab.groups}
gridCols={2}
gridCols={plotColumns}
/>
</TabsContent>
))}
Expand Down
Loading