@cdc/chart 4.24.10 → 4.24.12-2

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,113 +403,104 @@ 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 groups = uniqueArray(allKeys)
-      let tableData: any[] = []
+      const combinedData = filteredData || data
+      const groups = _.uniq(_.map(combinedData, newConfig.xAxis.dataKey))
+      const seriesKeys = _.map(newConfig.series, 'dataKey')
       const plots: any[] = []
 
-      // group specific statistics
-      // prevent re-renders
-      if (!groups) return
       groups.forEach(g => {
-        try {
-          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 filteredDataValues: number[] = filteredData.map(item => Number(item[newConfig?.series[0]?.dataKey]))
-
-          // Sort the data for upcoming functions.
-          let sortedData = filteredDataValues.sort((a, b) => a - b)
-
-          // ! - 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')
-
-          if (newConfig.boxplot.firstQuartilePercentage === '') {
-            newConfig.boxplot.firstQuartilePercentage = 0
-          }
-
-          if (newConfig.boxplot.thirdQuartilePercentage === '') {
-            newConfig.boxplot.thirdQuartilePercentage = 0
+        seriesKeys.forEach(seriesKey => {
+          try {
+            if (!g) throw new Error('No groups resolved in box plots')
+
+            // Start handle operations on combinedData
+            const { count, sortedData } = _.chain(combinedData)
+              // Filter by xAxis data key
+              .filter(item => item[newConfig.xAxis.dataKey] === g)
+              // perform multiple operations on the filtered data
+              .thru(filteredData => ({
+                count: filteredData.length,
+                sortedData: _.map(filteredData, item => Number(item[seriesKey])).sort()
+              }))
+              // get the results from the chain
+              .value()
+
+            // ! - Notice d3.quantile doesn't work here, and we had to take a custom route.
+            const quartiles = getQuartiles(sortedData)
+
+            if (!sortedData) 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
+
+            const iqr = q3 - q1
+            const lowerBounds = q1 - 1.5 * iqr
+            const upperBounds = q3 + 1.5 * iqr
+            const filteredData = sortedData.filter(d => d <= upperBounds)
+            const max = d3.max(filteredData)
+            plots.push({
+              columnCategory: g,
+              columnMax: max,
+              columnThirdQuartile: _.round(q3, newConfig.dataFormat.roundTo),
+              columnMedian: Number(d3.median(sortedData)).toFixed(newConfig.dataFormat.roundTo),
+              columnFirstQuartile: _.round(q1, newConfig.dataFormat.roundTo),
+              columnMin: _.min(sortedData),
+              columnCount: count,
+              columnSd: Number(d3.deviation(sortedData)).toFixed(newConfig.dataFormat.roundTo),
+              columnMean: Number(d3.mean(sortedData)).toFixed(newConfig.dataFormat.roundTo),
+              columnIqr: _.round(iqr, newConfig.dataFormat.roundTo),
+              values: sortedData,
+              columnLowerBounds: lowerBounds,
+              columnUpperBounds: upperBounds,
+              columnOutliers: _.filter(sortedData, value => value < lowerBounds || value > upperBounds),
+              columnNonOutliers: _.filter(sortedData, value => value >= lowerBounds && value <= upperBounds)
+            })
+          } catch (e) {
+            console.error('COVE: ', e.message) // eslint-disable-line
           }
-
-          const q1 = quartiles.q1
-          const q3 = quartiles.q3
-          const iqr = q3 - q1
-          const lowerBounds = q1 - (q3 - q1) * 1.5
-          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({
-            columnCategory: g,
-            columnMax: d3.min([d3.max(filteredDataValues), q1 + 1.5 * iqr]),
-            columnThirdQuartile: Number(q3).toFixed(newConfig.dataFormat.roundTo),
-            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),
-            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),
-            columnLowerBounds: _colMin,
-            columnUpperBounds: d3.min([d3.max(sortedData), q1 + 1.5 * iqr]),
-            columnOutliers: outliers,
-            values: filteredDataValues,
-            nonOutlierValues: nonOutliers
-          })
-        } catch (e) {
-          console.error('COVE: ', e.message) // eslint-disable-line
-        }
-      })
-
-      // make deep copy so we can remove some fields for data
-      // this appears to be the easiest option instead of running logic against the datatable cell...
-      tableData = JSON.parse(JSON.stringify(plots))
-      tableData.map(table => {
-        table.columnIqr = undefined
-        table.nonOutlierValues = undefined
-        table.columnLowerBounds = undefined
-        table.columnUpperBounds = undefined
-        return null // resolve eslint
+        })
       })
+      // Generate a flat list of categories based on seriesKeys and groups
+      const categories =
+        seriesKeys.length > 1
+          ? _.flatMap(groups, value => _.map(seriesKeys, key => `${_.capitalize(key)} - ${_.capitalize(value)}`))
+          : groups
 
-      // any other data we can add to boxplots
-      newConfig.boxplot['allValues'] = allValues
-      newConfig.boxplot['categories'] = groups
+      newConfig.boxplot['categories'] = categories
       newConfig.boxplot.plots = plots
