@reshape-biotech/design-system 0.0.45 → 0.0.48

package/dist/components/graphs/chart/Chart.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+	import * as echarts from 'echarts';
+	import type { ECElementEvent } from 'echarts';
+	import { onMount } from 'svelte';
+	import { colors, textColor } from '../../../tokens';
+	type Props = {
+		options: echarts.EChartsOption;
+		theme?: string | object;
+		renderer?: 'canvas' | 'svg';
+		height?: string;
+		width?: string;
+		// Common event handlers
+		onitemclick?: (params: ECElementEvent) => void;
+		onmouseover?: (params: ECElementEvent) => void;
+		onmouseout?: () => void;
+		// Additional options
+		autoResize?: boolean;
+		loading?: boolean;
+	};
+
+	const {
+		options,
+		theme,
+		renderer = 'svg',
+		height = '100%',
+		width = '100%',
+		onitemclick,
+		onmouseover,
+		onmouseout,
+		autoResize = true,
+		loading = false
+	}: Props = $props();
+
+	let chart = $state<echarts.ECharts | null>(null);
+	let container: HTMLElement;
+
+	function deepMerge(target: any, source: any) {
+		for (const key in source) {
+			if (source[key] instanceof Object && key in target) {
+				deepMerge(target[key], source[key]);
+			} else {
+				target[key] = source[key];
+			}
+		}
+		return target;
+	}
+
+	const defaultOptions = {
+		grid: {
+			left: '48px',
+			right: '16px',
+			top: '16px',
+			bottom: '48px'
+		},
+		xAxis: {
+			nameLocation: 'middle',
+			nameGap: 32,
+			axisLabel: {
+				fontSize: 10,
+				lineHeight: 14,
+				align: 'center',
+				fontWeight: 450,
+				color: textColor.secondary,
+				margin: 16,
+				fontFamily: 'monospace'
+			},
+			axisLine: {
+				lineStyle: {
+					color: colors.gray[2]
+				}
+			},
+			nameTextStyle: {
+				fontSize: 12,
+				color: textColor.secondary
+			}
+		},
+		yAxis: {
+			nameLocation: 'middle',
+			nameGap: 32,
+			nameRotate: 90,
+			axisLabel: {
+				fontSize: 10,
+				lineHeight: 14,
+				align: 'center',
+				fontWeight: 450,
+				color: textColor.secondary,
+				margin: 16,
+				fontFamily: 'monospace'
+			},
+			axisLine: {
+				lineStyle: {
+					color: colors.gray[2]
+				}
+			},
+			nameTextStyle: {
+				fontSize: 12,
+				color: textColor.secondary
+			}
+		}
+	} as const;
+
+	const finalOptions = deepMerge(structuredClone(defaultOptions), options);
+
+	function initChart() {
+		if (container) {
+			chart = echarts.init(container, theme, { renderer });
+			chart.setOption(finalOptions);
+
+			if (onitemclick) chart.on('click', onitemclick);
+			if (onmouseover) chart.on('mouseover', onmouseover);
+			if (onmouseout) chart.on('mouseout', onmouseout);
+
+			if (loading) chart.showLoading();
+		}
+	}
+
+	$effect(() => {
+		if (loading) {
+			chart?.showLoading();
+		} else {
+			chart?.hideLoading();
+		}
+	});
+
+	onMount(() => {
+		initChart();
+
+		if (autoResize) {
+			const resizeObserver = new ResizeObserver(() => chart?.resize());
+			resizeObserver.observe(container);
+			return () => {
+				resizeObserver.disconnect();
+				chart?.dispose();
+			};
+		}
+	});
+</script>
+
+<div bind:this={container} style="width: {width}; height: {height};" class="chart-container"></div>
+
+<style>
+	.chart-container {
+		position: relative;
+	}
+</style>

package/dist/components/graphs/chart/Chart.svelte.d.ts

