@evergis/react 3.1.18 → 3.1.20

package/dist/react.esm.js

@@ -3944,13 +3944,18 @@ const useWidgetContext = (type = WidgetType.Dashboard) => {
 
 const useGlobalContext = () => {
     const { t, language, themeName, api, ewktGeometry } = useContext(GlobalContext) || {};
+    const translate = useCallback((value, options) => {
+        if (t)
+            return t(value, options);
+        return options?.defaultValue ?? value;
+    }, [t]);
     return useMemo(() => ({
-        t,
+        t: translate,
         language,
         themeName,
         api,
         ewktGeometry,
-    }), [language, t, api, ewktGeometry, themeName]);
+    }), [language, translate, api, ewktGeometry, themeName]);
 };
 
 const HEIGHT_OFFSET = 20;
@@ -5668,7 +5673,7 @@ const DataSourceProgressContainer = memo(({ config, elementConfig, type, innerCo
         return jsx(DataSourceError, { name: elementConfig.templateName });
     }
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), !isVisible ? null : dataSource ? (jsxs(DataSourceProgressContainerWrapper, { children: [sliceItems(dataSource?.features)?.map((feature, index) => (jsx(DataSourceInnerContainer, { type: type, index: index, feature: feature, config: config, elementConfig: elementConfig, maxValue: currentMaxValue, innerComponent: innerComponent }, index))), checkIsSliced(dataSource?.features) && (jsx(ContainerToggler, { toggled: showMore, onClick: onShowMore, children: showMore ? t("hide", { ns: "dashboard" }) : t("showAll", { ns: "dashboard" }) })), showTotal && (jsxs(Fragment$1, { children: [jsx(Divider, {}), jsxs(ProgressTotal, { children: [jsx(ProgressTotalTitle, { children: t("total", { ns: "dashboard" }) }), jsxs(ProgressValue, { children: [totalValue, jsx(ProgressUnits, { children: totalUnits })] })] })] }))] })) : (jsx(ContainerLoading, {})), jsx(HiddenTitleItems, { elementConfig: elementConfig, config: config, type: type })] }));
+    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), !isVisible ? null : dataSource ? (jsxs(DataSourceProgressContainerWrapper, { children: [sliceItems(dataSource?.features)?.map((feature, index) => (jsx(DataSourceInnerContainer, { type: type, index: index, feature: feature, config: config, elementConfig: elementConfig, maxValue: currentMaxValue, innerComponent: innerComponent }, index))), checkIsSliced(dataSource?.features) && (jsx(ContainerToggler, { toggled: showMore, onClick: onShowMore, children: showMore ? t("hide", { ns: "dashboard", defaultValue: "Свернуть" }) : t("showAll", { ns: "dashboard", defaultValue: "Показать все" }) })), showTotal && (jsxs(Fragment$1, { children: [jsx(Divider, {}), jsxs(ProgressTotal, { children: [jsx(ProgressTotalTitle, { children: t("total", { ns: "dashboard", defaultValue: "Итого" }) }), jsxs(ProgressValue, { children: [totalValue, jsx(ProgressUnits, { children: totalUnits })] })] })] }))] })) : (jsx(ContainerLoading, {})), jsx(HiddenTitleItems, { elementConfig: elementConfig, config: config, type: type })] }));
 });
 
 const ProgressContainer = memo(({ type, elementConfig, feature, maxValue, index, renderElement }) => {
@@ -5703,7 +5708,7 @@ const ProgressContainer = memo(({ type, elementConfig, feature, maxValue, index,
         id: "icon",
         wrap: false
     }), [renderElement]);
-    const renderTooltip = useMemo(() => (jsxs(Fragment$1, { children: [jsx(ProgressTooltipAlias, { children: renderTooltipAlias }), jsxs(ProgressTooltipValueContainer, { children: [jsx(ProgressTooltipValue, { children: renderTooltipValue }), jsx(ProgressTooltipValueOf, { children: t("of", { ns: "dashboard" }) }), jsx("div", { children: formatAttributeValue({ t, type: valueType, value: currentMaxValue, stringFormat }) })] })] })), [currentMaxValue, renderTooltipAlias, renderTooltipValue, stringFormat, t, valueType]);
+    const renderTooltip = useMemo(() => (jsxs(Fragment$1, { children: [jsx(ProgressTooltipAlias, { children: renderTooltipAlias }), jsxs(ProgressTooltipValueContainer, { children: [jsx(ProgressTooltipValue, { children: renderTooltipValue }), jsx(ProgressTooltipValueOf, { children: t("of", { ns: "dashboard", defaultValue: "из" }) }), jsx("div", { children: formatAttributeValue({ t, type: valueType, value: currentMaxValue, stringFormat }) })] })] })), [currentMaxValue, renderTooltipAlias, renderTooltipValue, stringFormat, t, valueType]);
     const color = useMemo(() => colorAttribute
         ? attributes?.find(({ name }) => name === colorAttribute)?.value
         : colors?.[index] || bgColor, [attributes, bgColor, colorAttribute, colors, index]);
@@ -6460,16 +6465,22 @@ const RoundedBackgroundContainer = memo(({ type, elementConfig, feature, renderE
     });
     const { options, style, children } = elementConfig || {};
     const { maxLength, center, fontColor, innerTemplateStyle, inlineUnits, big, bigIcon, hideEmpty, colorAttribute } = options || {};
+    const iconElement = children?.find(({ id }) => id === "icon");
     const aliasElement = children?.find(({ id }) => id === "alias");
     const unitsElement = children?.find(({ id }) => id === "units");
     const valueElement = children?.find(({ id }) => id === "value");
     const value = renderElement({ id: "value" });
     const color = useMemo(() => attributes?.find(({ name }) => name === colorAttribute)?.value || fontColor, [attributes, colorAttribute, fontColor]);
+    const renderIcon = useMemo(() => {
+        if (!iconElement)
+            return null;
+        return (jsx(FlexSpan, { width: iconElement.options?.width || "1rem", alignItems: "center", mr: "0.5rem", children: renderElement({ id: "icon", wrap: false }) }));
+    }, [iconElement, renderElement]);
     const renderAlias = useMemo(() => (jsx(ContainerAlias, { style: aliasElement?.style, children: jsx(TextTrim, { maxLength: maxLength || ALIAS_DEFAULT_MAX_LENGTH, children: renderElement({ id: "alias", wrap: false }) }) })), [aliasElement?.style, maxLength, renderElement]);
     const renderValue = useMemo(() => (jsxs(ContainerValue, { style: valueElement?.style, big: true, children: [value, !!unitsElement && (jsx(ContainerUnits, { style: unitsElement?.style, children: renderElement({ id: "units" }) }))] })), [valueElement?.style, value, unitsElement, renderElement]);
     if (!value && hideEmpty)
         return null;
-    return (jsxs(RoundedBackgroundContainerWrapper, { style: innerTemplateStyle || style, "$center": center, "$color": color, "$inlineUnits": inlineUnits, "$big": big, "$bigIcon": bigIcon, children: [jsxs(ContainerIconValue, { children: [renderElement({ id: "icon", wrap: false }), big ? renderAlias : renderValue] }), big ? renderValue : renderAlias] }));
+    return (jsxs(RoundedBackgroundContainerWrapper, { style: innerTemplateStyle || style, "$center": center, "$color": color, "$inlineUnits": inlineUnits, "$big": big, "$bigIcon": bigIcon, children: [jsxs(ContainerIconValue, { children: [renderIcon, big ? renderAlias : renderValue] }), big ? renderValue : renderAlias] }));
 });
 
 const AddFeatureContainer = memo(({ elementConfig }) => {
@@ -6757,7 +6768,7 @@ const HeaderTitle = ({ noFeature }) => {
             })) ||
             feature?.id);
     }, [attributes, feature, layerDefinition]);
