chore(trading): initial number of candles depended on pane width (#4737)
This commit is contained in:
parent
5183f2591b
commit
bf7aacf984
@ -36,7 +36,7 @@ body,
|
||||
}
|
||||
|
||||
/**
|
||||
* ALLOTMENT
|
||||
* ALLOTMENT
|
||||
*/
|
||||
|
||||
html {
|
||||
@ -81,6 +81,8 @@ html [data-theme='light'] {
|
||||
--pennant-color-macd-macd: theme(colors.vega.yellow.500);
|
||||
|
||||
--pennant-color-volume-sell: theme(colors.market.red.DEFAULT);
|
||||
|
||||
--pennant-candlestick-inner-padding: 0.1;
|
||||
}
|
||||
|
||||
html [data-theme='light'] {
|
||||
|
@ -3,6 +3,7 @@ import { CandlestickChart } from 'pennant';
|
||||
import { VegaDataSource } from './data-source';
|
||||
import { useApolloClient } from '@apollo/client';
|
||||
import { useMemo } from 'react';
|
||||
import AutoSizer from 'react-virtualized-auto-sizer';
|
||||
import { useVegaWallet } from '@vegaprotocol/wallet';
|
||||
import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
|
||||
import { t } from '@vegaprotocol/i18n';
|
||||
@ -12,7 +13,7 @@ export type CandlesChartContainerProps = {
|
||||
marketId: string;
|
||||
};
|
||||
|
||||
const INITIAL_CANDLES_TO_ZOOM = 150;
|
||||
const CANDLES_TO_WIDTH_FACTOR = 0.15;
|
||||
|
||||
export const CandlesChartContainer = ({
|
||||
marketId,
|
||||
@ -29,25 +30,33 @@ export const CandlesChartContainer = ({
|
||||
}, [client, marketId, pubKey]);
|
||||
|
||||
return (
|
||||
<CandlestickChart
|
||||
dataSource={dataSource}
|
||||
options={{
|
||||
chartType,
|
||||
overlays,
|
||||
studies,
|
||||
notEnoughDataText: (
|
||||
<span className="text-xs text-center">{t('No data')}</span>
|
||||
),
|
||||
initialNumCandlesToDisplay: INITIAL_CANDLES_TO_ZOOM,
|
||||
}}
|
||||
interval={interval}
|
||||
theme={theme}
|
||||
onOptionsChanged={(options) => {
|
||||
merge({
|
||||
overlays: options.overlays,
|
||||
studies: options.studies,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<AutoSizer>
|
||||
{({ width, height }) => (
|
||||
<div style={{ width, height }}>
|
||||
<CandlestickChart
|
||||
dataSource={dataSource}
|
||||
options={{
|
||||
chartType,
|
||||
overlays,
|
||||
studies,
|
||||
notEnoughDataText: (
|
||||
<span className="text-xs text-center">{t('No data')}</span>
|
||||
),
|
||||
initialNumCandlesToDisplay: Math.floor(
|
||||
width * CANDLES_TO_WIDTH_FACTOR
|
||||
),
|
||||
}}
|
||||
interval={interval}
|
||||
theme={theme}
|
||||
onOptionsChanged={(options) => {
|
||||
merge({
|
||||
overlays: options.overlays,
|
||||
studies: options.studies,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</AutoSizer>
|
||||
);
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user