@cdc/chart 4.24.10 → 4.24.11

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

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React, { useContext, useMemo } from 'react'
 import ConfigContext from '../../../../ConfigContext'
 
 // Core
@@ -7,10 +7,18 @@ import Check from '@cdc/core/assets/icon-check.svg'
 import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
 import { sequentialPalettes } from '@cdc/core/data/colorPalettes'
 import Icon from '@cdc/core/components/ui/Icon'
+import { Select } from '@cdc/core/components/EditorPanel/Inputs'
 
 // Third Party
-import { Accordion, AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
+import {
+  Accordion,
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemPanel,
+  AccordionItemButton
+} from 'react-accessible-accordion'
 import { Draggable } from '@hello-pangea/dnd'
+import Tooltip from '@cdc/core/components/ui/Tooltip'
 
 const SeriesContext = React.createContext({})
 
@@ -48,7 +56,11 @@ const SeriesWrapper = props => {
     updateConfig({ ...config, series })
   }
 
-  return <SeriesContext.Provider value={{ updateSeries, supportedRightAxisTypes, getColumns, selectComponent }}>{props.children}</SeriesContext.Provider>
+  return (
+    <SeriesContext.Provider value={{ updateSeries, supportedRightAxisTypes, getColumns, selectComponent }}>
+      {props.children}
+    </SeriesContext.Provider>
+  )
 }
 
 const SeriesDropdownLineType = props => {
@@ -245,7 +257,9 @@ const SeriesDropdownForecastColor = props => {
     <InputSelect
       key={`${stage}--${stageIndex}`}
       initial='Select an option'
-      value={config.series?.[index].stages?.[stageIndex].color ? config.series?.[index].stages?.[stageIndex].color : 'Select'}
+      value={
+        config.series?.[index].stages?.[stageIndex].color ? config.series?.[index].stages?.[stageIndex].color : 'Select'
+      }
       label={`${stage.key} Series Color`}
       onChange={event => {
         const copyOfSeries = [...config.series] // copy the entire series array
@@ -315,55 +329,33 @@ const SeriesDropdownConfidenceInterval = props => {
                 <AccordionItemPanel>
                   <div className='input-group'>
                     <label htmlFor='showInTooltip'>Show In Tooltip</label>
-                    <div className={'cove-input__checkbox--small'} onClick={e => updateShowInTooltip(e, index, ciIndex)}>
-                      <div className={`cove-input__checkbox-box${'blue' ? ' custom-color' : ''}`} style={{ backgroundColor: '' }}>
+                    <div
+                      className={'cove-input__checkbox--small'}
+                      onClick={e => updateShowInTooltip(e, index, ciIndex)}
+                    >
+                      <div
+                        className={`cove-input__checkbox-box${'blue' ? ' custom-color' : ''}`}
+                        style={{ backgroundColor: '' }}
+                      >
                         {showInTooltip && <Check className='' style={{ fill: '#025eaa' }} />}
                       </div>
-                      <input className='cove-input--hidden' type='checkbox' name={'showInTooltip'} checked={showInTooltip ? showInTooltip : false} readOnly />
+                      <input
+                        className='cove-input--hidden'
+                        type='checkbox'
+                        name={'showInTooltip'}
+                        checked={showInTooltip ? showInTooltip : false}
+                        readOnly
+                      />
                     </div>
                   </div>
 
-                  {/* <label>
-                    High Label
-                    <input
-                      type='text'
-                      key={`series-ci-high-label-${index}`}
-                      value={series.confidenceIntervals[index]?.highLabel ? series.confidenceIntervals[index]?.highLabel : ''}
-                      onChange={e => {
-                        const copiedConfidenceArray = [...config.series[index].confidenceIntervals]
-                        copiedConfidenceArray[ciIndex].highLabel = e.target.value
-                        const copyOfSeries = [...config.series] // copy the entire series array
-                        copyOfSeries[index] = { ...copyOfSeries[index], confidenceIntervals: copiedConfidenceArray }
-                        updateConfig({
-                          ...config,
-                          series: copyOfSeries
-                        })
-                      }}
-                    />
-                  </label> */}
-
-                  {/* <label>
-                    Low label
-                    <input
-                      type='text'
-                      key={`series-ci-high-label-${index}`}
-                      value={series.confidenceIntervals[index]?.lowLabel ? series.confidenceIntervals[index]?.lowLabel : ''}
-                      onChange={e => {
-                        const copiedConfidenceArray = [...config.series[index].confidenceIntervals]
-                        copiedConfidenceArray[ciIndex].lowLabel = e.target.value
-                        const copyOfSeries = [...config.series] // copy the entire series array
-                        copyOfSeries[index] = { ...copyOfSeries[index], confidenceIntervals: copiedConfidenceArray }
-                        updateConfig({
-                          ...config,
-                          series: copyOfSeries
-                        })
-                      }}
-                    />
-                  </label> */}
-
                   <InputSelect
                     initial='Select an option'
-                    value={config.series[index].confidenceIntervals[ciIndex].low ? config.series[index].confidenceIntervals[ciIndex].low : 'Select'}
+                    value={
+                      config.series[index].confidenceIntervals[ciIndex].low
+                        ? config.series[index].confidenceIntervals[ciIndex].low
+                        : 'Select'
+                    }
                     label='Low Confidence Interval'
                     onChange={e => {
                       const copiedConfidenceArray = [...config.series[index].confidenceIntervals]
@@ -379,7 +371,11 @@ const SeriesDropdownConfidenceInterval = props => {
                   />
                   <InputSelect
                     initial='Select an option'
-                    value={config.series[index].confidenceIntervals[ciIndex].high ? config.series[index].confidenceIntervals[ciIndex].high : 'Select'}
+                    value={
+                      config.series[index].confidenceIntervals[ciIndex].high
+                        ? config.series[index].confidenceIntervals[ciIndex].high
+                        : 'Select'
+                    }
                     label='High Confidence Interval'
                     onChange={e => {
                       const copiedConfidenceArray = [...config.series[index].confidenceIntervals]
@@ -399,7 +395,7 @@ const SeriesDropdownConfidenceInterval = props => {
           })}
         </Accordion>
         <button
-          className='btn full-width'
+          className='btn btn-primary full-width'
           onClick={e => {
             e.preventDefault()
             let copiedIndex = null
@@ -409,7 +405,10 @@ const SeriesDropdownConfidenceInterval = props => {
               copiedIndex = []
             }
             const copyOfSeries = [...config.series] // copy the entire series array
-            copyOfSeries[index] = { ...copyOfSeries[index], confidenceIntervals: [...copiedIndex, { high: '', low: '' }] } // update the nested array
+            copyOfSeries[index] = {
+              ...copyOfSeries[index],
+              confidenceIntervals: [...copiedIndex, { high: '', low: '' }]
+            } // update the nested array
             updateConfig({
               ...config,
               series: copyOfSeries
@@ -468,7 +467,19 @@ const SeriesInputWeight = props => {
 const SeriesInputName = props => {
   const { series, index: i } = props
   const { config, updateConfig } = useContext(ConfigContext)
-  const adjustableNameSeriesTypes = ['Bump Chart', 'Bar', 'Line', 'Area Chart', 'Combo', 'Deviation', 'Paired', 'Scatter', 'dashed-sm', 'dashed-md', 'dashed-lg']
+  const adjustableNameSeriesTypes = [
+    'Bump Chart',
+    'Bar',
+    'Line',
+    'Area Chart',
+    'Combo',
+    'Deviation',
+    'Paired',
+    'Scatter',
+    'dashed-sm',
+    'dashed-md',
+    'dashed-lg'
+  ]
 
   if (!adjustableNameSeriesTypes.includes(series.type)) return
 
@@ -532,7 +543,13 @@ const SeriesDisplayInTooltip = props => {
           <div className={`cove-input__checkbox-box${'blue' ? ' custom-color' : ''}`} style={{ backgroundColor: '' }}>
             {series.tooltip && <Check className='' style={{ fill: '#025eaa' }} />}
           </div>
-          <input className='cove-input--hidden' type='checkbox' name={`series-tooltip--${index}`} checked={series.tooltip ? series.tooltip : false} readOnly />
+          <input
+            className='cove-input--hidden'
+            type='checkbox'
+            name={`series-tooltip--${index}`}
+            checked={series.tooltip ? series.tooltip : false}
+            readOnly
+          />
         </div>
       </div>
     </>
@@ -591,17 +608,32 @@ const SeriesButtonRemove = props => {
 
 const SeriesItem = props => {
   const { config } = useContext(ConfigContext)
-
+  const { updateSeries, getColumns } = useContext(SeriesContext)
   const { series, getItemStyle, sortableItemStyles, chartsWithOptions, index: i } = props
-
+  const showDynamicCategory =
+    ['Bar', 'Line'].includes(config.visualizationType) &&
+    !config.series.find(s => s.dynamicCategory && s.dataKey !== series.dataKey)
   return (
     <Draggable key={series.dataKey} draggableId={`draggableFilter-${series.dataKey}`} index={i}>
       {(provided, snapshot) => (
-        <div key={i} className={snapshot.isDragging ? 'currently-dragging' : ''} style={getItemStyle(snapshot.isDragging, provided.draggableProps.style, sortableItemStyles)} ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
+        <div
+          key={i}
+          className={snapshot.isDragging ? 'currently-dragging' : ''}
+          style={getItemStyle(snapshot.isDragging, provided.draggableProps.style, sortableItemStyles)}
+          ref={provided.innerRef}
+          {...provided.draggableProps}
+          {...provided.dragHandleProps}
+        >
           <Accordion allowZeroExpanded>
             <AccordionItem className='series-item series-item--chart'>
               <AccordionItemHeading className='series-item__title'>
-                <AccordionItemButton className={chartsWithOptions.includes(config.visualizationType) ? 'accordion__button' : 'accordion__button hide-arrow'}>
+                <AccordionItemButton
+                  className={
+                    chartsWithOptions.includes(config.visualizationType)
+                      ? 'accordion__button'
+                      : 'accordion__button hide-arrow'
+                  }
+                >
                   <Icon display='move' size={15} style={{ cursor: 'default' }} />
                   {series.dataKey}
                   <Series.Button.Remove series={series} index={i} />
@@ -610,6 +642,30 @@ const SeriesItem = props => {
               {chartsWithOptions.includes(config.visualizationType) && (
                 <AccordionItemPanel>
                   <Series.Input.Name series={series} index={i} />
+                  {showDynamicCategory && (
+                    <Select
+                      label='Dynamic Category'
+                      value={series.dynamicCategory}
+                      options={['- Select - ', ...getColumns().filter(col => series.dataKey !== col)]}
+                      updateField={(_section, _subsection, _fieldName, value) => {
+                        if (value === '- Select -') value = ''
+                        updateSeries(i, value, 'dynamicCategory')
+                      }}
+                      tooltip={
+                        <Tooltip style={{ textTransform: 'none' }}>
+                          <Tooltip.Target>
+                            <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                          </Tooltip.Target>
+                          <Tooltip.Content>
+                            <p>
+                              This field is Optional. If you have a dynamic data series you can select the category
+                              field here. You can only add one dynamic category per visualization.
+                            </p>
+                          </Tooltip.Content>
+                        </Tooltip>
+                      }
+                    />
+                  )}
                   <Series.Input.Weight series={series} index={i} />
                   <Series.Dropdown.SeriesType series={series} index={i} />
                   <Series.Dropdown.AxisPosition series={series} index={i} />
@@ -630,7 +686,16 @@ const SeriesItem = props => {
 const SeriesList = props => {
   const { series, getItemStyle, sortableItemStyles, chartsWithOptions } = props
   return series.map((series, i) => {
-    return <SeriesItem getItemStyle={getItemStyle} sortableItemStyles={sortableItemStyles} chartsWithOptions={chartsWithOptions} series={series} index={i} key={`series-list-${i}`} />
+    return (
+      <SeriesItem
+        getItemStyle={getItemStyle}
+        sortableItemStyles={sortableItemStyles}
+        chartsWithOptions={chartsWithOptions}
+        series={series}
+        index={i}
+        key={`series-list-${i}`}
+      />
+    )
   })
 }
 

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

@@ -435,8 +435,7 @@ const PanelVisual: FC<PanelProps> = props => {
               min={15}
             />
           )}
-        {((config.visualizationType === 'Bar' && config.orientation !== 'horizontal') ||
-          config.visualizationType === 'Combo') && (
+        {(config.orientation !== 'horizontal' || config.visualizationType === 'Combo') && (
           <TextField
             value={config.barThickness}
             type='number'

package/src/components/EditorPanel/useEditorPermissions.ts

@@ -44,6 +44,18 @@ export const useEditorPermissions = () => {
     return true
   }
 
+  const visSupportsDateCategoryAxisMin = () => {
+    const enabledCharts = ['Scatter Plot']
+    if (enabledCharts.includes(visualizationType)) return true
+    return false
+  }
+
+  const visSupportsDateCategoryAxisMax = () => {
+    const enabledCharts = ['Scatter Plot']
+    if (enabledCharts.includes(visualizationType)) return true
+    return false
+  }
+
   const visSupportsSuperTitle = () => {
     const disabledCharts = ['Spark Line']
     if (disabledCharts.includes(visualizationType)) return false
@@ -88,7 +100,7 @@ export const useEditorPermissions = () => {
   const visHasLegend = () => {
     switch (visualizationType) {
       case 'Box Plot':
-        return false
+        return true
       case 'Forest Plot':
         return false
       case 'Spark Line':
@@ -414,6 +426,8 @@ export const useEditorPermissions = () => {
     visSupportsChartHeight,
     visSupportsMobileChartHeight,
     visSupportsDateCategoryAxis,
+    visSupportsDateCategoryAxisMin,
+    visSupportsDateCategoryAxisMax,
     visSupportsDateCategoryAxisLabel,
     visSupportsDateCategoryAxisLine,
     visSupportsDateCategoryAxisTicks,

package/src/components/Legend/Legend.Component.tsx

@@ -9,7 +9,7 @@ import { handleLineType } from '../../helpers/handleLineType'
 import { getMarginTop, getGradientConfig, getMarginBottom } from './helpers/index'
 import { Line } from '@visx/shape'
 import { Label } from '../../types/Label'
-import { ChartConfig } from '../../types/ChartConfig'
+import { ChartConfig, ViewportSize } from '../../types/ChartConfig'
 import { ColorScale } from '../../types/ChartContext'
 import { forwardRef, useState } from 'react'
 import LegendSuppression from './Legend.Suppression'
@@ -17,10 +17,12 @@ import LegendGradient from '@cdc/core/components/Legend/Legend.Gradient'
 import { DimensionsType } from '@cdc/core/types/Dimensions'
 import { isLegendWrapViewport } from '@cdc/core/helpers/viewports'
 
+const LEGEND_PADDING = 30
+
 export interface LegendProps {
   colorScale: ColorScale
   config: ChartConfig
-  currentViewport: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
+  currentViewport: ViewportSize
   formatLabels: (labels: Label[]) => Label[]
   highlight: Function
   highlightReset: Function
@@ -78,7 +80,7 @@ const Legend: React.FC<LegendProps> = forwardRef(
           config={config}
           {...getGradientConfig(config, formatLabels, colorScale)}
           dimensions={dimensions}
-          currentViewport={currentViewport}
+          parentPaddingToSubtract={legend.hideBorder ? 0 : LEGEND_PADDING}
         />
 
         <LegendOrdinal scale={colorScale} itemDirection='row' labelMargin='0 20px 0 0' shapeMargin='0 10px 0'>
@@ -129,7 +131,7 @@ const Legend: React.FC<LegendProps> = forwardRef(
                         }}
                         role='button'
                       >
-                        <div className='d-flex justify-content-center align-items-center'>
+                        <>
                           {config.visualizationType === 'Line' && config.legend.style === 'lines' ? (
                             <svg width={40} height={25}>
                               <Line
@@ -141,17 +143,14 @@ const Legend: React.FC<LegendProps> = forwardRef(
                               />
                             </svg>
                           ) : (
-                            <div className='d-flex flex-column mt-1'>
+                            <>
                               <LegendShape
                                 shape={config.legend.style === 'boxes' ? 'square' : 'circle'}
-                                viewport={currentViewport}
-                                margin='0'
                                 fill={label.value}
-                                display={true}
                               />
-                            </div>
+                            </>
                           )}
-                        </div>
+                        </>
 
                         <LegendLabel align='left' margin='0 0 0 4px'>
                           {label.text}

package/src/components/Legend/Legend.tsx

@@ -17,6 +17,7 @@ const Legend = forwardRef((props, ref) => {
     transformedData: data,
     currentViewport,
     dimensions,
+    getTextWidth
   } = useContext(ConfigContext)
   if (!config.legend) return null
   // create fn to reverse labels while legend is Bottom.  Legend-right , legend-left works by default.
@@ -24,22 +25,21 @@ const Legend = forwardRef((props, ref) => {
   const createLegendLabels = createFormatLabels(config, tableData, data, colorScale)
 
   return (
-    !['Box Plot'].includes(config.visualizationType) && (
-      <Fragment>
-        <LegendComponent
-          dimensions={dimensions}
-          ref={ref}
-          skipId={props.skipId || 'legend'}
-          config={config}
-          colorScale={colorScale}
-          seriesHighlight={seriesHighlight}
-          highlight={highlight}
-          highlightReset={highlightReset}
-          currentViewport={currentViewport}
-          formatLabels={createLegendLabels}
-        />
-      </Fragment>
-    )
+    <Fragment>
+      <LegendComponent
+        getTextWidth={getTextWidth}
+        dimensions={dimensions}
+        ref={ref}
+        skipId={props.skipId || 'legend'}
+        config={config}
+        colorScale={colorScale}
+        seriesHighlight={seriesHighlight}
+        highlight={highlight}
+        highlightReset={highlightReset}
+        currentViewport={currentViewport}
+        formatLabels={createLegendLabels}
+      />
+    </Fragment>
   )
 })
 

package/src/components/LineChart/helpers.ts

@@ -92,8 +92,9 @@ export const filterCircles = (
 
 const isCalculable = value => !isNaN(parseFloat(value)) && isFinite(value)
 const handleFirstIndex = (data, seriesKey, preliminaryData) => {
+  let pairCount = '0'
   const result = {
-    data: [],
+    data: { '0': [] },
     style: ''
   }
 
@@ -116,7 +117,7 @@ const handleFirstIndex = (data, seriesKey, preliminaryData) => {
   if (suppressionData && suppressionData.style) {
     // Modify first item and add to result
     const modifiedItem = { ...firstIndexDataItem, [seriesKey]: 0 }
-    result.data.push(modifiedItem)
+    result.data[pairCount].push(modifiedItem)
     result.style = suppressionData.style
 
     // Find the next calculable item index
@@ -125,19 +126,20 @@ const handleFirstIndex = (data, seriesKey, preliminaryData) => {
       nextIndex++
     }
     if (nextIndex < data.length) {
-      result.data.push(data[nextIndex])
+      result.data[pairCount].push(data[nextIndex])
     }
   } else {
     // If no suppression, just add the first item
-    result.data.push(firstIndexDataItem)
+    result.data[pairCount].push(firstIndexDataItem)
   }
 
   return result
 }
 
 const handleLastIndex = (data, seriesKey, preliminaryData) => {
+  let pairCount = '0'
   const result = {
-    data: [],
+    data: { '0': [] },
     style: ''
   }
   let lastAddedIndex = -1 // Tracks the last index added to the result
@@ -152,7 +154,7 @@ const handleLastIndex = (data, seriesKey, preliminaryData) => {
     ) {
       const lastIndex = data.length - 1
       const modifiedItem = { ...data[lastIndex], [seriesKey]: 0 }
-      result.data.push(modifiedItem)
+      result.data[pairCount].push(modifiedItem)
 
       // Find previous calculable item
       let prevIndex = lastIndex - 1
@@ -160,7 +162,7 @@ const handleLastIndex = (data, seriesKey, preliminaryData) => {
         prevIndex--
       }
       if (prevIndex >= 0 && lastAddedIndex !== prevIndex) {
-        result.data.push(data[prevIndex])
+        result.data[pairCount].push(data[prevIndex])
         lastAddedIndex = prevIndex
       }
       result.style = pd.style
@@ -170,47 +172,48 @@ const handleLastIndex = (data, seriesKey, preliminaryData) => {
   return result
 }
 
-function handleMiddleIndices(data, seriesKey, dataKey, preliminaryData) {
-  const result = {
-    data: [],
+function handleMiddleIndices(data, seriesKey, preliminaryData) {
+  // slice data to remove first and last object these no need for handleMiddleIndices
+
+  let result = {
+    data: {},
     style: ''
   }
+  // Variable to count the number of sibling pairs found
+  let pairCount = 1
+
+  // Loop through the data array to find each occurrence of the target value
+  data.forEach((item, index) => {
+    preliminaryData.forEach(pd => {
+      const targetValue = pd.value
+      if (item[seriesKey] === targetValue) {
+        let siblingBefore = null
+        let siblingAfter = null
+
+        // Find the nearest numeric sibling before the current index
+        for (let i = index - 1; i >= 0; i--) {
+          if (isCalculable(data[i][seriesKey])) {
+            siblingBefore = data[i]
+            break // Stop searching once a valid sibling is found
+          }
+        }
 
-  const isValidMiddleIndex = index => index > 0 && index < data.length - 1
-
-  preliminaryData?.forEach(pd => {
-    if (pd.type === 'effect' || pd.hideLineStyle) return
-    const targetValue = pd.value
-
-    // Find all indices
-    const matchingIndices = data.reduce((indices, item, index) => {
-      if (item[seriesKey] === targetValue && isValidMiddleIndex(index) && (!pd.column || pd.column === seriesKey)) {
-        indices.push(index)
-      }
-      return indices
-    }, [])
-
-    // Process each valid index
-    matchingIndices.forEach(i => {
-      result.style = pd.style
-      // Add previous object if calculable
-      if (isCalculable(data[i - 1][seriesKey])) {
-        result.data.push(data[i - 1])
-      }
+        // Find the nearest numeric sibling after the current index
+        for (let j = index + 1; j < data.length; j++) {
+          if (isCalculable(data[j][seriesKey])) {
+            siblingAfter = data[j]
+            break // Stop searching once a valid sibling is found
+          }
+        }
 
-      // Find and add the next calculable object
-      const nextIndex = data
-        .slice(i + 1)
-        .findIndex(item => item[seriesKey] !== targetValue && isCalculable(item[seriesKey]))
-      if (nextIndex !== -1) {
-        result.data.push(data[i + 1 + nextIndex])
+        // Only add siblings to results if both siblings are found
+        if (siblingBefore && siblingAfter) {
+          result.style = pd.style
+          result.data[pairCount++] = [siblingBefore, siblingAfter]
+        }
       }
     })
   })
-
-  // Deduplicate entries
-  result.data = _.uniqWith(result.data, (a, b) => a[dataKey] === b[dataKey] && a[seriesKey] === b[seriesKey])
-
   return result
 }
 
@@ -221,7 +224,9 @@ export const createDataSegments = (data, seriesKey, preliminaryData, dataKey) =>
   // Process the last index if necessary
   const lastSegment = handleLastIndex(data, seriesKey, preliminaryData)
   // Process the middle segment
-  const middleSegments = handleMiddleIndices(data, seriesKey, dataKey, preliminaryData)
+  const middleSegments = handleMiddleIndices(data, seriesKey, preliminaryData)
+
   // Combine all segments into a single array
-  return [firstSegment, middleSegments, lastSegment].filter(segment => segment.data.length > 0 && segment.style !== '')
+  return [firstSegment, middleSegments, lastSegment]
+  // return [firstSegment, middleSegments, lastSegment].filter(segment => segment.data.length > 0 && segment.style !== '')
 }