@reltio/components 1.4.1998 → 1.4.1999

package/cjs/UpSetChart/components/IntersectionsMatrix/styles.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@mui/styles");
+var constants_1 = require("../../constants");
+exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
+    circle: {
+        strokeWidth: '2px',
+        fill: '#EEEEEE',
+        stroke: '#EEEEEE',
+        transition: 'fill ease-in-out 0.3s'
+    },
+    activeCircle: {
+        fill: constants_1.PRIMARY_COLOR
+    },
+    dimmedCircle: {
+        fill: constants_1.DIMMED_COLOR
+    },
+    link: {
+        stroke: constants_1.PRIMARY_COLOR,
+        strokeWidth: '2px',
+        transition: 'stroke ease-in-out 0.3s'
+    },
+    dimmedLine: {
+        stroke: constants_1.DIMMED_COLOR
+    }
+}); });

package/cjs/UpSetChart/components/SetsChart/SetsChart.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ScaleBand } from 'd3-scale';
+import { DataSet } from '../../types';
+type Props = {
+    sets: DataSet[];
+    width: number;
+    yScale: ScaleBand<string>;
+    labels: string[];
+    transform?: string;
+    hoverAreaWidth: number;
+    hoveredElements?: string[];
+    onSetHover: (set: DataSet) => void;
+};
+export declare const SetsChart: ({ sets, width, yScale, transform, labels, hoveredElements, hoverAreaWidth, onSetHover }: Props) => React.JSX.Element;
+export {};

package/cjs/UpSetChart/components/SetsChart/SetsChart.js

@@ -0,0 +1,58 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SetsChart = void 0;
+var react_1 = __importStar(require("react"));
+var d3_scale_1 = require("d3-scale");
+var SetsChartAxis_1 = require("../SetsChartAxis");
+var constants_1 = require("../../constants");
+var styles_1 = require("./styles");
+var SetsChart = function (_a) {
+    var sets = _a.sets, width = _a.width, yScale = _a.yScale, transform = _a.transform, labels = _a.labels, hoveredElements = _a.hoveredElements, hoverAreaWidth = _a.hoverAreaWidth, onSetHover = _a.onSetHover;
+    var styles = (0, styles_1.useStyles)();
+    var containerRef = react_1.default.useRef(null);
+    var xScale = (0, react_1.useMemo)(function () {
+        var maxSetSize = sets.length > 0 ? Math.max.apply(Math, sets.map(function (set) { return set.size; })) : 0;
+        return (0, d3_scale_1.scaleLinear)().domain([0, maxSetSize]).range([0, width]);
+    }, [width, sets]);
+    return (react_1.default.createElement("g", { ref: containerRef, transform: transform },
+        react_1.default.createElement(SetsChartAxis_1.SetsChartAxis, { width: width }),
+        sets.map(function (set, i) {
+            var name = set.name, size = set.size, elements = set.elements;
+            var label = labels[i];
+            var height = yScale.bandwidth();
+            var y = yScale(name) + height / 2 - constants_1.SET_BAR_HEIGHT / 2;
+            var lineY = yScale(name) + height;
+            var barSize = hoveredElements ? elements.filter(function (el) { return hoveredElements.includes(el); }).length : size;
+            return (react_1.default.createElement("g", { key: "set-group-".concat(i) },
+                react_1.default.createElement("rect", { className: styles.setsBarBackground, x: 0, y: y, width: width, height: constants_1.SET_BAR_HEIGHT }),
+                react_1.default.createElement("rect", { className: styles.setsBarDimmed, x: width - xScale(size), y: y, width: xScale(size), height: constants_1.SET_BAR_HEIGHT }),
+                react_1.default.createElement("rect", { className: styles.setsBar, x: width - xScale(barSize), y: y, width: xScale(barSize), height: constants_1.SET_BAR_HEIGHT }),
+                i !== sets.length - 1 && (react_1.default.createElement("line", { className: styles.gridLine, x1: 0, x2: hoverAreaWidth, y1: lineY, y2: lineY })),
+                react_1.default.createElement("text", { className: styles.setsLabel, x: width + constants_1.TEXT_GAP, y: yScale(name) + height / 2 }, label),
+                react_1.default.createElement("rect", { className: styles.hoverBar, "data-reltio-id": "set-hover-area", x: -constants_1.GAP_BEFORE_LEFT_BAR + 1, y: yScale(name), width: hoverAreaWidth - 2, height: height, onMouseEnter: function () { return onSetHover(set); }, onMouseLeave: function () { return onSetHover(null); } })));
+        })));
+};
+exports.SetsChart = SetsChart;

