import React from 'react' ; import { ShapeRendererFn } from '../../chart_types/xy_chart/renderer/shapes_paths' ; import { Color } from '../../common/colors' ; import { PointShape , PointStyle } from '../../utils/themes/theme' ; interface LegendIconProps { pointStyle ? : PointStyle ; ariaLabel : string ; color : Color ; } const MARKER_SIZE = 8 ; internal export const LegendIcon = ( { pointStyle , color , ariaLabel } ) => { const { shape = PointShape . Circle , stroke = color , strokeWidth = 1 , opacity = 1 } = pointStyle ?. shape ? pointStyle : { } ; const [ shapeFn , rotation ] = ShapeRendererFn [ shape ] ; const adjustedSize = MARKER_SIZE - ( strokeWidth ?? 0 ) ; return ( < svg width = { MARKER_SIZE * 2 } height = { MARKER_SIZE * 2 } aria - label = { ariaLabel } > < g transform = { `
          translate(${ MARKER_SIZE }, ${ MARKER_SIZE })
          rotate(${ rotation })
        ` } > < path d = { shapeFn ( adjustedSize / 2 ) } stroke = { stroke } strokeWidth = { strokeWidth } fill = { color } opacity = { opacity } / > < /g> < /svg>); } ;