@cdc/chart 4.23.8 → 4.23.10-alpha

package/src/{CdcChart.jsx → CdcChart.tsx}

@@ -41,8 +41,8 @@ import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
 
 import './scss/main.scss'
 // load both then config below determines which to use
-import DataTable_horiz from './components/DataTable'
-import DataTable_vert from '@cdc/core/components/DataTable'
+import DataTable from '@cdc/core/components/DataTable'
+import { getFileExtension } from '@cdc/core/helpers/getFileExtension'
 
 const generateColorsArray = (color = '#000000', special = false) => {
   let colorObj = chroma(color)
@@ -78,17 +78,17 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   const transform = new DataTransform()
   const [loading, setLoading] = useState(true)
   const [colorScale, setColorScale] = useState(null)
-  const [config, setConfig] = useState({})
+  const [config, setConfig] = useState<any>({})
   const [stateData, setStateData] = useState(config.data || [])
-  const [excludedData, setExcludedData] = useState()
-  const [filteredData, setFilteredData] = useState()
-  const [seriesHighlight, setSeriesHighlight] = useState([])
+  const [excludedData, setExcludedData] = useState<Record<string, number>[] | undefined>(undefined)
+  const [filteredData, setFilteredData] = useState<Record<string, any>[] | undefined>(undefined)
+  const [seriesHighlight, setSeriesHighlight] = useState<any[]>([])
   const [currentViewport, setCurrentViewport] = useState('lg')
-  const [dimensions, setDimensions] = useState([])
-  const [externalFilters, setExternalFilters] = useState(null)
+  const [dimensions, setDimensions] = useState<[number?, number?]>([])
+  const [externalFilters, setExternalFilters] = useState<any[]>()
   const [container, setContainer] = useState()
   const [coveLoadedEventRan, setCoveLoadedEventRan] = useState(false)
-  const [dynamicLegendItems, setDynamicLegendItems] = useState([])
+  const [dynamicLegendItems, setDynamicLegendItems] = useState<any[]>([])
   const [imageId] = useState(`cove-${Math.random().toString(16).slice(-4)}`)
 
   let legendMemo = useRef(new Map()) // map collection
@@ -96,8 +96,6 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
   if (isDebug) console.log('Chart config, isEditor', config, isEditor)
 
-  const DataTable = config?.table?.showVertical ? DataTable_vert : DataTable_horiz
-
   // Destructure items from config for more readable JSX
   let { legend, title, description, visualizationType } = config
 
@@ -142,7 +140,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
   const reloadURLData = async () => {
     if (config.dataUrl) {
-      const dataUrl = new URL(config.runtimeDataUrl || config.dataUrl)
+      const dataUrl = new URL(config.runtimeDataUrl || config.dataUrl, window.location.origin)
       let qsParams = Object.fromEntries(new URLSearchParams(dataUrl.search))
 
       let isUpdateNeeded = false
@@ -164,12 +162,10 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
         })
         .join('')}`
 
-      let data
+      let data: any[] = []
 
       try {
-        const regex = /(?:\.([^.]+))?$/
-
-        const ext = regex.exec(dataUrl.pathname)[1]
+        const ext = getFileExtension(dataUrl.pathname)
         if ('csv' === ext) {
           data = await fetch(dataUrlFinal)
             .then(response => response.text())
@@ -250,15 +246,13 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     let response = configObj || (await (await fetch(configUrl)).json())
 
     // If data is included through a URL, fetch that and store
-    let data = response.formattedData || response.data || {}
+    let data: any[] = response.data || []
 
     const urlFilters = response.filters ? (response.filters.filter(filter => filter.type === 'url').length > 0 ? true : false) : false
 
     if (response.dataUrl && !urlFilters) {
       try {
-        const regex = /(?:\.([^.]+))?$/
-
-        const ext = regex.exec(response.dataUrl)[1]
+        const ext = getFileExtension(response.dataUrl)
         if ('csv' === ext) {
           data = await fetch(response.dataUrl + `?v=${cacheBustingString()}`)
             .then(response => response.text())
@@ -289,11 +283,11 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
         console.error(`COVE: Cannot parse URL: ${response.dataUrl}`) // eslint-disable-line
         data = []
       }
+    }
 
-      if (response.dataDescription) {
-        data = transform.autoStandardize(data)
-        data = transform.developerStandardize(data, response.dataDescription)
-      }
+    if (response.dataDescription) {
+      data = transform.autoStandardize(data)
+      data = transform.developerStandardize(data, response.dataDescription)
     }
 
     if (data) {
@@ -323,7 +317,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     updateConfig(processedConfig, data)
   }
 
-  const updateConfig = (newConfig, dataOverride = undefined) => {
+  const updateConfig = (newConfig, dataOverride?: any[]) => {
     let data = dataOverride || stateData
 
     // Deeper copy
@@ -333,7 +327,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       }
     })
 
-    let newExcludedData
+    let newExcludedData: any[] = []
 
     if (newConfig.exclusions && newConfig.exclusions.active) {
       if (newConfig.xAxis.type === 'categorical' && newConfig.exclusions.keys?.length > 0) {
@@ -365,7 +359,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     setExcludedData(newExcludedData)
 
     // After data is grabbed, loop through and generate filter column values if there are any
-    let currentData
+    let currentData: any[] = []
     if (newConfig.filters) {
       newConfig.filters.forEach((filter, index) => {
         let filterValues = []
@@ -394,8 +388,8 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     } else {
       newConfig.runtime.seriesKeys = newConfig.series
         ? newConfig.series.map(series => {
-            newConfig.runtime.seriesLabels[series.dataKey] = series.label || series.dataKey
-            newConfig.runtime.seriesLabelsAll.push(series.name || series.label || series.dataKey)
+            newConfig.runtime.seriesLabels[series.dataKey] = series.name || series.label || series.dataKey
+            newConfig.runtime.seriesLabelsAll.push(series.name || series.dataKey)
             return series.dataKey
           })
         : []
@@ -412,8 +406,8 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       }
 
       const groups = uniqueArray(allKeys)
-      let tableData = []
-      const plots = []
+      let tableData: any[] = []
+      const plots: any[] = []
 
       /**
        * Calculates the first quartile (q1) and third quartile (q3) from an array of integers or decimals.
@@ -449,13 +443,13 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       // group specific statistics
       // prevent re-renders
       if (!groups) return
-      groups.forEach((g, index) => {
+      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 = filteredData.map(item => Number(item[newConfig?.series[0]?.dataKey]))
+          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)
@@ -484,19 +478,20 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
           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: d3.max([d3.min(filteredDataValues), q1 - 1.5 * iqr]),
+            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: d3.max([d3.min(filteredDataValues), q1 - 1.5 * iqr]),
+            columnLowerBounds: _colMin,
             columnUpperBounds: d3.min([d3.max(sortedData), q1 + 1.5 * iqr]),
             columnOutliers: outliers,
             values: filteredDataValues,
@@ -511,10 +506,10 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       // this appears to be the easiest option instead of running logic against the datatable cell...
       tableData = JSON.parse(JSON.stringify(plots))
       tableData.map(table => {
-        delete table.columnIqr
-        delete table.nonOutlierValues
-        delete table.columnLowerBounds
-        delete table.columnUpperBounds
+        table.columnIqr = undefined
+        table.nonOutlierValues = undefined
+        table.columnLowerBounds = undefined
+        table.columnUpperBounds = undefined
         return null // resolve eslint
       })
 
@@ -570,7 +565,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       newConfig.runtime.yAxis = newConfig.xAxis
       newConfig.runtime.horizontal = true
       newConfig.orientation = 'horizontal'
-    } else if (['Box Plot', 'Scatter Plot', 'Area Chart'].includes(newConfig.visualizationType)) {
+    } else if (['Box Plot', 'Scatter Plot', 'Area Chart', 'Line', 'Forecasting'].includes(newConfig.visualizationType)) {
       newConfig.runtime.xAxis = newConfig.xAxis
       newConfig.runtime.yAxis = newConfig.yAxis
       newConfig.runtime.horizontal = false
@@ -587,7 +582,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   }
 
   const filterData = (filters, data) => {
-    let filteredData = []
+    let filteredData: any[] = []
 
     data.forEach(row => {
       let add = true
@@ -607,7 +602,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
   // Gets filter values from dataset
   const generateValuesForFilter = (columnName, data = this.state.data) => {
-    const values = []
+    const values: any[] = []
 
     data.forEach(row => {
       const value = row[columnName]
@@ -697,7 +692,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
    */
   useEffect(() => {
     const handleFilterData = e => {
-      let tmp = []
+      let tmp: any[] = []
       tmp.push(e.detail)
       setExternalFilters(tmp)
     }
@@ -744,7 +739,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   // Generates color palette to pass to child chart component
   useEffect(() => {
     if (stateData && config.xAxis && config.runtime.seriesKeys) {
-      const configPalette = config.visualizationType === 'Paired Bar' || config.visualizationType === 'Deviation Bar' ? config.twoColor.palette : config.palette
+      const configPalette = config.customColors ? config.customColors : config.visualizationType === 'Paired Bar' || config.visualizationType === 'Deviation Bar' ? config.twoColor.palette : config.palette
       const allPalettes = { ...colorPalettes, ...twoColorPalette }
       let palette = config.customColors || allPalettes[configPalette]
       let numberOfKeys = config.runtime.seriesKeys.length
@@ -759,7 +754,8 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       newColorScale = () =>
         scaleOrdinal({
           domain: config.runtime.seriesLabelsAll,
-          range: palette
+          range: palette,
+          unknown: null
         })
 
       setColorScale(newColorScale)
@@ -773,10 +769,10 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
   // Called on legend click, highlights/unhighlights the data series with the given label
   const highlight = label => {
-    const newSeriesHighlight = []
+    const newSeriesHighlight: any[] = []
 
     // If we're highlighting all the series, reset them
-    if (seriesHighlight.length + 1 === config.runtime.seriesKeys.length && !config.legend.dynamicLegend && config.visualizationType !== 'Forecasting') {
+    if (seriesHighlight.length + 1 === config.runtime.seriesKeys.length && config.visualizationType !== 'Forecasting') {
       highlightReset()
       return
     }
@@ -806,25 +802,28 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
      * - pushes series.dataKey into the series highlight based on the found series.name
      * @param {String} value
      */
-    const pushDataKeyBySeriesName = value => {
-      let matchingSeries = config.series.filter(series => series.name === value.text)
-      if (matchingSeries?.length > 0) {
-        newSeriesHighlight.push(matchingSeries[0].dataKey)
-      }
-    }
+    // const pushDataKeyBySeriesName = value => {
+    //   let matchingSeries = config.series.filter(series => series.name === value.text)
+    //   if (matchingSeries?.length > 0) {
+    //     newSeriesHighlight.push(matchingSeries[0].dataKey)
+    //   }
+    // }
 
-    pushDataKeyBySeriesName(label)
+    // pushDataKeyBySeriesName(label)
 
     setSeriesHighlight(newSeriesHighlight)
   }
 
   // Called on reset button click, unhighlights all data series
   const highlightReset = () => {
-    if (config.legend.dynamicLegend && dynamicLegendItems) {
-      setSeriesHighlight(dynamicLegendItems.map(item => item.text))
-    } else {
-      setSeriesHighlight([])
+    try {
+      const legend = document.getElementById('legend')
+      if (!legend) throw new Error('No legend available to set previous focus on.')
+      legend.focus()
+    } catch (e) {
+      console.error('COVE:', e.message)
     }
+    setSeriesHighlight([])
   }
 
   const section = config.orientation === 'horizontal' ? 'yAxis' : 'xAxis'
@@ -849,7 +848,10 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   function getTextWidth(text, font) {
     const canvas = document.createElement('canvas')
     const context = canvas.getContext('2d')
-
+    if (!context) {
+      console.error('2d context not found')
+      return
+    }
     context.font = font || getComputedStyle(document.body).font
 
     return Math.ceil(context.measureText(text).width)
@@ -875,6 +877,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
   // Format numeric data based on settings in config OR from passed in settings for Additional Columns
   // - use only for old horizontal data - newer formatNumber is in helper/formatNumber
+  // TODO: we should combine various formatNumber functions across this project.
   const formatNumber = (num, axis, shouldAbbreviate = false, addColPrefix, addColSuffix, addColRoundTo) => {
     // if num is NaN return num
     if (isNaN(num) || !num) return num
@@ -897,7 +900,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     if (String(num).indexOf(',') !== -1) num = num.replaceAll(',', '')
 
     let original = num
-    let stringFormattingOptions = {
+    let stringFormattingOptions: any = {
       useGrouping: commas ? true : false // for old chart data table to work right cant just leave this to undefined
     }
     if (axis === 'left' || axis === undefined) {
@@ -1144,8 +1147,10 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     }
   }
 
+  // TODO: should be part of the DataTransform class.
   const clean = data => {
     // cleaning is deleting data we need in forecasting charts.
+    if (!Array.isArray(data)) return []
     if (config.visualizationType === 'Forecasting') return data
     return config?.xAxis?.dataKey ? transform.cleanData(data, config.xAxis.dataKey) : data
   }
@@ -1180,9 +1185,9 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
               Skip Over Chart Container
             </a>
             {/* Filters */}
-            {config.filters && !externalFilters && <Filters config={config} setConfig={setConfig} setFilteredData={setFilteredData} filteredData={filteredData} excludedData={excludedData} filterData={filterData} isNumber={isNumber} dimensions={dimensions} />}
+            {config.filters && !externalFilters && <Filters config={config} setConfig={setConfig} setFilteredData={setFilteredData} filteredData={filteredData} excludedData={excludedData} filterData={filterData} dimensions={dimensions} />}
             {/* Visualization */}
-            {config?.introText && <section className='introText'>{parse(config.introText)}</section>}
+            {config?.introText && config.visualizationType !== 'Spark Line' && <section className='introText'>{parse(config.introText)}</section>}
             <div
               style={{ marginBottom: config.legend.position !== 'bottom' && config.orientation === 'horizontal' ? `${config.runtime.xAxis.size}px` : '0px' }}
               className={`chart-container  p-relative ${config.legend.position === 'bottom' ? 'bottom' : ''}${config.legend.hide ? ' legend-hidden' : ''}${lineDatapointClass}${barBorderClass} ${contentClasses.join(' ')}`}
@@ -1193,16 +1198,19 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
               {/* Sparkline */}
               {config.visualizationType === 'Spark Line' && (
                 <>
-                  {description && <div className='subtext'>{parse(description)}</div>}
-                  <div style={sparkLineStyles}>
-                    <ParentSize>
-                      {parent => (
-                        <>
-                          <SparkLine width={parent.width} height={parent.height} />
-                        </>
-                      )}
-                    </ParentSize>
+                  {config?.introText && (
+                    <section className='introText' style={{ padding: '0px 0 35px' }}>
+                      {parse(config.introText)}
+                    </section>
+                  )}
+                  <div style={{ height: `100px`, width: `100%`, ...sparkLineStyles }}>
+                    <ParentSize>{parent => <SparkLine width={parent.width} height={parent.height} />}</ParentSize>
                   </div>
+                  {description && (
+                    <div className='subtext' style={{ padding: '35px 0 15px' }}>
+                      {parse(description)}
+                    </div>
+                  )}
                 </>
               )}
               {!config.legend.hide && config.visualizationType !== 'Spark Line' && <Legend />}
@@ -1225,9 +1233,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
                 config={config}
                 rawData={config.data}
                 runtimeData={filteredData || excludedData}
-                //navigationHandler={navigationHandler} // do we need this? What does it do?
                 expandDataTable={config.table.expanded}
-                //headerColor={general.headerColor} // have this in map but not chart
                 columns={config.columns}
                 showDownloadButton={config.general.showDownloadButton}
                 runtimeLegend={dynamicLegendItems}
@@ -1247,6 +1253,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
                 innerContainerRef={innerContainerRef}
                 outerContainerRef={outerContainerRef}
                 imageRef={imageId}
+                colorScale={colorScale}
                 isDebug={isDebug}
                 isEditor={isEditor}
               />

package/src/_stories/Chart.stories.tsx

@@ -0,0 +1,188 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Chart from '../CdcChart'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const Lollipop: Story = {
+  args: {
+    config: {
+      type: 'chart',
+      title: 'Lollipop Style Horizontal Bar Chart - Number of Spills Occurring in the Home',
+      showTitle: true,
+      showDownloadMediaButton: false,
+      theme: 'theme-blue',
+      animate: true,
+      fontSize: 'medium',
+      lineDatapointStyle: 'hover',
+      barHasBorder: 'false',
+      isLollipopChart: true,
+      lollipopShape: 'circle',
+      lollipopColorStyle: 'two-tone',
+      visualizationSubType: 'horizontal',
+      barStyle: '',
+      roundingStyle: 'standard',
+      tipRounding: 'top',
+      isResponsiveTicks: false,
+      general: { showDownloadButton: false },
+      padding: { left: 5, right: 5 },
+      yAxis: {
+        hideAxis: true,
+        displayNumbersOnBar: true,
+        hideLabel: false,
+        hideTicks: false,
+        size: '13',
+        gridLines: false,
+        enablePadding: false,
+        min: '',
+        max: '',
+        labelColor: '#333',
+        tickLabelColor: '#333',
+        tickColor: '#333',
+        rightHideAxis: true,
+        rightAxisSize: 50,
+        rightLabel: '',
+        rightLabelOffsetSize: 0,
+        rightAxisLabelColor: '#333',
+        rightAxisTickLabelColor: '#333',
+        rightAxisTickColor: '#333',
+        numTicks: '9',
+        axisPadding: 0,
+        tickRotation: 0,
+        anchors: [],
+        type: 'chart',
+        title: 'Lollipop Style Horizontal Bar Chart',
+        theme: 'theme-blue',
+        fontSize: 'medium',
+        lineDatapointStyle: 'hover',
+        barHasBorder: 'false',
+        isLollipopChart: false,
+        lollipopShape: 'circle',
+        lollipopColorStyle: 'two-tone',
+        visualizationSubType: 'horizontal',
+        padding: { left: 5, right: 5 },
+        yAxis: { size: 50, gridLines: false },
+        barThickness: 0.35,
+        height: 260,
+        xAxis: { type: 'categorical', size: 75, tickRotation: 0, dataKey: 'Vehicle' },
+        table: { label: 'Data Table', expanded: true, show: true },
+        legend: { behavior: 'isolate', position: 'right' },
+        exclusions: { active: false, keys: [] },
+        palette: 'qualitative-bold',
+        labels: false,
+        dataFormat: {},
+        confidenceKeys: {},
+        data: [
+          { Group: 'Combined Total of Group A', Vehicle: '100', Home: '120', Work: '140', Office: '120' },
+          { Group: 'Combined Total of Group B', Vehicle: '150', Home: '140', Work: '100', Office: '90' },
+          { Group: 'Combined Total of Group C', Vehicle: '90', Home: '90', Work: '80', Office: '80' },
+          { Group: 'Combined Total of Group D', Vehicle: '70', Home: '60', Work: '50', Office: '70' }
+        ],
+        dataFileName: 'CSV_Source_Example_for_Horizontal_Bar_viz-cdcwp1619811744363.csv',
+        dataFileSourceType: 'file',
+        visualizationType: 'Bar',
+        runtime: {
+          seriesLabels: { Vehicle: 'Vehicle' },
+          seriesLabelsAll: ['Vehicle'],
+          originalXAxis: { type: 'categorical', size: 75, tickRotation: 0, dataKey: 'Vehicle' },
+          seriesKeys: ['Vehicle'],
+          xAxis: { size: 50, gridLines: false },
+          yAxis: { type: 'categorical', size: 75, tickRotation: 0, dataKey: 'Vehicle' },
+          horizontal: true,
+          uniqueId: 1651765968212,
+          editorErrorMessage: ''
+        },
+        description: 'Subtext can be added here for options like citing data sources or insight into reading the bar chart.',
+        series: [{ dataKey: 'Vehicle', type: 'Bar' }],
+        barHeight: 25,
+        barPadding: 40,
+        labelPlacement: 'Below Bar',
+        label: 'Number of Accidents'
+      },
+      boxplot: [],
+      topAxis: { hasLine: false },
+      isLegendValue: false,
+      barThickness: 0.35,
+      barHeight: 6,
+      barSpace: 15,
+      heights: { vertical: 300, horizontal: 170.39999999999998 },
+      xAxis: {
+        anchors: [],
+        type: 'categorical',
+        showTargetLabel: true,
+        targetLabel: 'Target',
+        hideAxis: true,
+        hideLabel: true,
+        hideTicks: true,
+        size: '16',
+        tickRotation: 0,
+        min: '',
+        max: '160',
+        labelColor: '#333',
+        tickLabelColor: '#333',
+        tickColor: '#333',
+        numTicks: '',
+        labelOffset: 65,
+        axisPadding: 0,
+        target: 0,
+        maxTickRotation: 0,
+        dataKey: 'Group'
+      },
+      table: { label: 'Data Table', expanded: false, limitHeight: false, height: '', caption: '', showDownloadUrl: false, showDataTableLink: true, indexLabel: 'Group', download: false, showVertical: true, show: true },
+      orientation: 'horizontal',
+      color: 'pinkpurple',
+      columns: {},
+      legend: {
+        behavior: 'isolate',
+        singleRow: false,
+        colorCode: '',
+        reverseLabelOrder: false,
+        description: '',
+        dynamicLegend: false,
+        dynamicLegendDefaultText: 'Show All',
+        dynamicLegendItemLimit: 5,
+        dynamicLegendItemLimitMessage: 'Dynamic Legend Item Limit Hit.',
+        dynamicLegendChartMessage: 'Select Options from the Legend',
+        position: 'right',
+        hide: true,
+        label: 'Accident Location'
+      },
+      exclusions: { active: false, keys: [] },
+      palette: 'qualitative-bold',
+      isPaletteReversed: false,
+      twoColor: { palette: 'monochrome-1', isPaletteReversed: false },
+      labels: false,
+      dataFormat: { commas: false, prefix: '', suffix: '', abbreviated: false, bottomSuffix: '', bottomPrefix: '', bottomAbbreviated: false },
+      confidenceKeys: {},
+      visual: { border: true, accent: true, background: true, verticalHoverLine: false, horizontalHoverLine: false },
+      useLogScale: false,
+      filterBehavior: 'Filter Change',
+      highlightedBarValues: [],
+      series: [{ dataKey: 'Home', type: 'Bar', tooltip: true }],
+      tooltips: { opacity: 90 },
+      height: 212,
+      data: [
+        { Group: 'Combined Total of Group A', Vehicle: '100', Home: '120', Work: '140', Office: '120' },
+        { Group: 'Combined Total of Group B', Vehicle: '150', Home: '140', Work: '100', Office: '90' },
+        { Group: 'Combined Total of Group C', Vehicle: '90', Home: '90', Work: '80', Office: '80' },
+        { Group: 'Combined Total of Group D', Vehicle: '70', Home: '60', Work: '50', Office: '70' }
+      ],
+      dataFileName: 'CSV_Source_Example_for_Horizontal_Bar_viz-cdcwp1619811744363.csv',
+      dataFileSourceType: 'file',
+      visualizationType: 'Bar',
+      description: 'Subtext can be added here for options like citing data sources or insight into reading the bar chart.',
+      barPadding: 47,
+      filters: [],
+      lollipopSize: 'medium',
+      validated: 4.23,
+      dynamicMarginTop: 0
+    }
+  }
+}
+
+export default meta

package/src/components/AreaChart.Stacked.jsx

@@ -0,0 +1,73 @@
+import React, { useContext, memo } from 'react'
+
+// cdc
+import ConfigContext from '../ConfigContext'
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+
+// visx & d3
+import * as allCurves from '@visx/curve'
+import { Bar, AreaStack } from '@visx/shape'
+import { Group } from '@visx/group'
+import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
+
+const AreaChartStacked = ({ xScale, yScale, yMax, xMax, handleTooltipMouseOver, handleTooltipMouseOff, isDebug, isBrush }) => {
+  // import data from context
+  let { transformedData: data, config, seriesHighlight, colorScale, rawData } = useContext(ConfigContext)
+
+  // Draw transparent bars over the chart to get tooltip data
+  // Turn DEBUG on for additional context.
+  if (!data) return
+
+  const handleDateCategory = value => {
+    if (config.xAxis.type === 'categorical') return xScale(value)
+    if (config.xAxis.type === 'date') {
+      let date = new Date(value)
+      return xScale(date)
+    }
+  }
+
+  const strokeWidth = 2
+
+  return (
+    data && (
+      <svg height={Number(yMax)}>
+        <ErrorBoundary component='AreaChartStacked'>
+          <Group className='area-chart' key='area-wrapper' left={Number(config.yAxis.size) + strokeWidth / 2} height={Number(yMax)} style={{ overflow: 'hidden' }}>
+            <AreaStack
+              data={data}
+              keys={config.runtime.areaSeriesKeys.map(s => s.dataKey) || config.series.map(s => s.dataKey)}
+              x0={d => handleDateCategory(d.data[config.xAxis.dataKey])}
+              y0={d => Number(yScale(d[0]))}
+              y1={d => Number(yScale(d[1]))}
+              curve={allCurves[approvedCurveTypes[config.stackedAreaChartLineType]]}
+            >
+              {({ stacks, path }) => {
+                return stacks.map((stack, stackIndex) => {
+                  let transparentArea = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(stack.key) === -1
+                  let displayArea = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(stack.key) !== -1
+
+                  return (
+                    // prettier-ignore
+                    <path
+                      key={stack.key}
+                      d={path(stack) || ''}
+                      strokeWidth={2}
+                      stroke={displayArea ?  colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[stack.key] : stack.key) : '#000' : 'transparent'}
+                      fillOpacity={transparentArea ? 0.25 : 0.5}
+                      fill={displayArea ? colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[stack.key] : stack.key) : '#000' : 'transparent'}
+                    />
+                  )
+                })
+              }}
+            </AreaStack>
+
+            {/* prettier-ignore */}
+            {!isBrush && <Bar width={Number(xMax)} height={Number(yMax)} fill={isDebug ? 'red' : 'transparent'} fillOpacity={0.05} style={isDebug ? { stroke: 'black', strokeWidth: 2 } : {}} onMouseMove={e => handleTooltipMouseOver(e, rawData)} onMouseLeave={handleTooltipMouseOff} />}
+          </Group>
+        </ErrorBoundary>
+      </svg>
+    )
+  )
+}
+
+export default memo(AreaChartStacked)