waveform-analysis 0.1.65 → 0.1.67

package/src/components/core/trackLayoutBuilder.ts

@@ -27,7 +27,6 @@ import {
 } from './grid'
 import {
   axisTextMetrics,
-  formatYAxisTickLabel,
   resolveRenderedYAxisSeriesGroups,
   resolveYAxisTicks,
   resolveYAxisTickCount,
@@ -35,9 +34,15 @@ import {
 } from './layout'
 import type { DisplayTrack, TrackLayout, WaveformYAxisLayout } from './types'
 import { applyXDomainStrategy } from './xDomain'
+import { alignLeftYAxisTitles } from './yAxisTitleLayout'
+import {
+  alignIntegerZoomDomain,
+  normalizeIntegerZoomDomain,
+  integerZoomTicks,
+  formatIntegerZoomLabel,
+} from '../interaction/integerZoom'
 import {
   Y_AXIS_LABEL_BAND_WIDTH,
-  Y_AXIS_CHARACTER_WIDTH,
   Y_AXIS_LABEL_GAP,
   Y_AXIS_OUTER_PADDING,
   Y_AXIS_RIGHT_LABEL_OFFSET,
@@ -58,6 +63,7 @@ export interface BuildTrackLayoutsOptions {
   initialXDomain?: [number, number]
   initialXDomains?: Record<string, [number, number]>
   xDomainStrategy?: WaveformXDomainStrategy
+  integerZoom?: boolean
   fixedYDomain?: [number, number]
   fixedYDomains?: Record<string, [number, number]>
   yDomains?: Record<string, [number, number]>
@@ -65,6 +71,7 @@ export interface BuildTrackLayoutsOptions {
   xAxisLabelFormatter?: WaveformXAxisLabelFormatter
   yAxisSplitNumber?: number
   yAxisNice?: boolean
+  yAxisUpperPaddingRatio?: number
   rendering: ResolvedWaveformRenderingOptions
   /** Latest sampling result for SVG lines only; source series remain complete for interaction. */
   linePointOverrides?: Readonly<Record<string, WaveformPoint[]>>
@@ -73,6 +80,9 @@ export interface BuildTrackLayoutsOptions {
   yLabel?: string
   yAxisSlots?: readonly YAxisSlot[]
   showCompactEmptyTracks: boolean
+  useNonEmptyBottomTracks?: boolean
+  compactYAxisLayout?: boolean
+  showAxisUnits?: boolean
 }
 
 function resolveIndependentXDomain(
@@ -85,13 +95,21 @@ function resolveIndependentXDomain(
     options.initialXDomains?.[track.id] ??
     options.initialXDomains?.[seriesId] ??
     options.initialXDomain
-  return explicitDomain
-    ? applyXDomainStrategy(explicitDomain, strategy, true)
-    : applyXDomainStrategy(track.xDomain, strategy)
+  return alignIntegerZoomDomain(
+    explicitDomain
+      ? applyXDomainStrategy(explicitDomain, strategy, true)
+      : applyXDomainStrategy(track.xDomain, strategy),
+    options,
+  )
 }
 
 export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayout[] {
-  const visibleCells = options.cells.map((cell) => ({ ...cell, hasSeries: Boolean(cell.series) }))
+  const visibleCells = options.cells.map((cell) => ({
+    ...cell,
+    hasSeries: options.useNonEmptyBottomTracks
+      ? Boolean(cell.series?.series.length)
+      : Boolean(cell.series),
+  }))
   const bottomCells = getBottomRowCellIndexes(visibleCells, options.grid.columnCount)
 
   const layouts: TrackLayout[] = visibleCells.flatMap((cell, index) => {
@@ -119,12 +137,14 @@ export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayou
         ? (options.independentTransforms[index] ?? zoomIdentity)
         : zoomIdentity
     const xScale = transform.rescaleX(baseXScale)
+    xScale.domain(normalizeIntegerZoomDomain(xScale.domain() as [number, number], options))
     const yAxisGroups = resolveRenderedYAxisSeriesGroups(
       displayTrack,
       options.overlayMode,
       options.fixedYDomain,
       options.fixedYDomains,
       options.yDomains,
+      options.yAxisUpperPaddingRatio,
     )
     const sideIndexes = { left: 0, right: 0 }
     const sideOffsets = { left: 0, right: 0 }
@@ -141,7 +161,7 @@ export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayou
         scale.domain() as [number, number],
         false,
         tickValues,
-        group.seriesList[0]?.unit,
+        options.showAxisUnits !== false ? group.seriesList[0]?.unit : undefined,
         tickCount,
       )
       const clearance =
@@ -164,7 +184,7 @@ export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayou
         (slot
           ? (group.side === 'left' ? 0 : cell.width) + slot.labelOffset
           : x + (group.side === 'left' ? -labelDistance : labelDistance)) -
-        (group.side === 'right' ? Y_AXIS_RIGHT_LABEL_OFFSET : 0)
+        (group.side === 'right' && !options.compactYAxisLayout ? Y_AXIS_RIGHT_LABEL_OFFSET : 0)
       if (!slot) sideOffsets[group.side] += clearance
       return {
         index: group.index,
@@ -181,25 +201,19 @@ export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayou
     const fallbackYScale = scaleLinear(displayTrack.yDomain, [cell.plotHeight, 0])
     if (options.yAxisNice !== false) fallbackYScale.nice()
     const yScale = yAxes[0]?.scale ?? fallbackYScale
-    const xMajorTicks = xScale.ticks(Math.max(2, Math.floor(cell.width / 100)))
+    const xMajorTicks = integerZoomTicks(
+      xScale.domain() as [number, number],
+      Math.max(2, Math.floor(cell.width / 100)),
+      options,
+    )
+    const xAxisLabelFormatter =
+      options.xAxisLabelFormatter ?? (options.integerZoom ? formatIntegerZoomLabel : undefined)
     const yMajorTicks = yAxes[0]?.majorTicks ?? []
     const yAxisTickValues = yAxes[0]?.tickValues ?? []
     const domain = xScale.domain() as [number, number]
     const endpointLabels = {
-      start: formatXAxisLabel(
-        domain[0],
-        domain,
-        options.timeUnit,
-        'start',
-        options.xAxisLabelFormatter,
-      ),
-      end: formatXAxisLabel(
-        domain[1],
-        domain,
-        options.timeUnit,
-        'end',
-        options.xAxisLabelFormatter,
-      ),
+      start: formatXAxisLabel(domain[0], domain, options.timeUnit, 'start', xAxisLabelFormatter),
+      end: formatXAxisLabel(domain[1], domain, options.timeUnit, 'end', xAxisLabelFormatter),
     }
     const leftClearance = endpointLabels.start.length * 7 + 10
     const rightClearance = endpointLabels.end.length * 7 + 10
@@ -262,6 +276,7 @@ export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayou
       yScale,
       yAxes,
       xMajorTicks,
+      xAxisLabelFormatter,
       xMinorTicks: buildMinorTicks(xMajorTicks, 3, domain),
       yMajorTicks,
       yMinorTicks: yAxes[0]?.minorTicks ?? [],
@@ -283,41 +298,6 @@ export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayou
     }
   })
 
-  // Align names using the widest nearby tick text in each column and left-axis slot.
-  const titleDistances = new Map<string, number>()
-  for (const track of layouts) {
-    let leftIndex = 0
-    for (const axis of track.yAxes) {
-      if (axis.side !== 'left') continue
-      const key = `${track.column}:${leftIndex++}`
-      const series = axis.seriesList[0]
-      const title = series?.name.trim() || options.yLabel || ''
-      const halfTitleHeight = title.length * 8 + 6
-      const nearbyTicks = axis.tickValues.filter(
-        (value) => Math.abs(axis.scale(value) - track.height / 2) <= halfTitleHeight,
-      )
-      const tickWidth = Math.max(
-        Y_AXIS_CHARACTER_WIDTH,
-        ...nearbyTicks.map(
-          (value) =>
-            formatYAxisTickLabel(
-              value,
-              axis.scale.domain() as [number, number],
-              axis.tickValues,
-              series?.unit,
-            ).length * Y_AXIS_CHARACTER_WIDTH,
-        ),
-      )
-      const distance = tickWidth + Y_AXIS_TICK_PADDING + Y_AXIS_LABEL_BAND_WIDTH / 2
-      titleDistances.set(key, Math.max(titleDistances.get(key) ?? 0, distance))
-    }
-  }
-  for (const track of layouts) {
-    let leftIndex = 0
-    for (const axis of track.yAxes) {
-      if (axis.side !== 'left') continue
-      axis.labelX = axis.x - titleDistances.get(`${track.column}:${leftIndex++}`)!
-    }
-  }
+  if (!options.compactYAxisLayout) alignLeftYAxisTitles(layouts, options.yLabel)
   return layouts
 }

package/src/components/core/types.ts

@@ -5,6 +5,7 @@ import type {
   WaveformLineStyle,
   WaveformPoint,
   WaveformPointType,
+  WaveformXAxisLabelFormatter,
 } from '../../types'
 import type { WaveformPointSource } from '../../core/waveformPointSource'
 import type { NormalizedWaveformGridLineOptions } from './grid'
@@ -114,6 +115,7 @@ export interface TrackLayout {
   yMinorTicks: number[]
   yAxisTickValues: number[]
   xAxisTickValues: number[]
+  xAxisLabelFormatter?: WaveformXAxisLabelFormatter
   endpointLabels: { start: string; end: string }
   path: string | null
   seriesPaths: TrackSeriesPath[]

package/src/components/core/useWaveformChartController.ts

@@ -1,5 +1,6 @@
 import { zoomIdentity, type ZoomTransform } from 'd3'
 import {
+  computed,
   reactive,
   markRaw,
   ref,
@@ -21,6 +22,7 @@ import { useWaveformZoom } from '../interaction/useWaveformZoom'
 import { useAnimationFrameThrottle } from '../utils/useAnimationFrameThrottle'
 import { margin } from './constants'
 import { getPageSize } from './grid'
+import { resolveCompactPaginationBand } from './pagination'
 import type { WaveformHoverState } from './types'
 import { useWaveformChartLifecycle } from './useWaveformChartLifecycle'
 import { usePreparedWaveformSeries } from './useWaveformData'
@@ -165,9 +167,22 @@ export function useWaveformChartController(
     linePointOverrides,
   })
 
+  const paginationVisible = computed(
+    () => gridOptions.value.showPagination && pageCount.value > 1 && !isCleanView.value,
+  )
   watchEffect(() => {
     paginationBandHeight.value =
-      gridOptions.value.showPagination && pageCount.value > 1 && chartWidth.value <= 520 ? 40 : 0
+      props.layoutPreset === 'edge-compact'
+        ? resolveCompactPaginationBand(
+            paginationVisible.value,
+            chartWidth.value,
+            pageCount.value,
+            resolvedChartLeftMargin.value + innerWidth.value / 2,
+            layout.resolvedXLabel.value,
+          )
+        : gridOptions.value.showPagination && pageCount.value > 1 && chartWidth.value <= 520
+          ? 40
+          : 0
   })
 
   const zoom = useWaveformZoom({
@@ -306,6 +321,7 @@ export function useWaveformChartController(
   return reactive({
     ...toRefs(props),
     ...presentation,
+    paginationVisible,
     ...layout,
     ...annotations,
     ...viewport,

package/src/components/core/useWaveformChartLifecycle.ts

@@ -13,7 +13,9 @@ import type { AnnotationSeriesCandidate, useWaveformAnnotationInteraction } from
 import type { NormalizedWaveformGridOptions } from './grid'
 import type { DisplaySeries, DisplayTrack, TrackLayout } from './types'
 import type { ResolvedWaveformChartProps, WaveformChartEmit } from './waveformChartTypes'
-import { constrainZoomDomain, transformForDomain } from '../interaction/zoomConstraints'
+import { transformForDomain } from '../interaction/zoomConstraints'
+import { remotePanBoundary, restoreViewportDomain } from '../interaction/remoteViewport'
+import { isEditableTarget } from '../interaction/interactionTarget'
 import { seriesIdentity } from '../interaction/zoomEventPayload'
 
 interface LifecycleContext {
@@ -61,17 +63,6 @@ interface LifecycleContext {
   clearZoomBindings: () => void
 }
 
-function isEditableTarget(target: EventTarget | null): boolean {
-  return (
-    target instanceof Element &&
-    Boolean(
-      target.closest(
-        'button, input, select, textarea, [contenteditable]:not([contenteditable="false"])',
-      ),
-    )
-  )
-}
-
 export function useWaveformChartLifecycle(context: LifecycleContext) {
   const {
     props,
@@ -161,7 +152,8 @@ export function useWaveformChartLifecycle(context: LifecycleContext) {
         trackLayouts.value.flatMap((track) => {
           const current = track.xScale.domain() as [number, number]
           const boundary = resolveInitialTrackDomain(track)
-          return current[1] - current[0] < boundary[1] - boundary[0] - 1e-12
+          return remotePanBoundary(props) ||
+            current[1] - current[0] < boundary[1] - boundary[0] - 1e-12
             ? [[seriesIdentity(track.seriesList.map((series) => series.id)), current]]
             : []
         }),
@@ -172,7 +164,9 @@ export function useWaveformChartLifecycle(context: LifecycleContext) {
     const current = sharedZoomDomain.value
     const boundary = initialXDomain.value
     pendingSharedXDomain =
-      current[1] - current[0] < boundary[1] - boundary[0] - 1e-12 ? [...current] : undefined
+      remotePanBoundary(props) || current[1] - current[0] < boundary[1] - boundary[0] - 1e-12
+        ? [...current]
+        : undefined
   }
 
   function handleDataReferenceChange() {
@@ -193,7 +187,7 @@ export function useWaveformChartLifecycle(context: LifecycleContext) {
           )
           if (!previousDomain) return
           const boundary = resolveInitialTrackDomain(track)
-          const domain = constrainZoomDomain(previousDomain, boundary, [track.seriesList], props)
+          const domain = restoreViewportDomain(previousDomain, boundary, [track.seriesList], props)
           nextTransforms[track.index] = transformForDomain(domain, boundary, track.width)
         })
         independentTransforms.value = nextTransforms
@@ -203,7 +197,7 @@ export function useWaveformChartLifecycle(context: LifecycleContext) {
         const groups = trackLayouts.value
           .filter((track) => track.hasVisibleSeries)
           .map((track) => track.seriesList)
-        const domain = constrainZoomDomain(pendingSharedXDomain, boundary, groups, props)
+        const domain = restoreViewportDomain(pendingSharedXDomain, boundary, groups, props)
         sharedTransform.value = transformForDomain(domain, boundary, innerWidth.value)
         pendingSharedXDomain = undefined
       }
@@ -239,7 +233,7 @@ export function useWaveformChartLifecycle(context: LifecycleContext) {
   )
 
   watch(
-    () => props.displayMode,
+    () => [props.displayMode, props.integerZoom, props.integerZoom ? props.timeUnit : undefined],
     () => {
       const previousPage = currentPage.value
       currentPage.value = 1

package/src/components/core/useWaveformLayout.ts

@@ -7,21 +7,17 @@ import {
   type AnnotationSeriesInfo,
   type AnnotationTrackLayout,
 } from '../annotation'
-import { channelColors, margin, MINIMUM_PLOT_WIDTH } from './constants'
-import {
-  getGridGap,
-  getPageCount,
-  normalizeGridOptions,
-  paginateSeries,
-  resolveGridCellGeometry,
-} from './grid'
-import { buildTrackLayouts, buildYAxisSlots, resolveYAxisTickCount } from './layout'
+import { channelColors } from './constants'
+import { getPageCount, normalizeGridOptions, paginateSeries, resolveGridCellGeometry } from './grid'
+import { buildTrackLayouts, resolveYAxisTickCount } from './layout'
 import type { DisplaySeries, DisplayTrack, TrackLayout } from './types'
 import { createFrameNumberResolver, resolvePageableTracks } from './trackPagination'
 import type { PreparedWaveformSeries } from './useWaveformData'
 import type { ResolvedWaveformChartProps } from './waveformChartTypes'
 import { applyXDomainStrategy } from './xDomain'
-import { resolveYAxisLayoutMetrics, resolveViewportYDomains } from './yAxisLayoutMetrics'
+import { alignIntegerZoomDomain, normalizeIntegerZoomDomain } from '../interaction/integerZoom'
+import { resolveViewportYDomains } from './yAxisLayoutMetrics'
+import { useWaveformYAxisLayout } from './useWaveformYAxisLayout'
 import type { useWaveformAnnotationInteraction } from '../annotation'
 interface LayoutContext {
   props: ResolvedWaveformChartProps
@@ -94,6 +90,11 @@ export function useWaveformLayout(context: LayoutContext) {
       }
     })
   })
+  const showLegendUnits = computed(
+    () =>
+      props.unitDisplayMode === 'legend-single-series' &&
+      !chartTracks.value.some((track) => track.series.length > 1),
+  )
   const renderingOptions = computed(() => resolveWaveformRenderingOptions(props.rendering))
   const pageableTracks = computed(() =>
     resolvePageableTracks(chartTracks.value, gridOptions.value.hideEmptyTracks),
@@ -119,86 +120,21 @@ export function useWaveformLayout(context: LayoutContext) {
       independentYDomains.value,
     ),
   )
-  const yAxisMetrics = computed(() =>
-    resolveYAxisLayoutMetrics(
-      chartTracks.value,
-      props.overlayMode,
-      props.yDomain,
-      props.yDomains,
-      viewportYDomains.value,
-      props.axes?.y?.nice !== false,
-      yAxisTickCount.value,
-      props.displayMode === 'compact',
-    ),
-  )
-  const hasYAxisLabels = computed(() =>
-    chartTracks.value.some(
-      (track) =>
-        track.visibleSeries.length === 1 &&
-        Boolean(track.visibleSeries[0]?.name.trim() || props.yLabel),
-    ),
-  )
-  const hasVisibleWaveformData = computed(() =>
-    chartTracks.value.some((track) => track.visibleSeries.length > 0),
-  )
-  const chartLeftMargin = computed(() =>
-    Math.max(
-      margin.left,
-      hasYAxisLabels.value
-        ? yAxisMetrics.value.fullClearance
-        : hasVisibleWaveformData.value
-          ? yAxisMetrics.value.tickClearance
-          : 0,
-    ),
-  )
-  const yAxisSlots = computed(() =>
-    buildYAxisSlots(
-      layoutTracks.value.filter((track) => track.visibleSeries.length > 0),
-      props.overlayMode,
-      props.yDomain,
-      props.yDomains,
-      yAxisTickCount.value,
-      props.axes?.y?.nice !== false,
-      props.displayMode === 'compact',
-      viewportYDomains.value,
-    ),
-  )
-  const resolvedChartLeftMargin = computed(() =>
-    props.overlayMode === 'multi-axis'
-      ? Math.max(chartLeftMargin.value, yAxisSlots.value.clearance.left)
-      : chartLeftMargin.value,
-  )
-  const chartRightMargin = computed(() =>
-    props.overlayMode === 'multi-axis'
-      ? Math.max(margin.right, yAxisSlots.value.clearance.right)
-      : margin.right,
-  )
-  const innerWidth = computed(() =>
-    Math.max(0, chartWidth.value - resolvedChartLeftMargin.value - chartRightMargin.value),
-  )
-  const yAxisLayout = computed(() => {
-    const baseGap = getGridGap(props.displayMode)
-    const columnCount = gridOptions.value.columnCount
-    const hasMultipleColumns = columnCount > 1
-    const fullGap = Math.max(baseGap, yAxisMetrics.value.fullClearance)
-    const tickGap = Math.max(baseGap, yAxisMetrics.value.tickClearance)
-    const plotWidth = (innerWidth.value - fullGap * Math.max(0, columnCount - 1)) / columnCount
-    const canReserveLabelClearance = plotWidth >= MINIMUM_PLOT_WIDTH
-    return {
-      horizontalGap:
-        props.overlayMode === 'multi-axis' && hasMultipleColumns && hasVisibleWaveformData.value
-          ? Math.max(baseGap, yAxisSlots.value.clearance.left + yAxisSlots.value.clearance.right)
-          : hasMultipleColumns && hasVisibleWaveformData.value
-            ? hasYAxisLabels.value && canReserveLabelClearance
-              ? fullGap
-              : tickGap
-            : baseGap,
-      hideSecondaryLabels:
-        props.overlayMode !== 'multi-axis' &&
-        hasMultipleColumns &&
-        hasYAxisLabels.value &&
-        !canReserveLabelClearance,
-    }
+  const {
+    yAxisMetrics,
+    yAxisSlots,
+    resolvedChartLeftMargin,
+    innerWidth,
+    yAxisLayout,
+    hasVisibleWaveformData,
+  } = useWaveformYAxisLayout({
+    props,
+    chartTracks,
+    layoutTracks,
+    chartWidth,
+    gridOptions,
+    viewportYDomains,
+    yAxisTickCount,
   })
   const hasWaveformData = computed(() => chartSeries.value.length > 0)
   const hasChartArea = computed(() => innerWidth.value > 0 && innerHeight.value > 0)
@@ -220,13 +156,19 @@ export function useWaveformLayout(context: LayoutContext) {
       Number.isFinite(domain[1]) &&
       domain[0] !== domain[1]
     ) {
-      return applyXDomainStrategy(
-        domain[0] < domain[1] ? domain : [domain[1], domain[0]],
-        props.xDomainStrategy,
-        true,
+      return alignIntegerZoomDomain(
+        applyXDomainStrategy(
+          domain[0] < domain[1] ? domain : [domain[1], domain[0]],
+          props.xDomainStrategy,
+          true,
+        ),
+        props,
       )
     }
-    return applyXDomainStrategy(sharedXDomain.value, props.xDomainStrategy)
+    return alignIntegerZoomDomain(
+      applyXDomainStrategy(sharedXDomain.value, props.xDomainStrategy),
+      props,
+    )
   })
   const resolveInitialTrackDomain = (track: TrackLayout): [number, number] => {
     const configuredDomain =
@@ -239,24 +181,32 @@ export function useWaveformLayout(context: LayoutContext) {
       Number.isFinite(configuredDomain[1]) &&
       configuredDomain[0] !== configuredDomain[1]
     ) {
-      return applyXDomainStrategy(
-        configuredDomain[0] < configuredDomain[1]
-          ? configuredDomain
-          : [configuredDomain[1], configuredDomain[0]],
-        props.xDomainStrategy,
-        true,
+      return alignIntegerZoomDomain(
+        applyXDomainStrategy(
+          configuredDomain[0] < configuredDomain[1]
+            ? configuredDomain
+            : [configuredDomain[1], configuredDomain[0]],
+          props.xDomainStrategy,
+          true,
+        ),
+        props,
       )
     }
-    return applyXDomainStrategy(
-      paddedDomain(track.seriesList.flatMap((series) => series.xDomain)),
-      props.xDomainStrategy,
+    return alignIntegerZoomDomain(
+      applyXDomainStrategy(
+        paddedDomain(track.seriesList.flatMap((series) => series.xDomain)),
+        props.xDomainStrategy,
+      ),
+      props,
     )
   }
-  const sharedZoomDomain = computed(
-    () =>
+  const sharedZoomDomain = computed(() =>
+    normalizeIntegerZoomDomain(
       sharedTransform.value
         .rescaleX(scaleLinear(initialXDomain.value, [0, innerWidth.value]))
         .domain() as [number, number],
+      props,
+    ),
   )
   const gridCells = computed(() => {
     const cells = resolveGridCellGeometry(
@@ -264,8 +214,12 @@ export function useWaveformLayout(context: LayoutContext) {
       innerHeight.value,
       gridOptions.value,
       props.displayMode,
-      layoutTracks.value.map(Boolean),
+      layoutTracks.value.map((track) =>
+        props.layoutPreset === 'edge-compact' ? track.series.length > 0 : Boolean(track),
+      ),
       yAxisLayout.value.horizontalGap,
+      true,
+      props.layoutPreset === 'edge-compact' && !isCleanView.value,
     )
     return cells.map((cell, index) => ({ ...cell, series: layoutTracks.value[index] }))
   })
@@ -273,6 +227,9 @@ export function useWaveformLayout(context: LayoutContext) {
     buildTrackLayouts({
       cells: gridCells.value,
       grid: gridOptions.value,
+      useNonEmptyBottomTracks: props.layoutPreset === 'edge-compact',
+      compactYAxisLayout: props.layoutPreset === 'edge-compact',
+      showAxisUnits: props.layoutPreset !== 'edge-compact' || props.unitDisplayMode === 'axis',
       displayMode: props.displayMode,
       overlayMode: props.overlayMode,
       independentTransforms: independentTransforms.value,
@@ -280,6 +237,7 @@ export function useWaveformLayout(context: LayoutContext) {
       initialXDomain: props.initialXDomain ? initialXDomain.value : undefined,
       initialXDomains: props.initialXDomains,
       xDomainStrategy: props.xDomainStrategy,
+      integerZoom: props.integerZoom,
       fixedYDomain: props.yDomain,
       fixedYDomains: props.yDomains,
       yDomains: viewportYDomains.value,
@@ -287,6 +245,7 @@ export function useWaveformLayout(context: LayoutContext) {
       xAxisLabelFormatter: props.axes?.x?.labelFormatter,
       yAxisSplitNumber: props.axes?.y?.splitNumber,
       yAxisNice: props.axes?.y?.nice,
+      yAxisUpperPaddingRatio: props.axes?.y?.upperPaddingRatio,
       rendering: renderingOptions.value,
       linePointOverrides: linePointOverrides?.value,
       hideSecondaryLabels: isCleanView.value || yAxisLayout.value.hideSecondaryLabels,
@@ -342,6 +301,7 @@ export function useWaveformLayout(context: LayoutContext) {
   return {
     chartSeries,
     chartTracks,
+    showLegendUnits,
     pageableTracks,
     renderingOptions,
     gridOptions,

package/src/components/core/useWaveformPresentation.ts

@@ -53,6 +53,8 @@ export function useWaveformPresentation(context: PresentationContext) {
   const isPresentationMode = computed(() => props.presentationMode === true)
   const resolvedZeroLine = computed(() => {
     const width = props.zeroLine.width
+    const opacity = props.zeroLine.opacity
+    const threshold = props.zeroLine.boundaryThreshold
     return {
       visible: props.zeroLine.visible !== false,
       color: props.zeroLine.color || ZERO_LINE_DEFAULTS.COLOR,
@@ -61,6 +63,14 @@ export function useWaveformPresentation(context: PresentationContext) {
           ? width
           : ZERO_LINE_DEFAULTS.WIDTH,
       dash: props.zeroLine.dash ?? ZERO_LINE_DEFAULTS.DASH,
+      opacity:
+        typeof opacity === 'number' && Number.isFinite(opacity) && opacity >= 0 && opacity <= 1
+          ? opacity
+          : ZERO_LINE_DEFAULTS.OPACITY,
+      boundaryThreshold:
+        typeof threshold === 'number' && Number.isFinite(threshold) && threshold >= 0
+          ? threshold
+          : ZERO_LINE_DEFAULTS.BOUNDARY_THRESHOLD,
     }
   })
   const legendBackgroundColor = computed(
@@ -83,6 +93,7 @@ export function useWaveformPresentation(context: PresentationContext) {
     return position === 'top' || position === 'bottom' ? 'horizontal' : 'vertical'
   }
 
+  const isEdgeCompact = computed(() => props.layoutPreset === 'edge-compact')
   const resolvedTitleText = computed(() => props.title?.text.trim() ?? '')
   const titleAreaReserved = computed(
     () =>
@@ -136,10 +147,17 @@ export function useWaveformPresentation(context: PresentationContext) {
   }))
   const titleLayout = computed(() =>
     calculateRotatedTitleLayout({
-      naturalWidth: measuredTitleWidth.value || estimatedTitleWidth.value,
+      naturalWidth:
+        isEdgeCompact.value && !titleIsRotated.value && measuredTitleHeight.value > 0
+          ? Math.min(
+              measuredTitleWidth.value || titleAvailableWidth.value,
+              titleAvailableWidth.value,
+            )
+          : measuredTitleWidth.value || estimatedTitleWidth.value,
       naturalHeight: measuredTitleHeight.value || titleFontSize.value * TITLE_LINE_HEIGHT,
       availableWidth: titleAvailableWidth.value,
       rotation: titleRotation.value,
+      edgeCompact: isEdgeCompact.value,
     }),
   )
   const titleAreaHeight = computed(() =>
@@ -149,13 +167,18 @@ export function useWaveformPresentation(context: PresentationContext) {
     typeof value === 'number' && Number.isFinite(value) && value >= 0 ? value : fallback
   const resolvedPlotMargin = computed(() => ({
     top: resolvePlotMargin(props.plotMargin.top, margin.top),
-    bottom: resolvePlotMargin(props.plotMargin.bottom, margin.bottom),
+    bottom: Math.max(
+      isEdgeCompact.value ? 44 : 0,
+      resolvePlotMargin(props.plotMargin.bottom, margin.bottom),
+    ),
   }))
   const chartTopMargin = computed(() => resolvedPlotMargin.value.top)
   const drawingHeight = computed(() =>
     Math.max(0, chartHeight.value - titleAreaHeight.value - paginationBandHeight.value),
   )
-  const xAxisTitleY = computed(() => Math.max(0, drawingHeight.value - X_AXIS_TITLE_BOTTOM_OFFSET))
+  const xAxisTitleY = computed(() =>
+    Math.max(0, drawingHeight.value - X_AXIS_TITLE_BOTTOM_OFFSET + (isEdgeCompact.value ? 3 : 0)),
+  )
   const innerHeight = computed(() =>
     Math.max(
       0,
@@ -192,6 +215,7 @@ export function useWaveformPresentation(context: PresentationContext) {
     chartHeight,
     containerStyle,
     isCleanView,
+    isEdgeCompact,
     isPresentationMode,
     resolvedZeroLine,
     legendBackgroundColor,