@reshape-biotech/design-system 1.2.6 → 2.0.0

package/dist/components/graphs/multiline/MultiLineChart.svelte

@@ -1,241 +1,241 @@
 <script lang="ts">
-	import { textColor, borderColor, chartColor, boxShadow } from '../../../tokens';
-	import Chart, { type GenericChartProps } from '../chart/Chart.svelte';
-	import type { ECElementEvent, EChartsOption, LineSeriesOption } from 'echarts';
-	import * as echarts from 'echarts/core';
-	import { createTooltipFormatter } from '../utils/tooltipFormatter';
-	import { Duration } from 'luxon';
-
-	interface Groups {
-		key: string;
-		series: (number | null)[];
-	}
-
-	interface MultiLineChartProps extends GenericChartProps {
-		data: Groups[];
-		withArea?: boolean;
-		colors?: Record<string, string>;
-		withFocus?: boolean;
-		focusTargetKey?: string;
-		sumYAxis?: boolean;
-		captureInterval?: number;
-		grid?: EChartsOption['grid'];
-	}
-
-	let {
-		data,
-		xAxisName,
-		yAxisName,
-		withArea = false,
-		colors,
-		withFocus = true,
-		focusTargetKey,
-		sumYAxis = true,
-		captureInterval,
-		...props
-	}: MultiLineChartProps = $props();
-
-	const dataKeyToIndexMap = $derived(new Map(data.map((group, index) => [group.key, index])));
-
-	const longestSeries = data?.reduce(
-		(acc: (number | null)[], group) => (group.series.length > acc.length ? group.series : acc),
-		[]
-	).length;
-
-	const captureIntervals = captureInterval
-		? Array(longestSeries)
-				.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;
-
-	let focusedSeries = $state<string | undefined>(undefined);
-
-	function handleMouseOver(params: ECElementEvent) {
-		focusedSeries = params.seriesName;
-		props.onmouseover?.(params);
-	}
-
-	function handleMouseOut() {
-		focusedSeries = undefined;
-		props.onmouseout?.();
-	}
-
-	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));
-
-	// Helper function to get color (needed for tooltip formatter config)
-	const getSeriesColor = (seriesName: string, seriesIndex: number): string => {
-		if (colors && colors[seriesName]) {
-			return colors[seriesName];
-		}
-		const dataIndex = dataKeyToIndexMap.get(seriesName);
-		if (dataIndex !== undefined) {
-			return defaultColorRotationArray[dataIndex % defaultColorRotationArray.length];
-		}
-		return defaultColorRotationArray[seriesIndex % defaultColorRotationArray.length]; // Fallback based on index
-	};
-
-	const toFixedLocaleString = (
-		value?: number | undefined,
-		fractionDigits: number | undefined = 0,
-		locale: string | undefined = undefined
-	): string =>
-		value?.toLocaleString(locale, {
-			minimumFractionDigits: fractionDigits,
-			maximumFractionDigits: fractionDigits
-		}) ?? '';
-
-	let options: EChartsOption = $derived.by(() => ({
-		grid: {
-			left: 0,
-			right: 16,
-			bottom: 16,
-			top: 16,
-			containLabel: true
-		},
-		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
-		},
-		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',
-		tooltip: {
-			trigger: 'axis',
-			axisPointer: {
-				type: 'line',
-				z: 0,
-				lineStyle: {
-					type: 'solid'
-				}
-			},
-			extraCssText: `box-shadow: ${boxShadow.menu}`,
-			formatter: createTooltipFormatter({
-				yAxisName,
-				yAxisUnit: props.yAxisUnit ?? undefined,
-				focusedSeriesAccessor: () => focusedSeries,
-				getSeriesColor,
-				maxSeriesToShow: 6
-			})
-		},
-		series: data.map((group, index): LineSeriesOption => {
-			const color =
-				colors?.[group.key] ?? defaultColorRotationArray[index % defaultColorRotationArray.length];
-
-			// Determine emphasis based on focusTargetKey or withFocus
-			let emphasisConfig: LineSeriesOption['emphasis'];
-			if (focusTargetKey) {
-				if (group.key === focusTargetKey) {
-					emphasisConfig = { focus: 'series' };
-				} else {
-					emphasisConfig = undefined;
-				}
-			} else if (withFocus) {
-				emphasisConfig = { focus: 'series' };
-			} else {
-				emphasisConfig = undefined;
-			}
-
-			// Determine visual style based on focusTargetKey
-			const isTargeted = focusTargetKey && group.key === focusTargetKey;
-			const isBlurred = focusTargetKey && !isTargeted;
-			const lineOpacity = isBlurred ? 0.25 : 1;
-			const areaOpacityBase = isBlurred ? 0.1 : 0.2; // Lower base opacity for blurred area
-			const areaOpacityEnd = 0;
-
-			return {
-				animation: false,
-				...(emphasisConfig && { emphasis: emphasisConfig }),
-				type: 'line',
-				stack: sumYAxis ? 'total' : undefined,
-				symbol: 'circle',
-				progressive: 300,
-				progressiveThreshold: 1000,
-				symbolSize: 1,
-				data: group.series,
-				triggerLineEvent: true,
-				name: group.key,
-				lineStyle: {
-					color: color,
-					opacity: lineOpacity
-				},
-				itemStyle: {
-					color: color,
-					opacity: lineOpacity // Also apply opacity to item markers if needed
-				},
-				areaStyle: withArea
-					? {
-							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-								{
-									offset: 0,
-									color: echarts.color.modifyAlpha(color, areaOpacityBase)
-								},
-								{
-									offset: 1,
-									color: echarts.color.modifyAlpha(color, areaOpacityEnd)
-								}
-							])
-						}
-					: undefined
-			};
-		})
-	}));
+  import { textColor, borderColor, chartColor, boxShadow } from '../../../tokens';
+  import Chart, { type GenericChartProps } from '../chart/Chart.svelte';
+  import type { ECElementEvent, EChartsOption, LineSeriesOption } from 'echarts';
+  import * as echarts from 'echarts/core';
+  import { createTooltipFormatter } from '../utils/tooltipFormatter';
+  import { Duration } from 'luxon';
+  import { formattedDurationCompact } from '../utils/duration';
+
+  interface Groups {
+    key: string;
+    series: (number | null)[];
+  }
+
+  interface MultiLineChartProps extends GenericChartProps {
+    data: Groups[];
+    withArea?: boolean;
+    colors?: Record<string, string>;
+    withFocus?: boolean;
+    focusTargetKey?: string;
+    sumYAxis?: boolean;
+    captureInterval?: number;
+    grid?: EChartsOption['grid'];
+  }
+
+  let {
+    data,
+    xAxisName,
+    yAxisName,
+    withArea = false,
+    colors,
+    withFocus = true,
+    focusTargetKey,
+    sumYAxis = true,
+    captureInterval,
+    ...props
+  }: MultiLineChartProps = $props();
+
+  const dataKeyToIndexMap = $derived(new Map(data.map((group, index) => [group.key, index])));
+
+  const longestSeries = data?.reduce(
+    (acc: (number | null)[], group) => (group.series.length > acc.length ? group.series : acc),
+    []
+  ).length;
+
+  const captureIntervals = captureInterval
+    ? Array(longestSeries)
+        .fill(null)
+        .map((_, timeIndex) => {
+          const seconds = timeIndex * captureInterval;
+          return formattedDurationCompact(seconds);
+        })
+    : undefined;
+
+  let focusedSeries = $state<string | undefined>(undefined);
+
+  function handleMouseOver(params: ECElementEvent) {
+    focusedSeries = params.seriesName;
+    props.onmouseover?.(params);
+  }
+
+  function handleMouseOut() {
+    focusedSeries = undefined;
+    props.onmouseout?.();
+  }
+
+  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));
+
+  // Helper function to get color (needed for tooltip formatter config)
+  const getSeriesColor = (seriesName: string, seriesIndex: number): string => {
+    if (colors && colors[seriesName]) {
+      return colors[seriesName];
+    }
+    const dataIndex = dataKeyToIndexMap.get(seriesName);
+    if (dataIndex !== undefined) {
+      return defaultColorRotationArray[dataIndex % defaultColorRotationArray.length];
+    }
+    return defaultColorRotationArray[seriesIndex % defaultColorRotationArray.length]; // Fallback based on index
+  };
+
+  const toFixedLocaleString = (
+    value?: number | undefined,
+    fractionDigits: number | undefined = 0,
+    locale: string | undefined = undefined
+  ): string =>
+    value?.toLocaleString(locale, {
+      minimumFractionDigits: fractionDigits,
+      maximumFractionDigits: fractionDigits,
+    }) ?? '';
+
+  let options: EChartsOption = $derived.by(() => ({
+    grid: {
+      left: 0,
+      right: 16,
+      bottom: 16,
+      top: 16,
+      containLabel: true,
+    },
+    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,
+    },
+    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',
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'line',
+        z: 0,
+        lineStyle: {
+          type: 'solid',
+        },
+      },
+      extraCssText: `box-shadow: ${boxShadow.menu}`,
+      formatter: createTooltipFormatter({
+        yAxisName,
+        yAxisUnit: props.yAxisUnit ?? undefined,
+        focusedSeriesAccessor: () => focusedSeries,
+        getSeriesColor,
+        maxSeriesToShow: 6,
+      }),
+    },
+    series: data.map((group, index): LineSeriesOption => {
+      const color =
+        colors?.[group.key] ?? defaultColorRotationArray[index % defaultColorRotationArray.length];
+
+      // Determine emphasis based on focusTargetKey or withFocus
+      let emphasisConfig: LineSeriesOption['emphasis'];
+      if (focusTargetKey) {
+        if (group.key === focusTargetKey) {
+          emphasisConfig = { focus: 'series' };
+        } else {
+          emphasisConfig = undefined;
+        }
+      } else if (withFocus) {
+        emphasisConfig = { focus: 'series' };
+      } else {
+        emphasisConfig = undefined;
+      }
+
+      // Determine visual style based on focusTargetKey
+      const isTargeted = focusTargetKey && group.key === focusTargetKey;
+      const isBlurred = focusTargetKey && !isTargeted;
+      const lineOpacity = isBlurred ? 0.25 : 1;
+      const areaOpacityBase = isBlurred ? 0.1 : 0.2; // Lower base opacity for blurred area
+      const areaOpacityEnd = 0;
+
+      return {
+        animation: false,
+        ...(emphasisConfig && { emphasis: emphasisConfig }),
+        type: 'line',
+        stack: sumYAxis ? 'total' : undefined,
+        symbol: 'circle',
+        progressive: 300,
+        progressiveThreshold: 1000,
+        symbolSize: 1,
+        data: group.series,
+        triggerLineEvent: true,
+        name: group.key,
+        lineStyle: {
+          color: color,
+          opacity: lineOpacity,
+        },
+        itemStyle: {
+          color: color,
+          opacity: lineOpacity, // Also apply opacity to item markers if needed
+        },
+        areaStyle: withArea
+          ? {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: echarts.color.modifyAlpha(color, areaOpacityBase),
+                },
+                {
+                  offset: 1,
+                  color: echarts.color.modifyAlpha(color, areaOpacityEnd),
+                },
+              ]),
+            }
+          : undefined,
+      };
+    }),
+  }));
 </script>
 
 <Chart
-	{options}
-	{...{
-		...props,
-
-		xAxisName,
-		yAxisName,
-		onmouseover: handleMouseOver,
-		onmouseout: handleMouseOut
-	}}
+  {options}
+  {...{
+    ...props,
+
+    xAxisName,
+    yAxisName,
+    onmouseover: handleMouseOver,
+    onmouseout: handleMouseOut,
+  }}
 />