-      newConfig.boxplot.tableData = tableData
     }
 
     if (newConfig.visualizationType === 'Combo' && newConfig.series) {
@@ -604,10 +584,7 @@ const CdcChart = ({
         : ''
 
     // Sankey Description box error message
-    newConfig.runtime.editorErrorMessage =
-      newConfig.visualizationType === 'Sankey' && !newConfig.description
-        ? 'SUBTEXT/CITATION field is empty: A description of the Sankey Diagram data must be inputted.'
-        : ''
+    newConfig.runtime.editorErrorMessage = ''
 
     if (newConfig.legend.seriesHighlight?.length) {
       setSeriesHighlight(newConfig.legend?.seriesHighlight)
@@ -616,21 +593,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,12 +615,12 @@ const CdcChart = ({
   const resizeObserver = new ResizeObserver(entries => {
     for (let entry of entries) {
       let { width, height } = entry.contentRect
-      let svgMarginWidth = 30
-      let editorWidth = 350
+      const svgMarginWidth = 15
+      const editorWidth = 350
 
       width = isEditor ? width - editorWidth : width
 
-      let newViewport = getViewport(width)
+      const newViewport = getViewport(width)
 
       setCurrentViewport(newViewport)
 
@@ -865,14 +827,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 +1140,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 +1197,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 +1441,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 +1449,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 +1496,7 @@ const CdcChart = ({
     debugSvg: isDebug,
     dimensions,
     dynamicLegendItems,
-    excludedData: excludedData,
+    excludedData,
     formatDate,
     formatNumber,
     formatTooltipsDate,
@@ -1526,6 +1504,7 @@ const CdcChart = ({
     getYAxisData,
     handleChartAriaLabels,
     handleLineType,
+    handleChartTabbing,
     highlight,
     highlightReset,
     imageId,
@@ -1537,6 +1516,7 @@ const CdcChart = ({
     isEditor,
     isNumber,
     legend,
+    legendId,
     legendRef,
     lineOptions,
     loading,

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

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Meta, Story } from '@storybook/react'
+import Chart from './../CdcChart'
+import exampleComboBarNonNumeric from './../../examples/feature/tests-date-exclusions/date-exclusions-config.json'
+import { editConfigKeys } from '../helpers/configHelpers'
+
+export default {
+  title: 'Components/Templates/Chart/Anchors',
+  component: Chart
+} as Meta
+
+type Story = StoryObj<typeof Chart>
+
+export const Anchor_DateLinear: Story = {
+  args: {
+    config: exampleComboBarNonNumeric,
+    isEditor: false
+  }
+}
+
+export const Anchor_Categorical: Story = {
+  args: {
+    config: editConfigKeys(exampleComboBarNonNumeric, [{ path: ['xAxis', 'type'], value: 'categorical' }])
+  }
+}
+
+export const Anchor_Date_Time: Story = {
+  args: {
+    config: editConfigKeys(exampleComboBarNonNumeric, [{ path: ['xAxis', 'type'], value: 'date-time' }])
+  }
+}

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,34 @@
+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_Vertical: Story = {
+  args: {
+    config: DynamicSeriesBarConfig,
+    isEditor: false
+  }
+}
+
+export const Bar_Horizontal: Story = {
+  args: {
+    config: { ...DynamicSeriesBarConfig, orientation: 'horizontal' },
+    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,12 @@ 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'
+import areaChartStacked from './_mock/area_chart_stacked.json'
+import multipleLines from './_mock/short_dates.json'
+import lineChartDynamicCI from './_mock/line_chart_dynamic_ci.json'
+import lineChartNonDynamicCI from './_mock/line_chart_non_dynamic_ci.json'
+import { editConfigKeys } from '../helpers/configHelpers'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart',
@@ -17,6 +22,20 @@ const meta: Meta<typeof Chart> = {
 
 type Story = StoryObj<typeof Chart>
 
+export const line_Chart_Dynamic_Confidence_Intervals: Story = {
+  args: {
+    config: lineChartDynamicCI,
+    isEditor: false
+  }
+}
+
+export const line_Chart_Non_Dynamic_Confidence_Intervals: Story = {
+  args: {
+    config: lineChartNonDynamicCI,
+    isEditor: false
+  }
+}
+
 export const line_Chart_Two_Points_Regression_Test: Story = {
   args: {
     config: lineChartTwoPointsRegressionTest,
@@ -30,16 +49,15 @@ export const line_Chart_Two_Points_New_Chart: Story = {
   }
 }
 
-export const Lollipop: Story = {
+export const multiple_lines: Story = {
   args: {
-    config: lollipop,
-    isEditor: false
+    config: editConfigKeys(multipleLines, [{ path: ['tooltips', 'dateDisplayFormat'], value: '%b. %d %Y' }])
   }
 }
 
-export const Suppression: Story = {
+export const Lollipop: Story = {
   args: {
-    config: SuppressedConfig,
+    config: lollipop,
     isEditor: false
   }
 }
@@ -67,5 +85,18 @@ export const Paired_Bar: Story = {
     config: pairedBar
   }
 }
+export const BoxPlot_Multiseries: Story = {
+  args: {
+    config: boxPlotConfig,
+    isEditor: false
+  }
+}
+
+export const Area_Chart_stacked: Story = {
+  args: {
+    config: areaChartStacked,
+    isEditor: false
+  }
+}
 
 export default meta