@cdc/chart 4.26.5 → 4.26.7

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/Chart.smoke.stories.tsx

@@ -26,6 +26,19 @@ const meta: Meta<typeof Chart> = {
 
 type Story = StoryObj<typeof Chart>
 
+const multipleLinesStoryData = [
+  { week_end: '2024-01-06', Adults: 45.1, Children: 29.3, pathogen: 'COVID-19' },
+  { week_end: '2024-01-13', Adults: 46.7, Children: 30.2, pathogen: 'COVID-19' },
+  { week_end: '2024-01-20', Adults: 48.0, Children: 31.0, pathogen: 'COVID-19' }
+]
+
+const multipleLinesConfig = editConfigKeys(multipleLines, [
+  { path: ['tooltips', 'dateDisplayFormat'], value: '%b. %d %Y' },
+  { path: ['formattedData'], value: multipleLinesStoryData },
+  { path: ['dataUrl'], value: undefined },
+  { path: ['runtimeDataUrl'], value: undefined }
+])
+
 export const line_Chart_Two_Points_Regression_Test: Story = {
   args: {
     config: lineChartTwoPointsRegressionTest,
@@ -47,7 +60,7 @@ export const line_Chart_Two_Points_New_Chart: Story = {
 
 export const multiple_lines: Story = {
   args: {
-    config: editConfigKeys(multipleLines, [{ path: ['tooltips', 'dateDisplayFormat'], value: '%b. %d %Y' }])
+    config: multipleLinesConfig
   },
   play: async ({ canvasElement }) => {
     await assertVisualizationRendered(canvasElement)

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

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect } from 'storybook/test'
 import barConfig from './_mock/line_chart_two_points_new_chart.json'
 import annotationConfig from './_mock/annotation_category_mock.json'
 import areaPrefix from './_mock/annotation_category_mock.json'
@@ -7,7 +8,7 @@ import scatterPlotConfig from './_mock/scatterplot_mock.json'
 
 import Chart from '../CdcChartComponent'
 import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
-import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
+import { assertVisualizationRendered, waitForPresence } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Prefix Suffix',
@@ -16,6 +17,11 @@ const meta: Meta<typeof Chart> = {
 
 type Story = StoryObj<typeof Chart>
 
+const getSvgTextValues = (root: ParentNode | null, selector: string = 'text') => {
+  if (!root) return []
+  return Array.from(root.querySelectorAll(selector)).map(node => node.textContent?.trim() || '')
+}
+
 export const Inline_Label: Story = {
   args: {
     config: editConfigKeys(barConfig, [
@@ -198,4 +204,25 @@ export const ScatterPlot_Bottom_Commas: Story = {
   }
 }
 
+export const ScatterPlot_Bottom_Commas_And_Abbreviated: Story = {
+  args: {
+    config: editConfigKeys(scatterPlotConfig, [
+      { path: ['dataFormat', 'bottomCommas'], value: true },
+      { path: ['dataFormat', 'bottomAbbreviated'], value: true },
+      { path: ['dataFormat', 'bottomPrefix'], value: '$' },
+      { path: ['dataFormat', 'commas'], value: false },
+      { path: ['dataFormat', 'abbreviated'], value: false }
+    ])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    await waitForPresence('svg g.bottom-axis', canvasElement)
+
+    const svgText = getSvgTextValues(canvasElement, 'svg g.bottom-axis text')
+    const hasBottomAxisCurrencyAbbreviation = svgText.some(text => /^\$\d+(\.\d+)?K$/.test(text))
+
+    expect(hasBottomAxisCurrencyAbbreviation).toBe(true)
+  }
+}
+
 export default meta