Dev (#1431)

* [DEV-8444] Sankey > Update Tooltips and Types (#1348) * [DEV-8445] 4.24.6 > Move chart height selection up in the editor (#1351) * [DEV-8312] Remove Data Designer Steps for Sankey (#1352) * [maps] organize helper functions and add tests (#1377) * [maps] organize helper functions and add tests * [maps] update test locations * bug: [dev-8575] ardi multi viz (#1374) * bug dev-8575 ardi multi viz * refactored from comments * Testing pipeline (#1345) * unit testing pipeline * removed matrix strategy * enhancement: [DEV-8191] multi select and pivot table updates (#1363) * enhancement dev-8191 multi select and pivot table updates * removed pivot test from filters since filter doesnt do pivot now * [DEV-8234] Fix Date/category axis date orders (#1381) * [dev] add pr template back in * [dev] test casing * [dev] Storybook > resolve deploy issue * [hotfix] Fixes Crash When Switching from Combo to Bar (#1387) * [DEV-8576] Update tooltip for zero & null values (#1384) * [DEV-8576] Update tooltip for zero & null values * [DEV-8576] Update function --------- Co-authored-by: Adam Doe <[email protected]> * [hotfix] storybook and testing pipeline updates (#1394) * [process-testing] process testing * [process-testing] bump * [process-testing] remove react testing library test * [process-testing] remove comment * added svg fix --------- Co-authored-by: Lacey <[email protected]> * [DEV-7286] 4.24.7 > Inclusive Quantile Legend Opt In (#1353) * [DEV-7286] 4.24.6 > Inclusive Quantile Legend Opt In * [DEV-7286] Update logic and default values * [DEV-7286] update coveUpdateWorker logic for 4.24.7 * [DEV-7286] Review Feedback - Use lodash for unique values - Reduce file size by removing large data files - Compartmentalize functions for 4.24.7 updates * [DEV-7286] Remove duplicate example file * [DEV-8667] Add filled circles to line effect (#1385) * [DEV-8667] Add Filled Circles to Line Effect * [DEV-8667] Update tooltip text * [DEV-8667] Update style * [DEV-8667] update const --------- Co-authored-by: Adam Doe <[email protected]> * [DEV-8445] update chart height tooltip (#1395) * [DEV-8445] 4.24.6 > Move chart height selection up in the editor * Fix for County Tooltip Position (#1388) * [DEV-8445] Add chart height tooltip --------- Co-authored-by: mpallansch <[email protected]> * Feature/dev 8312 (#1396) * [DEV-8312] Remove Data Designer Steps for Sankey * [DEV-8312] remove columns panel on sankey diagrams * [dev] 4.24.7 > remove bar borders on line charts * [DEV-8312] add configure button to sankey setup steps (#1398) * [DEV-8312] Remove Data Designer Steps for Sankey * [DEV-8312] remove columns panel on sankey diagrams * [DEV-8312] add configure your data button to sankey * [DEV-8622] 4.24.7 > remove unnecessary fields on sankey diagrams (#1399) * feature: [dev-8574] Advanced Editor updates (#1372) * feature dev-8574 advanced editor updates * added fixes * fixed imports in svg imports * [DEV-7795] Responsive Annotations (#1397) * [annotations] annotation start * [annotations] continue working on annotations * [annotations] add responsive options * [annotations] add scaling for annotations in * [annotations] 4.24.4 > Annotations * [annotations] resolve drag and drop * [annotations] 4.24.4 > Annotation Scaling Updates * [annotations] working on annotations * [annotations] continue working on annotations * [annotations] add scaling for annotations in * [annotations] annotations working * [annotations] annotations working * [annotations] continue work on annotations * [annotations] 4.24.4 > Annotation scaling on date/time * [annotations] working on markers * [annotations] 4.24.5 > Annotation Updates * [annotations] 4.24.5 > stop annotation from breaking on new. * [annotations] update style of annotation * [annotations] add bend * [annotations] continue work to move * [annotations] 4.24.5: Scaling for mobile labels * [annotations] still working on annotation scaling * [annotations] continue work on label positioning * [annotations] scaling working * [annotations] start adding in snapTo logic * [annotations] 4.24.5 > Annotations without snap to resolved * [annotations] center annotation when adding * [annotations] continued work on annotations * [annotations] Start scaffolding storybook items * [annotations] add examples * [annotations] add examples * [annotations] delete files * [annotations] cleanup * [annotations] 4.24.5 > Annotation Feature * [annotations-maps] map anontations * [annotations-maps] continue work on map annotations * [annotations-maps] 4.24.5 > Map Annotation Updates * [annotations] test * [annotations] Adjust width based on true svg dimensions * [annotations] updates for line type when none * [annotations] Annotation Updates for curved lines * [annotations] add check for associate series * [annotations] add bezier * [annotations-maps] stash * [annotations-maps] continue working on annotation scaling * [annotations-maps] organization updates * [annotations-maps] 4.24.6 > Annotations * [annotations-maps] remove connection location * [annotations-maps] Annotations > handle tabbing for annotations * [annotations-maps] Start work on annotation list dropdown * [annotations-maps] test * [annotations-maps] continued work on labels * [annotations-maps] Chart Annotation Updates * [annotations-maps] continue work on annotations * [annotations-maps] improve annotation dragging status * [annotations-maps] update map annotations drag state * [annotations-maps] testing locations * [annotations-maps] 4.24.7 > annotation updateS * [DEV-7795] part of merge * [DEV-7795] remove bad import * [DEV-7795] 4.24.7 > updates for annotations * [DEV-7795] update saved dimensions when screen size is changed * [DEV-7795] 4.24.6 > annotation update * Attempts to Fix Positioning * [DEV-7795-matt] Annotation Panel Changes on Charts --------- Co-authored-by: mpallansch <[email protected]> * [DEV-4215] add brush functionality (#1386) * [DEV-4215f] Add d3 Brush * [DEV-4215f] Update brush * [DEV-4215f] Add brush margin * [DEV-4215f] remove redundant file * [DEV-4215f] update rect element * [DEV-4215f] update text element * [DEV-4215f] Fix small errors --------- Co-authored-by: Adam Doe <[email protected]> * [dev] fix svg paths * [dev] Revert "[DEV-4215] add brush functionality (#1386)" This reverts commit c7e633f. * [dev] Revert "feature: [dev-8574] Advanced Editor updates (#1372)" This reverts commit 56d002e. * Feature [dev-8574] advanced editor updates (#1401) * feature dev-8574 advanced editor updates * added fixes * fixed imports in svg imports * fixed csv imports * [dev] Revert "[DEV-8576] Update tooltip for zero & null values (#1384) * [DEV-8727] Update missing data label (#1402) * Bug: [Dev-8568] COVE: Dashboard Filter Values Not Updating From Data Change (#1370) * Updates Dashboard Filters on Load of Dynamic Data * Adds Example Config * Removes Reference to Moved Function * [DEV-8669] Fix bar labels font size (#1400) * [dev] 4.24.7 > Update PR Template * [dev] fix typos * [DEV-8595] Add guards for sankey data (#1405) * [DEV-8397] Fix CDC logo overlap territories (#1404) * [DEV-8121] update table links font sizes (#1403) * [DEV-8767] Fix formatter to handle strings properly (#1407) * Feature: [dev-8409] dashboard filter refactor (#1390) * feature dev-8490 dashboard filter refactor * fixed conflicts * added select from existing * added fix for delete logic, and added fix for showMissingDataCellValue * [DEV-8698] Applies Filters on MultiDash Switch (#1389) * Applies Filters on MultiDash Switch * Combines UseEffects * [DEV-7763] Expand Collapse Buttons (#1360) * fix [dev-8409] dashboard filters - changeFilterActive (#1410) * [DEV-6410d] Add single series tooltip for Area and Line chart (#1406) * [DEV-6410d] Add single series tooltip for Area and Line chart * [DEV-6410d] update tooltips * [DEV-6410d] Update function declaration * Removes Extra Code From Merge Issue (#1409) * Removes Extra Code From Merge Issue * Name Change * [DEV-8121a] Update font size (#1413) * Feature/dev 8796 (#1411) * [horizontal-labels] Fix labels issue * [horizontal-labels] Update labels for bars * [horizontal-labels] Update text padding * [DEV-8796a] Add new test file (#1415) * [dev] fix pie chart * [dev] Fixes tooltip issue with forecasting charts * [DEV-8821] fixes emergency dept visits page (#1417) * [DEV-8832] add checks for data in filterVizData.ts (#1418) * [dev] marker updates for annotations * [dev] 4.24.7 > Annotation dropdown classes fix * [dev] 4.24.7 hotfixes * fix dev-8409 fixed filter preview styling and typo (#1420) Co-authored-by: william Lacey <[email protected]> * [dev] hotfix > annotation indexes * [DEV-8846] Handle null values properly in table & tooltip (#1423) * [DEV-8846] Handle null values properly in table & tooltip * [DEV-8846] Update test case * [dev] resolve geocode map * added multi-tab fix (#1424) * Dev 8698 and dev 8568 fixes (#1425) * Fixes Multi-Dashboard Crash * Fixes Chart Filter Not Updating From Data * Fix: [dev-8574] advanced editor (#1428) * fix dev-8574 for large files in advanced editor * removed comment * fix/ dev-8574 needed another field collapsed (#1429) --------- Co-authored-by: Josh Lacey <[email protected]> Co-authored-by: Atash3000 <[email protected]> Co-authored-by: mpallansch <[email protected]> Co-authored-by: Lacey <[email protected]> Co-authored-by: Matt-DiPaolo <[email protected]> Co-authored-by: william Lacey <[email protected]>
CDCgov · Jul 30, 2024 · 9dfaed0 · 9dfaed0
1 parent 38fb8a6
commit 9dfaed0
Show file tree

Hide file tree

Showing 179 changed files with 6,288 additions and 2,779 deletions.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -0,0 +1,23 @@
+## [Replace With Ticket Number]
+
+<!-- Provide a brief description of the changes made in this PR -->
+
+## Testing Steps
+
+<!-- Provide testing steps and reference storybook stories if necessary -->
+<!-- Add applicable configs to JIRA ticket for testers-->
+
+## Self Review
+
+- I have added testing steps for reviewers
+- I have commented my code, particularly in hard-to-understand areas
+- My changes generate no new warnings
+- New and existing unit tests are passing
+
+## Screenshots (if applicable)
+
+<!-- Add screenshots to help explain the changes made in this PR -->
+
+## Additional Notes
+
+<!-- Add any additional notes about this PR -->
diff --git a/.github/workflows/unit-test.yml b/.github/workflows/unit-test.yml
@@ -0,0 +1,22 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Unit Test CI
+
+on:
+ pull_request:
+ branches: ['dev']
+
+jobs:
+ build:
+ runs-on: ubuntu-latest
+
+ steps:
+ - uses: actions/checkout@v4
+ - name: Use Node.js 18.x
+ uses: actions/setup-node@v3
+ with:
+ node-version: 18.x
+ cache: 'npm'
+ - run: npx yarn install
+ - run: npm run test --workspaces
diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx
@@ -1,4 +1,5 @@
 import { previewTheme } from './coveSbThemes'
+import * as React from 'react'
 
 export const parameters = {
  options: {

diff --git a/lerna.json b/lerna.json
@@ -1,5 +1,6 @@
 {
  "$schema": "node_modules/lerna/schemas/lerna-schema.json",
  "npmClient": "yarn",
- "version": "independent"
+ "version": "independent",
+ "useWorkspaces": true
 }
diff --git a/package.json b/package.json
@@ -104,9 +104,10 @@
  "@visx/legend": "^3.0.0",
  "@visx/pattern": "^3.0.0",
  "@visx/responsive": "^2.10.0",
- "@vitest/coverage-v8": "^1.2.2"
+ "@vitest/coverage-v8": "^1.2.2",
+ "dompurify": "^3.1.5"
  },
  "resolutions": {
  "jackspeak": "2.1.1"
  }
-}
+}
diff --git a/packages/chart/examples/feature/annotations/index.json b/packages/chart/examples/feature/annotations/index.json
@@ -4,6 +4,7 @@
  "text": "New Annotation",
  "snapToNearestPoint": false,
  "fontSize": 16,
+ "bezier": 10,
  "show": {
  "desktop": true,
  "tablet": true,
@@ -21,26 +22,26 @@
  "vertical": false,
  "horizontal": false
  },
- "connectionType": "line",
  "marker": "arrow",
  "edit": {
  "subject": true,
  "label": true
  },
  "seriesKey": "",
- "x": 356.69140625,
- "y": 244.7265625,
+ "x": 50,
+ "y": 186.7265625,
  "xKey": 1458025200000,
- "dx": -50,
- "dy": -41,
- "opacity": 100,
+ "dx": -46,
+ "dy": -50,
+ "opacity": "100",
  "savedDimensions": [
- 761.39,
- 559.1875
+ 498.59,
+ 560.1875
  ],
- "originalX": 356.69140625,
- "originalDX": -50,
- "originalY": 244.7265625
+ "connectionType": "line",
+ "originalX": 295.8788908060575,
+ "originalDX": -46,
+ "originalY": 186.7265625
  }
  ],
  "type": "chart",
