waveform-analysis 0.1.59 → 0.1.61

package/src/components/core/yAxisLayoutMetrics.ts

@@ -0,0 +1,75 @@
+import type { WaveformOverlayMode } from '../data/types'
+import {
+  Y_AXIS_CHARACTER_WIDTH,
+  Y_AXIS_LABEL_BAND_WIDTH,
+  Y_AXIS_LABEL_GAP,
+  Y_AXIS_OUTER_PADDING,
+  Y_AXIS_TICK_PADDING,
+} from './constants'
+import { axisTextMetrics, resolveRenderedYAxisSeriesGroups } from './layout'
+import type { DisplayTrack } from './types'
+import type { WaveformYDomain } from './yDomain'
+
+export interface YAxisLayoutMetrics {
+  tickClearance: number
+  fullClearance: number
+  labelCenterX: number
+}
+
+export function resolveViewportYDomains(
+  displayMode: 'independent' | 'separated' | 'compact',
+  chartTracks: DisplayTrack[],
+  sharedYDomains: Record<string, [number, number]>,
+  independentYDomains: Record<number, [number, number]>,
+): Record<string, [number, number]> {
+  if (displayMode !== 'independent') return sharedYDomains
+  return Object.fromEntries(
+    chartTracks.flatMap((track, index) => {
+      const domain = independentYDomains[index]
+      return domain ? [[track.id, domain]] : []
+    }),
+  )
+}
+
+export function resolveYAxisLayoutMetrics(
+  chartTracks: DisplayTrack[],
+  overlayMode: WaveformOverlayMode,
+  yDomain: WaveformYDomain | undefined,
+  yDomains: Record<string, WaveformYDomain> | undefined,
+  viewportYDomains: Record<string, [number, number]>,
+  nice: boolean,
+  tickCount: number,
+  compact: boolean,
+): YAxisLayoutMetrics {
+  const axisText = chartTracks
+    .filter((track) => track.visibleSeries.length > 0)
+    .flatMap((track) =>
+      resolveRenderedYAxisSeriesGroups(track, overlayMode, yDomain, yDomains, viewportYDomains),
+    )
+    .map(
+      (group) =>
+        axisTextMetrics(
+          group.domain,
+          nice,
+          undefined,
+          group.seriesList[0]?.unit,
+          tickCount,
+          compact,
+        ).tickTextWidth,
+    )
+  const tickTextWidth = Math.max(Y_AXIS_CHARACTER_WIDTH, ...axisText)
+  const tickClearance = tickTextWidth + Y_AXIS_TICK_PADDING + Y_AXIS_OUTER_PADDING
+  const labelCenterX = -(
+    Y_AXIS_TICK_PADDING +
+    tickTextWidth +
+    Y_AXIS_LABEL_GAP +
+    Y_AXIS_LABEL_BAND_WIDTH / 2
+  )
+  const fullClearance =
+    tickTextWidth +
+    Y_AXIS_TICK_PADDING +
+    Y_AXIS_LABEL_GAP +
+    Y_AXIS_LABEL_BAND_WIDTH +
+    Y_AXIS_OUTER_PADDING
+  return { tickClearance, fullClearance, labelCenterX }
+}

package/src/components/core/yAxisSlotLayout.test.ts

@@ -2,7 +2,7 @@ import { zoomIdentity } from 'd3'
 import { describe, expect, it } from 'vitest'
 
 import { DEFAULT_WAVEFORM_RENDERING_OPTIONS } from '../../core'
-import { buildTrackLayouts, buildYAxisSlots } from './layout'
+import { buildTrackLayouts, buildYAxisSlots, resolveRenderedYAxisSeriesGroups } from './layout'
 import type { DisplaySeries, DisplayTrack } from './types'
 import { Y_AXIS_RIGHT_LABEL_OFFSET } from './yAxisConstants'
 
@@ -126,4 +126,40 @@ describe('Y-axis slots', () => {
     expect(fourAxisSlots.slots[1]!.axisOffset).toBeLessThan(0)
     expect(fourAxisSlots.slots[3]!.axisOffset).toBeGreaterThan(0)
   })
