@reshape-biotech/design-system 1.2.6 → 2.0.0

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

@@ -1,335 +1,335 @@
 <script lang="ts">
-	import { backgroundColor } from '../../../tokens';
-	import Icon from '../../icons/Icon.svelte';
-	import Chart, { type GenericChartProps } from '../chart/Chart.svelte';
-	import type {
-		EChartsOption,
-		SeriesOption,
-		CustomSeriesRenderItemAPI,
-		CustomSeriesRenderItemParams
-	} from 'echarts';
-	import Tooltip from '../../tooltip/Tooltip.svelte';
-	import type { Snippet } from 'svelte';
+  import { backgroundColor } from '../../../tokens';
+  import Icon from '../../icons/Icon.svelte';
+  import Chart, { type GenericChartProps } from '../chart/Chart.svelte';
+  import type {
+    EChartsOption,
+    SeriesOption,
+    CustomSeriesRenderItemAPI,
+    CustomSeriesRenderItemParams,
+  } from 'echarts';
+  import Tooltip from '../../tooltip/Tooltip.svelte';
+  import type { Snippet } from 'svelte';
 
-	export type DataPoint = { value: [number, number]; metadata: any; error_value?: number };
+  export type DataPoint = { value: [number, number]; metadata: any; error_value?: number };
 
-	export type ScatterPlotEchartsEvent = echarts.ECElementEvent & {
-		data: DataPoint;
-	};
+  export type ScatterPlotEchartsEvent = echarts.ECElementEvent & {
+    data: DataPoint;
+  };
 
-	type LegendItem = {
-		label: string;
-		color: string;
-		type: 'point' | 'line' | 'area';
-	};
+  type LegendItem = {
+    label: string;
+    color: string;
+    type: 'point' | 'line' | 'area';
+  };
 
-	type ScatterPlotProps = {
-		data: DataPoint[];
-		lineData?: [[number, number], [number, number]];
-		showConfidenceBand?: boolean;
-		showLegend?: boolean;
-		legendItems?: LegendItem[];
-		children?: Snippet;
-	} & Omit<GenericChartProps, 'timeIndex'>;
+  type ScatterPlotProps = {
+    data: DataPoint[];
+    lineData?: [[number, number], [number, number]];
+    showConfidenceBand?: boolean;
+    showLegend?: boolean;
+    legendItems?: LegendItem[];
+    children?: Snippet;
+  } & Omit<GenericChartProps, 'timeIndex'>;
 
-	const {
-		data,
-		xAxisName,
-		yAxisName,
-		loading = false,
-		showConfidenceBand = false,
-		onitemclick,
-		onmouseover,
-		onmouseout,
-		showLegend = false,
-		legendItems = [
-			{ label: 'Count', color: backgroundColor['blue-inverse'], type: 'point' },
-			{ label: 'Perfect agreement', color: backgroundColor['lilac-inverse'], type: 'line' }
-		],
-		children,
-		...props
-	}: ScatterPlotProps = $props();
+  const {
+    data,
+    xAxisName,
+    yAxisName,
+    loading = false,
+    showConfidenceBand = false,
+    onitemclick,
+    onmouseover,
+    onmouseout,
+    showLegend = false,
+    legendItems = [
+      { label: 'Count', color: backgroundColor['blue-inverse'], type: 'point' },
+      { label: 'Perfect agreement', color: backgroundColor['lilac-inverse'], type: 'line' },
+    ],
+    children,
+    ...props
+  }: ScatterPlotProps = $props();
 
-	const displayedLegendItems: LegendItem[] = $derived([
-		...legendItems,
-		...(showConfidenceBand
-			? [
-					{
-						label: 'Error margin',
-						color: backgroundColor.lilac,
-						type: 'area' as const
-					}
-				]
-			: [])
-	]);
+  const displayedLegendItems: LegendItem[] = $derived([
+    ...legendItems,
+    ...(showConfidenceBand
+      ? [
+          {
+            label: 'Error margin',
+            color: backgroundColor.lilac,
+            type: 'area' as const,
+          },
+        ]
+      : []),
+  ]);
 