@@ -0,0 +1,17 @@
+import * as echarts from 'echarts';
+import type { ECElementEvent } from 'echarts';
+type Props = {
+    options: echarts.EChartsOption;
+    theme?: string | object;
+    renderer?: 'canvas' | 'svg';
+    height?: string;
+    width?: string;
+    onitemclick?: (params: ECElementEvent) => void;
+    onmouseover?: (params: ECElementEvent) => void;
+    onmouseout?: () => void;
+    autoResize?: boolean;
+    loading?: boolean;
+};
+declare const Chart: import("svelte").Component<Props, {}, "">;
+type Chart = ReturnType<typeof Chart>;
+export default Chart;

package/dist/components/graphs/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Scatterplot } from './scatterplot/Scatterplot.svelte';
+export { default as Chart } from './chart/Chart.svelte';
+export { default as LineChart } from './line/LineChart.svelte';
+export { default as MultiLineChart } from './multiline/MultiLineChart.svelte';

package/dist/components/graphs/index.js

@@ -0,0 +1,4 @@
+export { default as Scatterplot } from './scatterplot/Scatterplot.svelte';
+export { default as Chart } from './chart/Chart.svelte';
+export { default as LineChart } from './line/LineChart.svelte';
+export { default as MultiLineChart } from './multiline/MultiLineChart.svelte';

package/dist/components/graphs/line/LineChart.stories.svelte

@@ -0,0 +1,73 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	import LineChart from './LineChart.svelte';
+
+	const { Story } = defineMeta({
+		component: LineChart,
+		title: 'Design System/Graphs/LineChart',
+		tags: ['autodocs']
+	});
+
+	const xAxis = '€€€';
+	const yAxis = '$$$';
+
+	const data = [
+		10.0, 8.04, 8.07, 6.95, 13.0, 7.58, 9.05, 8.81, 11.0, 8.33, 14.0, 7.66, 13.4, 6.81, 10.0, 6.33,
+		14.0, 8.96, 12.5, 6.82, 9.15, 7.2, 11.5, 7.2, 3.03, 4.23, 12.2, 7.83, 2.02, 4.47, 1.05, 3.33,
+		4.05, 4.96, 6.03, 7.24, 12.0, 6.26, 12.0, 8.84, 7.08, 5.82, 5.02, 5.6
+	];
+
+	const bigData = Array.from({ length: 1000 }, (_, i) => i);
+
+	function handleItemClick(params: echarts.ECElementEvent) {
+		console.log(params);
+	}
+
+	function handleMouseOver(params: echarts.ECElementEvent) {
+		console.log(params);
+	}
+
+	function handleMouseOut() {
+		console.log('mouse out');
+	}
+</script>
+
+<Story name="Base">
+	<div class="h-[400px] w-full">
+		<LineChart
+			{xAxis}
+			{yAxis}
+			{data}
+			onitemclick={handleItemClick}
+			onmouseover={handleMouseOver}
+			onmouseout={handleMouseOut}
+		/>
+	</div>
+</Story>
+<Story name="Loading">
+	<div class="h-[400px] w-full">
+		<LineChart
+			{xAxis}
+			{yAxis}
+			{data}
+			loading
+			onitemclick={handleItemClick}
+			onmouseover={handleMouseOver}
+			onmouseout={handleMouseOut}
+		/>
+	</div>
+</Story>
+<Story name="Large datasets with capture intervals">
+	<div class="h-[400px] w-full">
+		<LineChart
+			{xAxis}
+			{yAxis}
+			data={bigData}
+			captureInterval={1000}
+			onitemclick={handleItemClick}
+			onmouseover={handleMouseOver}
+			onmouseout={handleMouseOut}
+		/>
+	</div>
+</Story>

package/dist/components/graphs/line/LineChart.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import LineChart from './LineChart.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const LineChart: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type LineChart = InstanceType<typeof LineChart>;
+export default LineChart;

