waveform-analysis 0.1.66 → 0.1.68

package/dist/types/types/chart.d.ts

@@ -11,6 +11,10 @@ export interface WaveformPoint {
     /** Error above Y; overrides `error` for the upper side. */
     upperError?: number;
 }
+/** Optional compact title and time-label placement at the card edges. */
+export type WaveformLayoutPreset = 'default' | 'edge-compact';
+/** Controls unit placement without changing series metadata. */
+export type WaveformUnitDisplayMode = 'axis' | 'legend-single-series';
 /**
  * 显示模式
  * - independent: 每个波形独立 Y 轴和缩放
@@ -44,6 +48,13 @@ export interface WaveformZoomEndPayload {
     seriesIds?: string[];
     gesture?: 'wheel' | 'box';
 }
+/** Final horizontal viewport after a pan; endpoints are always seconds. */
+export interface WaveformPanEndPayload {
+    start: number;
+    end: number;
+    trackIndex?: number;
+    seriesIds?: string[];
+}
 /** Describes the X-axis viewport targeted by a user zoom gesture before rendering settles. */
 export interface WaveformZoomIntentPayload {
     start: number;
@@ -221,6 +232,8 @@ export interface WaveformAxesOptions {
         splitNumber?: number;
         /** Expands Y-axis domains to equal, human-friendly intervals. Defaults to true. */
         nice?: boolean;
+        /** Adds this fraction of the automatic Y span above its maximum. Defaults to 0. */
+        upperPaddingRatio?: number;
     };
 }
 /** Styling and visibility options for the horizontal zero-value reference line. */

package/dist/types/types/index.d.ts

@@ -1,5 +1,5 @@
 /**
  * 类型定义统一导出
  */
-export type { WaveformPoint, WaveformDisplayMode, WaveformOverlayMode, WaveformInteractionMode, WaveformXDomainStrategy, WaveformZoomIntentPayload, WaveformZoomEndPayload, WaveformZoomResetPayload, WaveformAnnotationStyle, WaveformAnnotation, WaveformSamplingMode, WaveformSamplingStrategy, WaveformSamplingOptions, WaveformSamplingBackend, WaveformSamplingDiagnostics, WaveformSamplingError, WaveformRenderingOptions, WaveformPlotMargin, WaveformTitleTextStyle, WaveformTitleOptions, WaveformLegendPosition, WaveformLegendOrientation, WaveformLegendOptions, WaveformFrameStyle, WaveformXAxisLabelKind, WaveformXAxisLabelFormatterContext, WaveformXAxisLabelFormatter, WaveformAxesOptions, WaveformZeroLineOptions, } from './chart';
+export type { WaveformPoint, WaveformDisplayMode, WaveformUnitDisplayMode, WaveformLayoutPreset, WaveformOverlayMode, WaveformInteractionMode, WaveformXDomainStrategy, WaveformZoomIntentPayload, WaveformZoomEndPayload, WaveformPanEndPayload, WaveformZoomResetPayload, WaveformAnnotationStyle, WaveformAnnotation, WaveformSamplingMode, WaveformSamplingStrategy, WaveformSamplingOptions, WaveformSamplingBackend, WaveformSamplingDiagnostics, WaveformSamplingError, WaveformRenderingOptions, WaveformPlotMargin, WaveformTitleTextStyle, WaveformTitleOptions, WaveformLegendPosition, WaveformLegendOrientation, WaveformLegendOptions, WaveformFrameStyle, WaveformXAxisLabelKind, WaveformXAxisLabelFormatterContext, WaveformXAxisLabelFormatter, WaveformAxesOptions, WaveformZeroLineOptions, } from './chart';
 export type { SingleWaveformData, WaveformLineType, WaveformLineStyle, WaveformPointType, WaveformErrorBarOptions, ResolvedWaveformErrorBarOptions, WaveformTypedValues, TypedSampleData, TypedPointData, WaveformSeries, WaveformData, NormalizedWaveformSeries, } from './data';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "waveform-analysis",
