@reltio/components 1.4.1998 → 1.4.1999

package/cjs/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/cjs/UpSetChart/UpSetChart.js

@@ -1,14 +1,70 @@
 "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;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UpSetChart = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
+var d3_scale_1 = require("d3-scale");
+var Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
+var SetsChart_1 = require("./components/SetsChart");
+var IntersectionsMatrix_1 = require("./components/IntersectionsMatrix");
+var IntersectionsChart_1 = require("./components/IntersectionsChart");
+var useUpSetChartSizes_1 = require("./useUpSetChartSizes");
+var constants_1 = require("./constants");
+var helpers_1 = require("./helpers");
+var styles_1 = require("./styles");
 var UpSetChart = function (_a) {
-    var width = _a.width, height = _a.height, data = _a.data;
-    if (!width || !height || !data)
-        return null;
-    return react_1.default.createElement("div", null, "UpSet");
+    var data = _a.data, width = _a.width, height = _a.height;
+    var styles = (0, styles_1.useStyles)({ width: width, height: height });
+    var containerRef = (0, react_1.useRef)(null);
+    var _b = (0, react_1.useState)(null), hoveredSet = _b[0], setHoveredSet = _b[1];
+    var _c = (0, react_1.useState)(null), hoveredIntersection = _c[0], setHoveredIntersection = _c[1];
+    var _d = (0, react_1.useState)([width, height]), _e = _d[0], availableWidth = _e[0], availableHeight = _e[1], setAvailableSize = _d[1];
+    var _f = (0, react_1.useMemo)(function () { return (0, helpers_1.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 = (0, useUpSetChartSizes_1.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 = (0, react_1.useMemo)(function () {
+        var domain = intersections.map(function (_, i) { return String(i); });
+        return (0, d3_scale_1.scaleBand)([0, intersectionsChartWidth]).domain(domain).paddingInner(0.2);
+    }, [intersections, intersectionsChartWidth]);
+    var matrixYScale = (0, react_1.useMemo)(function () {
+        var domain = sets.map(function (set) { return set.name; });
+        return (0, d3_scale_1.scaleBand)([0, matrixHeight]).domain(domain);
+    }, [sets, matrixHeight]);
+    (0, react_1.useEffect)(function () {
+        var _a = containerRef.current || {}, clientWidth = _a.clientWidth, clientHeight = _a.clientHeight;
+        setAvailableSize([clientWidth || width, clientHeight || height]);
+    }, [width, height]);
+    return (react_1.default.createElement("div", { ref: containerRef, className: styles.wrapper },
+        react_1.default.createElement(Tooltip_1.default, { title: tooltipTitle, followCursor: true },
+            react_1.default.createElement("svg", { className: styles.svg, width: svgWidth, height: svgHeight },
+                react_1.default.createElement(IntersectionsMatrix_1.IntersectionsMatrix, { xScale: matrixXScale, yScale: matrixYScale, intersections: intersections, sets: sets, transform: "translate(".concat(leftPadding, ",").concat(matrixY, ")"), hoveredIntersection: hoveredIntersection }),
+                react_1.default.createElement(SetsChart_1.SetsChart, { yScale: matrixYScale, width: setsChartWidth, sets: sets, labels: labels, hoveredElements: hoveredElements, hoverAreaWidth: svgWidth, transform: "translate(".concat(constants_1.GAP_BEFORE_LEFT_BAR, ",").concat(matrixY, ")"), onSetHover: setHoveredSet }),
+                react_1.default.createElement(IntersectionsChart_1.IntersectionsChart, { xScale: matrixXScale, width: intersectionsChartWidth, height: intersectionsChartHeight, intersections: intersections, highlightedElements: hoveredElements, transform: "translate(".concat(leftPadding, ",").concat(constants_1.TOP_GAP, ")"), matrixHeight: matrixHeight, onIntersectionHover: setHoveredIntersection })))));
 };
 exports.UpSetChart = UpSetChart;

package/cjs/UpSetChart/UpSetChart.test.d.ts

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

package/cjs/UpSetChart/UpSetChart.test.js

@@ -0,0 +1,198 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
+var gameOfThrones_test_data_1 = require("./gameOfThrones.test-data");
+var UpSetChart_1 = require("./UpSetChart");
+var originalGetBBox = Object.getOwnPropertyDescriptor(SVGElement.prototype, 'getBBox');
+describe('UpSetChart', function () {
+    beforeAll(function () {
+        Object.defineProperty(SVGElement.prototype, 'getBBox', {
+            configurable: true,
+            value: function () { return ({ x: 0, y: 0, width: 150 }); }
+        });
+    });
+    afterAll(function () {
+        Object.defineProperty(SVGElement.prototype, 'getBBox', { value: originalGetBBox });
+    });
+    var setUp = function (_a) {
+        var _b = _a === void 0 ? {} : _a, _c = _b.data, data = _c === void 0 ? gameOfThrones_test_data_1.gameOfThronesData : _c, _d = _b.width, width = _d === void 0 ? 1400 : _d, _e = _b.height, height = _e === void 0 ? 400 : _e;
+        var user = user_event_1.default.setup();
+        return __assign({ user: user }, (0, react_2.render)(react_1.default.createElement(UpSetChart_1.UpSetChart, { data: data, width: width, height: height })));
+    };
+    it('should work fine with complex data', function () {
+        var asFragment = setUp().asFragment;
+        expect(asFragment()).toMatchSnapshot();
+    });
+    it('should truncate labels and add scrollbar when chart not fit in width', function () {
+        var asFragment = setUp({ width: 800 }).asFragment;
+        expect(asFragment()).toMatchSnapshot();
+    });
+    it('should add scrollbar when chart not fit in height', function () {
+        var asFragment = setUp({ width: 200 }).asFragment;
+        expect(asFragment()).toMatchSnapshot();
+    });
+    it('should highlight intersection column on hover', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, user, asFragment, _b, maleAndWasKilled;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    _a = setUp(), user = _a.user, asFragment = _a.asFragment;
+                    _b = react_2.screen.getAllByTestId('intersection-hover-area'), maleAndWasKilled = _b[2];
+                    return [4 /*yield*/, user.hover(maleAndWasKilled)];
+                case 1:
+                    _c.sent();
+                    expect(asFragment()).toMatchSnapshot();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should highlight set row on hover', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, user, asFragment, _b, lannister;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    _a = setUp(), user = _a.user, asFragment = _a.asFragment;
+                    _b = react_2.screen.getAllByTestId('set-hover-area'), lannister = _b[1];
+                    return [4 /*yield*/, user.hover(lannister)];
+                case 1:
+                    _c.sent();
+                    expect(asFragment()).toMatchSnapshot();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should show correct tooltip on hover', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, _a, wasKilled, maleAndWasKilled;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    user = setUp().user;
+                    expect(react_2.screen.queryByRole('tooltip')).not.toBeInTheDocument();
+                    _a = react_2.screen.getAllByTestId('intersection-hover-area'), wasKilled = _a[0], maleAndWasKilled = _a[2];
+                    return [4 /*yield*/, user.hover(wasKilled)];
+                case 1:
+                    _b.sent();
+                    expect(react_2.screen.getByRole('tooltip').textContent).toBe('was killed');
+                    return [4 /*yield*/, user.hover(maleAndWasKilled)];
+                case 2:
+                    _b.sent();
+                    expect(react_2.screen.getByRole('tooltip').textContent).toBe('male ∩ was killed');
+                    return [4 /*yield*/, user.unhover(maleAndWasKilled)];
+                case 3:
+                    _b.sent();
+                    expect(react_2.screen.queryByRole('tooltip')).not.toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should work correctly with simple data', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var data, _a, user, asFragment;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    data = [
+                        { name: 'A', sets: ['S1', 'S2'] },
+                        { name: 'B', sets: ['S1'] },
+                        { name: 'C', sets: ['S2'] },
+                        { name: 'D', sets: ['S1', 'S3'] }
+                    ];
+                    _a = setUp({ data: data, width: 400, height: 300 }), user = _a.user, asFragment = _a.asFragment;
+                    expect(asFragment()).toMatchSnapshot();
+                    return [4 /*yield*/, user.hover(react_2.screen.getAllByTestId('set-hover-area')[0])];
+                case 1:
+                    _b.sent();
+                    expect(asFragment()).toMatchSnapshot();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should work correctly with long labels', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var data, asFragment;
+        return __generator(this, function (_a) {
+            data = [
+                { name: 'A', sets: ['S1', 'S2'] },
+                { name: 'B', sets: ['S1'] },
+                { name: 'C', sets: ['S2'] },
+                { name: 'D', sets: ['S1', 'S3testS3testS3testS3test'] }
+            ];
+            asFragment = setUp({ data: data, width: 400, height: 300 }).asFragment;
+            expect(asFragment()).toMatchSnapshot();
+            return [2 /*return*/];
+        });
+    }); });
+    it('should work correctly with one set', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var data, asFragment;
+        return __generator(this, function (_a) {
+            data = [
+                { name: 'A', sets: ['S1'] },
+                { name: 'B', sets: ['S1'] },
+                { name: 'C', sets: ['S1'] },
+                { name: 'D', sets: ['S1'] }
+            ];
+            asFragment = setUp({ data: data, width: 400, height: 300 }).asFragment;
+            expect(asFragment()).toMatchSnapshot();
+            return [2 /*return*/];
+        });
+    }); });
+    it('should work correctly with one entry', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var data, asFragment;
+        return __generator(this, function (_a) {
+            data = [{ name: 'A', sets: ['S1', 'S2', 'S3'] }];
+            asFragment = setUp({ data: data, width: 400, height: 300 }).asFragment;
+            expect(asFragment()).toMatchSnapshot();
+            return [2 /*return*/];
+        });
+    }); });
+});

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ScaleBand } from 'd3-scale';
+import { Intersection } from '../../types';
+type Props = {
+    xScale: ScaleBand<string>;
+    width: number;
+    height: number;
+    transform?: string;
+    matrixHeight: number;
+    intersections: Intersection[];
+    highlightedElements?: string[];
+    onIntersectionHover: (intersection: Intersection) => void;
+};
+export declare const IntersectionsChart: ({ xScale, width, height, transform, matrixHeight, intersections, highlightedElements, onIntersectionHover }: Props) => React.JSX.Element;
+export {};

