@cdc/chart 4.23.5 → 4.23.6

package/examples/feature/forecasting/index.json

@@ -0,0 +1,203 @@
+{
+  "type": "chart",
+  "title": "Forecasting Chart Example",
+  "showTitle": true,
+  "theme": "theme-blue",
+  "animate": true,
+  "fontSize": "medium",
+  "lineDatapointStyle": "hover",
+  "barHasBorder": "false",
+  "isLollipopChart": false,
+  "lollipopShape": "circle",
+  "lollipopColorStyle": "two-tone",
+  "visualizationSubType": "regular",
+  "barStyle": "",
+  "roundingStyle": "standard",
+  "tipRounding": "top",
+  "padding": {
+    "left": 0,
+    "right": 0
+  },
+  "yAxis": {
+    "hideAxis": false,
+    "displayNumbersOnBar": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": "75",
+    "gridLines": false,
+    "enablePadding": false,
+    "min": "0",
+    "max": "900",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "rightHideAxis": false,
+    "rightAxisSize": 50,
+    "rightLabel": "",
+    "rightLabelOffsetSize": 0,
+    "rightAxisLabelColor": "#333",
+    "rightAxisTickLabelColor": "#333",
+    "rightAxisTickColor": "#333",
+    "numTicks": "",
+    "axisPadding": 0,
+    "tickRotation": 0,
+    "anchors": [],
+    "label": "Cases by Date of Report"
+  },
+  "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",
+      "count": "Count",
+      "outliers": "Outliers",
+      "values": "Values"
+    }
+  },
+  "topAxis": {
+    "hasLine": true
+  },
+  "isLegendValue": false,
+  "barThickness": 0.35,
+  "barHeight": 25,
+  "barSpace": 15,
+  "heights": {
+    "vertical": 300,
+    "horizontal": 750
+  },
+  "xAxis": {
+    "type": "date",
+    "showTargetLabel": true,
+    "targetLabel": "Target",
+    "hideAxis": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": 75,
+    "tickRotation": 30,
+    "min": "",
+    "max": "",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "numTicks": "",
+    "labelOffset": 65,
+    "axisPadding": 0,
+    "target": 0,
+    "anchors": [
+      {
+        "value": "10/19/2022",
+        "lineStyle": "dashed-md"
+      }
+    ],
+    "label": "",
+    "dataKey": "date",
+    "dateParseFormat": "%m/%d/%Y",
+    "dateDisplayFormat": "%m/%d/%Y"
+  },
+  "table": {
+    "label": "Data Table",
+    "expanded": false,
+    "limitHeight": false,
+    "height": "",
+    "caption": "",
+    "showDownloadUrl": false,
+    "showDataTableLink": true,
+    "show": true
+  },
+  "orientation": "vertical",
+  "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": false
+  },
+  "exclusions": {
+    "active": false,
+    "keys": []
+  },
+  "palette": "sequential-green",
+  "isPaletteReversed": false,
+  "twoColor": {
+    "palette": "monochrome-1",
+    "isPaletteReversed": false
+  },
+  "labels": false,
+  "dataFormat": {
+    "commas": false,
+    "prefix": "",
+    "suffix": "",
+    "abbreviated": false,
+    "bottomSuffix": "",
+    "bottomPrefix": "",
+    "bottomAbbreviated": false,
+    "roundTo": "0"
+  },
+  "confidenceKeys": {},
+  "visual": {
+    "border": true,
+    "accent": true,
+    "background": true
+  },
+  "filterBehavior": "Filter Change",
+  "forecastingChart": {
+    "showBars": false,
+    "barColumn": "confirm",
+    "barColor": "#918e90",
+    "confidenceIntervals": [
+      {
+        "low": "lower_20",
+        "high": "upper_20"
+      },
+      {
+        "low": "lower_50",
+        "high": "upper_50"
+      },
+      {
+        "low": "lower_90",
+        "high": "upper_90"
+      }
+    ],
+    "stages": "type",
+    "colors": [
+      "sequential-greenreverse",
+      "sequential-orange-(MPX)reverse",
+      "sequential-blue-2-(MPX)reverse"
+    ],
+    "groups": [
+      "estimate",
+      "estimate based on partial data",
+      "forecast"
+    ],
+    "showBarColumn": true
+  },
+  "dataUrl": "./examples/feature/forecasting/case_date_example.csv",
+  "animateReplay": true,
+  "visualizationType": "Forecasting",
+  "series": []
+}