-	let chartComponent: any;
+  let chartComponent: any;
 
-	function handleClick(params: ScatterPlotEchartsEvent) {
-		onitemclick?.(params);
-	}
+  function handleClick(params: ScatterPlotEchartsEvent) {
+    onitemclick?.(params);
+  }
 
-	function handleMouseOver(params: ScatterPlotEchartsEvent) {
-		onmouseover?.(params);
-	}
+  function handleMouseOver(params: ScatterPlotEchartsEvent) {
+    onmouseover?.(params);
+  }
 
-	function handleMouseOut() {
-		onmouseout?.();
-	}
+  function handleMouseOut() {
+    onmouseout?.();
+  }
 
-	// from https://echarts.apache.org/examples/en/editor.html?c=custom-error-bar
-	function renderErrorBarItem(
-		params: CustomSeriesRenderItemParams,
-		api: CustomSeriesRenderItemAPI
-	) {
-		const xValue = api.value(0) as number;
-		const yValue = api.value(1) as number;
-		const error = api.value(2) as number;
+  // from https://echarts.apache.org/examples/en/editor.html?c=custom-error-bar
+  function renderErrorBarItem(
+    params: CustomSeriesRenderItemParams,
+    api: CustomSeriesRenderItemAPI
+  ) {
+    const xValue = api.value(0) as number;
+    const yValue = api.value(1) as number;
+    const error = api.value(2) as number;
 
-		const highPoint = api.coord([xValue, yValue + error]);
-		const lowPoint = api.coord([xValue, yValue - error]);
+    const highPoint = api.coord([xValue, yValue + error]);
+    const lowPoint = api.coord([xValue, yValue - error]);
 
-		if (!highPoint || !lowPoint) {
-			return undefined;
-		}
+    if (!highPoint || !lowPoint) {
+      return undefined;
+    }
 
-		// calculate a dynamic width for the caps based on the x-axis scale
-		const sizeValue = api.size?.([1, 0]);
-		const baseWidth = Array.isArray(sizeValue) ? sizeValue[0] : 10;
-		const halfWidth = Math.min((baseWidth ?? 10) * 1.5, 3);
-		const style = {
-			stroke: api.visual('color') as string,
-			fill: undefined
-		};
+    // calculate a dynamic width for the caps based on the x-axis scale
+    const sizeValue = api.size?.([1, 0]);
+    const baseWidth = Array.isArray(sizeValue) ? sizeValue[0] : 10;
+    const halfWidth = Math.min((baseWidth ?? 10) * 1.5, 3);
+    const style = {
+      stroke: api.visual('color') as string,
+      fill: undefined,
+    };
 
-		return {
-			type: 'group' as const,
-			children: [
-				{
-					type: 'line' as const,
-					transition: 'shape' as const,
-					shape: {
-						x1: highPoint[0] - halfWidth,
-						y1: highPoint[1],
-						x2: highPoint[0] + halfWidth,
-						y2: highPoint[1]
-					},
-					style
-				},
-				{
-					type: 'line' as const,
-					transition: 'shape' as const,
-					shape: {
-						x1: highPoint[0],
-						y1: highPoint[1],
-						x2: lowPoint[0],
-						y2: lowPoint[1]
-					},
-					style
-				},
-				{
-					type: 'line' as const,
-					transition: 'shape' as const,
-					shape: {
-						x1: lowPoint[0] - halfWidth,
-						y1: lowPoint[1],
-						x2: lowPoint[0] + halfWidth,
-						y2: lowPoint[1]
-					},
-					style
-				}
-			]
-		};
-	}
+    return {
+      type: 'group' as const,
+      children: [
+        {
+          type: 'line' as const,
+          transition: 'shape' as const,
+          shape: {
+            x1: highPoint[0] - halfWidth,
+            y1: highPoint[1],
+            x2: highPoint[0] + halfWidth,
+            y2: highPoint[1],
+          },
+          style,
+        },
+        {
+          type: 'line' as const,
+          transition: 'shape' as const,
+          shape: {
+            x1: highPoint[0],
+            y1: highPoint[1],
+            x2: lowPoint[0],
+            y2: lowPoint[1],
+          },
+          style,
+        },
+        {
+          type: 'line' as const,
+          transition: 'shape' as const,
+          shape: {
+            x1: lowPoint[0] - halfWidth,
+            y1: lowPoint[1],
+            x2: lowPoint[0] + halfWidth,
+            y2: lowPoint[1],
+          },
+          style,
+        },
+      ],
+    };
+  }
 
