xmlui 0.4.0

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

@@ -0,0 +1,60 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.mapComponentRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const PieChart_module_scss_1 = __importDefault(require("@components/PieChart/PieChart.module.scss"));
+const renderers_1 = require("@components-core/renderers");
+const react_1 = __importStar(require("react"));
+const world_countries_json_1 = __importDefault(require("./world_countries.json"));
+const ResponsiveChoropleth = react_1.default.lazy(() => Promise.resolve().then(() => __importStar(require("@nivo/geo"))).then((module) => ({ default: module.ResponsiveChoropleth })));
+const Map = ({ data = [], style }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { children: (0, jsx_runtime_1.jsx)(ResponsiveChoropleth, { data: data, margin: { top: 0, right: 0, bottom: 0, left: 0 }, colors: "nivo", domain: [0, 1000000], unknownColor: "#666666", label: "properties.name", valueFormat: ".2s", projectionTranslation: [0.5, 0.5], projectionRotation: [0, 0, 0], enableGraticule: true, graticuleLineColor: "#dddddd", borderWidth: 0.5, borderColor: "#152538", features: world_countries_json_1.default.features }) }) }));
+};
+const metadata = {
+    displayName: "Map",
+    description: "A pie chart component",
+    props: {
+        data: (0, descriptorHelper_1.desc)("The data to be displayed in the pie chart"),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(PieChart_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        light: {
+        ///
+        },
+        dark: {
+        ///
+        },
+    },
+};
+exports.mapComponentRenderer = (0, renderers_1.createComponentRenderer)("Map", ({ extractValue, node, layoutCss }) => {
+    var _a;
+    return (0, jsx_runtime_1.jsx)(Map, { data: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.data), style: layoutCss });
+}, metadata);