@cdc/chart 4.24.12 → 4.25.2-25

package/src/components/BrushChart.tsx

@@ -1,6 +1,6 @@
 import { Group } from '@visx/group'
 import { useContext, useEffect, useRef, useState } from 'react'
-import ConfigContext from '../ConfigContext'
+import ConfigContext, { ChartDispatchContext } from '../ConfigContext'
 import * as d3 from 'd3'
 import { Text } from '@visx/text'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
@@ -12,7 +12,8 @@ interface BrushChartProps {
 }
 
 const BrushChart = ({ xMax, yMax }: BrushChartProps) => {
-  const { tableData, config, setBrushConfig, dashboardConfig, formatDate, parseDate } = useContext(ConfigContext)
+  const { tableData, config, dashboardConfig, formatDate, parseDate } = useContext(ConfigContext)
+  const dispatch = useContext(ChartDispatchContext)
   const [brushState, setBrushState] = useState({ isBrushing: false, selection: [] })
   const [brushKey, setBrushKey] = useState(0)
   const sharedFilters = dashboardConfig?.dashboard?.sharedFilters ?? []
@@ -54,6 +55,9 @@ const BrushChart = ({ xMax, yMax }: BrushChartProps) => {
 
   const brushHandle = (g, selection, firstDate, lastDate) => {
     const textWidth = getTextWidth(firstDate, `normal ${16 / 1.1}px sans-serif`)
+    const textPositionLeft = selection[0] < textWidth ? 0 : -textWidth
+    const textPositionRight = xMax - selection[1] < textWidth ? -textWidth : 0
+
     return g
       .selectAll('.handle--custom')
       .data([{ side: 'left' }, { side: 'right' }])
@@ -61,7 +65,7 @@ const BrushChart = ({ xMax, yMax }: BrushChartProps) => {
         const handleGroup = enter.append('g').attr('class', 'handle--custom')
         handleGroup
           .append('text')
-          .attr('x', d => (d.side === 'left' ? 0 : -textWidth))
+          .attr('x', d => (d.side === 'left' ? textPositionLeft : textPositionRight))
           .attr('y', 30)
           .text(d => (d.side === 'left' ? firstDate : lastDate))
           .attr('font-size', '13px')
@@ -102,22 +106,25 @@ const BrushChart = ({ xMax, yMax }: BrushChartProps) => {
       const sortedData = _.sortBy(newFilteredData, item => new Date(item[config.xAxis.dataKey]))
 
       // If ascending is false, reverse the sorted array
-      const finalData = !sortByRecentDate ? sortedData : sortedData.reverse()
+      const finalData: object[] = !sortByRecentDate ? sortedData : sortedData.reverse()
 
       // Retrieve the start and end dates based on the sorted data array
-      const startDate = _.get(_.first(finalData), config.xAxis.dataKey, '')
-      const endDate = _.get(_.last(finalData), config.xAxis.dataKey, '')
+      const startDate: string = _.get(_.first(finalData), config.xAxis.dataKey, '')
+      const endDate: string = _.get(_.last(finalData), config.xAxis.dataKey, '')
       // add custom blue colored handlers to each corners of brush
       svg.selectAll('.handle--custom').remove()
-      // append handler
-      const [formattedStartDate, formattedEndDate] = [startDate, endDate].map(date => formatDate(parseDate(date)))
+      // Parse and format the dates, setting them to an empty string if undefined
+      const parseAndFormatDate = date => (date ? formatDate(parseDate(date)) : '')
+      const formattedStartDate = parseAndFormatDate(startDate)
+      const formattedEndDate = parseAndFormatDate(endDate)
       svg.call(brushHandle, selection, formattedStartDate, formattedEndDate)
 
-      setBrushConfig({
+      const payload = {
         active: config.brush.active,
         isBrushing: isUserBrushing,
         data: finalData
-      })
+      }
+      dispatch({ type: 'SET_BRUSH_CONFIG', payload: payload })
       setBrushState({
         isBrushing: true,
         selection
@@ -150,22 +157,35 @@ const BrushChart = ({ xMax, yMax }: BrushChartProps) => {
 
     if ((isFiltersActive || isExclusionsActive || isDashboardFilters) && config.brush?.active) {
       setBrushKey(prevKey => prevKey + 1)
-      setBrushConfig(prev => {
-        return {
-          ...prev,
-          data: tableData
-        }
-      })
     }
-    return () =>
-      setBrushConfig(prev => {
-        return {
-          ...prev,
-          data: []
-        }
-      })
+    dispatch({ type: 'SET_BRUSH_CONFIG', payload: { ...config.brush, data: tableData } })
+
+    return () => dispatch({ type: 'SET_BRUSH_CONFIG', payload: { ...config.brush, data: [] } })
   }, [config.filters, config.exclusions, config.brush?.active, isDashboardFilters])
-  // Initialize brush when component is first rendered
+
+  // this effect handles where brush chart is missing on production. it helpes re render
+  useEffect(() => {
+    let timeoutId = null
+
+    const checkAndInitializeBrush = () => {
+      if (xMax > 0) {
+        initializeBrush()
+      } else {
+        // Clear the existing timeout and set a new one
+        clearTimeout(timeoutId)
+        timeoutId = setTimeout(checkAndInitializeBrush, 500)
+      }
+    }
+
+    checkAndInitializeBrush()
+
+    // Cleanup function to clear timeout
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId)
+      }
+    }
+  }, [xMax])
 
   // reset brush on keychange
   useEffect(() => {

package/src/components/DeviationBar.jsx

@@ -30,7 +30,6 @@ export default function DeviationBar({ height, xScale }) {
       : roundingStyle === 'finger'
       ? '15px'
       : '0px'
-  const fontSize = { small: 16, medium: 18, large: 20 }
   const isRounded = config.barStyle === 'rounded'
   const target = Number(config.xAxis.target)
   const seriesKey = config.series[0].dataKey
@@ -65,7 +64,7 @@ export default function DeviationBar({ height, xScale }) {
       const firstBarValue = data[0][seriesKey]
       const barPosition = firstBarValue < target ? 'left' : 'right'
       const label = `${config.xAxis.targetLabel} ${formatNumber(config.xAxis.target || 0, 'left')}`
-      const labelWidth = getTextWidth(label, `bold ${fontSize[config.fontSize]}px sans-serif`)
+      const labelWidth = getTextWidth(label, `bold ${20}px sans-serif`)
       let labelY = config.isLollipopChart ? lollipopBarHeight / 2 : Number(config.barHeight) / 2
       let paddingX = 0
       let labelX = 0
@@ -165,10 +164,7 @@ export default function DeviationBar({ height, xScale }) {
           config.heights.horizontal = totalheight
 
           // text,labels postiions
-          const textWidth = getTextWidth(
-            formatNumber(barValue, 'left'),
-            `normal ${fontSize[config.fontSize]}px sans-serif`
-          )
+          const textWidth = getTextWidth(formatNumber(barValue, 'left'), `normal ${16}px sans-serif`)
           const textFits = textWidth < barWidth - 6
           const textX = barBaseX
           const textY = barY + barHeight / 2

package/src/components/EditorPanel/EditorPanel.tsx

@@ -596,7 +596,7 @@ const EditorPanel = () => {
     updateConfig,
     tableData,
     transformedData: data,
-    loading,
+    isLoading,
     colorScale,
     colorPalettes,
     twoColorPalette,
@@ -610,7 +610,7 @@ const EditorPanel = () => {
     lineOptions,
     rawData,
     highlight,
-    highlightReset,
+    handleShowAll,
     dimensions
   } = useContext<ChartContext>(ConfigContext)
 
@@ -813,7 +813,7 @@ const EditorPanel = () => {
   const [displayPanel, setDisplayPanel] = useState(true)
   const [displayViewportOverrides, setDisplayViewportOverrides] = useState(false)
 
-  if (loading) {
+  if (isLoading) {
     return null
   }
 
@@ -906,7 +906,7 @@ const EditorPanel = () => {
     return Object.keys(columns)
   }
 
-  const getLegendStyleOptions = (option: 'style' | 'subStyle'): string[] => {
+  const getLegendStyleOptions = (option: 'style' | 'subStyle' | 'shapes'): string[] => {
     const options: string[] = []
 
     switch (option) {
@@ -963,7 +963,7 @@ const EditorPanel = () => {
 
   const convertStateToConfig = () => {
     let strippedState = JSON.parse(JSON.stringify(config))
-    if (false === missingRequiredSections()) {
+    if (false === missingRequiredSections(config)) {
       delete strippedState.newViz
     }
     delete strippedState.runtime
@@ -1631,8 +1631,19 @@ const EditorPanel = () => {
                         value={config.yAxis.label}
                         section='yAxis'
                         fieldName='label'
-                        label='Label '
+                        label='Label'
                         updateField={updateField}
+                        maxLength={35}
+                        tooltip={
+                          <Tooltip style={{ textTransform: 'none' }}>
+                            <Tooltip.Target>
+                              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                            </Tooltip.Target>
+                            <Tooltip.Content>
+                              <p>35 character limit</p>
+                            </Tooltip.Content>
+                          </Tooltip>
+                        }
                       />
                       {config.runtime.seriesKeys &&
                         config.runtime.seriesKeys.length === 1 &&
@@ -2306,6 +2317,17 @@ const EditorPanel = () => {
                     fieldName='rightLabel'
                     label='Label'
                     updateField={updateField}
+                    maxLength={35}
+                    tooltip={
+                      <Tooltip style={{ textTransform: 'none' }}>
+                        <Tooltip.Target>
+                          <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>35 character limit</p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    }
                   />
                   <TextField
                     value={config.yAxis.rightNumTicks}
@@ -2596,6 +2618,17 @@ const EditorPanel = () => {
                         fieldName='label'
                         label='Label'
                         updateField={updateField}
+                        maxLength={35}
+                        tooltip={
+                          <Tooltip style={{ textTransform: 'none' }}>
+                            <Tooltip.Target>
+                              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                            </Tooltip.Target>
+                            <Tooltip.Content>
+                              <p>35 character limit</p>
+                            </Tooltip.Content>
+                          </Tooltip>
+                        }
                       />
 
                       {config.xAxis.type === 'continuous' && (
@@ -3658,6 +3691,27 @@ const EditorPanel = () => {
                     updateField={updateField}
                     options={getLegendStyleOptions('style')}
                   />
+                  <CheckBox
+                    tooltip={
+                      <Tooltip style={{ textTransform: 'none' }}>
+                        <Tooltip.Target>
+                          <Icon
+                            display='question'
+                            style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
+                          />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>Choose option Shapes in Line Datapoint Symbols to display.</p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    }
+                    display={!config.legend.hide && config.legend.style === 'lines'}
+                    value={config.legend.hasShape}
+                    section='legend'
+                    fieldName='hasShape'
+                    label='Shapes'
+                    updateField={updateField}
+                  />
 
                   <Select
                     display={!config.legend.hide && config.legend.style === 'gradient'}
@@ -3797,7 +3851,7 @@ const EditorPanel = () => {
                                 updatedSeriesHighlight.splice(i, 1)
                                 updateField('legend', null, 'seriesHighlight', updatedSeriesHighlight)
                                 if (!updatedSeriesHighlight.length) {
-                                  highlightReset()
+                                  handleShowAll()
                                 }
                               }}
                             >
@@ -3887,7 +3941,9 @@ const EditorPanel = () => {
                     display={
                       ['bottom', 'top'].includes(config.legend.position) &&
                       !config.legend.hide &&
-                      config.legend.style !== 'gradient'
+                      config.legend.style !== 'gradient' &&
+                      !config.legend.singleRow &&
+                      !config.legend.singleRow
                     }
                     value={config.legend.verticalSorted}
                     section='legend'

package/src/components/EditorPanel/components/Panels/Panel.General.tsx

@@ -209,6 +209,10 @@ const PanelGeneral: FC<PanelProps> = props => {
                     <Icon display='question' style={{ marginLeft: '0.5rem' }} />
                   </Tooltip.Target>
                   <Tooltip.Content>
+                    <p>
+                      Recommended set to display for Section 508 compliance.
+                    </p>
+                    <hr/>
                     <p>
                       Selecting this option will <i> not </i> hide the display of "zero value", "suppressed data", or
                       "missing data" indicators on the chart (if applicable).

package/src/components/EditorPanel/components/Panels/Panel.Series.tsx

@@ -500,6 +500,8 @@ const SeriesInputName = props => {
 
     updateConfig(newConfig)
   }
+  // if series name is emty show default data value.
+  const value = series.name !== undefined && series.name !== series.dataKey ? series.name : series.dataKey
 
   return (
     <>
@@ -507,7 +509,7 @@ const SeriesInputName = props => {
       <input
         type='text'
         key={`series-name-${i}`}
-        value={series.name ? series.name : ''}
+        value={value}
         onChange={event => {
           changeSeriesName(i, event.target.value)
         }}

package/src/components/EditorPanel/components/Panels/Panel.Visual.tsx

@@ -136,15 +136,23 @@ const PanelVisual: FC<PanelProps> = props => {
             />
           </fieldset>
         )}
-        <Select
-          value={config.fontSize}
-          fieldName='fontSize'
-          label='Font Size'
-          updateField={updateField}
-          options={['small', 'medium', 'large']}
-        />
         {visHasBarBorders() && (
           <Select
+            tooltip={
+              <Tooltip style={{ textTransform: 'none' }}>
+                <Tooltip.Target>
+                  <Icon
+                    display='question'
+                    style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
+                  />
+                </Tooltip.Target>
+                <Tooltip.Content>
+                  <p>
+                  Recommended set to display for Section 508 compliance.
+                  </p>
+                </Tooltip.Content>
+              </Tooltip>
+            }
             value={config.barHasBorder}
             fieldName='barHasBorder'
             label='Bar Borders'
@@ -171,6 +179,35 @@ const PanelVisual: FC<PanelProps> = props => {
           config.visualizationType === 'Combo') ||
           config.visualizationType === 'Line') && (
           <>
+            <Select
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon
+                      display='question'
+                      style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
+                    />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>
+                      Shapes will appear in the following order: circle, square, triangle, diamond, and inverted
+                      triangle. Use with a maximum of 5 data points.
+                    </p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+              value={config.visual.lineDatapointSymbol}
+              section='visual'
+              fieldName='lineDatapointSymbol'
+              label='Line Datapoint Symbols'
+              updateField={updateField}
+              options={['none', 'standard']}
+            />
+            {config.series.length > config.visual.maximumShapeAmount &&
+              config.visual.lineDatapointSymbol === 'standard' && (
+                <small className='text-danger'>Standard only supports up to 7 data points</small>
+              )}
+
             <Select
               value={config.lineDatapointStyle}
               fieldName='lineDatapointStyle'

package/src/components/EditorPanel/helpers/updateFieldRankByValue.ts

@@ -30,7 +30,12 @@ export const updateFieldRankByValue = (
   newConfig.rankByValue = newValue
 
   if (config.rankByValue && !newValue) {
-    const cleanData = config?.xAxis?.dataKey ? transform.cleanData(config.data, config.xAxis.dataKey) : config.data
+    const CIkeys: string[] = Object.values(config.confidenceKeys) as string[]
+    const seriesKeys: string[] = config.series.map(s => s.dataKey)
+    const keysToClean: string[] = seriesKeys.concat(CIkeys)
+    const cleanData = config?.xAxis?.dataKey
+      ? transform.cleanData(config.data, config.xAxis.dataKey, keysToClean)
+      : config.data
     const newData = preTransformedData.sort((a, b) => {
       const aIndex = indexOfObj(cleanData, a)
       const bIndex = indexOfObj(cleanData, b)