@reshape-biotech/design-system 2.4.2 → 2.5.2

package/dist/components/graphs/bar-chart/BarChart.stories.svelte

@@ -0,0 +1,119 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { textColor } from '../../../tokens';
+  import BarChart from './BarChart.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Design System/Graphs/BarChart',
+    component: BarChart,
+    tags: ['autodocs'],
+    argTypes: {
+      // Define argTypes for props if needed, e.g., for controls
+    },
+  });
+
+  const simpleData = [
+    { category: 'A', value: 10 },
+    { category: 'B', value: 20 },
+    { category: 'C', value: 15 },
+    { category: 'D', value: 25 },
+    { category: 'E', value: 30 },
+  ];
+
+  const longerLabelsData = [
+    { longCategoryName: 'Very Long Label One', value: 45 },
+    { longCategoryName: 'Another Quite Long Label', value: 35 },
+    { longCategoryName: 'Short', value: 55 },
+    { longCategoryName: 'Label Four Is Also Lengthy', value: 25 },
+    { longCategoryName: 'Fifth Label Is Here', value: 65 },
+  ];
+
+  const customColorData = [
+    { category: 'Apple', value: 50 },
+    { category: 'Banana', value: 70 },
+    { category: 'Cherry', value: 60 },
+    { category: 'Date', value: 40 },
+  ];
+
+  const customColors = {
+    Apple: '#ff6b6b', // Red
+    Banana: '#feca57', // Yellow
+    Cherry: '#ff9ff3', // Pink
+    Date: '#a4b0be', // Grey
+  };
+</script>
+
+<Story
+  name="Base"
+  args={{ data: simpleData, xAxisName: 'category', yAxisName: 'Count', height: '400px' }}
+/>
+
+<Story
+  name="Custom Y-Axis Name"
+  args={{ data: simpleData, xAxisName: 'category', yAxisName: 'Units Sold', height: '400px' }}
+/>
+
+<Story
+  name="With Custom Colors"
+  args={{
+    data: customColorData,
+    xAxisName: 'category',
+    yAxisName: 'Fruit Amount',
+    colors: customColors,
+    height: '400px',
+  }}
+/>
+
+<Story
+  name="With Rotated Labels"
+  args={{
+    data: longerLabelsData,
+    xAxisName: 'longCategoryName',
+    yAxisName: 'Measurement',
+    rotateXAxisLabels: true,
+    height: '400px',
+  }}
+/>
+
+<Story
+  name="Empty Data"
+  args={{ data: [], xAxisName: 'category', yAxisName: 'Value', height: '400px' }}
+/>
+
+<Story
+  name="With Capture Interval"
+  args={{
+    data: [
+      { category: '0', value: 10 },
+      { category: '1', value: 20 },
+      { category: '2', value: 15 },
+      { category: '3', value: 25 },
+      { category: '4', value: 30 },
+      { category: '5', value: 18 },
+      { category: '6', value: 22 },
+    ],
+    xAxisName: 'category',
+    yAxisName: 'Value',
+    height: '400px',
+    captureInterval: 3600,
+  }}
+/>
+
+<Story
+  name="With Capture Interval - Short Duration"
+  args={{
+    data: [
+      { category: '0', value: 10 },
+      { category: '1', value: 20 },
+      { category: '2', value: 15 },
+      { category: '3', value: 25 },
+      { category: '4', value: 30 },
+      { category: '5', value: 18 },
+      { category: '6', value: 22 },
+    ],
+    xAxisName: 'category',
+    yAxisName: 'Value',
+    height: '400px',
+    captureInterval: 600,
+  }}
+/>

package/dist/components/graphs/bar-chart/BarChart.stories.svelte.d.ts

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

