xmlui 0.11.3 → 0.11.6

package/dist/scripts/src/components/Charts/LineChart/LineChartNative.js

@@ -1,192 +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.LineChart = exports.defaultProps = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const recharts_1 = require("recharts");
-const react_1 = 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 LineChart_module_scss_1 = __importDefault(require("./LineChart.module.scss"));
-exports.defaultProps = {
-    hideTickX: false,
-    hideTickY: false,
-    hideX: false,
-    hideY: false,
-    hideTooltip: false,
-    showLegend: false,
-    tickFormatterX: (value) => value,
-    tickFormatterY: (value) => value,
-};
-const defaultChartParams = {
-    chartWidth: 800,
-};
-exports.LineChart = (0, react_1.forwardRef)(function LineChart({ data, dataKeys = [], nameKey, style, className, hideX = exports.defaultProps.hideX, hideY = exports.defaultProps.hideY, hideTickX = exports.defaultProps.hideTickX, hideTickY = exports.defaultProps.hideTickY, hideTooltip = exports.defaultProps.hideTooltip, tickFormatterX = exports.defaultProps.tickFormatterX, tickFormatterY = exports.defaultProps.tickFormatterY, children, showLegend = exports.defaultProps.showLegend, tooltipRenderer, }, forwardedRef) {
-    const { getThemeVar } = (0, ThemeContext_1.useTheme)();
-    const colorValues = (0, react_1.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 chartContextValue = (0, ChartProvider_1.useChartContextValue)({ nameKey, dataKeys });
-    const containerRef = (0, react_1.useRef)(null);
-    const labelsRef = (0, react_1.useRef)(null);
-    const [interval, setIntervalState] = (0, react_1.useState)(0);
-    const [tickAngle, setTickAngle] = (0, react_1.useState)(0);
-    const [tickAnchor, setTickAnchor] = (0, react_1.useState)("middle");
-    const [chartMargin, setChartMargin] = (0, react_1.useState)({ left: 30, right: 30, top: 10, bottom: 60 });
-    const [xAxisHeight, setXAxisHeight] = (0, react_1.useState)(50);
-    const [miniMode, setMiniMode] = (0, react_1.useState)(false);
-    const fontSize = 12;
-    const safeData = Array.isArray(data) ? data : [];
-    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.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]);
-    (0, react_1.useEffect)(() => {
-        const calc = () => {
-            var _a, _b, _c;
-            const width = ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || defaultChartParams.chartWidth;
-            const spans = ((_b = labelsRef.current) === null || _b === void 0 ? void 0 : _b.querySelectorAll("span")) || [];
-            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.max(8, Math.ceil(maxWidth / 3));
-            let rightMargin = Math.max(8, Math.ceil(maxWidth / 3));
-            let xAxisH = Math.ceil(fontSize * 1.2);
-            let maxTicks = Math.max(1, Math.floor(width / minTickSpacing));
-            let skip = Math.max(0, Math.ceil(safeData.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(width / minTickSpacing));
-                skip = Math.max(0, Math.ceil(safeData.length / maxTicks) - 1);
-                leftMargin = Math.max(8, Math.ceil((maxWidth * Math.cos(rad)) / 1.8));
-                rightMargin = Math.max(8, 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);
-            setChartMargin({ left: leftMargin, right: rightMargin, top: 10, bottom: xAxisH });
-            setXAxisHeight(Math.ceil(fontSize));
-            const containerHeight = ((_c = containerRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) || 0;
-            const neededHeight = 10 + xAxisHeight + 10 + 32;
-            setMiniMode(neededHeight > containerHeight);
-        };
-        calc();
-        window.addEventListener("resize", calc);
-        return () => window.removeEventListener("resize", calc);
-    }, [data, nameKey, xAxisHeight, safeData.length, fontSize]);
-    // The stroke width of the lines
-    const strokeWidth = getThemeVar("width-line-LineChart");
-    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: safeData.length > 0 && nameKey
-                    ? safeData
-                        .map((d) => d === null || d === void 0 ? void 0 : d[nameKey])
-                        .map((label, idx) => ((0, jsx_runtime_1.jsx)("span", { style: { fontSize: 12, whiteSpace: "nowrap" }, children: label }, idx)))
-                    : null }), (0, jsx_runtime_1.jsx)("div", { ref: forwardedRef, className: (0, classnames_1.default)(className, LineChart_module_scss_1.default.wrapper), style: Object.assign({ flexGrow: 1 }, style), children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { ref: containerRef, width: "100%", height: "100%", minWidth: 60, minHeight: 30, debounce: 100, children: (0, jsx_runtime_1.jsxs)(recharts_1.LineChart, { accessibilityLayer: true, data: data, margin: miniMode ? { left: 0, right: 0, top: 0, bottom: 0 } : chartMargin, children: [(0, jsx_runtime_1.jsx)(recharts_1.XAxis, { interval: interval, tickLine: false, dataKey: nameKey, angle: tickAngle, textAnchor: tickAnchor, tick: miniMode ? false : !hideTickX && { fill: "currentColor", fontSize }, tickFormatter: miniMode ? undefined : tickFormatterX, height: miniMode || hideX ? 0 : xAxisHeight, hide: miniMode || hideX }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { hide: miniMode || hideY, tickLine: false, tickFormatter: miniMode ? undefined : tickFormatterY, tick: miniMode ? false : !hideTickY && { fill: "currentColor", fontSize }, domain: [0, (dataMax) => Math.ceil((dataMax * 1.05) / 10) * 10] }), !miniMode && !hideTooltip && (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { content: safeTooltipRenderer }), dataKeys.map((dataKey, i) => ((0, jsx_runtime_1.jsx)(recharts_1.Line, { type: "monotone", dataKey: dataKey, name: dataKey, stroke: colorValues[i], strokeWidth: strokeWidth, dot: false }, dataKey))), 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/PieChart/PieChart.js

@@ -1,64 +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.pieChartComponentRenderer = exports.PieChartMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const PieChartNative_1 = require("./PieChartNative");
-const PieChartNative_module_scss_1 = __importDefault(require("./PieChartNative.module.scss"));
-const abstractions_1 = require("../utils/abstractions");
-const themeVars_1 = require("../../../components-core/theming/themeVars");
-const renderers_1 = require("../../../components-core/renderers");
-const metadata_helpers_1 = require("../../metadata-helpers");
-const COMP = "PieChart";
-exports.PieChartMd = (0, metadata_helpers_1.createMetadata)({
-    status: "experimental",
-    description: "`PieChart` visualizes proportional data as circular segments; each slice " +
-        "represents a percentage of the whole. Note that the height of the component or " +
-        "its parent needs to be set explicitly.",
-    docFolder: "Charts/PieChart",
-    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: PieChartNative_1.defaultProps.showLabel,
-        },
-        showLabelList: {
-            description: "Whether to show labels in a list (\`true\`) or not (\`false\`).",
-            valueType: "boolean",
-            defaultValue: PieChartNative_1.defaultProps.showLabelList,
-        },
-        labelListPosition: {
-            description: "The position of the label list.",
-            valueType: "string",
-            defaultValue: PieChartNative_1.defaultProps.labelListPosition,
-            availableValues: abstractions_1.LabelPositionValues,
-        },
-        outerRadius: (0, metadata_helpers_1.d)("The outer radius of the pie chart, can be a number or a string (e.g., '100%')."),
-        showLegend: {
-            description: "Toggles whether to show legend (\`true\`) or not (\`false\`).",
-            valueType: "boolean",
-            defaultValue: PieChartNative_1.defaultProps.showLegend,
-        }
-    },
-    themeVars: (0, themeVars_1.parseScssVar)(PieChartNative_module_scss_1.default.themeVars),
-    defaultThemeVars: {
-        "textColor-labelList-PieChart": "$textColor-primary",
-    },
-});
-exports.pieChartComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.PieChartMd, ({ 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), labelListPosition: extractValue.asOptionalString((_b = node.props) === null || _b === void 0 ? void 0 : _b.labelListPosition), 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), showLegend: extractValue.asOptionalBoolean((_e = node.props) === null || _e === void 0 ? void 0 : _e.showLegend), dataKey: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.dataKey), nameKey: extractValue((_g = node.props) === null || _g === void 0 ? void 0 : _g.nameKey), children: renderChild(node.children) }));
-});