xmlui 0.7.20 → 0.7.21

package/dist/scripts/src/components/PieChart/PieChart.js

@@ -1,45 +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 renderers_1 = require("@components-core/renderers");
-const ComponentDefs_1 = require("@abstractions/ComponentDefs");
-const PieChart_module_scss_1 = __importDefault(require("./PieChart.module.scss"));
-const themeVars_1 = require("@components-core/theming/themeVars");
-const PieChartNative_1 = require("./PieChartNative");
-const COMP = "PieChart";
-exports.PieChartMd = (0, ComponentDefs_1.createMetadata)({
-    status: "deprecated",
-    description: "(**OBSOLETE**) A pie chart component",
-    props: {
-        data: (0, ComponentDefs_1.d)("The data to be displayed in the pie chart"),
-        isInteractive: (0, ComponentDefs_1.d)("Whether the chart is interactive"),
-        showLabels: (0, ComponentDefs_1.d)("Whether to show labels"),
-        showLegends: (0, ComponentDefs_1.d)("Whether to show legends"),
-        legendPosition: (0, ComponentDefs_1.d)("The position of the legend"),
-        legendDirection: (0, ComponentDefs_1.d)("The direction of the legend"),
-    },
-    themeVars: (0, themeVars_1.parseScssVar)(PieChart_module_scss_1.default.themeVars),
-    defaultThemeVars: {
-        [`scheme-${COMP}`]: "nivo",
-        [`color-text-${COMP}`]: "$color-text-secondary",
-        [`color-ticks-${COMP}`]: "$color-text-primary",
-        [`color-bg-tooltip-${COMP}`]: "$color-bg-primary",
-        [`color-text-tooltip-${COMP}`]: "$color-text-primary",
-        [`color-axis-${COMP}`]: "$color-text-primary",
-        [`color-text-legend-${COMP}`]: "$color-text-primary",
-        light: {
-            [`scheme-${COMP}`]: "set3",
-        },
-        dark: {
-            [`scheme-${COMP}`]: "dark2",
-        },
-    },
-});
-exports.pieChartComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.PieChartMd, ({ extractValue, node, layoutCss }) => {
-    var _a, _b, _c, _d, _e, _f;
-    return ((0, jsx_runtime_1.jsx)(PieChartNative_1.PieChart, { data: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.data), isInteractive: extractValue.asOptionalBoolean((_b = node.props) === null || _b === void 0 ? void 0 : _b.isInteractive), showLabels: extractValue.asOptionalBoolean((_c = node.props) === null || _c === void 0 ? void 0 : _c.showLabels), style: layoutCss, showLegends: extractValue.asOptionalBoolean((_d = node.props) === null || _d === void 0 ? void 0 : _d.showLegends), legendPosition: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.legendPosition), legendDirection: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.legendDirection) }));
-});

package/dist/scripts/src/components/PieChart/PieChartNative.js

