@cdc/chart 4.23.10 → 4.24.1

package/index.html

@@ -34,19 +34,20 @@
   -->
 
   <!-- GENERIC CHART TYPES -->
-  <!-- <div class="react-container" data-config="/examples/private/line-breaks.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/private/combo.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/feature/legend-highlights/highlights.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/private/tooltip-issue.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/private/prod-line-config.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/private/chart-t.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/feature/bar/additional-column-tooltip.json"></div> -->
   <!-- <div class="react-container" data-config="https://cdc.gov/poxvirus/mpox/modules/data-viz/mpx-trends_1.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-date-city-temperature.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-date-apple.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-stacked.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/feature/forest-plot/linear.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/feature/forest-plot/logarithmic.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/forest-plot/forest-plot.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/pie/planet-pie-example-config.json"></div> -->
   <!-- <div class="react-container" data-config=https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Line_Chart_Viz.json></div> -->
+  <!-- <div class="react-container" data-config=/examples/feature/regions/index.json></div> -->
+  <!-- <div class="react-container" data-config=https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Line_Chart_Regions_Viz.json></div> -->
   <!-- <div class="react-container" data-config=https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Line_Chart_Regions_Viz.json></div> -->
-  <!-- <div class="react-container" data-config="/examples/feature/line/line-chart.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/effective_reproduction.json"></div> -->
@@ -69,7 +70,7 @@
   <!-- <div class="react-container" data-config="/examples/feature/bar/planet-chart-horizontal-example-config.json"></div> -->
 
   <!-- SPARKLINE -->
-  <!-- <div class="react-container" data-config="/examples/feature/sparkline/example-sparkline.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/feature/dev-4261.json"></div> -->
 
   <!-- TESTS DATA TABLE SORTING  -->
   <!-- Bar Chart with Confidence Intervals (bottom of page)  -->
@@ -103,6 +104,7 @@
   <!-- <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/bar/lollipop.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/stacked-vertical-bar-example-nonnumerics.json"></div> -->
 
   <!-- TESTS CUTOFF -->
@@ -121,6 +123,8 @@
 
   <!-- GENERIC CHART TYPES  -->
   <!-- <div class="react-container" data-config="/examples/gallery/paired-bar/paired-bar-chart.json"></div> -->
+    <div class="react-container" data-config="/examples/feature/line/line-chart-preliminary.json"></div>
+
 
   <!-- HORIZONTAL BAR CHARTS -->
   <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-bar-chart-with-numbers-on-bar.json"></div> -->
@@ -133,7 +137,7 @@
   <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-confidence.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart.json"></div> -->
-  <div class="react-container" data-config="https://www.cdc.gov/respiratory-viruses/modules/respiratory-virus-activity/emergency-dept-visits_live.json"></div>
+  <!-- <div class="react-container" data-config="https://www.cdc.gov/respiratory-viruses/modules/respiratory-virus-activity/emergency-dept-visits_live.json"></div> -->
 
   <noscript>You need to enable JavaScript to run this app.</noscript>
 </body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/chart",
-  "version": "4.23.10",
+  "version": "4.24.1",
   "description": "React component for visualizing tabular data in various types of charts",
   "moduleName": "CdcChart",
   "main": "dist/cdcchart",
@@ -48,7 +48,7 @@
     "js-base64": "^2.5.2",
     "papaparse": "^5.3.0",
     "react-accessible-accordion": "^3.3.4",
-    "react-icons": "^4.10.1",
+    "react-icons": "^4.11.0",
     "react-spring": "^8.0.27",
     "react-table": "^7.5.0",
     "react-tooltip": "5.8.2-beta.3",
@@ -59,7 +59,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "ff5b1ca0c84bb0629bc69e5a26a4a81254dbf69f",
+  "gitHead": "a352a3f74f4b681191e3244061dbb3621f36eec3",
   "devDependencies": {
     "resize-observer-polyfill": "^1.5.1"
   }

package/src/CdcChart.tsx

