@cdc/chart 4.24.10 → 4.24.11

package/index.html

@@ -62,19 +62,19 @@
     <!-- <div class="react-container" data-config="/examples/feature/forest-plot/linear.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/forest-plot/logarithmic.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/forest-plot/forest-plot.json"></div> -->
-    <div class="react-container" data-config="/examples/feature/pie/planet-pie-example-config.json"></div>
+    <!-- <div class="react-container" data-config="/examples/feature/pie/planet-pie-example-config.json"></div> -->
     <!-- <div class="react-container" data-config=https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Line_Chart_Viz.json></div> -->
     <!-- <div class="react-container" data-config=/examples/feature/regions/index.json></div> -->
     <!-- <div class="react-container" data-config=https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Line_Chart_Regions_Viz.json></div> -->
     <!-- <div class="react-container" data-config=https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Line_Chart_Regions_Viz.json></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/forecasting/forecasting.json"></div> -->
-    <div class="react-container" data-config="/examples/feature/forecasting/combo-forecasting.json"></div>
+    <!-- <div class="react-container" data-config="/examples/feature/forecasting/combo-forecasting.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/forecasting/effective_reproduction.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-date.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-category.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/scatterplot/scatterplot.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/deviation/planet-deviation-config.json"></div> -->
-    <!-- <div class="react-container" data-config="/examples/feature/boxplot/boxplot.json"></div> -->
+    <div class="react-container" data-config="/examples/feature/boxplot/boxplot.json"></div>
     <!-- <div class="react-container" data-config="/examples/feature/combo/planet-combo-example-config.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/combo/right-issues.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/region-issue.json"></div> -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/chart",
-  "version": "4.24.10",
+  "version": "4.24.11",
   "description": "React component for visualizing tabular data in various types of charts",
   "moduleName": "CdcChart",
   "main": "dist/cdcchart",
