@cdc/chart 4.23.10-alpha → 4.23.11

package/index.html

@@ -34,19 +34,22 @@
   -->
 
   <!-- GENERIC CHART TYPES -->
-  <div class="react-container" data-config="/examples/private/missing-color.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/private/forest-plot.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,7 +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/bar/lollipop.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/stacked-vertical-bar-example-nonnumerics.json"></div> -->
 
   <!-- TESTS CUTOFF -->
@@ -131,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-alpha",
+  "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": "47278535fb20bb4e6b3320f8075051bedc5bca8e",
+  "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()
 
@@ -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)) {
@@ -1128,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) {
@@ -1160,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 />
 
@@ -1174,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>
@@ -1188,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]}
 
@@ -1232,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}
@@ -1244,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.tooltip.stories.tsx

@@ -0,0 +1,305 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Chart from '../CdcChart'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Tooltip',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const Additional_Tooltip: Story = {
+  args: {
+    config: {
+      type: 'chart',
+      debugSvg: false,
+      chartMessage: {
+        noData: 'No Data Available'
+      },
+      title: 'Example Stacked Bar Chart with Additional tolltip column',
+      showTitle: true,
+      showDownloadMediaButton: false,
+      theme: 'theme-orange',
+      animate: false,
+      fontSize: 'medium',
+      lineDatapointStyle: 'hover',
+      barHasBorder: 'false',
+      isLollipopChart: false,
+      lollipopShape: 'circle',
+      lollipopColorStyle: 'two-tone',
+      visualizationSubType: 'stacked',
+      barStyle: '',
+      roundingStyle: 'standard',
+      tipRounding: 'top',
+      isResponsiveTicks: false,
+      general: {
+        showDownloadButton: false
+      },
+      padding: {
+        left: 5,
+        right: 5
+      },
+      yAxis: {
+        hideAxis: false,
+        displayNumbersOnBar: false,
+        hideLabel: false,
+        hideTicks: false,
+        size: '64',
+        gridLines: false,
+        enablePadding: false,
+        min: '',
+        max: '',
+        labelColor: '#333',
+        tickLabelColor: '#333',
+        tickColor: '#333',
+        rightHideAxis: true,
+        rightAxisSize: 0,
+        rightLabel: '',
+        rightLabelOffsetSize: 0,
+        rightAxisLabelColor: '#333',
+        rightAxisTickLabelColor: '#333',
+        rightAxisTickColor: '#333',
+        numTicks: '',
+        axisPadding: 0,
+        tickRotation: 0,
+        anchors: [],
+        label: 'Y-Axis Label Example'
+      },
+      boxplot: {
+        plots: [],
+        borders: 'true',
+        firstQuartilePercentage: 25,
+        thirdQuartilePercentage: 75,
+        boxWidthPercentage: 40,
+        plotOutlierValues: false,
+        plotNonOutlierValues: true,
+        legend: {
+          showHowToReadText: false,
+          howToReadText: ''
+        },
+        labels: {
+          q1: 'Lower Quartile',
+          q2: 'q2',
+          q3: 'Upper Quartile',
+          q4: 'q4',
+          minimum: 'Minimum',
+          maximum: 'Maximum',
+          mean: 'Mean',
+          median: 'Median',
+          sd: 'Standard Deviation',
+          iqr: 'Interquartile Range',
+          total: 'Total',
+          outliers: 'Outliers',
+          values: 'Values',
+          lowerBounds: 'Lower Bounds',
+          upperBounds: 'Upper Bounds'
+        }
+      },
+      topAxis: {
+        hasLine: false
+      },
+      isLegendValue: false,
+      barThickness: 0.35,
+      barHeight: 25,
+      barSpace: 15,
+      heights: {
+        vertical: 300,
+        horizontal: 750
+      },
+      xAxis: {
+        sortDates: false,
+        anchors: [],
+        type: 'categorical',
+        showTargetLabel: true,
+        targetLabel: 'Target',
+        hideAxis: false,
+        hideLabel: false,
+        hideTicks: false,
+        size: '67',
+        tickRotation: '25',
+        min: '',
+        max: '',
+        labelColor: '#333',
+        tickLabelColor: '#333',
+        tickColor: '#333',
+        numTicks: '',
+        labelOffset: 65,
+        axisPadding: 0,
+        target: 0,
+        maxTickRotation: 0,
+        dataKey: 'Year',
+        label: 'X-Axis Label Example',
+        tickWidthMax: 41
+      },
+      table: {
+        label: 'Data Table',
+        expanded: true,
+        limitHeight: false,
+        height: '',
+        caption: '',
+        showDownloadUrl: false,
+        showDataTableLink: true,
+        indexLabel: '',
+        download: true,
+        showVertical: false,
+        show: true
+      },
+      orientation: 'vertical',
+      color: 'pinkpurple',
+      columns: {
+        additionalColumn1: {
+          label: 'New Column',
+          dataTable: false,
+          tooltips: true,
+          prefix: '',
+          suffix: '',
+          forestPlot: false,
+          startingPoint: '0',
+          forestPlotAlignRight: false,
+          name: 'Data 1'
+        }
+      },
+      legend: {
+        hide: false,
+        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',
+        lineMode: false,
+        verticalSorted: false,
+        position: 'right',
+        label: 'Data Type'
+      },
+      brush: {
+        height: 25,
+        data: [],
+        active: false
+      },
+      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: 'Data 2',
+          type: 'Bar',
+          tooltip: true
+        },
+        {
+          dataKey: 'Data 3',
+          type: 'Bar',
+          tooltip: true
+        }
+      ],
+      tooltips: {
+        opacity: 90
+      },
+      forestPlot: {
+        startAt: 0,
+        width: 'auto',
+        colors: {
+          line: '',
+          shape: ''
+        },
+        estimateField: '',
+        estimateRadius: '',
+        lowerCiField: '',
+        upperCiField: '',
+        shape: '',
+        rowHeight: 20,
+        showZeroLine: false,
+        description: {
+          show: true,
+          text: 'description',
+          location: 0
+        },
+        result: {
+          show: true,
+          text: 'result',
+          location: 100
+        },
+        radius: {
+          min: 1,
+          max: 8,
+          scalingColumn: ''
+        },
+        regression: {
+          lower: 0,
+          upper: 0,
+          estimateField: 0
+        },
+        leftWidthOffset: 0,
+        rightWidthOffset: 0
+      },
+      area: {
+        isStacked: false
+      },
+      height: '375',
+      data: [
+        {
+          Year: '2015',
+          'Data 1': '25',
+          'Data 2': '20',
+          'Data 3': '55'
+        },
+        {
+          Year: '2016',
+          'Data 1': '35',
+          'Data 2': '30',
+          'Data 3': '35'
+        },
+        {
+          Year: '2017',
+          'Data 1': '22',
+          'Data 2': '38',
+          'Data 3': '40'
+        },
+        {
+          Year: '2018',
+          'Data 1': '40',
+          'Data 2': '40',
+          'Data 3': '20'
+        }
+      ],
+      visualizationType: 'Bar',
+      validated: 4.23,
+      dynamicMarginTop: 0
+    }
+  }
+}
+
+export default meta

package/src/_stories/ChartBrush.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import chartBrushConfig from './_mock/brush_mock.json'
+
+import Chart from '../CdcChart'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Brush',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const Area_Brush: Story = {
+  args: {
+    config: chartBrushConfig
+  }
+}
+
+export default meta

package/src/_stories/ChartSuppress.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import suppressMock from './_mock/suppress_mock.json'
+
+import Chart from '../CdcChart'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Suppress',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const Horizontal_Chart: Story = {
+  args: {
+    config: suppressMock
+  }
+}
+
+export default meta