fix: refine home filters and stock action chart

This commit is contained in:
wanghep
2026-04-20 21:41:31 +08:00
parent 9e0ad43999
commit 2c1fc0da1f
4 changed files with 83 additions and 47 deletions

View File

@ -97,7 +97,6 @@ const chartModel = computed(() => {
cumulativePoints: [] as Array<{ x: number; y: number }>,
labels: [] as Array<{ x: number; label: string; visible: boolean }>,
leftAxis: [] as Array<{ y: number; label: string }>,
rightAxis: [] as Array<{ y: number; label: string }>,
hoverColumns: [] as Array<{ x: number; width: number }>,
}
@ -105,18 +104,17 @@ const chartModel = computed(() => {
return emptyModel
}
const leftMax = Math.max(
...rows.flatMap((row) => [Math.abs(row.buyTotalWan), Math.abs(row.sellTotalWan), Math.abs(row.netTotalWan)]),
const valueMax = Math.max(
...rows.flatMap((row) => [
Math.abs(row.buyTotalWan),
Math.abs(row.sellTotalWan),
Math.abs(row.netTotalWan),
Math.abs(row.cumulativeNetWan),
]),
1,
)
const zeroY = top + innerHeight / 2
const yOfLeft = (value: number) => zeroY - (value / leftMax) * (innerHeight / 2)
const cumulativeValues = rows.map((row) => row.cumulativeNetWan)
const rightMin = Math.min(0, ...cumulativeValues)
const rightMax = Math.max(0, ...cumulativeValues)
const rightRange = rightMax - rightMin || 1
const yOfRight = (value: number) => top + ((rightMax - value) / rightRange) * innerHeight
const yOfValue = (value: number) => zeroY - (value / valueMax) * (innerHeight / 2)
const stepX = rows.length === 1 ? innerWidth / 2 : innerWidth / (rows.length - 1)
const groupWidth = Math.max(20, Math.min(28, stepX * 0.58))
@ -134,7 +132,7 @@ const chartModel = computed(() => {
stepX,
buyBars: rows.map((row, index) => {
const x = left + (rows.length === 1 ? innerWidth / 2 : index * stepX)
const y = yOfLeft(row.buyTotalWan)
const y = yOfValue(row.buyTotalWan)
return {
x: x - barWidth - 2,
y,
@ -145,7 +143,7 @@ const chartModel = computed(() => {
sellBars: rows.map((row, index) => {
const x = left + (rows.length === 1 ? innerWidth / 2 : index * stepX)
const y = zeroY
const sellY = yOfLeft(-row.sellTotalWan)
const sellY = yOfValue(-row.sellTotalWan)
return {
x: x + 2,
y,
@ -155,11 +153,11 @@ const chartModel = computed(() => {
}),
netPoints: rows.map((row, index) => ({
x: left + (rows.length === 1 ? innerWidth / 2 : index * stepX),
y: yOfLeft(row.netTotalWan),
y: yOfValue(row.netTotalWan),
})),
cumulativePoints: rows.map((row, index) => ({
x: left + (rows.length === 1 ? innerWidth / 2 : index * stepX),
y: yOfRight(row.cumulativeNetWan),
y: yOfValue(row.cumulativeNetWan),
})),
labels: rows.map((row, index) => ({
x: left + (rows.length === 1 ? innerWidth / 2 : index * stepX),
@ -167,12 +165,8 @@ const chartModel = computed(() => {
visible: index % labelStep === 0 || index === rows.length - 1,
})),
leftAxis: Array.from({ length: 5 }, (_, index) => {
const value = leftMax - (leftMax * 2 * index) / 4
return { y: yOfLeft(value), label: formatSignedWanAmount(value) }
}),
rightAxis: Array.from({ length: 5 }, (_, index) => {
const value = rightMax - (rightRange * index) / 4
return { y: yOfRight(value), label: formatSignedWanAmount(value) }
const value = valueMax - (valueMax * 2 * index) / 4
return { y: yOfValue(value), label: formatSignedWanAmount(value) }
}),
hoverColumns: rows.map((_row, index) => ({
x: left + (rows.length === 1 ? innerWidth / 2 : index * stepX) - Math.max(stepX, 20) / 2,
@ -306,12 +300,6 @@ onUnmounted(() => {
<text x="0" :y="tick.y + 4" fill="#93a2b5" font-size="10">{{ tick.label }}</text>
</g>
<g v-for="(tick, index) in chartModel.rightAxis" :key="`right-axis-${index}`">
<text :x="chartModel.width - chartModel.right + 8" :y="tick.y + 4" fill="#c9ad68" font-size="10">
{{ tick.label }}
</text>
</g>
<g v-for="(column, index) in chartModel.hoverColumns" :key="`hover-${index}`">
<rect
:x="column.x"