@@ -66,7 +67,11 @@
  "tipRounding": "top",
  "isResponsiveTicks": false,
  "general": {
- "showDownloadButton": false
+ "annotationDropdownText": "Annotations",
+ "showDownloadButton": false,
+ "showMissingDataLabel": true,
+ "showSuppressedSymbol": true,
+ "showZeroValueDataLabel": true
  },
  "padding": {
  "left": 5,
@@ -98,6 +103,8 @@
  "scalePadding": 10,
  "tickRotation": 0,
  "anchors": [],
+ "shoMissingDataLabel": true,
+ "showMissingDataLine": true,
  "label": "Y-Axis Example Label"
  },
  "boxplot": {
@@ -162,8 +169,6 @@
  "axisPadding": 0,
  "target": 0,
  "maxTickRotation": 0,
- "showSuppressedSymbol": true,
- "showSuppressedLine": true,
  "dataKey": "Date",
  "label": "X-Axis Example Label",
  "dateParseFormat": "%m/%d/%Y",
@@ -183,6 +188,8 @@
  "download": true,
  "showVertical": false,
  "dateDisplayFormat": "",
+ "showMissingDataLabel": true,
+ "showSuppressedSymbol": true,
  "show": true
  },
  "orientation": "vertical",

diff --git a/packages/chart/index.html b/packages/chart/index.html
@@ -46,7 +46,8 @@
  -->
 
  <!-- GENERIC CHART TYPES -->
