@reshape-biotech/design-system 1.2.6 → 2.0.0

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

@@ -1,215 +1,215 @@
 <script lang="ts">
-	import { init } from 'echarts';
-	import type { EChartsOption, ECElementEvent, ECharts, SeriesOption } from 'echarts';
-	import { onMount, type Snippet } from 'svelte';
-	import { colors, textColor } from '../../../tokens';
-
-	type ChartProps = {
-		options: EChartsOption;
-		theme?: string | object;
-		renderer?: 'canvas' | 'svg';
-		height?: string;
-		width?: string;
-		xAxisName?: string;
-		yAxisName?: string;
-		yAxisUnit?: string;
-		xAxisOptions?: EChartsOption['xAxis'];
-		yAxisOptions?: EChartsOption['yAxis'];
-		// Common event handlers
-		onitemclick?: (params: ECElementEvent) => void;
-		onmouseover?: (params: ECElementEvent) => void;
-		onmouseout?: () => void;
-		// Additional options
-		autoResize?: boolean;
-		loading?: boolean;
-		timeIndex?: number;
-		children?: Snippet;
-	};
-
-	export type GenericChartProps = Omit<ChartProps, 'options'>;
-
-	const {
-		options,
-		theme,
-		renderer = 'canvas',
-		height = '100%',
-		width = '100%',
-		onitemclick,
-		onmouseover,
-		onmouseout,
-		autoResize = true,
-		loading = false,
-		timeIndex,
-		children
-	}: ChartProps = $props();
-
-	let chart = $state<ECharts | null>(null);
-	let container: HTMLElement;
-
-	const defaultOptions: EChartsOption = {
-		animation: false,
-		grid: {
-			left: '48px',
-			right: '16px',
-			top: '16px',
-			bottom: '48px'
-		},
-		xAxis: {
-			nameLocation: 'middle',
-			nameGap: 32,
-			axisLabel: {
-				fontSize: 11,
-				fontFamily: 'af Another Sans',
-				lineHeight: 14,
-				align: 'center',
-				color: textColor.secondary,
-				margin: 16
-			},
-			axisLine: {
-				lineStyle: {
-					color: colors.gray[2]
-				}
-			},
-			nameTextStyle: {
-				fontSize: 12,
-				fontFamily: 'af Another Sans',
-				color: textColor.secondary
-			}
-		},
-		yAxis: {
-			nameLocation: 'middle',
-			nameGap: 32,
-			nameRotate: 90,
-			axisLabel: {
-				fontSize: 11,
-				fontFamily: 'af Another Sans',
-				lineHeight: 14,
-				align: 'center',
-				color: textColor.secondary,
-				margin: 16
-			},
-			axisLine: {
-				lineStyle: {
-					color: colors.gray[2]
-				}
-			},
-			nameTextStyle: {
-				fontSize: 12,
-				fontFamily: 'af Another Sans',
-				color: textColor.secondary
-			}
-		}
-	} as const;
-
-	function initChart() {
-		if (container) {
-			chart = init(container, theme, { renderer });
-			chart.setOption(defaultOptions);
-			chart.setOption(options, { notMerge: false });
-			if (onitemclick) chart.on('click', onitemclick);
-			if (onmouseover) chart.on('mouseover', onmouseover);
-			if (onmouseout) chart.on('mouseout', onmouseout);
-
-			if (loading) chart.showLoading();
-		}
-	}
-
-	export function updateOptions(newOptions: EChartsOption) {
-		if (chart) {
-			chart.setOption(newOptions, { notMerge: false });
-		}
-	}
-
-	$effect(() => {
-		if (chart) {
-			chart.setOption(options, { notMerge: false });
-		}
-	});
-
-	// This effect is used to add a mark line to the chart when the timeIndex prop is provided
-	$effect(() => {
-		if (!chart || !timeIndex) return;
-
-		const seriesArray = Array.isArray(options.series)
-			? options.series
-			: options.series
-				? [options.series]
-				: [];
-
-		if (seriesArray.length === 0) return;
-
-		const seriesUpdate: SeriesOption[] = seriesArray.map((s: SeriesOption, index: number) => {
-			let newSeries = { ...s };
-
-			if (index === 0) {
-				if (typeof timeIndex === 'number') {
-					const existingMarkLine =
-						typeof newSeries.markLine === 'object' && newSeries.markLine !== null
-							? newSeries.markLine
-							: {};
-
-					newSeries.markLine = {
-						...existingMarkLine,
-						id: 'currentLocationMarkLine',
-						symbol: ['none', 'none'],
-						silent: true,
-						lineStyle: {
-							color: colors.gray[2],
-							type: 'dashed',
-							width: 1
-						},
-						data: [{ xAxis: timeIndex }],
-						label: {
-							position: 'insideEndTop',
-							show: false
-						}
-					};
-				} else {
-					if (
-						newSeries.markLine &&
-						typeof newSeries.markLine === 'object' &&
-						'id' in newSeries.markLine &&
-						newSeries.markLine.id === 'currentLocationMarkLine'
-					) {
-						delete newSeries.markLine;
-					}
-				}
-			}
-			return newSeries;
-		});
-
-		chart.setOption({ series: seriesUpdate }, { notMerge: false });
-	});
-
-	$effect(() => {
-		if (loading) {
-			chart?.showLoading();
-		} else {
-			chart?.hideLoading();
-		}
-	});
-
-	onMount(() => {
-		initChart();
-
-		if (autoResize) {
-			const resizeObserver = new ResizeObserver(() => chart?.resize());
-			resizeObserver.observe(container);
-			return () => {
-				resizeObserver.disconnect();
-				chart?.dispose();
-			};
-		}
-	});
+  import { init } from 'echarts';
+  import type { EChartsOption, ECElementEvent, ECharts, SeriesOption } from 'echarts';
+  import { onMount, type Snippet } from 'svelte';
+  import { colors, textColor } from '../../../tokens';
+
+  type ChartProps = {
+    options: EChartsOption;
+    theme?: string | object;
+    renderer?: 'canvas' | 'svg';
+    height?: string;
+    width?: string;
+    xAxisName?: string;
+    yAxisName?: string;
+    yAxisUnit?: string;
+    xAxisOptions?: EChartsOption['xAxis'];
+    yAxisOptions?: EChartsOption['yAxis'];
+    // Common event handlers
+    onitemclick?: (params: ECElementEvent) => void;
+    onmouseover?: (params: ECElementEvent) => void;
+    onmouseout?: () => void;
+    // Additional options
+    autoResize?: boolean;
+    loading?: boolean;
+    timeIndex?: number;
+    children?: Snippet;
+  };
+
+  export type GenericChartProps = Omit<ChartProps, 'options'>;
+
+  const {
+    options,
+    theme,
+    renderer = 'canvas',
+    height = '100%',
+    width = '100%',
+    onitemclick,
+    onmouseover,
+    onmouseout,
+    autoResize = true,
+    loading = false,
+    timeIndex,
+    children,
+  }: ChartProps = $props();
+
+  let chart = $state<ECharts | null>(null);
+  let container: HTMLElement;
+
+  const defaultOptions: EChartsOption = {
+    animation: false,
+    grid: {
+      left: '48px',
+      right: '16px',
+      top: '16px',
+      bottom: '48px',
+    },
+    xAxis: {
+      nameLocation: 'middle',
+      nameGap: 32,
+      axisLabel: {
+        fontSize: 11,
+        fontFamily: 'af Another Sans',
+        lineHeight: 14,
+        align: 'center',
+        color: textColor.secondary,
+        margin: 16,
+      },
+      axisLine: {
+        lineStyle: {
+          color: colors.gray[2],
+        },
+      },
+      nameTextStyle: {
+        fontSize: 12,
+        fontFamily: 'af Another Sans',
+        color: textColor.secondary,
+      },
+    },
+    yAxis: {
+      nameLocation: 'middle',
+      nameGap: 32,
+      nameRotate: 90,
+      axisLabel: {
+        fontSize: 11,
+        fontFamily: 'af Another Sans',
+        lineHeight: 14,
+        align: 'center',
+        color: textColor.secondary,
+        margin: 16,
+      },
+      axisLine: {
+        lineStyle: {
+          color: colors.gray[2],
+        },
+      },
+      nameTextStyle: {
+        fontSize: 12,
+        fontFamily: 'af Another Sans',
+        color: textColor.secondary,
+      },
+    },
+  } as const;
+
+  function initChart() {
+    if (container) {
+      chart = init(container, theme, { renderer });
+      chart.setOption(defaultOptions);
+      chart.setOption(options, { notMerge: false });
+      if (onitemclick) chart.on('click', onitemclick);
+      if (onmouseover) chart.on('mouseover', onmouseover);
+      if (onmouseout) chart.on('mouseout', onmouseout);
+
+      if (loading) chart.showLoading();
+    }
+  }
+
+  export function updateOptions(newOptions: EChartsOption) {
+    if (chart) {
+      chart.setOption(newOptions, { notMerge: false });
+    }
+  }
+
+  $effect(() => {
+    if (chart) {
+      chart.setOption(options, { notMerge: false });
+    }
+  });
+
+  // This effect is used to add a mark line to the chart when the timeIndex prop is provided
+  $effect(() => {
+    if (!chart || !timeIndex) return;
+
+    const seriesArray = Array.isArray(options.series)
+      ? options.series
+      : options.series
+        ? [options.series]
+        : [];
+
+    if (seriesArray.length === 0) return;
+
+    const seriesUpdate: SeriesOption[] = seriesArray.map((s: SeriesOption, index: number) => {
+      let newSeries = { ...s };
+
+      if (index === 0) {
+        if (typeof timeIndex === 'number') {
+          const existingMarkLine =
+            typeof newSeries.markLine === 'object' && newSeries.markLine !== null
+              ? newSeries.markLine
+              : {};
+
+          newSeries.markLine = {
+            ...existingMarkLine,
+            id: 'currentLocationMarkLine',
+            symbol: ['none', 'none'],
+            silent: true,
+            lineStyle: {
+              color: colors.gray[2],
+              type: 'dashed',
+              width: 1,
+            },
+            data: [{ xAxis: timeIndex }],
+            label: {
+              position: 'insideEndTop',
+              show: false,
+            },
+          };
+        } else {
+          if (
+            newSeries.markLine &&
+            typeof newSeries.markLine === 'object' &&
+            'id' in newSeries.markLine &&
+            newSeries.markLine.id === 'currentLocationMarkLine'
+          ) {
+            delete newSeries.markLine;
+          }
+        }
+      }
+      return newSeries;
+    });
+
+    chart.setOption({ series: seriesUpdate }, { notMerge: false });
+  });
+
+  $effect(() => {
+    if (loading) {
+      chart?.showLoading();
+    } else {
+      chart?.hideLoading();
+    }
+  });
+
+  onMount(() => {
+    initChart();
+
+    if (autoResize) {
+      const resizeObserver = new ResizeObserver(() => chart?.resize());
+      resizeObserver.observe(container);
+      return () => {
+        resizeObserver.disconnect();
+        chart?.dispose();
+      };
+    }
+  });
 </script>
 
 <div bind:this={container} style="width: {width}; height: {height};" class="chart-container">
-	{@render children?.()}
+  {@render children?.()}
 </div>
 
 <style>
-	.chart-container {
-		position: relative;
-		overflow: visible;
-	}
+  .chart-container {
+    position: relative;
+    overflow: visible;
+  }
 </style>