tweak(tupaiaWeb): RN-249: getting x-Name in viz export

packages/ui-chart-components/src/components/Axes/VerticalTick.tsx

@@ -23,8 +23,11 @@ interface VerticalTickProps {
 export const VerticalTick = ({ x, y, payload }: VerticalTickProps) => {
   const stringVal =
     payload.value !== undefined && payload.value !== null ? String(payload.value) : '';
+  const marginX = 10; 
+  const marginY = 5; 
+
   return (
-    <g transform={`translate(${x - 5},${y + 3})`}>
+    <g transform={`translate(${x + marginX},${y - marginY})`}>
       <text
         fontSize="13px"
         transform="rotate(305)"

packages/ui-chart-components/src/components/Axes/XAxis.tsx

@@ -1,6 +1,6 @@
 /*
  * Tupaia
- * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
 import React from 'react';
@@ -41,13 +41,13 @@ const renderXAxisLabel = (
   label: string | undefined,
   fillColor: string | undefined,
   isEnlarged: boolean,
-  isExporting: boolean,
+  isExporting: boolean
 ): LabelProps | undefined => {
-  if (label && isEnlarged && !isExporting) {
+  if (label && isEnlarged) {
     return {
       value: label,
       fill: fillColor,
-      offset: -5,
+      offset: isExporting ? -50 : -5,
       position: 'insideBottom',
     };
   }
@@ -76,6 +76,7 @@ interface XAxisProps {
 
 export const XAxis = ({ config, report, isExporting = false, isEnlarged = false }: XAxisProps) => {
   const fillColor = isExporting ? DARK_BLUE : getContrastTextColor();
+  const tickMargin = isExporting ? 20 : 0;
   const { Bar, Composed } = ChartType;
   const { chartType, chartConfig } = config;
   const { data = [] } = report;
@@ -154,6 +155,7 @@ export const XAxis = ({ config, report, isExporting = false, isEnlarged = false
     return { left: 0, right: 10 };
   };
 
+
   const renderVerticalTick = (tickProps: TickProps & { x: number; y: number }) => {
     const { payload, x, y } = tickProps;
 
@@ -177,7 +179,7 @@ export const XAxis = ({ config, report, isExporting = false, isEnlarged = false
       tick={getXAxisTickMethod()}
       tickFormatter={formatXAxisTick}
       padding={getXAxisPadding()}
-      tickSize={6}
+      tickMargin={tickMargin}
       {...(isTimeSeries ? AXIS_TIME_PROPS : { dataKey: 'name' })}
     />
   );

packages/ui-chart-components/src/components/CartesianChart.tsx

@@ -74,9 +74,9 @@ const getRealDataKeys = (chartConfig: CartesianChartConfig['chartConfig'] | {})
 const getLegendAlignment = (
   legendPosition: LegendPosition,
   isExporting: boolean,
-): Pick<LegendProps, 'align' | 'verticalAlign' | 'layout'> => {
+): Pick<LegendProps, 'align' | 'verticalAlign'> => {
   if (isExporting) {
-    return { verticalAlign: 'top', align: 'right', layout: 'vertical' };
+    return { verticalAlign: 'top', align: 'right' };
   }
   if (legendPosition === 'bottom') {
     return { verticalAlign: 'bottom', align: 'center' };
@@ -218,7 +218,7 @@ export const CartesianChart = ({
   const aspect = !isEnlarged && !isMobileSize && !isExporting ? 1.6 : undefined;
   const height = getHeight(isExporting, isEnlarged, hasLegend, isMobileSize);
 
-  const { verticalAlign, align, layout } = getLegendAlignment(legendPosition, isExporting);
+  const { verticalAlign, align } = getLegendAlignment(legendPosition, isExporting);
 
   const presentationOptions = 'presentationOptions' in config ? config.presentationOptions : {};
 
@@ -252,7 +252,6 @@ export const CartesianChart = ({
           <Legend
             verticalAlign={verticalAlign}
             align={align}
-            layout={layout}
             content={getCartesianLegend({
               chartConfig,
               getIsActiveKey,

packages/ui-chart-components/src/components/Reference/Legend.tsx

@@ -15,19 +15,13 @@ import { isMobile } from '../../utils';
 
 const LegendContainer = styled.div<{
   $position?: LegendPosition;
-  $isExporting?: boolean;
 }>`
   display: flex;
-  flex-wrap: ${props => (props.$isExporting ? 'nowrap' : 'wrap')};
-  justify-content: ${props => (props.$position === 'bottom' ? 'center' : 'flex-start')};
-  flex-direction: ${props => (props.$isExporting ? 'column' : 'row')};
+  flex-wrap: wrap;
+  justify-content: center;
+  flex-direction: row;
   // Add more padding at the bottom for exports
-  padding: ${props => {
-    if (props.$isExporting) {
-      return '1em';
-    }
-    return props.$position === 'bottom' ? '1rem 0 0 3.5rem' : '0 0 2rem 0';
-  }};
+  padding: ${props => (props.$position === 'bottom' ? '1em 0 0 3.5em' : '0 0 3em 0')};
 `;
 
 const PieLegendContainer = styled(LegendContainer)`
@@ -55,7 +49,7 @@ const LegendItem = styled(({ isExporting, ...props }) => <MuiButton {...props} /
   .MuiButton-label {
     display: flex;
     white-space: nowrap;
-    align-items: ${isExporting => (isExporting ? 'left' : 'center')};
+    align-items: center;
     color: ${({ theme, isExporting }) => getLegendTextColor(theme, isExporting)};
     > div {
       width: ${isExporting => (isExporting ? '100%' : '')};
@@ -129,7 +123,7 @@ export const getPieLegend =
   ({ payload }: any) => {
     const isMobileSize = isMobile(isExporting);
     return (
-      <PieLegendContainer $position={legendPosition} $isExporting={isExporting}>
+      <PieLegendContainer $position={isExporting ? 'top' : legendPosition}>
         {payload.map(({ color, value, payload: item }: TooltipPayload) => {
           const displayValue = getPieLegendDisplayValue(
             value,
@@ -173,7 +167,7 @@ export const getCartesianLegend =
   ({ payload }: any) => {
     const isMobileSize = isMobile(isExporting);
     return (
-      <LegendContainer $position={legendPosition} $isExporting={isExporting}>
+      <LegendContainer $position={isExporting ? 'top' : legendPosition}>
         {payload.map(({ color, value, dataKey }: TooltipPayload) => {
           // check the type here because according to TooltipPayload, value can be a number or a readonly string | number array
           const displayValue = (typeof value === 'string' && chartConfig?.[value]?.label) || value;