waveform-analysis 0.1.64 → 0.1.65

package/src/components/core/yAxisConstants.ts

@@ -2,7 +2,7 @@ export const Y_AXIS_CHARACTER_WIDTH = 7
 export const Y_AXIS_TICK_PADDING = 7
 export const Y_AXIS_OUTER_PADDING = 4
 export const Y_AXIS_LABEL_GAP = 0
-export const Y_AXIS_LABEL_BAND_WIDTH = 12
+export const Y_AXIS_LABEL_BAND_WIDTH = 20
 export const Y_AXIS_RIGHT_LABEL_OFFSET = 10
 
 export function resolveYAxisSides(axisCount: number): Array<'left' | 'right'> {

package/src/components/rendering/WaveformLegend.vue

@@ -93,7 +93,7 @@ function toggleSeries(seriesId: string) {
               :d="waveformLegendLinePath(item.lineType) ?? undefined"
               :stroke="item.color"
               :stroke-dasharray="waveformLineDasharray(item.lineStyle)"
-              stroke-width="2.5"
+              stroke-width="1"
               fill="none"
             />
             <path

package/src/components/rendering/WaveformSeriesLayer.vue

@@ -103,7 +103,7 @@ const renderedSeriesPaths = computed<RenderedSeriesPath[]>(() =>
 <style scoped>
 .waveform-track__line {
   fill: none;
-  stroke-width: 2.5;
+  stroke-width: 1;
   stroke-linejoin: round;
   stroke-linecap: round;
 }

package/src/components/rendering/WaveformTrack.css

@@ -10,8 +10,8 @@
 }
 
 .waveform-track__y-axis-label {
-  font-size: 12px;
-  font-weight: 500;
+  font-size: 14px;
+  font-weight: 600;
   pointer-events: none;
 }
 
@@ -83,6 +83,7 @@
 .waveform-track__axis-endpoint {
   fill: #667085;
   font-size: 11px;
+  font-weight: 700;
   pointer-events: none;
 }
 
@@ -90,6 +91,7 @@
   fill: #666;
   font-family: sans-serif;
   font-size: 10px;
+  font-weight: 700;
 }
 
 .waveform-track__axis path,
@@ -100,4 +102,5 @@
 .waveform-track__axis text {
   fill: #667085;
   font-size: 11px;
+  font-weight: 700;
 }

package/src/components/rendering/WaveformTrack.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
+import { ZERO_LINE_DEFAULTS } from '../core/constants'
 import type { WaveformAxesOptions, WaveformFrameStyle, WaveformZeroLineOptions } from '../../types'
 import type { TrackLayout } from '../core/types'
 import type { WaveformDisplayMode, WaveformInteractionMode } from '../data/types'
@@ -41,7 +42,12 @@ const props = withDefaults(defineProps<Props>(), {
   interactionMode: 'zoom',
   interactive: true,
   cleanView: false,
-  zeroLine: () => ({ visible: false, color: '#98a2b3', width: 1, dash: '6 4' }),
+  zeroLine: () => ({
+    visible: true,
+    color: ZERO_LINE_DEFAULTS.COLOR,
+    width: ZERO_LINE_DEFAULTS.WIDTH,
+    dash: ZERO_LINE_DEFAULTS.DASH,
+  }),
 })
 const emit = defineEmits<Emits>()
 

package/src/components/rendering/WaveformTrackAxes.vue

@@ -61,6 +61,12 @@ function renderAxes() {
 
     const selection = select(element)
     selection.call(yAxis)
+    const lowestTick = Math.min(...axis.tickValues)
+    selection
+      .selectAll<SVGTextElement, number>('.tick text')
+      .attr('y', null)
+      .attr('dy', (value) => (value === lowestTick ? '0' : '0.32em'))
+      .attr('dominant-baseline', (value) => (value === lowestTick ? 'text-after-edge' : null))
     selection
       .selectAll('path.domain')
       .attr('display', props.axes?.y?.lineVisible === false ? 'none' : null)
@@ -175,7 +181,7 @@ watch(
   >
     <rect
       class="waveform-track__y-axis-label-bg waveform-chart__y-axis-label-bg"
-      :x="track.yAxisLabelX - Y_AXIS_LABEL_BAND_WIDTH / 2"
+      :x="track.yAxes[0].labelX - Y_AXIS_LABEL_BAND_WIDTH / 2"
       :y="track.height / 2 - 40"
       :width="Y_AXIS_LABEL_BAND_WIDTH"
       height="80"
@@ -184,7 +190,7 @@ watch(
     <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)`"
+      :transform="`translate(${track.yAxes[0].labelX}, ${track.height / 2}) rotate(-90)`"
       text-anchor="middle"
       dominant-baseline="central"
     >

package/src/types/chart.ts

@@ -258,8 +258,12 @@ export interface WaveformAxesOptions {
 
 /** Styling and visibility options for the horizontal zero-value reference line. */
 export interface WaveformZeroLineOptions {
+  /** Defaults to true. Set false to hide the reference line. */
   visible?: boolean
+  /** Defaults to red (#ff0000). */
   color?: string
+  /** Positive stroke width in pixels. Defaults to 1. */
   width?: number
+  /** SVG stroke-dasharray. Defaults to '6 4'; use '' for a solid line. */
   dash?: string
 }