@cdc/chart 4.23.7 → 4.23.8

package/index.html

@@ -34,15 +34,19 @@
   -->
 
   <!-- GENERIC CHART TYPES -->
-  <!-- <div class="react-container" data-config="/examples/private/datatable-issue.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/feature/filters/filter-testing.json"></div> -->
+  <div class="react-container" data-config="/examples/private/tooltip-issue.json"></div>
+  <!-- <div class="react-container" data-config="https://cdc.gov/poxvirus/mpox/modules/data-viz/mpx-trends_1.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/private/mpox-bar-test-aug-31.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-date-city-temperature.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-date-apple.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/feature/forest-plot/broken.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/feature/forest-plot/forest-plot.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/pie/planet-pie-example-config.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/line/line-chart.json"></div> -->
-  <div class="react-container" data-config="/examples/feature/forecasting/index.json"></div>
   <!-- <div class="react-container" data-config="/examples/feature/forecasting/forecasting.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/forecasting/combo-forecasting.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/forecasting/effective_reproduction.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-date.json"></div> -->
+  <div class="react-container" data-config="/examples/feature/area/area-chart-date.json"></div>
   <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-category.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/scatterplot/scatterplot.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/deviation/planet-deviation-config.json"></div> -->
@@ -54,10 +58,9 @@
   <!-- BAR -->
   <!-- <div class="react-container" data-config="/examples/feature/bar/planet-example-config.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/bar/planet-chart-horizontal-example-config.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/feature/bar/new.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/bar/example-bar-chart.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-chart-max-increase.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-chart.json"></div> -->
+  <div class="react-container" data-config="/examples/feature/bar/horizontal-chart.json"></div>
   <!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-stacked-bar-chart.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/bar/planet-chart-horizontal-example-config.json"></div> -->
 
@@ -65,12 +68,12 @@
   <!-- <div class="react-container" data-config="/examples/feature/sparkline/example-sparkline.json"></div> -->
 
   <!-- TESTS DATE EXCLUSIONS -->
-  <div class="react-container" data-config="/examples/feature/tests-date-exclusions/date-exclusions-config.json"></div>
+  <!-- <div class="react-container" data-config="/examples/feature/tests-date-exclusions/date-exclusions-config.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/tests-case-rate/case-rate-example-config.json"></div> -->
 
    <!-- TESTS BIG SMALL-->
   <!-- <div class="react-container" data-config="/examples/feature/tests-big-small/big-small-test-line.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/feature/tests-big-small/big-small-test-bar.json"></div>  -->
+  <!-- <div class="react-container" data-config="/examples/feature/tests-big-small/big-small-test-bar.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/tests-big-small/big-small-test-negative.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/tests-big-small/line-chart-max-increase.json"></div> -->
 
@@ -105,12 +108,11 @@
 
   <!-- VERTICAL BAR CHARTS -->
   <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/combo-line-chart.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/private/problem.json"></div> -->
-  <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-categorical.json"></div>
+  <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-categorical.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-confidence.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-confidence.json"></div>  -->
-  <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart.json"></div> -->
+  <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart.json"></div>
 
   <noscript>You need to enable JavaScript to run this app.</noscript>
 </body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/chart",
-  "version": "4.23.7",
+  "version": "4.23.8",
   "description": "React component for visualizing tabular data in various types of charts",
   "moduleName": "CdcChart",
   "main": "dist/cdcchart",
@@ -29,13 +29,14 @@
     "@visx/axis": "^3.0.0",
     "@visx/curve": "^3.0.0",
     "@visx/event": "^3.0.1",
+    "@visx/glyph": "^3.3.0",
     "@visx/gradient": "^3.0.0",
     "@visx/group": "^3.0.0",
     "@visx/legend": "^3.0.0",
     "@visx/marker": "^3.0.0",
     "@visx/mock-data": "^3.0.0",
     "@visx/scale": "^3.0.0",
-    "@visx/shape": "^3.0.0",
+    "@visx/shape": "^3.3.0",
     "@visx/stats": "^3.0.0",
     "@visx/text": "^3.0.0",
     "@visx/tooltip": "^3.0.0",
@@ -57,7 +58,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "6c7ac5215dcf3bc1cc7d199089c8c2e75f53a93e",
+  "gitHead": "ba0a072a40c430baf121ad5ece0165f52a414b86",
   "devDependencies": {
     "resize-observer-polyfill": "^1.5.1"
   }

package/src/CdcChart.jsx

@@ -21,10 +21,6 @@ import LinearChart from './components/LinearChart'
 
 import { colorPalettesChart as colorPalettes, twoColorPalette } from '@cdc/core/data/colorPalettes'
 
