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

feat: show large metric chart on preview click

parent f57bef53
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/timeline/TimelineChart.vue → src/components/timeline/BaseTimelineChart.vue
+ 50
− 40
View file @ 86de777e
<script setup lang="ts">
import * as d3 from "d3"
import { ref, watch, computed } from "vue"
import { ref, watch, computed, onMounted } from "vue"
import type { TimelineChartDataPoint } from "@/types"
import { createTooltip, setEventListeners } from "@/helpers/d3/d3-tooltip"
import colors from 'tailwindcss/colors'
......@@ -12,12 +12,13 @@ interface Props {
width?: number,
startDate: Date,
endDate: Date,
height?: number,
tooltipContent: (d: TimelineChartDataPoint) => string
}
const props = defineProps<Props>()
const height = 60
const height = props.height || 60
const marginTop = 10
const marginRight = 10
const marginBottom = 30
......@@ -41,40 +42,43 @@ function isUp(data: TimelineChartDataPoint[], higherIsUp = true) {
else return -1
}
watch([() => props.data, () => props.startDate, () => props.endDate], ([data, startDate, endDate]) => {
function render([data, startDate, endDate]) {
if (!data || !startDate || !endDate) return
if (data.length === 0) return
console.log(container.value)
// Declare the x (horizontal position) scale.
const x = d3.scaleTime()
.domain([startDate, endDate])
.range([marginLeft, _width.value - marginRight])
.domain([startDate, endDate])
.range([marginLeft, _width.value - marginRight])
// Declare the y (vertical position) scale.
const y = d3.scaleLinear()
.domain([0, _maxY.value])
.range([height - marginBottom, marginTop])
.domain([0, _maxY.value])
.range([height - marginBottom, marginTop])
// Create the SVG container.
const svg = d3.create("svg")
.attr("width", _width.value)
.attr("height", height)
.attr("width", _width.value)
.attr("height", height)
// Add the x-axis.
svg.append("g")
.classed('x-axis-group', true)
.attr("transform", `translate(0,${height - marginBottom})`)
.call(d3.axisBottom(x).ticks(0).tickSize(0).tickFormat(d3.utcFormat("%d.%m.%Y")))
.classed('x-axis-group', true)
.attr("transform", `translate(0,${height - marginBottom})`)
.call(d3.axisBottom(x).ticks(0).tickSize(0).tickFormat(d3.utcFormat("%d.%m.%Y")))
svg.select('.x-axis-group .domain').attr('stroke', colors.gray['400'])
svg.selectAll('.x-axis-group .tick text').attr('fill', colors.gray['400'])
// Add the y-axis.
svg.append("g")
.classed('y-axis-group', true)
.attr("transform", `translate(${marginLeft},0)`)
.call(d3.axisLeft(y).ticks(1).tickSize(0).tickPadding(5))
.classed('y-axis-group', true)
.attr("transform", `translate(${marginLeft},0)`)
.call(d3.axisLeft(y).ticks(1).tickSize(0).tickPadding(5))
svg.select('.y-axis-group .domain').attr('stroke', colors.gray['400'])
svg.selectAll('.y-axis-group .tick text').attr('fill', colors.gray['400'])
......@@ -84,39 +88,39 @@ watch([() => props.data, () => props.startDate, () => props.endDate], ([data, st
const trend = isUp(data, false)
const pathGroup = svg
.append('g')
.classed('path-group', true)
.classed('up', trend === 1)
.classed('down', trend === -1)
.append('g')
.classed('path-group', true)
.classed('up', trend === 1)
.classed('down', trend === -1)
pathGroup.append("path")
.datum(data)
.attr("stroke-width", 1.5)
.attr("d", d3.line()
.x(function(d) { return x(d.date) })
.y(function(d) { return y(d.value) })
)
.datum(data)
.attr("stroke-width", 1.5)
.attr("d", d3.line()
.x(function(d) { return x(d.date) })
.y(function(d) { return y(d.value) })
)
const pointGroups = pathGroup.selectAll("myCircles")
.data(data)
.enter()
.append("g")
.data(data)
.enter()
.append("g")
pointGroups
.append('circle')
.attr("r", 10)
.style('fill', 'transparent')
.style('cursor', 'pointer')
.attr("cx", function(d) { return x(d.date) })
.attr("cy", function(d) { return y(d.value) })
.classed('chart-point', true)
.append('circle')
.attr("r", 10)
.style('fill', 'transparent')
.style('cursor', 'pointer')
.attr("cx", function(d) { return x(d.date) })
.attr("cy", function(d) { return y(d.value) })
.classed('chart-point', true)
pointGroups
.append("circle")
.attr("r", 2)
.classed('pointer-events-none', true)
.attr("cx", function(d) { return x(d.date) })
.attr("cy", function(d) { return y(d.value) })
.append("circle")
.attr("r", 2)
.classed('pointer-events-none', true)
.attr("cx", function(d) { return x(d.date) })
.attr("cy", function(d) { return y(d.value) })
const oldTooltip = document.querySelector('.d3-tooltip')
const tooltip = oldTooltip ? d3.select(oldTooltip) : createTooltip(d3.select('body'), {
......@@ -129,8 +133,14 @@ watch([() => props.data, () => props.startDate, () => props.endDate], ([data, st
if (!container.value) return
container.value.replaceChildren()
container.value.append(svg.node())
}
onMounted(() => {
render([props.data, props.startDate, props.endDate])
})
watch([() => props.data, () => props.startDate, () => props.endDate], render)
</script>
......
src/components/timeline/MetricAverageChart.vue
+ 2
− 2
View file @ 86de777e
<script setup lang="ts">
import { onMounted, ref, watch } from "vue"
import api from "@/helpers/api"
import TimelineChart from "@/components/timeline/TimelineChart.vue"
import BaseTimelineChart from "@/components/timeline/BaseTimelineChart.vue"
import type {EvaluationResultsDocumentWide, EvaluationRun, TimelineChartDataPoint, Workflow} from "@/types"
import { getMaxValueOfMetric } from '@/helpers/metrics'
import {useI18n} from "vue-i18n";
......@@ -66,7 +66,7 @@ function tooltipContent(d: TimelineChartDataPoint) {
</script>
<template>
<TimelineChart :data="data" :max-y="maxY" :start-date="startDate" :end-date="endDate" :tooltip-content="tooltipContent"/>
<BaseTimelineChart :data="data" :max-y="maxY" :start-date="startDate" :end-date="endDate" :tooltip-content="tooltipContent"/>
</template>
<style scoped lang="scss">
......
src/components/timeline/MetricChart.vue
+ 24
− 2
View file @ 86de777e
<script setup lang="ts">
import { onMounted, ref, watch } from "vue"
import api from "@/helpers/api"
import TimelineChart from "@/components/timeline/TimelineChart.vue"
import BaseTimelineChart from "@/components/timeline/BaseTimelineChart.vue"
import { getMaxValueOfMetric } from '@/helpers/metrics'
import type { EvaluationResultsDocumentWide, EvaluationRun } from "@/types"
import { TimelineChartDataPoint } from "@/types"
import { metricChartTooltipContent } from "@/helpers/metric-chart-tooltip-content"
import OverlayPanel from 'primevue/overlaypanel'
const props = defineProps(['gtId', 'workflowId', 'metric', 'startDate', 'endDate'])
const runs = ref<EvaluationRun[]>([])
const data = ref([])
const maxY = ref(2)
const op = ref<OverlayPanel | null>(null)
onMounted(async () => {
......@@ -45,7 +47,27 @@ function tooltipContent(d: TimelineChartDataPoint) {
</script>
<template>
<TimelineChart :data="data" :max-y="maxY" :start-date="startDate" :end-date="endDate" :tooltip-content="tooltipContent" />
<div @click="op?.toggle($event)" class="cursor-pointer">
<BaseTimelineChart :data="data" :max-y="maxY" :start-date="startDate" :end-date="endDate" :tooltip-content="tooltipContent" />
</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">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment