@monolith-forensics/monolith-ui 1.7.1 → 1.8.1-dev.0

package/dist/Charts/ChartPrimitives/chartTooltip.styled.js

@@ -0,0 +1,61 @@
+import styled from "styled-components";
+export const StyledChartTooltip = styled.div `
+  position: absolute;
+  z-index: 1;
+  min-width: ${({ $minWidth = 120 }) => $minWidth}px;
+  max-width: ${({ $maxWidth = 220 }) => $maxWidth}px;
+  padding: 7px 9px;
+  border: 1px solid ${({ theme }) => theme.palette.divider};
+  border-radius: 4px;
+  background: ${({ theme }) => theme.palette.background.paper};
+  color: ${({ theme }) => theme.palette.text.primary};
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
+  font-size: 12px;
+  line-height: 1.35;
+  pointer-events: none;
+  transform: ${({ $transform = "translate(10px, -50%)" }) => $transform};
+`;
+export const StyledChartTooltipHeader = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+  font-weight: 600;
+`;
+export const StyledChartTooltipSwatch = styled.span `
+  width: 8px;
+  height: 8px;
+  flex: 0 0 auto;
+  border-radius: ${({ $radius = "2px" }) => $radius};
+  background: ${({ $color }) => $color};
+`;
+export const StyledChartTooltipLabel = styled.span `
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+export const StyledChartTooltipMeta = styled.div `
+  display: flex;
+  flex-direction: ${({ $direction = "row" }) => $direction};
+  gap: ${({ $gap = 8 }) => $gap}px;
+  margin-top: ${({ $marginTop = 3 }) => $marginTop}px;
+  color: ${({ theme }) => theme.palette.text.secondary};
+  font-variant-numeric: tabular-nums;
+`;
+export const StyledChartTooltipList = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  margin-top: 8px;
+`;
+export const StyledChartTooltipRow = styled.div `
+  display: grid;
+  grid-template-columns: 8px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 7px;
+`;
+export const StyledChartTooltipValue = styled.span `
+  color: ${({ theme }) => theme.palette.text.primary};
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+`;

package/dist/Charts/ChartPrimitives/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./ChartExportControl";
+export * from "./chartActions.styled";
+export * from "./chartLegend.styled";
+export * from "./chartTooltip.styled";

package/dist/Charts/ChartPrimitives/index.js

@@ -0,0 +1,4 @@
+export * from "./ChartExportControl";
+export * from "./chartActions.styled";
+export * from "./chartLegend.styled";
+export * from "./chartTooltip.styled";

package/dist/Charts/ChartUtils/chartColors.d.ts

@@ -0,0 +1,8 @@
+export type ChartColorGradientInput = string[] | {
+    from: string;
+    to: string;
+} | null | undefined;
+export declare const mixColors: (from: string, to: string, amount: number) => string;
+export declare const getGradientStops: (colorGradient?: ChartColorGradientInput) => string[] | null;
+export declare const getGradientColorFromStops: (stops: string[] | null | undefined, index: number, total: number) => string | undefined;
+export declare const getGradientColor: (colorGradient: ChartColorGradientInput, index: number, total: number) => string | undefined;

package/dist/Charts/ChartUtils/chartColors.js

@@ -0,0 +1,65 @@
+import { clamp } from "./chartMath";
+const parseColor = (color) => {
+    const trimmedColor = color.trim();
+    const hexMatch = trimmedColor.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+    if (hexMatch) {
+        const normalizedHex = hexMatch[1].length === 3
+            ? hexMatch[1]
+                .split("")
+                .map((character) => character + character)
+                .join("")
+            : hexMatch[1];
+        return {
+            r: parseInt(normalizedHex.slice(0, 2), 16),
+            g: parseInt(normalizedHex.slice(2, 4), 16),
+            b: parseInt(normalizedHex.slice(4, 6), 16),
+            a: 1,
+        };
+    }
+    const rgbMatch = trimmedColor.match(/^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})(?:\s*,\s*(0|1|0?\.\d+))?\s*\)$/i);
+    if (!rgbMatch) {
+        return null;
+    }
+    return {
+        r: clamp(Number(rgbMatch[1]), 0, 255),
+        g: clamp(Number(rgbMatch[2]), 0, 255),
+        b: clamp(Number(rgbMatch[3]), 0, 255),
+        a: rgbMatch[4] ? clamp(Number(rgbMatch[4]), 0, 1) : 1,
+    };
+};
+export const mixColors = (from, to, amount) => {
+    const normalizedAmount = clamp(amount, 0, 1);
+    if (normalizedAmount === 0)
+        return from;
+    if (normalizedAmount === 1)
+        return to;
+    const fromColor = parseColor(from);
+    const toColor = parseColor(to);
+    if (!fromColor || !toColor) {
+        return `color-mix(in srgb, ${from} ${(1 - normalizedAmount) * 100}%, ${to})`;
+    }
+    const r = Math.round(fromColor.r + (toColor.r - fromColor.r) * normalizedAmount);
+    const g = Math.round(fromColor.g + (toColor.g - fromColor.g) * normalizedAmount);
+    const b = Math.round(fromColor.b + (toColor.b - fromColor.b) * normalizedAmount);
+    const a = fromColor.a + (toColor.a - fromColor.a) * normalizedAmount;
+    return a === 1 ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${a})`;
+};
+export const getGradientStops = (colorGradient) => {
+    if (!colorGradient)
+        return null;
+    return Array.isArray(colorGradient)
+        ? colorGradient.filter(Boolean)
+        : [colorGradient.from, colorGradient.to].filter(Boolean);
+};
+export const getGradientColorFromStops = (stops, index, total) => {
+    if (!(stops === null || stops === void 0 ? void 0 : stops.length))
+        return undefined;
+    if (stops.length === 1 || total <= 1)
+        return stops[0];
+    const progress = index / (total - 1);
+    const scaledProgress = progress * (stops.length - 1);
+    const stopIndex = Math.min(Math.floor(scaledProgress), stops.length - 2);
+    const stopProgress = scaledProgress - stopIndex;
+    return mixColors(stops[stopIndex], stops[stopIndex + 1], stopProgress);
+};
+export const getGradientColor = (colorGradient, index, total) => getGradientColorFromStops(getGradientStops(colorGradient), index, total);

