@cdc/chart 4.25.3-6 → 4.25.5-1

package/src/components/LinearChart.tsx

@@ -4,12 +4,14 @@ import React, { forwardRef, useContext, useEffect, useMemo, useRef, useState } f
 import { AxisLeft, AxisBottom, AxisRight, AxisTop } from '@visx/axis'
 import { Group } from '@visx/group'
 import { Line, Bar } from '@visx/shape'
-import { Text } from '@visx/text'
 import { Tooltip as ReactTooltip } from 'react-tooltip'
+import { Text } from '@visx/text'
 import { useTooltip, TooltipWithBounds } from '@visx/tooltip'
+import _ from 'lodash'
+
+// CDC Components
 import { isDateScale } from '@cdc/core/helpers/cove/date'
 import BrushChart from './BrushChart'
-// CDC Components
 import { AreaChart, AreaChartStacked } from './AreaChart'
 import BarChart from './BarChart'
 import ConfigContext from '../ConfigContext'
@@ -28,7 +30,7 @@ import CategoricalYAxis from './Axis/Categorical.Axis'
 // Helpers
 import { isLegendWrapViewport, isMobileHeightViewport } from '@cdc/core/helpers/viewports'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
-import { calcInitialHeight } from '../helpers/sizeHelpers'
+import { calcInitialHeight, handleAutoPaddingRight } from '../helpers/sizeHelpers'
 
 // Hooks
 import useMinMax from '../hooks/useMinMax'
@@ -41,7 +43,6 @@ import { useEditorPermissions } from './EditorPanel/useEditorPermissions'
 import Annotation from './Annotations'
 import { BlurStrokeText } from '@cdc/core/components/BlurStrokeText'
 import { countNumOfTicks } from '../helpers/countNumOfTicks'
-import _ from 'lodash'
 
 type LinearChartProps = {
   parentWidth: number
@@ -119,6 +120,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const xAxisLabelRefs = useRef([])
   const xAxisTitleRef = useRef(null)
   const lastMaxValue = useRef(maxValue)
+  const gridLineRefs = useRef([])
 
   const dataRef = useIntersectionObserver(triggerRef, {
     freezeOnceVisible: false
@@ -224,7 +226,10 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     leftMax,
     rightMax,
     dimensions,
-    xMax: parentWidth - Number(config.orientation === 'horizontal' ? config.xAxis.size : config.yAxis.size)
+    xMax:
+      parentWidth -
+      Number(config.orientation === 'horizontal' ? config.xAxis.size : config.yAxis.size) -
+      (hasRightAxis ? config.yAxis.rightAxisSize : 0)
   })
 
   const [yTickCount, xTickCount] = ['yAxis', 'xAxis'].map(axis =>
@@ -241,10 +246,10 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     handleTooltipClick,
     handleTooltipMouseOff,
     TooltipListItem,
-    getXValueFromCoordinate
   } = useCoveTooltip({
       xScale,
       yScale,
+      seriesScale,
       showTooltip,
       hideTooltip
   })
@@ -254,7 +259,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     data.length && isDateTime
       ? [0, data.length - 1].map(i => parseDate(data[i][dataKey])).reduce((a, b) => Math.abs(a - b)) / MONTH_AS_MS
       : 0
-  const useDateSpanMonths = isDateTime && dateSpanMonths > xTickCount
+  const useDateSpanMonths = isDateTime && dateSpanMonths > xTickCount && !config.runtime.xAxis.manual
 
   // GETTERS & FUNCTIONS
   const handleLeftTickFormatting = (tick, index, ticks) => {
@@ -329,6 +334,21 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   }
 
   // EFFECTS
+  // Adjust padding on the right side of the chart to accommodate for overflow
+  useEffect(() => {
+    if (!parentRef.current || !parentWidth || !gridLineRefs.current.length) return
+
+    const [updatePadding, paddingToAdd] = handleAutoPaddingRight(parentRef, xAxisLabelRefs, parentWidth)
+
+    if (!updatePadding) return
+
+    parentRef.current.style.paddingRight = `${paddingToAdd}px`
+    // subtract padding from grid line's x1 value
+    gridLineRefs.current.forEach(gridLine => {
+      if (!gridLine) return
+      gridLine.setAttribute('x1', xMax - paddingToAdd)
+    })
+  }, [parentWidth, parentHeight, data])
 
   // Make sure the chart is visible if in the editor
   /* eslint-disable react-hooks/exhaustive-deps */
@@ -421,19 +441,22 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   }, [maxValue])
 
   useEffect(() => {
-    if (orientation === 'horizontal') return
-    if (!labelsOverflow) return
+    if (!yScale?.ticks) return
+    const ticks = yScale.ticks(handleNumTicks)
+    if (orientation === 'horizontal' || !labelsOverflow || config.yAxis?.max || ticks.length === 0) {
+      setYAxisAutoPadding(0)
+      return
+    }
 
     // minimum percentage of the max value that the distance should be from the top grid line
     const MINIMUM_DISTANCE_PERCENTAGE = 0.025
 
-    const topGridLine = Math.max(...yScale.ticks(handleNumTicks))
+    const topGridLine = Math.max(...ticks)
     const needsPaddingThreshold = topGridLine - maxValue * MINIMUM_DISTANCE_PERCENTAGE
     const maxValueIsGreaterThanThreshold = maxValue > needsPaddingThreshold
 
     if (!maxValueIsGreaterThanThreshold) return
 
-    const ticks = yScale.ticks(handleNumTicks)
     const tickGap = ticks.length === 1 ? ticks[0] : ticks[1] - ticks[0]
     const nextTick = Math.max(...yScale.ticks(handleNumTicks)) + tickGap
     const divideBy = minValue < 0 ? maxValue / 2 : maxValue
@@ -592,7 +615,6 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
       </>
     )
   }
