/** * @upsetjs/react * https://github.com/upsetjs/upsetjs * * Copyright (c) 2021 Samuel Gratzl */ import React from 'react'; import { ISetCombinations, GenerateSetCombinationsOptions, toKey } from '@upsetjs/model'; import { DEFAULT_COMBINATIONS, DEFAULT_HEIGHT_RATIO, EMPTY_ARRAY, DEFAULT_FONT_SIZES, EMPTY_OBJECT, DEFAULT_WIDTH_RATIO, } from './defaults'; import type { UpSetThemeProps, UpSetProps, UpSetFullProps, UpSetFullPropsG, VennDiagramProps, VennDiagramFullProps, VennDiagramFullPropsG, UpSetPropsG, VennDiagramPropsG, VennDiagramThemeProps, UpSetThemes, KarnaughMapPropsG, KarnaughMapFullPropsG, KarnaughMapProps, KarnaughMapFullProps, } from './interfaces'; import { vennDiagramLayout } from './venn/layout/vennDiagramLayout'; export declare type UpSetExtraTheme = { backgroundColor: string; }; const lightTheme: Required = { selectionColor: '#ffa500', color: '#000000', hasSelectionColor: '', opacity: 1, hasSelectionOpacity: -1, textColor: '#000000', hoverHintColor: '#cccccc', notMemberColor: '#d3d3d3', alternatingBackgroundColor: 'rgba(0,0,0,0.05)', valueTextColor: '#000000', strokeColor: '#000000', backgroundColor: '#ffffff', filled: false, }; const darkTheme: Required = { selectionColor: '#ffa500', color: '#cccccc', hasSelectionColor: '', opacity: 1, hasSelectionOpacity: -1, textColor: '#ffffff', hoverHintColor: '#d9d9d9', notMemberColor: '#666666', alternatingBackgroundColor: 'rgba(255, 255, 255, 0.2)', valueTextColor: '#ffffff', strokeColor: '#ffffff', backgroundColor: '#303030', filled: false, }; const vegaTheme: Readonly> = { selectionColor: '#4c78a8', color: '#4c78a8', hasSelectionColor: '#c9d6e5', opacity: 1, hasSelectionOpacity: -1, textColor: '#000000', hoverHintColor: '#cccccc', notMemberColor: '#d3d3d3', alternatingBackgroundColor: 'rgba(0,0,0,0.05)', valueTextColor: '#000000', strokeColor: '#000000', backgroundColor: '#ffffff', filled: true, }; export function getDefaultTheme( theme?: UpSetThemes ): Readonly> { return theme === 'vega' ? vegaTheme : theme === 'dark' ? darkTheme : lightTheme; } function areCombinations( combinations: ISetCombinations | GenerateSetCombinationsOptions ): combinations is ISetCombinations { return Array.isArray(combinations); } function styleFactory(rules: string) { return ; } // eslint-disable-next-line @typescript-eslint/ban-types function fillGeneric( base: T, // eslint-disable-next-line @typescript-eslint/ban-types props: { theme?: UpSetThemes; fontSizes?: {}; queries?: readonly unknown[] }, others = {} ) { const theme = getDefaultTheme(props.theme); return Object.assign( base, { queryLegend: props.queries != null && props.queries.length > 0, theme: 'light', padding: 20, selection: null, title: '', description: '', fontFamily: 'sans-serif', queries: EMPTY_ARRAY, exportButtons: true, className: '', fontSizes: DEFAULT_FONT_SIZES, classNames: EMPTY_OBJECT, style: EMPTY_OBJECT, styles: EMPTY_OBJECT, toKey, tooltips: true, styleFactory, }, theme, props, others, props.fontSizes ? { fontSizes: Object.assign({}, DEFAULT_FONT_SIZES, props.fontSizes), } : EMPTY_OBJECT ); } /** * helper methods to fill up partial UpSet.js properties with their default values */ export function fillDefaultsG(props: UpSetPropsG): UpSetFullPropsG { return fillGeneric( { barPadding: 0.3, dotPadding: 0.7, combinations: DEFAULT_COMBINATIONS, combinationName: props.combinations != null && !areCombinations(props.combinations) && props.combinations.type === 'union' ? 'Union Size' : 'Intersection Size', barLabelOffset: 2, setNameAxisOffset: 'auto', combinationNameAxisOffset: 'auto', setName: 'Set Size', widthRatios: DEFAULT_WIDTH_RATIO, heightRatios: DEFAULT_HEIGHT_RATIO, setLabelAlignment: 'center', numericScale: 'linear', bandScale: 'band', childrenFactories: EMPTY_OBJECT, setAddons: EMPTY_ARRAY, combinationAddons: EMPTY_ARRAY, setAddonPadding: 1, combinationAddonPadding: 1, emptySelection: true, }, props ); } function valueFormat(v: number) { return v.toLocaleString(); } export function fillDefaults(props: UpSetProps): UpSetFullProps { return fillDefaultsG(props); } /** * helper methods to fill up partial UpSet.js properties with their default values */ export function fillVennDiagramDefaultsG( props: VennDiagramPropsG ): VennDiagramFullPropsG { return fillGeneric( { valueFormat, layout: vennDiagramLayout, setLabelOffsets: EMPTY_ARRAY, }, props, { exportButtons: props.exportButtons === false ? false : Object.assign({}, props.exportButtons === true ? {} : props.exportButtons, { vega: false }), } ); } export function fillVennDiagramDefaults(props: VennDiagramProps): VennDiagramFullProps { return fillVennDiagramDefaultsG(props); } /** * helper methods to fill up partial UpSet.js properties with their default values */ export function fillKarnaughMapDefaultsG( props: KarnaughMapPropsG ): KarnaughMapFullPropsG { return fillGeneric( { numericScale: 'linear', barPadding: 0.3, barLabelOffset: 2, combinationName: 'Intersection Size', combinationNameAxisOffset: 'auto', }, props, { exportButtons: props.exportButtons === false ? false : Object.assign({}, props.exportButtons === true ? {} : props.exportButtons, { vega: false }), } ); } export function fillKarnaughMapDefaults(props: KarnaughMapProps): KarnaughMapFullProps { return fillKarnaughMapDefaultsG(props); }