package/cjs/UpSetChart/components/SetsChart/index.d.ts

@@ -0,0 +1 @@
+export { SetsChart } from './SetsChart';

package/cjs/UpSetChart/components/SetsChart/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SetsChart = void 0;
+var SetsChart_1 = require("./SetsChart");
+Object.defineProperty(exports, "SetsChart", { enumerable: true, get: function () { return SetsChart_1.SetsChart; } });

package/cjs/UpSetChart/components/SetsChart/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"setsBarBackground" | "setsBarDimmed" | "setsBar" | "hoverBar" | "setsLabel" | "gridLine">;

package/cjs/UpSetChart/components/SetsChart/styles.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@mui/styles");
+var constants_1 = require("../../constants");
+exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
+    setsBarBackground: {
+        fill: constants_1.PRIMARY_COLOR,
+        opacity: 0.08,
+        transition: 'x ease-in-out 0.3s, width ease-in-out 0.3s'
+    },
+    setsBarDimmed: {
+        fill: constants_1.DIMMED_COLOR,
+        transition: 'x ease-in-out 0.3s, width ease-in-out 0.3s'
+    },
+    setsBar: {
+        fill: constants_1.PRIMARY_COLOR,
+        transition: 'x ease-in-out 0.3s, width ease-in-out 0.3s'
+    },
+    hoverBar: {
+        fill: 'transparent',
+        strokeWidth: '1px',
+        cursor: 'pointer',
+        stroke: constants_1.PRIMARY_COLOR,
+        opacity: 0,
+        transition: 'opacity ease-in-out 0.3s',
+        '&:hover': {
+            opacity: 1
+        }
+    },
+    setsLabel: {
+        fontSize: constants_1.SET_LABEL_SIZE,
+        fill: constants_1.TEXT_COLOR,
+        textAnchor: 'start',
+        dominantBaseline: 'middle',
+        transition: 'all ease-in-out 0.3s'
+    },
+    gridLine: {
+        stroke: '#000000',
+        opacity: 0.04,
+        strokeWidth: '1px'
+    }
+}); });

package/cjs/UpSetChart/components/SetsChartAxis/SetsChartAxis.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type Props = {
+    width: number;
+};
+export declare const SetsChartAxis: ({ width }: Props) => React.JSX.Element;
+export {};

package/cjs/UpSetChart/components/SetsChartAxis/SetsChartAxis.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SetsChartAxis = void 0;
+var react_1 = __importDefault(require("react"));
+var styles_1 = require("./styles");
+var SetsChartAxis = function (_a) {
+    var width = _a.width;
+    var styles = (0, styles_1.useStyles)();
+    return (react_1.default.createElement("g", null,
+        react_1.default.createElement("g", { transform: "translate(0,0)" },
+            react_1.default.createElement("line", { y2: -6, className: styles.axisTick }),
+            react_1.default.createElement("text", { x: 0, y: -9, className: styles.axisTickLabel }, "100%")),
+        react_1.default.createElement("g", { transform: "translate(".concat(width, ",0)") },
+            react_1.default.createElement("line", { y2: -6, className: styles.axisTick }),
+            react_1.default.createElement("text", { x: 0, y: -9, className: styles.axisTickLabel }, "0%"))));
+};
+exports.SetsChartAxis = SetsChartAxis;