-import { publish, subscribe, unsubscribe } from '@cdc/core/helpers/events'
-
-import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
-
 import SparkLine from './components/SparkLine'
 import Legend from './components/Legend'
 import defaults from './data/initial-state'
@@ -34,6 +30,8 @@ import Filters from '@cdc/core/components/Filters'
 import MediaControls from '@cdc/core/components/MediaControls'
 
 // Helpers
+import { publish, subscribe, unsubscribe } from '@cdc/core/helpers/events'
+import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
 import numberFromString from '@cdc/core/helpers/numberFromString'
 import getViewport from '@cdc/core/helpers/getViewport'
 import { DataTransform } from '@cdc/core/helpers/DataTransform'
@@ -96,7 +94,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   let legendMemo = useRef(new Map()) // map collection
   let innerContainerRef = useRef()
 
-  if (isDebug) console.log('Chart config', config)
+  if (isDebug) console.log('Chart config, isEditor', config, isEditor)
 
   const DataTable = config?.table?.showVertical ? DataTable_vert : DataTable_horiz
 
@@ -563,17 +561,20 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       newConfig.runtime.areaSeriesKeys = []
 
       newConfig.series.forEach(series => {
-        if (series.type === 'Area Chart') {
-          newConfig.runtime.areaSeriesKeys.push(series)
-        }
+        newConfig.runtime.areaSeriesKeys.push({ ...series, type: 'Area Chart' })
       })
     }
 
