@cdc/map 4.24.5 → 4.24.7

package/src/components/Annotation/Annotation.Draggable.tsx

@@ -0,0 +1,152 @@
+import { useContext, useState, useEffect, useRef } from 'react'
+
+// helpers
+import { applyBandScaleOffset, handleConnectionHorizontalType, handleConnectionVerticalType, createPoints } from '@cdc/chart/src/components/Annotations/components/helpers'
+
+// visx
+import { HtmlLabel, CircleSubject, LineSubject, EditableAnnotation, Connector, Annotation as VisxAnnotation } from '@visx/annotation'
+import { Drag, raise } from '@visx/drag'
+import { MarkerArrow } from '@visx/marker'
+import { LinePath } from '@visx/shape'
+import * as allCurves from '@visx/curve'
+import { Annotation } from '@cdc/core/types/Annotation'
+
+// styles
+import './Annotation.Draggable.styles.css'
+import ConfigContext from '../../context'
+import { MapContext } from '../../types/MapContext'
+
+const Annotations = ({ xScale, yScale, xMax, svgRef, onDragStateChange }) => {
+  const [draggingItems, setDraggingItems] = useState([])
+  const { state: config, dimensions, setState: updateConfig, isEditor, isDraggingAnnotation } = useContext<MapContext>(ConfigContext)
+  const [width, height] = dimensions
+  const { annotations } = config
+  // const { colorScale } = useColorScale()
+  const prevDimensions = useRef(dimensions)
+  const AnnotationComponent = isEditor ? EditableAnnotation : VisxAnnotation
+
+  const handleMobileXPosition = annotation => {
+    if (annotation.snapToNearestPoint) {
+      return Number(annotation.dx) + xScale(annotation.xKey) + (config.xAxis.type !== 'date-time' ? xScale.bandwidth() / 2 : 0) + Number(config.yAxis.size)
+    }
+    return Number(annotation.x) + Number(annotation.dx)
+  }
+
+  const handleMobileYPosition = annotation => {
+    if (annotation.snapToNearestPoint) {
+      return yScale(annotation.yKey) + Number(annotation.dy)
+    }
+    return Number(annotation.dy) + Number(annotation.y)
+  }
+
+  const handleTextX = annotation => {
+    if (annotation.snapToNearestPoint) {
+      return Number(annotation.dx) + Number(xScale(annotation.xKey)) + (config.xAxis.type !== 'date-time' ? xScale.bandwidth() / 2 : 0) + Number(config.yAxis.size) - 16 / 3
+    }
+    return Number(annotation.dx) + Number(annotation.x) - 16 / 3
+  }
+
+  const handleTextY = annotation => {
+    if (annotation.snapToNearestPoint) {
+      return yScale(annotation.yKey) + Number(annotation.dy) + 5
+    }
+    return Number(annotation.y) + Number(annotation.dy) + 16 / 3
+  }
+
+  return (
+    annotations &&
+    annotations.map((annotation, index) => {
+      return (
+        <>
+          <Drag
+            key={`annotation--${index}`}
+            width={width}
+            height={height}
+            x={annotation.x} // subject x
+            y={annotation.y} // subject y
+            onDragStart={() => {
+              setDraggingItems(raise(annotations, index))
+            }}
+          >
+            {({ dragStart, dragEnd, dragMove, isDragging, x, y, dx, dy }) => {
+              return (
+                <>
+                  <AnnotationComponent
+                    dx={annotation.dx} // label position
+                    dy={annotation.dy} // label postion
+                    x={annotation.x}
+                    y={annotation.y}
+                    canEditLabel={annotation.edit.label || false}
+                    canEditSubject={annotation.edit.subject || false}
+                    labelDragHandleProps={{ r: 15, stroke: isDraggingAnnotation ? 'red' : 'var(--primary)' }}
+                    subjectDragHandleProps={{ r: 15, stroke: isDraggingAnnotation ? 'red' : 'var(--primary)' }}
+                    onDragEnd={props => {
+                      onDragStateChange(false)
+                      const updatedAnnotations = annotations.map((annotation, idx) => {
+                        if (idx === index) {
+                          const nearestDatum = annotation
+
+                          return {
+                            ...annotation,
+                            x: props.x,
+                            y: props.y,
+                            dx: props.dx,
+                            dy: props.dy
+                          }
+                        }
+                        return annotation
+                      })
+
+                      updateConfig({
+                        ...config,
+                        annotations: updatedAnnotations
+                      })
+                    }}
+                    onMouseMove={dragMove}
+                    onMouseUp={dragEnd}
+                    onMouseDown={dragStart}
+                    onTouchStart={dragStart}
+                    onTouchMove={dragMove}
+                    onTouchEnd={dragEnd}
+                    anchorPosition={'auto'}
+                    onDragStart={() => {
+                      onDragStateChange(true)
+                    }}
+                  >
+                    <HtmlLabel className='' showAnchorLine={false}>
+                      <div
+                        style={{
+                          padding: '10px',
+                          borderRadius: 5, // Optional: set border radius
+                          backgroundColor: `rgba(255, 255, 255, ${annotation?.opacity ? Number(annotation?.opacity) / 100 : 1})`
+                        }}
+                        role='presentation'
+                        // ! IMPORTANT: Workaround for 508
+                        // - HTML needs to be set from the editor and we need a wrapper with the tabIndex
+                        // - TabIndex is only supposed to be used on interactive elements. This is a workaround.
+                        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                        tabIndex={0}
+                        aria-label={`Annotation text that reads: ${annotation.text}`}
+                        dangerouslySetInnerHTML={{ __html: annotation.text }}
+                      />
+                    </HtmlLabel>
+
+                    {annotation.connectionType === 'line' && <Connector type='line' pathProps={{ markerStart: 'url(#marker-start)' }} />}
+
+                    {annotation.connectionType === 'elbow' && <Connector type='elbow' pathProps={{ markerStart: 'url(#marker-start)' }} />}
+
+                    {/* MARKERS */}
+                    {annotation.marker === 'circle' && <CircleSubject className='circle-subject' stroke={'black'} radius={8} />}
+                    {annotation.marker === 'arrow' && <MarkerArrow fill='black' id='marker-start' x={annotation.x} y={annotation.dy} stroke='#333' markerWidth={10} size={10} strokeWidth={1} orient='auto-start-reverse' />}
+                  </AnnotationComponent>
+                </>
+              )
+            }}
+          </Drag>
+        </>
+      )
+    })
+  )
+}
+
+export default Annotations

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