package/cjs/UpSetChart/components/SetsChartAxis/index.d.ts

@@ -0,0 +1 @@
+export { SetsChartAxis } from './SetsChartAxis';

package/cjs/UpSetChart/components/SetsChartAxis/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SetsChartAxis = void 0;
+var SetsChartAxis_1 = require("./SetsChartAxis");
+Object.defineProperty(exports, "SetsChartAxis", { enumerable: true, get: function () { return SetsChartAxis_1.SetsChartAxis; } });

package/cjs/UpSetChart/components/SetsChartAxis/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"axisTick" | "axisTickLabel">;

package/cjs/UpSetChart/components/SetsChartAxis/styles.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@mui/styles");
+exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
+    axisTick: {
+        stroke: '#000000',
+        strokeWidth: '1px',
+        opacity: 0.54
+    },
+    axisTickLabel: {
+        fontSize: '10px',
+        fill: '#000000',
+        opacity: 0.54,
+        textAnchor: 'middle'
+    }
+}); });

package/cjs/UpSetChart/constants.d.ts

@@ -1,4 +1,17 @@
-export declare const NOT_MEMBER_COLOR = "rgb(238, 238, 238)";
-export declare const PRIMARY_COLOR = "rgb(0, 0, 102)";
-export declare const SECONDARY_COLOR = "rgba(0, 0, 102, 0.2)";
+export declare const PRIMARY_COLOR = "#000066";
+export declare const DIMMED_COLOR = "#CCCCE0";
 export declare const TEXT_COLOR = "rgba(0, 0, 0, 0.87)";
+export declare const TOP_GAP = 24;
+export declare const TEXT_GAP = 16;
+export declare const GAP_BETWEEN_TABLE_AND_CHART = 8;
+export declare const GAP_BEFORE_LEFT_BAR = 12;
+export declare const AXIS_TICK_LABEL_SIZE = "12px";
+export declare const SET_LABEL_SIZE = "13px";
+export declare const SET_BAR_HEIGHT = 12;
+export declare const MATRIX_ROW_HEIGHT = 29;
+export declare const MIN_MATRIX_COLUMN_WIDTH = 28;
+export declare const MIN_INTERSECTION_CHART_HEIGHT = 120;
+export declare const MIN_SETS_CHART_WIDTH = 100;
+export declare const MAX_SETS_CHART_WIDTH = 200;
+export declare const MAX_CHARACTERS = 20;
+export declare const MIN_CHARACTERS = 8;

package/cjs/UpSetChart/constants.js

@@ -1,7 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TEXT_COLOR = exports.SECONDARY_COLOR = exports.PRIMARY_COLOR = exports.NOT_MEMBER_COLOR = void 0;
-exports.NOT_MEMBER_COLOR = 'rgb(238, 238, 238)';
-exports.PRIMARY_COLOR = 'rgb(0, 0, 102)';
-exports.SECONDARY_COLOR = 'rgba(0, 0, 102, 0.2)';
+exports.MIN_CHARACTERS = exports.MAX_CHARACTERS = exports.MAX_SETS_CHART_WIDTH = exports.MIN_SETS_CHART_WIDTH = exports.MIN_INTERSECTION_CHART_HEIGHT = exports.MIN_MATRIX_COLUMN_WIDTH = exports.MATRIX_ROW_HEIGHT = exports.SET_BAR_HEIGHT = exports.SET_LABEL_SIZE = exports.AXIS_TICK_LABEL_SIZE = exports.GAP_BEFORE_LEFT_BAR = exports.GAP_BETWEEN_TABLE_AND_CHART = exports.TEXT_GAP = exports.TOP_GAP = exports.TEXT_COLOR = exports.DIMMED_COLOR = exports.PRIMARY_COLOR = void 0;
+// Colors
+exports.PRIMARY_COLOR = '#000066';
+exports.DIMMED_COLOR = '#CCCCE0';
 exports.TEXT_COLOR = 'rgba(0, 0, 0, 0.87)';
