@reltio/design 0.2.0 → 0.3.0

package/charts/SetOverlapChart/SetOverlapChart.d.ts

@@ -0,0 +1,33 @@
+import type { SetOverlapChartProps } from "./SetOverlapChart.types";
+/**
+ * UpSet-style set overlap chart built with custom SVG and d3-scale.
+ *
+ * Visualizes how records overlap across multiple sets (source systems)
+ * using three coordinated sub-charts: vertical intersection bars at the
+ * top, a dot matrix in the middle, and horizontal set bars on the left.
+ *
+ * Supports two combination modes — `"intersection"` (overlapping counts,
+ * element-level hover) and `"distinctIntersection"` (mutually exclusive
+ * counts, structural hover). Each mode requires differently shaped data
+ * despite sharing the same TypeScript types.
+ *
+ * @example
+ * ```tsx
+ * const sets = [
+ *   { name: "SAP", size: 6, elements: ["r1", "r2"] },
+ *   { name: "Oracle", size: 4, elements: ["r1", "r3"] },
+ * ];
+ * const intersections = [
+ *   { sets: ["SAP"], size: 6, elements: ["r1", "r2"] },
+ *   { sets: ["SAP", "Oracle"], size: 2, elements: ["r1"] },
+ * ];
+ *
+ * <SetOverlapChart
+ *   sets={sets}
+ *   intersections={intersections}
+ *   mode="intersection"
+ *   style={{ width: 900, height: 500 }}
+ * />
+ * ```
+ */
+export declare const SetOverlapChart: ({ intersections, sets, mode, intersectionChartAxisLabel, setsChartAxisLabel, loading, error, className, style, ...rest }: SetOverlapChartProps) => import("react/jsx-runtime").JSX.Element;

