diff --git a/packages/components/src/components/DistributionChart.tsx b/packages/components/src/components/DistributionChart.tsx index 90cb4f1e..d1773993 100644 --- a/packages/components/src/components/DistributionChart.tsx +++ b/packages/components/src/components/DistributionChart.tsx @@ -32,7 +32,6 @@ export type DistributionChartProps = { environment: environment; width?: number; height: number; - sample?: boolean; xAxisType?: "number" | "dateTime"; } & DistributionPlottingSettings; @@ -64,7 +63,7 @@ export const DistributionChart: React.FC = (props) => { name: x.name, // color: x.color, // not supported yet ...pointSet.asShape(), - samples: [] as number[], + // samples: [] as number[], })) ) ); @@ -78,6 +77,7 @@ export const DistributionChart: React.FC = (props) => { } // if this is a sample set, include the samples + const samples: number[] = []; const sampleSets = plot?.distributions.filter( (dist) => dist.distribution.tag === SqDistributionTag.SampleSet ); @@ -85,7 +85,8 @@ export const DistributionChart: React.FC = (props) => { for (const { distribution } of sampleSets) { if (distribution.tag === SqDistributionTag.SampleSet) { // this conditional must be duplicated to please typescript, more elegant solution probably exists - shapes.value[0].samples.push(...distribution.value()); + samples.push(...distribution.value()); + // shapes.value[0].samples.push(...distribution.value()); } } } @@ -112,7 +113,7 @@ export const DistributionChart: React.FC = (props) => { ) : ( = React.memo( onChange, executionId, }); - + const distributionPlotSettings = { showSummary, logX, diff --git a/packages/components/src/lib/distributionSpecBuilder.ts b/packages/components/src/lib/distributionSpecBuilder.ts index 2880aa4b..d48078d3 100644 --- a/packages/components/src/lib/distributionSpecBuilder.ts +++ b/packages/components/src/lib/distributionSpecBuilder.ts @@ -14,8 +14,6 @@ export type DistributionChartSpecOptions = { title?: string; /** The formatting of the ticks */ format?: string; - /** Whether or not to show the band of sample data at the bottom */ - sample?: boolean; /** Whether the x-axis should be dates or numbers */ xAxisType?: "number" | "dateTime"; }; @@ -77,14 +75,7 @@ const width = 500; export function buildVegaSpec( specOptions: DistributionChartSpecOptions ): VisualizationSpec { - const { - title, - minX, - maxX, - logX, - expY, - xAxisType = "number", - } = specOptions; + const { title, minX, maxX, logX, expY, xAxisType = "number" } = specOptions; const dateTime = xAxisType === "dateTime"; @@ -299,40 +290,23 @@ export function buildVegaSpec( }, ], }, - { - name: "sample_distributions", - type: "group", - from: { - facet: { - name: "sample_facet", - data: "distribution_facet", - field: "samples", - }, - }, - marks: [ - { - name: "samples", - type: "rect", - from: { data: "sample_facet" }, - encode: { - enter: { - x: { scale: "xscale", field: "data"}, - width: { value: 0.1 }, - - y: { value: 25, offset: { signal: "height" } }, - height: { value: 5 }, - fill: { - scale: "color", - field: { parent: "name" }, - }, - fillOpacity: { value: 1 }, - }, - }, - }, - ], - }, ], }, + + { + name: "sampleset", + type: "rect", + from: { data: "samples" }, + encode: { + enter: { + x: { scale: "xscale", field: "data" }, + width: { value: 0.1 }, + + y: { value: 25, offset: { signal: "height" } }, + height: { value: 5 }, + }, + }, + }, { type: "text", name: "announcer",