@cdc/chart 4.25.7 → 4.25.10

package/src/CdcChartComponent.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useRef, useId, useContext, useReducer } from 'react'
+import React, { useState, useEffect, useCallback, useRef, useId, useContext, useReducer, useMemo } from 'react'
 
 // IE11
 import ResizeObserver from 'resize-observer-polyfill'
@@ -24,7 +24,6 @@ import { Label } from './types/Label'
 import ParentSize from '@visx/responsive/lib/components/ParentSize'
 import { timeParse, timeFormat } from 'd3-time-format'
 import parse from 'html-react-parser'
-import 'react-tooltip/dist/react-tooltip.css'
 import _ from 'lodash'
 // Primary Components
 import ConfigContext, { ChartDispatchContext } from './ConfigContext'
@@ -33,7 +32,8 @@ import SankeyChart from './components/Sankey'
 import LinearChart from './components/LinearChart'
 import { isDateScale } from '@cdc/core/helpers/cove/date'
 
-import { colorPalettesChart as colorPalettes, twoColorPalette } from '@cdc/core/data/colorPalettes'
+import { twoColorPalette } from '@cdc/core/data/colorPalettes'
+import { filterChartColorPalettes } from '@cdc/core/helpers/filterColorPalettes'
 
 import SparkLine from './components/Sparkline'
 import Legend from './components/Legend'
@@ -46,7 +46,8 @@ import { handleChartAriaLabels } from './helpers/handleChartAriaLabels'
 import { lineOptions } from './helpers/lineOptions'
 import { handleLineType } from './helpers/handleLineType'
 import { handleRankByValue } from './helpers/handleRankByValue'
-import { generateColorsArray } from './helpers/generateColorsArray'
+import { generateColorsArray } from '@cdc/core/helpers/generateColorsArray'
+import { processMarkupVariables } from '@cdc/core/helpers/markupProcessor'
 import Loading from '@cdc/core/components/Loading'
 import Filters from '@cdc/core/components/Filters'
 import MediaControls from '@cdc/core/components/MediaControls'
@@ -63,7 +64,7 @@ import numberFromString from '@cdc/core/helpers/numberFromString'
 import getViewport from '@cdc/core/helpers/getViewport'
 import isNumber from '@cdc/core/helpers/isNumber'
 import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
-import EditorContext from '../../editor/src/ConfigContext'
+import EditorContext from '@cdc/core/contexts/EditorContext'
 import { EDITOR_WIDTH } from '@cdc/core/helpers/constants'
 import { extractCoveData, updateVegaData } from '@cdc/core/helpers/vegaConfig'
 // Local helpers
