@cdc/chart 4.25.5-1 → 4.25.6-1

package/src/components/LinearChart.tsx

@@ -11,8 +11,7 @@ import _ from 'lodash'
 
 // CDC Components
 import { isDateScale } from '@cdc/core/helpers/cove/date'
-import BrushChart from './BrushChart'
-import { AreaChart, AreaChartStacked } from './AreaChart'
+import { AreaChartStacked } from './AreaChart'
 import BarChart from './BarChart'
 import ConfigContext from '../ConfigContext'
 import BoxPlot from './BoxPlot'
@@ -43,6 +42,8 @@ import { useEditorPermissions } from './EditorPanel/useEditorPermissions'
 import Annotation from './Annotations'
 import { BlurStrokeText } from '@cdc/core/components/BlurStrokeText'
 import { countNumOfTicks } from '../helpers/countNumOfTicks'
+import HoverLine from './HoverLine/HoverLine'
+import BrushChart from './BrushChart'
 
 type LinearChartProps = {
   parentWidth: number
@@ -59,10 +60,23 @@ const AXIS_LABEL_FONT_SIZE = 18
 const AXIS_LABEL_FONT_SIZE_SMALL = 14
 const TICK_LABEL_MARGIN_RIGHT = 4.5
 
+type TooltipData = {
+  dataXPosition?: number
+  dataYPosition?: number
+}
+
+type UseTooltipReturn<T = TooltipData> = {
+  tooltipData: T | null
+  showTooltip: (tooltipData: T) => void
+  hideTooltip: () => void
+  tooltipOpen: boolean
+  tooltipLeft: number | null
+  tooltipTop: number | null
+}
+
 const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, parentWidth }, svgRef) => {
   // prettier-ignore
   const {
-    brushConfig,
     colorScale,
     config,
     convertLineToBarGraph,
@@ -79,8 +93,8 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     parentRef,
     tableData,
     transformedData: data,
-    updateConfig,
     seriesHighlight,
+    brushConfig
   } = useContext(ConfigContext)
 
   // CONFIG
@@ -99,14 +113,14 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     dataFormat,
     debugSvg
   } = config
-  const { suffix, onlyShowTopPrefixSuffix } = dataFormat
-  const { labelsAboveGridlines, hideAxis } = config.yAxis
+  const { labelsAboveGridlines, hideAxis, inlineLabel } = config.yAxis
 
   // HOOKS  % STATES
   const { minValue, maxValue, existPositiveValue, isAllLine } = useReduceData(config, data)
   const { visSupportsReactTooltip } = useEditorPermissions()
   const { hasTopAxis } = getTopAxis(config)
   const [animatedChart, setAnimatedChart] = useState(false)
+  const [showHoverLine, setShowHoverLine] = useState(false)
   const [point, setPoint] = useState({ x: 0, y: 0 })
   const [suffixWidth, setSuffixWidth] = useState(0)
   const [yAxisAutoPadding, setYAxisAutoPadding] = useState(0)
@@ -121,6 +135,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const xAxisTitleRef = useRef(null)
   const lastMaxValue = useRef(maxValue)
   const gridLineRefs = useRef([])
