diff --git a/packages/ui-chart-components/src/components/CartesianChart.tsx b/packages/ui-chart-components/src/components/CartesianChart.tsx index 2c750707f0..0a69071410 100644 --- a/packages/ui-chart-components/src/components/CartesianChart.tsx +++ b/packages/ui-chart-components/src/components/CartesianChart.tsx @@ -145,7 +145,7 @@ export const CartesianChart = ({ }, 50); }, []); - const isMobileSize = isMobile(); + const isMobileSize = isMobile(isExporting); const { chartType: defaultChartType, diff --git a/packages/ui-chart-components/src/components/Charts/GaugeChart.tsx b/packages/ui-chart-components/src/components/Charts/GaugeChart.tsx index 824452a9ce..d55b425b09 100644 --- a/packages/ui-chart-components/src/components/Charts/GaugeChart.tsx +++ b/packages/ui-chart-components/src/components/Charts/GaugeChart.tsx @@ -51,7 +51,7 @@ export const GaugeChart = ({ onItemClick = () => {}, }: GaugeChartProps) => { const { data, color = BLUE, ...restOfConfigs } = viewContent; - const isMobileSize = isMobile(); + const isMobileSize = isMobile(isExporting); const generateElements = () => { const denominator = 0.05; diff --git a/packages/ui-chart-components/src/components/Charts/PieChart.tsx b/packages/ui-chart-components/src/components/Charts/PieChart.tsx index 2d9d62ff80..432fb330a5 100644 --- a/packages/ui-chart-components/src/components/Charts/PieChart.tsx +++ b/packages/ui-chart-components/src/components/Charts/PieChart.tsx @@ -121,7 +121,7 @@ export const PieChart = ({ // eslint-disable-next-line no-unused-vars const [_, setLoaded] = useState(false); - const isMobileSize = isMobile(); + const isMobileSize = isMobile(isExporting); // Trigger rendering of the chart to fix an issue with the legend overlapping the chart. // This is a work around for a recharts bug. @see https://github.com/recharts/recharts/issues/511 diff --git a/packages/ui-chart-components/src/components/Reference/Legend.tsx b/packages/ui-chart-components/src/components/Reference/Legend.tsx index 93b43b50e5..f510197b40 100644 --- a/packages/ui-chart-components/src/components/Reference/Legend.tsx +++ b/packages/ui-chart-components/src/components/Reference/Legend.tsx @@ -140,7 +140,7 @@ export const getPieLegend = ({ legendPosition, viewContent, }: PieLegendProps) => ({ payload }: any) => { - const isMobileSize = isMobile(); + const isMobileSize = isMobile(isExporting); return ( {payload.map(({ color, value, payload: item }: TooltipPayload) => { @@ -189,7 +189,7 @@ export const getCartesianLegend = ({ isExporting, legendPosition, }: CartesianLegendProps) => ({ payload }: any) => { - const isMobileSize = isMobile(); + const isMobileSize = isMobile(isExporting); return ( {payload.map(({ color, value, dataKey }: TooltipPayload) => { diff --git a/packages/ui-chart-components/src/utils/utils.ts b/packages/ui-chart-components/src/utils/utils.ts index 0c719bbc89..bd25f49fb3 100644 --- a/packages/ui-chart-components/src/utils/utils.ts +++ b/packages/ui-chart-components/src/utils/utils.ts @@ -9,8 +9,14 @@ import { GRANULARITY_CONFIG } from '@tupaia/utils'; import { DataProps, ChartType, ViewContent, VizPeriodGranularity } from '../types'; // tupaia-web uses a responsive approach, so we need to check the window width -export const isMobile = () => { +export const isMobile = (isExporting: boolean = false) => { const appType = process.env.REACT_APP_APP_TYPE; + + // Always use the desktop styles when exporting + if (isExporting) { + return false; + } + return appType === 'mobile' || window.innerWidth < 900; };