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

apps/trading/pages/styles.css

@@ -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'] {

libs/candles-chart/src/lib/candles-chart.tsx

@@ -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>
   );
 };