@cdc/chart 4.23.11 → 4.24.2

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'
@@ -44,23 +52,19 @@ import './scss/main.scss'
 import DataTable from '@cdc/core/components/DataTable'
 import { getFileExtension } from '@cdc/core/helpers/getFileExtension'
 import Title from '@cdc/core/components/ui/Title'
-
-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()]
-}
+import { ChartConfig } from './types/ChartConfig'
+import { Label } from './types/Label'
+import { isSolrCsv, isSolrJson } from '@cdc/core/helpers/isSolr'
 
 export default function CdcChart({ configUrl, config: configObj, isEditor = false, isDebug = false, isDashboard = false, setConfig: setParentConfig, setEditing, hostname, link, setSharedFilter, setSharedFilterValue, dashboardConfig }) {
   const transform = new DataTransform()
   const [loading, setLoading] = useState(true)
   const [colorScale, setColorScale] = useState(null)
-  const [config, setConfig] = useState<any>({})
+  const [config, setConfig] = useState<ChartConfig>({} as ChartConfig)
   const [stateData, setStateData] = useState(config.data || [])
   const [excludedData, setExcludedData] = useState<Record<string, number>[] | undefined>(undefined)
   const [filteredData, setFilteredData] = useState<Record<string, any>[] | undefined>(undefined)
-  const [seriesHighlight, setSeriesHighlight] = useState<any[]>([])
+  const [seriesHighlight, setSeriesHighlight] = useState<string[]>([])
   const [currentViewport, setCurrentViewport] = useState('lg')
   const [dimensions, setDimensions] = useState<[number?, number?]>([])
   const [externalFilters, setExternalFilters] = useState<any[]>()
@@ -88,41 +92,13 @@ 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, window.location.origin)
       let qsParams = Object.fromEntries(new URLSearchParams(dataUrl.search))
 
       let isUpdateNeeded = false
