@cdc/chart 4.26.4 → 4.26.6

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.styles.css

@@ -1,5 +1,5 @@
 .cove-visualization.type-chart .annotation__desktop-label {
-  font-size: 16px;
+  /* font-size is applied inline so it stays in sync with the axis tick label size and scales by viewport. */
   line-height: 1.1rem;
 }
 
@@ -22,4 +22,25 @@
     text-align: center;
     width: 24px;
   }
+
+  .annotation__event-line {
+    pointer-events: none;
+  }
+
+  .annotation__event-line-label {
+    max-width: 186px;
+    width: fit-content;
+  }
+
+  /* Label right of the line. */
+  .cove-annotation-event-line__label--right {
+    padding-left: 0.5rem;
+    text-align: left;
+  }
+
+  /* Label left of the line. */
+  .cove-annotation-event-line__label--left {
+    padding-right: 0.5rem;
+    text-align: right;
+  }
 }

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

@@ -2,7 +2,7 @@ import { useContext, useState } from 'react'
 import ConfigContext from '../../../ConfigContext'
 import DOMPurify from 'dompurify'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
-import { isMobileAnnotationViewport } from '@cdc/core/helpers/viewports'
+import { isMobileAnnotationViewport, isMobileFontViewport } from '@cdc/core/helpers/viewports'
 
 // helpers
 import { findNearestDatum } from './findNearestDatum'
@@ -15,6 +15,13 @@ import { LinePath } from '@visx/shape'
 // styles
 import './AnnotationDraggable.styles.css'
 