+
+  it('uses dynamic Y domains when measuring multi-axis slots', () => {
+    const negativeVoltage = series('negative-voltage', 0, 1)
+    negativeVoltage.unit = 'V'
+    const longUnit = series('long-unit', 0, 1)
+    longUnit.unit = 'volt-amperes-per-phase'
+    const sourceTrack = track([negativeVoltage, longUnit])
+    const viewportYDomains = { [sourceTrack.id]: [-0.7434, -0.3434] as [number, number] }
+
+    expect(
+      resolveRenderedYAxisSeriesGroups(
+        sourceTrack,
+        'multi-axis',
+        undefined,
+        undefined,
+        viewportYDomains,
+      ).map((group) => group.domain),
+    ).toEqual([
+      [-0.7434, -0.3434],
+      [-0.7434, -0.3434],
+    ])
+
+    const slots = buildYAxisSlots(
+      [sourceTrack],
+      'multi-axis',
+      undefined,
+      undefined,
+      5,
+      false,
+      false,
+      viewportYDomains,
+    )
+
+    expect(slots.clearance.left).toBe(100)
+    expect(slots.clearance.right).toBeGreaterThan(180)
+  })
 })

package/src/components/interaction/WaveformTooltip.test.ts

@@ -1,10 +1,28 @@
 import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+import { resizeObservers } from '../../test/setup'
 
 import WaveformTooltip from './WaveformTooltip.vue'
 
 describe('WaveformTooltip', () => {
   const point = { x: 1, y: 12 }
+  let measuredWidth = 238
+  let measuredHeight = 40
+
+  beforeEach(() => {
+    measuredWidth = 238
+    measuredHeight = 40
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function (
+      this: HTMLElement,
+    ) {
+      return {
+        width: Math.min(measuredWidth, Number.parseFloat(this.style.maxWidth) || measuredWidth),
+        height: measuredHeight,
+      } as DOMRect
+    })
+  })
+  afterEach(() => vi.restoreAllMocks())
 
   function mountTooltip(positionX: number, containerWidth = 400) {
     return mount(WaveformTooltip, {
@@ -20,33 +38,41 @@ describe('WaveformTooltip', () => {
     })
   }
 
-  it('positions the tooltip to the right when enough space remains', () => {
-    const tooltip = mountTooltip(100).get('.waveform-tooltip')
+  it('positions the tooltip to the right when enough space remains', async () => {
+    const wrapper = mountTooltip(100)
+    await nextTick()
+    const tooltip = wrapper.get('.waveform-tooltip')
 
     expect(tooltip.attributes('style')).toContain('left: 112px')
     expect(tooltip.attributes('style')).not.toContain('right:')
   })
 
-  it('flips the tooltip to the left near the right boundary', () => {
-    const tooltip = mountTooltip(370).get('.waveform-tooltip')
+  it('flips the tooltip to the left near the right boundary', async () => {
+    const wrapper = mountTooltip(370)
+    await nextTick()
+    const tooltip = wrapper.get('.waveform-tooltip')
 
     expect(tooltip.attributes('style')).toContain('right: 42px')
     expect(tooltip.attributes('style')).not.toContain('left:')
   })
 
-  it('keeps the tooltip inside the left boundary when neither side has enough space', () => {
-    const tooltip = mountTooltip(100, 200).get('.waveform-tooltip')
+  it('keeps the tooltip inside the left boundary when neither side has enough space', async () => {
+    const wrapper = mountTooltip(100, 200)
+    await nextTick()
+    const tooltip = wrapper.get('.waveform-tooltip')
 
     expect(tooltip.attributes('style')).toContain('left: 8px')
     expect(tooltip.attributes('style')).toContain('max-width: 184px')
     expect(tooltip.attributes('style')).not.toContain('right:')
   })
 
-  it('keeps short content content-sized while exposing the available width cap', () => {
-    const tooltip = mountTooltip(100).get('.waveform-tooltip')
+  it('keeps short content content-sized while exposing the available width cap', async () => {
+    const wrapper = mountTooltip(100)
+    await nextTick()
+    const tooltip = wrapper.get('.waveform-tooltip')
 
     expect(tooltip.attributes('style')).toContain('left: 112px')
-    expect(tooltip.attributes('style')).toContain('max-width: 280px')
+    expect(tooltip.attributes('style')).toContain('max-width: 384px')
   })
 
   it('keeps long series content in a wrapping content container', () => {
@@ -77,7 +103,63 @@ describe('WaveformTooltip', () => {
     expect(tooltip.get('.waveform-tooltip__series-content').classes()).toContain(
       'waveform-tooltip__series-content',
     )
-    expect(tooltip.attributes('style')).toContain('max-width: 280px')
+    expect(tooltip.attributes('style')).toContain('max-width: 384px')
+  })
+
+  it('flips before long content is squeezed and restores the right side when moving back', async () => {
+    measuredWidth = 420
+    const wrapper = mountTooltip(500, 800)
+    await nextTick()
+    const tooltip = wrapper.get('.waveform-tooltip')
+    expect(tooltip.attributes('style')).toContain('right: 312px')
+    expect(tooltip.attributes('style')).toContain('max-width: 560px')
+    await wrapper.setProps({ position: { x: 100, y: 100 } })
+    expect(tooltip.attributes('style')).toContain('left: 112px')
+    expect(tooltip.attributes('style')).toContain('max-width: 560px')
+  })
+
+  it('remeasures changing series, formatted values, container size and visibility', async () => {
+    const wrapper = mountTooltip(500, 800)
+    await nextTick()
+    expect(wrapper.get('.waveform-tooltip').attributes('style')).toContain('left: 512px')
+    measuredWidth = 450
+    measuredHeight = 90
+    await wrapper.setProps({
+      timeUnit: 'ms',
+      position: { x: 500, y: 290 },
+      seriesPoints: [
+        { trackIndex: 0, name: 'very-long-channel-name', color: '#f00', point },
+        { trackIndex: 1, name: 'second-channel', color: '#0f0', point: { x: 100, y: 123456 } },
+      ],
+    })
+    await nextTick()
+    expect(wrapper.get('.waveform-tooltip').attributes('style')).toContain('right: 312px')
+    expect(wrapper.get('.waveform-tooltip').attributes('style')).toContain('top: 202px')
+    await wrapper.setProps({ containerWidth: 200, position: { x: 100, y: 290 } })
+    await nextTick()
+    expect(wrapper.get('.waveform-tooltip').attributes('style')).toContain('left: 8px')
+    expect(wrapper.get('.waveform-tooltip').attributes('style')).toContain('max-width: 184px')
+    const observer = resizeObservers.at(-1)!
+    await wrapper.setProps({ visible: false })
+    expect(observer.disconnect).toHaveBeenCalled()
+    measuredWidth = 100
+    await wrapper.setProps({ visible: true, containerWidth: 800 })
+    await nextTick()
+    expect(wrapper.get('.waveform-tooltip').attributes('style')).toContain('left: 112px')
+    wrapper.unmount()
+    expect(resizeObservers.at(-1)!.disconnect).toHaveBeenCalled()
+  })
+
+  it('updates placement when rendered dimensions change without a prop update', async () => {
+    const wrapper = mountTooltip(500, 800)
+    await nextTick()
+    measuredWidth = 420
+    measuredHeight = 250
+    resizeObservers.at(-1)!.resize(420, 250)
+    await nextTick()
+    expect(wrapper.get('.waveform-tooltip').attributes('style')).toContain('right: 312px')
+    expect(wrapper.get('.waveform-tooltip').attributes('style')).toContain('top: 42px')
+    wrapper.unmount()
   })
 
   it('omits units and errors from the strict x/y value format', () => {

package/src/components/interaction/WaveformTooltip.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, onUpdated, ref, watch } from 'vue'
 import { formatTooltipNumber, formatTooltipTime } from '../../utils'
 import type { WaveformPoint } from '../data/types'
 
@@ -33,64 +33,60 @@ const props = defineProps<Props>()
 
 const tooltipGap = 12
 const containerPadding = 8
-const tooltipPlacementWidth = 238
 const tooltipMaxWidth = 560
-const tooltipHorizontalPadding = 20
-const tooltipLineHeight = 20
-
-function estimateLineCount(text: string, width: number): number {
-  const contentWidth = Math.max(1, width - tooltipHorizontalPadding - 14)
-  const charactersPerLine = Math.max(1, Math.floor(contentWidth / 7.2))
-  return Math.max(1, Math.ceil([...text].length / charactersPerLine))
-}
-
-function formatSeriesText(seriesPoint: SeriesPoint): string {
-  const valueText = seriesPoint.point
-    ? `(x:${formatTooltipTime(seriesPoint.point.x, props.timeUnit)} y:${formatTooltipNumber(seriesPoint.point.y)})`
-    : '无数据'
-  return `${seriesPoint.shotNo?.trim() || '未配置炮号'}： ${seriesPoint.name}${
-    seriesPoint.unit ? `(${seriesPoint.unit})` : ''
-  }  ${valueText}`
+const tooltipElement = ref<HTMLElement | null>(null)
+const tooltipSize = ref({ width: 0, height: 0 })
+
+function measureTooltip() {
+  const bounds = tooltipElement.value?.getBoundingClientRect()
+  const width = bounds?.width ?? 0
+  const height = bounds?.height ?? 0
+  if (width !== tooltipSize.value.width || height !== tooltipSize.value.height) {
+    tooltipSize.value = { width, height }
+  }
 }
 
-function estimateTooltipHeight(width: number): number {
-  const seriesLines = props.seriesPoints.reduce(
-    (total, seriesPoint) => total + estimateLineCount(formatSeriesText(seriesPoint), width),
-    0,
-  )
-  return 16 + tooltipLineHeight * seriesLines + 5
-}
+// The width cap depends only on the container, never on the cursor's side.
+// Measuring the rendered box therefore cannot cause a shrink/flip feedback loop.
+watch(
+  tooltipElement,
+  (element, _, onCleanup) => {
+    measureTooltip()
+    if (!element) return
+    const observer = new ResizeObserver(measureTooltip)
+    observer.observe(element)
+    onCleanup(() => observer.disconnect())
+  },
+  { flush: 'post' },
+)
+onUpdated(measureTooltip)
 
 const tooltipStyle = computed(() => {
   if (!props.visible || !props.hoveredPoint) return { display: 'none' }
 
   const rightPlacement = props.position.x + tooltipGap
-  const leftPlacement = props.position.x - tooltipGap - tooltipPlacementWidth
-  const rightAvailableWidth = props.containerWidth - containerPadding - rightPlacement
-  const leftAvailableWidth = props.position.x - tooltipGap - containerPadding
+  const leftPlacement = props.position.x - tooltipGap - tooltipSize.value.width
   const availableWidth = Math.max(
     1,
     Math.min(tooltipMaxWidth, props.containerWidth - containerPadding * 2),
   )
   const horizontalStyle =
-    rightPlacement + tooltipPlacementWidth <= props.containerWidth - containerPadding
-      ? {
-          left: `${rightPlacement}px`,
-          maxWidth: `${Math.min(tooltipMaxWidth, rightAvailableWidth)}px`,
-        }
+    rightPlacement + tooltipSize.value.width <= props.containerWidth - containerPadding
+      ? { left: `${rightPlacement}px` }
       : leftPlacement >= containerPadding
-        ? {
-            right: `${props.containerWidth - props.position.x + tooltipGap}px`,
-            maxWidth: `${Math.min(tooltipMaxWidth, leftAvailableWidth)}px`,
-          }
-        : { left: `${containerPadding}px`, maxWidth: `${availableWidth}px` }
+        ? { right: `${props.containerWidth - props.position.x + tooltipGap}px` }
+        : { left: `${containerPadding}px` }
 
-  const maxWidth = Number.parseFloat(horizontalStyle.maxWidth)
   return {
     ...horizontalStyle,
+    maxWidth: `${availableWidth}px`,
+    visibility: tooltipSize.value.width > 0 ? ('visible' as const) : ('hidden' as const),
     top: `${Math.max(
-      8,
-      Math.min(props.position.y - 18, props.containerHeight - estimateTooltipHeight(maxWidth) - 8),
+      containerPadding,
+      Math.min(
+        props.position.y - 18,
+        props.containerHeight - tooltipSize.value.height - containerPadding,
+      ),
     )}px`,
   }
 })
@@ -99,6 +95,7 @@ const tooltipStyle = computed(() => {
 <template>
   <div
     v-if="visible && hoveredPoint"
+    ref="tooltipElement"
     class="waveform-tooltip waveform-chart__tooltip"
     :style="tooltipStyle"
   >
@@ -162,7 +159,7 @@ const tooltipStyle = computed(() => {
 
 .waveform-tooltip__series-content {
   display: flex;
-  flex-wrap: nowrap;
+  flex-wrap: wrap;
   gap: 12px;
   align-items: baseline;
   min-width: 0;
@@ -171,14 +168,13 @@ const tooltipStyle = computed(() => {
 .waveform-tooltip__series-label {
   flex: 1 1 auto;
   min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  overflow-wrap: anywhere;
 }
 
 .waveform-tooltip__value {
-  flex: 0 0 auto;
-  white-space: nowrap;
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow-wrap: anywhere;
 }
 
 .waveform-tooltip__series strong {

package/src/components/rendering/WaveformTrackAxes.vue

@@ -3,7 +3,8 @@ import { axisBottom, axisLeft, axisRight, select } from 'd3'
 import { nextTick, onMounted, ref, watch } from 'vue'
 
 import type { WaveformAxesOptions } from '../../types'
-import { formatScientificAxisLabel, formatXAxisLabel } from '../../utils'
+import { formatXAxisLabel } from '../../utils'
+import { formatYAxisTickLabel } from '../core/layout'
 import type { DisplaySeries, TrackLayout, WaveformYAxisLayout } from '../core/types'
 import { Y_AXIS_LABEL_BAND_WIDTH } from '../core/yAxisConstants'
 
@@ -43,12 +44,15 @@ function renderAxes() {
   props.track.yAxes.forEach((axis, index) => {
     const element = yAxisElements.value[index]
     if (!element) return
-    const [axisMin, axisMax] = axis.scale.domain()
-    const topTickValue = Math.max(...axis.tickValues)
     const unit = axis.seriesList[0]?.unit
     const yAxis = (axis.side === 'left' ? axisLeft(axis.scale) : axisRight(axis.scale))
       .tickFormat((value) =>
-        formatScientificAxisLabel(Number(value), { axisMin, axisMax, topTickValue, unit }),
+        formatYAxisTickLabel(
+          Number(value),
+          axis.scale.domain() as [number, number],
+          axis.tickValues,
+          unit,
+        ),
       )
       .tickSize(-4)
       .tickPadding(7)

package/src/components/waveformChartCases/layoutAndDomains.test.ts

@@ -6,26 +6,6 @@ import { resizeObservers } from '../../test/setup'
 import { gridSeries, mountSizedChart } from '../../test/waveformChart'
 
 describe('WaveformChart', () => {
-  it('applies the configured Y-axis split number', async () => {
-    const wrapper = await mountSizedChart(
-      {
-        kind: 'points',
-        points: [
-          { x: 0, y: 3 },
-          { x: 1, y: 97 },
-        ],
-      },
-      { axes: { y: { splitNumber: 5 } } },
-    )
-
-    expect(
-      wrapper
-        .get('.waveform-chart__axis--y')
-        .findAll('.tick text')
-        .map((tick) => tick.text()),
-    ).toEqual(['0', '25', '50', '75', '100'])
-  })
-
   it('expands the Y-axis label gutter for signed values and long exponents', async () => {
     const wrapper = await mountSizedChart(
       {
@@ -52,10 +32,13 @@ describe('WaveformChart', () => {
     const labelBackgroundX = Number(
       tracks[0].get('.waveform-chart__y-axis-label-bg').attributes('x'),
     )
+    const longestTickLabel = Math.max(
+      ...tracks[0].findAll('.waveform-chart__axis--y .tick text').map((tick) => tick.text().length),
+    )
 
-    expect(labelX).toBe(-62)
+    expect(Math.abs(labelX)).toBeGreaterThanOrEqual(7 + longestTickLabel * 7 + 6)
     expect(labelBackgroundX).toBe(labelX - 6)
-    expect(Number(wrapper.attributes('data-chart-left-margin'))).toBe(80)
+    expect(Number(wrapper.attributes('data-chart-left-margin'))).toBeGreaterThanOrEqual(80)
     expect(secondLeft - firstWidth).toBeGreaterThanOrEqual(72)
   })
 
@@ -118,12 +101,28 @@ describe('WaveformChart', () => {
       { grid: { rowCount: 1, columnCount: 1 } },
     )
     const initialMargin = wrapper.attributes('data-chart-left-margin')
-    expect(wrapper.get('.waveform-chart__track').attributes('data-y-axis-label-x')).toBe('-34')
+    const initialTrack = wrapper.get('.waveform-chart__track')
+    const initialLongestTickLabel = Math.max(
+      ...initialTrack
+        .findAll('.waveform-chart__axis--y .tick text')
+        .map((tick) => tick.text().length),
+    )
+    expect(initialTrack.attributes('data-y-axis-label-x')).toBe(
+      String(-(7 + initialLongestTickLabel * 7 + 6)),
+    )
 
     await wrapper.get('.ant-pagination-next button').trigger('click')
 
     expect(wrapper.attributes('data-chart-left-margin')).toBe(initialMargin)
-    expect(wrapper.get('.waveform-chart__track').attributes('data-y-axis-label-x')).toBe('-62')
+    const pagedTrack = wrapper.get('.waveform-chart__track')
+    const pagedLongestTickLabel = Math.max(
+      ...pagedTrack
+        .findAll('.waveform-chart__axis--y .tick text')
+        .map((tick) => tick.text().length),
+    )
+    expect(pagedTrack.attributes('data-y-axis-label-x')).toBe(
+      String(-(7 + pagedLongestTickLabel * 7 + 6)),
+    )
   })
 
   it('hides only secondary-column Y-axis labels when the grid is too narrow', async () => {

package/src/components/waveformChartCases/yAxisLayout.test.ts

@@ -0,0 +1,103 @@
+import { flushPromises } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+import { resizeObservers } from '../../test/setup'
+
+import { mountSizedChart } from '../../test/waveformChart'
+
+describe('WaveformChart Y-axis layout', () => {
+  it('applies the configured Y-axis split number', async () => {
+    const wrapper = await mountSizedChart(
+      {
+        kind: 'points',
+        points: [
+          { x: 0, y: 3 },
+          { x: 1, y: 97 },
+        ],
+      },
+      { axes: { y: { splitNumber: 5 } } },
+    )
+
+    expect(
+      wrapper
+        .get('.waveform-chart__axis--y')
+        .findAll('.tick text')
+        .map((tick) => tick.text()),
+    ).toEqual(['0', '25', '50', '75', '100'])
+  })
+
+  it('reserves the rendered endpoint label width across tracks, pages, and resizes', async () => {
+    const wrapper = await mountSizedChart(
+      {
+        kind: 'series',
+        series: ['WE_2M', 'IP_VV_2M', 'SX2_7_07', 'BT1_2M'].map((name, index) => ({
+          id: name,
+          name,
+          unit: 'V',
+          data: {
+            kind: 'points' as const,
+            points: [
+              { x: 0, y: -0.7434 - index },
+              { x: 1, y: -0.3434 - index },
+            ],
+          },
+        })),
+      },
+      {
+        axes: { y: { lineVisible: false, nice: false } },
+        grid: { rowCount: 1, columnCount: 1 },
+      },
+    )
+    const firstTrack = wrapper.get('.waveform-chart__track')
+
+    expect(wrapper.attributes('data-chart-left-margin')).toBe('100')
+    expect(firstTrack.attributes('data-y-axis-label-x')).toBe('-90')
+    expect(firstTrack.findAll('.waveform-chart__axis--y .tick text').at(-1)?.text()).toBe(
+      '(V) -0.3434',
+    )
+
+    resizeObservers.at(-1)?.resize(520, 280)
+    await flushPromises()
+    expect(wrapper.attributes('data-chart-left-margin')).toBe('100')
+    expect(wrapper.get('.waveform-chart__track').attributes('data-y-axis-label-x')).toBe('-90')
+
+    await wrapper.get('.ant-pagination-next button').trigger('click')
+    expect(wrapper.attributes('data-chart-left-margin')).toBe('100')
+    expect(wrapper.get('.waveform-chart__track').attributes('data-y-axis-label-x')).toBe('-90')
+    expect(wrapper.get('.waveform-chart__axis--y').findAll('.tick text').at(-1)?.text()).toBe(
+      '(V) -1.3434',
+    )
+  })
+
+  it('measures the compact-row unit label after omitting the top endpoint', async () => {
+    const wrapper = await mountSizedChart(
+      {
+        kind: 'series',
+        series: ['first', 'second'].map((id) => ({
+          id,
+          name: id,
+          unit: 'V',
+          data: {
+            kind: 'points' as const,
+            points: [
+              { x: 0, y: 0.12345 },
+              { x: 1, y: 100 },
+            ],
+          },
+        })),
+      },
+      {
+        displayMode: 'compact',
+        axes: { y: { nice: false } },
+        grid: { rowCount: 2, columnCount: 1 },
+      },
+    )
+    const tracks = wrapper.findAll('.waveform-chart__track')
+
+    expect(wrapper.attributes('data-chart-left-margin')).toBe('93')
+    expect(tracks[1]?.attributes('data-y-axis-label-x')).toBe('-83')
+    expect(tracks[1]?.findAll('.waveform-chart__axis--y .tick text').at(-1)?.text()).toBe(
+      '(V) 75.031',
+    )
+  })
+})