@cdc/chart 4.23.3 → 4.23.5

package/src/components/Legend.jsx

@@ -5,9 +5,10 @@ import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend'
 import LegendCircle from '@cdc/core/components/LegendCircle'
 
 import useLegendClasses from './../hooks/useLegendClasses'
+import { useHighlightedBars } from '../hooks/useHighlightedBars'
 
 const Legend = () => {
-  const { config, legend, colorScale, seriesHighlight, highlight, twoColorPalette, highlightReset, setSeriesHighlight, dynamicLegendItems, setDynamicLegendItems, transformedData: data, colorPalettes, rawData, setConfig, currentViewport } = useContext(ConfigContext)
+  const { config, legend, colorScale, seriesHighlight, highlight, twoColorPalette, tableData, highlightReset, setSeriesHighlight, dynamicLegendItems, setDynamicLegendItems, transformedData: data, colorPalettes, rawData, setConfig, currentViewport } = useContext(ConfigContext)
 
   const { innerClasses, containerClasses } = useLegendClasses(config)
 
@@ -103,14 +104,14 @@ const Legend = () => {
     if (config.visualizationType === 'Bar' && config.visualizationSubType === 'regular' && colorCode && config.series?.length === 1) {
       let palette = colorPalettes[config.palette]
 
-      while (data.length > palette.length) {
+      while (tableData.length > palette.length) {
         palette = palette.concat(palette)
       }
       palette = palette.slice(0, data.length)
       //store uniq values to Set by colorCode
       const set = new Set()
 
-      data.forEach(d => set.add(d[colorCode]))
+      tableData.forEach(d => set.add(d[colorCode]))
 
       // create labels with uniq values
       const uniqeLabels = Array.from(set).map((val, i) => {
@@ -128,11 +129,15 @@ const Legend = () => {
     return defaultLabels
   }
 
-  const isBottomOrSmallViewport = config.legend.position === 'bottom' || currentViewport === 'sm' || currentViewport === 'xs'
+  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'
 
+  const { HighLightedBarUtils } = useHighlightedBars(config)
+
+  let highLightedLegendItems = HighLightedBarUtils.findDuplicates(config.highlightedBarValues)
+
   if (!legend) return null
 
   if (!legend.dynamicLegend)
@@ -182,6 +187,37 @@ const Legend = () => {
                   </LegendItem>
                 )
               })}
+
+              {highLightedLegendItems.map((bar, i) => {
+                // if duplicates only return first item
+                let className = 'legend-item'
+                let itemName = bar.legendLabel
+
+                if (!itemName) return
+                if (seriesHighlight.length > 0 && false === seriesHighlight.includes(itemName)) {
+                  className += ' inactive'
+                }
+                return (
+                  <LegendItem
+                    className={className}
+                    tabIndex={0}
+                    key={`legend-quantile-${i}`}
+                    onKeyPress={e => {
+                      if (e.key === 'Enter') {
+                        highlight(bar.legendLabel)
+                      }
+                    }}
+                    onClick={() => {
+                      highlight(bar.legendLabel)
+                    }}
+                  >
+                    <LegendCircle fill='transparent' borderColor={bar.color ? bar.color : `rgba(255, 102, 1)`} />{' '}
+                    <LegendLabel align='left' margin='0 0 0 4px'>
+                      {bar.legendLabel ? bar.legendLabel : bar.value}
+                    </LegendLabel>
+                  </LegendItem>
+                )
+              })}
               {seriesHighlight.length > 0 && (
                 <button className={`legend-reset ${config.theme}`} onClick={labels => highlightReset(labels)} tabIndex={0}>
                   Reset

package/src/components/LineChart.jsx

@@ -6,16 +6,12 @@ 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'
 
 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, handleLineType } = 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 { colorPalettes, transformedData: data, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, isNumber, updateConfig, handleLineType } = useContext(ConfigContext)
+
   const { yScaleRight } = useRightAxis({ config, yMax, data, updateConfig })
 
   const handleAxisFormating = (axis = 'left', label, value) => {
@@ -45,14 +41,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]
@@ -72,16 +67,11 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
                 return (
                   d[seriesKey] !== undefined &&
                   d[seriesKey] !== '' &&
-                  d[seriesKey] !== null && (
+                  d[seriesKey] !== null &&
+                  isNumber(d[seriesKey]) && (
                     <Group key={`series-${seriesKey}-point-${dataIndex}`}>
                       {/* Render legend */}
-                      <Text
-                        display={config.labels ? 'block' : 'none'}
-                        x={xScale(getXAxisData(d))}
-                        y={seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(getYAxisData(d, seriesKey))}
-                        fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
-                        textAnchor='middle'
-                      >
+                      <Text display={config.labels ? 'block' : 'none'} x={xScale(getXAxisData(d))} y={seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(getYAxisData(d, seriesKey))} fill={'#000'} textAnchor='middle'>
                         {formatNumber(d[seriesKey], 'left')}
                       </Text>
 
@@ -99,10 +89,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={
@@ -116,7 +105,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
@@ -125,8 +113,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'
@@ -139,7 +127,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 => {