@cdc/chart 4.26.5 → 4.26.6

package/src/components/Axis/LeftAxis.tsx

@@ -28,6 +28,7 @@ interface LeftAxisProps {
   xMax: number
   yAxisWidth: number
   numTicks: number
+  tickValues?: number[]
   tickLabelFontSize: number
   axisLabelFontSize: number
   handleLeftTickFormatting: (tick: any, index: number, ticks: any[]) => string
@@ -45,6 +46,7 @@ const LeftAxis: React.FC<LeftAxisProps> = ({
   xMax,
   yAxisWidth,
   numTicks,
+  tickValues,
   tickLabelFontSize,
   axisLabelFontSize,
   handleLeftTickFormatting,
@@ -71,6 +73,7 @@ const LeftAxis: React.FC<LeftAxisProps> = ({
       stroke='#333'
       tickFormat={handleLeftTickFormatting}
       numTicks={numTicks}
+      {...(tickValues ? { tickValues } : {})}
     >
       {props => {
         const axisCenter =

package/src/components/Axis/LeftAxisGridlines.tsx

@@ -10,6 +10,7 @@ interface LeftAxisGridlinesProps {
   xMax: number
   yAxisWidth: number
   numTicks: number
+  tickValues?: number[]
   axisLabelFontSize: number
 }
 
@@ -18,6 +19,7 @@ const LeftAxisGridlines: React.FC<LeftAxisGridlinesProps> = ({
   xMax,
   yAxisWidth,
   numTicks,
+  tickValues,
   axisLabelFontSize
 }) => {
   const { config } = useContext(ConfigContext)
@@ -27,7 +29,12 @@ const LeftAxisGridlines: React.FC<LeftAxisGridlinesProps> = ({
   const showSideTitle = config.yAxis.titlePlacement !== 'top'
 
   return (
-    <AxisLeft scale={yScale} left={yAxisWidth - config.yAxis.axisPadding} numTicks={numTicks}>
+    <AxisLeft
+      scale={yScale}
+      left={yAxisWidth - config.yAxis.axisPadding}
+      numTicks={numTicks}
+      {...(tickValues ? { tickValues } : {})}
+    >
       {props => {
         const axisCenter =
           config.orientation === 'horizontal'

package/src/components/Axis/RightAxis.tsx

@@ -15,6 +15,7 @@ type RightAxisProps = {
   yMax: number
   xMax: number
   yAxisWidth: number
+  tickValues?: number[]
   tickLabelFontSize: number
   axisLabelFontSize: number
 }
@@ -29,6 +30,7 @@ export const RightAxis: React.FC<RightAxisProps> = ({
   yMax,
   xMax,
   yAxisWidth,
+  tickValues,
   tickLabelFontSize,
   axisLabelFontSize
 }) => {
@@ -45,6 +47,7 @@ export const RightAxis: React.FC<RightAxisProps> = ({
       label={config.yAxis.rightLabel}
       tickFormat={tick => formatNumber(tick, 'right')}
       numTicks={runtime.yAxis.rightNumTicks || undefined}
+      {...(tickValues ? { tickValues } : {})}
       labelOffset={45}
     >
       {props => {

package/src/components/Axis/tests/AxisTickValues.test.tsx

@@ -0,0 +1,86 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import ConfigContext from '../../../ConfigContext'
+import { createMockChartContext, createMockConfig } from '../../LinearChart/tests/mockConfigContext'
+
+vi.mock('@visx/axis', () => ({
+  AxisLeft: ({ tickValues }: { tickValues?: number[] }) => (
+    <div data-testid='axis-left' data-tick-values={JSON.stringify(tickValues ?? null)} />
+  ),
+  AxisRight: ({ tickValues }: { tickValues?: number[] }) => (
+    <div data-testid='axis-right' data-tick-values={JSON.stringify(tickValues ?? null)} />
+  )
+}))
+
+import LeftAxis from '../LeftAxis'
+import LeftAxisGridlines from '../LeftAxisGridlines'
+import RightAxis from '../RightAxis'
+
+const tickValues = [0, 5, 10, 15]
+
+const renderWithContext = (children: React.ReactNode) => {
+  const config = createMockConfig({
+    runtime: {
+      ...createMockConfig().runtime,
+      yAxis: {
+        ...createMockConfig().runtime.yAxis,
+        rightNumTicks: 4
+      }
+    } as any
+  })
+
+  return render(<ConfigContext.Provider value={createMockChartContext(config)}>{children}</ConfigContext.Provider>)
+}
+
+describe('axis tick values', () => {
+  it('passes supplied tick values to the left axis', () => {
+    renderWithContext(
+      <LeftAxis
+        yScale={{}}
+        xScale={{}}
+        yMax={100}
+        xMax={300}
+        yAxisWidth={50}
+        numTicks={4}
+        tickValues={tickValues}
+        tickLabelFontSize={16}
+        axisLabelFontSize={16}
+        handleLeftTickFormatting={tick => String(tick)}
+      />
+    )
+
+    expect(JSON.parse(screen.getByTestId('axis-left').dataset.tickValues || 'null')).toEqual(tickValues)
+  })
+
+  it('passes supplied tick values to left-axis gridlines', () => {
+    renderWithContext(
+      <LeftAxisGridlines
+        yScale={{}}
+        xMax={300}
+        yAxisWidth={50}
+        numTicks={4}
+        tickValues={tickValues}
+        axisLabelFontSize={16}
+      />
+    )
+
+    expect(JSON.parse(screen.getByTestId('axis-left').dataset.tickValues || 'null')).toEqual(tickValues)
+  })
+
+  it('passes supplied tick values to the right axis', () => {
+    renderWithContext(
+      <RightAxis
+        yScaleRight={{} as any}
+        yMax={100}
+        xMax={300}
+        yAxisWidth={50}
+        tickValues={tickValues}
+        tickLabelFontSize={16}
+        axisLabelFontSize={16}
+      />
+    )
+
+    expect(JSON.parse(screen.getByTestId('axis-right').dataset.tickValues || 'null')).toEqual(tickValues)
+  })
+})