@cdc/chart 4.26.7 → 4.26.10

package/src/components/Annotations/components/AnnotationDropdown.styles.css

@@ -3,11 +3,51 @@
     list-style: none;
   }
 
-  .annotation-dropdown__panel {
-    padding: 10px;
+  button.data-table-heading.annotation__dropdown-list {
+    appearance: none;
+    background: transparent;
+    border: var(--cool-gray-10) 1px solid;
+    border-radius: 6px;
+    box-sizing: border-box;
+    color: inherit;
+    cursor: pointer;
+    display: block;
+    font: inherit;
+    position: relative;
+    text-align: left;
+    width: 100%;
+
+    svg {
+      height: 100%;
+      position: absolute;
+      right: 1em;
+      top: 0;
+      width: 15px;
+    }
+
+    &:focus {
+      position: relative;
+      z-index: 2;
+    }
+
+    &[aria-expanded='true'] {
+      border-radius: 6px 6px 0 0;
+    }
   }
 
-  .data-table-heading.annotation__dropdown-list {
-    margin-top: 10px;
+  button.data-table-heading--toggle.annotation__dropdown-list {
+    background-color: #fff;
+    transition: background-color 0.15s ease-in-out;
+
+    &:hover,
+    &:focus-visible {
+      background-color: var(--colors-cyan-10, #eff9fa);
+    }
+  }
+
+  .annotation-dropdown__panel {
+    border-color: var(--cool-gray-10);
+    border-radius: 0 0 6px 6px;
+    padding: 10px;
   }
 }

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

@@ -3,20 +3,18 @@ import ConfigContext from '../../../ConfigContext'
 import './AnnotationDropdown.styles.css'
 import Icon from '@cdc/core/components/ui/Icon'
 import Annotation from '..'
-import { isMobileAnnotationViewport } from '@cdc/core/helpers/viewports'
 
 const AnnotationDropdown = () => {
   const { currentViewport: viewport, config } = useContext(ConfigContext)
   const [expanded, setExpanded] = useState(false)
-  const isMobile = isMobileAnnotationViewport(viewport)
 
-  const limitHeight = {
-    maxHeight: config.table.limitHeight && `${config.table.height}px`,
-    OverflowY: 'scroll'
+  const limitHeight: React.CSSProperties = {
+    maxHeight: config.table.limitHeight ? `${config.table.height}px` : undefined,
+    overflowY: 'auto'
   }
 
   const handleAccordionClassName = () => {
-    const classNames = ['data-table-heading', 'annotation__dropdown-list', 'p-3']
+    const classNames = ['data-table-heading', 'data-table-heading--toggle', 'annotation__dropdown-list', 'p-3']
     if (!expanded) {
       classNames.push('collapsed')
     }
@@ -24,40 +22,20 @@ const AnnotationDropdown = () => {
     return classNames.join(' ')
   }
 
-  const handleSectionClasses = () => {
-    const classes = [`data-table-container`, viewport, `w-100`, 'mt-4']
-
-    // 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')
-    }
-    return classes.join(' ')
-  }
-
   return (
     <>
-      <section className={handleSectionClasses()}>
-        <div
-          role='button'
+      <section className={`data-table-container ${viewport} w-100`}>
+        <button
+          type='button'
           className={handleAccordionClassName()}
+          aria-expanded={expanded}
           onClick={() => {
-            setExpanded(!expanded)
-          }}
-          tabIndex={0}
-          onKeyDown={e => {
-            if (e.key === 'Enter') {
-              setExpanded(!expanded)
-            }
+            setExpanded(currentExpanded => !currentExpanded)
           }}
         >
           <Icon display={expanded ? 'minus' : 'plus'} base />
           {config.general.annotationDropdownText === '' ? 'Annotations' : config?.general?.annotationDropdownText}
-        </div>
+        </button>
         {expanded && (
           <div className='table-container annotation-dropdown__panel' style={limitHeight}>
             <Annotation.List useBootstrapVisibilityClasses={false} />

package/src/components/Annotations/helpers/resolveAnnotationLayout.ts

@@ -0,0 +1,212 @@
+import type { AnnotationLabelPosition, AnnotationLabelSide } from '@cdc/core/types/Annotation'
+
+export const MIN_ANNOTATION_LABEL_WIDTH_EM = 6
+export const MIN_EVENT_LINE_LABEL_WIDTH_EM = 4
+
+export type AnnotationLayout = {
+  side: AnnotationLabelSide
+  horizontalAnchor: 'start' | 'middle' | 'end'
+  verticalAnchor: 'start' | 'middle' | 'end'
+  x: number
+  y: number
+  width: number
+  constrainedWidth?: number
+}
+
+type ResolveAnnotationLayoutArgs = {
+  endpointX: number
+  endpointY: number
+  dx: number
+  dy: number
+  labelWidth: number
+  labelHeight: number
+  plotWidth: number
+  plotHeight: number
+  fontSize: number
+  minWidthEm?: number
+  labelPosition?: AnnotationLabelPosition
+  autoSide?: AnnotationLabelSide
+  clampNormalAxis?: boolean
+}
+
+type ResolvedAnnotationDrag = {
+  dx: number
+  dy: number
+  layout: AnnotationLayout
+}
+
+export type AnnotationLabelRect = {
+  left: number
+  top: number
+  width: number
+  height: number
+}
+
+const anchorsBySide = {
+  left: { horizontalAnchor: 'end', verticalAnchor: 'middle' },
+  right: { horizontalAnchor: 'start', verticalAnchor: 'middle' },
+  above: { horizontalAnchor: 'middle', verticalAnchor: 'end' },
+  below: { horizontalAnchor: 'middle', verticalAnchor: 'start' }
+} as const
+
+export const getAnnotationLabelRect = (
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  side: AnnotationLabelSide
+): AnnotationLabelRect => {
+  switch (side) {
+    case 'left':
+      return { left: x - width, top: y - height / 2, width, height }
+    case 'right':
+      return { left: x, top: y - height / 2, width, height }
+    case 'above':
+      return { left: x - width / 2, top: y - height, width, height }
+    case 'below':
+      return { left: x - width / 2, top: y, width, height }
+  }
+}
+
+export const getFacingAnnotationSide = (
+  subjectX: number,
+  subjectY: number,
+  rect: AnnotationLabelRect
+): AnnotationLabelSide => {
+  const centerX = rect.left + rect.width / 2
+  const centerY = rect.top + rect.height / 2
+  const horizontal = (subjectX - centerX) / Math.max(rect.width / 2, 1)
+  const vertical = (subjectY - centerY) / Math.max(rect.height / 2, 1)
+
+  if (Math.abs(horizontal) >= Math.abs(vertical)) return horizontal < 0 ? 'right' : 'left'
+  return vertical < 0 ? 'below' : 'above'
+}
+
+export const getAnnotationAttachment = (rect: AnnotationLabelRect, side: AnnotationLabelSide) => {
+  switch (side) {
+    case 'left':
+      return { x: rect.left + rect.width, y: rect.top + rect.height / 2 }
+    case 'right':
+      return { x: rect.left, y: rect.top + rect.height / 2 }
+    case 'above':
+      return { x: rect.left + rect.width / 2, y: rect.top + rect.height }
+    case 'below':
+      return { x: rect.left + rect.width / 2, y: rect.top }
+  }
+}
+
+const clampAnnotationLabelRect = (
+  rect: AnnotationLabelRect,
+  plotWidth: number,
+  plotHeight: number
+): AnnotationLabelRect => ({
+  ...rect,
+  left:
+    rect.width >= plotWidth ? (plotWidth - rect.width) / 2 : Math.min(Math.max(rect.left, 0), plotWidth - rect.width),
+  top:
+    rect.height >= plotHeight
+      ? (plotHeight - rect.height) / 2
+      : Math.min(Math.max(rect.top, 0), plotHeight - rect.height)
+})
+
+export const resolveAnnotationRectangleDrag = ({
+  rect,
+  subjectX,
+  subjectY,
+  plotWidth,
+  plotHeight,
+  side
+}: {
+  rect: AnnotationLabelRect
+  subjectX: number
+  subjectY: number
+  plotWidth: number
+  plotHeight: number
+  side: AnnotationLabelSide
+}): ResolvedAnnotationDrag & { rect: AnnotationLabelRect } => {
+  const boundedRect = clampAnnotationLabelRect(rect, plotWidth, plotHeight)
+  const attachment = getAnnotationAttachment(boundedRect, side)
+
+  return {
+    dx: attachment.x - subjectX,
+    dy: attachment.y - subjectY,
+    rect: boundedRect,
+    layout: {
+      side,
+      ...anchorsBySide[side],
+      x: attachment.x,
+      y: attachment.y,
+      width: boundedRect.width,
+      constrainedWidth: boundedRect.width
+    }
+  }
+}
+
+export const getPreferredAnnotationSide = (dx: number, dy: number): AnnotationLabelSide => {
+  if (Math.abs(dx) >= Math.abs(dy)) return dx >= 0 ? 'right' : 'left'
+  return dy >= 0 ? 'below' : 'above'
+}
+
+const slideCoordinate = (coordinate: number, size: number, bound: number) => {
+  if (size >= bound) return bound / 2
+  return Math.min(Math.max(coordinate, size / 2), bound - size / 2)
+}
+
+const evaluateSide = (
+  side: AnnotationLabelSide,
+  {
+    endpointX,
+    endpointY,
+    labelWidth,
+    labelHeight,
+    plotWidth,
+    plotHeight,
+    fontSize,
+    minWidthEm,
+    clampNormalAxis = true
+  }: ResolveAnnotationLayoutArgs
+): AnnotationLayout => {
+  const minWidth = (minWidthEm ?? MIN_ANNOTATION_LABEL_WIDTH_EM) * fontSize
+  const requiredWidth = Math.min(labelWidth, minWidth)
+  const x = !clampNormalAxis
+    ? endpointX
+    : side === 'left'
+    ? Math.max(Math.min(endpointX, plotWidth), Math.min(requiredWidth, plotWidth))
+    : side === 'right'
+    ? Math.min(Math.max(endpointX, 0), Math.max(0, plotWidth - requiredWidth))
+    : endpointX
+  const y = !clampNormalAxis
+    ? endpointY
+    : side === 'above'
+    ? Math.max(Math.min(endpointY, plotHeight), Math.min(labelHeight, plotHeight))
+    : side === 'below'
+    ? Math.min(Math.max(endpointY, 0), Math.max(0, plotHeight - labelHeight))
+    : endpointY
+  const availableWidth = side === 'left' ? x : side === 'right' ? plotWidth - x : plotWidth
+  const width = Math.min(labelWidth, Math.max(minWidth, availableWidth))
+  const boundedX = side === 'above' || side === 'below' ? slideCoordinate(x, width, plotWidth) : x
+  const boundedY = side === 'left' || side === 'right' ? slideCoordinate(y, labelHeight, plotHeight) : y
+  const widthReduction = Math.max(0, labelWidth - width)
+
+  return {
+    side,
+    ...anchorsBySide[side],
+    x: boundedX,
+    y: boundedY,
+    width,
+    constrainedWidth: widthReduction > 0 ? width : undefined
+  }
+}
+
+/**
+ * Resolves a label on its authored side. Automatic placement uses a persisted
+ * side when available and never changes sides to accommodate the viewport.
+ */
+export const resolveAnnotationLayout = (args: ResolveAnnotationLayoutArgs): AnnotationLayout => {
+  const preferredSide =
+    args.labelPosition && args.labelPosition !== 'auto'
+      ? args.labelPosition
+      : args.autoSide ?? getPreferredAnnotationSide(args.dx, args.dy)
+
+  return evaluateSide(preferredSide, args)
+}