@reshape-biotech/design-system 1.2.5 → 1.2.7

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

@@ -1,119 +1,119 @@
 <script module lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { textColor } from '../../../tokens';
-	import BarChart from './BarChart.svelte';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { textColor } from '../../../tokens';
+  import BarChart from './BarChart.svelte';
 
-	const { Story } = defineMeta({
-		title: 'Design System/Graphs/BarChart',
-		component: BarChart,
-		tags: ['autodocs'],
-		argTypes: {
-			// Define argTypes for props if needed, e.g., for controls
-		}
-	});
+  const { Story } = defineMeta({
+    title: 'Design System/Graphs/BarChart',
+    component: BarChart,
+    tags: ['autodocs'],
+    argTypes: {
+      // Define argTypes for props if needed, e.g., for controls
+    },
+  });
 
-	const simpleData = [
-		{ category: 'A', value: 10 },
-		{ category: 'B', value: 20 },
-		{ category: 'C', value: 15 },
-		{ category: 'D', value: 25 },
-		{ category: 'E', value: 30 }
-	];
+  const simpleData = [
+    { category: 'A', value: 10 },
+    { category: 'B', value: 20 },
+    { category: 'C', value: 15 },
+    { category: 'D', value: 25 },
+    { category: 'E', value: 30 },
+  ];
 
-	const longerLabelsData = [
-		{ longCategoryName: 'Very Long Label One', value: 45 },
-		{ longCategoryName: 'Another Quite Long Label', value: 35 },
-		{ longCategoryName: 'Short', value: 55 },
-		{ longCategoryName: 'Label Four Is Also Lengthy', value: 25 },
-		{ longCategoryName: 'Fifth Label Is Here', value: 65 }
-	];
+  const longerLabelsData = [
+    { longCategoryName: 'Very Long Label One', value: 45 },
+    { longCategoryName: 'Another Quite Long Label', value: 35 },
+    { longCategoryName: 'Short', value: 55 },
+    { longCategoryName: 'Label Four Is Also Lengthy', value: 25 },
+    { longCategoryName: 'Fifth Label Is Here', value: 65 },
+  ];
 
-	const customColorData = [
-		{ category: 'Apple', value: 50 },
-		{ category: 'Banana', value: 70 },
-		{ category: 'Cherry', value: 60 },
-		{ category: 'Date', value: 40 }
-	];
+  const customColorData = [
+    { category: 'Apple', value: 50 },
+    { category: 'Banana', value: 70 },
+    { category: 'Cherry', value: 60 },
+    { category: 'Date', value: 40 },
+  ];
 
-	const customColors = {
-		Apple: '#ff6b6b', // Red
-		Banana: '#feca57', // Yellow
-		Cherry: '#ff9ff3', // Pink
-		Date: '#a4b0be' // Grey
-	};
+  const customColors = {
+    Apple: '#ff6b6b', // Red
+    Banana: '#feca57', // Yellow
+    Cherry: '#ff9ff3', // Pink
+    Date: '#a4b0be', // Grey
+  };
 </script>
 
 <Story
-	name="Base"
-	args={{ data: simpleData, xAxisName: 'category', yAxisName: 'Count', height: '400px' }}
+  name="Base"
+  args={{ data: simpleData, xAxisName: 'category', yAxisName: 'Count', height: '400px' }}
 />
 
 <Story
-	name="Custom Y-Axis Name"
-	args={{ data: simpleData, xAxisName: 'category', yAxisName: 'Units Sold', height: '400px' }}
+  name="Custom Y-Axis Name"
+  args={{ data: simpleData, xAxisName: 'category', yAxisName: 'Units Sold', height: '400px' }}
 />
 
 <Story
-	name="With Custom Colors"
-	args={{
-		data: customColorData,
-		xAxisName: 'category',
-		yAxisName: 'Fruit Amount',
-		colors: customColors,
-		height: '400px'
-	}}
+  name="With Custom Colors"
+  args={{
+    data: customColorData,
+    xAxisName: 'category',
+    yAxisName: 'Fruit Amount',
+    colors: customColors,
+    height: '400px',
+  }}
 />
 
 <Story
-	name="With Rotated Labels"
-	args={{
-		data: longerLabelsData,
-		xAxisName: 'longCategoryName',
-		yAxisName: 'Measurement',
-		rotateXAxisLabels: true,
-		height: '400px'
-	}}
+  name="With Rotated Labels"
+  args={{
+    data: longerLabelsData,
+    xAxisName: 'longCategoryName',
+    yAxisName: 'Measurement',
+    rotateXAxisLabels: true,
+    height: '400px',
+  }}
 />
 
 <Story
