@cdc/chart 4.24.1 → 4.24.3

package/src/CdcChart.tsx

@@ -15,8 +15,10 @@ import 'react-tooltip/dist/react-tooltip.css'
 
 // Primary Components
 import ConfigContext from './ConfigContext'
-import PieChart from './components/PieChart/PieChart'
+import PieChart from './components/PieChart'
+import SankeyChart from './components/Sankey'
 import LinearChart from './components/LinearChart'
+import { isDateScale } from '@cdc/core/helpers/cove/date'
 
 import { colorPalettesChart as colorPalettes, twoColorPalette } from '@cdc/core/data/colorPalettes'
 
@@ -46,22 +48,27 @@ import { DataTransform } from '@cdc/core/helpers/DataTransform'
 import cacheBustingString from '@cdc/core/helpers/cacheBustingString'
 import isNumber from '@cdc/core/helpers/isNumber'
 import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
+import { getQueryStringFilterValue } from '@cdc/core/helpers/queryStringUtils'
 
 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'
 import Title from '@cdc/core/components/ui/Title'
+import { ChartConfig } from './types/ChartConfig'
+import { Label } from './types/Label'
+import { isSolrCsv, isSolrJson } from '@cdc/core/helpers/isSolr'
+import SkipTo from '@cdc/core/components/elements/SkipTo'
 
 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[]>(configObj && configObj?.legend?.seriesHighlight?.length ? [...configObj?.legend?.seriesHighlight] : [])
   const [currentViewport, setCurrentViewport] = useState('lg')
   const [dimensions, setDimensions] = useState<[number?, number?]>([])
   const [externalFilters, setExternalFilters] = useState<any[]>()
@@ -72,6 +79,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   type Config = typeof config
   let legendMemo = useRef(new Map()) // map collection
   let innerContainerRef = useRef()
+  const legendRef = useRef(null)
 
   if (isDebug) console.log('Chart config, isEditor', config, isEditor)
 
@@ -87,7 +95,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
   const { barBorderClass, lineDatapointClass, contentClasses, sparkLineStyles } = useDataVizClasses(config)
 
