@reshape-biotech/design-system 1.2.6 → 2.0.0

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

@@ -1,200 +1,200 @@
 <script module lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import type { ECElementEvent } from 'echarts';
-	import MultiLineChart from './MultiLineChart.svelte';
-
-	const { Story } = defineMeta({
-		component: MultiLineChart,
-		title: 'Design System/Graphs/MultiLineChart',
-		tags: ['autodocs']
-	});
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import type { ECElementEvent } from 'echarts';
+  import MultiLineChart from './MultiLineChart.svelte';
+
+  const { Story } = defineMeta({
+    component: MultiLineChart,
+    title: 'Design System/Graphs/MultiLineChart',
+    tags: ['autodocs'],
+  });
 </script>
 
 <script lang="ts">
-	const xAxisName = 'Time';
-	const yAxisName = 'Value';
-
-	const staticSmoothedData1 = [
-		12.333333333333334, 13.5, 14.8, 15.6, 17.4, 19.8, 22.2, 23.6, 25.2, 26.8, 29, 31.6, 33.8, 34.8,
-		36.4, 37.6, 40.2, 42.4, 44.4, 45.6, 46.4, 46.75, 48.25, 49, 49.333333333333336
-	];
-	const staticSmoothedData2 = [
-		7, 8, 8.8, 10.2, 11.8, 13.2, 14.8, 16.2, 17.6, 18.4, 19.2, 20.6, 22.4, 23.6, 24.8, 25.8, 27,
-		27.75, 28.5, 28.5
-	];
-	const staticSmoothedData3 = [
-		22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 62, 64, 66, 68,
-		70, 72, 74, 76, 78, 80, 82, 84, 86, 87, 88
-	];
-
-	const data = [
-		{
-			key: 'Group 1',
-			series: staticSmoothedData1
-		},
-		{
-			key: 'Group 2',
-			series: staticSmoothedData2
-		},
-		{
-			key: 'Group 3',
-			series: staticSmoothedData3
-		}
-	];
-
-	// Use the imported ECElementEvent type
-	function handleItemClick(params: ECElementEvent) {}
-
-	// Use the imported ECElementEvent type
-	function handleMouseOver(params: ECElementEvent) {
-		console.log(params);
-	}
-
-	function handleMouseOut() {}
-
-	const generateHugeDataset = () => {
-		const hugeData = [];
-		for (let i = 1; i <= 96; i++) {
-			const series = [];
-			const baseValue = i * 10;
-			const increment = i * 0.1;
-
-			for (let j = 0; j < 200; j++) {
-				const value = baseValue + j * increment;
-				series.push(Number(value.toFixed(2)));
-			}
-
-			hugeData.push({
-				key: `Series ${i}`,
-				series
-			});
-		}
-		return hugeData;
-	};
-
-	const hugeDataset = generateHugeDataset();
+  const xAxisName = 'Time';
+  const yAxisName = 'Value';
+
+  const staticSmoothedData1 = [
+    12.333333333333334, 13.5, 14.8, 15.6, 17.4, 19.8, 22.2, 23.6, 25.2, 26.8, 29, 31.6, 33.8, 34.8,
+    36.4, 37.6, 40.2, 42.4, 44.4, 45.6, 46.4, 46.75, 48.25, 49, 49.333333333333336,
+  ];
+  const staticSmoothedData2 = [
+    7, 8, 8.8, 10.2, 11.8, 13.2, 14.8, 16.2, 17.6, 18.4, 19.2, 20.6, 22.4, 23.6, 24.8, 25.8, 27,
+    27.75, 28.5, 28.5,
+  ];
+  const staticSmoothedData3 = [
+    22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 62, 64, 66, 68,
+    70, 72, 74, 76, 78, 80, 82, 84, 86, 87, 88,
+  ];
+
+  const data = [
+    {
+      key: 'Group 1',
+      series: staticSmoothedData1,
+    },
+    {
+      key: 'Group 2',
+      series: staticSmoothedData2,
+    },
+    {
+      key: 'Group 3',
+      series: staticSmoothedData3,
+    },
+  ];
+
+  // Use the imported ECElementEvent type
+  function handleItemClick(params: ECElementEvent) {}
+
+  // Use the imported ECElementEvent type
+  function handleMouseOver(params: ECElementEvent) {
+    console.log(params);
+  }
+
+  function handleMouseOut() {}
+
+  const generateHugeDataset = () => {
+    const hugeData = [];
+    for (let i = 1; i <= 96; i++) {
+      const series = [];
+      const baseValue = i * 10;
+      const increment = i * 0.1;
+
+      for (let j = 0; j < 200; j++) {
+        const value = baseValue + j * increment;
+        series.push(Number(value.toFixed(2)));
+      }
+
+      hugeData.push({
+        key: `Series ${i}`,
+        series,
+      });
+    }
+    return hugeData;
+  };
+
+  const hugeDataset = generateHugeDataset();
 </script>
 
 <Story name="Base" asChild>
-	<div class="h-[400px] w-full">
-		<MultiLineChart
-			{xAxisName}
-			{yAxisName}
-			{data}
-			onitemclick={handleItemClick}
-			onmouseover={handleMouseOver}
-			onmouseout={handleMouseOut}
-		/>
-	</div>
+  <div class="h-[400px] w-full">
+    <MultiLineChart
+      {xAxisName}
+      {yAxisName}
+      {data}
+      onitemclick={handleItemClick}
+      onmouseover={handleMouseOver}
+      onmouseout={handleMouseOut}
+    />
+  </div>
 </Story>
 
 <Story name="With Area Gradient" asChild>
