@cdc/chart 4.24.5 → 4.24.9

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

@@ -0,0 +1,72 @@
+import React, { useContext, useState } from 'react'
+import ConfigContext from '../../../ConfigContext'
+import './AnnotationDropdown.styles.css'
+import Icon from '@cdc/core/components/ui/Icon'
+import Annotation from '..'
+import { fontSizes } from '@cdc/core/helpers/cove/fontSettings'
+
+const AnnotationDropdown = () => {
+  const { currentViewport: viewport, config } = useContext(ConfigContext)
+  const [expanded, setExpanded] = useState(false)
+
+  const titleFontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? '13px' : `${fontSizes[config?.fontSize]}px`
+
+  const {
+    config: { annotations }
+  } = useContext(ConfigContext)
+
+  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')
+      classes.splice(classes.indexOf('d-lg-none'), 1)
+    }
+    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}>
+            <Annotation.List useBootstrapVisibilityClasses={false} />
+          </div>
+        )}
+      </section>
+    </>
+  )
+}
+
+export default AnnotationDropdown

package/src/components/Annotations/components/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/Annotations/components/AnnotationList.tsx

@@ -0,0 +1,42 @@
+import React, { useContext } from 'react'
+import ConfigContext from '../../../ConfigContext'
+import './AnnotationList.styles.css'
+import DOMPurify from 'dompurify'
+
+type AnnotationListProps = {
+  useBootstrapVisibilityClasses?: boolean
+}
+
+const AnnotationList: React.FC<AnnotationListProps> = ({ useBootstrapVisibilityClasses = true }) => {
+  const { 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/Annotations/components/findNearestDatum.ts

@@ -0,0 +1,138 @@
+import { timeParse } from 'd3-time-format'
+
+const getXValueFromCoordinate = (x, isClick = false) => {
+  if (visualizationType === 'Pie') return
+  if (orientation === 'horizontal') return
+
+  // Check the type of x equal to point or if the type of xAxis is equal to continuous or date
+  if (config.xAxis.type === 'categorical' || (visualizationType === 'Combo' && orientation !== 'horizontal' && visualizationType !== 'Forest Plot')) {
+    let range = xScale.range()[1] - xScale.range()[0]
+    let eachBand = range / (xScale.domain().length + 1)
+
+    let numerator = x
+    const index = Math.floor((Number(numerator) - eachBand / 2) / eachBand)
+    return xScale.domain()[index] // fixes off by 1 error
+  }
+
+  if (config.xAxis.type === 'date') {
+    const xValue = x // Assuming x is the coordinate on the chart
+    const xTimestamp = convertXValueToTimestamp(x, 0, xMax, xScale.domain())
+
+    // Calculate the closest date to the x coordinate
+    let closestDate = null
+    let minDistance = Number.MAX_VALUE
+
+    xScale.domain().forEach(timestamp => {
+      const distance = Math.abs(xTimestamp - timestamp)
+      if (distance < minDistance) {
+        minDistance = distance
+        closestDate = timestamp
+      }
+    })
+
+    return closestDate
+  }
+
+  return x
+}
+
+const findNearestDatum = ({ data, xScale, yScale, config, xMax, annotationSeriesKey }, xPosition) => {
+  const { xAxis, visualizationType, orientation } = config
+
+  const convertXValueToTimestamp = (xValue, minX, maxX, domain, xScale) => {
+    let ticks = []
+    if (config.xAxis.type === 'date-time') {
+      minX = new Date(minX)
+      maxX = new Date(maxX)
+      domain = domain.map(d => new Date(d))
+      ticks = xScale.ticks().map(d => new Date(d))
+    }
+
+    // Calculate the percentage position of xValue between minX and maxX
+    const percentage = (xValue - minX) / (maxX - minX)
+
+    // Calculate the index in the domain array corresponding to the percentage position
+    const index = Math.round(percentage * (domain.length - 1))
+
+    if (config.xAxis.type === 'date-time') {
+      return ticks[index]
+    }
+
+    // Return the timestamp from the domain array at the calculated index
+    return domain[index]
+  }
+
+  const getXValueFromCoordinate = (x, isClick = false) => {
+    if (visualizationType === 'Pie') return
+    if (orientation === 'horizontal') return
+
+    if (config.xAxis.type === 'date-time') {
+      // Calculate the percentage position of xValue between minX and maxX
+      const invertedValue = new Date(xScale.invert(x))
+      const ticks = config.data.map(d => new Date(d[config.xAxis.dataKey]).getTime())
+      let minDistance = Infinity
+      let closestDate = null
+
+      ticks.forEach(timestamp => {
+        const distance = Math.abs(invertedValue.getTime() - timestamp)
+        if (distance < minDistance) {
+          minDistance = distance
+          closestDate = timestamp
+        }
+      })
+
+      return new Date(closestDate).getTime()
+    }
+
+    // Check the type of x equal to point or if the type of xAxis is equal to continuous or date
+    if (config.xAxis.type === 'categorical' || (visualizationType === 'Combo' && orientation !== 'horizontal' && visualizationType !== 'Forest Plot')) {
+      const range = xScale.range()[1] - xScale.range()[0]
+      const eachBand = range / (xScale.domain().length + 1)
+
+      let numerator = x
+      const index = Math.floor((Number(numerator) - eachBand / 2) / eachBand)
+      return xScale.domain()[index] // fixes off by 1 error
+    }
+
+    if (config.xAxis.type === 'date') {
+      const xValue = x // Assuming x is the coordinate on the chart
+      const xTimestamp = convertXValueToTimestamp(x, 0, xMax, xScale.domain(), xScale)
+
+      // Calculate the closest date to the x coordinate
+      let closestDate = null
+      let minDistance = Number.MAX_VALUE
+
+      xScale.domain().forEach(timestamp => {
+        const distance = Math.abs(xTimestamp - timestamp)
+        if (distance < minDistance) {
+          minDistance = distance
+          closestDate = timestamp
+        }
+      })
+
+      return closestDate
+    }
+
+    return x
+  }
+
+  const xValue = getXValueFromCoordinate(xPosition - Number(config.yAxis.size || 0))
+
+  let closestSeries = []
+
+  if (!xValue) return { x: 0, y: 0 }
+
+  if (xAxis.type === 'categorical') {
+    closestSeries = config.data.filter(d => d[config.xAxis.dataKey] === xValue)
+  }
+
+  if (xAxis.type === 'date' || xAxis.type === 'date-time') {
+    closestSeries = config.data.filter(d => new Date(d[config.xAxis.dataKey]).getTime() === xValue)
+  }
+
+  const y = closestSeries[0][annotationSeriesKey] // Map each key to its corresponding value in data
+  const x = xValue
+  return { x, y }
+}
+
+export { findNearestDatum, getXValueFromCoordinate }

package/src/components/Annotations/components/helpers/index.tsx

@@ -0,0 +1,46 @@
+const applyBandScaleOffset = (num: number, config, xScale) => num + Number(config.yAxis.size) + xScale.bandwidth() / 2
+const handleConnectionHorizontalType = (annotation, xScale, config) => {
+  const { connectionLocation } = annotation
+  if (connectionLocation === 'right') return 'end'
+  if (connectionLocation === 'left') return 'start'
+  if (connectionLocation === 'bottom' || connectionLocation === 'top') return 'middle'
+  return xScale(annotation.xKey) + annotation.dx < config.yAxis.size ? 'middle' : null
+}
+
+const handleConnectionVerticalType = (annotation, xScale, config) => {
+  const { connectionLocation } = annotation
+  if (connectionLocation === 'top') return 'start'
+  if (connectionLocation === 'bottom') return 'end'
+  if (connectionLocation === 'right' || connectionLocation === 'left') return 'middle'
+  return xScale(annotation.xKey) + annotation.dx < config.yAxis.size ? 'end' : null
+}
+
+const handleMobileXPosition = (annotation, xScale, config) => {
+  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, yScale, config) => {
+  if (annotation.snapToNearestPoint) {
+    return yScale(annotation.yKey) + Number(annotation.dy)
+  }
+  return Number(annotation.dy) + Number(annotation.y)
+}
+
+const handleTextX = (annotation, xScale, config) => {
+  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, yScale, config) => {
+  if (annotation.snapToNearestPoint) {
+    return yScale(annotation.yKey) + Number(annotation.dy) + 5
+  }
+  return Number(annotation.y) + Number(annotation.dy) + 16 / 3
+}
+
+export { applyBandScaleOffset, handleConnectionHorizontalType, handleConnectionVerticalType, handleMobileXPosition, handleMobileYPosition, handleTextX, handleTextY }

package/src/components/Annotations/index.tsx

@@ -0,0 +1,13 @@
+import AnnotationDraggable from './components/AnnotationDraggable'
+import AnnotationList from './components/AnnotationList'
+import AnnotationDropdown from './components/AnnotationDropdown'
+
+const Annotation = {
+  Draggable: AnnotationDraggable,
+  // Mobile auto display
+  List: AnnotationList,
+  // Desktop Accessible Option
+  Dropdown: AnnotationDropdown
+}
+
+export default Annotation

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

@@ -14,7 +14,7 @@ import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
 const AreaChartStacked = ({ xScale, yScale, yMax, xMax, handleTooltipMouseOver, handleTooltipMouseOff, isDebug }) => {
   // import data from context
   let { transformedData, config, seriesHighlight, colorScale, rawData } = useContext(ConfigContext)
-  const data = config.brush.active && config.brush.data?.length ? config.brush.data : transformedData
+  const data = config.brush?.active && config.brush.data?.length ? config.brush.data : transformedData
   // Draw transparent bars over the chart to get tooltip data
   // Turn DEBUG on for additional context.
   if (!data) return

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

@@ -15,7 +15,7 @@ const AreaChart = props => {
   const { xScale, yScale, yMax, xMax, handleTooltipMouseOver, handleTooltipMouseOff, isDebug, children } = props
   // import data from context
   let { transformedData, config, handleLineType, parseDate, formatDate, formatNumber, seriesHighlight, colorScale, rawData, brushConfig } = useContext(ConfigContext)
-  const data = config.brush.active && brushConfig.data?.length ? brushConfig.data : transformedData
+  const data = config.brush?.active && brushConfig.data?.length ? brushConfig.data : transformedData
 
   if (!data) return
 

package/src/components/Axis/Categorical.Axis.tsx

@@ -0,0 +1,145 @@
+import React, { useContext } from 'react'
+import { BarStack, Line } from '@visx/shape'
+import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale'
+import { Group } from '@visx/group'
+import { Text } from '@visx/text'
+import ConfigContext from '../../ConfigContext'
+import chroma from 'chroma-js'
+import createBarElement from '@cdc/core/components/createBarElement'
+import { useBarChart } from '../../hooks/useBarChart'
+
+const CategoricalYAxis = ({ yMax, leftSize, max, xMax }) => {
+  const { config, getTextWidth } = useContext(ConfigContext)
+  const { fontSize } = useBarChart()
+
+  const { orientation } = config
+
+  const getValidColor = (color, defaultColor = '#f1f1f1') => {
+    try {
+      return chroma(color).hex() // Returns the color if valid
+    } catch (e) {
+      return defaultColor
+    }
+  }
+
+  const categories = config.yAxis?.categories
+
+  const createDataShape = categories => {
+    const categoryObj = [...categories].reduce((acc, item) => {
+      acc[item.label] = item.height
+      return acc
+    }, {})
+
+    return categoryObj
+  }
+  const updateCategory = categoryObj => {
+    // Get all the heights in the object
+    const heights = Object.keys(categoryObj)
+
+    // Get the last label
+    const lastheight = heights[heights.length - 1]
+
+    // Check if the last label's value is empty
+    if (categoryObj[lastheight] === '') {
+      // Calculate the sum of the numeric values of all other heights
+      const sumOfValues = heights.slice(0, -1).reduce((sum, label) => {
+        const value = parseInt(categoryObj[label], 10)
+        return sum + (isNaN(value) ? 0 : value)
+      }, 0)
+
+      // Calculate the new value for the last emty height
+      const newValue = max - sumOfValues
+
+      // Update the last height with the new value
+      categoryObj[lastheight] = newValue.toString()
+    }
+
+    return [categoryObj]
+  }
+
+  const transformedData = updateCategory(createDataShape(categories))
+
+  // Define the scales
+  const xScaleValue = 0
+
+  const xScale = scaleBand<number>({
+    domain: [xScaleValue],
+    padding: 0,
+    range: [0, leftSize]
+  })
+
+  const yScale = scaleLinear({
+    domain: [0, max],
+    range: [yMax, 0],
+    clamp: true
+  })
+
+  const colorScale = scaleOrdinal({
+    domain: categories.map(d => d?.label),
+    range: categories.map(d => getValidColor(d?.color?.trim()))
+  })
+
+  const keys = Object.keys(transformedData[0])
+  return (
+    <Group left={leftSize - xScale.bandwidth()} top={0}>
+      <BarStack data={transformedData} keys={keys} x={() => xScale(xScaleValue)} xScale={xScale} yScale={yScale} color={colorScale}>
+        {barStacks =>
+          barStacks.map(barStack =>
+            barStack.bars.map(bar => {
+              const isLastIndex = config.yAxis.categories.length - 1 === barStack.index
+              const textSize = fontSize[config.fontSize] / 1.3
+              const textColor = chroma(bar.color).luminance() < 0.4 ? '#fff' : '#000'
+              const textWidth = getTextWidth(bar.key, `normal ${textSize}px sans-serif`)
+              const displayText = Number(textWidth) < bar.width && bar.height > textSize
+              const tooltip = `<ul>
+              <li class="tooltip-heading""> Label : ${bar.key}  </li>
+                    </li></ul>`
+              return (
+                <Group key={`${barStack.index}--${bar.index}--${orientation}`}>
+                  <Group key={`bar-stack-${barStack.index}-${bar.index}`} id={`barStack${barStack.index}-${bar.index}`} className='stack vertical'>
+                    {createBarElement({
+                      type: 'axisBar',
+                      config: config,
+                      index: barStack.index,
+                      background: colorScale(bar.key),
+                      borderColor: '#333',
+                      borderStyle: 'solid',
+                      borderWidth: 0,
+                      width: xScale.bandwidth(),
+                      height: bar.height,
+                      x: bar.x,
+                      y: bar.y,
+                      tooltipHtml: tooltip,
+                      tooltipId: `cdc-open-viz-tooltip-${config.runtime.uniqueId}`
+                    })}
+                    {/* Label for axis stacks */}
+                    <Text // ignore
+                      display={!displayText ? 'none' : 'block'}
+                      key={`text-${barStack.index}-${bar.index}`}
+                      x={bar.x + xScale.bandwidth() / 2}
+                      y={bar.y + bar.height / 2}
+                      fill={textColor}
+                      textAnchor='middle'
+                      verticalAnchor='middle'
+                      style={{ fontSize: textSize }}
+                    >
+                      {bar.key}
+                    </Text>
+                    {/* gridLines */}
+                    {config.runtime.yAxis.gridLines && <Line from={{ x: bar.x + xScale.bandwidth(), y: bar.y }} to={{ x: xMax + xScale.bandwidth(), y: bar.y }} stroke='rgba(0,0,0,0.3)' />}
+                    {/* White background spacing between stackes */}
+                    {!isLastIndex && <rect x={bar.x} y={bar.y} width={bar.width} height={1} fill={'#fff'}></rect>}
+                    {/* Right side Axis line */}
+                    <rect x={bar.x + bar.width} y={0} width={1} height={yMax} fill={'#000'}></rect>
+                  </Group>
+                </Group>
+              )
+            })
+          )
+        }
+      </BarStack>
+    </Group>
+  )
+}
+
+export default CategoricalYAxis