+  const tooltipRef = useRef(null)
 
   const dataRef = useIntersectionObserver(triggerRef, {
     freezeOnceVisible: false
@@ -132,8 +147,8 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const isLogarithmicAxis = config.yAxis.type === 'logarithmic'
   const isForestPlot = visualizationType === 'Forest Plot'
   const isDateTime = config.xAxis.type === 'date-time'
-  const suffixHasNoSpace = !suffix.includes(' ')
-  const labelsOverflow = onlyShowTopPrefixSuffix && !suffixHasNoSpace
+  const inlineLabelHasNoSpace = !inlineLabel?.includes(' ')
+  const labelsOverflow = inlineLabel && !inlineLabelHasNoSpace
   const padding = orientation === 'horizontal' ? Number(config.xAxis.size) : Number(config.yAxis.size)
   const yLabelOffset = isNaN(parseInt(`${runtime.yAxis.labelOffset}`)) ? 0 : parseInt(`${runtime.yAxis.labelOffset}`)
   const tickLabelFontSize = isMobileHeightViewport(currentViewport) ? TICK_LABEL_FONT_SIZE_SMALL : TICK_LABEL_FONT_SIZE
@@ -218,7 +233,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     yMax
   }
   const { min, max, leftMax, rightMax } = useMinMax(properties)
-  const { yScaleRight, hasRightAxis } = useRightAxis({ config, yMax, data, updateConfig })
+  const { yScaleRight, hasRightAxis } = useRightAxis({ config, yMax, data })
   const { xScale, yScale, seriesScale, g1xScale, g2xScale, xScaleNoPadding, xScaleAnnotation } = useScales({
     ...properties,
     min,
@@ -238,7 +253,9 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const handleNumTicks = isForestPlot ? config.data.length : yTickCount
 
   // Tooltip Helpers
-  const { tooltipData, showTooltip, hideTooltip, tooltipOpen, tooltipLeft, tooltipTop } = useTooltip()
+
+  const { tooltipData, showTooltip, hideTooltip, tooltipOpen, tooltipLeft, tooltipTop } =
+    useTooltip<UseTooltipReturn<TooltipData>>()
 
   // prettier-ignore
   const {
@@ -247,11 +264,11 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     handleTooltipMouseOff,
     TooltipListItem,
   } = useCoveTooltip({
-      xScale,
-      yScale,
-      seriesScale,
-      showTooltip,
-      hideTooltip
+    xScale,
+    yScale,
+    seriesScale,
+    showTooltip,
+    hideTooltip
   })
   // get the number of months between the first and last date
   const { dataKey } = runtime.xAxis
@@ -271,7 +288,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     if (config.data && !config.data[index] && visualizationType === 'Forest Plot') return
     if (config.visualizationType === 'Forest Plot') return config.data[index][config.xAxis.dataKey]
     if (isDateScale(runtime.yAxis)) return formatDate(parseDate(tick))
-    if (orientation === 'vertical' && max - min < 3)
+    if (orientation === 'vertical' && max - min < 3 && !config.dataFormat?.roundTo)
       return formatNumber(tick, 'left', shouldAbbreviate, false, false, '1', { index, length: ticks.length })
     if (orientation === 'vertical') {
       // TODO suggestion: pass all options as object key/values to allow for more flexibility
@@ -375,7 +392,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     if (!suffixEl) return setSuffixWidth(0)
     const suffixElWidth = suffixEl.getBBox().width
     setSuffixWidth(suffixElWidth)
-  }, [config.dataFormat.suffix, config.dataFormat.onlyShowTopPrefixSuffix])
+  }, [config.dataFormat.suffix, inlineLabel])
 
   // forest plot x-axis label positioning
   useEffect(() => {
@@ -401,11 +418,11 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     const topLabelOnGridline = topYLabelRef.current && yAxis.labelsAboveGridlines
 
     // Heights to add
-
     const brushHeight = brush?.active ? brush?.height + brush?.height : 0
+    const brushHeightWithMargin = config.brush?.active ? brushHeight + brushHeight : 0
     const forestRowsHeight = isForestPlot ? config.data.length * forestPlot.rowHeight : 0
     const topLabelOnGridlineHeight = topLabelOnGridline ? topYLabelRef.current.getBBox().height : 0
-    const additionalHeight = axisBottomHeight + brushHeight + forestRowsHeight + topLabelOnGridlineHeight
+    const additionalHeight = axisBottomHeight + brushHeightWithMargin + forestRowsHeight + topLabelOnGridlineHeight
     const newHeight = initialHeight + additionalHeight
     if (!parentRef.current) return
 
@@ -471,6 +488,23 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     setYAxisAutoPadding(newPadding * 100 + 0.1)
   }, [maxValue, labelsOverflow, yScale, handleNumTicks])
 
