@reshape-biotech/design-system 0.0.52 → 1.1.1

package/dist/components/graphs/bar-chart/BarChart.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+	import { textColor, borderColor } from '../../../tokens';
+	import Chart, { type GenericChartProps } from '../chart/Chart.svelte';
+	import type { EChartsOption, BarSeriesOption } from 'echarts';
+	import { createTooltipFormatter } from '../utils/tooltipFormatter';
+
+	type DataItem = {
+		value: number;
+		[key: string]: string | number; // Allows other properties, like the one used for xAxisName
+	};
+
+	interface BarChartProps extends Omit<GenericChartProps, 'timeIndex'> {
+		data: DataItem[];
+		colors?: Record<string, string>; // Optional: Color mapping per x-axis category
+		rotateXAxisLabels?: boolean;
+		grid?: EChartsOption['grid'];
+	}
+
+	let {
+		data,
+		colors,
+		rotateXAxisLabels = false,
+		xAxisName,
+		yAxisName,
+		...props
+	}: BarChartProps = $props();
+
+	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));
+
+	const xAxisData = $derived(data.map((item) => item[xAxisName]));
+
+	const createBarDataItem = (value: number | null, color: string) => ({
+		value,
+		itemStyle: {
+			color,
+			borderRadius: [2, 2, 0, 0]
+		},
+		emphasis: {
+			disabled: true
+		}
+	});
+
+	const chartSeries: BarSeriesOption[] = $derived.by(() => {
+		const seriesData = data.map((item) => item.value);
+		const seriesColors = data.map(
+			(item, index) =>
+				colors?.[item[xAxisName] as string] ??
+				defaultColorRotationArray[index % defaultColorRotationArray.length]
+		);
+
+		const singleSeries: BarSeriesOption[] = [
+			{
+				name: yAxisName,
+				type: 'bar',
+				data: seriesData.map((value, index) => createBarDataItem(value, seriesColors[index])),
+				emphasis: { disabled: true }
+			}
+		];
+		return singleSeries;
+	});
+
+	const formatTooltip = createTooltipFormatter({
+		yAxisName: yAxisName,
+		yAxisUnit: props.yAxisUnit
+	});
+
+	const options: EChartsOption = $derived.by(() => {
+		return {
+			tooltip: {
+				trigger: 'item',
+				axisPointer: {
+					type: 'shadow'
+				},
+				borderWidth: 0,
+				extraCssText: 'box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); padding: 8px;',
+				formatter: formatTooltip
+			},
+			grid: {
+				containLabel: true,
+				left: '3%',
+				right: '4%',
+				bottom: '3%',
+				top: '10%',
+				...props.grid
+			},
+			xAxis: {
+				type: 'category',
+				data: xAxisData,
+				axisTick: {
+					show: false,
+					alignWithLabel: true
+				},
+				axisLabel: {
+					fontSize: 12,
+					color: textColor['secondary'],
+					show: true,
+					...(rotateXAxisLabels
+						? { rotate: 90, overflow: 'break', width: 60, padding: [0, 40, 0, 0] }
+						: { rotate: 0, overflow: 'truncate', ellipsis: '...', width: 80 })
+				},
+				axisLine: {
+					show: false
+				}
+			},
+			yAxis: {
+				type: 'value',
+				axisLabel: {
+					fontSize: 12,
+					color: textColor['secondary']
+				},
+				axisLine: {
+					show: false
+				},
+				splitLine: {
+					lineStyle: {
+						color: borderColor['static'],
+						type: 'dashed'
+					}
+				}
+			},
+			series: chartSeries,
+			color: defaultColorRotationArray
+		};
+	});
+</script>
+
+<Chart {options} {...props} {xAxisName} {yAxisName} />

package/dist/components/graphs/bar-chart/BarChart.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type GenericChartProps } from '../chart/Chart.svelte';
+import type { EChartsOption } from 'echarts';
+type DataItem = {
+    value: number;
+    [key: string]: string | number;
+};
+interface BarChartProps extends Omit<GenericChartProps, 'timeIndex'> {
+    data: DataItem[];
+    colors?: Record<string, string>;
+    rotateXAxisLabels?: boolean;
+    grid?: EChartsOption['grid'];
+}
+declare const BarChart: import("svelte").Component<BarChartProps, {}, "">;
+type BarChart = ReturnType<typeof BarChart>;
+export default BarChart;

package/dist/components/graphs/bar-chart/StackedBarChart.stories.svelte

@@ -0,0 +1,42 @@
+<script lang="ts" context="module">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { textColor } from '../../../tokens';
+	import StackedBarChart from './StackedBarChart.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Design System/Graphs/StackedBarChart',
+		component: StackedBarChart,
+		tags: ['autodocs']
+	});
+
+	const stackedChartProps = {
+		xAxisCategories: ['ID 1', 'ID 2', 'ID 3', 'ID 4'],
+		series: [
+			{ name: 'Halo', data: [120, 132, 101, 134] },
+			{ name: 'Spot', data: [220, 182, 191, 234] },
+			{ name: 'Microbial', data: [150, 232, 201, 154] }
+		]
+	};
+
+	const seriesColors = {
+		Halo: textColor['icon-warning'],
+		Spot: textColor['icon-tertiary'],
+		Microbial: textColor['icon-lime']
+	};
+</script>
+
+<Story
+	name="Default Colors"
+	args={{ ...stackedChartProps, height: '400px', xAxisName: 'ID', yAxisName: 'Count' }}
+/>
+
+<Story
+	name="Custom Colors"
+	args={{
+		...stackedChartProps,
+		height: '400px',
+		colors: seriesColors,
+		xAxisName: 'ID',
+		yAxisName: 'Count'
+	}}
+/>

package/dist/components/graphs/bar-chart/StackedBarChart.stories.svelte.d.ts

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

package/dist/components/graphs/bar-chart/StackedBarChart.svelte

@@ -0,0 +1,177 @@
+<script lang="ts">
+	import { textColor, borderColor } from '../../../tokens';
+	import Chart, { type GenericChartProps } from '../chart/Chart.svelte';
+	import type { EChartsOption, BarSeriesOption } from 'echarts';
+	import type { CallbackDataParams } from 'echarts/types/dist/shared';
+
+	type StackedSeriesItem = {
+		name: string;
+		data: (number | null)[];
+	};
+
+	type StackedBarChartProps = {
+		xAxisCategories: (string | number)[];
+		series: StackedSeriesItem[];
+		colors?: Record<string, string>; // Optional: Color mapping per series name
+		rotateXAxisLabels?: boolean;
+		grid?: EChartsOption['grid'];
+	} & Omit<GenericChartProps, 'timeIndex'>;
+
+	let {
+		xAxisCategories,
+		series,
+		colors,
+		rotateXAxisLabels = false,
+		...props
+	}: StackedBarChartProps = $props();
+
+	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));
+
+	const xAxisData = $derived(xAxisCategories);
+
+	const createBarDataItem = (value: number | null, color: string) => ({
+		value,
+		itemStyle: {
+			color,
+			borderRadius: [2, 2, 0, 0]
+		},
+		emphasis: {
+			disabled: true
+		}
+	});
+
+	const chartSeries: BarSeriesOption[] = $derived.by(() => {
+		return series.map((seriesItem, index): BarSeriesOption => {
+			let seriesColor: string;
+			// Use provided color for the series name if available, otherwise rotate through defaults
+			if (colors && colors[seriesItem.name]) {
+				seriesColor = colors[seriesItem.name];
+			} else {
+				seriesColor = defaultColorRotationArray[index % defaultColorRotationArray.length];
+			}
+			return {
+				name: seriesItem.name,
+				type: 'bar',
+				stack: 'total',
+				emphasis: { focus: 'none', disabled: true },
+				data: seriesItem.data.map((val) => createBarDataItem(val, seriesColor))
+			};
+		});
+	});
+
+	const formatTooltip = (params: CallbackDataParams | CallbackDataParams[]): string => {
+		if (typeof params !== 'object' || params === null) {
+			return '';
+		}
+
+		// ECharts passes an array for axis trigger, single object for item
+		const paramArray = Array.isArray(params) ? params : [params];
+		if (paramArray.length === 0) return '';
+
+		const firstParam = paramArray[0];
+		const categoryName = firstParam.name;
+
+		let tooltipContent = `<div style="font-weight:bold; margin-bottom: 5px;">${categoryName}</div>`;
+
+		// Sort tooltip items by value descending for readability
+		paramArray.sort((a, b) => (b.value as number) - (a.value as number));
+
+		paramArray.forEach((p) => {
+			if (p.value == null) return;
+
+			const seriesName = p.seriesName ?? '';
+			const value = p.value;
+			let color = p.color as string | undefined;
+
+			// Attempt to find the originally assigned color for consistency
+			if (!color) {
+				if (colors && colors[seriesName]) {
+					color = colors[seriesName];
+				} else {
+					// Fallback: find index in original series data to get default color
+					const seriesIndex = series.findIndex((s) => s.name === seriesName);
+					if (seriesIndex !== -1) {
+						color = defaultColorRotationArray[seriesIndex % defaultColorRotationArray.length];
+					} else {
+						color = textColor['icon-blue']; // Use a default color as final fallback
+					}
+				}
+			}
+
+			const marker = `<span style="display:inline-block;margin-right:5px;border-radius:2px;width:10px;height:10px;background-color:${color};"></span>`;
+			tooltipContent += `<div>${marker}${seriesName}: <span style="font-weight:500;">${value}</span></div>`;
+		});
+
+		return tooltipContent;
+	};
+
+	const options: EChartsOption = $derived.by(() => {
+		return {
+			tooltip: {
+				trigger: 'axis', // Trigger per category for stacked charts
+				axisPointer: {
+					type: 'none'
+				},
+				borderWidth: 0,
+				extraCssText: 'box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); padding: 8px;',
+				formatter: formatTooltip
+			},
+			grid: {
+				containLabel: true,
+				left: '3%',
+				right: '4%',
+				bottom: '3%',
+				top: '10%',
+				...props.grid
+			},
+			xAxis: {
+				type: 'category',
+				data: xAxisData,
+				axisTick: {
+					show: false,
+					alignWithLabel: true
+				},
+				axisLabel: {
+					fontSize: 12,
+					color: textColor['secondary'],
+					show: true,
+					...(rotateXAxisLabels
+						? { rotate: 90, overflow: 'break', width: 60, padding: [0, 40, 0, 0] }
+						: { rotate: 0, overflow: 'truncate', ellipsis: '...', width: 80 })
+				},
+				axisLine: {
+					show: false
+				}
+			},
+			yAxis: {
+				type: 'value',
+				axisLabel: {
+					fontSize: 12,
+					color: textColor['secondary']
+				},
+				axisLine: {
+					show: false
+				},
+				splitLine: {
+					lineStyle: {
+						color: borderColor['static'],
+						type: 'dashed'
+					}
+				}
+			},
+			series: chartSeries,
+			color: defaultColorRotationArray
+		};
+	});
+</script>
+
+<Chart {options} {...props} />

