@evergis/react 4.0.72 → 4.0.74

package/dist/components/Dashboard/headers/FeatureCardDefaultHeader/styled.d.ts

@@ -8,9 +8,11 @@ export declare const FeatureTitleContainer: import('styled-components').StyledCo
 export declare const Header: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps & {
     $overlay?: string;
     $isRow?: boolean;
+    $noFeature?: boolean;
 }, never>;
 export declare const DefaultHeaderWrapper: import('styled-components').StyledComponent<"div", any, {
     withPadding?: boolean;
     height?: number;
     fontColor?: string;
+    $noFeature?: boolean;
 }, never>;

package/dist/components/Dashboard/headers/components/HeaderLayerIcon.d.ts

@@ -1,2 +1,4 @@
 import { FC } from 'react';
-export declare const HeaderLayerIcon: FC;
+export declare const HeaderLayerIcon: FC<{
+    noFeature?: boolean;
+}>;

package/dist/components/Dashboard/headers/components/styled.d.ts

@@ -1 +1,2 @@
 export declare const LayerIconClickable: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const NoFeatureIcon: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/index.js

@@ -8966,6 +8966,11 @@ const OverlayHeaderMixin = (overlay) => styled.css `
     }
   }
 `;
+const NoFeatureHeaderMixin = styled.css `
+  &&& {
+    min-height: 5.5rem;
+  }
+`;
 const Header = styled(uilibGl.Flex) `
   z-index: 1;
   position: relative;
@@ -8978,6 +8983,8 @@ const Header = styled(uilibGl.Flex) `
   ${({ $isRow }) => $isRow && RowHeaderMixin};
 
   ${({ $overlay }) => $overlay && OverlayHeaderMixin($overlay)};
+
+  ${({ $noFeature }) => $noFeature && NoFeatureHeaderMixin};
 `;
 const DefaultHeaderWrapper = styled.div `
   width: ${({ withPadding }) => (withPadding ? "100%" : "calc(100% + 1rem)")};
@@ -8986,6 +8993,12 @@ const DefaultHeaderWrapper = styled.div `
   background: url(${img$4}) 50% -2rem no-repeat;
   border-radius: ${({ theme: { borderRadius } }) => borderRadius.medium};
 
+  ${({ $noFeature }) => $noFeature &&
+    styled.css `
+      background-position: center;
+      background-size: cover;
+    `};
+
   ${({ fontColor }) => !!fontColor && HeaderFontColorMixin};
 `;
 
@@ -8994,7 +9007,9 @@ const HeaderTitle = ({ noFeature }) => {
     const { attributes, layerInfo, feature } = useWidgetContext(exports.WidgetType.FeatureCard);
     const zoomToFeatures = useZoomToFeatures();
     const { configuration } = layerInfo || {};
-    const resultDescription = configuration?.alias || configuration?.name || "";
+    const resultDescription = noFeature
+        ? t("allLayers", { ns: "dashboard", defaultValue: "Все слои" })
+        : configuration?.alias || configuration?.name || "";
     const resultTitle = React.useMemo(() => {
         const layerDefinitionAttribute = configuration && attributes?.length
             ? attributes.find(item => item.attributeName === configuration?.attributesConfiguration?.titleAttribute)
@@ -9075,14 +9090,32 @@ const LayerIconClickable = styled.div `
   align-items: center;
   cursor: pointer;
 `;
+const NoFeatureIcon = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  margin-top: 0.25rem;
+  margin-right: 1rem;
+  margin-left: 0.25rem;
+
+  ${uilibGl.Icon}::after {
+    font-size: 1.5rem;
+    color: ${({ theme: { palette } }) => palette.iconDisabled};
+  }
+`;
 
-const HeaderLayerIcon = () => {
+const HeaderLayerIcon = ({ noFeature }) => {
     const { t } = useGlobalContext();
     const { layerInfo, feature } = useWidgetContext(exports.WidgetType.FeatureCard);
     const zoomToFeatures = useZoomToFeatures();
     const getMaxZoomTo = useMaxZoomTo();
     const [optionsMaxZoomTo, layerMaxZoomTo] = React.useMemo(() => getMaxZoomTo(layerInfo?.name), [layerInfo?.name, getMaxZoomTo]);
     const handleIconClick = React.useCallback(() => zoomToFeatures([feature], { maxZoom: layerMaxZoomTo ?? optionsMaxZoomTo }), [zoomToFeatures, feature, layerMaxZoomTo, optionsMaxZoomTo]);
+    if (noFeature) {
+        return (jsxRuntime.jsx(NoFeatureIcon, { children: jsxRuntime.jsx(uilibGl.Icon, { kind: "no_geom" }) }));
+    }
     return (jsxRuntime.jsx(LayerIconClickable, { onClick: handleIconClick, children: jsxRuntime.jsx(uilibGl.Tooltip, { arrow: true, placement: "top", content: t("zoomToFeature", { ns: "dashboard", defaultValue: "Приблизить к объекту" }), delay: [600, 0], children: ref => (jsxRuntime.jsx(LayerIcon, { innerRef: ref, layerInfo: layerInfo })) }) }));
 };
 
@@ -9091,7 +9124,7 @@ const FeatureCardDefaultHeader = ({ noFeature }) => {
     const { header } = config || {};
     const { options } = header || {};
     const { themeName, withPadding, column, height, overlay } = options || {};
-    return (jsxRuntime.jsx(DefaultHeaderWrapper, { withPadding: withPadding, height: height, children: jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: getThemeByName(themeName), children: jsxRuntime.jsx(Header, { "$overlay": overlay, "$isRow": !column, children: jsxRuntime.jsxs(HeaderFrontView, { isDefault: !column, children: [jsxRuntime.jsxs(HeaderContainer, { children: [jsxRuntime.jsx(HeaderLayerIcon, {}), jsxRuntime.jsx(HeaderTitle, { noFeature: noFeature })] }), jsxRuntime.jsx(FeatureCardButtons, {})] }) }) }) }));
+    return (jsxRuntime.jsx(DefaultHeaderWrapper, { withPadding: withPadding, height: height, "$noFeature": noFeature, children: jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: getThemeByName(themeName), children: jsxRuntime.jsx(Header, { "$overlay": overlay, "$isRow": !column, "$noFeature": noFeature, children: jsxRuntime.jsxs(HeaderFrontView, { isDefault: !column, children: [jsxRuntime.jsxs(HeaderContainer, { children: [jsxRuntime.jsx(HeaderLayerIcon, { noFeature: noFeature }), jsxRuntime.jsx(HeaderTitle, { noFeature: noFeature })] }), jsxRuntime.jsx(FeatureCardButtons, {})] }) }) }) }));
 };
 
 const ImageContainerButton = styled(uilibGl.FlatButton) `
@@ -12185,12 +12218,16 @@ const useChartData = ({ element, type }) => {
         layerInfos,
         dataSources,
     ]);
+    const isResolved = React.useMemo(() => !relatedAttributes?.length ||
+        relatedAttributes
+            .filter(({ chartAxis }) => chartAxis === "y")
+            .every(({ dataSourceName }) => Array.isArray(getDataSource(dataSourceName, dataSources)?.features)), [relatedAttributes, dataSources]);
     const [data, setData] = React.useState(fetchedData);
     React.useEffect(() => {
-        if (!loading) {
+        if (!loading && (fetchedData?.length || isResolved)) {
             setData(fetchedData);
         }
-    }, [loading, fetchedData]);
+    }, [loading, fetchedData, isResolved]);
     return { data, loading };
 };