@reshape-biotech/design-system 0.0.54 → 1.1.2

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

@@ -1,7 +1,9 @@
 <script lang="ts">
-	import { textColor, backgroundColor } from '../../../tokens';
-	import Chart from '../chart/Chart.svelte';
-	import type { EChartsOption } from 'echarts';
+	import { textColor } from '../../../tokens';
+	import Chart, { type GenericChartProps } from '../chart/Chart.svelte';
+	import type { ECElementEvent, EChartsOption, LineSeriesOption } from 'echarts';
+	import * as echarts from 'echarts/core';
+	import { createTooltipFormatter } from '../utils/tooltipFormatter';
 	import { Duration } from 'luxon';
 
 	interface Groups {
@@ -9,35 +11,33 @@
 		series: (number | null)[];
 	}
 
-	interface Props {
+	interface MultiLineChartProps extends GenericChartProps {
 		data: Groups[];
+		withArea?: boolean;
+		colors?: Record<string, string>;
+		withFocus?: boolean;
+		focusTargetKey?: string;
+		sumYAxis?: boolean;
 		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;
+		grid?: EChartsOption['grid'];
 	}
 
-	const toFixedLocaleString = (
-		value?: number | undefined,
-		fractionDigits: number | undefined = 0,
-		locale: string | undefined = undefined
-	): string =>
-		value?.toLocaleString(locale, {
-			minimumFractionDigits: fractionDigits,
-			maximumFractionDigits: fractionDigits
-		}) ?? '';
+	let {
+		data,
+		xAxisName,
+		yAxisName,
+		withArea = false,
+		colors,
+		withFocus = true,
+		focusTargetKey,
+		sumYAxis = true,
+		captureInterval,
+		...props
+	}: MultiLineChartProps = $props();
 
-	let { data, xAxis, xAxisOptions, yAxis, yAxisOptions, captureInterval, ...props }: Props =
-		$props();
+	const dataKeyToIndexMap = $derived(new Map(data.map((group, index) => [group.key, index])));
 
-	const longestSeries = data.reduce(
+	const longestSeries = data?.reduce(
 		(acc: (number | null)[], group) => (group.series.length > acc.length ? group.series : acc),
 		[]
 	).length;
@@ -52,14 +52,59 @@
 				})
 		: undefined;
 
