@reshape-biotech/design-system 2.4.2 → 2.5.2

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

@@ -0,0 +1,133 @@
+<script lang="ts" context="module">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Chart from './Chart.svelte';
+  import { colors } from '../../../tokens';
+
+  const { Story } = defineMeta({
+    component: Chart,
+    title: 'Design System/Graphs/Chart',
+    tags: ['autodocs'],
+  });
+</script>
+
+<script lang="ts">
+  const baseOptions = {
+    xAxis: { type: 'value' as const },
+    yAxis: { type: 'value' as const },
+    series: [
+      {
+        type: 'scatter' as const,
+        data: [
+          [10, 8.04],
+          [8.07, 6.95],
+          [13.0, 7.58],
+        ],
+      },
+    ],
+  };
+
+  const defaultProps = {
+    xAxisName: 'Day',
+    yAxisName: 'Value',
+    height: '400px',
+  };
+
+  const lineOptions = {
+    xAxis: { type: 'category' as const, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] },
+    yAxis: { type: 'value' as const },
+    series: [
+      {
+        type: 'line' as const,
+        data: [150, 230, 224, 218, 135],
+      },
+    ],
+  };
+
+  function handleClick(params: any) {
+    console.log('Clicked:', params);
+  }
+</script>
+
+<!-- Basic Usage -->
+<Story name="Default" args={{ options: baseOptions, ...defaultProps }} />
+
+<!-- Custom Size -->
+<Story name="Custom Size" args={{ options: baseOptions, ...defaultProps }} />
+
+<!-- With Events -->
+<Story
+  name="With Click Events"
+  args={{
+    options: baseOptions,
+    ...defaultProps,
+    onitemclick: handleClick,
+    onmouseover: (params) => console.log('Hover:', params),
+  }}
+/>
+
+<!-- Different Chart Types -->
+<Story name="Line Chart" args={{ options: lineOptions, ...defaultProps }} />
+
+<!-- Theme Example -->
+<Story name="Dark Theme" asChild>
+  <div style="background: #333; padding: 20px;">
+    <Chart
+      {...defaultProps}
+      options={{
+        ...baseOptions,
+        backgroundColor: '#333',
+        textStyle: { color: '#fff' },
+      }}
+      theme={{
+        textStyle: { color: '#fff' },
+        color: [colors.blue[5].default],
+      }}
+    />
+  </div>
+</Story>
+
+<!-- Responsive Example -->
+<Story name="Responsive" asChild>
+  <div
+    style="resize: both; overflow: auto; min-width: 300px; min-height: 200px; border: 1px solid #ccc;"
+  >
+    <Chart options={baseOptions} autoResize={true} xAxisName="Day" yAxisName="Value" />
+  </div>
+</Story>
+
+<!-- Multiple Series -->
+<Story name="Multiple Series" asChild>
+  <Chart
+    options={{
+      ...baseOptions,
+      series: [
+        {
+          type: 'scatter' as const,
+          data: [
+            [10, 8.04],
+            [8.07, 6.95],
+            [13.0, 7.58],
+          ],
+          name: 'Series 1',
+        },
+        {
+          type: 'scatter' as const,
+          data: [
+            [9, 7.5],
+            [7.5, 6.3],
+            [12.5, 7.0],
+          ],
+          name: 'Series 2',
+        },
+      ],
+      legend: { data: ['Series 1', 'Series 2'] },
+    }}
+    {...defaultProps}
+  />
+</Story>
+
+<Story name="With Current Location" asChild>
+  <div style="height: 300px; width: 500px;">
+    <Chart options={baseOptions} {...defaultProps} timeIndex={2} />
+  </div>
+</Story>

package/dist/components/graphs/chart/Chart.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Chart from './Chart.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 Chart: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Chart = InstanceType<typeof Chart>;
+export default Chart;

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