package/examples/feature/line/line-chart.json

@@ -68,7 +68,7 @@
     },
     {
       "Date": "4/15/2016",
-      "Data 1": "120",
+      "Data 1": "",
       "Data 2": "160",
       "Data 3": "230",
       "Data 4": "180",

package/examples/gallery/line/line.json

@@ -1 +1,173 @@
-{"type":"chart","title":"Example Line Chart","theme":"theme-green","animate":true,"fontSize":"medium","lineDatapointStyle":"hover","barHasBorder":"false","isLollipopChart":false,"lollipopShape":"circle","lollipopColorStyle":"two-tone","visualizationSubType":"regular","barStyle":"","roundingStyle":"standard","tipRounding":"top","padding":{"left":5,"right":5},"yAxis":{"hideAxis":false,"displayNumbersOnBar":false,"hideLabel":false,"hideTicks":false,"size":"75","gridLines":false,"min":"","max":"","label":"Y-Axis Example Label","numTicks":"9"},"barThickness":0.35,"barHeight":25,"height":"375","xAxis":{"type":"date","hideAxis":false,"hideLabel":false,"hideTicks":false,"size":"77","tickRotation":"25","min":"","max":"","dataKey":"Date","label":"X-Axis Example Label","dateParseFormat":"%d/%m/%Y","dateDisplayFormat":"%d/%m/%Y"},"table":{"label":"Data Table","expanded":true,"limitHeight":false,"height":"","caption":"","download":true,"show":true},"orientation":"vertical","legend":{"behavior":"isolate","position":"right","colorCode":"","reverseLabelOrder":false,"description":"","dynamicLegend":false,"dynamicLegendDefaultText":"Show All","dynamicLegendItemLimit":5,"dynamicLegendItemLimitMessage":"Dynamic Legend Item Limit Hit.","dynamicLegendChartMessage":"Select Options from the Legend","label":"Type of Data"},"exclusions":{"active":false,"keys":[]},"palette":"qualitative-bold","isPaletteReversed":false,"labels":false,"dataFormat":{"commas":false,"prefix":"","suffix":""},"confidenceKeys":{},"visual":{"border":true,"accent":true,"background":true},"data":[{"Date":"1/15/2016","Data 1":"90","Data 2":"135","Data 3":"300","Data 4":"95","Data 5":"120","Data 6":"310"},{"Date":"2/15/2016","Data 1":"40","Data 2":"90","Data 3":"240","Data 4":"60","Data 5":"160","Data 6":"200"},{"Date":"3/15/2016","Data 1":"50","Data 2":"300","Data 3":"290","Data 4":"100","Data 5":"200","Data 6":"250"},{"Date":"4/15/2016","Data 1":"120","Data 2":"160","Data 3":"230","Data 4":"180","Data 5":"160","Data 6":"220"},{"Date":"5/15/2016","Data 1":"80","Data 2":"350","Data 3":"300","Data 4":"150","Data 5":"130","Data 6":"100"},{"Date":"6/15/2016","Data 1":"90","Data 2":"220","Data 3":"320","Data 4":"100","Data 5":"220","Data 6":"300"}],"visualizationType":"Line","series":[{"dataKey":"Data 1","type":"Bar"},{"dataKey":"Data 2","type":"Bar"},{"dataKey":"Data 3","type":"Bar"},{"dataKey":"Data 4","type":"Bar"},{"dataKey":"Data 5","type":"Bar"},{"dataKey":"Data 6","type":"Bar"}]}
+{
+  "type": "chart",
+  "title": "Example Line Chart",
+  "theme": "theme-green",
+  "animate": true,
+  "fontSize": "medium",
+  "lineDatapointStyle": "hover",
+  "barHasBorder": "false",
+  "isLollipopChart": false,
+  "lollipopShape": "circle",
+  "lollipopColorStyle": "two-tone",
+  "visualizationSubType": "regular",
+  "barStyle": "",
+  "roundingStyle": "standard",
+  "tipRounding": "top",
+  "padding": {
+    "left": 5,
+    "right": 5
+  },
+  "yAxis": {
+    "hideAxis": false,
+    "displayNumbersOnBar": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": "75",
+    "gridLines": false,
+    "min": "",
+    "max": "",
+    "label": "Y-Axis Example Label",
+    "numTicks": "9"
+  },
+  "barThickness": 0.35,
+  "barHeight": 25,
+  "height": "375",
+  "xAxis": {
+    "type": "date",
+    "hideAxis": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": "77",
+    "tickRotation": "25",
+    "min": "",
+    "max": "",
+    "dataKey": "Date",
+    "label": "X-Axis Example Label",
+    "dateParseFormat": "%d/%m/%Y",
+    "dateDisplayFormat": "%d/%m/%Y"
+  },
+  "table": {
+    "label": "Data Table",
+    "expanded": true,
+    "limitHeight": false,
+    "height": "",
+    "caption": "",
+    "download": true,
+    "show": true
+  },
+  "orientation": "vertical",
+  "legend": {
+    "behavior": "isolate",
+    "position": "right",
+    "colorCode": "",
+    "reverseLabelOrder": false,
+    "description": "",
+    "dynamicLegend": false,
+    "dynamicLegendDefaultText": "Show All",
+    "dynamicLegendItemLimit": 5,
+    "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
+    "dynamicLegendChartMessage": "Select Options from the Legend",
+    "label": "Type of Data"
+  },
+  "exclusions": {
+    "active": false,
+    "keys": []
+  },
+  "palette": "qualitative-bold",
+  "isPaletteReversed": false,
+  "labels": false,
+  "dataFormat": {
+    "commas": false,
+    "prefix": "",
+    "suffix": ""
+  },
+  "confidenceKeys": {},
+  "visual": {
+    "border": true,
+    "accent": true,
+    "background": true
+  },
+  "data": [
+    {
+      "Date": "1/15/2016",
+      "Data 1": "90",
+      "Data 2": "135",
+      "Data 3": "300",
+      "Data 4": "95",
+      "Data 5": "120",
+      "Data 6": "310"
+    },
+    {
+      "Date": "2/15/2016",
+      "Data 1": "40",
+      "Data 2": "90",
+      "Data 3": "240",
+      "Data 4": "60",
+      "Data 5": "160",
+      "Data 6": "200"
+    },
+    {
+      "Date": "3/15/2016",
+      "Data 1": "50",
+      "Data 2": "300",
+      "Data 3": "290",
+      "Data 4": "100",
+      "Data 5": "200",
+      "Data 6": "250"
+    },
+    {
+      "Date": "4/15/2016",
+      "Data 1": "120",
+      "Data 2": "160",
+      "Data 3": "230",
+      "Data 4": "180",
+      "Data 5": "160",
+      "Data 6": "220"
+    },
+    {
+      "Date": "5/15/2016",
+      "Data 1": "80",
+      "Data 2": "350",
+      "Data 3": "300",
+      "Data 4": "150",
+      "Data 5": "130",
+      "Data 6": "100"
+    },
+    {
+      "Date": "6/15/2016",
+      "Data 1": "90",
+      "Data 2": "220",
+      "Data 3": "320",
+      "Data 4": "100",
+      "Data 5": "220",
+      "Data 6": "300"
+    }
+  ],
+  "visualizationType": "Line",
+  "series": [
+    {
+      "dataKey": "Data 1",
+      "type": "Bar"
+    },
+    {
+      "dataKey": "Data 2",
+      "type": "Bar"
+    },
+    {
+      "dataKey": "Data 3",
+      "type": "Bar"
+    },
+    {
+      "dataKey": "Data 4",
+      "type": "Bar"
+    },
+    {
+      "dataKey": "Data 5",
+      "type": "Bar"
+    },
+    {
+      "dataKey": "Data 6",
+      "type": "Bar"
+    }
+  ]
+}

package/index.html

@@ -34,22 +34,28 @@
   -->
 
   <!-- GENERIC CHART TYPES -->
-  <div class="react-container" data-config="/examples/feature/filters/filter-testing.json"></div>
+  <!-- <div class="react-container" data-config="/examples/private/datatable-issue.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/feature/filters/filter-testing.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/pie/planet-pie-example-config.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/line/line-chart.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/feature/test-highlight/test-highlight.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/feature/test-highlight/test-highlight-vertical.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-category.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/feature/forecasting/index.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/non-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/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> -->
   <!-- <div class="react-container" data-config="/examples/feature/combo/planet-combo-example-config.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/feature/combo/right-issues.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/paired-bar/paired-bar-example.json"></div> -->
 
   <!-- BAR -->
   <!-- <div class="react-container" data-config="/examples/feature/bar/planet-example-config.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/bar/planet-chart-horizontal-example-config.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/feature/bar/new.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/bar/example-bar-chart.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-chart-max-increase.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-chart.json"></div> -->
@@ -71,10 +77,10 @@
 
   <!-- TESTS NONNUMERICS -->
   <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/planet-pie-example-config-nonnumeric.json"></div> -->
-  <!-- <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-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/tests-non-numerics/stacked-vertical-bar-example-nonnumerics.json"></div>
+  <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/stacked-vertical-bar-example-nonnumerics.json"></div> -->
 
   <!-- TESTS CUTOFF -->
   <!-- <div class="react-container" data-config="/examples/feature/tests-cutoff/cutoff-example-config.json"></div> -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/chart",
-  "version": "4.23.5",
+  "version": "4.23.6",
   "description": "React component for visualizing tabular data in various types of charts",
   "moduleName": "CdcChart",
   "main": "dist/cdcchart",
@@ -57,7 +57,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "34add3436994ca3cf13e51f313add4d70377f53e",
+  "gitHead": "aaed0388b487adfeb3e7e278b4ce74df09cbaade",
   "devDependencies": {
     "resize-observer-polyfill": "^1.5.1"
   }

package/src/CdcChart.jsx

@@ -31,7 +31,7 @@ import defaults from './data/initial-state'
 import EditorPanel from './components/EditorPanel'
 import Loading from '@cdc/core/components/Loading'
 import Filters from '@cdc/core/components/Filters'
-import CoveMediaControls from '@cdc/core/components/CoveMediaControls'
+import MediaControls from '@cdc/core/components/MediaControls'
 
 // Helpers
 import numberFromString from '@cdc/core/helpers/numberFromString'
@@ -39,6 +39,7 @@ import getViewport from '@cdc/core/helpers/getViewport'
 import { DataTransform } from '@cdc/core/helpers/DataTransform'
 import cacheBustingString from '@cdc/core/helpers/cacheBustingString'
 import isNumber from '@cdc/core/helpers/isNumber'
+import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
 
 import './scss/main.scss'
 // load both then config below determines which to use
@@ -72,7 +73,10 @@ const hashObj = row => {
   }
 }
 
