@cdc/chart 4.26.7 → 4.26.10

package/src/_stories/ChartBrush.Editor.stories.tsx

@@ -98,6 +98,27 @@ export const BrushDefaultSelectionTests: Story = {
       }
     )
 
+    const hideHatchingCheckbox = canvas.getByLabelText(/hide diagonal hatching/i) as HTMLInputElement
+    const getBrushHatchingState = () => {
+      const brushExtent = canvasElement.querySelector('.visx-brush rect[class*="selection"]') as SVGRectElement
+
+      return {
+        checked: hideHatchingCheckbox.checked,
+        fill: brushExtent?.getAttribute('fill') || brushExtent?.style.fill || ''
+      }
+    }
+
+    expect(hideHatchingCheckbox.checked).toBe(false)
+    expect(hideHatchingCheckbox.classList.contains('ms-4')).toBe(true)
+    expect(getBrushHatchingState().fill).toContain('brush_pattern')
+
+    await performAndAssert(
+      'Hide Diagonal Hatching - Brush selection becomes transparent',
+      getBrushHatchingState,
+      async () => await userEvent.click(hideHatchingCheckbox),
+      (before, after) => !before.checked && after.checked && after.fill === 'transparent'
+    )
+
     // ============================================================================
     // TEST: Default Recent Date Count Input
     // Verifies: When "Show last X dates" is set, the brush selection changes
@@ -128,42 +149,34 @@ export const BrushDefaultSelectionTests: Story = {
       const totalBrushWidth = brushSvg ? brushSvg.clientWidth || brushWidthAttr : 0
       const countInput = canvasElement.querySelector('input[id*="brushDefaultRecentDateCount"]') as HTMLInputElement
 
-      // Get the visible data points in the main chart (lines or bars)
-      const chartSvg = canvasElement.querySelector('.linear-chart svg, .cove-chart svg') as SVGSVGElement
-      const dataPointsInChart = chartSvg?.querySelectorAll('circle, rect:not([fill="transparent"])').length || 0
-
       return {
         brushWidth: brushExtent ? parseFloat(brushExtent.getAttribute('width') || '0') : 0,
         brushX: brushExtent ? parseFloat(brushExtent.getAttribute('x') || '0') : 0,
         totalBrushWidth,
-        visibleDataPoints: dataPointsInChart,
-        defaultRecentDateCountValue: countInput?.value || '',
-        selectionPercentage:
-          brushExtent && totalBrushWidth > 0
-            ? (parseFloat(brushExtent.getAttribute('width') || '0') / totalBrushWidth) * 100
-            : 0
+        defaultRecentDateCountValue: countInput?.value || ''
       }
     }
 
     const initialSelectionState = getBrushSelectionState()
+    const selectionMatchesRecentDateCount = (state: ReturnType<typeof getBrushSelectionState>, count: number) => {
+      const expectedWidth = (state.totalBrushWidth * count) / brushEnabledConfig.data.length
+      const rightEdge = state.brushX + state.brushWidth
+
+      return Math.abs(state.brushWidth - expectedWidth) <= 2 && Math.abs(rightEdge - state.totalBrushWidth) <= 2
+    }
 
     // Default is ~35% of the width
-    // With 329 data points in brush_enabled.json, 35% would be ~115 points
-    // Setting to 30 should make the selection much narrower AND update immediately
+    // With 253 data points in brush_enabled.json, 35% is about 89 points.
+    // Setting the count to 30 should make the selection narrower and update immediately.
     await performAndAssert(
       'Set Default Recent Date Count to 30 - Brush Updates Dynamically',
       getBrushSelectionState,
       async () => {
-        await userEvent.clear(recentDateCountInput)
         await userEvent.type(recentDateCountInput, '30')
-        // Trigger change/blur to apply the value - this should update the brush immediately
         await userEvent.tab()
       },
       (before, after) => {
-        // The brush selection width should decrease when we set a smaller count
-        // Since we have ~329 data points and default is 35% (~115 points),
-        // setting to 30 points should make the selection narrower
-        return after.brushWidth < before.brushWidth || after.selectionPercentage < before.selectionPercentage
+        return after.brushWidth < before.brushWidth && selectionMatchesRecentDateCount(after, 30)
       }
     )
 