+// Gaps
+exports.TOP_GAP = 24;
+exports.TEXT_GAP = 16;
+exports.GAP_BETWEEN_TABLE_AND_CHART = 8;
+exports.GAP_BEFORE_LEFT_BAR = 12;
+// Sizes
+exports.AXIS_TICK_LABEL_SIZE = '12px';
+exports.SET_LABEL_SIZE = '13px';
+exports.SET_BAR_HEIGHT = 12;
+exports.MATRIX_ROW_HEIGHT = 29;
+exports.MIN_MATRIX_COLUMN_WIDTH = 28;
+exports.MIN_INTERSECTION_CHART_HEIGHT = 120;
+exports.MIN_SETS_CHART_WIDTH = 100;
+exports.MAX_SETS_CHART_WIDTH = 200;
+exports.MAX_CHARACTERS = 20;
+exports.MIN_CHARACTERS = 8;

package/cjs/UpSetChart/gameOfThrones.test-data.d.ts

@@ -0,0 +1,4 @@
+export declare const gameOfThronesData: {
+    name: string;
+    sets: string[];
+}[];

package/cjs/UpSetChart/gameOfThrones.test-data.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.gameOfThronesData = void 0;
+exports.gameOfThronesData = [
+    { name: 'Alton Lannister', sets: ['was killed', 'Lannister', 'male'] },
+    { name: 'Arya Stark', sets: ['Stark', 'female'] },
+    { name: 'Bran Stark', sets: ['royal', 'Stark', 'male'] },
+    { name: 'Benjen Stark', sets: ['was killed', 'Stark', 'male'] },
+    { name: 'Brandon Stark', sets: ['was killed', 'Stark'] },
+    { name: 'Catelyn Stark', sets: ['was killed', 'Stark', 'female'] },
+    { name: 'Cersei Lannister', sets: ['royal', 'was killed', 'Lannister', 'female'] },
+    { name: 'Eddard Stark', sets: ['was killed', 'Stark', 'male'] },
+    { name: 'Jaime Lannister', sets: ['was killed', 'Lannister', 'male'] },
+    { name: 'Jon Snow', sets: ['royal', 'was killed', 'Stark', 'male'] },
+    { name: 'Kevan Lannister', sets: ['was killed', 'Lannister', 'male'] },
+    { name: 'Lancel Lannister', sets: ['was killed', 'Lannister', 'male'] },
+    { name: 'Lyanna Stark', sets: ['was killed', 'Stark', 'female'] },
+    { name: 'Martyn Lannister', sets: ['was killed', 'Lannister', 'male'] },
+    { name: 'Rickard Stark', sets: ['was killed', 'Stark', 'male'] },
+    { name: 'Rickon Stark', sets: ['was killed', 'Stark', 'male'] },
+    { name: 'Robb Stark', sets: ['royal', 'was killed', 'Stark', 'male'] },
+    { name: 'Sansa Stark', sets: ['royal', 'Stark', 'female'] },
+    { name: 'Tyrion Lannister', sets: ['Lannister', 'male'] },
+    { name: 'Tywin Lannister', sets: ['was killed', 'Lannister', 'male'] },
+    { name: 'Willem Lannister', sets: ['was killed', 'Lannister', 'male'] }
+];

package/cjs/UpSetChart/helpers.d.ts

@@ -0,0 +1,20 @@
+import { ScaleBand } from 'd3-scale';
+import { DataSet, Intersection, UpSetChartData } from './types';
+export declare const findIntersections: (data: UpSetChartData) => {
+    intersections: Intersection[];
+    sets: DataSet[];
+};
+export declare const getMatrixData: (xScale: ScaleBand<string>, yScale: ScaleBand<string>, intersections: Intersection[], sets: DataSet[]) => {
+    circles: {
+        cx: number;
+        cy: number;
+        isPresent: boolean;
+        intersectionIndex: number;
+    }[];
+    lines: any[];
+};
+export declare const truncateLabels: (sets: DataSet[], maxLabelsWidth: number) => {
+    labels: string[];
+    maxWidth: number;
+};
+export declare const calculateTicksWidth: (ticks: number[]) => number;