@@ -0,0 +1,14 @@
+.cdc-open-viz-module {
+  .annotation__dropdown-list {
+    border: 1px solid red;
+    list-style: none;
+  }
+
+  .annotation-dropdown__panel {
+    padding: 10px;
+  }
+
+  .data-table-heading.annotation__dropdown-list {
+    margin-top: 10px;
+  }
+}

package/src/components/Annotation/AnnotationDropdown.tsx

@@ -0,0 +1,69 @@
+import React, { useContext, useState } from 'react'
+import ConfigContext from '../../context'
+import './AnnotationDropdown.styles.css'
+import Icon from '@cdc/core/components/ui/Icon'
+import { fontSizes } from '@cdc/core/helpers/cove/fontSettings'
+import AnnotationList from './AnnotationList'
+
+const AnnotationDropdown = () => {
+  const { currentViewport: viewport, state: config } = useContext(ConfigContext)
+  const [expanded, setExpanded] = useState(false)
+
+  const titleFontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? '13px' : `${fontSizes[config?.fontSize]}px`
+
+  const annotations = config?.annotations || []
+
+  const limitHeight = {
+    maxHeight: config.table.limitHeight && `${config.table.height}px`,
+    OverflowY: 'scroll'
+  }
+
+  const handleAccordionClassName = () => {
+    const classNames = ['data-table-heading', 'annotation__dropdown-list']
+    if (!expanded) {
+      classNames.push('collapsed')
+    }
+
+    return classNames.join(' ')
+  }
+
+  const handleSectionClasses = () => {
+    const classes = [`data-table-container`, viewport, `d-block`, `d-lg-none`]
+
+    if (config.general.showAnnotationDropdown) {
+      classes.push('d-lg-block')
+    }
+    return classes.join(' ')
+  }
+
+  return (
+    <>
+      <section className={handleSectionClasses()}>
+        <div
+          style={{ fontSize: titleFontSize }}
+          role='button'
+          className={handleAccordionClassName()}
+          onClick={() => {
+            setExpanded(!expanded)
+          }}
+          tabIndex={0}
+          onKeyDown={e => {
+            if (e.keyCode === 13) {
+              setExpanded(!expanded)
+            }
+          }}
+        >
+          <Icon display={expanded ? 'minus' : 'plus'} base />
+          {config.general.annotationDropdownText === '' ? 'Annotations' : config?.general?.annotationDropdownText}
+        </div>
+        {expanded && (
+          <div className='table-container annotation-dropdown__panel' style={limitHeight}>
+            <AnnotationList useBootstrapVisibilityClasses={false} />
+          </div>
+        )}
+      </section>
+    </>
+  )
+}
+
+export default AnnotationDropdown

