@reshape-biotech/design-system 0.0.54 → 1.1.2

package/dist/components/graphs/matrix/Matrix.stories.svelte

@@ -0,0 +1,142 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Matrix from './Matrix.svelte';
+	import { backgroundColor } from '../../../tokens';
+
+	const { Story } = defineMeta({
+		component: Matrix,
+		title: 'Design System/Graphs/Matrix',
+		tags: ['autodocs']
+	});
+
+	// Create sample data for a confusion matrix
+	// Format: [row][col] where row = manual label, col = model prediction
+	const confusionMatrix = [
+		[
+			{ value: 2, row: 1, col: 0, backgroundColor: backgroundColor.danger }, // Top-left (Not TNTC/TNTC)
+			{ value: 123, row: 1, col: 1, backgroundColor: backgroundColor.success } // Top-right (Not TNTC/Not TNTC)
+		],
+		[
+			{ value: 27, row: 0, col: 1, backgroundColor: backgroundColor.success }, // Bottom-right (TNTC/Not TNTC)
+			{ value: 8, row: 0, col: 0, backgroundColor: backgroundColor.danger } // Bottom-left (TNTC/TNTC)
+		]
+	];
+
+	const rowLabels = ['TNTC', 'Not TNTC'];
+	const colLabels = ['TNTC', 'Not TNTC'];
+
+	function handleCellClick(cell: any) {
+		console.log('Cell clicked:', cell);
+	}
+
+	function handleCellHover(cell: any) {
+		console.log('Cell hover:', cell);
+	}
+
+	// Sample data with more categories
+	const multiclassMatrix = [
+		[
+			{ value: 45, row: 0, col: 0, backgroundColor: backgroundColor.success },
+			{ value: 12, row: 0, col: 1, backgroundColor: backgroundColor.neutral },
+			{ value: 3, row: 0, col: 2, backgroundColor: backgroundColor.neutral }
+		],
+		[
+			{ value: 8, row: 1, col: 0, backgroundColor: backgroundColor.neutral },
+			{ value: 78, row: 1, col: 1, backgroundColor: backgroundColor.success },
+			{ value: 5, row: 1, col: 2, backgroundColor: backgroundColor.neutral }
+		],
+		[
+			{ value: 2, row: 2, col: 0, backgroundColor: backgroundColor.neutral },
+			{ value: 6, row: 2, col: 1, backgroundColor: backgroundColor.neutral },
+			{ value: 52, row: 2, col: 2, backgroundColor: backgroundColor.success }
+		]
+	];
+
+	const multiclassLabels = ['Class A', 'Class B', 'Class C'];
+
+	// Custom colored matrix
+	const customColorMatrix = [
+		[
+			{ value: 8, row: 0, col: 0, backgroundColor: 'rgba(200, 250, 205, 0.8)' }, // Custom green
+			{ value: 27, row: 0, col: 1, backgroundColor: 'rgba(255, 235, 235, 0.8)' } // Custom red tint
+		],
+		[
+			{ value: 2, row: 1, col: 0, backgroundColor: 'rgba(255, 235, 235, 0.8)' },
+			{ value: 123, row: 1, col: 1, backgroundColor: 'rgba(200, 250, 205, 0.8)' }
+		]
+	];
+</script>
+
+<Story name="TNTC Confusion Matrix" asChild>
+	<div class="h-[500px] w-full">
+		<Matrix
+			data={confusionMatrix}
+			{rowLabels}
+			{colLabels}
+			xAxisName="Model count"
+			yAxisName="Manual count"
+			onCellClick={handleCellClick}
+			onCellHover={handleCellHover}
+		/>
+	</div>
+</Story>
+
+<Story name="Multiple Classes" asChild>
+	<div class="h-[500px] w-full">
+		<Matrix
+			data={multiclassMatrix}
+			rowLabels={multiclassLabels}
+			colLabels={multiclassLabels}
+			invertYAxis={true}
+			xAxisName="Model count"
+			yAxisName="Manual count"
+		/>
+	</div>
+</Story>
+
+<Story name="Non-Inverted Axis" asChild>
+	<div class="h-[500px] w-full">
+		<Matrix
+			data={confusionMatrix}
+			{rowLabels}
+			{colLabels}
+			invertYAxis={false}
+			xAxisName="Model count"
+			yAxisName="Manual count"
+		/>
+	</div>
+</Story>
+
+<Story name="Custom Colors" asChild>
+	<div class="h-[500px] w-full">
+		<Matrix
+			data={customColorMatrix}
+			{rowLabels}
+			{colLabels}
+			invertYAxis={true}
+			xAxisName="Model count"
+			yAxisName="Manual count"
+		/>
+		<div class="mt-4 text-center text-sm">
+			<p>Using custom colors directly in the cell objects</p>
+		</div>
+	</div>
+</Story>
+
+<Story name="Semantic Colors" asChild>
+	<div class="h-[500px] w-full">
+		<Matrix
+			data={confusionMatrix}
+			{rowLabels}
+			{colLabels}
+			invertYAxis={true}
+			xAxisName="Model count"
+			yAxisName="Manual count"
+		/>
+		<div class="mt-4 text-center text-sm">
+			<p>Using semantic colors from tokens:</p>
+			<p>Diagonal cells: backgroundColor.success</p>
+			<p>Off-diagonal cells: backgroundColor.neutral</p>
+		</div>
+	</div>
+</Story>

