@cdc/chart 4.26.4 → 4.26.6

package/src/components/Annotations/tests/AnnotationDraggable.test.tsx

@@ -0,0 +1,198 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { describe, expect, it, beforeAll, vi } from 'vitest'
+import { scaleBand, scaleLinear } from '@visx/scale'
+import AnnotationDraggable, { EVENT_LINE_LABEL_OFFSET, snapEventLineDx } from '../components/AnnotationDraggable'
+import ConfigContext from '../../../ConfigContext'
+import { createMockChartContext } from '../../LinearChart/tests/mockConfigContext'
+
+// jsdom compat for visx (ResizeObserver + SVG bbox).
+vi.stubGlobal(
+  'ResizeObserver',
+  vi.fn(() => ({
+    observe: vi.fn(),
+    unobserve: vi.fn(),
+    disconnect: vi.fn()
+  }))
+)
+
+beforeAll(() => {
+  const mockBBox = { x: 0, y: 0, width: 100, height: 20 }
+  // @ts-expect-error mocking SVG method
+  SVGElement.prototype.getBBox = vi.fn(() => mockBBox)
+  // @ts-expect-error mocking SVG method
+  SVGElement.prototype.getBoundingClientRect = vi.fn(() => ({
+    x: 0,
+    y: 0,
+    width: 100,
+    height: 20,
+    top: 0,
+    left: 0,
+    right: 100,
+    bottom: 20
+  }))
+})
+
+const buildScales = (xMax: number, yMax: number) => ({
+  xScale: scaleBand({ domain: ['Jan', 'Feb'], range: [0, xMax], padding: 0 }),
+  yScale: scaleLinear({ domain: [0, 100], range: [yMax, 0] }),
+  xScaleAnnotation: scaleLinear({ domain: [0, 100], range: [0, xMax] }),
+  yScaleAnnotation: scaleLinear({ domain: [0, 100], range: [0, yMax] })
+})
+
+const baseEventLineAnnotation = {
+  text: 'Voting Rights Act',
+  style: 'event-line',
+  anchorMode: 'data',
+  dataX: 'Jan',
+  x: 50,
+  y: 50,
+  dx: 12,
+  dy: 0,
+  opacity: 100,
+  colors: { connector: '#444', label: '#000' },
+  edit: { subject: false, label: true },
+  anchor: { horizontal: false, vertical: false },
+  connectionType: 'line' as const,
+  marker: 'arrow' as const,
+  snapToSubject: false,
+  lineType: 'curveLinear'
+}
+
+const renderAnnotationDraggable = (annotation: any, xMax = 800, yMax = 400) => {
+  const data = [
+    { month: 'Jan', value: 50 },
+    { month: 'Feb', value: 75 }
+  ]
+  const context = createMockChartContext(
+    {
+      annotations: [annotation],
+      visualizationType: 'Line',
+      xAxis: { type: 'categorical', dataKey: 'month' } as any,
+      series: [{ dataKey: 'value', type: 'Line' }] as any,
+      data,
+      general: { showAnnotationDropdown: false, mobileAnnotationDisplay: 'symbol' } as any
+    } as any,
+    {
+      transformedData: data,
+      visibleAnnotations: [annotation]
+    }
+  )
+
+  const scales = buildScales(xMax, yMax)
+  return render(
+    <ConfigContext.Provider value={context as any}>
+      <svg width={xMax} height={yMax}>
+        <AnnotationDraggable
+          {...scales}
+          xMax={xMax}
+          yMax={yMax}
+          seriesScale={undefined}
+          svgRef={{ current: null } as any}
+          onDragStateChange={() => {}}
+        />
+      </svg>
+    </ConfigContext.Provider>
+  )
+}
+
+describe('AnnotationDraggable - event-line style', () => {
+  it('renders a full-height vertical line that spans 0..yMax', () => {
+    const { container } = renderAnnotationDraggable(baseEventLineAnnotation)
+
+    const line = container.querySelector('line.annotation__event-line')
+    expect(line).toBeTruthy()
+    expect(line?.getAttribute('y1')).toBe('0')
+    expect(line?.getAttribute('y2')).toBe('400')
+  })
+
+  it('strokes the vertical line with the axis color (#333), ignoring colors.connector', () => {
+    const { container } = renderAnnotationDraggable({
+      ...baseEventLineAnnotation,
+      colors: { connector: '#ff0000', label: '#000' }
+    })
+
+    const line = container.querySelector('line.annotation__event-line')
+    expect(line?.getAttribute('stroke')).toBe('#333')
+  })
+
+  it('uses the right-side label class (text-align left) when dx >= 0', () => {
+    const { container } = renderAnnotationDraggable({
+      ...baseEventLineAnnotation,
+      dx: 12
+    })
+
+    expect(container.querySelector('.cove-annotation-event-line__label--right')).toBeTruthy()
+    expect(container.querySelector('.cove-annotation-event-line__label--left')).toBeFalsy()
+  })
+
+  it('uses the left-side label class (text-align right) when dx < 0', () => {
+    const { container } = renderAnnotationDraggable({
+      ...baseEventLineAnnotation,
+      dx: -12
+    })
+
+    expect(container.querySelector('.cove-annotation-event-line__label--left')).toBeTruthy()
+    expect(container.querySelector('.cove-annotation-event-line__label--right')).toBeFalsy()
+  })
+
+  it('does not render a callout marker (no .circle-subject) for event-line', () => {
+    const { container } = renderAnnotationDraggable({
+      ...baseEventLineAnnotation,
+      marker: 'circle' as const
+    })
+
+    expect(container.querySelector('.circle-subject')).toBeFalsy()
+  })
+})
+
+describe('snapEventLineDx', () => {
+  it('snaps any positive value to +EVENT_LINE_LABEL_OFFSET', () => {
+    expect(snapEventLineDx(0)).toBe(EVENT_LINE_LABEL_OFFSET)
+    expect(snapEventLineDx(1)).toBe(EVENT_LINE_LABEL_OFFSET)
+    expect(snapEventLineDx(47)).toBe(EVENT_LINE_LABEL_OFFSET)
+    expect(snapEventLineDx(9999)).toBe(EVENT_LINE_LABEL_OFFSET)
+  })
+
+  it('snaps any negative value to -EVENT_LINE_LABEL_OFFSET', () => {
+    expect(snapEventLineDx(-1)).toBe(-EVENT_LINE_LABEL_OFFSET)
+    expect(snapEventLineDx(-47)).toBe(-EVENT_LINE_LABEL_OFFSET)
+    expect(snapEventLineDx(-9999)).toBe(-EVENT_LINE_LABEL_OFFSET)
+  })
+})
+
+describe('AnnotationDraggable - event-line dx snapping at render', () => {
+  it('still uses right-side class when stored dx is a large positive value', () => {
+    const { container } = renderAnnotationDraggable({
+      ...baseEventLineAnnotation,
+      dx: 47
+    })
+
+    expect(container.querySelector('.cove-annotation-event-line__label--right')).toBeTruthy()
+    expect(container.querySelector('.cove-annotation-event-line__label--left')).toBeFalsy()
+  })
+
+  it('still uses left-side class when stored dx is a large negative value', () => {
+    const { container } = renderAnnotationDraggable({
+      ...baseEventLineAnnotation,
+      dx: -47
+    })
+
+    expect(container.querySelector('.cove-annotation-event-line__label--left')).toBeTruthy()
+    expect(container.querySelector('.cove-annotation-event-line__label--right')).toBeFalsy()
+  })
+})
+
+describe('AnnotationDraggable - callout style (regression)', () => {
+  it('still renders a callout annotation without a full-height event line', () => {
+    const calloutAnnotation = {
+      ...baseEventLineAnnotation,
+      style: 'callout' as const,
+      anchorMode: 'fixed' as const,
+      dataX: undefined
+    }
+    const { container } = renderAnnotationDraggable(calloutAnnotation)
+
+    expect(container.querySelector('line.annotation__event-line')).toBeFalsy()
+  })
+})

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,
@@ -60,6 +62,7 @@ const LeftAxis: React.FC<LeftAxisProps> = ({
   const isLogarithmicAxis = config.yAxis.type === 'logarithmic'
   const { labelsAboveGridlines, hideAxis, inlineLabel } = config.yAxis
   const inlineLabelHasNoSpace = !inlineLabel?.includes(' ')
+  const showSideTitle = config.yAxis.titlePlacement !== 'top'
 
   return (
     <VisxAxisLeft
@@ -70,6 +73,7 @@ const LeftAxis: React.FC<LeftAxisProps> = ({
       stroke='#333'
       tickFormat={handleLeftTickFormatting}
       numTicks={numTicks}
+      {...(tickValues ? { tickValues } : {})}
     >
       {props => {
         const axisCenter =
@@ -381,17 +385,19 @@ const LeftAxis: React.FC<LeftAxisProps> = ({
                 })
               })()}
 
-            <Text
-              className='y-label'
-              textAnchor='middle'
-              verticalAnchor='start'
-              transform={`translate(${-1 * yAxisWidth}, ${axisCenter}) rotate(-90)`}
-              fontWeight='bold'
-              fill={config.yAxis.labelColor}
-              fontSize={axisLabelFontSize}
-            >
-              {!config.hideYAxisLabel ? props.label : null}
-            </Text>
+            {showSideTitle && (
+              <Text
+                className='y-label'
+                textAnchor='middle'
+                verticalAnchor='start'
+                transform={`translate(${-1 * yAxisWidth}, ${axisCenter}) rotate(-90)`}
+                fontWeight='bold'
+                fill={config.yAxis.labelColor}
+                fontSize={axisLabelFontSize}
+              >
+                {!config.hideYAxisLabel ? props.label : null}
+              </Text>
+            )}
           </Group>
         )
       }}

package/src/components/Axis/LeftAxisGridlines.tsx

@@ -10,6 +10,7 @@ interface LeftAxisGridlinesProps {
   xMax: number
   yAxisWidth: number
   numTicks: number
+  tickValues?: number[]
   axisLabelFontSize: number
 }
 
@@ -18,15 +19,22 @@ const LeftAxisGridlines: React.FC<LeftAxisGridlinesProps> = ({
   xMax,
   yAxisWidth,
   numTicks,
+  tickValues,
   axisLabelFontSize
 }) => {
   const { config } = useContext(ConfigContext)
   const { runtime } = config
 
   const isLogarithmicAxis = config.yAxis.type === 'logarithmic'
+  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'
@@ -54,17 +62,19 @@ const LeftAxisGridlines: React.FC<LeftAxisGridlinesProps> = ({
                 </Group>
               )
             })}
-            <Text
-              className='y-label'
-              textAnchor='middle'
-              verticalAnchor='start'
-              transform={`translate(${-1 * yAxisWidth}, ${axisCenter}) rotate(-90)`}
-              fontWeight='bold'
-              fill={config.yAxis.labelColor}
-              fontSize={axisLabelFontSize}
-            >
-              {!config.hideYAxisLabel ? props.label : null}
-            </Text>
+            {showSideTitle && (
+              <Text
+                className='y-label'
+                textAnchor='middle'
+                verticalAnchor='start'
+                transform={`translate(${-1 * yAxisWidth}, ${axisCenter}) rotate(-90)`}
+                fontWeight='bold'
+                fill={config.yAxis.labelColor}
+                fontSize={axisLabelFontSize}
+              >
+                {!config.hideYAxisLabel ? props.label : null}
+              </Text>
+            )}
           </Group>
         )
       }}

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)
+  })
+})