- <!-- <div class="react-container" data-config="/examples/feature/annotations/index.json"></div> -->
+ <!-- <div class="react-container" data-config="/examples/dev-8332.json"></div> -->
+ <div class="react-container" data-config="/examples/feature/annotations/index.json"></div>
  <!-- <div class="react-container" data-config="/examples/feature/filters/url-filter.json"></div> -->
  <!-- <div class="react-container" data-config="/examples/feature/bar/additional-column-tooltip.json"></div> -->
  <!-- <div class="react-container" data-config="https://cdc.gov/poxvirus/mpox/modules/data-viz/mpx-trends_1.json"></div> -->
@@ -61,10 +62,10 @@
  <!-- <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=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/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/combo-forecasting.json"></div>
  <!-- <div class="react-container" data-config="/examples/feature/forecasting/effective_reproduction.json"></div> -->
  <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-date.json"></div> -->
- <div class="react-container" data-config="/examples/feature/area/area-chart-category.json"></div>
+ <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-category.json"></div> -->
  <!-- <div class="react-container" data-config="/examples/feature/scatterplot/scatterplot.json"></div> -->
  <!-- <div class="react-container" data-config="/examples/feature/deviation/planet-deviation-config.json"></div> -->
  <!-- <div class="react-container" data-config="/examples/feature/boxplot/boxplot.json"></div> -->
