@cdc/chart 4.26.6 → 4.26.10

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

@@ -0,0 +1,311 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect } from 'storybook/test'
+import DynamicSeriesBarConfig from './_mock/dynamic_series_bar_config.json'
+import SuppressedBarConfig from './_mock/bar-chart-suppressed.json'
+import { assertVisualizationRendered, waitForPresence } from '@cdc/core/helpers/testing'
+
+import Chart from '../CdcChart'
+import MinimalExampleConfig from '../../examples/minimal-example.json'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Percentage Values',
+  component: Chart
+}
+
+export default meta
+type Story = StoryObj<typeof Chart>
+
+const percentageValueConfig = {
+  ...MinimalExampleConfig,
+  title: 'Mixed Percentage and Numeric Values',
+  dataFormat: {
+    ...MinimalExampleConfig.dataFormat,
+    roundTo: 1
+  },
+  data: [
+    { category: 'Percentage', value: '12.5%' },
+    { category: 'Count', value: 20 }
+  ]
+}
+
+const horizontalPercentageValueConfig = {
+  ...percentageValueConfig,
+  title: 'Horizontal Percentage Value',
+  orientation: 'horizontal'
+}
+
+const findTooltipPath = (canvasElement: HTMLElement, ...requiredText: string[]) =>
+  Array.from(canvasElement.querySelectorAll<SVGPathElement>('path[data-tooltip-html]')).find(path => {
+    const tooltip = path.getAttribute('data-tooltip-html') || ''
+
+    return requiredText.every(text => tooltip.includes(text))
+  })
+
+const getPercentageBar = (canvasElement: HTMLElement) => findTooltipPath(canvasElement, 'Percentage')
+
+const stackedPercentageValueConfig = {
+  ...MinimalExampleConfig,
+  title: 'Stacked Percentage Value',
+  visualizationSubType: 'stacked',
+  orientation: 'vertical',
+  dataFormat: {
+    ...MinimalExampleConfig.dataFormat,
+    roundTo: 1
+  },
+  data: [
+    { category: 'Stack A', rate: '12.5%', count: 20 },
+    { category: 'Stack B', rate: 5, count: 10 }
+  ],
+  series: [
+    { dataKey: 'rate', name: 'Rate', type: 'Bar', axis: 'Left', tooltip: true },
+    { dataKey: 'count', name: 'Count', type: 'Bar', axis: 'Left', tooltip: true }
+  ]
+}
+
+const stackedHorizontalPercentageValueConfig = {
+  ...stackedPercentageValueConfig,
+  title: 'Stacked Horizontal Percentage Value',
+  orientation: 'horizontal'
+}
+
+const dynamicPercentageData = DynamicSeriesBarConfig.data.map(row =>
+  row.YearStart === 2015 && row.Stratification1 === '65 years or older' ? { ...row, Data_Value: '56.4%' } : row
+)
+
+const dynamicPercentageValueConfig = {
+  ...DynamicSeriesBarConfig,
+  title: 'Dynamic Series Percentage Value',
+  dataFormat: {
+    ...DynamicSeriesBarConfig.dataFormat,
+    roundTo: 1
+  },
+  data: dynamicPercentageData,
+  formattedData: dynamicPercentageData
+}
+
+const suppressionPercentageValueConfig = {
+  ...SuppressedBarConfig,
+  data: SuppressedBarConfig.data.map((row, index) => (index === 1 ? { ...row, 'Data 2': '110%' } : row))
+}
+
+const suppressionConfidenceData = [
+  { Race_Ethnicity: 'American Indian or Alaska Native', Data_Value: '73.1', CI_Lower: '70.4', CI_Upper: '75.8' },
+  { Race_Ethnicity: 'Asian', Data_Value: '77.2', CI_Lower: '75.3', CI_Upper: '79.1' },
+  { Race_Ethnicity: 'Black or African American', Data_Value: '68.4', CI_Lower: '66.7', CI_Upper: '70.1' },
+  { Race_Ethnicity: 'Hispanic or Latino', Data_Value: '71.6', CI_Lower: '70.2', CI_Upper: '73.0' },
+  { Race_Ethnicity: 'More than one race', Data_Value: '72.8', CI_Lower: '70.5', CI_Upper: '75.1' },
+  { Race_Ethnicity: 'White', Data_Value: '76.4', CI_Lower: '75.8', CI_Upper: '77.0' },
+  {
+    Race_Ethnicity: 'NHOPI',
+    Data_Value: 'Suppressed',
+    CI_Lower: 'Suppressed',
+    CI_Upper: 'Suppressed'
+  }
+]
+
+const wildcardSuppressionConfidenceConfig = {
+  ...SuppressedBarConfig,
+  title: 'Wildcard Suppression with Confidence Intervals',
+  general: {
+    ...SuppressedBarConfig.general,
+    showMissingDataLabel: false,
+    showSuppressedSymbol: true,
+    showZeroValueData: false
+  },
+  xAxis: {
+    ...SuppressedBarConfig.xAxis,
+    dataKey: 'Race_Ethnicity',
+    type: 'categorical'
+  },
+  confidenceKeys: {
+    lower: 'CI_Lower',
+    upper: 'CI_Upper'
+  },
+  preliminaryData: [
+    {
+      ...SuppressedBarConfig.preliminaryData[0],
+      column: '',
+      value: 'Suppressed',
+      hideBarSymbol: true
+    }
+  ],
+  series: [{ ...SuppressedBarConfig.series[0], dataKey: 'Data_Value' }],
+  data: suppressionConfidenceData
+}
+
+const dynamicSuppressionCategory = '65 years or older'
+const dynamicSuppressionData = DynamicSeriesBarConfig.data.map(row =>
+  row.YearStart === 2015 && row.Stratification1 === dynamicSuppressionCategory ? { ...row, Data_Value: 'ABC' } : row
+)
+const dynamicSuppressionConfig = {
+  ...DynamicSeriesBarConfig,
+  data: dynamicSuppressionData,
+  formattedData: dynamicSuppressionData,
+  preliminaryData: [
+    {
+      ...SuppressedBarConfig.preliminaryData[0],
+      column: dynamicSuppressionCategory,
+      value: 'ABC'
+    }
+  ]
+}
+
+export const Percent_Decorated_Value_Renders_As_Bar_And_Tooltip: Story = {
+  args: {
+    config: percentageValueConfig
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    await waitForPresence('path[data-tooltip-html]', canvasElement)
+
+    const percentageBar = getPercentageBar(canvasElement)
+
+    expect(percentageBar).toBeDefined()
+    expect(percentageBar?.closest('g[display]')).toHaveAttribute('display', 'block')
+    expect(percentageBar?.getBBox().height).toBeGreaterThan(3)
+    expect(percentageBar?.getAttribute('data-tooltip-html')).toContain('12.5%')
+  }
+}
+
+export const Dynamic_Percent_Decoration_Is_Preserved_In_Tooltip: Story = {
+  args: {
+    config: dynamicPercentageValueConfig
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    await waitForPresence('path[data-tooltip-html]', canvasElement)
+
+    const dynamicPercentageBar = findTooltipPath(canvasElement, '2015', '65 years or older')
+
+    expect(dynamicPercentageBar).toBeDefined()
+    expect(dynamicPercentageBar?.closest('g[display]')).toHaveAttribute('display', 'block')
+    expect(dynamicPercentageBar?.getAttribute('data-tooltip-html')).toContain('56.4%')
+  }
+}
+
+export const Suppression_Config_Does_Not_Hide_Percentage_Bars: Story = {
+  args: {
+    config: suppressionPercentageValueConfig
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    await waitForPresence('path[data-tooltip-html]', canvasElement)
+
+    const percentageBar = findTooltipPath(canvasElement, '110%')
+    const suppressedBarGroup = Array.from(canvasElement.querySelectorAll<SVGGElement>('g[display="block"]')).find(
+      group => group.textContent?.includes('†') && group.querySelector('path[data-tooltip-html]')
+    )
+
+    expect(percentageBar).toBeDefined()
+    expect(percentageBar?.closest('g[display]')).toHaveAttribute('display', 'block')
+    expect(percentageBar?.getBBox().height).toBeGreaterThan(3)
+    expect(suppressedBarGroup).toBeDefined()
+  }
+}
+
+export const Wildcard_Suppression_Does_Not_Corrupt_Confidence_Domain: Story = {
+  args: {
+    config: wildcardSuppressionConfidenceConfig
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    await waitForPresence('path[data-tooltip-html]', canvasElement)
+    await waitForPresence('path[stroke-width="px"]', canvasElement)
+
+    const visibleNumericBars = Array.from(
+      canvasElement.querySelectorAll<SVGPathElement>('path[data-tooltip-html]')
+    ).filter(path => path.closest('g[display]')?.getAttribute('display') === 'block')
+    const visibleConfidenceIntervals = Array.from(
+      canvasElement.querySelectorAll<SVGPathElement>('path[stroke-width="px"]')
+    ).filter(path => path.closest('g[display]')?.getAttribute('display') === 'block')
+    const suppressedBar = findTooltipPath(canvasElement, 'NHOPI')
+    const suppressedBarGroup = suppressedBar?.closest('g[display]')
+
+    expect(visibleNumericBars).toHaveLength(6)
+    visibleNumericBars.forEach(bar => {
+      expect(bar.getAttribute('d')).not.toContain('NaN')
+      expect(bar.getBBox().height).toBeGreaterThan(3)
+    })
+
+    expect(visibleConfidenceIntervals).toHaveLength(6)
+    visibleConfidenceIntervals.forEach(path => {
+      const pathData = path.getAttribute('d') || ''
+      const coordinates = pathData.match(/-?\d+(?:\.\d+)?/g)?.map(Number)
+
+      expect(pathData).not.toMatch(/NaN|Infinity/)
+      expect(coordinates?.length).toBeGreaterThan(0)
+      expect(coordinates?.every(Number.isFinite)).toBe(true)
+    })
+
+    expect(suppressedBar).toBeDefined()
+    expect(suppressedBarGroup).toHaveAttribute('display', 'none')
+    expect(suppressedBarGroup?.querySelector('rect[data-tooltip-html]')).toBeTruthy()
+    expect(suppressedBarGroup).not.toHaveTextContent('†')
+  }
+}
+
+export const Dynamic_Suppression_Target_Is_Preserved: Story = {
+  args: {
+    config: dynamicSuppressionConfig
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    await waitForPresence('path[data-tooltip-html]', canvasElement)
+
+    const suppressedBar = findTooltipPath(canvasElement, '2015', dynamicSuppressionCategory)
+    const suppressedBarGroup = suppressedBar?.closest('g[display]')
+
+    expect(suppressedBar).toBeDefined()
+    expect(suppressedBarGroup).toHaveAttribute('display', 'block')
+    expect(suppressedBarGroup).toHaveTextContent('†')
+  }
+}
+
+export const Horizontal_Percent_Decoration_Is_Preserved_In_Tooltip: Story = {
+  args: {
+    config: horizontalPercentageValueConfig
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    await waitForPresence('path[data-tooltip-html]', canvasElement)
+
+    const percentageBar = getPercentageBar(canvasElement)
+
+    expect(percentageBar).toBeDefined()
+    expect(percentageBar?.closest('g[display]')).toHaveAttribute('display', 'block')
+    expect(percentageBar?.getBBox().width).toBeGreaterThanOrEqual(3)
+    expect(percentageBar?.getAttribute('data-tooltip-html')).toContain('12.5%')
+  }
+}
+
+export const Stacked_Vertical_Percent_Decoration_Is_Preserved_In_Tooltip: Story = {
+  args: {
+    config: stackedPercentageValueConfig
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    await waitForPresence('path[data-tooltip-html]', canvasElement)
+
+    const percentageSegment = findTooltipPath(canvasElement, 'Stack A', 'Rate:')
+
+    expect(percentageSegment).toBeDefined()
+    expect(percentageSegment).toHaveStyle({ display: 'block' })
+    expect(percentageSegment?.getAttribute('data-tooltip-html')).toContain('12.5%')
+  }
+}
+
+export const Stacked_Horizontal_Percent_Decoration_Is_Preserved_In_Tooltip: Story = {
+  args: {
+    config: stackedHorizontalPercentageValueConfig
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    await waitForPresence('path[data-tooltip-html]', canvasElement)
+
+    const percentageSegment = findTooltipPath(canvasElement, 'Stack A', 'Rate:')
+
+    expect(percentageSegment).toBeDefined()
+    expect(percentageSegment).toHaveStyle({ display: 'block' })
+    expect(percentageSegment?.getAttribute('data-tooltip-html')).toContain('12.5%')
+  }
+}

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

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, within } from 'storybook/test'
+import Chart from '../CdcChart'
+import pieConfig from './_mock/pie_with_data.json'
+import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
+import { assertVisualizationRendered, waitForEditor, waitForPresence } from '@cdc/core/helpers/testing'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Pie Labels',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const CategoryPercentageLabels: Story = {
+  args: {
+    config: editConfigKeys(pieConfig, [
+      { path: ['labels'], value: true },
+      { path: ['legend', 'hide'], value: true }
+    ]),
+    isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await waitForEditor(within(canvasElement))
+    await assertVisualizationRendered(canvasElement)
+    await waitForPresence('.pie-label', canvasElement)
+    expect(canvasElement.querySelector('line')).toBeNull()
+  }
+}
+
+export const DonutCategoryPercentageLabels: Story = {
+  args: {
+    config: editConfigKeys(pieConfig, [
+      { path: ['labels'], value: true },
+      { path: ['legend', 'hide'], value: true },
+      { path: ['pieType'], value: 'Donut' }
+    ]),
+    isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await waitForEditor(within(canvasElement))
+    await assertVisualizationRendered(canvasElement)
+    await waitForPresence('.pie-label--outside', canvasElement)
+    expect(canvasElement.querySelector('.pie-label--inside')).toBeNull()
+    expect(canvasElement.querySelector('line')).toBeNull()
+  }
+}
+
+export default meta

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

