From 2087a30b6bbd5c09693baafc09b5ebf3d139c236 Mon Sep 17 00:00:00 2001
From: Conor Barnes <conorbarnes93@gmail.com>
Date: Wed, 31 Aug 2022 12:15:43 -0300
Subject: [PATCH] use in multiple plots

---
 .../src/components/DistributionChart.tsx         | 16 ++++++++++++----
 .../src/lib/distributionSpecBuilder.ts           | 14 +++++---------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/packages/components/src/components/DistributionChart.tsx b/packages/components/src/components/DistributionChart.tsx
index a6f2608c..7b05d65f 100644
--- a/packages/components/src/components/DistributionChart.tsx
+++ b/packages/components/src/components/DistributionChart.tsx
@@ -80,11 +80,19 @@ 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);
 
     let widthProp = width ? width : size.width;
diff --git a/packages/components/src/lib/distributionSpecBuilder.ts b/packages/components/src/lib/distributionSpecBuilder.ts
index b4e79609..06b23919 100644
--- a/packages/components/src/lib/distributionSpecBuilder.ts
+++ b/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 },
                   },
                 },