-export default function CdcChart({ configUrl, config: configObj, isEditor = false, isDebug = false, isDashboard = false, setConfig: setParentConfig, setEditing, hostname, link }) {
+// * 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()
   const [loading, setLoading] = useState(true)
   const [colorScale, setColorScale] = useState(null)
@@ -261,10 +265,20 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
           data = await fetch(response.dataUrl + `?v=${cacheBustingString()}`)
             .then(response => response.text())
             .then(responseText => {
+              // for every comma NOT inside quotes, replace with a pipe delimiter
+              // - this will let commas inside the quotes not be parsed as a new column
+              // - Limitation: if a delimiter other than comma is used in the csv this will break
+              // Examples of other delimiters that would break: tab
+              responseText = responseText.replace(/(".*?")|,/g, (...m) => m[1] || '|')
+              // now strip the double quotes
+              responseText = responseText.replace(/["]+/g, '')
               const parsedCsv = Papa.parse(responseText, {
+                //quotes: "true",  // dont need these
+                //quoteChar: "'",  // has no effect that I can tell
                 header: true,
                 dynamicTyping: true,
-                skipEmptyLines: true
+                skipEmptyLines: true,
+                delimiter: '|' // we are using pipe symbol as delimiter so setting this explicitly for Papa.parse
               })
               return parsedCsv.data
             })
@@ -302,7 +316,9 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     }
     if (undefined === newConfig.table.show) newConfig.table.show = !isDashboard
 
-    updateConfig(newConfig, data)
+    const processedConfig = { ...(await coveUpdateWorker(newConfig)) }
+
+    updateConfig(processedConfig, data)
   }
 
   const updateConfig = (newConfig, dataOverride = undefined) => {
@@ -315,7 +331,6 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       }
     })
 