@@ -82,6 +83,9 @@ import { VizFilter } from '@cdc/core/types/VizFilter'
 import { getNewRuntime } from './helpers/getNewRuntime'
 import FootnotesStandAlone from '@cdc/core/components/Footnotes/FootnotesStandAlone'
 import { Datasets } from '@cdc/core/types/DataSet'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import cloneConfig from '@cdc/core/helpers/cloneConfig'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
 interface CdcChartProps {
   config?: ChartConfig
@@ -96,6 +100,7 @@ interface CdcChartProps {
   setSharedFilterValue?: (value: any) => void
   dashboardConfig?: DashboardConfig
   datasets?: Datasets
+  interactionLabel: string
 }
 const CdcChart: React.FC<CdcChartProps> = ({
   config: configObj,
@@ -108,7 +113,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
   setSharedFilter,
   setSharedFilterValue,
   dashboardConfig,
-  datasets
+  datasets,
+  interactionLabel
 }) => {
   const transform = new DataTransform()
   const initialState = getInitialState(configObj)
@@ -149,6 +155,73 @@ const CdcChart: React.FC<CdcChartProps> = ({
   // Destructure items from config for more readable JSX
   let { legend, title } = config
 
+  // Process markup variables for text fields (memoized to prevent re-processing on every render)
+  // Note: XSS Safety - The processed content is parsed using html-react-parser which sanitizes
+  // HTML input by default. The markup processor returns plain text with user data substituted.
+  const processedTextFields = useMemo(() => {
+    if (!config.enableMarkupVariables || !config.markupVariables?.length) {
+      return {
+        title,
+        superTitle: config.superTitle,
+        introText: config.introText,
+        legacyFootnotes: config.legacyFootnotes,
+        description: config.description
+      }
+    }
+
+    return {
+      title: title
+        ? processMarkupVariables(title, config.data || [], config.markupVariables, {
+            isEditor,
+            filters: config.filters || []
+          }).processedContent
+        : title,
+      superTitle: config.superTitle
+        ? processMarkupVariables(config.superTitle, config.data || [], config.markupVariables, {
+            isEditor,
+            filters: config.filters || []
+          }).processedContent
+        : config.superTitle,
+      introText: config.introText
+        ? processMarkupVariables(config.introText, config.data || [], config.markupVariables, {
+            isEditor,
+            filters: config.filters || []
+          }).processedContent
+        : config.introText,
+      legacyFootnotes: config.legacyFootnotes
+        ? processMarkupVariables(config.legacyFootnotes, config.data || [], config.markupVariables, {
+            isEditor,
+            filters: config.filters || []
+          }).processedContent
+        : config.legacyFootnotes,
+      description: config.description
+        ? processMarkupVariables(config.description, config.data || [], config.markupVariables, {
+            isEditor,
+            filters: config.filters || []
+          }).processedContent
+        : config.description
+    }
+  }, [
+    config.enableMarkupVariables,
+    config.markupVariables,
+    config.data,
+    config.filters,
+    title,
+    config.superTitle,
+    config.introText,
+    config.legacyFootnotes,
+    config.description,
+    isEditor
+  ])
+
+  // Destructure processed values
+  title = processedTextFields.title
+  const processedSuperTitle = processedTextFields.superTitle
+  const processedIntroText = processedTextFields.introText
+  const processedLegacyFootnotes = processedTextFields.legacyFootnotes
+  const processedDescription = processedTextFields.description
+  // Note: Axis labels are processed within updateConfig to ensure they use the correct data
+
   // set defaults on titles if blank AND only in editor
   if (isEditor) {
     if (!title || title === '') title = 'Chart Title'
@@ -166,7 +239,22 @@ const CdcChart: React.FC<CdcChartProps> = ({
   const convertLineToBarGraph = isConvertLineToBarGraph(config, filteredData)
 
   const prepareConfig = (loadedConfig: ChartConfig) => {
-    let newConfig = _.defaultsDeep(loadedConfig, defaults)
+    // Create defaults without version to avoid overriding legacy configs
+    const defaultsWithoutPalette = { ...defaults }
+
+    // Only remove palette defaults for legacy (v1) configs
+    // New configs and v2 configs should get the v2 palette defaults
+    if (loadedConfig?.general?.palette || (!loadedConfig?.general && !loadedConfig?.color)) {
+      // Keep palette defaults for:
+      // 1. Configs that already have general.palette (v2 configs)
+      // 2. New configs (no general section and no legacy color property)
+    } else {
+      // Remove palette defaults for legacy configs that have color but no general.palette
+      delete defaultsWithoutPalette.general?.palette
+    }
+
+    let newConfig = { ...defaultsWithoutPalette, ...loadedConfig }
+
     _.defaultsDeep(newConfig, {
       table: { showVertical: false }
     })
@@ -188,11 +276,30 @@ const CdcChart: React.FC<CdcChartProps> = ({
   }
 
   const updateConfig = (_config: AllChartsConfig, dataOverride?: any[]) => {
-    const newConfig = _.cloneDeep(_config)
+    const newConfig = cloneConfig(_config)
     let data = dataOverride || stateData
 
     data = handleRankByValue(data, newConfig)
 
+    // Process axis labels for markup variables if enabled
+    let processedXAxis = newConfig.xAxis?.label
+    let processedYAxis = newConfig.yAxis?.label
+
+    if (newConfig.enableMarkupVariables && newConfig.markupVariables?.length) {
+      if (newConfig.xAxis?.label) {
+        processedXAxis = processMarkupVariables(newConfig.xAxis.label, data || [], newConfig.markupVariables, {
+          isEditor,
+          filters: newConfig.filters || []
+        }).processedContent
+      }
+      if (newConfig.yAxis?.label) {
+        processedYAxis = processMarkupVariables(newConfig.yAxis.label, data || [], newConfig.markupVariables, {
+          isEditor,
+          filters: newConfig.filters || []
+        }).processedContent
+      }
+    }
+
     // Deeper copy
     Object.keys(defaults).forEach(key => {
       if (newConfig[key] && 'object' === typeof newConfig[key] && !Array.isArray(newConfig[key])) {
@@ -223,7 +330,9 @@ const CdcChart: React.FC<CdcChartProps> = ({
     newConfig.runtime.originalXAxis = newConfig.xAxis
 
     if (newConfig.visualizationType === 'Pie') {
-      newConfig.runtime.seriesKeys = (dataOverride || data).map(d => d[newConfig.xAxis.dataKey])
+      // 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.seriesLabelsAll = newConfig.runtime.seriesKeys
     } else {
       const finalData = dataOverride || newConfig.formattedData || newConfig.data
@@ -291,8 +400,15 @@ const CdcChart: React.FC<CdcChartProps> = ({
         newConfig.orientation === 'horizontal') ||
       ['Deviation Bar', 'Paired Bar', 'Forest Plot'].includes(newConfig.visualizationType)
     ) {
-      newConfig.runtime.xAxis = _.cloneDeep(newConfig.yAxis.yAxis || newConfig.yAxis)
-      newConfig.runtime.yAxis = _.cloneDeep(newConfig.xAxis.xAxis || newConfig.xAxis)
+      // For horizontal charts, axes are swapped, so processedYAxis goes to runtime.xAxis and vice versa
+      newConfig.runtime.xAxis = {
+        ..._.cloneDeep(newConfig.yAxis.yAxis || newConfig.yAxis),
+        label: processedYAxis || (newConfig.yAxis.yAxis || newConfig.yAxis).label
+      }
+      newConfig.runtime.yAxis = {
+        ..._.cloneDeep(newConfig.xAxis.xAxis || newConfig.xAxis),
+        label: processedXAxis || (newConfig.xAxis.xAxis || newConfig.xAxis).label
+      }
       newConfig.runtime.yAxis.labelOffset *= -1
 
       newConfig.runtime.horizontal = false
@@ -303,13 +419,13 @@ const CdcChart: React.FC<CdcChartProps> = ({
       ['Scatter Plot', 'Area Chart', 'Line', 'Forecasting'].includes(newConfig.visualizationType) &&
       !convertLineToBarGraph
     ) {
-      newConfig.runtime.xAxis = newConfig.xAxis
-      newConfig.runtime.yAxis = newConfig.yAxis
+      newConfig.runtime.xAxis = { ...newConfig.xAxis, label: processedXAxis || newConfig.xAxis.label }
+      newConfig.runtime.yAxis = { ...newConfig.yAxis, label: processedYAxis || newConfig.yAxis.label }
       newConfig.runtime.horizontal = false
       newConfig.orientation = 'vertical'
     } else {
-      newConfig.runtime.xAxis = newConfig.xAxis
-      newConfig.runtime.yAxis = newConfig.yAxis
+      newConfig.runtime.xAxis = { ...newConfig.xAxis, label: processedXAxis || newConfig.xAxis.label }
+      newConfig.runtime.yAxis = { ...newConfig.yAxis, label: processedYAxis || newConfig.yAxis.label }
       newConfig.runtime.horizontal = false
     }
 
@@ -426,8 +542,16 @@ const CdcChart: React.FC<CdcChartProps> = ({
       } else if (newConfig.formattedData) {
         newConfig.data = newConfig.formattedData
       } else if (newConfig.dataDescription) {
-        newConfig.data = transform.autoStandardize(newConfig.data)
-        newConfig.data = transform.developerStandardize(newConfig.data, newConfig.dataDescription)
+        // For dashboard contexts, get data from datasets if config.data is undefined
+        let dataToProcess = newConfig.data
+        if (!dataToProcess && isDashboard && datasets && newConfig.dataKey) {
+          dataToProcess = datasets[newConfig.dataKey]?.data
+        }
+
+        if (dataToProcess) {
+          newConfig.data = transform.autoStandardize(dataToProcess)
+          newConfig.data = transform.developerStandardize(newConfig.data, newConfig.dataDescription)
+        }
       }
     } catch (err) {
       console.error('Error on prepareData function ', err)
@@ -554,6 +678,17 @@ const CdcChart: React.FC<CdcChartProps> = ({
     } catch (e) {
       console.error('COVE:', e.message)
     }
+    publishAnalyticsEvent({
+      vizType: config?.type,
+      vizSubType: getVizSubType(config),
+      eventType: 'chart_legend_reset',
+      eventAction: 'click',
+      eventLabel: interactionLabel,
+      vizTitle: getVizTitle(config),
+      ...(config.visualizationType === 'Bar' && {
+        specifics: `orientation: ${config.orientation === 'horizontal' ? 'horizontal' : 'vertical'}`
+      })
+    })
     dispatch({ type: 'SET_SERIES_HIGHLIGHT', payload: [] })
   }
 
@@ -816,7 +951,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
   }
 
   const pivotDynamicSeries = (config: ChartConfig): TableConfig => {
-    const tableConfig: TableConfig = _.cloneDeep(config)
+    const tableConfig: TableConfig = cloneConfig(config)
     const dynamicSeries = tableConfig.series.find(series => !!series.dynamicCategory)
     if (dynamicSeries) {
       const pivot: Pivot = { columnName: dynamicSeries.dynamicCategory, valueColumns: [dynamicSeries.dataKey] }
@@ -888,16 +1023,17 @@ const CdcChart: React.FC<CdcChartProps> = ({
                 showTitle={config.showTitle}
                 isDashboard={isDashboard}
                 title={title}
-                superTitle={config.superTitle}
+                superTitle={processedSuperTitle}
                 classes={['chart-title', `${config.theme}`, 'cove-component__header', 'mb-3']}
                 style={undefined}
+                config={config}
               />
 
               {/* Visualization Wrapper */}
               <div className={getChartWrapperClasses().join(' ')}>
                 {/* Intro Text/Message */}
-                {config?.introText && config.visualizationType !== 'Spark Line' && (
-                  <section className={`introText mb-4`}>{parse(config.introText)}</section>
+                {processedIntroText && config.visualizationType !== 'Spark Line' && (
+                  <section className={`introText mb-4`}>{parse(processedIntroText)}</section>
                 )}
 
                 {/* Filters */}
@@ -907,6 +1043,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                     setFilters={setFilters}
                     excludedData={excludedData}
                     dimensions={dimensions}
+                    interactionLabel={interactionLabel}
                   />
                 )}
                 <SkipTo skipId={handleChartTabbing(config, legendId)} skipMessage='Skip Over Chart Container' />
@@ -943,7 +1080,14 @@ const CdcChart: React.FC<CdcChartProps> = ({
 
                     {config.visualizationType === 'Pie' && (
                       <ParentSize className='justify-content-center d-flex' style={{ width: `100%` }}>
-                        {parent => <PieChart ref={svgRef} parentWidth={parent.width} parentHeight={parent.height} />}
+                        {parent => (
+                          <PieChart
+                            ref={svgRef}
+                            parentWidth={parent.width}
+                            parentHeight={parent.height}
+                            interactionLabel={interactionLabel}
+                          />
+                        )}
                       </ParentSize>
                     )}
                     {/* Line Chart */}
@@ -985,10 +1129,11 @@ const CdcChart: React.FC<CdcChartProps> = ({
                           setFilters={setFilters}
                           excludedData={excludedData}
                           dimensions={dimensions}
+                          interactionLabel={interactionLabel}
                         />
-                        {config?.introText && (
+                        {processedIntroText && (
                           <section className='introText mb-4' style={{ padding: '0px 0 35px' }}>
-                            {parse(config.introText)}
+                            {parse(processedIntroText)}
                           </section>
                         )}
                         <div style={{ height: `100px`, width: `100%`, ...sparkLineStyles }}>
@@ -1012,7 +1157,11 @@ const CdcChart: React.FC<CdcChartProps> = ({
                   {!config.legend.hide &&
                     config.visualizationType !== 'Spark Line' &&
                     config.visualizationType !== 'Sankey' && (
-                      <Legend ref={legendRef} skipId={handleChartTabbing(config, legendId)} />
+                      <Legend
+                        ref={legendRef}
+                        skipId={handleChartTabbing(config, legendId)}
+                        interactionLabel={interactionLabel}
+                      />
                     )}
                 </LegendWrapper>
                 {/* Link */}
@@ -1021,8 +1170,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
                   : link && link}
                 {/* Description */}
 
-                {config.description && config.visualizationType !== 'Spark Line' && (
-                  <div className={getChartSubTextClasses().join(' ')}>{parse(config.description)}</div>
+                {processedDescription && config.visualizationType !== 'Spark Line' && (
+                  <div className={getChartSubTextClasses().join(' ')}>{parse(processedDescription)}</div>
                 )}
 
                 {/* buttons */}
@@ -1034,6 +1183,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                       type='image'
                       state={config}
                       elementToCapture={imageId}
+                      interactionLabel={interactionLabel}
                     />
                   )}
                   {config.table.showDownloadPdfButton && (
@@ -1043,6 +1193,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                       type='pdf'
                       state={config}
                       elementToCapture={imageId}
+                      interactionLabel={interactionLabel}
                     />
                   )}
                 </MediaControls.Section>
@@ -1054,7 +1205,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                   (config.visualizationType === 'Sankey' && config.table.show)) && (
                   <DataTable
                     /* changing the "key" will force the table to re-render
-                      when the default sort changes while editing */
+                                when the default sort changes while editing */
                     key={dataTableDefaultSortBy}
                     config={pivotDynamicSeries(config)}
                     rawData={
@@ -1076,12 +1227,13 @@ const CdcChart: React.FC<CdcChartProps> = ({
                     viewport={currentViewport}
                     tabbingId={handleChartTabbing(config, legendId)}
                     colorScale={colorScale}
+                    interactionLabel={interactionLabel}
                   />
                 )}
                 {config?.annotations?.length > 0 && <Annotation.Dropdown />}
                 {/* show pdf or image button */}
-                {config?.legacyFootnotes && (
-                  <section className='footnotes pt-2 mt-4'>{parse(config.legacyFootnotes)}</section>
+                {processedLegacyFootnotes && (
+                  <section className='footnotes pt-2 mt-4'>{parse(processedLegacyFootnotes)}</section>
                 )}
               </div>
               <FootnotesStandAlone
@@ -1105,6 +1257,9 @@ const CdcChart: React.FC<CdcChartProps> = ({
     return str.charAt(0).toUpperCase() + str.slice(1)
   }
 
+  // Get version-specific color palettes based on current config
+  const colorPalettes = filterChartColorPalettes(config)
+
   const contextValues = {
     ...state,
     capitalize,
@@ -1123,6 +1278,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     handleChartTabbing,
     highlight,
     handleShowAll,
+    interactionLabel,
     isDashboard,
     isDebug,
     handleDragStateChange,
@@ -1136,7 +1292,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     outerContainerRef,
     parentRef,
     parseDate,
-    rawData: _.cloneDeep(stateData) ?? {},
+    rawData: stateData ?? {},
     setConfig,
     setEditing,
     setParentConfig,
@@ -1146,7 +1302,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     tableData: filteredData || excludedData,
     transformedData: getTransformedData({ brushData: state.brushData, filteredData, excludedData, clean }),
     twoColorPalette,
-    unfilteredData: _.cloneDeep(stateData),
+    unfilteredData: stateData,
     updateConfig
   }
 

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

@@ -1,8 +1,8 @@
 import React from 'react'
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 import Chart from '../CdcChartComponent'
 import exampleComboBarNonNumeric from './../../examples/feature/tests-date-exclusions/date-exclusions-config.json'
-import { editConfigKeys } from '../helpers/configHelpers'
+import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
 
 export default {
   title: 'Components/Templates/Chart/Anchors',

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

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import boxPlotConfig from './_mock/boxplot_multiseries.json'
 import Chart from '../CdcChartComponent'
 

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

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import barChartCiLabels from './_mock/bar_chart_ci_labels.json'
 import lineChartDynamicCI from './_mock/line_chart_dynamic_ci.json'
 import lineChartNonDynamicCI from './_mock/line_chart_non_dynamic_ci.json'

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

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import Chart from '../CdcChartComponent'
 import scatterPlotCustomColorConfig from './_mock/scatterplot_mock.json'
 

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

@@ -1,7 +1,7 @@
 import DynamicSeriesConfig from './_mock/dynamic_series_config.json'
 import DynamicSeriesBarConfig from './_mock/dynamic_series_bar_config.json'
 import DynamicSeriesSuppression from './_mock/dynamic_series_suppression_mock.json'
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-vite'
 import Chart from '../CdcChartComponent'
 
 const meta: Meta<typeof Chart> = {
@@ -43,7 +43,7 @@ export const LineHoverPoints: Story = {
 export const Bar_Vertical: Story = {
   args: {
     config: DynamicSeriesBarConfig,
-    isEditor: false
+    isEditor: true
   }
 }
 

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

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import Chart from '../CdcChartComponent'
-import { editConfigKeys } from '../helpers/configHelpers'
+import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
 import scatterPlotDownloadImage from './_mock/scatterplot-image-download.json'
 
 const meta: Meta<typeof Chart> = {

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

@@ -1,10 +1,10 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import chartGradientConfig from './_mock/legend.gradient_mock.json'
 import chartGroupedLagend from './_mock/legend_groupBy_mock.json'
 import SimplifiedLineConfig from './_mock/simplified_line.json'
 
 import Chart from '../CdcChartComponent'
-import { editConfigKeys } from '../helpers/configHelpers'
+import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Legend',

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

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import StackedPattern from './_mock/stacked-pattern-test.json'
+
+import Chart from '../CdcChartComponent'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Patterns',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const Stacked_Bar_Pattern: Story = {
+  args: {
+    config: StackedPattern
+  }
+}
+
+export default meta

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

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import Chart from '../CdcChartComponent'
 import scatterPlotDownloadImage from './_mock/scatterplot-image-download.json'
 

package/src/_stories/Chart.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 
 import Chart from '../CdcChart'
 import lineChartTwoPointsRegressionTest from './_mock/line_chart_two_points_regression_test.json'
@@ -12,7 +12,7 @@ import pieConfig from './_mock/pie_with_data.json'
 import pieCalculatedArea from './_mock/pie_calculated_area.json'
 import areaChartStacked from './_mock/area_chart_stacked.json'
 import multipleLines from './_mock/short_dates.json'
-import { editConfigKeys } from '../helpers/configHelpers'
+import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart',
@@ -67,18 +67,21 @@ export const BarChart_Labels: Story = {
 
 export const Pie: Story = {
   args: {
-    config: pieConfig
+    config: pieConfig,
+    isEditor: true
   }
 }
 export const Pie_Calculated_Area: Story = {
   args: {
-    config: pieCalculatedArea
+    config: pieCalculatedArea,
+    isEditor: true
   }
 }
 
 export const Paired_Bar: Story = {
   args: {
-    config: pairedBar
+    config: pairedBar,
+    isEditor: true
   }
 }
 

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

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 
 import Chart from '../CdcChartComponent'
 import barChartStacked from './_mock/barchart_labels.mock.json'

package/src/_stories/ChartAnnotation.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import annotationConfig from './_mock/annotation_category_mock.json'
 import annotationConfigDateLinear from './_mock/annotation_date-linear_mock.json'
 import annotationConfigDateTime from './_mock/annotation_date-time_mock.json'

package/src/_stories/ChartAxisLabels.stories.tsx

@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import SimplifiedLineConfig from './_mock/simplified_line.json'
 
 import Chart from '../CdcChartComponent'
-import { editConfigKeys } from '../helpers/configHelpers'
+import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Axis Labels',

package/src/_stories/ChartAxisTitles.stories.tsx

@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import Chart from '../CdcChartComponent'
 import longXLabelsConfig from './_mock/large_x_axis_labels.json'
 import pairedBarConfig from './_mock/paired-bar.json'
-import { editConfigKeys } from '../helpers/configHelpers'
+import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
 import { ChartConfig } from '../types/ChartConfig'
 
 const meta: Meta<typeof Chart> = {