fix: finish all patient related upgrades

vigilcare-dashboard/src/components/charts/TrendsGrid.vue

@@ -1,7 +1,10 @@
 <script setup>
 import VitalTrendChart from './VitalTrendChart.vue'
 
-defineProps({ observations: { type: Array, required: true } })
+defineProps({
+  observations: { type: Array, required: true },
+  medications: { type: Array, default: () => [] },
+})
 
 const charts = [
   { code: 'HEART_RATE', title: 'Heart Rate (bpm)', yMin: 30, yMax: 180 },
@@ -18,6 +21,7 @@ const charts = [
       v-for="chart in charts"
       :key="chart.code"
       :observations="observations"
+      :medications="medications"
       :code="chart.code"
       :title="chart.title"
       :y-min="chart.yMin"

vigilcare-dashboard/src/components/charts/VitalChart.vue

@@ -1,23 +1,36 @@
 <script setup>
-import { computed, toValue, shallowRef, markRaw } from 'vue'
+import { computed, toValue } from 'vue'
 import { Line } from 'vue-chartjs'
 import { Chart, registerables } from 'chart.js'
+import {
+  filterMedicationsForWindow,
+  formatMedicationTooltip,
+  getMedicationsNearTimestamp,
+} from '@/composables/chartMedications'
+import { medicationMarkerPlugin } from '@/plugins/medicationMarkerPlugin'
 
-Chart.register(...registerables)
+Chart.register(...registerables, medicationMarkerPlugin)
 
 const props = defineProps({
   chartData: { type: Object, required: true },
   title: { type: String, required: true },
   yMin: { type: Number, default: undefined },
   yMax: { type: Number, default: undefined },
+  observations: { type: Array, default: () => [] },
+  observationCode: { type: String, default: '' },
+  medications: { type: Array, default: () => [] },
 })
 
 const lineData = computed(() => {
   const data = toValue(props.chartData)
-  return data?.datasets ? data : { labels: [], datasets: [] }
+  return data?.datasets ? data : { labels: [], timestamps: [], datasets: [] }
 })
 
-const chartOptions = shallowRef(markRaw({
+const chartMedications = computed(() =>
+  filterMedicationsForWindow(props.observations, props.observationCode, props.medications),
+)
+
+const chartOptions = computed(() => ({
   responsive: true,
   maintainAspectRatio: true,
   animation: {
@@ -29,6 +42,23 @@ const chartOptions = shallowRef(markRaw({
   },
   plugins: {
     legend: { display: false },
+    medicationMarkers: {
+      medications: chartMedications.value,
+      timestamps: lineData.value.timestamps ?? [],
+    },
+    tooltip: {
+      callbacks: {
+        afterBody(items) {
+          if (!items.length) return []
+          const timestamps = lineData.value.timestamps ?? []
+          const idx = items[0].dataIndex
+          const targetMs = timestamps[idx] ? new Date(timestamps[idx]).getTime() : null
+          if (targetMs == null) return []
+          return getMedicationsNearTimestamp(chartMedications.value, targetMs)
+            .map(formatMedicationTooltip)
+        },
+      },
+    },
   },
 }))
 </script>
@@ -40,4 +70,4 @@ const chartOptions = shallowRef(markRaw({
       <Line :data="lineData" :options="chartOptions" />
     </div>
   </div>
-</template>
+</template>

vigilcare-dashboard/src/components/charts/VitalTrendChart.vue

@@ -4,6 +4,7 @@ import VitalChart from './VitalChart.vue'
 
 const props = defineProps({
   observations: { type: Array, required: true },
+  medications: { type: Array, default: () => [] },
   code: { type: String, required: true },
   title: { type: String, required: true },
   yMin: { type: Number, default: undefined },
@@ -19,5 +20,8 @@ const { chartData } = useChartData(() => props.observations, props.code)
     :title="title"
     :y-min="yMin"
     :y-max="yMax"
+    :observations="observations"
+    :observation-code="code"
+    :medications="medications"
   />
 </template>