@cdc/chart 4.24.7 → 4.24.9

package/src/components/EditorPanel/{useEditorPermissions.js → useEditorPermissions.ts}

@@ -11,6 +11,7 @@ export const useEditorPermissions = () => {
     'Area Chart',
     'Bar',
     'Box Plot',
+    'Bump Chart',
     'Combo',
     'Deviation Bar',
     'Forecasting',
@@ -23,7 +24,19 @@ export const useEditorPermissions = () => {
     'Sankey'
 ]
 
-  const headerColors = ['theme-blue', 'theme-purple', 'theme-brown', 'theme-teal', 'theme-pink', 'theme-orange', 'theme-slate', 'theme-indigo', 'theme-cyan', 'theme-green', 'theme-amber']
+  const headerColors = [
+    'theme-blue',
+    'theme-purple',
+    'theme-brown',
+    'theme-teal',
+    'theme-pink',
+    'theme-orange',
+    'theme-slate',
+    'theme-indigo',
+    'theme-cyan',
+    'theme-green',
+    'theme-amber'
+  ]
 
   const visSupportsDateCategoryAxis = () => {
     const disabledCharts = ['Forest Plot', 'Sankey']
@@ -44,13 +57,30 @@ export const useEditorPermissions = () => {
   }
 
   const visHasLabelOnData = () => {
-    const disabledCharts = ['Area Chart', 'Box Plot', 'Pie', 'Scatter Plot', 'Forest Plot', 'Spark Line', 'Sankey']
+    const disabledCharts = [
+      'Area Chart',
+      'Box Plot',
+      'Pie',
+      'Scatter Plot',
+      'Forest Plot',
+      'Spark Line',
+      'Sankey',
+      'Bump Chart'
+    ]
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visCanAnimate = () => {
-    const disabledCharts = ['Area Chart', 'Scatter Plot', 'Box Plot', 'Forest Plot', 'Spark Line', 'Sankey']
+    const disabledCharts = [
+      'Area Chart',
+      'Scatter Plot',
+      'Box Plot',
+      'Forest Plot',
+      'Spark Line',
+      'Sankey',
+      'Bump Chart'
+    ]
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -72,7 +102,14 @@ export const useEditorPermissions = () => {
 
   const visHasNumbersOnBars = () => {
     if (visualizationType === 'Forest Plot') return false
-    if (config.orientation === 'horizontal' && (config.yAxis.labelPlacement === 'Below Bar' || config.yAxis.labelPlacement === 'On Date/Category Axis' || config.visualizationType === 'Paired Bar' || config.visualizationType === 'Deviation Bar')) return true
+    if (
+      config.orientation === 'horizontal' &&
+      (config.yAxis.labelPlacement === 'Below Bar' ||
+        config.yAxis.labelPlacement === 'On Date/Category Axis' ||
+        config.visualizationType === 'Paired Bar' ||
+        config.visualizationType === 'Deviation Bar')
+    )
+      return true
     return false
   }
 
@@ -104,13 +141,17 @@ export const useEditorPermissions = () => {
     }
   }
   const visHasBrushChart = () => {
+    return false
+    if (config.xAxis.type === 'categorical') return false
     return ['Line', 'Bar', 'Area Chart', 'Combo'].includes(visualizationType) && orientation === 'vertical'
   }
 
   const visHasBarBorders = () => {
     const disabledCharts = ['Box Plot', 'Scatter Plot', 'Pie', 'Line']
     if (disabledCharts.includes(visualizationType)) return false
-    return series?.some(series => series.type === 'Bar' || series.type === 'Paired Bar' || series.type === 'Deviation Bar')
+    return series?.some(
+      series => series.type === 'Bar' || series.type === 'Paired Bar' || series.type === 'Deviation Bar'
+    )
   }
 
   const visHasDataCutoff = () => {
@@ -134,6 +175,9 @@ export const useEditorPermissions = () => {
   const visHasLegendAxisAlign = () => {
     return visualizationType === 'Bar' && visualizationSubType === 'stacked' && config.legend.behavior === 'isolate'
   }
+  const visHasLegendColorCategory = () => {
+    return visualizationType === 'Bar' && visualizationSubType === 'regular' && config.series?.length === 1
+  }
 
   const visSupportsTooltipOpacity = () => {
     const disabledCharts = ['Spark Line', 'Sankey']
@@ -166,7 +210,7 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsDateCategoryAxisLabel = () => {
-    const disabledCharts = ['Forest Plot', 'Spark Line']
+    const disabledCharts = ['Forest Plot', 'Spark Line', 'Bump Chart']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -248,7 +292,7 @@ export const useEditorPermissions = () => {
 
   // implement later
   const visSupportsValueAxisLabels = () => {
-    const disabledCharts = ['Forest Plot']
+    const disabledCharts = ['Forest Plot', 'Bump Chart']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -271,6 +315,12 @@ export const useEditorPermissions = () => {
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
+  const visSupportsMobileChartHeight = () => {
+    // TODO: this is a soft release. Support should eventually match visSupportsChartHeight
+    const enabledCharts = ['Bar', 'Line', 'Combo', 'Area Chart']
+    if (enabledCharts.includes(visualizationType)) return true
+    return false
+  }
 
   const visSupportsLeftValueAxis = () => {
     const disabledCharts = ['Spark Line', 'Sankey']
@@ -285,7 +335,7 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsDateCategoryHeight = () => {
-    const disabledCharts = ['Spark Line', 'Sankey']
+    const disabledCharts = ['Spark Line', 'Sankey', 'Bump Chart']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -295,27 +345,32 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsReactTooltip = () => {
-    if (['Deviation Bar', 'Box Plot', 'Scatter Plot', 'Paired Bar'].includes(visualizationType) || (visualizationType === 'Bar' && config.tooltips.singleSeries)) {
+    if (config.yAxis.type === 'categorical') return true
+    if (
+      ['Deviation Bar', 'Box Plot', 'Scatter Plot', 'Paired Bar'].includes(visualizationType) ||
+      (visualizationType === 'Bar' && config.tooltips.singleSeries)
+    ) {
       return true
     }
   }
 
   const visSupportsPreliminaryData = () => {
-    // check if Line added in Combo
-    const lineExist = config?.series.some(item => ['Line', 'dashed-sm', 'dashed-md', 'dashed-lg'].includes(item?.type))
-    if (visualizationType === 'Line') {
-      return true
-    }
-    if (visualizationType === 'Bar' && visualizationSubType === 'regular') {
+    if (['Line', 'Bar', 'Combo'].includes(visualizationType)) {
       return true
     }
 
-    if (visualizationType === 'Combo') {
-      return true
-    }
     return false
   }
 
+  const visSupportsDynamicSeries = () => {
+    return (
+      visualizationType === 'Line' ||
+      visualizationType === 'Bar' ||
+      visualizationType === 'Scatter Plot' ||
+      visualizationType === 'Area Chart'
+    )
+  }
+
   const visHasSingleSeriesTooltip = () => {
     if (visualizationType === 'Bar' || visualizationType === 'Line') {
       return true
@@ -326,6 +381,18 @@ export const useEditorPermissions = () => {
     return false
   }
 
+  const visHasCategoricalAxis = () => {
+    if (
+      (visualizationType === 'Line' ||
+        visualizationType === 'Bar' ||
+        visualizationType === 'Combo' ||
+        visualizationType === 'Area Chart') &&
+      config.yAxis.type === 'categorical' &&
+      orientation === 'vertical'
+    )
+      return true
+  }
+
   return {
     enabledChartTypes,
     headerColors,
@@ -337,12 +404,14 @@ export const useEditorPermissions = () => {
     visHasDataSuppression,
     visHasLegend,
     visHasLegendAxisAlign,
+    visHasLegendColorCategory,
     visHasBrushChart,
     visHasNumbersOnBars,
     visHasaAdditionalLabelsOnBars,
     visSupportsBarSpace,
     visSupportsBarThickness,
     visSupportsChartHeight,
+    visSupportsMobileChartHeight,
     visSupportsDateCategoryAxis,
     visSupportsDateCategoryAxisLabel,
     visSupportsDateCategoryAxisLine,
@@ -372,6 +441,8 @@ export const useEditorPermissions = () => {
     visSupportsReactTooltip,
     visSupportsValueAxisMax,
     visSupportsValueAxisMin,
-    visHasSingleSeriesTooltip
+    visSupportsDynamicSeries,
+    visHasSingleSeriesTooltip,
+    visHasCategoricalAxis
   }
 }

package/src/components/Legend/Legend.Component.tsx

@@ -1,16 +1,20 @@
 import parse from 'html-react-parser'
 import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend'
-import LegendCircle from '@cdc/core/components/LegendCircle'
+import LegendShape from '@cdc/core/components/LegendShape'
 import Button from '@cdc/core/components/elements/Button'
 import useLegendClasses from '../../hooks/useLegendClasses'
 import { useHighlightedBars } from '../../hooks/useHighlightedBars'
 import { handleLineType } from '../../helpers/handleLineType'
-import { getMarginTop } from './helpers/index'
+
+import { getMarginTop, getGradientConfig, getMarginBottom } from './helpers/index'
 import { Line } from '@visx/shape'
 import { Label } from '../../types/Label'
 import { ChartConfig } from '../../types/ChartConfig'
 import { ColorScale } from '../../types/ChartContext'
 import { forwardRef } from 'react'
+import LegendSuppression from './Legend.Suppression'
+import LegendGradient from '@cdc/core/components/Legend/Legend.Gradient'
+import { DimensionsType } from '@cdc/core/types/Dimensions'
 
 export interface LegendProps {
   colorScale: ColorScale
@@ -22,209 +26,197 @@ export interface LegendProps {
   ref: React.Ref<() => void>
   seriesHighlight: string[]
   skipId: string
+  dimensions: DimensionsType // for responsive width legend
+  getTextWidth: (text: string, font: string) => string
 }
 
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
-const Legend: React.FC<LegendProps> = forwardRef(({ config, colorScale, seriesHighlight, highlight, highlightReset, currentViewport, formatLabels, skipId = 'legend' }, ref) => {
-  const { innerClasses, containerClasses } = useLegendClasses(config)
-  const { runtime, legend } = config
-
-  if (!legend) return null
-  const isBottomOrSmallViewport = legend?.position === 'bottom' || (['sm', 'xs', 'xxs'].includes(currentViewport) && !legend.hide)
-
-  const legendClasses = {
-    marginBottom: isBottomOrSmallViewport ? '15px' : '0px',
-    marginTop: isBottomOrSmallViewport && config.orientation === 'horizontal' ? `${config.yAxis.label && config.isResponsiveTicks ? config.dynamicMarginTop : config.runtime.xAxis.size}px` : getMarginTop(isBottomOrSmallViewport, config.brush.active)
-  }
-
-  const { HighLightedBarUtils } = useHighlightedBars(config)
-
-  let highLightedLegendItems = HighLightedBarUtils.findDuplicates(config.highlightedBarValues)
-
-  return (
-    <aside ref={ref} style={legendClasses} id={skipId || 'legend'} className={containerClasses.join(' ')} role='region' aria-label='legend' tabIndex={0}>
-      {legend.label && <h3>{parse(legend.label)}</h3>}
-      {legend.description && <p>{parse(legend.description)}</p>}
+const Legend: React.FC<LegendProps> = forwardRef(
+  (
+    {
+      config,
+      colorScale,
+      seriesHighlight,
+      highlight,
+      highlightReset,
+      currentViewport,
+      formatLabels,
+      skipId = 'legend',
+      dimensions,
+      getTextWidth
+    },
+    ref
+  ) => {
+    const { innerClasses, containerClasses } = useLegendClasses(config)
+    const { runtime, legend } = config
+
+    const isBottomOrSmallViewport =
+      legend?.position === 'bottom' || (['sm', 'xs', 'xxs'].includes(currentViewport) && !legend.hide)
+
+    const legendClasses = {
+      marginBottom: getMarginBottom(isBottomOrSmallViewport, config),
+
+      marginTop:
+        isBottomOrSmallViewport && config.orientation === 'horizontal'
+          ? `${config.yAxis.label && config.isResponsiveTicks ? config.dynamicMarginTop : config.runtime.xAxis.size}px`
+          : getMarginTop(isBottomOrSmallViewport, config.brush.active, legend)
+    }
+
+    const { HighLightedBarUtils } = useHighlightedBars(config)
+    let highLightedLegendItems = HighLightedBarUtils.findDuplicates(config.highlightedBarValues)
+    if (!legend) return null
+    return (
+      <aside
+        ref={ref}
+        style={legendClasses}
+        id={skipId || 'legend'}
+        className={containerClasses.join(' ')}
+        role='region'
+        aria-label='legend'
+        tabIndex={0}
+      >
+        {legend.label && <h3>{parse(legend.label)}</h3>}
+        {legend.description && <p>{parse(legend.description)}</p>}
+        <LegendGradient
+          getTextWidth={getTextWidth}
+          config={config}
+          {...getGradientConfig(config, formatLabels, colorScale)}
+          dimensions={dimensions}
+          currentViewport={currentViewport}
+        />
+
+        <LegendOrdinal scale={colorScale} itemDirection='row' labelMargin='0 20px 0 0' shapeMargin='0 10px 0'>
+          {labels => {
+            return (
+              <>
+                <div className={innerClasses.join(' ')}>
+                  {formatLabels(labels as Label[]).map((label, i) => {
+                    let className = ['legend-item', `legend-text--${label.text.replace(' ', '').toLowerCase()}`]
+                    let itemName = label.datum
+
+                    // Filter excluded data keys from legend
+                    if (config.exclusions.active && config.exclusions.keys?.includes(itemName)) {
+                      return null
+                    }
 
-      <LegendOrdinal scale={colorScale} itemDirection='row' labelMargin='0 20px 0 0' shapeMargin='0 10px 0'>
-        {labels => {
-          return (
-            <>
-              <div className={innerClasses.join(' ')}>
-                {formatLabels(labels as Label[]).map((label, i) => {
-                  let className = ['legend-item', `legend-text--${label.text.replace(' ', '').toLowerCase()}`]
-                  let itemName = label.datum
+                    if (runtime.seriesLabels) {
+                      let index = config.runtime.seriesLabelsAll.indexOf(itemName)
+                      itemName = config.runtime.seriesKeys[index]
 
-                  // Filter excluded data keys from legend
-                  if (config.exclusions.active && config.exclusions.keys?.includes(itemName)) {
-                    return null
-                  }
+                      if (runtime?.forecastingSeriesKeys?.length > 0) {
+                        itemName = label.text
+                      }
+                    }
 
-                  if (runtime.seriesLabels) {
-                    let index = config.runtime.seriesLabelsAll.indexOf(itemName)
-                    itemName = config.runtime.seriesKeys[index]
+                    if (seriesHighlight.length > 0 && false === seriesHighlight.includes(itemName)) {
+                      className.push('inactive')
+                    }
 
-                    if (runtime?.forecastingSeriesKeys?.length > 0) {
-                      itemName = label.text
+                    if (config.legend.style === 'gradient') {
+                      return <></>
                     }
-                  }
-
-                  if (seriesHighlight.length > 0 && false === seriesHighlight.includes(itemName)) {
-                    className.push('inactive')
-                  }
-
-                  return (
-                    <LegendItem
-                      className={className.join(' ')}
-                      tabIndex={0}
-                      key={`legend-quantile-${i}`}
-                      onKeyDown={e => {
-                        if (e.key === 'Enter') {
+
+                    return (
+                      <LegendItem
+                        className={className.join(' ')}
+                        tabIndex={0}
+                        key={`legend-quantile-${i}`}
+                        onKeyDown={e => {
+                          if (e.key === 'Enter') {
+                            e.preventDefault()
+                            highlight(label)
+                          }
+                        }}
+                        onClick={e => {
                           e.preventDefault()
                           highlight(label)
-                        }
-                      }}
-                      onClick={e => {
-                        e.preventDefault()
-                        highlight(label)
-                      }}
-                      role='button'
-                    >
-                      <div>
-                        {config.visualizationType === 'Line' && config.legend.lineMode ? (
-                          <svg width={40} height={20}>
-                            <Line from={{ x: 10, y: 10 }} to={{ x: 40, y: 10 }} stroke={label.value} strokeWidth={2} strokeDasharray={handleLineType(config.series[i]?.type ? config.series[i]?.type : '')} />
-                          </svg>
-                        ) : (
-                          <div style={{ display: 'flex', flexDirection: 'column' }}>
-                            <LegendCircle viewport={currentViewport} margin='0' fill={label.value} display={true} />
-                          </div>
-                        )}
-                      </div>
-
-                      <LegendLabel align='left' margin='0 0 0 4px'>
-                        {label.text}
-                      </LegendLabel>
-                    </LegendItem>
-                  )
-                })}
-
-                {highLightedLegendItems.map((bar, i) => {
-                  // if duplicates only return first item
-                  let className = 'legend-item'
-                  let itemName = bar.legendLabel
-
-                  if (!itemName) return false
-                  if (seriesHighlight.length > 0 && false === seriesHighlight.includes(itemName)) {
-                    className += ' inactive'
-                  }
-                  return (
-                    <LegendItem
-                      className={className}
-                      tabIndex={0}
-                      key={`legend-quantile-${i}`}
-                      onKeyDown={e => {
-                        if (e.key === 'Enter') {
+                        }}
+                        role='button'
+                      >
+                        <div>
+                          {config.visualizationType === 'Line' && config.legend.style === 'lines' ? (
+                            <svg width={40} height={20}>
+                              <Line
+                                from={{ x: 10, y: 10 }}
+                                to={{ x: 40, y: 10 }}
+                                stroke={label.value}
+                                strokeWidth={2}
+                                strokeDasharray={handleLineType(config.series[i]?.type ? config.series[i]?.type : '')}
+                              />
+                            </svg>
+                          ) : (
+                            <div style={{ display: 'flex', flexDirection: 'column' }}>
+                              <LegendShape
+                                shape={config.legend.style === 'boxes' ? 'square' : 'circle'}
+                                viewport={currentViewport}
+                                margin='0'
+                                fill={label.value}
+                                display={true}
+                              />
+                            </div>
+                          )}
+                        </div>
+
+                        <LegendLabel align='left' margin='0 0 0 4px'>
+                          {label.text}
+                        </LegendLabel>
+                      </LegendItem>
+                    )
+                  })}
+
+                  {highLightedLegendItems.map((bar, i) => {
+                    // if duplicates only return first item
+                    let className = 'legend-item'
+                    let itemName = bar.legendLabel
+
+                    if (!itemName) return false
+                    if (seriesHighlight.length > 0 && false === seriesHighlight.includes(itemName)) {
+                      className += ' inactive'
+                    }
+
+                    return (
+                      <LegendItem
+                        className={className}
+                        tabIndex={0}
+                        key={`legend-quantile-${i}`}
+                        onKeyDown={e => {
+                          if (e.key === 'Enter') {
+                            e.preventDefault()
+                            highlight(bar.legendLabel)
+                          }
+                        }}
+                        onClick={e => {
                           e.preventDefault()
                           highlight(bar.legendLabel)
-                        }
-                      }}
-                      onClick={e => {
-                        e.preventDefault()
-                        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>
-                  )
-                })}
-              </div>
-
-              <>
-                {config?.preliminaryData?.some(pd => pd.label && pd.type === 'effect' && pd.style === 'Open Circles') && ['Line', 'Combo'].includes(config.visualizationType) && (
-                  <>
-                    <hr></hr>
-                    <div className={config.legend.singleRow && isBottomOrSmallViewport ? 'legend-container__inner bottom single-row' : ''}>
-                      {config?.preliminaryData?.map((pd, index) => {
-                        return (
-                          <>
-                            {pd.label && pd.type === 'effect' && pd.style && (
-                              <div key={index} className='legend-preliminary'>
-                                <span className={pd.symbol}>{pd.lineCode}</span>
-                                <p> {pd.label}</p>
-                              </div>
-                            )}
-                          </>
-                        )
-                      })}
-                    </div>
-                  </>
-                )}
-                {!config.legend.hideSuppressedLabels &&
-                  config?.preliminaryData?.some(pd => pd.label && pd.displayLegend && pd.type === 'suppression' && pd.value && (pd?.style || pd.symbol)) &&
-                  ((config.visualizationType === 'Bar' && config.visualizationSubType === 'regular') || config.visualizationType === 'Line' || config.visualizationType === 'Combo') && (
-                    <>
-                      <hr></hr>
-                      <div className={config.legend.singleRow && isBottomOrSmallViewport ? 'legend-container__inner bottom single-row' : ''}>
-                        {config?.preliminaryData?.map(
-                          (pd, index) =>
-                            pd.displayLegend &&
-                            pd.type === 'suppression' && (
-                              <>
-                                {config.visualizationType === 'Bar' && (
-                                  <>
-                                    <div key={index + 'Bar'} className={`legend-preliminary ${pd.symbol}`}>
-                                      <span className={pd.symbol}>{pd.iconCode}</span>
-                                      <p className={pd.type}>{pd.label}</p>
-                                    </div>
-                                  </>
-                                )}
-                                {config.visualizationType === 'Line' && (
-                                  <>
-                                    <div key={index + 'Line'} className={`legend-preliminary `}>
-                                      <span>{pd.lineCode}</span>
-                                      <p className={pd.type}>{pd.label}</p>
-                                    </div>
-                                  </>
-                                )}
-                                {config.visualizationType === 'Combo' && (
-                                  <>
-                                    {pd.symbol && pd.iconCode && (
-                                      <div key={index + 'Combo'} className={`legend-preliminary ${pd.symbol}`}>
-                                        <span className={pd.symbol}>{pd.iconCode}</span>
-                                        <p className={pd.type}>{pd.label}</p>
-                                      </div>
-                                    )}
-
-                                    {pd.style && pd.lineCode && (
-                                      <div key={index + 'Combo'} className='legend-preliminary'>
-                                        <span>{pd.lineCode}</span>
-                                        <p>{pd.label}</p>
-                                      </div>
-                                    )}
-                                  </>
-                                )}
-                              </>
-                            )
-                        )}
-                      </div>
-                    </>
-                  )}
+                        }}
+                      >
+                        <LegendShape
+                          shape={config.legend.style === 'boxes' ? 'square' : 'circle'}
+                          style={{ borderRadius: '0px' }}
+                          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>
+                    )
+                  })}
+                </div>
+
+                <LegendSuppression config={config} isBottomOrSmallViewport={isBottomOrSmallViewport} />
               </>
-            </>
-          )
-        }}
-      </LegendOrdinal>
-      {seriesHighlight.length > 0 && (
-        <Button onClick={labels => highlightReset(labels)} style={{ marginTop: '1rem' }}>
-          Reset
-        </Button>
-      )}
-    </aside>
-  )
-})
+            )
+          }}
+        </LegendOrdinal>
+        {seriesHighlight.length > 0 && (
+          <Button onClick={labels => highlightReset(labels)} style={{ marginTop: '1rem' }}>
+            Reset
+          </Button>
+        )}
+      </aside>
+    )
+  }
+)
 
 export default Legend