@@ -1,165 +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.PieChart = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const PieChart_module_scss_1 = __importDefault(require("./PieChart.module.scss"));
-const ThemeContext_1 = require("@components-core/theming/ThemeContext");
-const chart_color_schemes_1 = __importDefault(require("@components/chart-color-schemes"));
-const classnames_1 = __importDefault(require("classnames"));
-const hooks_1 = require("@components-core/utils/hooks");
-const ResponsivePie = react_1.default.lazy(() => Promise.resolve().then(() => __importStar(require("@nivo/pie"))).then((module) => ({ default: module.ResponsivePie })));
-const PieChart = ({ data = [], isInteractive = true, style, showLabels = false, showLegends = true, legendPosition = "bottom", legendDirection = "row", }) => {
-    const { getThemeVar } = (0, ThemeContext_1.useTheme)();
-    const [customLegendData, setCustomLegendData] = react_1.default.useState([]);
-    const colors = (0, hooks_1.useColors)({
-        name: "color-text-PieChart",
-        format: "hex",
-    }, {
-        name: "color-ticks-PieChart",
-        format: "hex",
-    }, {
-        name: "color-bg-tooltip-PieChart",
-        format: "hex",
-    }, {
-        name: "color-text-tooltip-PieChart",
-        format: "hex",
-    }, {
-        name: "color-axis-PieChart",
-        format: "hex",
-    }, {
-        name: "color-text-legend-PieChart",
-        format: "hex",
-    });
-    const pieChart = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)(ResponsivePie, { fit: true, data: data, colors: { scheme: chart_color_schemes_1.default[getThemeVar("scheme-PieChart")] }, margin: { top: 12, right: 12, bottom: 12, left: 12 }, forwardLegendData: setCustomLegendData, theme: {
-            background: "transparent",
-            text: {
-                fontSize: 11,
-                fill: colors["color-text-PieChart"],
-                outlineWidth: 0,
-                outlineColor: "transparent",
-            },
-            axis: {
-                domain: {
-                    line: {
-                        stroke: colors["color-axis-PieChart"],
-                        strokeWidth: 1,
-                    },
-                },
-                legend: {
-                    text: {
-                        fontSize: 12,
-                        fill: colors["color-text-legend-PieChart"],
-                        outlineWidth: 0,
-                        outlineColor: "transparent",
-                    },
-                },
-                ticks: {
-                    line: {
-                        stroke: "#777777",
-                        strokeWidth: 1,
-                    },
-                    text: {
-                        fontSize: 11,
-                        fill: colors["color-ticks-PieChart"],
-                        outlineWidth: 0,
-                        outlineColor: "transparent",
-                    },
-                },
-            },
-            grid: {
-                line: {
-                    stroke: "#dddddd",
-                    strokeWidth: 1,
-                },
-            },
-            annotations: {
-                text: {
-                    fontSize: 13,
-                    fill: "#333333",
-                    outlineWidth: 2,
-                    outlineColor: "#ffffff",
-                    outlineOpacity: 1,
-                },
-                link: {
-                    stroke: "#000000",
-                    strokeWidth: 1,
-                    outlineWidth: 2,
-                    outlineColor: "#ffffff",
-                    outlineOpacity: 1,
-                },
-                outline: {
-                    stroke: "#000000",
-                    strokeWidth: 2,
-                    outlineWidth: 2,
-                    outlineColor: "#ffffff",
-                    outlineOpacity: 1,
-                },
-                symbol: {
-                    fill: "#000000",
-                    outlineWidth: 2,
-                    outlineColor: "#ffffff",
-                    outlineOpacity: 1,
-                },
-            },
-            tooltip: {
-                wrapper: {},
-                container: {
-                    background: colors["color-bg-tooltip-PieChart"],
-                    color: colors["color-text-tooltip-PieChart"],
-                    fontSize: 12,
-                },
-                basic: {},
-                chip: {},
-                table: {},
-                tableCell: {},
-                tableCellValue: {},
-            },
-        }, padAngle: 0.7, cornerRadius: 3, activeOuterRadiusOffset: 8, borderWidth: 1, borderColor: { from: "color", modifiers: [["darker", 0.2]] }, enableArcLinkLabels: showLabels, arcLinkLabelsSkipAngle: 10, arcLinkLabelsThickness: 2, arcLabelsSkipAngle: 10, isInteractive: isInteractive })), [showLegends, data, colors, isInteractive, legendPosition, legendDirection]);
-    return ((0, jsx_runtime_1.jsx)(react_1.Suspense, { children: (0, jsx_runtime_1.jsx)("div", { style: Object.assign({}, style), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(PieChart_module_scss_1.default.chart, {
-                    [PieChart_module_scss_1.default.legendTop]: legendPosition === "top",
-                    [PieChart_module_scss_1.default.legendRight]: legendPosition === "right",
-                    [PieChart_module_scss_1.default.legendBottom]: legendPosition === "bottom",
-                    [PieChart_module_scss_1.default.legendLeft]: legendPosition === "left",
-                }), children: [(0, jsx_runtime_1.jsx)("div", { className: PieChart_module_scss_1.default.wrapper, children: (0, jsx_runtime_1.jsx)("div", { className: PieChart_module_scss_1.default.chartContainer, children: pieChart }) }), showLegends && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(PieChart_module_scss_1.default.legends, {
-                            [PieChart_module_scss_1.default.legendRow]: legendDirection === "row",
-                            [PieChart_module_scss_1.default.legendColumn]: legendDirection === "column",
-                        }), children: customLegendData.map((item, i) => ((0, jsx_runtime_1.jsxs)("div", { className: PieChart_module_scss_1.default.legendItem, children: [(0, jsx_runtime_1.jsx)("div", { className: PieChart_module_scss_1.default.legendBullet, style: { backgroundColor: item.color } }), (0, jsx_runtime_1.jsx)("div", { className: PieChart_module_scss_1.default.legendLabel, children: item.label })] }, i))) }))] }) }) }));
-};
-exports.PieChart = PieChart;

package/dist/scripts/src/components/chart-color-schemes.js

@@ -1,43 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const colorSchemes = {
-    "set3": "set3",
-    "tableau10": "tableau10",
-    "brown_blueGreen": "brown_blueGreen",
-    "purpleRed_green": "purpleRed_green",
-    "pink_yellowGreen": "pink_yellowGreen",
-    "purple_orange": "purple_orange",
-    "red_blue": "red_blue",
-    "red_grey": "red_grey",
-    "red_yellow_blue": "red_yellow_blue",
-    "red_yellow_green": "red_yellow_green",
-    "spectral": "spectral",
-    "blues": "blues",
-    "greens": "greens",
-    "greys": "greys",
-    "oranges": "oranges",
-    "purples": "purples",
-    "reds": "reds",
-    "blue_green": "blue_green",
-    "blue_purple": "blue_purple",
-    "green_blue": "green_blue",
-    "orange_red": "orange_red",
-    "purple_blue_green": "purple_blue_green",
-    "purple_blue": "purple_blue",
-    "purple_red": "purple_red",
-    "red_purple": "red_purple",
-    "yellow_green_blue": "yellow_green_blue",
-    "yellow_green": "yellow_green",
-    "yellow_orange_brown": "yellow_orange_brown",
-    "yellow_orange_red": "yellow_orange_red",
-    "nivo": "nivo",
-    "category10": "category10",
-    "accent": "accent",
-    "dark2": "dark2",
-    "paired": "paired",
-    "pastel1": "pastel1",
-    "pastel2": "pastel2",
-    "set1": "set1",
-    "set2": "set2"
-};
-exports.default = colorSchemes;