package/dist/Charts/ChartUtils/chartExport.d.ts

@@ -0,0 +1,47 @@
+export type ChartExportFormat = "svg" | "png" | "jpg";
+export type ChartImageExportRequest = {
+    /** Output format for the exported image. Defaults to "svg". */
+    format?: ChartExportFormat;
+    /** Base file name used for the downloaded chart image. */
+    fileName?: string;
+    /** Output scale used for raster exports like png and jpg. */
+    scale?: number;
+    /** Background color applied to jpg exports. */
+    backgroundColor?: string;
+};
+export type ChartHandle = {
+    /** Returns the live SVG element rendered by the chart. */
+    getSvgElement: () => SVGSVGElement | null;
+    /** Downloads the current chart image using the provided or default export options. */
+    downloadImage: (request?: ChartImageExportRequest) => Promise<void>;
+    /** Copies the current chart image to the clipboard. Defaults to png for broad paste compatibility. */
+    copyImage: (request?: ChartImageExportRequest) => Promise<boolean>;
+};
+export type ChartExportOptions = {
+    /** Shows a download button that can export the current chart image. Defaults to false. */
+    showExportButton?: boolean;
+    /** Base file name used for downloaded chart images. */
+    exportFileName?: string;
+    /** Image formats offered in the export menu. Defaults to svg, png, and jpg. */
+    exportFormats?: ChartExportFormat[];
+    /** Output scale used for raster exports like png and jpg. Defaults to 2. */
+    exportScale?: number;
+    /** Background color applied to jpg exports. Defaults to the theme paper color. */
+    exportBackgroundColor?: string;
+};
+export declare const DEFAULT_CHART_EXPORT_FORMATS: ChartExportFormat[];
+export declare const downloadChartImage: ({ rootElement, svg, format, fileName, scale, backgroundColor, }: {
+    rootElement?: HTMLElement | null;
+    svg: SVGSVGElement | null;
+    format: ChartExportFormat;
+    fileName: string;
+    scale?: number;
+    backgroundColor?: string;
+}) => Promise<void>;
+export declare const copyChartImage: ({ rootElement, svg, format, scale, backgroundColor, }: {
+    rootElement?: HTMLElement | null;
+    svg: SVGSVGElement | null;
+    format?: ChartExportFormat;
+    scale?: number;
+    backgroundColor?: string;
+}) => Promise<boolean>;

