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 = (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 }, }, },