-	<div class="h-[400px] w-full">
-		<MultiLineChart
-			{xAxisName}
-			{yAxisName}
-			{data}
-			withArea
-			onitemclick={handleItemClick}
-			onmouseover={handleMouseOver}
-			onmouseout={handleMouseOut}
-		/>
-	</div>
+  <div class="h-[400px] w-full">
+    <MultiLineChart
+      {xAxisName}
+      {yAxisName}
+      {data}
+      withArea
+      onitemclick={handleItemClick}
+      onmouseover={handleMouseOver}
+      onmouseout={handleMouseOut}
+    />
+  </div>
 </Story>
 
 <Story name="Custom Colors" asChild>
-	<div class="h-[400px] w-full">
-		<MultiLineChart
-			{xAxisName}
-			{yAxisName}
-			{data}
-			colors={{
-				'Group 1': '#ff6b6b', // Custom Red
-				'Group 2': '#48dbfb' // Custom Cyan
-			}}
-			onitemclick={handleItemClick}
-			onmouseover={handleMouseOver}
-			onmouseout={handleMouseOut}
-		/>
-	</div>
+  <div class="h-[400px] w-full">
+    <MultiLineChart
+      {xAxisName}
+      {yAxisName}
+      {data}
+      colors={{
+        'Group 1': '#ff6b6b', // Custom Red
+        'Group 2': '#48dbfb', // Custom Cyan
+      }}
+      onitemclick={handleItemClick}
+      onmouseover={handleMouseOver}
+      onmouseout={handleMouseOut}
+    />
+  </div>
 </Story>
 
 <Story name="Custom Colors with Area" asChild>
-	<div class="h-[400px] w-full">
-		<MultiLineChart
-			{xAxisName}
-			{yAxisName}
-			{data}
-			colors={{
-				'Group 1': '#feca57', // Custom Yellow
-				'Group 3': '#1dd1a1' // Custom Teal
-			}}
-			withArea
-			onitemclick={handleItemClick}
-			onmouseover={handleMouseOver}
-			onmouseout={handleMouseOut}
-		/>
-	</div>
+  <div class="h-[400px] w-full">
+    <MultiLineChart
+      {xAxisName}
+      {yAxisName}
+      {data}
+      colors={{
+        'Group 1': '#feca57', // Custom Yellow
+        'Group 3': '#1dd1a1', // Custom Teal
+      }}
+      withArea
+      onitemclick={handleItemClick}
+      onmouseover={handleMouseOver}
+      onmouseout={handleMouseOut}
+    />
+  </div>
 </Story>
 
 <Story name="Without Focus Emphasis" asChild>
-	<div class="h-[400px] w-full">
-		<MultiLineChart
-			{xAxisName}
-			{yAxisName}
-			{data}
-			withFocus={false}
-			onitemclick={handleItemClick}
-			onmouseover={handleMouseOver}
-			onmouseout={handleMouseOut}
-		/>
-	</div>
+  <div class="h-[400px] w-full">
+    <MultiLineChart
+      {xAxisName}
+      {yAxisName}
+      {data}
+      withFocus={false}
+      onitemclick={handleItemClick}
+      onmouseover={handleMouseOver}
+      onmouseout={handleMouseOut}
+    />
+  </div>
 </Story>
 
 <Story name="With Y-Axis Unit" asChild>
-	<div class="h-[400px] w-full">
-		<MultiLineChart
-			{xAxisName}
-			{yAxisName}
-			{data}
-			yAxisUnit="kg"
-			onitemclick={handleItemClick}
-			onmouseover={handleMouseOver}
-			onmouseout={handleMouseOut}
-		/>
-	</div>
+  <div class="h-[400px] w-full">
+    <MultiLineChart
+      {xAxisName}
+      {yAxisName}
+      {data}
+      yAxisUnit="kg"
+      onitemclick={handleItemClick}
+      onmouseover={handleMouseOver}
+      onmouseout={handleMouseOut}
+    />
+  </div>
 </Story>
 
 <Story name="Focus Target" asChild>
-	<div class="h-[400px] w-full">
-		<MultiLineChart
-			{xAxisName}
-			{yAxisName}
-			{data}
-			focusTargetKey="Group 2"
-			onitemclick={handleItemClick}
-			onmouseover={handleMouseOver}
-			onmouseout={handleMouseOut}
-		/>
-	</div>
+  <div class="h-[400px] w-full">
+    <MultiLineChart
+      {xAxisName}
+      {yAxisName}
+      {data}
+      focusTargetKey="Group 2"
+      onitemclick={handleItemClick}
+      onmouseover={handleMouseOver}
+      onmouseout={handleMouseOut}
+    />
+  </div>
 </Story>
 
 <Story name="With Current Location" asChild>
-	<div class="h-[400px] w-full">
-		<MultiLineChart {xAxisName} {yAxisName} {data} timeIndex={15} withFocus />
-	</div>
+  <div class="h-[400px] w-full">
+    <MultiLineChart {xAxisName} {yAxisName} {data} timeIndex={15} withFocus />
+  </div>
 </Story>
 
 <Story name="Huge Dataset" asChild>
-	<div class="h-[400px] w-full">
-		<MultiLineChart
-			{xAxisName}
-			{yAxisName}
-			data={hugeDataset}
-			withFocus={true}
-			onitemclick={handleItemClick}
-			onmouseover={handleMouseOver}
-			onmouseout={handleMouseOut}
-		/>
-	</div>
+  <div class="h-[400px] w-full">
+    <MultiLineChart
+      {xAxisName}
+      {yAxisName}
+      data={hugeDataset}
+      withFocus={true}
+      onitemclick={handleItemClick}
+      onmouseover={handleMouseOver}
+      onmouseout={handleMouseOut}
+    />
+  </div>
 </Story>