package/charts/SetOverlapChart/SetOverlapChart.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { classNames } from "../../utils/classNames";
+import { IntersectionsChart } from "./components/IntersectionsChart";
+import { IntersectionsChartAxis } from "./components/IntersectionsChartAxis";
+import { IntersectionsMatrix } from "./components/IntersectionsMatrix";
+import { SetsChart } from "./components/SetsChart";
+import { GAP_BEFORE_LEFT_BAR, TOP_GAP } from "./constants";
+import { createEmptyGridXScale, createEmptyGridYScale, createMatrixXScale, createMatrixYScale, getEmptyGridDimensions, } from "./helpers";
+import styles from "./SetOverlapChart.module.css";
+import { useSetOverlapChartSizes } from "./useSetOverlapChartSizes";
+/**
+ * UpSet-style set overlap chart built with custom SVG and d3-scale.
+ *
+ * Visualizes how records overlap across multiple sets (source systems)
+ * using three coordinated sub-charts: vertical intersection bars at the
+ * top, a dot matrix in the middle, and horizontal set bars on the left.
+ *
+ * Supports two combination modes — `"intersection"` (overlapping counts,
+ * element-level hover) and `"distinctIntersection"` (mutually exclusive
+ * counts, structural hover). Each mode requires differently shaped data
+ * despite sharing the same TypeScript types.
+ *
+ * @example
+ * ```tsx
+ * const sets = [
+ *   { name: "SAP", size: 6, elements: ["r1", "r2"] },
+ *   { name: "Oracle", size: 4, elements: ["r1", "r3"] },
+ * ];
+ * const intersections = [
+ *   { sets: ["SAP"], size: 6, elements: ["r1", "r2"] },
+ *   { sets: ["SAP", "Oracle"], size: 2, elements: ["r1"] },
+ * ];
+ *
+ * <SetOverlapChart
+ *   sets={sets}
+ *   intersections={intersections}
+ *   mode="intersection"
+ *   style={{ width: 900, height: 500 }}
+ * />
+ * ```
+ */
+export const SetOverlapChart = ({ intersections = [], sets = [], mode = "intersection", intersectionChartAxisLabel, setsChartAxisLabel, loading = false, error, className, style, ...rest }) => {
+    const containerRef = useRef(null);
+    const [hoveredSet, setHoveredSet] = useState(null);
+    const [hoveredIntersection, setHoveredIntersection] = useState(null);
+    const [[availableWidth, availableHeight], setAvailableSize] = useState([
+        0, 0,
+    ]);
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const updateSize = () => {
+            setAvailableSize([container.clientWidth, container.clientHeight]);
+        };
+        updateSize();
+        const resizeObserver = new ResizeObserver(updateSize);
+        resizeObserver.observe(container);
+        return () => resizeObserver.disconnect();
+    }, []);
+    const hasValidData = intersections.length > 0 && sets.length > 0 && !error;
+    const { labels, svgWidth, svgHeight, intersectionsChartWidth, intersectionsChartHeight, matrixY, matrixHeight, setsChartWidth, leftPadding, } = useSetOverlapChartSizes({
+        width: availableWidth,
+        height: availableHeight,
+        intersections,
+        sets,
+    });
+    const matrixXScale = useMemo(() => createMatrixXScale(intersections.length, intersectionsChartWidth), [intersections.length, intersectionsChartWidth]);
+    const matrixYScale = useMemo(() => createMatrixYScale(sets.map((set) => set.name), matrixHeight), [sets, matrixHeight]);
+    const emptyGrid = getEmptyGridDimensions(availableWidth, availableHeight);
+    const emptyXScale = useMemo(() => createEmptyGridXScale(emptyGrid.width), [emptyGrid.width]);
+    const emptyYScale = useMemo(() => createEmptyGridYScale(emptyGrid.height), [emptyGrid.height]);
+    const chartDescription = hasValidData
+        ? `Set overlap chart showing overlaps across ${sets.length} sets and ${intersections.length} intersections`
+        : "Empty set overlap chart";
+    const overlay = useMemo(() => error ? (_jsx("div", { className: classNames(styles.overlay, styles.errorOverlay), children: error })) : loading ? (_jsx("div", { className: classNames(styles.overlay, styles.loadingOverlay), children: "Loading" })) : !hasValidData ? (_jsx("div", { className: classNames(styles.overlay), children: "No data" })) : null, [error, loading, hasValidData]);
+    return (_jsxs("div", { ref: containerRef, className: classNames(styles.root, className), style: style, ...rest, children: [overlay, hasValidData ? (_jsxs("svg", { className: classNames(styles.svg), width: svgWidth, height: svgHeight, role: "img", "aria-label": chartDescription, children: [_jsx(IntersectionsMatrix, { xScale: matrixXScale, yScale: matrixYScale, intersections: intersections, sets: sets, transform: `translate(${leftPadding},${matrixY})`, hoveredIntersection: hoveredIntersection }), _jsx(SetsChart, { mode: mode, yScale: matrixYScale, width: setsChartWidth, sets: sets, labels: labels, intersections: intersections, hoveredSet: hoveredSet, hoveredIntersection: hoveredIntersection, hoverAreaWidth: svgWidth, transform: `translate(${GAP_BEFORE_LEFT_BAR},${matrixY})`, onSetHover: setHoveredSet, axisLabel: setsChartAxisLabel }), _jsx(IntersectionsChart, { mode: mode, xScale: matrixXScale, width: intersectionsChartWidth, height: intersectionsChartHeight, intersections: intersections, transform: `translate(${leftPadding},${TOP_GAP})`, matrixHeight: matrixHeight, hoveredSet: hoveredSet, hoveredIntersection: hoveredIntersection, onIntersectionHover: setHoveredIntersection, axisLabel: intersectionChartAxisLabel })] })) : (_jsx("svg", { className: classNames(styles.svg), width: availableWidth, height: availableHeight, role: "img", "aria-label": chartDescription, children: _jsx("g", { transform: `translate(${emptyGrid.left},${TOP_GAP})`, children: _jsx(IntersectionsChartAxis, { xScale: emptyXScale, yScale: emptyYScale, width: emptyGrid.width, height: emptyGrid.height }) }) }))] }));
+};

package/charts/SetOverlapChart/SetOverlapChart.module.css.d.ts

@@ -0,0 +1,2 @@
+import json from './SetOverlapChart.module.css.json';
+export default json;

package/charts/SetOverlapChart/SetOverlapChart.module.css.js

@@ -0,0 +1,36 @@
+import styleInject from 'style-inject';
+import json from './SetOverlapChart.module.css.json';
+styleInject(`
+.SetOverlapChart_root__L29wd {
+	position: relative;
+	display: flex;
+	overflow: auto;
+}
+
+.SetOverlapChart_svg__L29wd {
+	flex-shrink: 0;
+}
+
+.SetOverlapChart_overlay__L29wd {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--reltio-color-text-secondary);
+	font-size: 14px;
+	z-index: 1;
+	pointer-events: none;
+}
+
+.SetOverlapChart_errorOverlay__L29wd {
+	color: var(--reltio-color-error-font);
+}
+
+.SetOverlapChart_loadingOverlay__L29wd {
+	background-color: var(--reltio-color-bg-white);
+	opacity: 0.7;
+	pointer-events: all;
+}
+`);
+export default json;

