@cdc/chart 4.24.2 → 4.24.4

package/src/CdcChart.tsx

@@ -1,9 +1,11 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react'
+import React, { useState, useEffect, useCallback, useRef, useId } from 'react'
 
 // IE11
 import ResizeObserver from 'resize-observer-polyfill'
 import 'whatwg-fetch'
 import * as d3 from 'd3-array'
+import Layout from '@cdc/core/components/Layout'
+import Button from '@cdc/core/components/elements/Button'
 
 // External Libraries
 import { scaleOrdinal } from '@visx/scale'
@@ -15,8 +17,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,6 +50,7 @@ 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
@@ -55,6 +60,7 @@ 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()
@@ -64,7 +70,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   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<string[]>([])
+  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[]>()
@@ -75,6 +81,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)
 
@@ -89,8 +96,8 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   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 legendId = useId()
+  const handleChartTabbing = !config.legend?.hide ? legendId : config?.title ? `dataTableSection__${config.title.replace(/\s/g, '')}` : `dataTableSection`
 
   const reloadURLData = async () => {
     if (config.dataUrl) {
@@ -219,6 +226,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
     }
@@ -253,7 +269,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()
 
@@ -297,13 +313,9 @@ 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) {
+    if (newConfig.xAxis.type === 'date-time' && newConfig.barThickness > 0.1) {
       newConfig.barThickness = 0.035
-    } else if (!newConfig.xAxis.sortDates && newConfig.barThickness < 0.1) {
+    } else if (newConfig.xAxis.type !== 'date-time' && newConfig.barThickness < 0.1) {
       newConfig.barThickness = 0.35
     }
 
@@ -433,7 +445,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
         if (series.type === 'Forecasting') {
           newConfig.runtime.forecastingSeriesKeys.push(series)
         }
-        if (series.type === 'Bar') {
+        if (series.type === 'Bar' || series.type === 'Combo') {
           newConfig.runtime.barSeriesKeys.push(series.dataKey)
         }
         if (series.type === 'Line' || series.type === 'dashed-sm' || series.type === 'dashed-md' || series.type === 'dashed-lg') {
@@ -483,6 +495,13 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     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)
   }
 
@@ -698,7 +717,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) {
@@ -903,6 +922,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') {
@@ -990,6 +1010,63 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     return formattedValue
   }
 
