LaconicNetwork/dydx-v4-web
6
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

clean up PnlChart

Browse Source
This commit is contained in:
mulan xia 2024-02-01 15:10:13 -05:00
parent 3ec9c2442e
commit 9b7fe27606
No known key found for this signature in database
GPG Key ID: C6CE526613568D73
1 changed files with 3 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
src/views/charts/PnlChart.tsx
View File

@ -9,21 +9,17 @@ import {
HistoricalPnlPeriods,
HISTORICAL_PNL_PERIODS,
} from '@/constants/abacus';
// import { STRING_KEYS } from '@/constants/localization';
import { timeUnits } from '@/constants/time';
import { breakpoints } from '@/styles';
import { useBreakpoints, useNow /*, useStringGetter*/ } from '@/hooks';
import { useBreakpoints, useNow } from '@/hooks';
// import { Details } from '@/components/Details';
import { Output /*, OutputType, ShowSign*/ } from '@/components/Output';
// import { HorizontalSeparator } from '@/components/Separator';
import { Output } from '@/components/Output';
import { ToggleGroup } from '@/components/ToggleGroup';
import type { TooltipContextType } from '@visx/xychart';
import { TimeSeriesChart } from '@/components/visx/TimeSeriesChart';
import { AxisLabelOutput } from '@/components/visx/AxisLabelOutput';
// import { TooltipContent } from '@/components/visx/TooltipContent';
import {
getSubaccount,
@ -36,7 +32,6 @@ import { getAppTheme } from '@/state/configsSelectors';
import abacusStateManager from '@/lib/abacus';
import { formatRelativeTime } from '@/lib/dateTime';
import { isTruthy } from '@/lib/isTruthy';
import chartBackground from '/Dots-dark.png';
enum PnlSide {
Profit = 'Profit',
@ -86,7 +81,6 @@ export const PnlChart = ({
selectedLocale,
slotEmpty,
}: PnlChartProps) => {
// const stringGetter = useStringGetter();
const { isTablet } = useBreakpoints();
const appTheme = useSelector(getAppTheme);
const { equity } = useSelector(getSubaccount, shallowEqual) || {};
@ -176,8 +170,6 @@ export const PnlChart = ({
[pnlData, equity, selectedPeriod, now]
);
// const latestDatum = data?.[data.length - 1];
const chartBackground =
appTheme === AppTheme.Light ? LIGHT_CHART_BACKGROUND_URL : DARK_CHART_BACKGROUND_URL;
@ -206,25 +198,6 @@ export const PnlChart = ({
yAccessor: (datum) => datum?.equity,
colorAccessor: () => 'var(--pnl-line-color)',
getCurve: () => curveLinear,
// getCurve: ({ zoomDomain }) =>
// PNL_TIME_RESOLUTION * 30 < zoomDomain && zoomDomain < PNL_TIME_RESOLUTION * 400
// ? curveMonotoneX
// : curveLinear,
// threshold: {
// yAccessor: (datum) => datum?.netTransfers,
// aboveAreaProps: {
// fill: 'var(--color-positive)',
// fillOpacity: 0.33,
// strokeWidth: 1,
// stroke: 'var(--color-positive)',
// },
// belowAreaProps: {
// fill: 'var(--color-negative)',
// fillOpacity: 0.33,
// strokeWidth: 1,
// stroke: 'var(--color-negative)',
// },
// },
},
]}
tickFormatY={(value) =>
@ -236,100 +209,7 @@ export const PnlChart = ({
})
.format(Math.abs(value))
.toLowerCase()
}
// renderXAxisLabel={({ tooltipData }) => {
// const tooltipDatum = tooltipData!.nearestDatum!.datum ?? latestDatum;
// return (
// <Styled.XAxisLabelOutput type={OutputType.DateTime} value={tooltipDatum.createdAt} />
// );
// }}
// renderYAxisLabel={({ tooltipData }) => {
// const tooltipDatum = tooltipData!.nearestDatum!.datum ?? latestDatum;
// return (
// <Styled.YAxisLabelOutput
// type={OutputType.CompactFiat}
// value={tooltipDatum.totalPnl}
// accentColor={
// {
// [PnlSide.Loss]: 'var(--color-negative)',
// [PnlSide.Profit]: 'var(--color-positive)',
// [PnlSide.Flat]: 'var(--color-layer-6)',
// }[tooltipDatum.side]
// }
// />
// );
// }}
// renderTooltip={({ tooltipData }) => {
// const { nearestDatum } = tooltipData || {};
// const tooltipDatum = nearestDatum?.datum ?? latestDatum;
// return (
// <TooltipContent
// accentColor={
// {
// [PnlSide.Loss]: 'var(--color-negative)',
// [PnlSide.Profit]: 'var(--color-positive)',
// [PnlSide.Flat]: 'var(--color-layer-6)',
// }[tooltipDatum.side]
// }
// >
// <Details
// layout="column"
// items={[
// {
// key: 'createdAt',
// label: stringGetter({ key: STRING_KEYS.TIME }),
// value: <Output type={OutputType.DateTime} value={tooltipDatum.createdAt} />,
// },
// ].filter(Boolean)}
// />
// <HorizontalSeparator />
// <Details
// layout="column"
// items={[
// {
// key: 'netTransfers',
// label: stringGetter({ key: STRING_KEYS.NET_TRANSFERS }),
// value: <Output type={OutputType.Fiat} value={tooltipDatum.netTransfers} />,
// },
// {
// key: 'equity',
// label: {
// [PnlSide.Profit]: stringGetter({
// key: STRING_KEYS.NET_PROFIT,
// }),
// [PnlSide.Loss]: stringGetter({
// key: STRING_KEYS.NET_LOSS,
// }),
// [PnlSide.Flat]: stringGetter({
// key: STRING_KEYS.NET_ZERO,
// }),
// }[tooltipDatum.side],
// value: (
// <Styled.SignedOutput
// type={OutputType.Fiat}
// value={tooltipDatum.equity}
// showSign={ShowSign.Both}
// side={tooltipDatum.side}
// />
// ),
// },
// {
// key: 'totalPnl',
// label: stringGetter({ key: STRING_KEYS.TOTAL_VALUE }), // stringGetter({ key: STRING_KEYS.EQUITY }),
// value: <Output type={OutputType.Fiat} value={tooltipDatum.totalPnl} />,
// },
// ].filter(Boolean)}
// />
// </TooltipContent>
// );
// }}
renderTooltip={() => <div />}
} renderTooltip={() => <div />}
onTooltipContext={onTooltipContext}
onVisibleDataChange={onVisibleDataChange}
onZoom={onZoomSnap}