upsetjs import Vue from 'vue' ; import { render , UpSetProps as UpSetBundleProps , propValidators , renderVennDiagram , VennDiagramProps as VennDiagramBundleProps , KarnaughMapProps as KarnaughMapBundleProps , renderKarnaughMap , UpSetSelectionProps , } from '@upsetjs/bundle' ; import type { RecordPropsDefinition } from 'vue/types/options' ; export { asCombination , asCombinations , asSet , asSets , extractSets , extractFromExpression , extractCombinations , fromSetName , isCalcQuery , isElemQuery , isSetQuery , generateCombinations , UpSetQuery , UpSetSetQuery , UpSetElemQuery , UpSetCalcQuery , ISet , ISets , ISetCombination , ISetCombinations , ISetLike , ISetComposite , IBaseSet , ISetIntersection , ISetLikes , GenerateSetCombinationsOptions , PostprocessCombinationsOptions , PostprocessSetOptions , BandScaleFactory , BandScaleLike , NumericScaleFactory , NumericScaleLike , } from '@upsetjs/bundle' ; const baseDataProps = { /**
     * the sets to visualize
     */ sets : { type : Array , required : true , validator : propValidators . sets , } , toKey : { type : Function , required : false , } , toElemKey : { type : Function , required : false , } , } ; const upsetDataProps = { /**
     * the combinations to visualize by default all combinations
     */ combinations : { type : [ Array , Object ] , validator : propValidators . combinations , default : ( ) => ( { } ) , } , numericScale : { type : [ String , Function ] , validator : propValidators . numericScale , } , bandScale : { type : [ String , Function ] , validator : propValidators . bandScale , } , setMaxScale : Number , combinationMaxScale : Number , } ; const vennDiagramDataProps = { valueFormat : { type : Function , required : false , } , } ; const kMapDataProps = { /**
     * the combinations to visualize by default all combinations
     */ combinations : { type : [ Array , Object ] , validator : propValidators . combinations , default : ( ) => ( { } ) , } , numericScale : { type : [ String , Function ] , validator : propValidators . numericScale , } , combinationMaxScale : Number , } ; const baseLayoutProps = { /**
     * width of the chart
     */ width : { type : Number , required : true , } , /**
     * height of the chart
     */ height : { type : Number , required : true , } , default padding : Number , } ; const upsetLayoutProps = { default barPadding : Number , default dotPadding : Number , default widthRatios : { type : Array , validator : propValidators . widthRatios , } , default heightRatios : { type : Array , validator : propValidators . heightRatios , } , default setLabelAlignment : { type : String , validator : propValidators . setLabelAlignment , } , } ; const vennDiagramLayoutProps = { /**
     * function used to perform the venn diagram layout
     */ layout : Function , filled : Boolean , } ; const kMapLayoutProps = { default barPadding : Number , } ; const upsetSelectionProps = { selection : { type : [ Array , Object ] , validator : propValidators . selection , } , queries : { type : Array , validator : propValidators . queries , } , } ; const baseThemeProps = { selectionColor : String , color : String , hasSelectionColor : String , opacity : Number , hasSelectionOpacity : Number , textColor : String , } ; const upsetThemeProps = { hoverHintColor : String , notMemberColor : String , alternatingBackgroundColor : { type : [ String , Boolean ] , validator : propValidators . stringOrFalse , } , } ; const vennDiagramThemeProps = { valueTextColor : String , strokeColor : String , } ; const kMapThemeProps = { strokeColor : String , } ; const baseElementProps = { id : String , className : String , classNames : { type : Object , validator : propValidators . classNames , } , extraStyle : { type : Object , validator : propValidators . style , } , styles : { type : Object , validator : propValidators . styles , } , } ; const baseStyleProps = { theme : { type : String , validator : propValidators . theme , } , /**
     * show a legend of queries
     * enabled by default when queries are set
     */ queryLegend : Boolean , default exportButtons : { type : [ Boolean , Object ] , validator : propValidators . exportButtons , } , default fontFamily : { type : [ String , Boolean ] , validator : propValidators . stringOrFalse , } , title : String , description : String , fontSizes : { type : Object , validator : propValidators . fontSizes , } , } ; const upsetStyleProps = { barLabelOffset : Number , setNameAxisOffset : { type : [ String , Number ] , validator : propValidators . axisOffset , } , combinationNameAxisOffset : { type : [ String , Number ] , validator : propValidators . axisOffset , } , setName : String , combinationName : String , } ; export interface UpSetProps extends Omit < UpSetBundleProps , 'style' > { extraStyle ? : CSSStyleDeclaration ; } export interface VennDiagramProps extends Omit < VennDiagramBundleProps , 'style' > { extraStyle ? : CSSStyleDeclaration ; } export interface KarnaughMapProps extends Omit < KarnaughMapBundleProps , 'style' > { extraStyle ? : CSSStyleDeclaration ; } function stripUndefined < P > ( props ) { const p = props ; Object . keys ( props ) . forEach ( ( key ) => { if ( typeof p [ key ] === 'undefined' ) { delete p [ key ] ; } } ) ; return props ; } function create < P > ( name , props , render ) { return Vue . extend < { } , { renderImpl ( ) : void ; createListenerProps ( ) : UpSetSelectionProps < any > ; } , { } , P > ( { name , props , render ( createElement ) { return createElement ( 'div' , { ref : 'react' , style : 'display: flex; align-items: center; justify-content: center' , } ) ; } , inheritAttrs : false , watch : { $attrs : { deep : true , handler ( ) { if ( this . $refs . react ) { this . renderImpl ( ) ; } } , } , $listeners : { deep : true , handler ( ) { if ( this . $refs . react ) { this . renderImpl ( ) ; } } , } , } , mounted ( ) { this . renderImpl ( ) ; } , methods : { createListenerProps ( ) { const listeners = { } ; if ( this . $listeners . hover ) { listeners . onHover = ( s , evt , infos ) => this . $emit ( 'hover' , s , evt , infos ) ; } if ( this . $listeners . click ) { listeners . onClick = ( s , evt , infos ) => this . $emit ( 'click' , s , evt , infos ) ; } if ( this . $listeners . contextMenu ) { listeners . onContextMenu = ( s , evt , infos ) => this . $emit ( 'contextMenu' , s , evt , infos ) ; } if ( this . $listeners . mouseMove ) { listeners . onMouseMove = ( s , evt , infos ) => this . $emit ( 'mouseMove' , s , evt , infos ) ; } return listeners ; } , renderImpl ( ) { render ( this . $refs . react as HTMLElement , stripUndefined < P > ( Object . assign ( { } , this . $props , { style : this . $props . extraStyle , } , this . $attrs , this . createListenerProps ( ) ) as unknown as P ) ) ; } , } , } ) ; } export default create < UpSetProps > ( 'UpSetJS' , Object . assign ( { } , baseDataProps , upsetDataProps , baseLayoutProps , upsetLayoutProps , baseStyleProps , upsetStyleProps , baseThemeProps , upsetThemeProps , baseElementProps , upsetSelectionProps ) , render ) ; export const VennDiagram = create < VennDiagramProps > ( 'VennDiagram' , Object . assign ( { } , baseDataProps , vennDiagramDataProps , baseLayoutProps , vennDiagramLayoutProps , baseStyleProps , baseThemeProps , vennDiagramThemeProps , baseElementProps , upsetSelectionProps ) , renderVennDiagram ) ; export const KarnaughMap = create < KarnaughMapProps > ( 'KarnaughMap' , Object . assign ( { } , baseDataProps , kMapDataProps , baseLayoutProps , kMapLayoutProps , baseStyleProps , baseThemeProps , kMapThemeProps , baseElementProps , upsetSelectionProps ) , renderKarnaughMap ) ;