+  useEffect(() => {
+    if (!tooltipOpen) return
+    if (!tooltipRef.current) return
+
+    const { dataXPosition } = tooltipData as { [key: string]: number }
+
+    if (!dataXPosition) return
+
+    const { width: tooltipWidth } = tooltipRef.current.node.getBoundingClientRect()
+
+    const rightSideRemainingSpace = parentWidth - dataXPosition
+
+    const rightSide = rightSideRemainingSpace <= tooltipWidth && dataXPosition > parentWidth / 2 - 10
+    const maxWidth = rightSide ? dataXPosition - 10 : parentWidth - (dataXPosition + 6)
+    tooltipRef.current.node.style.maxWidth = `${maxWidth}px`
+  }, [tooltipOpen, tooltipData])
+
   // Render Functions
   const generatePairedBarAxis = () => {
     const axisMaxHeight = bottomLabelStart + BOTTOM_LABEL_PADDING
@@ -635,6 +669,8 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
           role='img'
           aria-label={handleChartAriaLabels(config)}
           style={{ overflow: 'visible' }}
+          onMouseLeave={() => setShowHoverLine(false)}
+          onMouseEnter={() => setShowHoverLine(true)}
         >
           {!isDraggingAnnotation && <Bar width={parentWidth} height={initialHeight} fill={'transparent'}></Bar>}{' '}
           {/* GRID LINES */}
@@ -771,6 +807,27 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               showTooltip={showTooltip}
             />
           )}
+          {/* Line chart */}
+          {/* TODO: Make this just line or combo? */}
+          {!['Paired Bar', 'Box Plot', 'Area Chart', 'Scatter Plot', 'Deviation Bar', 'Forecasting', 'Bar'].includes(
+            visualizationType
+          ) &&
+            !convertLineToBarGraph && (
+              <>
+                <LineChart
+                  xScale={xScale}
+                  yScale={yScale}
+                  getXAxisData={getXAxisData}
+                  getYAxisData={getYAxisData}
+                  xMax={xMax}
+                  yMax={yMax}
+                  seriesStyle={config.runtime.series}
+                  tooltipData={tooltipData}
+                  handleTooltipMouseOver={handleTooltipMouseOver}
+                  handleTooltipMouseOff={handleTooltipMouseOff}
+                />
+              </>
+            )}
           {(visualizationType === 'Forecasting' || visualizationType === 'Combo') && (
             <Forecasting
               showTooltip={showTooltip}
@@ -778,13 +835,11 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               xScale={xScale}
               yScale={yScale}
               width={xMax}
-              le
               height={yMax}
               xScaleNoPadding={xScaleNoPadding}
               chartRef={svgRef}
               handleTooltipMouseOver={handleTooltipMouseOver}
               handleTooltipMouseOff={handleTooltipMouseOff}
-              isBrush={false}
             />
           )}
           {visualizationType === 'Forest Plot' && (
@@ -855,7 +910,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                   strokeDasharray={handleLineType(anchor.lineStyle)}
                   stroke={anchor.color ? anchor.color : 'rgba(0,0,0,1)'}
                   className='anchor-y'
-                  from={{ x: 0 + padding, y: position - middleOffset}}
+                  from={{ x: 0 + padding, y: position - middleOffset }}
                   to={{ x: width - config.yAxis.rightAxisSize, y: position - middleOffset }}
                 />
               )
@@ -887,14 +942,14 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               return (
                 // prettier-ignore
                 <Line
-                key={`xAxis-${anchor.value}--${index}`}
-                strokeDasharray={handleLineType(anchor.lineStyle)}
-                stroke={anchor.color ? anchor.color : 'rgba(0,0,0,1)'}
-                fill={anchor.color ? anchor.color : 'rgba(0,0,0,1)'}
-                className='anchor-x'
-                from={{ x: Number(anchorPosition) + Number(padding), y: 0 }}
-                to={{ x: Number(anchorPosition) + Number(padding), y: yMax }}
-              />
+                  key={`xAxis-${anchor.value}--${index}`}
+                  strokeDasharray={handleLineType(anchor.lineStyle)}
+                  stroke={anchor.color ? anchor.color : 'rgba(0,0,0,1)'}
+                  fill={anchor.color ? anchor.color : 'rgba(0,0,0,1)'}
+                  className='anchor-x'
+                  from={{ x: Number(anchorPosition) + Number(padding), y: 0 }}
+                  to={{ x: Number(anchorPosition) + Number(padding), y: yMax }}
+                />
               )
             })}
           {/* we are handling regions in bar charts differently, so that we can calculate the bar group into the region space. */}
