@cdc/chart 4.24.5 → 4.24.7

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

@@ -5,7 +5,7 @@ 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 { getMarginTop } from './helpers/index'
 import { Line } from '@visx/shape'
 import { Label } from '../../types/Label'
 import { ChartConfig } from '../../types/ChartConfig'
@@ -27,25 +27,24 @@ export interface LegendProps {
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
 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
+  const { runtime, legend } = config
 
   if (!legend) return null
-  const isBottomOrSmallViewport = legend.position === 'bottom' || ['sm', 'xs', 'xxs'].includes(currentViewport)
+  const isBottomOrSmallViewport = legend?.position === 'bottom' || (['sm', 'xs', 'xxs'].includes(currentViewport) && !legend.hide)
 
   const legendClasses = {
     marginBottom: isBottomOrSmallViewport ? '15px' : '0px',
-    marginTop: isBottomOrSmallViewport ? '15px' : '0px'
+    marginTop: isBottomOrSmallViewport && config.orientation === 'horizontal' ? `${config.yAxis.label && config.isResponsiveTicks ? config.dynamicMarginTop : config.runtime.xAxis.size}px` : getMarginTop(isBottomOrSmallViewport, config.brush.active)
   }
 
   const { HighLightedBarUtils } = useHighlightedBars(config)
 
   let highLightedLegendItems = HighLightedBarUtils.findDuplicates(config.highlightedBarValues)
-  const fontSize = ['sm', 'xs', 'xxs'].includes(currentViewport) ? { fontSize: '11px' } : null
 
   return (
     <aside ref={ref} style={legendClasses} id={skipId || 'legend'} className={containerClasses.join(' ')} role='region' aria-label='legend' tabIndex={0}>
       {legend.label && <h3>{parse(legend.label)}</h3>}
-      {legend.description && <p style={fontSize}>{parse(legend.description)}</p>}
+      {legend.description && <p>{parse(legend.description)}</p>}
 
       <LegendOrdinal scale={colorScale} itemDirection='row' labelMargin='0 20px 0 0' shapeMargin='0 10px 0'>
         {labels => {
@@ -103,7 +102,7 @@ const Legend: React.FC<LegendProps> = forwardRef(({ config, colorScale, seriesHi
                         )}
                       </div>
 
-                      <LegendLabel style={fontSize} align='left' margin='0 0 0 4px'>
+                      <LegendLabel align='left' margin='0 0 0 4px'>
                         {label.text}
                       </LegendLabel>
                     </LegendItem>
@@ -145,7 +144,7 @@ const Legend: React.FC<LegendProps> = forwardRef(({ config, colorScale, seriesHi
               </div>
 
               <>
-                {config?.preliminaryData?.some(pd => pd.label && pd.type === 'effect' && pd.style) && ['Line', 'Combo'].includes(config.visualizationType) && (
+                {config?.preliminaryData?.some(pd => pd.label && pd.type === 'effect' && pd.style === 'Open Circles') && ['Line', 'Combo'].includes(config.visualizationType) && (
                   <>
                     <hr></hr>
                     <div className={config.legend.singleRow && isBottomOrSmallViewport ? 'legend-container__inner bottom single-row' : ''}>

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

@@ -9,7 +9,7 @@ export const createFormatLabels =
   (defaultLabels: Label[]): Label[] => {
     const { visualizationType, visualizationSubType, series, runtime } = config
 
-    const reverseLabels = labels => (config.legend.reverseLabelOrder && config.legend.position === 'bottom' ? labels.reverse() : labels)
+    const reverseLabels = labels => (config.legend.reverseLabelOrder && config.legend?.position === 'bottom' ? labels.reverse() : labels)
     const colorCode = config.legend?.colorCode
     if (visualizationType === 'Deviation Bar') {
       const [belowColor, aboveColor] = twoColorPalette[config.twoColor.palette]

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

@@ -0,0 +1,5 @@
+export const getMarginTop = (isBottomOrSmallViewport, isBrushActive) => {
+  if (!isBottomOrSmallViewport) return '0px'
+  if (isBrushActive) return '35px'
+  return '15px'
+}

package/src/components/LineChart/LineChartProps.ts

@@ -29,6 +29,9 @@ export interface PreliminaryDataItem {
   symbol: string
   type: 'effect' | 'suppression'
   value: string
+  hideBarSymbol: boolean
+  hideLineStyle: boolean
+  circleSize: number
 }
 
 export interface DataItem {

package/src/components/LineChart/helpers.ts

@@ -29,16 +29,30 @@ 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 }))
-  const filteredData: DataItem[] = []
+  const circlesFiltered = preliminaryData?.filter(item => item.style.includes('Circles') && item.type === 'effect').map(item => ({ column: item.column, value: item.value, seriesKey: item.seriesKey, circleSize: item.circleSize, style: item.style }))
+  const filteredData = []
   // Process data to find matching items
   data.forEach(item => {
     circlesFiltered.forEach(fc => {
-      if (item[fc.column] === fc.value && fc.seriesKey === seriesKey) {
-        filteredData.push(item)
+      if (item[fc.column] === fc.value && fc.seriesKey === seriesKey && item[seriesKey] && fc.style === 'Open Circles') {
+        const result = {
+          data: item,
+          size: fc.circleSize,
+          isFilled: false
+        }
+        filteredData.push(result)
+      }
+      if ((!fc.value || item[fc.column] === fc.value) && fc.seriesKey === seriesKey && item[seriesKey] && fc.style === 'Filled Circles') {
+        const result = {
+          data: item,
+          size: fc.circleSize,
+          isFilled: true
+        }
+        filteredData.push(result)
       }
     })
   })
+
   return filteredData
 }
 
@@ -56,7 +70,7 @@ const handleFirstIndex = (data, seriesKey, preliminaryData) => {
 
   // Function to check if a data item matches the suppression criteria
   const isSuppressed = pd => {
-    if (pd.type === 'effect') return
+    if (pd.type === 'effect' || pd.hideLineStyle) return
     return pd.type == 'suppression' && pd.value === firstIndexDataItem[seriesKey] && (!pd.column || pd.column === seriesKey)
   }
 
@@ -93,7 +107,7 @@ const handleLastIndex = (data, seriesKey, preliminaryData) => {
   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') {
+    if (data[data.length - 1][seriesKey] === pd.value && pd.style && (!pd.column || pd.column === seriesKey) && pd.type == 'suppression' && !pd.hideLineStyle) {
       const lastIndex = data.length - 1
       const modifiedItem = { ...data[lastIndex], [seriesKey]: 0 }
       result.data.push(modifiedItem)
@@ -123,7 +137,7 @@ function handleMiddleIndices(data, seriesKey, dataKey, preliminaryData) {
   const isValidMiddleIndex = index => index > 0 && index < data.length - 1
 
   preliminaryData?.forEach(pd => {
-    if (pd.type === 'effect') return
+    if (pd.type === 'effect' || pd.hideLineStyle) return
     const targetValue = pd.value
 
     // Find all indices

package/src/components/LineChart/index.tsx

@@ -46,7 +46,7 @@ const LineChart = (props: LineChartProps) => {
   let data = transformedData
   let tableD = tableData
   // if brush on use brush data and clean
-  if (brushConfig.data.length) {
+  if (brushConfig.data.length > 0 && config.brush?.active) {
     data = clean(brushConfig.data)
     tableD = clean(brushConfig.data)
   }
@@ -207,7 +207,7 @@ const LineChart = (props: LineChartProps) => {
                   <LinePath
                     curve={allCurves[seriesData[0].lineType]}
                     data={
-                      config.xAxis.type === 'date-time'
+                      config.xAxis.type === 'date-time' || config.xAxis.type === 'date'
                         ? data.sort((d1, d2) => {
                             let x1 = getXAxisData(d1)
                             let x2 = getXAxisData(d2)
@@ -232,16 +232,16 @@ const LineChart = (props: LineChartProps) => {
               )}
 
               {/* circles for preliminaryData data */}
-              {circleData.map((d, i) => {
+              {circleData.map((item, i) => {
                 return (
                   <circle
                     key={i}
-                    cx={xPos(d)}
-                    cy={seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(Number(getYAxisData(d, seriesKey)))}
-                    r={6}
+                    cx={xPos(item.data)}
+                    cy={seriesAxis === 'Right' ? yScaleRight(getYAxisData(item.data, seriesKey)) : yScale(Number(getYAxisData(item.data, seriesKey)))}
+                    r={item.size}
                     strokeWidth={seriesData[0].weight || 2}
                     stroke={colorScale ? colorScale(config.runtime.seriesLabels[seriesKey]) : '#000'}
-                    fill='#fff'
+                    fill={item.isFilled ? (colorScale ? colorScale(config.runtime.seriesLabels[seriesKey]) : '#000') : '#fff'}
                   />
                 )
               })}