@@ -135,15 +136,15 @@
  <!-- GENERIC CHART TYPES -->
  <!-- <div class="react-container" data-config="/examples/gallery/paired-bar/paired-bar-chart.json"></div> -->
  <!-- <div class="react-container" data-config="/examples/feature/line/line-chart.json"></div> -->
- <div class="react-container" data-config="/examples/feature/annotations/index.json"></div>
+ <!-- <div class="react-container" data-config="/examples/feature/annotations/index.json"></div> -->
 
  <!-- HORIZONTAL BAR CHARTS -->
  <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-bar-chart-with-numbers-on-bar.json"></div> -->
  <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-bar-chart.json"></div> -->
  <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-stacked.json"></div> -->
 
  <!-- 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/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-confidence.json"></div> -->

diff --git a/packages/chart/package.json b/packages/chart/package.json
@@ -11,8 +11,9 @@
  "preview": "vite preview",
  "graph": "nx graph",
  "prepublishOnly": "lerna run --scope @cdc/chart build",
- "test": "vitest watch --reporter verbose",
- "test:ui": "vitest --ui"
+ "test": "vitest run --reporter verbose",
+ "test-watch": "vitest watch --reporter verbose",
+ "test-watch:ui": "vitest --ui"
  },
  "repository": {
  "type": "git",

diff --git a/packages/chart/src/CdcChart.tsx b/packages/chart/src/CdcChart.tsx
@@ -29,9 +29,9 @@ 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'
@@ -63,6 +63,7 @@ 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()
@@ -78,6 +79,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
  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({
@@ -90,6 +92,10 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
  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
@@ -104,10 +110,9 @@ 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, filterData, config.allowLineToBarGraph)
+ return isConvertLineToBarGraph(config.visualizationType, filteredData, config.allowLineToBarGraph)
  }
 
  const reloadURLData = async () => {
@@ -171,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))
  }
  }
  }
