use in multiple plots

packages/components/src/components/DistributionChart.tsx

@@ -80,9 +80,17 @@ export const DistributionChart: React.FC<DistributionChartProps> = (props) => {
     }
 
     // if this is a sample set, include the samples
-    const t = plot?.distributions[0]?.distribution?.t;
-    if (t.tag === "SampleSet") {
-      shapes.value[0].samples = t.value.map((v) => ({ x: v, y: 0 }));
+    const sampleSets = plot?.distributions.filter(
+      (dist) => dist.distribution.t.tag === "SampleSet"
+    );
+    if (sampleSets.length) {
+      for (const set of sampleSets) {
+        if (set.distribution.t.tag === "SampleSet") { // this must be duplicated to please typescript, more elegant solution probably exists
+          shapes.value[0].samples.push(
+            ...set.distribution.t.value.map((v) => ({ x: v, y: 0 }))
+          );
+        }
+      }
     }
 
     const spec = buildVegaSpec(props);

packages/components/src/lib/distributionSpecBuilder.ts

@@ -75,14 +75,7 @@ const width = 500;
 export function buildVegaSpec(
   specOptions: DistributionChartSpecOptions
 ): VisualizationSpec {
-  const {
-    title,
-    minX,
-    maxX,
-    logX,
-    expY,
-    xAxis = "number",
-  } = specOptions;
+  const { title, minX, maxX, logX, expY, xAxis = "number" } = specOptions;
 
   const dateTime = xAxis === "dateTime";
 
@@ -319,7 +312,10 @@ export function buildVegaSpec(
 
                     y: { value: 25, offset: { signal: "height" } },
                     height: { value: 5 },
-                    fill: { value: "steelblue" },
+                    fill: {
+                      scale: "color",
+                      field: { parent: "name" },
+                    },
                     fillOpacity: { value: 1 },
                   },
                 },