@cdc/chart 4.26.5 → 4.26.6

package/src/_stories/Chart.SeriesColorAssignments.stories.tsx

@@ -0,0 +1,183 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Chart from '../CdcChartComponent'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
+import { expect, userEvent, waitFor, within } from 'storybook/test'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Series Color Assignments',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+const assignedColors = {
+  alpha: '#0057B7',
+  bravo: '#D94E5F',
+  charlie: '#5A8E3F'
+}
+
+const normalizeColor = (color: string) => {
+  const swatch = document.createElement('div')
+  swatch.style.color = color
+  document.body.appendChild(swatch)
+  const normalized = getComputedStyle(swatch).color
+  swatch.remove()
+  return normalized
+}
+
+const getVisiblePointColorsBySeries = (canvasElement: HTMLElement) => {
+  const groups = Array.from(canvasElement.querySelectorAll('.line-chart-group .visx-glyph-group')) as SVGGElement[]
+  const colorsBySeries = new Map<string, Set<string>>()
+
+  groups.forEach(group => {
+    const seriesIndex = group.getAttribute('data-seriesindex')
+    const glyph = group.querySelector('[fill]') as SVGElement | null
+    const fill = glyph?.getAttribute('fill')
+
+    if (!seriesIndex || !fill || fill === 'transparent') return
+
+    const seriesColors = colorsBySeries.get(seriesIndex) || new Set<string>()
+    seriesColors.add(normalizeColor(fill))
+    colorsBySeries.set(seriesIndex, seriesColors)
+  })
+
+  return colorsBySeries
+}
+
+const expectVisibleSeriesColors = async (
+  canvasElement: HTMLElement,
+  expected: Array<[seriesIndex: string, color: string]>
+) => {
+  await waitFor(() => {
+    const colorsBySeries = getVisiblePointColorsBySeries(canvasElement)
+    const expectedSeries = expected.map(([seriesIndex]) => seriesIndex)
+
+    expect(Array.from(colorsBySeries.keys()).sort()).toEqual(expectedSeries.sort())
+
+    expected.forEach(([seriesIndex, color]) => {
+      expect(Array.from(colorsBySeries.get(seriesIndex) || [])).toEqual([normalizeColor(color)])
+    })
+  })
+}
+
+const expectLegendLabels = async (canvasElement: HTMLElement, expectedLabels: string[]) => {
+  await waitFor(() => {
+    const labels = Array.from(canvasElement.querySelectorAll('.legend-container [role="button"]')).map(item =>
+      item.textContent?.trim()
+    )
+
+    expect(labels).toEqual(expectedLabels)
+  })
+}
+
+const config = {
+  type: 'chart',
+  version: '4.26.5',
+  title: 'Series Color Assignments With Filtered Series',
+  visualizationType: 'Line',
+  visualizationSubType: 'regular',
+  orientation: 'vertical',
+  filterBehavior: 'Filter Change',
+  lineDatapointStyle: 'always show',
+  lineDatapointColor: 'Same as Line',
+  general: {
+    palette: {
+      name: 'qualitative_standard',
+      version: '2.0',
+      colorAssignmentMode: 'by-value',
+      colorAssignments: [
+        { key: 'alpha', color: assignedColors.alpha },
+        { key: 'bravo', color: assignedColors.bravo },
+        { key: 'charlie', color: assignedColors.charlie }
+      ]
+    }
+  },
+  legend: {
+    hide: false,
+    behavior: 'isolate',
+    dynamicLegend: false,
+    position: 'top',
+    style: 'circles',
+    unified: false
+  },
+  xAxis: {
+    dataKey: 'week',
+    type: 'date-time',
+    dateParseFormat: '%Y-%m-%d',
+    dateDisplayFormat: '%b. %-d',
+    label: 'Week',
+    sortDates: false
+  },
+  yAxis: {
+    label: 'Rate',
+    min: '0',
+    max: '50',
+    numTicks: '5',
+    gridLines: true
+  },
+  visual: {
+    lineDatapointSymbol: 'none',
+    verticalHoverLine: false,
+    horizontalHoverLine: false
+  },
+  tooltips: {
+    singleSeries: false
+  },
+  series: [
+    { dataKey: 'alpha', name: 'Alpha', type: 'Line', axis: 'Left', tooltip: true },
+    { dataKey: 'bravo', name: 'Bravo', type: 'Line', axis: 'Left', tooltip: true },
+    { dataKey: 'charlie', name: 'Charlie', type: 'Line', axis: 'Left', tooltip: true }
+  ],
+  filters: [
+    {
+      values: ['Alpha + Bravo', 'Bravo + Charlie'],
+      filterStyle: 'dropdown',
+      id: 1726688167657,
+      columnName: 'view',
+      active: 'Alpha + Bravo',
+      label: 'Visible series'
+    }
+  ],
+  data: [
+    { week: '2024-01-01', view: 'Alpha + Bravo', alpha: 12, bravo: 20, charlie: null },
+    { week: '2024-01-08', view: 'Alpha + Bravo', alpha: 16, bravo: 23, charlie: null },
+    { week: '2024-01-15', view: 'Alpha + Bravo', alpha: 21, bravo: 28, charlie: null },
+    { week: '2024-01-22', view: 'Alpha + Bravo', alpha: 26, bravo: 31, charlie: null },
+    { week: '2024-01-01', view: 'Bravo + Charlie', alpha: null, bravo: 20, charlie: 30 },
+    { week: '2024-01-08', view: 'Bravo + Charlie', alpha: null, bravo: 23, charlie: 34 },
+    { week: '2024-01-15', view: 'Bravo + Charlie', alpha: null, bravo: 28, charlie: 39 },
+    { week: '2024-01-22', view: 'Bravo + Charlie', alpha: null, bravo: 31, charlie: 43 }
+  ],
+  dataDescription: {
+    horizontal: false,
+    series: false
+  }
+}
+
+export const FilteredSeriesKeepAssignedColors: Story = {
+  args: {
+    config,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+
+    await expectVisibleSeriesColors(canvasElement, [
+      ['0', assignedColors.alpha],
+      ['1', assignedColors.bravo]
+    ])
+    await expectLegendLabels(canvasElement, ['Alpha', 'Bravo'])
+
+    const canvas = within(canvasElement)
+    const filter = canvas.getByLabelText(/filter by visible series/i) as HTMLSelectElement
+    await userEvent.selectOptions(filter, 'Bravo + Charlie')
+
+    await expectVisibleSeriesColors(canvasElement, [
+      ['1', assignedColors.bravo],
+      ['2', assignedColors.charlie]
+    ])
+    await expectLegendLabels(canvasElement, ['Bravo', 'Charlie'])
+  }
+}
+
+export default meta

