@reshape-biotech/design-system 0.0.52 → 1.1.1

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

@@ -1,14 +1,20 @@
 <script lang="ts">
-	import * as echarts from 'echarts';
-	import type { ECElementEvent } from 'echarts';
-	import { onMount } from 'svelte';
+	import { init } from 'echarts';
+	import type { EChartsOption, ECElementEvent, ECharts, SeriesOption } from 'echarts';
+	import { onMount, type Snippet } from 'svelte';
 	import { colors, textColor } from '../../../tokens';
-	type Props = {
-		options: echarts.EChartsOption;
+
+	type ChartProps = {
+		options: EChartsOption;
 		theme?: string | object;
 		renderer?: 'canvas' | 'svg';
 		height?: string;
 		width?: string;
+		xAxisName?: string;
+		yAxisName?: string;
+		yAxisUnit?: string;
+		xAxisOptions?: EChartsOption['xAxis'];
+		yAxisOptions?: EChartsOption['yAxis'];
 		// Common event handlers
 		onitemclick?: (params: ECElementEvent) => void;
 		onmouseover?: (params: ECElementEvent) => void;
@@ -16,8 +22,12 @@
 		// Additional options
 		autoResize?: boolean;
 		loading?: boolean;
+		timeIndex?: number;
+		children?: Snippet;
 	};
 
+	export type GenericChartProps = Omit<ChartProps, 'options'>;
+
 	const {
 		options,
 		theme,
@@ -28,24 +38,16 @@
 		onmouseover,
 		onmouseout,
 		autoResize = true,
-		loading = false
-	}: Props = $props();
+		loading = false,
+		timeIndex,
+		children
+	}: ChartProps = $props();
 
