From d09b6dd39aca0d8b6dfa1cfc2df4b3730e26e1da Mon Sep 17 00:00:00 2001
From: Paul Pestov <10750176+paulpestov@users.noreply.github.com>
Date: Tue, 21 Nov 2023 00:14:29 +0100
Subject: [PATCH] feat: display large average chart on click
---
.../timeline/MetricAverageChart.vue | 30 ++++++++++++++++++-
src/components/timeline/MetricChart.vue | 11 +++++--
2 files changed, 38 insertions(+), 3 deletions(-)
diff --git a/src/components/timeline/MetricAverageChart.vue b/src/components/timeline/MetricAverageChart.vue
index c36536b..27a3d65 100644
--- a/src/components/timeline/MetricAverageChart.vue
+++ b/src/components/timeline/MetricAverageChart.vue
@@ -6,6 +6,7 @@ import type {EvaluationResultsDocumentWide, EvaluationRun, TimelineChartDataPoin
import { getMaxValueOfMetric } from '@/helpers/metrics'
import {useI18n} from "vue-i18n";
import { metricChartTooltipContent } from "@/helpers/metric-chart-tooltip-content";
+import OverlayPanel from "primevue/overlaypanel";
const { t } = useI18n()
@@ -20,6 +21,7 @@ const data = ref<TimelineChartDataPoint[]>([])
const maxY = ref(2)
const workflows = ref<Workflow[] | null>(null)
const runs = ref<EvaluationRun[]>([])
+const op = ref<OverlayPanel | null>(null)
onMounted(async () => {
const { gtId, metric } = props
@@ -66,7 +68,33 @@ function tooltipContent(d: TimelineChartDataPoint) {
</script>
<template>
- <BaseTimelineChart :data="data" :max-y="maxY" :start-date="startDate" :end-date="endDate" :tooltip-content="tooltipContent"/>
+ <div @click="op?.toggle($event)" class="cursor-pointer flex justify-end">
+ <BaseTimelineChart
+ :data="data"
+ :max-y="maxY"
+ :start-date="startDate"
+ :end-date="endDate"
+ :tooltip-content="tooltipContent"
+ :width="400"
+ />
+ </div> <OverlayPanel
+ ref="op"
+ :pt="{
+ root: {
+ class: 'z-[9999] bg-white border rounded-md shadow-md'
+ }
+ }"
+ >
+ <BaseTimelineChart
+ :data="data"
+ :max-y="maxY"
+ :start-date="startDate"
+ :end-date="endDate"
+ :tooltip-content="tooltipContent"
+ :height="400"
+ :width="660"
+ />
+ </OverlayPanel>
</template>
<style scoped lang="scss">
diff --git a/src/components/timeline/MetricChart.vue b/src/components/timeline/MetricChart.vue
index 731f1c6..1f6eb39 100644
--- a/src/components/timeline/MetricChart.vue
+++ b/src/components/timeline/MetricChart.vue
@@ -46,8 +46,15 @@ function tooltipContent(d: TimelineChartDataPoint) {
</script>
<template>
- <div @click="op?.toggle($event)" class="cursor-pointer">
- <BaseTimelineChart :data="data" :max-y="maxY" :start-date="startDate" :end-date="endDate" :tooltip-content="tooltipContent" />
+ <div @click="op?.toggle($event)" class="cursor-pointer flex justify-end">
+ <BaseTimelineChart
+ :data="data"
+ :max-y="maxY"
+ :start-date="startDate"
+ :end-date="endDate"
+ :tooltip-content="tooltipContent"
+ :width="400"
+ />
</div>
<OverlayPanel
ref="op"
--
GitLab