package/charts/SetOverlapChart/SetOverlapChart.module.css.json

@@ -0,0 +1 @@
+{ "root": "SetOverlapChart_root__L29wd", "svg": "SetOverlapChart_svg__L29wd", "overlay": "SetOverlapChart_overlay__L29wd", "errorOverlay": "SetOverlapChart_errorOverlay__L29wd", "loadingOverlay": "SetOverlapChart_loadingOverlay__L29wd" }

package/charts/SetOverlapChart/SetOverlapChart.types.d.ts

@@ -0,0 +1,117 @@
+import type { HtmlProps } from "../../utils/types";
+/**
+ * Props for the SetOverlapChart component.
+ *
+ * Renders an UpSet-style set overlap visualization as a custom SVG
+ * (no ECharts). The chart is composed of three coordinated sub-charts:
+ * vertical intersection bars, a dot matrix, and horizontal set bars.
+ *
+ * The two supported modes (`"intersection"` and `"distinctIntersection"`)
+ * require **different data shapes** despite sharing the same TypeScript
+ * types — see `SetOverlapChartMode` and individual prop docs for details.
+ */
+export type SetOverlapChartProps = HtmlProps<"div", {
+    /**
+     * Intersection columns to visualize. Each entry becomes a vertical bar
+     * in the intersection chart and a column of dots in the matrix.
+     *
+     * **Data requirements vary by mode:**
+     * - `"intersection"` — `elements` must be populated with record identifiers
+     * - `"distinctIntersection"` — `elements` should be empty (`[]`)
+     */
+    intersections: Intersection[];
+    /**
+     * Sets to be visualized. Each entry becomes a horizontal
+     * bar in the set chart and a row of dots in the matrix.
+     *
+     * **Data requirements vary by mode:**
+     * - `"intersection"` — `elements` must be populated with record identifiers
+     * - `"distinctIntersection"` — `elements` should be empty (`[]`)
+     */
+    sets: DataSet[];
+    /**
+     * Combination semantics for intersection columns.
+     * Controls how hover highlighting is computed and what data fields are used.
+     *
+     * - `"intersection"` — overlapping counts; hover uses element-level filtering
+     * - `"distinctIntersection"` — mutually exclusive counts; hover uses structural matching
+     *
+     * The two modes are **not interchangeable** with the same data.
+     * @default "intersection"
+     */
+    mode?: SetOverlapChartMode;
+    /**
+     * Label text rendered alongside the intersection chart Y-axis.
+     * Examples: `"Profile count"`, `"Record count"`
+     */
+    intersectionChartAxisLabel?: string;
+    /**
+     * Label text rendered alongside the set chart X-axis.
+     * Examples: `"Set Size"`, `"Source system"`
+     */
+    setsChartAxisLabel?: string;
+    /**
+     * Shows a loading overlay on the chart.
+     * - When data is empty: loading overlay on blank area
+     * - When data is present: loading overlay on rendered chart
+     * @default false
+     */
+    loading?: boolean;
+    /** Error message. When set, replaces the chart with centered error text. */
+    error?: string;
+}>;
+/**
+ * A single intersection column in the chart plot.
+ *
+ * Represents a combination of one or more sets. In `INTERSECTION` mode
+ * the `elements` array drives hover highlighting; in `DISTINCT_INTERSECTION`
+ * mode only `sets` property is used. Identity is derived from array position.
+ */
+export type Intersection = {
+    /** Names of the sets that participate in this intersection (e.g. `["SAP", "Oracle"]`). */
+    sets: string[];
+    /** Number of records in this intersection. Determines bar height. */
+    size: number;
+    /**
+     * Record identifiers belonging to this intersection.
+     * - **`"intersection"` mode** — must be populated; used for element-level hover filtering
+     * - **`"distinctIntersection"` mode** — should be `[]`; hover uses structural matching instead
+     */
+    elements: string[];
+};
+/**
+ * A single set in the chart plot.
+ *
+ * Each set appears as a row in the matrix and a horizontal bar in the
+ * set chart. The `name` must match the strings used in `Intersection.sets`.
+ */
+export type DataSet = {
+    /** Display name and join key — must match values in `Intersection.sets`. */
+    name: string;
+    /** Total number of records in this set. Determines bar width. */
+    size: number;
+    /**
+     * Record identifiers belonging to this set.
+     * - **`"intersection"` mode** — must be populated; used for element-level hover filtering
+     * - **`"distinctIntersection"` mode** — should be `[]`; hover uses structural matching instead
+     */
+    elements: string[];
+};
+/**
+ * Combination semantics for the UpSet plot.
+ *
+ * Given a combination mask over sets [A, B, C] that selects A and B:
+ *
+ * - **`"intersection"`** — Inclusive intersection semantics.
+ *   `⋂ selectedSets` — counts elements in A ∩ B, regardless of C.
+ *   An element in A ∩ B ∩ C is counted in the A+B column AND the A+B+C
+ *   column (overlapping). Hover computation is O(E_i × E_h) per bar —
+ *   may cause lag with large data.
+ *
+ * - **`"distinctIntersection"`** — Exact-region semantics.
+ *   `(⋂ selectedSets) \ (⋃ nonSelectedSets)` — counts elements in
+ *   A ∩ B ∩ ¬C. An element is counted only in the column that matches
+ *   its precise set membership. Hover computation is O(S) per bar,
+ *   independent of dataset size.
+ */
+export type SetOverlapChartMode = "distinctIntersection" | "intersection";