@@ -61,7 +61,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "a4d88d1bc91f596e1b0307d8e25c57ad8c668b75",
+  "gitHead": "9ab5ee9b2b0ef7321a66a2104be6ce8899ec3808",
   "devDependencies": {
     "@types/d3-sankey": "^0.12.4",
     "resize-observer-polyfill": "^1.5.1"

package/src/CdcChart.tsx

@@ -35,7 +35,6 @@ import EditorPanel from './components/EditorPanel'
 import { abbreviateNumber } from './helpers/abbreviateNumber'
 import { handleChartTabbing } from './helpers/handleChartTabbing'
 import { getQuartiles } from './helpers/getQuartiles'
-import { sortAsc, sortDesc } from './helpers/sort'
 import { handleChartAriaLabels } from './helpers/handleChartAriaLabels'
 import { lineOptions } from './helpers/lineOptions'
 import { handleLineType } from './helpers/handleLineType'
@@ -55,17 +54,16 @@ import { DataTransform } from '@cdc/core/helpers/DataTransform'
 import cacheBustingString from '@cdc/core/helpers/cacheBustingString'
 import isNumber from '@cdc/core/helpers/isNumber'
 import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
-import { getQueryStringFilterValue } from '@cdc/core/helpers/queryStringUtils'
 import { isConvertLineToBarGraph } from './helpers/isConvertLineToBarGraph'
-import { calcInitialHeight } from './helpers/sizeHelpers'
-import { isLegendWrapViewport, isMobileHeightViewport } from '@cdc/core/helpers/viewports'
+import { isLegendWrapViewport } from '@cdc/core/helpers/viewports'
 
 import './scss/main.scss'
 // load both then config below determines which to use
 import DataTable from '@cdc/core/components/DataTable'
+import type { TableConfig } from '@cdc/core/components/DataTable/types/TableConfig'
 import { getFileExtension } from '@cdc/core/helpers/getFileExtension'
 import Title from '@cdc/core/components/ui/Title'
-import { ChartConfig } from './types/ChartConfig'
+import { AllChartsConfig, ChartConfig } from './types/ChartConfig'
 import { Label } from './types/Label'
 import { type ViewportSize } from './types/ChartConfig'
 import { isSolrCsv, isSolrJson } from '@cdc/core/helpers/isSolr'
@@ -74,6 +72,8 @@ import { filterVizData } from '@cdc/core/helpers/filterVizData'
 import LegendWrapper from './components/LegendWrapper'
 import _ from 'lodash'
 import { addValuesToFilters } from '@cdc/core/helpers/addValuesToFilters'
+import { Runtime } from '@cdc/core/types/Runtime'
+import { Pivot } from '@cdc/core/types/Table'
 
 interface CdcChartProps {
   configUrl?: string
@@ -129,14 +129,6 @@ const CdcChart = ({
   })
 
   const { description, visualizationType } = config
-  let [width] = dimensions
-  const useVertical = config.orientation === 'vertical'
-  const useMobileVertical = config.heights?.mobileVertical && ['xs', 'xxs'].includes(currentViewport)
-  const responsiveVertical = useMobileVertical ? 'mobileVertical' : 'vertical'
-  const renderedOrientation = useVertical ? responsiveVertical : 'horizontal'
-  let height = config.aspectRatio ? width * config.aspectRatio : config?.heights?.[renderedOrientation]
-  if (config.visualizationType === 'Pie') height = config?.heights?.[renderedOrientation]
-  height = height + Number(config.orientation === 'horizontal' ? config.yAxis.size : config?.xAxis?.size) + 45
 
   const legendRef = useRef(null)
   const parentRef = useRef(null)
@@ -300,9 +292,6 @@ const CdcChart = ({
     }
     let newConfig = { ...defaults, ...response }
 
-    if (newConfig.visualizationType === 'Box Plot') {
-      newConfig.legend.hide = true
-    }
     if (undefined === newConfig.table.show) newConfig.table.show = !isDashboard
 
     newConfig.series.forEach(series => {
@@ -321,7 +310,7 @@ const CdcChart = ({
     updateConfig(processedConfig, data)
   }
 
-  const updateConfig = (_config, dataOverride?: any[]) => {
+  const updateConfig = (_config: AllChartsConfig, dataOverride?: any[]) => {
     const newConfig = _.cloneDeep(_config)
     let data = dataOverride || stateData
 
@@ -384,15 +373,15 @@ const CdcChart = ({
     }
 
     //Enforce default values that need to be calculated at runtime
-    newConfig.runtime = {}
-    newConfig.runtime.series = newConfig.dynamicSeries ? [] : newConfig.series
+    newConfig.runtime = {} as Runtime
+    newConfig.runtime.series = newConfig.dynamicSeries ? [] : _.cloneDeep(newConfig.series)
     newConfig.runtime.seriesLabels = {}
     newConfig.runtime.seriesLabelsAll = []
     newConfig.runtime.originalXAxis = newConfig.xAxis
 
     if (newConfig.dynamicSeries) {
       let finalData = dataOverride || newConfig.formattedData || newConfig.data
-      if (finalData && finalData.length && finalData.length > 0) {
+      if (finalData?.length) {
         Object.keys(finalData[0]).forEach(seriesKey => {
           if (
             seriesKey !== newConfig.xAxis.dataKey &&
@@ -414,30 +403,42 @@ const CdcChart = ({
       newConfig.runtime.seriesKeys = (dataOverride || data).map(d => d[newConfig.xAxis.dataKey])
       newConfig.runtime.seriesLabelsAll = newConfig.runtime.seriesKeys
     } else {
-      newConfig.runtime.seriesKeys = newConfig.runtime.series
-        ? newConfig.runtime.series.map(series => {
-            newConfig.runtime.seriesLabels[series.dataKey] = series.name || series.label || series.dataKey
-            newConfig.runtime.seriesLabelsAll.push(series.name || series.dataKey)
-            return series.dataKey
+      const finalData = dataOverride || newConfig.formattedData || newConfig.data
+      newConfig.runtime.seriesKeys = (newConfig.runtime.series || []).flatMap(series => {
+        if (series.dynamicCategory) {
+          _.remove(newConfig.runtime.seriesLabelsAll, label => label === series.dataKey)
+          _.remove(newConfig.runtime.series, s => s.dataKey === series.dataKey)
+          // grab the dynamic series keys from the data
+          const seriesKeys: string[] = _.uniq(finalData.map(d => d[series.dynamicCategory]))
+          // for each of those keys perform side effects
+          seriesKeys.forEach(dataKey => {
+            newConfig.runtime.seriesLabels[dataKey] = dataKey
+            newConfig.runtime.seriesLabelsAll.push(dataKey)
+            newConfig.runtime.series.push({
+              dataKey,
+              type: series.type,
+              lineType: series.lineType,
+              originalDataKey: series.dataKey,
+              dynamicCategory: series.dynamicCategory,
+              tooltip: true
+            })
           })
-        : []
+          // return the series keys
+          return seriesKeys
+        } else {
+          newConfig.runtime.seriesLabels[series.dataKey] = series.name || series.label || series.dataKey
+          newConfig.runtime.seriesLabelsAll.push(series.name || series.dataKey)
+          // return the series keys
+          return [series.dataKey]
+        }
+      })
     }
 
     if (newConfig.visualizationType === 'Box Plot' && newConfig.series) {
-      let allKeys = newExcludedData
-        ? newExcludedData.map(d => d[newConfig.xAxis.dataKey])
-        : data.map(d => d[newConfig.xAxis.dataKey])
-      let allValues = newExcludedData
-        ? newExcludedData.map(d => Number(d[newConfig?.series[0]?.dataKey]))
-        : data.map(d => Number(d[newConfig?.series[0]?.dataKey]))
-
-      const uniqueArray = function (arrArg) {
-        return arrArg.filter(function (elem, pos, arr) {
-          return arr.indexOf(elem) === pos
-        })
-      }
+      const combinedData = filteredData || data
+      let allKeys = combinedData.map(d => d[newConfig.xAxis.dataKey])
+      const groups = _.uniq(allKeys)
 
-      const groups = uniqueArray(allKeys)
       let tableData: any[] = []
       const plots: any[] = []
 
@@ -449,9 +450,8 @@ const CdcChart = ({
           if (!g) throw new Error('No groups resolved in box plots')
 
           // filter data by group
-          let filteredData = newExcludedData
-            ? newExcludedData.filter(item => item[newConfig.xAxis.dataKey] === g)
-            : data.filter(item => item[newConfig.xAxis.dataKey] === g)
+          let filteredData = combinedData.filter(item => item[newConfig.xAxis.dataKey] === g)
+
           let filteredDataValues: number[] = filteredData.map(item => Number(item[newConfig?.series[0]?.dataKey]))
 
           // Sort the data for upcoming functions.
@@ -460,16 +460,18 @@ const CdcChart = ({
           // ! - Notice d3.quantile doesn't work here, and we had to take a custom route.
           const quartiles = getQuartiles(sortedData)
 
-          if (!filteredData) throw new Error('boxplots dont have data yet')
-          if (!plots) throw new Error('boxplots dont have plots yet')
+          const getValuesBySeriesKey = () => {
+            const allSeriesKeys = newConfig.series.map(item => item?.dataKey)
+            const result = {}
+            allSeriesKeys.forEach(key => {
+              result[key] = filteredData.map(item => item[key])
+            })
 
-          if (newConfig.boxplot.firstQuartilePercentage === '') {
-            newConfig.boxplot.firstQuartilePercentage = 0
+            return result
           }
 
-          if (newConfig.boxplot.thirdQuartilePercentage === '') {
-            newConfig.boxplot.thirdQuartilePercentage = 0
-          }
+          if (!filteredData) throw new Error('boxplots dont have data yet')
+          if (!plots) throw new Error('boxplots dont have plots yet')
 
           const q1 = quartiles.q1
           const q3 = quartiles.q3
@@ -478,9 +480,7 @@ const CdcChart = ({
           const upperBounds = q3 + (q3 - q1) * 1.5
 
           const outliers = sortedData.filter(v => v < lowerBounds || v > upperBounds)
-          let nonOutliers = filteredDataValues
 
-          nonOutliers = nonOutliers.filter(item => !outliers.includes(item))
           const minValue: number = d3.min<number>(filteredDataValues) || 0
           const _colMin = d3.max<number>([minValue, q1 - 1.5 * iqr])
           plots.push({
@@ -490,7 +490,7 @@ const CdcChart = ({
             columnMedian: Number(d3.median(filteredDataValues)).toFixed(newConfig.dataFormat.roundTo),
             columnFirstQuartile: q1.toFixed(newConfig.dataFormat.roundTo),
             columnMin: _colMin,
-            columnTotal: filteredDataValues.reduce((partialSum, a) => partialSum + a, 0),
+            columnCount: filteredData.length,
             columnSd: Number(d3.deviation(filteredDataValues)).toFixed(newConfig.dataFormat.roundTo),
             columnMean: Number(d3.mean(filteredDataValues)).toFixed(newConfig.dataFormat.roundTo),
             columnIqr: Number(iqr).toFixed(newConfig.dataFormat.roundTo),
@@ -498,7 +498,7 @@ const CdcChart = ({
             columnUpperBounds: d3.min([d3.max(sortedData), q1 + 1.5 * iqr]),
             columnOutliers: outliers,
             values: filteredDataValues,
-            nonOutlierValues: nonOutliers
+            keyValues: getValuesBySeriesKey()
           })
         } catch (e) {
           console.error('COVE: ', e.message) // eslint-disable-line
@@ -516,8 +516,6 @@ const CdcChart = ({
         return null // resolve eslint
       })
 
-      // any other data we can add to boxplots
-      newConfig.boxplot['allValues'] = allValues
       newConfig.boxplot['categories'] = groups
       newConfig.boxplot.plots = plots
       newConfig.boxplot.tableData = tableData
@@ -616,21 +614,6 @@ const CdcChart = ({
     setConfig(newConfig)
   }
 
-  // Gets filter values from dataset
-  const generateValuesForFilter = (columnName, data = this.state.data) => {
-    const values: any[] = []
-
-    data.forEach(row => {
-      const value = row[columnName]
-      //@ts-ignore
-      if (value && false === values.includes(value)) {
-        values.push(value)
-      }
-    })
-
-    return values
-  }
-
   // Sorts data series for horizontal bar charts
   const sortData = (a, b) => {
     let sortKey =
@@ -653,7 +636,6 @@ const CdcChart = ({
   const resizeObserver = new ResizeObserver(entries => {
     for (let entry of entries) {
       let { width, height } = entry.contentRect
-      let svgMarginWidth = 30
       let editorWidth = 350
 
       width = isEditor ? width - editorWidth : width
@@ -666,7 +648,7 @@ const CdcChart = ({
         width = width - 2.5
       }
 
-      width = width - svgMarginWidth
+      width = width
 
       setDimensions([width, height])
     }
@@ -865,14 +847,15 @@ const CdcChart = ({
     }
   }
 
-  const formatDate = (date, prevDate) => {
+  const formatDate = (date, i, ticks) => {
     let formattedDate = timeFormat(config.runtime[section].dateDisplayFormat)(date)
     // Handle the case where all months work with '%b.' except for May
     if (config.runtime[section].dateDisplayFormat?.includes('%b.') && formattedDate.includes('May.')) {
       formattedDate = formattedDate.replace(/May\./g, 'May')
     }
     // Show years only once
-    if (config.xAxis.showYearsOnce && config.runtime[section].dateDisplayFormat?.includes('%Y') && prevDate) {
+    if (config.xAxis.showYearsOnce && config.runtime[section].dateDisplayFormat?.includes('%Y') && ticks) {
+      const prevDate = ticks[i - 1] ? ticks[i - 1].value : null
       const prevFormattedDate = timeFormat(config.runtime[section].dateDisplayFormat)(prevDate)
       const year = formattedDate.match(/\d{4}/)
       const prevYear = prevFormattedDate.match(/\d{4}/)
@@ -1177,7 +1160,7 @@ const CdcChart = ({
           <h3>Finish Configuring</h3>
           <p>Set all required options to the left and confirm below to display a preview of the chart.</p>
           <Button
-            className='btn'
+            className='btn btn-primary'
             style={{ margin: '1em auto' }}
             disabled={missingRequiredSections()}
             onClick={e => confirmDone(e)}
@@ -1234,12 +1217,31 @@ const CdcChart = ({
     // cleaning is deleting data we need in forecasting charts.
     if (!Array.isArray(data)) return []
     if (config.visualizationType === 'Forecasting') return data
+    if (config.series?.some(series => !!series.dynamicCategory)) return data
     return config?.xAxis?.dataKey ? transform.cleanData(data, config.xAxis.dataKey) : data
   }
 
-  // required for DataTable
-  const displayGeoName = key => {
-    return key
+  const getTableRuntimeData = () => {
+    if (visualizationType === 'Sankey') return config?.data?.[0]?.tableData
+    const data = filteredData || excludedData
+    const dynamicSeries = config.series.find(series => !!series.dynamicCategory)
+    if (!dynamicSeries) return data
+    const usedColumns = Object.values(config.columns)
+      .filter(col => col.dataTable)
+      .map(col => col.name)
+      .concat([dynamicSeries.dynamicCategory, dynamicSeries.dataKey])
+    if (config.xAxis?.dataKey) usedColumns.push(config.xAxis.dataKey)
+    return data.map(d => _.pick(d, usedColumns))
+  }
+
+  const pivotDynamicSeries = (config: ChartConfig): TableConfig => {
+    const tableConfig: TableConfig = _.cloneDeep(config)
+    const dynamicSeries = tableConfig.series.find(series => !!series.dynamicCategory)
+    if (dynamicSeries) {
+      const pivot: Pivot = { columnName: dynamicSeries.dynamicCategory, valueColumns: [dynamicSeries.dataKey] }
+      tableConfig.table.pivot = pivot
+    }
+    return tableConfig
   }
 
   // Prevent render if loading
@@ -1459,7 +1461,7 @@ const CdcChart = ({
                   config.visualizationType !== 'Sankey') ||
                   (config.visualizationType === 'Sankey' && config.table.show)) && (
                   <DataTable
-                    config={config}
+                    config={pivotDynamicSeries(config)}
                     rawData={
                       config.visualizationType === 'Sankey'
                         ? config?.data?.[0]?.tableData
@@ -1467,15 +1469,11 @@ const CdcChart = ({
                         ? filterVizData(config.filters, config.data)
                         : config.data
                     }
-                    runtimeData={
-                      config.visualizationType === 'Sankey'
-                        ? config?.data?.[0]?.tableData
-                        : filteredData || excludedData
-                    }
+                    runtimeData={getTableRuntimeData()}
                     expandDataTable={config.table.expanded}
                     columns={config.columns}
                     displayDataAsText={displayDataAsText}
-                    displayGeoName={displayGeoName}
+                    displayGeoName={name => name}
                     applyLegendToRow={applyLegendToRow}
                     tableTitle={config.table.label}
                     indexTitle={config.table.indexLabel}
@@ -1518,7 +1516,7 @@ const CdcChart = ({
     debugSvg: isDebug,
     dimensions,
     dynamicLegendItems,
-    excludedData: excludedData,
+    excludedData,
     formatDate,
     formatNumber,
     formatTooltipsDate,
@@ -1526,6 +1524,7 @@ const CdcChart = ({
     getYAxisData,
     handleChartAriaLabels,
     handleLineType,
+    handleChartTabbing,
     highlight,
     highlightReset,
     imageId,
@@ -1537,6 +1536,7 @@ const CdcChart = ({
     isEditor,
     isNumber,
     legend,
+    legendId,
     legendRef,
     lineOptions,
     loading,

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

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Chart from '../CdcChart'
+import scatterPlotCustomColorConfig from './_mock/scatterplot_mock.json'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Custom Colors',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const ScatterPlot: Story = {
+  args: {
+    config: scatterPlotCustomColorConfig,
+    isEditor: false
+  }
+}
+
+export default meta

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

@@ -0,0 +1,27 @@
+import DynamicSeriesConfig from './_mock/dynamic_series_config.json'
+import DynamicSeriesBarConfig from './_mock/dynamic_series_bar_config.json'
+import { Meta, StoryObj } from '@storybook/react'
+import Chart from '../CdcChart'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Dynamic Series',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const Line: Story = {
+  args: {
+    config: DynamicSeriesConfig,
+    isEditor: false
+  }
+}
+
+export const Bar: Story = {
+  args: {
+    config: DynamicSeriesBarConfig,
+    isEditor: false
+  }
+}
+
+export default meta

package/src/_stories/Chart.Legend.Gradient.stories.tsx

@@ -12,12 +12,18 @@ const meta: Meta<typeof Chart> = {
 
 type Story = StoryObj<typeof Chart>
 
-export const Legend_Gradient: Story = {
+export const Legend_Gradient_Smooth: Story = {
   args: {
     config: chartGradientConfig
   }
 }
 
+export const Legend_Gradient_Linear_Blocks: Story = {
+  args: {
+    config: editConfigKeys(chartGradientConfig, [{ path: ['legend', 'subStyle'], value: 'linear blocks' }])
+  }
+}
+
 export const Labels_On_Line_Legend_On_Top: Story = {
   args: {
     config: editConfigKeys(chartGradientConfig, [{ path: ['yAxis', 'labelsAboveGridlines'], value: true }])
@@ -30,4 +36,39 @@ export const Legend_On_Right: Story = {
   }
 }
 
+export const Legend_On_Right_With_Box: Story = {
+  args: {
+    config: editConfigKeys(SimplifiedLineConfig, [{ path: ['legend', 'hideBorder'], value: false }])
+  }
+}
+
+export const Legend_Gradient_With_box: Story = {
+  args: {
+    config: editConfigKeys(chartGradientConfig, [{ path: ['legend', 'hideBorder'], value: false }])
+  }
+}
+
+export const Legend_Gradient_With_Text: Story = {
+  args: {
+    config: editConfigKeys(chartGradientConfig, [
+      { path: ['legend', 'title'], value: 'Title' },
+      { path: ['legend', 'description'], value: 'Description' },
+      { path: ['legend', 'hideBorder'], value: false }
+    ])
+  }
+}
+export const Legend_Gradient_Wrapping_Label: Story = {
+  args: {
+    config: JSON.parse(
+      JSON.stringify(
+        editConfigKeys(chartGradientConfig, [
+          { path: ['legend', 'title'], value: 'Title' },
+          { path: ['legend', 'description'], value: 'Description' },
+          { path: ['legend', 'hideBorder'], value: false }
+        ])
+      ).replace(/Data 1/g, 'This is a long string that should wrap')
+    )
+  }
+}
+
 export default meta

package/src/_stories/Chart.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import SuppressedConfig from './_mock/bar-chart-suppressed.json'
 
 import Chart from '../CdcChart'
 import lineChartTwoPointsRegressionTest from './_mock/line_chart_two_points_regression_test.json'
@@ -9,6 +8,7 @@ import forestPlot from '../../examples/feature/forest-plot/forest-plot.json'
 import pairedBar from './_mock/paired-bar.json'
 import horizontalBarConfig from './_mock/horizontal_bar.json'
 import pieConfig from './_mock/pie_with_data.json'
+import boxPlotConfig from './_mock/boxplot_multiseries.json'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart',
@@ -37,13 +37,6 @@ export const Lollipop: Story = {
   }
 }
 
-export const Suppression: Story = {
-  args: {
-    config: SuppressedConfig,
-    isEditor: false
-  }
-}
-
 export const Forest_Plot: Story = {
   args: {
     config: forestPlot
@@ -67,5 +60,11 @@ export const Paired_Bar: Story = {
     config: pairedBar
   }
 }
+export const BoxPlot_Multiseries: Story = {
+  args: {
+    config: boxPlotConfig,
+    isEditor: false
+  }
+}
 
 export default meta

package/src/_stories/ChartEditor.stories.tsx

@@ -4,6 +4,7 @@ import Chart from '../CdcChart'
 import pieChartExample from './_mock/pie_config.json'
 import pieData from './_mock/pie_data.json'
 import urlFilterExample from './_mock/url_filter.json'
+import mockScatterPlot from './_mock/scatterplot_mock.json'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Editor',
@@ -30,4 +31,30 @@ export const Url_Filter: Story = {
   }
 }
 
+export const ScatterPlot: Story = {
+  args: {
+    config: mockScatterPlot,
+    isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const user = userEvent.setup()
+    // play is running before full rendering is complete so sleep function
+    // is needed to delay the execution.
+    // possible related bug: https://github.com/storybookjs/storybook/issues/18258
+    await sleep(3000)
+    const dateCategoryAccordion = await canvas.findByRole('button', { name: /Date\/Category Axis/i })
+    user.click(dateCategoryAccordion)
+    await sleep(1000)
+    const minValueInput = await canvas.findByLabelText('min value')
+    const maxValueInput = await canvas.findByLabelText('max value')
+    await user.type(minValueInput, '0')
+    await user.type(maxValueInput, '100')
+    await sleep(1000)
+    // Scroll to the top of the screen
+    user.click(dateCategoryAccordion)
+    await canvasElement.scrollTo(0, 0)
+  }
+}
+
 export default meta

package/src/_stories/ChartLine.Suppression.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Chart from '../CdcChart'
+import suppressionConfig from './_mock/suppression_mock.json'
+import SuppressedConfig from './_mock/bar-chart-suppressed.json'
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Suppression',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const SuppressedLines: Story = {
+  args: {
+    config: suppressionConfig,
+    isEditor: false
+  }
+}
+export const SuppressedBars: Story = {
+  args: {
+    config: SuppressedConfig,
+    isEditor: false
+  }
+}
+
+export default meta

package/src/_stories/ChartPrefixSuffix.stories.tsx

@@ -3,6 +3,7 @@ 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'
 import horizontalBarConfig from './_mock/horizontal_bar.json'
+import scatterPlotConfig from './_mock/scatterplot_mock.json'
 
 import Chart from '../CdcChart'
 import { editConfigKeys } from '../helpers/configHelpers'
@@ -148,4 +149,11 @@ export const Top_Suffix_Above_Gridlines_With_Options: Story = {
   }
 }
 
+export const ScatterPlot_Bottom_Commas: Story = {
+  args: {
+    config: editConfigKeys(scatterPlotConfig, [{ path: ['dataFormat', 'bottomCommas'], value: true }])
+  },
+  isEditor: true
+}
+
 export default meta