@cdc/chart 4.24.4 → 4.24.7

package/src/CdcChart.tsx

@@ -29,17 +29,17 @@ import Legend from './components/Legend'
 import defaults from './data/initial-state'
 import EditorPanel from './components/EditorPanel'
 import { abbreviateNumber } from './helpers/abbreviateNumber'
+import { handleChartTabbing } from './helpers/handleChartTabbing'
 import { getQuartiles } from './helpers/getQuartiles'
 import { sortAsc, sortDesc } from './helpers/sort'
-import { filterData } from './helpers/filterData'
 import { handleChartAriaLabels } from './helpers/handleChartAriaLabels'
 import { lineOptions } from './helpers/lineOptions'
 import { handleLineType } from './helpers/handleLineType'
 import { generateColorsArray } from './helpers/generateColorsArray'
-import { computeMarginBottom } from './helpers/computeMarginBottom'
 import Loading from '@cdc/core/components/Loading'
 import Filters from '@cdc/core/components/Filters'
 import MediaControls from '@cdc/core/components/MediaControls'
+import Annotation from './components/Annotations'
 
 // Helpers
 import { publish, subscribe, unsubscribe } from '@cdc/core/helpers/events'
@@ -51,6 +51,7 @@ import cacheBustingString from '@cdc/core/helpers/cacheBustingString'
 import isNumber from '@cdc/core/helpers/isNumber'
 import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
 import { getQueryStringFilterValue } from '@cdc/core/helpers/queryStringUtils'
+import { isConvertLineToBarGraph } from './helpers/isConvertLineToBarGraph'
 
 import './scss/main.scss'
 // load both then config below determines which to use
@@ -59,8 +60,10 @@ import { getFileExtension } from '@cdc/core/helpers/getFileExtension'
 import Title from '@cdc/core/components/ui/Title'
 import { ChartConfig } from './types/ChartConfig'
 import { Label } from './types/Label'
+import { type ViewportSize } from './types/ChartConfig'
 import { isSolrCsv, isSolrJson } from '@cdc/core/helpers/isSolr'
 import SkipTo from '@cdc/core/components/elements/SkipTo'
+import { filterVizData } from '@cdc/core/helpers/filterVizData'
 
 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()
@@ -71,18 +74,28 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   const [excludedData, setExcludedData] = useState<Record<string, number>[] | undefined>(undefined)
   const [filteredData, setFilteredData] = useState<Record<string, any>[] | undefined>(undefined)
   const [seriesHighlight, setSeriesHighlight] = useState<string[]>(configObj && configObj?.legend?.seriesHighlight?.length ? [...configObj?.legend?.seriesHighlight] : [])
-  const [currentViewport, setCurrentViewport] = useState('lg')
+  const [currentViewport, setCurrentViewport] = useState<ViewportSize>('lg')
   const [dimensions, setDimensions] = useState<[number?, number?]>([])
   const [externalFilters, setExternalFilters] = useState<any[]>()
   const [container, setContainer] = useState()
   const [coveLoadedEventRan, setCoveLoadedEventRan] = useState(false)
+  const [isDraggingAnnotation, setIsDraggingAnnotation] = useState(false)
   const [dynamicLegendItems, setDynamicLegendItems] = useState<any[]>([])
   const [imageId] = useState(`cove-${Math.random().toString(16).slice(-4)}`)
+  const [brushConfig, setBrushConfig] = useState({
+    data: [],
+    isActive: false,
+    isBrushing: false
+  })
   type Config = typeof config
   let legendMemo = useRef(new Map()) // map collection
   let innerContainerRef = useRef()
   const legendRef = useRef(null)
 
+  const handleDragStateChange = isDragging => {
+    setIsDraggingAnnotation(isDragging)
+  }
+
   if (isDebug) console.log('Chart config, isEditor', config, isEditor)
 
   // Destructure items from config for more readable JSX
@@ -97,7 +110,10 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
   const { barBorderClass, lineDatapointClass, contentClasses, sparkLineStyles } = useDataVizClasses(config)
   const legendId = useId()
