@evergis/react 4.0.131 → 4.0.132

package/dist/index.js

@@ -75,205 +75,6 @@ const AddFeatureButton = ({ title, icon = "feature_add" /* , layerName, geometry
     return (jsxRuntime.jsx(uilibGl.IconButton, { kind: icon, primary: true, onClick: handleAddFeature, children: title }));
 };
 
-const ChartTooltipTable = styled.table.withConfig({ displayName: "ChartTooltipTable", componentId: "sc-1fk3ts5" }) `
-  td {
-    padding: 0;
-  }
-
-  tr:not(:last-child) td {
-    padding-bottom: 0.375rem;
-  }
-`;
-const ChartTooltip = styled(uilibGl.Flex).withConfig({ displayName: "ChartTooltip", componentId: "sc-1iyyyv7" }) `
-  flex-wrap: nowrap;
-  background: rgb(48, 69, 79);
-  border-radius: 0.25rem;
-  color: white;
-
-  :not(:last-child) {
-    margin-bottom: 0.25rem;
-  }
-`;
-const ChartTooltipLabel = styled.div.withConfig({ displayName: "ChartTooltipLabel", componentId: "sc-gl0qxz" }) `
-  margin-right: 0.25rem;
-`;
-const ChartTooltipColor = styled.div.withConfig({ displayName: "ChartTooltipColor", componentId: "sc-tmvvbh" }) `
-  width: 0.625rem;
-  height: 0.625rem;
-  background-color: ${({ $color }) => $color};
-  border-radius: ${({ theme: { borderRadius } }) => borderRadius.smallest};
-  margin-right: 0.25rem;
-`;
-const ChartLegendColor$1 = styled.div.withConfig({ displayName: "ChartLegendColor", componentId: "sc-l66k4q" }) `
-  width: 0.5rem;
-  height: 0.5rem;
-  background-color: ${({ $color }) => $color};
-  border-radius: 0.125rem;
-`;
-const ChartLegendValue = styled.div.withConfig({ displayName: "ChartLegendValue", componentId: "sc-1d7z775" }) `
-  opacity: 0.65;
-`;
-const ChartTooltipRow = styled(uilibGl.Flex).withConfig({ displayName: "ChartTooltipRow", componentId: "sc-ih1uc5" }) `
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: center;
-  margin-top: 0.5rem;
-  line-height: 0;
-
-  ${ChartLegendColor$1} {
-    margin-right: 0.25rem;
-  }
-`;
-const ChartTooltipName = styled.div.withConfig({ displayName: "ChartTooltipName", componentId: "sc-sm4g0t" }) `
-  margin-right: 1rem;
-  opacity: 0.65;
-`;
-const PieChartCenter = styled.div.withConfig({ displayName: "PieChartCenter", componentId: "sc-1le93jy" }) `
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  text-align: center;
-  font-weight: bold;
-  font-size: 1.5rem;
-`;
-const ChartWrapperContainer = styled.div.withConfig({ displayName: "ChartWrapperContainer", componentId: "sc-1f4x9zv" }) `
-  position: relative;
-  width: 100%;
-`;
-/*
- * fill-режим: обёртка забирает всю доступную ячейку (её высоту задаёт флекс-цепочка, а не контент графика),
- * на неё вешается ref для ResizeObserver — меряем обе оси без цикла. Плоский div (не Flex uilib), как соседний
- * ChartWrapperContainer, чтобы ref гарантированно дошёл до DOM-узла. Тело графика центрируется внутри.
- */
-const ChartFillMeasure = styled.div.withConfig({ displayName: "ChartFillMeasure", componentId: "sc-1r4oerb" }) `
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  min-width: 0;
-  min-height: 0;
-  overflow: hidden;
-
-  /* SVG по умолчанию inline, поэтому под ним остаётся зазор базовой линии (~4px при line-height
-     18.4px): вне fill его скрывал запас высоты, а тело, точно заполнившее ячейку, из-за него
-     вылезает за нижнюю границу. Блочный SVG зазора не даёт. */
-  svg {
-    display: block;
-  }
-`;
-const Tooltip = styled.div.withConfig({ displayName: "Tooltip", componentId: "sc-1va8cy3" }) `
-  position: relative;
-  border-radius: 0.25rem;
-  background-color: rgba(28, 33, 48);
-  padding: 0.5rem;
-  box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.15);
-  font-size: 0.75rem;
-  transform: ${({ transform }) => transform};
-  color: white;
-
-  :before {
-    position: absolute;
-    display: block;
-    content: "";
-    width: 0;
-    height: 0;
-  }
-`;
-const LineChartStyles = styled.createGlobalStyle `
-  .dashboardLineChartTooltip.${charts.lineChartClassNames.lineChartMouseLabel} {
-    .${charts.lineChartClassNames.lineChartLabelFlex} {
-      justify-content: center;
-      align-items: flex-end;
-
-      ${Tooltip} {
-        margin: 0 0 12px 0;
-
-        :before {
-          top: auto;
-          bottom: 0;
-          left: 50%;
-          transform: translate(-50%, 100%);
-          border-left: 4px solid transparent;
-          border-right: 4px solid transparent;
-          border-top: 4px solid rgba(28, 33, 48, 0.9);
-        }
-      }
-    }
-  }
-  
-  .${charts.lineChartClassNames.lineChartYScaleGlobal}, .${charts.lineChartClassNames.lineChartXScaleGlobal} {
-    .domain {
-      visibility: hidden;
-    }
-
-    .tick {
-      text {
-        fill: ${({ theme: { palette } }) => palette.textDisabled};
-      }
-
-      line {
-        visibility: hidden;
-      }
-    }
-  }
-
-  .${charts.lineChartClassNames.lineChartXScaleGlobal} {
-    .tick {
-      :first-of-type {
-        text {
-          text-anchor: start;
-        }
-      }
-
-      :last-of-type {
-        text {
-          text-anchor: end;
-        }
-      }
-    }
-  }
-
-  .${charts.lineChartClassNames.lineChartLine} {
-    stroke-width: 2px;
-  }
-
-  .${charts.lineChartClassNames.lineChartLabel} {
-    color: ${({ theme: { palette } }) => palette.textPrimary};
-  }
-
-  .${charts.lineChartClassNames.lineChartMouseCircle} {
-    stroke: #ffffff;
-    stroke-width: 2px;
-  }
-
-  .${charts.lineChartClassNames.lineChartGridLineX} {
-    stroke: ${({ theme: { palette } }) => palette.element};
-  }
-
-  text {
-    fill: ${({ theme: { palette } }) => palette.textDisabled};
-  }
-`;
-const StyledBarChart = styled(charts.BarChart).withConfig({ displayName: "StyledBarChart", componentId: "sc-1l1kx80" }) `
-  .domain {
-    display: none;
-  }
-
-  .tick {
-    text {
-      fill: ${({ theme: { palette } }) => palette.textDisabled};
-    }
-
-    line {
-      visibility: hidden;
-    }
-  }
-`;
-
 function range(start, stop, step) {
   start = +start, stop = +stop, step = (n = arguments.length) < 2 ? (stop = start, start = 0, 1) : n < 3 ? 1 : +step;
 
@@ -3588,6 +3389,22 @@ const ATTRIBUTE_ICON_ELEMENT_TYPES = {
 const EMPTY_DATA_SOURCE_LAYER_INFO = {
     configuration: { attributesConfiguration: { attributes: [] } },
 };
+/**
+ * z-index плавающих слоёв дашборда: тултипы графиков и выпадающие списки фильтров.
+ *
+ * Тултипы графиков (`@evergis/charts`) и поповеры дропдаунов рендерятся порталом в `body`, где
+ * их собственные z-index (100 у Bar/Line, 103 у Pie) ниже модального окна `Dialog` из
+ * `@evergis/uilib-gl` (110) — внутри модалки дашборда они уходили под окно.
+ */
+const DASHBOARD_OVERLAY_Z_INDEX = 1000;
+/**
+ * Стиль контейнера тултипа `PieChart`: там z-index проставляется инлайном (103), поэтому поднять
+ * его CSS-классом нельзя — только через `tooltipStyle`. Ключ пишем в CSS-нотации: значение уходит
+ * в `d3.selection.style()` → `setProperty`, а camelCase он не понимает.
+ */
+const PIE_CHART_TOOLTIP_STYLE = {
+    "z-index": `${DASHBOARD_OVERLAY_Z_INDEX}`,
+};
 const DEFAULT_DROPDOWN_WIDTH = 312;
 const DEFAULT_FILTER_PADDING = 12;
 /** Базовый отступ обёртки контейнера. Снимается, когда контейнер занимает ячейку целиком. */
@@ -3621,6 +3438,217 @@ const CONTAINER_BODY_FILL_STYLE = {
  */
 const CONTAINERS_GROUP_DEFAULTS = { boxSizing: "border-box" };
 
+const ChartTooltipTable = styled.table.withConfig({ displayName: "ChartTooltipTable", componentId: "sc-1fk3ts5" }) `
+  td {
+    padding: 0;
+  }
+
+  tr:not(:last-child) td {
+    padding-bottom: 0.375rem;
+  }
+`;
+const ChartTooltip = styled(uilibGl.Flex).withConfig({ displayName: "ChartTooltip", componentId: "sc-1iyyyv7" }) `
+  flex-wrap: nowrap;
+  background: rgb(48, 69, 79);
+  border-radius: 0.25rem;
+  color: white;
+
+  :not(:last-child) {
+    margin-bottom: 0.25rem;
+  }
+`;
+const ChartTooltipLabel = styled.div.withConfig({ displayName: "ChartTooltipLabel", componentId: "sc-gl0qxz" }) `
+  margin-right: 0.25rem;
+`;
+const ChartTooltipColor = styled.div.withConfig({ displayName: "ChartTooltipColor", componentId: "sc-tmvvbh" }) `
+  width: 0.625rem;
+  height: 0.625rem;
+  background-color: ${({ $color }) => $color};
+  border-radius: ${({ theme: { borderRadius } }) => borderRadius.smallest};
+  margin-right: 0.25rem;
+`;
+const ChartLegendColor$1 = styled.div.withConfig({ displayName: "ChartLegendColor", componentId: "sc-l66k4q" }) `
+  width: 0.5rem;
+  height: 0.5rem;
+  background-color: ${({ $color }) => $color};
+  border-radius: 0.125rem;
+`;
+const ChartLegendValue = styled.div.withConfig({ displayName: "ChartLegendValue", componentId: "sc-1d7z775" }) `
+  opacity: 0.65;
+`;
+const ChartTooltipRow = styled(uilibGl.Flex).withConfig({ displayName: "ChartTooltipRow", componentId: "sc-ih1uc5" }) `
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  margin-top: 0.5rem;
+  line-height: 0;
+
+  ${ChartLegendColor$1} {
+    margin-right: 0.25rem;
+  }
+`;
+const ChartTooltipName = styled.div.withConfig({ displayName: "ChartTooltipName", componentId: "sc-sm4g0t" }) `
+  margin-right: 1rem;
+  opacity: 0.65;
+`;
+const PieChartCenter = styled.div.withConfig({ displayName: "PieChartCenter", componentId: "sc-1le93jy" }) `
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  font-weight: bold;
+  font-size: 1.5rem;
+`;
+const ChartWrapperContainer = styled.div.withConfig({ displayName: "ChartWrapperContainer", componentId: "sc-1f4x9zv" }) `
+  position: relative;
+  width: 100%;
+`;
+/*
+ * fill-режим: обёртка забирает всю доступную ячейку (её высоту задаёт флекс-цепочка, а не контент графика),
+ * на неё вешается ref для ResizeObserver — меряем обе оси без цикла. Плоский div (не Flex uilib), как соседний
+ * ChartWrapperContainer, чтобы ref гарантированно дошёл до DOM-узла. Тело графика центрируется внутри.
+ */
+const ChartFillMeasure = styled.div.withConfig({ displayName: "ChartFillMeasure", componentId: "sc-1r4oerb" }) `
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+
+  /* SVG по умолчанию inline, поэтому под ним остаётся зазор базовой линии (~4px при line-height
+     18.4px): вне fill его скрывал запас высоты, а тело, точно заполнившее ячейку, из-за него
+     вылезает за нижнюю границу. Блочный SVG зазора не даёт. */
+  svg {
+    display: block;
+  }
+`;
+const Tooltip = styled.div.withConfig({ displayName: "Tooltip", componentId: "sc-1va8cy3" }) `
+  position: relative;
+  border-radius: 0.25rem;
+  background-color: rgba(28, 33, 48);
+  padding: 0.5rem;
+  box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.15);
+  font-size: 0.75rem;
+  transform: ${({ transform }) => transform};
+  color: white;
+
+  :before {
+    position: absolute;
+    display: block;
+    content: "";
+    width: 0;
+    height: 0;
+  }
+`;
+/**
+ * Тултипы графиков рендерятся в `body` со своим z-index (100 у Bar и Line) — ниже модального окна
+ * `Dialog` из `@evergis/uilib-gl` (110), поэтому в модалке дашборда они уходили под окно. Класс
+ * дублируем, чтобы правило перебило стили `@evergis/charts` по специфичности, а не по порядку
+ * подключения.
+ */
+const ChartTooltipStyles = styled.createGlobalStyle `
+  .${charts.barChartClassNames.barChartMouseTooltip}.${charts.barChartClassNames.barChartMouseTooltip},
+  .${charts.lineChartClassNames.lineChartMouseLabel}.${charts.lineChartClassNames.lineChartMouseLabel} {
+    z-index: ${DASHBOARD_OVERLAY_Z_INDEX};
+  }
+`;
+const LineChartStyles = styled.createGlobalStyle `
+  .dashboardLineChartTooltip.${charts.lineChartClassNames.lineChartMouseLabel} {
+    .${charts.lineChartClassNames.lineChartLabelFlex} {
+      justify-content: center;
+      align-items: flex-end;
+
+      ${Tooltip} {
+        margin: 0 0 12px 0;
+
+        :before {
+          top: auto;
+          bottom: 0;
+          left: 50%;
+          transform: translate(-50%, 100%);
+          border-left: 4px solid transparent;
+          border-right: 4px solid transparent;
+          border-top: 4px solid rgba(28, 33, 48, 0.9);
+        }
+      }
+    }
+  }
+  
+  .${charts.lineChartClassNames.lineChartYScaleGlobal}, .${charts.lineChartClassNames.lineChartXScaleGlobal} {
+    .domain {
+      visibility: hidden;
+    }
+
+    .tick {
+      text {
+        fill: ${({ theme: { palette } }) => palette.textDisabled};
+      }
+
+      line {
+        visibility: hidden;
+      }
+    }
+  }
+
+  .${charts.lineChartClassNames.lineChartXScaleGlobal} {
+    .tick {
+      :first-of-type {
+        text {
+          text-anchor: start;
+        }
+      }
+
+      :last-of-type {
+        text {
+          text-anchor: end;
+        }
+      }
+    }
+  }
+
+  .${charts.lineChartClassNames.lineChartLine} {
+    stroke-width: 2px;
+  }
+
+  .${charts.lineChartClassNames.lineChartLabel} {
+    color: ${({ theme: { palette } }) => palette.textPrimary};
+  }
+
+  .${charts.lineChartClassNames.lineChartMouseCircle} {
+    stroke: #ffffff;
+    stroke-width: 2px;
+  }
+
+  .${charts.lineChartClassNames.lineChartGridLineX} {
+    stroke: ${({ theme: { palette } }) => palette.element};
+  }
+
+  text {
+    fill: ${({ theme: { palette } }) => palette.textDisabled};
+  }
+`;
+const StyledBarChart = styled(charts.BarChart).withConfig({ displayName: "StyledBarChart", componentId: "sc-1l1kx80" }) `
+  .domain {
+    display: none;
+  }
+
+  .tick {
+    text {
+      fill: ${({ theme: { palette } }) => palette.textDisabled};
+    }
+
+    line {
+      visibility: hidden;
+    }
+  }
+`;
+
 const StackBarContainer = styled(uilibGl.Flex).withConfig({ displayName: "StackBarContainer", componentId: "sc-stc97k" }) `
   flex-wrap: nowrap;
   width: 100%;
@@ -4516,13 +4544,22 @@ const applyFiltersToCondition = ({ condition, name, defaultValue, filters, isSin
         return applyTreeFilterToCondition(condition, name, rawValue, isSingle);
     }
     const hasFilter = filters[name] !== undefined && !!filters[name].value?.toString().length;
+    const filterName = `${FILTER_PREFIX}${name}`;
+    // Пока фильтр не применён, границы `%name.min` / `%name.max` берём из range-дефолта конфига
+    // (`defaultValue: [from, to]`) — иначе в условие ушёл бы весь массив вместо своей границы.
+    // Проверка плейсхолдеров обязательна: у array-фильтра массивный дефолт подставляется целиком.
+    const rangeDefault = !hasFilter &&
+        Array.isArray(defaultValue) &&
+        (condition.includes(`${filterName}.min`) || condition.includes(`${filterName}.max`))
+        ? defaultValue
+        : null;
     const min = formatConditionValue({
-        value: hasFilter ? filters[name].min : null,
+        value: hasFilter ? filters[name].min : rangeDefault?.[0] ?? null,
         checkQuotes: !isSingle,
         isSetParams,
     });
     const max = formatConditionValue({
-        value: hasFilter ? filters[name].max : null,
+        value: hasFilter ? filters[name].max : rangeDefault?.[1] ?? null,
         checkQuotes: !isSingle,
         isSetParams,
     });
@@ -4532,7 +4569,6 @@ const applyFiltersToCondition = ({ condition, name, defaultValue, filters, isSin
         checkQuotes: !isSingle,
         isSetParams,
     });
-    const filterName = `${FILTER_PREFIX}${name}`;
     const hasMin = min !== "" && min !== null && min !== undefined;
     const hasMax = max !== "" && max !== null && max !== undefined;
     let result = condition;
@@ -12744,7 +12780,7 @@ const EditStringContainer = ({ type, elementConfig, renderElement, }) => {
         onControlChange(String(lastSelected?.value ?? ""));
         setValue(lastSelected?.text ?? "");
     }, [onControlChange, setValue]);
-    return (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: { ...BASE_CONTAINER_STYLE, ...style }, children: [jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxRuntime.jsx(ContainerValue, { column: true, children: control?.relatedDataSource ? (jsxRuntime.jsx(uilibGl.AutoComplete, { value: value, options: options, width: "100%", onChange: onChange, onSelect: onSelect })) : (jsxRuntime.jsx(uilibGl.Input, { value: controlValue, width: "100%", onChange: (e) => onControlChange(e.target.value) })) })] }));
+    return (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: { ...BASE_CONTAINER_STYLE, ...style }, children: [jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxRuntime.jsx(ContainerValue, { column: true, children: control?.relatedDataSource ? (jsxRuntime.jsx(uilibGl.AutoComplete, { zIndex: DASHBOARD_OVERLAY_Z_INDEX, value: value, options: options, width: "100%", onChange: onChange, onSelect: onSelect })) : (jsxRuntime.jsx(uilibGl.Input, { value: controlValue, width: "100%", onChange: (e) => onControlChange(e.target.value) })) })] }));
 };
 
 const EditNumberContainer = ({ type, elementConfig, renderElement, }) => {
@@ -12757,7 +12793,7 @@ const EditDropdownContainer = ({ type, elementConfig, renderElement, }) => {
     const { value, control, items, onChange } = useEditControl(type, elementConfig);
     const { id, style } = elementConfig || {};
     const optionsList = React.useMemo(() => items.map(item => ({ text: item, value: item })), [items]);
-    return (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: { ...BASE_CONTAINER_STYLE, ...style }, children: [jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxRuntime.jsx(ContainerValue, { column: true, children: jsxRuntime.jsx(uilibGl.Dropdown, { zIndex: 1000, label: control?.label, placeholder: control?.placeholder, options: optionsList, value: value, width: `${control?.width ?? DEFAULT_DROPDOWN_WIDTH}px`, onChange: ([option]) => onChange(option.value) }) })] }));
+    return (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: { ...BASE_CONTAINER_STYLE, ...style }, children: [jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxRuntime.jsx(ContainerValue, { column: true, children: jsxRuntime.jsx(uilibGl.Dropdown, { zIndex: DASHBOARD_OVERLAY_Z_INDEX, label: control?.label, placeholder: control?.placeholder, options: optionsList, value: value, width: `${control?.width ?? DEFAULT_DROPDOWN_WIDTH}px`, onChange: ([option]) => onChange(option.value) }) })] }));
 };
 
 const CheckboxWrapper = styled(ContainerValue).withConfig({ displayName: "CheckboxWrapper", componentId: "sc-169umb6" }) `
@@ -12798,7 +12834,7 @@ const EditDateContainer = ({ type, elementConfig, renderElement, }) => {
     const { withTime } = options || {};
     const dateValue = React.useMemo(() => (value ? new Date(value) : undefined), [value]);
     const handleChange = React.useCallback((date) => onChange(date.toISOString()), [onChange]);
-    return (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: { ...BASE_CONTAINER_STYLE, ...style }, children: [jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxRuntime.jsx(ContainerValue, { column: true, children: jsxRuntime.jsx(uilibGl.DatePicker, { value: dateValue, locale: uilibGl.getLocale(language), withTime: withTime ?? false, withHeader: true, width: "100%", onChange: handleChange }) })] }));
+    return (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: { ...BASE_CONTAINER_STYLE, ...style }, children: [jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxRuntime.jsx(ContainerValue, { column: true, children: jsxRuntime.jsx(uilibGl.DatePicker, { zIndex: DASHBOARD_OVERLAY_Z_INDEX, value: dateValue, locale: uilibGl.getLocale(language), withTime: withTime ?? false, withHeader: true, width: "100%", onChange: handleChange }) })] }));
 };
 
 const AddButton = ({ multiple = true, accept, onSelectFiles, onSelectFromCatalog, onSelectFromLink, }) => {
@@ -13946,7 +13982,7 @@ const ElementControl = ({ elementConfig }) => {
             });
         }
     }, [changeControls, control?.targetAttributeName]);
