Skip to content
Snippets Groups Projects
Commit d09b6dd3 authored by Paul Pestov's avatar Paul Pestov
Browse files

feat: display large average chart on click

parent c07569c8
No related branches found
No related tags found
No related merge requests found
......@@ -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">
......
......@@ -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"
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment