@cdc/chart 4.25.3 → 4.25.5-1

package/src/components/BarChart/helpers/index.ts

@@ -9,6 +9,7 @@ interface BarConfigProps {
   config: { [key: string]: any }
   barWidth: number
   isVertical: boolean
+  yAxisValue: number
 }
 
 // Function to create bar width based on suppression status and missing data label
@@ -18,7 +19,8 @@ export const getBarConfig = ({
   defaultBarWidth,
   config,
   barWidth,
-  isVertical
+  isVertical,
+  yAxisValue
 }: BarConfigProps) => {
   const heightMini = 3 /// height of small bars aka suppressed/NA/Zero valued
   let barHeight = defaultBarHeight
@@ -97,7 +99,8 @@ export const getBarConfig = ({
       return labelFits && isVertical ? label : !isVertical ? label : ''
     }
   }
-  return { barWidthHorizontal, barHeight, isSuppressed, showMissingDataLabel, getBarY, getAbsentDataLabel }
+  const absentDataLabel = getAbsentDataLabel(yAxisValue)
+  return { barWidthHorizontal, barHeight, isSuppressed, showMissingDataLabel, getBarY, absentDataLabel }
 }
 
 export const testZeroValue = value => {

package/src/components/BarChart/helpers/tests/getBarHeights.test.ts

@@ -0,0 +1,83 @@
+import { getHorizontalBarHeights } from '../getBarHeights'
+
+describe('getHorizontalBarHeights', () => {
+  it('should calculate bar heights for non-stacked horizontal bars', () => {
+    const config = {
+      orientation: 'horizontal',
+      visualizationSubType: 'grouped',
+      runtime: { seriesKeys: ['A', 'B'] },
+      barHeight: 10,
+      barSpace: 5,
+      yAxis: { labelPlacement: 'Above Bar' }
+    }
+
+    const bars = [{ index: 0 }, { index: 1 }]
+
+    const result = getHorizontalBarHeights(config, bars)
+
+    expect(result).toEqual([
+      { index: 0, y: 0, height: 20 },
+      { index: 1, y: 25, height: 20 }
+    ])
+  })
+
+  it('should calculate bar heights for stacked horizontal bars', () => {
+    const config = {
+      orientation: 'horizontal',
+      visualizationSubType: 'stacked',
+      barHeight: 15,
+      barSpace: 5,
+      yAxis: { labelPlacement: 'Above Bar' }
+    }
+
+    const bars = [{ index: 0 }, { index: 1 }]
+
+    const result = getHorizontalBarHeights(config, bars)
+
+    expect(result).toEqual([
+      { index: 0, y: 0, height: 15 },
+      { index: 1, y: 20, height: 15 }
+    ])
+  })
+
+  it('should include label space when labelPlacement is Below Bar', () => {
+    const config = {
+      orientation: 'horizontal',
+      visualizationSubType: 'grouped',
+      runtime: { seriesKeys: ['A'] },
+      barHeight: 10,
+      barSpace: 5,
+      yAxis: { labelPlacement: 'Below Bar' }
+    }
+
+    const bars = [{ index: 0 }, { index: 1 }]
+
+    const result = getHorizontalBarHeights(config, bars)
+
+    expect(result).toEqual([
+      { index: 0, y: 0, height: 10 },
+      { index: 1, y: 37, height: 10 }
+    ])
+  })
+
+  it('should handle lollipop chart bar heights', () => {
+    const config = {
+      orientation: 'horizontal',
+      visualizationSubType: 'grouped',
+      runtime: { seriesKeys: ['A', 'B', 'C'] },
+      isLollipopChart: true,
+      lollipopSize: 'medium',
+      barSpace: 5,
+      yAxis: { labelPlacement: 'Above Bar' }
+    }
+
+    const bars = [{ index: 0 }, { index: 1 }]
+
+    const result = getHorizontalBarHeights(config, bars)
+
+    expect(result).toEqual([
+      { index: 0, y: 0, height: 18 },
+      { index: 1, y: 23, height: 18 }
+    ])
+  })
+})

package/src/{hooks → components/BarChart/helpers}/useBarChart.ts

@@ -1,12 +1,12 @@
 import React, { useContext, useEffect, useState } from 'react'
-import ConfigContext, { ChartDispatchContext } from '../ConfigContext'
+import { ChartDispatchContext } from '../../../ConfigContext'
 import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
-import { appFontSize } from '@cdc/core/helpers/cove/fontSettings'
-export const useBarChart = () => {
-  const { config, colorPalettes, tableData, updateConfig, parseDate, formatDate, setSeriesHighlight, seriesHighlight } =
-    useContext(ConfigContext)
-  const dispatch = useContext(ChartDispatchContext)
+import { APP_FONT_SIZE } from '@cdc/core/helpers/constants'
+
+export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, configContext) => {
+  const { config, colorPalettes, tableData, updateConfig, parseDate, formatDate, seriesHighlight } = configContext
   const { orientation } = config
+  const dispatch = useContext(ChartDispatchContext)
   const [hoveredBar, setHoveredBar] = useState(null)
 
   const isHorizontal = orientation === 'horizontal'
@@ -123,43 +123,6 @@ export const useBarChart = () => {
     const barColor = palette[barIndex]
     return barColor
   }
-  const updateBars = defaultBars => {
-    // function updates  stacked && regular && lollipop horizontal bars
-    if (config.visualizationType !== 'Bar' && !isHorizontal) return defaultBars
-
-    const barsArr = [...defaultBars]
-    let barHeight
-
-    const heights = {
-      stacked: config.barHeight,
-      lollipop: lollipopBarWidth
-    }
-
-    if (!isStacked) {
-      barHeight = heights[config.isLollipopChart ? 'lollipop' : 'stacked'] * stackCount
-    } else {
-      barHeight = heights.stacked
-    }
-
-    const labelHeight = isLabelBelowBar ? appFontSize * 1.2 : 0
-    let barSpace = Number(config.barSpace)
-
-    // calculate height of container based height, space and fontSize of labels
-    let totalHeight = barsArr.length * (barHeight + labelHeight + barSpace)
-
-    if (isHorizontal) {
-      config.heights.horizontal = totalHeight
-    }
-
-    // return new updated bars/groupes
-    return barsArr.map((bar, i) => {
-      // set bars Y dynamically to handle space between bars
-      let y = 0
-      bar.index !== 0 && (y = (barHeight + barSpace + labelHeight) * i)
-
-      return { ...bar, y: y, height: barHeight }
-    })
-  }
 
   const getHighlightedBarColorByValue = value => {
     const match = config?.highlightedBarValues.find(item => {
@@ -226,17 +189,18 @@ export const useBarChart = () => {
     return additionalTooltipItems
   }
 
-  const onMouseOverBar = (categoryValue, barKey) => {
+  const onMouseOverBar = (categoryValue, barKey, event, data) => {
     if (config.legend.highlightOnHover && config.legend.behavior === 'highlight' && barKey) {
       dispatch({ type: 'SET_SERIES_HIGHLIGHT', payload: [barKey] })
     }
-
+    handleTooltipMouseOver(event, data)
     setHoveredBar(categoryValue)
   }
   const onMouseLeaveBar = () => {
     if (config.legend.highlightOnHover && config.legend.behavior === 'highlight') {
       dispatch({ type: 'SET_SERIES_HIGHLIGHT', payload: [] })
     }
+    handleTooltipMouseOff()
   }
 
   return {
@@ -256,7 +220,6 @@ export const useBarChart = () => {
     barStackedSeriesKeys,
     hasMultipleSeries,
     applyRadius,
-    updateBars,
     assignColorsToValues,
     getHighlightedBarColorByValue,
     getHighlightedBarByValue,

package/src/components/BoxPlot/BoxPlot.tsx

@@ -5,6 +5,7 @@ import ConfigContext from '../../ConfigContext'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import { colorPalettesChart } from '@cdc/core/data/colorPalettes'
 import { handleTooltip, createPlots } from './helpers/index'
+import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 import _ from 'lodash'
 
 const CoveBoxPlot = ({ xScale, yScale, seriesScale }) => {
@@ -15,7 +16,7 @@ const CoveBoxPlot = ({ xScale, yScale, seriesScale }) => {
   const boxWidth = xScale.bandwidth()
 
   const bodyStyles = getComputedStyle(document.body)
-  const defaultColor = bodyStyles.getPropertyValue('--cool-gray-90').trim()
+  const defaultColor = APP_FONT_COLOR
   const constrainedWidth = Math.min(40, boxWidth)
   const color_0 = _.get(colorPalettesChart, [config.palette, 0], '#000')
   const plots = createPlots(data, config)

package/src/components/DeviationBar.jsx

@@ -6,6 +6,7 @@ import { Text } from '@visx/text'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import useIntersectionObserver from '../hooks/useIntersectionObserver'
 import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
+import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 
 export default function DeviationBar({ height, xScale }) {
@@ -178,7 +179,7 @@ export default function DeviationBar({ height, xScale }) {
           // colors
           const [leftColor, rightColor] = twoColorPalette[twoColor.palette]
           const barColor = { left: leftColor, right: rightColor }
-          const fill = getContrastColor('#000', barColor[barPosition])
+          const fill = getContrastColor(APP_FONT_COLOR, barColor[barPosition])
 
           let textProps = getTextProps(config.isLollipopChart, textFits, lollipopShapeSize, fill)
           // tooltips

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/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

@@ -56,7 +56,7 @@ const Legend: React.FC<LegendProps> = forwardRef(
     const { series } = runtime
 
     const seriesWithData = getSeriesWithData(config)
-    const dontFilterLegendItems = !series.length || legend.unified
+    const dontFilterLegendItems = !series.length || legend.unified || !seriesWithData.length
 
     const isLegendBottom =
       legend?.position === 'bottom' ||

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>
   )
 }

package/src/components/Legend/helpers/createFormatLabels.tsx

@@ -17,8 +17,36 @@ export const createFormatLabels =
           })
         : labels
     const reverseLabels = labels => {
+      if (config.series.some(series => series.dynamicCategory)) {
+        return orderDynamicLabels(labels)
+      }
+
       return config.legend.reverseLabelOrder ? sortVertical(labels).reverse() : sortVertical(labels)
     }
+
+    const orderDynamicLabels = labels => {
+      // Handle different ordering configurations
+      switch (config.legend.order) {
+        case 'dataColumn':
+          return labels
+        case 'asc':
+        case 'desc':
+          return labels.sort((a, b) => {
+            const valA = a.datum || a.text
+            const valB = b.datum || b.text
+            const numA = parseFloat(valA)
+            const numB = parseFloat(valB)
+            if (!isNaN(numA) && !isNaN(numB)) {
+              return config.legend.order === 'asc' ? numA - numB : numB - numA
+            } else {
+              return config.legend.order === 'asc' ? valA.localeCompare(valB) : valB.localeCompare(valA)
+            }
+          })
+
+        default:
+          return labels // Default case to handle any unexpected config.legend.order values
+      }
+    }
     const colorCode = config.legend?.colorCode
     if (visualizationType === 'Deviation Bar') {
       const [belowColor, aboveColor] = twoColorPalette[config.twoColor.palette]

package/src/components/LineChart/LineChartProps.ts

@@ -29,9 +29,11 @@ export interface StyleProps {
   handleLineType: Function
   lineType: string
   preliminaryData: PreliminaryDataItem[]
-  seriesKey: 'string'
+  seriesKey: string
   stroke: string
   strokeWidth: number
+  dynamicCategory: string
+  originalSeriesKey: string
 }
 export interface Style {
   stroke: string