-    return (jsxRuntime.jsx(uilibGl.Dropdown, { zIndex: 1000, width: toCssSize(width) ?? "100%", label: label, options: items, value: currentValue, placeholder: placeholder, disabled: isDisabled, onChange: handleChange }));
+    return (jsxRuntime.jsx(uilibGl.Dropdown, { zIndex: DASHBOARD_OVERLAY_Z_INDEX, width: toCssSize(width) ?? "100%", label: label, options: items, value: currentValue, placeholder: placeholder, disabled: isDisabled, onChange: handleChange }));
 };
 
 const StyledIconFontSizeMixin = styled.css `
@@ -14120,7 +14156,7 @@ const LocalLink = React.memo(({ link, style }) => {
         navigator.clipboard.writeText(link);
         toggleOpen();
     }, [link, toggleOpen]);
-    return (jsxRuntime.jsx(uilibGl.Popover, { open: isOpen, zIndex: 10, onRequestClose: toggleOpen, anchorOrigin: "bottom-right", targetOrigin: "top-right", anchor: jsxRuntime.jsx(LocalLinkButton, { onClick: toggleOpen }), children: jsxRuntime.jsxs(LocalLinkBlank, { children: [jsxRuntime.jsx(Link, { href: link, target: "_blank", rel: "noreferrer", style: style, children: link }), jsxRuntime.jsx(LocalLinkCopy, { children: jsxRuntime.jsx(uilibGl.IconButton, { kind: "copy", onClick: onCopy, children: t("copy", { ns: "dashboard", defaultValue: "Копировать" }) }) })] }) }));
+    return (jsxRuntime.jsx(uilibGl.Popover, { open: isOpen, zIndex: DASHBOARD_OVERLAY_Z_INDEX, onRequestClose: toggleOpen, anchorOrigin: "bottom-right", targetOrigin: "top-right", anchor: jsxRuntime.jsx(LocalLinkButton, { onClick: toggleOpen }), children: jsxRuntime.jsxs(LocalLinkBlank, { children: [jsxRuntime.jsx(Link, { href: link, target: "_blank", rel: "noreferrer", style: style, children: link }), jsxRuntime.jsx(LocalLinkCopy, { children: jsxRuntime.jsx(uilibGl.IconButton, { kind: "copy", onClick: onCopy, children: t("copy", { ns: "dashboard", defaultValue: "Копировать" }) }) })] }) }));
 });
 
 const ElementLink = React.memo(({ type, elementConfig }) => {
@@ -14741,7 +14777,7 @@ const TableCell = React.memo(({ attribute, row, canEdit, onChange }) => {
     }
     const renderEditor = () => {
         if (type === api.AttributeType.DateTime) {
-            return (jsxRuntime.jsx(uilibGl.DatePicker, { focus: true, value: dateValue, locale: uilibGl.getLocale(language), withTime: withTime, withHeader: true, width: "100%", onChange: date => handleChange(date.toISOString()) }));
+            return (jsxRuntime.jsx(uilibGl.DatePicker, { zIndex: DASHBOARD_OVERLAY_Z_INDEX, focus: true, value: dateValue, locale: uilibGl.getLocale(language), withTime: withTime, withHeader: true, width: "100%", onChange: date => handleChange(date.toISOString()) }));
         }
         if (NUMBER_EDITOR_TYPES.includes(type)) {
             return (jsxRuntime.jsx(uilibGl.NumberInput, { autoFocus: true, value: value === null || value === undefined ? null : Number(value), width: "100%", numeralDecimalScale: INTEGER_ATTRIBUTE_TYPES.includes(type) ? 0 : undefined, onChange: next => handleChange(next) }));
@@ -15819,7 +15855,7 @@ const TextFilter = ({ type, filter }) => {
     }, [filterName, filters]);
     if (!configFilter)
         return null;
-    return (jsxRuntime.jsx(TextFilterContainer, { children: jsxRuntime.jsx(uilibGl.AutoComplete, { value: value, placeholder: placeholder, options: variants || options, zIndex: 100, width: getFilterWidth(width), menuHeight: height ? `${height}px` : "10rem", withInfiniteScroll: !variants, infiniteScrollProps: variants ? undefined : infiniteScrollProps, multiSelect: multiSelect, selected: selected, setOptions: variants ? undefined : setOptions, onChange: onChange, onSelect: onSelect, onGetInnerRef: ref => (suggestRef.current = ref), asyncCallback: variants ? undefined : search, onBlur: onBlur, onKeyUp: isFreeTextInput || (variants && !variants.length) ? onKeyUp : undefined }) }));
+    return (jsxRuntime.jsx(TextFilterContainer, { children: jsxRuntime.jsx(uilibGl.AutoComplete, { value: value, placeholder: placeholder, options: variants || options, zIndex: DASHBOARD_OVERLAY_Z_INDEX, width: getFilterWidth(width), menuHeight: height ? `${height}px` : "10rem", withInfiniteScroll: !variants, infiniteScrollProps: variants ? undefined : infiniteScrollProps, multiSelect: multiSelect, selected: selected, setOptions: variants ? undefined : setOptions, onChange: onChange, onSelect: onSelect, onGetInnerRef: ref => (suggestRef.current = ref), asyncCallback: variants ? undefined : search, onBlur: onBlur, onKeyUp: isFreeTextInput || (variants && !variants.length) ? onKeyUp : undefined }) }));
 };
 
 const getListOptions = (items, filterName, configFilters) => {
@@ -15865,7 +15901,7 @@ const DropdownFilter = ({ type, filter, elementConfig }) => {
     }, [changeFilters, filterName]);
     if (!configFilter && !variants)
         return null;
-    return (jsxRuntime.jsx(uilibGl.Dropdown, { zIndex: 100, width: getFilterWidth(width), value: value, placeholder: placeholder, options: filterOptions, onChange: onChange }));
+    return (jsxRuntime.jsx(uilibGl.Dropdown, { zIndex: DASHBOARD_OVERLAY_Z_INDEX, width: getFilterWidth(width), value: value, placeholder: placeholder, options: filterOptions, onChange: onChange }));
 };
 
 const CheckboxFilter = ({ type, filter, elementConfig }) => {
@@ -16135,7 +16171,7 @@ const BarChartFilter = ({ type, config, elementConfig, filter }) => {
         return (jsxRuntime.jsx(uilibGl.ThemeProvider, { children: jsxRuntime.jsx(TooltipContainer, { children: group.groupName === group.value.toString() ? group.value : [group.groupName, group.value].join(": ") }) }));
     }, []);
     const totalHeight = height + BAR_CHART_HEADER_HEIGHT + BAR_CHART_FOOTER_MARGIN;
-    return (jsxRuntime.jsx(ChartWrapper, { height: totalHeight, loading: loading, style: style, children: jsxRuntime.jsxs(BarChartWrapper, { height: totalHeight, children: [jsxRuntime.jsxs(BarChartFilterHeader, { height: BAR_CHART_HEADER_HEIGHT, children: [jsxRuntime.jsxs(BarChartFilterArrows, { children: [jsxRuntime.jsx(uilibGl.IconButton, { kind: "prev", disabled: prevDisabled, onClick: onPrev }), jsxRuntime.jsx(uilibGl.IconButton, { kind: "next", disabled: nextDisabled, onClick: onNext })] }), renderSelectedRange] }), jsxRuntime.jsx(BarChartContainer, { barHeight: barHeight, marginBottom: DEFAULT_BAR_CHART_MARGINS.bottom, children: jsxRuntime.jsx(BarChart, { data: data, margin: DEFAULT_BAR_CHART_MARGINS, height: height, barWidth: barWidth, barPadding: padding, xAxisPadding: 0, yAxisPadding: 0, selectable: !loading, dynamicTooltipEnable: true, isBarTooltip: true, renderTooltip: renderTooltip, ...rest }) })] }) }));
+    return (jsxRuntime.jsxs(ChartWrapper, { height: totalHeight, loading: loading, style: style, children: [jsxRuntime.jsx(ChartTooltipStyles, {}), jsxRuntime.jsxs(BarChartWrapper, { height: totalHeight, children: [jsxRuntime.jsxs(BarChartFilterHeader, { height: BAR_CHART_HEADER_HEIGHT, children: [jsxRuntime.jsxs(BarChartFilterArrows, { children: [jsxRuntime.jsx(uilibGl.IconButton, { kind: "prev", disabled: prevDisabled, onClick: onPrev }), jsxRuntime.jsx(uilibGl.IconButton, { kind: "next", disabled: nextDisabled, onClick: onNext })] }), renderSelectedRange] }), jsxRuntime.jsx(BarChartContainer, { barHeight: barHeight, marginBottom: DEFAULT_BAR_CHART_MARGINS.bottom, children: jsxRuntime.jsx(BarChart, { data: data, margin: DEFAULT_BAR_CHART_MARGINS, height: height, barWidth: barWidth, barPadding: padding, xAxisPadding: 0, yAxisPadding: 0, selectable: !loading, dynamicTooltipEnable: true, isBarTooltip: true, renderTooltip: renderTooltip, ...rest }) })] })] }));
 };
 
 const DEFAULT_FROM_DATA = { minFromData: null, maxFromData: null };
@@ -16145,6 +16181,7 @@ const RangeDateFilter = ({ type, filter }) => {
     const { currentPage } = useWidgetPage(type);
     const [value, setValue] = React.useState([undefined, undefined]);
     const isInit = React.useRef(false);
+    const isDefaultApplied = React.useRef(false);
     const updateDebounce = useDebouncedCallback(FILTER_UPDATE_DEBOUNCE);
     const { filters: configFilters } = currentPage;
     const { filterName, label, minValue, maxValue, withTime } = filter.options;
@@ -16157,28 +16194,42 @@ const RangeDateFilter = ({ type, filter }) => {
             maxFromData: !prev.maxFromData ? date : date > prev.maxFromData ? date : prev.maxFromData
         };
     }, DEFAULT_FROM_DATA) || DEFAULT_FROM_DATA, [configFilter?.attributeValue, dataSource?.features]);
-    const minDate = React.useMemo(() => minValue || minFromData.toISOString(), [minFromData, minValue]);
-    const maxDate = React.useMemo(() => maxValue || maxFromData.toISOString(), [maxFromData, maxValue]);
+    const minDate = React.useMemo(() => minValue || minFromData?.toISOString(), [minFromData, minValue]);
+    const maxDate = React.useMemo(() => maxValue || maxFromData?.toISOString(), [maxFromData, maxValue]);
+    // Диапазон по умолчанию: `defaultValue: [from, to]` из конфига фильтра — начальное значение
+    // и точка сброса. Границы календаря (min/max) при этом не меняются; незаданная граница
+    // дефолта падает на них же — как было до появления `defaultValue`.
+    const defaultRange = React.useMemo(() => {
+        const [from, to] = (Array.isArray(configFilter?.defaultValue) ? configFilter.defaultValue : []);
+        return [getDate(from)?.toISOString() ?? minDate, getDate(to)?.toISOString() ?? maxDate];
+    }, [configFilter?.defaultValue, maxDate, minDate]);
     const isEmpty = React.useMemo(() => lodash.isNil(value?.[0]) && lodash.isNil(value?.[1]), [value]);
-    const isDefault = React.useMemo(() => value?.[0] === minDate && value?.[1] === maxDate, [maxDate, minDate, value]);
+    const isDefault = React.useMemo(() => value?.[0] === defaultRange[0] && value?.[1] === defaultRange[1], [defaultRange, value]);
     const reset = React.useCallback(() => {
-        setValue([minDate, maxDate]);
+        const [from, to] = defaultRange;
+        setValue([from, to]);
         changeFilters({
             [filterName]: {
-                value: [minDate, maxDate],
-                min: minDate,
-                max: maxDate
+                value: [from, to],
+                min: from,
+                max: to
             }
         }, configFilter?.resetFilters);
-    }, [changeFilters, configFilter?.resetFilters, filterName, maxDate, minDate]);
+    }, [changeFilters, configFilter?.resetFilters, defaultRange, filterName]);
     const onChange = React.useCallback((newValue) => {
         setValue([newValue[0].toISOString(), newValue[1].toISOString()]);
     }, []);
+    // Дефолт применяем однократно — как только обе границы диапазона известны. С `defaultValue`
+    // это происходит сразу, без него — после подгрузки фич связанного источника данных.
     React.useEffect(() => {
-        if (!lodash.isNil(minDate) && !lodash.isNil(maxDate)) {
-            reset();
-        }
-    }, []); // eslint-disable-line
+        if (isDefaultApplied.current)
+            return;
+        const [from, to] = defaultRange;
+        if (lodash.isNil(from) || lodash.isNil(to))
+            return;
+        isDefaultApplied.current = true;
+        reset();
+    }, [defaultRange, reset]);
     React.useEffect(() => {
         if (!isInit.current) {
             isInit.current = true;
@@ -16196,7 +16247,7 @@ const RangeDateFilter = ({ type, filter }) => {
     }, [value]); // eslint-disable-line
     if (!configFilter)
         return null;
-    return (jsxRuntime.jsx(uilibGl.RangeNumberInput, { label: label || t("interval", { ns: "dashboard", defaultValue: "Интервал" }), selectedOption: { range: true }, minDate: getDate(minDate), maxDate: getDate(maxDate), value: [getDate(value[0]), getDate(value[1])], zIndex: 100, prefix: jsxRuntime.jsx(uilibGl.Icon, { kind: "date", disabled: true }), suffix: !isEmpty && !isDefault && jsxRuntime.jsx(StyledIconButton, { kind: "error", onClick: reset }), withTime: withTime, isDate: true, onChange: onChange }));
+    return (jsxRuntime.jsx(uilibGl.RangeNumberInput, { label: label || t("interval", { ns: "dashboard", defaultValue: "Интервал" }), selectedOption: { range: true }, minDate: getDate(minDate), maxDate: getDate(maxDate), value: [getDate(value[0]), getDate(value[1])], zIndex: DASHBOARD_OVERLAY_Z_INDEX, prefix: jsxRuntime.jsx(uilibGl.Icon, { kind: "date", disabled: true }), suffix: !isEmpty && !isDefault && jsxRuntime.jsx(StyledIconButton, { kind: "error", onClick: reset }), withTime: withTime, isDate: true, onChange: onChange }));
 };
 
 const getJustifyContent = (align) => {
@@ -16840,7 +16891,7 @@ const useTreeFilter = (type, filter) => {
 
 const TreeFilter = ({ type, filter }) => {
     const { width, placeholder, multiSelect, loading, data, setData, expanded, setExpanded, onLoadChildren, selectedIds, selectedCount, selectedLabel, searchValue, onSearchChange, onOpen, onClose, onToggleSelect, onReset, onSave, dirty, } = useTreeFilter(type, filter);
-    return (jsxRuntime.jsx(TreeFilterContainer, { children: jsxRuntime.jsx(uilibGl.TreeDropdown, { zIndex: 100, width: getFilterWidth(width), placeholder: placeholder, multiSelect: multiSelect, loading: loading, data: data, setData: setData, expanded: expanded, setExpanded: setExpanded, onLoadChildren: onLoadChildren, selectedIds: selectedIds, selectedCount: selectedCount, selectedLabel: selectedLabel, searchValue: searchValue, onSearchChange: onSearchChange, onOpen: onOpen, onClose: onClose, onToggleSelect: onToggleSelect, onReset: onReset, onSave: onSave, dirty: dirty }) }));
+    return (jsxRuntime.jsx(TreeFilterContainer, { children: jsxRuntime.jsx(uilibGl.TreeDropdown, { zIndex: DASHBOARD_OVERLAY_Z_INDEX, width: getFilterWidth(width), placeholder: placeholder, multiSelect: multiSelect, loading: loading, data: data, setData: setData, expanded: expanded, setExpanded: setExpanded, onLoadChildren: onLoadChildren, selectedIds: selectedIds, selectedCount: selectedCount, selectedLabel: selectedLabel, searchValue: searchValue, onSearchChange: onSearchChange, onOpen: onOpen, onClose: onClose, onToggleSelect: onToggleSelect, onReset: onReset, onSave: onSave, dirty: dirty }) }));
 };
 
 const getFilterComponent = (filterType) => {
@@ -17397,7 +17448,7 @@ const Chart = React.memo(({ config, element, elementConfig, type, renderElement
                         ?.map(item => ({
                         ...item,
                         color: formatFilterColor(item.name, item.color, defaultColor),
-                    })) || []), width: pieSide, height: pieSide, padAngle: angle, outerRadius: radius, cornerRadius: cornerRadius, renderTooltip: renderPieChartTooltip, withTooltip: true, onClick: filterName ? item => onFilter(item.name) : undefined, children: showTotal && (jsxRuntime.jsx(PieChartCenter, { children: totalWord || roundTotalSum(+totalSum) })) }) }));
+                    })) || []), width: pieSide, height: pieSide, padAngle: angle, outerRadius: radius, cornerRadius: cornerRadius, renderTooltip: renderPieChartTooltip, tooltipStyle: PIE_CHART_TOOLTIP_STYLE, withTooltip: true, onClick: filterName ? item => onFilter(item.name) : undefined, children: showTotal && (jsxRuntime.jsx(PieChartCenter, { children: totalWord || roundTotalSum(+totalSum) })) }) }));
         }
         const barChartData = getDataFromFilterItems(data[0]?.items);
         // Тот же случай, что у stack: обёртка выше тела на подписи оси X (margin.bottom). В fill
@@ -17457,7 +17508,7 @@ const Chart = React.memo(({ config, element, elementConfig, type, renderElement
     ]);
     if (!isVisibleContainer(id, expandable, expanded, expandedContainers))
         return null;
-    const chartBody = (jsxRuntime.jsx(ChartWrapper, { width: isPieChart && fill ? pieSide : width, height: isStackBar ? "auto" : isPieChart ? (fill ? pieSide : width) : chartHeight, column: column, loading: loading, children: renderChart }));
+    const chartBody = (jsxRuntime.jsxs(ChartWrapper, { width: isPieChart && fill ? pieSide : width, height: isStackBar ? "auto" : isPieChart ? (fill ? pieSide : width) : chartHeight, column: column, loading: loading, children: [jsxRuntime.jsx(ChartTooltipStyles, {}), renderChart] }));
     if (!fill)
         return chartBody;
     // fill: тело центрируется в измеряемой обёртке, ref которой питает ResizeObserver обеими осями.
@@ -18155,6 +18206,7 @@ exports.ContainerLoading = ContainerLoading;
 exports.ContainerRoot = ContainerRoot;
 exports.ContainerWrapper = ContainerWrapper;
 exports.ContainersGroupContainer = ContainersGroupContainer;
+exports.DASHBOARD_OVERLAY_Z_INDEX = DASHBOARD_OVERLAY_Z_INDEX;
 exports.DEFAULT_ATTRIBUTE_NAME = DEFAULT_ATTRIBUTE_NAME;
 exports.DEFAULT_BARCHART_RADIUS = DEFAULT_BARCHART_RADIUS;
 exports.DEFAULT_BASE_MAP = DEFAULT_BASE_MAP;
@@ -18317,6 +18369,7 @@ exports.NoLiveSnapshotContainer = NoLiveSnapshotContainer;
 exports.OBJECT_FITS = OBJECT_FITS;
 exports.OVERFLOWS = OVERFLOWS;
 exports.OneColumnContainer = OneColumnContainer;
+exports.PIE_CHART_TOOLTIP_STYLE = PIE_CHART_TOOLTIP_STYLE;
 exports.POLL_SUBTASK_INTERVAL_MS = POLL_SUBTASK_INTERVAL_MS;
 exports.POLL_SUBTASK_TIMEOUT_MS = POLL_SUBTASK_TIMEOUT_MS;
 exports.PROVIDER_PREFIX = PROVIDER_PREFIX;