@@ -172,66 +185,32 @@ export const BrushDefaultSelectionTests: Story = {
     // Verifies: Multiple changes continue to update the brush dynamically
     // ============================================================================
 
+    // Wait for the debounced clear to reach the chart before typing the next value.
+    // Otherwise the pending empty value can overwrite the newly typed count under CI load.
     await performAndAssert(
-      'Change to 50 dates - Brush Expands Dynamically',
+      'Clear Default Recent Date Count',
       getBrushSelectionState,
       async () => {
         await userEvent.clear(recentDateCountInput)
-        await userEvent.type(recentDateCountInput, '50')
         await userEvent.tab()
       },
       (before, after) => {
-        // Changing from 30 to 50 should expand the brush width
-        return after.defaultRecentDateCountValue === '50' && after.brushWidth > before.brushWidth
+        const widthDeltaFromInitial = Math.abs(after.brushWidth - initialSelectionState.brushWidth)
+        return after.brushWidth > before.brushWidth && widthDeltaFromInitial <= 2
       }
     )
 
-    // ============================================================================
-    // TEST: Verify Exact Data Point Count in Selection
-    // Verifies: The number of selected data points matches the input value
-    // ============================================================================
-
-    // The brush selection should now show exactly 30 data points
-    // We can verify this by checking the filtered data in the visualization
-    const getSelectedDataPointCount = () => {
-      // When brush is active, only the selected data points are rendered in the main chart
-      // Look for the number of data points (circles, bars, or line path points)
-      const chartContainer = canvasElement.querySelector('.linear-chart, .cove-chart')
-      const svg = chartContainer?.querySelector('svg')
-
-      // For line charts, count the line path data points
-      const linePaths = svg?.querySelectorAll('path[class*="line"], .visx-linepath')
-      let dataPointCount = 0
-
-      if (linePaths && linePaths.length > 0) {
-        // Count points in the path by looking at the rendered circles
-        const circles = svg?.querySelectorAll('circle')
-        dataPointCount = circles?.length || 0
-      }
-
-      // For bar charts
-      const bars = svg?.querySelectorAll('rect[class*="bar"]')
-      if (bars && bars.length > 0) {
-        dataPointCount = bars.length
-      }
-
-      return {
-        dataPointCount,
-        hasData: dataPointCount > 0
+    await performAndAssert(
+      'Set to 50 dates - Brush Updates Dynamically',
+      getBrushSelectionState,
+      async () => {
+        await userEvent.type(recentDateCountInput, '50')
+        await userEvent.tab()
+      },
+      (before, after) => {
+        return after.brushWidth < before.brushWidth && selectionMatchesRecentDateCount(after, 50)
       }
-    }
-
-    // After setting to 30, the chart should show ~30 data points
-    // (exact count may vary based on how brush boundaries align with data points)
-    const afterSettingCount = getSelectedDataPointCount()
-
-    // The count should be close to 30 (allowing some tolerance for edge cases)
-    // Note: This assertion helps verify the feature works - if it fails,
-    // the implementation needs adjustment
-    if (afterSettingCount.hasData) {
-      expect(afterSettingCount.dataPointCount).toBeGreaterThan(0)
-      expect(afterSettingCount.dataPointCount).toBeLessThanOrEqual(35) // 30 + tolerance
-    }
+    )
   }
 }
 

package/src/_stories/ChartBrush.Regression.stories.tsx

