@cdc/chart 4.25.5-1 → 4.25.6-1

package/src/helpers/tests/getNewRuntime.test.ts

@@ -0,0 +1,82 @@
+import { describe, it, expect } from 'vitest'
+import { getNewRuntime } from '../getNewRuntime'
+
+describe('getNewRuntime', () => {
+  it('should return a runtime object with default values when no data is provided', () => {
+    const visualizationConfig = { runtime: {} }
+    const newFilteredData = null
+
+    const result = getNewRuntime(visualizationConfig, newFilteredData)
+
+    expect(result.series).toEqual([])
+    expect(result.seriesLabels).toEqual({})
+    expect(result.seriesLabelsAll).toEqual([])
+    expect(result.seriesKeys).toEqual([])
+  })
+
+  it('should populate runtime.series with valid series from newFilteredData', () => {
+    const visualizationConfig = {
+      runtime: {},
+      filters: [],
+      columns: {},
+      dynamicSeriesType: 'bar',
+      dynamicSeriesLineType: 'solid',
+      xAxis: { dataKey: 'x' }
+    }
+    const newFilteredData = [
+      { x: 1, y: 10, z: 20 },
+      { x: 2, y: 15, z: 25 }
+    ]
+
+    const result = getNewRuntime(visualizationConfig, newFilteredData)
+
+    expect(result.series).toEqual([
+      { dataKey: 'y', type: 'bar', lineType: 'solid', tooltip: true },
+      { dataKey: 'z', type: 'bar', lineType: 'solid', tooltip: true }
+    ])
+    expect(result.seriesKeys).toEqual(['y', 'z'])
+    expect(result.seriesLabels).toEqual({ y: 'y', z: 'z' })
+    expect(result.seriesLabelsAll).toEqual(['y', 'z'])
+  })
+
+  it('should exclude series keys that match filters or columns', () => {
+    const visualizationConfig = {
+      runtime: {},
+      filters: [{ columnName: 'y' }],
+      columns: { z: {} },
+      dynamicSeriesType: 'bar',
+      dynamicSeriesLineType: 'solid',
+      xAxis: { dataKey: 'x' }
+    }
+    const newFilteredData = [
+      { x: 1, y: 10, z: 20, w: 30 },
+      { x: 2, y: 15, z: 25, w: 35 }
+    ]
+
+    const result = getNewRuntime(visualizationConfig, newFilteredData)
+
+    expect(result.series).toEqual([{ dataKey: 'w', type: 'bar', lineType: 'solid', tooltip: true }])
+    expect(result.seriesKeys).toEqual(['w'])
+    expect(result.seriesLabels).toEqual({ w: 'w' })
+    expect(result.seriesLabelsAll).toEqual(['w'])
+  })
+
+  it('should handle empty newFilteredData gracefully', () => {
+    const visualizationConfig = {
+      runtime: {},
+      filters: [],
+      columns: {},
+      dynamicSeriesType: 'bar',
+      dynamicSeriesLineType: 'solid',
+      xAxis: { dataKey: 'x' }
+    }
+    const newFilteredData = []
+
+    const result = getNewRuntime(visualizationConfig, newFilteredData)
+
+    expect(result.series).toEqual([])
+    expect(result.seriesKeys).toEqual([])
+    expect(result.seriesLabels).toEqual({})
+    expect(result.seriesLabelsAll).toEqual([])
+  })
+})

package/src/helpers/tests/getPiePercent.test.ts

