fix: display tooltips in workflow metric charts

src/components/timeline/MetricAverageChart.vue

@@ -5,7 +5,7 @@ import TimelineChart from "@/components/timeline/TimelineChart.vue"
 import type {EvaluationResultsDocumentWide, EvaluationRun, TimelineChartDataPoint, Workflow} from "@/types"
 import { getMaxValueOfMetric } from '@/helpers/metrics'
 import {useI18n} from "vue-i18n";
-import {createReadableMetricValue} from "@/helpers/utils";
+import { metricChartTooltipContent } from "@/helpers/metric-chart-tooltip-content";
 
 const { t } = useI18n()
 
@@ -61,14 +61,7 @@ function getTimelineData(runs: EvaluationRun[], metric: string): TimelineChartDa
 }
 
 function tooltipContent(d: TimelineChartDataPoint) {
-  return `
-    <div class="">
-      <span class="font-semibold">${t('date')}:</span> <span>${d.date.getDate()}.${d.date.getMonth()}.${d.date.getFullYear()}</span>
-    </div>
-    <div class="">
-      <span class="font-semibold">${t(props.metric)}:</span> <span>${createReadableMetricValue(<keyof EvaluationResultsDocumentWide>props.metric, d.value)}</span>
-    </div>
-  `
+  return metricChartTooltipContent(d, props.metric)
 }
 </script>
 

src/components/timeline/MetricChart.vue

@@ -4,6 +4,8 @@ import api from "@/helpers/api"
 import TimelineChart from "@/components/timeline/TimelineChart.vue"
 import { getMaxValueOfMetric } from '@/helpers/metrics'
 import type { EvaluationResultsDocumentWide, EvaluationRun } from "@/types"
+import { TimelineChartDataPoint } from "@/types"
+import { metricChartTooltipContent } from "@/helpers/metric-chart-tooltip-content"
 
 const props = defineProps(['gtId', 'workflowId', 'metric', 'startDate', 'endDate'])
 const runs = ref<EvaluationRun[]>([])
@@ -36,10 +38,14 @@ function getTimelineData(runs: EvaluationRun[], metric: keyof EvaluationResultsD
   })
 }
 
+function tooltipContent(d: TimelineChartDataPoint) {
+  return metricChartTooltipContent(d, props.metric)
+}
+
 </script>
 
 <template>
-  <TimelineChart :data="data" :max-y="maxY" :start-date="startDate" :end-date="endDate" />
+  <TimelineChart :data="data" :max-y="maxY" :start-date="startDate" :end-date="endDate" :tooltip-content="tooltipContent" />
 </template>
 
 <style scoped lang="scss">

src/helpers/metric-chart-tooltip-content.ts

@@ -0,0 +1,20 @@
+import type { EvaluationResultsDocumentWide, TimelineChartDataPoint } from "@/types"
+import { createReadableMetricValue } from "@/helpers/utils"
+import { useI18n } from "vue-i18n"
+import i18n from '@/i18n'
+
+const { t } = i18n.global
+function metricChartTooltipContent(d: TimelineChartDataPoint, metric: string) {
+  return `
+    <div class="">
+      <span class="font-semibold">${t('date')}:</span> <span>${d.date.getDate()}.${d.date.getMonth()}.${d.date.getFullYear()}</span>
+    </div>
+    <div class="">
+      <span class="font-semibold">${t(metric)}:</span> <span>${createReadableMetricValue(<keyof EvaluationResultsDocumentWide>metric, d.value)}</span>
+    </div>
+  `
+}
+
+export {
+  metricChartTooltipContent
+}

src/i18n.ts

@@ -0,0 +1,8 @@
+import en from './locales/en.json'
+import de from './locales/de.json'
+import { createI18n } from "vue-i18n"
+
+export default createI18n({
+  locale: 'en',
+  messages: { en, de }
+})

src/locales/de.json

@@ -51,5 +51,6 @@
   "cpu_time": "CPU Zeit",
   "wer": "WER",
   "pages_per_minute": "Seiten pro Minute",
-  "cpu_standard_deviation": "CPU Standardabweichung"
+  "cpu_standard_deviation": "CPU Standardabweichung",
+  "date": "Datum"
 }

src/locales/en.json

@@ -45,5 +45,6 @@
   "cpu_time": "CPU Time",
   "wer": "WER",
   "pages_per_minute": "Pages per minute",
-  "cpu_standard_deviation": "CPU Standard Deviation"
+  "cpu_standard_deviation": "CPU Standard Deviation",
+  "date": "Date"
 }

src/main.js

@@ -10,14 +10,9 @@ import PrimeVue from 'primevue/config'
 import '@inkline/inkline/inkline.scss'
 import './assets/main.css'
 import './assets/app.scss'
+import i18n from "@/i18n"
 
-import en from './locales/en.json'
-import de from './locales/de.json'
 
-const i18n = createI18n({
-  locale: 'en',
-  messages: { en, de }
-})
 
 const app = createApp(App)
 
@@ -27,5 +22,4 @@ app.use(PrimeVue, { /* options */ })
 app.use(router)
 app.use(i18n)
 
-
 app.mount('#app')