@reshape-biotech/design-system 1.2.6 → 1.2.7

package/dist/components/graphs/line/LineChart.stories.svelte

@@ -1,173 +1,173 @@
 <script module lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import type { ECElementEvent } from 'echarts';
-	import { within, userEvent } from '@storybook/test';
-	import LineChart from './LineChart.svelte';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import type { ECElementEvent } from 'echarts';
+  import { within, userEvent } from '@storybook/test';
+  import LineChart from './LineChart.svelte';
 
-	const { Story } = defineMeta({
-		component: LineChart,
-		title: 'Design System/Graphs/LineChart',
-		tags: ['autodocs']
-	});
+  const { Story } = defineMeta({
+    component: LineChart,
+    title: 'Design System/Graphs/LineChart',
+    tags: ['autodocs'],
+  });
 
-	const xAxisName = 'Time';
-	const yAxisName = 'Count';
+  const xAxisName = 'Time';
+  const yAxisName = 'Count';
 
-	const data = [
-		10.0, 8.04, 8.07, 6.95, 13.0, 7.58, 9.05, 8.81, 11.0, 8.33, 14.0, 7.66, 13.4, 6.81, 10.0, 6.33,
-		14.0, 8.96, 12.5, 6.82, 9.15, 7.2, 11.5, 7.2, 3.03, 4.23, 12.2, 7.83, 2.02, 4.47, 1.05, 3.33,
-		4.05, 4.96, 6.03, 7.24, 12.0, 6.26, 12.0, 8.84, 7.08, 5.82, 5.02
-	];
+  const data = [
+    10.0, 8.04, 8.07, 6.95, 13.0, 7.58, 9.05, 8.81, 11.0, 8.33, 14.0, 7.66, 13.4, 6.81, 10.0, 6.33,
+    14.0, 8.96, 12.5, 6.82, 9.15, 7.2, 11.5, 7.2, 3.03, 4.23, 12.2, 7.83, 2.02, 4.47, 1.05, 3.33,
+    4.05, 4.96, 6.03, 7.24, 12.0, 6.26, 12.0, 8.84, 7.08, 5.82, 5.02,
+  ];
 
-	const bigData = Array.from({ length: 1000 }, (_, i) => i);
+  const bigData = Array.from({ length: 1000 }, (_, i) => i);
 
-	function handleItemClick(params: ECElementEvent) {
-		console.log(params);
-	}
+  function handleItemClick(params: ECElementEvent) {
+    console.log(params);
+  }
 
-	function handleMouseOver(params: ECElementEvent) {
-		console.log(params);
-	}
+  function handleMouseOver(params: ECElementEvent) {
+    console.log(params);
+  }
 
-	function handleMouseOut() {
-		console.log('mouse out');
-	}
+  function handleMouseOut() {
+    console.log('mouse out');
+  }
 
-	// State for interactive current location story
-	let interactivetimeIndex = $state(3);
-	const interactiveChartData = [10, 8, 13, 7, 9, 6, 11];
+  // State for interactive current location story
+  let interactivetimeIndex = $state(3);
+  const interactiveChartData = [10, 8, 13, 7, 9, 6, 11];
 </script>
 
 <Story name="Base" asChild>
-	<div class="h-[400px] w-full">
-		<LineChart
-			{xAxisName}
-			{yAxisName}
-			yAxisUnit="mm²"
-			{data}
-			onitemclick={handleItemClick}
-			onmouseover={handleMouseOver}
-			onmouseout={handleMouseOut}
-		/>
-	</div>
+  <div class="h-[400px] w-full">
+    <LineChart
+      {xAxisName}
+      {yAxisName}
+      yAxisUnit="mm²"
+      {data}
+      onitemclick={handleItemClick}
+      onmouseover={handleMouseOver}
+      onmouseout={handleMouseOut}
+    />
+  </div>
 </Story>
 
 <Story name="Large datasets with capture intervals" asChild>
-	<div class="h-[400px] w-full">
-		<LineChart
-			{xAxisName}
-			{yAxisName}
-			data={bigData}
-			onitemclick={handleItemClick}
-			onmouseover={handleMouseOver}
-			onmouseout={handleMouseOut}
-		/>
-	</div>
+  <div class="h-[400px] w-full">
+    <LineChart
+      {xAxisName}
+      {yAxisName}
+      data={bigData}
+      onitemclick={handleItemClick}
+      onmouseover={handleMouseOver}
+      onmouseout={handleMouseOut}
+    />
+  </div>
 </Story>
 <Story name="With Area Gradient" asChild>