package/src/components/Annotation/AnnotationList.styles.css

@@ -0,0 +1,45 @@
+.cdc-open-viz-module {
+  .annotation__title-circle {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    padding: 8px;
+    width: 16px;
+    height: 16px;
+    margin-right: 5px;
+    line-height: 1.5rem;
+
+    border: 2px solid #666;
+    text-align: center;
+    font-size: 14px;
+  }
+
+  .annotation__title-wrapper {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+  }
+
+  .annotation__title-wrapper .annotation__title-text {
+    margin-left: 5px;
+    font-size: 16px;
+  }
+
+  .annotation__subtext {
+    font-size: 12px;
+  }
+
+  .annotation-list {
+    list-style: none;
+  }
+
+  .annotation-list li {
+    margin-top: 5px;
+  }
+
+  .cove-component__content {
+    container-type: inline-size;
+    container-name: content;
+  }
+}

package/src/components/Annotation/AnnotationList.tsx

@@ -0,0 +1,42 @@
+import React, { useContext } from 'react'
+import ConfigContext from './../../context'
+import './AnnotationList.styles.css'
+import DOMPurify from 'dompurify'
+
+type AnnotationListProps = {
+  useBootstrapVisibilityClasses?: boolean
+}
+
+const AnnotationList: React.FC<AnnotationListProps> = ({ useBootstrapVisibilityClasses = true }) => {
+  const { state: config } = useContext(ConfigContext)
+  const annotations = config.annotations || []
+
+  const ulClasses = () => {
+    const classes = ['annotation-list']
+    if (useBootstrapVisibilityClasses) {
+      classes.push('d-block', 'd-md-none')
+    }
+    return classes.join(' ')
+  }
+
+  const annotationListItems = annotations.map((annotation, annotationIndex) => {
+    const text = annotation.text || ''
+
+    // sanitize the text for setting dangerouslySetInnerHTML
+    const sanitizedData = () => ({
+      __html: DOMPurify.sanitize(text)
+    })
+    return (
+      <li key={`annotation-li-item__annotationIndex`}>
+        <div className='annotation__title-wrapper'>
+          <div className='annotation__title-circle'>{annotationIndex + 1}</div>
+          <p className='annotation__subtext' dangerouslySetInnerHTML={sanitizedData()} />
+        </div>
+      </li>
+    )
+  })
+
+  return <ul className={ulClasses()}>{annotationListItems}</ul>
+}
+
+export default AnnotationList

package/src/components/Annotation/index.tsx

@@ -0,0 +1,11 @@
+import Draggable from './Annotation.Draggable'
+import AnnotationDropdown from './AnnotationDropdown'
+import AnnotationList from './AnnotationList'
+
+const Annotation = {
+  Draggable,
+  Dropdown: AnnotationDropdown,
+  List: AnnotationList
+}
+
+export default Annotation

package/src/components/EditorPanel/components/EditorPanel.tsx

@@ -6,7 +6,7 @@ import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd'
 import { useDebounce } from 'use-debounce'
 // import ReactTags from 'react-tag-autocomplete'
 import { Tooltip as ReactTooltip } from 'react-tooltip'
-import Panels from './Panels.tsx'
+import Panels from './Panels'
 import Layout from '@cdc/core/components/Layout'
 
 // Data
@@ -3055,8 +3055,9 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
             </AccordionItemPanel>
           </AccordionItem>
           {state.general.geoType === 'us' && <Panels.PatternSettings name='Pattern Settings' />}
+          {state.general.geoType !== 'us-county' && <Panels.Annotate name='Text Annotations' />}
         </Accordion>
-        <AdvancedEditor loadConfig={loadConfig} state={state} convertStateToConfig={convertStateToConfig} />
+        <AdvancedEditor loadConfig={loadConfig} config={state} convertStateToConfig={convertStateToConfig} />
       </Layout.Sidebar>
     </ErrorBoundary>
   )