package/dist/Charts/ChartUtils/chartExport.js

@@ -0,0 +1,311 @@
+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());
+    });
+};
+export const DEFAULT_CHART_EXPORT_FORMATS = [
+    "svg",
+    "png",
+    "jpg",
+];
+const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+const XML_NAMESPACE = "http://www.w3.org/2000/xmlns/";
+const XLINK_NAMESPACE = "http://www.w3.org/1999/xlink";
+const getSvgDimensions = (svg) => {
+    const viewBox = svg.viewBox.baseVal;
+    if (viewBox && viewBox.width > 0 && viewBox.height > 0) {
+        return {
+            width: viewBox.width,
+            height: viewBox.height,
+        };
+    }
+    const widthAttr = Number(svg.getAttribute("width"));
+    const heightAttr = Number(svg.getAttribute("height"));
+    if (Number.isFinite(widthAttr) && Number.isFinite(heightAttr)) {
+        return {
+            width: widthAttr,
+            height: heightAttr,
+        };
+    }
+    const rect = svg.getBoundingClientRect();
+    return {
+        width: Math.max(Math.round(rect.width), 1),
+        height: Math.max(Math.round(rect.height), 1),
+    };
+};
+const copyComputedStyles = (source, target) => {
+    const computedStyle = window.getComputedStyle(source);
+    let inlineStyle = "";
+    for (let index = 0; index < computedStyle.length; index += 1) {
+        const propertyName = computedStyle[index];
+        inlineStyle += `${propertyName}:${computedStyle.getPropertyValue(propertyName)};`;
+    }
+    if (inlineStyle) {
+        target.setAttribute("style", inlineStyle);
+    }
+};
+const inlineNodeStyles = (sourceRoot, targetRoot) => {
+    const sourceElements = [sourceRoot, ...Array.from(sourceRoot.querySelectorAll("*"))];
+    const targetElements = [targetRoot, ...Array.from(targetRoot.querySelectorAll("*"))];
+    sourceElements.forEach((sourceElement, index) => {
+        const targetElement = targetElements[index];
+        if (!targetElement)
+            return;
+        copyComputedStyles(sourceElement, targetElement);
+    });
+};
+const removeIgnoredNodes = (root) => {
+    root
+        .querySelectorAll('[data-chart-export-ignore="true"]')
+        .forEach((element) => element.remove());
+};
+const serializeSvg = (svg) => {
+    const clone = svg.cloneNode(true);
+    const { width, height } = getSvgDimensions(svg);
+    clone.setAttribute("version", "1.1");
+    clone.setAttribute("xmlns", SVG_NAMESPACE);
+    clone.setAttributeNS(XML_NAMESPACE, "xmlns:xlink", XLINK_NAMESPACE);
+    clone.setAttribute("width", String(width));
+    clone.setAttribute("height", String(height));
+    if (!clone.getAttribute("viewBox")) {
+        clone.setAttribute("viewBox", `0 0 ${width} ${height}`);
+    }
+    inlineNodeStyles(svg, clone);
+    const serializer = new XMLSerializer();
+    return `<?xml version="1.0" encoding="UTF-8"?>${serializer.serializeToString(clone)}`;
+};
+const getElementDimensions = (element) => {
+    const rect = element.getBoundingClientRect();
+    return {
+        width: Math.max(Math.round(rect.width || element.offsetWidth || element.clientWidth || 1), 1),
+        height: Math.max(Math.round(rect.height || element.offsetHeight || element.clientHeight || 1), 1),
+    };
+};
+const isExportIgnored = (element) => element.closest('[data-chart-export-ignore="true"]') != null;
+const isVisibleElement = (element) => {
+    const computedStyle = window.getComputedStyle(element);
+    return (computedStyle.display !== "none" &&
+        computedStyle.visibility !== "hidden" &&
+        computedStyle.opacity !== "0");
+};
+const getElementText = (element) => {
+    var _a, _b;
+    const hasElementChildren = Array.from(element.childNodes).some((node) => node.nodeType === Node.ELEMENT_NODE);
+    if (hasElementChildren)
+        return "";
+    return (_b = (_a = element.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : "";
+};
+const isRenderableColor = (color) => color !== "" && color !== "transparent" && color !== "rgba(0, 0, 0, 0)";
+const appendElementBox = (targetSvg, element, rootRect) => {
+    const computedStyle = window.getComputedStyle(element);
+    const backgroundColor = computedStyle.backgroundColor;
+    const borderColor = computedStyle.borderColor;
+    const borderWidth = Number.parseFloat(computedStyle.borderWidth) || 0;
+    const hasBackground = isRenderableColor(backgroundColor);
+    const hasBorder = borderWidth > 0 && isRenderableColor(borderColor);
+    if (!hasBackground && !hasBorder)
+        return;
+    const rect = element.getBoundingClientRect();
+    const radius = Number.parseFloat(computedStyle.borderRadius) || 0;
+    const box = document.createElementNS(SVG_NAMESPACE, "rect");
+    box.setAttribute("x", String(rect.left - rootRect.left));
+    box.setAttribute("y", String(rect.top - rootRect.top));
+    box.setAttribute("width", String(Math.max(rect.width, 0)));
+    box.setAttribute("height", String(Math.max(rect.height, 0)));
+    box.setAttribute("rx", String(radius));
+    box.setAttribute("ry", String(radius));
+    box.setAttribute("fill", hasBackground ? backgroundColor : "none");
+    if (hasBorder) {
+        box.setAttribute("stroke", borderColor);
+        box.setAttribute("stroke-width", String(borderWidth));
+    }
+    targetSvg.appendChild(box);
+};
+const appendElementText = (targetSvg, element, rootRect) => {
+    const text = getElementText(element);
+    if (!text)
+        return;
+    const computedStyle = window.getComputedStyle(element);
+    const rect = element.getBoundingClientRect();
+    const textNode = document.createElementNS(SVG_NAMESPACE, "text");
+    const fontSize = Number.parseFloat(computedStyle.fontSize) || 12;
+    const fontWeight = computedStyle.fontWeight;
+    const textAlign = computedStyle.textAlign;
+    const isRightAligned = textAlign === "right" || textAlign === "end";
+    const isCenterAligned = textAlign === "center";
+    const x = isRightAligned
+        ? rect.right - rootRect.left
+        : isCenterAligned
+            ? rect.left - rootRect.left + rect.width / 2
+            : rect.left - rootRect.left;
+    textNode.textContent = text;
+    textNode.setAttribute("x", String(x));
+    textNode.setAttribute("y", String(rect.top - rootRect.top + rect.height / 2));
+    textNode.setAttribute("text-anchor", isRightAligned ? "end" : isCenterAligned ? "middle" : "start");
+    textNode.setAttribute("dominant-baseline", "central");
+    textNode.setAttribute("fill", computedStyle.color);
+    textNode.setAttribute("font-family", computedStyle.fontFamily);
+    textNode.setAttribute("font-size", `${fontSize}px`);
+    textNode.setAttribute("font-weight", fontWeight);
+    if (computedStyle.fontVariantNumeric) {
+        textNode.setAttribute("font-variant-numeric", computedStyle.fontVariantNumeric);
+    }
+    targetSvg.appendChild(textNode);
+};
+const appendNestedSvg = (targetSvg, svg, rootRect) => {
+    const clone = svg.cloneNode(true);
+    const rect = svg.getBoundingClientRect();
+    inlineNodeStyles(svg, clone);
+    removeIgnoredNodes(clone);
+    clone.setAttribute("x", String(rect.left - rootRect.left));
+    clone.setAttribute("y", String(rect.top - rootRect.top));
+    clone.setAttribute("width", String(Math.max(rect.width, 1)));
+    clone.setAttribute("height", String(Math.max(rect.height, 1)));
+    targetSvg.appendChild(clone);
+};
+const serializeElement = (element) => {
+    const { width, height } = getElementDimensions(element);
+    const rootRect = element.getBoundingClientRect();
+    const wrapperSvg = document.createElementNS(SVG_NAMESPACE, "svg");
+    wrapperSvg.setAttribute("version", "1.1");
+    wrapperSvg.setAttribute("xmlns", SVG_NAMESPACE);
+    wrapperSvg.setAttributeNS(XML_NAMESPACE, "xmlns:xlink", XLINK_NAMESPACE);
+    wrapperSvg.setAttribute("width", String(width));
+    wrapperSvg.setAttribute("height", String(height));
+    wrapperSvg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+    const appendElement = (currentElement) => {
+        if (currentElement !== element && isExportIgnored(currentElement))
+            return;
+        if (!isVisibleElement(currentElement))
+            return;
+        if (currentElement instanceof SVGSVGElement) {
+            appendNestedSvg(wrapperSvg, currentElement, rootRect);
+            return;
+        }
+        appendElementBox(wrapperSvg, currentElement, rootRect);
+        appendElementText(wrapperSvg, currentElement, rootRect);
+        Array.from(currentElement.children).forEach(appendElement);
+    };
+    appendElement(element);
+    const serializer = new XMLSerializer();
+    return `<?xml version="1.0" encoding="UTF-8"?>${serializer.serializeToString(wrapperSvg)}`;
+};
+const triggerDownload = (blob, fileName) => {
+    const objectUrl = URL.createObjectURL(blob);
+    const anchor = document.createElement("a");
+    anchor.href = objectUrl;
+    anchor.download = fileName;
+    document.body.appendChild(anchor);
+    anchor.click();
+    document.body.removeChild(anchor);
+    window.setTimeout(() => {
+        URL.revokeObjectURL(objectUrl);
+    }, 0);
+};
+const rasterizeSvg = (_a) => __awaiter(void 0, [_a], void 0, function* ({ svgMarkup, format, width, height, scale, backgroundColor, }) {
+    if (typeof window !== "undefined" && "fonts" in document) {
+        yield document.fonts.ready;
+    }
+    const svgBlob = new Blob([svgMarkup], {
+        type: "image/svg+xml;charset=utf-8",
+    });
+    const svgUrl = URL.createObjectURL(svgBlob);
+    try {
+        const image = yield new Promise((resolve, reject) => {
+            const nextImage = new Image();
+            nextImage.onload = () => resolve(nextImage);
+            nextImage.onerror = () => reject(new Error("Unable to render the chart image."));
+            nextImage.src = svgUrl;
+        });
+        const canvas = document.createElement("canvas");
+        canvas.width = Math.max(Math.round(width * scale), 1);
+        canvas.height = Math.max(Math.round(height * scale), 1);
+        const context = canvas.getContext("2d");
+        if (!context) {
+            throw new Error("Unable to create a canvas for chart export.");
+        }
+        context.setTransform(scale, 0, 0, scale, 0, 0);
+        if (format === "jpg") {
+            context.fillStyle = backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : "#ffffff";
+            context.fillRect(0, 0, width, height);
+        }
+        context.drawImage(image, 0, 0, width, height);
+        const mimeType = format === "png" ? "image/png" : "image/jpeg";
+        return yield new Promise((resolve, reject) => {
+            canvas.toBlob((blob) => {
+                if (!blob) {
+                    reject(new Error("Unable to generate the exported chart image."));
+                    return;
+                }
+                resolve(blob);
+            }, mimeType, format === "jpg" ? 0.92 : undefined);
+        });
+    }
+    finally {
+        URL.revokeObjectURL(svgUrl);
+    }
+});
+const getChartImageBlob = (_a) => __awaiter(void 0, [_a], void 0, function* ({ rootElement, svg, format, scale = 2, backgroundColor, }) {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+        return null;
+    }
+    if (!rootElement && !svg)
+        return null;
+    const safeScale = Number.isFinite(scale) ? Math.max(scale, 1) : 2;
+    const svgMarkup = rootElement ? serializeElement(rootElement) : serializeSvg(svg);
+    const { width, height } = rootElement
+        ? getElementDimensions(rootElement)
+        : getSvgDimensions(svg);
+    if (format === "svg") {
+        return new Blob([svgMarkup], {
+            type: "image/svg+xml;charset=utf-8",
+        });
+    }
+    return yield rasterizeSvg({
+        svgMarkup,
+        format,
+        width,
+        height,
+        scale: safeScale,
+        backgroundColor,
+    });
+});
+export const downloadChartImage = (_a) => __awaiter(void 0, [_a], void 0, function* ({ rootElement, svg, format, fileName, scale = 2, backgroundColor, }) {
+    const blob = yield getChartImageBlob({
+        rootElement,
+        svg,
+        format,
+        scale,
+        backgroundColor,
+    });
+    if (!blob)
+        return;
+    triggerDownload(blob, `${fileName}.${format}`);
+});
+export const copyChartImage = (_a) => __awaiter(void 0, [_a], void 0, function* ({ rootElement, svg, format = "png", scale = 2, backgroundColor, }) {
+    var _b;
+    if (typeof window === "undefined" ||
+        typeof navigator === "undefined" ||
+        typeof ClipboardItem === "undefined" ||
+        !((_b = navigator.clipboard) === null || _b === void 0 ? void 0 : _b.write)) {
+        return false;
+    }
+    const blob = yield getChartImageBlob({
+        rootElement,
+        svg,
+        format,
+        scale,
+        backgroundColor,
+    });
+    if (!blob)
+        return false;
+    const clipboardItem = new ClipboardItem({
+        [blob.type]: blob,
+    });
+    yield navigator.clipboard.write([clipboardItem]);
+    return true;
+});

package/dist/Charts/ChartUtils/chartMath.d.ts

@@ -0,0 +1,3 @@
+export declare const formatDefaultValue: (value: number) => string;
+export declare const clamp: (value: number, min: number, max: number) => number;
+export declare const easeOutCubic: (value: number) => number;

package/dist/Charts/ChartUtils/chartMath.js

@@ -0,0 +1,3 @@
+export const formatDefaultValue = (value) => new Intl.NumberFormat().format(value);
+export const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+export const easeOutCubic = (value) => 1 - Math.pow(1 - value, 3);

package/dist/Charts/ChartUtils/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./chartColors";
+export * from "./chartExport";
+export * from "./chartMath";

package/dist/Charts/ChartUtils/index.js

@@ -0,0 +1,3 @@
+export * from "./chartColors";
+export * from "./chartExport";
+export * from "./chartMath";

package/dist/Charts/HeatMap/HeatMap.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement, RefAttributes } from "react";
+import { ChartHandle } from "../ChartUtils";
+import { HeatMapProps } from "./HeatMap.types";
+declare const HeatMap: <TData>(props: HeatMapProps<TData> & RefAttributes<ChartHandle>) => ReactElement | null;
+export default HeatMap;