@reltio/components 1.4.1998 → 1.4.1999

package/esm/UpSetChart/constants.js

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

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

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

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

@@ -0,0 +1,23 @@
+export var 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/esm/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/esm/UpSetChart/helpers.js

@@ -0,0 +1,120 @@
+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));
+};
+import { AXIS_TICK_LABEL_SIZE, MAX_CHARACTERS, MIN_CHARACTERS, SET_LABEL_SIZE } from './constants';
+export 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 };
+};
+export 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 };
+};
+export 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', SET_LABEL_SIZE);
+    tempSvgElement.appendChild(tempTextElement);
+    sets.forEach(function (_a) {
+        var name = _a.name;
+        var truncatedText = name.length > MAX_CHARACTERS ? name.slice(0, MAX_CHARACTERS) + '...' : name;
+        tempTextElement.textContent = truncatedText;
+        while (tempTextElement.getBBox().width > maxLabelsWidth && truncatedText.length > 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 };
+};
+export 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', 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;
+};

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

@@ -1,16 +1,15 @@
 import { makeStyles } from '@mui/styles';
-export var useStyles = makeStyles(function (theme) { return ({
-    setLabel: {
-        fontSize: '13px !important'
+export var useStyles = 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/esm/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/esm/UpSetChart/types.js

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

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

@@ -0,0 +1,30 @@
+import { GAP_BEFORE_LEFT_BAR, GAP_BETWEEN_TABLE_AND_CHART, MATRIX_ROW_HEIGHT, MAX_SETS_CHART_WIDTH, MIN_INTERSECTION_CHART_HEIGHT, MIN_MATRIX_COLUMN_WIDTH, MIN_SETS_CHART_WIDTH, TEXT_GAP, TOP_GAP } from './constants';
+import { truncateLabels } from './helpers';
+export var useUpSetChartSizes = function (_a) {
+    var width = _a.width, height = _a.height, intersections = _a.intersections, sets = _a.sets;
+    var minMatrixWidth = intersections.length * MIN_MATRIX_COLUMN_WIDTH * 1.2;
+    var matrixHeight = sets.length * MATRIX_ROW_HEIGHT;
+    var availableLabelsWidth = width - minMatrixWidth - TEXT_GAP * 2 - GAP_BEFORE_LEFT_BAR - MIN_SETS_CHART_WIDTH;
+    var _b = truncateLabels(sets, availableLabelsWidth), labels = _b.labels, labelsWidth = _b.maxWidth;
+    var availableSetsChartWidth = width - minMatrixWidth - TEXT_GAP * 2 - GAP_BEFORE_LEFT_BAR - labelsWidth;
+    var setsChartWidth = Math.min(Math.max(availableSetsChartWidth, MIN_SETS_CHART_WIDTH), MAX_SETS_CHART_WIDTH);
+    var maxLabelsWidth = width - minMatrixWidth - TEXT_GAP * 2 - GAP_BEFORE_LEFT_BAR - setsChartWidth;
+    var leftPadding = setsChartWidth + labelsWidth + TEXT_GAP * 2 + GAP_BEFORE_LEFT_BAR;
+    var intersectionsChartWidth = Math.max(minMatrixWidth, width - leftPadding);
+    var intersectionsChartHeight = Math.max(MIN_INTERSECTION_CHART_HEIGHT, height - TOP_GAP - matrixHeight - GAP_BETWEEN_TABLE_AND_CHART);
+    var svgWidth = leftPadding + intersectionsChartWidth;
+    var svgHeight = intersectionsChartHeight + matrixHeight + TOP_GAP + 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
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1998",
+  "version": "1.4.1999",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",