package/dist/components/graphs/bar-chart/BarChart.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+  import { textColor, borderColor, backgroundColor, boxShadow, chartColor } from '../../../tokens';
+  import Chart, { type GenericChartProps } from '../chart/Chart.svelte';
+  import type { EChartsOption, BarSeriesOption } from 'echarts';
+  import { createTooltipFormatter } from '../utils/tooltipFormatter';
+  import { formattedDurationCompact } from '../utils/duration';
+
+  type DataItem = {
+    value: number;
+    [key: string]: string | number; // Allows other properties, like the one used for xAxisName
+  };
+
+  interface BarChartProps extends Omit<GenericChartProps, 'timeIndex'> {
+    data: DataItem[];
+    colors?: Record<string, string>; // Optional: Color mapping per x-axis category
+    rotateXAxisLabels?: boolean;
+    grid?: EChartsOption['grid'];
+    captureInterval?: number;
+    shouldDim?: (key: string) => boolean;
+  }
+
+  let {
+    data,
+    colors,
+    rotateXAxisLabels = false,
+    xAxisName,
+    yAxisName,
+    captureInterval,
+    shouldDim = () => false,
+
+    ...props
+  }: BarChartProps = $props();
+
+  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));
+
+  const xAxisData = $derived(data.map((item) => item[xAxisName!]));
+
+  const captureIntervals = captureInterval
+    ? Array(data.length)
+        .fill(null)
+        .map((_, timeIndex) => {
+          const seconds = timeIndex * captureInterval;
+          return formattedDurationCompact(seconds);
+        })
+    : undefined;
+
+  const createBarDataItem = (value: number | null, color: string, key: string) => {
+    return {
+      value,
+      itemStyle: {
+        color,
+        borderRadius: 2,
+        borderWidth: 0.5,
+        borderColor: borderColor['white'],
+        opacity: shouldDim(key) ? 0.3 : 1,
+      },
+      emphasis: {
+        disabled: true,
+      },
+    };
+  };
+
+  const chartSeries: BarSeriesOption[] = $derived.by(() => {
+    const seriesData = data.map((item) => item.value);
+    const seriesColors = data.map(
+      (item, index) =>
+        colors?.[item[xAxisName!] as string] ??
+        defaultColorRotationArray[index % defaultColorRotationArray.length]
+    );
+
+    const singleSeries: BarSeriesOption[] = [
+      {
+        name: yAxisName,
+        type: 'bar',
+        data: seriesData.map((value, index) =>
+          createBarDataItem(value, seriesColors[index], String(data[index][xAxisName!]))
+        ),
+        emphasis: { disabled: true },
+      },
+    ];
+    return singleSeries;
+  });
+
+  const formatTooltip = createTooltipFormatter({
+    yAxisName: yAxisName,
+    yAxisUnit: props.yAxisUnit,
+  });
+
+  const options: EChartsOption = $derived.by(() => {
+    return {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
+          shadowStyle: {
+            color: backgroundColor['neutral'],
+          },
+        },
+        borderWidth: 0,
+        borderRadius: 6,
+        extraCssText: `box-shadow: ${boxShadow.menu}`,
+        formatter: formatTooltip,
+      },
+      grid: {
+        containLabel: true,
+        left: 0,
+        right: 16,
+        bottom: 16,
+        top: 16,
+      },
+      xAxis: {
+        type: 'category',
+        data: captureIntervals || xAxisData,
+        axisTick: {
+          show: false,
+          alignWithLabel: true,
+        },
+        axisLabel: {
+          fontSize: 11,
+          color: textColor['secondary'],
+          show: true,
+          ...(rotateXAxisLabels
+            ? { rotate: 90, overflow: 'break', width: 60, padding: [0, 40, 0, 0] }
+            : { rotate: 0, overflow: 'truncate', ellipsis: '...', width: 80 }),
+        },
+        axisLine: {
+          lineStyle: {
+            color: borderColor['axis'],
+          },
+        },
+      },
+      yAxis: {
+        type: 'value',
+        axisLabel: {
+          fontSize: 11,
+          color: textColor['secondary'],
+        },
+        axisLine: {
+          show: false,
+        },
+        splitLine: {
+          lineStyle: {
+            color: borderColor['input'],
+            type: 'dashed',
+          },
+        },
+      },
+      textStyle: {
+        color: textColor['secondary'],
+        fontFamily: 'af Another Sans',
+      },
+      series: chartSeries,
+      color: defaultColorRotationArray,
+    };
+  });
+</script>
+
+<Chart {options} {...props} {xAxisName} {yAxisName} />

package/dist/components/graphs/bar-chart/BarChart.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type GenericChartProps } from '../chart/Chart.svelte';
+import type { EChartsOption } from 'echarts';
+type DataItem = {
+    value: number;
+    [key: string]: string | number;
+};
+interface BarChartProps extends Omit<GenericChartProps, 'timeIndex'> {
+    data: DataItem[];
+    colors?: Record<string, string>;
+    rotateXAxisLabels?: boolean;
+    grid?: EChartsOption['grid'];
+    captureInterval?: number;
+    shouldDim?: (key: string) => boolean;
+}
+declare const BarChart: import("svelte").Component<BarChartProps, {}, "">;
+type BarChart = ReturnType<typeof BarChart>;
+export default BarChart;

package/dist/components/graphs/bar-chart/StackedBarChart.stories.svelte

