@cdc/chart 4.25.11 → 4.26.1

package/src/components/Brush/MiniChartPreview.tsx

@@ -0,0 +1,283 @@
+import React, { memo } from 'react'
+import { LinePath, AreaClosed, AreaStack } from '@visx/shape'
+import * as allCurves from '@visx/curve'
+import { handleLineType } from '../../helpers/handleLineType'
+import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
+
+interface MiniChartPreviewProps {
+  series: any[]
+  tableData: any[]
+  dataKey: string
+  xScale: any
+  miniYScale: any
+  colorScale: any
+  config: any
+  xMax: number
+}
+
+const MiniChartPreview = memo<MiniChartPreviewProps>(
+  ({ series, tableData, dataKey, xScale, miniYScale, colorScale, config }) => {
+    if (!series || !series.length || !tableData || !tableData.length || !xScale || !miniYScale) {
+      return null
+    }
+
+    const bandwidth = xScale.bandwidth?.() || 0
+    const isBarChart = config?.visualizationType === 'Bar'
+    const isStacked = config?.visualizationSubType === 'stacked'
+    const isAreaChart = config?.visualizationType === 'Area Chart'
+
+    // For bar charts, render rectangles
+    if (isBarChart) {
+      const bars: React.ReactElement[] = []
+
+      tableData.forEach((d, i) => {
+        const xVal = xScale(d[dataKey])
+        if (xVal === undefined || isNaN(xVal)) {
+          return
+        }
+
+        // Calculate bar position and width
+        // For band scales, center the bar in the band
+        const x = bandwidth > 0 ? xVal + bandwidth / 2 : xVal
+        const barWidth = bandwidth > 0 ? Math.max(bandwidth * 0.85, 2) : 4 // 85% of bandwidth for wider bars
+
+        if (isStacked) {
+          // For stacked bars, render each series as a segment
+          // Calculate cumulative values starting from bottom (0)
+          let cumulativeValue = 0
+          const zeroY = miniYScale(0)
+
+          series.forEach((s, seriesIndex) => {
+            const value = parseFloat(d[s.dataKey])
+            if (isNaN(value) || value === 0) return
+
+            const seriesColor = colorScale?.(config.runtime.seriesLabels?.[s.dataKey] || s.dataKey) || '#666'
+
+            // Calculate the bottom and top of this segment
+            // For stacked bars, each segment sits on top of the previous one
+            const bottomY = miniYScale(cumulativeValue)
+            cumulativeValue += value
+            const topY = miniYScale(cumulativeValue)
+            const barHeight = Math.abs(topY - bottomY)
+            const y = Math.min(bottomY, topY)
+
+            // Ensure minimum visible height
+            if (barHeight < 0.5) return
+
+            bars.push(
+              <rect
+                key={`mini-bar-stacked-${i}-${seriesIndex}`}
+                x={x - barWidth / 2}
+                y={y}
+                width={barWidth}
+                height={barHeight}
+                fill={seriesColor}
+                fillOpacity={0.7}
+                pointerEvents='none'
+              />
+            )
+          })
+        } else {
+          // For grouped bars, render bars side by side
+          const seriesCount = series.length
+          const groupBarWidth = barWidth / seriesCount
+          const zeroY = miniYScale(0)
+
+          series.forEach((s, seriesIndex) => {
+            const value = parseFloat(d[s.dataKey])
+            if (isNaN(value)) return
+
+            const seriesColor = colorScale?.(config.runtime.seriesLabels?.[s.dataKey] || s.dataKey) || '#666'
+
+            // Calculate bar position and height
+            const valueY = miniYScale(value)
+            const barHeight = Math.abs(valueY - zeroY)
+            const barX = x - barWidth / 2 + seriesIndex * groupBarWidth
+            const y = Math.min(valueY, zeroY) // Top of bar (smaller Y value)
+
+            bars.push(
+              <rect
+                key={`mini-bar-grouped-${i}-${seriesIndex}`}
+                x={barX}
+                y={y}
+                width={groupBarWidth * 0.9} // Wider bars with small gap between them
+                height={barHeight}
+                fill={seriesColor}
+                fillOpacity={0.7}
+                pointerEvents='none'
+              />
+            )
+          })
+        }
+      })
+
+      return <>{bars}</>
+    }
+
+    // For stacked area charts, use AreaStack
+    // Note: If only one series, treat as non-stacked area chart
+    if (isAreaChart && isStacked) {
+      // Use the same keys order as the main chart
+      const seriesKeys =
+        config.runtime?.areaSeriesKeys?.map(s => s.dataKey) || series.map(s => s.dataKey).filter(Boolean)
+
+      if (seriesKeys.length === 0) {
+        return null
+      }
+
+      // If only one series, render as regular area chart instead of stacked
+      if (seriesKeys.length === 1) {
+        const s = series[0]
+        const seriesKey = s.dataKey
+        const seriesColor = colorScale?.(config.runtime.seriesLabels?.[seriesKey] || seriesKey) || '#666'
+        const curveType = config.stackedAreaChartLineType
+          ? allCurves[approvedCurveTypes[config.stackedAreaChartLineType]]
+          : allCurves.curveLinear
+
+        const validData = tableData.filter(d => {
+          const xVal = xScale(d[dataKey])
+          const yVal = parseFloat(d[s.dataKey])
+          return xVal !== undefined && !isNaN(yVal)
+        })
+
+        if (validData.length === 0) return null
+
+        const getX = d => xScale(d[dataKey]) + bandwidth / 2
+        const getY = d => miniYScale(parseFloat(d[s.dataKey]))
+
+        return (
+          <AreaClosed
+            key={`mini-area-single-${seriesKey}`}
+            data={validData}
+            x={getX}
+            y={getY}
+            yScale={miniYScale}
+            fill={seriesColor}
+            fillOpacity={1}
+            stroke={seriesColor}
+            strokeWidth={2}
+            curve={curveType}
+            pointerEvents='none'
+          />
+        )
+      }
+
+      const curveType = config.stackedAreaChartLineType
+        ? allCurves[approvedCurveTypes[config.stackedAreaChartLineType]]
+        : allCurves.curveLinear
+
+      // Filter data to only include valid entries
+      const validData = tableData.filter(d => {
+        const xVal = xScale(d[dataKey])
+        return xVal !== undefined
+      })
+
+      if (validData.length === 0) {
+        return null
+      }
+
+      return (
+        <AreaStack
+          data={validData}
+          keys={seriesKeys}
+          x0={d => {
+            // AreaStack transforms data, so d has a 'data' property with the original data point
+            const xVal = xScale(d.data[dataKey])
+            return xVal !== undefined ? xVal + bandwidth / 2 : 0
+          }}
+          y0={d => Number(miniYScale(d[0]))}
+          y1={d => Number(miniYScale(d[1]))}
+          curve={curveType}
+        >
+          {({ stacks, path }) => {
+            if (!stacks || stacks.length === 0) {
+              return null
+            }
+            // Don't reverse - render in the same order as main chart
+            // The main chart doesn't reverse, so we should match that
+            return stacks.map(stack => {
+              const seriesKey = stack.key
+              const seriesColor = colorScale?.(config.runtime.seriesLabels?.[seriesKey] || seriesKey) || '#666'
+              const pathData = path(stack)
+              if (!pathData) return null
+              return (
+                <path
+                  key={`mini-area-stacked-${seriesKey}`}
+                  d={pathData}
+                  fill={seriesColor}
+                  fillOpacity={1}
+                  stroke={seriesColor}
+                  strokeWidth={2}
+                  pointerEvents='none'
+                />
+              )
+            })
+          }}
+        </AreaStack>
+      )
+    }
+
+    // For line/area charts, render lines or areas
+    return (
+      <>
+        {series.map((s, i) => {
+          const seriesKey = s.dataKey
+          const seriesColor = colorScale?.(config.runtime.seriesLabels?.[seriesKey] || seriesKey) || '#666'
+
+          // Get series-specific styling
+          const seriesWeight = s.weight || 2
+          const seriesLineType = s.lineType || 'curveLinear'
+          const seriesStyle = s.type || 'solid'
+          const curve = allCurves[seriesLineType] || allCurves.curveLinear
+          const strokeDasharray = handleLineType(seriesStyle)
+
+          // Filter to only valid data points
+          const validData = tableData.filter(d => {
+            const xVal = xScale(d[dataKey])
+            const yVal = parseFloat(d[s.dataKey])
+            return xVal !== undefined && !isNaN(yVal)
+          })
+
+          if (validData.length === 0) return null
+
+          const getX = d => xScale(d[dataKey]) + bandwidth / 2
+          const getY = d => miniYScale(parseFloat(d[s.dataKey]))
+
+          return isAreaChart ? (
+            <AreaClosed
+              key={`mini-area-${seriesKey}-${i}`}
+              data={validData}
+              x={getX}
+              y={getY}
+              yScale={miniYScale}
+              fill={seriesColor}
+              fillOpacity={1}
+              stroke={seriesColor}
+              strokeWidth={seriesWeight}
+              strokeDasharray={strokeDasharray}
+              curve={curve}
+              pointerEvents='none'
+            />
+          ) : (
+            <LinePath
+              key={`mini-line-${seriesKey}-${i}`}
+              data={validData}
+              x={getX}
+              y={getY}
+              stroke={seriesColor}
+              strokeWidth={seriesWeight}
+              strokeDasharray={strokeDasharray}
+              strokeOpacity={0.8}
+              curve={curve}
+              pointerEvents='none'
+            />
+          )
+        })}
+      </>
+    )
+  }
+)
+
+MiniChartPreview.displayName = 'MiniChartPreview'
+
+export default MiniChartPreview