package/dist/components/graphs/line/LineChart.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import { textColor, backgroundColor } from '../../../tokens';
+	import Chart from '../chart/Chart.svelte';
+	import type { EChartsOption } from 'echarts';
+	import { Duration } from 'luxon';
+
+	interface Props {
+		data: (number | null)[];
+		captureInterval?: number;
+		loading?: boolean;
+		xAxis?: string;
+		yAxis?: string;
+		height?: string;
+		width?: string;
+		xAxisOptions?: EChartsOption['xAxis'];
+		yAxisOptions?: EChartsOption['yAxis'];
+		onitemclick?: (params: echarts.ECElementEvent) => void;
+		onmouseover?: (params: echarts.ECElementEvent) => void;
+		onmouseout?: () => void;
+	}
+
+	const toFixedLocaleString = (
+		value?: number | undefined,
+		fractionDigits: number | undefined = 0,
+		locale: string | undefined = undefined
+	): string =>
+		value?.toLocaleString(locale, {
+			minimumFractionDigits: fractionDigits,
+			maximumFractionDigits: fractionDigits
+		}) ?? '';
+
+	let { data, xAxis, xAxisOptions, yAxis, yAxisOptions, captureInterval, ...props }: Props =
+		$props();
+
+	const captureIntervals = captureInterval
+		? Array(data.length)
+				.fill(null)
+				.map((_, timeIndex) => {
+					const seconds = timeIndex * captureInterval;
+					const duration = Duration.fromObject({ seconds }).shiftTo('days', 'hours', 'minutes');
+					return duration.days >= 1 ? duration.toFormat('dd:hh:mm') : duration.toFormat('hh:mm');
+				})
+		: undefined;
+
+	$effect(() => {
+		console.log(captureIntervals);
+	});
+
+	let options: EChartsOption = {
+		color: ['#5750EE', '#FF7100', '#50EEA6', '#E7EE50', '#EE5098'],
+		grid: {
+			top: 10,
+			bottom: 10,
+			left: 10,
+			right: 10,
+			containLabel: true
+		},
+		textStyle: {
+			color: textColor['secondary']
+		},
+		xAxis: {
+			type: 'category',
+			boundaryGap: false,
+			axisLine: {
+				onZero: false
+			},
+			name: xAxis,
+			data: captureIntervals,
+			...xAxisOptions
+		},
+		yAxis: {
+			type: 'value',
+			alignTicks: true,
+			axisLabel: {
+				formatter: (value: any) => value.toLocaleString()
+			} as any,
+			axisPointer: {
+				label: {
+					formatter: (value: any) => toFixedLocaleString(value.value, 2)
+				}
+			},
+			name: yAxis,
+			...yAxisOptions
+		},
+		selectedMode: 'multiple',
+		series: {
+			animation: false,
+			seriesLayoutBy: 'row',
+			emphasis: {
+				focus: 'series'
+			},
+			tooltip: {
+				show: false
+			},
+			type: 'line',
+			symbol: data.length > 1 ? 'none' : 'circle',
+			data
+		}
+	};
+</script>
+
+<Chart {options} {...props} />

package/dist/components/graphs/line/LineChart.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { EChartsOption } from 'echarts';
+interface Props {
+    data: (number | null)[];
+    captureInterval?: number;
+    loading?: boolean;
+    xAxis?: string;
+    yAxis?: string;
+    height?: string;
+    width?: string;
+    xAxisOptions?: EChartsOption['xAxis'];
+    yAxisOptions?: EChartsOption['yAxis'];
+    onitemclick?: (params: echarts.ECElementEvent) => void;
+    onmouseover?: (params: echarts.ECElementEvent) => void;
+    onmouseout?: () => void;
+}
+declare const LineChart: import("svelte").Component<Props, {}, "">;
+type LineChart = ReturnType<typeof LineChart>;
+export default LineChart;

package/dist/components/graphs/multiline/MultiLineChart.stories.svelte

