@cdc/chart 4.23.2 → 4.23.4

package/src/components/Legend.jsx

@@ -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, colorPalettes, rawData, setConfig, currentViewport } = useContext(ConfigContext)
+  const { config, legend, colorScale, seriesHighlight, highlight, twoColorPalette, highlightReset, setSeriesHighlight, dynamicLegendItems, setDynamicLegendItems, transformedData: data, colorPalettes, rawData, setConfig, currentViewport } = useContext(ConfigContext)
 
   const { innerClasses, containerClasses } = useLegendClasses(config)
 
@@ -25,12 +25,14 @@ const Legend = () => {
       let tmp = {}
       colsToKeep.map(col => {
         tmp[col] = isNaN(dataItem[col]) ? dataItem[col] : dataItem[col]
+        return null
       })
       return tmp
     })
 
     colsToKeep.map(col => {
       tmpLabels[col] = col
+      return null
     })
 
     if (dynamicLegendItems.length > 0) {
@@ -43,7 +45,7 @@ const Legend = () => {
         }
       })
     }
-  }, [dynamicLegendItems])
+  }, [dynamicLegendItems]) // eslint-disable-line
 
   useEffect(() => {
     if (dynamicLegendItems.length === 0) {
@@ -53,7 +55,9 @@ const Legend = () => {
       config.runtime.seriesLabelsAll.map(item => {
         resetSeriesNames.map(col => {
           tmpLabels[col] = col
+          return null
         })
+        return null
       })
 
       setConfig({
@@ -65,7 +69,7 @@ const Legend = () => {
         }
       })
     }
-  }, [dynamicLegendItems])
+  }, [dynamicLegendItems]) // eslint-disable-line
 
   const removeDynamicLegendItem = label => {
     let newLegendItems = dynamicLegendItems.filter(item => item.text !== label.text)
@@ -77,67 +81,75 @@ const Legend = () => {
     setDynamicLegendItems([...dynamicLegendItems, JSON.parse(e.target.value)])
   }
 
-  const createLegendLabels = (data, defaultLabels) => {
+  const createLegendLabels = defaultLabels => {
     const colorCode = config.legend?.colorCode
-    if (config.visualizationType !== 'Bar' || config.visualizationSubType !== 'regular' || !colorCode || config.series?.length > 1) {
-      return defaultLabels
-    }
-    let palette = colorPalettes[config.palette]
+    if (config.visualizationType === 'Deviation Bar') {
+      const [belowColor, aboveColor] = twoColorPalette[config.twoColor.palette]
+      const labelBelow = {
+        datum: 'X',
+        index: 0,
+        text: `Below ${config.xAxis.targetLabel}`,
+        value: belowColor
+      }
+      const labelAbove = {
+        datum: 'X',
+        index: 1,
+        text: `Above ${config.xAxis.targetLabel}`,
+        value: aboveColor
+      }
 
-    while (data.length > palette.length) {
-      palette = palette.concat(palette)
+      return [labelBelow, labelAbove]
     }
-    palette = palette.slice(0, data.length)
-    //store uniq values to Set by colorCode
-    const set = new Set()
-
-    data.forEach(d => set.add(d[colorCode]))
-
-    // create labels with uniq values
-    const uniqeLabels = Array.from(set).map((val, i) => {
-      const newLabel = {
-        datum: val,
-        index: i,
-        text: val,
-        value: palette[i]
+    if (config.visualizationType === 'Bar' && config.visualizationSubType === 'regular' && colorCode && config.series?.length === 1) {
+      let palette = colorPalettes[config.palette]
+
+      while (data.length > palette.length) {
+        palette = palette.concat(palette)
       }
-      return newLabel
-    })
+      palette = palette.slice(0, data.length)
+      //store uniq values to Set by colorCode
+      const set = new Set()
+
+      data.forEach(d => set.add(d[colorCode]))
+
+      // create labels with uniq values
+      const uniqeLabels = Array.from(set).map((val, i) => {
+        const newLabel = {
+          datum: val,
+          index: i,
+          text: val,
+          value: palette[i]
+        }
+        return newLabel
+      })
 
-    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' } })
+      return uniqeLabels
     }
-    setConfig({ ...config, legend: { ...config.legend, position: 'right' } })
-  }, [currentViewport])
+    return defaultLabels
+  }
+
+  const isBottomOrSmallViewport = config.legend.position === 'bottom' || currentViewport === 'sm' || currentViewport === 'xs' || currentViewport === 'xxs'
+  const isHorizontal = config.orientation === 'horizontal'
+  const marginTop = isBottomOrSmallViewport && isHorizontal ? `${config.runtime.xAxis.size}px` : '0px'
+  const marginBottom = isBottomOrSmallViewport ? '15px' : '0px'
 
-  if (!legend) return
+  if (!legend) return null
 
   if (!legend.dynamicLegend)
     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'
-        className={containerClasses.join(' ')}
-        role='region'
-        aria-label='legend'
-        tabIndex={0}
-      >
+      <aside style={{ marginTop, marginBottom }} 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 => (
             <div className={innerClasses.join(' ')}>
-              {createLegendLabels(data, labels).map((label, i) => {
+              {createLegendLabels(labels).map((label, i) => {
                 let className = 'legend-item'
                 let itemName = label.datum
 
                 // Filter excluded data keys from legend
                 if (config.exclusions.active && config.exclusions.keys?.includes(itemName)) {
-                  return
+                  return null
                 }
 
                 if (config.runtime.seriesLabels) {
@@ -209,7 +221,7 @@ const Legend = () => {
 
                     // Filter excluded data keys from legend
                     if (config.exclusions.active && config.exclusions.keys?.includes(itemName)) {
-                      return
+                      return null
                     }
 
                     if (config.runtime.seriesLabels) {
@@ -225,6 +237,7 @@ const Legend = () => {
                       if (listItem.text === label.text) {
                         inDynamicList = true
                       }
+                      return null
                     })
 
                     if (inDynamicList) return true
@@ -254,7 +267,7 @@ const Legend = () => {
 
             // Filter excluded data keys from legend
             if (config.exclusions.active && config.exclusions.keys?.includes(itemName)) {
-              return
+              return null
             }
 
             if (config.runtime.seriesLabels && !config.legend.dynamicLegend) {

package/src/components/LineChart.jsx

@@ -6,34 +6,18 @@ import { LinePath } from '@visx/shape'
 import { Text } from '@visx/text'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-
 import ConfigContext from '../ConfigContext'
-
 import useRightAxis from '../hooks/useRightAxis'
+import isNumber from '@cdc/core/helpers/isNumber'
 
 export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData, xMax, yMax, seriesStyle = 'Line' }) {
-  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 { colorPalettes, transformedData: data, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, isNumber, updateConfig, handleLineType } = useContext(ConfigContext)
 
-  const handleLineType = lineType => {
-    switch (lineType) {
-      case 'dashed-sm':
-        return '5 5'
-      case 'dashed-md':
-        return '10 5'
-      case 'dashed-lg':
-        return '15 5'
-      default:
-        return 0
-    }
-  }
+  const { yScaleRight } = useRightAxis({ config, yMax, data, updateConfig })
 
   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
+    // if (label === config.runtime.xAxis.label) return value
 
     axis = String(axis).toLocaleLowerCase()
     if (label) {
@@ -58,14 +42,13 @@ 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'}
             >
-              {cleanedData.map((d, dataIndex) => {
+              {data.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
 
                 const xAxisValue = config.runtime.xAxis.type === 'date' ? formatDate(parseDate(d[config.runtime.xAxis.dataKey])) : d[config.runtime.xAxis.dataKey]
                 const yAxisValue = getYAxisData(d, seriesKey)
-
                 const hasMultipleSeries = Object.keys(config.runtime.seriesLabels).length > 1
                 const labeltype = axis === 'Right' ? 'rightLabel' : 'label'
                 let label = config.runtime.yAxis[labeltype]
@@ -85,12 +68,8 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
                 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))) &&
+                  d[seriesKey] !== null &&
+                  isNumber(d[seriesKey]) && (
                     <Group key={`series-${seriesKey}-point-${dataIndex}`}>
                       {/* Render legend */}
                       <Text
@@ -100,7 +79,7 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
                         fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
                         textAnchor='middle'
                       >
-                        {formatNumber(d[seriesKey])}
+                        {formatNumber(d[seriesKey], 'left')}
                       </Text>
 
                       <circle
@@ -117,10 +96,9 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
                   )
                 )
               })}
-
               <LinePath
-                curve={allCurves.curveLinear}
-                data={cleanedData}
+                curve={allCurves[seriesData[0].lineType]}
+                data={data}
                 x={d => xScale(getXAxisData(d))}
                 y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(getYAxisData(d, seriesKey)))}
                 stroke={
@@ -134,7 +112,6 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
                 }
                 strokeWidth={2}
                 strokeOpacity={1}
-                shapeRendering='geometricPrecision'
                 strokeDasharray={lineType ? handleLineType(lineType) : 0}
                 defined={(item, i) => {
                   return item[config.runtime.seriesLabels[seriesKey]] !== '' && item[config.runtime.seriesLabels[seriesKey]] !== null && item[config.runtime.seriesLabels[seriesKey]] !== undefined
@@ -143,8 +120,8 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
               {config.animate && (
                 <LinePath
                   className='animation'
-                  curve={allCurves.curveLinear}
-                  data={cleanedData}
+                  curve={seriesData.lineType}
+                  data={data}
                   x={d => xScale(getXAxisData(d))}
                   y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(getYAxisData(d, seriesKey)))}
                   stroke='#fff'
@@ -157,7 +134,6 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
                   }}
                 />
               )}
-
               {/* Render series labels at end if each line if selected in the editor */}
               {config.showLineSeriesLabels &&
                 (config.runtime.lineSeriesKeys || config.runtime.seriesKeys).map(seriesKey => {