@turquoisehealth/pit-viper 2.224.1-dev.0 → 2.224.1-dev.1

package/pv-components/dist/vue/visualizations/components/base/PvButton/types.d.ts

@@ -33,6 +33,6 @@ export interface PvButtonWithTooltipProps extends PvButtonProps {
     tooltipVariant?: PvTooltipVariants;
     /** Where the tooltip appears relative to the button */
     tooltipPosition?: PvTooltipPositions;
-    /** Delay in milliseconds before showing the tooltip */
+    /** Delay in milliseconds before showing the tooltip on hover. Keyboard focus is never delayed. */
     delay?: number;
 }

package/pv-components/dist/vue/visualizations/components/base/PvTooltip/PvTooltip.vue.d.ts

@@ -11,7 +11,7 @@ interface PvTooltipProps {
     size?: PvTooltipSize;
     /** When true, tooltip hides immediately when cursor leaves the trigger */
     disableInteractive?: boolean;
-    /** Delay in milliseconds before showing the tooltip */
+    /** Delay in milliseconds before showing the tooltip on hover. Keyboard focus is never delayed. */
     delay?: number;
 }
 declare function __VLS_template(): {
@@ -20,7 +20,9 @@ declare function __VLS_template(): {
         label?(_: {}): any;
         'tooltip-content'?(_: {}): any;
     };
-    refs: {};
+    refs: {
+        rootRef: HTMLDivElement;
+    };
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
@@ -31,7 +33,9 @@ declare const __VLS_component: DefineComponent<PvTooltipProps, {}, {}, {}, {}, C
     delay: number;
     disableInteractive: boolean;
     ariaLabelledBy: string;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+    rootRef: HTMLDivElement;
+}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/pv-components/dist/vue/visualizations/components/charts/PvDataTableWithChart/crosslineHelpers.d.ts

@@ -1,5 +1,6 @@
 import { ChipSection, CrosslineOverlayGroup, VerticalLineOverlay } from './types';
 export declare const DEFAULT_CROSSLINE_OVERLAY_COLOR = "#E7E2D9";
