修改:盈亏曲线展示时间轴,并按区间起止固定可视范围。
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
parent
d8a6c22367
commit
bd698067f8
@ -50,6 +50,7 @@ import {
|
||||
LineType,
|
||||
type IChartApi,
|
||||
type ISeriesApi,
|
||||
type UTCTimestamp,
|
||||
} from 'lightweight-charts'
|
||||
import {
|
||||
PNL_CURVE_RANGES,
|
||||
@ -77,6 +78,20 @@ let chartSeries: ISeriesApi<'Area'> | null = null
|
||||
const LINE_UP = '#2E5CFF'
|
||||
const LINE_DOWN = '#dc2626'
|
||||
|
||||
/** 与 toLwcData 一致:把毫秒时间戳转为图表本地显示用的 UTCTimestamp */
|
||||
function toChartTime(tsMs: number): UTCTimestamp {
|
||||
const d = new Date(tsMs)
|
||||
return (Date.UTC(
|
||||
d.getFullYear(),
|
||||
d.getMonth(),
|
||||
d.getDate(),
|
||||
d.getHours(),
|
||||
d.getMinutes(),
|
||||
d.getSeconds(),
|
||||
d.getMilliseconds(),
|
||||
) / 1000) as UTCTimestamp
|
||||
}
|
||||
|
||||
function seriesColors(pnl: number) {
|
||||
const color = pnl >= 0 ? LINE_UP : LINE_DOWN
|
||||
return {
|
||||
@ -105,8 +120,22 @@ async function loadCurve() {
|
||||
if (chartSeries) {
|
||||
chartSeries.applyOptions(seriesColors(currentPnl.value))
|
||||
chartSeries.setData(toLwcData(points))
|
||||
const startTs = data.startTs
|
||||
const endTs = data.endTs
|
||||
if (
|
||||
chartInstance &&
|
||||
Number.isFinite(startTs) &&
|
||||
Number.isFinite(endTs) &&
|
||||
endTs > startTs
|
||||
) {
|
||||
chartInstance.timeScale().setVisibleRange({
|
||||
from: toChartTime(startTs),
|
||||
to: toChartTime(endTs),
|
||||
})
|
||||
} else {
|
||||
chartInstance?.timeScale().fitContent()
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
const msg = e instanceof Error ? e.message : t('wallet.pnlCurve.loadFailed')
|
||||
toastStore.show(msg, 'error')
|
||||
@ -125,7 +154,7 @@ function initChart() {
|
||||
const el = chartRef.value
|
||||
chartInstance = createChart(el, {
|
||||
width: el.clientWidth,
|
||||
height: 140,
|
||||
height: 160,
|
||||
layout: {
|
||||
background: { color: '#ffffff' },
|
||||
textColor: '#9ca3af',
|
||||
@ -136,7 +165,12 @@ function initChart() {
|
||||
grid: { vertLines: { visible: false }, horzLines: { visible: false } },
|
||||
leftPriceScale: { visible: false },
|
||||
rightPriceScale: { visible: false, borderVisible: false },
|
||||
timeScale: { visible: false, borderVisible: false },
|
||||
timeScale: {
|
||||
visible: true,
|
||||
borderVisible: false,
|
||||
timeVisible: true,
|
||||
secondsVisible: false,
|
||||
},
|
||||
handleScroll: false,
|
||||
handleScale: false,
|
||||
crosshair: {
|
||||
@ -157,7 +191,7 @@ function initChart() {
|
||||
|
||||
function handleResize() {
|
||||
if (chartInstance && chartRef.value) {
|
||||
chartInstance.resize(chartRef.value.clientWidth, 140)
|
||||
chartInstance.resize(chartRef.value.clientWidth, 160)
|
||||
}
|
||||
}
|
||||
|
||||
@ -283,7 +317,7 @@ onUnmounted(() => {
|
||||
.pnl-chart {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
height: 160px;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user