fix: refine home filters and stock action chart
This commit is contained in:
@ -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"
|
||||
|
||||
Reference in New Issue
Block a user