@cdc/chart 4.23.10 → 4.23.11

package/index.html

@@ -34,19 +34,22 @@
   -->
 
   <!-- GENERIC CHART TYPES -->
-  <!-- <div class="react-container" data-config="/examples/private/line-breaks.json"></div> -->
+  <div class="react-container" data-config="/examples/private/highlight.json"></div>
+  <div class="react-container" data-config="/examples/private/aggregate.json"></div>
+  <!-- <div class="react-container" data-config="/examples/private/missing-color.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/private/combo.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/legend-highlights/highlights.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/private/tooltip-issue.json"></div> -->
   <!-- <div class="react-container" data-config="https://cdc.gov/poxvirus/mpox/modules/data-viz/mpx-trends_1.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-date-city-temperature.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-date-apple.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-stacked.json"></div> -->
+  <!-- <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=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="/examples/feature/line/line-chart.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/effective_reproduction.json"></div> -->
@@ -69,7 +72,7 @@
   <!-- <div class="react-container" data-config="/examples/feature/bar/planet-chart-horizontal-example-config.json"></div> -->
 
   <!-- SPARKLINE -->
-  <!-- <div class="react-container" data-config="/examples/feature/sparkline/example-sparkline.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/feature/dev-4261.json"></div> -->
 
   <!-- TESTS DATA TABLE SORTING  -->
   <!-- Bar Chart with Confidence Intervals (bottom of page)  -->
@@ -103,6 +106,7 @@
   <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/example-combo-bar-nonnumeric.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/example-bar-chart-nonnumeric.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/sparkline-chart-nonnumeric.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/feature/bar/lollipop.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/stacked-vertical-bar-example-nonnumerics.json"></div> -->
 
   <!-- TESTS CUTOFF -->
@@ -130,10 +134,10 @@
   <!-- VERTICAL BAR CHARTS -->
   <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/combo-line-chart.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-categorical.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json"></div> -->
+  <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json"></div>
   <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-confidence.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart.json"></div> -->
-  <div class="react-container" data-config="https://www.cdc.gov/respiratory-viruses/modules/respiratory-virus-activity/emergency-dept-visits_live.json"></div>
+  <!-- <div class="react-container" data-config="https://www.cdc.gov/respiratory-viruses/modules/respiratory-virus-activity/emergency-dept-visits_live.json"></div> -->
 
   <noscript>You need to enable JavaScript to run this app.</noscript>
 </body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/chart",
-  "version": "4.23.10",
+  "version": "4.23.11",
   "description": "React component for visualizing tabular data in various types of charts",
   "moduleName": "CdcChart",
   "main": "dist/cdcchart",
@@ -48,7 +48,7 @@
     "js-base64": "^2.5.2",
     "papaparse": "^5.3.0",
     "react-accessible-accordion": "^3.3.4",
-    "react-icons": "^4.10.1",
+    "react-icons": "^4.11.0",
     "react-spring": "^8.0.27",
     "react-table": "^7.5.0",
     "react-tooltip": "5.8.2-beta.3",
@@ -59,7 +59,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "ff5b1ca0c84bb0629bc69e5a26a4a81254dbf69f",
+  "gitHead": "ecad213667a3cb96c921eaddba43a31c84caaa08",
   "devDependencies": {
     "resize-observer-polyfill": "^1.5.1"
   }

package/src/CdcChart.tsx

@@ -43,6 +43,7 @@ import './scss/main.scss'
 // load both then config below determines which to use
 import DataTable from '@cdc/core/components/DataTable'
 import { getFileExtension } from '@cdc/core/helpers/getFileExtension'