@@ -258,7 +263,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
  if (!series.axis) series.axis = 'Left'
  })
 
- if (!newConfig.data && data) {
+ if (data) {
  newConfig.data = data
  }
 
@@ -319,10 +324,10 @@ 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)
  }
 
@@ -633,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
 
@@ -1156,8 +1161,10 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
  <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>}
 
@@ -1171,7 +1178,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
  {/* 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)}
@@ -1189,7 +1196,7 @@ 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}
@@ -1207,7 +1214,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
  {((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}
+ 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}
@@ -1218,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>
@@ -1251,7 +1259,6 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
  dimensions,
  dynamicLegendItems,
  excludedData: excludedData,
- filterData,
  formatDate,
  formatNumber,
  formatTooltipsDate,
@@ -1264,7 +1271,10 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
  highlightReset,
  imageId,
  isDashboard,
+ isLegendBottom: legend?.position === 'bottom' || ['sm', 'xs', 'xxs'].includes(currentViewport),
  isDebug,
+ isDraggingAnnotation,
+ handleDragStateChange,
  isEditor,
  isNumber,
  legend,

diff --git a/packages/chart/src/_stories/_mock/annotation_category_mock.json b/packages/chart/src/_stories/_mock/annotation_category_mock.json
@@ -470,4 +470,4 @@
  ],
  "version": "4.24.3",
  "dynamicMarginTop": 0
-}
+}