@cdc/chart 4.23.1 → 4.23.3

package/src/{CdcChart.tsx → CdcChart.jsx}

@@ -1,7 +1,6 @@
 import React, { useState, useEffect, useCallback } from 'react'
 
 // IE11
-import 'core-js/stable'
 import ResizeObserver from 'resize-observer-polyfill'
 import 'whatwg-fetch'
 import * as d3 from 'd3-array'
@@ -13,14 +12,14 @@ 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'
+import 'react-tooltip/dist/react-tooltip.css'
 
 // Primary Components
-import Context from './context'
+import ConfigContext from './ConfigContext'
 import PieChart from './components/PieChart'
 import LinearChart from './components/LinearChart'
 
-import { colorPalettesChart as colorPalettes } from '../../core/data/colorPalettes'
+import { colorPalettesChart as colorPalettes, twoColorPalette } from '@cdc/core/data/colorPalettes'
 
 import { publish, subscribe, unsubscribe } from '@cdc/core/helpers/events'
 
@@ -33,46 +32,57 @@ 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'
+import CoveMediaControls from '@cdc/core/components/CoveMediaControls'
 
-// helpers
+// 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 isNumber from '@cdc/core/helpers/isNumber'
+import cleanData from '@cdc/core/helpers/cleanData'
 
 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 }) {
+export default function CdcChart({ configUrl, config: configObj, isEditor = false, isDashboard = false, setConfig: setParentConfig, setEditing, hostname, link }) {
   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 [loading, setLoading] = useState(true)
+  const [colorScale, setColorScale] = useState(null)
+  const [config, setConfig] = useState({})
+  const [stateData, setStateData] = useState(config.data || [])
+  const [excludedData, setExcludedData] = useState()
+  const [filteredData, setFilteredData] = useState()
+  const [seriesHighlight, setSeriesHighlight] = useState([])
+  const [currentViewport, setCurrentViewport] = useState('lg')
+  const [dimensions, setDimensions] = useState([])
   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 [imageId] = useState(`cove-${Math.random().toString(16).slice(-4)}`)
 
   // Destructure items from config for more readable JSX
-  const { legend, title, description, visualizationType } = config
-  const { barBorderClass, lineDatapointClass, contentClasses, innerContainerClasses, sparkLineStyles } = useDataVizClasses(config)
+  let { legend, title, description, visualizationType } = config
+
+  // set defaults on titles if blank AND only in editor
+  if (isEditor) {
+    if (!title || title === '') title = 'Chart Title'
+  }
+
+  if (config.table && (!config.table?.label || config.table?.label === '')) config.table.label = 'Data Table'
+
+  const { barBorderClass, lineDatapointClass, contentClasses, sparkLineStyles } = useDataVizClasses(config)
 
   const handleChartTabbing = config.showSidebar ? `#legend` : config?.title ? `#dataTableSection__${config.title.replace(/\s/g, '')}` : `#dataTableSection`
 
+  const sortAsc = (a, b) => {
+    return a.toString().localeCompare(b.toString(), 'en', { numeric: true })
+  }
+
+  const sortDesc = (a, b) => {
+    return b.toString().localeCompare(a.toString(), 'en', { numeric: true })
+  }
+
   const handleChartAriaLabels = (state, testing = false) => {
     if (testing) console.log(`handleChartAriaLabels Testing On:`, state)
     try {
@@ -89,7 +99,20 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
       return ariaLabel
     } catch (e) {
-      console.error(e.message)
+      console.error('COVE: ', e.message) // eslint-disable-line
+    }
+  }
+
+  const handleLineType = lineType => {
+    switch (lineType) {
+      case 'dashed-sm':
+        return '5 5'
+      case 'dashed-md':
+        return '10 5'
+      case 'dashed-lg':
+        return '15 5'
+      default:
+        return 0
     }
   }
 
@@ -121,7 +144,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
           data = await fetch(response.dataUrl + `?v=${cacheBustingString()}`).then(response => response.json())
         }
       } catch {
-        console.error(`Cannot parse URL: ${response.dataUrl}`)
+        console.error(`COVE: Cannot parse URL: ${response.dataUrl}`)
         data = []
       }
 