@@ -0,0 +1,206 @@
+import { useEffect, useMemo, useState } from 'react'
+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 { ChartConfig } from '../types/ChartConfig'
+
+const meta: Meta<typeof RankByValueMutationHarness> = {
+  title: 'Components/Templates/Chart/Rank By Value Mutation Regression',
+  component: RankByValueMutationHarness,
+  parameters: {
+    layout: 'fullscreen'
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof RankByValueMutationHarness>
+
+type RankRow = {
+  category: string
+  value: number
+}
+
+const sourceOrder = 'Alpha, Charlie, Bravo'
+const rankedOrder = 'Charlie, Bravo, Alpha'
+const rankedExcludingAlphaOrder = 'Charlie, Bravo'
+
+const getOrder = (rows: RankRow[]) => rows.map(row => row.category).join(', ')
+
+const getRenderedCategoryOrder = (panel: Element) => {
+  const categoryNames = sourceOrder.split(', ')
+  return Array.from(panel.querySelectorAll('svg text'))
+    .filter(textElement => categoryNames.includes(textElement.textContent?.trim() || ''))
+    .sort((a, b) => a.getBoundingClientRect().left - b.getBoundingClientRect().left)
+    .map(textElement => textElement.textContent?.trim())
+    .join(', ')
+}
+
+const getConfig = (
+  title: string,
+  data: RankRow[],
+  rankByValue?: 'asc' | 'desc',
+  excludedCategories: string[] = []
+): ChartConfig =>
+  ({
+    version: '4.26.8',
+    type: 'chart',
+    visualizationType: 'Bar',
+    title,
+    rankByValue,
+    data,
+    animate: false,
+    legend: {
+      hide: true
+    },
+    table: {
+      show: false
+    },
+    xAxis: {
+      dataKey: 'category',
+      type: 'categorical',
+      label: 'Category'
+    },
+    yAxis: {
+      label: 'Value',
+      hideAxis: false,
+      hideTicks: false,
+      gridLines: true,
+      numTicks: 4
+    },
+    series: [
+      {
+        dataKey: 'value',
+        name: 'Value',
+        type: 'Bar'
+      }
+    ],
+    dataFormat: {
+      roundTo: 0,
+      commas: false
+    },
+    exclusions: {
+      active: excludedCategories.length > 0,
+      keys: excludedCategories
+    }
+  } as ChartConfig)
+
+const panelStyle = {
+  background: '#fff',
+  border: '1px solid #d9dfe7',
+  borderRadius: 6,
+  minWidth: 0,
+  padding: 16
+}
+
+const labelStyle = {
+  color: '#4b5563',
+  fontSize: 12,
+  fontWeight: 700,
+  margin: '0 0 8px',
+  textTransform: 'uppercase' as const
+}
+
+const diagnosticStyle = {
+  background: '#f7f8fa',
+  border: '1px solid #d9dfe7',
+  borderRadius: 6,
+  display: 'grid',
+  gap: 8,
+  gridColumn: '1 / -1',
+  padding: 12
+}
+
+function RankByValueMutationHarness() {
+  const sharedRows = useMemo<RankRow[]>(
+    () => [
+      { category: 'Alpha', value: 30 },
+      { category: 'Charlie', value: 10 },
+      { category: 'Bravo', value: 20 }
+    ],
+    []
+  )
+
+  const [observedOrder, setObservedOrder] = useState<string>('Checking shared data order...')
+
+  useEffect(() => {
+    const timeoutId = window.setTimeout(() => {
+      setObservedOrder(getOrder(sharedRows))
+    }, 100)
+
+    return () => window.clearTimeout(timeoutId)
+  }, [sharedRows])
+
+  const rankedConfig = useMemo(() => getConfig('Ranked by value ascending', sharedRows, 'asc'), [sharedRows])
+  const rankedExclusionConfig = useMemo(
+    () => getConfig('Ranked by value ascending with Alpha excluded', sharedRows, 'asc', ['Alpha']),
+    [sharedRows]
+  )
+  const sourceOrderConfig = useMemo(() => getConfig('Should preserve source order', sharedRows), [sharedRows])
+  const isChecking = observedOrder === 'Checking shared data order...'
+  const hasMutated = !isChecking && observedOrder !== sourceOrder
+
+  return (
+    <div
+      style={{
+        background: '#eef2f7',
+        display: 'grid',
+        gap: 16,
+        gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))',
+        padding: 16
+      }}
+    >
+      <section style={panelStyle} data-rank-by-value-panel='ranked'>
+        <p style={labelStyle}>Ranked chart</p>
+        <Chart config={rankedConfig} isEditor={false} interactionLabel='' />
+      </section>
+
+      <section style={panelStyle} data-rank-by-value-panel='source-order'>
+        <p style={labelStyle}>Source-order chart sharing the same data</p>
+        <Chart config={sourceOrderConfig} isEditor={false} interactionLabel='' />
+      </section>
+
+      <section style={panelStyle} data-rank-by-value-panel='ranked-exclusion'>
+        <p style={labelStyle}>Ranked chart with Alpha excluded</p>
+        <Chart config={rankedExclusionConfig} isEditor={false} interactionLabel='' />
+      </section>
+
+      <section style={diagnosticStyle} aria-label='Shared data order diagnostic'>
+        <div>
+          <strong>Expected shared data order:</strong> <span>{sourceOrder}</span>
+        </div>
+        <div>
+          <strong>Observed shared data order:</strong>{' '}
+          <span data-testid='rank-by-value-observed-order'>{observedOrder}</span>
+        </div>
+        <div data-testid='rank-by-value-mutation-status'>
+          <strong>Status:</strong> {hasMutated ? 'Shared data was mutated' : 'Shared data order is preserved'}
+        </div>
+      </section>
+    </div>
+  )
+}
+
+export const Shared_Data_Order_Is_Preserved: Story = {
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+
+    await waitFor(() => {
+      const rankedPanel = canvasElement.querySelector('[data-rank-by-value-panel="ranked"]')
+      const sourceOrderPanel = canvasElement.querySelector('[data-rank-by-value-panel="source-order"]')
+      const rankedExclusionPanel = canvasElement.querySelector('[data-rank-by-value-panel="ranked-exclusion"]')
+
+      expect(rankedPanel?.querySelector('svg')).toBeTruthy()
+      expect(sourceOrderPanel?.querySelector('svg')).toBeTruthy()
+      expect(rankedExclusionPanel?.querySelector('svg')).toBeTruthy()
+      expect(rankedPanel ? getRenderedCategoryOrder(rankedPanel) : '').toBe(rankedOrder)
+      expect(sourceOrderPanel ? getRenderedCategoryOrder(sourceOrderPanel) : '').toBe(sourceOrder)
+      expect(rankedExclusionPanel ? getRenderedCategoryOrder(rankedExclusionPanel) : '').toBe(rankedExcludingAlphaOrder)
+      expect(canvasElement.querySelector('[data-testid="rank-by-value-observed-order"]')?.textContent).toBe(sourceOrder)
+      expect(canvasElement.querySelector('[data-testid="rank-by-value-mutation-status"]')?.textContent).toContain(
+        'Shared data order is preserved'
+      )
+    })
+  }
+}