@@ -0,0 +1,135 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, waitFor } from 'storybook/test'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
+import Chart from '../CdcChartComponent'
+import brushEnabledConfig from './_mock/brush_enabled.json'
+
+const brushEffectConfig = {
+  ...brushEnabledConfig,
+  title: 'Brush Slider with Limited Coverage Markers',
+  xAxis: {
+    ...brushEnabledConfig.xAxis,
+    type: 'date',
+    brushDefaultRecentDateCount: 4
+  },
+  data: brushEnabledConfig.data.slice(0, 8).map(row => ({
+    ...row,
+    Coverage: 'Limited Coverage'
+  })),
+  preliminaryData: [
+    {
+      type: 'effect',
+      seriesKeys: ['Production'],
+      label: 'Limited Coverage',
+      column: 'Coverage',
+      value: 'Limited Coverage',
+      style: 'Open Circles',
+      displayTooltip: true,
+      displayLegend: true,
+      displayTable: true,
+      circleSize: 4
+    }
+  ]
+}
+
+const brushSuppressionConfig = {
+  ...brushEnabledConfig,
+  title: 'Brush Slider with Suppressed Bars',
+  visualizationType: 'Bar',
+  visualizationSubType: 'regular',
+  xAxis: {
+    ...brushEnabledConfig.xAxis,
+    type: 'date',
+    brushDefaultRecentDateCount: 4
+  },
+  general: {
+    showMissingDataLabel: true,
+    showSuppressedSymbol: true,
+    showZeroValueData: true
+  },
+  data: brushEnabledConfig.data.slice(0, 8).map((row, index) => ({
+    ...row,
+    Production: index === 0 ? 'Suppressed' : row.Production
+  })),
+  series: brushEnabledConfig.series.slice(0, 2).map(series => ({
+    ...series,
+    type: 'Bar'
+  })),
+  preliminaryData: [
+    {
+      type: 'suppression',
+      seriesKeys: ['Production'],
+      label: 'Suppressed',
+      column: 'Production',
+      value: 'Suppressed',
+      style: '',
+      displayTooltip: true,
+      displayLegend: true,
+      displayTable: true,
+      symbol: 'Dagger',
+      iconCode: '†',
+      hideBarSymbol: false
+    }
+  ]
+}
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/BrushSlider/Regression',
+  component: Chart
+}
+
+export default meta
+
+type Story = StoryObj<typeof Chart>
+
+export const EffectMarkersStayInsideSelection: Story = {
+  args: {
+    config: brushEffectConfig,
+    isEditor: false
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Effect markers render only for dates inside the active brush selection.'
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+
+    await waitFor(() => {
+      const effectCircles = Array.from(canvasElement.querySelectorAll('.line-chart-group > g > circle'))
+
+      expect(effectCircles).toHaveLength(4)
+      effectCircles.forEach(circle => {
+        expect(Number.isFinite(Number(circle.getAttribute('cx')))).toBe(true)
+      })
+    })
+  }
+}
+
+export const SuppressedBarsStayInsideSelection: Story = {
+  args: {
+    config: brushSuppressionConfig,
+    isEditor: false
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Suppression metadata does not cause bars outside the active brush selection to render at the origin.'
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+
+    await waitFor(() => {
+      const barGroups = Array.from(canvasElement.querySelectorAll('g[class*="bar-group-"]'))
+
+      expect(barGroups).toHaveLength(4)
+      barGroups.forEach(group => {
+        expect(group.getAttribute('transform')).not.toContain('NaN')
+      })
+    })
+  }
+}

package/src/_stories/ChartEditor.Editor.stories.tsx