-
   return isNaN(width) ? (
     <React.Fragment></React.Fragment>
   ) : (
@@ -605,7 +627,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
         <svg
           ref={svgRef}
           onMouseMove={onMouseMove}
-          width={parentWidth}
+          width={parentWidth + config.yAxis.rightAxisSize}
           height={isNoDataAvailable ? 1 : parentHeight}
           className={`linear ${config.animate ? 'animated' : ''} ${animatedChart && config.animate ? 'animate' : ''} ${
             debugSvg && 'debug'
@@ -638,6 +660,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                         <Group key={`vx-tick-${tick.value}-${i}`} className={'vx-axis-tick'}>
                           {runtime.yAxis.gridLines && !hideFirstGridLine ? (
                             <Line
+                              innerRef={el => (gridLineRefs.current[i] = el)}
                               key={`${tick.value}--hide-hideGridLines`}
                               display={(isLogarithmicAxis && showTicks).toString()}
                               from={{ x: tick.from.x + xMax, y: tick.from.y }}
@@ -697,22 +720,6 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               yScale={yScale}
             />
           )}
-          {((visualizationType === 'Area Chart' && config.visualizationSubType === 'regular') ||
-            visualizationType === 'Combo') && (
-            <AreaChart
-              xScale={xScale}
-              yScale={yScale}
-              yMax={yMax}
-              xMax={xMax}
-              chartRef={svgRef}
-              width={xMax}
-              height={yMax}
-              handleTooltipMouseOver={handleTooltipMouseOver}
-              handleTooltipMouseOff={handleTooltipMouseOff}
-              tooltipData={tooltipData}
-              showTooltip={showTooltip}
-            />
-          )}
           {((visualizationType === 'Area Chart' && config.visualizationSubType === 'stacked') ||
             visualizationType === 'Combo') && (
             <AreaChartStacked
@@ -748,9 +755,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               chartRef={svgRef}
             />
           )}
-          {((visualizationType === 'Line' && !convertLineToBarGraph) ||
-            visualizationType === 'Combo' ||
-            visualizationType === 'Bump Chart') && (
+          {(visualizationType === 'Combo' || visualizationType === 'Bump Chart') && (
             <LineChart
               xScale={xScale}
               yScale={yScale}
@@ -764,7 +769,6 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               handleTooltipClick={handleTooltipClick}
               tooltipData={tooltipData}
               showTooltip={showTooltip}
-              chartRef={svgRef}
             />
           )}
           {(visualizationType === 'Forecasting' || visualizationType === 'Combo') && (
@@ -778,7 +782,6 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               height={yMax}
               xScaleNoPadding={xScaleNoPadding}
               chartRef={svgRef}
-              getXValueFromCoordinate={getXValueFromCoordinate}
               handleTooltipMouseOver={handleTooltipMouseOver}
               handleTooltipMouseOff={handleTooltipMouseOff}
               isBrush={false}
@@ -822,6 +825,9 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                   xMax={xMax}
                   yMax={yMax}
                   seriesStyle={config.runtime.series}
+                  tooltipData={tooltipData}
+                  handleTooltipMouseOver={handleTooltipMouseOver}
+                  handleTooltipMouseOff={handleTooltipMouseOff}
                 />
               </>
             )}
@@ -906,79 +912,45 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               width={width}
             />
           )}
-          {chartHasTooltipGuides && showTooltip && tooltipData && config.visual.verticalHoverLine && (
-            <Group key='tooltipLine-vertical' className='vertical-tooltip-line'>
+          {isNoDataAvailable && (
+            <Text
+              x={Number(config.yAxis.size) + Number(xMax / 2)}
+              y={initialHeight / 2 - (config.xAxis.padding || 0) / 2}
+              textAnchor='middle'
+            >
+              {config.chartMessage.noData}
+            </Text>
+          )}
+          {config.visual.horizontalHoverLine && tooltipData && (
+            <Group
+              key={`tooltipLine-horizontal${point.y}${point.x}`}
+              className='horizontal-tooltip-line'
+              left={config.yAxis.size ? config.yAxis.size : 0}
+            >
               <Line
-                from={{ x: tooltipData.dataXPosition - 10, y: 0 }}
-                to={{ x: tooltipData.dataXPosition - 10, y: yMax }}
+                from={{ x: 0, y: point.y }}
+                to={{ x: xMax, y: point.y }}
                 stroke={'black'}
                 strokeWidth={1}
                 pointerEvents='none'
                 strokeDasharray='5,5'
-                className='vertical-tooltip-line'
+                className='horizontal-tooltip-line'
               />
             </Group>
           )}
-          {chartHasTooltipGuides && showTooltip && tooltipData && config.visual.horizontalHoverLine && (
-            <Group
-              key='tooltipLine-horizontal'
-              className='horizontal-tooltip-line'
-              left={config.yAxis.size ? config.yAxis.size : 0}
-            >
+          {config.visual.verticalHoverLine && tooltipData && (
+            <Group key={`tooltipLine-vertical${point.y}${point.x}`} className='vertical-tooltip-line'>
               <Line
-                from={{ x: 0, y: tooltipData.dataYPosition }}
-                to={{ x: xMax, y: tooltipData.dataYPosition }}
+                from={{ x: point.x, y: 0 }}
+                to={{ x: point.x, y: yMax }}
                 stroke={'black'}
                 strokeWidth={1}
                 pointerEvents='none'
                 strokeDasharray='5,5'
-                className='horizontal-tooltip-line'
+                className='vertical-tooltip-line'
               />
             </Group>
           )}
-          {isNoDataAvailable && (
-            <Text
-              x={Number(config.yAxis.size) + Number(xMax / 2)}
-              y={initialHeight / 2 - (config.xAxis.padding || 0) / 2}
-              textAnchor='middle'
-            >
-              {config.chartMessage.noData}
-            </Text>
-          )}
-          {(config.visualizationType === 'Bar' || convertLineToBarGraph) &&
-            config.tooltips.singleSeries &&
-            config.visual.horizontalHoverLine && (
-              <Group
-                key='tooltipLine-horizontal'
-                className='horizontal-tooltip-line'
-                left={config.yAxis.size ? config.yAxis.size : 0}
-              >
-                <Line
-                  from={{ x: 0, y: point.y }}
-                  to={{ x: xMax, y: point.y }}
-                  stroke={'black'}
-                  strokeWidth={1}
-                  pointerEvents='none'
-                  strokeDasharray='5,5'
-                  className='horizontal-tooltip-line'
-                />
-              </Group>
-            )}
-          {(config.visualizationType === 'Bar' || convertLineToBarGraph) &&
-            config.tooltips.singleSeries &&
-            config.visual.verticalHoverLine && (
-              <Group key='tooltipLine-vertical' className='vertical-tooltip-line'>
-                <Line
-                  from={{ x: point.x, y: 0 }}
-                  to={{ x: point.x, y: yMax }}
-                  stroke={'black'}
-                  strokeWidth={1}
-                  pointerEvents='none'
-                  strokeDasharray='5,5'
-                  className='vertical-tooltip-line'
-                />
-              </Group>
-            )}
           <Group left={Number(config.runtime.yAxis.size)}>
             <Annotation.Draggable
               xScale={xScale}
@@ -1399,20 +1371,21 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                 const axisMaxHeight = bottomLabelStart + BOTTOM_LABEL_PADDING
 
                 const containsMultipleWords = inputString => /\s/.test(inputString)
-                const ismultiLabel = filteredTicks.some(tick => containsMultipleWords(tick.value))
+                const isMultiLabel = filteredTicks.some(tick => containsMultipleWords(tick.value))
 
                 // Calculate sumOfTickWidth here, before map function
-                const tickWidthMax = Math.max(
+                const longestTickLength = Math.max(
                   ...filteredTicks.map(tick => getTextWidth(tick.formattedValue, GET_TEXT_WIDTH_FONT))
                 )
                 // const marginTop = 20 // moved to top bc need for yMax calcs
-                const accumulator = ismultiLabel ? 180 : 100
+                const accumulator = isMultiLabel ? 180 : 100
 
                 const textWidths = filteredTicks.map(tick => getTextWidth(tick.formattedValue, GET_TEXT_WIDTH_FONT))
                 const sumOfTickWidth = textWidths.reduce((a, b) => a + b, accumulator)
                 const spaceBetweenEachTick = (xMax - sumOfTickWidth) / (filteredTicks.length - 1)
+                const bufferBetweenTicks = 40
+                const maxLengthOfTick = width / filteredTicks.length - X_TICK_LABEL_PADDING * 2 - bufferBetweenTicks
 
-                // Check if ticks are overlapping
                 // Determine the position of each tick
                 let positions = [0] // The first tick is at position 0
                 for (let i = 1; i < textWidths.length; i++) {
@@ -1424,35 +1397,22 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                 const axisBBox = axisBottomRef?.current?.getBBox().height
                 config.xAxis.axisBBox = axisBBox
 
-                // Check if ticks are overlapping
-                let areTicksTouching = false
-                textWidths.forEach((_, i) => {
-                  if (positions[i] + textWidths[i] > positions[i + 1]) {
-                    areTicksTouching = true
-                    return
-                  }
-                })
-
-                // Force wrap when showing years once so it's easier to read
-                if (config.xAxis.showYearsOnce) {
-                  areTicksTouching = true
-                }
-
                 // force wrap it last tick is close to the end of the axis
                 const lastTickWidth = textWidths[textWidths.length - 1]
                 const lastTickPosition = positions[positions.length - 1] + lastTickWidth
                 const lastTickEnd = lastTickPosition + lastTickWidth / 2
                 const lastTickEndThreshold = xMax - lastTickWidth
 
-                if (lastTickEnd > lastTickEndThreshold) {
-                  areTicksTouching = true
-                }
+                const areTicksTouching =
+                  textWidths.some(textWidth => textWidth > maxLengthOfTick) || // Force wrap if any tick is too long
+                  config.xAxis.showYearsOnce || // Force wrap when showing years once so it's easier to read
+                  lastTickEnd > lastTickEndThreshold // Force wrap it last tick is close to the end of the axis
 
                 const dynamicMarginTop =
-                  areTicksTouching && config.isResponsiveTicks ? tickWidthMax + DEFAULT_TICK_LENGTH + 20 : 0
+                  areTicksTouching && config.isResponsiveTicks ? longestTickLength + DEFAULT_TICK_LENGTH + 20 : 0
 
                 config.dynamicMarginTop = dynamicMarginTop
-                config.xAxis.tickWidthMax = tickWidthMax
+                config.xAxis.tickWidthMax = longestTickLength
 
                 return (
                   <Group className='bottom-axis' width={dimensions[0]}>
@@ -1556,7 +1516,6 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               </TooltipWithBounds>
             </>
           )}
-
         {config.visualizationType === 'Bump Chart' && (
           <ReactTooltip
             id={`bump-chart`}

package/src/components/PairedBarChart.jsx

@@ -6,6 +6,7 @@ import { Text } from '@visx/text'
 
 import ConfigContext from '../ConfigContext'
 import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
+import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 
 const PairedBarChart = ({ width, height, originalWidth }) => {
@@ -47,8 +48,8 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
   })
 
   // Set label color
-  groupOne.labelColor = groupOne.color ? getContrastColor('#000', groupOne.color) : '#000'
-  groupTwo.labelColor = groupTwo.color ? getContrastColor('#000', groupTwo.color) : '#000'
+  groupOne.labelColor = groupOne.color ? getContrastColor(APP_FONT_COLOR, groupOne.color) : APP_FONT_COLOR
+  groupTwo.labelColor = groupTwo.color ? getContrastColor(APP_FONT_COLOR, groupTwo.color) : APP_FONT_COLOR
 
   const label = config.yAxis.label ? `${config.yAxis.label}: ` : ''
 

package/src/components/PieChart/PieChart.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useState, useEffect, useRef, useMemo } from 'react'
-import { animated, useTransition, interpolate } from 'react-spring'
+import { animated, useTransition, to } from '@react-spring/web'
 
 // visx
 import { Pie } from '@visx/shape'
@@ -14,16 +14,9 @@ import { useTooltip as useCoveTooltip } from '../../hooks/useTooltip'
 import useIntersectionObserver from '../../hooks/useIntersectionObserver'
 import { handleChartAriaLabels } from '../../helpers/handleChartAriaLabels'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import LegendComponent from '../Legend/Legend.Component'
-import { createFormatLabels } from '../Legend/helpers/createFormatLabels'
 import { scaleOrdinal } from '@visx/scale'
 import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 
-const enterUpdateTransition = ({ startAngle, endAngle }) => ({
-  startAngle,
-  endAngle
-})
-
 type TooltipData = {
   data: {
     [key: string]: string | number
@@ -117,92 +110,71 @@ const PieChart = props => {
     }
   }, [dataRef?.isIntersecting, config.animate]) // eslint-disable-line
 
-  const AnimatedPie = ({ arcs, path, getKey }) => {
-    const transitions = useTransition(arcs, getKey, {
-      from: enterUpdateTransition,
-      enter: enterUpdateTransition,
-      update: enterUpdateTransition,
-      leave: enterUpdateTransition
+  function AnimatedPie({ arcs, path, getKey, colorScale, onHover, onLeave }) {
+    const enterExit = ({ startAngle, endAngle }) => ({ startAngle, endAngle })
+    const transitions = useTransition(arcs, {
+      keys: getKey,
+      from: enterExit,
+      enter: enterExit,
+      update: enterExit,
+      leave: enterExit
     })
 
-    // DEV-5053
-    // onMouseLeave function doesn't work on animated.path for some reason.
-    // As a workaround, we continue to fire the tooltipData while hovered,
-    // and use this useEffect to hide the tooltip so it doesn't persist when users scroll.
-    useEffect(() => {
-      const timeout = setTimeout(() => {
-        hideTooltip()
-      }, 500)
-      return () => {
-        clearTimeout(timeout)
-      }
-    }, [tooltipData])
-
-    return (
-      <>
-        {transitions.map(({ item: arc, props, key }, animatedPieIndex) => {
-          return (
-            <Group
-              className={arc.data[config.xAxis.dataKey]}
-              key={`${key}-${animatedPieIndex}`}
-              style={{
-                opacity:
-                  config.legend.behavior === 'highlight' &&
-                  seriesHighlight.length > 0 &&
-                  seriesHighlight.indexOf(arc.data[config.runtime.xAxis.dataKey]) === -1
-                    ? 0.5
-                    : 1
-              }}
-            >
-              <animated.path
-                d={interpolate([props.startAngle, props.endAngle], (startAngle, endAngle) =>
-                  path({
-                    ...arc,
-                    startAngle,
-                    endAngle
-                  })
-                )}
-                fill={_colorScale(arc.data[config.runtime.xAxis.dataKey])}
-                onMouseEnter={e => handleTooltipMouseOver(e, { data: arc.data[config.runtime.xAxis.dataKey], arc })}
-                onMouseLeave={e => handleTooltipMouseOff()}
-              />
-            </Group>
-          )
-        })}
-        {transitions.map(({ item: arc, key }, i) => {
-          const roundTo = Number(config.dataFormat.roundTo) || 0
-          const [centroidX, centroidY] = path.centroid(arc)
-          const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.1
+    return transitions((styles, arc) => {
+      const key = getKey(arc)
+      let textColor = '#FFF'
 
-          let textColor = '#FFF'
-          if (_colorScale(arc.data[config.runtime.xAxis.dataKey])) {
-            textColor = getContrastColor(textColor, _colorScale(arc.data[config.runtime.xAxis.dataKey]))
-          }
-          const degrees = ((arc.endAngle - arc.startAngle) * 180) / Math.PI
+      if (key && _colorScale(key)) {
+        textColor = getContrastColor(textColor, _colorScale(arc.data[config.runtime.xAxis.dataKey]))
+      }
+      const roundTo = Number(config.dataFormat.roundTo) || 0
+      // Calculate the percentage of the full circle (360 degrees)
+      const degrees = ((arc.endAngle - arc.startAngle) * 180) / Math.PI
 
-          // Calculate the percentage of the full circle (360 degrees)
-          const percentageOfCircle = (degrees / 360) * 100
-          const roundedPercentage = percentageOfCircle.toFixed(roundTo)
+      const percentageOfCircle = (degrees / 360) * 100
+      const roundedPercentage = percentageOfCircle.toFixed(roundTo) + '%'
+      return (
+        <Group key={key} className={`slice-${key}`}>
+          {/* ── the slice */}
+          <animated.path
+            d={to([styles.startAngle, styles.endAngle], (start, end) =>
+              path({ ...arc, startAngle: start, endAngle: end })
+            )}
+            fill={colorScale(key)}
+            onMouseEnter={e =>
+              onHover(e, {
+                data: arc.data,
+                dataXPosition: e.clientX,
+                dataYPosition: e.clientY,
+                startAngle: arc.startAngle,
+                endAngle: arc.endAngle
+              })
+            }
+            onMouseLeave={onLeave}
+          />
 
-          return (
-            <animated.g key={`${key}${i}`}>
-              {hasSpaceForLabel && (
-                <Text
-                  style={{ fill: textColor }}
-                  x={centroidX}
-                  y={centroidY}
-                  dy='.33em'
-                  textAnchor='middle'
-                  pointerEvents='none'
-                >
-                  {roundedPercentage + '%'}
-                </Text>
-              )}
-            </animated.g>
-          )
-        })}
-      </>
-    )
+          {/* ── the percentage label */}
+          {arc.endAngle - arc.startAngle > 0.1 && (
+            <animated.text
+              transform={to([styles.startAngle, styles.endAngle], (start, end) => {
+                const [x, y] = path.centroid({
+                  ...arc,
+                  startAngle: start,
+                  endAngle: end
+                })
+                return `translate(${x},${y})`
+              })}
+              textAnchor='middle'
+              pointerEvents='none'
+              fill={textColor}
+            >
+              {/** compute text inside the spring callback */}
+              {roundedPercentage}
+            </animated.text>
+          )}
+        </Group>
+      )
+    })
   }
 
   let chartWidth = props.parentWidth
@@ -257,12 +229,20 @@ const PieChart = props => {
             {/* prettier-ignore */}
             <Pie
             data={filteredData || _data}
-            pieValue={d => d[pivotKey || config.runtime.yAxis.dataKey]}
+            pieValue={d => parseFloat(d[pivotKey || config.runtime.yAxis.dataKey])}
             pieSortValues={() => -1}
             innerRadius={radius - donutThickness}
             outerRadius={radius}
           >
-            {pie => <AnimatedPie {...pie} getKey={d => d.data[config.runtime.xAxis.dataKey]}/>}
+           {pie => (
+             <AnimatedPie
+             {...pie}
+              getKey={d => d.data[config.runtime.xAxis.dataKey]}
+                colorScale={_colorScale}
+              onHover={handleTooltipMouseOver}
+               onLeave={handleTooltipMouseOff}
+           />
+            )}
           </Pie>
           </Group>
         </svg>

package/src/components/ScatterPlot/ScatterPlot.jsx

@@ -59,6 +59,11 @@ const ScatterPlot = ({ xScale, yScale }) => {
             opacity: 1,
             stroke: displayArea ? 'black' : ''
           }
+          if (item[s]==='') {
+            return <> </>
+          }
+
+
 
           return (
             <circle