xmlui 0.11.4 → 0.11.7

package/dist/scripts/src/components/Charts/BarChart/BarChartNative.js

@@ -1,317 +0,0 @@
-"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 () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __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.defaultProps = void 0;
-exports.BarChart = BarChart;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const recharts_1 = require("recharts");
-const react_1 = require("react");
-const react_2 = require("react");
-const ChartProvider_1 = __importStar(require("../utils/ChartProvider"));
-const TooltipContent_1 = require("../Tooltip/TooltipContent");
-const ThemeContext_1 = require("../../../components-core/theming/ThemeContext");
-const classnames_1 = __importDefault(require("classnames"));
-const BarChart_module_scss_1 = __importDefault(require("./BarChart.module.scss"));
-exports.defaultProps = {
-    layout: "vertical",
-    stacked: false,
-    hideTickX: false,
-    hideTickY: false,
-    hideX: false,
-    hideY: false,
-    hideTooltip: false,
-    tickFormatterX: (value) => value,
-    tickFormatterY: (value) => value,
-    showLegend: false,
-};
-const defaultChartParams = {
-    chartWidth: 800,
-    chartHeight: 300,
-};
-function BarChart({ data = [], layout = exports.defaultProps.layout, nameKey, stacked = exports.defaultProps.stacked, dataKeys = [], hideTickX = exports.defaultProps.hideTickX, hideTickY = exports.defaultProps.hideTickY, hideY = exports.defaultProps.hideY, hideX = exports.defaultProps.hideX, hideTooltip = exports.defaultProps.hideTooltip, tickFormatterX = exports.defaultProps.tickFormatterX, tickFormatterY = exports.defaultProps.tickFormatterY, style, className, children, showLegend = exports.defaultProps.showLegend, tooltipRenderer, }) {
-    // Validate and normalize data
-    const validData = (0, react_2.useMemo)(() => (Array.isArray(data) ? data : []), [data]);
-    const { getThemeVar } = (0, ThemeContext_1.useTheme)();
-    const colorValues = (0, react_2.useMemo)(() => {
-        return [
-            getThemeVar("color-primary-500"),
-            getThemeVar("color-primary-300"),
-            getThemeVar("color-success-500"),
-            getThemeVar("color-success-300"),
-            getThemeVar("color-warn-500"),
-            getThemeVar("color-warn-300"),
-            getThemeVar("color-danger-500"),
-            getThemeVar("color-danger-300"),
-            getThemeVar("color-info-500"),
-            getThemeVar("color-info-300"),
-            getThemeVar("color-secondary-500"),
-            getThemeVar("color-secondary-300"),
-            getThemeVar("color-primary-600"),
-            getThemeVar("color-primary-400"),
-            getThemeVar("color-success-600"),
-            getThemeVar("color-success-400"),
-            getThemeVar("color-warn-600"),
-            getThemeVar("color-warn-400"),
-            getThemeVar("color-danger-600"),
-            getThemeVar("color-danger-400"),
-            getThemeVar("color-info-600"),
-            getThemeVar("color-info-400"),
-            getThemeVar("color-secondary-600"),
-            getThemeVar("color-secondary-400"),
-            getThemeVar("color-primary-900"),
-            getThemeVar("color-primary-700"),
-            getThemeVar("color-success-900"),
-            getThemeVar("color-success-700"),
-            getThemeVar("color-warn-900"),
-            getThemeVar("color-warn-700"),
-            getThemeVar("color-danger-900"),
-            getThemeVar("color-danger-700"),
-            getThemeVar("color-info-900"),
-            getThemeVar("color-info-700"),
-            getThemeVar("color-secondary-900"),
-            getThemeVar("color-secondary-700"),
-        ];
-    }, [getThemeVar]);
-    const safeTooltipRenderer = (0, react_1.useCallback)((props) => {
-        if (!tooltipRenderer)
-            return (0, jsx_runtime_1.jsx)(TooltipContent_1.TooltipContent, Object.assign({}, props));
-        const payloadArray = [];
-        if (props.payload && props.payload.length > 0 && props.payload[0].payload) {
-            const originalPayload = props.payload[0].payload;
-            // Transform dataKeys into array of objects with label, value, and color
-            dataKeys === null || dataKeys === void 0 ? void 0 : dataKeys.forEach((dataKey, index) => {
-                if (dataKey in originalPayload) {
-                    payloadArray.push({
-                        label: dataKey,
-                        value: originalPayload[dataKey],
-                        color: colorValues[index] || colorValues[0],
-                    });
-                }
-            });
-        }
-        // Extract tooltip data from Recharts props
-        const tooltipData = {
-            label: props.label,
-            payload: payloadArray,
-            active: props.active,
-        };
-        return tooltipRenderer(tooltipData);
-    }, [tooltipRenderer, dataKeys, colorValues]);
-    const config = (0, react_2.useMemo)(() => {
-        return Object.assign({}, ...dataKeys.map((key, index) => {
-            return {
-                [key]: {
-                    label: key,
-                    color: colorValues[index % colorValues.length],
-                },
-            };
-        }));
-    }, [colorValues, dataKeys]);
-    const chartContextValue = (0, ChartProvider_1.useChartContextValue)({ dataKeys, nameKey });
-    const containerRef = (0, react_1.useRef)(null);
-    const labelsRef = (0, react_1.useRef)(null);
-    const [interval, setIntervalState] = (0, react_1.useState)(0);
-    const [xAxisHeight, setXAxisHeight] = (0, react_1.useState)(50);
-    const [yTickCount, setYTickCount] = (0, react_1.useState)(5);
-    const fontSize = 12;
-    const [chartMargin, setChartMargin] = (0, react_1.useState)({ left: 30, right: 30, top: 10, bottom: 60 });
-    const [tickAngle, setTickAngle] = (0, react_1.useState)(0);
-    const [tickAnchor, setTickAnchor] = (0, react_1.useState)("middle");
-    const [miniMode, setMiniMode] = (0, react_1.useState)(false);
-    const [yAxisWidth, setYAxisWidth] = (0, react_1.useState)(40);
-    const wrapperRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        const calc = () => {
-            var _a, _b, _c;
-            const chartWidth = ((_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || defaultChartParams.chartWidth;
-            const chartHeight = ((_b = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || defaultChartParams.chartHeight;
-            const spans = ((_c = labelsRef.current) === null || _c === void 0 ? void 0 : _c.querySelectorAll("span")) || [];
-            const yTicks = Array.from(document.querySelectorAll(".recharts-y-axis .recharts-layer tspan"));
-            const maxYTickWidth = yTicks.length > 0 ? Math.max(...yTicks.map((t) => t.getBBox().width)) : 40;
-            // Only update if the value actually changed
-            // NOTE: This might cause recursive calls along with setting the state in here directly. Fix if necessary.
-            setYAxisWidth((prev) => {
-                // Add a small tolerance to prevent micro-adjustments
-                if (Math.abs(maxYTickWidth - prev) > 1) {
-                    return maxYTickWidth;
-                }
-                return prev;
-            });
-            const maxWidth = Array.from(spans).reduce((mx, s) => Math.max(mx, s.offsetWidth), 50);
-            let angle = 0;
-            let anchor = "middle";
-            let rad = 0;
-            let minTickSpacing = maxWidth + 8;
-            let leftMargin = Math.ceil(maxWidth / 3);
-            let rightMargin = Math.ceil(maxWidth / 3);
-            let xAxisH = Math.ceil(fontSize * 1.2);
-            let maxTicks = Math.max(1, Math.floor(chartWidth / minTickSpacing));
-            let skip = Math.max(0, Math.ceil(validData.length / maxTicks) - 1);
-            if (skip > 0) {
-                angle = -60;
-                anchor = "end";
-                rad = (Math.abs(angle) * Math.PI) / 180;
-                minTickSpacing = Math.ceil(maxWidth * Math.cos(rad)) + 2;
-                maxTicks = Math.max(1, Math.floor(chartWidth / minTickSpacing));
-                skip = Math.max(0, Math.ceil(validData.length / maxTicks) - 1);
-                leftMargin = Math.ceil((maxWidth * Math.cos(rad)) / 1.8);
-                rightMargin = Math.ceil((maxWidth * Math.cos(rad)) / 1.8);
-                xAxisH = Math.ceil(Math.abs(maxWidth * Math.sin(rad)) + Math.abs(fontSize * Math.cos(rad)));
-            }
-            setIntervalState(skip);
-            setTickAngle(angle);
-            setTickAnchor(anchor);
-            const xTicks = Array.from(document.querySelectorAll(".recharts-x-axis .recharts-layer tspan"));
-            const maxXTickHeight = xTicks.length > 0 ? Math.max(...xTicks.map((t) => t.getBBox().height)) : fontSize;
-            let bottomMargin = 10;
-            if (layout === "vertical") {
-                bottomMargin = maxXTickHeight;
-            }
-            else {
-                bottomMargin = Math.max(xAxisH, maxXTickHeight);
-            }
-            setChartMargin({ left: leftMargin, right: rightMargin, top: 10, bottom: bottomMargin });
-            const maxYTicks = Math.max(2, Math.floor(chartHeight / (fontSize * 3)));
-            setYTickCount(maxYTicks);
-            setXAxisHeight(Math.ceil(fontSize));
-            const neededHeight = 10 + xAxisHeight + 10 + 32;
-            const neededWidth = chartMargin.left + chartMargin.right + yAxisWidth + 32;
-            setMiniMode(neededHeight > chartHeight || neededWidth > chartWidth);
-        };
-        calc();
-        window.addEventListener("resize", calc);
-        return () => window.removeEventListener("resize", calc);
-        // See note above: leaving out yAxisWidth may stop recursive calls but is hacky
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [data, chartMargin.left, chartMargin.right, layout, validData.length, xAxisHeight]);
-    const [tooltipElement, setTooltipElement] = (0, react_1.useState)(null);
-    const observer = (0, react_1.useRef)();
-    const [tooltipPosition, setTooltipPosition] = (0, react_1.useState)({ x: 0, y: 0 });
-    const [tooltipWidth, setTooltipWidth] = (0, react_1.useState)(0);
-    const onMouseEnter = (0, react_1.useCallback)((e) => {
-        setTooltipPosition({ x: e.x - tooltipWidth / 2, y: e.y });
-    }, [setTooltipPosition, tooltipWidth]);
-    // Observe the size of the reference element
-    (0, react_1.useEffect)(() => {
-        var _a;
-        (_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect();
-        if (tooltipElement) {
-            observer.current = new ResizeObserver((entries) => {
-                if (entries[0]) {
-                    setTooltipWidth(entries[0].contentRect.width);
-                }
-            });
-            observer.current.observe(tooltipElement);
-        }
-        return () => {
-            var _a;
-            (_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect();
-        };
-    }, [tooltipElement]);
-    // Custom tooltip renderer that captures the DOM element
-    const customTooltipRenderer = (0, react_1.useCallback)((props) => {
-        const tooltipContent = safeTooltipRenderer(props);
-        return ((0, jsx_runtime_1.jsx)("div", { ref: (el) => {
-                if (el) {
-                    setTooltipElement(el);
-                }
-            }, children: tooltipContent }));
-    }, [safeTooltipRenderer]);
-    const xAxisProps = layout === "vertical"
-        ? {
-            type: "number",
-            axisLine: false,
-            hide: miniMode || hideX,
-            height: miniMode || hideX ? 0 : xAxisHeight,
-            tick: miniMode || hideTickX ? false : { fill: "currentColor", fontSize },
-            tickFormatter: miniMode || hideTickX ? undefined : tickFormatterX,
-            domain: [0, (dataMax) => Math.ceil((dataMax * 1.05) / 10) * 10],
-        }
-        : {
-            type: "category",
-            dataKey: nameKey,
-            hide: miniMode || hideX,
-            height: miniMode || hideX ? 0 : xAxisHeight,
-            tick: miniMode || hideTickX ? false : { fill: "currentColor", fontSize },
-            tickFormatter: miniMode || hideTickX ? undefined : tickFormatterX,
-            interval: interval,
-            tickLine: false,
-            angle: tickAngle,
-            textAnchor: tickAnchor,
-        };
-    const yAxisProps = layout === "vertical"
-        ? {
-            type: "category",
-            dataKey: nameKey,
-            hide: miniMode || hideY,
-            interval: "equidistantPreserveStart",
-            tickLine: false,
-            tickFormatter: miniMode || hideTickY ? undefined : tickFormatterY,
-            tick: miniMode || hideTickY ? false : { fill: "currentColor", fontSize },
-            width: miniMode || hideY ? 0 : yAxisWidth,
-        }
-        : {
-            type: "number",
-            axisLine: false,
-            tick: miniMode || hideTickY ? false : { fill: "currentColor", fontSize },
-            hide: miniMode || hideY,
-            tickCount: yTickCount,
-            tickFormatter: miniMode || hideTickY ? undefined : tickFormatterY,
-            width: miniMode || hideY ? 0 : yAxisWidth,
-            domain: [
-                0,
-                (dataMax) => {
-                    const roundedMax = Math.ceil((dataMax * 1.05) / 10) * 10;
-                    return roundedMax;
-                },
-            ],
-        };
-    return ((0, jsx_runtime_1.jsxs)(ChartProvider_1.default, { value: chartContextValue, children: [children, (0, jsx_runtime_1.jsx)("div", { ref: labelsRef, style: { position: "absolute", visibility: "hidden", height: 0, overflow: "hidden" }, children: validData
-                    .map((d) => d[nameKey])
-                    .map((label, idx) => ((0, jsx_runtime_1.jsx)("span", { style: { fontSize: 12, whiteSpace: "nowrap" }, children: label }, idx))) }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, BarChart_module_scss_1.default.wrapper), style: Object.assign({ flexGrow: 1 }, style), ref: wrapperRef, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { ref: containerRef, minWidth: 60, minHeight: 60, debounce: 100, width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.BarChart, { accessibilityLayer: true, data: validData, layout: layout, margin: miniMode ? { left: 0, right: 0, top: 0, bottom: 0 } : chartMargin, children: [(0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, { vertical: true, strokeDasharray: "3 3" }), (0, jsx_runtime_1.jsx)(recharts_1.XAxis, Object.assign({}, xAxisProps)), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, Object.assign({}, yAxisProps)), !miniMode && !hideTooltip && ((0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { content: customTooltipRenderer, wrapperStyle: {
-                                    pointerEvents: "auto",
-                                }, position: tooltipPosition })), validData.length > 0 &&
-                                Object.keys(config).map((key, index) => ((0, jsx_runtime_1.jsx)(recharts_1.Bar, { dataKey: key, fill: config[key].color, radius: stacked ? 0 : 8, stackId: stacked ? "stacked" : undefined, strokeWidth: 1, onMouseEnter: onMouseEnter }, index))), showLegend && ((0, jsx_runtime_1.jsx)(recharts_1.Legend, { wrapperStyle: {
-                                    bottom: 0,
-                                    left: 0,
-                                    right: 0,
-                                    margin: "0 auto",
-                                    width: "100%",
-                                    textAlign: "center",
-                                } }))] }) }) })] }));
-}

