@reshape-biotech/design-system 2.7.4 → 2.7.5

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

@@ -17,6 +17,9 @@
     grid?: EChartsOption['grid'];
     captureInterval?: number;
     shouldDim?: (key: string) => boolean;
+    additionalSeries?: EChartsOption['series'][];
+    tooltipFormatter?: (params: any) => string;
+    yAxisOptions?: EChartsOption['yAxis'];
   }
 
   let {
@@ -27,7 +30,9 @@
     yAxisName,
     captureInterval,
     shouldDim = () => false,
-
+    additionalSeries,
+    tooltipFormatter,
+    yAxisOptions,
     ...props
   }: BarChartProps = $props();
 
@@ -72,24 +77,25 @@
   };
 
   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 primarySeries: BarSeriesOption = {
+      name: yAxisName,
+      type: 'bar',
+      data: data.map((item, index) =>
+        createBarDataItem(item.value, seriesColors[index], String(item[xAxisName!]))
+      ),
+      emphasis: { disabled: true },
+    };
+
+    if (!additionalSeries) return [primarySeries];
+
+    const flattened = additionalSeries.flat().filter((s): s is BarSeriesOption => !!s);
+    return [primarySeries, ...flattened];
   });
 
   const formatTooltip = createTooltipFormatter({
@@ -110,7 +116,7 @@
         borderWidth: 0,
         borderRadius: 6,
         extraCssText: `box-shadow: ${boxShadow.menu}`,
-        formatter: formatTooltip,
+        formatter: tooltipFormatter || formatTooltip,
       },
       grid: {
         containLabel: true,
@@ -155,6 +161,7 @@
             type: 'dashed',
           },
         },
+        ...(yAxisOptions || {}),
       },
       textStyle: {
         color: textColor['secondary'],

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

@@ -11,6 +11,9 @@ interface BarChartProps extends Omit<GenericChartProps, 'timeIndex'> {
     grid?: EChartsOption['grid'];
     captureInterval?: number;
     shouldDim?: (key: string) => boolean;
+    additionalSeries?: EChartsOption['series'][];
+    tooltipFormatter?: (params: any) => string;
+    yAxisOptions?: EChartsOption['yAxis'];
 }
 declare const BarChart: import("svelte").Component<BarChartProps, {}, "">;
 type BarChart = ReturnType<typeof BarChart>;

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

@@ -4,19 +4,23 @@
   import type { EChartsOption, BarSeriesOption, CallbackDataParams } from '../../../echarts-config';
   import { formattedDurationCompact } from '../utils/duration';
 
+  type StackedData = number | null | { value: number | null; itemStyle?: any; emphasis?: any };
   type StackedSeriesItem = {
     name: string;
-    data: (number | null)[];
+    data: StackedData[];
   };
 
   interface StackedBarChartProps extends GenericChartProps {
     xAxisCategories: (string | number)[];
     series: StackedSeriesItem[];
-    colors?: Record<string, string>; // Optional: Color mapping per series name
+    colors?: Record<string, string>;
     rotateXAxisLabels?: boolean;
     grid?: EChartsOption['grid'];
     captureInterval?: number;
     shouldDim?: (key: string) => boolean;
+    additionalSeries?: EChartsOption['series'][];
+    tooltipFormatter?: (params: any) => string;
+    yAxisOptions?: EChartsOption['yAxis'];
   }
 
   let {
@@ -26,6 +30,9 @@
     rotateXAxisLabels = false,
     captureInterval,
     shouldDim = () => false,
+    additionalSeries,
+    tooltipFormatter,
+    yAxisOptions,
     ...props
   }: StackedBarChartProps = $props();
 
@@ -56,24 +63,41 @@
         })
     : 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 createBarDataItem = (value: StackedData, color: string, key: string) => {
+    if (value && typeof value === 'object' && 'value' in value) {
+      const existing = value as any;
+      const mergedItemStyle = {
+        borderRadius: 2,
+        borderWidth: 0.5,
+        borderColor: borderColor['white'],
+        opacity: shouldDim(key) ? 0.3 : 1,
+        color,
+        ...(existing.itemStyle || {}),
+      };
+      return {
+        ...existing,
+        itemStyle: mergedItemStyle,
+        emphasis: { disabled: true, ...(existing.emphasis || {}) },
+      };
+    }
+    return {
+      value: value as number | null,
+      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 => {
+    const base = 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 {
@@ -87,6 +111,34 @@
         data: seriesItem.data.map((val) => createBarDataItem(val, seriesColor, seriesItem.name)),
       };
     });
+    if (!additionalSeries) return base;
+
+    const flattened = additionalSeries.flat().filter((s): s is BarSeriesOption => !!s);
+
+    const primaryStack = base[0]?.stack || 'total';
+
+    const adjusted = flattened.map((s) => {
+      if (s.type === 'bar') {
+        const anyData =
+          Array.isArray(s.data) && s.data.some((d) => !!d && (d as any).value != null);
+        if (!anyData) {
+          return {
+            stack: primaryStack,
+            barGap: '-100%',
+            silent: true,
+            ...s,
+          } as BarSeriesOption;
+        }
+        return {
+          stack: primaryStack,
+          barGap: '-100%',
+          ...s,
+        } as BarSeriesOption;
+      }
+      return s;
+    });
+
+    return [...base, ...adjusted];
   });
 
   const formatTooltip = (params: CallbackDataParams | CallbackDataParams[]): string => {
@@ -148,7 +200,7 @@
         extraCssText: `box-shadow: ${boxShadow.menu}`,
         borderWidth: 0,
         borderRadius: 6,
-        formatter: formatTooltip,
+        formatter: tooltipFormatter || formatTooltip,
       },
       grid: {
         containLabel: true,
@@ -193,6 +245,7 @@
             type: 'dashed',
           },
         },
+        ...(yAxisOptions || {}),
       },
       textStyle: {
         color: textColor['secondary'],

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

@@ -1,8 +1,13 @@
 import { type GenericChartProps } from '../chart/Chart.svelte';
 import type { EChartsOption } from '../../../echarts-config';
+type StackedData = number | null | {
+    value: number | null;
+    itemStyle?: any;
+    emphasis?: any;
+};
 type StackedSeriesItem = {
     name: string;
-    data: (number | null)[];
+    data: StackedData[];
 };
 interface StackedBarChartProps extends GenericChartProps {
     xAxisCategories: (string | number)[];
@@ -12,6 +17,9 @@ interface StackedBarChartProps extends GenericChartProps {
     grid?: EChartsOption['grid'];
     captureInterval?: number;
     shouldDim?: (key: string) => boolean;
+    additionalSeries?: EChartsOption['series'][];
+    tooltipFormatter?: (params: any) => string;
+    yAxisOptions?: EChartsOption['yAxis'];
 }
 declare const StackedBarChart: import("svelte").Component<StackedBarChartProps, {}, "">;
 type StackedBarChart = ReturnType<typeof StackedBarChart>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reshape-biotech/design-system",
-  "version": "2.7.4",
+  "version": "2.7.5",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",