UpSet gallery

Show setup script

<script lang="ts">
	import { UpSet } from '../../../lib/index.js';
	import { genres, makeData } from '../../demo-data.js';

	const data = makeData();

	let fMin = $state<number | undefined>(10);
	let fLimit = $state<number | undefined>(undefined);
	let fHidden = $state<string[]>([]);
	let filterCalls = $state<string[]>([]);
	let hiddenLimit = $state(8);
	let lastReport = $state('');
</script>

Hidden count (limit + footer)

limit drops intersections; onresult and the footer snippet say how many.

limit

Show code

<UpSet
	{data}
	sets={genres}
	limit={hiddenLimit}
	onresult={(r) => (lastReport = JSON.stringify(r))}
>
	{#snippet footer({ shown, total })}
		<p class="desc" data-testid="hidden-footer">
			the largest {shown} of {total} combinations are drawn
		</p>
	{/snippet}
</UpSet>

Filter controls (bound)

filterControls renders a bar for min size, degree, limit and which sets to show; the filter props are bindable.

Show code

<UpSet
	{data}
	sets={genres}
	filterControls
	bind:minSize={fMin}
	bind:limit={fLimit}
	bind:hiddenSets={fHidden}
/>

Filter controls (controlled)

With controlled the controls only call onfilterchange.

Show code

<UpSet
	{data}
	sets={genres}
	filterControls
	controlled
	minSize={10}
	onfilterchange={(next, prev) => (filterCalls = [...filterCalls, `${prev.minSize ?? ''}->${next.minSize ?? ''}`])}
/>