Central Nursing Station: Dynamic aspect ratio for Vitals (variable timespan based on screen size 📱🖥️)

[rithviknishad]

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

• Central Nursing Station: Dynamic aspect ratio for Vitals (variable timespan based on screen size)
• Fixed waveform overflow in mobile view

@coronasafe/care-fe-code-reviewers @coronasafe/code-reviewers

Merge Checklist

• Add specs that demonstrate bug / test a new feature.
• Update product documentation.
• Ensure that UI text is kept in I18n files.
• Prep screenshot or demo video for changelog entry, and attach it to issue.
• Request for Peer Reviews
• Completion of QA

HOW

🤖 Generated by Copilot at 32c56e3

• Add a custom hook useVitalsAspectRatioConfig to calculate the optimal configuration for the vitals monitor based on the screen size and aspect ratio (link)
• Use the useVitalsAspectRatioConfig hook in the CentralNursingStation component and pass the config and hash values to the HL7PatientVitalsMonitor component props (link, link, link)
• Use the useVitalsAspectRatioConfig hook in the ConsultationDetails component and pass the config and hash values to the HL7PatientVitalsMonitor and VentilatorPatientVitalsMonitor component props (link, link, link, link, link, link, link)
• Remove the unused imports of useBreakpoints and getVitalsCanvasSizeAndDuration from the ConsultationDetails component (link)
• Modify the font size and layout of the patient age, gender, asset, and bed links in the HL7PatientVitalsMonitor component to improve responsiveness and readability (link, link)
• Add a console log statement to the useBreakpoints hook to debug the current breakpoint value (link)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
care-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 9, 2023 10:42am

[netlify]

✅ Deploy Preview for care-egov-staging ready!

Name	Link
🔨 Latest commit	0b52f73
🔍 Latest deploy log	https://app.netlify.com/sites/care-egov-staging/deploys/64d36d457fd473000832c1c8
😎 Deploy Preview	https://deploy-preview-6036--care-egov-staging.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[nihal467]

LGTM

[github-actions]

@rithviknishad We truly appreciate your efforts. Thank you for taking the time to contribute; this is a very valuable contribution to us 🥇. We always welcome your contribution 🙂, so feel free to contribute to anything anytime, and never lose that spirit of innovation 🙌.