package/charts/SetOverlapChart/SetOverlapChart.types.js

@@ -0,0 +1 @@
+export {};

package/charts/SetOverlapChart/components/IntersectionsChart/IntersectionsChart.d.ts

@@ -0,0 +1,2 @@
+import type { IntersectionsChartProps } from "./IntersectionsChart.types";
+export declare const IntersectionsChart: ({ mode, xScale, width, height, transform, matrixHeight, intersections, hoveredSet, hoveredIntersection, axisLabel, onIntersectionHover, }: IntersectionsChartProps) => import("react/jsx-runtime").JSX.Element;

package/charts/SetOverlapChart/components/IntersectionsChart/IntersectionsChart.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { scaleLinear } from "d3-scale";
+import { useMemo } from "react";
+import { classNames } from "../../../../utils/classNames";
+import { GAP_BETWEEN_TABLE_AND_CHART } from "../../constants";
+import { IntersectionsChartAxis } from "../IntersectionsChartAxis";
+import { getBarHeight, getBarY } from "./helpers";
+import styles from "./IntersectionsChart.module.css";
+export const IntersectionsChart = ({ mode, xScale, width, height, transform, matrixHeight, intersections, hoveredSet, hoveredIntersection, axisLabel, onIntersectionHover, }) => {
+    const yScale = useMemo(() => {
+        const intersectionsSizes = intersections.map((intersection) => intersection.size);
+        const domain = [0, Math.max(0, ...intersectionsSizes)];
+        return scaleLinear([height, 0]).domain(domain);
+    }, [intersections, height]);
+    const hoveredElementsSet = useMemo(() => {
+        const elements = hoveredIntersection?.elements || hoveredSet?.elements;
+        return elements ? new Set(elements) : null;
+    }, [hoveredIntersection, hoveredSet]);
+    return (_jsxs("g", { transform: transform, role: "listbox", "aria-label": "Intersection bars", children: [_jsx(IntersectionsChartAxis, { xScale: xScale, yScale: yScale, width: width, height: height, axisLabel: axisLabel }), intersections.map((intersection, i) => {
+                const { elements, size } = intersection;
+                const isHoveredColumn = hoveredIntersection === intersection;
+                const x = xScale(String(i)) ?? 0;
+                const y = yScale(size);
+                const barWidth = xScale.bandwidth();
+                let barY = hoveredElementsSet
+                    ? yScale(elements.filter((el) => hoveredElementsSet.has(el)).length)
+                    : y;
+                if (mode === "distinctIntersection" &&
+                    hoveredSet &&
+                    intersection.sets.includes(hoveredSet.name)) {
+                    barY = y;
+                }
+                const hoverLabel = `Intersection: ${intersection.sets.join(" ∩ ")}, size: ${size}`;
+                return (_jsxs("g", { children: [_jsx("title", { children: intersection.sets.join(" ∩ ") }), _jsx("rect", { className: classNames(styles.barBackground), x: x, y: y, width: barWidth, height: height - y }), _jsx("text", { className: classNames(styles.barLabel), x: x + barWidth / 2, y: y - 4, children: size }), _jsx("rect", { className: classNames(styles.bar), x: x, y: getBarY(mode, barY, y, isHoveredColumn), width: barWidth, height: getBarHeight(mode, height, barY, y, isHoveredColumn) }), _jsx("rect", { className: classNames(styles.hoverBar), "data-reltio-id": "intersection-hover-area", role: "option", "aria-selected": isHoveredColumn, x: x, y: y, width: barWidth, height: height - y + matrixHeight + GAP_BETWEEN_TABLE_AND_CHART - 1, tabIndex: 0, "aria-label": hoverLabel, onMouseEnter: () => onIntersectionHover(intersection), onMouseLeave: () => onIntersectionHover(null), onFocus: () => onIntersectionHover(intersection), onBlur: () => onIntersectionHover(null) })] }, intersection.sets.join(",")));
+            })] }));
+};