-    return (jsxs(HeaderTitleContainer, { children: [noFeature ? (jsx(FeatureTitleContainer, { children: t("noObjectFound", { ns: "dashboard" }) })) : (jsx(FeatureTitleContainer, { clickable: true, children: jsx(Tooltip$1, { arrow: true, placement: "top", content: t("zoomToFeature", { ns: "dashboard" }), delay: [600, 0], children: ref => (jsx(FlexSpan, { ref: ref, onClick: () => zoomToFeatures([feature]), children: resultTitle })) }) })), jsx(LayerDescription, { title: resultDescription, children: resultDescription })] }));
+    return (jsxs(HeaderTitleContainer, { children: [noFeature ? (jsx(FeatureTitleContainer, { children: t("noObjectFound", { ns: "dashboard", defaultValue: "Объектов не найдено" }) })) : (jsx(FeatureTitleContainer, { clickable: true, children: jsx(Tooltip$1, { arrow: true, placement: "top", content: t("zoomToFeature", { ns: "dashboard", defaultValue: "Приблизить к объекту" }), delay: [600, 0], children: ref => (jsx(FlexSpan, { ref: ref, onClick: () => zoomToFeatures([feature]), children: resultTitle })) }) })), jsx(LayerDescription, { title: resultDescription, children: resultDescription })] }));
 };
 
 const LayerIconContainer = styled.div `
@@ -7167,7 +7178,7 @@ const SmallPreview = ({ images, totalCount, currentIndex, isLoading, setCurrentI
             onNextPage();
         }
     }, [currentIndex, images, isNextDisabled, onNextPage, setCurrentIndex]);
-    return (jsxs(SmallPreviewContainer$1, { currentIndex: currentIndex + 1, prevIndex: prevIndex + 1, children: [isLoading && jsx(LinearProgress, {}), images.length > 1 && (jsxs(Fragment$1, { children: [jsx(SmallPreviewLeft, { "$isDisabled": isPrevDisabled, onClick: prev }), jsx(SmallPreviewRight, { "$isDisabled": isNextDisabled, onClick: next }), jsx(SmallPreviewCounter, { children: jsxs("div", { children: [currentIndex + 1, " ", t("of", { ns: "dashboard" }), " ", total] }) })] })), jsx(SmallPreviewImages, { onClick: onClick, children: images.map(image => (jsx("img", { src: image.src, alt: "" }, image.src))) })] }));
+    return (jsxs(SmallPreviewContainer$1, { currentIndex: currentIndex + 1, prevIndex: prevIndex + 1, children: [isLoading && jsx(LinearProgress, {}), images.length > 1 && (jsxs(Fragment$1, { children: [jsx(SmallPreviewLeft, { "$isDisabled": isPrevDisabled, onClick: prev }), jsx(SmallPreviewRight, { "$isDisabled": isNextDisabled, onClick: next }), jsx(SmallPreviewCounter, { children: jsxs("div", { children: [currentIndex + 1, " ", t("of", { ns: "dashboard", defaultValue: "из" }), " ", total] }) })] })), jsx(SmallPreviewImages, { onClick: onClick, children: images.map(image => (jsx("img", { src: image.src, alt: "" }, image.src))) })] }));
 };
 
 const DEFAULT_ARCHIVED_PERIOD = "#24h";
@@ -7436,7 +7447,7 @@ const LocalLink = memo(({ link }) => {
         navigator.clipboard.writeText(link);
         toggleOpen();
     }, [link, toggleOpen]);
-    return (jsx(Popover, { open: isOpen, zIndex: 10, onRequestClose: toggleOpen, anchorOrigin: "bottom-right", targetOrigin: "top-right", anchor: jsx(LocalLinkButton, { onClick: toggleOpen }), children: jsxs(LocalLinkBlank, { children: [jsx("a", { href: link, target: "_blank", rel: "noreferrer", children: link }), jsx(LocalLinkCopy, { children: jsx(IconButton, { kind: "copy", onClick: onCopy, children: t("copy", { ns: "dashboard" }) }) })] }) }));
+    return (jsx(Popover, { open: isOpen, zIndex: 10, onRequestClose: toggleOpen, anchorOrigin: "bottom-right", targetOrigin: "top-right", anchor: jsx(LocalLinkButton, { onClick: toggleOpen }), children: jsxs(LocalLinkBlank, { children: [jsx("a", { href: link, target: "_blank", rel: "noreferrer", children: link }), jsx(LocalLinkCopy, { children: jsx(IconButton, { kind: "copy", onClick: onCopy, children: t("copy", { ns: "dashboard", defaultValue: "Копировать" }) }) })] }) }));
 });
 
 const ElementLink = memo(({ type, elementConfig }) => {
@@ -7631,7 +7642,7 @@ const getDataFromAttributes = (t, config, attributes) => {
     return [
         ...data?.slice(0, config.options?.otherItems),
         {
-            name: t("other", { ns: "dashboard" }),
+            name: t("other", { ns: "dashboard", defaultValue: "Другое" }),
             color: FEATURE_CARD_OTHER_COLOR,
             value: Number(otherValue)
         }
@@ -7694,7 +7705,7 @@ const getDataFromRelatedFeatures = ({ t, config, filters, relatedConfig, dataSou
     }, []);
     if (isOtherSliced) {
         result.push({
-            name: t("other", { ns: "dashboard" }),
+            name: t("other", { ns: "dashboard", defaultValue: "Другое" }),
             color: FEATURE_CARD_OTHER_COLOR,
             value: Number(otherValue)
         });
@@ -7843,7 +7854,7 @@ const RangeNumberFilter = ({ type, filter }) => {
     const configFilter = getConfigFilter(filterName, configFilters);
     if (!configFilter)
         return null;
-    return (jsx(NumberRangeSlider, { value: value, min: minValue, max: maxValue, step: step || 1, sliderWidth: width ? `${width}px` : "17rem", label: label || t("interval", { ns: "dashboard" }), hasReset: true, onChange: setValue }));
+    return (jsx(NumberRangeSlider, { value: value, min: minValue, max: maxValue, step: step || 1, sliderWidth: width ? `${width}px` : "17rem", label: label || t("interval", { ns: "dashboard", defaultValue: "Интервал" }), hasReset: true, onChange: setValue }));
 };
 
 const TextFilter = ({ type, filter, config }) => {
@@ -8023,7 +8034,7 @@ const CheckboxFilter = ({ type, filter, elementConfig }) => {
                         });
                         changeFilters({ [filterName]: { value } });
                     } }, optionIndex));
-            }), showMoreBtn && (jsx(LegendToggler, { onClick: onShowMore, toggled: showMore, children: showMore ? t("hide", { ns: "dashboard" }) : t("showAll", { ns: "dashboard" }) }))] }));
+            }), showMoreBtn && (jsx(LegendToggler, { onClick: onShowMore, toggled: showMore, children: showMore ? t("hide", { ns: "dashboard", defaultValue: "Свернуть" }) : t("showAll", { ns: "dashboard", defaultValue: "Показать все" }) }))] }));
 };
 
 const ChartLoading = ({ column }) => (jsx(Flex, { position: "absolute", width: "100%", height: "inherit", children: jsx(Flex, { justifyContent: "center", alignContent: "center", alignItems: "center", width: "100%", height: "inherit", marginRight: column || column === undefined ? 0 : "-2rem", children: jsx(CircularProgress, { diameter: 1.5, mono: true }) }) }));
@@ -8315,7 +8326,7 @@ const RangeDateFilter = ({ type, filter }) => {
     }, [value]); // eslint-disable-line
     if (!configFilter)
         return null;
-    return (jsx(RangeNumberInput, { label: label || t("interval", { ns: "dashboard" }), selectedOption: { range: true }, minDate: getDate(minDate), maxDate: getDate(maxDate), value: [getDate(value[0]), getDate(value[1])], zIndex: 100, prefix: jsx(Icon, { kind: "date", disabled: true }), suffix: !isEmpty && !isDefault && jsx(StyledIconButton, { kind: "error", onClick: reset }), withTime: withTime, isDate: true, onChange: onChange }));
+    return (jsx(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: jsx(Icon, { kind: "date", disabled: true }), suffix: !isEmpty && !isDefault && jsx(StyledIconButton, { kind: "error", onClick: reset }), withTime: withTime, isDate: true, onChange: onChange }));
 };
 
 const getFilterComponent = (filterType) => {
@@ -8384,8 +8395,8 @@ const getFormattedAttributes = (t, data, attributes, config) => {
             ...attributes,
             {
                 ...otherAttribute,
-                name: t("other", { ns: "dashboard" }),
-                alias: t("other", { ns: "dashboard" })
+                name: t("other", { ns: "dashboard", defaultValue: "Другое" }),
+                alias: t("other", { ns: "dashboard", defaultValue: "Другое" })
             }
         ]
         : attributes;
@@ -8630,7 +8641,7 @@ const useWidgetPage = (type = WidgetType.Dashboard) => {
         const pages = getPagesFromProjectInfo(newProjectInfo);
         if (!pages)
             return;
-        pages.push(createConfigPage({ pages, defaultTitle: t("page", { ns: "dashboard" }) }));
+        pages.push(createConfigPage({ pages, defaultTitle: t("page", { ns: "dashboard", defaultValue: "Страница" }) }));
         updateProject(newProjectInfo);
         changePage(pages.length);
     }, [changePage, projectInfo, t, updateProject]);
@@ -9288,7 +9299,7 @@ const ChartLegend = ({ data, chartElement, type, twoColumns, loading }) => {
     const showMoreBtn = !!shownItems && data.length > shownItems;
     if (!loading && !data?.length && !!hideEmpty)
         return null;
-    return (jsxs(Flex, { flexDirection: "column", opacity: loading ? FILTERED_VALUE_OPACITY / 100 : 1, children: [jsx(ChartLegendContainer, { twoColumns: twoColumns, children: sliceItems(data)?.map(({ name, color }, index) => (jsxs(ChartLegendItem, { hasAnyFilter: hasAnyFilter, isFiltered: isFiltered(name), onClick: axes?.[0]?.filterName ? () => onFilter(name) : undefined, children: [jsx(ChartLegendColor, { color: color }), jsx(ChartLegendName, { "$fontColor": fontColor, children: name })] }, index))) }), showMoreBtn && (jsx(LegendToggler, { onClick: onShowMore, toggled: showMore, children: t("other", { ns: "dashboard" }) }))] }));
+    return (jsxs(Flex, { flexDirection: "column", opacity: loading ? FILTERED_VALUE_OPACITY / 100 : 1, children: [jsx(ChartLegendContainer, { twoColumns: twoColumns, children: sliceItems(data)?.map(({ name, color }, index) => (jsxs(ChartLegendItem, { hasAnyFilter: hasAnyFilter, isFiltered: isFiltered(name), onClick: axes?.[0]?.filterName ? () => onFilter(name) : undefined, children: [jsx(ChartLegendColor, { color: color }), jsx(ChartLegendName, { "$fontColor": fontColor, children: name })] }, index))) }), showMoreBtn && (jsx(LegendToggler, { onClick: onShowMore, toggled: showMore, children: t("other", { ns: "dashboard", defaultValue: "Другое" }) }))] }));
 };
 
 const ContainerChildren = memo(({ items, isColumn, isMain, renderElement }) => {
@@ -9337,7 +9348,7 @@ const DashboardHeader = memo(() => {
 
 const DataSourceError = ({ name }) => {
     const { t } = useGlobalContext();
-    return (jsxs(DataSourceErrorContainer, { children: [jsx(Icon, { kind: "alert" }), jsxs("div", { children: [t("block", { ns: "dashboard" }), " \"", name, "\" ", t("isNotLoaded", { ns: "dashboard" })] })] }));
+    return (jsxs(DataSourceErrorContainer, { children: [jsx(Icon, { kind: "alert" }), jsxs("div", { children: [t("block", { ns: "dashboard", defaultValue: "Блок" }), " \"", name, "\" ", t("isNotLoaded", { ns: "dashboard", defaultValue: "не загружен" })] })] }));
 };
 
 const ExpandableTitle = memo(({ elementConfig, type, renderElement }) => {
@@ -9392,7 +9403,7 @@ const FeatureCardTitle = ({ title, description }) => {
                 })) ||
             feature?.id);
     }, [attributes, feature?.id, layerDefinition, title, titleAttribute]);
-    return (jsxs(HeaderTitleContainer, { children: [jsx(FeatureTitleContainer, { clickable: true, children: jsx(Tooltip$1, { arrow: true, placement: "top", content: t("zoomToFeature", { ns: "dashboard" }), delay: [600, 0], children: ref => (jsx(FlexSpan, { ref: ref, onClick: () => zoomToFeatures([feature]), children: resultTitle })) }) }), jsx(LayerDescription, { title: resultDescription, children: resultDescription })] }));
+    return (jsxs(HeaderTitleContainer, { children: [jsx(FeatureTitleContainer, { clickable: true, children: jsx(Tooltip$1, { arrow: true, placement: "top", content: t("zoomToFeature", { ns: "dashboard", defaultValue: "Приблизить к объекту" }), delay: [600, 0], children: ref => (jsx(FlexSpan, { ref: ref, onClick: () => zoomToFeatures([feature]), children: resultTitle })) }) }), jsx(LayerDescription, { title: resultDescription, children: resultDescription })] }));
 };
 
 const HiddenFilters = styled(Flex) `
