@cdc/chart 4.26.3 → 4.26.5

package/src/_stories/_mock/sankey_mock.json

@@ -0,0 +1,78 @@
+{
+  "type": "chart",
+  "visualizationType": "Sankey",
+  "title": "Patient Care Pathway",
+  "showTitle": true,
+  "enableTooltips": true,
+  "heights": {
+    "vertical": 500,
+    "horizontal": 750
+  },
+  "data": [
+    {
+      "links": [
+        { "source": "Screened", "target": "Eligible", "value": 850 },
+        { "source": "Screened", "target": "Ineligible", "value": 150 },
+        { "source": "Eligible", "target": "Enrolled", "value": 700 },
+        { "source": "Eligible", "target": "Declined", "value": 150 },
+        { "source": "Enrolled", "target": "Completed Treatment", "value": 580 },
+        { "source": "Enrolled", "target": "Dropped Out", "value": 120 },
+        { "source": "Completed Treatment", "target": "Recovered", "value": 460 },
+        { "source": "Completed Treatment", "target": "Ongoing Care", "value": 120 }
+      ],
+      "tooltips": true,
+      "storyNodeText": []
+    }
+  ],
+  "sankey": {
+    "title": {
+      "defaultColor": "black"
+    },
+    "iterations": 1,
+    "rxValue": 0.9,
+    "overallSize": {
+      "width": 900,
+      "height": 700
+    },
+    "margin": {
+      "margin_y": 25,
+      "margin_x": 0
+    },
+    "nodeSize": {
+      "nodeWidth": 26,
+      "nodeHeight": 40
+    },
+    "nodePadding": 55,
+    "nodeFontColor": "black",
+    "nodeColor": {
+      "default": "#005eaa",
+      "inactive": "#808080"
+    },
+    "linkColor": {
+      "default": "#7bafd4",
+      "inactive": "#D3D3D3"
+    },
+    "opacity": {
+      "nodeOpacityDefault": 1.0,
+      "nodeOpacityInactive": 0.1,
+      "LinkOpacityDefault": 0.6,
+      "LinkOpacityInactive": 0.1
+    },
+    "storyNodeFontColor": "#006778",
+    "storyNodeText": [],
+    "nodeValueStyle": {
+      "textBefore": "(",
+      "textAfter": ")"
+    },
+    "data": []
+  },
+  "table": {
+    "show": false,
+    "expanded": false,
+    "label": "Data Table",
+    "caption": ""
+  },
+  "legend": {
+    "hide": true
+  }
+}

package/src/_stories/_mock/small_multiples/small_multiples_lines.json

@@ -64,7 +64,7 @@
     "hideTicks": true,
     "size": "40",
     "gridLines": true,
-    "enablePadding": true,
+    "enablePadding": false,
     "min": "",
     "max": "",
     "labelColor": "#1c1d1f",

package/src/components/Annotations/components/AnnotationDraggable.tsx