-	name="Empty Data"
-	args={{ data: [], xAxisName: 'category', yAxisName: 'Value', height: '400px' }}
+  name="Empty Data"
+  args={{ data: [], xAxisName: 'category', yAxisName: 'Value', height: '400px' }}
 />
 
 <Story
-	name="With Capture Interval"
-	args={{
-		data: [
-			{ category: '0', value: 10 },
-			{ category: '1', value: 20 },
-			{ category: '2', value: 15 },
-			{ category: '3', value: 25 },
-			{ category: '4', value: 30 },
-			{ category: '5', value: 18 },
-			{ category: '6', value: 22 }
-		],
-		xAxisName: 'category',
-		yAxisName: 'Value',
-		height: '400px',
-		captureInterval: 3600
-	}}
+  name="With Capture Interval"
+  args={{
+    data: [
+      { category: '0', value: 10 },
+      { category: '1', value: 20 },
+      { category: '2', value: 15 },
+      { category: '3', value: 25 },
+      { category: '4', value: 30 },
+      { category: '5', value: 18 },
+      { category: '6', value: 22 },
+    ],
+    xAxisName: 'category',
+    yAxisName: 'Value',
+    height: '400px',
+    captureInterval: 3600,
+  }}
 />
 
 <Story
-	name="With Capture Interval - Short Duration"
-	args={{
-		data: [
-			{ category: '0', value: 10 },
-			{ category: '1', value: 20 },
-			{ category: '2', value: 15 },
-			{ category: '3', value: 25 },
-			{ category: '4', value: 30 },
-			{ category: '5', value: 18 },
-			{ category: '6', value: 22 }
-		],
-		xAxisName: 'category',
-		yAxisName: 'Value',
-		height: '400px',
-		captureInterval: 600
-	}}
+  name="With Capture Interval - Short Duration"
+  args={{
+    data: [
+      { category: '0', value: 10 },
+      { category: '1', value: 20 },
+      { category: '2', value: 15 },
+      { category: '3', value: 25 },
+      { category: '4', value: 30 },
+      { category: '5', value: 18 },
+      { category: '6', value: 22 },
+    ],
+    xAxisName: 'category',
+    yAxisName: 'Value',
+    height: '400px',
+    captureInterval: 600,
+  }}
 />

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

@@ -1,162 +1,162 @@
 <script lang="ts">
-	import { textColor, borderColor, backgroundColor, boxShadow, chartColor } from '../../../tokens';
-	import Chart, { type GenericChartProps } from '../chart/Chart.svelte';
-	import type { EChartsOption, BarSeriesOption } from 'echarts';
-	import { createTooltipFormatter } from '../utils/tooltipFormatter';
-	import { Duration } from 'luxon';
+  import { textColor, borderColor, backgroundColor, boxShadow, chartColor } from '../../../tokens';
+  import Chart, { type GenericChartProps } from '../chart/Chart.svelte';
+  import type { EChartsOption, BarSeriesOption } from 'echarts';
+  import { createTooltipFormatter } from '../utils/tooltipFormatter';
+  import { Duration } from 'luxon';
+  import { formattedDurationCompact } from '../utils/duration';
 
-	type DataItem = {
-		value: number;
-		[key: string]: string | number; // Allows other properties, like the one used for xAxisName
-	};
+  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'];
-		captureInterval?: number;
-	}
+  interface BarChartProps extends Omit<GenericChartProps, 'timeIndex'> {
+    data: DataItem[];
+    colors?: Record<string, string>; // Optional: Color mapping per x-axis category
+    rotateXAxisLabels?: boolean;
+    grid?: EChartsOption['grid'];
+    captureInterval?: number;
+  }
 
-	let {
-		data,
-		colors,
-		rotateXAxisLabels = false,
-		xAxisName,
-		yAxisName,
-		captureInterval,
-		...props
-	}: BarChartProps = $props();
+  let {
+    data,
+    colors,
+    rotateXAxisLabels = false,
+    xAxisName,
+    yAxisName,
+    captureInterval,
+    ...props
+  }: BarChartProps = $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 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(data.map((item) => item[xAxisName]));
+  const xAxisData = $derived(data.map((item) => item[xAxisName]));
 