package/cjs/UpSetChart/components/IntersectionsChart/IntersectionsChart.js

@@ -0,0 +1,66 @@
+"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;
+};
+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.IntersectionsChart = void 0;
+var react_1 = __importStar(require("react"));
+var d3_scale_1 = require("d3-scale");
+var IntersectionsChartAxis_1 = require("../IntersectionsChartAxis");
+var constants_1 = require("../../constants");
+var styles_1 = require("./styles");
+var IntersectionsChart = function (_a) {
+    var xScale = _a.xScale, width = _a.width, height = _a.height, transform = _a.transform, matrixHeight = _a.matrixHeight, intersections = _a.intersections, highlightedElements = _a.highlightedElements, onIntersectionHover = _a.onIntersectionHover;
+    var styles = (0, styles_1.useStyles)();
+    var yScale = (0, react_1.useMemo)(function () {
+        var intersectionsSizes = intersections.map(function (intersection) { return intersection.size; });
+        var domain = [0, Math.max.apply(Math, __spreadArray([0], intersectionsSizes, false))];
+        return (0, d3_scale_1.scaleLinear)([height, 0]).domain(domain);
+    }, [intersections, height]);
+    return (react_1.default.createElement("g", { transform: transform },
+        react_1.default.createElement(IntersectionsChartAxis_1.IntersectionsChartAxis, { xScale: xScale, yScale: yScale, width: width, height: height }),
+        intersections.map(function (intersection, i) {
+            var elements = intersection.elements, size = intersection.size;
+            var x = xScale(String(i));
+            var y = yScale(size);
+            var width = xScale.bandwidth();
+            var barY = highlightedElements
+                ? yScale(elements.filter(function (el) { return highlightedElements.includes(el); }).length)
+                : y;
+            return (react_1.default.createElement("g", { key: "intersection-group-".concat(i) },
+                react_1.default.createElement("rect", { className: styles.barBackground, x: x, y: y, width: width, height: height - y }),
+                react_1.default.createElement("text", { className: styles.barLabel, x: x + width / 2, y: y - 4 }, size),
+                react_1.default.createElement("rect", { className: styles.bar, x: x, y: barY, width: width, height: height - barY }),
+                react_1.default.createElement("rect", { className: styles.hoverBar, "data-reltio-id": "intersection-hover-area", x: x, y: y, width: width, height: height - y + matrixHeight + constants_1.GAP_BETWEEN_TABLE_AND_CHART - 1, onMouseEnter: function () { return onIntersectionHover(intersection); }, onMouseLeave: function () { return onIntersectionHover(null); } })));
+        })));
+};
+exports.IntersectionsChart = IntersectionsChart;

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

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

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

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

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

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

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

