@cdc/chart 4.25.3-6 → 4.25.5-1

package/src/components/EditorPanel/EditorPanel.tsx

@@ -906,7 +906,7 @@ const EditorPanel = () => {
     return Object.keys(columns)
   }
 
-  const getLegendStyleOptions = (option: 'style' | 'subStyle' | 'shapes'): string[] => {
+  const getLegendStyleOptions = (option: 'style' | 'subStyle' | 'shapes' | 'groupBy'): string[] => {
     const options: string[] = []
 
     switch (option) {
@@ -929,6 +929,9 @@ const EditorPanel = () => {
           options.push('linear blocks', 'smooth')
         }
 
+        break
+      case 'groupBy':
+        options.push(...getColumns())
         break
     }
     return options
@@ -962,7 +965,7 @@ const EditorPanel = () => {
   }
 
   const convertStateToConfig = () => {
-    let strippedState = JSON.parse(JSON.stringify(config))
+    let strippedState = _.cloneDeep(config)
     if (false === missingRequiredSections(config)) {
       delete strippedState.newViz
     }
@@ -2698,7 +2701,7 @@ const EditorPanel = () => {
                         </>
                       )}
 
-                      {isDateScale(config.xAxis) && (
+                      {(isDateScale(config.xAxis) || config?.visualizationType === 'Bump Chart') && (
                         <>
                           <p style={{ padding: '1.5em 0 0.5em', fontSize: '.9rem', lineHeight: '1rem' }}>
                             Format how charts should parse and display your dates using{' '}
@@ -2909,27 +2912,26 @@ const EditorPanel = () => {
                             </>
                           )}
 
-                          {config.xAxis.type === 'date' ||
-                            (config.xAxis.type === 'date-time' && (
-                              <>
-                                <TextField
-                                  type='date'
-                                  section='exclusions'
-                                  fieldName='dateStart'
-                                  label='Start Date'
-                                  updateField={updateField}
-                                  value={config.exclusions.dateStart || ''}
-                                />
-                                <TextField
-                                  type='date'
-                                  section='exclusions'
-                                  fieldName='dateEnd'
-                                  label='End Date'
-                                  updateField={updateField}
-                                  value={config.exclusions.dateEnd || ''}
-                                />
-                              </>
-                            ))}
+                          {(config.xAxis.type === 'date' || config.xAxis.type === 'date-time') && (
+                            <>
+                              <TextField
+                                type='date'
+                                section='exclusions'
+                                fieldName='dateStart'
+                                label='Start Date'
+                                updateField={updateField}
+                                value={config.exclusions.dateStart || ''}
+                              />
+                              <TextField
+                                type='date'
+                                section='exclusions'
+                                fieldName='dateEnd'
+                                label='End Date'
+                                updateField={updateField}
+                                value={config.exclusions.dateEnd || ''}
+                              />
+                            </>
+                          )}
                         </>
                       )}
 
@@ -3691,6 +3693,17 @@ const EditorPanel = () => {
                     updateField={updateField}
                     options={getLegendStyleOptions('style')}
                   />
+
+                  <Select
+                    value={config.legend.groupBy}
+                    section='legend'
+                    fieldName='groupBy'
+                    initial='Select'
+                    label='Legend Group By:'
+                    updateField={updateField}
+                    options={getLegendStyleOptions('groupBy')}
+                  />
+
                   <CheckBox
                     tooltip={
                       <Tooltip style={{ textTransform: 'none' }}>
@@ -3986,6 +3999,29 @@ const EditorPanel = () => {
                     fieldName='description'
                     label='Legend Description'
                   />
+                  <CheckBox
+                    value={config.legend.unified}
+                    section='legend'
+                    fieldName='unified'
+                    label='Unified Legend'
+                    updateField={updateField}
+                    tooltip={
+                      <Tooltip style={{ textTransform: 'none' }}>
+                        <Tooltip.Target>
+                          <Icon
+                            display='question'
+                            style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
+                          />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>
+                            For a chart with filters, check this option if you want the legend to contain an item for
+                            every series in the data set, including those that are filtered.
+                          </p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    }
+                  />
                 </AccordionItemPanel>
               </AccordionItem>
             )}

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

@@ -113,7 +113,7 @@ const PanelGeneral: FC<PanelProps> = props => {
             )}
           </div>
         )}
-        {(visualizationType === 'Bar' || visualizationType === 'Combo' || visualizationType === 'Area Chart') && (
+        {(visualizationType === 'Bar' || visualizationType === 'Combo') && (
           <Select
             value={visualizationSubType || 'Regular'}
             fieldName='visualizationSubType'
@@ -209,10 +209,8 @@ 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>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).
@@ -245,35 +243,7 @@ const PanelGeneral: FC<PanelProps> = props => {
               label='Display "Zero Data" Label'
               updateField={updateField}
             />
-            <CheckBox
-              tooltip={
-                <Tooltip style={{ textTransform: 'none' }}>
-                  <Tooltip.Target>
-                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                  </Tooltip.Target>
-                  <Tooltip.Content>
-                    {config.visualizationSubType === 'stacked' && (
-                      <p>
-                        We do not recommend using stacked vertical/horizontal bar charts for missing data. If you choose
-                        to proceed, selecting this option will display 'N/A' in the tooltip hover and data table (e.g.
-                        nothing will display in chart).
-                      </p>
-                    )}
-                    {config.visualizationSubType !== 'stacked' && (
-                      <p>
-                        Selecting this option will display 'N/A' on the Date/Category Axis, in the tooltip hover, and in
-                        the data table to indicate missing or undefined data values.
-                      </p>
-                    )}
-                  </Tooltip.Content>
-                </Tooltip>
-              }
-              value={config.general.showMissingDataLabel}
-              section='general'
-              fieldName='showMissingDataLabel'
-              label='Display "Missing Data" Label'
-              updateField={updateField}
-            />
+
             <CheckBox
               display={config.visualizationType === 'Bar' || config.visualizationType === 'Combo'}
               tooltip={
@@ -329,6 +299,36 @@ const PanelGeneral: FC<PanelProps> = props => {
           </>
         )}
 
+        <CheckBox
+          tooltip={
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                {config.visualizationSubType === 'stacked' && (
+                  <p>
+                    We do not recommend using stacked vertical/horizontal bar charts for missing data. If you choose to
+                    proceed, selecting this option will display 'N/A' in the tooltip hover and data table (e.g. nothing
+                    will display in chart).
+                  </p>
+                )}
+                {config.visualizationSubType !== 'stacked' && (
+                  <p>
+                    Selecting this option will display 'N/A' on the Date/Category Axis, in the tooltip hover, and in the
+                    data table to indicate missing or undefined data values.
+                  </p>
+                )}
+              </Tooltip.Content>
+            </Tooltip>
+          }
+          value={config.general.showMissingDataLabel}
+          section='general'
+          fieldName='showMissingDataLabel'
+          label='Display "Missing Data" Label'
+          updateField={updateField}
+        />
+
         {visualizationType === 'Pie' && (
           <Select fieldName='pieType' label='Pie Chart Type' updateField={updateField} options={['Regular', 'Donut']} />
         )}

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

@@ -1,4 +1,4 @@
-import React, { useContext, useMemo } from 'react'
+import React, { useContext } from 'react'
 import ConfigContext from '../../../../ConfigContext'
 
 // Core
@@ -17,7 +17,7 @@ import {
   AccordionItemPanel,
   AccordionItemButton
 } from 'react-accessible-accordion'
-import { Draggable } from '@hello-pangea/dnd'
+import { Draggable, DragDropContext, Droppable } from '@hello-pangea/dnd'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 
 const SeriesContext = React.createContext({})
@@ -609,9 +609,20 @@ const SeriesButtonRemove = props => {
 }
 
 const SeriesItem = props => {
-  const { config } = useContext(ConfigContext)
+  const { config, updateConfig } = useContext(ConfigContext)
   const { updateSeries, getColumns } = useContext(SeriesContext)
   const { series, getItemStyle, sortableItemStyles, chartsWithOptions, index: i } = props
+  const legendOrderOptions: { label: string; value: string }[] = [
+    { label: 'Order By Data Column', value: 'dataColumn' },
+    {
+      label: 'Ascending Alphanumeric',
+      value: 'asc'
+    },
+    {
+      label: 'Descending Alphanumeric',
+      value: 'desc'
+    }
+  ]
   const showDynamicCategory =
     ['Bar', 'Line'].includes(config.visualizationType) &&
     config.visualizationSubType !== 'Stacked' &&
@@ -646,28 +657,43 @@ const SeriesItem = props => {
                 <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>
-                      }
-                    />
+                    <>
+                      <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>
+                        }
+                      />
+
+                      <>
+                        <Select
+                          value={config.legend.order}
+                          options={legendOrderOptions}
+                          section='legend'
+                          fieldName='order'
+                          updateField={(_section, _subsection, _fieldName, value) => {
+                            updateConfig({ ...config, legend: { ...config.legend, order: value } })
+                          }}
+                          label='Dynamic Series Order'
+                        />
+                      </>
+                    </>
                   )}
                   <Series.Input.Weight series={series} index={i} />
                   <Series.Dropdown.SeriesType series={series} index={i} />

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

@@ -22,6 +22,7 @@ import { useEditorPermissions } from '../../useEditorPermissions.js'
 import { useEditorPanelContext } from '../../EditorPanelContext.js'
 import ConfigContext from '../../../../ConfigContext.js'
 import { PanelProps } from '../PanelProps'
+import { LineChartConfig } from '../../../../types/ChartConfig'
 
 const PanelVisual: FC<PanelProps> = props => {
   const { config, updateConfig, colorPalettes, twoColorPalette } = useContext<ChartContext>(ConfigContext)
@@ -147,9 +148,7 @@ const PanelVisual: FC<PanelProps> = props => {
                   />
                 </Tooltip.Target>
                 <Tooltip.Content>
-                  <p>
-                  Recommended set to display for Section 508 compliance.
-                  </p>
+                  <p>Recommended set to display for Section 508 compliance.</p>
                 </Tooltip.Content>
               </Tooltip>
             }
@@ -222,6 +221,14 @@ const PanelVisual: FC<PanelProps> = props => {
               updateField={updateField}
               options={['Same as Line', 'Lighter than Line']}
             />
+            <CheckBox
+              value={!(config as LineChartConfig).isolatedDotsSameSize}
+              fieldName='isolatedDotsSameSize'
+              label='Accentuate isolated data points'
+              updateField={(section, subsection, fieldname, value) =>
+                updateField(section, subsection, fieldname, !value)
+              }
+            />
           </>
         )}
         {/* eslint-disable */}

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

@@ -30,9 +30,10 @@ export const updateFieldRankByValue = (
   newConfig.rankByValue = newValue
 
   if (config.rankByValue && !newValue) {
-    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 CIkeys: string[] = Object.values(_.get(config, 'confidenceKeys', {})) as string[]
+    const seriesKeys: string[] = _.get(config, 'series', []).map((s: any) => s.dataKey)
+    const keysToClean: string[] = [...(seriesKeys ?? []), ...(CIkeys ?? [])]
+
     const cleanData = config?.xAxis?.dataKey
       ? transform.cleanData(config.data, config.xAxis.dataKey, keysToClean)
       : config.data

package/src/components/EditorPanel/useEditorPermissions.ts

@@ -358,10 +358,7 @@ export const useEditorPermissions = () => {
 
   const visSupportsReactTooltip = () => {
     if (config.yAxis.type === 'categorical') return true
-    if (
-      ['Deviation Bar', 'Box Plot', 'Scatter Plot', 'Paired Bar'].includes(visualizationType) ||
-      (visualizationType === 'Bar' && config.tooltips.singleSeries)
-    ) {
+    if (['Deviation Bar', 'Box Plot', 'Scatter Plot', 'Paired Bar'].includes(visualizationType)) {
       return true
     }
   }

package/src/components/ForestPlot/ForestPlot.tsx

@@ -14,7 +14,7 @@ import { type ChartContext } from '@cdc/chart/src/types/ChartContext'
 
 // cdc
 import ConfigContext from '../../ConfigContext'
-import { appFontSize } from '@cdc/core/helpers/cove/fontSettings'
+import { APP_FONT_SIZE } from '@cdc/core/helpers/constants'
 
 const ForestPlot = ({
   xScale,
@@ -254,7 +254,7 @@ const ForestPlot = ({
             <LinePath
               data={regressionPoints}
               x={d => d.x}
-              y={d => d.y - appFontSize / 2}
+              y={d => d.y - APP_FONT_SIZE / 2}
               stroke='black'
               strokeWidth={2}
               fill={'black'}

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

@@ -15,6 +15,8 @@ import LegendGradient from '@cdc/core/components/Legend/Legend.Gradient'
 import { DimensionsType } from '@cdc/core/types/Dimensions'
 import { isLegendWrapViewport } from '@cdc/core/helpers/viewports'
 import LegendLineShape from './LegendLine.Shape'
+import LegendGroup from './LegendGroup'
+import { getSeriesWithData } from '../../helpers/dataHelpers'
 
 const LEGEND_PADDING = 36
 
@@ -29,6 +31,7 @@ export interface LegendProps {
   seriesHighlight: string[]
   skipId: string
   dimensions: DimensionsType // for responsive width legend
+  transformedData: any
 }
 
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
@@ -43,12 +46,17 @@ const Legend: React.FC<LegendProps> = forwardRef(
       currentViewport,
       formatLabels,
       skipId = 'legend',
-      dimensions
+      dimensions,
+      transformedData: data
     },
     ref
   ) => {
     const { innerClasses, containerClasses } = getLegendClasses(config)
     const { runtime, legend } = config
+    const { series } = runtime
+
+    const seriesWithData = getSeriesWithData(config)
+    const dontFilterLegendItems = !series.length || legend.unified || !seriesWithData.length
 
     const isLegendBottom =
       legend?.position === 'bottom' ||
@@ -84,77 +92,80 @@ const Legend: React.FC<LegendProps> = forwardRef(
           dimensions={dimensions}
           parentPaddingToSubtract={legend.hideBorder ? 0 : LEGEND_PADDING}
         />
+        <LegendGroup formatLabels={formatLabels} />
 
         <LegendOrdinal scale={colorScale} itemDirection='row' labelMargin='0 20px 0 0' shapeMargin='0 10px 0'>
           {labels => {
             return (
               <>
                 <div className={innerClasses.join(' ')}>
-                  {formatLabels(labels as Label[]).map((label, i) => {
-                    let className = ['legend-item', `legend-text--${label.text.replace(' ', '').toLowerCase()}`]
-                    let itemName = label.datum
-
-                    // Filter excluded data keys from legend
-                    if (config.exclusions.active && config.exclusions.keys?.includes(itemName)) {
-                      return null
-                    }
+                  {formatLabels(labels as Label[])
+                    .filter(label => dontFilterLegendItems || seriesWithData.includes(label.datum))
+                    .map((label, i) => {
+                      let className = ['legend-item', `legend-text--${label.text.replace(' ', '').toLowerCase()}`]
+                      let itemName = label.datum
+
+                      // Filter excluded data keys from legend
+                      if (config.exclusions.active && config.exclusions.keys?.includes(itemName)) {
+                        return null
+                      }
 
-                    if (runtime.seriesLabels) {
-                      let index = config.runtime.seriesLabelsAll.indexOf(itemName)
-                      itemName = config.runtime.seriesKeys[index]
+                      if (runtime.seriesLabels) {
+                        let index = config.runtime.seriesLabelsAll.indexOf(itemName)
+                        itemName = config.runtime.seriesKeys[index]
 
-                      if (runtime?.forecastingSeriesKeys?.length > 0) {
-                        itemName = label.text
+                        if (runtime?.forecastingSeriesKeys?.length > 0) {
+                          itemName = label.text
+                        }
                       }
-                    }
 
-                    if (seriesHighlight.length) {
-                      if (!seriesHighlight.includes(itemName)) {
-                        className.push('inactive')
-                      } else className.push('highlighted')
-                    }
+                      if (seriesHighlight.length) {
+                        if (!seriesHighlight.includes(itemName)) {
+                          className.push('inactive')
+                        } else className.push('highlighted')
+                      }
 
-                    if (config.legend.style === 'gradient') {
-                      return <></>
-                    }
+                      if (config.legend.style === 'gradient' || config.legend.groupBy) {
+                        return <></>
+                      }
 
-                    return (
-                      <LegendItem
-                        className={className.join(' ')}
-                        tabIndex={0}
-                        key={`legend-quantile-${i}`}
-                        onKeyDown={e => {
-                          if (e.key === 'Enter') {
+                      return (
+                        <LegendItem
+                          className={className.join(' ')}
+                          tabIndex={0}
+                          key={`legend-quantile-${i}`}
+                          onKeyDown={e => {
+                            if (e.key === 'Enter') {
+                              e.preventDefault()
+                              highlight(label)
+                            }
+                          }}
+                          onClick={e => {
                             e.preventDefault()
                             highlight(label)
-                          }
-                        }}
-                        onClick={e => {
-                          e.preventDefault()
-                          highlight(label)
-                        }}
-                        role='button'
-                      >
-                        <>
-                          {config.visualizationType === 'Line' && config.legend.style === 'lines' ? (
-                            <React.Fragment>
-                              <LegendLineShape index={i} label={label} config={config} />
-                            </React.Fragment>
-                          ) : (
-                            <>
-                              <LegendShape
-                                shape={config.legend.style === 'boxes' ? 'square' : 'circle'}
-                                fill={label.value}
-                              />
-                            </>
-                          )}
-                        </>
-                        <LegendLabel align='left' className='m-0'>
-                          {label.text}
-                        </LegendLabel>
-                      </LegendItem>
-                    )
-                  })}
+                          }}
+                          role='button'
+                        >
+                          <>
+                            {config.visualizationType === 'Line' && config.legend.style === 'lines' ? (
+                              <React.Fragment>
+                                <LegendLineShape index={i} label={label} config={config} />
+                              </React.Fragment>
+                            ) : (
+                              <>
+                                <LegendShape
+                                  shape={config.legend.style === 'boxes' ? 'square' : 'circle'}
+                                  fill={label.value}
+                                />
+                              </>
+                            )}
+                          </>
+                          <LegendLabel align='left' className='m-0'>
+                            {parse(label.text)}
+                          </LegendLabel>
+                        </LegendItem>
+                      )
+                    })}
 
                   {highLightedLegendItems.map((bar, i) => {
                     // if duplicates only return first item

package/src/components/Legend/Legend.Suppression.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { ChartConfig } from '../../types/ChartConfig'
-import Icon from '@cdc/core/components/ui/Icon'
-import { Tooltip as ReactTooltip } from 'react-tooltip'
+import RichTooltip from '@cdc/core/components/RichTooltip/RichTooltip'
 interface LegendProps {
   config: ChartConfig
   isLegendBottom: boolean
@@ -35,10 +34,6 @@ const LegendSuppression: React.FC<LegendProps> = ({ config, isLegendBottom }) =>
           </div>
         )
     )
-  const handleLinkClick = event => {
-    // prevent defintion link to change URl
-    event.preventDefault()
-  }
 
   const renderSuppressedItems = () => {
     const getStyle = displayGray => {
@@ -121,27 +116,22 @@ const LegendSuppression: React.FC<LegendProps> = ({ config, isLegendBottom }) =>
         </React.Fragment>
       )}
       {shouldShowSuppressedInfo() && (
-        <div className='legend-container__outer definition-link'>
-          <Icon alt='info-icon' display='info' />
+        <div className='legend-container__outer link-container'>
           <p>
             This chart contains
-            <a // prettier-ignore
-              onClick={handleLinkClick}
-              data-tooltip-content='Data is suppressed to maintain statistical reliability. This occurs when the number of respondents or reported values does not meet the minimum reporting threshold.'
-              data-tooltip-id='my-tooltip'
-              href='no-router-link'
-            >
-              suppressed data
-            </a>
+            <RichTooltip
+              tooltipContent={`Data is
+                           suppressed to maintain statistical reliability.
+                            This occurs when the number of respondents or 
+                            reported values does not meet the minimum
+                             reporting threshold.`}
+              linkText='suppressed data'
+              href={null}
+              tooltipOpacity={config.tooltips.opacity}
+            />
           </p>
         </div>
       )}
-
-      <ReactTooltip // prettier-ignore
-        id='my-tooltip'
-        variant='light'
-        style={{ background: `rgba(255,255,255, ${config.tooltips.opacity / 100})`, color: 'black', maxWidth: '100%' }}
-      />
     </React.Fragment>
   )
 }