@reshape-biotech/design-system 1.2.6 → 2.0.0

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

@@ -1,203 +1,202 @@
 <script lang="ts">
-	import { textColor, borderColor, backgroundColor, chartColor, boxShadow } from '../../../tokens';
-	import Chart, { type GenericChartProps } from '../chart/Chart.svelte';
-	import type { EChartsOption, BarSeriesOption } from 'echarts';
-	import type { CallbackDataParams } from 'echarts/types/dist/shared';
-	import { Duration } from 'luxon';
-
-	type StackedSeriesItem = {
-		name: string;
-		data: (number | null)[];
-	};
-
-	interface StackedBarChartProps extends GenericChartProps {
-		xAxisCategories: (string | number)[];
-		series: StackedSeriesItem[];
-		colors?: Record<string, string>; // Optional: Color mapping per series name
-		rotateXAxisLabels?: boolean;
-		grid?: EChartsOption['grid'];
-		captureInterval?: number;
-	}
-
-	let {
-		xAxisCategories,
-		series,
-		colors,
-		rotateXAxisLabels = false,
-		captureInterval,
-		...props
-	}: StackedBarChartProps = $props();
-
-	const defaultColors: Record<string, string> = {
-		accent: chartColor['accent'],
-		blue: chartColor['blue'],
-		orange: chartColor['orange'],
-		plum: chartColor['plum'],
-		sky: chartColor['sky'],
-		pear: chartColor['pear'],
-		pink: chartColor['pink'],
-		lilac: chartColor['lilac'],
-		lime: chartColor['lime']
-	};
-	const defaultColorRotationArray = $derived(Object.values(defaultColors));
-
-	const xAxisData = $derived(xAxisCategories);
-
-	const captureIntervals = captureInterval
-		? Array(xAxisCategories.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;
-
-	const createBarDataItem = (value: number | null, color: string) => ({
-		value,
-		itemStyle: {
-			color,
-			borderRadius: 2,
-			borderWidth: 0.5,
-			borderColor: borderColor['white']
-		},
-		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 class="font-medium mb-1 text-primary">${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 class="size-2 rounded-sm" style="background-color:${color}"></span>`;
-			tooltipContent += `<div class="flex items-center justify-between gap-4"><span class="flex items-center gap-2">${marker}${seriesName}</span><span class="text-primary">${value}</span></div>`;
-		});
-
-		return tooltipContent;
-	};
-
-	const options: EChartsOption = $derived.by(() => {
-		return {
-			tooltip: {
-				trigger: 'axis', // Trigger per category for stacked charts
-				axisPointer: {
-					type: 'shadow',
-					shadowStyle: {
-						color: backgroundColor['neutral']
-					}
-				},
-				extraCssText: `box-shadow: ${boxShadow.menu}`,
-				borderWidth: 0,
-				borderRadius: 6,
-				formatter: formatTooltip
-			},
-			grid: {
-				containLabel: true,
-				left: 0,
-				right: 16,
-				bottom: 16,
-				top: 16
-			},
-			xAxis: {
-				type: 'category',
-				data: captureIntervals || xAxisData,
-				axisTick: {
-					show: false,
-					alignWithLabel: true
-				},
-				axisLabel: {
-					fontSize: 11,
-					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: {
-					lineStyle: {
-						color: borderColor['axis']
-					}
-				}
-			},
-			yAxis: {
-				type: 'value',
-				axisLabel: {
-					fontSize: 11,
-					color: textColor['secondary']
-				},
-				axisLine: {
-					show: false
-				},
-				splitLine: {
-					lineStyle: {
-						color: borderColor['input'],
-						type: 'dashed'
-					}
-				}
-			},
-			textStyle: {
-				color: textColor['secondary'],
-				fontFamily: 'af Another Sans'
-			},
-			series: chartSeries,
-			color: defaultColorRotationArray
-		};
-	});
+  import { textColor, borderColor, backgroundColor, chartColor, boxShadow } from '../../../tokens';
+  import Chart, { type GenericChartProps } from '../chart/Chart.svelte';
+  import type { EChartsOption, BarSeriesOption } from 'echarts';
+  import type { CallbackDataParams } from 'echarts/types/dist/shared';
+  import { formattedDurationCompact } from '../utils/duration';
+
+  type StackedSeriesItem = {
+    name: string;
+    data: (number | null)[];
+  };
+
+  interface StackedBarChartProps extends GenericChartProps {
+    xAxisCategories: (string | number)[];
+    series: StackedSeriesItem[];
+    colors?: Record<string, string>; // Optional: Color mapping per series name
+    rotateXAxisLabels?: boolean;
+    grid?: EChartsOption['grid'];
+    captureInterval?: number;
+  }
+
+  let {
+    xAxisCategories,
+    series,
+    colors,
+    rotateXAxisLabels = false,
+    captureInterval,
+    ...props
+  }: StackedBarChartProps = $props();
+
+  const defaultColors: Record<string, string> = {
+    accent: chartColor['accent'],
+    blue: chartColor['blue'],
+    orange: chartColor['orange'],
+    plum: chartColor['plum'],
+    sky: chartColor['sky'],
+    pear: chartColor['pear'],
+    pink: chartColor['pink'],
+    lilac: chartColor['lilac'],
+    lime: chartColor['lime'],
+  };
+  const defaultColorRotationArray = $derived(Object.values(defaultColors));
+
+  const xAxisData = $derived(xAxisCategories);
+
+  const captureIntervals = captureInterval
+    ? Array(xAxisCategories.length)
+        .fill(null)
+        .map((_, timeIndex) => {
+          const seconds = timeIndex * captureInterval;
+          return formattedDurationCompact(seconds);
+        })
+    : undefined;
+
+  const createBarDataItem = (value: number | null, color: string) => ({
+    value,
+    itemStyle: {
+      color,
+      borderRadius: 2,
+      borderWidth: 0.5,
+      borderColor: borderColor['white'],
+    },
+    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 class="font-medium mb-1 text-primary">${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 class="size-2 rounded-sm" style="background-color:${color}"></span>`;
+      tooltipContent += `<div class="flex items-center justify-between gap-4"><span class="flex items-center gap-2">${marker}${seriesName}</span><span class="text-primary">${value}</span></div>`;
+    });
+
+    return tooltipContent;
+  };
+
+  const options: EChartsOption = $derived.by(() => {
+    return {
+      tooltip: {
+        trigger: 'axis', // Trigger per category for stacked charts
+        axisPointer: {
+          type: 'shadow',
+          shadowStyle: {
+            color: backgroundColor['neutral'],
+          },
+        },
+        extraCssText: `box-shadow: ${boxShadow.menu}`,
+        borderWidth: 0,
+        borderRadius: 6,
+        formatter: formatTooltip,
+      },
+      grid: {
+        containLabel: true,
+        left: 0,
+        right: 16,
+        bottom: 16,
+        top: 16,
+      },
+      xAxis: {
+        type: 'category',
+        data: captureIntervals || xAxisData,
+        axisTick: {
+          show: false,
+          alignWithLabel: true,
+        },
+        axisLabel: {
+          fontSize: 11,
+          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: {
+          lineStyle: {
+            color: borderColor['axis'],
+          },
+        },
+      },
+      yAxis: {
+        type: 'value',
+        axisLabel: {
+          fontSize: 11,
+          color: textColor['secondary'],
+        },
+        axisLine: {
+          show: false,
+        },
+        splitLine: {
+          lineStyle: {
+            color: borderColor['input'],
+            type: 'dashed',
+          },
+        },
+      },
+      textStyle: {
+        color: textColor['secondary'],
+        fontFamily: 'af Another Sans',
+      },
+      series: chartSeries,
+      color: defaultColorRotationArray,
+    };
+  });
 </script>
 
 <Chart {options} {...props} />

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

@@ -1,51 +1,51 @@
 <script lang="ts" context="module">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Chart from './Chart.svelte';
-	import { colors } from '../../../tokens';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Chart from './Chart.svelte';
+  import { colors } from '../../../tokens';
 
-	const { Story } = defineMeta({
-		component: Chart,
-		title: 'Design System/Graphs/Chart',
-		tags: ['autodocs']
-	});
+  const { Story } = defineMeta({
+    component: Chart,
+    title: 'Design System/Graphs/Chart',
+    tags: ['autodocs'],
+  });
 </script>
 
 <script lang="ts">
-	const baseOptions = {
-		xAxis: { type: 'value' as const },
-		yAxis: { type: 'value' as const },
-		series: [
-			{
-				type: 'scatter' as const,
-				data: [
-					[10, 8.04],
-					[8.07, 6.95],
-					[13.0, 7.58]
-				]
-			}
-		]
-	};
+  const baseOptions = {
+    xAxis: { type: 'value' as const },
+    yAxis: { type: 'value' as const },
+    series: [
+      {
+        type: 'scatter' as const,
+        data: [
+          [10, 8.04],
+          [8.07, 6.95],
+          [13.0, 7.58],
+        ],
+      },
+    ],
+  };
 
-	const defaultProps = {
-		xAxisName: 'Day',
-		yAxisName: 'Value',
-		height: '400px'
-	};
+  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 },
-		series: [
-			{
-				type: 'line' as const,
-				data: [150, 230, 224, 218, 135]
-			}
-		]
-	};
+  const lineOptions = {
+    xAxis: { type: 'category' as const, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] },
+    yAxis: { type: 'value' as const },
+    series: [
+      {
+        type: 'line' as const,
+        data: [150, 230, 224, 218, 135],
+      },
+    ],
+  };
 