package/cjs/UpSetChart/helpers.js

@@ -0,0 +1,127 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateTicksWidth = exports.truncateLabels = exports.getMatrixData = exports.findIntersections = void 0;
+var constants_1 = require("./constants");
+var findIntersections = function (data) {
+    var setsCombinations = {};
+    var individualSets = {};
+    data.forEach(function (_a) {
+        var name = _a.name, sets = _a.sets;
+        sets.forEach(function (set) {
+            if (!individualSets[set]) {
+                individualSets[set] = [];
+            }
+            individualSets[set].push(name);
+        });
+        var generateCombinations = function (subset, index) {
+            if (index === sets.length) {
+                if (subset.length > 0) {
+                    var key = subset.sort().join(',');
+                    if (!setsCombinations[key]) {
+                        setsCombinations[key] = [];
+                    }
+                    setsCombinations[key].push(name);
+                }
+                return;
+            }
+            generateCombinations(subset, index + 1);
+            generateCombinations(__spreadArray(__spreadArray([], subset, true), [sets[index]], false), index + 1);
+        };
+        generateCombinations([], 0);
+    });
+    var intersections = Object.entries(setsCombinations)
+        .map(function (_a, index) {
+        var key = _a[0], elements = _a[1];
+        return ({
+            index: index,
+            sets: key.split(','),
+            size: elements.length,
+            elements: elements
+        });
+    })
+        .sort(function (a, b) { return b.size - a.size; });
+    var sets = Object.entries(individualSets).map(function (_a, index) {
+        var name = _a[0], elements = _a[1];
+        return ({
+            index: index,
+            name: name,
+            size: elements.length,
+            elements: elements
+        });
+    });
+    return { intersections: intersections, sets: sets };
+};
+exports.findIntersections = findIntersections;
+var getMatrixData = function (xScale, yScale, intersections, sets) {
+    var circles = intersections.flatMap(function (intersection, i) {
+        return sets.map(function (set) { return ({
+            cx: xScale(String(i)) + xScale.bandwidth() / 2,
+            cy: yScale(set.name) + yScale.bandwidth() / 2,
+            isPresent: intersection.sets.includes(set.name),
+            intersectionIndex: intersection.index
+        }); });
+    });
+    var lines = intersections.reduce(function (acc, intersection, i) {
+        var activeSetIndices = intersection.sets
+            .map(function (name) { return sets.findIndex(function (set) { return set.name === name; }); })
+            .filter(function (i) { return i >= 0; })
+            .sort(function (a, b) { return a - b; });
+        if (activeSetIndices.length > 1) {
+            var firstIdx = activeSetIndices[0];
+            var lastIdx = activeSetIndices[activeSetIndices.length - 1];
+            var x = xScale(String(i)) + xScale.bandwidth() / 2;
+            var y1 = yScale(sets[firstIdx].name) + yScale.bandwidth() / 2;
+            var y2 = yScale(sets[lastIdx].name) + yScale.bandwidth() / 2;
+            return __spreadArray(__spreadArray([], acc, true), [{ x: x, y1: y1, y2: y2, intersectionIndex: intersection.index }], false);
+        }
+        return acc;
+    }, []);
+    return { circles: circles, lines: lines };
+};
+exports.getMatrixData = getMatrixData;
+var truncateLabels = function (sets, maxLabelsWidth) {
+    var newTruncatedLabels = [];
+    var maxWidth = 0;
+    var tempSvgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    document.body.appendChild(tempSvgElement);
+    var tempTextElement = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+    tempTextElement.setAttribute('font-size', constants_1.SET_LABEL_SIZE);
+    tempSvgElement.appendChild(tempTextElement);
+    sets.forEach(function (_a) {
+        var name = _a.name;
+        var truncatedText = name.length > constants_1.MAX_CHARACTERS ? name.slice(0, constants_1.MAX_CHARACTERS) + '...' : name;
+        tempTextElement.textContent = truncatedText;
+        while (tempTextElement.getBBox().width > maxLabelsWidth && truncatedText.length > constants_1.MIN_CHARACTERS) {
+            truncatedText = truncatedText.slice(0, -4) + '...';
+            tempTextElement.textContent = truncatedText;
+        }
+        newTruncatedLabels.push(truncatedText);
+        maxWidth = Math.max(maxWidth, tempTextElement.getBBox().width);
+    });
+    document.body.removeChild(tempSvgElement);
+    return { labels: newTruncatedLabels, maxWidth: maxWidth };
+};
+exports.truncateLabels = truncateLabels;
+var calculateTicksWidth = function (ticks) {
+    var tempSvgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    var tempTextElement = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+    tempTextElement.setAttribute('font-size', constants_1.AXIS_TICK_LABEL_SIZE);
+    tempSvgElement.appendChild(tempTextElement);
+    document.body.appendChild(tempSvgElement);
+    var maxWidth = ticks.reduce(function (maxWidth, tick) {
+        tempTextElement.textContent = String(tick);
+        return Math.max(maxWidth, tempTextElement.getBBox().width);
+    }, 0);
+    document.body.removeChild(tempSvgElement);
+    return maxWidth;
+};
+exports.calculateTicksWidth = calculateTicksWidth;

