upsetjs import type { ISetLike , ISetCombination } from '@upsetjs/model' ; import React , { PropsWithChildren , ReactNode } from 'react' ; import type { UpSetAddons } from '../interfaces' ; import type { UpSetDataInfo } from '../derive/deriveDataDependent' ; import type { UpSetSizeInfo } from '../derive/deriveSizeDependent' ; import type { UpSetStyleInfo } from '../derive/deriveStyleDependent' ; import { addonPositionGenerator , mergeColor } from './utils' ; import { clsx } from '../utils' ; import { computeOverflowValues } from './CombinationChart' ; import { OVERFLOW_PADDING_FACTOR } from '../defaults' ; function CombinationSelectionChart < T > ( { data , size , style , elemOverlap , secondary , tooltip , suffix , transform , empty , combinationAddons , } ) { const width = data . cs . bandWidth ; const totalHeight = size . cs . h + size . sets . h ; const height = size . cs . h ; const className = clsx ( `fill${ suffix }` , ! tooltip && `pnone-${ style . id }` , style . classNames . bar ) ; return ( < g transform = { transform } data - upset = { secondary ? 'cs-q' : 'cs-s' } > { data . cs . v . map ( ( d , i ) => { const x = data . cs . x ( d ) ! ; const key = data . cs . keys [ i ] ; if ( empty && ! secondary ) { return ( < rect key = { key } x = { x } y = { height } 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 yValues = computeOverflowValues ( o , data . cs . max , data . cs . y ) ; const title = tooltip && < title > { `${ d . name } ∩ ${ tooltip }: ${ o }` } < /title>; const content = secondary ? ( < path key = { key } transform = { `translate(${ x }, ${ yValues [ 0 ] })` } 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>) : (yValues.map((y, j) => { const offset = j > 0 ? Math . floor ( data . cs . bandWidth * OVERFLOW_PADDING_FACTOR [ j - 1 ] ) : 0 ; return ( < rect key = { j } x = { x + offset } y = { y } height = { height - y } width = { width - offset * 2 } data - i = { j > 0 ? null : i } data - cardinality = { j > 0 ? null : o } className = { clsx ( className , j < yValues . length - 1 && `fillOverflow${ yValues . length - 1 - j }-${ style . id }` ) } style = { mergeColor ( style . styles . bar , ! style . selectionColor ? d . color : undefined ) } > { title } < /rect>); } ) ) ; const genPosition = addonPositionGenerator ( totalHeight , size . cs . addonPadding ) ; const addons = combinationAddons . map ( ( addon ) => { const v = genPosition ( addon ) ; const content = addon . render ( { set : d , width , height : addon . size , theme : style . theme } ) ; if ( ! content ) { return null ; } return ( < g key = { addon . name } transform = { `translate(${ x },${ v })` } > { content } < /g>); } ) . filter ( Boolean ) ; if ( addons . length === 0 ) { return content ; } return ( < g key = { key } > { content } { addons } < /g>); } ) } < /g>); } export default CombinationSelectionChart ;