@@ -9522,7 +9533,8 @@ const StyledSvgColorMixin = css `
     }
   }
 `;
-const StyledSvg = styled.div `
+const StyledSvg = styled(Flex) `
+  align-items: center;
   ${({ $width }) => !!$width && StyledSvgWidthMixin};
   ${({ $height }) => !!$height && StyledSvgHeightMixin};
   ${({ $fontColor }) => !!$fontColor && StyledSvgColorMixin};
@@ -9546,8 +9558,6 @@ const SvgImage = memo(({ url, width, height, fontColor }) => {
     useEffect(() => () => {
         setSvg(null);
     }, []);
-    // Todo remove the test info
-    console.info("svg", svg);
     const regexp = /<\/svg>\s*$/im;
     if (!regexp.test(svg))
         return null;
@@ -9567,7 +9577,7 @@ const TextTrim = memo(({ maxLength, expandable, lineBreak, children }) => {
         return jsx(Fragment$1, { children: formatValue(text) });
     const substring = `${text.substring(0, maxLength)}...`;
     if (expandable) {
-        return (jsxs(Fragment$1, { children: [formatValue(expanded ? text : substring), jsx(LegendToggler, { toggled: expanded, onClick: toggleExpanded, children: expanded ? t("hide", { ns: "dashboard" }) : t("more", { ns: "dashboard" }) })] }));
+        return (jsxs(Fragment$1, { children: [formatValue(expanded ? text : substring), jsx(LegendToggler, { toggled: expanded, onClick: toggleExpanded, children: expanded ? t("hide", { ns: "dashboard", defaultValue: "Свернуть" }) : t("more", { ns: "dashboard", defaultValue: "Подробнее" }) })] }));
     }
     return (jsx(Tooltip$1, { placement: "top", arrow: true, content: text, children: ref => jsx("div", { ref: ref, children: formatValue(substring) }) }));
 });