@@ -12,19 +12,27 @@ import { timeParse, timeFormat } from 'd3-time-format'
 import Papa from 'papaparse'
 import parse from 'html-react-parser'
 import 'react-tooltip/dist/react-tooltip.css'
-import chroma from 'chroma-js'
 
 // Primary Components
 import ConfigContext from './ConfigContext'
-import PieChart from './components/PieChart'
+import PieChart from './components/PieChart/PieChart'
 import LinearChart from './components/LinearChart'
 
 import { colorPalettesChart as colorPalettes, twoColorPalette } from '@cdc/core/data/colorPalettes'
 
-import SparkLine from './components/SparkLine'
+import SparkLine from './components/Sparkline'
 import Legend from './components/Legend'
 import defaults from './data/initial-state'
 import EditorPanel from './components/EditorPanel'
+import { abbreviateNumber } from './helpers/abbreviateNumber'
+import { getQuartiles } from './helpers/getQuartiles'
+import { sortAsc, sortDesc } from './helpers/sort'
+import { filterData } from './helpers/filterData'
+import { handleChartAriaLabels } from './helpers/handleChartAriaLabels'
+import { lineOptions } from './helpers/lineOptions'
+import { handleLineType } from './helpers/handleLineType'
+import { generateColorsArray } from './helpers/generateColorsArray'
+import { computeMarginBottom } from './helpers/computeMarginBottom'
 import Loading from '@cdc/core/components/Loading'
 import Filters from '@cdc/core/components/Filters'
 import MediaControls from '@cdc/core/components/MediaControls'
@@ -43,36 +51,7 @@ import './scss/main.scss'
 // load both then config below determines which to use
 import DataTable from '@cdc/core/components/DataTable'
 import { getFileExtension } from '@cdc/core/helpers/getFileExtension'
-
-const generateColorsArray = (color = '#000000', special = false) => {
-  let colorObj = chroma(color)
-  let hoverColor = special ? colorObj.brighten(0.5).hex() : colorObj.saturate(1.3).hex()
-
-  return [color, hoverColor, colorObj.darken(0.3).hex()]
-}
-const hashObj = row => {
-  try {
-    if (!row) throw new Error('No row supplied to hashObj')
-
-    let str = JSON.stringify(row)
-    let hash = 0
-
-    if (str.length === 0) return hash
-
-    for (let i = 0; i < str.length; i++) {
-      let char = str.charCodeAt(i)
-      hash = (hash << 5) - hash + char
-      hash = hash & hash
-    }
-
-    return hash
-  } catch (e) {
-    console.error('COVE: ', e) // eslint-disable-line
-  }
-}
-
-// * FILE REVIEW
-// TODO: @tturnerswdev33 - remove/fix mentions of runtimeLegend that were added
+import Title from '@cdc/core/components/ui/Title'
 
 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()
@@ -90,7 +69,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   const [coveLoadedEventRan, setCoveLoadedEventRan] = useState(false)
   const [dynamicLegendItems, setDynamicLegendItems] = useState<any[]>([])
   const [imageId] = useState(`cove-${Math.random().toString(16).slice(-4)}`)
-
+  type Config = typeof config
   let legendMemo = useRef(new Map()) // map collection
   let innerContainerRef = useRef()
 
@@ -110,37 +89,9 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
   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) // eslint-disable-line