-      config.filters.forEach(filter => {
+      config.filters?.forEach(filter => {
         if (filter.type === 'url' && qsParams[filter.queryParameter] !== decodeURIComponent(filter.active)) {
           qsParams[filter.queryParameter] = filter.active
           isUpdateNeeded = true
@@ -143,8 +119,8 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       let data: any[] = []
 
       try {
-        const ext = getFileExtension(dataUrl.pathname)
-        if ('csv' === ext) {
+        const ext = getFileExtension(dataUrl.href)
+        if ('csv' === ext || isSolrCsv(dataUrlFinal)) {
           data = await fetch(dataUrlFinal)
             .then(response => response.text())
             .then(responseText => {
@@ -155,7 +131,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
               })
               return parsedCsv.data
             })
-        } else if ('json' === ext) {
+        } else if ('json' === ext || isSolrJson(dataUrlFinal)) {
           data = await fetch(dataUrlFinal).then(response => response.json())
         } else {
           data = []
@@ -182,44 +158,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())
 
@@ -231,7 +169,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     if (response.dataUrl && !urlFilters) {
       try {
         const ext = getFileExtension(response.dataUrl)
-        if ('csv' === ext) {
+        if ('csv' === ext || isSolrCsv(response.dataUrl)) {
           data = await fetch(response.dataUrl + `?v=${cacheBustingString()}`)
             .then(response => response.text())
             .then(responseText => {
@@ -254,7 +192,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
             })
         }
 
-        if ('json' === ext) {
+        if ('json' === ext || isSolrJson(response.dataUrl)) {
           data = await fetch(response.dataUrl + `?v=${cacheBustingString()}`).then(response => response.json())
         }
       } catch {
@@ -359,6 +297,16 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       setFilteredData(currentData)
     }
 
+    if (!['Area Chart', 'Bar', 'Line', 'Combo'].includes(newConfig.visualizationType) || newConfig.orientation === 'horizontal') {
+      newConfig.xAxis.sortDates = false
+    }
+
+    if (newConfig.xAxis.sortDates && newConfig.barThickness > 0.1) {
+      newConfig.barThickness = 0.035
+    } else if (!newConfig.xAxis.sortDates && newConfig.barThickness < 0.1) {
+      newConfig.barThickness = 0.35
+    }
+
     //Enforce default values that need to be calculated at runtime
     newConfig.runtime = {}
     newConfig.runtime.seriesLabels = {}
@@ -392,37 +340,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
@@ -522,6 +439,9 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
         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 === 'Combo') {
+          series.type = 'Bar'
+        }
       })
     }
 
@@ -544,14 +464,10 @@ 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.xAxis = newConfig.yAxis['yAxis'] ? newConfig.yAxis['yAxis'] : newConfig.yAxis
+      newConfig.runtime.yAxis = newConfig.xAxis['xAxis'] ? newConfig.xAxis['xAxis'] : newConfig.xAxis
 
-      if (newConfig.visualizationType === 'Forest Plot') {
-        newConfig.runtime.xAxis.type = newConfig.forestPlot.type
-        newConfig.runtime.xAxis.tickRotation = newConfig.xAxis.tickRotation
-      }
-      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
@@ -563,31 +479,13 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       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.' : ''
 
     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[] = []
@@ -726,9 +624,9 @@ 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.customColors ? config.customColors : config.visualizationType === 'Paired Bar' || config.visualizationType === 'Deviation Bar' ? config.twoColor.palette : config.palette
-      const allPalettes = { ...colorPalettes, ...twoColorPalette }
+    if (stateData && config.xAxis && config.runtime?.seriesKeys) {
+      const configPalette = ['Paired Bar', 'Deviation Bar'].includes(config.visualizationType) ? config.twoColor.palette : config.palette
+      const allPalettes: Record<string, string[]> = { ...colorPalettes, ...twoColorPalette }
       let palette = config.customColors || allPalettes[configPalette]
       let numberOfKeys = config.runtime.seriesKeys.length
       let newColorScale
@@ -756,27 +654,22 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   }, [config, stateData]) // eslint-disable-line
 
   // Called on legend click, highlights/unhighlights the data series with the given label
-  const highlight = label => {
-    const newSeriesHighlight: any[] = []
-
+  const highlight = (label: Label) => {
     // If we're highlighting all the series, reset them
     if (seriesHighlight.length + 1 === config.runtime.seriesKeys.length && config.visualizationType !== 'Forecasting') {
       highlightReset()
       return
     }
 
-    seriesHighlight.forEach(value => {
-      newSeriesHighlight.push(value)
-    })
+    const newSeriesHighlight = [...seriesHighlight]
 
     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
+      config.runtime.seriesKeys.forEach(key => {
+        if (config.runtime.seriesLabels[key] === label.datum) {
+          newHighlight = key
         }
-      }
+      })
     }
 
     if (newSeriesHighlight.indexOf(newHighlight) !== -1) {
@@ -832,6 +725,10 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     return timeFormat(config.runtime[section].dateDisplayFormat)(date)
   }
 
+  const formatTooltipsDate = date => {
+    return timeFormat(config.tooltips.dateDisplayFormat)(date)
+  }
+
   // function calculates the width of given text and its font-size
   function getTextWidth(text, font) {
     const canvas = document.createElement('canvas')
@@ -845,24 +742,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.
@@ -914,11 +793,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()
       }
     }
 
@@ -1136,61 +1021,6 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     return key
   }
 
-  const computeMarginBottom = (config: Config): string => {
-    const isLegendBottom = legend.position === 'bottom' || ['sm', 'xs', 'xxs'].includes(currentViewport)
-    const isHorizontal = config.orientation === 'horizontal'
-    const tickRotation = Number(config.xAxis.tickRotation) > 0 ? Number(config.xAxis.tickRotation) : 0
-    const isBrush = config.brush.active
-    const offset = 20
-    const brushHeight = config.brush.height
-    let bottom = 0
-    if (!isLegendBottom && isHorizontal && !config.yAxis.label) {
-      bottom = Number(config.xAxis.labelOffset)
-    }
-    if (!isLegendBottom && isHorizontal && config.yAxis.label && !config.isResponsiveTicks) {
-      bottom = Number(config.runtime.xAxis.size) + Number(config.xAxis.labelOffset)
-    }
-    if (!isLegendBottom && isHorizontal && config.yAxis.label && config.isResponsiveTicks) {
-      bottom = config.dynamicMarginTop + offset
-    }
-    if (!isLegendBottom && isHorizontal && !config.yAxis.label && config.isResponsiveTicks) {
-      bottom = config.dynamicMarginTop ? config.dynamicMarginTop - offset : Number(config.xAxis.labelOffset) - offset
-    }
-    if (!isLegendBottom && isHorizontal && config.yAxis.label && config.isResponsiveTicks) {
-      bottom = config.dynamicMarginTop ? config.dynamicMarginTop + offset : Number(config.xAxis.labelOffset)
-    }
-
-    if (!isHorizontal && !isLegendBottom && config.xAxis.label && tickRotation && !config.isResponsiveTicks) {
-      bottom = isBrush ? brushHeight + config.xAxis.tickWidthMax + -config.xAxis.size + config.xAxis.labelOffset + offset : config.xAxis.tickWidthMax + offset + -config.xAxis.size + config.xAxis.labelOffset
-    }
-    if (!isHorizontal && !isLegendBottom && !config.xAxis.label && tickRotation && !config.isResponsiveTicks) {
-    }
-    if (!isHorizontal && !isLegendBottom && !config.xAxis.label && tickRotation && !config.dynamicMarginTop && !config.isResponsiveTicks) {
-      bottom = isBrush ? config.xAxis.tickWidthMax + brushHeight + offset + -config.xAxis.size : 0
-    }
-
-    if (!isHorizontal && !isLegendBottom && config.xAxis.label && !tickRotation && !config.isResponsiveTicks) {
-      bottom = isBrush ? brushHeight + -config.xAxis.size + config.xAxis.labelOffset + offset : -config.xAxis.size + config.xAxis.labelOffset + offset
-    }
-    if (!isHorizontal && !isLegendBottom && config.xAxis.label && config.dynamicMarginTop && config.isResponsiveTicks) {
-      bottom = isBrush ? brushHeight + config.xAxis.labelOffset + -config.xAxis.size + config.xAxis.tickWidthMax : config.dynamicMarginTop + -config.xAxis.size + offset
-    }
-    if (!isHorizontal && !isLegendBottom && !config.xAxis.label && config.dynamicMarginTop && config.isResponsiveTicks) {
-      bottom = isBrush ? brushHeight + config.xAxis.labelOffset + -config.xAxis.size + config.xAxis.tickWidthMax : config.dynamicMarginTop + -config.xAxis.size - offset
-    }
-    if (!isHorizontal && !isLegendBottom && config.xAxis.label && !config.dynamicMarginTop && config.isResponsiveTicks) {
-      bottom = isBrush ? brushHeight + config.xAxis.labelOffset + -config.xAxis.size + 25 : config.xAxis.labelOffset + -config.xAxis.size + offset
-    }
-    if (!isHorizontal && !isLegendBottom && !config.xAxis.label && !config.dynamicMarginTop && config.isResponsiveTicks) {
-      bottom = -config.xAxis.size + offset + config.xAxis.labelOffset
-    }
-    if (!isHorizontal && !isLegendBottom && !config.xAxis.label && !tickRotation && !config.dynamicMarginTop && !config.isResponsiveTicks) {
-      bottom = isBrush ? brushHeight + -config.xAxis.size + config.xAxis.labelOffset : 0
-    }
-
-    return `${bottom}px`
-  }
-
   // Prevent render if loading
   let body = <Loading />
 
@@ -1214,7 +1044,10 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
             {config.filters && !externalFilters && <Filters config={config} setConfig={setConfig} setFilteredData={setFilteredData} filteredData={filteredData} excludedData={excludedData} filterData={filterData} dimensions={dimensions} />}
             {/* Visualization */}
             {config?.introText && config.visualizationType !== 'Spark Line' && <section className='introText'>{parse(config.introText)}</section>}
-            <div style={{ marginBottom: computeMarginBottom(config) }} className={`chart-container  p-relative ${config.legend.position === 'bottom' ? 'bottom' : ''}${config.legend.hide ? ' legend-hidden' : ''}${lineDatapointClass}${barBorderClass} ${contentClasses.join(' ')}`}>
+            <div
+              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]}
 