@@ -0,0 +1,227 @@
+<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, ids?: (string | number)[], metricName?: string) => void;
+    onmouseover?: (params: ECElementEvent) => void;
+    onmouseout?: () => void;
+    // Additional options
+    autoResize?: boolean;
+    loading?: boolean;
+    timeIndex?: number;
+    children?: Snippet;
+    onChartReady?: (chart: ECharts) => void;
+  };
+
+  export type GenericChartProps = Omit<ChartProps, 'options'>;
+
+  const {
+    options,
+    theme,
+    renderer = 'canvas',
+    height = '100%',
+    width = '100%',
+    onitemclick,
+    onmouseover,
+    onmouseout,
+    autoResize = true,
+    loading = false,
+    timeIndex,
+    children,
+    onChartReady,
+  }: 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,
+      },
+      minInterval: 1,
+      axisLine: {
+        lineStyle: {
+          color: colors.gray[2],
+        },
+      },
+      nameTextStyle: {
+        fontSize: 12,
+        fontFamily: 'af Another Sans',
+        color: textColor.secondary,
+      },
+    },
+    tooltip: {
+      appendTo: document.body,
+    },
+  } 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();
+
+      onChartReady?.(chart);
+    }
+  }
+
+  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 bg-surface"
+>
+  {@render children?.()}
+</div>
+
+<style>
+  .chart-container {
+    position: relative;
+    overflow: visible;
+  }
+</style>

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

@@ -0,0 +1,28 @@
+import type { EChartsOption, ECElementEvent, ECharts } from 'echarts';
+import { type Snippet } from 'svelte';
+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'];
+    onitemclick?: (params: ECElementEvent, ids?: (string | number)[], metricName?: string) => void;
+    onmouseover?: (params: ECElementEvent) => void;
+    onmouseout?: () => void;
+    autoResize?: boolean;
+    loading?: boolean;
+    timeIndex?: number;
+    children?: Snippet;
+    onChartReady?: (chart: ECharts) => void;
+};
+export type GenericChartProps = Omit<ChartProps, 'options'>;
+declare const Chart: import("svelte").Component<ChartProps, {
+    updateOptions: (newOptions: EChartsOption) => void;
+}, "">;
+type Chart = ReturnType<typeof Chart>;
+export default Chart;

package/dist/components/graphs/index.d.ts

@@ -0,0 +1,7 @@
+export { default as Scatterplot } from './scatterplot/Scatterplot.svelte';
+export { default as Chart } from './chart/Chart.svelte';
+export { default as LineChart } from './line/LineChart.svelte';
+export { default as MultiLineChart } from './multiline/MultiLineChart.svelte';
+export { default as Matrix } from './matrix/Matrix.svelte';
+export { default as BarChart } from './bar-chart/BarChart.svelte';
+export { default as StackedBarChart } from './bar-chart/StackedBarChart.svelte';

package/dist/components/graphs/index.js

@@ -0,0 +1,7 @@
+export { default as Scatterplot } from './scatterplot/Scatterplot.svelte';
+export { default as Chart } from './chart/Chart.svelte';
+export { default as LineChart } from './line/LineChart.svelte';
+export { default as MultiLineChart } from './multiline/MultiLineChart.svelte';
+export { default as Matrix } from './matrix/Matrix.svelte';
+export { default as BarChart } from './bar-chart/BarChart.svelte';
+export { default as StackedBarChart } from './bar-chart/StackedBarChart.svelte';

package/dist/components/graphs/line/LineChart.stories.svelte