-	const options = $derived(getChartOptions());
+  const options = $derived(getChartOptions());
 
-	function getChartOptions(): EChartsOption {
-		const series: SeriesOption[] = [];
-		const errorBarData = data
-			.filter((d) => d.error_value != 0)
-			.map((d) => [...d.value, d.error_value]);
+  function getChartOptions(): EChartsOption {
+    const series: SeriesOption[] = [];
+    const errorBarData = data
+      .filter((d) => d.error_value != 0)
+      .map((d) => [...d.value, d.error_value]);
 
-		if (props.lineData && props.lineData.length > 0) {
-			const extendedLineData = [
-				props.lineData[0],
-				[
-					props.lineData[props.lineData.length - 1][0] + 10,
-					props.lineData[props.lineData.length - 1][1] + 10
-				]
-			];
-			series.push({
-				type: 'line',
-				data: extendedLineData,
-				lineStyle: {
-					type: 'dashed',
-					color: backgroundColor['lilac-inverse']
-				},
-				symbol: 'none',
-				emphasis: {
-					disabled: true
-				},
-				silent: true,
-				zlevel: 0
-			});
+    if (props.lineData && props.lineData.length > 0) {
+      const extendedLineData = [
+        props.lineData[0],
+        [
+          props.lineData[props.lineData.length - 1][0] + 10,
+          props.lineData[props.lineData.length - 1][1] + 10,
+        ],
+      ];
+      series.push({
+        type: 'line',
+        data: extendedLineData,
+        lineStyle: {
+          type: 'dashed',
+          color: backgroundColor['lilac-inverse'],
+        },
+        symbol: 'none',
+        emphasis: {
+          disabled: true,
+        },
+        silent: true,
+        zlevel: 0,
+      });
 
-			if (showConfidenceBand && props.lineData && props.lineData.length > 0) {
-				const lowerBandData = extendedLineData.map((point) => {
-					const yValue = point[1];
-					// 0-30 = ±3, 30+ = ±10%
-					return [point[0], yValue <= 30 ? yValue - 3 : yValue * 0.9];
-				});
+      if (showConfidenceBand && props.lineData && props.lineData.length > 0) {
+        const lowerBandData = extendedLineData.map((point) => {
+          const yValue = point[1];
+          // 0-30 = ±3, 30+ = ±10%
+          return [point[0], yValue <= 30 ? yValue - 3 : yValue * 0.9];
+        });
 
-				const upperBandData = extendedLineData.map((point) => {
-					const yValue = point[1];
-					// 0-30 = ±3, 30+ = ±10%
-					return [point[0], yValue <= 30 ? yValue + 3 : yValue * 1.1];
-				});
+        const upperBandData = extendedLineData.map((point) => {
+          const yValue = point[1];
+          // 0-30 = ±3, 30+ = ±10%
+          return [point[0], yValue <= 30 ? yValue + 3 : yValue * 1.1];
+        });
 
-				series.push({
-					name: 'Confidence Band',
-					type: 'line',
-					data: [...upperBandData, ...lowerBandData.reverse()],
-					symbol: 'none',
-					areaStyle: {
-						color: backgroundColor.lilac,
-						opacity: 0.5
-					},
-					lineStyle: {
-						opacity: 0
-					},
-					tooltip: {
-						show: false
-					},
-					emphasis: {
-						disabled: true
-					},
-					silent: true,
-					zlevel: 0
-				});
-			}
-		}
+        series.push({
+          name: 'Confidence Band',
+          type: 'line',
+          data: [...upperBandData, ...lowerBandData.reverse()],
+          symbol: 'none',
+          areaStyle: {
+            color: backgroundColor.lilac,
+            opacity: 0.5,
+          },
+          lineStyle: {
+            opacity: 0,
+          },
+          tooltip: {
+            show: false,
+          },
+          emphasis: {
+            disabled: true,
+          },
+          silent: true,
+          zlevel: 0,
+        });
+      }
+    }
 
-		series.push({
-			symbolSize: 8,
-			data,
-			type: 'scatter',
-			itemStyle: {
-				color: backgroundColor['blue-inverse'],
-				opacity: 0.8
-			},
-			emphasis: {
-				itemStyle: {
-					color: backgroundColor['blue-inverse'],
-					opacity: 1
-				}
-			},
-			animation: false,
-			zlevel: 1
-		});
+    series.push({
+      symbolSize: 8,
+      data,
+      type: 'scatter',
+      itemStyle: {
+        color: backgroundColor['blue-inverse'],
+        opacity: 0.8,
+      },
+      emphasis: {
+        itemStyle: {
+          color: backgroundColor['blue-inverse'],
+          opacity: 1,
+        },
+      },
+      animation: false,
+      zlevel: 1,
+    });
 
-		if (errorBarData.length > 0) {
-			series.push({
-				type: 'custom',
-				name: 'error',
-				silent: true,
-				itemStyle: {
-					borderWidth: 1.5,
-					color: backgroundColor['blue-inverse']
-				},
-				renderItem: renderErrorBarItem,
-				data: errorBarData,
-				zlevel: 0
-			});
-		}
+    if (errorBarData.length > 0) {
+      series.push({
+        type: 'custom',
+        name: 'error',
+        silent: true,
+        itemStyle: {
+          borderWidth: 1.5,
+          color: backgroundColor['blue-inverse'],
+        },
+        renderItem: renderErrorBarItem,
+        data: errorBarData,
+        zlevel: 0,
+      });
+    }
 
-		return {
-			xAxis: {
-				type: 'value',
-				name: xAxisName,
-				max: props.lineData
-					? Math.ceil(props.lineData[props.lineData.length - 1][0] / 10) * 10
-					: undefined,
-				...props.xAxisOptions
-			},
-			yAxis: {
-				type: 'value',
-				name: yAxisName,
-				min: 0,
-				max: props.lineData
-					? Math.ceil(props.lineData[props.lineData.length - 1][1] / 10) * 10
-					: undefined,
-				...props.yAxisOptions
-			},
-			animation: false,
-			tooltip: { show: false },
-			series
-		};
-	}
+    return {
+      xAxis: {
+        type: 'value',
+        name: xAxisName,
+        max: props.lineData
+          ? Math.ceil(props.lineData[props.lineData.length - 1][0] / 10) * 10
+          : undefined,
+        ...props.xAxisOptions,
+      },
+      yAxis: {
+        type: 'value',
+        name: yAxisName,
+        min: 0,
+        max: props.lineData
+          ? Math.ceil(props.lineData[props.lineData.length - 1][1] / 10) * 10
+          : undefined,
+        ...props.yAxisOptions,
+      },
+      animation: false,
+      tooltip: { show: false },
+      series,
+    };
+  }
 