package/src/_stories/Chart.YAxisAutoMaxStrategy.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Chart from '../CdcChartComponent'
+import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
+import smallestLeftAxisMaxConfig from './_mock/smallest_left_axis_max.json'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Y Axis Auto Max Strategy',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+const baseConfig = editConfigKeys(smallestLeftAxisMaxConfig, [
+  { path: ['yAxis', 'smallestLeftAxisMax'], value: undefined },
+  { path: ['yAxis', 'filterDomainBehavior'], value: 'dynamic' },
+  { path: ['yAxis', 'numTicks'], value: 4 },
+  { path: ['filters', '0', 'active'], value: 'Region A' }
+])
+
+export const Clean_Top_Tick_Strategy: Story = {
+  args: {
+    config: editConfigKeys(baseConfig, [{ path: ['yAxis', 'autoMaxStrategy'], value: 'clean-top-tick' }])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const Default_Strategy: Story = {
+  args: {
+    config: editConfigKeys(baseConfig, [{ path: ['yAxis', 'autoMaxStrategy'], value: 'default' }])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const Stable_Filter_Domain_With_Clean_Top_Tick: Story = {
+  args: {
+    config: editConfigKeys(baseConfig, [
+      { path: ['yAxis', 'filterDomainBehavior'], value: 'stable' },
+      { path: ['yAxis', 'autoMaxStrategy'], value: 'clean-top-tick' },
+      { path: ['filters', '0', 'active'], value: 'Region B' }
+    ])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export default meta

package/src/_stories/Chart.YAxisFilterDomain.stories.tsx

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, within } from 'storybook/test'
+import Chart from '../CdcChartComponent'
+import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
+import smallestLeftAxisMaxConfig from './_mock/smallest_left_axis_max.json'
+import horizontalBarConfig from './_mock/horizontal_bar.json'
+import { assertVisualizationRendered, openAccordion, waitForEditor } from '@cdc/core/helpers/testing'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Y Axis Filter Domain',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+const baseConfig = editConfigKeys(smallestLeftAxisMaxConfig, [
+  { path: ['yAxis', 'smallestLeftAxisMax'], value: undefined },
+  { path: ['yAxis', 'numTicks'], value: 4 }
+])
+
+export const Dynamic_Filter_Domain: Story = {
+  args: {
+    config: editConfigKeys(baseConfig, [{ path: ['yAxis', 'filterDomainBehavior'], value: 'dynamic' }])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const Stable_Filter_Domain: Story = {
+  args: {
+    config: editConfigKeys(baseConfig, [{ path: ['yAxis', 'filterDomainBehavior'], value: 'stable' }])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const Editor_Control: Story = {
+  args: {
+    config: editConfigKeys(baseConfig, [
+      { path: ['yAxis', 'filterDomainBehavior'], value: 'stable' },
+      { path: ['yAxis', 'autoMaxStrategy'], value: 'clean-top-tick' }
+    ]),
+    isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await waitForEditor(canvas)
+    await openAccordion(canvas, 'Left Value Axis')
+
+    const filterDomainSelect = (await canvas.findByLabelText(/Filter Domain Behavior/i)) as HTMLSelectElement
+    expect(filterDomainSelect.value).toBe('stable')
+    expect(Array.from(filterDomainSelect.options).map(option => option.text)).toEqual(['Dynamic', 'Stable'])
+
+    const autoMaxStrategySelect = (await canvas.findByLabelText(/Automatic max strategy/i)) as HTMLSelectElement
+    expect(autoMaxStrategySelect.value).toBe('clean-top-tick')
+    expect(Array.from(autoMaxStrategySelect.options).map(option => option.text)).toEqual(['Default', 'Clean top tick'])
+  }
+}
+
+export const Horizontal_Editor_Control: Story = {
+  args: {
+    config: editConfigKeys(horizontalBarConfig, [
+      { path: ['filters'], value: [{ columnName: 'Race', active: 'AI/AN, Non-Hispanic', showDropdown: true }] },
+      { path: ['xAxis', 'max'], value: '' },
+      { path: ['yAxis', 'type'], value: 'linear' },
+      { path: ['yAxis', 'smallestLeftAxisMax'], value: 5 },
+      { path: ['yAxis', 'filterDomainBehavior'], value: 'stable' },
+      { path: ['yAxis', 'autoMaxStrategy'], value: 'clean-top-tick' }
+    ]),
+    isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await waitForEditor(canvas)
+    await openAccordion(canvas, 'Value Axis')
+
+    const smallestAxisMaxInput = (await canvas.findByLabelText(/Smallest axis maximum/i)) as HTMLInputElement
+    expect(smallestAxisMaxInput.value).toBe('5')
+
+    const filterDomainSelect = (await canvas.findByLabelText(/Filter Domain Behavior/i)) as HTMLSelectElement
+    expect(filterDomainSelect.value).toBe('stable')
+
+    const autoMaxStrategySelect = (await canvas.findByLabelText(/Automatic max strategy/i)) as HTMLSelectElement
+    expect(autoMaxStrategySelect.value).toBe('clean-top-tick')
+  }
+}
+
+export default meta

package/src/_stories/ChartAnnotation.smoke.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import annotationConfig from './_mock/annotation_category_mock.json'
 import annotationConfigDateLinear from './_mock/annotation_date-linear_mock.json'
 import annotationConfigDateTime from './_mock/annotation_date-time_mock.json'
+import annotationConfigEventLine from './_mock/annotation_event-line_mock.json'
 import Chart from '../CdcChartComponent'
 import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
@@ -42,4 +43,13 @@ export const Chart_Annotation_Date_Time: Story = {
   }
 }
 
+export const Chart_Annotation_Event_Line: Story = {
+  args: {
+    config: annotationConfigEventLine
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
 export default meta