+import Title from '@cdc/core/components/ui/Title'
 
 const generateColorsArray = (color = '#000000', special = false) => {
   let colorObj = chroma(color)
@@ -50,29 +51,6 @@ const generateColorsArray = (color = '#000000', special = false) => {
 
   return [color, hoverColor, colorObj.darken(0.3).hex()]
 }
-const hashObj = row => {
-  try {
-    if (!row) throw new Error('No row supplied to hashObj')
-
-    let str = JSON.stringify(row)
-    let hash = 0
-
-    if (str.length === 0) return hash
-
-    for (let i = 0; i < str.length; i++) {
-      let char = str.charCodeAt(i)
-      hash = (hash << 5) - hash + char
-      hash = hash & hash
-    }
-
-    return hash
-  } catch (e) {
-    console.error('COVE: ', e) // eslint-disable-line
-  }
-}
-
-// * FILE REVIEW
-// TODO: @tturnerswdev33 - remove/fix mentions of runtimeLegend that were added
 
 export default function CdcChart({ configUrl, config: configObj, isEditor = false, isDebug = false, isDashboard = false, setConfig: setParentConfig, setEditing, hostname, link, setSharedFilter, setSharedFilterValue, dashboardConfig }) {
   const transform = new DataTransform()
@@ -90,7 +68,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   const [coveLoadedEventRan, setCoveLoadedEventRan] = useState(false)
   const [dynamicLegendItems, setDynamicLegendItems] = useState<any[]>([])
   const [imageId] = useState(`cove-${Math.random().toString(16).slice(-4)}`)
-
+  type Config = typeof config
   let legendMemo = useRef(new Map()) // map collection
   let innerContainerRef = useRef()
 
@@ -140,7 +118,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
@@ -310,8 +288,13 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
     newConfig.series.map(series => {
       if (!series.tooltip) series.tooltip = true
+      if (!series.axis) series.axis = 'Left'
     })
 
+    if (!newConfig.data && data) {
+      newConfig.data = data
+    }
+
     const processedConfig = { ...(await coveUpdateWorker(newConfig)) }
 
     updateConfig(processedConfig, data)
@@ -563,6 +546,11 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     if ((newConfig.visualizationType === 'Bar' && newConfig.orientation === 'horizontal') || ['Deviation Bar', 'Paired Bar', 'Forest Plot'].includes(newConfig.visualizationType)) {
       newConfig.runtime.xAxis = newConfig.yAxis
       newConfig.runtime.yAxis = newConfig.xAxis
+
+      if (newConfig.visualizationType === 'Forest Plot') {
+        newConfig.runtime.xAxis.type = newConfig.forestPlot.type
+        newConfig.runtime.xAxis.tickRotation = newConfig.xAxis.tickRotation
+      }
       newConfig.runtime.horizontal = true
       newConfig.orientation = 'horizontal'
     } else if (['Box Plot', 'Scatter Plot', 'Area Chart', 'Line', 'Forecasting'].includes(newConfig.visualizationType)) {
@@ -739,7 +727,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
@@ -754,7 +742,8 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       newColorScale = () =>
         scaleOrdinal({
           domain: config.runtime.seriesLabelsAll,
-          range: palette
+          range: palette,
+          unknown: null
         })
 
       setColorScale(newColorScale)
@@ -1127,18 +1116,6 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
         return generateColorsArray(mapColorPalette[3])
       }
 
-      let hash = hashObj(rowObj)
-
-      if (legendMemo.current.has(hash)) {
-        let idx = legendMemo.current.get(hash)
-        if (runtimeLegend[idx]?.disabled) return false
-
-        // DEV-784 changed to use bin prop to get color instead of idx
-        // bc we re-order legend when showSpecialClassesLast is checked
-        let legendBinColor = runtimeLegend.find(o => o.bin === idx)?.color
-        return generateColorsArray(legendBinColor, runtimeLegend[idx]?.special)
-      }
-
       // Fail state
       return generateColorsArray()
     } catch (e) {
@@ -1159,6 +1136,61 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     return key
   }
 
+  const computeMarginBottom = (config: Config): string => {
+    const isLegendBottom = legend.position === 'bottom' || ['sm', 'xs', 'xxs'].includes(currentViewport)
+    const isHorizontal = config.orientation === 'horizontal'
+    const tickRotation = Number(config.xAxis.tickRotation) > 0 ? Number(config.xAxis.tickRotation) : 0
+    const isBrush = config.brush.active
+    const offset = 20
+    const brushHeight = config.brush.height
+    let bottom = 0
+    if (!isLegendBottom && isHorizontal && !config.yAxis.label) {
+      bottom = Number(config.xAxis.labelOffset)
+    }
+    if (!isLegendBottom && isHorizontal && config.yAxis.label && !config.isResponsiveTicks) {
+      bottom = Number(config.runtime.xAxis.size) + Number(config.xAxis.labelOffset)
+    }
+    if (!isLegendBottom && isHorizontal && config.yAxis.label && config.isResponsiveTicks) {
+      bottom = config.dynamicMarginTop + offset
+    }
+    if (!isLegendBottom && isHorizontal && !config.yAxis.label && config.isResponsiveTicks) {
+      bottom = config.dynamicMarginTop ? config.dynamicMarginTop - offset : Number(config.xAxis.labelOffset) - offset
+    }
+    if (!isLegendBottom && isHorizontal && config.yAxis.label && config.isResponsiveTicks) {
+      bottom = config.dynamicMarginTop ? config.dynamicMarginTop + offset : Number(config.xAxis.labelOffset)
+    }
+
+    if (!isHorizontal && !isLegendBottom && config.xAxis.label && tickRotation && !config.isResponsiveTicks) {
+      bottom = isBrush ? brushHeight + config.xAxis.tickWidthMax + -config.xAxis.size + config.xAxis.labelOffset + offset : config.xAxis.tickWidthMax + offset + -config.xAxis.size + config.xAxis.labelOffset
+    }
+    if (!isHorizontal && !isLegendBottom && !config.xAxis.label && tickRotation && !config.isResponsiveTicks) {
+    }
+    if (!isHorizontal && !isLegendBottom && !config.xAxis.label && tickRotation && !config.dynamicMarginTop && !config.isResponsiveTicks) {
+      bottom = isBrush ? config.xAxis.tickWidthMax + brushHeight + offset + -config.xAxis.size : 0
+    }
+
+    if (!isHorizontal && !isLegendBottom && config.xAxis.label && !tickRotation && !config.isResponsiveTicks) {
+      bottom = isBrush ? brushHeight + -config.xAxis.size + config.xAxis.labelOffset + offset : -config.xAxis.size + config.xAxis.labelOffset + offset
+    }
+    if (!isHorizontal && !isLegendBottom && config.xAxis.label && config.dynamicMarginTop && config.isResponsiveTicks) {
+      bottom = isBrush ? brushHeight + config.xAxis.labelOffset + -config.xAxis.size + config.xAxis.tickWidthMax : config.dynamicMarginTop + -config.xAxis.size + offset
+    }
+    if (!isHorizontal && !isLegendBottom && !config.xAxis.label && config.dynamicMarginTop && config.isResponsiveTicks) {
+      bottom = isBrush ? brushHeight + config.xAxis.labelOffset + -config.xAxis.size + config.xAxis.tickWidthMax : config.dynamicMarginTop + -config.xAxis.size - offset
+    }
+    if (!isHorizontal && !isLegendBottom && config.xAxis.label && !config.dynamicMarginTop && config.isResponsiveTicks) {
+      bottom = isBrush ? brushHeight + config.xAxis.labelOffset + -config.xAxis.size + 25 : config.xAxis.labelOffset + -config.xAxis.size + offset
+    }
+    if (!isHorizontal && !isLegendBottom && !config.xAxis.label && !config.dynamicMarginTop && config.isResponsiveTicks) {
+      bottom = -config.xAxis.size + offset + config.xAxis.labelOffset
+    }
+    if (!isHorizontal && !isLegendBottom && !config.xAxis.label && !tickRotation && !config.dynamicMarginTop && !config.isResponsiveTicks) {
+      bottom = isBrush ? brushHeight + -config.xAxis.size + config.xAxis.labelOffset : 0
+    }
+
+    return `${bottom}px`
+  }
+
   // Prevent render if loading
   let body = <Loading />
 
@@ -1173,13 +1205,8 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
         {isEditor && <EditorPanel />}
         {!missingRequiredSections() && !config.newViz && (
           <div className='cdc-chart-inner-container'>
-            {/* Title */}
-            {title && config.showTitle && (
-              <div role='heading' className={`chart-title ${config.theme} cove-component__header`} aria-level={2}>
-                {config && <sup className='superTitle'>{parse(config.superTitle || '')}</sup>}
-                <div>{parse(title)}</div>
-              </div>
-            )}
+            <Title showTitle={config.showTitle} isDashboard={isDashboard} title={title} superTitle={config.superTitle} classes={['chart-title', `${config.theme}`, 'cove-component__header']} style={undefined} />
+
             <a id='skip-chart-container' className='cdcdataviz-sr-only-focusable' href={handleChartTabbing}>
               Skip Over Chart Container
             </a>
@@ -1187,10 +1214,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
             {config.filters && !externalFilters && <Filters config={config} setConfig={setConfig} setFilteredData={setFilteredData} filteredData={filteredData} excludedData={excludedData} filterData={filterData} dimensions={dimensions} />}
             {/* Visualization */}
             {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(' ')}`}
-            >
+            <div style={{ marginBottom: computeMarginBottom(config) }} className={`chart-container  p-relative ${config.legend.position === 'bottom' ? 'bottom' : ''}${config.legend.hide ? ' legend-hidden' : ''}${lineDatapointClass}${barBorderClass} ${contentClasses.join(' ')}`}>
               {/* All charts except sparkline */}
               {config.visualizationType !== 'Spark Line' && chartComponents[config.visualizationType]}
 
@@ -1231,11 +1255,9 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
               <DataTable
                 config={config}
                 rawData={config.data}
-                runtimeData={filteredData || excludedData}
+                runtimeData={transform.applySuppression(filteredData || excludedData, config.suppressedData)}
                 expandDataTable={config.table.expanded}
                 columns={config.columns}
-                showDownloadButton={config.general.showDownloadButton}
-                runtimeLegend={dynamicLegendItems}
                 displayDataAsText={displayDataAsText}
                 displayGeoName={displayGeoName}
                 applyLegendToRow={applyLegendToRow}
@@ -1243,18 +1265,8 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
                 indexTitle={config.table.indexLabel}
                 vizTitle={title}
                 viewport={currentViewport}
-                parseDate={parseDate}
-                formatDate={formatDate}
-                formatNumber={formatNumber}
                 tabbingId={handleChartTabbing}
-                showDownloadImgButton={config.showDownloadImgButton}
-                showDownloadPdfButton={config.showDownloadPdfButton}
-                innerContainerRef={innerContainerRef}
-                outerContainerRef={outerContainerRef}
-                imageRef={imageId}
                 colorScale={colorScale}
-                isDebug={isDebug}
-                isEditor={isEditor}
               />
             )}
             {config?.footnotes && <section className='footnotes'>{parse(config.footnotes)}</section>}

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