@@ -0,0 +1,32 @@
+"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 ({
+    bar: {
+        fill: constants_1.PRIMARY_COLOR,
+        transition: 'y ease-in-out 0.3s, height ease-in-out 0.3s'
+    },
+    barBackground: {
+        fill: constants_1.PRIMARY_COLOR,
+        opacity: 0.2,
+        transition: 'y ease-in-out 0.3s, height ease-in-out 0.3s'
+    },
+    barLabel: {
+        fill: constants_1.TEXT_COLOR,
+        fontSize: '12px',
+        textAnchor: 'middle'
+    },
+    hoverBar: {
+        fill: 'transparent',
+        stroke: constants_1.PRIMARY_COLOR,
+        strokeWidth: '1px',
+        cursor: 'pointer',
+        transition: 'opacity ease-in-out 0.3s',
+        opacity: 0,
+        '&:hover': {
+            opacity: 1
+        }
+    }
+}); });

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ScaleBand, ScaleLinear } from 'd3-scale';
+type Props = {
+    xScale: ScaleBand<string>;
+    yScale: ScaleLinear<number, number>;
+    width: number;
+    height: number;
+};
+export declare const IntersectionsChartAxis: ({ xScale, yScale, width, height }: Props) => React.JSX.Element;
+export {};

package/cjs/UpSetChart/components/IntersectionsChartAxis/IntersectionsChartAxis.js

