@cdc/chart 4.26.5 → 4.26.7

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@cdc/chart",
-  "version": "4.26.5",
+  "version": "4.26.7",
   "description": "React component for visualizing tabular data in various types of charts",
   "license": "Apache-2.0",
   "author": "Matthew Pallansch <mpallansch@adittech.com>",
   "bugs": "https://github.com/CDCgov/cdc-open-viz/issues",
   "dependencies": {
-    "@cdc/core": "^4.26.5",
+    "@cdc/core": "^4.26.7",
     "@hello-pangea/dnd": "^16.2.0",
     "@react-spring/web": "^9.7.5",
     "@rollup/plugin-dsv": "^3.0.2",
@@ -14,14 +14,11 @@
     "@visx/axis": "^3.12.0",
     "@visx/brush": "^3.12.0",
     "@visx/curve": "^3.12.0",
-    "@visx/drag": "^3.12.0",
     "@visx/event": "^3.12.0",
     "@visx/glyph": "^3.12.0",
-    "@visx/gradient": "^3.12.0",
     "@visx/heatmap": "^3.12.0",
     "@visx/legend": "^3.12.0",
     "@visx/marker": "^3.12.0",
-    "@visx/mock-data": "^3.12.0",
     "@visx/pattern": "^3.12.0",
     "@visx/responsive": "^3.12.0",
     "@visx/scale": "^3.12.0",
@@ -32,20 +29,16 @@
     "@vitejs/plugin-react": "^5.1.2",
     "chroma-js": "^3.1.2",
     "d3-array": "^3.2.4",
-    "d3-format": "^3.1.2",
     "d3-sankey": "^0.12.3",
     "d3-time-format": "^4.1.0",
     "dompurify": "^3.4.0",
     "html-react-parser": "^5.2.3",
-    "js-base64": "^2.5.2",
     "lodash": "^4.17.23",
-    "papaparse": "^5.5.2",
     "react-accessible-accordion": "^5.0.1",
     "react-icons": "^5.5.0",
     "react-tooltip": "5.8.2-beta.3",
     "resize-observer-polyfill": "^1.5.1",
     "sass": "^1.89.2",
-    "use-debounce": "^10.1.0",
     "vite": "^7.3.1",
     "vite-plugin-css-injected-by-js": "^2.4.0",
     "vite-plugin-svgr": "^4.2.0",
@@ -53,11 +46,10 @@
   },
   "devDependencies": {
     "@types/d3-array": "^3.2.1",
-    "@types/d3-format": "^3.0.4",
     "@types/d3-sankey": "^0.12.4",
     "@types/d3-time-format": "^4.0.3"
   },