@@ -0,0 +1,77 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	import MultiLineChart from './MultiLineChart.svelte';
+
+	const { Story } = defineMeta({
+		component: MultiLineChart,
+		title: 'Design System/Graphs/MultiLineChart',
+		tags: ['autodocs']
+	});
+
+	const xAxis = '€€€';
+	const yAxis = '$$$';
+
+	const smooth = (data: number[]) =>
+		data.map((_, i, arr) => {
+			const windowSize = 2;
+			const start = Math.max(i - windowSize, 0);
+			const end = Math.min(i + windowSize, arr.length - 1);
+			const subset = arr.slice(start, end + 1);
+			return subset.reduce((sum, v) => sum + v, 0) / subset.length;
+		});
+
+	const data = [
+		{
+			key: 'Group 1',
+			series: smooth(Array.from({ length: 25 }, () => Math.random() * 80))
+		},
+		{
+			key: 'Group 2',
+			series: smooth(Array.from({ length: 20 }, () => Math.random() * 60))
+		},
+		{
+			key: 'Group 3',
+			series: smooth(Array.from({ length: 35 }, () => Math.random() * 100))
+		}
+	];
+
+	function handleItemClick(params: echarts.ECElementEvent) {
+		console.log(params);
+	}
+
+	function handleMouseOver(params: echarts.ECElementEvent) {
+		console.log(params);
+	}
+
+	function handleMouseOut() {
+		console.log('mouse out');
+	}
+</script>
+
+<Story name="Base">
+	<div class="h-[400px] w-full">
+		<MultiLineChart
+			{xAxis}
+			{yAxis}
+			{data}
+			onitemclick={handleItemClick}
+			onmouseover={handleMouseOver}
+			onmouseout={handleMouseOut}
+		/>
+	</div>
+</Story>
+
+<Story name="Loading">
+	<div class="h-[400px] w-full">
+		<MultiLineChart
+			{xAxis}
+			{yAxis}
+			{data}
+			loading
+			onitemclick={handleItemClick}
+			onmouseover={handleMouseOver}
+			onmouseout={handleMouseOut}
+		/>
+	</div>
+</Story>

package/dist/components/graphs/multiline/MultiLineChart.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import MultiLineChart from './MultiLineChart.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const MultiLineChart: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type MultiLineChart = InstanceType<typeof MultiLineChart>;
+export default MultiLineChart;

package/dist/components/graphs/multiline/MultiLineChart.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+	import { textColor, backgroundColor } from '../../../tokens';
+	import Chart from '../chart/Chart.svelte';
+	import type { EChartsOption } from 'echarts';
+	import { Duration } from 'luxon';
+
+	interface Groups {
+		key: string;
+		series: (number | null)[];
+	}
+
+	interface Props {
+		data: Groups[];
+		captureInterval?: number;
+		loading?: boolean;
+		xAxis?: string;
+		yAxis?: string;
+		height?: string;
+		width?: string;
+		xAxisOptions?: EChartsOption['xAxis'];
+		yAxisOptions?: EChartsOption['yAxis'];
+		onitemclick?: (params: echarts.ECElementEvent) => void;
+		onmouseover?: (params: echarts.ECElementEvent) => void;
+		onmouseout?: () => void;
+	}
+
+	const toFixedLocaleString = (
+		value?: number | undefined,
+		fractionDigits: number | undefined = 0,
+		locale: string | undefined = undefined
+	): string =>
+		value?.toLocaleString(locale, {
+			minimumFractionDigits: fractionDigits,
+			maximumFractionDigits: fractionDigits
+		}) ?? '';
+
+	let { data, xAxis, xAxisOptions, yAxis, yAxisOptions, captureInterval, ...props }: Props =
+		$props();
+
+	const longestSeries = data.reduce(
+		(acc: (number | null)[], group) => (group.series.length > acc.length ? group.series : acc),
+		[]
+	).length;
+
+	const captureIntervals = captureInterval
+		? Array(longestSeries)
+				.fill(null)
+				.map((_, timeIndex) => {
+					const seconds = timeIndex * captureInterval;
+					const duration = Duration.fromObject({ seconds }).shiftTo('days', 'hours', 'minutes');
+					return duration.days >= 1 ? duration.toFormat('dd:hh:mm') : duration.toFormat('hh:mm');
+				})
+		: undefined;
+
+	let options: EChartsOption = {
+		color: ['#5750EE', '#FF7100', '#50EEA6', '#E7EE50', '#EE5098'],
+		grid: {
+			top: 10,
+			bottom: 10,
+			left: 10,
+			right: 10,
+			containLabel: true
+		},
+		textStyle: {
+			color: textColor['secondary']
+		},
+		xAxis: {
+			type: 'category',
+			boundaryGap: false,
+			axisLine: {
+				onZero: false
+			},
+			name: xAxis,
+			data: captureIntervals,
+			...xAxisOptions
+		},
+		yAxis: {
+			type: 'value',
+			alignTicks: true,
+			axisLabel: {
+				formatter: (value: any) => value.toLocaleString()
+			} as any,
+			axisPointer: {
+				label: {
+					formatter: (value: any) => toFixedLocaleString(value.value, 2)
+				}
+			},
+			name: yAxis,
+			...yAxisOptions
+		},
+		selectedMode: 'multiple',
+		series: data.map((group) => ({
+			animation: false,
+			seriesLayoutBy: 'row',
+			emphasis: {
+				focus: 'series'
+			},
+			tooltip: {
+				show: false
+			},
+			type: 'line',
+			symbol: group.series.length > 1 ? 'none' : 'circle',
+			data: group.series
+		}))
+	};
+</script>
+
+<Chart {options} {...props} />