@@ -0,0 +1,64 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IntersectionsChartAxis = void 0;
+var react_1 = __importStar(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var styles_1 = require("./styles");
+var helpers_1 = require("../../helpers");
+var IntersectionsChartAxis = function (_a) {
+    var xScale = _a.xScale, yScale = _a.yScale, width = _a.width, height = _a.height;
+    var styles = (0, styles_1.useStyles)();
+    var ticksRef = (0, react_1.useRef)(null);
+    var ticks = (0, react_1.useMemo)(function () {
+        return yScale
+            .nice()
+            .ticks()
+            .filter(function (tick) { return Number.isInteger(tick); });
+    }, [yScale]);
+    var ticksWidth = (0, react_1.useMemo)(function () { return (0, helpers_1.calculateTicksWidth)(ticks); }, [ticks]);
+    return (react_1.default.createElement("g", null,
+        xScale.domain().map(function (d, i) {
+            var x = xScale(d) + xScale.bandwidth() / 2;
+            return react_1.default.createElement("line", { key: "v-grid-".concat(i), className: styles.verticalGrid, x1: x, x2: x, y1: 0, y2: height });
+        }),
+        ticks.map(function (tick, i) {
+            var y = yScale(tick);
+            return react_1.default.createElement("line", { key: "h-grid-".concat(i), className: styles.horizontalGrid, x1: 0, x2: width, y1: y, y2: y });
+        }),
+        react_1.default.createElement("g", { ref: ticksRef }, ticks.map(function (tick, i) {
+            var y = yScale(tick);
+            return (react_1.default.createElement("g", { key: "x-tick-".concat(i), transform: "translate(0,".concat(y, ")") },
+                react_1.default.createElement("line", { className: styles.axis, x1: -4, x2: 0, y1: 0, y2: 0 }),
+                react_1.default.createElement("text", { className: styles.axisTickLabel, x: -8, y: 4 }, tick)));
+        })),
+        react_1.default.createElement("line", { className: styles.axis, x1: 0, x2: 0, y1: 0, y2: height }),
+        react_1.default.createElement("line", { className: styles.axis, x1: 0, x2: width, y1: height, y2: height }),
+        react_1.default.createElement("text", { className: styles.axisLabel, transform: "translate(".concat(-ticksWidth - 12, ",").concat(height / 2, ") rotate(-90)") }, ui_i18n_1.default.text('No. of unified profiles'))));
+};
+exports.IntersectionsChartAxis = IntersectionsChartAxis;

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

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

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

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

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

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

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

@@ -0,0 +1,32 @@
+"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 ({
+    axis: {
+        stroke: '#000000',
+        strokeWidth: '1px'
+    },
+    axisLabel: {
+        fill: '#000000',
+        opacity: 0.54,
+        fontSize: '10px',
+        textAnchor: 'middle'
+    },
+    axisTickLabel: {
+        fontSize: constants_1.AXIS_TICK_LABEL_SIZE,
+        textAnchor: 'end'
+    },
+    verticalGrid: {
+        stroke: '#000000',
+        opacity: 0.04,
+        strokeWidth: '1px',
+        strokeDasharray: '2'
+    },
+    horizontalGrid: {
+        stroke: '#000000',
+        opacity: 0.04,
+        strokeWidth: '1px'
+    }
+}); });

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ScaleBand } from 'd3-scale';
+import { DataSet, Intersection } from '../../types';
+type Props = {
+    xScale: ScaleBand<string>;
+    yScale: ScaleBand<string>;
+    intersections: Intersection[];
+    sets: DataSet[];
+    transform: string;
+    hoveredIntersection: Intersection;
+};
+export declare const IntersectionsMatrix: ({ xScale, yScale, intersections, sets, transform, hoveredIntersection }: Props) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,56 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IntersectionsMatrix = void 0;
+var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var helpers_1 = require("../../helpers");
+var styles_1 = require("./styles");
+var IntersectionsMatrix = function (_a) {
+    var xScale = _a.xScale, yScale = _a.yScale, intersections = _a.intersections, sets = _a.sets, transform = _a.transform, hoveredIntersection = _a.hoveredIntersection;
+    var styles = (0, styles_1.useStyles)();
+    var _b = (0, react_1.useMemo)(function () { return (0, helpers_1.getMatrixData)(xScale, yScale, intersections, sets); }, [xScale, yScale, intersections, sets]), circles = _b.circles, lines = _b.lines;
+    var checkDimmed = function (i) { return hoveredIntersection && hoveredIntersection.index !== i; };
+    return (react_1.default.createElement("g", { transform: transform },
+        circles.map(function (_a, i) {
+            var _b;
+            var cx = _a.cx, cy = _a.cy, isPresent = _a.isPresent, intersectionIndex = _a.intersectionIndex;
+            return (react_1.default.createElement("circle", { key: "matrix-circle-".concat(i), cx: cx, cy: cy, r: 8, className: (0, classnames_1.default)(styles.circle, (_b = {},
+                    _b[styles.activeCircle] = isPresent,
+                    _b[styles.dimmedCircle] = isPresent && checkDimmed(intersectionIndex),
+                    _b)) }));
+        }),
+        lines.map(function (_a, i) {
+            var _b;
+            var x = _a.x, y1 = _a.y1, y2 = _a.y2, intersectionIndex = _a.intersectionIndex;
+            return (react_1.default.createElement("line", { key: "matrix-line-".concat(i), x1: x, y1: y1, x2: x, y2: y2, className: (0, classnames_1.default)(styles.link, (_b = {},
+                    _b[styles.dimmedLine] = checkDimmed(intersectionIndex),
+                    _b)) }));
+        })));
+};
+exports.IntersectionsMatrix = IntersectionsMatrix;

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

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

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

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

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

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