@cdc/chart 4.24.7 → 4.24.9

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

@@ -0,0 +1,146 @@
+import React from 'react'
+import { ChartConfig } from '../../types/ChartConfig'
+import Icon from '@cdc/core/components/ui/Icon'
+import { Tooltip as ReactTooltip } from 'react-tooltip'
+interface LegendProps {
+  config: ChartConfig
+  isBottomOrSmallViewport: boolean
+}
+
+const LegendSuppression: React.FC<LegendProps> = ({ config, isBottomOrSmallViewport }) => {
+  const { preliminaryData, visualizationType, visualizationSubType, legend } = config
+
+  const hasOpenCircleEffects = () =>
+    preliminaryData?.some(pd => pd.label && pd.type === 'effect' && pd.style === 'Open Circles') &&
+    ['Line', 'Combo'].includes(visualizationType)
+
+  const shouldShowSuppressedLabels = () =>
+    !legend.hideSuppressedLabels &&
+    preliminaryData?.some(
+      pd => pd.label && pd.displayLegend && pd.type === 'suppression' && pd.value && (pd?.style || pd.symbol)
+    ) &&
+    ((visualizationType === 'Bar' && visualizationSubType === 'regular') ||
+      visualizationType === 'Line' ||
+      visualizationType === 'Combo')
+
+  const renderEffectItems = () =>
+    preliminaryData?.map(
+      (pd, index) =>
+        pd.label &&
+        pd.type === 'effect' &&
+        pd.style && (
+          <div key={index} className='legend-preliminary'>
+            <span className={pd.symbol}>{pd.lineCode}</span>
+            <p>{pd.label}</p>
+          </div>
+        )
+    )
+  const handleLinkClick = event => {
+    // prevent defintion link to change URl
+    event.preventDefault()
+  }
+
+  const renderSuppressedItems = () => {
+    const getStyle = displayGray => {
+      if (displayGray) {
+        return {
+          color: '#777772'
+        }
+      }
+      return null
+    }
+    return preliminaryData?.map((pd, index) => {
+      if (!pd.displayLegend || pd.type !== 'suppression') return null
+
+      const baseClass = 'legend-preliminary'
+      const itemKey = index + visualizationType
+
+      if (visualizationType === 'Bar') {
+        return (
+          <div style={getStyle(pd.displayGray)} key={itemKey} className={`${baseClass} ${pd.symbol}`}>
+            <span className={pd.symbol}>{pd.iconCode}</span>
+            <p className={pd.type}>{pd.label}</p>
+          </div>
+        )
+      }
+
+      if (visualizationType === 'Line') {
+        return (
+          <div style={getStyle(pd.displayGray)} key={itemKey} className={baseClass}>
+            <span>{pd.lineCode}</span>
+            <p className={pd.type}>{pd.label}</p>
+          </div>
+        )
+      }
+
+      if (visualizationType === 'Combo') {
+        return (
+          <React.Fragment>
+            {pd.symbol && pd.iconCode && (
+              <div style={getStyle(pd.displayGray)} key={itemKey} className={`${baseClass} ${pd.symbol}`}>
+                <span className={pd.symbol}>{pd.iconCode}</span>
+                <p className={pd.type}>{pd.label}</p>
+              </div>
+            )}
+
+            {pd.style && pd.lineCode && (
+              <div style={getStyle(pd.displayGray)} key={itemKey} className={baseClass}>
+                <span>{pd.lineCode}</span>
+                <p>{pd.label}</p>
+              </div>
+            )}
+          </React.Fragment>
+        )
+      }
+
+      return null
+    })
+  }
+
+  const getLegendContainerClass = () =>
+    legend.singleRow && isBottomOrSmallViewport ? 'legend-container__inner bottom single-row' : ''
+
+  return (
+    <React.Fragment>
+      {hasOpenCircleEffects() && (
+        <React.Fragment>
+          <hr />
+          <div className={getLegendContainerClass()}>{renderEffectItems()}</div>
+        </React.Fragment>
+      )}
+
+      {shouldShowSuppressedLabels() && (
+        <React.Fragment>
+          <hr />
+          <div className={getLegendContainerClass()}>{renderSuppressedItems()}</div>
+        </React.Fragment>
+      )}
+      {!config.legend.hideSuppressionLink &&
+        config.visualizationSubType !== 'stacked' &&
+        preliminaryData?.some(pd => pd.label && pd.type === 'suppression' && pd.value && (pd?.style || pd.symbol)) && (
+          <div className='legend-container__outer definition-link'>
+            <Icon alt='info-icon' display='info' />
+            <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>
+            </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>
+  )
+}
+
+export default LegendSuppression

package/src/components/Legend/Legend.tsx

@@ -1,4 +1,4 @@
-import { useContext, forwardRef } from 'react'
+import { useContext, forwardRef, Fragment } from 'react'
 import ConfigContext from '../../ConfigContext'
 import LegendComponent from './Legend.Component'
 import { createFormatLabels } from './helpers/createFormatLabels'
@@ -7,6 +7,7 @@ import { createFormatLabels } from './helpers/createFormatLabels'
 const Legend = forwardRef((props, ref) => {
   // prettier-ignore
   const {
+    // prettier-ignore
     config,
     colorScale,
     seriesHighlight,
@@ -14,17 +15,32 @@ const Legend = forwardRef((props, ref) => {
     tableData,
     highlightReset,
     transformedData: data,
-    currentViewport
+    currentViewport,
+    dimensions,
+    getTextWidth,
   } = useContext(ConfigContext)
-
   if (!config.legend) return null
   // create fn to reverse labels while legend is Bottom.  Legend-right , legend-left works by default.
 
   const createLegendLabels = createFormatLabels(config, tableData, data, colorScale)
 
   return (
-    !['Box Plot', 'Pie'].includes(config.visualizationType) && (
-      <LegendComponent ref={ref} skipId={props.skipId || 'legend'} config={config} colorScale={colorScale} seriesHighlight={seriesHighlight} highlight={highlight} highlightReset={highlightReset} currentViewport={currentViewport} formatLabels={createLegendLabels} />
+    !['Box Plot'].includes(config.visualizationType) && (
+      <Fragment>
+        <LegendComponent
+          getTextWidth={getTextWidth}
+          dimensions={dimensions}
+          ref={ref}
+          skipId={props.skipId || 'legend'}
+          config={config}
+          colorScale={colorScale}
+          seriesHighlight={seriesHighlight}
+          highlight={highlight}
+          highlightReset={highlightReset}
+          currentViewport={currentViewport}
+          formatLabels={createLegendLabels}
+        />
+      </Fragment>
     )
   )
 })

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

@@ -1,5 +1,35 @@
-export const getMarginTop = (isBottomOrSmallViewport, isBrushActive) => {
+export const getMarginTop = (isBottomOrSmallViewport, isBrushActive, legend) => {
   if (!isBottomOrSmallViewport) return '0px'
-  if (isBrushActive) return '35px'
-  return '15px'
+  if (isBrushActive && legend.position === 'bottom') return '35px'
+}
+
+export const getGradientConfig = (config, formatLabels, colorScale) => {
+  const defaultValue = [{ datum: '', index: 0, text: '', value: '' }]
+
+  const formatted = formatLabels(defaultValue)
+  const colors = config.legend.colorCode ? formatted.map(label => label?.value) : colorScale?.range() ?? []
+  const labels = config.legend.colorCode
+    ? formatted.map(label => label?.text || label?.datum)
+    : colorScale?.domain() ?? []
+
+  return { colors, labels }
+}
+
+export const getMarginBottom = (isBottomOrSmallViewport, config) => {
+  const isSuppressedActive = config.preliminaryData.some(pd => pd.label) && !config.legend.hideSuppressionLink
+
+  const isLegendTop = config.legend?.position === 'top' && !config.legend.hide
+
+  let marginBottom = '0px'
+  if (isLegendTop && !isSuppressedActive) {
+    marginBottom = config.legend.hideBorder.topBottom ? '15px' : '25px'
+  }
+  if (isLegendTop && isSuppressedActive) {
+    marginBottom = '75px'
+  }
+  if (isBottomOrSmallViewport && isSuppressedActive) {
+    marginBottom = '45px'
+  }
+
+  return marginBottom
 }

package/src/components/LegendWrapper.tsx

@@ -0,0 +1,26 @@
+import React, { useContext } from 'react'
+import ConfigContext from '../ConfigContext'
+
+type LegendWrapperProps = {
+  children: React.ReactNode
+}
+
+const LegendWrapper: React.FC<LegendWrapperProps> = props => {
+  const { children } = props
+
+  const { config, currentViewport } = useContext(ConfigContext)
+
+  const getLegendWrappingClasses = () => {
+    let classes = ['legend-wrapper', 'd-flex', 'flex-nowrap', 'w-100']
+    const { legend } = config
+    if (legend.position === 'bottom' || legend.position === 'top' || ['xxs', 'xs', 'sm'].includes(currentViewport)) {
+      classes = classes.filter(item => item !== 'flex-nowrap')
+      classes.push('flex-wrap')
+    }
+    return classes.join(' ')
+  }
+
+  return <div className={getLegendWrappingClasses()}>{...children}</div>
+}
+
+export default LegendWrapper

package/src/components/LineChart/LineChartProps.ts

@@ -1,5 +1,6 @@
 // todo: review tooltipData type
 // todo: review svgRef type
+import { type PreliminaryDataItem } from '../../types/ChartConfig'
 export type LineChartProps = {
   xScale: Function
   yScale: Function
@@ -16,24 +17,6 @@ export type LineChartProps = {
   tooltipData: any
 }
 
-export interface PreliminaryDataItem {
-  column: string
-  displayLegend: boolean
-  displayTable: boolean
-  displayTooltip: boolean
-  iconCode: string
-  label: string
-  lineCode: string
-  seriesKey: string
-  style: string
-  symbol: string
-  type: 'effect' | 'suppression'
-  value: string
-  hideBarSymbol: boolean
-  hideLineStyle: boolean
-  circleSize: number
-}
-
 export interface DataItem {
   [key: string]: any
 }

package/src/components/LineChart/components/LineChart.BumpCircle.tsx

@@ -0,0 +1,103 @@
+import { useState } from 'react'
+import { Group } from '@visx/group'
+import { type Column } from '@cdc/core/types/Column'
+import React from 'react'
+import { type ChartConfig } from '../../../types/ChartConfig'
+
+type LineChartBumpCircleProp = {
+    config: ChartConfig, 
+    xScale: any, 
+    yScale: any, 
+    parseDate: any 
+  }
+
+const LineChartBumpCircle = (props: LineChartBumpCircleProp) => {
+  const { config, xScale, yScale, parseDate } = props
+
+  // get xScale and yScale...
+  if (!config?.runtime?.series) return
+
+  const handleX = xValue => {
+    if (config.xAxis.type === 'date') {
+      return parseDate(xValue).getTime()
+    }
+    if (config.xAxis.type === 'date-time') {
+      return new Date(xValue)
+    }
+    if (config.xAxis.type === 'categorical') {
+      return xValue
+    }
+  }
+
+  const checkBandScale = xValue => {
+    return xScale.bandwidth ? xScale.bandwidth() / 2 + Number(xValue) : Number(xValue)
+  }
+
+ 
+  const getListItems = dataRow => {
+    return Object.values(config.columns)
+    ?.filter(column => column.tooltips).map(column => {
+      const label = column.label || column.name;
+      return `
+        <li className='tooltip-body'>
+          <strong>${label}</strong>: ${dataRow[column.name]}
+        </li>`; 
+    })
+    .join(' ');
+  }  
+
+  const getTooltip = dataRow => `<ul> ${getListItems(dataRow)} </ul>`
+
+  const circles = config.runtime?.series.map((series) => {
+    return config.data.map((d, dataIndex) => {
+      let series_dataKey = d[series.dataKey]
+      let axis_dataKey = d[config.xAxis.dataKey]
+      return (
+        <React.Fragment key={`bump-circle-${series_dataKey}-${dataIndex}`}>
+          <Group left={Number(config.runtime.yAxis.size)}> 
+            {series_dataKey && (
+              <>
+                <circle 
+                  key={`bump-circle-${series_dataKey}-${dataIndex}`}
+                  data-tooltip-html={getTooltip(d)} 
+                  data-tooltip-id={`bump-chart`} 
+                  r={10} 
+                  cx={Number(checkBandScale(xScale(handleX(axis_dataKey))))} 
+                  cy={Number(yScale(series_dataKey))} 
+                  stroke='#CACACA' 
+                  strokeWidth={1} 
+                  fill='#E5E4E2' 
+                />
+                {series_dataKey.toString().length === 2 ? (
+                  // prettier-ignore
+                  <text
+                  x={Number(checkBandScale(xScale(handleX(axis_dataKey)))) - 7}
+                  y={Number(yScale(series_dataKey)) + 4}
+                  fill='#000000'
+                  fontSize={11.5}
+                  >
+                  {series_dataKey}
+                </text>
+                ) : (
+                  // prettier-ignore
+                  <text
+                  x={Number(checkBandScale(xScale(handleX(axis_dataKey)))) - 4}
+                  y={Number(yScale(series_dataKey)) + 4}
+                  fill='#000000'
+                  fontSize={11.5}
+                  >
+                  {series_dataKey}
+                </text>
+                )}
+              </>
+            )}
+          </Group>
+        </React.Fragment>
+      )
+    })
+  })
+
+  return <>{circles}</>
+}
+
+export default LineChartBumpCircle

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

@@ -27,11 +27,33 @@ type LineChartCircleProps = {
 }
 
 const LineChartCircle = (props: LineChartCircleProps) => {
-  const { config, d, tableData, 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]
+  const filtered = config?.runtime?.series.filter(s => s.dataKey === seriesKey)?.[0]
   // If we're not showing the circle, simply return
-  const getColor = (displayArea: boolean, colorScale: Function, config: ChartConfig, hoveredKey: string, seriesKey: string) => {
+  const getColor = (
+    displayArea: boolean,
+    colorScale: Function,
+    config: ChartConfig,
+    hoveredKey: string,
+    seriesKey: string
+  ) => {
     const seriesLabels = config.runtime.seriesLabels || []
     let color
 
@@ -47,14 +69,19 @@ const LineChartCircle = (props: LineChartCircleProps) => {
     return color
   }
   const getXPos = hoveredXValue => {
-    return (config.xAxis.type === 'categorical' ? xScale(hoveredXValue) : xScale(parseDate(hoveredXValue))) + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
+    return (
+      (config.xAxis.type === 'categorical' ? xScale(hoveredXValue) : xScale(parseDate(hoveredXValue))) +
+      (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
+    )
   }
   if (mode === 'ALWAYS_SHOW_POINTS') {
     if (lineDatapointStyle === 'hidden') return <></>
     const getIndex = seriesKey => config.runtime.seriesLabelsAll.indexOf(seriesKey)
 
     if (lineDatapointStyle === 'always show') {
-      const isMatch = circleData?.some(cd => cd[config.xAxis.dataKey] === d[config.xAxis.dataKey] && cd[seriesKey] === d[seriesKey])
+      const isMatch = circleData?.some(
+        cd => cd[config.xAxis.dataKey] === d[config.xAxis.dataKey] && cd[seriesKey] === d[seriesKey]
+      )
       if (isMatch) {
         return <></>
       }
@@ -98,7 +125,7 @@ const LineChartCircle = (props: LineChartCircleProps) => {
         if (isNaN(hoveredSeriesValue)) return <></>
         const isMatch = circleData?.some(cd => cd[config.xAxis.dataKey] === hoveredXValue)
 
-        if (isMatch) {
+        if (isMatch || !hoveredSeriesValue) {
           return <></>
         }
 
@@ -135,7 +162,12 @@ const LineChartCircle = (props: LineChartCircleProps) => {
       }
       // Handle points in the middle
       if (currentIndex > 0 && currentIndex < data.length - 1) {
-        if (currentPoint && currentPoint[seriesKey] && (!previousPoint || !previousPoint[seriesKey]) && (!nextPoint || !nextPoint[seriesKey])) {
+        if (
+          currentPoint &&
+          currentPoint[seriesKey] &&
+          (!previousPoint || !previousPoint[seriesKey]) &&
+          (!nextPoint || !nextPoint[seriesKey])
+        ) {
           res = true
         }
       }
@@ -146,7 +178,14 @@ const LineChartCircle = (props: LineChartCircleProps) => {
     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,10 +1,20 @@
-import { type PreliminaryDataItem, DataItem, StyleProps, Style } from './LineChartProps'
+import { DataItem, StyleProps, Style } from './LineChartProps'
+import { PreliminaryDataItem } from '../../types/ChartConfig'
 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 && 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')
+  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[] = []
   const createStyle = (lineStyle): Style => ({
@@ -15,7 +25,9 @@ export const createStyles = (props: StyleProps): Style[] => {
 
   data.forEach((d, index) => {
     let matchingPd: PreliminaryDataItem = getMatchingPd(d)
-    let style: Style = matchingPd ? createStyle(handleLineType(matchingPd.style)) : createStyle(handleLineType(lineType))
+    let style: Style = matchingPd
+      ? createStyle(handleLineType(matchingPd.style))
+      : createStyle(handleLineType(lineType))
 
     styles.push(style)
 
@@ -27,14 +39,31 @@ export const createStyles = (props: StyleProps): Style[] => {
   return styles as Style[]
 }
 
-export const filterCircles = (preliminaryData: PreliminaryDataItem[], data: DataItem[], seriesKey: string): DataItem[] => {
+export const filterCircles = (
+  preliminaryData: PreliminaryDataItem[],
+  data: DataItem[],
+  seriesKey: string
+): DataItem[] => {
   // Filter and map preliminaryData to get circlesFiltered
-  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 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 && item[seriesKey] && fc.style === 'Open Circles') {
+      if (
+        item[fc.column] === fc.value &&
+        fc.seriesKey === seriesKey &&
+        item[seriesKey] &&
+        fc.style === 'Open Circles'
+      ) {
         const result = {
           data: item,
           size: fc.circleSize,
@@ -42,7 +71,12 @@ export const filterCircles = (preliminaryData: PreliminaryDataItem[], data: Data
         }
         filteredData.push(result)
       }
-      if ((!fc.value || item[fc.column] === fc.value) && fc.seriesKey === seriesKey && item[seriesKey] && fc.style === 'Filled Circles') {
+      if (
+        (!fc.value || item[fc.column] === fc.value) &&
+        fc.seriesKey === seriesKey &&
+        item[seriesKey] &&
+        fc.style === 'Filled Circles'
+      ) {
         const result = {
           data: item,
           size: fc.circleSize,
@@ -71,7 +105,9 @@ const handleFirstIndex = (data, seriesKey, preliminaryData) => {
   // Function to check if a data item matches the suppression criteria
   const isSuppressed = pd => {
     if (pd.type === 'effect' || pd.hideLineStyle) return
-    return pd.type == 'suppression' && pd.value === firstIndexDataItem[seriesKey] && (!pd.column || pd.column === seriesKey)
+    return (
+      pd.type == 'suppression' && pd.value === firstIndexDataItem[seriesKey] && (!pd.column || pd.column === seriesKey)
+    )
   }
 
   // Find applicable suppression data for the first item
@@ -107,7 +143,13 @@ 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' && !pd.hideLineStyle) {
+    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)
@@ -157,7 +199,9 @@ function handleMiddleIndices(data, seriesKey, dataKey, preliminaryData) {
       }
 
       // Find and add the next calculable object
-      const nextIndex = data.slice(i + 1).findIndex(item => item[seriesKey] !== targetValue && isCalculable(item[seriesKey]))
+      const nextIndex = data
+        .slice(i + 1)
+        .findIndex(item => item[seriesKey] !== targetValue && isCalculable(item[seriesKey]))
       if (nextIndex !== -1) {
         result.data.push(data[i + 1 + nextIndex])
       }