From 98ee1cc99681debc6e52b995675b25de4e5e88f9 Mon Sep 17 00:00:00 2001 From: yuxuanhui Date: Wed, 2 Sep 2026 18:36:02 +0800 Subject: [PATCH] fix(selection): update chart labels and improve layout for clarity in selection components --- .../components/pattern-case-image.tsx | 4 ++-- .../components/selection-chart-option.test.ts | 14 ++++++++++-- .../components/selection-chart-option.ts | 22 +++++++++---------- .../components/selection-chart.test.tsx | 2 +- .../selection/components/selection-chart.tsx | 2 +- 5 files changed, 27 insertions(+), 17 deletions(-) diff --git a/zhixing-web/src/features/selection/components/pattern-case-image.tsx b/zhixing-web/src/features/selection/components/pattern-case-image.tsx index e6d0370..1f6a158 100644 --- a/zhixing-web/src/features/selection/components/pattern-case-image.tsx +++ b/zhixing-web/src/features/selection/components/pattern-case-image.tsx @@ -16,7 +16,7 @@ export function PatternCaseImage({ score }: PatternCaseImageProps) { patternCaseImageById[matchedCase.id as keyof typeof patternCaseImageById] return ( -
+

最接近案例：{matchedCase.name} @@ -32,7 +32,7 @@ export function PatternCaseImage({ score }: PatternCaseImageProps) { ) : ( {`${matchedCase.name} setFailedSource(source)} src={source} diff --git a/zhixing-web/src/features/selection/components/selection-chart-option.test.ts b/zhixing-web/src/features/selection/components/selection-chart-option.test.ts index 9e06ec5..225cb9c 100644 --- a/zhixing-web/src/features/selection/components/selection-chart-option.test.ts +++ b/zhixing-web/src/features/selection/components/selection-chart-option.test.ts @@ -44,6 +44,7 @@ describe("selection chart option", () => { }) expect(dataZoom[1].xAxisIndex).toEqual([0, 1, 2]) expect(legends[0]?.data).toEqual(["知行白线", "知行黄线"]) + expect(legends[1]?.data).toEqual(["J"]) expect(series.find((item) => item.name === "日线")).toMatchObject({ xAxisIndex: 0, yAxisIndex: 0, @@ -62,7 +63,16 @@ describe("selection chart option", () => { xAxisIndex: 1, yAxisIndex: 1, }) - expect(series.filter((item) => item.xAxisIndex === 2)).toHaveLength(3) + expect(series.filter((item) => item.xAxisIndex === 2)).toEqual([ + expect.objectContaining({ + data: points.map((item) => item.j), + name: "J", + xAxisIndex: 2, + yAxisIndex: 2, + }), + ]) + expect(series.find((item) => item.name === "K")).toBeUndefined() + expect(series.find((item) => item.name === "D")).toBeUndefined() expect(series[0].data[0]).toEqual([10, 10.5, 9, 11]) }) @@ -91,7 +101,7 @@ describe("selection chart option", () => { expect(candle).toHaveLength(4) expect(candle.every(Number.isNaN)).toBe(true) expect(volume?.data[0]).toMatchObject({ value: null }) - expect(lines).toHaveLength(5) + expect(lines).toHaveLength(3) for (const indicator of lines) { expect(indicator.data).toEqual([null]) } diff --git a/zhixing-web/src/features/selection/components/selection-chart-option.ts b/zhixing-web/src/features/selection/components/selection-chart-option.ts index bd8f363..b168184 100644 --- a/zhixing-web/src/features/selection/components/selection-chart-option.ts +++ b/zhixing-web/src/features/selection/components/selection-chart-option.ts @@ -35,7 +35,7 @@ export type SelectionChartOption = ComposeOption< /** * Build the three-grid financial chart configuration from aligned API points. * - * @param points Ascending qfq OHLCV, KDJ, and Zhixing-line points from the API. + * @param points Ascending qfq OHLCV, J, and Zhixing-line points from the API. * @returns One ECharts option with synchronized axes and an exact 120-point window. */ export function buildSelectionChartOption( @@ -75,7 +75,7 @@ export function buildSelectionChartOption( top: 8, }, { - data: ["K", "D", "J"], + data: ["J"], right: 20, top: "73%", }, @@ -126,25 +126,25 @@ export function buildSelectionChartOption( xAxisIndex: 1, yAxisIndex: 1, }, - ...(["k", "d", "j"] as const).map((key, index): LineSeriesOption => ({ + { connectNulls: false, - data: points.map((point) => point[key]), - name: key.toUpperCase(), + data: points.map((point) => point.j), + lineStyle: { + color: "#9333ea", + width: 1.5, + }, + name: "J", showSymbol: false, smooth: false, type: "line", xAxisIndex: 2, yAxisIndex: 2, - lineStyle: { - color: ["#2563eb", "#d97706", "#9333ea"][index], - width: 1.5, - }, - })), + }, ], title: [ { left: 12, text: "日线", textStyle: { fontSize: 12 }, top: 8 }, { left: 72, text: "成交量", textStyle: { fontSize: 12 }, top: "54%" }, - { left: 72, text: "KDJ", textStyle: { fontSize: 12 }, top: "72%" }, + { left: 72, text: "J", textStyle: { fontSize: 12 }, top: "72%" }, ], tooltip: { axisPointer: { type: "cross" }, diff --git a/zhixing-web/src/features/selection/components/selection-chart.test.tsx b/zhixing-web/src/features/selection/components/selection-chart.test.tsx index 24f4902..54c695c 100644 --- a/zhixing-web/src/features/selection/components/selection-chart.test.tsx +++ b/zhixing-web/src/features/selection/components/selection-chart.test.tsx @@ -90,7 +90,7 @@ describe("SelectionChart", () => { expect( screen.getByRole("img", { - name: "药明康德 日线、知行黄白线、成交量和 KDJ 图表", + name: "药明康德 日线、知行黄白线、成交量和 J 线图表", }), ).toBeInTheDocument() expect(chartMocks.init).toHaveBeenCalledTimes(1) diff --git a/zhixing-web/src/features/selection/components/selection-chart.tsx b/zhixing-web/src/features/selection/components/selection-chart.tsx index 3c8b4fd..1cb4e53 100644 --- a/zhixing-web/src/features/selection/components/selection-chart.tsx +++ b/zhixing-web/src/features/selection/components/selection-chart.tsx @@ -64,7 +64,7 @@ export function SelectionChart({ chart, className }: SelectionChartProps) { return (