-	let options: EChartsOption = {
-		color: ['#5750EE', '#FF7100', '#50EEA6', '#E7EE50', '#EE5098'],
+	let focusedSeries = $state<string | undefined>(undefined);
+
+	function handleMouseOver(params: ECElementEvent) {
+		focusedSeries = params.seriesName;
+		props.onmouseover?.(params);
+	}
+
+	function handleMouseOut() {
+		focusedSeries = undefined;
+		props.onmouseout?.();
+	}
+
+	const defaultColors: Record<string, string> = {
+		blue: textColor['icon-blue'],
+		accent: textColor['icon-accent'],
+		orange: textColor['icon-orange'],
+		sky: textColor['icon-sky'],
+		lilac: textColor['icon-lilac'],
+		plum: textColor['icon-plum'],
+		pear: textColor['icon-pear']
+	};
+	const defaultColorRotationArray = $derived(Object.values(defaultColors));
+
+	// Helper function to get color (needed for tooltip formatter config)
+	const getSeriesColor = (seriesName: string, seriesIndex: number): string => {
+		if (colors && colors[seriesName]) {
+			return colors[seriesName];
+		}
+		const dataIndex = dataKeyToIndexMap.get(seriesName);
+		if (dataIndex !== undefined) {
+			return defaultColorRotationArray[dataIndex % defaultColorRotationArray.length];
+		}
+		return defaultColorRotationArray[seriesIndex % defaultColorRotationArray.length]; // Fallback based on index
+	};
+
+	const toFixedLocaleString = (
+		value?: number | undefined,
+		fractionDigits: number | undefined = 0,
+		locale: string | undefined = undefined
+	): string =>
+		value?.toLocaleString(locale, {
+			minimumFractionDigits: fractionDigits,
+			maximumFractionDigits: fractionDigits
+		}) ?? '';
+
+	let options: EChartsOption = $derived.by(() => ({
 		grid: {
 			top: 10,
-			bottom: 10,
-			left: 10,
-			right: 10,
-			containLabel: true
+			bottom: 0,
+			left: 0,
+			right: 0,
+			containLabel: true,
+			...props.grid
 		},
 		textStyle: {
 			color: textColor['secondary']
@@ -70,9 +115,28 @@
 			axisLine: {
 				onZero: false
 			},
-			name: xAxis,
 			data: captureIntervals,
-			...xAxisOptions
+			axisLabel: {
+				interval: (index: number, value: string) => {
+					const dataLength = longestSeries;
+					if (dataLength <= 1) return true; // Show label if only one point
+
+					const targetLabelCount = 10; // Aim for about 10 labels
+					// Calculate interval, ensuring it's at least 1
+					const calculatedInterval = Math.max(1, Math.ceil(dataLength / targetLabelCount));
+
+					// Show the first label (index 0)
+					if (index === 0) return true;
+					// Show the last label if data exists
+					if (dataLength > 0 && index === dataLength - 1) return true;
+					// Show labels at the calculated interval, but not the last one if it was already shown
+					if (index % calculatedInterval === 0 && index !== dataLength - 1) return true;
+					// Hide others
+					return false;
+				},
+				hideOverlap: true
+			},
+			...props.xAxisOptions
 		},
 		yAxis: {
 			type: 'value',
@@ -85,24 +149,97 @@
 					formatter: (value: any) => toFixedLocaleString(value.value, 2)
 				}
 			},
-			name: yAxis,
-			...yAxisOptions
+			...props.yAxisOptions
 		},
 		selectedMode: 'multiple',
-		series: data.map((group) => ({
-			animation: false,
-			seriesLayoutBy: 'row',
-			emphasis: {
-				focus: 'series'
-			},
-			tooltip: {
-				show: false
+		tooltip: {
+			trigger: 'axis',
+			axisPointer: {
+				type: 'line',
+				lineStyle: {
+					type: 'solid'
+				}
 			},
-			type: 'line',
-			symbol: group.series.length > 1 ? 'none' : 'circle',
-			data: group.series
-		}))
-	};
+			formatter: createTooltipFormatter({
+				yAxisName,
+				yAxisUnit: props.yAxisUnit ?? undefined,
+				focusedSeriesAccessor: () => focusedSeries,
+				getSeriesColor,
+				maxSeriesToShow: 6
+			})
+		},
+		series: data.map((group, index): LineSeriesOption => {
+			const color =
+				colors?.[group.key] ?? defaultColorRotationArray[index % defaultColorRotationArray.length];
+
+			// Determine emphasis based on focusTargetKey or withFocus
+			let emphasisConfig: LineSeriesOption['emphasis'];
+			if (focusTargetKey) {
+				if (group.key === focusTargetKey) {
+					emphasisConfig = { focus: 'series' };
+				} else {
+					emphasisConfig = undefined;
+				}
+			} else if (withFocus) {
+				emphasisConfig = { focus: 'series' };
+			} else {
+				emphasisConfig = undefined;
+			}
+
+			// Determine visual style based on focusTargetKey
+			const isTargeted = focusTargetKey && group.key === focusTargetKey;
+			const isBlurred = focusTargetKey && !isTargeted;
+			const lineOpacity = isBlurred ? 0.3 : 1;
+			const areaOpacityBase = isBlurred ? 0.1 : 0.4; // Lower base opacity for blurred area
+			const areaOpacityEnd = 0;
+
+			return {
+				animation: false,
+				...(emphasisConfig && { emphasis: emphasisConfig }),
+				type: 'line',
+				stack: sumYAxis ? 'total' : undefined,
+				symbol: 'circle',
+				progressive: 300,
+				progressiveThreshold: 1000,
+				symbolSize: 1,
+				data: group.series,
+				triggerLineEvent: true,
+				name: group.key,
+				lineStyle: {
+					color: color,
+					opacity: lineOpacity
+				},
+				itemStyle: {
+					color: color,
+					opacity: lineOpacity // Also apply opacity to item markers if needed
+				},
+				areaStyle: withArea
+					? {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+								{
+									offset: 0,
+									color: echarts.color.modifyAlpha(color, areaOpacityBase)
+								},
+								{
+									offset: 1,
+									color: echarts.color.modifyAlpha(color, areaOpacityEnd)
+								}
+							])
+						}
+					: undefined
+			};
+		})
+	}));
 </script>
 
-<Chart {options} {...props} />
+<Chart
+	{options}
+	{...{
+		...props,
+
+		xAxisName,
+		yAxisName,
+		onmouseover: handleMouseOver,
+		onmouseout: handleMouseOut
+	}}
+/>

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

@@ -1,22 +1,19 @@
+import { type GenericChartProps } from '../chart/Chart.svelte';
 import type { EChartsOption } from 'echarts';
 interface Groups {
     key: string;
     series: (number | null)[];
 }