-	function handleClick(params: any) {
-		console.log('Clicked:', params);
-	}
+  function handleClick(params: any) {
+    console.log('Clicked:', params);
+  }
 </script>
 
 <!-- Basic Usage -->
@@ -56,13 +56,13 @@
 
 <!-- With Events -->
 <Story
-	name="With Click Events"
-	args={{
-		options: baseOptions,
-		...defaultProps,
-		onitemclick: handleClick,
-		onmouseover: (params) => console.log('Hover:', params)
-	}}
+  name="With Click Events"
+  args={{
+    options: baseOptions,
+    ...defaultProps,
+    onitemclick: handleClick,
+    onmouseover: (params) => console.log('Hover:', params),
+  }}
 />
 
 <!-- Different Chart Types -->
@@ -70,64 +70,64 @@
 
 <!-- Theme Example -->
 <Story name="Dark Theme" asChild>
-	<div style="background: #333; padding: 20px;">
-		<Chart
-			{...defaultProps}
-			options={{
-				...baseOptions,
-				backgroundColor: '#333',
-				textStyle: { color: '#fff' }
-			}}
-			theme={{
-				textStyle: { color: '#fff' },
-				color: [colors.blue[5].default]
-			}}
-		/>
-	</div>
+  <div style="background: #333; padding: 20px;">
+    <Chart
+      {...defaultProps}
+      options={{
+        ...baseOptions,
+        backgroundColor: '#333',
+        textStyle: { color: '#fff' },
+      }}
+      theme={{
+        textStyle: { color: '#fff' },
+        color: [colors.blue[5].default],
+      }}
+    />
+  </div>
 </Story>
 
 <!-- Responsive Example -->
 <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} xAxisName="Day" yAxisName="Value" />