@@ -46,6 +46,19 @@ export const GeneralSectionTests: Story = {
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
+    const documentCanvas = within(canvasElement.ownerDocument.body)
+
+    const expectTooltipContent = async (field: HTMLElement, expectedText: string) => {
+      const tooltipTarget = field.closest('label')?.querySelector('.cove-tooltip--target') as HTMLElement
+      expect(tooltipTarget).toBeTruthy()
+
+      await userEvent.hover(tooltipTarget)
+
+      const tooltipContent = await documentCanvas.findByText(expectedText)
+      expect(tooltipContent).toBeTruthy()
+
+      await userEvent.unhover(tooltipTarget)
+    }
 
     // Wait for editor to load
     await waitForEditor(canvas)
@@ -232,6 +245,11 @@ export const GeneralSectionTests: Story = {
     })() as HTMLInputElement
 
     if (superTitleInput) {
+      await expectTooltipContent(
+        superTitleInput,
+        'To keep the main title as short as possible, consider adding extra details in a super title, which displays in small font just above the main title in the visualization’s title bar. (If you hide the regular title, the super title does not display.)'
+      )
+
       await performAndAssert(
         'Super Title Text Change',
         getSuperTitleText,
@@ -295,6 +313,11 @@ export const GeneralSectionTests: Story = {
     })() as HTMLTextAreaElement
     expect(messageInput).toBeTruthy()
 
+    await expectTooltipContent(
+      messageInput,
+      'Explain how to use the chart, introduce any special concepts, etc. This text displays above the visualization (and below the title bar, if displayed).'
+    )
+
     await performAndAssert(
       'Message Text Change',
       getMessageText,
@@ -406,6 +429,11 @@ export const GeneralSectionTests: Story = {
     })() as HTMLTextAreaElement
 
     if (footnotesInput) {
+      await expectTooltipContent(
+        footnotesInput,
+        'Use this text element for any supplemental information that should display below the data table.'
+      )
+
       await performAndAssert(
         'Footnotes Text Change',
         getFootnotesText,
@@ -670,9 +698,11 @@ export const ComboRightValueAxisSectionTests: Story = {
     await waitForEditor(canvas)
     await openAccordion(canvas, 'Right Value Axis')
 
-    const rightAxisLabelOffsetInput = canvas.getByLabelText(/^label offset$/i) as HTMLInputElement
-    expect(rightAxisLabelOffsetInput).toBeTruthy()
-    expect(rightAxisLabelOffsetInput.name).toContain('rightLabelOffsetSize')
+    expect(canvas.queryByLabelText(/^label offset$/i)).toBeFalsy()
+
+    const labelPlacementSelect = canvasElement.querySelector('select[name="rightTitlePlacement"]') as HTMLSelectElement
+    expect(labelPlacementSelect).toBeTruthy()
+    expect(labelPlacementSelect.value).toBe('side')
   }
 }
 

package/src/_stories/ChartLine.EffectCompatibility.stories.tsx

@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, userEvent, within } from 'storybook/test'
+import { assertVisualizationRendered, openAccordion, performAndAssert, waitForEditor } from '@cdc/core/helpers/testing'
+import Chart from '../CdcChartComponent'
+import baseConfig from './_mock/line_chart_dashed_dates.json'
+
+const config = {
+  ...baseConfig,
+  animate: false,
+  title: 'Preliminary line effect compatibility',
+  data: [
+    { date: '2024-10-01', Value: '52', Status: 'final' },
+    { date: '2025-01-01', Value: '57', Status: 'preliminary' },
+    { date: '2025-04-01', Value: '54', Status: 'preliminary' }
+  ]
+}
+
+const getIncomingPath = (canvasElement: HTMLElement) =>
+  canvasElement.querySelector<SVGPathElement>('.line-chart-group path.visx-linepath')
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Special Lines/Compatibility',
+  component: Chart
+}
+
+export default meta
+type Story = StoryObj<typeof Chart>
+
+export const ExistingPreliminaryRule: Story = {
+  args: { config, isEditor: true },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await waitForEditor(canvas)
+    await assertVisualizationRendered(canvasElement)
+    const incomingPath = getIncomingPath(canvasElement)
+    expect(incomingPath).toHaveAttribute('stroke-dasharray', '5 5')
+    expect(incomingPath.getTotalLength()).toBeGreaterThan(1)
+    const originalPath = incomingPath.getAttribute('d')
+
+    await openAccordion(canvas, 'Data Series')
+    const effect = within(
+      canvasElement.querySelector<HTMLElement>('[data-rfd-draggable-id="preliminaryData-0"] .accordion')
+    )
+    await openAccordion(effect, 'Effect Data 1')
+    expect(effect.getByLabelText('Apply style to')).toHaveValue('')
+    await performAndAssert(
+      'Editing an existing rule preserves its incoming dashed segment',
+      () => canvasElement.querySelector('.legend-preliminary')?.textContent,
+      async () => {
+        const label = effect.getByLabelText('Label', { exact: true })
+        await userEvent.clear(label)
+        await userEvent.type(label, 'Updated preliminary')
+      },
+      (_, after) => after?.includes('Updated preliminary'),
+      () => {
+        expect(getIncomingPath(canvasElement)).toHaveAttribute('stroke-dasharray', '5 5')
+        expect(getIncomingPath(canvasElement)).toHaveAttribute('d', originalPath)
+      }
+    )
+  }
+}
+
+export const SavedOutgoingRule: Story = {
+  args: {
+    config: {
+      ...config,
+      preliminaryData: config.preliminaryData.map(rule => ({ ...rule, lineEffectScope: 'outgoing' }))
+    },
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    expect(getIncomingPath(canvasElement)).toHaveAttribute('stroke-dasharray', '0')
+    const outgoingPath = canvasElement.querySelector<SVGPathElement>('.line-chart-group path[stroke-dasharray="5 5"]')
+    expect(outgoingPath).not.toBeNull()
+    expect(outgoingPath.getTotalLength()).toBeGreaterThan(1)
+  }
+}
+
+export const NewlyAddedRule: Story = {
+  args: { config: { ...config, preliminaryData: [] }, isEditor: true },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await waitForEditor(canvas)
+    await assertVisualizationRendered(canvasElement)
+    await openAccordion(canvas, 'Data Series')
+    await userEvent.click(canvas.getByRole('button', { name: 'Add Special Line' }))
+    const effect = within(
+      canvasElement.querySelector<HTMLElement>('[data-rfd-draggable-id="preliminaryData-0"] .accordion')
+    )
+    await openAccordion(effect, 'Effect Data 1')
+    await userEvent.click(effect.getByRole('button', { name: 'Expand', exact: true }))
+    await userEvent.click(within(effect.getByRole('list')).getByRole('option', { name: 'Value', exact: true }))
+    await userEvent.selectOptions(effect.getByLabelText('COLUMN WITH CONFIGURATION VALUE'), 'Status')
+    await userEvent.type(effect.getByLabelText(/VALUE TO TRIGGER/), 'preliminary')
+    await performAndAssert(
+      'A newly added rule styles only the outgoing interval',
+      () => canvasElement.querySelectorAll('.line-chart-group path[stroke-dasharray="5 5"]').length,
+      () => userEvent.selectOptions(effect.getByLabelText('Style', { exact: true }), 'Dashed Small'),
+      (before, after) => before === 0 && after > 0,
+      () => {
+        expect(getIncomingPath(canvasElement)).toHaveAttribute('stroke-dasharray', '0')
+        const outgoingPath = canvasElement.querySelector<SVGPathElement>(
+          '.line-chart-group path[stroke-dasharray="5 5"]'
+        )
+        expect(outgoingPath.getTotalLength()).toBeGreaterThan(1)
+      }
+    )
+    expect(effect.getByLabelText('Apply style to')).toHaveValue('outgoing')
+    await performAndAssert(
+      'A newly added rule can also style the incoming interval',
+      () => getIncomingPath(canvasElement)?.getAttribute('stroke-dasharray'),
+      () => userEvent.selectOptions(effect.getByLabelText('Apply style to'), ''),
+      (before, after) => before === '0' && after === '5 5',
+      () => expect(getIncomingPath(canvasElement).getTotalLength()).toBeGreaterThan(1)
+    )
+    await userEvent.selectOptions(effect.getByLabelText('Style', { exact: true }), 'Open Circles')
+    expect(effect.queryByLabelText('Apply style to')).not.toBeInTheDocument()
+  }
+}

