@cdc/chart 1.3.4 → 4.22.11

package/src/components/PairedBarChart.tsx

@@ -1,144 +1,225 @@
-import React, { useContext } from 'react';
-import { Group } from '@visx/group';
-import { Bar } from '@visx/shape';
-import { scaleLinear, scaleBand } from '@visx/scale';
-import { Text } from '@visx/text';
-
-import Context from '../context';
-import chroma from 'chroma-js';
+import React, { useContext } from 'react'
+import { Group } from '@visx/group'
+import { Bar } from '@visx/shape'
+import { scaleLinear, scaleBand } from '@visx/scale'
+import { Text } from '@visx/text'
 
+import Context from '../context'
+import chroma from 'chroma-js'
 
 interface PairedBarChartProps {
-	width: number,
-	height: number
+  width: number
+  height: number
 }
 
 const PairedBarChart: React.FC<PairedBarChartProps> = ({ width, height }) => {
-
-	const { config, colorScale, transformedData } = useContext<any>(Context);
-
-	if(!config || config?.series?.length < 2) return;
-
-	const data = transformedData
-	const adjustedWidth = width;
-	const adjustedHeight = height;
-	const halfWidth = adjustedWidth / 2;
-
-	const groupOne = {
-		parentKey: config.dataDescription.seriesKey,
-		dataKey: config.series[0].dataKey,
-		color: colorScale(config.runtime.seriesLabels[config.series[0].dataKey]),
-		max: Math.max.apply(Math, data.map(item => item[config.series[0].dataKey])),
-		labelColor: ''
-	}
-	
-	const groupTwo = {
-		parentKey: config.dataDescription.seriesKey,
-		dataKey: config.series[1].dataKey,
-		color: colorScale(config.runtime.seriesLabels[config.series[1].dataKey]),
-		max: Math.max.apply(Math, data.map(item => item[config.series[1].dataKey])),
-		labelColor: ''
-	}
-	
-	const xScale = scaleLinear({
-		domain: [0, Math.max(groupOne.max, groupTwo.max)],
-		range: [0, halfWidth]
-	});
-
-
-	const yScale = scaleBand({
-		range: [0, adjustedHeight],
-		domain: data.map(d => d[config.dataDescription.xKey]),
-		padding: 0.2
-	});
-
-	// Set label color
-	let labelColor = '#000000';
-
-	if (chroma.contrast(labelColor, groupOne.color) < 4.9) {
-		groupOne.labelColor = '#FFFFFF';
-	}
-
-	if (chroma.contrast(labelColor, groupTwo.color) < 4.9) {
-		groupTwo.labelColor = '#FFFFFF';
-	}
-
-	return (width > 0) && (
-		<>
-			<svg
-				id="cdc-visualization__paired-bar-chart"
-				width={width}
-				height={height}>
-				<Group top={0} left={config.xAxis.size}>
-					{data.filter(item => config.series[0].dataKey === groupOne.dataKey).map(d => {
-						let barWidth = (xScale(d[config.series[0].dataKey]))
-						return (
-						<Group key={`group-${groupOne.dataKey}-${d[config.xAxis.dataKey]}`}>
-							<Bar
-								className="bar"
-								key={`bar-${groupOne.dataKey}-${d[config.dataDescription.xKey]}`}
-								x={halfWidth - barWidth}
-								y={yScale([d[config.dataDescription.xKey]])}
-								width={xScale(d[config.series[0].dataKey])}
-								height={yScale.bandwidth()}
-								fill={groupOne.color}
-								data-tip={
-									`<p>
-										${config.dataDescription.seriesKey}: ${groupOne.dataKey}<br/>
-										${config.xAxis.dataKey}: ${d[config.xAxis.dataKey]}<br/>
-										${config.dataDescription.valueKey}: ${d[groupOne.dataKey]}
-									</p>`
+  const { config, colorScale, transformedData, formatNumber, seriesHighlight } = useContext<any>(Context)
+
+  if (!config || config?.series?.length < 2) return
+
+  const data = transformedData
+  const adjustedWidth = width
+  const adjustedHeight = height
+  const halfWidth = adjustedWidth / 2
+
+  const groupOne = {
+    parentKey: config.dataDescription.seriesKey,
+    dataKey: config.series[0].dataKey,
+    color: colorScale(config.runtime.seriesLabels[config.series[0].dataKey]),
+    max: Math.max.apply(
+      Math,
+      data.map(item => item[config.series[0].dataKey])
+    ),
+    labelColor: ''
+  }
+
+  const groupTwo = {
+    parentKey: config.dataDescription.seriesKey,
+    dataKey: config.series[1].dataKey,
+    color: colorScale(config.runtime.seriesLabels[config.series[1].dataKey]),
+    max: Math.max.apply(
+      Math,
+      data.map(item => item[config.series[1].dataKey])
+    ),
+    labelColor: ''
+  }
+
+  const xScale = scaleLinear({
+    domain: [0, Math.max(groupOne.max, groupTwo.max)],
+    range: [0, halfWidth]
+  })
+
+  const yScale = scaleBand({
+    range: [0, adjustedHeight],
+    domain: data.map(d => d[config.dataDescription.xKey])
+  })
+
+  // Set label color
+  let labelColor = '#000000'
+
+  if (chroma.contrast(labelColor, groupOne.color) < 4.9) {
+    groupOne.labelColor = '#FFFFFF'
+  }
+
+  if (chroma.contrast(labelColor, groupTwo.color) < 4.9) {
+    groupTwo.labelColor = '#FFFFFF'
+  }
+
+  const dataTipOne = d => {
+    return `<p>
+				${config.dataDescription.seriesKey}: ${groupOne.dataKey}<br/>
+				${config.xAxis.dataKey}: ${d[config.xAxis.dataKey]}<br/>
+				${config.dataDescription.valueKey}: ${formatNumber(d[groupOne.dataKey])} 
+			</p>`
+  }
+
+  const dataTipTwo = d => {
+    return `<p>
+				${config.dataDescription.seriesKey}: ${groupTwo.dataKey}<br/>
+				${config.xAxis.dataKey}: ${d[config.xAxis.dataKey]}<br/>
+				${config.dataDescription.valueKey}: ${formatNumber(d[groupTwo.dataKey])}
+			</p>`
+  }
+
+  const isLabelBelowBar = config.yAxis.labelPlacement === 'Below Bar'
+  const isLabelOnYAxis = config.yAxis.labelPlacement === 'On Date/Category Axis'
+  const isLabelMissing = !config.yAxis.labelPlacement
+
+  return (
+    width > 0 && (
+      <>
+        <style>
+          {`
+				#cdc-visualization__paired-bar-chart,
+				 #cdc-visualization__paired-bar-chart > .visx-group {
+					transform-origin: center
+				}
+				`}
+        </style>
+        <svg id='cdc-visualization__paired-bar-chart' width={width} height={height} viewBox={`0 0 ${width} ${height}`} role='img' tabIndex={0}>
+          <Group top={0} left={config.xAxis.size}>
+            {data
+              .filter(item => config.series[0].dataKey === groupOne.dataKey)
+              .map((d, index) => {
+                let transparentBar = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(config.series[0].dataKey) === -1
+                let displayBar = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(config.series[0].dataKey) !== -1
+                let barWidth = xScale(d[config.series[0].dataKey])
+                let barHeight = Number(config.barHeight) ? Number(config.barHeight) : 25
+                let barPadding = barHeight
+                config.barHeight = Number(config.barHeight) ? Number(config.barHeight) : 25
+                config.barPadding = config.barHeight
+
+                if (config.orientation === 'horizontal') {
+                  if (isLabelBelowBar || isLabelMissing || isLabelOnYAxis) {
+                    if (barHeight < 40) {
+                      config.barPadding = 40
+                    } else {
+                      config.barPadding = barPadding
+                    }
+                  } else {
+                    config.barPadding = barPadding / 2
+                  }
+                }
+
+                config.height = Number(barHeight) * data.length + config.barPadding * data.length
+
+                let y = yScale([d[config.dataDescription.xKey]]) + config.barHeight / 1.5
+                y = Number(config.barPadding) > 20 ? (y += Number(config.barPadding / 3.5) - config.barHeight / 2) : (y += 0)
+
+                return (
+                  <>
+                    <Group key={`group-${groupOne.dataKey}-${d[config.xAxis.dataKey]}`} className='horizontal'>
+                      <Bar
+                        id={`bar-${groupOne.dataKey}-${d[config.dataDescription.xKey]}`}
+                        className='bar group-1'
+                        key={`bar-${groupOne.dataKey}-${d[config.dataDescription.xKey]}`}
+                        x={halfWidth - barWidth}
+                        y={y}
+                        width={xScale(d[config.series[0].dataKey])}
+                        height={barHeight}
+                        fill={groupOne.color}
+                        data-tip={dataTipOne(d)}
+                        data-for={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+                        stroke='#333'
+                        strokeWidth={config.barBorderThickness || 1}
+                        opacity={transparentBar ? 0.5 : 1}
+                        display={displayBar ? 'block' : 'none'}
+                      />
+                      {config.yAxis.displayNumbersOnBar && displayBar && (
+                        <Text textAnchor={barWidth < 100 ? 'end' : 'start'} verticalAnchor='middle' x={halfWidth - (barWidth < 100 ? barWidth + 10 : barWidth - 5)} y={y + config.barHeight / 2} fill={barWidth > 100 ? groupOne.labelColor : '#000'}>
+                          {formatNumber(d[groupOne.dataKey])}
+                        </Text>
+                      )}
+                    </Group>
+                  </>
+                )
+              })}
+            {data
+              .filter(item => config.series[1].dataKey === groupTwo.dataKey)
+              .map(d => {
+                let barWidth = xScale(d[config.series[1].dataKey])
+                let transparentBar = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(config.series[1].dataKey) === -1
+                let displayBar = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(config.series[1].dataKey) !== -1
+
+                let barHeight = config.barHeight ? config.barHeight : 25
+                let barPadding = barHeight
+                config.barHeight = Number(config.barHeight)
+
+                let y = yScale([d[config.dataDescription.xKey]]) + config.barHeight / 1.5
+                y = Number(config.barPadding) > 20 ? (y += Number(config.barPadding / 3.5) - config.barHeight / 2) : (y += 0)
+
+                if (config.orientation === 'horizontal') {
+                  if (isLabelBelowBar || isLabelMissing || isLabelOnYAxis) {
+                    if (barHeight < 40) {
+                      config.barPadding = 40
+                    } else {
+                      config.barPadding = barPadding
+                    }
+                  } else {
+                    config.barPadding = barPadding / 2
+                  }
+                }
+
+                return (
+                  <>
+                    <style>
+                      {`
+								.bar-${groupTwo.dataKey}-${d[config.xAxis.dataKey]} {
+						  			transform-origin: ${halfWidth}px ${y}px
 								}
-								data-for={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
-							/>
-							<Text
-								textAnchor={barWidth < 100 ? 'end' : 'start' }
-								x={halfWidth - (barWidth < 100 ? barWidth + 10 : barWidth - 5)}
-								y={yScale([d[config.dataDescription.xKey]]) + yScale.bandwidth() / 1.5}
-								fill={barWidth > 100 ? groupOne.labelColor : '#000' }>
-								{d[config.dataDescription.xKey]}
-							</Text>
-						</Group>
-					)}
-					)}
-					{data.filter(item => config.series[1].dataKey === groupTwo.dataKey).map(d => {
-						let barWidth = (xScale(d[config.series[1].dataKey]))
-
-						return(
-							<Group key={`group-${groupTwo.dataKey}-${d[config.dataDescription.xKey]}`}>
-								<Bar
-									className="bar"
-									key={`bar-${groupTwo.dataKey}-${d[config.dataDescription.xKey]}`}
-									x={halfWidth}
-									y={yScale([d[config.dataDescription.xKey]])}
-									width={xScale(d[config.series[1].dataKey])}
-									height={yScale.bandwidth()}
-									fill={groupTwo.color}
-									data-tip={
-										`<p>
-											${config.dataDescription.seriesKey}: ${groupTwo.dataKey}<br/>
-											${config.xAxis.dataKey}: ${d[config.xAxis.dataKey]}<br/>
-											${config.dataDescription.valueKey}: ${d[groupTwo.dataKey]}
-										</p>`
-									}
-									data-for={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
-
-								/>
-								<Text
-									textAnchor={barWidth < 100 ? 'start' : 'end' }
-									x={halfWidth + (barWidth < 100 ? barWidth + 10 : barWidth - 10 )}
-									y={yScale([d[config.dataDescription.xKey]]) + (yScale.bandwidth() / 1.5)}
-									fill={barWidth > 100 ? groupTwo.labelColor : '#000' }>
-									{d[config.dataDescription.xKey]}
-								</Text>
-							</Group>
-						)
-					}
-					)}
-				</Group>
-			</svg>
-		</>
-	);
+							`}
+                    </style>
+                    <Group key={`group-${groupTwo.dataKey}-${d[config.dataDescription.xKey]}`} className='horizontal'>
+                      <Bar
+                        id={`bar-${groupTwo.dataKey}-${d[config.dataDescription.xKey]}`}
+                        className='bar group-2'
+                        key={`bar-${groupTwo.dataKey}-${d[config.dataDescription.xKey]}`}
+                        x={halfWidth}
+                        y={y}
+                        width={xScale(d[config.series[1].dataKey])}
+                        height={barHeight}
+                        fill={groupTwo.color}
+                        data-tip={dataTipTwo(d)}
+                        data-for={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+                        strokeWidth={config.barBorderThickness || 1}
+                        stroke='#333'
+                        opacity={transparentBar ? 0.5 : 1}
+                        display={displayBar ? 'block' : 'none'}
+                      />
+                      {config.yAxis.displayNumbersOnBar && displayBar && (
+                        <Text textAnchor={barWidth < 100 ? 'start' : 'end'} verticalAnchor='middle' x={halfWidth + (barWidth < 100 ? barWidth + 10 : barWidth - 10)} y={y + config.barHeight / 2} fill={barWidth > 100 ? groupTwo.labelColor : '#000'}>
+                          {formatNumber(d[groupTwo.dataKey])}
+                        </Text>
+                      )}
+                    </Group>
+                  </>
+                )
+              })}
+          </Group>
+        </svg>
+      </>
+    )
+  )
 }
 
-export default PairedBarChart;
+export default PairedBarChart

package/src/components/PieChart.tsx

@@ -1,42 +1,51 @@
-import React, { useContext, useState, useEffect, useRef } from 'react';
-import { animated, useTransition, interpolate } from 'react-spring';
-import ReactTooltip from 'react-tooltip';
+import React, { useContext, useState, useEffect, useRef } from 'react'
+import { animated, useTransition, interpolate } from 'react-spring'
+import ReactTooltip from 'react-tooltip'
 
-import Pie, { ProvidedProps, PieArcDatum } from '@visx/shape/lib/shapes/Pie';
-import chroma from "chroma-js";
-import { Group } from '@visx/group';
-import { Text } from '@visx/text';
+import Pie, { ProvidedProps, PieArcDatum } from '@visx/shape/lib/shapes/Pie'
+import chroma from 'chroma-js'
+import { Group } from '@visx/group'
+import { Text } from '@visx/text'
+import useIntersectionObserver from './useIntersectionObserver'
 
-import Context from '../context';
+import Context from '../context'
 
-import ErrorBoundary from '@cdc/core/components/ErrorBoundary';
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 
 // react-spring transition definitions
-type PieStyles = { startAngle: number; endAngle: number };
+type PieStyles = { startAngle: number; endAngle: number }
 
 const enterUpdateTransition = ({ startAngle, endAngle }: PieArcDatum<any>) => ({
   startAngle,
-  endAngle,
-});
+  endAngle
+})
 
 export default function PieChart() {
-  const { transformedData: data, config, dimensions, seriesHighlight, colorScale, formatNumber, currentViewport } = useContext<any>(Context);
+  const { transformedData: data, config, dimensions, seriesHighlight, colorScale, formatNumber, currentViewport, handleChartAriaLabels } = useContext<any>(Context)
 
-  const [filteredData, setFilteredData] = useState<any>(undefined);
+  const [filteredData, setFilteredData] = useState<any>(undefined)
+  const [animatedPie, setAnimatePie] = useState<boolean>(false)
 
-  
+  const triggerRef = useRef()
+  const dataRef = useIntersectionObserver(triggerRef, {
+    freezeOnceVisible: false
+  })
+
+  useEffect(() => {
+    if (dataRef?.isIntersecting && config.animate && !animatedPie) {
+      setTimeout(() => {
+        setAnimatePie(true)
+      }, 500)
+    }
+  }, [dataRef?.isIntersecting, config.animate])
 
   type AnimatedPieProps<Datum> = ProvidedProps<Datum> & {
-    animate?: boolean;
-    getKey: (d: PieArcDatum<Datum>) => string;
-    delay?: number;
-  };
-
-  function AnimatedPie<Datum>({
-    arcs,
-    path,
-    getKey,
-  }: AnimatedPieProps<Datum>) {
+    animate?: boolean
+    getKey: (d: PieArcDatum<Datum>) => string
+    delay?: number
+  }
+
+  function AnimatedPie<Datum>({ arcs, path, getKey }: AnimatedPieProps<Datum>) {
     const transitions = useTransition<PieArcDatum<Datum>, PieStyles>(
       arcs,
       getKey,
@@ -45,145 +54,107 @@ export default function PieChart() {
         from: enterUpdateTransition,
         enter: enterUpdateTransition,
         update: enterUpdateTransition,
-        leave: enterUpdateTransition,
-      },
-    );
+        leave: enterUpdateTransition
+      }
+    )
 
     return (
       <>
-        {transitions.map(
-          ({
-            item: arc,
-            props,
-            key,
-          }: {
-            item: PieArcDatum<Datum>;
-            props: PieStyles;
-            key: string;
-          }) => {
-            let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${formatNumber(arc.data[config.runtime.yAxis.dataKey])}` : formatNumber(arc.data[config.runtime.yAxis.dataKey])
-            let xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${arc.data[config.runtime.xAxis.dataKey]}` : arc.data[config.runtime.xAxis.dataKey]
-
-            const tooltip = `<div>
-            ${yAxisTooltip}<br />
-            ${xAxisTooltip}<br />`
+        {transitions.map(({ item: arc, props, key }: { item: PieArcDatum<Datum>; props: PieStyles; key: string }) => {
+          let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${formatNumber(arc.data[config.runtime.yAxis.dataKey])}` : formatNumber(arc.data[config.runtime.yAxis.dataKey])
+          let xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${arc.data[config.runtime.xAxis.dataKey]}` : arc.data[config.runtime.xAxis.dataKey]
 
-            return (
-              <Group key={key} style={{ opacity: (config.legend.behavior === "highlight" && seriesHighlight.length > 0 && seriesHighlight.indexOf(arc.data[config.runtime.xAxis.dataKey]) === -1) ? 0.5 : 1 }}>
-                <animated.path
-                  // compute interpolated path d attribute from intermediate angle values
-                  d={interpolate([props.startAngle, props.endAngle], (startAngle, endAngle) => path({
+          const tooltip = `<div>
+            ${yAxisTooltip}<br />
+            ${xAxisTooltip}<br />
+            Percent: ${Math.round((((arc.endAngle - arc.startAngle) * 180) / Math.PI / 360) * 100) + '%'}
+            `
+
+          return (
+            <Group key={key} style={{ opacity: config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(arc.data[config.runtime.xAxis.dataKey]) === -1 ? 0.5 : 1 }}>
+              <animated.path
+                // compute interpolated path d attribute from intermediate angle values
+                d={interpolate([props.startAngle, props.endAngle], (startAngle, endAngle) =>
+                  path({
                     ...arc,
                     startAngle,
-                    endAngle,
-                  }))}
-                  fill={colorScale(arc.data[config.runtime.xAxis.dataKey])}
-                  data-tip={tooltip}
-                  data-for={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
-                />
-              </Group>
-            );
-          },
-        )}
-        {transitions.map(
-          ({
-            item: arc,
-            key,
-          }: {
-            item: PieArcDatum<Datum>;
-            props: PieStyles;
-            key: string;
-            }) => {
-           
-            const [centroidX, centroidY] = path.centroid(arc);
-            const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.1;
-
-            let textColor = "#FFF";
-            if (chroma.contrast(textColor, colorScale(arc.data[config.runtime.xAxis.dataKey])) < 3.5) {
-              textColor = "000";
-            }
-
-            return (
-              <animated.g key={key}>
-                {hasSpaceForLabel && (
-                  <Text
-                    style={{ fill: textColor }}
-                    x={centroidX}
-                    y={centroidY}
-                    dy=".33em"
-                    textAnchor="middle"
-                    pointerEvents="none"
-                  >
-                    {Math.round(
-                      (((arc.endAngle - arc.startAngle) * 180) /
-                        Math.PI /
-                        360) *
-                        100
-                    ) + "%"}
-                  </Text>
+                    endAngle
+                  })
                 )}
-              </animated.g>
-            );
-          },
-        )}
+                fill={colorScale(arc.data[config.runtime.xAxis.dataKey])}
+                data-tip={tooltip}
+                data-for={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+              />
+            </Group>
+          )
+        })}
+        {transitions.map(({ item: arc, key }: { item: PieArcDatum<Datum>; props: PieStyles; key: string }) => {
+          const [centroidX, centroidY] = path.centroid(arc)
+          const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.1
+
+          let textColor = '#FFF'
+          if (colorScale(arc.data[config.runtime.xAxis.dataKey]) && chroma.contrast(textColor, colorScale(arc.data[config.runtime.xAxis.dataKey])) < 3.5) {
+            textColor = '000'
+          }
+
+          return (
+            <animated.g key={key}>
+              {hasSpaceForLabel && (
+                <Text style={{ fill: textColor }} x={centroidX} y={centroidY} dy='.33em' textAnchor='middle' pointerEvents='none'>
+                  {Math.round((((arc.endAngle - arc.startAngle) * 180) / Math.PI / 360) * 100) + '%'}
+                </Text>
+              )}
+            </animated.g>
+          )
+        })}
       </>
-    );
+    )
   }
 
-  let [ width ] = dimensions;
+  let [width] = dimensions
 
-  if(config && config.legend && !config.legend.hide && currentViewport === 'lg') {
-    width = width * 0.73;
+  if (config && config.legend && !config.legend.hide && currentViewport === 'lg') {
+    width = width * 0.73
   }
 
-  const height = config.aspectRatio ? (width * config.aspectRatio) : config.height;
+  const height = config.aspectRatio ? width * config.aspectRatio : config.height
 
-  const radius = Math.min(width, height) / 2;
-  const centerY = height / 2;
-  const centerX = width / 2;
-  const donutThickness = (config.pieType === "Donut") ? 75 : radius;
+  const radius = Math.min(width, height) / 2
+  const centerY = height / 2
+  const centerX = width / 2
+  const donutThickness = config.pieType === 'Donut' ? 75 : radius
 
   useEffect(() => {
-    if(seriesHighlight.length > 0 && config.legend.behavior !== "highlight"){
-      let newFilteredData = [];
+    if (seriesHighlight.length > 0 && config.legend.behavior !== 'highlight') {
+      let newFilteredData = []
 
-      data.forEach((d) => {
-        if(seriesHighlight.indexOf(d[config.runtime.xAxis.dataKey]) !== -1) {
-          newFilteredData.push(d);
+      data.forEach(d => {
+        if (seriesHighlight.indexOf(d[config.runtime.xAxis.dataKey]) !== -1) {
+          newFilteredData.push(d)
         }
-      });
+      })
 
-      setFilteredData(newFilteredData);
+      setFilteredData(newFilteredData)
     } else {
-      setFilteredData(undefined);
+      setFilteredData(undefined)
     }
-  }, [seriesHighlight]);
+  }, [seriesHighlight])
 
   useEffect(() => {
-    ReactTooltip.rebuild();
-  });
+    ReactTooltip.rebuild()
+  })
 
   return (
-    <ErrorBoundary component="PieChart">
-      <svg width={width} height={height}>
+    <ErrorBoundary component='PieChart'>
+      <svg width={width} height={height} className={`group ${animatedPie ? 'animated' : ''}`} role='img' aria-label={handleChartAriaLabels(config)}>
         <Group top={centerY} left={centerX}>
-          <Pie
-            data={filteredData || data}
-            pieValue={d => d[config.runtime.yAxis.dataKey]}
-            pieSortValues={() => -1}
-            innerRadius={radius - donutThickness}
-            outerRadius={radius}
-          >
-            {pie => (
-              <AnimatedPie<any>
-                {...pie}
-                getKey={d => d.data[config.runtime.xAxis.dataKey]}
-              />
-            )}
+          <Pie data={filteredData || data} pieValue={d => d[config.runtime.yAxis.dataKey]} pieSortValues={() => -1} innerRadius={radius - donutThickness} outerRadius={radius}>
+            {pie => <AnimatedPie<any> {...pie} getKey={d => d.data[config.runtime.xAxis.dataKey]} />}
           </Pie>
         </Group>
       </svg>
-      <ReactTooltip id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`} html={true} type="light" arrowColor="rgba(0,0,0,0)" className="tooltip"/>
+      <div ref={triggerRef} />
+      <ReactTooltip id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`} html={true} type='light' arrowColor='rgba(0,0,0,0)' className='tooltip' />
     </ErrorBoundary>
   )
 }