-	</div>
+  <div
+    style="resize: both; overflow: auto; min-width: 300px; min-height: 200px; border: 1px solid #ccc;"
+  >
+    <Chart options={baseOptions} autoResize={true} xAxisName="Day" yAxisName="Value" />
+  </div>
 </Story>
 
 <!-- Multiple Series -->
 <Story name="Multiple Series" asChild>
-	<Chart
-		options={{
-			...baseOptions,
-			series: [
-				{
-					type: 'scatter' as const,
-					data: [
-						[10, 8.04],
-						[8.07, 6.95],
-						[13.0, 7.58]
-					],
-					name: 'Series 1'
-				},
-				{
-					type: 'scatter' as const,
-					data: [
-						[9, 7.5],
-						[7.5, 6.3],
-						[12.5, 7.0]
-					],
-					name: 'Series 2'
-				}
-			],
-			legend: { data: ['Series 1', 'Series 2'] }
-		}}
-		{...defaultProps}
-	/>
+  <Chart
+    options={{
+      ...baseOptions,
+      series: [
+        {
+          type: 'scatter' as const,
+          data: [
+            [10, 8.04],
+            [8.07, 6.95],
+            [13.0, 7.58],
+          ],
+          name: 'Series 1',
+        },
+        {
+          type: 'scatter' as const,
+          data: [
+            [9, 7.5],
+            [7.5, 6.3],
+            [12.5, 7.0],
+          ],
+          name: 'Series 2',
+        },
+      ],
+      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>
+  <div style="height: 300px; width: 500px;">
+    <Chart options={baseOptions} {...defaultProps} timeIndex={2} />
+  </div>
 </Story>