package/dist/components/graphs/bar-chart/StackedBarChart.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type GenericChartProps } from '../chart/Chart.svelte';
+import type { EChartsOption } from 'echarts';
+type StackedSeriesItem = {
+    name: string;
+    data: (number | null)[];
+};
+type StackedBarChartProps = {
+    xAxisCategories: (string | number)[];
+    series: StackedSeriesItem[];
+    colors?: Record<string, string>;
+    rotateXAxisLabels?: boolean;
+    grid?: EChartsOption['grid'];
+} & Omit<GenericChartProps, 'timeIndex'>;
+declare const StackedBarChart: import("svelte").Component<StackedBarChartProps, {}, "">;
+type StackedBarChart = ReturnType<typeof StackedBarChart>;
+export default StackedBarChart;

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

@@ -26,6 +26,12 @@
 		]
 	};
 
+	const defaultProps = {
+		xAxisName: 'Day',
+		yAxisName: 'Value',
+		height: '400px'
+	};
+
 	const lineOptions = {
 		xAxis: { type: 'category' as const, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] },
 		yAxis: { type: 'value' as const },
@@ -43,38 +49,33 @@
 </script>
 
 <!-- Basic Usage -->
-<Story name="Default">
-	<Chart options={baseOptions} />
-</Story>
+<Story name="Default" args={{ options: baseOptions, ...defaultProps }} />
 
 <!-- Custom Size -->
-<Story name="Custom Size">
-	<Chart options={baseOptions} width="600px" height="400px" />
-</Story>
+<Story name="Custom Size" args={{ options: baseOptions, ...defaultProps }} />
 
 <!-- Loading State -->
-<Story name="Loading State">
-	<Chart options={baseOptions} loading={true} />
-</Story>
+<Story name="Loading State" args={{ options: baseOptions, ...defaultProps, loading: true }} />
 
 <!-- With Events -->
-<Story name="With Click Events">
-	<Chart
-		options={baseOptions}
-		onitemclick={handleClick}
-		onmouseover={(params) => console.log('Hover:', params)}
-	/>
-</Story>
+<Story
+	name="With Click Events"
+	args={{
+		options: baseOptions,
+		...defaultProps,
+		onitemclick: handleClick,
+		onmouseover: (params) => console.log('Hover:', params)
+	}}
+/>
 
 <!-- Different Chart Types -->
-<Story name="Line Chart">
-	<Chart options={lineOptions} />
-</Story>
+<Story name="Line Chart" args={{ options: lineOptions, ...defaultProps }} />
 
 <!-- Theme Example -->
-<Story name="Dark Theme">
+<Story name="Dark Theme" asChild>
 	<div style="background: #333; padding: 20px;">
 		<Chart
+			{...defaultProps}
 			options={{
 				...baseOptions,
 				backgroundColor: '#333',
@@ -89,16 +90,16 @@
 </Story>
 
 <!-- Responsive Example -->
-<Story name="Responsive">
+<Story name="Responsive" asChild>
 	<div
 		style="resize: both; overflow: auto; min-width: 300px; min-height: 200px; border: 1px solid #ccc;"
 	>
-		<Chart options={baseOptions} autoResize={true} />
+		<Chart options={baseOptions} autoResize={true} xAxisName="Day" yAxisName="Value" />
 	</div>
 </Story>
 
 <!-- Multiple Series -->
-<Story name="Multiple Series">
+<Story name="Multiple Series" asChild>
 	<Chart
 		options={{
 			...baseOptions,
@@ -124,5 +125,12 @@
 			],
 			legend: { data: ['Series 1', 'Series 2'] }
 		}}
+		{...defaultProps}
 	/>
 </Story>
+
+<Story name="With Current Location" asChild>
+	<div style="height: 300px; width: 500px;">
+		<Chart options={baseOptions} {...defaultProps} timeIndex={2} />
+	</div>
+</Story>