-	const captureIntervals = captureInterval
-		? Array(data.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 captureIntervals = captureInterval
+    ? Array(data.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 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(() => {
-		const seriesData = data.map((item) => item.value);
-		const seriesColors = data.map(
-			(item, index) =>
-				colors?.[item[xAxisName] as string] ??
-				defaultColorRotationArray[index % defaultColorRotationArray.length]
-		);
+  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 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 formatTooltip = createTooltipFormatter({
+    yAxisName: yAxisName,
+    yAxisUnit: props.yAxisUnit,
+  });
 
-	const options: EChartsOption = $derived.by(() => {
-		return {
-			tooltip: {
-				trigger: 'axis',
-				axisPointer: {
-					type: 'shadow',
-					shadowStyle: {
-						color: backgroundColor['neutral']
-					}
-				},
-				borderWidth: 0,
-				borderRadius: 6,
-				extraCssText: `box-shadow: ${boxShadow.menu}`,
-				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
-		};
-	});
+  const options: EChartsOption = $derived.by(() => {
+    return {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
+          shadowStyle: {
+            color: backgroundColor['neutral'],
+          },
+        },
+        borderWidth: 0,
+        borderRadius: 6,
+        extraCssText: `box-shadow: ${boxShadow.menu}`,
+        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} {xAxisName} {yAxisName} />

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

@@ -1,74 +1,74 @@
 <script lang="ts" context="module">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { textColor } from '../../../tokens';
-	import StackedBarChart from './StackedBarChart.svelte';
+  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 { 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: [100, 132, 101, 134] },
-			{ name: 'Spot', data: [220, 182, 191, 234] },
-			{ name: 'Microbial', data: [150, 232, 201, 154] }
-		]
-	};
+  const stackedChartProps = {
+    xAxisCategories: ['ID 1', 'ID 2', 'ID 3', 'ID 4'],
+    series: [
+      { name: 'Halo', data: [100, 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']
-	};
+  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' }}
+  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'
-	}}
+  name="Custom Colors"
+  args={{
+    ...stackedChartProps,
+    height: '400px',
+    colors: seriesColors,
+    xAxisName: 'ID',
+    yAxisName: 'Count',
+  }}
 />
 
 <Story
-	name="With Capture Interval"
-	args={{
-		xAxisCategories: ['0', '1', '2', '3', '4', '5', '6'],
-		series: [
-			{ name: 'Halo', data: [120, 132, 101, 134, 90, 230, 210] },
-			{ name: 'Spot', data: [220, 182, 191, 234, 290, 330, 310] },
-			{ name: 'Microbial', data: [150, 232, 201, 154, 190, 330, 410] }
-		],
-		height: '400px',
-		xAxisName: 'Time',
-		yAxisName: 'Count',
-		captureInterval: 3600
-	}}
+  name="With Capture Interval"
+  args={{
+    xAxisCategories: ['0', '1', '2', '3', '4', '5', '6'],
+    series: [
+      { name: 'Halo', data: [120, 132, 101, 134, 90, 230, 210] },
+      { name: 'Spot', data: [220, 182, 191, 234, 290, 330, 310] },
+      { name: 'Microbial', data: [150, 232, 201, 154, 190, 330, 410] },
+    ],
+    height: '400px',
+    xAxisName: 'Time',
+    yAxisName: 'Count',
+    captureInterval: 3600,
+  }}
 />
 
 <Story
-	name="With Capture Interval - Short Duration"
-	args={{
-		xAxisCategories: ['0', '1', '2', '3', '4', '5', '6'],
-		series: [
-			{ name: 'Halo', data: [120, 132, 101, 134, 90, 230, 210] },
-			{ name: 'Spot', data: [220, 182, 191, 234, 290, 330, 310] },
-			{ name: 'Microbial', data: [150, 232, 201, 154, 190, 330, 410] }
-		],
-		height: '400px',
-		xAxisName: 'Time',
-		yAxisName: 'Count',
-		captureInterval: 600
-	}}
+  name="With Capture Interval - Short Duration"
+  args={{
+    xAxisCategories: ['0', '1', '2', '3', '4', '5', '6'],
+    series: [
+      { name: 'Halo', data: [120, 132, 101, 134, 90, 230, 210] },
+      { name: 'Spot', data: [220, 182, 191, 234, 290, 330, 310] },
+      { name: 'Microbial', data: [150, 232, 201, 154, 190, 330, 410] },
+    ],
+    height: '400px',
+    xAxisName: 'Time',
+    yAxisName: 'Count',
+    captureInterval: 600,
+  }}
 />