diff --git a/src/components/DistributionComparisonModal.svelte b/src/components/DistributionComparisonModal.svelte index a40f9fb55..963588249 100644 --- a/src/components/DistributionComparisonModal.svelte +++ b/src/components/DistributionComparisonModal.svelte @@ -13,7 +13,15 @@ export let distViewButtonId; let normalized = $store.productDimensions.normalizationType === 'normalized'; + let probeType = $store.probe.type; + let probeKind = $store.probe.details.kind; let cumulative = false; + let activeCategoricalProbeLabels = + probeKind === 'categorical' + ? $store.probe.details.labels.filter((l) => + $store.activeBuckets.includes(l) + ) + : []; let valueSelector = 'value'; // Change this value to adjust the minimum tick increment on the chart @@ -49,9 +57,16 @@ }; const buildDensity = function (chartData) { - let density = normalized - ? chartData[densityMetricType] - : convertValueToPercentage(chartData[densityMetricType]); + let density = chartData[densityMetricType]; + if (probeKind === 'categorical') { + let categoricalProbeLabels = $store.probe.details.labels; + density = density.filter((v, i) => + $store.activeBuckets.includes(categoricalProbeLabels[i]) + ); + } + if (probeType === 'scalar' || !normalized) { + density = convertValueToPercentage(chartData[densityMetricType]); + } return cumulative ? makeCumulative(density) : density; }; @@ -111,11 +126,13 @@
- + {#if probeKind !== 'categorical'} + + {/if}

Reference

@@ -128,6 +145,7 @@ density={topChartDensity} {topTick} {tickIncrement} + {activeCategoricalProbeLabels} > {#if bottomChartData} @@ -139,6 +157,7 @@ {tickIncrement} sampleCount={topChartSampleCount} tooltipLocation="bottom" + {activeCategoricalProbeLabels} /> {/if} @@ -158,6 +177,7 @@ density={bottomChartDensity} {topTick} {tickIncrement} + {activeCategoricalProbeLabels} > {#if bottomChartData} @@ -168,6 +188,7 @@ {topTick} sampleCount={bottomChartSampleCount} tooltipLocation="top" + {activeCategoricalProbeLabels} /> {/if} diff --git a/src/components/explore/DistributionChart.svelte b/src/components/explore/DistributionChart.svelte index 1a29c5adb..4da22c788 100644 --- a/src/components/explore/DistributionChart.svelte +++ b/src/components/explore/DistributionChart.svelte @@ -3,6 +3,7 @@ import { tooltip as tooltipAction } from '@graph-paper/core/actions'; import { distributionComparisonGraph } from '../../utils/constants'; import { formatCompact } from '../../utils/formatters'; + import { store } from '../../state/store'; export let innerHeight; export let innerWidth; @@ -10,6 +11,7 @@ export let topTick; export let sampleCount; export let tooltipLocation; + export let activeCategoricalProbeLabels; let height = (innerHeight * distributionComparisonGraph.heightMult) / 2; let color = 'var(--digital-blue-350)'; @@ -21,6 +23,7 @@ distributionComparisonGraph.left; let maxHeight = height - distributionComparisonGraph.top; let minHeight = distributionComparisonGraph.bottom; + let probeKind = $store.probe.details.kind; let formatPercent = (t) => Intl.NumberFormat('en-US', { style: 'percent', @@ -33,6 +36,15 @@ const spaceBetweenBars = bucketWidth / 10; const barOffsetX = spaceBetweenBars / 2; const barWidth = bucketWidth - spaceBetweenBars; + + const buildBucketTxt = (index, bin) => { + if (probeKind === 'categorical') { + return activeCategoricalProbeLabels[index]; + } + return index === density.length - 1 + ? `sample value ≥ ${bin}` + : `${bin} ≤ sample value ≤ ${density[index + 1][binSelector]}`; + };