-  const handleChartTabbing = !config.legend?.hide ? legendId : config?.title ? `dataTableSection__${config.title.replace(/\s/g, '')}` : `dataTableSection`
+
+  const checkLineToBarGraph = () => {
+    return isConvertLineToBarGraph(config.visualizationType, filteredData, config.allowLineToBarGraph)
+  }
 
   const reloadURLData = async () => {
     if (config.dataUrl) {
@@ -160,7 +176,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       if (data) {
         setStateData(data)
         setExcludedData(data)
-        setFilteredData(filterData(config.filters, data))
+        setFilteredData(filterVizData(config.filters, data))
       }
     }
   }
@@ -240,12 +256,14 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     }
     if (undefined === newConfig.table.show) newConfig.table.show = !isDashboard
 
-    newConfig.series.map(series => {
-      if (!series.tooltip) series.tooltip = true
+    newConfig.series.forEach(series => {
+      if (series.tooltip === undefined || series.tooltip === null) {
+        series.tooltip = true
+      }
       if (!series.axis) series.axis = 'Left'
     })
 
-    if (!newConfig.data && data) {
+    if (data) {
       newConfig.data = data
     }
 
@@ -306,17 +324,15 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
         newConfig.filters[index].values = filterValues
         // Initial filter should be active
 
-        newConfig.filters[index].active = newConfig.filters[index].active || filterValues[0]
+        newConfig.filters[index].active = !newConfig.filters[index].active || filterValues.indexOf(newConfig.filters[index].active) === -1 ? filterValues[0] : newConfig.filters[index].active
         newConfig.filters[index].filterStyle = newConfig.filters[index].filterStyle ? newConfig.filters[index].filterStyle : 'dropdown'
       })
-      currentData = filterData(newConfig.filters, newExcludedData)
+      currentData = filterVizData(newConfig.filters, newExcludedData)
       setFilteredData(currentData)
     }
 
-    if (newConfig.xAxis.type === 'date-time' && newConfig.barThickness > 0.1) {
-      newConfig.barThickness = 0.035
-    } else if (newConfig.xAxis.type !== 'date-time' && newConfig.barThickness < 0.1) {
-      newConfig.barThickness = 0.35
+    if (newConfig.xAxis.type === 'date-time' && config.orientation === 'horizontal') {
+      newConfig.xAxis.type = 'date'
     }
 
     //Enforce default values that need to be calculated at runtime
@@ -481,7 +497,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
       newConfig.runtime.horizontal = false
       newConfig.orientation = 'horizontal'
-    } else if (['Box Plot', 'Scatter Plot', 'Area Chart', 'Line', 'Forecasting'].includes(newConfig.visualizationType)) {
+    } else if (['Box Plot', 'Scatter Plot', 'Area Chart', 'Line', 'Forecasting'].includes(newConfig.visualizationType) && !checkLineToBarGraph()) {
       newConfig.runtime.xAxis = newConfig.xAxis
       newConfig.runtime.yAxis = newConfig.yAxis
       newConfig.runtime.horizontal = false
@@ -622,14 +638,14 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
         let configCopy = { ...config }
         delete configCopy['filters']
         setConfig(configCopy)
-        setFilteredData(filterData(externalFilters, excludedData))
+        setFilteredData(filterVizData(externalFilters, excludedData))
       }
     }
 
     if (externalFilters && externalFilters.length > 0 && externalFilters.length > 0 && externalFilters[0].hasOwnProperty('active')) {
       let newConfigHere = { ...config, filters: externalFilters }
       setConfig(newConfigHere)
-      setFilteredData(filterData(externalFilters, excludedData))
+      setFilteredData(filterVizData(externalFilters, excludedData))
     }
   }, [externalFilters]) // eslint-disable-line
 
@@ -749,7 +765,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   }
 
   // function calculates the width of given text and its font-size
