Central Nursing Station: Dynamic aspect ratio for Vitals (variable timespan based on screen size π±π₯οΈ) #6036
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
WHAT
π€ Generated by Copilot at 32c56e3
This pull request enhances the responsiveness and layout of the vitals monitor components in the facility views. It introduces a new custom hook
useVitalsAspectRatioConfig
that calculates the optimal configuration based on the screen size and aspect ratio. It also refactors and updates the existing components that use the vitals monitor to leverage the new hook. It also adds a console log statement for debugging purposes.Proposed Changes
@coronasafe/care-fe-code-reviewers @coronasafe/code-reviewers
Merge Checklist
HOW
π€ Generated by Copilot at 32c56e3
useVitalsAspectRatioConfig
to calculate the optimal configuration for the vitals monitor based on the screen size and aspect ratio (link)useVitalsAspectRatioConfig
hook in theCentralNursingStation
component and pass theconfig
andhash
values to theHL7PatientVitalsMonitor
component props (link, link, link)useVitalsAspectRatioConfig
hook in theConsultationDetails
component and pass theconfig
andhash
values to theHL7PatientVitalsMonitor
andVentilatorPatientVitalsMonitor
component props (link, link, link, link, link, link, link)useBreakpoints
andgetVitalsCanvasSizeAndDuration
from theConsultationDetails
component (link)HL7PatientVitalsMonitor
component to improve responsiveness and readability (link, link)useBreakpoints
hook to debug the current breakpoint value (link)