package/cjs/UpSetChart/styles.d.ts

@@ -1 +1,4 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"setLabel" | "barLabel" | "axisTick" | "chartLabel">;
+export declare const useStyles: (props: {
+    width: number;
+    height: number;
+}) => import("@mui/styles").ClassNameMap<"svg" | "wrapper">;

package/cjs/UpSetChart/styles.js

@@ -2,18 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
 var styles_1 = require("@mui/styles");
-exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
-    setLabel: {
-        fontSize: '13px !important'
+exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
+    wrapper: function (_a) {
+        var width = _a.width, height = _a.height;
+        return ({
+            width: width,
+            height: height,
+            display: 'flex',
+            overflow: 'auto'
+        });
     },
-    barLabel: {
-        fontSize: '12px !important'
-    },
-    axisTick: {
-        fontSize: '12px !important'
-    },
-    chartLabel: {
-        fill: "".concat(theme.palette.text.secondary, " !important"),
-        fontSize: '10px !important'
+    svg: {
+        flexShrink: '0'
     }
 }); });

package/cjs/UpSetChart/types.d.ts

@@ -0,0 +1,16 @@
+export type UpSetChartData = {
+    name: string;
+    sets: string[];
+}[];
+export type Intersection = {
+    index: number;
+    sets: string[];
+    size: number;
+    elements: string[];
+};
+export type DataSet = {
+    index: number;
+    name: string;
+    size: number;
+    elements: string[];
+};

package/cjs/UpSetChart/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/UpSetChart/useUpSetChartSizes.d.ts

@@ -0,0 +1,20 @@
+import { DataSet, Intersection } from './types';
+type Props = {
+    width: number;
+    height: number;
+    intersections: Intersection[];
+    sets: DataSet[];
+};
+export declare const useUpSetChartSizes: ({ width, height, intersections, sets }: Props) => {
+    labels: string[];
+    svgWidth: number;
+    svgHeight: number;
+    intersectionsChartWidth: number;
+    intersectionsChartHeight: number;
+    matrixY: number;
+    matrixHeight: number;
+    maxLabelsWidth: number;
+    leftPadding: number;
+    setsChartWidth: number;
+};
+export {};

