@cdc/chart 4.26.6 → 4.26.10

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

@@ -0,0 +1,207 @@
+import { useMemo } 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 { createPlots } from '../components/BoxPlot/helpers'
+import { getBoxPlotConfig } from '../helpers/getBoxPlotConfig'
+import type { ChartConfig } from '../types/ChartConfig'
+
+const expectedOutlier = '1000'
+const expectedMetadataValues = '10,20,30,40,1000'
+
+const boxPlotRows = [
+  { Group: 'Group A', Score: '10' },
+  { Group: 'Group A', Score: '20' },
+  { Group: 'Group A', Score: '30' },
+  { Group: 'Group A', Score: '40' },
+  { Group: 'Group A', Score: '1,000' }
+]
+
+const boxPlotLabels = {
+  maximum: 'Maximum',
+  q3: 'Upper Quartile',
+  median: 'Median',
+  q1: 'Lower Quartile',
+  minimum: 'Minimum',
+  count: 'Count',
+  mean: 'Mean',
+  sd: 'Standard Deviation',
+  iqr: 'Interquartile Range',
+  outliers: 'Outliers',
+  values: 'Values',
+  lowerBounds: 'Lower Bounds',
+  upperBounds: 'Upper Bounds'
+}
+
+const getConfig = (): ChartConfig =>
+  ({
+    version: '4.26.8',
+    type: 'chart',
+    visualizationType: 'Box Plot',
+    title: 'Box Plot Stats Parity Regression',
+    orientation: 'vertical',
+    animate: false,
+    data: boxPlotRows,
+    table: {
+      show: true,
+      expanded: true,
+      download: false,
+      label: 'Data Table',
+      indexLabel: ''
+    },
+    xAxis: {
+      dataKey: 'Group',
+      type: 'categorical',
+      label: 'Group'
+    },
+    yAxis: {
+      dataKey: 'Score',
+      label: 'Score',
+      hideAxis: false,
+      hideTicks: false,
+      gridLines: true,
+      numTicks: 5
+    },
+    series: [
+      {
+        dataKey: 'Score',
+        name: 'Score'
+      }
+    ],
+    boxplot: {
+      plots: [],
+      categories: [],
+      borders: 'true',
+      plotOutlierValues: true,
+      plotNonOutlierValues: true,
+      labels: boxPlotLabels
+    },
+    legend: {
+      hide: true
+    },
+    dataFormat: {
+      roundTo: 0,
+      commas: false
+    }
+  } as ChartConfig)
+
+function BoxPlotStatsParityRegression() {
+  const config = useMemo(() => getConfig(), [])
+  const [metadataPlots] = getBoxPlotConfig(config, config.data)
+  const rendererPlots = createPlots(config.data, config)
+  const metadataPlot = metadataPlots[0]
+  const rendererPlot = rendererPlots[0]
+
+  const metadataValues = metadataPlot?.values?.join(',') || ''
+  const metadataOutliers = metadataPlot?.columnOutliers?.join(',') || '(none)'
+  const rendererAcceptedValues =
+    [...(rendererPlot?.columnNonOutliers?.Score || []), ...(rendererPlot?.columnOutliers?.Score || [])].join(',') ||
+    '(none)'
+  const rendererOutliers = rendererPlot?.columnOutliers?.Score?.join(',') || '(none)'
+  const hasStatsParity = metadataValues === rendererAcceptedValues && metadataOutliers === rendererOutliers
+
+  return (
+    <div
+      style={{
+        background: '#eef2f7',
+        display: 'grid',
+        gap: 16,
+        padding: 16
+      }}
+    >
+      <section
+        style={{
+          background: '#fff',
+          border: '1px solid #d9dfe7',
+          borderRadius: 6,
+          padding: 16
+        }}
+      >
+        <Chart config={config} isEditor={false} interactionLabel='boxplot-stats-parity-regression' />
+      </section>
+
+      <section
+        aria-label='Box plot stats parity diagnostic'
+        style={{
+          background: '#f7f8fa',
+          border: '1px solid #d9dfe7',
+          borderRadius: 6,
+          display: 'grid',
+          gap: 8,
+          padding: 12
+        }}
+      >
+        <div>
+          <strong>Input score values:</strong> <span>10,20,30,40,1,000</span>
+        </div>
+        <div>
+          <strong>Metadata values:</strong> <span data-testid='boxplot-metadata-values'>{metadataValues}</span>
+        </div>
+        <div>
+          <strong>Metadata outliers:</strong> <span data-testid='boxplot-metadata-outliers'>{metadataOutliers}</span>
+        </div>
+        <div>
+          <strong>Renderer accepted values:</strong>{' '}
+          <span data-testid='boxplot-renderer-values'>{rendererAcceptedValues}</span>
+        </div>
+        <div>
+          <strong>Renderer outliers:</strong> <span data-testid='boxplot-renderer-outliers'>{rendererOutliers}</span>
+        </div>
+        <div data-testid='boxplot-stats-parity-status'>
+          <strong>Status:</strong> {hasStatsParity ? 'Stats parity preserved' : 'Issue reproduced'}
+        </div>
+      </section>
+    </div>
+  )
+}
+
+const getBoxPlotTableValue = (canvasElement: HTMLElement, rowLabel: string) => {
+  const row = Array.from(canvasElement.querySelectorAll('tr')).find(tableRow => {
+    const firstCell = tableRow.querySelector('th, td')
+    return firstCell?.textContent?.trim() === rowLabel
+  })
+
+  return Array.from(row?.querySelectorAll('th, td') || [])
+    .slice(1)
+    .map(cell => cell.textContent?.trim())
+    .join('')
+}
+
+const meta: Meta<typeof BoxPlotStatsParityRegression> = {
+  title: 'Components/Templates/Chart/Box Plot Stats Parity Regression',
+  component: BoxPlotStatsParityRegression,
+  parameters: {
+    layout: 'fullscreen'
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof BoxPlotStatsParityRegression>
+
+export const Formatted_Numeric_Values_Keep_Stats_Parity: Story = {
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+
+    await waitFor(() => {
+      expect(canvasElement.querySelector('[data-testid="boxplot-metadata-values"]')?.textContent).toBe(
+        expectedMetadataValues
+      )
+      expect(canvasElement.querySelector('[data-testid="boxplot-metadata-outliers"]')?.textContent).toBe(
+        expectedOutlier
+      )
+      expect(canvasElement.querySelector('[data-testid="boxplot-renderer-values"]')?.textContent).toBe(
+        expectedMetadataValues
+      )
+      expect(canvasElement.querySelector('[data-testid="boxplot-renderer-outliers"]')?.textContent).toBe(
+        expectedOutlier
+      )
+      expect(canvasElement.querySelector('[data-testid="boxplot-stats-parity-status"]')?.textContent).toContain(
+        'Stats parity preserved'
+      )
+      expect(getBoxPlotTableValue(canvasElement, 'Values')).toBe(expectedMetadataValues)
+      expect(getBoxPlotTableValue(canvasElement, 'Outliers')).toBe(expectedOutlier)
+    })
+  }
+}

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

@@ -0,0 +1,299 @@
+import React, { useMemo, useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { cloneConfig } from '@cdc/core/helpers/cloneConfig'
+import {
+  chartV21ColorDistribution,
+  colorblindColorDistribution,
+  divergentColorDistribution,
+  qualitativeStandardColorDistribution,
+  v2ColorDistribution
+} from '@cdc/core/helpers/palettes/colorDistributions'
+import Chart from '../CdcChart'
+import type { ChartConfig } from '../types/ChartConfig'
+import BarChartConfig from './_mock/editor-tests/bar-chart-test.json'
+import PieChartConfig from './_mock/pie_custom_colors.json'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Color Distribution',
+  component: Chart,
+  parameters: {
+    layout: 'fullscreen'
+  }
+}
+
+export default meta
+
+type Story = StoryObj<typeof Chart>
+
+const ITEM_OPTIONS = Array.from({ length: 9 }, (_, index) => index + 1)
+const PALETTE_GROUPS = [
+  {
+    label: 'Sequential',
+    options: [
+      { label: 'Blue', value: 'sequential_blue' },
+      { label: 'Teal', value: 'sequential_teal' },
+      { label: 'Purple', value: 'sequential_purple' },
+      { label: 'Orange', value: 'sequential_orange' },
+      { label: 'Green', value: 'sequential_green' }
+    ]
+  },
+  {
+    label: 'Divergent',
+    options: [
+      { label: 'Blue–Cyan', value: 'divergent_blue_cyan' },
+      { label: 'Blue–Purple', value: 'divergent_blue_purple' },
+      { label: 'Green–Orange', value: 'divergent_green_orange' },
+      { label: 'Blue–Orange', value: 'divergent_blue_orange' }
+    ]
+  },
+  {
+    label: 'Colorblind Safe',
+    options: [{ label: 'Qualitative Standard', value: 'qualitative_standard' }]
+  }
+] as const
+
+type Palette = (typeof PALETTE_GROUPS)[number]['options'][number]['value']
+type PaletteVersion = '2.0' | '2.1'
+type ChartType = 'Bar' | 'Pie' | 'Line'
+
+const getDistributionIndices = (itemCount: number, palette: Palette, paletteVersion: PaletteVersion): number[] => {
+  if (palette === 'qualitative_standard') {
+    const distribution = paletteVersion === '2.1' ? qualitativeStandardColorDistribution : colorblindColorDistribution
+    return distribution[itemCount]
+  }
+
+  if (palette.includes('divergent')) return divergentColorDistribution[itemCount]
+
+  const distribution = paletteVersion === '2.1' ? chartV21ColorDistribution : v2ColorDistribution
+  return distribution[itemCount]
+}
+
+const getDisplayedPaletteIndices = (
+  distributionIndices: number[],
+  paletteVersion: PaletteVersion,
+  isReversed: boolean
+): number[] => {
+  if (!isReversed) return distributionIndices
+
+  return paletteVersion === '2.1'
+    ? [...distributionIndices].reverse()
+    : distributionIndices.map(paletteIndex => 8 - paletteIndex)
+}
+
+const createCartesianConfig = (
+  chartType: Exclude<ChartType, 'Pie'>,
+  itemCount: number,
+  palette: Palette,
+  paletteVersion: PaletteVersion,
+  isReversed: boolean
+): ChartConfig => {
+  const config = cloneConfig(BarChartConfig) as ChartConfig
+  const distributionIndices = getDistributionIndices(itemCount, palette, paletteVersion)
+  const displayedPaletteIndices = getDisplayedPaletteIndices(distributionIndices, paletteVersion, isReversed)
+  const series = displayedPaletteIndices.map(paletteIndex => ({
+    axis: 'Left',
+    dataKey: `color_${paletteIndex + 1}`,
+    name: String(paletteIndex + 1),
+    tooltip: true,
+    type: chartType
+  }))
+
+  config.version = '4.26.8'
+  config.title = `${chartType} chart color distribution`
+  config.visualizationType = chartType
+  config.animate = false
+  config.barThickness = 0.8
+  config.general.palette = {
+    isReversed,
+    name: isReversed ? `${palette}reverse` : palette,
+    version: paletteVersion
+  }
+  config.series = series
+  config.data = Array.from({ length: chartType === 'Line' ? 4 : 1 }, (_, pointIndex) =>
+    series.reduce(
+      (row, item, seriesIndex) => ({
+        ...row,
+        [item.dataKey]: chartType === 'Line' ? 25 + seriesIndex * 6 + pointIndex * (seriesIndex % 2 ? -3 : 3) : 75
+      }),
+      { Category: chartType === 'Line' ? `Point ${pointIndex + 1}` : 'Items' }
+    )
+  )
+  config.xAxis.axisPadding = 20
+  config.xAxis.label = ''
+  config.yAxis.hideAxis = true
+  config.yAxis.hideLabel = true
+  config.yAxis.hideTicks = true
+  config.yAxis.label = ''
+  config.legend.position = 'top'
+  config.legend.style = chartType === 'Line' ? 'circles' : 'boxes'
+  config.table.show = false
+  config.visual.accent = false
+  config.visual.border = false
+
+  return config
+}
+
+const createPieConfig = (
+  sliceCount: number,
+  palette: Palette,
+  paletteVersion: PaletteVersion,
+  isReversed: boolean
+): ChartConfig => {
+  const config = cloneConfig(PieChartConfig) as ChartConfig
+  const data = Array.from({ length: sliceCount }, (_, index) => ({
+    [config.xAxis.dataKey]: `Slice ${index + 1}`,
+    [config.yAxis.dataKey]: 10 - index
+  }))
+
+  config.version = '4.26.8'
+  config.title = ''
+  config.showTitle = false
+  config.introText = ''
+  config.animate = false
+  config.general.palette = {
+    name: isReversed ? `${palette}reverse` : palette,
+    version: paletteVersion,
+    isReversed
+  }
+  config.data = data
+  config.formattedData = data
+  config.legend.hide = false
+  config.legend.label = ''
+  config.legend.description = ''
+  config.legend.position = 'top'
+  config.table.show = false
+  config.visual.accent = false
+  config.visual.border = false
+
+  return config
+}
+
+const ColorDistributionHarness = () => {
+  const [chartType, setChartType] = useState<ChartType>('Bar')
+  const [palette, setPalette] = useState<Palette>('qualitative_standard')
+  const [itemCount, setItemCount] = useState(3)
+  const [paletteVersion, setPaletteVersion] = useState<PaletteVersion>('2.0')
+  const [isReversed, setIsReversed] = useState(false)
+  const config = useMemo(
+    () =>
+      chartType === 'Pie'
+        ? createPieConfig(itemCount, palette, paletteVersion, isReversed)
+        : createCartesianConfig(chartType, itemCount, palette, paletteVersion, isReversed),
+    [chartType, itemCount, palette, paletteVersion, isReversed]
+  )
+
+  return (
+    <div style={{ padding: '1.5rem', maxWidth: 1100, margin: '0 auto' }}>
+      <div style={{ display: 'flex', flexWrap: 'nowrap', gap: '1rem', marginBottom: '1rem', overflowX: 'auto' }}>
+        <div style={{ flex: '0 0 auto' }}>
+          <label htmlFor='chart-color-distribution-type' style={{ display: 'block', fontWeight: 700, marginBottom: 4 }}>
+            Chart type
+          </label>
+          <select
+            id='chart-color-distribution-type'
+            value={chartType}
+            onChange={event => setChartType(event.target.value as ChartType)}
+            style={{ minWidth: 120 }}
+          >
+            <option value='Bar'>Bar chart</option>
+            <option value='Pie'>Pie chart</option>
+            <option value='Line'>Line chart</option>
+          </select>
+        </div>
+
+        <div style={{ flex: '0 0 auto' }}>
+          <label
+            htmlFor='chart-color-distribution-palette'
+            style={{ display: 'block', fontWeight: 700, marginBottom: 4 }}
+          >
+            Palette
+          </label>
+          <select
+            id='chart-color-distribution-palette'
+            value={palette}
+            onChange={event => setPalette(event.target.value as Palette)}
+            style={{ minWidth: 120 }}
+          >
+            {PALETTE_GROUPS.map(group => (
+              <optgroup key={group.label} label={group.label}>
+                {group.options.map(option => (
+                  <option key={option.value} value={option.value}>
+                    {option.label}
+                  </option>
+                ))}
+              </optgroup>
+            ))}
+          </select>
+        </div>
+
+        <div style={{ flex: '0 0 auto' }}>
+          <label
+            htmlFor='chart-color-distribution-item-count'
+            style={{ display: 'block', fontWeight: 700, marginBottom: 4 }}
+          >
+            Number of items
+          </label>
+          <select
+            id='chart-color-distribution-item-count'
+            value={itemCount}
+            onChange={event => setItemCount(Number(event.target.value))}
+            style={{ minWidth: 120 }}
+          >
+            {ITEM_OPTIONS.map(value => (
+              <option key={value} value={value}>
+                {value}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div style={{ flex: '0 0 auto' }}>
+          <label
+            htmlFor='chart-color-distribution-version'
+            style={{ display: 'block', fontWeight: 700, marginBottom: 4 }}
+          >
+            Palette version
+          </label>
+          <select
+            id='chart-color-distribution-version'
+            value={paletteVersion}
+            onChange={event => setPaletteVersion(event.target.value as PaletteVersion)}
+            style={{ minWidth: 120 }}
+          >
+            <option value='2.0'>2.0</option>
+            <option value='2.1'>2.1</option>
+          </select>
+        </div>
+
+        <div style={{ flex: '0 0 auto' }}>
+          <label
+            htmlFor='chart-color-distribution-reverse'
+            style={{ display: 'block', fontWeight: 700, marginBottom: 4 }}
+          >
+            Reversed
+          </label>
+          <select
+            id='chart-color-distribution-reverse'
+            value={isReversed ? 'yes' : 'no'}
+            onChange={event => setIsReversed(event.target.value === 'yes')}
+            style={{ minWidth: 120 }}
+          >
+            <option value='no'>No</option>
+            <option value='yes'>Yes</option>
+          </select>
+        </div>
+      </div>
+
+      <Chart
+        key={`${chartType}-${palette}-${itemCount}-${paletteVersion}-${isReversed}`}
+        config={config}
+        isEditor={false}
+      />
+    </div>
+  )
+}
+
+export const Color_Distribution: Story = {
+  name: 'Color Distribution',
+  render: () => <ColorDistributionHarness />
+}

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

@@ -0,0 +1,147 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { expect, waitFor } from 'storybook/test'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
+import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
+import Chart from '../CdcChart'
+import barChartStacked from './_mock/barchart_labels.mock.json'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Data Cutoff',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+const wastewaterVariantData = [
+  {
+    'Week ending': '2024-08-03',
+    JN1: 84.16,
+    KP2: 9.84,
+    KP3: 5.52,
+    LB1: 0.99,
+    XEC: 0.12
+  },
+  {
+    'Week ending': '2024-08-10',
+    JN1: 71.08,
+    KP2: 17.82,
+    KP3: 10.48,
+    LB1: 1,
+    XEC: 0.18
+  },
+  {
+    'Week ending': '2024-08-17',
+    JN1: 61.22,
+    KP2: 22.95,
+    KP3: 14.86,
+    LB1: 1.04,
+    XEC: 0.26
+  }
+]
+
+const variantSeries = [
+  { dataKey: 'JN1', name: 'JN.1', type: 'Bar', axis: 'Left', tooltip: true },
+  { dataKey: 'KP2', name: 'KP.2', type: 'Bar', axis: 'Left', tooltip: true },
+  { dataKey: 'KP3', name: 'KP.3', type: 'Bar', axis: 'Left', tooltip: true },
+  { dataKey: 'LB1', name: 'LB.1', type: 'Bar', axis: 'Left', tooltip: true },
+  { dataKey: 'XEC', name: 'XEC', type: 'Bar', axis: 'Left', tooltip: true }
+]
+
+const wastewaterVariantDataCutoffConfig = editConfigKeys(barChartStacked, [
+  {
+    path: ['title'],
+    value: 'SARS-CoV-2 Variant Abundances in Triturator Wastewater Samples Over Time'
+  },
+  { path: ['showTitle'], value: true },
+  { path: ['visualizationType'], value: 'Bar' },
+  { path: ['visualizationSubType'], value: 'stacked' },
+  { path: ['orientation'], value: 'vertical' },
+  { path: ['dataCutoff'], value: '1' },
+  { path: ['dataFormat', 'preserveOriginalDecimals'], value: true },
+  { path: ['dataFormat', 'suffix'], value: '%' },
+  { path: ['xAxis', 'dataKey'], value: 'Week ending' },
+  { path: ['xAxis', 'label'], value: 'Week ending' },
+  { path: ['xAxis', 'type'], value: 'categorical' },
+  { path: ['xAxis', 'tickRotation'], value: 45 },
+  { path: ['yAxis', 'label'], value: 'Variant abundance (%)' },
+  { path: ['yAxis', 'min'], value: '0' },
+  { path: ['yAxis', 'max'], value: '100' },
+  { path: ['yAxis', 'numTicks'], value: '5' },
+  { path: ['legend', 'singleRow'], value: false },
+  { path: ['table', 'show'], value: true },
+  { path: ['table', 'expanded'], value: true },
+  { path: ['table', 'showVertical'], value: true },
+  { path: ['table', 'indexLabel'], value: 'Week ending' },
+  { path: ['series'], value: variantSeries },
+  {
+    path: ['columns'],
+    value: Object.fromEntries(
+      variantSeries.map((series, index) => [
+        series.dataKey,
+        {
+          name: series.dataKey,
+          label: series.name,
+          dataTable: true,
+          tooltips: true,
+          prefix: '',
+          suffix: '',
+          order: index + 2
+        }
+      ])
+    )
+  },
+  { path: ['data'], value: wastewaterVariantData },
+  { path: ['formattedData'], value: wastewaterVariantData }
+])
+
+export const Wastewater_Variant_Abundance_Under_One_Percent: Story = {
+  args: {
+    config: wastewaterVariantDataCutoffConfig,
+    isEditor: false
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Reproduces the data cutoff report for stacked SARS-CoV-2 wastewater variant abundances: sub-1% values such as 0.12, 0.26, and 0.99 render as <1% in the tooltip and data table when Data Cutoff is set to 1.'
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+
+    await waitFor(() => {
+      const tooltips = Array.from(canvasElement.querySelectorAll('[data-tooltip-html]')).map(
+        element => element.getAttribute('data-tooltip-html') || ''
+      )
+      const underOneTooltip = tooltips.find(
+        tooltip => tooltip.includes('Week ending: 2024-08-03') && tooltip.includes('LB.1: <1%')
+      )
+      const xecUnderOneTooltip = tooltips.find(
+        tooltip => tooltip.includes('Week ending: 2024-08-17') && tooltip.includes('XEC: <1%')
+      )
+      const exactCutoffTooltip = tooltips.find(
+        tooltip => tooltip.includes('Week ending: 2024-08-10') && tooltip.includes('LB.1: 1%')
+      )
+      const aboveCutoffTooltip = tooltips.find(
+        tooltip => tooltip.includes('Week ending: 2024-08-17') && tooltip.includes('LB.1: 1.04%')
+      )
+      const dataTable = canvasElement.querySelector('.data-table')
+      const tableRows = Array.from(dataTable?.querySelectorAll('tbody tr') || []).map(row =>
+        Array.from(row.querySelectorAll('th, td')).map(cell => cell.textContent?.trim())
+      )
+
+      expect(underOneTooltip).toBeDefined()
+      expect(xecUnderOneTooltip).toBeDefined()
+      expect(exactCutoffTooltip).toBeDefined()
+      expect(aboveCutoffTooltip).toBeDefined()
+      expect(dataTable).toBeInTheDocument()
+      expect(tableRows[0]).toEqual(['2024-08-03', '84.16%', '9.84%', '5.52%', '<1%', '<1%'])
+      expect(tableRows[1]).toEqual(['2024-08-10', '71.08%', '17.82%', '10.48%', '1%', '<1%'])
+      expect(tableRows[2]).toEqual(['2024-08-17', '61.22%', '22.95%', '14.86%', '1.04%', '<1%'])
+    })
+  }
+}
+
+export default meta