-  "gitHead": "61c025165d96b45a6002c34582c5a622a9d865a9",
+  "gitHead": "ca89fe0eb083a52a425fa5971bbe74716b5bb0f9",
   "main": "dist/cdcchart",
   "moduleName": "CdcChart",
   "peerDependencies": {

package/src/CdcChart.tsx

@@ -4,10 +4,10 @@ import { ChartConfig } from './types/ChartConfig'
 import { getFileExtension } from '@cdc/core/helpers/getFileExtension'
 import { isSolrCsv, isSolrJson } from '@cdc/core/helpers/isSolr'
 import { parseCsvWithQuotes } from '@cdc/core/helpers/parseCsvWithQuotes'
-import cacheBustingString from '@cdc/core/helpers/cacheBustingString'
+import { addCsvCacheBuster } from '@cdc/core/helpers/csvCacheBuster'
 import { extractDataAndMetadata } from '@cdc/core/helpers/extractDataAndMetadata'
 import Loading from '@cdc/core/components/Loading'
-import _ from 'lodash'
+import isEqual from 'lodash/isEqual'
 import EditorContext from '@cdc/core/contexts/EditorContext'
 interface CdcChartProps {
   configUrl?: string
@@ -90,7 +90,7 @@ const CdcChartWrapper: React.FC<CdcChartProps> = ({
   }, [configUrl, loadConfig])
 
   useEffect(() => {
-    if (!_.isEqual(prevFiltersRef.current, config.filters)) {
+    if (!isEqual(prevFiltersRef.current, config.filters)) {
       prevFiltersRef.current = config.filters
       reloadFilteredData()
     }
@@ -112,11 +112,12 @@ const parseCsv = (responseText: string, delimiter = '|') => {
 
 const fetchAndParseData = async (url: string, ext: string) => {
   try {
-    const response = await fetch(url)
-    if (ext === 'csv' || isSolrCsv(url)) {
+    if (ext?.toLowerCase() === 'csv' || isSolrCsv(url)) {
+      const response = await fetch(addCsvCacheBuster(url))
       const responseText = await response.text()
       return { data: parseCsv(responseText), dataMetadata: {} }
-    } else if (ext === 'json' || isSolrJson(url)) {
+    } else if (ext?.toLowerCase() === 'json' || isSolrJson(url)) {
+      const response = await fetch(url)
       const json = await response.json()
       return extractDataAndMetadata(json)
     }

package/src/CdcChartComponent.tsx

@@ -101,6 +101,7 @@ import { prepareSmallMultiplesDataTable } from './helpers/smallMultiplesHelpers'
 import { calcInitialHeight } from './helpers/sizeHelpers'
 import { ensureSpecialChartAxisTypes } from './helpers/ensureSpecialChartAxisTypes'
 import { findColumnConfigByName } from './helpers/seriesColumnSettings'
+import { sortByCategoryOrder } from './helpers/categoryOrder'
 
 // styles
 import './scss/main.scss'
@@ -231,6 +232,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     config.enableMarkupVariables,
     config.markupVariables,
     config.data,
+    config.dataMetadata,
     config.filters,
     title,
     config.superTitle,
@@ -246,6 +248,10 @@ const CdcChart: React.FC<CdcChartProps> = ({
   const processedIntroText = processedTextFields.introText
   const processedLegacyFootnotes = processedTextFields.legacyFootnotes
   const processedDescription = processedTextFields.description
+  const chartDataTableIsRendered =
+    Boolean(config.table?.show) &&
+    config.visualizationType !== 'Spark Line' &&
+    ((Boolean(config.xAxis?.dataKey) && config.visualizationType !== 'Sankey') || config.visualizationType === 'Sankey')
   // Note: Axis labels are processed within updateConfig to ensure they use the correct data
 
   // set defaults on titles if blank AND only in editor
@@ -259,14 +265,30 @@ const CdcChart: React.FC<CdcChartProps> = ({
   const legendId = useId()
 
   const convertLineToBarGraph = isConvertLineToBarGraph(config, filteredData)
+  const xAxisDataKey = config.xAxis?.dataKey
+  const xAxisType = config.xAxis?.type
+  const xAxisCategoryOrderType = config.xAxis?.categoryOrderType
+  const xAxisCategoryOrder = config.xAxis?.categoryOrder
+  const categoryOrderConfig = useMemo(
+    () =>
+      ({
+        xAxis: {
+          dataKey: xAxisDataKey,
+          type: xAxisType,
+          categoryOrderType: xAxisCategoryOrderType,
+          categoryOrder: xAxisCategoryOrder
+        }
+      } as Pick<ChartConfig, 'xAxis'>),
+    [xAxisDataKey, xAxisType, xAxisCategoryOrderType, xAxisCategoryOrder]
+  )
 
   // Declaratively calculate series keys for pie charts based on filtered data
   const pieSeriesKeys = useMemo(() => {
-    if (config.visualizationType !== 'Pie' || !config.xAxis?.dataKey) return null
+    if (visualizationType !== 'Pie' || !xAxisDataKey) return null
     const data = filteredData?.length > 0 ? filteredData : excludedData
     if (!data) return null
-    return uniq(data.map(d => d[config.xAxis.dataKey]))
-  }, [config.visualizationType, config.xAxis?.dataKey, filteredData, excludedData])
+    return uniq(sortByCategoryOrder(data, categoryOrderConfig).map(d => d[xAxisDataKey]))
+  }, [visualizationType, xAxisDataKey, categoryOrderConfig, filteredData, excludedData])
 
   const prepareConfig = (loadedConfig: ChartConfig) => {
     // Create defaults without version to avoid overriding legacy configs
@@ -454,13 +476,15 @@ const CdcChart: React.FC<CdcChartProps> = ({
     if (newConfig.visualizationType === 'Pie') {
       // Use the same data that will be passed to PieChart (after exclusions and filters)
       const pieData = currentData.length > 0 ? currentData : newExcludedData
-      newConfig.runtime.seriesKeys = uniq(pieData.map(d => d[newConfig.xAxis.dataKey]))
+      newConfig.runtime.seriesKeys = uniq(sortByCategoryOrder(pieData, newConfig).map(d => d[newConfig.xAxis.dataKey]))
       newConfig.runtime.seriesLabelsAll = newConfig.runtime.seriesKeys
       newConfig.runtime.isPieChart = true // Flag to know when to use derived keys
     } else if (newConfig.visualizationType === 'Radar') {
       // Radar chart: seriesKeys are the entity names from xAxis.dataKey
       const radarData = currentData.length > 0 ? currentData : newExcludedData
-      newConfig.runtime.seriesKeys = uniq(radarData.map(d => d[newConfig.xAxis.dataKey]))
+      newConfig.runtime.seriesKeys = uniq(
+        sortByCategoryOrder(radarData, newConfig).map(d => d[newConfig.xAxis.dataKey])
+      )
       newConfig.runtime.seriesLabelsAll = newConfig.runtime.seriesKeys
     } else {
       const finalData = dataOverride || newConfig.formattedData || newConfig.data
@@ -480,7 +504,9 @@ const CdcChart: React.FC<CdcChartProps> = ({
               lineType: series.lineType,
               originalDataKey: series.dataKey,
               dynamicCategory: series.dynamicCategory,
-              tooltip: true
+              tooltip: true,
+              weight: series.weight,
+              axis: series.axis
             })
           })
           // return the series keys
@@ -565,7 +591,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
         ...newConfig.legend,
         position: newConfig.legend?.position || 'top',
         style: newConfig.legend?.style || 'gradient',
-        subStyle: newConfig.legend?.subStyle || 'smooth'
+        subStyle:
+          newConfig.legend?.subStyle === 'smooth' ? 'linear blocks' : newConfig.legend?.subStyle || 'linear blocks'
       }
       newConfig.yAxis = {
         ...newConfig.yAxis,
@@ -769,6 +796,17 @@ const CdcChart: React.FC<CdcChartProps> = ({
     return newConfig
   }
 
+  const configDataDependency = configObj?.data?.length ? configObj.data : null
+  const configDataMetadataDependency = configObj?.dataMetadata ? JSON.stringify(configObj.dataMetadata) : null
+  const configExclusionsDependency = [
+    configObj?.xAxis?.type,
+    configObj?.xAxis?.dataKey,
+    configObj?.exclusions?.active,
+    configObj?.exclusions?.dateStart,
+    configObj?.exclusions?.dateEnd,
+    ...(configObj?.exclusions?.keys || [])
+  ].join('|')
+
   useEffect(() => {
     const load = async () => {
       try {
@@ -790,7 +828,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     }
 
     load()
-  }, [configObj?.data?.length ? configObj.data : null])
+  }, [configDataDependency, configDataMetadataDependency, configExclusionsDependency])
 
   /**
    * When cove has a config and container ref publish the cove_loaded event.
@@ -1041,6 +1079,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
         rightSuffix,
         bottomPrefix,
         bottomSuffix,
+        bottomCommas,
         bottomAbbreviated,
         preserveOriginalDecimals
       }
@@ -1136,7 +1175,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
 
     if (
       (axis === 'left' && commas && abbreviated && shouldAbbreviate) ||
-      (axis === 'bottom' && commas && abbreviated && shouldAbbreviate)
+      (axis === 'bottom' && bottomCommas && bottomAbbreviated && shouldAbbreviate)
     ) {
       num = num // eslint-disable-line
     } else {
@@ -1226,9 +1265,14 @@ const CdcChart: React.FC<CdcChartProps> = ({
     return config?.xAxis?.dataKey ? transform.cleanData(data, excludedKey, keysToClean) : data
   }
 
+  const orderedTableData = useMemo(
+    () => sortByCategoryOrder(filteredData || excludedData, categoryOrderConfig),
+    [filteredData, excludedData, categoryOrderConfig]
+  )
+
   const getTableRuntimeData = () => {
     if (visualizationType === 'Sankey') return config?.data?.[0]?.tableData
-    const data = filteredData || excludedData
+    const data = orderedTableData
     if (config.visualizationType === 'Pie' && !config.dataFormat?.showPiePercent) {
       return getPiePercent(data, config?.yAxis?.dataKey)
     }
@@ -1254,7 +1298,18 @@ const CdcChart: React.FC<CdcChartProps> = ({
   }
 
   // Transform and clean data for chart rendering
-  const transformedData = getTransformedData({ brushData: state.brushData, filteredData, excludedData, clean })
+  const transformedData = sortByCategoryOrder(
+    getTransformedData({ brushData: state.brushData, filteredData, excludedData, clean }),
+    config
+  )
+  const configYAxisDomainData = (config as ChartConfig).yAxisDomainData
+  const yAxisDomainData = useMemo(() => {
+    if (Array.isArray(configYAxisDomainData) && configYAxisDomainData.length > 0) {
+      return clean(getExcludedData(config, configYAxisDomainData))
+    }
+
+    return clean(excludedData)
+  }, [config, configYAxisDomainData, excludedData])
 
   // Filter annotations to only those visible in current data view
   const visibleAnnotations = getVisibleAnnotations(config.annotations, transformedData, config.xAxis?.dataKey)
@@ -1403,11 +1458,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                 {isDashboard && config.table && config.table.show && config.table.showDataTableLink
                   ? tableLink
                   : link && link}
-                {(config.xAxis.dataKey &&
-                  config.table.show &&
-                  config.visualizationType !== 'Spark Line' &&
-                  config.visualizationType !== 'Sankey') ||
-                (config.visualizationType === 'Sankey' && config.table.show)
+                {chartDataTableIsRendered
                   ? (() => {
                       let dataTableConfig = pivotDynamicSeries(config)
                       let dataTableColumns = config.columns
@@ -1433,6 +1484,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                         <DataTable
                           key={config.table?.defaultSort?.column || ''}
                           config={dataTableConfig}
+                          dataConfig={config.dataKey ? datasets?.[config.dataKey] : undefined}
                           rawData={dataTableRawData}
                           runtimeData={dataTableRuntimeData}
                           expandDataTable={config.table.expanded}
@@ -1701,12 +1753,13 @@ const CdcChart: React.FC<CdcChartProps> = ({
     setSharedFilter,
     setSharedFilterValue,
     svgRef,
-    tableData: filteredData || excludedData,
+    tableData: orderedTableData,
     transformedData,
     twoColorPalette,
     unfilteredData: stateData,
     updateConfig,
-    visibleAnnotations
+    visibleAnnotations,
+    yAxisDomainData
   }
 
   return (

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

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect } from 'storybook/test'
+import Chart from '../CdcChart'
+import pieConfig from './_mock/pie_with_data.json'
+import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
+import { assertVisualizationRendered, 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 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 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.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