LaconicNetwork/vega-frontend-monorepo
4
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

chore(trading): initial number of candles depended on pane width (#4737)

Browse Source
This commit is contained in:
Maciek 2023-09-11 10:27:03 +02:00 committed by GitHub
parent 5183f2591b
commit bf7aacf984
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/trading/pages/styles.css
View File

@ -36,7 +36,7 @@ body,
} }
/** /**
* ALLOTMENT * ALLOTMENT
*/ */
html { html {
@ -81,6 +81,8 @@ html [data-theme='light'] {
--pennant-color-macd-macd: theme(colors.vega.yellow.500); --pennant-color-macd-macd: theme(colors.vega.yellow.500);
--pennant-color-volume-sell: theme(colors.market.red.DEFAULT); --pennant-color-volume-sell: theme(colors.market.red.DEFAULT);
--pennant-candlestick-inner-padding: 0.1;
} }
html [data-theme='light'] { html [data-theme='light'] {

51
libs/candles-chart/src/lib/candles-chart.tsx
View File

@ -3,6 +3,7 @@ import { CandlestickChart } from 'pennant';
import { VegaDataSource } from './data-source'; import { VegaDataSource } from './data-source';
import { useApolloClient } from '@apollo/client'; import { useApolloClient } from '@apollo/client';
import { useMemo } from 'react'; import { useMemo } from 'react';
import AutoSizer from 'react-virtualized-auto-sizer';
import { useVegaWallet } from '@vegaprotocol/wallet'; import { useVegaWallet } from '@vegaprotocol/wallet';
import { useThemeSwitcher } from '@vegaprotocol/react-helpers'; import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
import { t } from '@vegaprotocol/i18n'; import { t } from '@vegaprotocol/i18n';
@ -12,7 +13,7 @@ export type CandlesChartContainerProps = {
marketId: string; marketId: string;
}; };
const INITIAL_CANDLES_TO_ZOOM = 150; const CANDLES_TO_WIDTH_FACTOR = 0.15;
export const CandlesChartContainer = ({ export const CandlesChartContainer = ({
marketId, marketId,
@ -29,25 +30,33 @@ export const CandlesChartContainer = ({
}, [client, marketId, pubKey]); }, [client, marketId, pubKey]);
return ( return (
<CandlestickChart <AutoSizer>
dataSource={dataSource} {({ width, height }) => (
options={{ <div style={{ width, height }}>
chartType, <CandlestickChart
overlays, dataSource={dataSource}
studies, options={{
notEnoughDataText: ( chartType,
<span className="text-xs text-center">{t('No data')}</span> overlays,
), studies,
initialNumCandlesToDisplay: INITIAL_CANDLES_TO_ZOOM, notEnoughDataText: (
}} <span className="text-xs text-center">{t('No data')}</span>
interval={interval} ),
theme={theme} initialNumCandlesToDisplay: Math.floor(
onOptionsChanged={(options) => { width * CANDLES_TO_WIDTH_FACTOR
merge({ ),
overlays: options.overlays, }}
studies: options.studies, interval={interval}
}); theme={theme}
}} onOptionsChanged={(options) => {
/> merge({
overlays: options.overlays,
studies: options.studies,
});
}}
/>
</div>
)}
</AutoSizer>
); );
}; };