package/dist/components/graphs/matrix/Matrix.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Matrix from './Matrix.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 Matrix: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Matrix = InstanceType<typeof Matrix>;
+export default Matrix;

package/dist/components/graphs/matrix/Matrix.svelte

@@ -0,0 +1,149 @@
+<script lang="ts" module>
+	export interface Cell {
+		value: number;
+		row: number;
+		col: number;
+		highlighted?: boolean;
+		backgroundColor?: string;
+		hideAxisNames?: boolean;
+	}
+
+	export type MatrixChartProps = {
+		/**
+		 * Matrix data as a 2D array (cells[row][col])
+		 */
+		data: Cell[][];
+		rowLabels: string[];
+		colLabels: string[];
+		onCellClick?: (cell: Cell) => void;
+		onCellHover?: (cell: Cell) => void;
+		invertYAxis?: boolean;
+		hideAxisNames?: boolean;
+	} & Omit<GenericChartProps, 'timeIndex'>;
+</script>
+
+<script lang="ts">
+	import { backgroundColor } from '../../../tokens';
+	import type { GenericChartProps } from '../chart/Chart.svelte';
+
+	const {
+		data,
+		rowLabels,
+		colLabels,
+		xAxisName,
+		yAxisName,
+		width = '100%',
+		height = '100%',
+		onCellClick,
+		onCellHover,
+		loading = false,
+		invertYAxis = false,
+		hideAxisNames = false
+	}: MatrixChartProps = $props();
+
+	let container: HTMLElement | undefined = $state();
+
+	function getCellWithColor(cell: Cell): Cell {
+		let defaultBackgroundColor: string;
+
+		if (data.length === 2 && data[0].length === 2) {
+			const isDiagonal = cell.row === cell.col;
+			defaultBackgroundColor = isDiagonal ? backgroundColor.success : backgroundColor.neutral;
+		} else {
+			defaultBackgroundColor = backgroundColor.neutral;
+		}
+
+		return {
+			...cell,
+			backgroundColor: cell.backgroundColor || defaultBackgroundColor
+		};
+	}
+
+	let displayData = $derived(
+		invertYAxis
+			? [...data].reverse().map((row) => row.map((cell) => getCellWithColor(cell)))
+			: data.map((row) => row.map((cell) => getCellWithColor(cell)))
+	);
+
+	let displayRowLabels = $derived(invertYAxis ? [...rowLabels].reverse() : rowLabels);
+
+	function handleCellClick(cell: Cell) {
+		if (onCellClick) {
+			onCellClick(cell);
+		}
+	}
+
+	function handleCellHover(cell: Cell) {
+		if (onCellHover) {
+			onCellHover(cell);
+		}
+	}
+</script>
+
+<div class="flex h-full w-full flex-col" style="width: {width}; height: {height};">
+	{#if xAxisName && !hideAxisNames}
+		<!-- 80px is the width of the yAxisName, 72px is the width of the yAxisName, 72px is the yLabels -->
+		<div class="flex w-[calc(100%-72px-72px)] items-center self-end text-center">
+			<div class="mb-2 inline-block w-full border-b pb-3 text-sm font-normal text-secondary">
+				{xAxisName}
+			</div>
+		</div>
+	{/if}
+
+	<div class="flex h-full flex-1 flex-row overflow-hidden">
+		{#if yAxisName && !hideAxisNames}
+			<!-- 26px is the height of the xAxisName -->
+			<div class="mr-2 flex h-[calc(100%-26px)] w-12 items-center self-end border-r">
+				<div class="-rotate-90 transform whitespace-nowrap text-sm font-normal text-secondary">
+					{yAxisName}
+				</div>
+			</div>
+		{/if}
+
+		<div bind:this={container} class="relative flex flex-1 flex-col">
+			<div class="ml-20 flex h-6">
+				{#each colLabels as label}
+					<div class="flex-1 pr-1 text-center text-sm text-secondary">
+						{label}
+					</div>
+				{/each}
+			</div>
+
+			<div class="flex flex-1">
+				<div class="flex w-20 flex-col">
+					{#each displayRowLabels as label}
+						<div class="flex flex-1 items-center justify-end pr-2 text-sm text-secondary">
+							{label}
+						</div>
+					{/each}
+				</div>
+				<div
+					class="grid flex-1"
+					style="grid-template-columns: repeat({colLabels.length}, 1fr); grid-template-rows: repeat({rowLabels.length}, 1fr);"
+				>
+					{#each displayData as row}
+						{#each row as cell}
+							<button
+								class="flex items-center justify-center border border-white"
+								style="background-color: {cell.backgroundColor};"
+								onclick={() => handleCellClick(cell)}
+								onmouseover={() => handleCellHover(cell)}
+								onfocus={() => handleCellHover(cell)}
+								data-row={cell.row}
+								data-col={cell.col}
+							>
+								<span class="text-base font-bold text-primary">{cell.value}</span>
+							</button>
+						{/each}
+					{/each}
+				</div>
+			</div>
+		</div>
+	</div>
+
+	{#if loading}
+		<div class="absolute inset-0 flex items-center justify-center bg-white bg-opacity-70">
+			<div class="text-lg">Loading...</div>
+		</div>
+	{/if}
+</div>

package/dist/components/graphs/matrix/Matrix.svelte.d.ts

@@ -0,0 +1,24 @@
+export interface Cell {
+    value: number;
+    row: number;
+    col: number;
+    highlighted?: boolean;
+    backgroundColor?: string;
+    hideAxisNames?: boolean;
+}
+export type MatrixChartProps = {
+    /**
+     * Matrix data as a 2D array (cells[row][col])
+     */
+    data: Cell[][];
+    rowLabels: string[];
+    colLabels: string[];
+    onCellClick?: (cell: Cell) => void;
+    onCellHover?: (cell: Cell) => void;
+    invertYAxis?: boolean;
+    hideAxisNames?: boolean;
+} & Omit<GenericChartProps, 'timeIndex'>;
+import type { GenericChartProps } from '../chart/Chart.svelte';
+declare const Matrix: import("svelte").Component<MatrixChartProps, {}, "">;
+type Matrix = ReturnType<typeof Matrix>;
+export default Matrix;

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

@@ -0,0 +1,3 @@
+import Matrix from './Matrix.svelte';
+export { Matrix };
+export default Matrix;

package/dist/components/graphs/matrix/index.js

@@ -0,0 +1,3 @@
+import Matrix from './Matrix.svelte';
+export { Matrix };
+export default Matrix;

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

@@ -1,6 +1,6 @@
 <script module lang="ts">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
-
+	import type { ECElementEvent } from 'echarts';
 	import MultiLineChart from './MultiLineChart.svelte';
 
 	const { Story } = defineMeta({
@@ -8,53 +8,106 @@
 		title: 'Design System/Graphs/MultiLineChart',
 		tags: ['autodocs']
 	});
+</script>
 
-	const xAxis = '€€€';
-	const yAxis = '$$$';
+<script lang="ts">
+	const xAxisName = 'Time';
+	const yAxisName = 'Value';
 
-	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 staticSmoothedData1 = [
+		12.333333333333334, 13.5, 14.8, 15.6, 17.4, 19.8, 22.2, 23.6, 25.2, 26.8, 29, 31.6, 33.8, 34.8,
+		36.4, 37.6, 40.2, 42.4, 44.4, 45.6, 46.4, 46.75, 48.25, 49, 49.333333333333336
+	];
+	const staticSmoothedData2 = [
+		7, 8, 8.8, 10.2, 11.8, 13.2, 14.8, 16.2, 17.6, 18.4, 19.2, 20.6, 22.4, 23.6, 24.8, 25.8, 27,
+		27.75, 28.5, 28.5
+	];
+	const staticSmoothedData3 = [
+		22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 62, 64, 66, 68,
+		70, 72, 74, 76, 78, 80, 82, 84, 86, 87, 88
+	];
 
 	const data = [
 		{
 			key: 'Group 1',
-			series: smooth(Array.from({ length: 25 }, () => Math.random() * 80))
+			series: staticSmoothedData1
 		},
 		{
 			key: 'Group 2',
-			series: smooth(Array.from({ length: 20 }, () => Math.random() * 60))
+			series: staticSmoothedData2
 		},
 		{
 			key: 'Group 3',
-			series: smooth(Array.from({ length: 35 }, () => Math.random() * 100))
+			series: staticSmoothedData3
 		}
 	];
 
-	function handleItemClick(params: echarts.ECElementEvent) {
-		console.log(params);
-	}
+	// Use the imported ECElementEvent type
+	function handleItemClick(params: ECElementEvent) {}
 
-	function handleMouseOver(params: echarts.ECElementEvent) {
+	// Use the imported ECElementEvent type
+	function handleMouseOver(params: ECElementEvent) {
 		console.log(params);
 	}
 
-	function handleMouseOut() {
-		console.log('mouse out');
-	}
+	function handleMouseOut() {}
 </script>
 
-<Story name="Base">
+<Story name="Base" asChild>
+	<div class="h-[400px] w-full">
+		<MultiLineChart
+			{xAxisName}
+			{yAxisName}
+			{data}
+			onitemclick={handleItemClick}
+			onmouseover={handleMouseOver}
+			onmouseout={handleMouseOut}
+		/>
+	</div>
+</Story>
+
+<Story name="With Area Gradient" asChild>
+	<div class="h-[400px] w-full">
+		<MultiLineChart
+			{xAxisName}
+			{yAxisName}
+			{data}
+			withArea
+			onitemclick={handleItemClick}
+			onmouseover={handleMouseOver}
+			onmouseout={handleMouseOut}
+		/>
+	</div>
+</Story>
+
+<Story name="Custom Colors" asChild>
+	<div class="h-[400px] w-full">
+		<MultiLineChart
+			{xAxisName}
+			{yAxisName}
+			{data}
+			colors={{
+				'Group 1': '#ff6b6b', // Custom Red
+				'Group 2': '#48dbfb' // Custom Cyan
+			}}
+			onitemclick={handleItemClick}
+			onmouseover={handleMouseOver}
+			onmouseout={handleMouseOut}
+		/>
+	</div>
+</Story>
+
+<Story name="Custom Colors with Area" asChild>
 	<div class="h-[400px] w-full">
 		<MultiLineChart
-			{xAxis}
-			{yAxis}
+			{xAxisName}
+			{yAxisName}
 			{data}
+			colors={{
+				'Group 1': '#feca57', // Custom Yellow
+				'Group 3': '#1dd1a1' // Custom Teal
+			}}
+			withArea
 			onitemclick={handleItemClick}
 			onmouseover={handleMouseOver}
 			onmouseout={handleMouseOut}
@@ -62,16 +115,50 @@
 	</div>
 </Story>
 
-<Story name="Loading">
+<Story name="Without Focus Emphasis" asChild>
 	<div class="h-[400px] w-full">
 		<MultiLineChart
-			{xAxis}
-			{yAxis}
+			{xAxisName}
+			{yAxisName}
 			{data}
-			loading
+			withFocus={false}
 			onitemclick={handleItemClick}
 			onmouseover={handleMouseOver}
 			onmouseout={handleMouseOut}
 		/>
 	</div>
 </Story>
+
+<Story name="With Y-Axis Unit" asChild>
+	<div class="h-[400px] w-full">
+		<MultiLineChart
+			{xAxisName}
+			{yAxisName}
+			{data}
+			yAxisUnit="kg"
+			onitemclick={handleItemClick}
+			onmouseover={handleMouseOver}
+			onmouseout={handleMouseOut}
+		/>
+	</div>
+</Story>
+
+<Story name="Focus Target" asChild>
+	<div class="h-[400px] w-full">
+		<MultiLineChart
+			{xAxisName}
+			{yAxisName}
+			{data}
+			focusTargetKey="Group 2"
+			onitemclick={handleItemClick}
+			onmouseover={handleMouseOver}
+			onmouseout={handleMouseOut}
+		/>
+	</div>
+</Story>
+
+<Story name="With Current Location" asChild>
+	<div class="h-[400px] w-full">
+		<MultiLineChart {xAxisName} {yAxisName} {data} timeIndex={15} withFocus />
+	</div>
+</Story>