@cdc/chart 4.22.10 → 4.23.1

package/src/CdcChart.tsx

@@ -1,156 +1,147 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback } from 'react'
 
 // IE11
-import 'core-js/stable';
-import ResizeObserver from 'resize-observer-polyfill';
-import 'whatwg-fetch';
+import 'core-js/stable'
+import ResizeObserver from 'resize-observer-polyfill'
+import 'whatwg-fetch'
+import * as d3 from 'd3-array'
 
 // External Libraries
-import { scaleOrdinal } from '@visx/scale';
-import ParentSize from '@visx/responsive/lib/components/ParentSize';
-import { timeParse, timeFormat } from 'd3-time-format';
-import Papa from 'papaparse';
-import parse from 'html-react-parser';
-
+import { scaleOrdinal } from '@visx/scale'
+import ParentSize from '@visx/responsive/lib/components/ParentSize'
+import { timeParse, timeFormat } from 'd3-time-format'
+import { format } from 'd3-format'
+import Papa from 'papaparse'
+import parse from 'html-react-parser'
+import { Base64 } from 'js-base64'
 
 // Primary Components
-import Context from './context';
-import PieChart from './components/PieChart';
-import LinearChart from './components/LinearChart';
+import Context from './context'
+import PieChart from './components/PieChart'
+import LinearChart from './components/LinearChart'
 
-import {colorPalettesChart as colorPalettes} from '../../core/data/colorPalettes';
+import { colorPalettesChart as colorPalettes } from '../../core/data/colorPalettes'
 
-import { publish, subscribe, unsubscribe } from '@cdc/core/helpers/events';
+import { publish, subscribe, unsubscribe } from '@cdc/core/helpers/events'
 
-import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses';
+import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
 
-import SparkLine from './components/SparkLine';
-import Legend from './components/Legend';
-import DataTable from './components/DataTable';
-import defaults from './data/initial-state';
-import EditorPanel from './components/EditorPanel';
-import Loading from '@cdc/core/components/Loading';
+import SparkLine from './components/SparkLine'
+import Legend from './components/Legend'
+import DataTable from './components/DataTable'
+import defaults from './data/initial-state'
+import EditorPanel from './components/EditorPanel'
+import Loading from '@cdc/core/components/Loading'
+import Filters from './components/Filters'
+import CoveMediaControls from '@cdc/core/helpers/CoveMediaControls'
 
 // helpers
 import numberFromString from '@cdc/core/helpers/numberFromString'