-    // Loop through and set initial data with exclusions - this should persist through any following data transformations (ie. filters)
     let newExcludedData
 
     if (newConfig.exclusions && newConfig.exclusions.active) {
@@ -512,11 +527,15 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       newConfig.runtime.barSeriesKeys = []
       newConfig.runtime.lineSeriesKeys = []
       newConfig.runtime.areaSeriesKeys = []
+      newConfig.runtime.forecastingSeriesKeys = []
 
       newConfig.series.forEach(series => {
         if (series.type === 'Area Chart') {
           newConfig.runtime.areaSeriesKeys.push(series)
         }
+        if (series.type === 'Forecasting') {
+          newConfig.runtime.forecastingSeriesKeys.push(series)
+        }
         if (series.type === 'Bar') {
           newConfig.runtime.barSeriesKeys.push(series.dataKey)
         }
@@ -525,6 +544,17 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
         }
       })
     }
+
+    if (newConfig.visualizationType === 'Forecasting' && newConfig.series) {
+      newConfig.runtime.forecastingSeriesKeys = []
+
+      newConfig.series.forEach(series => {
+        if (series.type === 'Forecasting') {
+          newConfig.runtime.forecastingSeriesKeys.push(series)
+        }
+      })
+    }
+
     if (newConfig.visualizationType === 'Area Chart' && newConfig.series) {
       newConfig.runtime.areaSeriesKeys = []
 
@@ -740,7 +770,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     const newSeriesHighlight = []
 
     // If we're highlighting all the series, reset them
-    if (seriesHighlight.length + 1 === config.runtime.seriesKeys.length && !config.legend.dynamicLegend) {
+    if (seriesHighlight.length + 1 === config.runtime.seriesKeys.length && !config.legend.dynamicLegend && config.visualizationType !== 'Forecasting') {
       highlightReset()
       return
     }
@@ -942,6 +972,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   // Select appropriate chart type
   const chartComponents = {
     'Paired Bar': <LinearChart />,
+    Forecasting: <LinearChart />,
     Bar: <LinearChart />,
     Line: <LinearChart />,
     Combo: <LinearChart />,
@@ -953,6 +984,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   }
 
   const missingRequiredSections = () => {
+    if (config.visualizationType === 'Forecasting') return false // skip required checks for now.
     if (config.visualizationType === 'Pie') {
       if (undefined === config?.yAxis.dataKey) {
         return true
@@ -1069,6 +1101,8 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   }
 
   const clean = data => {
+    // cleaning is deleting data we need in forecasting charts.
+    if (config.visualizationType === 'Forecasting') return data
     return config?.xAxis?.dataKey ? transform.cleanData(data, config.xAxis.dataKey) : data
   }
 
@@ -1136,10 +1170,10 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
             {description && config.visualizationType !== 'Spark Line' && <div className='subtext'>{parse(description)}</div>}
 
             {/* buttons */}
-            <CoveMediaControls.Section classes={['download-buttons']}>
-              {config.table.showDownloadImgButton && <CoveMediaControls.Button text='Download Image' title='Download Chart as Image' type='image' state={config} elementToCapture={imageId} />}
-              {config.table.showDownloadPdfButton && <CoveMediaControls.Button text='Download PDF' title='Download Chart as PDF' type='pdf' state={config} elementToCapture={imageId} />}
-            </CoveMediaControls.Section>
+            <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' && (
@@ -1222,7 +1256,10 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     isNumber,
     getTextWidth,
     twoColorPalette,
-    isDebug
+    isDebug,
+    setSharedFilter,
+    setSharedFilterValue,
+    dashboardConfig
   }
 
   const classes = ['cdc-open-viz-module', 'type-chart', `${currentViewport}`, `font-${config.fontSize}`, `${config.theme}`]