@retailcrm/datalens-ui 0.0.0

package/AccessErrorPage.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { Flex } from "@gravity-ui/uikit";
+import block from "bem-cn-lite";
+import { c9 as ErrorContentTypes, l as I18n } from "./components/AccessRights.js";
+import { E as ErrorContent } from "./components/ErrorContent.js";
+const i18n = I18n.keyset("datalens.landing.error");
+const b = block("settings-access-error-page");
+const AccessErrorPage = () => /* @__PURE__ */ jsx(Flex, { className: b(), direction: "column", grow: "1", height: "100vh", children: /* @__PURE__ */ jsx(
+  ErrorContent,
+  {
+    title: i18n("label_title-forbidden-entry"),
+    type: ErrorContentTypes.NO_ACCESS,
+    showDebugInfo: false
+  }
+) });
+export {
+  AccessErrorPage as A
+};

package/AdvancedChartWidget.js

@@ -0,0 +1,253 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default from "react";
+import { ChartKitError, CHARTKIT_ERROR_CODE } from "@gravity-ui/chartkit";
+import { transformParamsToActionParams } from "@gravity-ui/dashkit/helpers";
+import block from "bem-cn-lite";
+import { pointer } from "d3";
+import debounce from "lodash/debounce";
+import pick from "lodash/pick";
+import throttle from "lodash/throttle";
+import { D as DL, f1 as ChartQa } from "./components/AccessRights.js";
+import { bd as getRandomCKId, hX as chartStorage, hY as ATTR_DATA_ELEMENT_ID, hZ as Loader } from "./components/ControlComponents.js";
+import { P as Performance } from "./perfomance.js";
+import { useVirtualElementRef, Popup } from "@gravity-ui/uikit";
+const b$1 = block("advanced-chart-tooltip");
+const Tooltip = React__default.forwardRef((props, ref) => {
+  const { content, pointerPosition, widgetContainer } = props;
+  const containerRect = widgetContainer?.getBoundingClientRect() || { left: 0, top: 0 };
+  const left = (pointerPosition?.[0] || 0) + containerRect.left;
+  const top = (pointerPosition?.[1] || 0) + containerRect.top;
+  const anchorRef = useVirtualElementRef({ rect: { left, top } });
+  React__default.useEffect(() => {
+    window.dispatchEvent(new CustomEvent("scroll"));
+  }, [left, top]);
+  return content ? /* @__PURE__ */ jsx(
+    Popup,
+    {
+      className: b$1({}),
+      open: true,
+      anchorElement: anchorRef.current,
+      offset: { mainAxis: 10, crossAxis: 0 },
+      placement: ["right-end", "left", "top", "bottom"],
+      floatingRef: ref,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: b$1("content"),
+          dangerouslySetInnerHTML: {
+            __html: content
+          }
+        }
+      )
+    }
+  ) : null;
+});
+Tooltip.displayName = "Tooltip";
+function isTouchEnabled() {
+  if (typeof window !== "object") {
+    return false;
+  }
+  return "ontouchstart" in window || navigator.maxTouchPoints > 0;
+}
+const IS_TOUCH_ENABLED = isTouchEnabled();
+const b = block("chartkit-advanced-chart-widget");
+const THROTTLE_DELAY = 50;
+const AdvancedChartWidget = (props) => {
+  const {
+    id,
+    onLoad,
+    onChange,
+    data: { data: originalData }
+  } = props;
+  const generatedId = React__default.useMemo(() => `${id}_${getRandomCKId()}`, [id]);
+  Performance.mark(generatedId);
+  const ref = React__default.useRef(null);
+  const tooltipRef = React__default.useRef(null);
+  const contentRef = React__default.useRef(null);
+  const [dimensions, setDimensions] = React__default.useState();
+  const handleResize = React__default.useCallback(() => {
+    if (ref.current) {
+      const {
+        offsetTop: top,
+        offsetLeft: left,
+        clientWidth: width,
+        clientHeight
+      } = ref.current;
+      const height = !clientHeight && DL.IS_MOBILE ? 400 : clientHeight;
+      setDimensions({ top, left, width, height });
+    }
+  }, []);
+  const chartState = React__default.useRef({});
+  const render = () => {
+    if (!originalData?.render) {
+      return;
+    }
+    if (contentRef.current && dimensions) {
+      const context = chartStorage.get(generatedId);
+      const content = originalData.render.call(context, dimensions);
+      contentRef.current.innerHTML = String(content ?? "");
+    }
+  };
+  React__default.useEffect(() => {
+    chartStorage.set(generatedId, {
+      chartId: generatedId,
+      getState: () => chartState.current,
+      setState: (value, options) => {
+        chartState.current = { ...chartState.current, ...value };
+        if (!options?.silent) {
+          setTimeout(render, 0);
+        }
+      },
+      updateActionParams: (params) => {
+        if (onChange) {
+          const actionParams = transformParamsToActionParams(params);
+          onChange(
+            { type: "PARAMS_CHANGED", data: { params: actionParams } },
+            { forceUpdate: true },
+            true
+          );
+        }
+      },
+      updateParams: (params) => {
+        if (onChange) {
+          onChange({ type: "PARAMS_CHANGED", data: { params } }, { forceUpdate: true }, true);
+        }
+      }
+    });
+    return () => {
+      chartStorage.delete(generatedId);
+    };
+  }, [generatedId, dimensions, onChange]);
+  React__default.useEffect(() => {
+    if (dimensions) {
+      render();
+      const widgetRendering = Performance.getDuration(generatedId);
+      if (onLoad && widgetRendering) {
+        onLoad({ widget: props.data, widgetRendering });
+      }
+    }
+  }, [dimensions, generatedId, onLoad, props.data]);
+  const handleClick = React__default.useCallback(
+    (event) => {
+      if (originalData?.events?.click) {
+        const context = chartStorage.get(generatedId);
+        if (context) {
+          context.__innerHTML = ref.current?.innerHTML;
+          const target = {
+            [ATTR_DATA_ELEMENT_ID]: event.target.getAttribute(ATTR_DATA_ELEMENT_ID)
+          };
+          originalData.events.click.call(context, {
+            target
+          });
+        }
+      }
+    },
+    [generatedId, originalData.events?.click]
+  );
+  const handleKeyDown = React__default.useCallback(
+    (event) => {
+      if (originalData?.events?.keydown) {
+        const context = chartStorage.get(generatedId);
+        const eventProps = pick(event, "which");
+        originalData.events.keydown.call(context, eventProps);
+      }
+    },
+    [generatedId, originalData.events?.keydown]
+  );
+  const debuncedHandleResize = React__default.useMemo(() => debounce(handleResize, 100), [handleResize]);
+  React__default.useLayoutEffect(() => {
+    handleResize();
+  }, [handleResize]);
+  React__default.useEffect(() => {
+    window.addEventListener("resize", debuncedHandleResize);
+    return () => {
+      window.removeEventListener("resize", debuncedHandleResize);
+    };
+  }, [debuncedHandleResize]);
+  const [tooltipState, setTooltipState] = React__default.useState();
+  const isOutsideBounds = React__default.useCallback(
+    (x, y) => {
+      if (!dimensions) {
+        return false;
+      }
+      return x < 0 || x > dimensions.width || y < 0 || y > dimensions.height;
+    },
+    [dimensions]
+  );
+  const handleMove = ([pointerX, pointerY], event) => {
+    const x = pointerX - (dimensions?.left ?? 0);
+    const y = pointerY - (dimensions?.top ?? 0);
+    if (isOutsideBounds(x, y)) {
+      setTooltipState(null);
+      return;
+    }
+    if (tooltipRef.current) {
+      const tooltipContentRect = tooltipRef.current.getBoundingClientRect();
+      const offset = ref.current?.getBoundingClientRect();
+      const currentXPosition = pointerX + (offset?.left ?? 0);
+      const currentYPosition = pointerY + (offset?.top ?? 0);
+      const isInsideTooltipBounds = currentXPosition > tooltipContentRect.left && currentXPosition < tooltipContentRect.right && currentYPosition > tooltipContentRect.top && currentYPosition < tooltipContentRect.bottom;
+      if (isInsideTooltipBounds) {
+        return;
+      }
+    }
+    if (originalData?.tooltip?.renderer) {
+      const context = chartStorage.get(generatedId);
+      context.__innerHTML = ref.current?.innerHTML;
+      const target = {
+        [ATTR_DATA_ELEMENT_ID]: event.target.getAttribute(
+          ATTR_DATA_ELEMENT_ID
+        )
+      };
+      const synteticEvent = {
+        target
+      };
+      const tooltipContent = originalData.tooltip.renderer.call(context, synteticEvent);
+      setTooltipState({
+        content: tooltipContent,
+        position: [x, y]
+      });
+    }
+  };
+  const handleMouseMove = (event) => {
+    const [pointerX, pointerY] = pointer(event, ref.current);
+    handleMove([pointerX, pointerY], event);
+  };
+  const throttledHandleMouseMove = IS_TOUCH_ENABLED ? void 0 : throttle(handleMouseMove, THROTTLE_DELAY);
+  const handleMouseLeave = (_event) => {
+    throttledHandleMouseMove?.cancel();
+    setTooltipState(null);
+  };
+  if (!originalData || typeof originalData === "object" && !Object.keys(originalData).length) {
+    throw new ChartKitError({
+      code: CHARTKIT_ERROR_CODE.NO_DATA
+    });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: b(),
+      ref,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      onMouseMove: throttledHandleMouseMove,
+      onMouseLeave: handleMouseLeave,
+      tabIndex: -1,
+      children: [
+        /* @__PURE__ */ jsx("div", { "data-qa": ChartQa.Chart, className: b("content"), ref: contentRef, children: /* @__PURE__ */ jsx(Loader, {}) }),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            ref: tooltipRef,
+            pointerPosition: tooltipState?.position,
+            content: tooltipState?.content,
+            widgetContainer: ref.current
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  AdvancedChartWidget as default
+};

package/AppearanceSettings.js

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Flex } from "@gravity-ui/uikit";
+import block from "bem-cn-lite";
+import { C as ColorPaletteEditorContainer } from "./components/ColorPaletteEditorContainer.js";
+import { D as DL, l as I18n, F as Feature } from "./components/AccessRights.js";
+import { i as isEnabledFeature } from "./components/ActionPanel.js";
+const b$1 = block("dl-settings-section-group");
+const SectionGroup = (props) => {
+  return /* @__PURE__ */ jsx("section", { children: /* @__PURE__ */ jsxs("div", { className: b$1("row"), children: [
+    /* @__PURE__ */ jsxs("div", { className: b$1("title"), children: [
+      /* @__PURE__ */ jsx("h4", { className: b$1("header"), children: props.title }),
+      props.description
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: b$1("content"), children: props.children })
+  ] }) });
+};
+const b = block("service-settings-appearance");
+const i18n = I18n.keyset("service-settings.main.view");
+const AppearanceSettings = ({ customSettings, disablePalettesEdit }) => {
+  const isTabContent = DL.AUTH_ENABLED && DL.IS_NATIVE_AUTH_ADMIN;
+  return /* @__PURE__ */ jsx("section", { className: b(), children: /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      gap: 7,
+      direction: "column",
+      className: b("content", {
+        tab: isTabContent,
+        newTab: isTabContent && isEnabledFeature(Feature.EnableNewServiceSettings)
+      }),
+      children: [
+        /* @__PURE__ */ jsx(SectionGroup, { title: i18n("section_color-palettes"), children: /* @__PURE__ */ jsx(
+          ColorPaletteEditorContainer,
+          {
+            condensed: true,
+            hasEditRights: !disablePalettesEdit
+          }
+        ) }),
+        customSettings
+      ]
+    }
+  ) });
+};
+export {
+  AppearanceSettings as default
+};