@cdc/chart 4.25.7 → 4.25.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/chart",
-  "version": "4.25.7",
+  "version": "4.25.8",
   "description": "React component for visualizing tabular data in various types of charts",
   "moduleName": "CdcChart",
   "main": "dist/cdcchart",
@@ -26,7 +26,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@cdc/core": "^4.25.7",
+    "@cdc/core": "^4.25.8",
     "@hello-pangea/dnd": "^16.2.0",
     "@react-spring/web": "^9.7.5",
     "@visx/axis": "3.12.0",
@@ -54,7 +54,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "9062881d50c824ee6cdd71868bafd016a5e5694d",
+  "gitHead": "e369994230b5e3facff224e1d89d5937528ac5a0",
   "devDependencies": {
     "@types/d3-array": "^3.2.1",
     "@types/d3-format": "^3.0.4",

package/src/CdcChart.tsx

@@ -14,9 +14,16 @@ interface CdcChartProps {
   isEditor?: boolean
   isDebug?: boolean
   config?: ChartConfig
+  interactionLabel?: string
 }
 
-const CdcChartWrapper: React.FC<CdcChartProps> = ({ configUrl, isEditor, isDebug, config: editorsConfig }) => {
+const CdcChartWrapper: React.FC<CdcChartProps> = ({
+  configUrl,
+  isEditor,
+  isDebug,
+  config: editorsConfig,
+  interactionLabel = ''
+}) => {
   const editorContext = useContext(EditorContext)
   const [config, _setConfig] = useState<ChartConfig>({} as ChartConfig)
   const setConfig = newConfig => {
@@ -89,7 +96,7 @@ const CdcChartWrapper: React.FC<CdcChartProps> = ({ configUrl, isEditor, isDebug
 
   if (isLoading) return <Loading />
 
-  return <CdcChart config={config} isEditor={isEditor} isDebug={isDebug} />
+  return <CdcChart config={config} isEditor={isEditor} isDebug={isDebug} interactionLabel={interactionLabel} />
 }
 
 export default CdcChartWrapper

package/src/CdcChartComponent.tsx

@@ -82,6 +82,7 @@ import { VizFilter } from '@cdc/core/types/VizFilter'
 import { getNewRuntime } from './helpers/getNewRuntime'
 import FootnotesStandAlone from '@cdc/core/components/Footnotes/FootnotesStandAlone'
 import { Datasets } from '@cdc/core/types/DataSet'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 
 interface CdcChartProps {
   config?: ChartConfig
@@ -96,6 +97,7 @@ interface CdcChartProps {
   setSharedFilterValue?: (value: any) => void
   dashboardConfig?: DashboardConfig
   datasets?: Datasets
+  interactionLabel: string
 }
 const CdcChart: React.FC<CdcChartProps> = ({
   config: configObj,
@@ -108,7 +110,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
   setSharedFilter,
   setSharedFilterValue,
   dashboardConfig,
-  datasets
+  datasets,
+  interactionLabel
 }) => {
   const transform = new DataTransform()
   const initialState = getInitialState(configObj)
@@ -465,6 +468,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     if (container && !isLoading && !_.isEmpty(config) && !coveLoadedEventRan) {
       publish('cove_loaded', { config: config })
       dispatch({ type: 'SET_LOADED_EVENT', payload: true })
+      publishAnalyticsEvent('chart_loaded', 'load', interactionLabel, 'chart')
     }
   }, [container, config, isLoading]) // eslint-disable-line
 
@@ -554,6 +558,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     } catch (e) {
       console.error('COVE:', e.message)
     }
+    publishAnalyticsEvent('chart_legend_reset', 'click', interactionLabel, 'chart')
     dispatch({ type: 'SET_SERIES_HIGHLIGHT', payload: [] })
   }
 
@@ -907,6 +912,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                     setFilters={setFilters}
                     excludedData={excludedData}
                     dimensions={dimensions}
+                    interactionLabel={interactionLabel}
                   />
                 )}
                 <SkipTo skipId={handleChartTabbing(config, legendId)} skipMessage='Skip Over Chart Container' />
@@ -985,6 +991,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                           setFilters={setFilters}
                           excludedData={excludedData}
                           dimensions={dimensions}
+                          interactionLabel={interactionLabel}
                         />
                         {config?.introText && (
                           <section className='introText mb-4' style={{ padding: '0px 0 35px' }}>
@@ -1012,7 +1019,11 @@ const CdcChart: React.FC<CdcChartProps> = ({
                   {!config.legend.hide &&
                     config.visualizationType !== 'Spark Line' &&
                     config.visualizationType !== 'Sankey' && (
-                      <Legend ref={legendRef} skipId={handleChartTabbing(config, legendId)} />
+                      <Legend
+                        ref={legendRef}
+                        skipId={handleChartTabbing(config, legendId)}
+                        interactionLabel={interactionLabel}
+                      />
                     )}
                 </LegendWrapper>
                 {/* Link */}
@@ -1034,6 +1045,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                       type='image'
                       state={config}
                       elementToCapture={imageId}
+                      interactionLabel={interactionLabel}
                     />
                   )}
                   {config.table.showDownloadPdfButton && (
@@ -1043,6 +1055,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                       type='pdf'
                       state={config}
                       elementToCapture={imageId}
+                      interactionLabel={interactionLabel}
                     />
                   )}
                 </MediaControls.Section>
@@ -1054,7 +1067,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                   (config.visualizationType === 'Sankey' && config.table.show)) && (
                   <DataTable
                     /* changing the "key" will force the table to re-render
-                      when the default sort changes while editing */
+                          when the default sort changes while editing */
                     key={dataTableDefaultSortBy}
                     config={pivotDynamicSeries(config)}
                     rawData={
@@ -1076,6 +1089,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                     viewport={currentViewport}
                     tabbingId={handleChartTabbing(config, legendId)}
                     colorScale={colorScale}
+                    interactionLabel={interactionLabel}
                   />
                 )}
                 {config?.annotations?.length > 0 && <Annotation.Dropdown />}

package/src/components/BarChart/components/BarChart.Horizontal.tsx

@@ -115,9 +115,15 @@ export const BarChartHorizontal = () => {
                     numbericBarHeight = 25
                   }
                   let barY = bar.value >= 0 && isNumber(bar.value) ? bar.y : yScale(scaleVal)
-                  const defaultBarWidth = Math.abs(xScale(bar.value) - xScale(scaleVal))
+                  let defaultBarWidth = Math.abs(xScale(bar.value) - xScale(scaleVal))
                   const isPositiveBar = bar.value >= 0 && isNumber(bar.value)
 
+                  const MINIMUM_BAR_HEIGHT = 3
+                  if (isPositiveBar && barGroup.bars.length === 1 && defaultBarWidth < MINIMUM_BAR_HEIGHT) {
+                    defaultBarWidth = MINIMUM_BAR_HEIGHT
+                    barY = yScale(0) - MINIMUM_BAR_HEIGHT
+                  }
+
                   const barX = bar.value < 0 ? Math.abs(xScale(bar.value)) : xScale(scaleVal)
                   const yAxisValue = formatNumber(bar.value, 'left')
                   const xAxisValue =
@@ -166,7 +172,7 @@ export const BarChartHorizontal = () => {
                     </li></ul>`
 
                   // configure colors
-                  let labelColor = '#000000'
+                  let labelColor = APP_FONT_COLOR
                   labelColor = HighLightedBarUtils.checkFontColor(yAxisValue, highlightedBarValues, labelColor) // Set if background is transparent'
                   let barColor =
                     config.runtime.seriesLabels && config.runtime.seriesLabels[bar.key]
@@ -184,7 +190,7 @@ export const BarChartHorizontal = () => {
                   const borderColor = isHighlightedBar
                     ? highlightedBarColor
                     : config.barHasBorder === 'true'
-                    ? '#000'
+                    ? APP_FONT_COLOR
                     : 'transparent'
                   const borderWidth = isHighlightedBar
                     ? highlightedBar.borderWidth
@@ -298,7 +304,7 @@ export const BarChartHorizontal = () => {
                               : pd.symbol === 'Double Asterisk'
                               ? barHeight
                               : barHeight / 1.5
-                          const fillColor = pd.displayGray ? '#8b8b8a' : '#000'
+                          const fillColor = pd.displayGray ? '#8b8b8a' : APP_FONT_COLOR
                           return (
                             <Text // prettier-ignore
                               key={index}
@@ -366,7 +372,7 @@ export const BarChartHorizontal = () => {
                             display={displayBar ? 'block' : 'none'}
                             x={bar.y}
                             y={0}
-                            fill={'#000000'}
+                            fill={APP_FONT_COLOR}
                             dx={textPaddingLollipop}
                             textAnchor={textAnchorLollipop}
                             verticalAnchor='middle'

package/src/components/BarChart/components/BarChart.StackedHorizontal.tsx

@@ -137,7 +137,7 @@ const BarChartStackedHorizontal = () => {
                           <Text
                             x={`${bar.x + (config.isLollipopChart ? 15 : 5)}`} // padding
                             y={bar.y + bar.height * 1.2}
-                            fill={'#000000'}
+                            fill={APP_FONT_COLOR}
                             textAnchor='start'
                             verticalAnchor='start'
                           >

package/src/components/BarChart/components/BarChart.Vertical.tsx

@@ -16,6 +16,7 @@ import { isDateScale } from '@cdc/core/helpers/cove/date'
 import isNumber from '@cdc/core/helpers/isNumber'
 import createBarElement from '@cdc/core/components/createBarElement'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
+import { isMobileFontViewport } from '@cdc/core/helpers/viewports'
 // Third party libraries
 import chroma from 'chroma-js'
 // Types
@@ -45,6 +46,7 @@ export const BarChartVertical = () => {
   const {
     colorScale,
     config,
+    currentViewport,
     dashboardConfig,
     tableData,
     formatDate,
@@ -123,8 +125,20 @@ export const BarChartVertical = () => {
                     seriesHighlight.indexOf(bar.key) !== -1
 
                   let barGroupWidth = seriesScale.range()[1] - seriesScale.range()[0]
-                  const defaultBarHeight = Math.abs(yScale(bar.value) - yScale(scaleVal))
-                  const defaultBarY = bar.value >= 0 && isNumber(bar.value) ? bar.y : yScale(0)
+                  let defaultBarHeight = Math.abs(yScale(bar.value) - yScale(scaleVal))
+                  let defaultBarY = bar.value >= 0 && isNumber(bar.value) ? bar.y : yScale(0)
+
+                  const MINIMUM_BAR_HEIGHT = 3
+                  if (
+                    bar.value >= 0 &&
+                    isNumber(bar.value) &&
+                    barGroup.bars.length === 1 &&
+                    defaultBarHeight < MINIMUM_BAR_HEIGHT
+                  ) {
+                    defaultBarHeight = MINIMUM_BAR_HEIGHT
+                    defaultBarY = yScale(0) - MINIMUM_BAR_HEIGHT
+                  }
+
                   let barWidth = config.isLollipopChart ? lollipopBarWidth : seriesScale.bandwidth()
                   let barX =
                     bar.x +
@@ -159,7 +173,7 @@ export const BarChartVertical = () => {
                     yAxisValue
                   })
                   // configure colors
-                  let labelColor = '#000000'
+                  let labelColor = APP_FONT_COLOR
                   labelColor = HighLightedBarUtils.checkFontColor(yAxisValue, highlightedBarValues, labelColor) // Set if background is transparent'
                   const isRegularLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'regular'
                   const isTwoToneLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'two-tone'
@@ -254,6 +268,8 @@ export const BarChartVertical = () => {
 
                   const BAR_LABEL_PADDING = 10
 
+                  const LABEL_FONT_SIZE = isMobileFontViewport(currentViewport) ? 13 : 16
+
                   return (
                     <Group display={hideGroup} key={`${barGroup.index}--${index}`}>
                       <Group key={`bar-sub-group-${barGroup.index}-${barGroup.x0}-${barY}--${index}`}>
@@ -353,6 +369,7 @@ export const BarChartVertical = () => {
                           y={barY - BAR_LABEL_PADDING}
                           fill={labelColor}
                           textAnchor='middle'
+                          fontSize={LABEL_FONT_SIZE}
                         >
                           {testZeroValue(bar.value) ? '' : barDefaultLabel}
                         </Text>
@@ -363,7 +380,7 @@ export const BarChartVertical = () => {
                           y={barY - BAR_LABEL_PADDING}
                           fill={labelColor}
                           textAnchor='middle'
-                          fontSize={config.isLollipopChart ? null : barWidth / 2}
+                          fontSize={config.isLollipopChart ? null : LABEL_FONT_SIZE}
                         >
                           {absentDataLabel}
                         </Text>

package/src/components/Brush/BrushChart.tsx

@@ -6,28 +6,36 @@ import ConfigContext from '../../ConfigContext'
 import { Text } from '@visx/text'
 import { APP_FONT_SIZE } from '@cdc/core/helpers/constants'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
-import { isDateScale } from '@cdc/core/helpers/cove/date'
-export interface ZoomBrushProps {
+export interface BrushChartProps {
   xMax: number
   yMax: number
   brushPosition: { start: { x: number }; end: { x: number } }
   onBrushChange: (bounds: any) => void
   brushKey: number
+  brushHandleProps: { startValue: string; endValue: string; endPos: number; startPos: number }
+  brushRef: React.RefObject<BrushRef>
 }
 
-const ZoomBrush: FC<ZoomBrushProps> = ({ xMax, yMax, brushPosition, onBrushChange, brushKey }) => {
-  const { tableData, config, parseDate, dashboardConfig } = useContext(ConfigContext)
-  const brushRef = useRef(null)
+const BrushChart: FC<BrushChartProps> = ({
+  xMax,
+  yMax,
+  brushPosition,
+  onBrushChange,
+  brushKey,
+  brushHandleProps,
+  brushRef
+}) => {
+  const { tableData, config, dashboardConfig } = useContext(ConfigContext)
   const dataKey = config.xAxis.dataKey
   const borderRadius = 15
   const mappedDates: string[] = tableData.map(row => row[dataKey])
   const brushheight = 25
   const DASHBOARD_MARGIN = 50
   const BRUSH_HEIGHT_MULTIPLIER = 1.5
-
+  const range = config?.xAxis?.sortByRecentDate ? [xMax, 0] : [0, xMax]
   const xScale = scaleBand<string>({
-    domain: mappedDates,
-    range: [0, xMax],
+    domain: config?.xAxis?.sortByRecentDate ? mappedDates.reverse() : mappedDates,
+    range: range,
     paddingInner: 0.1,
     paddingOuter: 0.1
   })
@@ -52,6 +60,16 @@ const ZoomBrush: FC<ZoomBrushProps> = ({ xMax, yMax, brushPosition, onBrushChang
     <Group left={config.yAxis.size} top={calculateGroupTop()}>
       <rect fill='#949494' width={xMax} height={25} rx={borderRadius} pointerEvents='none' />
       <Brush
+        disableDraggingOverlay={false}
+        renderBrushHandle={props => (
+          <BrushHandle
+            left={Number(config.runtime.yAxis.size)}
+            pixelDistance={brushHandleProps.endPos - brushHandleProps.startPos}
+            textProps={brushHandleProps}
+            isBrushing={brushRef.current?.state.isBrushing}
+            {...props}
+          />
+        )}
         innerRef={brushRef}
         key={brushKey}
         xScale={xScale}
@@ -64,10 +82,47 @@ const ZoomBrush: FC<ZoomBrushProps> = ({ xMax, yMax, brushPosition, onBrushChang
         initialBrushPosition={brushPosition}
         selectedBoxStyle={style}
         onChange={onBrushChange}
-        disableDraggingOverlay={true}
+        useWindowMoveEvents={true}
       />
     </Group>
   )
 }
 
-export default ZoomBrush
+export default BrushChart
+
+const BrushHandle = props => {
+  const { x, y, isBrushing, className, textProps } = props
+  const pathWidth = 8
+
+  // Flip the SVG path horizontally for the left handle
+  const isLeft = className.includes('left')
+  const transform = isLeft ? 'scale(-1, 1)' : 'translate(0,0)'
+  const textAnchor = isLeft ? 'end' : 'start'
+  const tooltipText = isLeft ? ` Drag edges to focus on a specific segment ` : ''
+  const textFontSize = APP_FONT_SIZE / 1.4
+  const textWidth = getTextWidth(textProps.startValue, `${textFontSize}px`)
+  const textPosLeft = x > 0 ? 0 : 55
+  const textPosRight = y < textProps.xMax ? 0 : -50
+  return (
+    <Group left={x + pathWidth / 2} top={-2}>
+      <Text
+        pointerEvents='visiblePainted'
+        dominantBaseline='hanging'
+        x={isLeft ? textPosLeft : textPosRight}
+        y={25}
+        verticalAnchor='start'
+        textAnchor={textAnchor}
+        fontSize={textFontSize}
+      >
+        {isLeft ? textProps.startValue : textProps.endValue}
+      </Text>
+      <path
+        cursor='ew-resize'
+        d='M0.5,10A6,6 0 0 1 6.5,16V14A6,6 0 0 1 0.5,20ZM2.5,18V12M4.5,18V12'
+        fill='#297EF1'
+        strokeWidth='1'
+        transform={transform}
+      />
+    </Group>
+  )
+}

package/src/components/Brush/BrushController.tsx

@@ -1,21 +1,51 @@
-import { useState, useEffect, useContext } from 'react'
+import { useState, useEffect, useContext, useRef } from 'react'
 import ConfigContext, { ChartDispatchContext } from '../../ConfigContext'
-import ZoomBrush from './BrushChart'
+import BrushChart from './BrushChart'
+import { isDateScale } from '@cdc/core/helpers/cove/date'
+import { BrushRef } from './types'
+
 const BrushController = ({ yMax, xMax }) => {
-  const { tableData, config, parseDate, dashboardConfig } = useContext(ConfigContext)
+  const { tableData, config, parseDate, dashboardConfig, formatDate } = useContext(ConfigContext)
+  const [brushHandleProps, setBrushHandleProps] = useState({
+    startPos: 0,
+    endPos: 0,
+    startValue: '',
+    endValue: '',
+    xMax: xMax
+  })
   const dataKey = config.xAxis.dataKey
   const [brushKey, setBrushKey] = useState(0)
   const dispatch = useContext(ChartDispatchContext)
   const sharedFilters = dashboardConfig?.dashboard?.sharedFilters ?? []
   const isDashboardFilters = sharedFilters?.length > 0
+  const brushRef = useRef<BrushRef | null>(null)
+
   const [brushPosition, setBrushPosition] = useState({
     start: { x: 0 },
     end: { x: xMax }
   })
 
   const handleBrushChange = (bounds: any) => {
-    const selected = bounds.xValues || []
+    if (!bounds) return dispatch({ type: 'SET_BRUSH_DATA', payload: [] })
+    const filteredValues = bounds?.xValues?.filter(val => val !== undefined)
+    if (filteredValues?.length === 0) dispatch({ type: 'SET_BRUSH_DATA', payload: [] })
+    const selected = bounds?.xValues || []
+
     const filteredData = tableData.filter(row => selected.includes(row[dataKey]))
+    const endValue = filteredValues
+      .slice()
+      .reverse()
+      .find(item => item !== undefined)
+    const startValue = filteredValues.find(item => item !== undefined)
+    const formatIfDate = value => (isDateScale(config.runtime.xAxis) ? formatDate(parseDate(value)) : value)
+
+    setBrushHandleProps(prev => ({
+      ...prev,
+      startPos: brushRef.current?.state.start.x,
+      endPos: brushRef.current?.state.end.x,
+      endValue: formatIfDate(endValue),
+      startValue: formatIfDate(startValue)
+    }))
     dispatch({ type: 'SET_BRUSH_DATA', payload: filteredData })
   }
 
@@ -27,7 +57,9 @@ const BrushController = ({ yMax, xMax }) => {
   }, [config.filters, config.exclusions, config.brush?.active, isDashboardFilters])
 
   return (
-    <ZoomBrush
+    <BrushChart
+      brushRef={brushRef}
+      brushHandleProps={brushHandleProps}
       xMax={xMax}
       yMax={yMax}
       brushPosition={brushPosition}

package/src/components/Brush/types.tsx

@@ -0,0 +1,8 @@
+export type BrushRef = {
+  reset: () => void
+  state: {
+    start: { x: number; y: number }
+    end: { x: number; y: number }
+    isBrushing: boolean
+  }
+}

package/src/components/EditorPanel/components/Panels/Panel.Annotate.tsx

@@ -67,8 +67,8 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
         config.xAxis.type === 'date'
           ? new Date(config?.data?.[0]?.[config.xAxis.dataKey]).getTime()
           : config.xAxis.type === 'categorical'
-          ? '1/15/2016'
-          : '',
+            ? '1/15/2016'
+            : '',
       yKey: '',
       dx: 20,
       dy: -20,

package/src/components/EditorPanel/components/Panels/Panel.Series.tsx

@@ -281,6 +281,7 @@ const SeriesDropdownConfidenceInterval = props => {
   const { config, updateConfig } = useContext(ConfigContext)
   const { series, index } = props
   const { getColumns } = useContext(SeriesContext)
+
   if (series.type !== 'Forecasting') return
 
   return (
@@ -289,18 +290,6 @@ const SeriesDropdownConfidenceInterval = props => {
       <fieldset>
         <Accordion allowZeroExpanded>
           {series?.confidenceIntervals?.map((ciGroup, ciIndex) => {
-            const showInTooltip = ciGroup.showInTooltip ? ciGroup.showInTooltip : false
-
-            const updateShowInTooltip = (e, seriesIndex, ciIndex) => {
-              e.preventDefault()
-              let copiedSeries = [...config.series]
-              copiedSeries[seriesIndex].confidenceIntervals[ciIndex].showInTooltip = !showInTooltip
-              updateConfig({
-                ...config,
-                series: copiedSeries
-              })
-            }
-
             return (
               <AccordionItem className='series-item series-item--chart' key={`${ciIndex}`}>
                 <AccordionItemHeading className='series-item__title'>
@@ -312,6 +301,7 @@ const SeriesDropdownConfidenceInterval = props => {
                         onClick={e => {
                           e.preventDefault()
                           const copiedIndex = [...config.series[index].confidenceIntervals]
+
                           copiedIndex.splice(ciIndex, 1)
                           const copyOfSeries = [...config.series] // copy the entire series array
                           copyOfSeries[index] = { ...copyOfSeries[index], confidenceIntervals: [...copiedIndex] }
@@ -327,28 +317,6 @@ const SeriesDropdownConfidenceInterval = props => {
                   </>
                 </AccordionItemHeading>
                 <AccordionItemPanel>
-                  <div className='input-group'>
-                    <label htmlFor='showInTooltip'>Show In Tooltip</label>
-                    <div
-                      className={'cove-input__checkbox--small'}
-                      onClick={e => updateShowInTooltip(e, index, ciIndex)}
-                    >
-                      <div
-                        className={`cove-input__checkbox-box${'blue' ? ' custom-color' : ''}`}
-                        style={{ backgroundColor: '' }}
-                      >
-                        {showInTooltip && <Check className='' style={{ fill: '#025eaa' }} />}
-                      </div>
-                      <input
-                        className='cove-input--hidden'
-                        type='checkbox'
-                        name={'showInTooltip'}
-                        checked={showInTooltip ? showInTooltip : false}
-                        readOnly
-                      />
-                    </div>
-                  </div>
-
                   <InputSelect
                     initial='Select an option'
                     value={

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

@@ -17,6 +17,7 @@ import { isLegendWrapViewport } from '@cdc/core/helpers/viewports'
 import LegendLineShape from './LegendLine.Shape'
 import LegendGroup from './LegendGroup'
 import { getSeriesWithData } from '../../helpers/dataHelpers'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 
 const LEGEND_PADDING = 36
 
@@ -32,6 +33,7 @@ export interface LegendProps {
   skipId: string
   dimensions: DimensionsType // for responsive width legend
   transformedData: any
+  interactionLabel: string
 }
 
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
@@ -47,7 +49,8 @@ const Legend: React.FC<LegendProps> = forwardRef(
       formatLabels,
       skipId = 'legend',
       dimensions,
-      transformedData: data
+      transformedData: data,
+      interactionLabel = ''
     },
     ref
   ) => {
@@ -137,11 +140,23 @@ const Legend: React.FC<LegendProps> = forwardRef(
                           onKeyDown={e => {
                             if (e.key === 'Enter') {
                               e.preventDefault()
+                              publishAnalyticsEvent(
+                                `chart_legend_item_toggled--${legend.behavior}-mode`,
+                                'keydown',
+                                `${interactionLabel}|${label.text}`,
+                                'chart'
+                              )
                               highlight(label)
                             }
                           }}
                           onClick={e => {
                             e.preventDefault()
+                            publishAnalyticsEvent(
+                              `chart_legend_item_toggled--${legend.behavior}-mode`,
+                              'click',
+                              `${interactionLabel}|${label.text}`,
+                              'chart'
+                            )
                             highlight(label)
                           }}
                           role='button'

package/src/components/Legend/Legend.tsx

@@ -21,7 +21,8 @@ const Legend = forwardRef((props, ref) => {
     transformedData
   } = useContext(ConfigContext)
   if (!config.legend) return null
-  // create fn to reverse labels while legend is Bottom.  Legend-right , legend-left works by default.
+  // create fn to reverse labels while legend is Bottom.  Legend-right , legend-left works by default
+  const { interactionLabel } = props
 
   const createLegendLabels = createFormatLabels(config, tableData, data, colorScale)
 
@@ -40,6 +41,7 @@ const Legend = forwardRef((props, ref) => {
         handleShowAll={handleShowAll}
         currentViewport={currentViewport}
         formatLabels={createLegendLabels}
+        interactionLabel={interactionLabel}
       />
     </Fragment>
   )