fix(chart): retain axes in clean view

README.md

@@ -119,7 +119,7 @@ const data = ref<WaveformData>({
 | `title` / `legend` / `frameStyle` | 对应公开类型                                | 未设置                                                  | 标题、图例和图框样式              |
 | `frameNumber`                     | `string \| number`                          | 未设置                                                  | 图框水印内容                      |
 | `zeroLine`                        | `WaveformZeroLineOptions`                   | `{ visible: false }`                                    | 零值参考线显隐与样式              |
-| `cleanView`                       | `boolean`                                   | `false`                                                 | 仅保留波形的净图模式              |
+| `cleanView`                       | `boolean`                                   | `false`                                                 | 保留波形、图框和刻度的净图模式    |
 | `presentationMode`                | `boolean`                                   | `false`                                                 | 禁用绘图区交互的展示模式          |
 | `annotations`                     | `WaveformAnnotation[]`                      | `[]`                                                    | 受控标注数据                      |
 | `annotationsVisible`              | `boolean`                                   | `true`                                                  | 标注图层显隐                      |
@@ -449,9 +449,10 @@ scale 定位零线：
 `dash` 直接对应 SVG 的 `stroke-dasharray`；传入空字符串可显示实线。无效或非正数的
 `width` 会回退到 `1`。
 
-设置 `cleanView` 后，组件隐藏标题内容、图例、网格、坐标轴、轴标签、图框背景与边框、帧水印、
+设置 `cleanView` 后，组件保留波形、图框边框、X/Y 轴刻度及刻度值，并隐藏标题内容、图例、
-零值参考线、标注和分页器，同时保留原图的标题区域、边距和波形尺寸。缩放、悬浮、十字线和
+网格、轴标签、图框背景、帧水印、零值参考线、标注和分页器。原图的标题区域、边距和波形
-tooltip 仍然可用，切换回普通模式后原有配置和标注不会丢失：
+尺寸保持不变；缩放、悬浮、十字线和 tooltip 仍然可用，切换回普通模式后原有配置和标注
+不会丢失：
 
 ```vue
 <WaveformChart :data="chartData" :clean-view="cleanViewEnabled" />

package.json

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

src/components/rendering/WaveformTrack.vue

@@ -94,7 +94,7 @@ const resolvedFrameStyle = computed(() => {
     />
 
     <rect
-      v-if="!track.isEmpty && !cleanView"
+      v-if="!track.isEmpty"
       class="waveform-track__plot-frame waveform-chart__plot-frame"
       :width="track.width ?? innerWidth"
       :height="track.height"

src/components/rendering/WaveformTrackAxes.vue

@@ -103,14 +103,14 @@ watch(
 
 <template>
   <g
-    v-if="track.showXAxis && !cleanView"
+    v-if="track.showXAxis"
     ref="xAxisElement"
     class="waveform-track__axis waveform-track__axis--x waveform-chart__axis waveform-chart__axis--x"
     :class="{ 'waveform-track__axis--line-hidden': axes?.x?.lineVisible === false }"
     :transform="`translate(0, ${track.height})`"
   />
   <g
-    v-if="track.showXAxis && !cleanView"
+    v-if="track.showXAxis"
     class="waveform-track__axis-endpoints waveform-chart__axis-endpoints"
     :transform="`translate(0, ${track.height})`"
     font-family="sans-serif"
@@ -137,7 +137,7 @@ watch(
     </text>
   </g>
   <text
-    v-if="track.showXAxis && track.xAxisExponent && !cleanView"
+    v-if="track.showXAxis && track.xAxisExponent"
     class="waveform-track__axis-exponent waveform-track__axis-exponent--x waveform-chart__axis-exponent waveform-chart__axis-exponent--x"
     :x="track.width ?? innerWidth"
     :y="track.height + 27"
@@ -148,7 +148,7 @@ watch(
   </text>
 
   <g
-    v-for="axis in track.isEmpty || cleanView ? [] : track.yAxes"
+    v-for="axis in track.isEmpty ? [] : track.yAxes"
     :key="`y-axis-${track.index}-${axis.index}`"
     :ref="(element) => setYAxisElement(element, axis.index)"
     class="waveform-track__axis waveform-track__axis--y waveform-chart__axis waveform-chart__axis--y"
@@ -161,9 +161,7 @@ watch(
     :transform="`translate(${axis.x}, 0)`"
   />
   <text
-    v-for="axis in track.isEmpty || cleanView
+    v-for="axis in track.isEmpty ? [] : track.yAxes.filter((item) => item.exponentLabel)"
-      ? []
-      : track.yAxes.filter((item) => item.exponentLabel)"
     :key="`y-axis-exponent-${track.index}-${axis.index}`"
     class="waveform-track__axis-exponent waveform-track__axis-exponent--y waveform-chart__axis-exponent waveform-chart__axis-exponent--y"
     :data-y-axis-index="axis.index"

src/components/waveformChartCases/presentationAndAxes.test.ts

@@ -146,7 +146,7 @@ describe('WaveformChart', () => {
             kind: 'points',
             points: [
               { x: 0, y: -1 },
-              { x: 1, y: 1 },
+              { x: 10_000, y: 1 },
             ],
           },
         },
@@ -227,8 +227,8 @@ describe('WaveformChart', () => {
           data: {
             kind: 'points',
             points: [
-              { x: 0, y: 1 },
+              { x: 0, y: 10_000 },
-              { x: 1, y: 2 },
+              { x: 10_000, y: 20_000 },
             ],
           },
         },
@@ -239,7 +239,7 @@ describe('WaveformChart', () => {
             kind: 'points',
             points: [
               { x: 0, y: 2 },
-              { x: 1, y: 3 },
+              { x: 10_000, y: 3 },
             ],
           },
         },
@@ -252,6 +252,8 @@ describe('WaveformChart', () => {
       annotations: [{ id: 'note', seriesId: 'first', x: 0.5, y: 0, text: 'hidden note' }],
       zeroLine: { visible: true },
       title: { text: 'hidden title' },
+      axes: { x: { lineVisible: false }, y: { lineVisible: false } },
+      frameStyle: { borderColor: '#dc2626', borderWidth: 2, borderStyle: 'dashed' as const },
     }
     const regularWrapper = await mountSizedChart(data, sharedProps)
     const wrapper = await mountSizedChart(data, {
@@ -285,13 +287,31 @@ describe('WaveformChart', () => {
     expect(wrapper.find('.waveform-chart__overlay--independent').exists()).toBe(true)
     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)
+    const xAxis = wrapper.get('.waveform-chart__axis--x')
+    const yAxes = wrapper.findAll('.waveform-chart__axis--y')
+    expect(yAxes).toHaveLength(2)
+    expect(xAxis.findAll('.tick line').length).toBeGreaterThan(0)
+    expect(xAxis.findAll('.tick text').length).toBeGreaterThan(0)
+    yAxes.forEach((axis) => {
+      expect(axis.findAll('.tick line').length).toBeGreaterThan(0)
+      expect(axis.findAll('.tick text').length).toBeGreaterThan(0)
+      expect(axis.get('path.domain').attributes('display')).toBe('none')
+    })
+    expect(xAxis.get('path.domain').attributes('display')).toBe('none')
+    expect(wrapper.findAll('.waveform-chart__axis-endpoint')).toHaveLength(2)
+    expect(wrapper.get('.waveform-chart__axis-exponent--x').text()).not.toBe('')
+    expect(wrapper.get('.waveform-chart__axis-exponent--y').text()).not.toBe('')
     expect(wrapper.find('.waveform-chart__grid').exists()).toBe(false)
-    expect(wrapper.find('.waveform-chart__plot-frame').exists()).toBe(false)
+    expect(wrapper.get('.waveform-chart__plot-frame').attributes()).toMatchObject({
+      stroke: '#dc2626',
+      'stroke-width': '2',
+      'stroke-dasharray': '6 4',
+    })
     expect(wrapper.find('.waveform-chart__plot-background').exists()).toBe(false)
     expect(wrapper.find('.waveform-chart__watermark').exists()).toBe(false)
     expect(wrapper.find('.waveform-chart__legend-layer').exists()).toBe(false)
     expect(wrapper.find('.waveform-chart__label').exists()).toBe(false)
+    expect(wrapper.find('.waveform-chart__y-axis-label').exists()).toBe(false)
     expect(wrapper.find('.waveform-chart__zero-line').exists()).toBe(false)
     expect(wrapper.find('.waveform-annotation-layer').exists()).toBe(false)
     expect(wrapper.find('.ant-pagination').exists()).toBe(false)