upsetjs import type { ISetLike } from '@upsetjs/model' ; import React , { PropsWithChildren } from 'react' ; import { mergeColor } from '../../components/utils' ; import { clsx } from '../../utils' ; import type { KMapDataInfo } from '../derive/deriveDataDependent' ; import type { KMapStyleInfo } from '../derive/deriveStyleDependent' ; function KMapQueries < T > ( { data , style , elemOverlap , secondary , tooltip , suffix , empty , } ) { const width = data . cs . bandWidth ; const offset = ( data . cell - width ) / 2 ; const className = clsx ( `fill${ suffix }` , ! tooltip && `pnone-${ style . id }` , style . classNames . bar ) ; return ( < g data - upset = { secondary ? 'cs-q' : 'cs-s' } > { data . cs . v . map ( ( d , i ) => { const l = data . cs . l [ i ] ; const key = data . cs . keys [ i ] ; if ( empty && ! secondary ) { return ( < rect key = { key } x = { l . x + offset } y = { l . y + data . cell } height = { 0 } width = { width } className = { className } style = { mergeColor ( style . styles . bar , ! style . selectionColor ? d . color : undefined ) } > { tooltip && < title > < /title>} < /rect>); } const o = elemOverlap ( d ) ; if ( o === 0 ) { return null ; } const y = data . cs . scale ( o ) ; const title = tooltip && < title > { `${ d . name } ∩ ${ tooltip }: ${ o }` } < /title>; return secondary ? ( < path key = { key } transform = { `translate(${ l . x + offset }, ${ l . y + y })` } d = { `M0,-1 l${ width },0 l0,2 l${ - width },0 L-${ data . triangleSize },-${ data . triangleSize } L-${ data . triangleSize },${ data . triangleSize } Z` } className = { className } data - i = { i } data - cardinality = { o } style = { mergeColor ( undefined , ! style . selectionColor ? d . color : undefined ) } > { title } < /path>) : (<rect key={key} x={l.x + offset} y={l.y + y} height={data.cell - y} data-i={i} data-cardinality={o} width={width} className={className} style={mergeColor(style.styles.bar, !style.selectionColor ? d.color : undefined)}> { title } < /rect>); } ) } < /g>); } export default KMapQueries ;