@reshape-biotech/design-system 1.2.2 → 1.2.4

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

@@ -31,7 +31,7 @@
 	const {
 		options,
 		theme,
-		renderer = 'svg',
+		renderer = 'canvas',
 		height = '100%',
 		width = '100%',
 		onitemclick,

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

@@ -51,6 +51,28 @@
 	}
 
 	function handleMouseOut() {}
+
+	const generateHugeDataset = () => {
+		const hugeData = [];
+		for (let i = 1; i <= 96; i++) {
+			const series = [];
+			const baseValue = i * 10;
+			const increment = i * 0.1;
+
+			for (let j = 0; j < 200; j++) {
+				const value = baseValue + j * increment;
+				series.push(Number(value.toFixed(2)));
+			}
+
+			hugeData.push({
+				key: `Series ${i}`,
+				series
+			});
+		}
+		return hugeData;
+	};
+
+	const hugeDataset = generateHugeDataset();
 </script>
 
 <Story name="Base" asChild>
@@ -162,3 +184,17 @@
 		<MultiLineChart {xAxisName} {yAxisName} {data} timeIndex={15} withFocus />
 	</div>
 </Story>
+
+<Story name="Huge Dataset" asChild>
+	<div class="h-[400px] w-full">
+		<MultiLineChart
+			{xAxisName}
+			{yAxisName}
+			data={hugeDataset}
+			withFocus={true}
+			onitemclick={handleItemClick}
+			onmouseover={handleMouseOver}
+			onmouseout={handleMouseOut}
+		/>
+	</div>
+</Story>

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

@@ -289,6 +289,7 @@
 	<Chart
 		bind:this={chartComponent}
 		{options}
+		renderer="svg"
 		onitemclick={(e) => handleClick(e as ScatterPlotEchartsEvent)}
 		onmouseover={(e) => handleMouseOver(e as ScatterPlotEchartsEvent)}
 		onmouseout={handleMouseOut}

package/dist/components/select-new/index.d.ts

@@ -4,7 +4,7 @@ import GroupHeading from './components/SelectGroupHeading.svelte';
 import Trigger from './components/SelectTrigger.svelte';
 import MultiSelectTrigger from './components/MultiSelectTrigger.svelte';
 import Group from './components/Group.svelte';
-export declare const Root: import("svelte").Component<import("bits-ui").SelectRootPropsWithoutHTML, {}, "open" | "value">;
+export declare const Root: import("svelte").Component<import("bits-ui").ComboboxRootPropsWithoutHTML, {}, "open" | "value">;
 export declare const Portal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
 export { Content, Item, Group, GroupHeading, Trigger, MultiSelectTrigger };
 export * from './types';

package/dist/components/tag/Tag.stories.svelte

@@ -21,6 +21,7 @@
 		'pear',
 		'blue',
 		'accent',
+		'success',
 		'warning'
 	];
 </script>

package/dist/components/tag/Tag.svelte

@@ -17,6 +17,7 @@
 			| 'pear'
 			| 'blue'
 			| 'accent'
+			| 'success'
 			| 'warning';
 		size?: 'sm' | 'md';
 		tooltip?: string;
@@ -52,6 +53,7 @@
 		pear: 'bg-pear text-pear',
 		blue: 'bg-blue text-blue',
 		accent: 'bg-accent text-accent',
+		success: 'bg-success text-success',
 		warning: 'bg-warning text-warning'
 	};
 
@@ -68,6 +70,7 @@
 		pear: 'hover:bg-pear-hover hover:text-pear-hover',
 		blue: 'hover:bg-blue-hover hover:text-blue-hover',
 		accent: 'hover:bg-accent-hover hover:text-accent-hover',
+		success: 'hover:bg-success-hover hover:text-success-hover',
 		warning: 'hover:bg-warning-hover hover:text-warning-hover'
 	};
 

package/dist/components/tag/Tag.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 interface Props {
     children: Snippet;
-    variant?: 'default' | 'outline' | 'transparent' | 'default-inverse' | 'orange' | 'sky' | 'pink' | 'lime' | 'lilac' | 'pear' | 'blue' | 'accent' | 'warning';
+    variant?: 'default' | 'outline' | 'transparent' | 'default-inverse' | 'orange' | 'sky' | 'pink' | 'lime' | 'lilac' | 'pear' | 'blue' | 'accent' | 'success' | 'warning';
     size?: 'sm' | 'md';
     tooltip?: string;
     onclick?: (event: MouseEvent) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reshape-biotech/design-system",
-	"version": "1.2.2",
+	"version": "1.2.4",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",