@cdc/chart 4.25.3 → 4.25.6

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']} />
         )}
@@ -435,9 +435,9 @@ const PanelGeneral: FC<PanelProps> = props => {
         {visSupportsFootnotes() && (
           <TextField
             type='textarea'
-            value={config.footnotes}
+            value={config.legacyFootnotes}
             updateField={updateField}
-            fieldName='footnotes'
+            fieldName='legacyFootnotes'
             label='Footnotes'
             tooltip={
               <Tooltip style={{ textTransform: 'none' }}>

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,13 +609,25 @@ 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' &&
     !config.series.find(s => s.dynamicCategory && s.dataKey !== series.dataKey)
+  const SELECT = '- Select -'
   return (
     <Draggable key={series.dataKey} draggableId={`draggableFilter-${series.dataKey}`} index={i}>
       {(provided, snapshot) => (
@@ -646,28 +658,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,8 @@ import { useEditorPermissions } from '../../useEditorPermissions.js'
 import { useEditorPanelContext } from '../../EditorPanelContext.js'
 import ConfigContext from '../../../../ConfigContext.js'
 import { PanelProps } from '../PanelProps'
+import { LineChartConfig } from '../../../../types/ChartConfig'
+import './panelVisual.styles.css'
 
 const PanelVisual: FC<PanelProps> = props => {
   const { config, updateConfig, colorPalettes, twoColorPalette } = useContext<ChartContext>(ConfigContext)
@@ -44,7 +46,7 @@ const PanelVisual: FC<PanelProps> = props => {
   const { twoColorPalettes, sequential, nonSequential, accessibleColors } = useColorPalette(config, updateConfig)
 
   const updateColor = (property, _value) => {
-    console.log('value', _value)
+    console.error('value', _value)
     if (property === 'storyNodeFontColor') {
       updateConfig({
         ...config,
@@ -147,9 +149,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 +222,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/components/Panels/panelVisual.styles.css

@@ -0,0 +1,8 @@
+.type-chart .sidebar .color-palette button:not(.selected) {
+  border:  var(--cool-gray-30) 2px solid !important;
+
+}
+
+.type-chart .sidebar .color-palette button.selected {
+  border:  black 2px solid !important;
+}

package/src/components/EditorPanel/useEditorPermissions.ts

@@ -197,7 +197,7 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsTooltipLines = () => {
-    const enabledCharts = ['Combo', 'Forecasting', 'Area Chart', 'Line', 'Bar']
+    const enabledCharts = ['Combo', 'Forecasting', 'Area Chart', 'Line', 'Bar', 'Scatter Plot']
     if (enabledCharts.includes(visualizationType)) return true
     return false
   }
@@ -357,10 +357,10 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsReactTooltip = () => {
-    if (config.yAxis.type === 'categorical') return true
+    if (config.yAxis.type === 'categorical' && config.tooltips.singleSeries) return true
     if (
-      ['Deviation Bar', 'Box Plot', 'Scatter Plot', 'Paired Bar'].includes(visualizationType) ||
-      (visualizationType === 'Bar' && config.tooltips.singleSeries)
+      ['Deviation Bar', 'Box Plot', 'Scatter Plot', 'Paired Bar', 'Bar'].includes(visualizationType) &&
+      config.tooltips.singleSeries
     ) {
       return true
     }
@@ -384,7 +384,7 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsYPadding = () => {
-    return !config.dataFormat.onlyShowTopPrefixSuffix || !config.dataFormat.suffix?.includes(' ')
+    return !config.yAxis.inlineLabel || !config.yAxis.inlineLabel?.includes(' ')
   }
 
   const visHasSingleSeriesTooltip = () => {

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/HoverLine/HoverLine.tsx

@@ -0,0 +1,74 @@
+import React, { useContext } from 'react'
+import ConfigContext from '../../ConfigContext'
+import { Group } from '@visx/group'
+import { Line } from '@visx/shape'
+
+type HoverLineProps = {
+  tooltipData?: any // same as @visx/tooltip TooltipData
+  xMax?: number
+  yMax?: number
+  point: { x: number; y: number }
+  orientation: 'horizontal' | 'vertical'
+}
+
+const HoverLine: React.FC<HoverLineProps> = ({ tooltipData, xMax, yMax, point, orientation }) => {
+  const { config } = useContext(ConfigContext)
+  const { verticalHoverLine, horizontalHoverLine } = config.visual
+  const { visualizationType } = config
+  const isScatterPlot = visualizationType === 'Scatter Plot'
+
+  const isVertical = orientation === 'vertical'
+  const isHorizontal = orientation === 'horizontal'
+  const showVerticalHoverLine = verticalHoverLine || (verticalHoverLine && isScatterPlot)
+  const showHorizontalHoverLine = horizontalHoverLine || (horizontalHoverLine && isScatterPlot)
+
+  const getX = () => {
+    if (point.x > xMax + Number(config.yAxis.size)) return xMax
+    if (point.x < config.yAxis.size) return config.yAxis.size
+    return point.x
+  }
+
+  const getY = () => {
+    if (point.y > yMax) return yMax
+    return point.y
+  }
+  if (isVertical) {
+    return (
+      showVerticalHoverLine && (
+        <Group key={`tooltipLine-vertical${point.y}${point.x}`} className='vertical-tooltip-line'>
+          <Line
+            from={{ x: getX(), y: 0 }}
+            to={{ x: getX(), y: yMax }}
+            stroke={'black'}
+            strokeWidth={1}
+            pointerEvents='none'
+            strokeDasharray='5,5'
+            className='vertical-tooltip-line'
+          />
+        </Group>
+      )
+    )
+  }
+  if (isHorizontal) {
+    return (
+      showHorizontalHoverLine && (
+        <Group
+          key={`tooltipLine-horizontal${point.y}${point.x}`}
+          className='horizontal-tooltip-line'
+          left={config.yAxis.size ? config.yAxis.size : 0}
+        >
+          <Line
+            from={{ x: 0, y: getY() }}
+            to={{ x: xMax, y: getY() }}
+            stroke={'black'}
+            strokeWidth={1}
+            pointerEvents='none'
+            strokeDasharray='5,5'
+            className='horizontal-tooltip-line'
+          />
+        </Group>
+      )
+    )
+  }
+}
+export default HoverLine

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,15 +1,14 @@
-import React from 'react'
+import React, { useMemo } 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
 }
 
 const LegendSuppression: React.FC<LegendProps> = ({ config, isLegendBottom }) => {
-  const { preliminaryData, visualizationType, visualizationSubType, legend } = config
-
+  const { preliminaryData, visualizationType, visualizationSubType, legend, data } = config
+  const showPiePercent = config.dataFormat.showPiePercent && config.visualizationType === 'Pie'
   const hasOpenCircleEffects = () =>
     preliminaryData?.some(pd => pd.label && pd.type === 'effect' && pd.style !== 'Filled Circles') &&
     ['Line', 'Combo'].includes(visualizationType)
@@ -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 => {
@@ -100,10 +95,31 @@ const LegendSuppression: React.FC<LegendProps> = ({ config, isLegendBottom }) =>
   const getLegendContainerClass = () =>
     legend.singleRow && isLegendBottom ? 'legend-container__inner bottom single-row' : ''
 
+  const sumSeries = (data, seriesKey) => {
+    if (!Array.isArray(data)) return 0
+
+    return data.reduce((total, row) => {
+      const raw = row[seriesKey]
+      const num = parseFloat(raw)
+      return total + (Number.isFinite(num) ? num : 0)
+    }, 0)
+  }
+  const total = sumSeries(data, config.runtime.yAxis.dataKey)
+
   const shouldShowSuppressedInfo = () =>
     !config.legend.hideSuppressionLink &&
     config.visualizationSubType !== 'stacked' &&
     preliminaryData?.some(pd => pd.label && pd.type === 'suppression' && pd.value && (pd?.style || pd.symbol))
+  // controls Pie chart Legend  for calculated Area
+
+  const renderCalculatedAreaItems = () => {
+    return (
+      <div key={'pie-asterisk'} className='legend-preliminary'>
+        <span className={'Asterisk'}>{'**'}</span>
+        <p>{'Calculated Area'}</p>
+      </div>
+    )
+  }
 
   return (
     <React.Fragment>
@@ -113,6 +129,12 @@ const LegendSuppression: React.FC<LegendProps> = ({ config, isLegendBottom }) =>
           <div className={getLegendContainerClass()}>{renderEffectItems()}</div>
         </React.Fragment>
       )}
+      {showPiePercent && total < 100 && (
+        <React.Fragment>
+          <hr />
+          <div className={getLegendContainerClass()}>{renderCalculatedAreaItems()}</div>
+        </React.Fragment>
+      )}
 
       {shouldShowSuppressedLabels() && (
         <React.Fragment>
@@ -121,27 +143,39 @@ 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>
+      )}
+      {showPiePercent && (total < 100 || total > 100) && (
+        <div className='legend-container__outer link-container'>
+          <p>
+            {total < 100 ? '** This graph contains a' : 'The sum of percentages in this graph is larger than 100 '}
+            <RichTooltip
+              tooltipContent={
+                total < 100
+                  ? 'Calculated Areas are used to supplement the pie chart when the sum of the values in the data is less than 100%.'
+                  : 'Calculated Areas are disabled when the total exceeds 100%.'
+              }
+              linkText={total < 100 ? 'calculated area' : ''}
+              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/Legend/helpers/index.ts

@@ -36,7 +36,7 @@ export const getMarginBottom = (isLegendBottom, config) => {
 
   if (isLegendTop) marginBottom = 27
 
-  if (isLegendTop && config.dataFormat?.onlyShowTopPrefixSuffix) marginBottom += 9
+  if (isLegendTop && config.yAxis?.inlineLabel) marginBottom += 9
 
   if (isLegendBottom) marginBottom += 9
 

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