@@ -1236,7 +1069,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}
@@ -1254,7 +1087,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
             {config.xAxis.dataKey && config.table.show && config.visualizationType !== 'Spark Line' && (
               <DataTable
                 config={config}
-                rawData={config.data}
+                rawData={config.table.customTableConfig ? filterData(config.filters, config.data) : config.data}
                 runtimeData={transform.applySuppression(filteredData || excludedData, config.suppressedData)}
                 expandDataTable={config.table.expanded}
                 columns={config.columns}
@@ -1286,6 +1119,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
   const contextValues = {
     capitalize,
+    computeMarginBottom,
     getXAxisData,
     getYAxisData,
     config,
@@ -1301,6 +1135,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     currentViewport,
     parseDate,
     formatDate,
+    formatTooltipsDate,
     formatNumber,
     loading,
     updateConfig,
@@ -1328,7 +1163,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

package/src/_stories/ChartEditor.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Chart from '../CdcChart'
+
+import pieChartExample from './_mock/pie_config.json'
+import pieData from './_mock/pie_data.json'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Editor/Chart',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const Primary: Story = {
+  args: {
+    config: { ...pieChartExample, data: pieData, columns: { someCol: { name: 'females', showInViz: true } } },
+    isEditor: true
+  }
+}
+
+export default meta

package/src/_stories/ChartLine.preliminary.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import chartLinepreliminary from './_mock/preliminary_mock.json'
+
+import Chart from '../CdcChart'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Line/Preliminary',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const Line_Chart: Story = {
+  args: {
+    config: chartLinepreliminary
+  }
+}
+
+export default meta