package/charts/SetOverlapChart/components/IntersectionsChart/IntersectionsChart.module.css.d.ts

@@ -0,0 +1,2 @@
+import json from './IntersectionsChart.module.css.json';
+export default json;

package/charts/SetOverlapChart/components/IntersectionsChart/IntersectionsChart.module.css.js

@@ -0,0 +1,40 @@
+import styleInject from 'style-inject';
+import json from './IntersectionsChart.module.css.json';
+styleInject(`
+.IntersectionsChart_bar__L29wd {
+	fill: var(--reltio-color-brand-blue);
+	transition:
+		y ease-in-out 0.3s,
+		height ease-in-out 0.3s;
+}
+
+.IntersectionsChart_barBackground__L29wd {
+	fill: var(--reltio-color-brand-blue);
+	opacity: 0.2;
+	transition:
+		y ease-in-out 0.3s,
+		height ease-in-out 0.3s;
+}
+
+.IntersectionsChart_barLabel__L29wd {
+	fill: var(--reltio-color-text);
+	font-size: 12px;
+	text-anchor: middle;
+}
+
+.IntersectionsChart_hoverBar__L29wd {
+	fill: transparent;
+	stroke: var(--reltio-color-brand-blue);
+	stroke-width: 1px;
+	cursor: pointer;
+	transition: opacity ease-in-out 0.3s;
+	opacity: 0;
+	outline: none;
+
+	&:hover,
+	&:focus-visible {
+		opacity: 1;
+	}
+}
+`);
+export default json;

package/charts/SetOverlapChart/components/IntersectionsChart/IntersectionsChart.module.css.json

@@ -0,0 +1 @@
+{ "bar": "IntersectionsChart_bar__L29wd", "barBackground": "IntersectionsChart_barBackground__L29wd", "barLabel": "IntersectionsChart_barLabel__L29wd", "hoverBar": "IntersectionsChart_hoverBar__L29wd" }

package/charts/SetOverlapChart/components/IntersectionsChart/IntersectionsChart.types.d.ts

@@ -0,0 +1,15 @@
+import type { ScaleBand } from "d3-scale";
+import type { DataSet, Intersection, SetOverlapChartMode } from "../../SetOverlapChart.types";
+export type IntersectionsChartProps = {
+    mode: SetOverlapChartMode;
+    xScale: ScaleBand<string>;
+    width: number;
+    height: number;
+    transform?: string;
+    matrixHeight: number;
+    intersections: Intersection[];
+    hoveredSet?: DataSet | null;
+    hoveredIntersection?: Intersection | null;
+    axisLabel?: string;
+    onIntersectionHover: (intersection: Intersection | null) => void;
+};

package/charts/SetOverlapChart/components/IntersectionsChart/IntersectionsChart.types.js

@@ -0,0 +1 @@
+export {};

package/charts/SetOverlapChart/components/IntersectionsChart/helpers.d.ts

@@ -0,0 +1,4 @@
+import type { SetOverlapChartMode } from "../../SetOverlapChart.types";
+declare const getBarHeight: (mode: SetOverlapChartMode, height: number, barY: number, y: number, isHoveredColumn: boolean) => number;
+declare const getBarY: (mode: SetOverlapChartMode, barY: number, y: number, isHoveredColumn: boolean) => number;
+export { getBarHeight, getBarY };

package/charts/SetOverlapChart/components/IntersectionsChart/helpers.js

@@ -0,0 +1,4 @@
+const shouldShowFixedBar = (mode, isHoveredColumn) => mode === "distinctIntersection" && isHoveredColumn;
+const getBarHeight = (mode, height, barY, y, isHoveredColumn) => height - (shouldShowFixedBar(mode, isHoveredColumn) ? y : barY);
+const getBarY = (mode, barY, y, isHoveredColumn) => (shouldShowFixedBar(mode, isHoveredColumn) ? y : barY);
+export { getBarHeight, getBarY };

package/charts/SetOverlapChart/components/IntersectionsChart/index.d.ts

@@ -0,0 +1 @@
+export { IntersectionsChart } from "./IntersectionsChart";

package/charts/SetOverlapChart/components/IntersectionsChart/index.js