package/dist/components/graphs/multiline/MultiLineChart.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { EChartsOption } from 'echarts';
+interface Groups {
+    key: string;
+    series: (number | null)[];
+}
+interface Props {
+    data: Groups[];
+    captureInterval?: number;
+    loading?: boolean;
+    xAxis?: string;
+    yAxis?: string;
+    height?: string;
+    width?: string;
+    xAxisOptions?: EChartsOption['xAxis'];
+    yAxisOptions?: EChartsOption['yAxis'];
+    onitemclick?: (params: echarts.ECElementEvent) => void;
+    onmouseover?: (params: echarts.ECElementEvent) => void;
+    onmouseout?: () => void;
+}
+declare const MultiLineChart: import("svelte").Component<Props, {}, "">;
+type MultiLineChart = ReturnType<typeof MultiLineChart>;
+export default MultiLineChart;

package/dist/components/graphs/scatterplot/Scatterplot.stories.svelte

@@ -0,0 +1,78 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	import Scatterplot from './Scatterplot.svelte';
+
+	const { Story } = defineMeta({
+		component: Scatterplot,
+		title: 'Design System/Graphs/Scatterplot',
+		tags: ['autodocs']
+	});
+
+	const data = [
+		[10.0, 8.04],
+		[8.07, 6.95],
+		[13.0, 7.58],
+		[9.05, 8.81],
+		[11.0, 8.33],
+		[14.0, 7.66],
+		[13.4, 6.81],
+		[10.0, 6.33],
+		[14.0, 8.96],
+		[12.5, 6.82],
+		[9.15, 7.2],
+		[11.5, 7.2],
+		[3.03, 4.23],
+		[12.2, 7.83],
+		[2.02, 4.47],
+		[1.05, 3.33],
+		[4.05, 4.96],
+		[6.03, 7.24],
+		[12.0, 6.26],
+		[12.0, 8.84],
+		[7.08, 5.82],
+		[5.02, 5.68]
+	];
+
+	const lineData = [0, 2, 4, 6, 8, 10, 12, 14];
+
+	function handleItemClick(params: echarts.ECElementEvent) {
+		console.log(params);
+	}
+
+	function handleMouseOver(params: echarts.ECElementEvent) {
+		console.log(params);
+	}
+
+	function handleMouseOut() {
+		console.log('mouse out');
+	}
+</script>
+
+<Story name="Base">
+	<div class="h-[400px] w-full">
+		<Scatterplot
+			{data}
+			{lineData}
+			xAxis="Manual count"
+			yAxis="Analysis count"
+			onitemclick={handleItemClick}
+			onmouseover={handleMouseOver}
+			onmouseout={handleMouseOut}
+		/>
+	</div>
+</Story>
+<Story name="Loading">
+	<div class="h-[400px] w-full">
+		<Scatterplot
+			{data}
+			{lineData}
+			xAxis="Manual count"
+			yAxis="Analysis count"
+			loading
+			onitemclick={handleItemClick}
+			onmouseover={handleMouseOver}
+			onmouseout={handleMouseOut}
+		/>
+	</div>
+</Story>