package/src/components/DeviationBar.jsx

@@ -9,6 +9,7 @@ import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 import { isV1Palette } from '@cdc/core/helpers/palettes/utils'
+import { isMobileFontViewport } from '@cdc/core/helpers/viewports'
 
 export default function DeviationBar({ height, xScale }) {
   const {
@@ -18,19 +19,20 @@ export default function DeviationBar({ height, xScale }) {
     twoColorPalette,
     parseDate,
     formatDate,
-    currentViewport
+    vizViewport
   } = useContext(ConfigContext)
   const { barStyle, tipRounding, roundingStyle, twoColor } = config
+  const labelFontSize = isMobileFontViewport(vizViewport) ? 13 : 16
   const barRefs = useRef([])
   const [windowWidth, setWindowWidth] = useState(window.innerWidth)
   const radius =
     roundingStyle === 'standard'
       ? '8px'
       : roundingStyle === 'shallow'
-        ? '5px'
-        : roundingStyle === 'finger'
-          ? '15px'
-          : '0px'
+      ? '5px'
+      : roundingStyle === 'finger'
+      ? '15px'
+      : '0px'
   const isRounded = config.barStyle === 'rounded'
   const target = Number(config.xAxis.target)
   const seriesKey = config.series[0].dataKey
@@ -165,7 +167,7 @@ export default function DeviationBar({ height, xScale }) {
           config.heights.horizontal = totalheight
 
           // text,labels postiions
-          const textWidth = getTextWidth(formatNumber(barValue, 'left'), `normal ${16}px sans-serif`)
+          const textWidth = getTextWidth(formatNumber(barValue, 'left'), `normal ${labelFontSize}px sans-serif`)
           const textFits = textWidth < barWidth - 6
           const textX = barBaseX
           const textY = barY + barHeight / 2
@@ -223,7 +225,7 @@ export default function DeviationBar({ height, xScale }) {
                 ></div>
               </foreignObject>
               {config.yAxis.displayNumbersOnBar && (
-                <Text verticalAnchor='middle' x={textX} y={textY} {...textProps[barPosition]}>
+                <Text verticalAnchor='middle' x={textX} y={textY} {...textProps[barPosition]} fontSize={labelFontSize}>
                   {formatNumber(d[seriesKey], 'left')}
                 </Text>
               )}