fix export styles (#4727)

beyondessential · Jul 12, 2023 · 4e75c0a · 4e75c0a
1 parent c7c874a
commit 4e75c0a
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -140,7 +140,7 @@ export const getPieLegend = ({
   legendPosition,
   viewContent,
 }: PieLegendProps) => ({ payload }: any) => {
-  const isMobileSize = isMobile();
+  const isMobileSize = isMobile(isExporting);
   return (
     <PieLegendContainer $position={legendPosition} $isExporting={isExporting}>
       {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 (
     <LegendContainer $position={legendPosition} $isExporting={isExporting}>
       {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
@@ -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;
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -145,7 +145,7 @@ export const CartesianChart = ({ @@
         }, 50);
       }, []);
-      const isMobileSize = isMobile();
+      const isMobileSize = isMobile(isExporting);
       const {
         chartType: defaultChartType,
@@ Expand Down @@