@cdc/map 4.25.10 → 4.26.1

package/src/components/DataTable.tsx

@@ -1,413 +0,0 @@
-import React, { useEffect, useState, memo, useContext } from 'react'
-
-import Papa from 'papaparse'
-import ExternalIcon from '../images/external-link.svg' // TODO: Move to Icon component
-import Icon from '@cdc/core/components/ui/Icon'
-
-import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import LegendShape from '@cdc/core/components/LegendShape'
-import MediaControls from '@cdc/core/components/MediaControls'
-import SkipTo from '@cdc/core/components/elements/SkipTo'
-
-import Loading from '@cdc/core/components/Loading'
-import { navigationHandler } from '../helpers'
-import ConfigContext, { MapDispatchContext } from '../context'
-import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
-import { getPatternForRow } from '../helpers/getPatternForRow'
-import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
-
-const DataTable = props => {
-  const {
-    state,
-    tableTitle,
-    indexTitle,
-    mapTitle,
-    rawData,
-    runtimeData,
-    headerColor,
-    expandDataTable,
-    columns,
-    displayDataAsText,
-    applyLegendToRow,
-    displayGeoName,
-    formatLegendLocation,
-    tabbingId,
-    interactionLabel
-  } = props
-
-  const dispatch = useContext(MapDispatchContext)
-  const { currentViewport: viewport, mapId } = useContext(ConfigContext)
-  const [expanded, setExpanded] = useState(expandDataTable)
-  const [sortBy, setSortBy] = useState({ column: 'geo', asc: false })
-  const [accessibilityLabel, setAccessibilityLabel] = useState('')
-  const fileName = `${mapTitle || 'data-table'}.csv`
-
-  // Catch all sorting method used on load by default but also on user click
-  // Having a custom method means we can add in any business logic we want going forward
-  const customSort = (a, b) => {
-    const digitRegex = /\d+/
-
-    const hasNumber = value => digitRegex.test(value)
-
-    // force null and undefined to the bottom
-    a = a === null || a === undefined ? '' : a
-    b = b === null || b === undefined ? '' : b
-
-    // convert any strings that are actually numbers to proper data type
-    const aNum = Number(a)
-
-    if (!Number.isNaN(aNum)) {
-      a = aNum
-    }
-
-    const bNum = Number(b)
-
-    if (!Number.isNaN(bNum)) {
-      b = bNum
-    }
-
-    // remove iso code prefixes
-    if (typeof a === 'string') {
-      a = a.replace('us-', '')
-      a = displayGeoName(a)
-    }
-
-    if (typeof b === 'string') {
-      b = b.replace('us-', '')
-      b = displayGeoName(b)
-    }
-
-    // force any string values to lowercase
-    a = typeof a === 'string' ? a.toLowerCase() : a
-    b = typeof b === 'string' ? b.toLowerCase() : b
-
-    // If the string contains a number, remove the text from the value and only sort by the number. Only uses the first number it finds.
-    if (typeof a === 'string' && hasNumber(a) === true) {
-      a = a.match(digitRegex)[0]
-
-      a = Number(a)
-    }
-
-    if (typeof b === 'string' && hasNumber(b) === true) {
-      b = b.match(digitRegex)[0]
-
-      b = Number(b)
-    }
-
-    // When comparing a number to a string, always send string to bottom
-    if (typeof a === 'number' && typeof b === 'string') {
-      return 1
-    }
-
-    if (typeof b === 'number' && typeof a === 'string') {
-      return -1
-    }
-
-    // Return either 1 or -1 to indicate a sort priority
-    if (a > b) {
-      return 1
-    }
-    if (a < b) {
-      return -1
-    }
-    // returning 0, undefined or any falsey value will use subsequent sorts or
-    // the index as a tiebreaker
-    return 0
-  }
-
-  // Optionally wrap cell with anchor if config defines a navigation url
-  const getCellAnchor = (markup, row) => {
-    if (columns.navigate && row[columns.navigate.name]) {
-      markup = (
-        <span
-          onClick={() => navigationHandler(state.general.navigationTarget, row[columns.navigate.name])}
-          className='table-link'
-          title='Click for more information (Opens in a new window)'
-          role='link'
-          tabIndex='0'
-          onKeyDown={e => {
-            if (e.key === 'Enter') {
-              navigationHandler(state.general.navigationTarget, row[columns.navigate.name])
-            }
-          }}
-        >
-          {markup}
-          <ExternalIcon className='inline-icon' />
-        </span>
-      )
-    }
-
-    return markup
-  }
-
-  const rand = Math.random().toString(16).substr(2, 8)
-  const skipId = `btn__${rand}`
-
-  const mapLookup = {
-    'us-county': 'United States County Map',
-    'single-state': 'State Map',
-    us: 'United States Map',
-    world: 'World Map'
-  }
-
-  const DownloadButton = memo(() => {
-    let csvData
-    if (state.general.type === 'bubble' || !state.table.showFullGeoNameInCSV) {
-      // Just Unparse
-      csvData = Papa.unparse(rawData)
-    } else if (state.general.geoType !== 'us-county' || state.general.type === 'us-geocode') {
-      // Unparse + Add column for full Geo name
-      csvData = Papa.unparse(rawData.map(row => ({ FullGeoName: displayGeoName(row[state.columns.geo.name]), ...row })))
-    } else {
-      // Unparse + Add column for full Geo name
-      csvData = Papa.unparse(
-        rawData.map(row => ({ FullGeoName: formatLegendLocation(row[state.columns.geo.name]), ...row }))
-      )
-    }
-
-    const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' })
-
-    const saveBlob = () => {
-      //@ts-ignore
-      if (typeof window.navigator.msSaveBlob === 'function') {
-        //@ts-ignore
-        navigator.msSaveBlob(blob, fileName)
-      }
-    }
-
-    return (
-      <a
-        download={fileName}
-        type='button'
-        onClick={() => {
-          saveBlob
-          publishAnalyticsEvent({
-            vizType: state.type,
-            vizSubType: getVizSubType(state),
-            eventType: 'data_downloaded',
-            eventAction: 'click',
-            eventLabel: interactionLabel,
-            vizTitle: getVizTitle(state)
-          })
-        }}
-        href={URL.createObjectURL(blob)}
-        aria-label='Download this data in a CSV file format.'
-        className={`${headerColor} no-border`}
-        id={`${skipId}`}
-        data-html2canvas-ignore={true}
-        role='button'
-      >
-        Download Data (CSV)
-      </a>
-    )
-  }, [rawData, state.table])
-
-  const TableMediaControls = ({ belowTable }) => {
-    return (
-      <MediaControls.Section classes={['download-links']}>
-        <MediaControls.Link config={state} interactionLabel={interactionLabel} />
-        {state.table.download && <DownloadButton config={state} />}
-      </MediaControls.Section>
-    )
-  }
-
-  // Change accessibility label depending on expanded status
-  useEffect(() => {
-    const expandedLabel = 'Accessible data table.'
-    const collapsedLabel =
-      'Accessible data table. This table is currently collapsed visually but can still be read using a screen reader.'
-
-    if (expanded === true && accessibilityLabel !== expandedLabel) {
-      setAccessibilityLabel(expandedLabel)
-    }
-
-    if (expanded === false && accessibilityLabel !== collapsedLabel) {
-      setAccessibilityLabel(collapsedLabel)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [expanded])
-
-  if (!state.data) return <Loading />
-
-  const rows = Object.keys(runtimeData)
-    .filter(row => applyLegendToRow(runtimeData[row], state))
-    .sort((a, b) => {
-      const sortVal = customSort(
-        runtimeData[a][state.columns[sortBy.column].name],
-        runtimeData[b][state.columns[sortBy.column].name]
-      )
-      if (!sortBy.asc) return sortVal
-      if (sortVal === 0) return 0
-      if (sortVal < 0) return 1
-      return -1
-    })
-
-  return (
-    <ErrorBoundary component='DataTable'>
-      {!state.table.showDownloadLinkBelow && <TableMediaControls />}
-      <section
-        id={tabbingId.replace('#', '')}
-        className={`data-table-container ${viewport}`}
-        aria-label={accessibilityLabel}
-      >
-        <SkipTo skipId={skipId} skipMessage='Skip Data Table' />
-        <div
-          className={expanded ? 'data-table-heading' : 'collapsed data-table-heading'}
-          onClick={() => {
-            setExpanded(!expanded)
-          }}
-          tabIndex='0'
-          onKeyDown={e => {
-            if (e.key === 'Enter') {
-              setExpanded(!expanded)
-            }
-          }}
-        >
-          <Icon display={expanded ? 'minus' : 'plus'} base />
-          {tableTitle}
-        </div>
-        <div
-          className='table-container'
-          style={{ maxHeight: state.dataTable.limitHeight && `${state.dataTable.height}px`, overflowY: 'scroll' }}
-        >
-          <table
-            height={expanded ? null : 0}
-            role='table'
-            aria-live='assertive'
-            className={expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'}
-            hidden={!expanded}
-            aria-rowcount={state?.data.length ? state.data.length : '-1'}
-          >
-            <caption className='cdcdataviz-sr-only'>
-              {state.dataTable.caption
-                ? state.dataTable.caption
-                : `Datatable showing data for the ${mapLookup[state.general.geoType]} figure.`}
-            </caption>
-            <thead style={{ position: 'sticky', top: 0, zIndex: 999 }}>
-              <tr>
-                {Object.keys(columns)
-                  .filter(column => columns[column].dataTable === true && columns[column].name)
-                  .map(column => {
-                    let text
-                    if (column !== 'geo') {
-                      text = columns[column].label ? columns[column].label : columns[column].name
-                    } else {
-                      text = indexTitle || 'Location'
-                    }
-
-                    return (
-                      <th
-                        key={`col-header-${column}`}
-                        tabIndex={0}
-                        title={text}
-                        role='columnheader'
-                        scope='col'
-                        onClick={() => {
-                          setSortBy({ column, asc: sortBy.column === column ? !sortBy.asc : false })
-                        }}
-                        onKeyDown={e => {
-                          if (e.key === 'Enter') {
-                            setSortBy({ column, asc: sortBy.column === column ? !sortBy.asc : false })
-                          }
-                        }}
-                        className={
-                          sortBy.column === column ? (sortBy.asc ? 'sort sort-asc' : 'sort sort-desc') : 'sort'
-                        }
-                        {...(sortBy.column === column
-                          ? sortBy.asc
-                            ? { 'aria-sort': 'ascending' }
-                            : { 'aria-sort': 'descending' }
-                          : null)}
-                      >
-                        {text}
-                        <span className='cdcdataviz-sr-only'>{`Sort by ${text} in ${
-                          sortBy.column === column ? (!sortBy.asc ? 'descending' : 'ascending') : 'descending'
-                        } order`}</span>
-                      </th>
-                    )
-                  })}
-              </tr>
-            </thead>
-            <tbody>
-              {rows.map(row => {
-                return (
-                  <tr role='row'>
-                    {Object.keys(columns)
-                      .filter(column => columns[column].dataTable === true && columns[column].name)
-                      .map(column => {
-                        let cellValue
-
-                        if (column === 'geo') {
-                          const rowObj = runtimeData[row]
-                          const legendColor = applyLegendToRow(rowObj, state)
-
-                          var labelValue
-                          if (state.general.geoType !== 'us-county' || state.general.type === 'us-geocode') {
-                            labelValue = displayGeoName(row)
-                          } else {
-                            labelValue = formatLegendLocation(row)
-                          }
-
-                          labelValue = getCellAnchor(labelValue, rowObj)
-
-                          // Check for pattern information
-                          const patternInfo = getPatternForRow(rowObj, state)
-
-                          const legendShape = patternInfo ? (
-                            <LegendShape
-                              fill={legendColor[0]}
-                              patternInfo={{
-                                pattern: patternInfo.pattern,
-                                patternId: `${mapId}--${String(patternInfo.dataKey).replace(' ', '-')}--${
-                                  patternInfo.patternIndex
-                                }--table`,
-                                size: patternInfo.size,
-                                color: patternInfo.color
-                              }}
-                            />
-                          ) : (
-                            <LegendShape fill={legendColor[0]} />
-                          )
-
-                          cellValue = (
-                            <>
-                              {legendShape}
-                              {labelValue}
-                            </>
-                          )
-                        } else {
-                          cellValue = displayDataAsText(runtimeData[row][state.columns[column].name], column, state)
-                        }
-
-                        return (
-                          <td
-                            tabIndex={0}
-                            role='gridcell'
-                            onClick={() =>
-                              state.general.type === 'bubble' &&
-                              state.general.allowMapZoom &&
-                              state.general.geoType === 'world'
-                                ? dispatch({ type: 'SET_FILTERED_COUNTRY_CODE', payload: row })
-                                : true
-                            }
-                          >
-                            {cellValue}
-                          </td>
-                        )
-                      })}
-                  </tr>
-                )
-              })}
-            </tbody>
-          </table>
-        </div>
-      </section>
-      {state.table.showDownloadLinkBelow && <TableMediaControls belowTable={true} />}
-      <div id={skipId} className='cdcdataviz-sr-only'>
-        Skipped data table.
-      </div>
-    </ErrorBoundary>
-  )
-}
-
-export default DataTable

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

@@ -1,59 +0,0 @@
-import { memo, useState, useEffect } from 'react'
-import { useDebounce } from 'use-debounce'
-
-// todo: look into combining these with core
-const CheckBox = memo(({ label, value, fieldName, section = null, subsection = null, tooltip, updateField, ...attributes }) => (
-  <label className='checkbox column-heading'>
-    <input
-      type='checkbox'
-      name={fieldName}
-      checked={value}
-      onChange={e => {
-        updateField(section, subsection, fieldName, !value)
-      }}
-      {...attributes}
-    />
-    <span className='edit-label'>
-      {label}
-      {tooltip}
-    </span>
-  </label>
-))
-
-const TextField = ({ label, section = null, subsection = null, fieldName, updateField, value: stateValue, type = 'input', tooltip, ...attributes }) => {
-  const [value, setValue] = useState(stateValue)
-
-  const [debouncedValue] = useDebounce(value, 500)
-
-  useEffect(() => {
-    if ('string' === typeof debouncedValue && stateValue !== debouncedValue) {
-      updateField(section, subsection, fieldName, debouncedValue)
-    }
-  }, [debouncedValue]) // eslint-disable-line
-
-  let name = subsection ? `${section}-${subsection}-${fieldName}` : `${section}-${subsection}-${fieldName}`
-
-  const onChange = e => setValue(e.target.value)
-
-  let formElement = <input type='text' name={name} onChange={onChange} {...attributes} value={value} />
-
-  if ('textarea' === type) {
-    formElement = <textarea name={name} onChange={onChange} {...attributes} value={value}></textarea>
-  }
-
-  if ('number' === type) {
-    formElement = <input type='number' name={name} onChange={onChange} {...attributes} value={value} />
-  }
-
-  return (
-    <label>
-      <span className='edit-label column-heading'>
-        {label}
-        {tooltip}
-      </span>
-      {formElement}
-    </label>
-  )
-}
-
-export { CheckBox, TextField }

package/src/components/MapControls.tsx

@@ -1,44 +0,0 @@
-import React from 'react'
-import MediaControls from '@cdc/core/components/MediaControls'
-import { MapConfig } from '../types/MapConfig'
-
-interface MapControlsProps {
-  config: MapConfig
-  imageId: string
-  interactionLabel: string
-}
-
-const MapControls: React.FC<MapControlsProps> = ({ config, imageId, interactionLabel }) => {
-  const { showDownloadImgButton, showDownloadPdfButton } = config.general
-
-  if (!showDownloadImgButton && !showDownloadPdfButton) {
-    return null
-  }
-
-  return (
-    <MediaControls.Section classes={['download-buttons']}>
-      {showDownloadImgButton && (
-        <MediaControls.Button
-          text='Download Image'
-          title='Download Chart as Image'
-          type='image'
-          state={config}
-          elementToCapture={imageId}
-          interactionLabel={interactionLabel}
-        />
-      )}
-      {showDownloadPdfButton && (
-        <MediaControls.Button
-          text='Download PDF'
-          title='Download Chart as PDF'
-          type='pdf'
-          state={config}
-          interactionLabel={interactionLabel}
-          elementToCapture={imageId}
-        />
-      )}
-    </MediaControls.Section>
-  )
-}
-
-export default MapControls

package/src/helpers/getUniqueValues.ts

@@ -1,19 +0,0 @@
-/**
- * Get unique values from a column in a dataset
- * @returns {Array} - The unique values
- */
-export const getUniqueValues = (data: Array<Record<string, any>>, columnName: string) => {
-  let result = {}
-
-  for (let i = 0; i < data.length; i++) {
-    let val = data[i][columnName]
-
-    if (undefined === val) continue
-
-    if (undefined === result[val]) {
-      result[val] = true
-    }
-  }
-
-  return Object.keys(result)
-}

package/src/helpers/hashObj.ts

@@ -1,25 +0,0 @@
-/**
- * Hashes an object
- * @param {Object} row - The object to hash
- * @returns {number} - The hash of the object
- */
-export const hashObj = row => {
-  try {
-    if (!row || row === undefined) return null
-
-    let str = JSON.stringify(row)
-    let hash = 0
-
-    if (str.length === 0) return hash
-
-    for (let i = 0; i < str.length; i++) {
-      let char = str.charCodeAt(i)
-      hash = (hash << 5) - hash + char
-      hash = hash & hash
-    }
-
-    return hash
-  } catch (e) {
-    console.error({ state: 'COVE: ' + e.message }) // eslint-disable-line
-  }
-}

package/src/hooks/useActiveElement.ts

@@ -1,19 +0,0 @@
-import { useState, useEffect } from 'react'
-// Use for accessibility testing
-const useActiveElement = () => {
-  const [active, setActive] = useState(document.activeElement)
-
-  const handleFocusIn = e => {
-    setActive(document.activeElement)
-  }
-
-  useEffect(() => {
-    document.addEventListener('focusin', handleFocusIn)
-    return () => {
-      document.removeEventListener('focusin', handleFocusIn)
-    }
-  }, [])
-
-  return active
-}
-export default useActiveElement

package/src/hooks/useLegendSeparators.ts

@@ -1,26 +0,0 @@
-import { clamp } from 'lodash'
-
-// TODO: generalize this to be used in legends other than linear block gradient
-
-const LEGEND_SEPARATOR_SIZE = 0.02
-const LEGEND_SEPARATOR_SIZE_MAX = 20
-const LEGEND_SEPARATOR_SIZE_MIN = 8
-
-const useLegendSeparators = (separators, legendWidth, allowsLegendSeparators) => {
-  const legendSeparators = allowsLegendSeparators
-    ? separators?.replace(' ', '').split(',').map(Number).filter(Boolean) || []
-    : []
-  const separatorSize = clamp(legendWidth * LEGEND_SEPARATOR_SIZE, LEGEND_SEPARATOR_SIZE_MIN, LEGEND_SEPARATOR_SIZE_MAX)
-  const legendSeparatorsToSubtract = legendSeparators.length * separatorSize
-  const getTickSeparatorsAdjustment = (index: number) =>
-    legendSeparators.reduce((acc, separators) => (index >= separators ? acc + separatorSize : acc), 0)
-
-  return {
-    legendSeparators,
-    separatorSize,
-    legendSeparatorsToSubtract,
-    getTickSeparatorsAdjustment
-  }
-}
-
-export default useLegendSeparators

package/src/scss/mixins.scss

@@ -1,47 +0,0 @@
-@mixin breakpoint($class) {
-  @if $class == xs {
-    @media (max-width: 767px) {
-      @content;
-    }
-  } @else if $class == sm {
-    @media (min-width: 768px) {
-      @content;
-    }
-  } @else if $class == md {
-    @media (min-width: 960px) {
-      @content;
-    }
-  } @else if $class == lg {
-    @media (min-width: 1300px) {
-      @content;
-    }
-  } @else {
-    @warn "Breakpoint mixin supports: xs, sm, md, lg";
-  }
-}
-
-@mixin breakpointClass($class) {
-  @if $class == xs {
-    &.xs,
-    &.xxs {
-      @content;
-    }
-  } @else if $class == sm {
-    &.sm,
-    &.md,
-    &.lg {
-      @content;
-    }
-  } @else if $class == md {
-    &.md,
-    &.lg {
-      @content;
-    }
-  } @else if $class == lg {
-    &.lg {
-      @content;
-    }
-  } @else {
-    @warn "Breakpoint Class mixin supports: xs, sm, md, lg";
-  }
-}

package/src/types/Annotations.ts

@@ -1,24 +0,0 @@
-type Annotation = {
-  /** The x-coordinate of the annotation */
-  x: number
-  /** The y-coordinate of the annotation */
-  y: number
-  /** The x-offset for the annotation's text */
-  dx: number
-  /** The y-offset for the annotation's text */
-  dy: number
-  /** The opacity level of the annotation */
-  opacity: number
-  /** The text content of the annotation */
-  text: string
-  /** The type of connection for the annotation */
-  connectionType: string
-  edit: {
-    /** Indicates if the label can be edited */
-    label: boolean
-    /** Indicates if the subject can be edited */
-    subject: boolean
-  }
-  /** The type of marker used for the annotation */
-  marker: 'arrow' | 'circle'
-}