@@ -0,0 +1,38 @@
+// getPiePercent.test.ts
+import { getPiePercent } from '../getPiePercent'
+
+describe('getPiePercent', () => {
+  it('cgets percentages for purely numeric strings', () => {
+    const data = [{ A: '1' }, { A: '3' }, { A: '6' }]
+    const result = getPiePercent(data, 'A')
+
+    // sum = 1 + 3 + 6 = 10
+    expect(result[0].A).toBeCloseTo((1 / 10) * 100) // 10%
+    expect(result[1].A).toBeCloseTo((3 / 10) * 100) // 30%
+    expect(result[2].A).toBeCloseTo((6 / 10) * 100) // 60%
+  })
+
+  it('shandle non numbers like "ABC', () => {
+    const data = [{ A: '1' }, { A: 'ABC' }, { A: '2' }]
+    const result = getPiePercent(data, 'A')
+
+    expect(result[0].A).toBeCloseTo((1 / 3) * 100)
+    expect(result[1].A).toBe('ABC')
+    expect(result[2].A).toBeCloseTo((2 / 3) * 100)
+  })
+
+  it('handles all-zero total by producing 0%', () => {
+    const data = [{ A: '0' }, { A: '0' }]
+    const result = getPiePercent(data, 'A')
+    expect(result[0].A).toBe(0)
+    expect(result[1].A).toBe(0)
+  })
+
+  it('leaves rows missing the key entirely unchanged', () => {
+    const data = [{ A: '2' }, { B: 'foo' }]
+    const result = getPiePercent(data, 'A')
+
+    expect(result[0].A).toBeCloseTo(100)
+    expect(result[1]).toEqual({ B: 'foo' })
+  })
+})

package/src/hooks/useRightAxis.ts

@@ -2,7 +2,7 @@ import { scaleLinear } from '@visx/scale'
 import useReduceData from './useReduceData'
 import { TOP_PADDING } from './useScales'
 