-    if ((newConfig.visualizationType === 'Bar' && newConfig.orientation === 'horizontal') || ['Deviation Bar', 'Paired Bar'].includes(newConfig.visualizationType)) {
+    if ((newConfig.visualizationType === 'Bar' && newConfig.orientation === 'horizontal') || ['Deviation Bar', 'Paired Bar', 'Forest Plot'].includes(newConfig.visualizationType)) {
       newConfig.runtime.xAxis = newConfig.yAxis
       newConfig.runtime.yAxis = newConfig.xAxis
       newConfig.runtime.horizontal = true
       newConfig.orientation = 'horizontal'
+    } else if (['Box Plot', 'Scatter Plot', 'Area Chart'].includes(newConfig.visualizationType)) {
+      newConfig.runtime.xAxis = newConfig.xAxis
+      newConfig.runtime.yAxis = newConfig.yAxis
+      newConfig.runtime.horizontal = false
+      newConfig.orientation = 'vertical'
     } else {
       newConfig.runtime.xAxis = newConfig.xAxis
       newConfig.runtime.yAxis = newConfig.yAxis
@@ -873,12 +874,15 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   }
 
   // Format numeric data based on settings in config OR from passed in settings for Additional Columns
+  // - use only for old horizontal data - newer formatNumber is in helper/formatNumber
   const formatNumber = (num, axis, shouldAbbreviate = false, addColPrefix, addColSuffix, addColRoundTo) => {
     // if num is NaN return num
     if (isNaN(num) || !num) return num
     // Check if the input number is negative
     const isNegative = num < 0
 
+    if (axis === undefined || !axis) axis = 'left'
+
     // If the input number is negative, take the absolute value
     if (isNegative) {
       num = Math.abs(num)
@@ -893,8 +897,10 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     if (String(num).indexOf(',') !== -1) num = num.replaceAll(',', '')
 
     let original = num
-    let stringFormattingOptions
-    if (axis === 'left') {
+    let stringFormattingOptions = {
+      useGrouping: commas ? true : false // for old chart data table to work right cant just leave this to undefined
+    }
+    if (axis === 'left' || axis === undefined) {
       let roundToPlace
       if (addColRoundTo !== undefined) {
         // if its an Additional Column
@@ -968,7 +974,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       result = addColPrefix + result
     } else {
       if (prefix && axis === 'left') {
-        result = prefix + result
+        result += prefix
       }
     }
 
@@ -980,6 +986,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       result += bottomPrefix
     }
 
+    // combine prefix and num
     result += num
 
     if (addColSuffix && axis === 'left') {
@@ -1015,11 +1022,13 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     'Box Plot': <LinearChart />,
     'Area Chart': <LinearChart />,
     'Scatter Plot': <LinearChart />,
-    'Deviation Bar': <LinearChart />
+    'Deviation Bar': <LinearChart />,
+    'Forest Plot': <LinearChart />
   }
 
   const missingRequiredSections = () => {
     if (config.visualizationType === 'Forecasting') return false // skip required checks for now.
+    if (config.visualizationType === 'Forest Plot') return false // skip required checks for now.
     if (config.visualizationType === 'Pie') {
       if (undefined === config?.yAxis.dataKey) {
         return true
@@ -1202,7 +1211,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
             {isDashboard && config.table && config.table.show && config.table.showDataTableLink ? tableLink : link && link}
 
             {/* Description */}
-            {description && config.visualizationType !== 'Spark Line' && <div className='subtext'>{parse(description)}</div>}
+            {description && config.visualizationType !== 'Spark Line' && <div className={'column ' + config.isResponsiveTicks ? 'subtext--responsive-ticks' : 'subtext'}>{parse(description)}</div>}
 
             {/* buttons */}
             <MediaControls.Section classes={['download-buttons']}>
@@ -1297,6 +1306,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     isNumber,
     getTextWidth,
     twoColorPalette,
+    isEditor,
     isDebug,
     setSharedFilter,
     setSharedFilterValue,

package/src/components/AreaChart.jsx

@@ -8,52 +8,96 @@ import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import * as allCurves from '@visx/curve'
 import { AreaClosed, LinePath, Bar } from '@visx/shape'
 import { Group } from '@visx/group'
+import { bisector } from 'd3-array'
 
-const AreaChart = ({ xScale, yScale, yMax, xMax, chartRef, handleTooltipMouseOver, handleTooltipMouseOff, tooltipData }) => {
+const AreaChart = ({ xScale, yScale, yMax, xMax, getXAxisData, getYAxisData, chartRef, handleTooltipMouseOver, handleTooltipMouseOff, tooltipData, isDebug, isBrush, brushData, children }) => {
   // enable various console logs in the file
-  const DEBUG = false
+  const DEBUG = isDebug
 
   // import data from context
-  const { transformedData: data, config, handleLineType, parseDate, seriesHighlight, colorScale, rawData } = useContext(ConfigContext)
+  let { transformedData: data, config, handleLineType, parseDate, formatDate, formatNumber, seriesHighlight, colorScale, rawData } = useContext(ConfigContext)
+
+  // use brush data if it is passed in AND if this is NOT a brush chart
+  data = !isBrush && undefined !== brushData && brushData.length ? brushData : data
+
+  if (isBrush && isDebug) console.log('###AREAchart BRUSH data, xScale, yScale, yMax, xMax', data, xScale, yScale, yMax, xMax)
 
   // Draw transparent bars over the chart to get tooltip data
   // Turn DEBUG on for additional context.
   if (!data) return
 
+  // Tooltip helper for getting data to the closest date/category hovered.
+  const getXValueFromCoordinate = x => {
+    if (config.xAxis.type === 'categorical' || config.visualizationType === 'Combo') {
+      let eachBand = xScale.step()
+      let numerator = x
+      const index = Math.floor(Number(numerator) / eachBand)
+      return xScale.domain()[index - 1] // fixes off by 1 error
+    }
+
+    if (config.xAxis.type === 'date' && config.visualizationType !== 'Combo') {
+      const bisectDate = bisector(d => parseDate(d[config.xAxis.dataKey])).left
+      const x0 = xScale.invert(x)
+      const index = bisectDate(config.data, x0, 1)
+      const val = parseDate(config.data[index - 1][config.xAxis.dataKey])
+      return val
+    }
+  }
+
+  const getXAxisDates = brushDataSet => {
+    if (undefined === brushDataSet || !brushDataSet) return
+    let XAxisBrushDates = []
+    brushDataSet.forEach(function convertDateTimeNumber(key, value, brushDataSet) {
+      let tmp = getXValueFromCoordinate(xScale(value))
+      let date = formatDate(tmp)
+      XAxisBrushDates.push(date)
+    })
+    return XAxisBrushDates
+  }
+
   const handleX = d => {
     return config.xAxis.type === 'date' ? xScale(parseDate(d[config.xAxis.dataKey], false)) : xScale(d[config.xAxis.dataKey])
   }
 
   const handleY = (d, index, s = undefined) => {
-    return yScale(d[s.dataKey])
+    return isBrush ? yScale(d[s.dataKey]) / 4 : yScale(d[s.dataKey])
+  }
+
+  // prevents duplicate brush handles being rendered
+  const getFirstBrushHandleOnly = (children, index) => {
+    if (index === 0) {
+      return children
+    }
+    // else dont return the other brush handles
   }
 
   return (
     data && (
-      <ErrorBoundary component='AreaChart'>
-        <Group className='area-chart' key='area-wrapper' left={Number(config.yAxis.size)}>
-          {(config.runtime.areaSeriesKeys || config.runtime.seriesKeys).map((s, index) => {
-            let seriesData = data.map(d => {
-              return {
-                [config.xAxis.dataKey]: d[config.xAxis.dataKey],
-                [s.dataKey]: d[s.dataKey]
+      <svg>
+        <ErrorBoundary component='AreaChart'>
+          <Group className='area-chart' key='area-wrapper' left={Number(config.yAxis.size)} top={isBrush ? yMax * 1.3 : 0}>
+            {(config.runtime.areaSeriesKeys || config.series).map((s, index) => {
+              let seriesData = data.map(d => {
+                return {
+                  [config.xAxis.dataKey]: d[config.xAxis.dataKey],
+                  [s.dataKey]: d[s.dataKey]
+                }
+              })
+
+              let curveType = allCurves[s.lineType]
+              let transparentArea = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(s.dataKey) === -1
+              let displayArea = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(s.dataKey) !== -1
+
+              if (config.xAxis.type === 'date') {
+                data.map(d => xScale(parseDate(d[config.xAxis.dataKey])))
+              } else {
+                data.map(d => xScale(d[config.xAxis.dataKey]))
               }
-            })
-
-            let curveType = allCurves[s.lineType]
-            let transparentArea = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(s.dataKey) === -1
-            let displayArea = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(s.dataKey) !== -1
-
-            if (config.xAxis.type === 'date') {
-              data.map(d => xScale(parseDate(d[config.xAxis.dataKey])))
-            } else {
-              data.map(d => xScale(d[config.xAxis.dataKey]))
-            }
-
-            return (
-              <React.Fragment key={index}>
-                {/* prettier-ignore */}
-                <LinePath
+
+              return (
+                <React.Fragment key={index}>
+                  {/* prettier-ignore */}
+                  <LinePath
                   data={seriesData}
                   x={d => handleX(d)}
                   y={d => handleY(d, index, s)}
@@ -65,10 +109,10 @@ const AreaChart = ({ xScale, yScale, yMax, xMax, chartRef, handleTooltipMouseOve
                   strokeDasharray={s.type ? handleLineType(s.type) : 0}
                 />
 
-                {/* prettier-ignore */}
-                <AreaClosed
+                  {/* prettier-ignore */}
+                  <AreaClosed
                   key={'area-chart'}
-                  fill={ displayArea ? colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[s.dataKey] : s.dataKey) : '#000' : 'transparent'}
+                  fill={displayArea ? colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[s.dataKey] : s.dataKey) : '#000' : 'transparent'}
                   fillOpacity={transparentArea ? 0.25 : 0.5}
                   data={seriesData}
                   x={d => handleX(d)}
@@ -77,36 +121,17 @@ const AreaChart = ({ xScale, yScale, yMax, xMax, chartRef, handleTooltipMouseOve
                   curve={curveType}
                   strokeDasharray={s.type ? handleLineType(s.type) : 0}
                 />
+                  {getFirstBrushHandleOnly(children, index)}
+                </React.Fragment>
+              )
+            })}
 
-                {/* circles that appear on hover */}
-                {/* {tooltipData && Object.entries(tooltipData.data).length > 0 && (
-                  <circle
-                    cx={config.xAxis.type === 'categorical' ? xScale(tooltipData.data[config.xAxis.dataKey]) : xScale(parseDate(tooltipData.data[config.xAxis.dataKey]))}
-                    cy={yScale(tooltipData.data[index][1])}
-                    r={4.5}
-                    opacity={1}
-                    fillOpacity={1}
-                    fill={displayArea ? (colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[s.dataKey] : s.dataKey) : '#000') : 'transparent'}
-                    style={{ filter: 'unset', opacity: 1 }}
-                  />
-                )} */}
-              </React.Fragment>
-            )
-          })}
-
-          {/* Transparent bar for tooltips */}
-          {/* prettier-ignore */}
-          <Bar
-            width={ Number(xMax)}
-            height={ Number(yMax)}
-            fill={DEBUG ? 'red' : 'transparent'}
-            fillOpacity={0.05}
-            style={DEBUG ? { stroke: 'black', strokeWidth: 2 } : {}}
-            onMouseMove={e => handleTooltipMouseOver(e, rawData)}
-            onMouseLeave={ handleTooltipMouseOff }
-            />
-        </Group>
-      </ErrorBoundary>
+            {/* Transparent bar for tooltips - disable if AreaChart is a brush */}
+            {/* prettier-ignore */}
+            {!isBrush && <Bar width={Number(xMax)} height={Number(yMax)} fill={DEBUG ? 'red' : 'transparent'} fillOpacity={0.05} style={DEBUG ? { stroke: 'black', strokeWidth: 2 } : {}} onMouseMove={e => handleTooltipMouseOver(e, rawData)} onMouseLeave={handleTooltipMouseOff} />}
+          </Group>
+        </ErrorBoundary>
+      </svg>
     )
   )
 }