package/dist/scripts/src/components/Charts/DonutChart/DonutChart.js

@@ -1,60 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.donutChartComponentRenderer = exports.DonutChartMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const renderers_1 = require("../../../components-core/renderers");
-const PieChartNative_module_scss_1 = __importDefault(require("../PieChart/PieChartNative.module.scss"));
-const PieChartNative_1 = require("../PieChart/PieChartNative");
-const themeVars_1 = require("../../../components-core/theming/themeVars");
-const metadata_helpers_1 = require("../../metadata-helpers");
-const COMP = "DonutChart";
-const defaultPropsDonut = Object.assign(Object.assign({}, PieChartNative_1.defaultProps), { innerRadius: 60 });
-exports.DonutChartMd = (0, metadata_helpers_1.createMetadata)({
-    status: "experimental",
-    description: "A derivative of [PieChart](/components/PieChart) with a hollow center. " +
-        "Note that the height of the component or its parent needs to be set explicitly.",
-    props: {
-        data: {
-            description: "The data to be displayed in the chart. Needs to be an array of objects.",
-        },
-        nameKey: {
-            description: "Specifies the key in the data objects that will be used to label the different data series.",
-            valueType: "string",
-        },
-        dataKey: {
-            description: "This property specifies the key in the data objects that will be used to render the chart.",
-            valueType: "string",
-        },
-        showLabel: {
-            description: "Toggles whether to show labels (\`true\`) or not (\`false\`).",
-            valueType: "boolean",
-            defaultValue: defaultPropsDonut.showLabel,
-        },
-        innerRadius: {
-            description: "Sets the inner radius of the donut chart.",
-            valueType: "number",
-            defaultValue: defaultPropsDonut.innerRadius,
-        },
-        showLabelList: {
-            description: "Whether to show labels in a list (\`true\`) or not (\`false\`).",
-            valueType: "boolean",
-            defaultValue: defaultPropsDonut.showLabelList,
-        },
-        showLegend: {
-            description: "Whether to show a legend (\`true\`) or not (\`false\`).",
-            valueType: "boolean",
-            defaultValue: defaultPropsDonut.showLegend,
-        },
-    },
-    themeVars: (0, themeVars_1.parseScssVar)(PieChartNative_module_scss_1.default.themeVars),
-    defaultThemeVars: {
-        "textColor-labelList-PieChart": "$textColor-primary",
-    },
-});
-exports.donutChartComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.DonutChartMd, ({ extractValue, node, className, renderChild }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
-    return ((0, jsx_runtime_1.jsx)(PieChartNative_1.PieChart, { showLabelList: extractValue.asOptionalBoolean((_a = node.props) === null || _a === void 0 ? void 0 : _a.showLabelList, defaultPropsDonut.showLabelList), innerRadius: extractValue.asOptionalNumber((_b = node.props) === null || _b === void 0 ? void 0 : _b.innerRadius, defaultPropsDonut.innerRadius), data: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.data), className: className, showLabel: extractValue.asOptionalBoolean((_d = node.props) === null || _d === void 0 ? void 0 : _d.showLabel, defaultPropsDonut.showLabel), dataKey: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.dataKey), nameKey: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.nameKey), showLegend: extractValue.asOptionalBoolean((_g = node.props) === null || _g === void 0 ? void 0 : _g.showLegend, defaultPropsDonut.showLegend), children: renderChild(node.children) }));
-});