@@ -0,0 +1 @@
+export { IntersectionsChart } from "./IntersectionsChart";

package/charts/SetOverlapChart/components/IntersectionsChartAxis/IntersectionsChartAxis.d.ts

@@ -0,0 +1,2 @@
+import type { IntersectionsChartAxisProps } from "./IntersectionsChartAxis.types";
+export declare const IntersectionsChartAxis: ({ xScale, yScale, width, height, axisLabel, }: IntersectionsChartAxisProps) => import("react/jsx-runtime").JSX.Element;

package/charts/SetOverlapChart/components/IntersectionsChartAxis/IntersectionsChartAxis.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { classNames } from "../../../../utils/classNames";
+import { AXIS_TICK_LABEL_SIZE } from "../../constants";
+import { calculateTicksWidth } from "./helpers";
+import styles from "./IntersectionsChartAxis.module.css";
+export const IntersectionsChartAxis = ({ xScale, yScale, width, height, axisLabel, }) => {
+    const ticks = useMemo(() => {
+        const maxValue = yScale.domain()[1];
+        return yScale
+            .copy()
+            .nice()
+            .ticks()
+            .filter((tick) => Number.isInteger(tick) && tick <= maxValue);
+    }, [yScale]);
+    const ticksWidth = useMemo(() => calculateTicksWidth(ticks), [ticks]);
+    const rootStyle = {
+        "--axis-tick-label-size": AXIS_TICK_LABEL_SIZE,
+    };
+    return (_jsxs("g", { style: rootStyle, children: [xScale.domain().map((d) => {
+                const x = (xScale(d) ?? 0) + xScale.bandwidth() / 2;
+                return (_jsx("line", { className: classNames(styles.verticalGrid), x1: x, x2: x, y1: 0, y2: height }, `v-grid-${d}`));
+            }), ticks.map((tick) => {
+                const y = yScale(tick);
+                return (_jsx("line", { className: classNames(styles.horizontalGrid), x1: 0, x2: width, y1: y, y2: y }, `h-grid-${tick}`));
+            }), _jsx("g", { children: ticks.map((tick) => {
+                    const y = yScale(tick);
+                    return (_jsxs("g", { transform: `translate(0,${y})`, children: [_jsx("line", { className: classNames(styles.axis), x1: -4, x2: 0, y1: 0, y2: 0 }), _jsx("text", { className: classNames(styles.axisTickLabel), x: -8, y: 4, children: tick })] }, `x-tick-${tick}`));
+                }) }), _jsx("line", { className: classNames(styles.axis), x1: 0, x2: 0, y1: 0, y2: height }), _jsx("line", { className: classNames(styles.axis), x1: 0, x2: width, y1: height, y2: height }), axisLabel && (_jsx("text", { className: classNames(styles.axisLabel), transform: `translate(${-ticksWidth - 12},${height / 2}) rotate(-90)`, children: axisLabel }))] }));
+};

package/charts/SetOverlapChart/components/IntersectionsChartAxis/IntersectionsChartAxis.module.css.d.ts

@@ -0,0 +1,2 @@
+import json from './IntersectionsChartAxis.module.css.json';
+export default json;

package/charts/SetOverlapChart/components/IntersectionsChartAxis/IntersectionsChartAxis.module.css.js

@@ -0,0 +1,36 @@
+import styleInject from 'style-inject';
+import json from './IntersectionsChartAxis.module.css.json';
+styleInject(`
+.IntersectionsChartAxis_axis__L29wd {
+	stroke: var(--reltio-color-border-black);
+	stroke-width: 1px;
+}
+
+.IntersectionsChartAxis_axisLabel__L29wd {
+	fill: var(--reltio-color-text);
+	opacity: 0.54;
+	font-size: 12px;
+	text-anchor: middle;
+}
+
+.IntersectionsChartAxis_axisTickLabel__L29wd {
+	font-size: var(--axis-tick-label-size);
+	fill: var(--reltio-color-text);
+	opacity: 0.54;
+	text-anchor: end;
+}
+
+.IntersectionsChartAxis_verticalGrid__L29wd {
+	stroke: var(--reltio-color-border-black);
+	opacity: 0.04;
+	stroke-width: 1px;
+	stroke-dasharray: 2;
+}
+
+.IntersectionsChartAxis_horizontalGrid__L29wd {
+	stroke: var(--reltio-color-border-black);
+	opacity: 0.04;
+	stroke-width: 1px;
+}
+`);
+export default json;

package/charts/SetOverlapChart/components/IntersectionsChartAxis/IntersectionsChartAxis.module.css.json