-export default function useRightAxis({ config, yMax = 0, data = [], updateConfig }) {
+export default function useRightAxis({ config, yMax = 0, data = [] }) {
   const hasRightAxis = config.visualizationType === 'Combo' && config.orientation === 'vertical'
   const rightSeriesKeys =
     config.series && config.series.filter(series => series.axis === 'Right').map(key => key.dataKey)

package/src/hooks/useScales.ts

@@ -79,13 +79,18 @@ const useScales = (properties: useScaleProps) => {
     xScale = composeScaleBand(xAxisDataMappedSorted, [0, xMax], 1 - config.barThickness)
   }
 
+  // handle Linear scaled viz
+  if (config.xAxis.type === 'date' && !isHorizontal) {
+    const sorted = sortXAxisData(xAxisDataMapped, config.xAxis.sortByRecentDate)
+
+    xScale = composeScaleBand(sorted, [0, xMax], 1 - config.barThickness)
+    xScale.type = scaleTypes.BAND
+  }
+
   if (xAxis.type === 'date-time' || xAxis.type === 'continuous') {
     let xAxisMin = Math.min(...xAxisDataMapped.map(Number))
     let xAxisMax = Math.max(...xAxisDataMapped.map(Number))
     let paddingRatio = config.xAxis.padding ? config.xAxis.padding * 0.01 : 0
-    if (config.brush.active) {
-      paddingRatio = config.barThickness * 0.2
-    }
 
     xAxisMin -= paddingRatio * (xAxisMax - xAxisMin)
     xAxisMax += visualizationType === 'Line' ? 0 : paddingRatio * (xAxisMax - xAxisMin)

package/src/hooks/useTooltip.tsx

@@ -1,5 +1,6 @@
 import { useContext } from 'react'
 // Local imports
+import parse from 'html-react-parser'
 import ConfigContext from '../ConfigContext'
 import { type ChartContext } from '../types/ChartContext'
 import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
@@ -120,16 +121,25 @@ export const useTooltip = props => {
       const pieData = additionalChartData?.data ?? {}
       const startAngle = additionalChartData?.startAngle ?? 0
       const endAngle = additionalChartData?.endAngle ?? 0
+      const actualPieValue = Number(additionalChartData.data[config?.yAxis?.dataKey])
 
       const degrees = ((endAngle - startAngle) * 180) / Math.PI
       const pctOf360 = (degrees / 360) * 100
-      const pctString = pctOf360.toFixed(roundTo) + '%'
+      const pctString = value => value.toFixed(roundTo) + '%'
+      const showPiePercent = config.dataFormat.showPiePercent || false
 
-      tooltipItems.push(
-        [config.xAxis.dataKey, pieData[config.xAxis.dataKey]],
-        [config.runtime.yAxis.dataKey, formatNumber(pieData[config.runtime.yAxis.dataKey])],
-        ['Percent', pctString]
-      )
+      if (showPiePercent && pieData[config.xAxis.dataKey] === 'Calculated Area') {
+        tooltipItems.push(['', 'Calculated Area'])
+      } else {
+        tooltipItems.push(
+          [config.xAxis.dataKey, pieData[config.xAxis.dataKey]],
+          [
+            config.runtime.yAxis.dataKey,
+            showPiePercent ? pctString(actualPieValue) : formatNumber(pieData[config.runtime.yAxis.dataKey])
+          ],
+          showPiePercent ? [] : ['Percent', pctString(pctOf360)]
+        )
+      }
     }
 
     if (visualizationType === 'Forest Plot') {
@@ -188,6 +198,8 @@ export const useTooltip = props => {
           }
         })
       } else {
+        const dynamicSeries = config.series.find(s => s.dynamicCategory)
+
         // Show Only the Hovered Series in Tooltip
         const dataColumn = resolvedScaleValues[0]
         const [seriesKey, value] = findDataKeyByThreshold(y, dataColumn)
@@ -198,7 +210,7 @@ export const useTooltip = props => {
           tooltipItems.push([config.xAxis.dataKey, closestXScaleValue || xVal])
           const formattedValue = getFormattedValue(seriesKey, value, config, getAxisPosition)
           tooltipItems.push([seriesKey, formattedValue])
-        } else {
+        } else if (dynamicSeries) {
           Object.keys(dataColumn).forEach(key => {
             tooltipItems.push([key, dataColumn[key]])
           })
@@ -546,7 +558,9 @@ export const useTooltip = props => {
           config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ` : ''
         )} ${config.xAxis.type === 'date' ? formattedDate : value}`}</li>
       )
-
+    if (visualizationType === 'Pie' && config.dataFormat.showPiePercent && value === 'Calculated Area') {
+      return <li className='tooltip-heading'>{`${capitalize('Calculated Area')} `}</li>
+    }
     if (key === config.xAxis.dataKey)
       return (
         <li className='tooltip-heading'>{`${capitalize(
@@ -571,14 +585,14 @@ export const useTooltip = props => {
     let newValue = label || value
     const style = displayGray ? { color: '#8b8b8a' } : {}
 
-    if (index == 1 && config.dataFormat.onlyShowTopPrefixSuffix) {
+    if (index == 1 && config.yAxis?.inlineLabel) {
       newValue = `${config.dataFormat.prefix}${newValue}${config.dataFormat.suffix}`
     }
     const activeLabel = getSeriesNameFromLabel(key)
     const displayText = activeLabel ? `${activeLabel}: ${newValue}` : newValue
 
     return (
-      <li style={style} className='tooltip-body'>
+      <li style={style} className='tooltip-body mb-1'>
         {displayText}
       </li>
     )

package/src/scss/main.scss

@@ -513,10 +513,6 @@
     }
   }
 
-  [tabindex]:focus-visible {
-    outline: 2px solid rgb(0, 95, 204) !important;
-  }
-
   // ANIMATIONS
   // Pie Chart Animations
   .animated-pie {
@@ -743,3 +739,11 @@
 .cdc-open-viz-module .debug {
   border: 2px solid red;
 }
+
+// Only frontend styles are applied in WCMS/TP
+// This helps match those styles when viewing in the editor
+.modal.cdc-cove-editor *:focus-visible,
+.cdc-open-viz-module *:focus-visible {
+  outline: dashed 2px rgba(255, 102, 1, 0.9) !important;
+  outline-offset: 3px !important;
+}

package/src/store/chart.actions.ts

@@ -1,10 +1,6 @@
 import { DimensionsType } from '@cdc/core/types/Dimensions'
 import { ChartConfig } from '../types/ChartConfig'
-
-type Action<T, P = undefined, R = undefined> = {
-  type: T
-  payload?: P
-}
+import { Action } from '@cdc/core/types/Action'
 
 // Action Types
 type SET_CONFIG = Action<'SET_CONFIG', ChartConfig>
@@ -34,7 +30,7 @@ type ChartActions =
   | SET_CONTAINER
   | SET_LOADED_EVENT
   | SET_DRAG_ANNOTATIONS
-  | SET_BRUSH_CONFIG
   | SET_LOADING
+  | SET_BRUSH_CONFIG
 
 export default ChartActions

package/src/store/chart.reducer.ts

@@ -4,7 +4,28 @@ import { ChartConfig, type ViewportSize } from '../types/ChartConfig'
 import { DimensionsType } from '@cdc/core/types/Dimensions'
 import _ from 'lodash'
 
-export const getInitialState = (configObj: ChartConfig) => {
+type ChartState = {
+  isLoading: boolean
+  config: ChartConfig
+  stateData: object[]
+  colorScale: Function
+  excludedData: object[]
+  filteredData: object[]
+  seriesHighlight: string[]
+  currentViewport: ViewportSize
+  dimensions: DimensionsType
+  container: HTMLElement | null
+  coveLoadedEventRan: boolean
+  isDraggingAnnotation: boolean
+  imageId: string
+  brushConfig: {
+    data: object[]
+    isActive: boolean
+    isBrushing: boolean
+  }
+}
+
+export const getInitialState = (configObj: ChartConfig): ChartState => {
   return {
     isLoading: true,
     config: defaults,
@@ -28,28 +49,7 @@ export const getInitialState = (configObj: ChartConfig) => {
   }
 }
 
-type State = {
-  isLoading: boolean
-  config: ChartConfig
-  stateData: object[]
-  colorScale: Function
-  excludedData: object[]
-  filteredData: object[]
-  seriesHighlight: string[]
-  currentViewport: ViewportSize
-  dimensions: DimensionsType
-  container: HTMLElement | null
-  coveLoadedEventRan: boolean
-  isDraggingAnnotation: boolean
-  imageId: string
-  brushConfig: {
-    data: object[]
-    isActive: boolean
-    isBrushing: boolean
-  }
-}
-
-export const reducer = (state: State, action: ChartActions) => {
+export const reducer = (state: ChartState, action: ChartActions): ChartState => {
   switch (action.type) {
     case 'SET_LOADING':
       return { ...state, isLoading: action.payload }

package/src/types/ChartConfig.ts

@@ -16,6 +16,7 @@ import { Region } from '@cdc/core/types/Region'
 import { VizFilter } from '@cdc/core/types/VizFilter'
 import { type Annotation } from '@cdc/core/types/Annotation'
 import { Version } from '@cdc/core/types/Version'
+import Footnotes from '@cdc/core/types/Footnotes'
 
 export type ViewportSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg'
 export type ChartColumns = Record<string, Column>
@@ -43,7 +44,7 @@ export interface PreliminaryDataItem {
   iconCode: string
   label: string
   lineCode: string
-  seriesKey: string
+  seriesKeys: string[]
   style: string
   symbol: string
   type: 'effect' | 'suppression'
@@ -69,7 +70,7 @@ type DataFormat = {
   rightSuffix: string
   roundTo: number
   suffix: string
-  onlyShowTopPrefixSuffix?: boolean
+  showPiePercent: boolean
 }
 
 type Exclusions = {
@@ -121,7 +122,8 @@ export type AllChartsConfig = {
   boxplot: BoxPlot
   brush: {
     active: boolean
-    height: number
+    data: object[]
+    isBrushing: boolean
   }
   chartMessage: { noData?: string }
   color: string
@@ -140,7 +142,8 @@ export type AllChartsConfig = {
   exclusions: Exclusions
   filters: VizFilter[]
   filterBehavior: FilterBehavior
-  footnotes: string
+  legacyFootnotes: string // this footnote functionality should be moved to the Footnotes component
+  footnotes: Footnotes
   forestPlot: ForestPlotConfigSettings
   formattedData: Object[] & { urlFiltered: boolean }
   heights: {

package/src/types/ChartContext.ts

@@ -12,7 +12,6 @@ export type TransformedData = {
 
 type SharedChartContext = {
   animatedChart?: boolean
-  brushConfig: { data: []; isBrushing: boolean; isActive: boolean }
   capitalize: (value: string) => string
   clean: Function
   colorScale?: ColorScale
@@ -31,7 +30,6 @@ type SharedChartContext = {
   legendIsolateValues?: string[]
   legendRef?: React.RefObject<HTMLDivElement>
   parentRef?: React.RefObject<HTMLDivElement>
-  setBrushConfig: Function
   setLegendIsolateValues?: Function
   svgRef?: React.RefObject<SVGSVGElement>
 }

package/src/components/ZoomBrush.tsx

@@ -1,251 +0,0 @@
-import { Brush } from '@visx/brush'
-import { Group } from '@visx/group'
-import { Text } from '@visx/text'
-import { FC, useContext, useEffect, useRef, useState } from 'react'
-import ConfigContext from '../ConfigContext'
-import { ScaleLinear, ScaleBand } from 'd3-scale'
-import { isDateScale } from '@cdc/core/helpers/cove/date'
-import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
-import { APP_FONT_SIZE } from '@cdc/core/helpers/constants'
-
-interface Props {
-  xScaleBrush: ScaleLinear<number, number>
-  yScale: ScaleBand<string>
-  xMax: number
-  yMax: number
-}
-const ZoomBrush: FC<Props> = props => {
-  const { tableData, config, parseDate, formatDate, setBrushConfig, dashboardConfig } = useContext(ConfigContext)
-  const sharedFilters = dashboardConfig?.dashboard?.sharedFilters ?? []
-  const isDashboardFilters = sharedFilters?.length > 0
-  const [showTooltip, setShowTooltip] = useState(false)
-  const [brushKey, setBrushKey] = useState(0)
-  const brushRef = useRef(null)
-  const radius = 15
-
-  const [textProps, setTextProps] = useState({
-    startPosition: 0,
-    endPosition: 0,
-    startValue: '',
-    endValue: '',
-    xMax: props.xMax
-  })
-
-  const initialPosition = {
-    start: { x: 0 },
-    end: { x: props.xMax }
-  }
-  const style = {
-    fill: '#474747',
-    stroke: 'blue',
-    fillOpacity: 0.8,
-    strokeOpacity: 0,
-    rx: radius
-  }
-
-  const onBrushChange = event => {
-    setShowTooltip(false)
-    const filteredValues = event?.xValues?.filter(val => val !== undefined)
-    if (filteredValues?.length === 0) return
-
-    const dataKey = config.xAxis?.dataKey
-
-    const brushedData = tableData.filter(item => filteredValues.includes(item[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)
-
-    setTextProps(prev => ({
-      ...prev,
-      startPosition: brushRef.current?.state.start.x,
-      endPosition: brushRef.current?.state.end.x,
-      endValue: formatIfDate(endValue),
-      startValue: formatIfDate(startValue),
-      xMax: props.xMax
-    }))
-
-    setBrushConfig(prev => {
-      return {
-        ...prev,
-        isBrushing: brushRef.current?.state.isBrushing,
-        data: brushedData
-      }
-    })
-  }
-  // reset brush if brush is off.
-  useEffect(() => {
-    if (!config.brush?.active) {
-      setBrushKey(prevKey => prevKey + 1)
-      setBrushConfig({
-        data: [],
-        isActive: false,
-        isBrushing: false
-      })
-    }
-  }, [config.brush?.active])
-
-  // reset brush if filters or exclusions are ON each time
-
-  useEffect(() => {
-    const isFiltersActive = config.filters?.some(filter => filter.active)
-    const isExclusionsActive = config.exclusions?.active
-
-    if ((isFiltersActive || isExclusionsActive || isDashboardFilters) && config.brush?.active) {
-      setBrushKey(prevKey => prevKey + 1)
-      setBrushConfig(prev => {
-        return {
-          ...prev,
-          data: tableData
-        }
-      })
-    }
-    return () =>
-      setBrushConfig(prev => {
-        return {
-          ...prev,
-          data: []
-        }
-      })
-  }, [config.filters, config.exclusions, config.brush?.active, isDashboardFilters])
-
-  const calculateTop = (): number => {
-    const tickRotation = Number(config.xAxis.tickRotation) > 0 ? Number(config.xAxis.tickRotation) : 0
-    let top = 0
-    const offSet = 30
-    if (!config.xAxis.label) {
-      if (!config.isResponsiveTicks && tickRotation) {
-        top = Number(tickRotation + config.xAxis.tickWidthMax) / 1.6
-      }
-      if (!config.isResponsiveTicks && !tickRotation) {
-        top = Number(config.xAxis.labelOffset) - offSet
-      }
-      if (config.isResponsiveTicks && config.dynamicMarginTop) {
-        top = Number(config.xAxis.labelOffset + config.xAxis.tickWidthMax / 1.6)
-      }
-      if (config.isResponsiveTicks && !config.dynamicMarginTop) {
-        top = Number(config.xAxis.labelOffset - offSet)
-      }
-    }
-    if (config.xAxis.label) {
-      if (!config.isResponsiveTicks && tickRotation) {
-        top = Number(config.xAxis.tickWidthMax + tickRotation) + offSet
-      }
-
-      if (!config.isResponsiveTicks && !tickRotation) {
-        top = config.xAxis.labelOffset + offSet
-      }
-
-      if (config.isResponsiveTicks && !tickRotation) {
-        top = Number(config.dynamicMarginTop ? config.dynamicMarginTop : config.xAxis.labelOffset) + offSet * 2
-      }
-    }
-
-    return top
-  }
-  if (!['Line', 'Bar', 'Area Chart', 'Combo'].includes(config.visualizationType)) {
-    return
-  }
-
-  return (
-    <ErrorBoundary component='Brush Chart'>
-      <Group
-        onMouseMove={() => {
-          // show tooltip only once before brush started
-          if (textProps.startPosition === 0 && (textProps.endPosition === 0 || textProps.endPosition === props.xMax)) {
-            setShowTooltip(true)
-          }
-        }}
-        onMouseLeave={() => setShowTooltip(false)}
-        display={config.brush?.active ? 'block' : 'none'}
-        top={Number(props.yMax) + calculateTop()}
-        left={Number(config.runtime.yAxis.size)}
-        pointerEvents='fill'
-      >
-        <rect fill='#949494' width={props.xMax} height={config.brush.height} rx={radius} />
-        <Brush
-          key={brushKey}
-          disableDraggingOverlay={true}
-          renderBrushHandle={props => (
-            <BrushHandle
-              left={Number(config.runtime.yAxis.size)}
-              showTooltip={showTooltip}
-              pixelDistance={textProps.endPosition - textProps.startPosition}
-              textProps={textProps}
-              {...props}
-              isBrushing={brushRef.current?.state.isBrushing}
-            />
-          )}
-          innerRef={brushRef}
-          useWindowMoveEvents={true}
-          selectedBoxStyle={style}
-          xScale={props.xScaleBrush}
-          yScale={props.yScale}
-          width={props.xMax}
-          resizeTriggerAreas={['left', 'right']}
-          height={config.brush.height}
-          handleSize={8}
-          brushDirection='horizontal'
-          initialBrushPosition={initialPosition}
-          onChange={onBrushChange}
-        />
-      </Group>
-    </ErrorBoundary>
-  )
-}
-
-const BrushHandle = props => {
-  const { x, isBrushActive, isBrushing, className, textProps, showTooltip, left } = props
-  const pathWidth = 8
-  if (!isBrushActive) {
-    return null
-  }
-  // 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 textWidth = getTextWidth(tooltipText, `${APP_FONT_SIZE / 1.1}px`)
-
-  return (
-    <>
-      {showTooltip && (
-        <Text
-          x={(Number(textProps.xMax) - textWidth) / 2}
-          dy={-12}
-          pointerEvents='visiblePainted'
-          fontSize={APP_FONT_SIZE / 1.1}
-        >
-          {tooltipText}
-        </Text>
-      )}
-      <Group left={x + pathWidth / 2} top={-2}>
-        <Text
-          pointerEvents='visiblePainted'
-          dominantBaseline='hanging'
-          x={isLeft ? 55 : -50}
-          y={25}
-          verticalAnchor='start'
-          textAnchor={textAnchor}
-          fontSize={APP_FONT_SIZE / 1.4}
-        >
-          {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}
-        ></path>
-      </Group>
-    </>
-  )
-}
-
-export default ZoomBrush