Leave space for y-axis labels

Author: jayb

packages/chart/src/components/LinearChart.tsx

@@ -34,7 +34,7 @@ import { isLegendWrapViewport, isMobileFontViewport } from '@cdc/core/helpers/vi
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 import { calcInitialHeight, handleAutoPaddingRight } from '../helpers/sizeHelpers'
 import { filterAndShiftLinearDateTicks } from '../helpers/filterAndShiftLinearDateTicks'
-import { calculateHorizontalBarYAxisWidth } from '../helpers/calculateHorizontalBarYAxisWidth'
+import { calculateHorizontalBarCategoryLabelWidth } from '../helpers/calculateHorizontalBarCategoryLabelWidth'
 
 // Hooks
 import useReduceData from '../hooks/useReduceData'
@@ -248,9 +248,9 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     currentViewport
   })
 
-  // Calculate dynamic Y-axis width for horizontal bar charts
-  const calculatedYAxisWidth = useMemo(() => {
-    return calculateHorizontalBarYAxisWidth({
+  // Calculate category label space for horizontal bar charts
+  const categoryLabelSpace = useMemo(() => {
+    return calculateHorizontalBarCategoryLabelWidth({
       yScale,
       parentWidth,
       formatDate,
@@ -261,8 +261,9 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     })
   }, [isHorizontal, config.visualizationType, config.yAxis.labelPlacement, yScale, parentWidth])
 
+  const horizontalYAxisLabelSpace = runtime.yAxis.label && !config.hideYAxisLabel ? 30 : 0
   if (isHorizontal && config.visualizationType === 'Bar' && !config.isLollipopChart) {
-    runtime.yAxis.size = calculatedYAxisWidth
+    runtime.yAxis.size = categoryLabelSpace + horizontalYAxisLabelSpace
   }
 
   const [yTickCount, xTickCount] = ['yAxis', 'xAxis'].map(axis =>
@@ -1184,12 +1185,12 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
 
                               return (
                                 <Text
-                                  x={tick.to.x - Number(runtime.yAxis.size) + 8}
+                                  x={tick.from.x - Number(runtime.yAxis.size) + horizontalYAxisLabelSpace}
                                   y={labelCenterY}
                                   verticalAnchor={'middle'}
                                   textAnchor={'start'}
                                   fontSize={tickLabelFontSize}
-                                  width={Number(runtime.yAxis.size)}
+                                  width={categoryLabelSpace}
                                   lineHeight={'1.2em'}
                                 >
                                   {tick.formattedValue}

packages/chart/src/helpers/calculateHorizontalBarYAxisWidth.ts renamed to packages/chart/src/helpers/calculateHorizontalBarCategoryLabelWidth.ts

@@ -1,6 +1,6 @@
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 
-interface CalculateHorizontalBarYAxisWidthProps {
+interface CalculateHorizontalBarCategoryLabelWidthProps {
   yScale: any
   parentWidth: number
   formatDate: Function
@@ -11,20 +11,20 @@ interface CalculateHorizontalBarYAxisWidthProps {
 }
 
 /**
- * Helper function to calculate dynamic Y-axis width for horizontal bar charts
+ * Helper function to calculate category label space for horizontal bar charts
  *
  * @param props Configuration object with chart properties
- * @returns Calculated Y-axis width, capped at 30% of parent width
+ * @returns Calculated category label space, capped at 30% of parent width
  */
-export const calculateHorizontalBarYAxisWidth = ({
+export const calculateHorizontalBarCategoryLabelWidth = ({
   yScale,
   parentWidth,
   formatDate,
   parseDate,
   tickLabelFont,
   xAxisType,
   labelPlacement
-}: CalculateHorizontalBarYAxisWidthProps): number => {
+}: CalculateHorizontalBarCategoryLabelWidthProps): number => {
   if (labelPlacement !== 'On Date/Category Axis') return 0
 
   const categoryValues = yScale.domain()