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