@cdc/chart 4.26.3 → 4.26.5

package/src/components/LinearChart/tests/LinearChart.test.tsx

@@ -67,6 +67,26 @@ const renderLinearChart = (
   )
 }
 
+const getLeftAxisLabelTransforms = container =>
+  Array.from(container.querySelectorAll('.left-axis text.y-label'))
+    .map(label => label.getAttribute('transform'))
+    .filter(Boolean)
+
+const sidePlacementYAxis = {
+  hideAxis: false,
+  hideLabel: false,
+  hideTicks: false,
+  size: '50',
+  gridLines: true,
+  label: 'Y-Axis',
+  titlePlacement: 'side',
+  tickRotation: 0,
+  anchors: [],
+  axisPadding: 0,
+  labelPlacement: 'On Date/Category Axis',
+  rightAxisSize: 0
+}
+
 describe('LinearChart', () => {
   describe('rendering', () => {
     it('renders without crashing', () => {
@@ -233,30 +253,231 @@ describe('LinearChart', () => {
       expect(leftAxis).toBeTruthy()
     })
 
+    it('does not render the side y-axis title inside the svg when titlePlacement is top', () => {
+      const { container } = renderLinearChart()
+
+      expect(container.querySelector('.left-axis text.y-label')).toBeFalsy()
+    })
+
+    it('does not render the top y-axis title inside LinearChart when titlePlacement is top', () => {
+      const { container } = renderLinearChart()
+
+      expect(container.querySelector('.y-axis-top-title')).toBeFalsy()
+    })
+
+    it('renders the side y-axis title inside the svg when titlePlacement is side', () => {
+      const { container } = renderLinearChart({
+        yAxis: sidePlacementYAxis
+      })
+
+      expect(container.querySelector('.y-axis-top-title')).toBeFalsy()
+      expect(container.querySelector('.left-axis text.y-label')).toBeTruthy()
+    })
+
     it('renders bottom axis group', () => {
       const { container } = renderLinearChart()
       const bottomAxis = container.querySelector('.bottom-axis')
       expect(bottomAxis).toBeTruthy()
     })
 
+    it('uses vizViewport for x-axis viewport tick overrides', () => {
+      const data = [
+        { Date: '2024-01-01', Value: 1 },
+        { Date: '2024-02-01', Value: 2 },
+        { Date: '2024-03-01', Value: 3 },
+        { Date: '2024-04-01', Value: 4 },
+        { Date: '2024-05-01', Value: 5 },
+        { Date: '2024-06-01', Value: 6 }
+      ]
+
+      const { container } = renderLinearChart(
+        {
+          data,
+          preliminaryData: [],
+          series: [{ dataKey: 'Value', axis: 'Left' }],
+          xAxis: {
+            type: 'date',
+            dataKey: 'Date',
+            label: 'X-Axis',
+            hideAxis: false,
+            hideLabel: false,
+            hideTicks: false,
+            size: '50',
+            tickRotation: 0,
+            maxTickRotation: 90,
+            anchors: [],
+            axisPadding: 0,
+            dateParseFormat: '%Y-%m-%d',
+            dateDisplayFormat: '%b %Y'
+          },
+          runtime: {
+            xAxis: {
+              type: 'date',
+              dataKey: 'Date',
+              label: 'X-Axis',
+              numTicks: 6,
+              viewportNumTicks: { xxs: 2 }
+            },
+            yAxis: {
+              size: 50,
+              label: 'Y-Axis',
+              gridLines: true
+            },
+            originalXAxis: {
+              dataKey: 'Date'
+            },
+            series: [{ dataKey: 'Value', axis: 'Left' }],
+            seriesKeys: ['Value'],
+            seriesLabels: { Value: 'Value' },
+            seriesLabelsAll: ['Value'],
+            uniqueId: 'test-chart'
+          }
+        },
+        {
+          currentViewport: 'lg',
+          vizViewport: 'xxs',
+          colorScale: () => '#000',
+          transformedData: data,
+          tableData: data
+        }
+      )
+
+      expect(container.querySelectorAll('.bottom-axis .vx-axis-tick')).toHaveLength(2)
+    })
+
     it('hides Y axis when hideAxis is true', () => {
       const { container } = renderLinearChart({
         yAxis: {
-          hideAxis: true,
+          ...sidePlacementYAxis,
+          hideAxis: true
+        }
+      })
+      // The axis line should be hidden, but grid lines may still render
+      expect(container.querySelector('svg')).toBeTruthy()
+    })
+
+    it('ignores yAxis.labelOffset when positioning the vertical left-axis title', () => {
+      const baseRuntime = {
+        xAxis: {
+          type: 'date',
+          dataKey: 'Date',
+          label: 'X-Axis'
+        },
+        yAxis: {
+          size: 50,
+          label: 'Y-Axis',
+          gridLines: true,
+          labelOffset: 0
+        },
+        originalXAxis: {
+          dataKey: 'Date'
+        },
+        series: [],
+        seriesKeys: [],
+        seriesLabelsAll: [],
+        uniqueId: 'test-chart'
+      }
+
+      const baseRender = renderLinearChart({
+        yAxis: {
+          ...sidePlacementYAxis,
+          labelOffset: 0
+        },
+        runtime: baseRuntime
+      })
+      const offsetRender = renderLinearChart({
+        yAxis: {
+          ...sidePlacementYAxis,
+          labelOffset: 240
+        },
+        runtime: {
+          ...baseRuntime,
+          yAxis: {
+            ...baseRuntime.yAxis,
+            labelOffset: 240
+          }
+        }
+      })
+
+      const baseTransforms = getLeftAxisLabelTransforms(baseRender.container)
+      const offsetTransforms = getLeftAxisLabelTransforms(offsetRender.container)
+
+      expect(baseTransforms.length).toBeGreaterThan(0)
+      expect(offsetTransforms).toEqual(baseTransforms)
+    })
+
+    it('ignores horizontal xAxis.labelOffset when positioning the left-side axis title', () => {
+      const baseRuntime = {
+        xAxis: {
+          type: 'linear',
+          dataKey: 'Value',
+          label: 'X-Axis'
+        },
+        yAxis: {
+          size: 50,
+          label: 'Y-Axis',
+          gridLines: true,
+          labelOffset: 0
+        },
+        originalXAxis: {
+          dataKey: 'Date'
+        },
+        series: [],
+        seriesKeys: [],
+        seriesLabelsAll: [],
+        uniqueId: 'test-chart'
+      }
+
+      const baseRender = renderLinearChart({
+        orientation: 'horizontal',
+        xAxis: {
+          type: 'linear',
+          dataKey: 'Value',
+          label: 'X-Axis',
+          hideAxis: false,
+          hideLabel: false,
+          hideTicks: false,
+          size: '50',
+          tickRotation: 0,
+          maxTickRotation: 90,
+          anchors: [],
+          axisPadding: 0,
+          labelOffset: 0
+        },
+        yAxis: sidePlacementYAxis,
+        runtime: baseRuntime
+      })
+      const offsetRender = renderLinearChart({
+        orientation: 'horizontal',
+        xAxis: {
+          type: 'linear',
+          dataKey: 'Value',
+          label: 'X-Axis',
+          hideAxis: false,
           hideLabel: false,
           hideTicks: false,
           size: '50',
-          gridLines: true,
-          label: 'Y-Axis',
           tickRotation: 0,
+          maxTickRotation: 90,
           anchors: [],
           axisPadding: 0,
-          labelPlacement: 'On Date/Category Axis',
-          rightAxisSize: 0
+          labelOffset: 240
+        },
+        yAxis: sidePlacementYAxis,
+        runtime: {
+          ...baseRuntime,
+          yAxis: {
+            ...baseRuntime.yAxis,
+            labelOffset: 240
+          }
         }
       })
-      // The axis line should be hidden, but grid lines may still render
-      expect(container.querySelector('svg')).toBeTruthy()
+
+      const baseTransforms = getLeftAxisLabelTransforms(baseRender.container)
+      const offsetTransforms = getLeftAxisLabelTransforms(offsetRender.container)
+
+      expect(baseTransforms.length).toBeGreaterThan(0)
+      expect(offsetTransforms).toEqual(baseTransforms)
     })
   })
 

package/src/components/LinearChart/tests/mockConfigContext.ts

@@ -34,6 +34,7 @@ export const createMockConfig = (overrides: Partial<ChartConfig> = {}): ChartCon
       size: '50',
       gridLines: true,
       label: 'Y-Axis',
+      titlePlacement: 'top',
       tickRotation: 0,
       anchors: [],
       axisPadding: 0,