@@ -0,0 +1 @@
+{ "axis": "IntersectionsChartAxis_axis__L29wd", "axisLabel": "IntersectionsChartAxis_axisLabel__L29wd", "axisTickLabel": "IntersectionsChartAxis_axisTickLabel__L29wd", "verticalGrid": "IntersectionsChartAxis_verticalGrid__L29wd", "horizontalGrid": "IntersectionsChartAxis_horizontalGrid__L29wd" }

package/charts/SetOverlapChart/components/IntersectionsChartAxis/IntersectionsChartAxis.types.d.ts

@@ -0,0 +1,8 @@
+import type { ScaleBand, ScaleLinear } from "d3-scale";
+export type IntersectionsChartAxisProps = {
+    xScale: ScaleBand<string>;
+    yScale: ScaleLinear<number, number>;
+    width: number;
+    height: number;
+    axisLabel?: string;
+};

package/charts/SetOverlapChart/components/IntersectionsChartAxis/IntersectionsChartAxis.types.js

@@ -0,0 +1 @@
+export {};

package/charts/SetOverlapChart/components/IntersectionsChartAxis/helpers.d.ts

@@ -0,0 +1 @@
+export declare const calculateTicksWidth: (ticks: number[]) => number;

package/charts/SetOverlapChart/components/IntersectionsChartAxis/helpers.js

@@ -0,0 +1,3 @@
+import { AXIS_TICK_LABEL_SIZE } from "../../constants";
+import { measureText } from "../../helpers";
+export const calculateTicksWidth = (ticks) => ticks.reduce((maxWidth, tick) => Math.max(maxWidth, measureText(String(tick), AXIS_TICK_LABEL_SIZE)), 0);

package/charts/SetOverlapChart/components/IntersectionsChartAxis/index.d.ts

@@ -0,0 +1 @@
+export { IntersectionsChartAxis } from "./IntersectionsChartAxis";

package/charts/SetOverlapChart/components/IntersectionsChartAxis/index.js

@@ -0,0 +1 @@
+export { IntersectionsChartAxis } from "./IntersectionsChartAxis";

package/charts/SetOverlapChart/components/IntersectionsMatrix/IntersectionsMatrix.d.ts

@@ -0,0 +1,2 @@
+import type { IntersectionsMatrixProps } from "./IntersectionsMatrix.types";
+export declare const IntersectionsMatrix: ({ xScale, yScale, intersections, sets, transform, hoveredIntersection, }: IntersectionsMatrixProps) => import("react/jsx-runtime").JSX.Element;

package/charts/SetOverlapChart/components/IntersectionsMatrix/IntersectionsMatrix.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { classNames } from "../../../../utils/classNames";
+import { getMatrixData } from "./helpers";
+import styles from "./IntersectionsMatrix.module.css";
+export const IntersectionsMatrix = ({ xScale, yScale, intersections, sets, transform, hoveredIntersection, }) => {
+    const { circles, lines } = useMemo(() => getMatrixData(xScale, yScale, intersections, sets), [xScale, yScale, intersections, sets]);
+    const hoveredIndex = hoveredIntersection
+        ? intersections.indexOf(hoveredIntersection)
+        : -1;
+    const checkDimmed = (i) => hoveredIntersection && hoveredIndex !== i;
+    return (_jsxs("g", { transform: transform, children: [circles.map(({ cx, cy, isPresent, intersectionIndex }) => (_jsx("circle", { cx: cx, cy: cy, r: 8, className: classNames(styles.circle, isPresent && styles.activeCircle, isPresent && checkDimmed(intersectionIndex) && styles.dimmedCircle) }, `matrix-circle-${cx}-${cy}`))), lines.map(({ x, y1, y2, intersectionIndex }) => (_jsx("line", { x1: x, y1: y1, x2: x, y2: y2, className: classNames(styles.link, checkDimmed(intersectionIndex) && styles.dimmedLine) }, `matrix-line-${intersectionIndex}`)))] }));
+};

package/charts/SetOverlapChart/components/IntersectionsMatrix/IntersectionsMatrix.module.css.d.ts

@@ -0,0 +1,2 @@
+import json from './IntersectionsMatrix.module.css.json';
+export default json;

package/charts/SetOverlapChart/components/IntersectionsMatrix/IntersectionsMatrix.module.css.js

