admin/waveform-analysis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 22 Wiki Activity

fix(chart): preserve clean view geometry

Browse Source
This commit is contained in:
李启源
2026-07-21 22:26:34 +08:00
parent 6a6a387868
commit 4643a2dbfe
2 changed files with 126 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/components/WaveformChart.test.ts
View File

@@ -297,9 +297,8 @@ describe('WaveformChart', () => {
expect(zeroLines[0].attributes('y1')).not.toBe(zeroLines[1].attributes('y1'))
})
it('uses the full drawing area and hides auxiliary layers in clean view', async () => {
const wrapper = await mountSizedChart(
{
it('preserves a titled multi-axis plot and hides auxiliary layers in clean view', async () => {
const data: WaveformData = {
kind: 'series',
series: [
{
@@ -338,22 +337,47 @@ describe('WaveformChart', () => {
},
},
],
},
{
cleanView: true,
}
const sharedProps = {
grid: { rowCount: 1, columnCount: 1, showPagination: true },
title: { text: 'hidden title' },
overlayMode: 'multi-axis' as const,
frameNumber: 1,
annotations: [{ id: 'note', seriesId: 'first', x: 0.5, y: 0, text: 'hidden note' }],
zeroLine: { visible: true },
},
)
title: { text: 'hidden title' },
}
const regularWrapper = await mountSizedChart(data, sharedProps)
const wrapper = await mountSizedChart(data, {
...sharedProps,
cleanView: true,
})
expect(wrapper.get('.waveform-chart').attributes('data-chart-left-margin')).toBe('0')
expect(wrapper.get('.waveform-chart__track').attributes('data-track-height')).toBe('360')
const regularTrack = regularWrapper.get('.waveform-chart__track')
const cleanTrack = wrapper.get('.waveform-chart__track')
const geometryAttributes = [
'data-track-left',
'data-track-top',
'data-track-width',
'data-track-height',
]
expect(wrapper.get('.waveform-chart').attributes('data-chart-left-margin')).toBe(
regularWrapper.get('.waveform-chart').attributes('data-chart-left-margin'),
)
expect(wrapper.get('.waveform-chart').attributes('data-title-area-height')).toBe(
regularWrapper.get('.waveform-chart').attributes('data-title-area-height'),
)
geometryAttributes.forEach((attribute) => {
expect(cleanTrack.attributes(attribute)).toBe(regularTrack.attributes(attribute))
})
expect(wrapper.get('.waveform-chart').classes()).toContain('waveform-chart--clean')
expect(getComputedStyle(wrapper.get('.waveform-chart').element).borderColor).toBe(
'rgba(0, 0, 0, 0)',
)
expect(wrapper.findAll('.waveform-chart__series')).toHaveLength(2)
expect(wrapper.find('.waveform-chart__overlay--independent').exists()).toBe(true)
expect(wrapper.find('.waveform-chart__title-area').exists()).toBe(false)
expect(wrapper.get('.waveform-chart__title-area').attributes('aria-hidden')).toBe('true')
expect(wrapper.find('.waveform-chart__title-visual').exists()).toBe(false)
expect(wrapper.find('.waveform-chart__axis').exists()).toBe(false)
expect(wrapper.find('.waveform-chart__grid').exists()).toBe(false)
expect(wrapper.find('.waveform-chart__plot-frame').exists()).toBe(false)
@@ -366,6 +390,30 @@ describe('WaveformChart', () => {
expect(wrapper.find('.ant-pagination').exists()).toBe(false)
})
it('preserves every track geometry in a multi-column clean view', async () => {
const props = {
displayMode: 'independent' as const,
grid: { rowCount: 2, columnCount: 2 },
}
const regularWrapper = await mountSizedChart(gridSeries(4), props)
const cleanWrapper = await mountSizedChart(gridSeries(4), { ...props, cleanView: true })
const geometryAttributes = [
'data-track-left',
'data-track-top',
'data-track-width',
'data-track-height',
]
const regularTracks = regularWrapper.findAll('.waveform-chart__track')
const cleanTracks = cleanWrapper.findAll('.waveform-chart__track')
expect(cleanTracks).toHaveLength(regularTracks.length)
cleanTracks.forEach((track, index) => {
geometryAttributes.forEach((attribute) => {
expect(track.attributes(attribute)).toBe(regularTracks[index].attributes(attribute))
})
})
})
it('places start, middle, and end step transitions at the expected X positions', async () => {
const lineTypes = ['step-start', 'step-middle', 'step-end', 'step-after'] as const
const wrapper = await mountSizedChart({

51
src/components/WaveformChart.vue
View File

@@ -288,13 +288,11 @@ const legendOrientation = computed<Exclude<WaveformLegendOrientation, 'auto'>>((
: 'vertical'
})
const resolvedTitleText = computed(() => props.title?.text.trim() ?? '')
const titleVisible = computed(
const titleAreaReserved = computed(
() =>
!isCleanView.value &&
Boolean(props.title) &&
props.title?.visible !== false &&
resolvedTitleText.value.length > 0,
Boolean(props.title) && props.title?.visible !== false && resolvedTitleText.value.length > 0,
)
const titleVisible = computed(() => titleAreaReserved.value && !isCleanView.value)
const titleFontSize = computed(() => {
const fontSize = props.title?.textStyle?.fontSize
return Number.isFinite(fontSize) && (fontSize ?? 0) > 0 ? (fontSize as number) : 14
@@ -343,12 +341,10 @@ const titleLayout = computed(() =>
rotation: titleRotation.value,
}),
)
const titleAreaHeight = computed(() => (titleVisible.value ? titleLayout.value.areaHeight : 0))
const chartTopMargin = computed(() => (isCleanView.value ? 0 : margin.top))
const titleAreaHeight = computed(() => (titleAreaReserved.value ? titleLayout.value.areaHeight : 0))
const chartTopMargin = computed(() => margin.top)
const drawingHeight = computed(() => Math.max(0, chartHeight.value - titleAreaHeight.value))
const innerHeight = computed(() =>
Math.max(0, drawingHeight.value - (isCleanView.value ? 0 : margin.top + margin.bottom)),
)
const innerHeight = computed(() => Math.max(0, drawingHeight.value - margin.top - margin.bottom))
const titleAreaStyle = computed<CSSProperties>(() => ({
height: `${titleAreaHeight.value}px`,
justifyContent:
@@ -461,7 +457,7 @@ const hasVisibleWaveformData = computed(() =>
)
const chartLeftMargin = computed(() =>
Math.max(
isCleanView.value ? 0 : margin.left,
margin.left,
hasYAxisLabels.value
? yAxisMetrics.value.fullClearance
: hasVisibleWaveformData.value
@@ -482,19 +478,13 @@ const multiAxisClearance = computed(() =>
),
)
const resolvedChartLeftMargin = computed(() =>
isCleanView.value
? 0
: props.overlayMode === 'multi-axis'
props.overlayMode === 'multi-axis'
? Math.max(chartLeftMargin.value, multiAxisClearance.value.left)
: chartLeftMargin.value,
)
const chartRightMargin = computed(() =>
props.overlayMode === 'multi-axis'
? isCleanView.value
? 0
: Math.max(margin.right, multiAxisClearance.value.right)
: isCleanView.value
? 0
? Math.max(margin.right, multiAxisClearance.value.right)
: margin.right,
)
const innerWidth = computed(() =>
@@ -595,7 +585,6 @@ const gridCells = computed(() => {
props.displayMode,
pagedTracks.value.map(Boolean),
yAxisLayout.value.horizontalGap,
!isCleanView.value,
)
return cells.map((cell, index) => ({ ...cell, series: pagedTracks.value[index] }))
})
@@ -1763,7 +1752,7 @@ watch(
)
function measureTitle() {
if (!titleVisible.value || !titleMeasureElement.value) {
if (!titleAreaReserved.value || !titleMeasureElement.value) {
measuredTitleWidth.value = 0
measuredTitleHeight.value = 0
return
@@ -1774,7 +1763,7 @@ function measureTitle() {
}
watch(
[resolvedTitleText, titleVisible, titleMeasureStyle],
[resolvedTitleText, titleAreaReserved, titleMeasureStyle],
async () => {
measuredTitleWidth.value = 0
measuredTitleHeight.value = 0
@@ -1813,7 +1802,10 @@ onBeforeUnmount(() => {
:class="[
`waveform-chart--${displayMode}`,
`waveform-chart--interaction-${activeInteractionMode}`,
{ 'waveform-chart--panning': selection?.mode === 'pan' },
{
'waveform-chart--clean': isCleanView,
'waveform-chart--panning': selection?.mode === 'pan',
},
]"
:style="containerStyle"
:data-display-mode="displayMode"
@@ -1824,11 +1816,12 @@ onBeforeUnmount(() => {
@contextmenu.capture="handleNativeContextMenu"
>
<div
v-if="titleVisible"
v-if="titleAreaReserved"
class="waveform-chart__title-area"
:style="titleAreaStyle"
role="heading"
aria-level="2"
:role="titleVisible ? 'heading' : undefined"
:aria-level="titleVisible ? 2 : undefined"
:aria-hidden="isCleanView || undefined"
>
<span
ref="titleMeasureElement"
@@ -1838,7 +1831,7 @@ onBeforeUnmount(() => {
>
{{ resolvedTitleText }}
</span>
<span class="waveform-chart__title-visual" :style="titleVisualStyle">
<span v-if="titleVisible" class="waveform-chart__title-visual" :style="titleVisualStyle">
<span
class="waveform-chart__title-text"
:style="titleTextStyle"
@@ -2069,6 +2062,10 @@ onBeforeUnmount(() => {
border-radius: 6px;
}
.waveform-chart--clean {
border-color: transparent;
}
.waveform-chart__pagination {
position: absolute;
right: 10px;