package/cjs/UpSetChart/useUpSetChartSizes.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useUpSetChartSizes = void 0;
+var constants_1 = require("./constants");
+var helpers_1 = require("./helpers");
+var useUpSetChartSizes = function (_a) {
+    var width = _a.width, height = _a.height, intersections = _a.intersections, sets = _a.sets;
+    var minMatrixWidth = intersections.length * constants_1.MIN_MATRIX_COLUMN_WIDTH * 1.2;
+    var matrixHeight = sets.length * constants_1.MATRIX_ROW_HEIGHT;
+    var availableLabelsWidth = width - minMatrixWidth - constants_1.TEXT_GAP * 2 - constants_1.GAP_BEFORE_LEFT_BAR - constants_1.MIN_SETS_CHART_WIDTH;
+    var _b = (0, helpers_1.truncateLabels)(sets, availableLabelsWidth), labels = _b.labels, labelsWidth = _b.maxWidth;
+    var availableSetsChartWidth = width - minMatrixWidth - constants_1.TEXT_GAP * 2 - constants_1.GAP_BEFORE_LEFT_BAR - labelsWidth;
+    var setsChartWidth = Math.min(Math.max(availableSetsChartWidth, constants_1.MIN_SETS_CHART_WIDTH), constants_1.MAX_SETS_CHART_WIDTH);
+    var maxLabelsWidth = width - minMatrixWidth - constants_1.TEXT_GAP * 2 - constants_1.GAP_BEFORE_LEFT_BAR - setsChartWidth;
+    var leftPadding = setsChartWidth + labelsWidth + constants_1.TEXT_GAP * 2 + constants_1.GAP_BEFORE_LEFT_BAR;
+    var intersectionsChartWidth = Math.max(minMatrixWidth, width - leftPadding);
+    var intersectionsChartHeight = Math.max(constants_1.MIN_INTERSECTION_CHART_HEIGHT, height - constants_1.TOP_GAP - matrixHeight - constants_1.GAP_BETWEEN_TABLE_AND_CHART);
+    var svgWidth = leftPadding + intersectionsChartWidth;
+    var svgHeight = intersectionsChartHeight + matrixHeight + constants_1.TOP_GAP + constants_1.GAP_BETWEEN_TABLE_AND_CHART;
+    var matrixY = svgHeight - matrixHeight - 1;
+    return {
+        labels: labels,
+        svgWidth: svgWidth,
+        svgHeight: svgHeight,
+        intersectionsChartWidth: intersectionsChartWidth,
+        intersectionsChartHeight: intersectionsChartHeight,
+        matrixY: matrixY,
+        matrixHeight: matrixHeight,
+        maxLabelsWidth: maxLabelsWidth,
+        leftPadding: leftPadding,
+        setsChartWidth: setsChartWidth
+    };
+};
+exports.useUpSetChartSizes = useUpSetChartSizes;

package/esm/UpSetChart/UpSetChart.d.ts

@@ -1,12 +1,9 @@
 import React from 'react';
-type DataItem = {
-    name: string;
-    sets: string[];
-};
+import { UpSetChartData } from './types';
 type Props = {
-    width: number;
-    height: number;
-    data: DataItem[];
+    data: UpSetChartData;
+    width?: number;
+    height?: number;
 };
-export declare const UpSetChart: ({ width, height, data }: Props) => React.JSX.Element;
+export declare const UpSetChart: ({ data, width, height }: Props) => React.JSX.Element;
 export {};

package/esm/UpSetChart/UpSetChart.js