-  const handleChartTabbing = config.showSidebar ? `#legend` : config?.title ? `#dataTableSection__${config.title.replace(/\s/g, '')}` : `#dataTableSection`
+  const handleChartTabbing = !config.legend?.hide ? `legend` : config?.title ? `dataTableSection__${config.title.replace(/\s/g, '')}` : `dataTableSection`
 
   const reloadURLData = async () => {
     if (config.dataUrl) {
@@ -95,7 +103,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       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
@@ -117,7 +125,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
       try {
         const ext = getFileExtension(dataUrl.href)
-        if ('csv' === ext) {
+        if ('csv' === ext || isSolrCsv(dataUrlFinal)) {
           data = await fetch(dataUrlFinal)
             .then(response => response.text())
             .then(responseText => {
@@ -128,7 +136,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 = []
@@ -166,7 +174,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 => {
@@ -189,7 +197,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 {
@@ -216,6 +224,15 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       }
     }
     let newConfig = { ...defaults, ...response }
+    if (newConfig.filters) {
+      newConfig.filters.forEach((filter, index) => {
+        const queryStringFilterValue = getQueryStringFilterValue(filter)
+        if (queryStringFilterValue) {
+          newConfig.filters[index].active = queryStringFilterValue
+        }
+      })
+    }
+
     if (newConfig.visualizationType === 'Box Plot') {
       newConfig.legend.hide = true
     }
@@ -250,7 +267,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     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 (isDateScale(newConfig.xAxis) && (newConfig.exclusions.dateStart || newConfig.exclusions.dateEnd) && newConfig.xAxis.dateParseFormat) {
         // Filter dates
         const timestamp = e => new Date(e).getTime()
 
@@ -294,6 +311,12 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       setFilteredData(currentData)
     }
 
+    if (newConfig.xAxis.type === 'date-time' && newConfig.barThickness > 0.1) {
+      newConfig.barThickness = 0.035
+    } else if (newConfig.xAxis.type !== 'date-time' && newConfig.barThickness < 0.1) {
+      newConfig.barThickness = 0.35
+    }
+
     //Enforce default values that need to be calculated at runtime
     newConfig.runtime = {}
     newConfig.runtime.seriesLabels = {}
@@ -426,6 +449,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'
+        }
       })
     }
 
@@ -448,8 +474,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.xAxis = newConfig.yAxis['yAxis'] ? newConfig.yAxis['yAxis'] : newConfig.yAxis
+      newConfig.runtime.yAxis = newConfig.xAxis['xAxis'] ? newConfig.xAxis['xAxis'] : newConfig.xAxis
 
       newConfig.runtime.horizontal = false
       newConfig.orientation = 'horizontal'
@@ -463,9 +489,17 @@ 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.' : ''
 
+    // Sankey Description box error message
+    newConfig.runtime.editorErrorMessage = newConfig.visualizationType === 'Sankey' && !newConfig.description ? 'SUBTEXT/CITATION field is empty: A description of the Sankey Diagram data must be inputted.' : ''
+
+    if (newConfig.legend.seriesHighlight?.length) {
+      setSeriesHighlight(newConfig.legend?.seriesHighlight)
+    }
+
     setConfig(newConfig)
   }
 
@@ -607,9 +641,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
@@ -637,27 +671,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) {
@@ -686,7 +715,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   // Called on reset button click, unhighlights all data series
   const highlightReset = () => {
     try {
-      const legend = document.getElementById('legend')
+      const legend = legendRef.current
       if (!legend) throw new Error('No legend available to set previous focus on.')
       legend.focus()
     } catch (e) {
@@ -713,6 +742,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')
@@ -887,6 +920,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   }
 
   const missingRequiredSections = () => {
+    if (config.visualizationType === 'Sankey') return false // skip checks for now
     if (config.visualizationType === 'Forecasting') return false // skip required checks for now.
     if (config.visualizationType === 'Forest Plot') return false // skip required checks for now.
     if (config.visualizationType === 'Pie') {
@@ -1018,14 +1052,12 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       <>
         {isEditor && <EditorPanel />}
         {!missingRequiredSections() && !config.newViz && (
-          <div className='cdc-chart-inner-container'>
+          <div className='cdc-chart-inner-container' aria-label={handleChartAriaLabels(config)} tabIndex={0}>
             <Title showTitle={config.showTitle} isDashboard={isDashboard} title={title} superTitle={config.superTitle} classes={['chart-title', `${config.theme}`, 'cove-component__header']} style={undefined} />
+            <SkipTo skipId={handleChartTabbing} skipMessage='Skip Over Chart Container' />
 
-            <a id='skip-chart-container' className='cdcdataviz-sr-only-focusable' href={handleChartTabbing}>
-              Skip Over Chart Container
-            </a>
             {/* Filters */}
-            {config.filters && !externalFilters && <Filters config={config} setConfig={setConfig} setFilteredData={setFilteredData} filteredData={filteredData} excludedData={excludedData} filterData={filterData} dimensions={dimensions} />}
+            {config.filters && !externalFilters && config.visualizationType !== 'Spark Line' && <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
@@ -1038,6 +1070,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
               {/* Sparkline */}
               {config.visualizationType === 'Spark Line' && (
                 <>
+                  <Filters config={config} setConfig={setConfig} setFilteredData={setFilteredData} filteredData={filteredData} excludedData={excludedData} filterData={filterData} dimensions={dimensions} />
                   {config?.introText && (
                     <section className='introText' style={{ padding: '0px 0 35px' }}>
                       {parse(config.introText)}
@@ -1053,7 +1086,9 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
                   )}
                 </>
               )}
-              {!config.legend.hide && config.visualizationType !== 'Spark Line' && config.visualizationType !== 'Forest Plot' && <Legend />}
+              {/* Sankey */}
+              {config.visualizationType === 'Sankey' && <ParentSize aria-hidden='true'>{parent => <SankeyChart runtime={config.runtime} width={parent.width} height={parent.height} />}</ParentSize>}
+              {!config.legend.hide && config.visualizationType !== 'Spark Line' && config.visualizationType !== 'Sankey' && <Legend ref={legendRef} />}
             </div>
             {/* Link */}
             {isDashboard && config.table && config.table.show && config.table.showDataTableLink ? tableLink : link && link}
@@ -1068,11 +1103,11 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
             </MediaControls.Section>
 
             {/* Data Table */}
-            {config.xAxis.dataKey && config.table.show && config.visualizationType !== 'Spark Line' && (
+            {((config.xAxis.dataKey && config.table.show && config.visualizationType !== 'Spark Line' && config.visualizationType !== 'Sankey') || (config.visualizationType === 'Sankey' && config.table.show)) && (
               <DataTable
                 config={config}
-                rawData={config.data}
-                runtimeData={transform.applySuppression(filteredData || excludedData, config.suppressedData)}
+                rawData={config.visualizationType === 'Sankey' ? config?.data?.[0]?.tableData : config.table.customTableConfig ? filterData(config.filters, config.data) : config.data}
+                runtimeData={config.visualizationType === 'Sankey' ? config?.data?.[0]?.tableData : transform.applySuppression(filteredData || excludedData, config.suppressedData)}
                 expandDataTable={config.table.expanded}
                 columns={config.columns}
                 displayDataAsText={displayDataAsText}
@@ -1094,13 +1129,12 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     )
   }
 
-  const getXAxisData = d => (config.runtime.xAxis.type === 'date' ? parseDate(d[config.runtime.originalXAxis.dataKey]).getTime() : d[config.runtime.originalXAxis.dataKey])
+  const getXAxisData = d => (isDateScale(config.runtime.xAxis) ? parseDate(d[config.runtime.originalXAxis.dataKey]).getTime() : d[config.runtime.originalXAxis.dataKey])
   const getYAxisData = (d, seriesKey) => d[seriesKey]
 
   const capitalize = str => {
     return str.charAt(0).toUpperCase() + str.slice(1)
   }
-
   const contextValues = {
     capitalize,
     computeMarginBottom,
@@ -1119,6 +1153,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     currentViewport,
     parseDate,
     formatDate,
+    formatTooltipsDate,
     formatNumber,
     loading,
     updateConfig,

package/src/_stories/ChartEditor.stories.tsx

@@ -1,12 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react'
-
+import { userEvent, within } from '@storybook/testing-library'
 import Chart from '../CdcChart'
-
 import pieChartExample from './_mock/pie_config.json'
 import pieData from './_mock/pie_data.json'
+import urlFilterExample from './_mock/url_filter.json'
 
 const meta: Meta<typeof Chart> = {
-  title: 'Components/Templates/Editor/Chart',
+  title: 'Components/Templates/Chart/Editor',
   component: Chart
 }
 
@@ -14,7 +14,18 @@ type Story = StoryObj<typeof Chart>
 
 export const Primary: Story = {
   args: {
-    config: { ...pieChartExample, data: pieData },
+    config: { ...pieChartExample, data: pieData, columns: { someCol: { name: 'females', showInViz: true } } },
+    isEditor: true
+  }
+}
+
+const sleep = ms => {
+  return new Promise(r => setTimeout(r, ms))
+}
+
+export const Url_Filter: Story = {
+  args: {
+    config: urlFilterExample,
     isEditor: true
   }
 }

package/src/_stories/_mock/pie_config.json

@@ -97,11 +97,12 @@
     "caption": "",
     "showDownloadUrl": false,
     "showDataTableLink": true,
-    "indexLabel": "",
+    "indexLabel": "Cause Type",
     "download": false,
     "showVertical": true,
     "show": true,
-    "customTableConfig": true
+    "customTableConfig": true,
+    "excludeColumns": ["location", "age", "use", "data_group", "data_sub_group", "cause_category"]
   },
   "orientation": "vertical",
   "color": "pinkpurple",
@@ -182,7 +183,7 @@
   "filters": [
     {
       "values": ["age", "sex"],
-      "active": "age",
+      "active": "sex",
       "filterStyle": "dropdown",
       "order": "asc",
       "columnName": "data_group"