@cdc/chart 4.26.6 → 4.26.10

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.Editor.stories.tsx

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, userEvent, within } from 'storybook/test'
+import { openAccordion, performAndAssert, waitForEditor } from '@cdc/core/helpers/testing'
+import Chart from '../CdcChartComponent'
+import annotationConfig from './_mock/annotation_category_mock.json'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Editor Tests/Annotations',
+  component: Chart
+}
+
+export default meta
+type Story = StoryObj<typeof Chart>
+
+export const AnnotationWidthAndPlacement: Story = {
+  name: 'Width Resize and Placement',
+  args: {
+    config: {
+      ...annotationConfig,
+      annotations: annotationConfig.annotations.map((annotation, index) =>
+        index === 0
+          ? { ...annotation, anchorMode: 'fixed', x: 50, y: 50, dx: 100, dy: -60, savedDimensions: undefined }
+          : annotation
+      )
+    },
+    isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await waitForEditor(canvas)
+    await openAccordion(canvas, 'Text Annotations')
+    expect(canvas.queryByText('Reset to automatic width')).not.toBeInTheDocument()
+
+    const label = canvasElement.querySelector('div[aria-label^="Annotation text"]') as HTMLElement
+    const wrapper = label?.parentElement as HTMLElement
+    const getLabelState = () => {
+      const rect = label?.getBoundingClientRect()
+      const svgRect = label.closest('svg')?.getBoundingClientRect()
+      return {
+        horizontalAnchor: label?.dataset.horizontalAnchor,
+        width: wrapper?.style.width,
+        rect: {
+          left: rect.left - svgRect.left,
+          top: rect.top - svgRect.top,
+          right: rect.right - svgRect.left,
+          width: rect.width,
+          height: rect.height
+        }
+      }
+    }
+
+    const placement = canvasElement.querySelector('select[name="labelPosition"]') as HTMLSelectElement
+    expect(placement).toBeTruthy()
+    await performAndAssert(
+      'Explicit left placement anchors the label on its end edge',
+      getLabelState,
+      async () => userEvent.selectOptions(placement, 'left'),
+      (before, after) => before.horizontalAnchor !== after.horizontalAnchor && after.horizontalAnchor === 'end'
+    )
+
+    const resizeHandle = canvas.getByTestId('annotation-resize-handle')
+    const widthBeforeResize = getLabelState().width
+    await userEvent.pointer({ keys: '[MouseLeft>]', target: resizeHandle, coords: { clientX: 300, clientY: 100 } })
+    await userEvent.pointer({ target: resizeHandle, coords: { clientX: 200, clientY: 100 } })
+    const previewState = getLabelState()
+    const previewWidth = Number.parseFloat(previewState.width)
+    await userEvent.pointer({ keys: '[/MouseLeft]', target: resizeHandle, coords: { clientX: 200, clientY: 100 } })
+    const committedState = getLabelState()
+    const committedWidth = Number.parseFloat(committedState.width)
+
+    expect(widthBeforeResize).toBe('fit-content')
+    expect(committedState.width).toMatch(/px$/)
+    expect(Math.abs(committedWidth - previewWidth)).toBeLessThanOrEqual(1)
+    expect(Math.abs(committedState.rect.right - previewState.rect.right)).toBeLessThanOrEqual(1)
+
+    expect(getLabelState().horizontalAnchor).toBe('end')
+  }
+}

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

@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect } from 'storybook/test'
 import Chart from '../CdcChartComponent'
 import longXLabelsConfig from './_mock/large_x_axis_labels.json'
+import comboConfig from './_mock/combo.json'
 import pairedBarConfig from './_mock/paired-bar.json'
 import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
 import { ChartConfig } from '../types/ChartConfig'
@@ -15,6 +17,20 @@ export default meta
 
 type Story = StoryObj<typeof Chart>
 
+const rightAxisVisibilityUpdates = [
+  { path: ['series', '4', 'axis'], value: 'Right' },
+  { path: ['yAxis', 'rightAxisSize'], value: 160 },
+  { path: ['yAxis', 'rightHideAxis'], value: false },
+  { path: ['yAxis', 'rightHideLabel'], value: false },
+  { path: ['yAxis', 'rightHideTicks'], value: false }
+]
+
+const expectRightAxisTicks = (canvasElement: HTMLElement) => {
+  const rightAxisTickLabels = canvasElement.querySelectorAll('.right-axis .vx-axis-tick text')
+
+  expect(rightAxisTickLabels.length).toBeGreaterThan(0)
+}
+
 export const Dynamic_Labels: Story = {
   args: {
     config: editConfigKeys(longXLabelsConfig, [{ path: ['xAxis', 'label'], value: 'This is the title' }])
@@ -74,3 +90,35 @@ export const Top_Y_Axis_Title: Story = {
     await assertVisualizationRendered(canvasElement)
   }
 }
+
+export const Combo_Both_Top_Y_Axis_Titles: Story = {
+  args: {
+    config: editConfigKeys(comboConfig, [
+      ...rightAxisVisibilityUpdates,
+      { path: ['yAxis', 'label'], value: 'Cases' },
+      { path: ['runtime', 'yAxis', 'label'], value: 'Cases' },
+      { path: ['yAxis', 'titlePlacement'], value: 'top' },
+      { path: ['yAxis', 'rightLabel'], value: 'Rate' },
+      { path: ['yAxis', 'rightTitlePlacement'], value: 'top' }
+    ])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    expectRightAxisTicks(canvasElement)
+  }
+}
+
+export const Combo_Side_Right_Y_Axis_Title: Story = {
+  args: {
+    config: editConfigKeys(comboConfig, [
+      ...rightAxisVisibilityUpdates,
+      { path: ['legend', 'position'], value: 'bottom' },
+      { path: ['yAxis', 'rightLabel'], value: 'Rate per 100,000' },
+      { path: ['yAxis', 'rightTitlePlacement'], value: 'side' }
+    ])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    expectRightAxisTicks(canvasElement)
+  }
+}