+export const EVENT_LINE_LABEL_OFFSET = 2
+export const snapEventLineDx = (dx: number) => (dx >= 0 ? EVENT_LINE_LABEL_OFFSET : -EVENT_LINE_LABEL_OFFSET)
+
+// Keep annotation label text in sync with axis tick labels (see LinearChart.tsx).
+const TICK_LABEL_FONT_SIZE = 16
+const TICK_LABEL_FONT_SIZE_SMALL = 13
+
 const Annotations = ({
   xScale,
   yScale,
@@ -34,7 +41,10 @@ const Annotations = ({
   const [height] = dimensions
 
   const AnnotationComponent = isEditor ? EditableAnnotation : VisxAnnotation
-  const isMobile = isMobileAnnotationViewport(currentViewport)
+  const isMobile = isMobileAnnotationViewport(currentViewport) && config?.general?.mobileAnnotationDisplay !== 'text'
+
+  // Match the axis tick label font size (and its viewport-based scaling) for visual consistency.
+  const tickLabelFontSize = isMobileFontViewport(currentViewport) ? TICK_LABEL_FONT_SIZE_SMALL : TICK_LABEL_FONT_SIZE
 
   /**
    * Scale dx/dy offsets based on savedDimensions vs current dimensions.
@@ -74,9 +84,11 @@ const Annotations = ({
     visibleAnnotations.map((annotation, annotationIndex) => {
       const originalIndex = annotations.indexOf(annotation)
       const text = annotation.text || ''
+      const isEventLine = annotation.style === 'event-line'
 
       // Calculate scaled dx/dy offsets based on savedDimensions
-      const { scaledDx, scaledDy } = getScaledOffsets(annotation)
+      const { scaledDx: rawScaledDx, scaledDy } = getScaledOffsets(annotation)
+      const scaledDx = isEventLine ? snapEventLineDx(rawScaledDx) : rawScaledDx
 
       // Default to absolute positioning
       let annotationX = xScaleAnnotation(annotation.x)
@@ -88,19 +100,22 @@ const Annotations = ({
         const dataPoint = dataSource.find(d => d[config.xAxis.dataKey] === annotation.dataX)
 
         if (dataPoint) {
-          const dataYValue = dataPoint[annotation.seriesKey]
-
           // For date/date-time axes, convert raw value to timestamp for scale
           let xScaleInput = annotation.dataX
           if (config.xAxis.type === 'date' || config.xAxis.type === 'date-time') {
             xScaleInput = parseDate(xScaleInput, false)?.getTime()
           }
 
-          // Check if this annotation's series is a bar in a grouped bar situation
-          const annotationSeries = config.series?.find(s => s.dataKey === annotation.seriesKey)
+          // Event-line annotations are series-agnostic; treat as single (non-grouped) anchor.
+          const annotationSeries = isEventLine
+            ? undefined
+            : config.series?.find(s => s.dataKey === annotation.seriesKey)
           const barSeriesCount = config.series?.filter(s => s.type === 'Bar').length || 0
           const isGroupedBarAnnotation =
-            annotationSeries?.type === 'Bar' && barSeriesCount > 1 && config.visualizationSubType !== 'stacked'
+            !isEventLine &&
+            annotationSeries?.type === 'Bar' &&
+            barSeriesCount > 1 &&
+            config.visualizationSubType !== 'stacked'
 
           if (isGroupedBarAnnotation && seriesScale) {
             // Position at group start + series offset + half series bar width
@@ -112,17 +127,23 @@ const Annotations = ({
             annotationX = xScale(xScaleInput) + (xScale.bandwidth?.() / 2 || 0)
           }
 
-          // Adjust X for arrow markers based on label direction
-          if (annotation.marker === 'arrow' && Math.abs(annotation.dx) >= 100) {
-            const direction = annotation.dx > 0 ? 1 : -1
-            const relevantBandwidth =
-              isGroupedBarAnnotation && seriesScale ? seriesScale.bandwidth?.() : xScale.bandwidth?.()
-            const nudgeAmount = relevantBandwidth ? relevantBandwidth / 6 : 2
-            annotationX += direction * nudgeAmount
-          }
+          if (isEventLine) {
+            // Anchor visx subject at the plot's vertical middle; the line spans full height.
+            annotationY = yMax / 2
+          } else {
+            // Adjust X for arrow markers based on label direction
+            if (annotation.marker === 'arrow' && Math.abs(annotation.dx) >= 100) {
+              const direction = annotation.dx > 0 ? 1 : -1
+              const relevantBandwidth =
+                isGroupedBarAnnotation && seriesScale ? seriesScale.bandwidth?.() : xScale.bandwidth?.()
+              const nudgeAmount = relevantBandwidth ? relevantBandwidth / 6 : 2
+              annotationX += direction * nudgeAmount
+            }
 
-          // Y position based on marker type
-          annotationY = yScale(dataYValue) - (annotation.marker === 'circle' ? 0 : 5)
+            // Y position based on marker type
+            const dataYValue = dataPoint[annotation.seriesKey]
+            annotationY = yScale(dataYValue) - (annotation.marker === 'circle' ? 0 : 5)
+          }
         }
       }
 
@@ -141,7 +162,7 @@ const Annotations = ({
           x={annotationX}
           y={annotationY}
           canEditLabel={annotation.edit.label || false}
-          canEditSubject={(annotation.edit.subject && annotation.connectionType !== 'none') || false}
+          canEditSubject={(annotation.edit.subject && (isEventLine || annotation.connectionType !== 'none')) || false}
           labelDragHandleProps={{ r: 15, stroke: 'red' }}
           subjectDragHandleProps={{ r: 15, stroke: 'red' }}
           onDragStart={() => {
@@ -149,7 +170,8 @@ const Annotations = ({
             setLiveDrag({ index: annotationIndex, dx: scaledDx })
           }}
           onDragMove={props => {
-            setLiveDrag({ index: annotationIndex, dx: props.dx })
+            const previewDx = isEventLine ? snapEventLineDx(props.dx) : props.dx
+            setLiveDrag({ index: annotationIndex, dx: previewDx })
           }}
           onDragEnd={props => {
             onDragStateChange(false)
@@ -166,9 +188,11 @@ const Annotations = ({
                 : annotation.x === xScaleAnnotation.invert(props.x) && annotation.y === yScaleAnnotation.invert(props.y)
 
             if (isLabelOnlyDrag) {
+              // Event-line snaps dx; callout persists raw drag offset.
+              const persistedDx = isEventLine ? snapEventLineDx(props.dx) : props.dx
               updatedAnnotations[originalIndex] = {
                 ...updatedAnnotations[originalIndex],
-                dx: props.dx,
+                dx: persistedDx,
                 dy: props.dy,
                 savedDimensions: currentDimensions
               }
@@ -209,107 +233,183 @@ const Annotations = ({
             })
           }}
         >
-          {!isMobile &&
-            (() => {
-              const labelWidth = config.general.showAnnotationDropdown ? 186 : 150
-              // Use live dx during drag (already in current space), otherwise use scaled dx
-              const currentDx = liveDrag?.index === annotationIndex ? liveDrag.dx : scaledDx
-              const { horizontalAnchor, verticalAnchor } = getAnnotationAnchors(annotationX, currentDx, labelWidth)
-              return (
-                <HtmlLabel
-                  className='annotation__desktop-label'
-                  containerStyle={{ width: 'fit-content', maxWidth: `${labelWidth}px` }}
-                  horizontalAnchor={horizontalAnchor}
-                  verticalAnchor={verticalAnchor}
-                  showAnchorLine={false}
-                >
-                  <div
-                    style={{
-                      borderRadius: 5, // Optional: set border radius
-                      backgroundColor: `rgba(255, 255, 255, ${
-                        annotation?.opacity ? Number(annotation?.opacity) / 100 : 1
-                      })`,
-                      padding: '10px',
-                      width: 'auto',
-                      display: config.general.showAnnotationDropdown ? 'inline-flex' : 'flex',
-                      justifyContent: 'start',
-                      flexDirection: 'row',
-                      alignItems: 'center'
-                    }}
-                    // role='presentation'
-                    tabIndex={0}
-                    aria-label={`Annotation text that reads: ${annotation.text}`}
-                  >
-                    {config?.general?.showAnnotationDropdown && (
-                      <>
-                        <p
-                          className='annotation__has-dropdown-number'
-                          style={{ margin: '2px 6px', position: 'relative', left: '-4px' }}
-                        >
-                          {originalIndex + 1}
-                        </p>
-                      </>
-                    )}
-                    <div dangerouslySetInnerHTML={sanitizedData()} />
-                  </div>
-                </HtmlLabel>
-              )
-            })()}
-          {annotation.connectionType === 'line' && (
-            <Connector type='line' pathProps={{ markerStart: `url(#marker-start--${originalIndex})` }} />
-          )}
-          {annotation.connectionType === 'elbow' && (
-            <Connector type='elbow' pathProps={{ markerStart: `url(#marker-start--${originalIndex})` }} />
-          )}
-          {annotation.connectionType === 'curve' && (
-            <LinePath
-              d={`M ${annotationX},${annotationY}
-                      Q ${annotationX + scaledDx / 2}, ${
-                annotationY + scaledDy / 2 + Number(annotation?.bezier) || 0
-              } ${annotationX + scaledDx},${annotationY + scaledDy}`}
-              stroke={APP_FONT_COLOR}
-              fill='none'
-              marker-start={`url(#marker-start--${originalIndex})`}
-            />
-          )}
-          {annotation.marker === 'circle' && (
-            <CircleSubject className='circle-subject' stroke={APP_FONT_COLOR} radius={8} />
-          )}
-          {annotation.marker === 'arrow' && (
-            <MarkerArrow
-              fill={APP_FONT_COLOR}
-              id={`marker-start--${originalIndex}`}
-              x={annotationX}
-              y={annotationY}
-              stroke={APP_FONT_COLOR}
-              markerWidth={12}
-              size={10}
-              strokeWidth={1}
-              orient='auto-start-reverse'
-              markerUnits='userSpaceOnUse'
-            />
-          )}
-          {isMobile && (
+          {isEventLine ? (
             <>
-              <circle
-                fill='white'
-                cx={annotationX + scaledDx}
-                cy={annotationY + scaledDy}
-                r={12}
-                className='annotation__mobile-label annotation__mobile-label-circle'
-                stroke={APP_FONT_COLOR}
+              <line
+                x1={annotationX}
+                x2={annotationX}
+                y1={0}
+                y2={yMax}
+                stroke='#333'
+                strokeWidth={1}
+                className='annotation__event-line'
+                pointerEvents='none'
               />
-              <text
-                height={16}
-                x={annotationX + scaledDx}
-                y={annotationY + scaledDy + 1}
-                fontSize={14}
-                className='annotation__mobile-label'
-                alignmentBaseline='middle'
-                textAnchor='middle'
-              >
-                {originalIndex + 1}
-              </text>
+              {!isMobile &&
+                (() => {
+                  // Use live dx during drag (already in current space), otherwise use scaled dx
+                  const currentDx = liveDrag?.index === annotationIndex ? liveDrag.dx : scaledDx
+                  const onRight = currentDx >= 0
+                  return (
+                    <HtmlLabel
+                      className='annotation__desktop-label'
+                      containerStyle={{ width: 'fit-content', maxWidth: '186px' }}
+                      horizontalAnchor={onRight ? 'start' : 'end'}
+                      verticalAnchor='middle'
+                      showAnchorLine={false}
+                    >
+                      <div
+                        className={`annotation__event-line-label ${
+                          onRight
+                            ? 'cove-annotation-event-line__label--right'
+                            : 'cove-annotation-event-line__label--left'
+                        }`}
+                        style={{
+                          backgroundColor: `rgba(255, 255, 255, ${
+                            annotation?.opacity ? Number(annotation?.opacity) / 100 : 1
+                          })`,
+                          padding: '6px 8px',
+                          color: annotation.colors?.label || APP_FONT_COLOR,
+                          fontSize: tickLabelFontSize
+                        }}
+                        tabIndex={0}
+                        aria-label={`Annotation text that reads: ${annotation.text}`}
+                      >
+                        <div dangerouslySetInnerHTML={sanitizedData()} />
+                      </div>
+                    </HtmlLabel>
+                  )
+                })()}
+              {isMobile && (
+                <>
+                  <circle
+                    fill='white'
+                    cx={annotationX + scaledDx}
+                    cy={annotationY + scaledDy}
+                    r={12}
+                    className='annotation__mobile-label annotation__mobile-label-circle'
+                    stroke={APP_FONT_COLOR}
+                  />
+                  <text
+                    height={16}
+                    x={annotationX + scaledDx}
+                    y={annotationY + scaledDy + 1}
+                    fontSize={14}
+                    className='annotation__mobile-label'
+                    alignmentBaseline='middle'
+                    textAnchor='middle'
+                  >
+                    {originalIndex + 1}
+                  </text>
+                </>
+              )}
+            </>
+          ) : (
+            <>
+              {!isMobile &&
+                (() => {
+                  const labelWidth = config.general.showAnnotationDropdown ? 186 : 150
+                  // Use live dx during drag (already in current space), otherwise use scaled dx
+                  const currentDx = liveDrag?.index === annotationIndex ? liveDrag.dx : scaledDx
+                  const { horizontalAnchor, verticalAnchor } = getAnnotationAnchors(annotationX, currentDx, labelWidth)
+                  return (
+                    <HtmlLabel
+                      className='annotation__desktop-label'
+                      containerStyle={{ width: 'fit-content', maxWidth: `${labelWidth}px` }}
+                      horizontalAnchor={horizontalAnchor}
+                      verticalAnchor={verticalAnchor}
+                      showAnchorLine={false}
+                    >
+                      <div
+                        style={{
+                          borderRadius: 5, // Optional: set border radius
+                          backgroundColor: `rgba(255, 255, 255, ${
+                            annotation?.opacity ? Number(annotation?.opacity) / 100 : 1
+                          })`,
+                          padding: '10px',
+                          width: 'auto',
+                          display: config.general.showAnnotationDropdown ? 'inline-flex' : 'flex',
+                          justifyContent: 'start',
+                          flexDirection: 'row',
+                          alignItems: 'center',
+                          fontSize: tickLabelFontSize
+                        }}
+                        // role='presentation'
+                        tabIndex={0}
+                        aria-label={`Annotation text that reads: ${annotation.text}`}
+                      >
+                        {config?.general?.showAnnotationDropdown && (
+                          <>
+                            <p
+                              className='annotation__has-dropdown-number'
+                              style={{ margin: '2px 6px', position: 'relative', left: '-4px' }}
+                            >
+                              {originalIndex + 1}
+                            </p>
+                          </>
+                        )}
+                        <div dangerouslySetInnerHTML={sanitizedData()} />
+                      </div>
+                    </HtmlLabel>
+                  )
+                })()}
+              {annotation.connectionType === 'line' && (
+                <Connector type='line' pathProps={{ markerStart: `url(#marker-start--${originalIndex})` }} />
+              )}
+              {annotation.connectionType === 'elbow' && (
+                <Connector type='elbow' pathProps={{ markerStart: `url(#marker-start--${originalIndex})` }} />
+              )}
+              {annotation.connectionType === 'curve' && (
+                <LinePath
+                  d={`M ${annotationX},${annotationY}
+                      Q ${annotationX + scaledDx / 2}, ${
+                    annotationY + scaledDy / 2 + Number(annotation?.bezier) || 0
+                  } ${annotationX + scaledDx},${annotationY + scaledDy}`}
+                  stroke={APP_FONT_COLOR}
+                  fill='none'
+                  marker-start={`url(#marker-start--${originalIndex})`}
+                />
+              )}
+              {annotation.marker === 'circle' && (
+                <CircleSubject className='circle-subject' stroke={APP_FONT_COLOR} radius={8} />
+              )}
+              {annotation.marker === 'arrow' && (
+                <MarkerArrow
+                  fill={APP_FONT_COLOR}
+                  id={`marker-start--${originalIndex}`}
+                  x={annotationX}
+                  y={annotationY}
+                  stroke={APP_FONT_COLOR}
+                  markerWidth={12}
+                  size={10}
+                  strokeWidth={1}
+                  orient='auto-start-reverse'
+                  markerUnits='userSpaceOnUse'
+                />
+              )}
+              {isMobile && (
+                <>
+                  <circle
+                    fill='white'
+                    cx={annotationX + scaledDx}
+                    cy={annotationY + scaledDy}
+                    r={12}
+                    className='annotation__mobile-label annotation__mobile-label-circle'
+                    stroke={APP_FONT_COLOR}
+                  />
+                  <text
+                    height={16}
+                    x={annotationX + scaledDx}
+                    y={annotationY + scaledDy + 1}
+                    fontSize={14}
+                    className='annotation__mobile-label'
+                    alignmentBaseline='middle'
+                    textAnchor='middle'
+                  >
+                    {originalIndex + 1}
+                  </text>
+                </>
+              )}
             </>
           )}
         </AnnotationComponent>

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')