@cdc/chart 4.23.3 → 4.23.5

package/src/components/BoxPlot.jsx

@@ -7,9 +7,18 @@ import { colorPalettesChart } from '@cdc/core/data/colorPalettes'
 
 const CoveBoxPlot = ({ xScale, yScale }) => {
   const { config, setConfig } = useContext(ConfigContext)
-  const boxWidth = xScale.bandwidth()
-  const constrainedWidth = Math.min(40, boxWidth)
-  const color_0 = colorPalettesChart[config?.palette][0] ? colorPalettesChart[config?.palette][0] : '#000'
+
+  useEffect(() => {
+    if (config.legend.hide === false) {
+      setConfig({
+        ...config,
+        legend: {
+          ...config.legend,
+          hide: true
+        }
+      })
+    }
+  }, []) // eslint-disable-line
 
   // tooltips
   const tooltip_id = `cdc-open-viz-tooltip-${config.runtime.uniqueId}`
@@ -23,17 +32,16 @@ const CoveBoxPlot = ({ xScale, yScale }) => {
     `
   }
 
-  useEffect(() => {
-    if (config.legend.hide === false) {
-      setConfig({
-        ...config,
-        legend: {
-          ...config.legend,
-          hide: true
-        }
-      })
-    }
-  }, []) // eslint-disable-line
+  //  accessors & constants
+  const max = d => Number(d.columnMax)
+  const min = d => Number(d.columnMin)
+  const median = d => Number(d.columnMedian)
+  const thirdQuartile = d => Number(d.columnThirdQuartile)
+  const firstQuartile = d => Number(d.columnFirstQuartile)
+  const fillOpacity = 0.5
+  const boxWidth = xScale.bandwidth()
+  const constrainedWidth = Math.min(40, boxWidth)
+  const color_0 = colorPalettesChart[config?.palette][0] ? colorPalettesChart[config?.palette][0] : '#000'
 
   return (
     <ErrorBoundary component='BoxPlot'>
@@ -50,15 +58,15 @@ const CoveBoxPlot = ({ xScale, yScale }) => {
               <BoxPlot
                 data-left={xScale(d.columnCategory) + config.yAxis.size + offset / 2 + 0.5}
                 key={`box-plot-${i}`}
-                min={Number(d.columnMin)}
-                max={Number(d.columnMax)}
+                min={min(d)}
+                max={max(d)}
                 left={Number(xScale(d.columnCategory)) + Number(config.yAxis.size) + offset / 2 + 0.5}
-                firstQuartile={Number(d.columnFirstQuartile)}
-                thirdQuartile={Number(d.columnThirdQuartile)}
-                median={Number(d.columnMedian)}
+                firstQuartile={firstQuartile(d)}
+                thirdQuartile={thirdQuartile(d)}
+                median={median(d)}
                 boxWidth={constrainedWidth}
                 fill={color_0}
-                fillOpacity={0.5}
+                fillOpacity={fillOpacity}
                 stroke='black'
                 valueScale={yScale}
                 outliers={config.boxplot.plotOutlierValues ? d.columnOutliers : []}

package/src/components/DataTable.jsx

@@ -12,7 +12,7 @@ import ConfigContext from '../ConfigContext'
 import CoveMediaControls from '@cdc/core/components/CoveMediaControls'
 
 export default function DataTable() {
-  const { rawData, transformedData: data, config, colorScale, parseDate, formatDate, formatNumber: numberFormatter, colorPalettes } = useContext(ConfigContext)
+  const { rawData, tableData: data, config, colorScale, parseDate, formatDate, formatNumber: numberFormatter, colorPalettes } = useContext(ConfigContext)
 
   const section = config.orientation === 'horizontal' ? 'yAxis' : 'xAxis'
   const [tableExpanded, setTableExpanded] = useState(config.table.expanded)
@@ -35,7 +35,7 @@ export default function DataTable() {
     switch (type) {
       case 'download':
         return (
-          <a download={fileName} onClick={saveBlob} href={`data:text/csv;base64,${Base64.encode(csvData)}`} aria-label='Download this data in a CSV file format.' className={`btn btn-download no-border`}>
+          <a download={fileName} onClick={saveBlob} href={`data:text/csv;base64,${Base64.encode(csvData)}`} aria-label='Download this data in a CSV file format.' className={`btn btn-download no-border margin-sm`}>
             Download Data (CSV)
           </a>
         )
@@ -75,7 +75,9 @@ export default function DataTable() {
                     values: labels.values,
                     columnTotal: labels.total,
                     columnSd: 'Standard Deviation',
-                    nonOutlierValues: 'Non Outliers'
+                    nonOutlierValues: 'Non Outliers',
+                    columnLowerBounds: labels.lowerBounds,
+                    columnUpperBounds: labels.upperBounds
                   }
 
                   let resolvedName = columnLookup[props.row.original[0]]
@@ -232,8 +234,7 @@ export default function DataTable() {
         </div>
         <div className='table-container' hidden={!tableExpanded} style={{ maxHeight: config.table.limitHeight && `${config.table.height}px`, overflowY: 'scroll' }}>
           <table className={tableExpanded ? 'data-table' : 'data-table cdcdataviz-sr-only'} {...getTableProps()} aria-rowcount={config?.series?.length ? config?.series?.length : '-1'}>
-            <caption className='cdcdataviz-sr-only'>{config.table.caption ? config.table.caption : ''}</caption>
-            <caption className='visually-hidden'>{config.table.label}</caption>
+            <caption className='cdcdataviz-sr-only visually-hidden'>{config.table.caption ? config.table.caption : config.table.label ? config.table.label : 'Data Table'}</caption>
             <thead>
               {headerGroups.map((headerGroup, index) => (
                 <tr {...headerGroup.getHeaderGroupProps()} key={`headerGroups--${index}`}>
@@ -275,7 +276,7 @@ export default function DataTable() {
               })}
             </tbody>
           </table>
-          {config.regions && config.regions.length > 0 && !config.visualizationType === 'Box Plot' ? (
+          {config.regions && config.regions.length > 0 && config.visualizationType !== 'Box Plot' ? (
             <table className='region-table data-table'>
               <caption className='visually-hidden'>Table of the highlighted regions in the visualization</caption>
               <thead>

package/src/components/DeviationBar.jsx

@@ -6,38 +6,7 @@ import { Text } from '@visx/text'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import chroma from 'chroma-js'
 
-// create function to position text based where bar is located left/or right
-function getTextProps(isLollipopChart, textFits, lollipopShapeSize, fill) {
-  if (isLollipopChart) {
-    return {
-      right: {
-        textAnchor: 'start',
-        dx: lollipopShapeSize + 6,
-        fill: '#000000'
-      },
-      left: {
-        textAnchor: 'end',
-        dx: -lollipopShapeSize,
-        fill: '#000000'
-      }
-    }
-  } else {
-    return {
-      right: {
-        textAnchor: textFits ? 'end' : 'start',
-        dx: textFits ? -6 : 6,
-        fill: textFits ? fill : '#000000'
-      },
-      left: {
-        textAnchor: textFits ? 'start' : 'end',
-        dx: textFits ? 6 : -6,
-        fill: textFits ? fill : '#000000'
-      }
-    }
-  }
-}
-
-export function DeviationBar({ height, xScale }) {
+export default function DeviationBar({ height, xScale }) {
   const { transformedData: data, config, formatNumber, twoColorPalette, getTextWidth, updateConfig, parseDate, formatDate } = useContext(ConfigContext)
 
   if (!config || config?.series?.length !== 1 || config.orientation !== 'horizontal') return
@@ -56,7 +25,7 @@ export function DeviationBar({ height, xScale }) {
   const lollipopBarHeight = config.lollipopSize === 'large' ? 7 : config.lollipopSize === 'medium' ? 6 : 5
   const lollipopShapeSize = config.lollipopSize === 'large' ? 14 : config.lollipopSize === 'medium' ? 12 : 10
 
-  const targetX = Math.max(xScale(0), Math.min(xScale(target), xScale(maxVal * 1.05)))
+  const targetX = Math.max(xScale(0), Math.min(xScale(target), xScale(maxVal)))
 
   const applyRadius = barPosition => {
     if (barPosition === undefined || barPosition === null || barStyle !== 'rounded') return
@@ -122,7 +91,7 @@ export function DeviationBar({ height, xScale }) {
         {data.map((d, index) => {
           const barValue = Number(d[seriesKey])
           const barHeight = config.isLollipopChart ? lollipopBarHeight : Number(config.barHeight)
-          const barSpace = Number(config.barSpace) || 15
+          const barSpace = Number(config.barSpace)
           const barWidth = Math.abs(xScale(barValue) - targetX)
           const barBaseX = xScale(barValue)
           const barX = barValue > target ? targetX : barBaseX
@@ -189,3 +158,34 @@ export function DeviationBar({ height, xScale }) {
     </ErrorBoundary>
   )
 }
+
+// create function to position text based where bar is located left/or right
+function getTextProps(isLollipopChart, textFits, lollipopShapeSize, fill) {
+  if (isLollipopChart) {
+    return {
+      right: {
+        textAnchor: 'start',
+        dx: lollipopShapeSize + 6,
+        fill: '#000000'
+      },
+      left: {
+        textAnchor: 'end',
+        dx: -lollipopShapeSize,
+        fill: '#000000'
+      }
+    }
+  } else {
+    return {
+      right: {
+        textAnchor: textFits ? 'end' : 'start',
+        dx: textFits ? -6 : 6,
+        fill: textFits ? fill : '#000000'
+      },
+      left: {
+        textAnchor: textFits ? 'start' : 'end',
+        dx: textFits ? 6 : -6,
+        fill: textFits ? fill : '#000000'
+      }
+    }
+  }
+}