From f57bef5317f47dfc59a5bac64eddf78cf1a695a2 Mon Sep 17 00:00:00 2001
From: Paul Pestov <10750176+paulpestov@users.noreply.github.com>
Date: Tue, 7 Nov 2023 23:04:11 +0100
Subject: [PATCH] fix: display tooltips in workflow metric charts

---
 .../timeline/MetricAverageChart.vue           | 11 ++--------
 src/components/timeline/MetricChart.vue       |  8 +++++++-
 src/helpers/metric-chart-tooltip-content.ts   | 20 +++++++++++++++++++
 src/i18n.ts                                   |  8 ++++++++
 src/locales/de.json                           |  3 ++-
 src/locales/en.json                           |  3 ++-
 src/main.js                                   |  8 +-------
 7 files changed, 42 insertions(+), 19 deletions(-)
 create mode 100644 src/helpers/metric-chart-tooltip-content.ts
 create mode 100644 src/i18n.ts

diff --git a/src/components/timeline/MetricAverageChart.vue b/src/components/timeline/MetricAverageChart.vue
index 92e2df6..fd246ca 100644
--- a/src/components/timeline/MetricAverageChart.vue
+++ b/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>
 
diff --git a/src/components/timeline/MetricChart.vue b/src/components/timeline/MetricChart.vue
index 78581eb..789a98c 100644
--- a/src/components/timeline/MetricChart.vue
+++ b/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">
diff --git a/src/helpers/metric-chart-tooltip-content.ts b/src/helpers/metric-chart-tooltip-content.ts
new file mode 100644
index 0000000..5c8193e
--- /dev/null
+++ b/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
+}
diff --git a/src/i18n.ts b/src/i18n.ts
new file mode 100644
index 0000000..ad85159
--- /dev/null
+++ b/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 }
+})
diff --git a/src/locales/de.json b/src/locales/de.json
index ff55953..24fbbe9 100644
--- a/src/locales/de.json
+++ b/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"
 }
diff --git a/src/locales/en.json b/src/locales/en.json
index df44823..a8acfe2 100644
--- a/src/locales/en.json
+++ b/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"
 }
diff --git a/src/main.js b/src/main.js
index 721cc7e..7d1e57c 100644
--- a/src/main.js
+++ b/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')