-  "version": "0.1.66",
+  "version": "0.1.68",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/types/index.d.ts",

package/src/components/WaveformChart.css

@@ -117,6 +117,11 @@
   font-size: 12px;
 }
 
+.waveform-chart--edge-compact .waveform-chart__x-label {
+  font-size: 18px;
+  font-weight: 700;
+}
+
 .waveform-chart__label {
   font-weight: 700;
 }

package/src/components/WaveformChart.vue

@@ -10,6 +10,8 @@ import WaveformChartView from './WaveformChartView.vue'
 const props = withDefaults(defineProps<WaveformChartProps>(), {
   displayMode: 'independent',
   overlayMode: 'single-axis',
+  unitDisplayMode: 'axis',
+  layoutPreset: 'default',
   yLabel: '幅值',
   lineColor: '#0960bd',
   showTooltip: true,

package/src/components/WaveformChartView.vue

@@ -13,10 +13,14 @@ const {
   displayMode,
   activeInteractionMode,
   isCleanView,
+  isEdgeCompact,
+  paginationVisible,
   isPresentationMode,
   selection,
   containerStyle,
   overlayMode,
+  unitDisplayMode,
+  showLegendUnits,
   resolvedChartLeftMargin,
   titleAreaHeight,
   resolvedPlotMargin,
@@ -77,7 +81,6 @@ const {
   xAxisTitleY,
   hasChartArea,
   gridOptions,
-  pageCount,
   currentPage,
   getPageSize,
   pageableTracks,
@@ -116,6 +119,7 @@ function handleChartPointerLeave() {
       `waveform-chart--interaction-${activeInteractionMode}`,
       {
         'waveform-chart--clean': isCleanView,
+        'waveform-chart--edge-compact': isEdgeCompact,
         'waveform-chart--presentation': isPresentationMode,
         'waveform-chart--panning': selection?.kind === 'pan',
       },
@@ -233,6 +237,9 @@ function handleChartPointerLeave() {
           :frame-number="resolveFrameNumber(track.id)"
           :frame-style="frameStyle"
           :axes="axes"
+          :show-axis-units="unitDisplayMode === 'axis'"
+          :contain-y-axis-endpoints="isEdgeCompact"
+          :contain-frame-stroke="isEdgeCompact"
           :clean-view="isCleanView"
           :zero-line="resolvedZeroLine"
           :time-unit="timeUnit"
@@ -284,8 +291,12 @@ function handleChartPointerLeave() {
             :transform="`translate(${track.left}, ${track.top})`"
           >
             <WaveformLegend
-              v-if="!track.isEmpty && track.legendSeries.length > 1"
+              v-if="
+                !track.isEmpty &&
+                (track.legendSeries.length > 1 || unitDisplayMode === 'legend-single-series')
+              "
               :series="track.legendSeries"
+              :show-units="showLegendUnits"
               :position="resolveLegendPosition(track.id)"
               :orientation="resolveLegendOrientation(resolveLegendPosition(track.id))"
               :background-color="legendBackgroundColor"
@@ -321,7 +332,7 @@ function handleChartPointerLeave() {
     </svg>
 
     <Pagination
-      v-if="gridOptions.showPagination && pageCount > 1 && !isCleanView"
+      v-if="paginationVisible"
       class="waveform-chart__pagination"
       aria-label="波形分页"
       :current="currentPage"

package/src/components/core/grid.ts

@@ -134,6 +134,7 @@ export function resolveGridCellGeometry(
   slotHasSeries: boolean[] = [],
   horizontalGap?: number,
   showXAxis = true,
+  bottomAxisBandInMargin = false,
 ): GridCellGeometry[] {
   const pageSize = getPageSize(options)
   const seriesCount = slotHasSeries.filter(Boolean).length
@@ -164,7 +165,9 @@ export function resolveGridCellGeometry(
     }
   }
   const totalVerticalGap = Math.max(0, rowCount - 1) * defaultGap
-  const totalAxisBand = axisRows.size * X_AXIS_BAND
+  // The final row's ticks may use the chart bottom margin; intermediate bands stay in-grid.
+  const bottomBandCredit = bottomAxisBandInMargin && axisRows.has(rowCount - 1) ? X_AXIS_BAND : 0
+  const totalAxisBand = axisRows.size * X_AXIS_BAND - bottomBandCredit
   const plotHeight = Math.max(1, (innerHeight - totalVerticalGap - totalAxisBand) / rowCount)
 
   return Array.from({ length: filledLastRow ? seriesCount : pageSize }, (_, slotIndex) => {

package/src/components/core/layout.ts

@@ -161,10 +161,21 @@ export function resolveRenderedYAxisSeriesGroups(
   yDomain?: WaveformYDomain,
   yDomains?: Record<string, WaveformYDomain>,
   viewportYDomains?: Record<string, [number, number]>,
+  upperPaddingRatio = 0,
 ): YAxisSeriesGroup[] {
   const viewportYDomain = viewportYDomains?.[track.id]
   return resolveYAxisSeriesGroups(track, overlayMode, yDomain, yDomains).map((group) =>
-    !group.fixed && viewportYDomain ? { ...group, domain: viewportYDomain } : group,
+    !group.fixed && viewportYDomain
+      ? { ...group, domain: viewportYDomain }
+      : !group.fixed && Number.isFinite(upperPaddingRatio) && upperPaddingRatio > 0
+        ? {
+            ...group,
+            domain: [
+              group.domain[0],
+              group.domain[1] + (group.domain[1] - group.domain[0]) * upperPaddingRatio,
+            ] as WaveformYDomain,
+          }
+        : group,
   )
 }
 
@@ -255,6 +266,8 @@ export function buildYAxisSlots(
   nice = true,
   includeWithoutLastTick = false,
   viewportYDomains?: Record<string, [number, number]>,
+  upperPaddingRatio = 0,
+  showUnits = true,
 ): { slots: YAxisSlot[]; clearance: { left: number; right: number } } {
   const widths = new Map<string, number>()
   tracks.forEach((track) => {
@@ -265,6 +278,7 @@ export function buildYAxisSlots(
       yDomain,
       yDomains,
       viewportYDomains,
+      upperPaddingRatio,
     ).forEach((group) => {
       const sideIndex = sideIndexes[group.side]++
       const key = `${group.side}:${sideIndex}`
@@ -272,7 +286,7 @@ export function buildYAxisSlots(
         group.domain,
         nice,
         undefined,
-        group.seriesList[0]?.unit,
+        showUnits ? group.seriesList[0]?.unit : undefined,
         tickCount,
         includeWithoutLastTick,
       ).tickTextWidth

package/src/components/core/pagination.ts

@@ -0,0 +1,17 @@
+/** Conservative Ant pagination sizing, including first/last pages and both ellipses. */
+export function resolveCompactPaginationBand(
+  visible: boolean,
+  width: number,
+  pageCount: number,
+  timeLabelCenter: number,
+  timeLabel: string,
+): 0 | 16 | 40 {
+  if (!visible) return 0
+  if (width <= 520) return 40
+  const controls = Math.min(pageCount, 9) + 2
+  const paginationWidth = controls * 32 + controls * 8
+  // A full 18px em per character also accommodates wide glyphs and Chinese labels.
+  const labelRight = timeLabelCenter + (Array.from(timeLabel).length * 18) / 2
+  const availableWidth = width - 10 - labelRight - 8
+  return availableWidth >= paginationWidth ? 16 : 40
+}

package/src/components/core/title.ts

@@ -20,6 +20,7 @@ export interface RotatedTitleLayoutOptions {
   naturalHeight: number
   availableWidth: number
   rotation: number
+  edgeCompact?: boolean
 }
 
 function clampPositive(value: number): number {
@@ -31,7 +32,10 @@ export function calculateRotatedTitleLayout({
   naturalHeight,
   availableWidth,
   rotation,
+  edgeCompact = false,
 }: RotatedTitleLayoutOptions): RotatedTitleLayout {
+  const verticalPadding = edgeCompact ? 8 : TITLE_AREA_VERTICAL_PADDING
+  const minimumHeight = edgeCompact ? 0 : TITLE_AREA_MIN_HEIGHT
   const safeNaturalWidth = clampPositive(naturalWidth)
   const safeNaturalHeight = clampPositive(naturalHeight)
   const safeAvailableWidth = clampPositive(availableWidth)
@@ -53,13 +57,13 @@ export function calculateRotatedTitleLayout({
       textHeight,
       visualWidth: textWidth,
       visualHeight: textHeight,
-      areaHeight: Math.max(TITLE_AREA_MIN_HEIGHT, textHeight + TITLE_AREA_VERTICAL_PADDING),
+      areaHeight: Math.max(minimumHeight, textHeight + verticalPadding),
       scale: 1,
       wrapped: lineCount > 1,
     }
   }
 
-  const maximumVisualHeight = TITLE_AREA_MAX_HEIGHT - TITLE_AREA_VERTICAL_PADDING
+  const maximumVisualHeight = TITLE_AREA_MAX_HEIGHT - verticalPadding
   const naturalVisualWidth = safeNaturalWidth * absoluteCosine + safeNaturalHeight * absoluteSine
   const naturalVisualHeight = safeNaturalWidth * absoluteSine + safeNaturalHeight * absoluteCosine
   const scale = Math.min(
@@ -71,7 +75,7 @@ export function calculateRotatedTitleLayout({
   const visualHeight = naturalVisualHeight * scale
   const areaHeight = Math.min(
     TITLE_AREA_MAX_HEIGHT,
-    Math.max(TITLE_AREA_MIN_HEIGHT, visualHeight + TITLE_AREA_VERTICAL_PADDING),
+    Math.max(minimumHeight, visualHeight + verticalPadding),
   )
 
   return {

package/src/components/core/trackLayoutBuilder.ts

@@ -71,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[]>>
@@ -79,6 +80,9 @@ export interface BuildTrackLayoutsOptions {
   yLabel?: string
   yAxisSlots?: readonly YAxisSlot[]
   showCompactEmptyTracks: boolean
+  useNonEmptyBottomTracks?: boolean
+  compactYAxisLayout?: boolean
+  showAxisUnits?: boolean
 }
 
 function resolveIndependentXDomain(
@@ -100,7 +104,12 @@ function resolveIndependentXDomain(
 }
 
 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) => {
@@ -135,6 +144,7 @@ export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayou
       options.fixedYDomain,
       options.fixedYDomains,
       options.yDomains,
+      options.yAxisUpperPaddingRatio,
     )
     const sideIndexes = { left: 0, right: 0 }
     const sideOffsets = { left: 0, right: 0 }
@@ -151,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 =
@@ -174,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,
@@ -288,6 +298,6 @@ export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayou
     }
   })
 
-  alignLeftYAxisTitles(layouts, options.yLabel)
+  if (!options.compactYAxisLayout) alignLeftYAxisTitles(layouts, options.yLabel)
   return layouts
 }

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
       }

package/src/components/core/useWaveformLayout.ts

@@ -7,22 +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 { alignIntegerZoomDomain, normalizeIntegerZoomDomain } from '../interaction/integerZoom'
-import { resolveYAxisLayoutMetrics, resolveViewportYDomains } from './yAxisLayoutMetrics'
+import { resolveViewportYDomains } from './yAxisLayoutMetrics'
+import { useWaveformYAxisLayout } from './useWaveformYAxisLayout'
 import type { useWaveformAnnotationInteraction } from '../annotation'
 interface LayoutContext {
   props: ResolvedWaveformChartProps
@@ -95,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),
@@ -120,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)
@@ -279,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] }))
   })
@@ -288,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,
@@ -303,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,
@@ -358,6 +301,7 @@ export function useWaveformLayout(context: LayoutContext) {
   return {
     chartSeries,
     chartTracks,
+    showLegendUnits,
     pageableTracks,
     renderingOptions,
     gridOptions,