@cdc/chart 4.24.4 → 4.24.5

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

@@ -49,7 +49,24 @@ const PanelGeneral: FC<PanelProps> = props => {
         {visHasNumbersOnBars() ? (
           <CheckBox value={config.yAxis.displayNumbersOnBar} section='yAxis' fieldName='displayNumbersOnBar' label={config.isLollipopChart ? 'Display Numbers after Bar' : 'Display Numbers on Bar'} updateField={updateField} />
         ) : (
-          visHasLabelOnData() && <CheckBox value={config.labels} fieldName='labels' label='Display label on data' updateField={updateField} />
+          visHasLabelOnData() && (
+            <CheckBox
+              value={config.labels}
+              fieldName='labels'
+              label='Display label on data'
+              updateField={updateField}
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>Selecting this option will not hide the display of "zero value", "suppressed data", or "no data" indicators on the chart (if applicable).</p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+            />
+          )
         )}
         {visualizationType === 'Pie' && <Select fieldName='pieType' label='Pie Chart Type' updateField={updateField} options={['Regular', 'Donut']} />}
 
@@ -144,7 +161,7 @@ const PanelGeneral: FC<PanelProps> = props => {
                   <Icon display='question' style={{ marginLeft: '0.5rem' }} />
                 </Tooltip.Target>
                 <Tooltip.Content>
-                  <p>Footnotes</p>
+                  <p>Consider adding footnotes when displaying 'suppressed,' 'no data,' and 'zero values' to ensure accurate interpretation of the data.</p>
                 </Tooltip.Content>
               </Tooltip>
             }

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

@@ -5,15 +5,14 @@ import ConfigContext from '../../../../ConfigContext'
 import InputSelect from '@cdc/core/components/inputs/InputSelect'
 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'
 
 // Third Party
 import { Accordion, AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
 import { Draggable } from '@hello-pangea/dnd'
-import { colorPalettesChart, sequentialPalettes } from '@cdc/core/data/colorPalettes'
 
-const SeriesContext = React.createContext()
+const SeriesContext = React.createContext({})
 
 const SeriesWrapper = props => {
   const { updateConfig, config, rawData } = useContext(ConfigContext)
@@ -456,8 +455,8 @@ const SeriesInputWeight = props => {
         type='number'
         key={`series-weight-${i}`}
         value={series.weight ? series.weight : ''}
-        min="1"
-        max="9"
+        min='1'
+        max='9'
         onChange={event => {
           changeSeriesWeight(i, event.target.value, event.target.min, event.target.max)
         }}

package/src/components/EditorPanel/useEditorPermissions.js

@@ -301,8 +301,11 @@ export const useEditorPermissions = () => {
     if (visualizationType === 'Line') {
       return true
     }
+    if (visualizationType === 'Bar' && visualizationSubType === 'regular') {
+      return true
+    }
 
-    if (visualizationType === 'Combo' && lineExist) {
+    if (visualizationType === 'Combo') {
       return true
     }
     return false

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

@@ -5,21 +5,22 @@ import Button from '@cdc/core/components/elements/Button'
 import useLegendClasses from '../../hooks/useLegendClasses'
 import { useHighlightedBars } from '../../hooks/useHighlightedBars'
 import { handleLineType } from '../../helpers/handleLineType'
+import { useBarChart } from '../../hooks/useBarChart'
 import { Line } from '@visx/shape'
 import { Label } from '../../types/Label'
 import { ChartConfig } from '../../types/ChartConfig'
 import { ColorScale } from '../../types/ChartContext'
 import { forwardRef } from 'react'
 
-interface LegendProps {
-  config: ChartConfig
+export interface LegendProps {
   colorScale: ColorScale
-  seriesHighlight: string[]
-  highlight: Function
-  highlightReset: Function
+  config: ChartConfig
   currentViewport: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
   formatLabels: (labels: Label[]) => Label[]
+  highlight: Function
+  highlightReset: Function
   ref: React.Ref<() => void>
+  seriesHighlight: string[]
   skipId: string
 }
 
@@ -27,12 +28,13 @@ interface LegendProps {
 const Legend: React.FC<LegendProps> = forwardRef(({ config, colorScale, seriesHighlight, highlight, highlightReset, currentViewport, formatLabels, skipId = 'legend' }, ref) => {
   const { innerClasses, containerClasses } = useLegendClasses(config)
   const { runtime, orientation, legend } = config
+
   if (!legend) return null
   const isBottomOrSmallViewport = legend.position === 'bottom' || ['sm', 'xs', 'xxs'].includes(currentViewport)
 
   const legendClasses = {
     marginBottom: isBottomOrSmallViewport ? '15px' : '0px',
-    marginTop: isBottomOrSmallViewport && orientation === 'horizontal' ? `${config.yAxis.label && config.isResponsiveTicks ? config.dynamicMarginTop : config.runtime.xAxis.size}px` : `${isBottomOrSmallViewport ? config.dynamicMarginTop + 15 : 0}px`
+    marginTop: isBottomOrSmallViewport ? '15px' : '0px'
   }
 
   const { HighLightedBarUtils } = useHighlightedBars(config)
@@ -143,17 +145,17 @@ const Legend: React.FC<LegendProps> = forwardRef(({ config, colorScale, seriesHi
               </div>
 
               <>
-                {config?.preliminaryData?.some(pd => pd.label) && ['Line', 'Combo'].includes(config.visualizationType) && (
+                {config?.preliminaryData?.some(pd => pd.label && pd.type === 'effect' && pd.style) && ['Line', 'Combo'].includes(config.visualizationType) && (
                   <>
                     <hr></hr>
                     <div className={config.legend.singleRow && isBottomOrSmallViewport ? 'legend-container__inner bottom single-row' : ''}>
                       {config?.preliminaryData?.map((pd, index) => {
                         return (
                           <>
-                            {pd.label && (
+                            {pd.label && pd.type === 'effect' && pd.style && (
                               <div key={index} className='legend-preliminary'>
-                                <svg>{pd.style.includes('Dashed') ? <Line from={{ x: 10, y: 10 }} to={{ x: 40, y: 10 }} stroke={'#000'} strokeWidth={2} strokeDasharray={handleLineType(pd.style)} /> : <circle r={6} strokeWidth={2} stroke={'#000'} cx={22} cy={10} fill='transparent' />}</svg>
-                                <span> {pd.label}</span>
+                                <span className={pd.symbol}>{pd.lineCode}</span>
+                                <p> {pd.label}</p>
                               </div>
                             )}
                           </>
@@ -162,6 +164,56 @@ const Legend: React.FC<LegendProps> = forwardRef(({ config, colorScale, seriesHi
                     </div>
                   </>
                 )}
+                {!config.legend.hideSuppressedLabels &&
+                  config?.preliminaryData?.some(pd => pd.label && pd.displayLegend && pd.type === 'suppression' && pd.value && (pd?.style || pd.symbol)) &&
+                  ((config.visualizationType === 'Bar' && config.visualizationSubType === 'regular') || config.visualizationType === 'Line' || config.visualizationType === 'Combo') && (
+                    <>
+                      <hr></hr>
+                      <div className={config.legend.singleRow && isBottomOrSmallViewport ? 'legend-container__inner bottom single-row' : ''}>
+                        {config?.preliminaryData?.map(
+                          (pd, index) =>
+                            pd.displayLegend &&
+                            pd.type === 'suppression' && (
+                              <>
+                                {config.visualizationType === 'Bar' && (
+                                  <>
+                                    <div key={index + 'Bar'} className={`legend-preliminary ${pd.symbol}`}>
+                                      <span className={pd.symbol}>{pd.iconCode}</span>
+                                      <p className={pd.type}>{pd.label}</p>
+                                    </div>
+                                  </>
+                                )}
+                                {config.visualizationType === 'Line' && (
+                                  <>
+                                    <div key={index + 'Line'} className={`legend-preliminary `}>
+                                      <span>{pd.lineCode}</span>
+                                      <p className={pd.type}>{pd.label}</p>
+                                    </div>
+                                  </>
+                                )}
+                                {config.visualizationType === 'Combo' && (
+                                  <>
+                                    {pd.symbol && pd.iconCode && (
+                                      <div key={index + 'Combo'} className={`legend-preliminary ${pd.symbol}`}>
+                                        <span className={pd.symbol}>{pd.iconCode}</span>
+                                        <p className={pd.type}>{pd.label}</p>
+                                      </div>
+                                    )}
+
+                                    {pd.style && pd.lineCode && (
+                                      <div key={index + 'Combo'} className='legend-preliminary'>
+                                        <span>{pd.lineCode}</span>
+                                        <p>{pd.label}</p>
+                                      </div>
+                                    )}
+                                  </>
+                                )}
+                              </>
+                            )
+                        )}
+                      </div>
+                    </>
+                  )}
               </>
             </>
           )

package/src/components/LineChart/LineChartProps.ts

@@ -17,12 +17,18 @@ export type LineChartProps = {
 }
 
 export interface PreliminaryDataItem {
-  style: string
-  type: string
   column: string
-  value: string
-  seriesKey: string
+  displayLegend: boolean
+  displayTable: boolean
+  displayTooltip: boolean
+  iconCode: string
   label: string
+  lineCode: string
+  seriesKey: string
+  style: string
+  symbol: string
+  type: 'effect' | 'suppression'
+  value: string
 }
 
 export interface DataItem {
@@ -33,12 +39,13 @@ export interface Config {
   preliminaryData: PreliminaryDataItem[] | []
 }
 export interface StyleProps {
-  preliminaryData: PreliminaryDataItem[]
   data: DataItem[]
-  stroke: string
   handleLineType: Function
   lineType: string
+  preliminaryData: PreliminaryDataItem[]
   seriesKey: 'string'
+  stroke: string
+  strokeWidth: number
 }
 export interface Style {
   stroke: string

package/src/components/LineChart/components/LineChart.Circle.tsx

@@ -7,6 +7,7 @@ type LineChartCircleProps = {
   circleData: object[]
   config: ChartConfig
   data: object[]
+  tableData: object[]
   d?: Object
   displayArea: boolean
   seriesKey: string
@@ -26,7 +27,7 @@ type LineChartCircleProps = {
 }
 
 const LineChartCircle = (props: LineChartCircleProps) => {
-  const { config, d, displayArea, seriesKey, tooltipData, xScale, yScale, colorScale, parseDate, yScaleRight, data, circleData, dataIndex, mode } = props
+  const { config, d, tableData, displayArea, seriesKey, tooltipData, xScale, yScale, colorScale, parseDate, yScaleRight, data, circleData, dataIndex, mode } = props
   const { lineDatapointStyle } = config
   const filtered = config?.series.filter(s => s.dataKey === seriesKey)?.[0]
   // If we're not showing the circle, simply return
@@ -86,7 +87,7 @@ const LineChartCircle = (props: LineChartCircleProps) => {
       let hoveredSeriesAxis = hoveredSeriesData?.[0]?.[2]
       if (!hoveredSeriesKey) return
       hoveredSeriesIndex = tooltipData?.data.indexOf(hoveredSeriesKey)
-      hoveredSeriesValue = data?.find(d => {
+      hoveredSeriesValue = tableData?.find(d => {
         return d[config?.xAxis.dataKey] === hoveredXValue
       })?.[seriesKey]
 
@@ -100,6 +101,7 @@ const LineChartCircle = (props: LineChartCircleProps) => {
         if (isMatch) {
           return <></>
         }
+
         return (
           <circle
             cx={getXPos(hoveredXValue)}
@@ -119,23 +121,32 @@ const LineChartCircle = (props: LineChartCircleProps) => {
   if (mode === 'ISOLATED_POINTS') {
     const drawIsolatedPoints = (currentIndex, seriesKey) => {
       const currentPoint = data[currentIndex]
-      const previousPoint = data[currentIndex - 1]
-      const nextPoint = data[currentIndex + 1]
-      if (currentIndex === 0 && !nextPoint[seriesKey]) {
-        return true
+      const previousPoint = currentIndex > 0 ? data[currentIndex - 1] : null
+      const nextPoint = currentIndex < data.length - 1 ? data[currentIndex + 1] : null
+      let res = false
+
+      // Handle the first point in the array
+      if (currentIndex === 0 && nextPoint && !nextPoint[seriesKey]) {
+        res = true
       }
-      if (currentIndex === data.length - 1 && !previousPoint[seriesKey]) {
-        return true
+      // Handle the last point in the array
+      if (currentIndex === data.length - 1 && previousPoint && !previousPoint[seriesKey]) {
+        res = true
       }
-      if (currentIndex !== 0 && currentPoint[seriesKey] && !previousPoint[seriesKey] && !nextPoint[seriesKey]) {
-        return true
+      // Handle points in the middle
+      if (currentIndex > 0 && currentIndex < data.length - 1) {
+        if (currentPoint && currentPoint[seriesKey] && (!previousPoint || !previousPoint[seriesKey]) && (!nextPoint || !nextPoint[seriesKey])) {
+          res = true
+        }
       }
+
+      return res
     }
 
     if (mode) {
       if (drawIsolatedPoints(dataIndex, seriesKey)) {
         return (
-          <circle cx={getXPos(d[config.xAxis.dataKey])} cy={filtered.axis === 'Right' ? yScaleRight(d[filtered.dataKey]) : yScale(d[filtered.dataKey])} r={5.3} strokeWidth={2} stroke={colorScale(config.runtime.seriesLabels[seriesKey])} fill={colorScale(config.runtime.seriesLabels[seriesKey])} />
+          <circle cx={getXPos(d[config.xAxis?.dataKey])} cy={filtered.axis === 'Right' ? yScaleRight(d[filtered.dataKey]) : yScale(d[filtered?.dataKey])} r={5.3} strokeWidth={2} stroke={colorScale(config.runtime.seriesLabels[seriesKey])} fill={colorScale(config.runtime?.seriesLabels[seriesKey])} />
         )
       }
     }

package/src/components/LineChart/helpers.ts

@@ -1,9 +1,9 @@
 import { type PreliminaryDataItem, DataItem, StyleProps, Style } from './LineChartProps'
-
+import _ from 'lodash'
 export const createStyles = (props: StyleProps): Style[] => {
   const { preliminaryData, data, stroke, strokeWidth, handleLineType, lineType, seriesKey } = props
 
-  const validPreliminaryData: PreliminaryDataItem[] = preliminaryData.filter(pd => pd.seriesKey && pd.column && pd.value && pd.type && pd.style)
+  const validPreliminaryData: PreliminaryDataItem[] = preliminaryData.filter(pd => pd.seriesKey && pd.column && pd.value && pd.type && pd.style && pd.type === 'effect')
   const getMatchingPd = (point: DataItem): PreliminaryDataItem => validPreliminaryData.find(pd => pd.seriesKey === seriesKey && point[pd.column] === pd.value && pd.type === 'effect' && pd.style !== 'Open Circles')
 
   let styles: Style[] = []
@@ -29,17 +29,141 @@ export const createStyles = (props: StyleProps): Style[] => {
 
 export const filterCircles = (preliminaryData: PreliminaryDataItem[], data: DataItem[], seriesKey: string): DataItem[] => {
   // Filter and map preliminaryData to get circlesFiltered
-  const circlesFiltered = preliminaryData.filter(item => item.style === 'Open Circles' && item.type === 'effect').map(item => ({ column: item.column, value: item.value, seriesKey: item.seriesKey }))
-
-  let filteredData: DataItem[] = []
-
+  const circlesFiltered = preliminaryData?.filter(item => item.style === 'Open Circles' && item.type === 'effect').map(item => ({ column: item.column, value: item.value, seriesKey: item.seriesKey }))
+  const filteredData: DataItem[] = []
   // Process data to find matching items
   data.forEach(item => {
-    if (circlesFiltered.some(d => item[d.column] === d.value && d.seriesKey === seriesKey)) {
-      // Add current item
-      filteredData.push(item)
+    circlesFiltered.forEach(fc => {
+      if (item[fc.column] === fc.value && fc.seriesKey === seriesKey) {
+        filteredData.push(item)
+      }
+    })
+  })
+  return filteredData
+}
+
+const isCalculable = value => !isNaN(parseFloat(value)) && isFinite(value)
+const handleFirstIndex = (data, seriesKey, preliminaryData) => {
+  const result = {
+    data: [],
+    style: ''
+  }
+
+  // If data is empty, return the empty result
+  if (!data.length) return result
+
+  const firstIndexDataItem = data[0]
+
+  // Function to check if a data item matches the suppression criteria
+  const isSuppressed = pd => {
+    if (pd.type === 'effect') return
+    return pd.type == 'suppression' && pd.value === firstIndexDataItem[seriesKey] && (!pd.column || pd.column === seriesKey)
+  }
+
+  // Find applicable suppression data for the first item
+  const suppressionData = preliminaryData.find(isSuppressed)
+
+  if (suppressionData && suppressionData.style) {
+    // Modify first item and add to result
+    const modifiedItem = { ...firstIndexDataItem, [seriesKey]: 0 }
+    result.data.push(modifiedItem)
+    result.style = suppressionData.style
+
+    // Find the next calculable item index
+    let nextIndex = 1
+    while (nextIndex < data.length && !isCalculable(data[nextIndex][seriesKey])) {
+      nextIndex++
+    }
+    if (nextIndex < data.length) {
+      result.data.push(data[nextIndex])
+    }
+  } else {
+    // If no suppression, just add the first item
+    result.data.push(firstIndexDataItem)
+  }
+
+  return result
+}
+
+const handleLastIndex = (data, seriesKey, preliminaryData) => {
+  const result = {
+    data: [],
+    style: ''
+  }
+  let lastAddedIndex = -1 // Tracks the last index added to the result
+  preliminaryData?.forEach(pd => {
+    if (pd.type === 'effect') return
+    if (data[data.length - 1][seriesKey] === pd.value && pd.style && (!pd.column || pd.column === seriesKey) && pd.type == 'suppression') {
+      const lastIndex = data.length - 1
+      const modifiedItem = { ...data[lastIndex], [seriesKey]: 0 }
+      result.data.push(modifiedItem)
+
+      // Find previous calculable item
+      let prevIndex = lastIndex - 1
+      while (prevIndex >= 0 && !isCalculable(data[prevIndex][seriesKey])) {
+        prevIndex--
+      }
+      if (prevIndex >= 0 && lastAddedIndex !== prevIndex) {
+        result.data.push(data[prevIndex])
+        lastAddedIndex = prevIndex
+      }
+      result.style = pd.style
     }
   })
 
-  return filteredData
+  return result
+}
+
+function handleMiddleIndices(data, seriesKey, dataKey, preliminaryData) {
+  const result = {
+    data: [],
+    style: ''
+  }
+
+  const isValidMiddleIndex = index => index > 0 && index < data.length - 1
+
+  preliminaryData?.forEach(pd => {
+    if (pd.type === 'effect') 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 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])
+      }
+    })
+  })
+
+  // Deduplicate entries
+  result.data = _.uniqWith(result.data, (a, b) => a[dataKey] === b[dataKey] && a[seriesKey] === b[seriesKey])
+
+  return result
+}
+
+// create segments (array of arrays) for building suppressed Lines
+export const createDataSegments = (data, seriesKey, preliminaryData, dataKey) => {
+  // Process the first index if necessary
+  const firstSegment = handleFirstIndex(data, seriesKey, preliminaryData)
+  // Process the last index if necessary
+  const lastSegment = handleLastIndex(data, seriesKey, preliminaryData)
+  // Process the middle segment
+  const middleSegments = handleMiddleIndices(data, seriesKey, dataKey, preliminaryData)
+  // Combine all segments into a single array
+  return [firstSegment, middleSegments, lastSegment].filter(segment => segment.data.length > 0 && segment.style !== '')
 }