-	<div class="h-[400px] w-full">
-		<LineChart
-			{xAxisName}
-			{yAxisName}
-			{data}
-			withArea
-			onitemclick={handleItemClick}
-			onmouseover={handleMouseOver}
-			onmouseout={handleMouseOut}
-		/>
-	</div>
+  <div class="h-[400px] w-full">
+    <LineChart
+      {xAxisName}
+      {yAxisName}
+      {data}
+      withArea
+      onitemclick={handleItemClick}
+      onmouseover={handleMouseOver}
+      onmouseout={handleMouseOut}
+    />
+  </div>
 </Story>
 <Story name="Custom Color" asChild>
-	<div class="h-[400px] w-full">
-		<LineChart
-			{xAxisName}
-			{yAxisName}
-			{data}
-			color="#e01b5c"
-			onitemclick={handleItemClick}
-			onmouseover={handleMouseOver}
-			onmouseout={handleMouseOut}
-		/>
-	</div>
+  <div class="h-[400px] w-full">
+    <LineChart
+      {xAxisName}
+      {yAxisName}
+      {data}
+      color="#e01b5c"
+      onitemclick={handleItemClick}
+      onmouseover={handleMouseOver}
+      onmouseout={handleMouseOut}
+    />
+  </div>
 </Story>
 <Story name="Custom Color with Area" asChild>
-	<div class="h-[400px] w-full">
-		<LineChart
-			{xAxisName}
-			{yAxisName}
-			{data}
-			color="#3ba272"
-			withArea
-			onitemclick={handleItemClick}
-			onmouseover={handleMouseOver}
-			onmouseout={handleMouseOut}
-		/>
-	</div>
+  <div class="h-[400px] w-full">
+    <LineChart
+      {xAxisName}
+      {yAxisName}
+      {data}
+      color="#3ba272"
+      withArea
+      onitemclick={handleItemClick}
+      onmouseover={handleMouseOver}
+      onmouseout={handleMouseOut}
+    />
+  </div>
 </Story>
 <Story name="With Current Location" asChild>
-	<div class="h-[400px] w-full">
-		<LineChart {xAxisName} yAxisName="Value" data={[10, 8, 13, 7, 9, 6, 11]} timeIndex={3} />
-	</div>
+  <div class="h-[400px] w-full">
+    <LineChart {xAxisName} yAxisName="Value" data={[10, 8, 13, 7, 9, 6, 11]} timeIndex={3} />
+  </div>
 </Story>
 <Story name="With Capture Interval" asChild>
-	<div class="h-[400px] w-full">
-		<LineChart
-			{xAxisName}
-			yAxisName="Value"
-			data={[10, 8, 13, 7, 9, 6, 11, 15, 12, 8, 14, 16]}
-			captureInterval={3600}
-		/>
-	</div>
+  <div class="h-[400px] w-full">
+    <LineChart
+      {xAxisName}
+      yAxisName="Value"
+      data={[10, 8, 13, 7, 9, 6, 11, 15, 12, 8, 14, 16]}
+      captureInterval={3600}
+    />
+  </div>
 </Story>
 <Story name="With Capture Interval - Short Duration" asChild>
-	<div class="h-[400px] w-full">
-		<LineChart
-			{xAxisName}
-			yAxisName="Value"
-			data={[10, 8, 13, 7, 9, 6, 11, 15, 12, 8, 14, 16]}
-			captureInterval={600}
-		/>
-	</div>
+  <div class="h-[400px] w-full">
+    <LineChart
+      {xAxisName}
+      yAxisName="Value"
+      data={[10, 8, 13, 7, 9, 6, 11, 15, 12, 8, 14, 16]}
+      captureInterval={600}
+    />
+  </div>
 </Story>
 <Story
-	name="Interactive Current Location"
-	asChild
-	play={async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
+  name="Interactive Current Location"
+  asChild
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
 
-		// Find the input field by its label
-		const input = canvas.getByLabelText('Current Location X:');
+    // Find the input field by its label
+    const input = canvas.getByLabelText('Current Location X:');
 
-		// Clear the input and type a new value
-		await userEvent.clear(input);
-		await userEvent.type(input, '5');
-		await new Promise((resolve) => setTimeout(resolve, 1000));
+    // Clear the input and type a new value
+    await userEvent.clear(input);
+    await userEvent.type(input, '5');
+    await new Promise((resolve) => setTimeout(resolve, 1000));
 
-		await userEvent.clear(input);
-		await userEvent.type(input, '2');
+    await userEvent.clear(input);
+    await userEvent.type(input, '2');
 
-		// Add a small delay to observe the change if running interactively
-		await new Promise((resolve) => setTimeout(resolve, 500));
-	}}
+    // Add a small delay to observe the change if running interactively
+    await new Promise((resolve) => setTimeout(resolve, 500));
+  }}
 >
