@reshape-biotech/design-system 2.4.1 → 2.4.2

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

@@ -1,263 +0,0 @@
-<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

@@ -1,23 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

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

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

@@ -1,105 +0,0 @@
-<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

@@ -1,19 +0,0 @@
-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;