@@ -921,35 +976,11 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               {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: 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.visual.verticalHoverLine && tooltipData && (
-            <Group key={`tooltipLine-vertical${point.y}${point.x}`} 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>
+          {showHoverLine && (
+            <>
+              <HoverLine xMax={xMax} yMax={yMax} point={point} tooltipData={tooltipData} orientation='horizontal' />
+              <HoverLine xMax={xMax} yMax={yMax} point={point} tooltipData={tooltipData} orientation='vertical' />
+            </>
           )}
           <Group left={Number(config.runtime.yAxis.size)}>
             <Annotation.Draggable
@@ -1021,15 +1052,18 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
 
                       // Vertical value/suffix vars
                       const lastTick = props.ticks.length - 1 === i
-                      const hideTopTick = lastTick && onlyShowTopPrefixSuffix && suffix && !suffixHasNoSpace
+                      const useInlineLabel = lastTick && inlineLabel
+                      const hideTopTick = lastTick && inlineLabel && !inlineLabelHasNoSpace
                       const valueOnLinePadding = hideAxis ? -8 : -12
                       const labelXPadding = labelsAboveGridlines ? valueOnLinePadding : TICK_LABEL_MARGIN_RIGHT
                       const labelYPadding = labelsAboveGridlines ? 4 : 0
                       const labelX = tick.to.x - labelXPadding
                       const labelY = tick.to.y - labelYPadding
                       const labelVerticalAnchor = labelsAboveGridlines ? 'end' : 'middle'
-                      const combineDomSuffixWithValue =
-                        onlyShowTopPrefixSuffix && labelsAboveGridlines && suffix && lastTick
+                      const combineDomInlineLabelWithValue = inlineLabel && labelsAboveGridlines && lastTick
+                      const formattedValue = useInlineLabel
+                        ? tick.formattedValue.replace(config.dataFormat.suffix, '')
+                        : tick.formattedValue
 
                       return (
                         <Group key={`vx-tick-${tick.value}-${i}`} className={'vx-axis-tick'}>
@@ -1148,11 +1182,11 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                             visualizationType !== 'Bump Chart' &&
                             !config.yAxis.hideLabel && (
                               <>
-                                {/* TOP ONLY SUFFIX: Dom suffix for 'show only top suffix' behavior */}
-                                {/* top suffix is shown alone and is allowed to 'overflow' to the right */}
-                                {/* SPECIAL ONE CHAR CASE: a one character top-only suffix does not overflow */}
+                                {/* INLINE LABEL BEHAVIOR: Dom suffix for 'inlineLabel' behavior */}
+                                {/* inline label is shown alone and is allowed to 'overflow' to the right */}
+                                {/* SPECIAL ONE CHAR CASE: a one character inlineLabel does not overflow */}
                                 {/* IF VALUES ON LINE: suffix is combined with value to avoid having to calculate varying (now left-aligned) value widths */}
-                                {onlyShowTopPrefixSuffix && lastTick && !labelsAboveGridlines && (
+                                {inlineLabel && lastTick && !labelsAboveGridlines && (
                                   <BlurStrokeText
                                     innerRef={suffixRef}
                                     display={isLogarithmicAxis ? showTicks : 'block'}
@@ -1161,7 +1195,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                                     y={labelY}
                                     angle={-Number(config.yAxis.tickRotation) || 0}
                                     verticalAnchor={labelVerticalAnchor}
-                                    textAnchor={suffixHasNoSpace ? 'end' : 'start'}
+                                    textAnchor={inlineLabelHasNoSpace ? 'end' : 'start'}
                                     fill={config.yAxis.tickLabelColor}
                                     stroke={'#fff'}
                                     paintOrder={'stroke'} // keeps stroke under fill
@@ -1169,7 +1203,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                                     style={{ whiteSpace: 'pre-wrap' }} // prevents leading spaces from being trimmed
                                     fontSize={tickLabelFontSize}
                                   >
-                                    {suffix}
+                                    {inlineLabel}
                                   </BlurStrokeText>
                                 )}
 
@@ -1178,7 +1212,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                                   innerRef={el => lastTick && (topYLabelRef.current = el)}
                                   display={isLogarithmicAxis ? showTicks : 'block'}
                                   dx={isLogarithmicAxis ? -6 : 0}
-                                  x={suffixHasNoSpace ? labelX - suffixWidth : labelX}
+                                  x={inlineLabelHasNoSpace ? labelX - suffixWidth : labelX}
                                   y={labelY + (config.runtime.horizontal ? horizontalTickOffset : 0)}
                                   angle={-Number(config.yAxis.tickRotation) || 0}
                                   verticalAnchor={config.runtime.horizontal ? 'start' : labelVerticalAnchor}
@@ -1191,7 +1225,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                                   style={{ whiteSpace: 'pre-wrap' }} // prevents leading spaces from being trimmed
                                   fontSize={tickLabelFontSize}
                                 >
-                                  {`${tick.formattedValue}${combineDomSuffixWithValue ? suffix : ''}`}
+                                  {`${formattedValue}${combineDomInlineLabelWithValue ? inlineLabel : ''}`}
                                 </BlurStrokeText>
                               </>
                             )}
@@ -1495,13 +1529,15 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
           showTooltip &&
           !tooltipData?.data?.some(subArray => subArray.some(item => item === undefined)) &&
           tooltipData.dataYPosition &&
-          tooltipData.dataXPosition && (
+          tooltipData.dataXPosition &&
+          !config.tooltips.singleSeries && (
             <>
               <style>{`.tooltip {background-color: rgba(255,255,255, ${
                 config.tooltips.opacity / 100
               }) !important;`}</style>
               <style>{`.tooltip {max-width:300px} !important; word-wrap: break-word; `}</style>
               <TooltipWithBounds
+                ref={tooltipRef}
                 key={Math.random()}
                 className={'tooltip cdc-open-viz-module'}
                 left={tooltipLeft}
@@ -1525,7 +1561,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
             style={{ background: `rgba(255,255,255, ${config.tooltips.opacity / 100})`, color: 'black' }}
           />
         )}
-        {visSupportsReactTooltip() && !isDraggingAnnotation && (
+        {!isDraggingAnnotation && (
           <ReactTooltip
             id={`cdc-open-viz-tooltip-${runtime.uniqueId}`}
             variant='light'

package/src/components/PieChart/PieChart.tsx

@@ -46,28 +46,51 @@ const PieChart = props => {
   const pivotColumns = Object.values(config.columns).filter(column => column.showInViz)
   const dataNeedsPivot = pivotColumns.length > 0
   const pivotKey = dataNeedsPivot ? 'pivotColumn' : undefined
+  const showPercentage = config.dataFormat.showPiePercent
+  const labelForCalcArea = 'Calculated Area'
+
   const _data = useMemo(() => {
+    let baseData = []
+
     if (dataNeedsPivot) {
-      let newData = []
       const primaryColumn = config.yAxis.dataKey
       const additionalColumns = pivotColumns.map(column => column.name)
       const allColumns = [primaryColumn, ...additionalColumns]
       const columnToUpdate = config.xAxis.dataKey
+
       data.forEach(d => {
         allColumns.forEach(col => {
-          const data = d[col]
-          if (data) {
-            newData.push({
-              [pivotKey]: data,
+          const val = d[col]
+          if (val) {
+            baseData.push({
+              [pivotKey]: val,
               [columnToUpdate]: `${d[columnToUpdate]} - ${col}`
             })
           }
         })
       })
-      return newData
+    } else {
+      baseData = [...data]
     }
-    return data
-  }, [data, dataNeedsPivot])
+
+    // === ADD "OTHER" IF PERCENT MODE IS ENABLED ===
+    if (showPercentage) {
+      const total = baseData.reduce((sum, d) => {
+        const val = parseFloat(d[config.runtime.yAxis.dataKey])
+        return sum + (isNaN(val) ? 0 : val)
+      }, 0)
+
+      if (total < 100) {
+        const remaining = 100 - total
+        baseData.push({
+          [config.runtime.xAxis.dataKey]: labelForCalcArea,
+          [config.runtime.yAxis.dataKey]: remaining
+        })
+      }
+    }
+
+    return baseData
+  }, [data, dataNeedsPivot, showPercentage, config])
 
   const _colorScale = useMemo(() => {
     if (dataNeedsPivot) {
@@ -78,15 +101,31 @@ const PieChart = props => {
       const numberOfKeys = Object.entries(keys).length
       let palette = config.customColors || colorPalettes[config.palette]
       palette = palette.slice(0, numberOfKeys)
-
       return scaleOrdinal({
         domain: Object.keys(keys),
         range: palette,
         unknown: null
       })
     }
+
+    if (showPercentage) {
+      const keys = {}
+      _data.forEach(d => {
+        keys[d[config.xAxis.dataKey]] = true
+      })
+      // take out Calculated Area so it falls back to `unknown`
+      const domainKeys = Object.keys(keys).filter(k => k !== labelForCalcArea)
+
+      const basePalette = (config.customColors || colorPalettes[config.palette]).slice(0, domainKeys.length)
+      const COOL_GRAY_90 = getComputedStyle(document.documentElement).getPropertyValue('--cool-gray-10').trim()
+      return scaleOrdinal({
+        domain: domainKeys,
+        range: basePalette,
+        unknown: COOL_GRAY_90
+      })
+    }
     return colorScale
-  }, [colorScale, dataNeedsPivot])
+  }, [_data, dataNeedsPivot, colorScale])
 
   const triggerRef = useRef()
   const dataRef = useIntersectionObserver(triggerRef, {
@@ -130,9 +169,15 @@ const PieChart = props => {
       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
+      const valueFromData = parseFloat(arc.data[config.runtime.yAxis.dataKey])
+      const percentageToDisplay = showPercentage ? valueFromData : (degrees / 360) * 100
+
+      let roundedPercentage = percentageToDisplay.toFixed(roundTo) + '%'
+      // add missing pie part
+      if (arc.data[config.xAxis.dataKey] === labelForCalcArea && config.dataFormat.showPiePercent) {
+        roundedPercentage = '**'
+      }
 
-      const percentageOfCircle = (degrees / 360) * 100
-      const roundedPercentage = percentageOfCircle.toFixed(roundTo) + '%'
       return (
         <Group key={key} className={`slice-${key}`}>
           {/* ── the slice */}
@@ -238,7 +283,7 @@ const PieChart = props => {
              <AnimatedPie
              {...pie}
               getKey={d => d.data[config.runtime.xAxis.dataKey]}
-                colorScale={_colorScale}
+              colorScale={_colorScale}
               onHover={handleTooltipMouseOver}
                onLeave={handleTooltipMouseOff}
            />

package/src/data/initial-state.js

@@ -89,6 +89,11 @@ export default {
   topAxis: {
     hasLine: false
   },
+  brush: {
+    isActive: false,
+    isBrushing: false,
+    data: []
+  },
   isLegendValue: false,
   barThickness: 0.35,
   barHeight: 25,
@@ -120,7 +125,8 @@ export default {
     maxTickRotation: 0,
     padding: 5,
     showYearsOnce: false,
-    sortByRecentDate: false
+    sortByRecentDate: false,
+    brushActive: false
   },
   table: {
     label: 'Data Table',
@@ -176,10 +182,7 @@ export default {
     position: 'right',
     orderedValues: []
   },
-  brush: {
-    height: 45,
-    active: false
-  },
+
   exclusions: {
     active: false,
     keys: []

package/src/helpers/countNumOfTicks.ts

@@ -15,17 +15,8 @@ export const countNumOfTicks = ({ axis, max, runtime, currentViewport, isHorizon
         ? undefined
         : !isHorizontal && numTicks && numTicks
     // to fix edge case of small numbers with decimals
-    if (tickCount === undefined && !config.dataFormat.roundTo) {
-      // then it is set to Auto
-      if (Number(max) <= 3) {
-        tickCount = 2
-      } else {
-        tickCount = 4 // same default as standalone components
-      }
-    }
-    if (Number(tickCount) > Number(max) && !isHorizontal) {
-      // cap it and round it so its an integer
-      tickCount = Math.max(2, Number(min) < 0 ? Math.round(max) * 2 : Math.round(max))
+    if (tickCount === undefined) {
+      tickCount = 4 // same default as standalone components
     }
   }
 
@@ -38,14 +29,8 @@ export const countNumOfTicks = ({ axis, max, runtime, currentViewport, isHorizon
         : !isHorizontal && !numTicks
         ? undefined
         : !isHorizontal && numTicks && numTicks
-    if (isHorizontal && tickCount === undefined && !config.dataFormat.roundTo) {
-      // then it is set to Auto
-      // - check for small numbers situation
-      if (max <= 3) {
-        tickCount = 2
-      } else {
-        tickCount = 4 // same default as standalone components
-      }
+    if (isHorizontal && tickCount === undefined) {
+      tickCount = 4 // same default as standalone components
     }
 
     if (config.visualizationType === 'Forest Plot') {

package/src/helpers/getNewRuntime.ts

@@ -0,0 +1,35 @@
+import _ from 'lodash'
+
+export const getNewRuntime = (visualizationConfig, newFilteredData) => {
+  const runtime = _.cloneDeep(visualizationConfig.runtime) || {}
+  runtime.series = []
+  runtime.seriesLabels = {}
+  runtime.seriesLabelsAll = []
+  const { filters, columns, dynamicSeriesType, dynamicSeriesLineType, xAxis } = visualizationConfig
+  if (newFilteredData?.length) {
+    const columnNames = Object.keys(newFilteredData[0])
+    columnNames.forEach(colName => {
+      const isNotXAxis = xAxis.dataKey !== colName
+      const isNotFiltered = !filters || !filters?.find(filter => filter.columnName === colName)
+      const noColConfiguration = !columns || Object.keys(columns).indexOf(colName) === -1
+      if (isNotXAxis && isNotFiltered && noColConfiguration) {
+        runtime.series.push({
+          dataKey: colName,
+          type: dynamicSeriesType,
+          lineType: dynamicSeriesLineType,
+          tooltip: true
+        })
+      }
+    })
+  }
+
+  runtime.seriesKeys = runtime.series
+    ? runtime.series.map(series => {
+        runtime.seriesLabels[series.dataKey] = series.name || series.label || series.dataKey
+        runtime.seriesLabelsAll.push(series.name || series.dataKey)
+        return series.dataKey
+      })
+    : []
+
+  return runtime
+}

package/src/helpers/getPiePercent.ts

@@ -0,0 +1,22 @@
+import _ from 'lodash'
+
+export const getPiePercent = (data: Record<string, any>[], seriesKey: string): Record<string, any>[] => {
+  // getonly the numeric values for each seriesKey
+  const numericValues = data.map(row => _.toNumber(row[seriesKey])).filter(v => !Number.isNaN(v))
+
+  const total = numericValues.reduce((sum, v) => sum + v, 0)
+
+  return data.map(row => {
+    const raw = _.toNumber(row[seriesKey])
+    if (Number.isNaN(raw)) {
+      // skip non-numeric / undefined
+      return row
+    }
+
+    const pct = total === 0 ? 0 : (raw / total) * 100
+    return {
+      ...row,
+      [seriesKey]: pct
+    }
+  })
+}

package/src/helpers/getTransformedData.ts

@@ -0,0 +1,22 @@
+type DataRow = Record<string, any>
+
+export const getTransformedData = ({
+  brushData,
+  filteredData,
+  excludedData,
+  clean
+}: {
+  brushData: DataRow[]
+  filteredData: DataRow[]
+  excludedData: DataRow[]
+  clean: (data: DataRow[]) => DataRow[]
+}): DataRow[] => {
+  const data =
+    Array.isArray(brushData) && brushData.length > 0
+      ? brushData
+      : Array.isArray(filteredData) && filteredData.length > 0
+      ? filteredData
+      : excludedData
+
+  return clean(data)
+}