@@ -0,0 +1,74 @@
+<script lang="ts" context="module">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { textColor } from '../../../tokens';
+  import StackedBarChart from './StackedBarChart.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Design System/Graphs/StackedBarChart',
+    component: StackedBarChart,
+    tags: ['autodocs'],
+  });
+
+  const stackedChartProps = {
+    xAxisCategories: ['ID 1', 'ID 2', 'ID 3', 'ID 4'],
+    series: [
+      { name: 'Halo', data: [100, 132, 101, 134] },
+      { name: 'Spot', data: [220, 182, 191, 234] },
+      { name: 'Microbial', data: [150, 232, 201, 154] },
+    ],
+  };
+
+  const seriesColors = {
+    Halo: textColor['icon-warning'],
+    Spot: textColor['icon-tertiary'],
+    Microbial: textColor['icon-lime'],
+  };
+</script>
+
+<Story
+  name="Default Colors"
+  args={{ ...stackedChartProps, height: '400px', xAxisName: 'ID', yAxisName: 'Count' }}
+/>
+
+<Story
+  name="Custom Colors"
+  args={{
+    ...stackedChartProps,
+    height: '400px',
+    colors: seriesColors,
+    xAxisName: 'ID',
+    yAxisName: 'Count',
+  }}
+/>
+
+<Story
+  name="With Capture Interval"
+  args={{
+    xAxisCategories: ['0', '1', '2', '3', '4', '5', '6'],
+    series: [
+      { name: 'Halo', data: [120, 132, 101, 134, 90, 230, 210] },
+      { name: 'Spot', data: [220, 182, 191, 234, 290, 330, 310] },
+      { name: 'Microbial', data: [150, 232, 201, 154, 190, 330, 410] },
+    ],
+    height: '400px',
+    xAxisName: 'Time',
+    yAxisName: 'Count',
+    captureInterval: 3600,
+  }}
+/>
+
+<Story
+  name="With Capture Interval - Short Duration"
+  args={{
+    xAxisCategories: ['0', '1', '2', '3', '4', '5', '6'],
+    series: [
+      { name: 'Halo', data: [120, 132, 101, 134, 90, 230, 210] },
+      { name: 'Spot', data: [220, 182, 191, 234, 290, 330, 310] },
+      { name: 'Microbial', data: [150, 232, 201, 154, 190, 330, 410] },
+    ],
+    height: '400px',
+    xAxisName: 'Time',
+    yAxisName: 'Count',
+    captureInterval: 600,
+  }}
+/>

package/dist/components/graphs/bar-chart/StackedBarChart.stories.svelte.d.ts

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

package/dist/components/graphs/bar-chart/StackedBarChart.svelte