-	$effect(() => {
-		if (chartComponent && data) {
-			chartComponent.updateOptions(options);
-		}
-	});
+  $effect(() => {
+    if (chartComponent && data) {
+      chartComponent.updateOptions(options);
+    }
+  });
 </script>
 
 {#snippet confBandTooltip()}
-	<div class="flex flex-col text-left">
-		<div class="w-max">
-			±3 <span class="text-sm text-secondary-inverse">colonies if count</span> ≤30
-		</div>
-		<div>
-			±10% <span class="text-sm text-secondary-inverse">if count</span> >30
-		</div>
-	</div>
+  <div class="flex flex-col text-left">
+    <div class="w-max">
+      ±3 <span class="text-sm text-secondary-inverse">colonies if count</span> ≤30
+    </div>
+    <div>
+      ±10% <span class="text-sm text-secondary-inverse">if count</span> >30
+    </div>
+  </div>
 {/snippet}
 
 <div class="relative h-full" role="presentation">
-	<Chart
-		bind:this={chartComponent}
-		{options}
-		renderer="svg"
-		onitemclick={(e) => handleClick(e as ScatterPlotEchartsEvent)}
-		onmouseover={(e) => handleMouseOver(e as ScatterPlotEchartsEvent)}
-		onmouseout={handleMouseOut}
-		{loading}
-		{xAxisName}
-		{yAxisName}
-	>
-		{@render children?.()}
-	</Chart>
-	{#if showLegend}
-		<div
-			class="absolute left-14 top-6 flex h-auto rounded-lg border bg-surface transition-all duration-200"
-		>
-			<div class="ml-1 flex flex-col justify-center p-2">
-				{#each displayedLegendItems as item}
-					<div class="flex items-center gap-2">
-						{#if item.type === 'point'}
-							<div class="h-2 w-2 rounded-full" style="background-color: {item.color}"></div>
-						{:else if item.type === 'line'}
-							<div
-								class="h-[1px] w-2 border border-dashed"
-								style="border-color: {item.color}"
-							></div>
-						{:else if item.type === 'area'}
-							<div class="h-2 w-2" style="background-color: {item.color}"></div>
-						{/if}
-						<span class="text-sm text-secondary">{item.label}</span>
-						{#if item.label === 'Error margin'}
-							<Tooltip placement="right">
-								{#snippet trigger()}
-									<Icon iconName="Info" color="icon-tertiary" />
-								{/snippet}
-								{#snippet content()}
-									{@render confBandTooltip()}
-								{/snippet}
-							</Tooltip>
-						{/if}
-					</div>
-				{/each}
-			</div>
-		</div>
-	{/if}
+  <Chart
+    bind:this={chartComponent}
+    {options}
+    renderer="svg"
+    onitemclick={(e) => handleClick(e as ScatterPlotEchartsEvent)}
+    onmouseover={(e) => handleMouseOver(e as ScatterPlotEchartsEvent)}
+    onmouseout={handleMouseOut}
+    {loading}
+    {xAxisName}
+    {yAxisName}
+  >
+    {@render children?.()}
+  </Chart>
+  {#if showLegend}
+    <div
+      class="absolute left-14 top-6 flex h-auto rounded-lg border bg-surface transition-all duration-200"
+    >
+      <div class="ml-1 flex flex-col justify-center p-2">
+        {#each displayedLegendItems as item}
+          <div class="flex items-center gap-2">
+            {#if item.type === 'point'}
+              <div class="h-2 w-2 rounded-full" style="background-color: {item.color}"></div>
+            {:else if item.type === 'line'}
+              <div
+                class="h-[1px] w-2 border border-dashed"
+                style="border-color: {item.color}"
+              ></div>
+            {:else if item.type === 'area'}
+              <div class="h-2 w-2" style="background-color: {item.color}"></div>
+            {/if}
+            <span class="text-sm text-secondary">{item.label}</span>
+            {#if item.label === 'Error margin'}
+              <Tooltip placement="right">
+                {#snippet trigger()}
+                  <Icon iconName="Info" color="icon-tertiary" />
+                {/snippet}
+                {#snippet content()}
+                  {@render confBandTooltip()}
+                {/snippet}
+              </Tooltip>
+            {/if}
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/if}
 </div>

package/dist/components/graphs/utils/duration.d.ts

@@ -0,0 +1 @@
+export declare function formattedDurationCompact(seconds: number): string;