@@ -137,6 +160,9 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     }
 
     let newConfig = { ...defaults, ...response }
+    if (newConfig.visualizationType === 'Box Plot') {
+      newConfig.legend.hide = true
+    }
     if (undefined === newConfig.table.show) newConfig.table.show = !isDashboard
     updateConfig(newConfig, data)
   }
@@ -189,7 +215,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       newConfig.filters.forEach((filter, index) => {
         let filterValues = []
 
-        filterValues = filter.orderedValues || generateValuesForFilter(filter.columnName, newExcludedData)
+        filterValues = filter.orderedValues || generateValuesForFilter(filter.columnName, newExcludedData).sort(filter.order === 'desc' ? sortDesc : sortAsc)
 
         newConfig.filters[index].values = filterValues
         // Initial filter should be active
@@ -219,11 +245,8 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     }
 
     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]))
+      let allKeys = newExcludedData ? newExcludedData.map(d => d[newConfig.xAxis.dataKey]) : data.map(d => d[newConfig.xAxis.dataKey])
+      let allValues = newExcludedData ? newExcludedData.map(d => Number(d[newConfig?.series[0]?.dataKey])) : data.map(d => Number(d[newConfig?.series[0]?.dataKey]))
 
       const uniqueArray = function (arrArg) {
         return arrArg.filter(function (elem, pos, arr) {
@@ -232,50 +255,75 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       }
 
       const groups = uniqueArray(allKeys)
+      let tableData = []
       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
-        })
+      if (!groups) return
+      groups.forEach((g, index) => {
+        try {
+          if (!g) throw new Error('No groups resolved in box plots')
+
+          // filter data by group
+          let filteredData = newExcludedData ? newExcludedData.filter(item => item[newConfig.xAxis.dataKey] === g) : data.filter(item => item[newConfig.xAxis.dataKey] === g)
+          let filteredDataValues = filteredData.map(item => Number(item[newConfig?.series[0]?.dataKey]))
+          // let filteredDataValues = filteredData.map(item => Number(item[newConfig.yAxis.dataKey]))
+
+          if (!filteredData) throw new Error('boxplots dont have data yet')
+          if (!plots) throw new Error('boxplots dont have plots yet')
+          if (newConfig.boxplot.firstQuartilePercentage === '') {
+            newConfig.boxplot.firstQuartilePercentage = 0
+          }
+
+          if (newConfig.boxplot.thirdQuartilePercentage === '') {
+            newConfig.boxplot.thirdQuartilePercentage = 0
+          }
+
+          const q1 = d3.quantile(filteredDataValues, parseFloat(newConfig.boxplot.firstQuartilePercentage) / 100)
+          const q3 = d3.quantile(filteredDataValues, parseFloat(newConfig.boxplot.thirdQuartilePercentage) / 100)
+          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)
+          let nonOutliers = filteredDataValues
+
+          nonOutliers = nonOutliers.filter(item => !outliers.includes(item))
+
+          plots.push({
+            columnCategory: g,
+            columnMax: Number(q3 + 1.5 * iqr).toFixed(newConfig.dataFormat.roundTo),
+            columnThirdQuartile: Number(q3).toFixed(newConfig.dataFormat.roundTo),
+            columnMedian: Number(d3.median(filteredDataValues)).toFixed(newConfig.dataFormat.roundTo),
+            columnFirstQuartile: q1.toFixed(newConfig.dataFormat.roundTo),
+            columnMin: Number(q1 - 1.5 * iqr).toFixed(newConfig.dataFormat.roundTo),
+            columnTotal: filteredDataValues.reduce((partialSum, a) => partialSum + a, 0),
+            columnSd: Number(d3.deviation(filteredDataValues)).toFixed(newConfig.dataFormat.roundTo),
+            columnMean: Number(d3.mean(filteredDataValues)).toFixed(newConfig.dataFormat.roundTo),
+            columnIqr: Number(iqr).toFixed(newConfig.dataFormat.roundTo),
+            columnOutliers: outliers,
+            values: filteredDataValues,
+            nonOutlierValues: nonOutliers
+          })
+        } catch (e) {
+          console.error('COVE: ', e.message) // eslint-disable-line
+        }
+      })
+
+      // make deep copy so we can remove some fields for data
+      // this appears to be the easiest option instead of running logic against the datatable cell...
+      tableData = JSON.parse(JSON.stringify(plots))
+      tableData.map(table => {
+        delete table.columnIqr
+        delete table.nonOutlierValues
+        return null // resolve eslint
       })
 
       // any other data we can add to boxplots
       newConfig.boxplot['allValues'] = allValues
       newConfig.boxplot['categories'] = groups