-import getViewport from '@cdc/core/helpers/getViewport';
-import { DataTransform } from '@cdc/core/helpers/DataTransform';
-import cacheBustingString from '@cdc/core/helpers/cacheBustingString';
-
-import './scss/main.scss';
-
-export default function CdcChart(
-  { configUrl, config: configObj, isEditor = false, isDashboard = false, setConfig: setParentConfig, setEditing, hostname,link} :
-  { configUrl?: string, config?: any, isEditor?: boolean, isDashboard?: boolean, setConfig?, setEditing?, hostname?,link?:any }
-) {
-
-  const transform = new DataTransform();
-
-  interface keyable { [key: string]: any }
-
-  const [loading, setLoading] = useState<Boolean>(true);
-  const [colorScale, setColorScale] = useState<any>(null);
-  const [config, setConfig] = useState<keyable>({});
-  const [stateData, setStateData] = useState<Array<Object>>(config.data || []);
-  const [excludedData, setExcludedData] = useState<Array<Object>>();
-  const [filteredData, setFilteredData] = useState<Array<Object>>();
-  const [seriesHighlight, setSeriesHighlight] = useState<Array<String>>([]);
-  const [currentViewport, setCurrentViewport] = useState<String>('lg');
-  const [dimensions, setDimensions] = useState<Array<Number>>([]);
-  const [externalFilters, setExternalFilters] = useState(null);
+import getViewport from '@cdc/core/helpers/getViewport'
+import { DataTransform } from '@cdc/core/helpers/DataTransform'
+import cacheBustingString from '@cdc/core/helpers/cacheBustingString'
+
+import './scss/main.scss'
+
+export default function CdcChart({ configUrl, config: configObj, isEditor = false, isDashboard = false, setConfig: setParentConfig, setEditing, hostname, link }: { configUrl?: string; config?: any; isEditor?: boolean; isDashboard?: boolean; setConfig?; setEditing?; hostname?; link?: any }) {
+  const transform = new DataTransform()
+  interface keyable {
+    [key: string]: any
+  }
+
+  const [loading, setLoading] = useState<Boolean>(true)
+  const [colorScale, setColorScale] = useState<any>(null)
+  const [config, setConfig] = useState<keyable>({})
+  const [stateData, setStateData] = useState<Array<Object>>(config.data || [])
+  const [excludedData, setExcludedData] = useState<Array<Object>>()
+  const [filteredData, setFilteredData] = useState<Array<Object>>()
+  const [seriesHighlight, setSeriesHighlight] = useState<Array<String>>([])
+  const [currentViewport, setCurrentViewport] = useState<String>('lg')
+  const [dimensions, setDimensions] = useState<Array<Number>>([])
+  const [externalFilters, setExternalFilters] = useState(null)
   const [container, setContainer] = useState()
   const [coveLoadedEventRan, setCoveLoadedEventRan] = useState(false)
   const [dynamicLegendItems, setDynamicLegendItems] = useState([])
+  const [imageId, setImageId] = useState(`cove-${Math.random().toString(16).slice(-4)}`)
 
-  const legendGlyphSize = 15;
-  const legendGlyphSizeHalf = legendGlyphSize / 2;
+  const legendGlyphSize = 15
+  const legendGlyphSizeHalf = legendGlyphSize / 2
 
-  const {     
-    barBorderClass,
-    lineDatapointClass, 
-    contentClasses,
-    innerContainerClasses, 
-    sparkLineStyles
-  } = useDataVizClasses(config)
+  // Destructure items from config for more readable JSX
+  const { legend, title, description, visualizationType } = config
+  const { barBorderClass, lineDatapointClass, contentClasses, innerContainerClasses, sparkLineStyles } = useDataVizClasses(config)
 
   const handleChartTabbing = config.showSidebar ? `#legend` : config?.title ? `#dataTableSection__${config.title.replace(/\s/g, '')}` : `#dataTableSection`
 
-  
-  
-
   const handleChartAriaLabels = (state, testing = false) => {
-      if(testing) console.log(`handleChartAriaLabels Testing On:`, state);
-      try {
-          if(!state.visualizationType) throw Error('handleChartAriaLabels: no visualization type found in state');
-          let ariaLabel = '';
-
-          if(state.visualizationType) {
-            ariaLabel += `${state.visualizationType} chart`
-          }
+    if (testing) console.log(`handleChartAriaLabels Testing On:`, state)
+    try {
+      if (!state.visualizationType) throw Error('handleChartAriaLabels: no visualization type found in state')
+      let ariaLabel = ''
 
-          if(state.title && state.visualizationType) {
-              ariaLabel += ` with the title: ${state.title}`
-          }
+      if (state.visualizationType) {
+        ariaLabel += `${state.visualizationType} chart`
+      }
 
-          return ariaLabel;
-      } catch(e) {
-          console.error(e.message)
+      if (state.title && state.visualizationType) {
+        ariaLabel += ` with the title: ${state.title}`
       }
+
+      return ariaLabel
+    } catch (e) {
+      console.error(e.message)
+    }
   }
 
   const loadConfig = async () => {
-    let response = configObj || await (await fetch(configUrl)).json();
+    let response = configObj || (await (await fetch(configUrl)).json())
 
     // If data is included through a URL, fetch that and store
-    let data = response.formattedData || response.data || {};
+    let data = response.formattedData || response.data || {}
 
     if (response.dataUrl) {
-
       try {
         const regex = /(?:\.([^.]+))?$/
 
-        const ext = (regex.exec(response.dataUrl)[1])
+        const ext = regex.exec(response.dataUrl)[1]
         if ('csv' === ext) {
-            data = await fetch(response.dataUrl + `?v=${cacheBustingString()}`)
-                .then(response => response.text())
-                .then(responseText => {
-                    const parsedCsv = Papa.parse(responseText, {
-                        header: true,
-                        dynamicTyping: true,
-                        skipEmptyLines: true
-                    })
-                    return parsedCsv.data
-                })
+          data = await fetch(response.dataUrl + `?v=${cacheBustingString()}`)
+            .then(response => response.text())
+            .then(responseText => {
+              const parsedCsv = Papa.parse(responseText, {
+                header: true,
+                dynamicTyping: true,
+                skipEmptyLines: true
+              })
+              return parsedCsv.data
+            })
         }
 
         if ('json' === ext) {
-            data = await fetch(response.dataUrl  + `?v=${cacheBustingString()}`)
-                .then(response => response.json())
+          data = await fetch(response.dataUrl + `?v=${cacheBustingString()}`).then(response => response.json())
         }
       } catch {
-        console.error(`Cannot parse URL: ${response.dataUrl}`);
-        data = [];
+        console.error(`Cannot parse URL: ${response.dataUrl}`)
+        data = []
       }
 
-      if(response.dataDescription) {
-        data = transform.autoStandardize(data);
-        data = transform.developerStandardize(data, response.dataDescription);
+      if (response.dataDescription) {
+        data = transform.autoStandardize(data)
+        data = transform.developerStandardize(data, response.dataDescription)
       }
     }
 
-    if(data) {
+    if (data) {
       setStateData(data)
       setExcludedData(data)
     }
 
-    let newConfig = {...defaults, ...response}
-    if(undefined === newConfig.table.show) newConfig.table.show = !isDashboard
-    updateConfig(newConfig, data);
+    let newConfig = { ...defaults, ...response }
+    if (undefined === newConfig.table.show) newConfig.table.show = !isDashboard
+    updateConfig(newConfig, data)
   }
 
-
   const updateConfig = (newConfig, dataOverride = undefined) => {
-
     let data = dataOverride || stateData
 
     // Deeper copy
@@ -158,23 +149,17 @@ export default function CdcChart(
       if (newConfig[key] && 'object' === typeof newConfig[key] && !Array.isArray(newConfig[key])) {
         newConfig[key] = { ...defaults[key], ...newConfig[key] }
       }
-    });
+    })
 
     // 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) {
-
       if (newConfig.xAxis.type === 'categorical' && newConfig.exclusions.keys?.length > 0) {
         newExcludedData = data.filter(e => !newConfig.exclusions.keys.includes(e[newConfig.xAxis.dataKey]))
-      } else if (
-        newConfig.xAxis.type === 'date' &&
-        (newConfig.exclusions.dateStart || newConfig.exclusions.dateEnd) &&
-        newConfig.xAxis.dateParseFormat
-      ) {
-
+      } else if (newConfig.xAxis.type === 'date' && (newConfig.exclusions.dateStart || newConfig.exclusions.dateEnd) && newConfig.xAxis.dateParseFormat) {
         // Filter dates
-        const timestamp = (e) => new Date(e).getTime();
+        const timestamp = e => new Date(e).getTime()
 
         let startDate = timestamp(newConfig.exclusions.dateStart)
         let endDate = timestamp(newConfig.exclusions.dateEnd) + 86399999 //Increase by 24h in ms (86400000ms - 1ms) to include selected end date for .getTime() comparative
@@ -183,16 +168,12 @@ export default function CdcChart(
         let endDateValid = undefined !== typeof endDate && false === isNaN(endDate)
 
         if (startDateValid && endDateValid) {
-          newExcludedData = data.filter(e =>
-            (timestamp(e[newConfig.xAxis.dataKey]) >= startDate) &&
-            (timestamp(e[newConfig.xAxis.dataKey]) <= endDate)
-          )
+          newExcludedData = data.filter(e => timestamp(e[newConfig.xAxis.dataKey]) >= startDate && timestamp(e[newConfig.xAxis.dataKey]) <= endDate)
         } else if (startDateValid) {
           newExcludedData = data.filter(e => timestamp(e[newConfig.xAxis.dataKey]) >= startDate)
         } else if (endDateValid) {
           newExcludedData = data.filter(e => timestamp(e[newConfig.xAxis.dataKey]) <= endDate)
         }
-
       } else {
         newExcludedData = dataOverride || stateData
       }
@@ -203,134 +184,192 @@ export default function CdcChart(
     setExcludedData(newExcludedData)
 
     // After data is grabbed, loop through and generate filter column values if there are any
-    let currentData;
+    let currentData
     if (newConfig.filters) {
-
       newConfig.filters.forEach((filter, index) => {
+        let filterValues = []
 
-          let filterValues = [];
-
-          filterValues = generateValuesForFilter(filter.columnName, newExcludedData);
-
-          newConfig.filters[index].values = filterValues;
-          // Initial filter should be active
-          newConfig.filters[index].active = filterValues[0];
+        filterValues = filter.orderedValues || generateValuesForFilter(filter.columnName, newExcludedData)
 
-      });
-      currentData = filterData(newConfig.filters, newExcludedData);
-      setFilteredData(currentData);
+        newConfig.filters[index].values = filterValues
+        // Initial filter should be active
+        newConfig.filters[index].active = filterValues[0]
+      })
+      currentData = filterData(newConfig.filters, newExcludedData)
+      setFilteredData(currentData)
     }
 
     //Enforce default values that need to be calculated at runtime
-    newConfig.runtime = {};
-    newConfig.runtime.seriesLabels = {};
-    newConfig.runtime.seriesLabelsAll = [];
-    newConfig.runtime.originalXAxis = newConfig.xAxis;
-
+    newConfig.runtime = {}
+    newConfig.runtime.seriesLabels = {}
+    newConfig.runtime.seriesLabelsAll = []
+    newConfig.runtime.originalXAxis = newConfig.xAxis
 
     if (newConfig.visualizationType === 'Pie') {
-      newConfig.runtime.seriesKeys = (dataOverride || data).map(d => d[newConfig.xAxis.dataKey]);
-      newConfig.runtime.seriesLabelsAll = newConfig.runtime.seriesKeys;
+      newConfig.runtime.seriesKeys = (dataOverride || data).map(d => d[newConfig.xAxis.dataKey])
+      newConfig.runtime.seriesLabelsAll = newConfig.runtime.seriesKeys
     } else {
-      newConfig.runtime.seriesKeys = newConfig.series ? newConfig.series.map((series) => {
-        newConfig.runtime.seriesLabels[series.dataKey] = series.label || series.dataKey;
-        newConfig.runtime.seriesLabelsAll.push(series.label || series.dataKey);
-        return series.dataKey;
-      }) : [];
+      newConfig.runtime.seriesKeys = newConfig.series
+        ? newConfig.series.map(series => {
+            newConfig.runtime.seriesLabels[series.dataKey] = series.label || series.dataKey
+            newConfig.runtime.seriesLabelsAll.push(series.label || series.dataKey)
+            return series.dataKey
+          })
+        : []
+    }
+
+    if (newConfig.visualizationType === 'Box Plot' && newConfig.series) {
+      console.log('hit', newConfig)
+
+      // stats
+      let allKeys = data.map(d => d[newConfig.xAxis.dataKey])
+      let allValues = data.map(d => Number(d[newConfig?.series[0]?.dataKey]))
+
+      const uniqueArray = function (arrArg) {
+        return arrArg.filter(function (elem, pos, arr) {
+          return arr.indexOf(elem) === pos
+        })
+      }
+
+      const groups = uniqueArray(allKeys)
+      const plots = []
+
+      console.log('d', data)
+      console.log('newConfig', newConfig)
+      console.log('groups', groups)
+      console.log('allKeys', allKeys)
+      console.log('allValues', allValues)
+
+      // group specific statistics
+      // prevent re-renders
+      groups.map((g, index) => {
+        if (!g) return
+        // filter data by group
+        let filteredData = data.filter(item => item[newConfig.xAxis.dataKey] === g)
+        let filteredDataValues = filteredData.map(item => Number(item[newConfig?.series[0]?.dataKey]))
+        console.log('g', g)
+        console.log('item', filteredData)
+        console.log('item', newConfig)
+        // let filteredDataValues = filteredData.map(item => Number(item[newConfig.yAxis.dataKey]))
+
+        const q1 = d3.quantile(filteredDataValues, 0.25)
+        const q3 = d3.quantile(filteredDataValues, 0.75)
+        const iqr = q3 - q1
+        const lowerBounds = q1 - (q3 - q1) * 1.5
+        const upperBounds = q3 + (q3 - q1) * 1.5
+        const outliers = filteredDataValues.filter(v => v < lowerBounds || v > upperBounds)
+        plots.push({
+          columnCategory: g,
+          columnMean: d3.mean(filteredDataValues),
+          columnMedian: d3.median(filteredDataValues),
+          columnFirstQuartile: q1,
+          columnThirdQuartile: q3,
+          columnMin: q1 - 1.5 * iqr,
+          columnMax: q3 + 1.5 * iqr,
+          columnIqr: iqr,
+          columnOutliers: outliers,
+          values: filteredDataValues
+        })
+      })
+
+      // any other data we can add to boxplots
+      newConfig.boxplot['allValues'] = allValues
+      newConfig.boxplot['categories'] = groups
+      newConfig.boxplot.push(...plots)
     }
 
     if (newConfig.visualizationType === 'Combo' && newConfig.series) {
-      newConfig.runtime.barSeriesKeys = [];
-      newConfig.runtime.lineSeriesKeys = [];
-      newConfig.series.forEach((series) => {
-        if(series.type === 'Bar'){
-          newConfig.runtime.barSeriesKeys.push(series.dataKey);
+      newConfig.runtime.barSeriesKeys = []
+      newConfig.runtime.lineSeriesKeys = []
+      newConfig.series.forEach(series => {
+        if (series.type === 'Bar') {
+          newConfig.runtime.barSeriesKeys.push(series.dataKey)
         }
-        if(series.type === 'Line' || series.type === 'dashed-sm' || series.type === 'dashed-md' || series.type === 'dashed-lg'){
-          newConfig.runtime.lineSeriesKeys.push(series.dataKey);
+        if (series.type === 'Line' || series.type === 'dashed-sm' || series.type === 'dashed-md' || series.type === 'dashed-lg') {
+          newConfig.runtime.lineSeriesKeys.push(series.dataKey)
         }
-      });
+      })
     }
 
-    if ( (newConfig.visualizationType === 'Bar' && newConfig.orientation === 'horizontal') || newConfig.visualizationType === 'Paired Bar') {
-      newConfig.runtime.xAxis = newConfig.yAxis;
-      newConfig.runtime.yAxis = newConfig.xAxis;
-      newConfig.runtime.horizontal = true;
+    if ((newConfig.visualizationType === 'Bar' && newConfig.orientation === 'horizontal') || newConfig.visualizationType === 'Paired Bar') {
+      newConfig.runtime.xAxis = newConfig.yAxis
+      newConfig.runtime.yAxis = newConfig.xAxis
+      newConfig.runtime.horizontal = true
     } else {
-      newConfig.runtime.xAxis = newConfig.xAxis;
-      newConfig.runtime.yAxis = newConfig.yAxis;
-      newConfig.runtime.horizontal = false;
+      newConfig.runtime.xAxis = newConfig.xAxis
+      newConfig.runtime.yAxis = newConfig.yAxis
+      newConfig.runtime.horizontal = false
     }
-    newConfig.runtime.uniqueId = Date.now();
-    newConfig.runtime.editorErrorMessage = newConfig.visualizationType === 'Pie' && !newConfig.yAxis.dataKey ? 'Data Key property in Y Axis section must be set for pie charts.' : '';
+    newConfig.runtime.uniqueId = Date.now()
+    newConfig.runtime.editorErrorMessage = newConfig.visualizationType === 'Pie' && !newConfig.yAxis.dataKey ? 'Data Key property in Y Axis section must be set for pie charts.' : ''
 
-    setConfig(newConfig);
-  };
+    setConfig(newConfig)
+  }
 
   const filterData = (filters, data) => {
-    let filteredData = [];
+    let filteredData = []
 
-    data.forEach((row) => {
-      let add = true;
-      filters.forEach((filter) => {
+    data.forEach(row => {
+      let add = true
+      filters.forEach(filter => {
         if (row[filter.columnName] !== filter.active) {
-          add = false;
+          add = false
         }
-      });
+      })
 
-      if(add) filteredData.push(row);
-    });
-    return filteredData;
+      if (add) filteredData.push(row)
+    })
+    return filteredData
   }
 
   // Gets filer values from dataset
   const generateValuesForFilter = (columnName, data = this.state.data) => {
-    const values = [];
+    const values = []
 
-    data.forEach( (row) => {
-        const value = row[columnName]
-        if(value && false === values.includes(value)) {
-            values.push(value)
-        }
-    });
+    data.forEach(row => {
+      const value = row[columnName]
+      if (value && false === values.includes(value)) {
+        values.push(value)
+      }
+    })
 
-    return values;
+    return values
   }
 
   // Sorts data series for horizontal bar charts
   const sortData = (a, b) => {
-    let sortKey = config.visualizationType === 'Bar' && config.visualizationSubType === 'horizontal' ? config.xAxis.dataKey : config.yAxis.sortKey;
-    let aData = parseFloat(a[sortKey]);
-    let bData = parseFloat(b[sortKey]);
-
-    if(aData < bData){
-      return config.sortData === 'ascending' ? 1 : -1;
-    } else if (aData > bData){
-      return config.sortData === 'ascending' ? -1 : 1;
+    let sortKey = config.visualizationType === 'Bar' && config.visualizationSubType === 'horizontal' ? config.xAxis.dataKey : config.yAxis.sortKey
+    let aData = parseFloat(a[sortKey])
+    let bData = parseFloat(b[sortKey])
+
+    if (aData < bData) {
+      return config.sortData === 'ascending' ? 1 : -1
+    } else if (aData > bData) {
+      return config.sortData === 'ascending' ? -1 : 1
     } else {
-      return 0;
+      return 0
     }
   }
 
   // Observes changes to outermost container and changes viewport size in state
-  const resizeObserver:ResizeObserver = new ResizeObserver(entries => {
+  const resizeObserver: ResizeObserver = new ResizeObserver(entries => {
     for (let entry of entries) {
       let { width, height } = entry.contentRect
       let newViewport = getViewport(width)
-      let svgMarginWidth = 32;
-      let editorWidth = 350;
+      let svgMarginWidth = 32
+      let editorWidth = 350
 
       setCurrentViewport(newViewport)
 
-      if(isEditor) {
-        width = width - editorWidth;
+      if (isEditor) {
+        width = width - editorWidth
       }
 
-      if(entry.target.dataset.lollipop === 'true') {
-        width = width - 2.5;
+      if (entry.target.dataset.lollipop === 'true') {
+        width = width - 2.5
       }
 
-      width = width - svgMarginWidth;
+      width = width - svgMarginWidth
 
       setDimensions([width, height])
     }
@@ -338,374 +377,348 @@ export default function CdcChart(
 
   const outerContainerRef = useCallback(node => {
     if (node !== null) {
-        resizeObserver.observe(node);
+      resizeObserver.observe(node)
     }
 
     setContainer(node)
-  },[]);
+  }, [])
 
   function isEmpty(obj) {
-    return Object.keys(obj).length === 0;
+    return Object.keys(obj).length === 0
   }
 
   // Load data when component first mounts
   useEffect(() => {
-    loadConfig();
-  }, []);
+    loadConfig()
+  }, [])
 
   /**
    * When cove has a config and container ref publish the cove_loaded event.
    */
   useEffect(() => {
-    if(container && !isEmpty(config) && !coveLoadedEventRan) {
+    if (container && !isEmpty(config) && !coveLoadedEventRan) {
       publish('cove_loaded', { config: config })
       setCoveLoadedEventRan(true)
     }
+  }, [container, config])
 
-  }, [container, config]);
-  
-
-/**
- * Handles filter change events outside of COVE
- * Updates externalFilters state
- * Another useEffect listens to externalFilterChanges and updates the config.
- */
+  /**
+   * Handles filter change events outside of COVE
+   * Updates externalFilters state
+   * Another useEffect listens to externalFilterChanges and updates the config.
+   */
   useEffect(() => {
-
-    const handleFilterData = (e:CustomEvent) => {
-        let tmp = [];
-        tmp.push(e.detail)
-        setExternalFilters(tmp)
+    const handleFilterData = (e: CustomEvent) => {
+      let tmp = []
+      tmp.push(e.detail)
+      setExternalFilters(tmp)
     }
-    
-    subscribe('cove_filterData', (e:CustomEvent) => handleFilterData(e))
+
+    subscribe('cove_filterData', (e: CustomEvent) => handleFilterData(e))
 
     return () => {
-      unsubscribe('cove_filterData', handleFilterData);
+      unsubscribe('cove_filterData', handleFilterData)
     }
+  }, [config])
 
-  }, [config]);
-
-
-/**
- * Handles changes to externalFilters
- * For some reason e.detail is returning [order: "asc"] even though
- * we're not passing that in. The code here checks for an active prop instead of an empty array.
- */
+  /**
+   * Handles changes to externalFilters
+   * For some reason e.detail is returning [order: "asc"] even though
+   * we're not passing that in. The code here checks for an active prop instead of an empty array.
+   */
   useEffect(() => {
-
-    if(externalFilters && externalFilters[0]) {
+    if (externalFilters && externalFilters[0]) {
       const hasActiveProperty = externalFilters[0].hasOwnProperty('active')
 
-      if(!hasActiveProperty) {
-        let configCopy = {...config }
+      if (!hasActiveProperty) {
+        let configCopy = { ...config }
         delete configCopy['filters']
         setConfig(configCopy)
-        setFilteredData(filterData(externalFilters, excludedData));
+        setFilteredData(filterData(externalFilters, excludedData))
       }
     }
 
-    if(externalFilters && externalFilters.length > 0 && externalFilters.length > 0 && externalFilters[0].hasOwnProperty('active')) {
-      let newConfigHere = {...config, filters: externalFilters }
+    if (externalFilters && externalFilters.length > 0 && externalFilters.length > 0 && externalFilters[0].hasOwnProperty('active')) {
+      let newConfigHere = { ...config, filters: externalFilters }
       setConfig(newConfigHere)
-      setFilteredData(filterData(externalFilters, excludedData));
+      setFilteredData(filterData(externalFilters, excludedData))
     }
-    
-  }, [externalFilters]);
+  }, [externalFilters])
 
-  
   // Load data when configObj data changes
-  if(configObj){
+  if (configObj) {
     useEffect(() => {
-      loadConfig();
-    }, [configObj.data]);
+      loadConfig()
+    }, [configObj.data])
   }
 
   // Generates color palette to pass to child chart component
   useEffect(() => {
-    if(stateData && config.xAxis && config.runtime.seriesKeys) {
+    if (stateData && config.xAxis && config.runtime.seriesKeys) {
       let palette = config.customColors || colorPalettes[config.palette]
       let numberOfKeys = config.runtime.seriesKeys.length
-      let newColorScale;
+      let newColorScale
 
-      while(numberOfKeys > palette.length) {
-        palette = palette.concat(palette);
+      while (numberOfKeys > palette.length) {
+        palette = palette.concat(palette)
       }
 
-      palette = palette.slice(0, numberOfKeys);
+      palette = palette.slice(0, numberOfKeys)
 
-      newColorScale = () => scaleOrdinal({
-        domain: config.runtime.seriesLabelsAll,
-        range: palette,
-      });
+      newColorScale = () =>
+        scaleOrdinal({
+          domain: config.runtime.seriesLabelsAll,
+          range: palette
+        })
 
-      setColorScale(newColorScale);
-      setLoading(false);
+      setColorScale(newColorScale)
+      setLoading(false)
     }
 
-    if(config && stateData && config.sortData){
-      stateData.sort(sortData);
+    if (config && stateData && config.sortData) {
+      stateData.sort(sortData)
     }
   }, [config, stateData])
 
   // Called on legend click, highlights/unhighlights the data series with the given label
-  const highlight = (label) => {
-    const newSeriesHighlight = [];
+  const highlight = label => {
+    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) {
       highlightReset()
       return
     }
 
-    seriesHighlight.forEach((value) => {
-      newSeriesHighlight.push(value);
-    });
+    seriesHighlight.forEach(value => {
+      newSeriesHighlight.push(value)
+    })
 
-    let newHighlight = label.datum;
-    if(config.runtime.seriesLabels){
-      for(let i = 0; i < config.runtime.seriesKeys.length; i++) {
-        if(config.runtime.seriesLabels[config.runtime.seriesKeys[i]] === label.datum){
-          newHighlight = config.runtime.seriesKeys[i];
-          break;
+    let newHighlight = label.datum
+    if (config.runtime.seriesLabels) {
+      for (let i = 0; i < config.runtime.seriesKeys.length; i++) {
+        if (config.runtime.seriesLabels[config.runtime.seriesKeys[i]] === label.datum) {
+          newHighlight = config.runtime.seriesKeys[i]
+          break
         }
       }
     }
 
     if (newSeriesHighlight.indexOf(newHighlight) !== -1) {
-      newSeriesHighlight.splice(newSeriesHighlight.indexOf(newHighlight), 1);
+      newSeriesHighlight.splice(newSeriesHighlight.indexOf(newHighlight), 1)
     } else {
-      newSeriesHighlight.push(newHighlight);
+      newSeriesHighlight.push(newHighlight)
     }
-    setSeriesHighlight(newSeriesHighlight);
-  };
+    setSeriesHighlight(newSeriesHighlight)
+  }
 
   // Called on reset button click, unhighlights all data series
   const highlightReset = () => {
-    if(config.legend.dynamicLegend && dynamicLegendItems) {
-      setSeriesHighlight(dynamicLegendItems.map( item => item.text ))
+    if (config.legend.dynamicLegend && dynamicLegendItems) {
+      setSeriesHighlight(dynamicLegendItems.map(item => item.text))
     } else {
-      setSeriesHighlight([]);
+      setSeriesHighlight([])
     }
   }
 
-  const section = config.orientation ==='horizontal' ? 'yAxis' :'xAxis';
+  const section = config.orientation === 'horizontal' ? 'yAxis' : 'xAxis'
 
   const parseDate = (dateString: string) => {
-    let date = timeParse(config.runtime[section].dateParseFormat)(dateString);
-    if(!date) {
-      config.runtime.editorErrorMessage = `Error parsing date "${dateString}". Try reviewing your data and date parse settings in the X Axis section.`;
-      return new Date();
+    let date = timeParse(config.runtime[section].dateParseFormat)(dateString)
+    if (!date) {
+      config.runtime.editorErrorMessage = `Error parsing date "${dateString}". Try reviewing your data and date parse settings in the X Axis section.`
+      return new Date()
     } else {
-      return date;
+      return date
     }
-  };
-
+  }
 
   const formatDate = (date: Date) => {
-    return timeFormat(config.runtime[section].dateDisplayFormat)(date);
-  };
+    return timeFormat(config.runtime[section].dateDisplayFormat)(date)
+  }
+
+  const DownloadButton = ({ data }: any, type = 'link') => {
+    const fileName = `${config.title.substring(0, 50)}.csv`
+
+    const csvData = Papa.unparse(data)
+
+    const saveBlob = () => {
+      //@ts-ignore
+      if (typeof window.navigator.msSaveBlob === 'function') {
+        const dataBlob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' })
+        //@ts-ignore
+        window.navigator.msSaveBlob(dataBlob, fileName)
+      }
+    }
+
+    if (type === 'download') {
+      return (
+        <a download={fileName} onClick={saveBlob} href={`data:text/csv;base64,${Base64.encode(csvData)}`} aria-label='Download this data in a CSV file format.' className={`btn btn-download no-border`}>
+          Download Data (CSV)
+        </a>
+      )
+    } else {
+      return (
+        <a download={fileName} onClick={saveBlob} href={`data:text/csv;base64,${Base64.encode(csvData)}`} aria-label='Download this data in a CSV file format.' className={`btn no-border`}>
+          Download Data (CSV)
+        </a>
+      )
+    }
+  }
 
   // Format numeric data based on settings in config
-  const formatNumber = (num) => {
-    // check if value contains comma and remove it. later will add comma below.
-    if(String(num).indexOf(',') !== -1)  num = num.replaceAll(',', '');
+  const formatNumber = (num, axis) => {
     // if num is NaN return num
-    if(isNaN(num)|| !num) return num ;
+    if (isNaN(num) || !num) return num
 
-    let original = num;
-    let prefix = config.dataFormat.prefix;
+    // destructure dataFormat values
+    let {
+      dataFormat: { commas, abbreviated, roundTo, prefix, suffix, rightRoundTo, rightPrefix, rightSuffix }
+    } = config
+    let formatSuffix = format('.2s')
+
+    // check if value contains comma and remove it. later will add comma below.
+    if (String(num).indexOf(',') !== -1) num = num.replaceAll(',', '')
 
-    let stringFormattingOptions = {
-      useGrouping: config.dataFormat.commas ? true : false,
-      minimumFractionDigits: config.dataFormat.roundTo ? Number(config.dataFormat.roundTo) : 0,
-      maximumFractionDigits: config.dataFormat.roundTo ? Number(config.dataFormat.roundTo) : 0
-    };
+    let original = num
+    let stringFormattingOptions
+
+    if (axis !== 'right') {
+      stringFormattingOptions = {
+        useGrouping: config.dataFormat.commas ? true : false,
+        minimumFractionDigits: roundTo ? Number(roundTo) : 0,
+        maximumFractionDigits: roundTo ? Number(roundTo) : 0
+      }
+    } else {
+      stringFormattingOptions = {
+        useGrouping: config.dataFormat.rightCommas ? true : false,
+        minimumFractionDigits: rightRoundTo ? Number(rightRoundTo) : 0,
+        maximumFractionDigits: rightRoundTo ? Number(rightRoundTo) : 0
+      }
+    }
+
+    num = numberFromString(num)
 
-    num = numberFromString(num);
-    
     if (isNaN(num)) {
-      config.runtime.editorErrorMessage = `Unable to parse number from data ${original}. Try reviewing your data and selections in the Data Series section.`;
+      config.runtime.editorErrorMessage = `Unable to parse number from data ${original}. Try reviewing your data and selections in the Data Series section.`
       return original
     }
 
-    if (!config.dataFormat) return num;
-    if (config.dataCutoff){
+    if (!config.dataFormat) return num
+    if (config.dataCutoff) {
       let cutoff = numberFromString(config.dataCutoff)
 
-      if(num < cutoff) { 
-        num = cutoff;
+      if (num < cutoff) {
+        num = cutoff
       }
     }
-    num = num.toLocaleString('en-US', stringFormattingOptions)
 
-    let result = ""
-
-    if(prefix) {
-      result += prefix
+    // When we're formatting the left axis
+    // Use commas also updates bars and the data table
+    // We can't use commas when we're formatting the dataFormatted number
+    // Example: commas -> 12,000; abbreviated -> 12k (correct); abbreviated & commas -> 12 (incorrect)
+    if (axis === 'left' && commas && abbreviated) {
+      num = num
+    } else {
+      num = num.toLocaleString('en-US', stringFormattingOptions)
     }
+    let result = ''
 
-    result += num
-
-    if(config.dataFormat.suffix) {
-      result += config.dataFormat.suffix
+    if (abbreviated && axis === 'left') {
+      num = formatSuffix(parseFloat(num)).replace('G', 'B')
     }
-    return String(result)
-  };
-
-  // Destructure items from config for more readable JSX
-  const { legend, title, description, visualizationType } = config;
-
-  // Select appropriate chart type
-  const chartComponents = {
-    'Paired Bar' : <LinearChart />,
-    'Bar' : <LinearChart />,
-    'Line' : <LinearChart />,
-    'Combo': <LinearChart />,
-    'Pie' : <PieChart />,
-  }
-
-  const Filters = () => {
-    const changeFilterActive = (index, value) => {
-      let newFilters = config.filters;
-
-      newFilters[index].active = value;
-
-      setConfig({...config, filters: newFilters});
-
-      setFilteredData(filterData(newFilters, excludedData));
-    };
 
-    const announceChange = (text) => {};
-
-    let filterList = '';
-    if (config.filters) {
-      
-      filterList = config.filters.map((singleFilter, index) => {
-        const values = [];
-        const sortAsc = (a, b) => {
-          return a.toString().localeCompare(b.toString(), 'en', { numeric: true })
-        };
+    if (abbreviated && axis === 'bottom') {
+      num = formatSuffix(parseFloat(num)).replace('G', 'B')
+    }
 
-        const sortDesc = (a, b) => {
-          return b.toString().localeCompare(a.toString(), 'en', { numeric: true })
-        };
+    if (prefix && axis !== 'right') {
+      result += prefix
+    }
 
-        if(!singleFilter.order || singleFilter.order === '' ){
-          singleFilter.order = 'asc'
-        }
+    if (rightPrefix && axis === 'right') {
+      result += rightPrefix
+    }
 
-        if(singleFilter.order === 'desc') {
-          singleFilter.values = singleFilter.values.sort(sortDesc)
-        }
+    result += num
 
-        if(singleFilter.order === 'asc') {
-          singleFilter.values = singleFilter.values.sort(sortAsc)
-        }
+    if (suffix && axis !== 'right') {
+      result += suffix
+    }
 
-        singleFilter.values.forEach((filterOption, index) => {
-          values.push(
-            <option key={index} value={filterOption}>
-              {filterOption}
-            </option>
-          );
-        });
-
-        return (
-          <div className="single-filter" key={index}>
-            <label htmlFor={`filter-${index}`}>{singleFilter.label}</label>
-            <select
-              id={`filter-${index}`}
-              className="filter-select"
-              data-index="0"
-              value={singleFilter.active}
-              onChange={(val) => {
-                changeFilterActive(index, val.target.value);
-                announceChange(`Filter ${singleFilter.label} value has been changed to ${val.target.value}, please reference the data table to see updated values.`);
-              }}
-            >
-              {values}
-            </select>
-          </div>
-        );
-      });
+    if (rightSuffix && axis === 'right') {
+      result += rightSuffix
     }
 
-    return (<section className="filters-section">{filterList}</section>)
+    return String(result)
+  }
+
+  // Select appropriate chart type
+  const chartComponents = {
+    'Paired Bar': <LinearChart />,
+    Bar: <LinearChart />,
+    Line: <LinearChart />,
+    Combo: <LinearChart />,
+    Pie: <PieChart />,
+    'Box Plot': <LinearChart />
   }
 
   const missingRequiredSections = () => {
     if (config.visualizationType === 'Pie') {
       if (undefined === config?.yAxis.dataKey) {
-        return true;
+        return true
       }
     } else {
       if (undefined === config?.series || false === config?.series.length > 0) {
-        return true;
+        return true
       }
     }
 
     if (!config.xAxis.dataKey) {
-      return true;
+      return true
     }
 
-    return false;
-  };
+    return false
+  }
 
   // Prevent render if loading
-  let body = (<Loading />)
-
-
-  if(!loading) {
-
+  let body = <Loading />
 
+  if (!loading) {
     body = (
       <>
         {isEditor && <EditorPanel />}
         {!missingRequiredSections() && !config.newViz && (
-          <div className="cdc-chart-inner-container">
+          <div className='cdc-chart-inner-container'>
             {/* Title */}
-        
+
             {title && (
-              <div
-                role="heading"
-                className={`chart-title ${config.theme} cove-component__header`}
-                aria-level={2}
-              >
-                {config && (
-                  <sup className="superTitle">{parse(config.superTitle || '')}</sup>
-                )}
+              <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>
             )}
-            <a
-              id="skip-chart-container"
-              className="cdcdataviz-sr-only-focusable"
-              href={handleChartTabbing}
-            >
+            <a id='skip-chart-container' className='cdcdataviz-sr-only-focusable' href={handleChartTabbing}>
               Skip Over Chart Container
             </a>
             {/* Filters */}
             {config.filters && !externalFilters && <Filters />}
             {/* Visualization */}
-            {config?.introText && <section className="introText">{parse(config.introText)}</section>}
+            {config?.introText && <section className='introText'>{parse(config.introText)}</section>}
             <div
-              className={`chart-container${
-                config.legend.hide ? " legend-hidden" : ""
-              }${lineDatapointClass}${barBorderClass} ${contentClasses.join(' ')}`}
+              style={{ marginBottom: config.legend.position !== 'bottom' && config.orientation === 'horizontal' ? `${config.runtime.xAxis.size}px` : '0px' }}
+              className={`chart-container  ${config.legend.position === 'bottom' ? 'bottom' : ''}${config.legend.hide ? ' legend-hidden' : ''}${lineDatapointClass}${barBorderClass} ${contentClasses.join(' ')}`}
             >
               {/* All charts except sparkline */}
-              {config.visualizationType !== "Spark Line" && 
-                chartComponents[visualizationType]
-              }
+              {config.visualizationType !== 'Spark Line' && chartComponents[visualizationType]}
 
               {/* Sparkline */}
-              {config.visualizationType === "Spark Line" && (
+              {config.visualizationType === 'Spark Line' && (
                 <>
-                  { description && <div className="subtext">{parse(description)}</div>}
+                  {description && <div className='subtext'>{parse(description)}</div>}
                   <div style={sparkLineStyles}>
                     <ParentSize>
-                      {(parent) => (
+                      {parent => (
                         <>
                           <SparkLine width={parent.width} height={parent.height} />
                         </>
@@ -713,26 +726,32 @@ export default function CdcChart(
                     </ParentSize>
                   </div>
                 </>
-              )
-              }
-              {!config.legend.hide && config.visualizationType !== "Spark Line" && <Legend />}
+              )}
+              {!config.legend.hide && config.visualizationType !== 'Spark Line' && <Legend />}
             </div>
             {/* Link */}
             {link && link}
             {/* Description */}
-            {description && config.visualizationType !== "Spark Line" && <div className="subtext">{parse(description)}</div>}
-            {/* Data Table */}
+            {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>
 
-            {config.xAxis.dataKey && config.table.show && config.visualizationType !== "Spark Line" && <DataTable />}
-            {config?.footnotes && <section className="footnotes">{parse(config.footnotes)}</section>}
+            {/* Data Table */}
+            {config.xAxis.dataKey && config.table.show && config.visualizationType !== 'Spark Line' && <DataTable />}
+            {config?.footnotes && <section className='footnotes'>{parse(config.footnotes)}</section>}
+            {/* show pdf or image button */}
           </div>
         )}
       </>
-    );
+    )
   }
 
-  const getXAxisData = (d: any) => config.runtime.xAxis.type === 'date' ? (parseDate(d[config.runtime.originalXAxis.dataKey])).getTime() : d[config.runtime.originalXAxis.dataKey];
-  const getYAxisData = (d: any, seriesKey: string) => d[seriesKey];
+  const getXAxisData = (d: any) => (config.runtime.xAxis.type === 'date' ? parseDate(d[config.runtime.originalXAxis.dataKey]).getTime() : d[config.runtime.originalXAxis.dataKey])
+  const getYAxisData = (d: any, seriesKey: string) => d[seriesKey]
 
   const contextValues = {
     getXAxisData,
@@ -764,26 +783,22 @@ export default function CdcChart(
     legend,
     setSeriesHighlight,
     dynamicLegendItems,
-    setDynamicLegendItems
+    setDynamicLegendItems,
+    filterData,
+    imageId
   }
 
-  const classes = [
-    'cdc-open-viz-module',
-    'type-chart',
-    `${currentViewport}`,
-    `font-${config.fontSize}`,
-    `${config.theme}`
-  ]
+  const classes = ['cdc-open-viz-module', 'type-chart', `${currentViewport}`, `font-${config.fontSize}`, `${config.theme}`]
 
-  config.visualizationType === "Spark Line" && classes.push(`type-sparkline`)
+  config.visualizationType === 'Spark Line' && classes.push(`type-sparkline`)
   isEditor && classes.push('spacing-wrapper')
   isEditor && classes.push('isEditor')
 
   return (
     <Context.Provider value={contextValues}>
-      <div className={`${classes.join(' ')}`} ref={outerContainerRef} data-lollipop={config.isLollipopChart}>
+      <div className={`${classes.join(' ')}`} ref={outerContainerRef} data-lollipop={config.isLollipopChart} data-download-id={imageId}>
         {body}
       </div>
     </Context.Provider>
-  );
+  )
 }