@@ -0,0 +1,173 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import type { ECElementEvent } from 'echarts';
+  import { within, userEvent } from '@storybook/test';
+  import LineChart from './LineChart.svelte';
+
+  const { Story } = defineMeta({
+    component: LineChart,
+    title: 'Design System/Graphs/LineChart',
+    tags: ['autodocs'],
+  });
+
+  const xAxisName = 'Time';
+  const yAxisName = 'Count';
+
+  const data = [
+    10.0, 8.04, 8.07, 6.95, 13.0, 7.58, 9.05, 8.81, 11.0, 8.33, 14.0, 7.66, 13.4, 6.81, 10.0, 6.33,
+    14.0, 8.96, 12.5, 6.82, 9.15, 7.2, 11.5, 7.2, 3.03, 4.23, 12.2, 7.83, 2.02, 4.47, 1.05, 3.33,
+    4.05, 4.96, 6.03, 7.24, 12.0, 6.26, 12.0, 8.84, 7.08, 5.82, 5.02,
+  ];
+
+  const bigData = Array.from({ length: 1000 }, (_, i) => i);
+
+  function handleItemClick(params: ECElementEvent) {
+    console.log(params);
+  }
+
+  function handleMouseOver(params: ECElementEvent) {
+    console.log(params);
+  }
+
+  function handleMouseOut() {
+    console.log('mouse out');
+  }
+
+  // State for interactive current location story
+  let interactivetimeIndex = $state(3);
+  const interactiveChartData = [10, 8, 13, 7, 9, 6, 11];
+</script>
+
+<Story name="Base" asChild>
+  <div class="h-[400px] w-full">
+    <LineChart
+      {xAxisName}
+      {yAxisName}
+      yAxisUnit="mm²"
+      {data}
+      onitemclick={handleItemClick}
+      onmouseover={handleMouseOver}
+      onmouseout={handleMouseOut}
+    />
+  </div>
+</Story>
+
+<Story name="Large datasets with capture intervals" asChild>
+  <div class="h-[400px] w-full">
+    <LineChart
+      {xAxisName}
+      {yAxisName}
+      data={bigData}
+      onitemclick={handleItemClick}
+      onmouseover={handleMouseOver}
+      onmouseout={handleMouseOut}
+    />
+  </div>
+</Story>
+<Story name="With Area Gradient" asChild>
+  <div class="h-[400px] w-full">
+    <LineChart
+      {xAxisName}
+      {yAxisName}
+      {data}
+      withArea
+      onitemclick={handleItemClick}
+      onmouseover={handleMouseOver}
+      onmouseout={handleMouseOut}
+    />
+  </div>
+</Story>
+<Story name="Custom Color" asChild>
+  <div class="h-[400px] w-full">
+    <LineChart
+      {xAxisName}
+      {yAxisName}
+      {data}
+      color="#e01b5c"
+      onitemclick={handleItemClick}
+      onmouseover={handleMouseOver}
+      onmouseout={handleMouseOut}
+    />
+  </div>
+</Story>
+<Story name="Custom Color with Area" asChild>
+  <div class="h-[400px] w-full">
+    <LineChart
+      {xAxisName}
+      {yAxisName}
+      {data}
+      color="#3ba272"
+      withArea
+      onitemclick={handleItemClick}
+      onmouseover={handleMouseOver}
+      onmouseout={handleMouseOut}
+    />
+  </div>
+</Story>
+<Story name="With Current Location" asChild>
+  <div class="h-[400px] w-full">
+    <LineChart {xAxisName} yAxisName="Value" data={[10, 8, 13, 7, 9, 6, 11]} timeIndex={3} />
+  </div>
+</Story>
+<Story name="With Capture Interval" asChild>
+  <div class="h-[400px] w-full">
+    <LineChart
+      {xAxisName}
+      yAxisName="Value"
+      data={[10, 8, 13, 7, 9, 6, 11, 15, 12, 8, 14, 16]}
+      captureInterval={3600}
+    />
+  </div>
+</Story>
+<Story name="With Capture Interval - Short Duration" asChild>
+  <div class="h-[400px] w-full">
+    <LineChart
+      {xAxisName}
+      yAxisName="Value"
+      data={[10, 8, 13, 7, 9, 6, 11, 15, 12, 8, 14, 16]}
+      captureInterval={600}
+    />
+  </div>
+</Story>
+<Story
+  name="Interactive Current Location"
+  asChild
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Find the input field by its label
+    const input = canvas.getByLabelText('Current Location X:');
+
+    // Clear the input and type a new value
+    await userEvent.clear(input);
+    await userEvent.type(input, '5');
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+
+    await userEvent.clear(input);
+    await userEvent.type(input, '2');
+
+    // Add a small delay to observe the change if running interactively
+    await new Promise((resolve) => setTimeout(resolve, 500));
+  }}
+>
+  <div class="flex h-[450px] w-full flex-col gap-4">
+    <label class="flex items-center gap-2">
+      Current Location X:
+      <input
+        type="number"
+        bind:value={interactivetimeIndex}
+        min="0"
+        max={interactiveChartData.length - 1}
+        class="w-20 rounded border p-1"
+      />
+    </label>
+    <div class="h-full w-full">
+      <LineChart
+        {xAxisName}
+        yAxisName="Value"
+        data={interactiveChartData}
+        timeIndex={interactivetimeIndex}
+      />
+    </div>
+  </div>
+</Story>

package/dist/components/graphs/line/LineChart.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import LineChart from './LineChart.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 LineChart: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type LineChart = InstanceType<typeof LineChart>;
+export default LineChart;