@cdc/chart 4.23.1 → 4.23.2

package/src/components/{Legend.js → Legend.jsx}

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect } from 'react'
-import Context from '../context'
+import ConfigContext from '../ConfigContext'
 import parse from 'html-react-parser'
 import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend'
 import LegendCircle from '@cdc/core/components/LegendCircle'
@@ -7,7 +7,7 @@ import LegendCircle from '@cdc/core/components/LegendCircle'
 import useLegendClasses from './../hooks/useLegendClasses'
 
 const Legend = () => {
-  const { config, legend, colorScale, seriesHighlight, highlight, highlightReset, setSeriesHighlight, dynamicLegendItems, setDynamicLegendItems, transformedData: data, setFilteredData, colorPalettes, rawData, setConfig } = useContext(Context)
+  const { config, legend, colorScale, seriesHighlight, highlight, highlightReset, setSeriesHighlight, dynamicLegendItems, setDynamicLegendItems, transformedData: data, colorPalettes, rawData, setConfig, currentViewport } = useContext(ConfigContext)
 
   const { innerClasses, containerClasses } = useLegendClasses(config)
 
@@ -106,11 +106,18 @@ const Legend = () => {
 
     return uniqeLabels
   }
+  // in small screens update config legend position.
+  useEffect(() => {
+    if (currentViewport === 'sm' || currentViewport === 'xs' || config.legend.position === 'left') {
+      setConfig({ ...config, legend: { ...config.legend, position: 'bottom' } })
+    }
+    setConfig({ ...config, legend: { ...config.legend, position: 'right' } })
+  }, [currentViewport])
 
   if (!legend) return
 
   if (!legend.dynamicLegend)
-    return (
+    return config.visualizationType !== 'Box Plot' ? (
       <aside
         style={{ marginTop: config.legend.position === 'bottom' && config.orientation === 'horizontal' ? `${config.runtime.xAxis.size}px` : '0px', marginBottom: config.legend.position === 'bottom' ? '15px' : '0px' }}
         id='legend'
@@ -172,119 +179,124 @@ const Legend = () => {
           )}
         </LegendOrdinal>
       </aside>
+    ) : (
+      <aside id='legend' className={containerClasses.join(' ')} role='region' aria-label='legend' tabIndex={0}>
+        {config.boxplot.legend.displayHowToReadText && <h3>{config.boxplot.legend.howToReadText}</h3>}
+      </aside>
     )
-
   return (
-    <aside id='legend' className={containerClasses.join(' ')} role='region' aria-label='legend' tabIndex={0}>
-      {legend.label && <h2>{parse(legend.label)}</h2>}
-      {legend.description && <p>{parse(legend.description)}</p>}
-
-      <LegendOrdinal scale={colorScale} itemDirection='row' labelMargin='0 20px 0 0' shapeMargin='0 10px 0'>
-        {labels => {
-          if (
-            Number(config.legend.dynamicLegendItemLimit) > dynamicLegendItems.length && // legend items are less than limit
-            dynamicLegendItems.length !== config.runtime.seriesLabelsAll.length
-          ) {
-            // legend items are equal to series length
-            return (
-              <select className='dynamic-legend-dropdown' onChange={e => handleDynamicLegendChange(e)}>
-                <option className={'all'} tabIndex={0} value={JSON.stringify({ text: config.legend.dynamicLegendDefaultText })}>
-                  {config.legend.dynamicLegendDefaultText}
-                </option>
-                {labels.map((label, i) => {
-                  let className = 'legend-item'
-                  let itemName = label.datum
-                  let inDynamicList = false
-
-                  // Filter excluded data keys from legend
-                  if (config.exclusions.active && config.exclusions.keys?.includes(itemName)) {
-                    return
-                  }
-
-                  if (config.runtime.seriesLabels) {
-                    let index = config.runtime.seriesLabelsAll.indexOf(itemName)
-                    itemName = config.runtime.seriesKeys[index]
-                  }
-
-                  if (seriesHighlight.length > 0 && false === seriesHighlight.includes(itemName)) {
-                    className += ' inactive'
-                  }
-
-                  dynamicLegendItems.map(listItem => {
-                    if (listItem.text === label.text) {
-                      inDynamicList = true
+    config.visualizationType !== 'Box Plot' && (
+      <aside id='legend' className={containerClasses.join(' ')} role='region' aria-label='legend' tabIndex={0}>
+        {legend.label && <h2>{parse(legend.label)}</h2>}
+        {legend.description && <p>{parse(legend.description)}</p>}
+
+        <LegendOrdinal scale={colorScale} itemDirection='row' labelMargin='0 20px 0 0' shapeMargin='0 10px 0'>
+          {labels => {
+            if (
+              Number(config.legend.dynamicLegendItemLimit) > dynamicLegendItems.length && // legend items are less than limit
+              dynamicLegendItems.length !== config.runtime.seriesLabelsAll.length
+            ) {
+              // legend items are equal to series length
+              return (
+                <select className='dynamic-legend-dropdown' onChange={e => handleDynamicLegendChange(e)}>
+                  <option className={'all'} tabIndex={0} value={JSON.stringify({ text: config.legend.dynamicLegendDefaultText })}>
+                    {config.legend.dynamicLegendDefaultText}
+                  </option>
+                  {labels.map((label, i) => {
+                    let className = 'legend-item'
+                    let itemName = label.datum
+                    let inDynamicList = false
+
+                    // Filter excluded data keys from legend
+                    if (config.exclusions.active && config.exclusions.keys?.includes(itemName)) {
+                      return
+                    }
+
+                    if (config.runtime.seriesLabels) {
+                      let index = config.runtime.seriesLabelsAll.indexOf(itemName)
+                      itemName = config.runtime.seriesKeys[index]
                     }
-                  })
 
-                  if (inDynamicList) return true
-                  let palette = colorPalettes[config.palette]
+                    if (seriesHighlight.length > 0 && false === seriesHighlight.includes(itemName)) {
+                      className += ' inactive'
+                    }
+
+                    dynamicLegendItems.map(listItem => {
+                      if (listItem.text === label.text) {
+                        inDynamicList = true
+                      }
+                    })
+
+                    if (inDynamicList) return true
+                    let palette = colorPalettes[config.palette]
+
+                    label.value = palette[dynamicLegendItems.length]
+
+                    return (
+                      <option className={className} tabIndex={0} value={JSON.stringify(label)}>
+                        {label.text}
+                      </option>
+                    )
+                  })}
+                </select>
+              )
+            } else {
+              return config.legend.dynamicLegendItemLimitMessage
+            }
+          }}
+        </LegendOrdinal>
+
+        <div className='dynamic-legend-list'>
+          {dynamicLegendItems.map((label, i) => {
+            let className = ['legend-item']
+            let itemName = label.text
+            let palette = colorPalettes[config.palette]
+
+            // Filter excluded data keys from legend
+            if (config.exclusions.active && config.exclusions.keys?.includes(itemName)) {
+              return
+            }
+
+            if (config.runtime.seriesLabels && !config.legend.dynamicLegend) {
+              let index = config.runtime.seriesLabelsAll.indexOf(itemName)
+              itemName = config.runtime.seriesKeys[index]
+            }
 
-                  label.value = palette[dynamicLegendItems.length]
+            if (seriesHighlight.length > 0 && !seriesHighlight.includes(itemName)) {
+              className.push('inactive')
+            }
 
-                  return (
-                    <option className={className} tabIndex={0} value={JSON.stringify(label)}>
+            if (seriesHighlight.length === 0 && config.legend.dynamicLegend) {
+              className.push('inactive')
+            }
+
+            return (
+              <>
+                <LegendItem className={className.join(' ')} tabIndex={0} key={`dynamic-legend-item-${i}`} alignItems='center'>
+                  <button
+                    className='btn-wrapper'
+                    onClick={() => {
+                      highlight(label)
+                    }}
+                  >
+                    <LegendCircle fill={palette[i]} config={config} />
+                    <LegendLabel align='space-between' margin='4px 0 0 4px'>
                       {label.text}
-                    </option>
-                  )
-                })}
-              </select>
+                    </LegendLabel>
+                  </button>
+                  <button onClick={() => removeDynamicLegendItem(label)}>x</button>
+                </LegendItem>
+              </>
             )
-          } else {
-            return config.legend.dynamicLegendItemLimitMessage
-          }
-        }}
-      </LegendOrdinal>
-
-      <div className='dynamic-legend-list'>
-        {dynamicLegendItems.map((label, i) => {
-          let className = ['legend-item']
-          let itemName = label.text
-          let palette = colorPalettes[config.palette]
-
-          // Filter excluded data keys from legend
-          if (config.exclusions.active && config.exclusions.keys?.includes(itemName)) {
-            return
-          }
-
-          if (config.runtime.seriesLabels && !config.legend.dynamicLegend) {
-            let index = config.runtime.seriesLabelsAll.indexOf(itemName)
-            itemName = config.runtime.seriesKeys[index]
-          }
-
-          if (seriesHighlight.length > 0 && !seriesHighlight.includes(itemName)) {
-            className.push('inactive')
-          }
-
-          if (seriesHighlight.length === 0 && config.legend.dynamicLegend) {
-            className.push('inactive')
-          }
-
-          return (
-            <>
-              <LegendItem className={className.join(' ')} tabIndex={0} key={`dynamic-legend-item-${i}`} alignItems='center'>
-                <button
-                  className='btn-wrapper'
-                  onClick={() => {
-                    highlight(label)
-                  }}
-                >
-                  <LegendCircle fill={palette[i]} config={config} />
-                  <LegendLabel align='space-between' margin='4px 0 0 4px'>
-                    {label.text}
-                  </LegendLabel>
-                </button>
-                <button onClick={() => removeDynamicLegendItem(label)}>x</button>
-              </LegendItem>
-            </>
-          )
-        })}
-      </div>
-      {seriesHighlight.length < dynamicLegendItems.length && (
-        <button className={`legend-reset legend-reset--dynamic ${config.theme}`} onClick={highlightReset} tabIndex={0}>
-          Reset
-        </button>
-      )}
-    </aside>
+          })}
+        </div>
+        {seriesHighlight.length < dynamicLegendItems.length && (
+          <button className={`legend-reset legend-reset--dynamic ${config.theme}`} onClick={highlightReset} tabIndex={0}>
+            Reset
+          </button>
+        )}
+      </aside>
+    )
   )
 }
 

package/src/components/{LineChart.tsx → LineChart.jsx}

@@ -7,12 +7,15 @@ import { Text } from '@visx/text'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 
-import Context from '../context'
+import ConfigContext from '../ConfigContext'
 
 import useRightAxis from '../hooks/useRightAxis'
 
 export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData, xMax, yMax, seriesStyle = 'Line' }) {
-  const { colorPalettes, transformedData: data, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, updateConfig } = useContext<any>(Context)
+  const { colorPalettes, transformedData: data, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, isNumber, cleanData, updateConfig } = useContext(ConfigContext)
+  // Just do this once up front otherwise we end up
+  // calling clean several times on same set of data (TT)
+  const cleanedData = cleanData(data, config.xAxis.dataKey)
   const { yScaleRight } = useRightAxis({ config, yMax, data, updateConfig })
 
   const handleLineType = lineType => {
@@ -29,6 +32,9 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
   }
 
   const handleAxisFormating = (axis = 'left', label, value) => {
+    // if this is an x axis category/date value return without doing any formatting.
+    if (label === config.runtime.xAxis.label) return value
+
     axis = String(axis).toLocaleLowerCase()
     if (label) {
       return `${label}: ${formatNumber(value, axis)}`
@@ -38,7 +44,9 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
 
   return (
     <ErrorBoundary component='LineChart'>
-      <Group left={config.runtime.yAxis.size}>
+      <Group left={config.runtime.yAxis.size ? parseInt(config.runtime.yAxis.size) : 66}>
+        {' '}
+        {/* left - expects a number not a string */}
         {(config.runtime.lineSeriesKeys || config.runtime.seriesKeys).map((seriesKey, index) => {
           let lineType = config.series.filter(item => item.dataKey === seriesKey)[0].type
           const seriesData = config.series.filter(item => item.dataKey === seriesKey)
@@ -50,7 +58,7 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
               opacity={config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(seriesKey) === -1 ? 0.5 : 1}
               display={config.legend.behavior === 'highlight' || (seriesHighlight.length === 0 && !config.legend.dynamicLegend) || seriesHighlight.indexOf(seriesKey) !== -1 ? 'block' : 'none'}
             >
-              {data.map((d, dataIndex) => {
+              {cleanedData.map((d, dataIndex) => {
                 // Find the series object from the config.series array that has a dataKey matching the seriesKey variable.
                 const series = config.series.find(({ dataKey }) => dataKey === seriesKey)
                 const { axis } = series
@@ -73,11 +81,18 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
                     ${xAxisTooltip}
                   </div>`
                 let circleRadii = 4.5
+
                 return (
                   d[seriesKey] !== undefined &&
                   d[seriesKey] !== '' &&
                   d[seriesKey] !== null && (
+                    // isNumber(d[seriesKey]) &&
+                    // isNumber(getYAxisData(d, seriesKey)) &&
+                    // isNumber(getXAxisData(d)) &&
+                    // isNumber(yScaleRight(getXAxisData(d))) &&
+                    // isNumber(yScale(getXAxisData(d))) &&
                     <Group key={`series-${seriesKey}-point-${dataIndex}`}>
+                      {/* Render legend */}
                       <Text
                         display={config.labels ? 'block' : 'none'}
                         x={xScale(getXAxisData(d))}
@@ -91,12 +106,12 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
                       <circle
                         key={`${seriesKey}-${dataIndex}`}
                         r={circleRadii}
-                        cx={xScale(getXAxisData(d))}
+                        cx={Number(xScale(getXAxisData(d)))}
                         cy={seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(getYAxisData(d, seriesKey))}
                         fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
                         style={{ fill: colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000' }}
-                        data-tip={tooltip}
-                        data-for={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+                        data-tooltip-html={tooltip}
+                        data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
                       />
                     </Group>
                   )
@@ -105,7 +120,7 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
 
               <LinePath
                 curve={allCurves.curveLinear}
-                data={data}
+                data={cleanedData}
                 x={d => xScale(getXAxisData(d))}
                 y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(getYAxisData(d, seriesKey)))}
                 stroke={
@@ -122,14 +137,14 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
                 shapeRendering='geometricPrecision'
                 strokeDasharray={lineType ? handleLineType(lineType) : 0}
                 defined={(item, i) => {
-                  return item[config.runtime.seriesLabels[seriesKey]] !== '' && item[config.runtime.seriesLabels[seriesKey]] !== null
+                  return item[config.runtime.seriesLabels[seriesKey]] !== '' && item[config.runtime.seriesLabels[seriesKey]] !== null && item[config.runtime.seriesLabels[seriesKey]] !== undefined
                 }}
               />
               {config.animate && (
                 <LinePath
                   className='animation'
                   curve={allCurves.curveLinear}
-                  data={data}
+                  data={cleanedData}
                   x={d => xScale(getXAxisData(d))}
                   y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(getYAxisData(d, seriesKey)))}
                   stroke='#fff'
@@ -138,7 +153,7 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
                   shapeRendering='geometricPrecision'
                   strokeDasharray={lineType ? handleLineType(lineType) : 0}
                   defined={(item, i) => {
-                    return item[config.runtime.seriesLabels[seriesKey]] !== '' && item[config.runtime.seriesLabels[seriesKey]] !== null
+                    return isNumber(item[config.runtime.seriesLabels[seriesKey]])
                   }}
                 />
               )}
@@ -165,7 +180,6 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
             </Group>
           )
         })}
-
         {/* Message when dynamic legend and nothing has been picked */}
         {config.legend.dynamicLegend && seriesHighlight.length === 0 && (
           <Text x={xMax / 2} y={yMax / 2} fill='black' textAnchor='middle' color='black'>