-	<div class="flex h-[450px] w-full flex-col gap-4">
-		<label class="flex items-center gap-2">
-			Current Location X:
-			<input
-				type="number"
-				bind:value={interactivetimeIndex}
-				min="0"
-				max={interactiveChartData.length - 1}
-				class="w-20 rounded border p-1"
-			/>
-		</label>
-		<div class="h-full w-full">
-			<LineChart
-				{xAxisName}
-				yAxisName="Value"
-				data={interactiveChartData}
-				timeIndex={interactivetimeIndex}
-			/>
-		</div>
-	</div>
+  <div class="flex h-[450px] w-full flex-col gap-4">
+    <label class="flex items-center gap-2">
+      Current Location X:
+      <input
+        type="number"
+        bind:value={interactivetimeIndex}
+        min="0"
+        max={interactiveChartData.length - 1}
+        class="w-20 rounded border p-1"
+      />
+    </label>
+    <div class="h-full w-full">
+      <LineChart
+        {xAxisName}
+        yAxisName="Value"
+        data={interactiveChartData}
+        timeIndex={interactivetimeIndex}
+      />
+    </div>
+  </div>
 </Story>

package/dist/components/graphs/line/LineChart.svelte

@@ -1,153 +1,151 @@
 <script lang="ts">
-	import { textColor, borderColor, chartColor, boxShadow } from '../../../tokens';
-	import Chart from '../chart/Chart.svelte';
-	import type { EChartsOption } from 'echarts';
-	import * as echarts from 'echarts/core';
-	import type { GenericChartProps } from '../chart/Chart.svelte';
-	import { createTooltipFormatter } from '../utils/tooltipFormatter';
-	import { Duration } from 'luxon';
+  import { textColor, borderColor, chartColor, boxShadow } from '../../../tokens';
+  import Chart from '../chart/Chart.svelte';
+  import type { EChartsOption } from 'echarts';
+  import * as echarts from 'echarts/core';
+  import type { GenericChartProps } from '../chart/Chart.svelte';
+  import { createTooltipFormatter } from '../utils/tooltipFormatter';
+  import { formattedDurationCompact } from '../utils/duration';
 
-	interface LineChartProps extends GenericChartProps {
-		data: (number | null)[];
-		withArea?: boolean;
-		color?: string;
-		grid?: EChartsOption['grid'];
-		captureInterval?: number;
-	}
+  interface LineChartProps extends GenericChartProps {
+    data: (number | null)[];
+    withArea?: boolean;
+    color?: string;
+    grid?: EChartsOption['grid'];
+    captureInterval?: number;
+  }
 
-	let {
-		data,
-		xAxisName,
-		yAxisName,
-		withArea = false,
-		color = chartColor['accent'],
-		captureInterval,
-		...props
-	}: LineChartProps = $props();
+  let {
+    data,
+    xAxisName,
+    yAxisName,
+    withArea = false,
+    color = chartColor['accent'],
+    captureInterval,
+    ...props
+  }: LineChartProps = $props();
 
-	const formatTooltip = createTooltipFormatter({
-		yAxisName: yAxisName,
-		yAxisUnit: props.yAxisUnit
-	});
+  const formatTooltip = createTooltipFormatter({
+    yAxisName: yAxisName,
+    yAxisUnit: props.yAxisUnit,
+  });
 
-	const toFixedLocaleString = (
-		value?: number | undefined,
-		fractionDigits: number | undefined = 0,
-		locale: string | undefined = undefined
-	): string =>
-		value?.toLocaleString(locale, {
-			minimumFractionDigits: fractionDigits,
-			maximumFractionDigits: fractionDigits
-		}) ?? '';
+  const toFixedLocaleString = (
+    value?: number | undefined,
+    fractionDigits: number | undefined = 0,
+    locale: string | undefined = undefined
+  ): string =>
+    value?.toLocaleString(locale, {
+      minimumFractionDigits: fractionDigits,
+      maximumFractionDigits: fractionDigits,
+    }) ?? '';
 