-  function getTextWidth(text, font) {
+  function getTextWidth(text: string, font: string): number | undefined {
     const canvas = document.createElement('canvas')
     const context = canvas.getContext('2d')
     if (!context) {
@@ -907,7 +923,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   }
 
   // Select appropriate chart type
-  const chartComponents = {
+  const ChartComponents = {
     'Paired Bar': <LinearChart />,
     Forecasting: <LinearChart />,
     Bar: <LinearChart />,
@@ -1101,17 +1117,33 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   // Prevent render if loading
   let body = <Loading />
 
+  const makeClassName = string => {
+    if (!string || !string.toLowerCase) return
+    return string.toLowerCase().replaceAll(/ /g, '-')
+  }
+
   const getChartWrapperClasses = () => {
+    const isLegendOnBottom = legend?.position === 'bottom' || ['sm', 'xs', 'xxs'].includes(currentViewport)
     const classes = ['chart-container', 'p-relative']
-    if (config.legend.position === 'bottom') classes.push('bottom')
-    if (config.legend.hide) classes.push('legend-hidden')
+    if (config.legend?.position === 'bottom') classes.push('bottom')
+    if (config.legend?.hide) classes.push('legend-hidden')
     if (lineDatapointClass) classes.push(lineDatapointClass)
     if (!config.barHasBorder) classes.push('chart-bar--no-border')
-    if (isDebug) classes.push('debug')
+    if (config.brush?.active && dashboardConfig?.type === 'dashboard' && (!isLegendOnBottom || config.legend.hide)) classes.push('dashboard-brush')
     classes.push(...contentClasses)
     return classes
   }
 
+  const getChartSubTextClasses = () => {
+    const classes = ['subtext ']
+    const isLegendOnBottom = legend?.position === 'bottom' || ['sm', 'xs', 'xxs'].includes(currentViewport)
+
+    if (config.isResponsiveTicks) classes.push('subtext--responsive-ticks ')
+    if (config.brush?.active && !isLegendOnBottom) classes.push('subtext--brush-active ')
+    if (config.brush?.active && config.legend.hide) classes.push('subtext--brush-active ')
+    return classes
+  }
+
   if (!loading) {
     const tableLink = (
       <a href={`#data-table-${config.dataKey}`} className='margin-left-href'>
@@ -1125,23 +1157,28 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
           {config.newViz && <Confirm />}
           {undefined === config.newViz && isEditor && config.runtime && config.runtime?.editorErrorMessage && <Error />}
           {!missingRequiredSections() && !config.newViz && (
-            <div className='cdc-chart-inner-container cove-component__content' aria-label={handleChartAriaLabels(config)} tabIndex={0}>
+            <div className={`cdc-chart-inner-container cove-component__content type-${makeClassName(config.visualizationType)}`} aria-label={handleChartAriaLabels(config)} tabIndex={0}>
               <Title showTitle={config.showTitle} isDashboard={isDashboard} title={title} superTitle={config.superTitle} classes={['chart-title', `${config.theme}`, 'cove-component__header']} style={undefined} />
 
               {/* Filters */}
-              {config.filters && !externalFilters && config.visualizationType !== 'Spark Line' && <Filters config={config} setConfig={setConfig} setFilteredData={setFilteredData} filteredData={filteredData} excludedData={excludedData} filterData={filterData} dimensions={dimensions} />}
-              <SkipTo skipId={handleChartTabbing} skipMessage='Skip Over Chart Container' />
+              {config.filters && !externalFilters && config.visualizationType !== 'Spark Line' && <Filters config={config} setConfig={setConfig} setFilteredData={setFilteredData} filteredData={filteredData} excludedData={excludedData} filterData={filterVizData} dimensions={dimensions} />}
+              <SkipTo skipId={handleChartTabbing(config, legendId)} skipMessage='Skip Over Chart Container' />
+              {config.annotations?.length > 0 && <SkipTo skipId={handleChartTabbing(config, legendId)} skipMessage={`Skip over annotations`} key={`skip-annotations`} />}
+
               {/* Visualization */}
               {config?.introText && config.visualizationType !== 'Spark Line' && <section className='introText'>{parse(config.introText)}</section>}
 
-              <div style={{ marginBottom: computeMarginBottom(config, legend, currentViewport) }} className={getChartWrapperClasses().join(' ')}>
-                {/* All charts except sparkline */}
-                {config.visualizationType !== 'Spark Line' && chartComponents[config.visualizationType]}
+              <div className={getChartWrapperClasses().join(' ')}>
+                {/* All charts except line and sparkline */}
+                {config.visualizationType !== 'Spark Line' && config.visualizationType !== 'Line' && ChartComponents[config.visualizationType]}
+
+                {/* Line Chart */}
+                {config.visualizationType === 'Line' && (checkLineToBarGraph() ? ChartComponents['Bar'] : ChartComponents['Line'])}
 
                 {/* Sparkline */}
                 {config.visualizationType === 'Spark Line' && (
                   <>
-                    <Filters config={config} setConfig={setConfig} setFilteredData={setFilteredData} filteredData={filteredData} excludedData={excludedData} filterData={filterData} dimensions={dimensions} />
+                    <Filters config={config} setConfig={setConfig} setFilteredData={setFilteredData} filteredData={filteredData} excludedData={excludedData} filterData={filterVizData} dimensions={dimensions} />
                     {config?.introText && (
                       <section className='introText' style={{ padding: '0px 0 35px' }}>
                         {parse(config.introText)}
@@ -1159,26 +1196,26 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
                 )}
                 {/* Sankey */}
                 {config.visualizationType === 'Sankey' && <ParentSize aria-hidden='true'>{parent => <SankeyChart runtime={config.runtime} width={parent.width} height={parent.height} />}</ParentSize>}
-                {!config.legend.hide && config.visualizationType !== 'Spark Line' && config.visualizationType !== 'Sankey' && <Legend ref={legendRef} />}
+                {!config.legend.hide && config.visualizationType !== 'Spark Line' && config.visualizationType !== 'Sankey' && <Legend ref={legendRef} skipId={handleChartTabbing(config, legendId)} />}
               </div>
               {/* Link */}
               {isDashboard && config.table && config.table.show && config.table.showDataTableLink ? tableLink : link && link}
-
               {/* Description */}
-              {description && config.visualizationType !== 'Spark Line' && <div className={'column ' + config.isResponsiveTicks ? 'subtext--responsive-ticks' : 'subtext'}>{parse(description)}</div>}
+
+              {description && config.visualizationType !== 'Spark Line' && <div className={getChartSubTextClasses().join('')}>{parse(description)}</div>}
+              {false && <Annotation.List />}
 
               {/* buttons */}
               <MediaControls.Section classes={['download-buttons']}>
                 {config.table.showDownloadImgButton && <MediaControls.Button text='Download Image' title='Download Chart as Image' type='image' state={config} elementToCapture={imageId} />}
                 {config.table.showDownloadPdfButton && <MediaControls.Button text='Download PDF' title='Download Chart as PDF' type='pdf' state={config} elementToCapture={imageId} />}
               </MediaControls.Section>
-
               {/* Data Table */}
               {((config.xAxis.dataKey && config.table.show && config.visualizationType !== 'Spark Line' && config.visualizationType !== 'Sankey') || (config.visualizationType === 'Sankey' && config.table.show)) && (
                 <DataTable
                   config={config}
-                  rawData={config.visualizationType === 'Sankey' ? config?.data?.[0]?.tableData : config.table.customTableConfig ? filterData(config.filters, config.data) : config.data}
-                  runtimeData={config.visualizationType === 'Sankey' ? config?.data?.[0]?.tableData : transform.applySuppression(filteredData || excludedData, config.suppressedData)}
+                  rawData={config.visualizationType === 'Sankey' ? config?.data?.[0]?.tableData : config.table.customTableConfig ? filterVizData(config.filters, config.data) : config.data}
+                  runtimeData={config.visualizationType === 'Sankey' ? config?.data?.[0]?.tableData : filteredData || excludedData}
                   expandDataTable={config.table.expanded}
                   columns={config.columns}
                   displayDataAsText={displayDataAsText}
@@ -1188,10 +1225,11 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
                   indexTitle={config.table.indexLabel}
                   vizTitle={title}
                   viewport={currentViewport}
-                  tabbingId={handleChartTabbing}
+                  tabbingId={handleChartTabbing(config, legendId)}
                   colorScale={colorScale}
                 />
               )}
+              {config?.annotations?.length > 0 && <Annotation.Dropdown />}
               {config?.footnotes && <section className='footnotes'>{parse(config.footnotes)}</section>}
               {/* show pdf or image button */}
             </div>
@@ -1207,54 +1245,60 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   const capitalize = str => {
     return str.charAt(0).toUpperCase() + str.slice(1)
   }
+
   const contextValues = {
+    brushConfig,
     capitalize,
-    computeMarginBottom,
-    getXAxisData,
-    getYAxisData,
-    config,
-    setConfig,
-    rawData: stateData ?? {},
-    excludedData: excludedData,
-    transformedData: clean(filteredData || excludedData), // do this right before passing to components
-    tableData: filteredData || excludedData, // do not clean table data
-    unfilteredData: stateData,
-    seriesHighlight,
+    clean,
+    colorPalettes,
     colorScale,
-    dimensions,
+    config,
     currentViewport,
-    parseDate,
+    dashboardConfig,
+    debugSvg: isDebug,
+    dimensions,
+    dynamicLegendItems,
+    excludedData: excludedData,
     formatDate,
-    formatTooltipsDate,
     formatNumber,
-    loading,
-    updateConfig,
-    colorPalettes,
-    isDashboard,
-    setParentConfig,
-    missingRequiredSections,
-    setEditing,
-    setFilteredData,
+    formatTooltipsDate,
+    getTextWidth,
+    getXAxisData,
+    getYAxisData,
     handleChartAriaLabels,
+    handleLineType,
     highlight,
     highlightReset,
-    legend,
-    setSeriesHighlight,
-    dynamicLegendItems,
-    setDynamicLegendItems,
-    filterData,
     imageId,
-    handleLineType,
-    lineOptions,
-    isNumber,
-    getTextWidth,
-    twoColorPalette,
-    isEditor,
+    isDashboard,
+    isLegendBottom: legend?.position === 'bottom' || ['sm', 'xs', 'xxs'].includes(currentViewport),
     isDebug,
+    isDraggingAnnotation,
+    handleDragStateChange,
+    isEditor,
+    isNumber,
+    legend,
+    lineOptions,
+    loading,
+    missingRequiredSections,
+    outerContainerRef,
+    parseDate,
+    rawData: stateData ?? {},
+    seriesHighlight,
+    setBrushConfig,
+    setConfig,
+    setDynamicLegendItems,
+    setEditing,
+    setFilteredData,
+    setParentConfig,
+    setSeriesHighlight,
     setSharedFilter,
     setSharedFilterValue,
-    dashboardConfig,
-    debugSvg: isDebug
+    tableData: filteredData || excludedData, // do not clean table data
+    transformedData: clean(filteredData || excludedData), // do this right before passing to components
+    twoColorPalette,
+    unfilteredData: stateData,
+    updateConfig
   }
 
   return (

package/src/_stories/Chart.stories.tsx

@@ -1,6 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react'
+import SuppressedConfig from './_mock/bar-chart-suppressed.json'
 
 import Chart from '../CdcChart'
+import lineChartTwoPointsRegressionTest from './_mock/line_chart_two_points_regression_test.json'
+import lineChartTwoPointsNewChart from './_mock/line_chart_two_points_new_chart.json'
+import lollipop from './_mock/lollipop.json'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart',
@@ -9,179 +13,30 @@ const meta: Meta<typeof Chart> = {
 
 type Story = StoryObj<typeof Chart>
 
+export const line_Chart_Two_Points_Regression_Test: Story = {
+  args: {
+    config: lineChartTwoPointsRegressionTest,
+    isEditor: false
+  }
+}
+export const line_Chart_Two_Points_New_Chart: Story = {
+  args: {
+    config: lineChartTwoPointsNewChart,
+    isEditor: false
+  }
+}
+
 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
-    }
+    config: lollipop,
+    isEditor: false
+  }
+}
+
+export const Suppression: Story = {
+  args: {
+    config: SuppressedConfig,
+    isEditor: false
   }
 }
 

package/src/_stories/ChartAnnotation.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react'
+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'
+import Chart from '../CdcChart'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Annotation',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const Chart_Annotation_Categorical: Story = {
+  args: {
+    config: annotationConfig
+  }
+}
+
+export const Chart_Annotation_Date_Linear: Story = {
+  args: {
+    config: annotationConfigDateLinear
+  }
+}
+
+export const Chart_Annotation_Date_Time: Story = {
+  args: {
+    config: annotationConfigDateTime
+  }
+}
+
+export default meta