+  const Confirm = () => {
+    const confirmDone = e => {
+      if (e) {
+        e.preventDefault()
+      }
+
+      let newConfig = { ...config }
+      delete newConfig.newViz
+
+      updateConfig(newConfig)
+    }
+
+    const styles = {
+      position: 'relative',
+      height: '100vh',
+      width: '100%',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      gridArea: 'content'
+    }
+
+    return (
+      <section className='waiting' style={styles}>
+        <section className='waiting-container'>
+          <h3>Finish Configuring</h3>
+          <p>Set all required options to the left and confirm below to display a preview of the chart.</p>
+          <Button className='btn' style={{ margin: '1em auto' }} disabled={missingRequiredSections()} onClick={e => confirmDone(e)}>
+            I'm Done
+          </Button>
+        </section>
+      </section>
+    )
+  }
+
+  const Error = () => {
+    const styles = {
+      position: 'absolute',
+      background: 'white',
+      zIndex: '999',
+      height: '100vh',
+      width: '100%',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      gridArea: 'content'
+    }
+    return (
+      <section className='waiting' style={styles}>
+        <section className='waiting-container'>
+          <h3>Error With Configuration</h3>
+          <p>{config.runtime.editorErrorMessage}</p>
+        </section>
+      </section>
+    )
+  }
+
   // this is passed DOWN into the various components
   // then they do a lookup based on the bin number as index into here (TT)
   const applyLegendToRow = rowObj => {
@@ -1024,6 +1101,17 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   // Prevent render if loading
   let body = <Loading />
 
+  const getChartWrapperClasses = () => {
+    const classes = ['chart-container', 'p-relative']
+    if (config.legend.position === 'bottom') classes.push('bottom')
+    if (config.legend.hide) classes.push('legend-hidden')
+    if (lineDatapointClass) classes.push(lineDatapointClass)
+    if (!config.barHasBorder) classes.push('chart-bar--no-border')
+    if (isDebug) classes.push('debug')
+    classes.push(...contentClasses)
+    return classes
+  }
+
   if (!loading) {
     const tableLink = (
       <a href={`#data-table-${config.dataKey}`} className='margin-left-href'>
@@ -1033,90 +1121,92 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     body = (
       <>
         {isEditor && <EditorPanel />}
-        {!missingRequiredSections() && !config.newViz && (
-          <div className='cdc-chart-inner-container'>
-            <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>
-            {/* Filters */}
-            {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, 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]}
-
-              {/* Sparkline */}
-              {config.visualizationType === 'Spark Line' && (
-                <>
-                  {config?.introText && (
-                    <section className='introText' style={{ padding: '0px 0 35px' }}>
-                      {parse(config.introText)}
-                    </section>
-                  )}
-                  <div style={{ height: `100px`, width: `100%`, ...sparkLineStyles }}>
-                    <ParentSize>{parent => <SparkLine width={parent.width} height={parent.height} />}</ParentSize>
-                  </div>
-                  {description && (
-                    <div className='subtext' style={{ padding: '35px 0 15px' }}>
-                      {parse(description)}
+        <Layout.Responsive isEditor={isEditor}>
+          {config.newViz && <Confirm />}
+          {undefined === config.newViz && isEditor && config.runtime && config.runtime?.editorErrorMessage && <Error />}
+          {!missingRequiredSections() && !config.newViz && (
+            <div className='cdc-chart-inner-container cove-component__content' 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} />
+
+              {/* Filters */}
+              {config.filters && !externalFilters && config.visualizationType !== 'Spark Line' && <Filters config={config} setConfig={setConfig} setFilteredData={setFilteredData} filteredData={filteredData} excludedData={excludedData} filterData={filterData} dimensions={dimensions} />}
+              <SkipTo skipId={handleChartTabbing} skipMessage='Skip Over Chart Container' />
+              {/* Visualization */}
+              {config?.introText && config.visualizationType !== 'Spark Line' && <section className='introText'>{parse(config.introText)}</section>}
+
+              <div style={{ marginBottom: computeMarginBottom(config, legend, currentViewport) }} className={getChartWrapperClasses().join(' ')}>
+                {/* All charts except sparkline */}
+                {config.visualizationType !== 'Spark Line' && chartComponents[config.visualizationType]}
+
+                {/* 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)}
+                      </section>
+                    )}
+                    <div style={{ height: `100px`, width: `100%`, ...sparkLineStyles }}>
+                      <ParentSize>{parent => <SparkLine width={parent.width} height={parent.height} />}</ParentSize>
                     </div>
-                  )}
-                </>
+                    {description && (
+                      <div className='subtext' style={{ padding: '35px 0 15px' }}>
+                        {parse(description)}
+                      </div>
+                    )}
+                  </>
+                )}
+                {/* 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}
+
+              {/* Description */}
+              {description && config.visualizationType !== 'Spark Line' && <div className={'column ' + config.isResponsiveTicks ? 'subtext--responsive-ticks' : 'subtext'}>{parse(description)}</div>}
+
+              {/* buttons */}
+              <MediaControls.Section classes={['download-buttons']}>
+                {config.table.showDownloadImgButton && <MediaControls.Button text='Download Image' title='Download Chart as Image' type='image' state={config} elementToCapture={imageId} />}
+                {config.table.showDownloadPdfButton && <MediaControls.Button text='Download PDF' title='Download Chart as PDF' type='pdf' state={config} elementToCapture={imageId} />}
+              </MediaControls.Section>
+
+              {/* Data Table */}
+              {((config.xAxis.dataKey && config.table.show && config.visualizationType !== 'Spark Line' && config.visualizationType !== 'Sankey') || (config.visualizationType === 'Sankey' && config.table.show)) && (
+                <DataTable
+                  config={config}
+                  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}
+                  displayGeoName={displayGeoName}
+                  applyLegendToRow={applyLegendToRow}
+                  tableTitle={config.table.label}
+                  indexTitle={config.table.indexLabel}
+                  vizTitle={title}
+                  viewport={currentViewport}
+                  tabbingId={handleChartTabbing}
+                  colorScale={colorScale}
+                />
               )}
-              {!config.legend.hide && config.visualizationType !== 'Spark Line' && config.visualizationType !== 'Forest Plot' && <Legend />}
+              {config?.footnotes && <section className='footnotes'>{parse(config.footnotes)}</section>}
+              {/* show pdf or image button */}
             </div>
-            {/* Link */}
-            {isDashboard && config.table && config.table.show && config.table.showDataTableLink ? tableLink : link && link}
-
-            {/* Description */}
-            {description && config.visualizationType !== 'Spark Line' && <div className={'column ' + config.isResponsiveTicks ? 'subtext--responsive-ticks' : 'subtext'}>{parse(description)}</div>}
-
-            {/* buttons */}
-            <MediaControls.Section classes={['download-buttons']}>
-              {config.table.showDownloadImgButton && <MediaControls.Button text='Download Image' title='Download Chart as Image' type='image' state={config} elementToCapture={imageId} />}
-              {config.table.showDownloadPdfButton && <MediaControls.Button text='Download PDF' title='Download Chart as PDF' type='pdf' state={config} elementToCapture={imageId} />}
-            </MediaControls.Section>
-
-            {/* Data Table */}
-            {config.xAxis.dataKey && config.table.show && config.visualizationType !== 'Spark Line' && (
-              <DataTable
-                config={config}
-                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}
-                displayDataAsText={displayDataAsText}
-                displayGeoName={displayGeoName}
-                applyLegendToRow={applyLegendToRow}
-                tableTitle={config.table.label}
-                indexTitle={config.table.indexLabel}
-                vizTitle={title}
-                viewport={currentViewport}
-                tabbingId={handleChartTabbing}
-                colorScale={colorScale}
-              />
-            )}
-            {config?.footnotes && <section className='footnotes'>{parse(config.footnotes)}</section>}
-            {/* show pdf or image button */}
-          </div>
-        )}
+          )}
+        </Layout.Responsive>
       </>
     )
   }
 
-  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,
@@ -1167,17 +1257,11 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     debugSvg: isDebug
   }
 
-  const classes = ['cdc-open-viz-module', 'type-chart', `${currentViewport}`, `font-${config.fontSize}`, `${config.theme}`]
-
-  config.visualizationType === 'Spark Line' && classes.push(`type-sparkline`)
-  isEditor && classes.push('spacing-wrapper')
-  isEditor && classes.push('isEditor')
-
   return (
     <ConfigContext.Provider value={contextValues}>
-      <div className={`${classes.join(' ')}`} ref={outerContainerRef} data-lollipop={config.isLollipopChart} data-download-id={imageId}>
+      <Layout.VisualizationWrapper config={config} isEditor={isEditor} currentViewport={currentViewport} ref={outerContainerRef} imageId={imageId} showEditorPanel={config?.showEditorPanel}>
         {body}
-      </div>
+      </Layout.VisualizationWrapper>
     </ConfigContext.Provider>
   )
 }

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
 }
 
@@ -19,4 +19,15 @@ export const Primary: Story = {
   }
 }
 
+const sleep = ms => {
+  return new Promise(r => setTimeout(r, ms))
+}
+
+export const Url_Filter: Story = {
+  args: {
+    config: urlFilterExample,
+    isEditor: true
+  }
+}
+
 export default meta