-    try {
-      if (!state.visualizationType) throw Error('handleChartAriaLabels: no visualization type found in state')
-      let ariaLabel = ''
-
-      if (state.visualizationType) {
-        ariaLabel += `${state.visualizationType} chart`
-      }
-
-      if (state.title && state.visualizationType) {
-        ariaLabel += ` with the title: ${state.title}`
-      }
-
-      return ariaLabel
-    } catch (e) {
-      console.error('COVE: ', e.message) // eslint-disable-line
-    }
-  }
-
   const reloadURLData = async () => {
     if (config.dataUrl) {
-      const dataUrl = new URL(config.runtimeDataUrl || config.dataUrl)
+      const dataUrl = new URL(config.runtimeDataUrl || config.dataUrl, window.location.origin)
       let qsParams = Object.fromEntries(new URLSearchParams(dataUrl.search))
 
       let isUpdateNeeded = false
@@ -165,7 +116,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       let data: any[] = []
 
       try {
-        const ext = getFileExtension(dataUrl.pathname)
+        const ext = getFileExtension(dataUrl.href)
         if ('csv' === ext) {
           data = await fetch(dataUrlFinal)
             .then(response => response.text())
@@ -204,44 +155,6 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     }
   }
 
-  const handleLineType = lineType => {
-    switch (lineType) {
-      case 'dashed-sm':
-        return '5 5'
-      case 'Dashed Small':
-        return '5 5'
-      case 'dashed-md':
-        return '10 5'
-      case 'Dashed Medium':
-        return '10 5'
-      case 'dashed-lg':
-        return '15 5'
-      case 'Dashed Large':
-        return '15 5'
-      default:
-        return 0
-    }
-  }
-
-  const lineOptions = [
-    {
-      value: 'Dashed Small',
-      key: 'dashed-sm'
-    },
-    {
-      value: 'Dashed Medium',
-      key: 'dashed-md'
-    },
-    {
-      value: 'Dashed Large',
-      key: 'dashed-lg'
-    },
-    {
-      value: 'Solid Line',
-      key: 'solid-line'
-    }
-  ]
-
   const loadConfig = async () => {
     let response = configObj || (await (await fetch(configUrl)).json())
 
@@ -310,8 +223,13 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
     newConfig.series.map(series => {
       if (!series.tooltip) series.tooltip = true
+      if (!series.axis) series.axis = 'Left'
     })
 
+    if (!newConfig.data && data) {
+      newConfig.data = data
+    }
+
     const processedConfig = { ...(await coveUpdateWorker(newConfig)) }
 
     updateConfig(processedConfig, data)
@@ -409,37 +327,6 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       let tableData: any[] = []
       const plots: any[] = []
 
-      /**
-       * Calculates the first quartile (q1) and third quartile (q3) from an array of integers or decimals.
-       *
-       * @param {Array} arr - The array of integers or decimals.
-       * @returns {Object} An object containing the q1 and q3 values.
-       */
-      const getQuartiles = arr => {
-        arr.sort((a, b) => a - b)
-
-        // Calculate the index of the median value of the array
-        const medianIndex = Math.floor(arr.length / 2)
-
-        // Check if the length of the array is even or odd
-        const isEvenLength = arr.length % 2 === 0
-
-        // Split the array into two subarrays based on the median index
-        const q1Array = isEvenLength ? arr.slice(0, medianIndex) : arr.slice(0, medianIndex + 1)
-        const q3Array = isEvenLength ? arr.slice(medianIndex) : arr.slice(medianIndex + 1)
-
-        // Calculate the median of the first subarray to get the q1 value
-        const q1Index = Math.floor(q1Array.length / 2)
-        const q1 = isEvenLength ? (q1Array[q1Index - 1] + q1Array[q1Index]) / 2 : q1Array[q1Index]
-
-        // Calculate the median of the second subarray to get the q3 value
-        const q3Index = Math.floor(q3Array.length / 2)
-        const q3 = isEvenLength ? (q3Array[q3Index - 1] + q3Array[q3Index]) / 2 : q3Array[q3Index]
-
-        // Return an object containing the q1 and q3 values
-        return { q1, q3 }
-      }
-
       // group specific statistics
       // prevent re-renders
       if (!groups) return
@@ -563,7 +450,8 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     if ((newConfig.visualizationType === 'Bar' && newConfig.orientation === 'horizontal') || ['Deviation Bar', 'Paired Bar', 'Forest Plot'].includes(newConfig.visualizationType)) {
       newConfig.runtime.xAxis = newConfig.yAxis
       newConfig.runtime.yAxis = newConfig.xAxis
-      newConfig.runtime.horizontal = true
+
+      newConfig.runtime.horizontal = false
       newConfig.orientation = 'horizontal'
     } else if (['Box Plot', 'Scatter Plot', 'Area Chart', 'Line', 'Forecasting'].includes(newConfig.visualizationType)) {
       newConfig.runtime.xAxis = newConfig.xAxis
@@ -581,25 +469,6 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     setConfig(newConfig)
   }
 
-  const filterData = (filters, data) => {
-    let filteredData: any[] = []
-
-    data.forEach(row => {
-      let add = true
-      filters
-        .filter(filter => filter.type !== 'url')
-        .forEach(filter => {
-          if (row[filter.columnName] != filter.active) {
-            add = false
-          }
-        })
-
-      if (add) filteredData.push(row)
-    })
-
-    return filteredData
-  }
-
   // Gets filter values from dataset
   const generateValuesForFilter = (columnName, data = this.state.data) => {
     const values: any[] = []
@@ -739,7 +608,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   // Generates color palette to pass to child chart component
   useEffect(() => {
     if (stateData && config.xAxis && config.runtime.seriesKeys) {
-      const configPalette = config.visualizationType === 'Paired Bar' || config.visualizationType === 'Deviation Bar' ? config.twoColor.palette : config.palette
+      const configPalette = config.customColors ? config.customColors : 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
@@ -754,7 +623,8 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       newColorScale = () =>
         scaleOrdinal({
           domain: config.runtime.seriesLabelsAll,
-          range: palette
+          range: palette,
+          unknown: null
         })
 
       setColorScale(newColorScale)
@@ -856,24 +726,6 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     return Math.ceil(context.measureText(text).width)
   }
 
-  const abbreviateNumber = num => {
-    let unit = ''
-    let absNum = Math.abs(num)
-
-    if (absNum >= 1e9) {
-      unit = 'B'
-      num = num / 1e9
-    } else if (absNum >= 1e6) {
-      unit = 'M'
-      num = num / 1e6
-    } else if (absNum >= 1e3) {
-      unit = 'K'
-      num = num / 1e3
-    }
-
-    return num + unit
-  }
-
   // Format numeric data based on settings in config OR from passed in settings for Additional Columns
   // - use only for old horizontal data - newer formatNumber is in helper/formatNumber
   // TODO: we should combine various formatNumber functions across this project.
@@ -925,11 +777,17 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       }
     }
 
+    const resolveBottomTickRounding = () => {
+      if (config.forestPlot.type === 'Logarithmic' && !bottomRoundTo) return 2
+      if (Number(bottomRoundTo)) return Number(bottomRoundTo)
+      return 0
+    }
+
     if (axis === 'bottom') {
       stringFormattingOptions = {
         useGrouping: config.dataFormat.bottomCommas ? true : false,
-        minimumFractionDigits: bottomRoundTo ? Number(bottomRoundTo) : 0,
-        maximumFractionDigits: bottomRoundTo ? Number(bottomRoundTo) : 0
+        minimumFractionDigits: resolveBottomTickRounding(),
+        maximumFractionDigits: resolveBottomTickRounding()
       }
     }
 
@@ -1127,18 +985,6 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
         return generateColorsArray(mapColorPalette[3])
       }
 
-      let hash = hashObj(rowObj)
-
-      if (legendMemo.current.has(hash)) {
-        let idx = legendMemo.current.get(hash)
-        if (runtimeLegend[idx]?.disabled) return false
-
-        // DEV-784 changed to use bin prop to get color instead of idx
-        // bc we re-order legend when showSpecialClassesLast is checked
-        let legendBinColor = runtimeLegend.find(o => o.bin === idx)?.color
-        return generateColorsArray(legendBinColor, runtimeLegend[idx]?.special)
-      }
-
       // Fail state
       return generateColorsArray()
     } catch (e) {
@@ -1173,13 +1019,8 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
         {isEditor && <EditorPanel />}
         {!missingRequiredSections() && !config.newViz && (
           <div className='cdc-chart-inner-container'>
-            {/* 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>
-              </div>
-            )}
+            <Title showTitle={config.showTitle} isDashboard={isDashboard} title={title} superTitle={config.superTitle} classes={['chart-title', `${config.theme}`, 'cove-component__header']} style={undefined} />
+
             <a id='skip-chart-container' className='cdcdataviz-sr-only-focusable' href={handleChartTabbing}>
               Skip Over Chart Container
             </a>
@@ -1188,8 +1029,8 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
             {/* Visualization */}
             {config?.introText && config.visualizationType !== 'Spark Line' && <section className='introText'>{parse(config.introText)}</section>}
             <div
-              style={{ marginBottom: config.legend.position !== 'bottom' && config.orientation === 'horizontal' ? `${config.runtime.xAxis.size}px` : '0px' }}
-              className={`chart-container  p-relative ${config.legend.position === 'bottom' ? 'bottom' : ''}${config.legend.hide ? ' legend-hidden' : ''}${lineDatapointClass}${barBorderClass} ${contentClasses.join(' ')}`}
+              style={{ marginBottom: computeMarginBottom(config, legend, currentViewport) }}
+              className={`chart-container  p-relative ${config.legend.position === 'bottom' ? 'bottom' : ''}${config.legend.hide ? ' legend-hidden' : ''}${lineDatapointClass}${barBorderClass} ${contentClasses.join(' ')} ${isDebug ? 'debug' : ''}`}
             >
               {/* All charts except sparkline */}
               {config.visualizationType !== 'Spark Line' && chartComponents[config.visualizationType]}
@@ -1212,7 +1053,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
                   )}
                 </>
               )}
-              {!config.legend.hide && config.visualizationType !== 'Spark Line' && <Legend />}
+              {!config.legend.hide && config.visualizationType !== 'Spark Line' && config.visualizationType !== 'Forest Plot' && <Legend />}
             </div>
             {/* Link */}
             {isDashboard && config.table && config.table.show && config.table.showDataTableLink ? tableLink : link && link}
@@ -1231,11 +1072,9 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
               <DataTable
                 config={config}
                 rawData={config.data}
-                runtimeData={filteredData || excludedData}
+                runtimeData={transform.applySuppression(filteredData || excludedData, config.suppressedData)}
                 expandDataTable={config.table.expanded}
                 columns={config.columns}
-                showDownloadButton={config.general.showDownloadButton}
-                runtimeLegend={dynamicLegendItems}
                 displayDataAsText={displayDataAsText}
                 displayGeoName={displayGeoName}
                 applyLegendToRow={applyLegendToRow}
@@ -1243,18 +1082,8 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
                 indexTitle={config.table.indexLabel}
                 vizTitle={title}
                 viewport={currentViewport}
-                parseDate={parseDate}
-                formatDate={formatDate}
-                formatNumber={formatNumber}
                 tabbingId={handleChartTabbing}
-                showDownloadImgButton={config.showDownloadImgButton}
-                showDownloadPdfButton={config.showDownloadPdfButton}
-                innerContainerRef={innerContainerRef}
-                outerContainerRef={outerContainerRef}
-                imageRef={imageId}
                 colorScale={colorScale}
-                isDebug={isDebug}
-                isEditor={isEditor}
               />
             )}
             {config?.footnotes && <section className='footnotes'>{parse(config.footnotes)}</section>}
@@ -1274,6 +1103,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
   const contextValues = {
     capitalize,
+    computeMarginBottom,
     getXAxisData,
     getYAxisData,
     config,
@@ -1316,7 +1146,8 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     isDebug,
     setSharedFilter,
     setSharedFilterValue,
-    dashboardConfig
+    dashboardConfig,
+    debugSvg: isDebug
   }
 
   const classes = ['cdc-open-viz-module', 'type-chart', `${currentViewport}`, `font-${config.fontSize}`, `${config.theme}`]

package/src/ConfigContext.tsx

@@ -0,0 +1,6 @@
+import { createContext } from 'react'
+import { ChartContext } from './types/ChartContext'
+
+const ConfigContext = createContext({} as ChartContext)
+
+export default ConfigContext