232 lines
6.9 KiB
Vue
232 lines
6.9 KiB
Vue
<script setup lang="ts">
|
|
import { axisBottom, axisLeft, axisRight, select } from 'd3'
|
|
import { nextTick, onMounted, ref, watch } from 'vue'
|
|
|
|
import type { WaveformAxesOptions } from '../../types'
|
|
import { formatAxisTime, formatScientificAxisLabel } from '../../utils'
|
|
import type { DisplaySeries, TrackLayout, WaveformYAxisLayout } from '../core/types'
|
|
|
|
interface Props {
|
|
track: TrackLayout
|
|
innerWidth: number
|
|
cleanView: boolean
|
|
axes?: WaveformAxesOptions
|
|
timeUnit: 's' | 'ms'
|
|
yLabel?: string
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
const xAxisElement = ref<SVGGElement>()
|
|
const yAxisElements = ref<SVGGElement[]>([])
|
|
|
|
function resolveYAxisLabel(series: DisplaySeries): string {
|
|
return series.name.trim() || props.yLabel || ''
|
|
}
|
|
|
|
function hasYAxisTitle(axis: WaveformYAxisLayout): boolean {
|
|
const series = axis.seriesList[0]
|
|
return Boolean(series && resolveYAxisLabel(series))
|
|
}
|
|
|
|
function setYAxisElement(element: unknown, index: number) {
|
|
if (element) yAxisElements.value[index] = element as SVGGElement
|
|
}
|
|
|
|
function shouldShowYAxisLabel(trackHeight: number, trackIndex: number): boolean {
|
|
const minimumHeightForLabel = 80
|
|
if (trackHeight >= minimumHeightForLabel) return true
|
|
return trackIndex % Math.ceil(minimumHeightForLabel / trackHeight) === 0
|
|
}
|
|
|
|
function renderAxes() {
|
|
props.track.yAxes.forEach((axis, index) => {
|
|
const element = yAxisElements.value[index]
|
|
if (!element) return
|
|
const [axisMin, axisMax] = axis.scale.domain()
|
|
const yAxis = (axis.side === 'left' ? axisLeft(axis.scale) : axisRight(axis.scale))
|
|
.tickFormat((value) => formatScientificAxisLabel(Number(value), { axisMin, axisMax }))
|
|
.tickSize(-4)
|
|
.tickPadding(7)
|
|
.tickSizeOuter(0)
|
|
.tickValues(axis.tickValues)
|
|
|
|
const selection = select(element)
|
|
selection.call(yAxis)
|
|
selection
|
|
.selectAll('path.domain')
|
|
.attr('display', props.axes?.y?.lineVisible === false ? 'none' : null)
|
|
})
|
|
|
|
if (!xAxisElement.value) return
|
|
const selection = select(xAxisElement.value)
|
|
selection.call(
|
|
axisBottom(props.track.xScale)
|
|
.tickValues(props.track.xAxisTickValues)
|
|
.tickFormat((value) =>
|
|
formatAxisTime(
|
|
Number(value),
|
|
props.timeUnit,
|
|
props.track.xScale.domain() as [number, number],
|
|
),
|
|
)
|
|
.tickSize(-4)
|
|
.tickPadding(7)
|
|
.tickSizeOuter(0),
|
|
)
|
|
selection
|
|
.selectAll('path.domain')
|
|
.attr('display', props.axes?.x?.lineVisible === false ? 'none' : null)
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await nextTick()
|
|
renderAxes()
|
|
})
|
|
|
|
watch(
|
|
[
|
|
() => props.track.xScale,
|
|
() => props.track.yAxes,
|
|
() => props.track.xAxisTickValues,
|
|
() => props.track.yAxisTickValues,
|
|
() => props.timeUnit,
|
|
() => props.axes?.x?.lineVisible,
|
|
() => props.axes?.y?.lineVisible,
|
|
],
|
|
async () => {
|
|
await nextTick()
|
|
renderAxes()
|
|
},
|
|
{ flush: 'post' },
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<g
|
|
v-if="track.showXAxis"
|
|
ref="xAxisElement"
|
|
class="waveform-track__axis waveform-track__axis--x waveform-chart__axis waveform-chart__axis--x"
|
|
:class="{ 'waveform-track__axis--line-hidden': axes?.x?.lineVisible === false }"
|
|
:transform="`translate(0, ${track.height})`"
|
|
/>
|
|
<g
|
|
v-if="track.showXAxis"
|
|
class="waveform-track__axis-endpoints waveform-chart__axis-endpoints"
|
|
:transform="`translate(0, ${track.height})`"
|
|
font-family="sans-serif"
|
|
font-size="10"
|
|
aria-hidden="true"
|
|
>
|
|
<text
|
|
class="waveform-track__axis-endpoint waveform-track__axis-endpoint--start waveform-chart__axis-endpoint waveform-chart__axis-endpoint--start"
|
|
x="0"
|
|
y="7"
|
|
dy="0.71em"
|
|
text-anchor="start"
|
|
>
|
|
{{ track.endpointLabels.start }}
|
|
</text>
|
|
<text
|
|
class="waveform-track__axis-endpoint waveform-track__axis-endpoint--end waveform-chart__axis-endpoint waveform-chart__axis-endpoint--end"
|
|
:x="track.width ?? innerWidth"
|
|
y="7"
|
|
dy="0.71em"
|
|
text-anchor="end"
|
|
>
|
|
{{ track.endpointLabels.end }}
|
|
</text>
|
|
</g>
|
|
<text
|
|
v-if="track.showXAxis && track.xAxisExponent"
|
|
class="waveform-track__axis-exponent waveform-track__axis-exponent--x waveform-chart__axis-exponent waveform-chart__axis-exponent--x"
|
|
:x="track.width ?? innerWidth"
|
|
:y="track.height + 27"
|
|
text-anchor="end"
|
|
aria-hidden="true"
|
|
>
|
|
{{ track.xAxisExponent }}
|
|
</text>
|
|
|
|
<g
|
|
v-for="axis in track.isEmpty ? [] : track.yAxes"
|
|
:key="`y-axis-${track.index}-${axis.index}`"
|
|
:ref="(element) => setYAxisElement(element, axis.index)"
|
|
class="waveform-track__axis waveform-track__axis--y waveform-chart__axis waveform-chart__axis--y"
|
|
:class="[
|
|
`waveform-track__axis--${axis.side}`,
|
|
{ 'waveform-track__axis--line-hidden': axes?.y?.lineVisible === false },
|
|
]"
|
|
:data-y-axis-index="axis.index"
|
|
:data-y-axis-side="axis.side"
|
|
:transform="`translate(${axis.x}, 0)`"
|
|
/>
|
|
<text
|
|
v-for="axis in track.isEmpty ? [] : track.yAxes.filter((item) => item.exponentLabel)"
|
|
:key="`y-axis-exponent-${track.index}-${axis.index}`"
|
|
class="waveform-track__axis-exponent waveform-track__axis-exponent--y waveform-chart__axis-exponent waveform-chart__axis-exponent--y"
|
|
:data-y-axis-index="axis.index"
|
|
:x="axis.exponentX"
|
|
y="0"
|
|
dy="0.32em"
|
|
:text-anchor="axis.side === 'left' ? 'end' : 'start'"
|
|
aria-hidden="true"
|
|
>
|
|
{{ axis.exponentLabel }}
|
|
</text>
|
|
|
|
<g
|
|
v-if="
|
|
!cleanView &&
|
|
!track.isEmpty &&
|
|
track.hasVisibleSeries &&
|
|
track.seriesList.length === 1 &&
|
|
track.showYAxisLabel &&
|
|
resolveYAxisLabel(track.series) &&
|
|
shouldShowYAxisLabel(track.height, track.index)
|
|
"
|
|
>
|
|
<rect
|
|
class="waveform-track__y-axis-label-bg waveform-chart__y-axis-label-bg"
|
|
:x="track.yAxisLabelX - 12"
|
|
:y="track.height / 2 - 40"
|
|
width="24"
|
|
height="80"
|
|
rx="2"
|
|
/>
|
|
<text
|
|
class="waveform-track__y-axis-label waveform-chart__y-axis-label"
|
|
:fill="track.series.color"
|
|
:transform="`translate(${track.yAxisLabelX}, ${track.height / 2}) rotate(-90)`"
|
|
text-anchor="middle"
|
|
dominant-baseline="central"
|
|
>
|
|
{{ resolveYAxisLabel(track.series) }}
|
|
</text>
|
|
</g>
|
|
|
|
<g
|
|
v-for="axis in !cleanView && track.yAxes.length > 1 ? track.yAxes.filter(hasYAxisTitle) : []"
|
|
:key="`y-axis-title-${track.index}-${axis.index}`"
|
|
class="waveform-track__multi-axis-title"
|
|
:data-y-axis-title-index="axis.index"
|
|
>
|
|
<rect
|
|
class="waveform-track__y-axis-label-bg waveform-chart__y-axis-label-bg"
|
|
:x="axis.labelX - 12"
|
|
:y="track.height / 2 - 40"
|
|
width="24"
|
|
height="80"
|
|
rx="2"
|
|
/>
|
|
<text
|
|
class="waveform-track__y-axis-label waveform-chart__y-axis-label"
|
|
:fill="axis.seriesList[0].color"
|
|
:transform="`translate(${axis.labelX}, ${track.height / 2}) rotate(-90)`"
|
|
text-anchor="middle"
|
|
dominant-baseline="central"
|
|
>
|
|
{{ resolveYAxisLabel(axis.seriesList[0]) }}
|
|
</text>
|
|
</g>
|
|
</template>
|