package/src/_stories/_mock/annotation_event-line_mock.json

@@ -450,8 +450,8 @@
   },
   "heatmap": {
     "cellPadding": 1,
-    "rowLabelGap": 32,
-    "columnLabelGap": 56,
+    "rowLabelGap": 0,
+    "columnLabelGap": 15,
     "xAxisPosition": "top",
     "showCellValues": false
   },

package/src/_stories/_mock/editor-test-configs.json

@@ -283,23 +283,29 @@
     "visualizationType": "Sankey",
     "theme": "theme-purple",
     "fontSize": "medium",
+    "enableTooltips": true,
+    "general": {
+      "palette": {
+        "isReversed": true,
+        "version": "2.0",
+        "name": "sequential_bluereverse"
+      }
+    },
     "sankey": {
-      "title": {
-        "defaultColor": "black"
-      },
       "iterations": 1,
       "rxValue": 0.9,
-      "overallSize": {
-        "width": 900,
-        "height": 700
-      },
+      "horizontalScrollWidth": 900,
       "margin": {
         "margin_y": 25,
         "margin_x": 0
       },
+      "columns": {
+        "source": "example_source",
+        "target": "example_target",
+        "value": "example_value"
+      },
       "nodeSize": {
-        "nodeWidth": 26,
-        "nodeHeight": 40
+        "nodeWidth": 26
       },
       "nodePadding": 55,
       "nodeFontColor": "black",
@@ -314,8 +320,12 @@
       "opacity": {
         "nodeOpacityDefault": 1,
         "nodeOpacityInactive": 0.1,
-        "LinkOpacityDefault": 1,
+        "LinkOpacityDefault": 0.6,
         "LinkOpacityInactive": 0.1
+      },
+      "nodeValueStyle": {
+        "textBefore": "(",
+        "textAfter": ")"
       }
     },
     "visual": {

package/src/_stories/_mock/editor-test-datasets.json

@@ -346,48 +346,44 @@
 
   "sankey_test_data": [
     {
-      "links": [
-        {
-          "source": "Initial Population",
-          "target": "Screened",
-          "value": 10000
-        },
-        {
-          "source": "Initial Population",
-          "target": "Not Screened",
-          "value": 5000
-        },
-        {
-          "source": "Screened",
-          "target": "Positive Result",
-          "value": 1500
-        },
-        {
-          "source": "Screened",
-          "target": "Negative Result",
-          "value": 8500
-        },
-        {
-          "source": "Positive Result",
-          "target": "Treated",
-          "value": 1200
-        },
-        {
-          "source": "Positive Result",
-          "target": "Not Treated",
-          "value": 300
-        },
-        {
-          "source": "Treated",
-          "target": "Recovery",
-          "value": 1000
-        },
-        {
-          "source": "Treated",
-          "target": "No Recovery",
-          "value": 200
-        }
-      ]
+      "example_source": "Initial Population",
+      "example_target": "Screened",
+      "example_value": 10000
+    },
+    {
+      "example_source": "Initial Population",
+      "example_target": "Not Screened",
+      "example_value": 5000
+    },
+    {
+      "example_source": "Screened",
+      "example_target": "Positive Result",
+      "example_value": 1500
+    },
+    {
+      "example_source": "Screened",
+      "example_target": "Negative Result",
+      "example_value": 8500
+    },
+    {
+      "example_source": "Positive Result",
+      "example_target": "Treated",
+      "example_value": 1200
+    },
+    {
+      "example_source": "Positive Result",
+      "example_target": "Not Treated",
+      "example_value": 300
+    },
+    {
+      "example_source": "Treated",
+      "example_target": "Recovery",
+      "example_value": 1000
+    },
+    {
+      "example_source": "Treated",
+      "example_target": "No Recovery",
+      "example_value": 200
     }
   ],
 

package/src/_stories/_mock/heatmap-average-age-categorical.json

@@ -268,8 +268,8 @@
   },
   "heatmap": {
     "cellPadding": 1,
-    "rowLabelGap": 32,
-    "columnLabelGap": 56,
+    "rowLabelGap": 0,
+    "columnLabelGap": 15,
     "xAxisPosition": "top",
     "showCellValues": false
   },

package/src/_stories/_mock/heatmap.json

@@ -108,8 +108,8 @@
   },
   "heatmap": {
     "cellPadding": 1,
-    "rowLabelGap": 32,
-    "columnLabelGap": 56,
+    "rowLabelGap": 0,
+    "columnLabelGap": 15,
     "xAxisPosition": "top",
     "showCellValues": false
   },