@cdc/chart 4.24.1 → 4.24.3

package/src/components/PairedBarChart.jsx

@@ -5,7 +5,7 @@ import { scaleLinear } from '@visx/scale'
 import { Text } from '@visx/text'
 
 import ConfigContext from '../ConfigContext'
-import chroma from 'chroma-js'
+import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 
 const PairedBarChart = ({ width, height, originalWidth }) => {
   const { config, colorScale, transformedData: data, formatNumber, seriesHighlight, getTextWidth } = useContext(ConfigContext)
@@ -20,6 +20,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
   const groupOne = {
     parentKey: config.dataDescription.seriesKey,
     dataKey: config.series[0].dataKey,
+    dataKeyLabel: config.runtime.seriesLabels[config.series[0].dataKey] || config.series[0].dataKey,
     color: colorScale(config.runtime.seriesLabels[config.series[0].dataKey]),
     max: Math.max.apply(
       Math,
@@ -31,6 +32,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
   const groupTwo = {
     parentKey: config.dataDescription.seriesKey,
     dataKey: config.series[1].dataKey,
+    dataKeyLabel: config.runtime.seriesLabels[config.series[1].dataKey] || config.series[1].dataKey,
     color: colorScale(config.runtime.seriesLabels[config.series[1].dataKey]),
     max: Math.max.apply(
       Math,
@@ -45,21 +47,14 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
   })
 
   // Set label color
-  let labelColor = '#000000'
-
-  if (groupOne.color && chroma.contrast(labelColor, groupOne.color) < 4.9) {
-    groupOne.labelColor = '#FFFFFF'
-  }
-
-  if (groupTwo.color && chroma.contrast(labelColor, groupTwo.color) < 4.9) {
-    groupTwo.labelColor = '#FFFFFF'
-  }
+  groupOne.labelColor = groupOne.color ? getContrastColor('#000', groupOne.color) : '#000'
+  groupTwo.labelColor = groupTwo.color ? getContrastColor('#000', groupTwo.color) : '#000'
 
   const label = config.yAxis.label ? `${config.yAxis.label}: ` : ''
 
   const dataTipOne = d => {
     return `<p>
-				${config.dataDescription.seriesKey}: ${groupOne.dataKey}<br/>
+				${config.dataDescription.seriesKey}: ${groupOne.dataKeyLabel}<br/>
 				${config.xAxis.dataKey}: ${d[config.xAxis.dataKey]}<br/>
 				${label}${formatNumber(d[groupOne.dataKey], 'left')}
 			</p>`
@@ -67,7 +62,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
 
   const dataTipTwo = d => {
     return `<p>
-				${config.dataDescription.seriesKey}: ${groupTwo.dataKey}<br/>
+				${config.dataDescription.seriesKey}: ${groupTwo.dataKeyLabel}<br/>
 				${config.xAxis.dataKey}: ${d[config.xAxis.dataKey]}<br/>
 				${label}${formatNumber(d[groupTwo.dataKey], 'left')}
 			</p>`
@@ -85,6 +80,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
 				`}
         </style>
         <svg id='cdc-visualization__paired-bar-chart' width={originalWidth} height={height} viewBox={`0 0 ${width + Number(config.runtime.yAxis.size)} ${height}`} role='img' tabIndex={0}>
+          <title>{`Paired bar chart graphic with the title ${config.title ? config.title : 'No Title Found'}`}</title>
           <Group top={0} left={Number(config.xAxis.size)}>
             {data
               .filter(item => config.series[0].dataKey === groupOne.dataKey)
@@ -120,6 +116,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                         strokeWidth={borderWidth}
                         opacity={transparentBar ? 0.5 : 1}
                         display={displayBar ? 'block' : 'none'}
+                        tabIndex={-1}
                       />
                       {config.yAxis.displayNumbersOnBar && displayBar && (
                         <Text textAnchor={textFits ? 'start' : 'end'} dx={textFits ? 5 : -5} verticalAnchor='middle' x={halfWidth - barWidth} y={y + config.barHeight / 2} fill={textFits ? groupOne.labelColor : '#000'}>
@@ -171,6 +168,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                         stroke='#333'
                         opacity={transparentBar ? 0.5 : 1}
                         display={displayBar ? 'block' : 'none'}
+                        tabIndex={-1}
                       />
                       {config.yAxis.displayNumbersOnBar && displayBar && (
                         <Text textAnchor={isTextFits ? 'end' : 'start'} dx={isTextFits ? -5 : 5} verticalAnchor='middle' x={halfWidth + barWidth} y={y + config.barHeight / 2} fill={isTextFits ? groupTwo.labelColor : '#000'}>

package/src/components/PieChart/PieChart.tsx

@@ -1,12 +1,12 @@
-import React, { useContext, useState, useEffect, useRef } from 'react'
+import React, { useContext, useState, useEffect, useRef, useMemo } from 'react'
 import { animated, useTransition, interpolate } from 'react-spring'
-import chroma from 'chroma-js'
 
 // visx
 import { Pie } from '@visx/shape'
 import { Group } from '@visx/group'
 import { Text } from '@visx/text'
 import { useTooltip, TooltipWithBounds } from '@visx/tooltip'
+import { colorPalettesChart as colorPalettes } from '@cdc/core/data/colorPalettes'
 
 // cove
 import ConfigContext from '../../ConfigContext'
@@ -14,6 +14,10 @@ import { useTooltip as useCoveTooltip } from '../../hooks/useTooltip'
 import useIntersectionObserver from '../../hooks/useIntersectionObserver'
 import { handleChartAriaLabels } from '../../helpers/handleChartAriaLabels'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import LegendComponent from '../Legend/Legend.Component'
+import { createFormatLabels } from '../Legend/helpers/createFormatLabels'
+import { scaleOrdinal } from '@visx/scale'
+import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 
 const enterUpdateTransition = ({ startAngle, endAngle }) => ({
   startAngle,
@@ -29,7 +33,7 @@ type TooltipData = {
 }
 
 const PieChart = props => {
-  const { transformedData: data, config, dimensions, seriesHighlight, colorScale, currentViewport } = useContext(ConfigContext)
+  const { transformedData: data, config, colorScale, currentViewport, dimensions, highlight, highlightReset, seriesHighlight } = useContext(ConfigContext)
   const { tooltipData, showTooltip, hideTooltip, tooltipOpen, tooltipLeft, tooltipTop } = useTooltip<TooltipData>()
   const { handleTooltipMouseOver, handleTooltipMouseOff, TooltipListItem } = useCoveTooltip({
     xScale: false,
@@ -39,6 +43,50 @@ const PieChart = props => {
   })
   const [filteredData, setFilteredData] = useState(undefined)
   const [animatedPie, setAnimatePie] = useState(false)
+  const pivotColumns = Object.values(config.columns).filter(column => column.showInViz)
+  const dataNeedsPivot = pivotColumns.length > 0
+  const pivotKey = dataNeedsPivot ? 'pivotColumn' : undefined
+  const _data = useMemo(() => {
+    if (dataNeedsPivot) {
+      let newData = []
+      const primaryColumn = config.yAxis.dataKey
+      const additionalColumns = pivotColumns.map(column => column.name)
+      const allColumns = [primaryColumn, ...additionalColumns]
+      const columnToUpdate = config.xAxis.dataKey
+      data.forEach(d => {
+        allColumns.forEach(col => {
+          const data = d[col]
+          if (data) {
+            newData.push({
+              [pivotKey]: data,
+              [columnToUpdate]: `${d[columnToUpdate]} - ${col}`
+            })
+          }
+        })
+      })
+      return newData
+    }
+    return data
+  }, [data, dataNeedsPivot])
+
+  const _colorScale = useMemo(() => {
+    if (dataNeedsPivot) {
+      const keys = {}
+      _data.forEach(d => {
+        if (!keys[d[config.xAxis.dataKey]]) keys[d[config.xAxis.dataKey]] = true
+      })
+      const numberOfKeys = Object.entries(keys).length
+      let palette = config.customColors || colorPalettes[config.palette]
+      palette = palette.slice(0, numberOfKeys)
+
+      return scaleOrdinal({
+        domain: Object.keys(keys),
+        range: palette,
+        unknown: null
+      })
+    }
+    return colorScale
+  }, [colorScale, dataNeedsPivot])
 
   const triggerRef = useRef()
   const dataRef = useIntersectionObserver(triggerRef, {
@@ -96,7 +144,7 @@ const PieChart = props => {
                     endAngle
                   })
                 )}
-                fill={colorScale(arc.data[config.runtime.xAxis.dataKey])}
+                fill={_colorScale(arc.data[config.runtime.xAxis.dataKey])}
                 onMouseEnter={e => handleTooltipMouseOver(e, { data: arc.data[config.runtime.xAxis.dataKey], arc })}
                 onMouseLeave={e => handleTooltipMouseOff()}
               />
@@ -108,8 +156,8 @@ const PieChart = props => {
           const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.1
 
           let textColor = '#FFF'
-          if (colorScale(arc.data[config.runtime.xAxis.dataKey]) && chroma.contrast(textColor, colorScale(arc.data[config.runtime.xAxis.dataKey])) < 3.5) {
-            textColor = '000'
+          if (_colorScale(arc.data[config.runtime.xAxis.dataKey])) {
+            textColor = getContrastColor(textColor, _colorScale(arc.data[config.runtime.xAxis.dataKey]))
           }
 
           return (
@@ -143,7 +191,7 @@ const PieChart = props => {
     if (seriesHighlight.length > 0 && config.legend.behavior !== 'highlight') {
       let newFilteredData = []
 
-      data.forEach(d => {
+      _data.forEach(d => {
         if (seriesHighlight.indexOf(d[config.runtime.xAxis.dataKey]) !== -1) {
           newFilteredData.push(d)
         }
@@ -155,33 +203,38 @@ const PieChart = props => {
     }
   }, [seriesHighlight]) // eslint-disable-line
 
+  const createLegendLabels = createFormatLabels(config, [], _data, _colorScale)
+
   return (
-    <ErrorBoundary component='PieChart'>
-      <svg width={width} height={height} className={`animated-pie group ${config.animate === false || animatedPie ? 'animated' : ''}`} role='img' aria-label={handleChartAriaLabels(config)}>
-        <Group top={centerY} left={centerX}>
-          {/* prettier-ignore */}
-          <Pie
-            data={filteredData || data}
-            pieValue={d => d[config.runtime.yAxis.dataKey]}
+    <>
+      <ErrorBoundary component='PieChart'>
+        <svg width={width} height={height} className={`animated-pie group ${config.animate === false || animatedPie ? 'animated' : ''}`} role='img' aria-label={handleChartAriaLabels(config)}>
+          <Group top={centerY} left={centerX}>
+            {/* prettier-ignore */}
+            <Pie
+            data={filteredData || _data}
+            pieValue={d => d[pivotKey || config.runtime.yAxis.dataKey]}
             pieSortValues={() => -1}
             innerRadius={radius - donutThickness}
             outerRadius={radius}
           >
             {pie => <AnimatedPie {...pie} getKey={d => d.data[config.runtime.xAxis.dataKey]}/>}
           </Pie>
-        </Group>
-      </svg>
-      <div ref={triggerRef} />
-      {tooltipData && Object.entries(tooltipData.data).length > 0 && tooltipOpen && showTooltip && tooltipData.dataYPosition && tooltipData.dataXPosition && (
-        <>
-          <style>{`.tooltip {background-color: rgba(255,255,255, ${config.tooltips.opacity / 100}) !important`}</style>
-          <TooltipWithBounds key={Math.random()} className={'tooltip cdc-open-viz-module'} left={tooltipLeft} top={tooltipTop}>
-            <ul>{typeof tooltipData === 'object' && Object.entries(tooltipData.data).map((item, index) => <TooltipListItem item={item} key={index} />)}</ul>
-          </TooltipWithBounds>
-        </>
-      )}
-      {/* <ReactTooltip id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`} variant='light' arrowColor='rgba(0,0,0,0)' className='tooltip' /> */}
-    </ErrorBoundary>
+          </Group>
+        </svg>
+        <div ref={triggerRef} />
+        {tooltipData && Object.entries(tooltipData.data).length > 0 && tooltipOpen && showTooltip && tooltipData.dataYPosition && tooltipData.dataXPosition && (
+          <>
+            <style>{`.tooltip {background-color: rgba(255,255,255, ${config.tooltips.opacity / 100}) !important`}</style>
+            <TooltipWithBounds key={Math.random()} className={'tooltip cdc-open-viz-module'} left={tooltipLeft} top={tooltipTop}>
+              <ul>{typeof tooltipData === 'object' && Object.entries(tooltipData.data).map((item, index) => <TooltipListItem item={item} key={index} />)}</ul>
+            </TooltipWithBounds>
+          </>
+        )}
+        {/* <ReactTooltip id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`} variant='light' arrowColor='rgba(0,0,0,0)' className='tooltip' /> */}
+      </ErrorBoundary>
+      <LegendComponent config={config} colorScale={_colorScale} seriesHighlight={seriesHighlight} highlight={highlight} highlightReset={highlightReset} currentViewport={currentViewport} formatLabels={createLegendLabels} />
+    </>
   )
 }
 

package/src/components/Regions/components/Regions.tsx

@@ -1,93 +1,153 @@
-import React, { useContext } from 'react'
-import { ChartConfig } from '../../../types/ChartConfig'
+import React, { MouseEventHandler, useContext } from 'react'
 import ConfigContext from '../../../ConfigContext'
 import { ChartContext } from '../../../types/ChartContext'
 import { Text } from '@visx/text'
 import { Group } from '@visx/group'
-import * as d3 from 'd3'
+import { formatDate, isDateScale } from '@cdc/core/helpers/cove/date.js'
 
 type RegionsProps = {
   xScale: Function
-  barWidth: number
-  totalBarsInGroup: number
   yMax: number
   barWidth?: number
   totalBarsInGroup?: number
+  handleTooltipMouseOff: MouseEventHandler<SVGElement>
+  handleTooltipMouseOver: MouseEventHandler<SVGElement>
+  handleTooltipClick: MouseEventHandler<SVGElement>
+  tooltipData: unknown
+  showTooltip: Function
+  hideTooltip: Function
 }
 
-const Regions = ({ xScale, barWidth = 0, totalBarsInGroup = 1, yMax, handleTooltipMouseOff, handleTooltipMouseOver, handleTooltipClick, tooltipData, showTooltip, hideTooltip }: RegionsProps) => {
+// TODO: should regions be removed on categorical axis?
+const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGroup = 1, yMax, handleTooltipMouseOff, handleTooltipMouseOver, handleTooltipClick, tooltipData, showTooltip, hideTooltip }) => {
   const { parseDate, config } = useContext<ChartContext>(ConfigContext)
 
   const { runtime, regions, visualizationType, orientation, xAxis } = config
+  const domain = xScale.domain()
 
-  let from
-  let to
-  let width
+  const getFromValue = region => {
+    let from
 
-  if (regions && orientation === 'vertical') {
-    return regions.map(region => {
-      if (xAxis.type === 'date' && region.fromType !== 'Previous Days') {
-        from = xScale(parseDate(region.from).getTime())
-        to = xScale(parseDate(region.to).getTime())
-        width = to - from
+    // Fixed Date
+    if (!region?.fromType || region.fromType === 'Fixed') {
+      const date = new Date(region.from)
+      const parsedDate = parseDate(formatDate(config.xAxis.dateParseFormat, date)).getTime()
+      from = xScale(parsedDate)
+
+      if (visualizationType === 'Bar' && xAxis.type === 'date-time') {
+        from = from - (barWidth * totalBarsInGroup) / 2
+      }
+    }
+
+    // Previous Date
+    if (region.fromType === 'Previous Days') {
+      const previousDays = Number(region.from) || 0
+      const categoricalDomain = domain.map(d => formatDate(config.xAxis.dateParseFormat, new Date(d)))
+      const d = region.toType === 'Last Date' ? new Date(domain[domain.length - 1]).getTime() : new Date(region.to) // on categorical charts force leading zero 03/15/2016 vs 3/15/2016 for valid date format
+      const to = config.xAxis.type === 'categorical' ? formatDate(config.xAxis.dateParseFormat, d) : formatDate(config.xAxis.dateParseFormat, d)
+      const toDate = new Date(to)
+      from = new Date(toDate.setDate(toDate.getDate() - Number(previousDays)))
+
+      if (xAxis.type === 'date') {
+        from = new Date(formatDate(xAxis.dateParseFormat, from)).getTime()
+
+        let closestDate = domain[0]
+        let minDiff = Math.abs(from - closestDate)
+
+        for (let i = 1; i < domain.length; i++) {
+          const diff = Math.abs(from - domain[i])
+          if (diff < minDiff) {
+            minDiff = diff
+            closestDate = domain[i]
+          }
+        }
+        from = closestDate
       }
 
+      // Here the domain is in the xScale.dateParseFormat
       if (xAxis.type === 'categorical') {
-        from = xScale(region.from)
-        to = xScale(region.to)
-        width = to - from
+        let closestDate = domain[0]
+        let minDiff = Math.abs(new Date(from).getTime() - new Date(closestDate).getTime())
+
+        for (let i = 1; i < domain.length; i++) {
+          const diff = Math.abs(new Date(from).getTime() - new Date(domain[i]).getTime())
+          if (diff < minDiff) {
+            minDiff = diff
+            closestDate = domain[i]
+          }
+        }
+        from = closestDate
       }
 
-      if ((visualizationType === 'Bar' || config.visualizationType === 'Combo') && xAxis.type === 'date') {
-        from = region.fromType !== 'Previous Days' ? xScale(parseDate(region.from).getTime()) - (barWidth * totalBarsInGroup) / 2 : null
-        to = region.toType !== 'Last Date' ? xScale(parseDate(region.to).getTime()) + (barWidth * totalBarsInGroup) / 2 : null
+      from = xScale(from)
+    }
 
-        width = to - from
-      }
+    if (xAxis.type === 'categorical' && region.fromType !== 'Previous Days') {
+      from = xScale(region.from)
+    }
 
-      if ((visualizationType === 'Bar' || config.visualizationType === 'Combo') && config.xAxis.type === 'categorical') {
-        from = xScale(region.from)
-        to = xScale(region.to)
-        width = to - from
+    if (visualizationType === 'Line' || visualizationType === 'Area Chart') {
+      let scalePadding = Number(config.yAxis.size)
+      if (xScale.bandwidth) {
+        scalePadding += xScale.bandwidth() / 2
       }
+      from = from + scalePadding
+    }
 
-      if (region.fromType === 'Previous Days') {
-        to = region.toType !== 'Last Date' ? xScale(parseDate(region.to).getTime()) + (barWidth * totalBarsInGroup) / 2 : null
-
-        let domain = xScale.domain()
-        let bisectDate = d3.bisector(d => d).left
-        let closestValue
-
-        let previousDays = Number(region.from)
-        let lastDate = region.toType === 'Last Date' ? domain[domain.length - 1] : region.to
-        let fromDate = new Date(lastDate)
-
-        from = new Date(fromDate.setDate(fromDate.getDate() - previousDays)).getTime()
-        let targetValue = from
-
-        let index = bisectDate(domain, targetValue)
-        if (index === 0) {
-          closestValue = domain[0]
-        } else if (index === domain.length) {
-          closestValue = domain[domain.length - 1]
-        } else {
-          let d0 = domain[index - 1]
-          let d1 = domain[index]
-          closestValue = targetValue - d0 > d1 - targetValue ? d1 : d0
-        }
+    if (visualizationType === 'Bar' && config.xAxis.type === 'date-time' && region.fromType === 'Previous Days') {
+      from = from - (barWidth * totalBarsInGroup) / 2
+    }
+
+    return from
+  }
 
-        from = Number(xScale(closestValue) - (visualizationType === 'Bar' || visualizationType === 'Combo' ? (barWidth * totalBarsInGroup) / 2 : 0))
+  const getToValue = region => {
+    let to
 
-        width = to - from
+    // when xScale is categorical leading zeros are removed, ie. 03/15/2016 is 3/15/2016
+    if (xAxis.type === 'categorical') {
+      to = xScale(region.to)
+    }
+
+    if (isDateScale(xAxis)) {
+      if (!region?.toType || region.toType === 'Fixed') {
+        to = xScale(parseDate(region.to).getTime())
       }
 
-      // set the region max to the charts max range.
-      if (region.toType === 'Last Date') {
-        let domainValues = xScale.domain()
-        let lastDate = domainValues[domainValues.length - 1]
-        to = Number(xScale(lastDate) + (visualizationType === 'Bar' || visualizationType === 'Combo' ? (barWidth * totalBarsInGroup) / 2 : 0))
-        width = to - from
+      if (visualizationType === 'Bar' || config.visualizationType === 'Combo') {
+        to = region.toType !== 'Last Date' ? xScale(parseDate(region.to).getTime()) + barWidth * totalBarsInGroup : to
+      }
+    }
+    if (region.toType === 'Last Date') {
+      const lastDate = domain[domain.length - 1]
+      to = Number(xScale(lastDate) + ((visualizationType === 'Bar' || visualizationType === 'Combo') && config.xAxis.type === 'date' ? barWidth * totalBarsInGroup : 0))
+    }
+
+    if (visualizationType === 'Line' || visualizationType === 'Area Chart') {
+      let scalePadding = Number(config.yAxis.size)
+      if (xScale.bandwidth) {
+        scalePadding += xScale.bandwidth() / 2
       }
+      to = to + scalePadding
+    }
+
+    if (visualizationType === 'Bar' && config.xAxis.type === 'date-time' && region.toType !== 'Last Date') {
+      to = to - (barWidth * totalBarsInGroup) / 2
+    }
+
+    if ((visualizationType === 'Bar' || visualizationType === 'Combo') && xAxis.type === 'categorical') {
+      to = to + (visualizationType === 'Bar' || visualizationType === 'Combo' ? barWidth * totalBarsInGroup : 0)
+    }
+    return to
+  }
+
+  const getWidth = (to, from) => to - from
+
+  if (regions && orientation === 'vertical') {
+    return regions.map(region => {
+      const from = getFromValue(region)
+      const to = getToValue(region)
+      const width = getWidth(to, from)
 
       if (!from) return null
       if (!to) return null
@@ -111,16 +171,7 @@ const Regions = ({ xScale, barWidth = 0, totalBarsInGroup = 1, yMax, handleToolt
       }
 
       return (
-        <Group
-          className='regions regions-group--line'
-          left={config.visualizationType === 'Bar' || config.visualizationType === 'Combo' ? 0 : config?.visualizationType === 'Line' ? Number(runtime.yAxis.size) : 0}
-          key={region.label}
-          onMouseMove={handleTooltipMouseOver}
-          onMouseLeave={handleTooltipMouseOff}
-          handleTooltipClick={handleTooltipClick}
-          tooltipData={JSON.stringify(tooltipData)}
-          showTooltip={showTooltip}
-        >
+        <Group height={100} fill='red' className='regions regions-group--line zzz' key={region.label} onMouseMove={handleTooltipMouseOver} onMouseLeave={handleTooltipMouseOff} handleTooltipClick={handleTooltipClick} tooltipData={JSON.stringify(tooltipData)} showTooltip={showTooltip}>
           <TopRegionBorderShape />
           <HighlightedArea />
           <Text x={from + width / 2} y={5} fill={region.color} verticalAnchor='start' textAnchor='middle'>