Dynamic aspect ratio for HL7 and Ventilator Vitals Monitors

[rithviknishad]

WHAT

🤖 Generated by Copilot at cd23ceb

This pull request improves the responsiveness and adaptability of the vitals monitor components, which display real-time vital signs of patients in the facility. It refactors the code to use a common interface and a configuration prop for the vitals monitor components, and to use a variable duration for the waveform rendering. It also simplifies the code structure and removes redundant comments. It affects the following files: src/Components/Facility/ConsultationDetails.tsx, src/Components/VitalsMonitor/*, src/Common/hooks/useBreakpoints.ts, and src/Common/hooks/useWindowDimensions.ts.

Proposed Changes

✅ Adds a utility hook: useBreakpoints to obtain value based on the current break-point.

Usage:

const vitalsAspectRatio = useBreakpoints({
  default: 4/11,
  md: 8 / 11,
  lg: 15 / 11,
  xl: 13 / 11,
  "2xl": 19 / 11,
  "3xl": 23 / 11,
});

// vitalsAspectRatio holds the value of the current breakpoint based on the current window width.

✅ Made duration to be configurable for the Vitals Renderers.

✅ Added utility method to get canvas render's size and duration based (configurable)

2023-08-01.17-27-35.mp4

Closes #5726

@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 cd23ceb

• Add useBreakpoints hook to get the value mapped to the current breakpoint for the vitals monitor component (link, link)
• Move useWindowDimensions hook to useBreakpoints module and remove usage example (link, link)
• Pass config prop to HL7PatientVitalsMonitor and VentilatorPatientVitalsMonitor components to configure the vitals monitor renderer and canvas (link, link, link, link, link, link, link)
• Remove PatientAssetBed import from HL7PatientVitalsMonitor and VentilatorPatientVitalsMonitor modules as it is imported from types module (link, link)
• Remove spread operator from style prop of div and canvas elements in HL7PatientVitalsMonitor and VentilatorPatientVitalsMonitor modules and use waveformCanvas.size object directly (link, link, link, link, link, link, link, link)
• Add duration property to Options interface and HL7VitalsRenderer and VentilatorVitalsRenderer class constructors to pass the duration of each row on the canvas (link, link, link, link)
• Replace DURATION constant with duration property in the calculation of deltaX property of each channel in HL7VitalsRenderer and VentilatorVitalsRenderer classes (link, link, link, link, link, link)
• Remove DURATION constant from HL7VitalsRenderer and VentilatorVitalsRenderer modules as it is no longer needed (link, link)
• Add config parameter to useHL7VitalsMonitor and useVentilatorVitalsMonitor hooks to pass the size and duration of the vitals monitor canvas (link, link, link, link, link, link)
• Replace MONITOR_WAVEFORMS_CANVAS_SIZE constant with size property of config parameter in the return value of useHL7VitalsMonitor and useVentilatorVitalsMonitor hooks (link, link)
• Add IVitalsComponentProps interface to types module to define the common props for the vitals monitor components (link)
• Import PatientAssetBed type and getVitalsCanvasSizeAndDuration function from AssetTypes and utils modules respectively in types module (link)
• Add getVitalsCanvasSizeAndDuration function to utils module to return the size and duration of the vitals monitor canvas based on the given aspect ratio and scale or the default values based on the window dimensions and breakpoints (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 1, 2023 2:08pm

[netlify]

✅ Deploy Preview for care-egov-staging ready!

Name	Link
🔨 Latest commit	b9b502e
🔍 Latest deploy log	https://app.netlify.com/sites/care-egov-staging/deploys/64c911a3d86e6500082bf721
😎 Deploy Preview	https://deploy-preview-5976--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 🙌.