@reshape-biotech/design-system 2.4.2 → 2.5.2

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

@@ -0,0 +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'],
+  });
+</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();
+</script>
+
+<Story name="Base" asChild>
+  <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>
+</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>
+</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>
+</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>
+</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>
+</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>
+</Story>
+
+<Story name="With Current Location" asChild>
+  <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>
+</Story>

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

@@ -0,0 +1,19 @@
+import MultiLineChart from './MultiLineChart.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const MultiLineChart: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type MultiLineChart = InstanceType<typeof MultiLineChart>;
+export default MultiLineChart;

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

@@ -0,0 +1,263 @@
+<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 { 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'];
+    additionalSeries?: EChartsOption['series'][];
+    graphic?: EChartsOption['graphic'];
+    tooltipFormatter?: (params: any) => string;
+    shouldDim?: (selected: string) => boolean;
+  }
+
+  let {
+    data,
+    xAxisName,
+    yAxisName,
+    withArea = false,
+    colors,
+    withFocus = true,
+    focusTargetKey,
+    sumYAxis = true,
+    captureInterval,
+    additionalSeries,
+    graphic,
+    tooltipFormatter,
+    shouldDim = () => false,
+    ...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,
+    }) ?? '';
+
+  const seriesData = $derived.by(() => {
+    const mainSeries = 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 = shouldDim(group.key) ? 0.3 : isBlurred ? 0.25 : 1;
+      const areaOpacityBase = shouldDim(group.key) || 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,
+      };
+    });
+
+    if (additionalSeries) {
+      const flattenedAdditional = additionalSeries
+        .flat()
+        .filter((series): series is LineSeriesOption => series != null);
+      return [...mainSeries, ...flattenedAdditional];
+    }
+
+    return mainSeries;
+  });
+
+  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:
+        tooltipFormatter ||
+        createTooltipFormatter({
+          yAxisName,
+          yAxisUnit: props.yAxisUnit ?? undefined,
+          focusedSeriesAccessor: () => focusedSeries,
+          getSeriesColor,
+          maxSeriesToShow: 6,
+        }),
+    },
+    series: seriesData,
+    ...(graphic ? { graphic } : {}),
+  }));
+</script>
+
+<Chart
+  {options}
+  {...{
+    ...props,
+    xAxisName,
+    yAxisName,
+    onmouseover: handleMouseOver,
+    onmouseout: handleMouseOut,
+  }}
+/>

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

@@ -0,0 +1,23 @@
+import { type GenericChartProps } from '../chart/Chart.svelte';
+import type { EChartsOption } from 'echarts';
+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'];
+    additionalSeries?: EChartsOption['series'][];
+    graphic?: EChartsOption['graphic'];
+    tooltipFormatter?: (params: any) => string;
+    shouldDim?: (selected: string) => boolean;
+}
+declare const MultiLineChart: import("svelte").Component<MultiLineChartProps, {}, "">;
+type MultiLineChart = ReturnType<typeof MultiLineChart>;
+export default MultiLineChart;

package/dist/components/graphs/multiline/types.d.ts

@@ -0,0 +1,20 @@
+import type { EChartsOption } from 'echarts';
+import type { GenericChartProps } from '../chart/Chart.svelte';
+interface Groups {
+    key: string;
+    series: (number | null)[];
+}
+export interface MultiLineChartProps extends GenericChartProps {
+    data: Groups[];
+    withArea?: boolean;
+    colors?: Record<string, string>;
+    withFocus?: boolean;
+    focusTargetKey?: string;
+    sumYAxis?: boolean;
+    captureInterval?: number;
+    grid?: EChartsOption['grid'];
+    additionalSeries?: EChartsOption['series'][];
+    graphic?: EChartsOption['graphic'];
+    tooltipFormatter?: (params: any) => string;
+}
+export {};

package/dist/components/graphs/multiline/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/graphs/scatterplot/Scatterplot.stories.svelte

@@ -0,0 +1,105 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Scatterplot from './Scatterplot.svelte';
+  import type { DataPoint } from './Scatterplot.svelte';
+
+  const { Story } = defineMeta({
+    component: Scatterplot,
+    title: 'Design System/Graphs/Scatterplot',
+    tags: ['autodocs'],
+  });
+
+  const data: DataPoint[] = [
+    { value: [10.0, 8.04], metadata: { blip: '1', blop: 1, user_id: '1' } },
+    { value: [8.07, 6.95], metadata: { blip: '2', blop: 2, user_id: '2' } },
+    { value: [13.0, 7.58], metadata: { blip: '3', blop: 3, user_id: '3' } },
+    { value: [9.05, 8.81], metadata: { blip: '4', blop: 4, user_id: '4' } },
+    { value: [12.0, 8.33], metadata: { blip: '5', blop: 5, user_id: '5' } },
+    { value: [14.0, 7.66], metadata: { blip: '6', blop: 6, user_id: '6' } },
+  ];
+
+  const errorBarsData: DataPoint[] = data.map((d) => ({
+    ...d,
+    error_value: 1.5,
+  }));
+
+  const lineData: [[number, number], [number, number]] = [
+    [0, 2],
+    [12, 14],
+  ];
+
+  function handleItemClick(params: echarts.ECElementEvent) {}
+
+  function handleMouseOver(params: echarts.ECElementEvent) {}
+
+  function handleMouseOut() {}
+</script>
+
+<Story name="Base" asChild>
+  <div class="h-[400px] w-full">
+    <Scatterplot
+      {data}
+      xAxisName="Manual count"
+      yAxisName="Analysis count"
+      onitemclick={handleItemClick}
+      onmouseover={handleMouseOver}
+      onmouseout={handleMouseOut}
+    />
+  </div>
+</Story>
+
+<Story name="With Line Data" asChild>
+  <div class="h-[400px] w-full">
+    <Scatterplot
+      {data}
+      {lineData}
+      xAxisName="Manual count"
+      yAxisName="Analysis count"
+      onitemclick={handleItemClick}
+      onmouseover={handleMouseOver}
+      onmouseout={handleMouseOut}
+    />
+  </div>
+</Story>
+<Story name="Error bars" asChild>
+  <div class="h-[400px] w-full">
+    <Scatterplot
+      data={errorBarsData}
+      {lineData}
+      xAxisName="Manual count"
+      yAxisName="Analysis count"
+      onitemclick={handleItemClick}
+      onmouseover={handleMouseOver}
+      onmouseout={handleMouseOut}
+    />
+  </div>
+</Story>
+<Story name="Error bars with confidence band" asChild>
+  <div class="h-[400px] w-full">
+    <Scatterplot
+      data={errorBarsData}
+      {lineData}
+      xAxisName="Manual count"
+      yAxisName="Analysis count"
+      showConfidenceBand
+      onitemclick={handleItemClick}
+      onmouseover={handleMouseOver}
+      onmouseout={handleMouseOut}
+    />
+  </div>
+</Story>
+<Story name="Confidence band and legend" asChild>
+  <div class="h-[400px] w-full">
+    <Scatterplot
+      {data}
+      {lineData}
+      xAxisName="Manual count"
+      yAxisName="Analysis count"
+      showConfidenceBand
+      showLegend
+      onitemclick={handleItemClick}
+      onmouseover={handleMouseOver}
+      onmouseout={handleMouseOut}
+    />
+  </div>
+</Story>

package/dist/components/graphs/scatterplot/Scatterplot.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Scatterplot from './Scatterplot.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Scatterplot: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Scatterplot = InstanceType<typeof Scatterplot>;
+export default Scatterplot;