@@ -1,7 +1,40 @@
-import React from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { scaleBand } from 'd3-scale';
+import Tooltip from '@mui/material/Tooltip';
+import { SetsChart } from './components/SetsChart';
+import { IntersectionsMatrix } from './components/IntersectionsMatrix';
+import { IntersectionsChart } from './components/IntersectionsChart';
+import { useUpSetChartSizes } from './useUpSetChartSizes';
+import { GAP_BEFORE_LEFT_BAR, TOP_GAP } from './constants';
+import { findIntersections } from './helpers';
+import { useStyles } from './styles';
 export var UpSetChart = function (_a) {
-    var width = _a.width, height = _a.height, data = _a.data;
-    if (!width || !height || !data)
-        return null;
-    return React.createElement("div", null, "UpSet");
+    var data = _a.data, width = _a.width, height = _a.height;
+    var styles = useStyles({ width: width, height: height });
+    var containerRef = useRef(null);
+    var _b = useState(null), hoveredSet = _b[0], setHoveredSet = _b[1];
+    var _c = useState(null), hoveredIntersection = _c[0], setHoveredIntersection = _c[1];
+    var _d = useState([width, height]), _e = _d[0], availableWidth = _e[0], availableHeight = _e[1], setAvailableSize = _d[1];
+    var _f = useMemo(function () { return findIntersections(data); }, [data]), intersections = _f.intersections, sets = _f.sets;
+    var hoveredElements = (hoveredIntersection === null || hoveredIntersection === void 0 ? void 0 : hoveredIntersection.elements) || (hoveredSet === null || hoveredSet === void 0 ? void 0 : hoveredSet.elements);
+    var tooltipTitle = hoveredIntersection === null || hoveredIntersection === void 0 ? void 0 : hoveredIntersection.sets.join(' ∩ ');
+    var _g = useUpSetChartSizes({ width: availableWidth, height: availableHeight, intersections: intersections, sets: sets }), labels = _g.labels, svgWidth = _g.svgWidth, svgHeight = _g.svgHeight, intersectionsChartWidth = _g.intersectionsChartWidth, intersectionsChartHeight = _g.intersectionsChartHeight, matrixY = _g.matrixY, matrixHeight = _g.matrixHeight, setsChartWidth = _g.setsChartWidth, leftPadding = _g.leftPadding;
+    var matrixXScale = useMemo(function () {
+        var domain = intersections.map(function (_, i) { return String(i); });
+        return scaleBand([0, intersectionsChartWidth]).domain(domain).paddingInner(0.2);
+    }, [intersections, intersectionsChartWidth]);
+    var matrixYScale = useMemo(function () {
+        var domain = sets.map(function (set) { return set.name; });
+        return scaleBand([0, matrixHeight]).domain(domain);
+    }, [sets, matrixHeight]);
+    useEffect(function () {
+        var _a = containerRef.current || {}, clientWidth = _a.clientWidth, clientHeight = _a.clientHeight;
+        setAvailableSize([clientWidth || width, clientHeight || height]);
+    }, [width, height]);
+    return (React.createElement("div", { ref: containerRef, className: styles.wrapper },
+        React.createElement(Tooltip, { title: tooltipTitle, followCursor: true },
+            React.createElement("svg", { className: styles.svg, width: svgWidth, height: svgHeight },
+                React.createElement(IntersectionsMatrix, { xScale: matrixXScale, yScale: matrixYScale, intersections: intersections, sets: sets, transform: "translate(".concat(leftPadding, ",").concat(matrixY, ")"), hoveredIntersection: hoveredIntersection }),
+                React.createElement(SetsChart, { yScale: matrixYScale, width: setsChartWidth, sets: sets, labels: labels, hoveredElements: hoveredElements, hoverAreaWidth: svgWidth, transform: "translate(".concat(GAP_BEFORE_LEFT_BAR, ",").concat(matrixY, ")"), onSetHover: setHoveredSet }),
+                React.createElement(IntersectionsChart, { xScale: matrixXScale, width: intersectionsChartWidth, height: intersectionsChartHeight, intersections: intersections, highlightedElements: hoveredElements, transform: "translate(".concat(leftPadding, ",").concat(TOP_GAP, ")"), matrixHeight: matrixHeight, onIntersectionHover: setHoveredIntersection })))));
 };

package/esm/UpSetChart/UpSetChart.test.d.ts

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