@@ -34,7 +34,7 @@ const Annotations = ({
   const [height] = dimensions
 
   const AnnotationComponent = isEditor ? EditableAnnotation : VisxAnnotation
-  const isMobile = isMobileAnnotationViewport(currentViewport)
+  const isMobile = isMobileAnnotationViewport(currentViewport) && config?.general?.mobileAnnotationDisplay !== 'text'
 
   /**
    * Scale dx/dy offsets based on savedDimensions vs current dimensions.
@@ -218,7 +218,7 @@ const Annotations = ({
               return (
                 <HtmlLabel
                   className='annotation__desktop-label'
-                  containerStyle={{ width: `${labelWidth}px` }}
+                  containerStyle={{ width: 'fit-content', maxWidth: `${labelWidth}px` }}
                   horizontalAnchor={horizontalAnchor}
                   verticalAnchor={verticalAnchor}
                   showAnchorLine={false}

package/src/components/Annotations/components/AnnotationDropdown.tsx

@@ -27,8 +27,11 @@ const AnnotationDropdown = () => {
   const handleSectionClasses = () => {
     const classes = [`data-table-container`, viewport, `w-100`, 'mt-4']
 
-    // Show dropdown in mobile mode or if explicitly enabled
-    if (isMobile || config.general.showAnnotationDropdown) {
+    // When mobile annotations show full text on the chart, the auto mobile dropdown is suppressed.
+    // The dropdown then follows showAnnotationDropdown only (matching desktop behavior).
+    const mobileShowsText = config.general?.mobileAnnotationDisplay === 'text'
+
+    if ((isMobile && !mobileShowsText) || config.general.showAnnotationDropdown) {
       classes.push('d-block')
     } else {
       classes.push('d-none')

package/src/components/AreaChart/components/AreaChart.Stacked.jsx

@@ -11,7 +11,15 @@ import { Bar, AreaStack } from '@visx/shape'
 import { Group } from '@visx/group'
 import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
 
-const AreaChartStacked = ({ xScale, yScale, yMax, xMax, handleTooltipMouseOver, handleTooltipMouseOff }) => {
+const AreaChartStacked = ({
+  xScale,
+  yScale,
+  yMax,
+  xMax,
+  yAxisWidth,
+  handleTooltipMouseOver,
+  handleTooltipMouseOff
+}) => {
   // import data from context
   let { transformedData: data, config, seriesHighlight, colorScale, rawData, parseDate } = useContext(ConfigContext)
   // Draw transparent bars over the chart to get tooltip data
@@ -39,7 +47,7 @@ const AreaChartStacked = ({ xScale, yScale, yMax, xMax, handleTooltipMouseOver,
           <Group
             className='area-chart'
             key='area-wrapper'
-            left={Number(config.yAxis.size) + strokeWidth / 2}
+            left={yAxisWidth + strokeWidth / 2}
             height={Number(yMax)}
             style={{ overflow: 'hidden' }}
           >

package/src/components/Axis/BottomAxis.tsx

@@ -205,7 +205,7 @@ const BottomAxis: React.FC<BottomAxisProps> = ({
               const tickLength = showTick === 'block' ? MAJOR_TICK_LENGTH : DEFAULT_TICK_LENGTH
               const to = { x: tick.to.x, y: tickLength }
               const tickSlotWidth = filteredTicks.length > 0 ? xMax / filteredTicks.length : xMax
-              const limitedWidth = Math.max(Math.min(maxLengthOfTick, tickSlotWidth), 0)
+              const limitedWidth = Math.max(Math.min(maxLengthOfTick, tickSlotWidth), 1)
 
               // Configure rotation using effective values (computed above without mutations)
               const tickRotation =

package/src/components/Axis/LeftAxis.tsx

@@ -36,7 +36,6 @@ interface LeftAxisProps {
   suffixWidth?: number
   horizontalYAxisLabelSpace?: number
   categoryLabelSpace?: number
-  yLabelOffset?: number
 }
 
 const LeftAxis: React.FC<LeftAxisProps> = ({
@@ -53,8 +52,7 @@ const LeftAxis: React.FC<LeftAxisProps> = ({
   suffixRef,
   suffixWidth = 0,
   horizontalYAxisLabelSpace = 0,
-  categoryLabelSpace = 0,
-  yLabelOffset = 0
+  categoryLabelSpace = 0
 }) => {
   const { config, colorScale, seriesHighlight } = useContext(ConfigContext)
   const { runtime, orientation, visualizationType, visualizationSubType, heights } = config
@@ -62,6 +60,7 @@ const LeftAxis: React.FC<LeftAxisProps> = ({
   const isLogarithmicAxis = config.yAxis.type === 'logarithmic'
   const { labelsAboveGridlines, hideAxis, inlineLabel } = config.yAxis
   const inlineLabelHasNoSpace = !inlineLabel?.includes(' ')
+  const showSideTitle = config.yAxis.titlePlacement !== 'top'
 
   return (
     <VisxAxisLeft
@@ -383,17 +382,19 @@ const LeftAxis: React.FC<LeftAxisProps> = ({
                 })
               })()}
 
-            <Text
-              className='y-label'
-              textAnchor='middle'
-              verticalAnchor='start'
-              transform={`translate(${-1 * yAxisWidth + yLabelOffset}, ${axisCenter}) rotate(-90)`}
-              fontWeight='bold'
-              fill={config.yAxis.labelColor}
-              fontSize={axisLabelFontSize}
-            >
-              {!config.hideYAxisLabel ? props.label : null}
-            </Text>
+            {showSideTitle && (
+              <Text
+                className='y-label'
+                textAnchor='middle'
+                verticalAnchor='start'
+                transform={`translate(${-1 * yAxisWidth}, ${axisCenter}) rotate(-90)`}
+                fontWeight='bold'
+                fill={config.yAxis.labelColor}
+                fontSize={axisLabelFontSize}
+              >
+                {!config.hideYAxisLabel ? props.label : null}
+              </Text>
+            )}
           </Group>
         )
       }}

package/src/components/Axis/LeftAxisGridlines.tsx

@@ -10,7 +10,6 @@ interface LeftAxisGridlinesProps {
   xMax: number
   yAxisWidth: number
   numTicks: number
-  yLabelOffset: number
   axisLabelFontSize: number
 }
 
@@ -19,13 +18,13 @@ const LeftAxisGridlines: React.FC<LeftAxisGridlinesProps> = ({
   xMax,
   yAxisWidth,
   numTicks,
-  yLabelOffset,
   axisLabelFontSize
 }) => {
   const { config } = useContext(ConfigContext)
   const { runtime } = config
 
   const isLogarithmicAxis = config.yAxis.type === 'logarithmic'
+  const showSideTitle = config.yAxis.titlePlacement !== 'top'
 
   return (
     <AxisLeft scale={yScale} left={yAxisWidth - config.yAxis.axisPadding} numTicks={numTicks}>
@@ -56,17 +55,19 @@ const LeftAxisGridlines: React.FC<LeftAxisGridlinesProps> = ({
                 </Group>
               )
             })}
-            <Text
-              className='y-label'
-              textAnchor='middle'
-              verticalAnchor='start'
-              transform={`translate(${-1 * yAxisWidth + yLabelOffset}, ${axisCenter}) rotate(-90)`}
-              fontWeight='bold'
-              fill={config.yAxis.labelColor}
-              fontSize={axisLabelFontSize}
-            >
-              {!config.hideYAxisLabel ? props.label : null}
-            </Text>
+            {showSideTitle && (
+              <Text
+                className='y-label'
+                textAnchor='middle'
+                verticalAnchor='start'
+                transform={`translate(${-1 * yAxisWidth}, ${axisCenter}) rotate(-90)`}
+                fontWeight='bold'
+                fill={config.yAxis.labelColor}
+                fontSize={axisLabelFontSize}
+              >
+                {!config.hideYAxisLabel ? props.label : null}
+              </Text>
+            )}
           </Group>
         )
       }}

package/src/components/BarChart/components/BarChart.Horizontal.tsx

@@ -26,6 +26,7 @@ import { getBarData } from '../helpers/getBarData'
 import { getHorizontalBarHeights } from '../helpers/getBarHeights'
 import { getPatternUrl as getPatternUrlForBar } from '../helpers/getPatternUrl'
 import { getChartPatternId } from '../../../helpers/getChartPatternId'
+import { buildSeriesTooltipListHtml } from '../../../helpers/tooltipHelpers'
 
 const BarChartHorizontal = () => {
   const { xScale, yScale, yMax, seriesScale, barChart } = useContext<BarChartContextValues>(BarChartContext)
@@ -243,11 +244,14 @@ const BarChartHorizontal = () => {
                     : xAxisValue
                   const additionalColTooltip = getAdditionalColumn(bar.key, hoveredBar)
                   const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${yAxisValue}`
-                  const tooltip = `<ul>
-                  <li class="tooltip-heading"">${yAxisTooltip}</li>
-                  <li class="tooltip-body ">${tooltipBody}</li>
-                  <li class="tooltip-body ">${additionalColTooltip}</li>
-                    </li></ul>`
+                  const tooltip = buildSeriesTooltipListHtml({
+                    config,
+                    colorScale,
+                    heading: yAxisTooltip,
+                    seriesKey: bar.key,
+                    seriesText: tooltipBody,
+                    extraRows: additionalColTooltip ? [additionalColTooltip] : []
+                  })
 
                   // configure colors
                   let labelColor = APP_FONT_COLOR

package/src/components/BarChart/components/BarChart.StackedHorizontal.tsx

@@ -16,6 +16,7 @@ import createBarElement from '@cdc/core/components/createBarElement'
 import { getHorizontalBarHeights } from '../helpers/getBarHeights'
 import { getPatternUrl as getPatternUrlForBar } from '../helpers/getPatternUrl'
 import { getChartPatternId } from '../../../helpers/getChartPatternId'
+import { buildSeriesTooltipListHtml } from '../../../helpers/tooltipHelpers'
 
 const BarChartStackedHorizontal = () => {
   const { yMax, yScale, xScale, barChart } = useContext<BarChartContextValues>(BarChartContext)
@@ -161,11 +162,14 @@ const BarChartStackedHorizontal = () => {
                 const textWidth = getTextWidth(xAxisValue, `normal ${labelFontSize}px sans-serif`)
                 const additionalColTooltip = getAdditionalColumn(bar.key, hoveredBar)
                 const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${xAxisValue}`
-                const tooltip = `<ul>
-                  <li class="tooltip-heading"">${yAxisTooltip}</li>
-                  <li class="tooltip-body ">${tooltipBody}</li>
-                  <li class="tooltip-body ">${additionalColTooltip}</li>
-                    </li></ul>`
+                const tooltip = buildSeriesTooltipListHtml({
+                  config,
+                  colorScale,
+                  heading: yAxisTooltip,
+                  seriesKey: bar.key,
+                  seriesText: tooltipBody,
+                  extraRows: additionalColTooltip ? [additionalColTooltip] : []
+                })
 
                 // Check if this bar should use a pattern
                 const patternUrl = getPatternUrlForBar({

package/src/components/BarChart/components/BarChart.StackedVertical.tsx

@@ -10,6 +10,7 @@ import { addMinimumBarHeights } from '../helpers'
 import createBarElement from '@cdc/core/components/createBarElement'
 import { getPatternUrl as getPatternUrlForBar } from '../helpers/getPatternUrl'
 import { getChartPatternId } from '../../../helpers/getChartPatternId'
+import { buildSeriesTooltipListHtml } from '../../../helpers/tooltipHelpers'
 
 const BarChartStackedVertical = () => {
   const [barWidth, setBarWidth] = useState(0)
@@ -143,11 +144,14 @@ const BarChartStackedVertical = () => {
                     : xAxisValue
                   const additionalColTooltip = getAdditionalColumn(bar.key, hoveredBar)
                   const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${yAxisValue}`
-                  const tooltip = `<ul>
-                  <li class="tooltip-heading"">${xAxisTooltip}</li>
-                  <li class="tooltip-body ">${tooltipBody}</li>
-                  <li class="tooltip-body ">${additionalColTooltip}</li>
-                    </li></ul>`
+                  const tooltip = buildSeriesTooltipListHtml({
+                    config,
+                    colorScale,
+                    heading: xAxisTooltip,
+                    seriesKey: bar.key,
+                    seriesText: tooltipBody,
+                    extraRows: additionalColTooltip ? [additionalColTooltip] : []
+                  })
 
                   setBarWidth(barThickness)
 

package/src/components/BarChart/components/BarChart.Vertical.tsx

@@ -23,6 +23,7 @@ import _ from 'lodash'
 import { getBarData } from '../helpers/getBarData'
 import { getPatternUrl as getPatternUrlForBar } from '../helpers/getPatternUrl'
 import { getChartPatternId } from '../../../helpers/getChartPatternId'
+import { buildSeriesTooltipListHtml } from '../../../helpers/tooltipHelpers'
 
 const BarChartVertical = () => {
   const { xScale, yScale, xMax, yMax, seriesScale, convertLineToBarGraph, barChart } =
@@ -229,12 +230,14 @@ const BarChartVertical = () => {
                     ? `${config.runtime.xAxis.label}: ${xAxisValue}`
                     : xAxisValue
                   const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${yAxisValue}`
-
-                  const tooltip = `<ul>
-                  <li class="tooltip-heading">${xAxisTooltip}</li>
-                  <li class="tooltip-body ">${tooltipBody}</li>
-                  ${additionalColTooltip ? '<li class="tooltip-body ">' + additionalColTooltip + '</li>' : ''}
-                    </li></ul>`
+                  const tooltip = buildSeriesTooltipListHtml({
+                    config,
+                    colorScale,
+                    heading: xAxisTooltip,
+                    seriesKey: bar.key,
+                    seriesText: tooltipBody,
+                    extraRows: additionalColTooltip ? [additionalColTooltip] : []
+                  })
                   const { barHeight, isSuppressed, getBarY, absentDataLabel } = getBarConfig({
                     bar,
                     defaultBarHeight,

package/src/components/BarChart/components/BarChart.tsx

@@ -18,7 +18,7 @@ type BarChartProps = {
   seriesScale: PositionScale
   xMax: number
   yMax: number
-  yAxisWidth?: number
+  yAxisWidth: number
   handleTooltipMouseOver: MouseEventHandler<SVGRectElement>
   handleTooltipMouseOff: MouseEventHandler<SVGRectElement>
   handleTooltipClick: MouseEventHandler<SVGRectElement>
@@ -49,14 +49,10 @@ const BarChart: React.FC<BarChartProps> = ({
     barChart
   }
 
-  // Use yAxisWidth prop if provided (for horizontal bar charts with dynamic labels)
-  // otherwise fall back to config value
-  const leftOffset = yAxisWidth ?? parseFloat(config.runtime.yAxis.size)
-
   return (
     <ErrorBoundary component='BarChart'>
       <BarChartContext.Provider value={contextValues}>
-        <Group left={leftOffset}>
+        <Group left={yAxisWidth}>
           <BarChartType.StackedVertical />
           <BarChartType.StackedHorizontal />
           <BarChartType.Vertical />

package/src/components/BarChart/helpers/useBarChart.ts

@@ -193,7 +193,7 @@ export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, confi
       const formattedValue = formatColNumber(
         closestVal[config.columns[colKeys].name],
         'left',
-        true,
+        false,
         config,
         formattingParams
       )

package/src/components/BoxPlot/BoxPlot.Vertical.tsx

@@ -9,7 +9,7 @@ import { handleTooltip, createPlots } from './helpers/index'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 import _ from 'lodash'
 
-const BoxPlotVertical = ({ xScale, yScale, seriesScale }) => {
+const BoxPlotVertical = ({ xScale, yScale, seriesScale, yAxisWidth }) => {
   const { config, colorScale, seriesHighlight, transformedData: data } = useContext(ConfigContext)
   const { boxplot } = config
 
@@ -23,7 +23,7 @@ const BoxPlotVertical = ({ xScale, yScale, seriesScale }) => {
   const plots = createPlots(data, config)
   return (
     <ErrorBoundary component='BoxPlot Vertical'>
-      <Group left={Number(config.yAxis.size)} className='boxplot' key={`boxplot-group`}>
+      <Group left={yAxisWidth} className='boxplot' key={`boxplot-group`}>
         {plots.map((d, i) => {
           const offset = boxWidth - constrainedWidth
           const radius = 4
@@ -63,7 +63,7 @@ const BoxPlotVertical = ({ xScale, yScale, seriesScale }) => {
                     {displayPlot && (
                       <BoxPlot
                         display={displayPlot ? 'block' : 'none'}
-                        data-left={xScale(d.columnCategory) + config.yAxis.size + offset / 2 + 0.5}
+                        data-left={xScale(d.columnCategory) + yAxisWidth + offset / 2 + 0.5}
                         key={`box-plot-${i}-${item}`}
                         min={Number(d.min[item.dataKey])}
                         max={Number(d.max[item.dataKey])}