+export declare const LEGACY_CROSSLINE_OVERLAY_COLOR = "#7C8AF4";
 export declare const scaleValueToIndex: (value: number, buckets: {
     bucketMin: number;
     bucketMax: number;
@@ -10,7 +11,7 @@ export interface CrosslineAxisDomain {
     axisMin: number;
     axisMax: number;
 }
-export declare const getCrosslineAxisDomain: (numCategories: number, isHistogramWithBuckets: boolean | undefined) => CrosslineAxisDomain;
+export declare const getCrosslineAxisDomain: (numCategories: number, showDistributionRangeLabels: boolean | undefined) => CrosslineAxisDomain;
 export declare const scaledIndexToAxisFraction: (scaledValue: number, domain: CrosslineAxisDomain) => number;
 export declare const resolveCrosslineOverlays: (groups: CrosslineOverlayGroup[], activeGroupIds: Set<string>) => VerticalLineOverlay[];
 export declare const computeChipSections: (groups: CrosslineOverlayGroup[], activeGroupIds: Set<string>, formatValue: (value: number) => string | number) => ChipSection[];

package/pv-components/dist/vue/visualizations/components/charts/PvDataTableWithChart/helpers.d.ts

@@ -75,8 +75,9 @@ export declare const calculateMinChartSeriesValue: (data: any[] | undefined, ser
  * Builds the category axis's label formatter. Exactly one of three behaviors applies:
  * - `hideLabel`: every label is blank (e.g. a chart type that doesn't show x-axis labels).
  * - `showDistributionRangeLabels`: only the two blank pad categories flanking a histogram's
- *   real buckets are labeled, with the overall lowest min / highest max bucket boundary;
- *   every other category (including the real buckets themselves) is blank.
+ *   real buckets (under `useDistributionV2Styling`) are labeled, with the overall lowest
+ *   min / highest max bucket boundary; every other category (including the real buckets
+ *   themselves) is blank.
  * - Otherwise: normal category labels, formatted via `columnValueFormatter`, with the
  *   separator/single-bar-padding sentinel categories hidden, a focus suffix appended, and
  *   the result truncated to `MAX_LABEL_LENGTH`.

package/pv-components/dist/vue/visualizations/components/charts/PvDataTableWithChart/types.d.ts

@@ -142,6 +142,12 @@ export interface PvDataTableWithChartProps<T> extends PvDataTableProps<T> {
     showSeriesLabels?: boolean;
     /** When true, truncates long category labels on the chart axis. */
     truncateLabelValues?: boolean;
+    /**
+     * Gate for distribution/histogram chart styling changes that must ship together.
+     * When true, notates the x-axis of histogram charts with the overall lowest min
+     * (left) and highest max (right) bucket bounds.
+     */
+    useDistributionV2Styling?: boolean;
     /** Pre-populated chart data to render before any server-side fetch completes. */
     initialChartData?: AgChartOptions["data"];
     /** When true, wraps large charts in a native Pit Viper-styled scroll container. */

package/pv-components/dist/vue/visualizations/components/charts/PvDataTableWithChart/useBenchmarkOverlays.d.ts

@@ -9,6 +9,7 @@ export interface CrosslineTooltip {
 }
 interface UseBenchmarkOverlaysOptions {
     crosslineOverlayGroups: ComputedRef<CrosslineOverlayGroup[]>;
+    useDistributionV2Styling: ComputedRef<boolean | undefined>;
     isHistogramWithBuckets: ComputedRef<boolean | undefined>;
     isHorizontalBarChart: ComputedRef<boolean>;
     computedChartData: ComputedRef<{

package/pv-components/dist/vue/visualizations/pv-components-visualizations.mjs

@@ -5061,23 +5061,44 @@ var zi = /* @__PURE__ */ new Set(), Bi = (e, t) => !!t.root.value && !!e.root.va
 		delay: { default: 0 }
 	},
 	setup(e) {
-		let { present: t } = Ri("tooltip-content");
-		return (n, r) => (D(), o("div", {
+		let t = e, n = ee("rootRef"), { present: i } = Ri("tooltip-content", { host: r(() => {
+			let e = n.value?.getRootNode();
+			return e instanceof ShadowRoot ? e.host : null;
+		}) }), s = r(() => t.delay > 0), c = k(!1), l = k(!1), u, d = () => {
+			u && clearTimeout(u), u = void 0;
+		}, f = r(() => !s.value || c.value || l.value), p = () => {
+			s.value && (d(), u = setTimeout(() => {
+				u = void 0, l.value = !0;
+			}, t.delay));
+		}, m = () => {
+			s.value && (d(), l.value = !1);
+		}, h = () => {
+			s.value && (c.value = !0);
+		}, g = () => {
+			s.value && (c.value = !1);
+		};
+		return C(d), (t, r) => (D(), o("div", {
+			ref_key: "rootRef",
+			ref: n,
 			"data-testid": "pv-tooltip",
 			class: y([{
-				"pv-tooltip": R(t),
-				"pv-tooltip-small": R(t) && e.size === "sm"
+				"pv-tooltip": R(i),
+				"pv-tooltip-small": R(i) && e.size === "sm"
 			}]),
 			"data-position": e.tooltipPosition,
 			"data-style": e.variant === "white" ? "white" : "dark",
 			"data-static": e.disableInteractive ? !0 : void 0,
-			"aria-labelledby": R(t) ? e.ariaLabelledBy : void 0
-		}, [j(n.$slots, "label"), R(t) ? (D(), o("div", {
+			"aria-labelledby": R(i) ? e.ariaLabelledBy : void 0,
+			onMouseenter: p,
+			onMouseleave: m,
+			onFocusin: h,
+			onFocusout: g
+		}, [j(t.$slots, "label"), R(i) ? G((D(), o("div", {
 			key: 0,
 			role: "tooltip",
 			id: e.ariaLabelledBy,
 			"data-testid": "pv-tooltip-content"
-		}, [j(n.$slots, "tooltip-content")], 8, Sa)) : a("", !0)], 10, xa));
+		}, [j(t.$slots, "tooltip-content")], 8, Sa)), [[re, f.value]]) : a("", !0)], 42, xa));
 	}
 }), wa = ["disabled"], Ta = { class: "pv-flex pv-select-button-trigger-content" }, Ea = {
 	key: 0,
@@ -13835,46 +13856,46 @@ var Lp = (e, t) => {
 	}), [...r.values()];
 }, Hp = (e) => !!(e.visible && !e.disabled);
 function Up(e) {
-	let { crosslineOverlayGroups: t, isHistogramWithBuckets: n, isHorizontalBarChart: i, computedChartData: a, pvChartRef: o, formatValue: s, initialActiveOverlayGroupIds: c } = e, l = k(new Set(c?.value ?? t.value.filter((e) => Hp(e)).map((e) => e.id))), u = new Map(t.value.map((e) => [e.id, Hp(e)]));
+	let { crosslineOverlayGroups: t, useDistributionV2Styling: n, isHistogramWithBuckets: i, isHorizontalBarChart: a, computedChartData: o, pvChartRef: s, formatValue: c, initialActiveOverlayGroupIds: l } = e, u = k(new Set(l?.value ?? t.value.filter((e) => Hp(e)).map((e) => e.id))), d = new Map(t.value.map((e) => [e.id, Hp(e)]));
 	U(t, (e) => {
-		let t = new Set(l.value), n = !1, r = c?.value !== void 0;
+		let t = new Set(u.value), n = !1, r = l?.value !== void 0;
 		for (let i of e) {
-			let e = Hp(i), a = u.has(i.id) ? !u.get(i.id) : !r;
-			e && a ? (t.add(i.id), n = !0) : !e && u.get(i.id) && (t.delete(i.id), n = !0);
+			let e = Hp(i), a = d.has(i.id) ? !d.get(i.id) : !r;
+			e && a ? (t.add(i.id), n = !0) : !e && d.get(i.id) && (t.delete(i.id), n = !0);
 		}
-		u = new Map(e.map((e) => [e.id, Hp(e)])), n && (l.value = t);
+		d = new Map(e.map((e) => [e.id, Hp(e)])), n && (u.value = t);
 	});
-	let d = r(() => Bp(t.value, l.value)), f = r(() => Vp(t.value, l.value, s)), p = k(null);
+	let f = r(() => Bp(t.value, u.value)), p = r(() => n.value ? Vp(t.value, u.value, c) : []), m = k(null);
 	return {
-		activeCrosslineOverlayGroups: l,
-		resolvedCrosslineOverlays: d,
-		chipSections: f,
-		hoveredBenchmarkKey: p,
+		activeCrosslineOverlayGroups: u,
+		resolvedCrosslineOverlays: f,
+		chipSections: p,
+		hoveredBenchmarkKey: m,
 		hoveredCrosslineTooltip: r(() => {
-			if (!p.value || !a.value) return null;
-			let e = d.value.find((e) => e.key === p.value);
+			if (!m.value || !o.value) return null;
+			let e = f.value.find((e) => e.key === m.value);
 			if (!e) return null;
-			let t = Lp(e.value, a.value);
+			let t = Lp(e.value, o.value);
 			if (t == null) return null;
-			let r = (o.value?.$el)?.querySelector(".ag-charts-series-area")?.getBoundingClientRect();
+			let r = (s.value?.$el)?.querySelector(".ag-charts-series-area")?.getBoundingClientRect();
 			if (!r) return null;
-			let c = zp(t, Rp(a.value.length || 1, n.value)), l = e.formatValue ? e.formatValue(e.value) : s(e.value);
-			return i.value ? {
+			let l = zp(t, Rp(o.value.length || 1, i.value && n.value)), u = e.formatValue ? e.formatValue(e.value) : c(e.value);
+			return a.value ? {
 				label: e.label,
-				value: l,
+				value: u,
 				arrowClass: "ag-charts-tooltip--arrow-left",
 				style: {
 					"--left": `${r.left + 8}px`,
-					"--top": `${r.top + (1 - c) * r.height}px`,
+					"--top": `${r.top + (1 - l) * r.height}px`,
 					transform: "translateY(-50%)",
 					pointerEvents: "none"
 				}
 			} : {
 				label: e.label,
-				value: l,
+				value: u,
 				arrowClass: "ag-charts-tooltip--arrow-bottom",
 				style: {
-					"--left": `${r.left + c * r.width}px`,
+					"--left": `${r.left + l * r.width}px`,
 					"--top": `${r.top - 8}px`,
 					transform: "translate(-50%, -100%)",
 					pointerEvents: "none"
@@ -13921,6 +13942,10 @@ var Wp = { style: {
 			type: Boolean,
 			default: !0
 		},
+		useDistributionV2Styling: {
+			type: Boolean,
+			default: !1
+		},
 		initialChartData: {},
 		enableChartScrolling: {
 			type: Boolean,
@@ -14322,7 +14347,7 @@ var Wp = { style: {
 				});
 			}
 		});
-		let Be = (e) => e?.label ?? "", Ve = r(() => Be(ne(H.value, Q.value))), He = r(() => ne(te.value, Ne.value)), Ue = r(() => Be(He.value)), We = r(() => ke.value.isHorizontal === !0), Ge = r(() => P.value.length > 1), Ke = r(() => !Te.value || H.value.length === 0 ? [] : ke.value.seriesFamily === "pie" ? Qe.value : Ze.value), qe = r(() => Te.value?.id === "histogram" ? !1 : l.showSeriesLabels), Je = r(() => Te.value?.id.includes("stacked")), Ye = r(() => P.value.length > 1), Xe = r(() => Te.value?.id === "histogram" && ot.value && ot.value.length > 0 && typeof ot.value[0]?.bucketMin == "number" && typeof ot.value[0]?.bucketMax == "number"), Ze = r(() => {
+		let Be = (e) => e?.label ?? "", Ve = r(() => Be(ne(H.value, Q.value))), He = r(() => ne(te.value, Ne.value)), Ue = r(() => Be(He.value)), We = r(() => ke.value.isHorizontal === !0), Ge = r(() => P.value.length > 1), Ke = r(() => !Te.value || H.value.length === 0 ? [] : ke.value.seriesFamily === "pie" ? Qe.value : Ze.value), qe = r(() => Te.value?.id === "histogram" && l.useDistributionV2Styling ? !1 : l.showSeriesLabels), Je = r(() => Te.value?.id.includes("stacked")), Ye = r(() => P.value.length > 1), Xe = r(() => Te.value?.id === "histogram" && ot.value && ot.value.length > 0 && typeof ot.value[0]?.bucketMin == "number" && typeof ot.value[0]?.bucketMax == "number"), Ze = r(() => {
 			let e = Je.value, t = ke.value.agChartType, n = [], r = ye(Q.value, !0), i = ye(Fe.value?.fieldName, !0), a = (e) => t === "line" ? {} : { placement: e };
 			if (Ge.value) Fe.value?.fieldValues.forEach((o) => {
 				let s = {
@@ -14423,7 +14448,7 @@ var Wp = { style: {
 					label: { enabled: !1 },
 					tooltip: { enabled: !1 },
 					visible: !1
-				}, { categoryPadOffset: i } = Rp(e, !0), a = {
+				}, { categoryPadOffset: i } = Rp(e, Xe.value && l.useDistributionV2Styling), a = {
 					type: "scatter",
 					xKey: "__dummy_x__",
 					yKey: "__dummy_y__",
@@ -14626,6 +14651,7 @@ var Wp = { style: {
 			return e;
 		}), { activeCrosslineOverlayGroups: st, resolvedCrosslineOverlays: ct, chipSections: lt, hoveredBenchmarkKey: ut, hoveredCrosslineTooltip: dt } = Up({
 			crosslineOverlayGroups: Pe,
+			useDistributionV2Styling: r(() => l.useDistributionV2Styling),
 			isHistogramWithBuckets: Xe,
 			isHorizontalBarChart: We,
 			computedChartData: ot,
@@ -14724,22 +14750,22 @@ var Wp = { style: {
 		}), zt = r(() => Lt.value || ce.value || !l.isLoading && Rt.value !== ""), Bt = r(() => {
 			let e = {};
 			e.overlays = { noData: { text: "" } };
-			let t = Xe.value ? [
+			let t = Xe.value && l.useDistributionV2Styling, n = t ? [
 				{ [I.value]: qo },
 				...ot.value ?? [],
 				{ [I.value]: Jo }
 			] : ot.value;
-			e.data = zt.value ? [] : t, e.legend = {
+			e.data = zt.value ? [] : n, e.legend = {
 				toggleSeries: !1,
 				preventHidingAll: !0,
 				enabled: P.value.length > 1
 			};
-			let n = Ge.value ? Fe.value?.fieldValues.map((e) => xs(Q.value, e)) || [] : Q.value ? [Q.value] : [], r = (() => {
+			let r = Ge.value ? Fe.value?.fieldValues.map((e) => xs(Q.value, e)) || [] : Q.value ? [Q.value] : [], i = (() => {
 				if (!Ne.value) return [];
 				let e = Ne.value;
 				return Je.value ? [`${e}${Zo}`] : Ge.value ? Fe.value?.fieldValues.map((t) => xs(e, String(t))) || [] : [e];
-			})(), i = ke.value.xAxis.hideLabel === !0 && !Xe.value, a = [];
-			if (a.push({
+			})(), a = ke.value.xAxis.hideLabel === !0 && !t, o = [];
+			if (o.push({
 				type: "category",
 				keys: [I.value],
 				position: We.value ? "left" : "bottom",
@@ -14757,10 +14783,10 @@ var Wp = { style: {
 					autoRotate: !0,
 					truncate: !1,
 					wrapping: "never",
-					...Xe.value ? { spacing: 2 } : {},
+					...t ? { spacing: 2 } : {},
 					formatter: Ds({
-						hideLabel: i,
-						showDistributionRangeLabels: !!Xe.value,
+						hideLabel: a,
+						showDistributionRangeLabels: !!t,
 						chartData: ot.value,
 						formatBucketBoundary: Ce,
 						columnValueFormatter: ye(I.value),
@@ -14770,71 +14796,71 @@ var Wp = { style: {
 					})
 				},
 				paddingInner: Nt.value,
-				paddingOuter: Xe.value ? 0 : Pt.value,
+				paddingOuter: t ? 0 : Pt.value,
 				groupPaddingInner: Ft.value
 			}), Xe.value && ct.value.length > 0) {
-				let { categoryPadOffset: e, axisMin: t, axisMax: n } = Rp(ot.value?.length || 1, !0);
-				a.push({
+				let { categoryPadOffset: e, axisMin: n, axisMax: r } = Rp(ot.value?.length || 1, t);
+				o.push({
 					type: "number",
 					keys: ["__dummy_x__"],
 					position: We.value ? "left" : "bottom",
 					crosshair: { enabled: !1 },
-					min: t,
-					max: n,
+					min: n,
+					max: r,
 					nice: !1,
 					label: { enabled: !1 },
 					tick: { enabled: !1 },
 					line: { enabled: !1 },
 					gridLine: { enabled: !1 },
-					crossLines: ct.value.map((t) => {
+					crossLines: ct.value.map((n) => {
 						if (!ot.value) return null;
-						let n = Lp(t.value, ot.value);
-						if (n == null) return null;
-						let r = ut.value != null && t.key === ut.value, i = ut.value != null && !r;
+						let r = Lp(n.value, ot.value);
+						if (r == null) return null;
+						let i = ut.value != null && n.key === ut.value, a = ut.value != null && !i;
 						return {
 							type: "line",
-							value: n + e,
-							stroke: t.color || "#E7E2D9",
-							strokeWidth: r ? 3 : 2,
-							strokeOpacity: i ? .2 : r ? 1 : .8,
+							value: r + e,
+							stroke: n.color || (t ? "#E7E2D9" : "#7C8AF4"),
+							strokeWidth: i ? 3 : 2,
+							strokeOpacity: a ? .2 : i ? 1 : .8,
 							lineDash: [6, 3]
 						};
 					}).filter((e) => e !== null)
 				});
 			}
-			let o = !!Ne.value, s = o ? He.value?.secondaryAxisMax : void 0, c = o && Number.isFinite(At.value) && At.value < 0, u = o && Number.isFinite(jt.value) && jt.value < 0, d = c || u, f = o ? gs(Ot.value, 5) : 0, p = o ? s ?? gs(kt.value, 5) : 0, m = o && !d && f > 0 && p > 0;
-			if (a.push({
+			let s = !!Ne.value, c = s ? He.value?.secondaryAxisMax : void 0, u = s && Number.isFinite(At.value) && At.value < 0, d = s && Number.isFinite(jt.value) && jt.value < 0, f = u || d, p = s ? gs(Ot.value, 5) : 0, m = s ? c ?? gs(kt.value, 5) : 0, h = s && !f && p > 0 && m > 0;
+			if (o.push({
 				type: "number",
-				keys: n,
+				keys: r,
 				position: We.value ? "bottom" : "left",
-				...m ? {
+				...h ? {
 					min: 0,
-					max: f,
+					max: p,
 					nice: !1,
-					interval: { step: f / 5 }
+					interval: { step: p / 5 }
 				} : {},
 				label: { formatter: ye(Q.value) },
 				title: {
 					enabled: !0,
 					text: Ve.value
 				}
-			}), o && a.push({
+			}), s && o.push({
 				type: "number",
-				keys: r,
+				keys: i,
 				position: We.value ? "top" : "right",
 				crosshair: { enabled: !1 },
-				...m ? {
+				...h ? {
 					min: 0,
-					max: p,
+					max: m,
 					nice: !1,
-					interval: { step: p / 5 }
+					interval: { step: m / 5 }
 				} : {
-					...u ? {} : { min: 0 },
-					...s === void 0 ? {} : {
-						max: s,
+					...d ? {} : { min: 0 },
+					...c === void 0 ? {} : {
+						max: c,
 						nice: !1
 					},
-					...d ? { gridLine: { enabled: !1 } } : {}
+					...f ? { gridLine: { enabled: !1 } } : {}
 				},
 				label: { color: gt },
 				title: {
@@ -14844,7 +14870,7 @@ var Wp = { style: {
 				}
 			}), Xe.value && ct.value.length > 0) {
 				let e = Number.isFinite(Ot.value) ? Ot.value : 0;
-				a.push({
+				o.push({
 					type: "number",
 					keys: ["__dummy_y__"],
 					position: "left",
@@ -14858,7 +14884,7 @@ var Wp = { style: {
 					gridLine: { enabled: !1 }
 				});
 			}
-			return e.axes = a, e.series = Ke.value, e;
+			return e.axes = o, e.series = Ke.value, e;
 		}), Vt = r(() => E.value || l.isLoading && (!ot.value || ot.value.length === 0)), Ht = r(() => Lt.value || !ce.value && !l.isLoading && Rt.value !== ""), Ut = (e) => {
 			b.value = e, d("chart-collapsed", e);
 		}, Wt = (e) => {