@@ -0,0 +1,29 @@
+import styleInject from 'style-inject';
+import json from './IntersectionsMatrix.module.css.json';
+styleInject(`
+.IntersectionsMatrix_circle__L29wd {
+	stroke-width: 2px;
+	fill: var(--reltio-color-surface-3);
+	stroke: var(--reltio-color-surface-3);
+	transition: fill ease-in-out 0.3s;
+}
+
+.IntersectionsMatrix_activeCircle__L29wd {
+	fill: var(--reltio-color-brand-blue);
+}
+
+.IntersectionsMatrix_dimmedCircle__L29wd {
+	fill: var(--reltio-color-border-3);
+}
+
+.IntersectionsMatrix_link__L29wd {
+	stroke: var(--reltio-color-brand-blue);
+	stroke-width: 2px;
+	transition: stroke ease-in-out 0.3s;
+}
+
+.IntersectionsMatrix_dimmedLine__L29wd {
+	stroke: var(--reltio-color-border-3);
+}
+`);
+export default json;

package/charts/SetOverlapChart/components/IntersectionsMatrix/IntersectionsMatrix.module.css.json

@@ -0,0 +1 @@
+{ "circle": "IntersectionsMatrix_circle__L29wd", "activeCircle": "IntersectionsMatrix_activeCircle__L29wd", "dimmedCircle": "IntersectionsMatrix_dimmedCircle__L29wd", "link": "IntersectionsMatrix_link__L29wd", "dimmedLine": "IntersectionsMatrix_dimmedLine__L29wd" }

package/charts/SetOverlapChart/components/IntersectionsMatrix/IntersectionsMatrix.types.d.ts

@@ -0,0 +1,22 @@
+import type { ScaleBand } from "d3-scale";
+import type { DataSet, Intersection } from "../../SetOverlapChart.types";
+export type IntersectionsMatrixProps = {
+    xScale: ScaleBand<string>;
+    yScale: ScaleBand<string>;
+    intersections: Intersection[];
+    sets: DataSet[];
+    transform: string;
+    hoveredIntersection: Intersection | null;
+};
+export type IntersectionCircle = {
+    cx: number;
+    cy: number;
+    isPresent: boolean;
+    intersectionIndex: number;
+};
+export type IntersectionLine = {
+    x: number;
+    y1: number;
+    y2: number;
+    intersectionIndex: number;
+};

package/charts/SetOverlapChart/components/IntersectionsMatrix/IntersectionsMatrix.types.js

@@ -0,0 +1 @@
+export {};

package/charts/SetOverlapChart/components/IntersectionsMatrix/helpers.d.ts

@@ -0,0 +1,7 @@
+import type { ScaleBand } from "d3-scale";
+import type { DataSet, Intersection } from "../../SetOverlapChart.types";
+import type { IntersectionCircle, IntersectionLine } from "./IntersectionsMatrix.types";
+export declare const getMatrixData: (xScale: ScaleBand<string>, yScale: ScaleBand<string>, intersections: Intersection[], sets: DataSet[]) => {
+    circles: IntersectionCircle[];
+    lines: IntersectionLine[];
+};

package/charts/SetOverlapChart/components/IntersectionsMatrix/helpers.js

@@ -0,0 +1,25 @@
+export const getMatrixData = (xScale, yScale, intersections, sets) => {
+    const circles = intersections.flatMap((intersection, i) => sets.map((set) => ({
+        cx: (xScale(String(i)) ?? 0) + xScale.bandwidth() / 2,
+        cy: (yScale(set.name) ?? 0) + yScale.bandwidth() / 2,
+        isPresent: intersection.sets.includes(set.name),
+        intersectionIndex: i,
+    })));
+    const lines = intersections.reduce((acc, intersection, i) => {
+        const activeSetIndices = intersection.sets
+            .map((name) => sets.findIndex((set) => set.name === name))
+            .filter((i) => i >= 0)
+            .sort((a, b) => a - b);
+        if (activeSetIndices.length > 1) {
+            const firstIdx = activeSetIndices[0];
+            const lastIdx = activeSetIndices[activeSetIndices.length - 1];
+            const x = (xScale(String(i)) ?? 0) + xScale.bandwidth() / 2;
+            const y1 = (yScale(sets[firstIdx].name) ?? 0) + yScale.bandwidth() / 2;
+            const y2 = (yScale(sets[lastIdx].name) ?? 0) + yScale.bandwidth() / 2;
+            acc.push({ x, y1, y2, intersectionIndex: i });
+            return acc;
+        }
+        return acc;
+    }, []);
+    return { circles, lines };
+};

package/charts/SetOverlapChart/components/IntersectionsMatrix/index.d.ts

@@ -0,0 +1 @@
+export { IntersectionsMatrix } from "./IntersectionsMatrix";