-      newConfig.boxplot.push(...plots)
+      newConfig.boxplot.plots = plots
+      newConfig.boxplot.tableData = tableData
     }
 
     if (newConfig.visualizationType === 'Combo' && newConfig.series) {
@@ -291,7 +339,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       })
     }
 
-    if ((newConfig.visualizationType === 'Bar' && newConfig.orientation === 'horizontal') || newConfig.visualizationType === 'Paired Bar') {
+    if (((newConfig.visualizationType === 'Bar' || newConfig.visualizationType === 'Deviation Bar') && newConfig.orientation === 'horizontal') || newConfig.visualizationType === 'Paired Bar') {
       newConfig.runtime.xAxis = newConfig.yAxis
       newConfig.runtime.yAxis = newConfig.xAxis
       newConfig.runtime.horizontal = true
@@ -328,6 +376,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
     data.forEach(row => {
       const value = row[columnName]
+      //@ts-ignore
       if (value && false === values.includes(value)) {
         values.push(value)
       }
@@ -352,7 +401,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   }
 
   // Observes changes to outermost container and changes viewport size in state
-  const resizeObserver: ResizeObserver = new ResizeObserver(entries => {
+  const resizeObserver = new ResizeObserver(entries => {
     for (let entry of entries) {
       let { width, height } = entry.contentRect
       let newViewport = getViewport(width)
@@ -381,7 +430,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     }
 
     setContainer(node)
-  }, [])
+  }, []) // eslint-disable-line
 
   function isEmpty(obj) {
     return Object.keys(obj).length === 0
@@ -390,7 +439,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   // Load data when component first mounts
   useEffect(() => {
     loadConfig()
-  }, [])
+  }, []) // eslint-disable-line
 
   /**
    * When cove has a config and container ref publish the cove_loaded event.
@@ -400,7 +449,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       publish('cove_loaded', { config: config })
       setCoveLoadedEventRan(true)
     }
-  }, [container, config])
+  }, [container, config]) // eslint-disable-line
 
   /**
    * Handles filter change events outside of COVE
@@ -408,13 +457,13 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
    * Another useEffect listens to externalFilterChanges and updates the config.
    */
   useEffect(() => {
-    const handleFilterData = (e: CustomEvent) => {
+    const handleFilterData = e => {
       let tmp = []
       tmp.push(e.detail)
       setExternalFilters(tmp)
     }
 
-    subscribe('cove_filterData', (e: CustomEvent) => handleFilterData(e))
+    subscribe('cove_filterData', e => handleFilterData(e))
 
     return () => {
       unsubscribe('cove_filterData', handleFilterData)
@@ -443,19 +492,22 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       setConfig(newConfigHere)
       setFilteredData(filterData(externalFilters, excludedData))
     }
-  }, [externalFilters])
+  }, [externalFilters]) // eslint-disable-line
 
   // Load data when configObj data changes
   if (configObj) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
       loadConfig()
-    }, [configObj.data])
+    }, [configObj.data]) // eslint-disable-line
   }
 
   // Generates color palette to pass to child chart component
   useEffect(() => {
     if (stateData && config.xAxis && config.runtime.seriesKeys) {
-      let palette = config.customColors || colorPalettes[config.palette]
+      const configPalette = config.visualizationType === 'Paired Bar' || config.visualizationType === 'Deviation Bar' ? config.twoColor.palette : config.palette
+      const allPalettes = { ...colorPalettes, ...twoColorPalette }
+      let palette = config.customColors || allPalettes[configPalette]
       let numberOfKeys = config.runtime.seriesKeys.length
       let newColorScale
 
@@ -478,7 +530,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     if (config && stateData && config.sortData) {
       stateData.sort(sortData)
     }
-  }, [config, stateData])
+  }, [config, stateData]) // eslint-disable-line
 
   // Called on legend click, highlights/unhighlights the data series with the given label
   const highlight = label => {
@@ -523,7 +575,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
   const section = config.orientation === 'horizontal' ? 'yAxis' : 'xAxis'
 
-  const parseDate = (dateString: string) => {
+  const parseDate = dateString => {
     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.`
@@ -533,48 +585,37 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     }
   }
 
-  const formatDate = (date: Date) => {
+  const formatDate = date => {
     return timeFormat(config.runtime[section].dateDisplayFormat)(date)
   }
 
-  const DownloadButton = ({ data }: any, type = 'link') => {
-    const fileName = `${config.title.substring(0, 50)}.csv`
+  // function calculates the width of given text and its font-size
+  function getTextWidth(text, font) {
+    const canvas = document.createElement('canvas')
+    const context = canvas.getContext('2d')
 
-    const csvData = Papa.unparse(data)
+    context.font = font || getComputedStyle(document.body).font
 
-    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>
-      )
-    }
+    return Math.ceil(context.measureText(text).width)
   }
 
   // Format numeric data based on settings in config
   const formatNumber = (num, axis) => {
     // if num is NaN return num
     if (isNaN(num) || !num) return num
+    // Check if the input number is negative
+    const isNegative = num < 0
+
+    // If the input number is negative, take the absolute value
+    if (isNegative) {
+      num = Math.abs(num)
+    }
 
     // destructure dataFormat values
     let {
-      dataFormat: { commas, abbreviated, roundTo, prefix, suffix, rightRoundTo, rightPrefix, rightSuffix }
+      dataFormat: { commas, abbreviated, roundTo, prefix, suffix, rightRoundTo, bottomRoundTo, rightPrefix, rightSuffix, bottomPrefix, bottomSuffix, bottomAbbreviated }
     } = config
+
     let formatSuffix = format('.2s')
 
     // check if value contains comma and remove it. later will add comma below.
@@ -582,14 +623,15 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
     let original = num
     let stringFormattingOptions
-
-    if (axis !== 'right') {
+    if (axis === 'left') {
       stringFormattingOptions = {
         useGrouping: config.dataFormat.commas ? true : false,
         minimumFractionDigits: roundTo ? Number(roundTo) : 0,
         maximumFractionDigits: roundTo ? Number(roundTo) : 0
       }
-    } else {
+    }
+
+    if (axis === 'right') {
       stringFormattingOptions = {
         useGrouping: config.dataFormat.rightCommas ? true : false,
         minimumFractionDigits: rightRoundTo ? Number(rightRoundTo) : 0,
@@ -597,6 +639,14 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       }
     }
 
+    if (axis === 'bottom') {
+      stringFormattingOptions = {
+        useGrouping: config.dataFormat.bottomCommas ? true : false,
+        minimumFractionDigits: bottomRoundTo ? Number(bottomRoundTo) : 0,
+        maximumFractionDigits: bottomRoundTo ? Number(bottomRoundTo) : 0
+      }
+    }
+
     num = numberFromString(num)
 
     if (isNaN(num)) {
@@ -617,8 +667,11 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     // 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
+    //
+    // Edge case for small numbers with decimals
+    // - if roundTo undefined which means it is blank, then do not round
+    if ((axis === 'left' && commas && abbreviated) || (axis === 'bottom' && commas && abbreviated)) {
+      num = num // eslint-disable-line
     } else {
       num = num.toLocaleString('en-US', stringFormattingOptions)
     }
@@ -628,11 +681,11 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       num = formatSuffix(parseFloat(num)).replace('G', 'B')
     }
 
-    if (abbreviated && axis === 'bottom') {
+    if (bottomAbbreviated && axis === 'bottom') {
       num = formatSuffix(parseFloat(num)).replace('G', 'B')
     }
 
-    if (prefix && axis !== 'right') {
+    if (prefix && axis === 'left') {
       result += prefix
     }
 
@@ -640,9 +693,13 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       result += rightPrefix
     }
 
+    if (bottomPrefix && axis === 'bottom') {
+      result += bottomPrefix
+    }
+
     result += num
 
-    if (suffix && axis !== 'right') {
+    if (suffix && axis === 'left') {
       result += suffix
     }
 
@@ -650,6 +707,13 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       result += rightSuffix
     }
 
+    if (bottomSuffix && axis === 'bottom') {
+      result += bottomSuffix
+    }
+    if (isNegative) {
+      result = '-' + result
+    }
+
     return String(result)
   }
 
@@ -660,7 +724,10 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     Line: <LinearChart />,
     Combo: <LinearChart />,
     Pie: <PieChart />,
-    'Box Plot': <LinearChart />
+    'Box Plot': <LinearChart />,
+    'Area Chart': <LinearChart />,
+    'Scatter Plot': <LinearChart />,
+    'Deviation Bar': <LinearChart />
   }
 
   const missingRequiredSections = () => {
@@ -692,7 +759,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
           <div className='cdc-chart-inner-container'>
             {/* Title */}
 
-            {title && (
+            {title && config.showTitle && (
               <div role='heading' className={`chart-title ${config.theme} cove-component__header`} aria-level={2}>
                 {config && <sup className='superTitle'>{parse(config.superTitle || '')}</sup>}
                 <div>{parse(title)}</div>
@@ -706,7 +773,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
             {/* Visualization */}
             {config?.introText && <section className='introText'>{parse(config.introText)}</section>}
             <div
-              style={{ marginBottom: config.legend.position !== 'bottom' && config.orientation === 'horizontal' ? `${config.runtime.xAxis.size}px` : '0px' }}
+              style={{ marginBottom: config.legend.position !== 'bottom' && currentViewport !== 'sm' && currentViewport !== 'xs' && 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 */}
@@ -750,8 +817,8 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     )
   }
 
-  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 => (config.runtime.xAxis.type === 'date' ? parseDate(d[config.runtime.originalXAxis.dataKey]).getTime() : d[config.runtime.originalXAxis.dataKey])
+  const getYAxisData = (d, seriesKey) => d[seriesKey]
 
   const contextValues = {
     getXAxisData,
@@ -785,7 +852,12 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     dynamicLegendItems,
     setDynamicLegendItems,
     filterData,
-    imageId
+    imageId,
+    handleLineType,
+    isNumber,
+    cleanData,
+    getTextWidth,
+    twoColorPalette
   }
 
   const classes = ['cdc-open-viz-module', 'type-chart', `${currentViewport}`, `font-${config.fontSize}`, `${config.theme}`]
@@ -795,10 +867,10 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   isEditor && classes.push('isEditor')
 
   return (
-    <Context.Provider value={contextValues}>
+    <ConfigContext.Provider value={contextValues}>
       <div className={`${classes.join(' ')}`} ref={outerContainerRef} data-lollipop={config.isLollipopChart} data-download-id={imageId}>
         {body}
       </div>
-    </Context.Provider>
+    </ConfigContext.Provider>
   )
 }