@@ -0,0 +1,208 @@
+<script lang="ts">
+  import { textColor, borderColor, backgroundColor, chartColor, boxShadow } from '../../../tokens';
+  import Chart, { type GenericChartProps } from '../chart/Chart.svelte';
+  import type { EChartsOption, BarSeriesOption } from 'echarts';
+  import type { CallbackDataParams } from 'echarts/types/dist/shared';
+  import { formattedDurationCompact } from '../utils/duration';
+
+  type StackedSeriesItem = {
+    name: string;
+    data: (number | null)[];
+  };
+
+  interface StackedBarChartProps extends GenericChartProps {
+    xAxisCategories: (string | number)[];
+    series: StackedSeriesItem[];
+    colors?: Record<string, string>; // Optional: Color mapping per series name
+    rotateXAxisLabels?: boolean;
+    grid?: EChartsOption['grid'];
+    captureInterval?: number;
+    shouldDim?: (key: string) => boolean;
+  }
+
+  let {
+    xAxisCategories,
+    series,
+    colors,
+    rotateXAxisLabels = false,
+    captureInterval,
+    shouldDim = () => false,
+    ...props
+  }: StackedBarChartProps = $props();
+
+  let focusedSeries = $state<string | undefined>(undefined);
+  let focusedMetric = $state<string | undefined>(undefined);
+
+  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));
+
+  const xAxisData = $derived(xAxisCategories);
+
+  const captureIntervals = captureInterval
+    ? Array(xAxisCategories.length)
+        .fill(null)
+        .map((_, timeIndex) => {
+          const seconds = timeIndex * captureInterval;
+          return formattedDurationCompact(seconds);
+        })
+    : undefined;
+
+  const createBarDataItem = (value: number | null, color: string, key: string) => ({
+    value,
+    itemStyle: {
+      color,
+      borderRadius: 2,
+      borderWidth: 0.5,
+      borderColor: borderColor['white'],
+      opacity: shouldDim(key) ? 0.3 : 1,
+    },
+    emphasis: {
+      disabled: true,
+    },
+  });
+
+  const chartSeries: BarSeriesOption[] = $derived.by(() => {
+    return series.map((seriesItem, index): BarSeriesOption => {
+      let seriesColor: string;
+      // Use provided color for the series name if available, otherwise rotate through defaults
+      if (colors && colors[seriesItem.name]) {
+        seriesColor = colors[seriesItem.name];
+      } else {
+        seriesColor = defaultColorRotationArray[index % defaultColorRotationArray.length];
+      }
+      return {
+        name: seriesItem.name,
+        type: 'bar',
+        stack: 'total',
+        emphasis: { focus: 'none', disabled: true },
+        data: seriesItem.data.map((val) => createBarDataItem(val, seriesColor, seriesItem.name)),
+      };
+    });
+  });
+
+  const formatTooltip = (params: CallbackDataParams | CallbackDataParams[]): string => {
+    if (typeof params !== 'object' || params === null) {
+      return '';
+    }
+
+    // ECharts passes an array for axis trigger, single object for item
+    const paramArray = Array.isArray(params) ? params : [params];
+    if (paramArray.length === 0) return '';
+
+    const firstParam = paramArray[0];
+    const categoryName = firstParam.name;
+
+    let tooltipContent = `<div class="font-medium mb-1 text-primary">${categoryName}</div>`;
+
+    // Sort tooltip items by value descending for readability
+    paramArray.sort((a, b) => (b.value as number) - (a.value as number));
+
+    paramArray.forEach((p) => {
+      if (p.value == null) return;
+
+      const seriesName = p.seriesName ?? '';
+      const value = p.value;
+      let color = p.color as string | undefined;
+
+      // Attempt to find the originally assigned color for consistency
+      if (!color) {
+        if (colors && colors[seriesName]) {
+          color = colors[seriesName];
+        } else {
+          // Fallback: find index in original series data to get default color
+          const seriesIndex = series.findIndex((s) => s.name === seriesName);
+          if (seriesIndex !== -1) {
+            color = defaultColorRotationArray[seriesIndex % defaultColorRotationArray.length];
+          } else {
+            color = textColor['icon-blue']; // Use a default color as final fallback
+          }
+        }
+      }
+
+      const marker = `<span class="size-2 rounded-sm" style="background-color:${color}"></span>`;
+      tooltipContent += `<div class="flex items-center justify-between gap-4"><span class="flex items-center gap-2">${marker}${seriesName}</span><span class="text-primary">${value}</span></div>`;
+    });
+
+    return tooltipContent;
+  };
+
+  const options: EChartsOption = $derived.by(() => {
+    return {
+      tooltip: {
+        trigger: 'axis', // Trigger per category for stacked charts
+        axisPointer: {
+          type: 'shadow',
+          shadowStyle: {
+            color: backgroundColor['neutral'],
+          },
+        },
+        extraCssText: `box-shadow: ${boxShadow.menu}`,
+        borderWidth: 0,
+        borderRadius: 6,
+        formatter: formatTooltip,
+      },
+      grid: {
+        containLabel: true,
+        left: 0,
+        right: 16,
+        bottom: 16,
+        top: 16,
+      },
+      xAxis: {
+        type: 'category',
+        data: captureIntervals || xAxisData,
+        axisTick: {
+          show: false,
+          alignWithLabel: true,
+        },
+        axisLabel: {
+          fontSize: 11,
+          color: textColor['secondary'],
+          show: true,
+          ...(rotateXAxisLabels
+            ? { rotate: 90, overflow: 'break', width: 60, padding: [0, 40, 0, 0] }
+            : { rotate: 0, overflow: 'truncate', ellipsis: '...', width: 80 }),
+        },
+        axisLine: {
+          lineStyle: {
+            color: borderColor['axis'],
+          },
+        },
+      },
+      yAxis: {
+        type: 'value',
+        axisLabel: {
+          fontSize: 11,
+          color: textColor['secondary'],
+        },
+        axisLine: {
+          show: false,
+        },
+        splitLine: {
+          lineStyle: {
+            color: borderColor['input'],
+            type: 'dashed',
+          },
+        },
+      },
+      textStyle: {
+        color: textColor['secondary'],
+        fontFamily: 'af Another Sans',
+      },
+      series: chartSeries,
+      color: defaultColorRotationArray,
+    };
+  });
+</script>
+
+<Chart {options} {...props} />

package/dist/components/graphs/bar-chart/StackedBarChart.svelte.d.ts

@@ -0,0 +1,18 @@
+import { type GenericChartProps } from '../chart/Chart.svelte';
+import type { EChartsOption } from 'echarts';
+type StackedSeriesItem = {
+    name: string;
+    data: (number | null)[];
+};
+interface StackedBarChartProps extends GenericChartProps {
+    xAxisCategories: (string | number)[];
+    series: StackedSeriesItem[];
+    colors?: Record<string, string>;
+    rotateXAxisLabels?: boolean;
+    grid?: EChartsOption['grid'];
+    captureInterval?: number;
+    shouldDim?: (key: string) => boolean;
+}
+declare const StackedBarChart: import("svelte").Component<StackedBarChartProps, {}, "">;
+type StackedBarChart = ReturnType<typeof StackedBarChart>;
+export default StackedBarChart;