-	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;
 
-	let options: EChartsOption = $derived({
-		grid: {
-			containLabel: true,
-			left: 0,
-			right: 16,
-			bottom: 16,
-			top: 16
-		},
-		textStyle: {
-			color: textColor['secondary'],
-			fontFamily: 'af Another Sans'
-		},
-		xAxis: {
-			type: 'category',
-			boundaryGap: false,
-			axisLabel: {
-				fontSize: 11
-			},
-			axisLine: {
-				onZero: false,
-				lineStyle: {
-					color: borderColor['axis']
-				}
-			},
-			data: captureIntervals,
-			...props.xAxisOptions
-		} as any as EChartsOption['xAxis'],
-		yAxis: {
-			type: 'value',
-			alignTicks: true,
-			axisLabel: {
-				formatter: (value: any) => value.toLocaleString()
-			} as any,
-			axisPointer: {
-				label: {
-					formatter: (value: any) => toFixedLocaleString(value.value, 2)
-				}
-			},
-			splitLine: {
-				lineStyle: {
-					color: borderColor['input'],
-					type: 'dashed'
-				}
-			},
-			...props.yAxisOptions
-		},
-		selectedMode: 'multiple',
-		series: {
-			type: 'line',
-			symbol: 'circle',
-			name: yAxisName,
-			symbolSize: 1,
-			data: data,
-			lineStyle: {
-				color: color
-			},
-			itemStyle: {
-				color: color
-			},
-			areaStyle: withArea
-				? {
-						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-							{
-								offset: 0,
-								color: echarts.color.modifyAlpha(color, 0.2)
-							},
-							{
-								offset: 1,
-								color: echarts.color.modifyAlpha(color, 0)
-							}
-						])
-					}
-				: undefined
-		},
-		tooltip: {
-			axisPointer: {
-				type: 'line',
-				z: 0,
-				lineStyle: {
-					type: 'solid',
-					color: borderColor['axis']
-				}
-			},
-			trigger: 'axis',
-			borderWidth: 0,
-			borderRadius: 6,
-			extraCssText: `box-shadow: ${boxShadow.menu}`,
-			formatter: formatTooltip
-		}
-	});
-	console.log('LineChart options:', options);
+  let options: EChartsOption = $derived({
+    grid: {
+      containLabel: true,
+      left: 0,
+      right: 16,
+      bottom: 16,
+      top: 16,
+    },
+    textStyle: {
+      color: textColor['secondary'],
+      fontFamily: 'af Another Sans',
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      axisLabel: {
+        fontSize: 11,
+      },
+      axisLine: {
+        onZero: false,
+        lineStyle: {
+          color: borderColor['axis'],
+        },
+      },
+      data: captureIntervals,
+      ...props.xAxisOptions,
+    } as any as EChartsOption['xAxis'],
+    yAxis: {
+      type: 'value',
+      alignTicks: true,
+      axisLabel: {
+        formatter: (value: any) => value.toLocaleString(),
+      } as any,
+      axisPointer: {
+        label: {
+          formatter: (value: any) => toFixedLocaleString(value.value, 2),
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          color: borderColor['input'],
+          type: 'dashed',
+        },
+      },
+      ...props.yAxisOptions,
+    },
+    selectedMode: 'multiple',
+    series: {
+      type: 'line',
+      symbol: 'circle',
+      name: yAxisName,
+      symbolSize: 1,
+      data: data,
+      lineStyle: {
+        color: color,
+      },
+      itemStyle: {
+        color: color,
+      },
+      areaStyle: withArea
+        ? {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: echarts.color.modifyAlpha(color, 0.2),
+              },
+              {
+                offset: 1,
+                color: echarts.color.modifyAlpha(color, 0),
+              },
+            ]),
+          }
+        : undefined,
+    },
+    tooltip: {
+      axisPointer: {
+        type: 'line',
+        z: 0,
+        lineStyle: {
+          type: 'solid',
+          color: borderColor['axis'],
+        },
+      },
+      trigger: 'axis',
+      borderWidth: 0,
+      borderRadius: 6,
+      extraCssText: `box-shadow: ${boxShadow.menu}`,
+      formatter: formatTooltip,
+    },
+  });
 </script>
 
 <Chart
-	{options}
-	{...{
-		...props,
-		xAxisName,
-		yAxisName
-	}}
+  {options}
+  {...{
+    ...props,
+    xAxisName,
+    yAxisName,
+  }}
 />