-interface Props {
+interface MultiLineChartProps extends GenericChartProps {
     data: Groups[];
+    withArea?: boolean;
+    colors?: Record<string, string>;
+    withFocus?: boolean;
+    focusTargetKey?: string;
+    sumYAxis?: boolean;
     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;
+    grid?: EChartsOption['grid'];
 }
-declare const MultiLineChart: import("svelte").Component<Props, {}, "">;
+declare const MultiLineChart: import("svelte").Component<MultiLineChartProps, {}, "">;
 type MultiLineChart = ReturnType<typeof MultiLineChart>;
 export default MultiLineChart;

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

@@ -1,7 +1,7 @@
 <script module lang="ts">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
-
 	import Scatterplot from './Scatterplot.svelte';
+	import type { DataPoint } from './Scatterplot.svelte';
 
 	const { Story } = defineMeta({
 		component: Scatterplot,
@@ -9,67 +9,94 @@
 		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 data: DataPoint[] = [
+		{ value: [10.0, 8.04], metadata: { blip: '1', blop: 1, user_id: '1' } },
+		{ value: [8.07, 6.95], metadata: { blip: '2', blop: 2, user_id: '2' } },
+		{ value: [13.0, 7.58], metadata: { blip: '3', blop: 3, user_id: '3' } },
+		{ value: [9.05, 8.81], metadata: { blip: '4', blop: 4, user_id: '4' } },
+		{ value: [12.0, 8.33], metadata: { blip: '5', blop: 5, user_id: '5' } },
+		{ value: [14.0, 7.66], metadata: { blip: '6', blop: 6, user_id: '6' } }
 	];
 
-	const lineData = [0, 2, 4, 6, 8, 10, 12, 14];
+	const errorBarsData: DataPoint[] = data.map((d) => ({
+		...d,
+		error_value: 1.5
+	}));
+
+	const lineData: [[number, number], [number, number]] = [
+		[0, 2],
+		[12, 14]
+	];
 
-	function handleItemClick(params: echarts.ECElementEvent) {
-		console.log(params);
-	}
+	function handleItemClick(params: echarts.ECElementEvent) {}
 
-	function handleMouseOver(params: echarts.ECElementEvent) {
-		console.log(params);
-	}
+	function handleMouseOver(params: echarts.ECElementEvent) {}
 
-	function handleMouseOut() {
-		console.log('mouse out');
-	}
+	function handleMouseOut() {}
 </script>
 
-<Story name="Base">
+<Story name="Base" asChild>
+	<div class="h-[400px] w-full">
+		<Scatterplot
+			{data}
+			xAxisName="Manual count"
+			yAxisName="Analysis count"
+			onitemclick={handleItemClick}
+			onmouseover={handleMouseOver}
+			onmouseout={handleMouseOut}
+		/>
+	</div>
+</Story>
+
+<Story name="With Line Data" asChild>
 	<div class="h-[400px] w-full">
 		<Scatterplot
 			{data}
 			{lineData}
-			xAxis="Manual count"
-			yAxis="Analysis count"
+			xAxisName="Manual count"
+			yAxisName="Analysis count"
+			onitemclick={handleItemClick}
+			onmouseover={handleMouseOver}
+			onmouseout={handleMouseOut}
+		/>
+	</div>
+</Story>
+<Story name="Error bars" asChild>
+	<div class="h-[400px] w-full">
+		<Scatterplot
+			data={errorBarsData}
+			{lineData}
+			xAxisName="Manual count"
+			yAxisName="Analysis count"
+			onitemclick={handleItemClick}
+			onmouseover={handleMouseOver}
+			onmouseout={handleMouseOut}
+		/>
+	</div>
+</Story>
+<Story name="Error bars with confidence band" asChild>
+	<div class="h-[400px] w-full">
+		<Scatterplot
+			data={errorBarsData}
+			{lineData}
+			xAxisName="Manual count"
+			yAxisName="Analysis count"
+			showConfidenceBand
 			onitemclick={handleItemClick}
 			onmouseover={handleMouseOver}
 			onmouseout={handleMouseOut}
 		/>
 	</div>
 </Story>
-<Story name="Loading">
+<Story name="Confidence band and legend" asChild>
 	<div class="h-[400px] w-full">
 		<Scatterplot
 			{data}
 			{lineData}
-			xAxis="Manual count"
-			yAxis="Analysis count"
-			loading
+			xAxisName="Manual count"
+			yAxisName="Analysis count"
+			showConfidenceBand
+			showLegend
 			onitemclick={handleItemClick}
 			onmouseover={handleMouseOver}
 			onmouseout={handleMouseOut}