-	let chart = $state<echarts.ECharts | null>(null);
+	let chart = $state<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 = {
+	const defaultOptions: EChartsOption = {
+		animation: false,
 		grid: {
 			left: '48px',
 			right: '16px',
@@ -56,13 +58,13 @@
 			nameLocation: 'middle',
 			nameGap: 32,
 			axisLabel: {
-				fontSize: 10,
+				fontSize: 11,
+				fontFamily: 'af Another Sans',
 				lineHeight: 14,
 				align: 'center',
 				fontWeight: 450,
 				color: textColor.secondary,
-				margin: 16,
-				fontFamily: 'monospace'
+				margin: 16
 			},
 			axisLine: {
 				lineStyle: {
@@ -71,6 +73,7 @@
 			},
 			nameTextStyle: {
 				fontSize: 12,
+				fontFamily: 'af Another Sans',
 				color: textColor.secondary
 			}
 		},
@@ -79,13 +82,13 @@
 			nameGap: 32,
 			nameRotate: 90,
 			axisLabel: {
-				fontSize: 10,
+				fontSize: 11,
+				fontFamily: 'af Another Sans',
 				lineHeight: 14,
 				align: 'center',
 				fontWeight: 450,
 				color: textColor.secondary,
-				margin: 16,
-				fontFamily: 'monospace'
+				margin: 16
 			},
 			axisLine: {
 				lineStyle: {
@@ -94,18 +97,17 @@
 			},
 			nameTextStyle: {
 				fontSize: 12,
+				fontFamily: 'af Another Sans',
 				color: textColor.secondary
 			}
 		}
 	} as const;
 
-	const finalOptions = deepMerge(structuredClone(defaultOptions), options);
-
 	function initChart() {
 		if (container) {
-			chart = echarts.init(container, theme, { renderer });
-			chart.setOption(finalOptions);
-
+			chart = init(container, theme, { renderer });
+			chart.setOption(defaultOptions);
+			chart.setOption(options, { notMerge: false });
 			if (onitemclick) chart.on('click', onitemclick);
 			if (onmouseover) chart.on('mouseover', onmouseover);
 			if (onmouseout) chart.on('mouseout', onmouseout);
@@ -114,6 +116,73 @@
 		}
 	}
 
+	export function updateOptions(newOptions: EChartsOption) {
+		if (chart) {
+			chart.setOption(newOptions, { notMerge: false });
+		}
+	}
+
+	$effect(() => {
+		if (chart) {
+			chart.setOption(options, { notMerge: false });
+		}
+	});
+
+	// This effect is used to add a mark line to the chart when the timeIndex prop is provided
+	$effect(() => {
+		if (!chart || !timeIndex) return;
+
+		const seriesArray = Array.isArray(options.series)
+			? options.series
+			: options.series
+				? [options.series]
+				: [];
+
+		if (seriesArray.length === 0) return;
+
+		const seriesUpdate: SeriesOption[] = seriesArray.map((s: SeriesOption, index: number) => {
+			let newSeries = { ...s };
+
+			if (index === 0) {
+				if (typeof timeIndex === 'number') {
+					const existingMarkLine =
+						typeof newSeries.markLine === 'object' && newSeries.markLine !== null
+							? newSeries.markLine
+							: {};
+
+					newSeries.markLine = {
+						...existingMarkLine,
+						id: 'currentLocationMarkLine',
+						symbol: ['none', 'none'],
+						silent: true,
+						lineStyle: {
+							color: colors.gray[2],
+							type: 'dashed',
+							width: 1
+						},
+						data: [{ xAxis: timeIndex }],
+						label: {
+							position: 'insideEndTop',
+							show: false
+						}
+					};
+				} else {
+					if (
+						newSeries.markLine &&
+						typeof newSeries.markLine === 'object' &&
+						'id' in newSeries.markLine &&
+						newSeries.markLine.id === 'currentLocationMarkLine'
+					) {
+						delete newSeries.markLine;
+					}
+				}
+			}
+			return newSeries;
+		});
+
+		chart.setOption({ series: seriesUpdate }, { notMerge: false });
+	});
+
 	$effect(() => {
 		if (loading) {
 			chart?.showLoading();
@@ -136,10 +205,13 @@
 	});
 </script>
 
-<div bind:this={container} style="width: {width}; height: {height};" class="chart-container"></div>
+<div bind:this={container} style="width: {width}; height: {height};" class="chart-container">
+	{@render children?.()}
+</div>
 
 <style>
 	.chart-container {
 		position: relative;
+		overflow: visible;
 	}
 </style>

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

@@ -1,17 +1,27 @@
-import * as echarts from 'echarts';
-import type { ECElementEvent } from 'echarts';
-type Props = {
-    options: echarts.EChartsOption;
+import type { EChartsOption, ECElementEvent } from 'echarts';
+import { type Snippet } from 'svelte';
+type ChartProps = {
+    options: EChartsOption;
     theme?: string | object;
     renderer?: 'canvas' | 'svg';
     height?: string;
     width?: string;
+    xAxisName?: string;
+    yAxisName?: string;
+    yAxisUnit?: string;
+    xAxisOptions?: EChartsOption['xAxis'];
+    yAxisOptions?: EChartsOption['yAxis'];
     onitemclick?: (params: ECElementEvent) => void;
     onmouseover?: (params: ECElementEvent) => void;
     onmouseout?: () => void;
     autoResize?: boolean;
     loading?: boolean;
+    timeIndex?: number;
+    children?: Snippet;
 };
-declare const Chart: import("svelte").Component<Props, {}, "">;
+export type GenericChartProps = Omit<ChartProps, 'options'>;
+declare const Chart: import("svelte").Component<ChartProps, {
+    updateOptions: (newOptions: EChartsOption) => void;
+}, "">;
 type Chart = ReturnType<typeof Chart>;
 export default Chart;

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

@@ -2,3 +2,6 @@ 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';
+export { default as Matrix } from './matrix/Matrix.svelte';
+export { default as BarChart } from './bar-chart/BarChart.svelte';
+export { default as StackedBarChart } from './bar-chart/StackedBarChart.svelte';

package/dist/components/graphs/index.js

@@ -2,3 +2,6 @@ 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';
+export { default as Matrix } from './matrix/Matrix.svelte';
+export { default as BarChart } from './bar-chart/BarChart.svelte';
+export { default as StackedBarChart } from './bar-chart/StackedBarChart.svelte';

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

@@ -1,6 +1,7 @@
 <script module lang="ts">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
-
+	import type { ECElementEvent } from 'echarts';
+	import { within, userEvent } from '@storybook/test';
 	import LineChart from './LineChart.svelte';
 
 	const { Story } = defineMeta({
@@ -9,8 +10,8 @@
 		tags: ['autodocs']
 	});
 
-	const xAxis = '€€€';
-	const yAxis = '$$$';
+	const xAxisName = 'Time';
+	const yAxisName = 'Count';
 
 	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,
@@ -20,24 +21,29 @@
 
 	const bigData = Array.from({ length: 1000 }, (_, i) => i);
 
-	function handleItemClick(params: echarts.ECElementEvent) {
+	function handleItemClick(params: ECElementEvent) {
 		console.log(params);
 	}
 
-	function handleMouseOver(params: echarts.ECElementEvent) {
+	function handleMouseOver(params: ECElementEvent) {
 		console.log(params);
 	}
 
 	function handleMouseOut() {
 		console.log('mouse out');
 	}
+
+	// State for interactive current location story
+	let interactivetimeIndex = $state(3);
+	const interactiveChartData = [10, 8, 13, 7, 9, 6, 11];
 </script>
 
-<Story name="Base">
+<Story name="Base" asChild>
 	<div class="h-[400px] w-full">
 		<LineChart
-			{xAxis}
-			{yAxis}
+			{xAxisName}
+			{yAxisName}
+			yAxisUnit="mm²"
 			{data}
 			onitemclick={handleItemClick}
 			onmouseover={handleMouseOver}
@@ -45,11 +51,11 @@
 		/>
 	</div>
 </Story>
-<Story name="Loading">
+<Story name="Loading" asChild>
 	<div class="h-[400px] w-full">
 		<LineChart
-			{xAxis}
-			{yAxis}
+			{xAxisName}
+			{yAxisName}
 			{data}
 			loading
 			onitemclick={handleItemClick}
@@ -58,16 +64,102 @@
 		/>
 	</div>
 </Story>
-<Story name="Large datasets with capture intervals">
+<Story name="Large datasets with capture intervals" asChild>
 	<div class="h-[400px] w-full">
 		<LineChart
-			{xAxis}
-			{yAxis}
+			{xAxisName}
+			{yAxisName}
 			data={bigData}
-			captureInterval={1000}
 			onitemclick={handleItemClick}
 			onmouseover={handleMouseOver}
 			onmouseout={handleMouseOut}
 		/>
 	</div>
 </Story>
+<Story name="With Area Gradient" asChild>
+	<div class="h-[400px] w-full">
+		<LineChart
+			{xAxisName}
+			{yAxisName}
+			{data}
+			withArea
+			onitemclick={handleItemClick}
+			onmouseover={handleMouseOver}
+			onmouseout={handleMouseOut}
+		/>
+	</div>
+</Story>
+<Story name="Custom Color" asChild>
+	<div class="h-[400px] w-full">
+		<LineChart
+			{xAxisName}
+			{yAxisName}
+			{data}
+			color="#e01b5c"
+			onitemclick={handleItemClick}
+			onmouseover={handleMouseOver}
+			onmouseout={handleMouseOut}
+		/>
+	</div>
+</Story>
+<Story name="Custom Color with Area" asChild>
+	<div class="h-[400px] w-full">
+		<LineChart
+			{xAxisName}
+			{yAxisName}
+			{data}
+			color="#3ba272"
+			withArea
+			onitemclick={handleItemClick}
+			onmouseover={handleMouseOver}
+			onmouseout={handleMouseOut}
+		/>
+	</div>
+</Story>
+<Story name="With Current Location" asChild>
+	<div class="h-[400px] w-full">
+		<LineChart {xAxisName} yAxisName="Value" data={[10, 8, 13, 7, 9, 6, 11]} timeIndex={3} />
+	</div>
+</Story>
+<Story
+	name="Interactive Current Location"
+	asChild
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+
+		// Find the input field by its label
+		const input = canvas.getByLabelText('Current Location X:');
+
+		// Clear the input and type a new value
+		await userEvent.clear(input);
+		await userEvent.type(input, '5');
+		await new Promise((resolve) => setTimeout(resolve, 1000));
+
+		await userEvent.clear(input);
+		await userEvent.type(input, '2');
+
+		// Add a small delay to observe the change if running interactively
+		await new Promise((resolve) => setTimeout(resolve, 500));
+	}}
+>
+	<div class="flex h-[450px] w-full flex-col gap-4">
+		<label class="flex items-center gap-2">
+			Current Location X:
+			<input
+				type="number"
+				bind:value={interactivetimeIndex}
+				min="0"
+				max={interactiveChartData.length - 1}
+				class="w-20 rounded border p-1"
+			/>
+		</label>
+		<div class="h-full w-full">
+			<LineChart
+				{xAxisName}
+				yAxisName="Value"
+				data={interactiveChartData}
+				timeIndex={interactivetimeIndex}
+			/>
+		</div>
+	</div>
+</Story>

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

@@ -1,24 +1,32 @@
 <script lang="ts">
-	import { textColor, backgroundColor } from '../../../tokens';
+	import { textColor } from '../../../tokens';
 	import Chart from '../chart/Chart.svelte';
 	import type { EChartsOption } from 'echarts';
-	import { Duration } from 'luxon';
+	import * as echarts from 'echarts/core';
+	import type { GenericChartProps } from '../chart/Chart.svelte';
+	import { createTooltipFormatter } from '../utils/tooltipFormatter';
 
-	interface Props {
+	interface LineChartProps extends GenericChartProps {
 		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;
+		withArea?: boolean;
+		color?: string;
+		grid?: EChartsOption['grid'];
 	}
 
+	let {
+		data,
+		xAxisName,
+		yAxisName,
+		withArea = false,
+		color = textColor['icon-blue'],
+		...props
+	}: LineChartProps = $props();
+
+	const formatTooltip = createTooltipFormatter({
+		yAxisName: yAxisName,
+		yAxisUnit: props.yAxisUnit
+	});
+
 	const toFixedLocaleString = (
 		value?: number | undefined,
 		fractionDigits: number | undefined = 0,
@@ -29,31 +37,14 @@
 			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'],
+	let options: EChartsOption = $derived({
 		grid: {
 			top: 10,
 			bottom: 10,
 			left: 10,
 			right: 10,
-			containLabel: true
+			containLabel: true,
+			...props.grid
 		},
 		textStyle: {
 			color: textColor['secondary']
@@ -64,10 +55,28 @@
 			axisLine: {
 				onZero: false
 			},
-			name: xAxis,
-			data: captureIntervals,
-			...xAxisOptions
-		},
+			axisLabel: {
+				interval: (index: number, value: string) => {
+					const dataLength = data.length;
+					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
+		} as any as EChartsOption['xAxis'],
 		yAxis: {
 			type: 'value',
 			alignTicks: true,
@@ -79,24 +88,54 @@
 					formatter: (value: any) => toFixedLocaleString(value.value, 2)
 				}
 			},
-			name: yAxis,
-			...yAxisOptions
+			...props.yAxisOptions
 		},
 		selectedMode: 'multiple',
+		tooltip: {
+			axisPointer: {
+				type: 'line',
+				lineStyle: {
+					type: 'solid'
+				}
+			},
+			trigger: 'axis',
+			formatter: formatTooltip
+		},
 		series: {
-			animation: false,
-			seriesLayoutBy: 'row',
-			emphasis: {
-				focus: 'series'
+			type: 'line',
+			symbol: 'circle',
+			name: yAxisName,
+			symbolSize: 1,
+			data: data,
+			lineStyle: {
+				color: color
 			},
-			tooltip: {
-				show: false
+			itemStyle: {
+				color: color
 			},
-			type: 'line',
-			symbol: data.length > 1 ? 'none' : 'circle',
-			data
+			areaStyle: withArea
+				? {
+						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+							{
+								offset: 0,
+								color: echarts.color.modifyAlpha(color, 0.4)
+							},
+							{
+								offset: 1,
+								color: echarts.color.modifyAlpha(color, 0)
+							}
+						])
+					}
+				: undefined
 		}
-	};
+	});
 </script>
 
-<Chart {options} {...props} />
+<Chart
+	{options}
+	{...{
+		...props,
+		xAxisName,
+		yAxisName
+	}}
+/>

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

@@ -1,18 +1,11 @@
 import type { EChartsOption } from 'echarts';
-interface Props {
+import type { GenericChartProps } from '../chart/Chart.svelte';
+interface LineChartProps extends GenericChartProps {
     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;
+    withArea?: boolean;
+    color?: string;
+    grid?: EChartsOption['grid'];
 }
-declare const LineChart: import("svelte").Component<Props, {}, "">;
+declare const LineChart: import("svelte").Component<LineChartProps, {}, "">;
 type LineChart = ReturnType<typeof LineChart>;
 export default LineChart;