@evergis/react 3.1.56 → 3.1.58

package/dist/components/Dashboard/components/ContainerChildren/types.d.ts

@@ -1,5 +1,6 @@
-import { ConfigContainerChild, ContainerProps } from '../../types';
+import { ConfigContainerChild, ContainerProps, WidgetType } from '../../types';
 export type ContainerChildrenProps = {
+    type: WidgetType;
     items: ConfigContainerChild[];
     elementConfig?: ConfigContainerChild;
     isColumn?: boolean;

package/dist/components/Dashboard/containers/LayersContainer/styled.d.ts

@@ -1,3 +1,8 @@
-export declare const LayersContainerWrapper: import('styled-components').StyledComponent<any, any, {
+export declare const LayersContainerWrapper: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps & {
+    isTitle?: boolean;
+    isColumn?: boolean;
+    isMain?: boolean;
+    noBorders?: boolean;
+} & {
     isPresentationMode?: boolean;
-}, string | number | symbol>;
+}, never>;

package/dist/components/Dashboard/containers/UploadContainer/styled.d.ts

@@ -1 +1,6 @@
-export declare const UploaderContainer: import('styled-components').StyledComponent<any, any, object, string | number | symbol>;
+export declare const UploaderContainer: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps & {
+    isTitle?: boolean;
+    isColumn?: boolean;
+    isMain?: boolean;
+    noBorders?: boolean;
+}, never>;

package/dist/components/Dashboard/hooks/index.d.ts

@@ -9,6 +9,7 @@ export * from './useWidgetFilters';
 export * from './useGetConfigLayer';
 export * from './useGlobalContext';
 export * from './useHeaderRender';
+export * from './useHideIfEmptyDataSource';
 export * from './useProjectDashboardInit';
 export * from './useRelatedDataSourceAttributes';
 export * from './useRenderElement';

package/dist/components/Dashboard/hooks/useHideIfEmptyDataSource.d.ts

@@ -0,0 +1,2 @@
+import { WidgetType } from '../types';
+export declare const useHideIfEmptyDataSource: (type?: WidgetType) => (dataSourceName: string) => boolean;

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

@@ -1,5 +1,17 @@
-export declare const Container: any;
-export declare const ContainerWrapper: any;
+import { CSSProperties } from 'react';
+export declare const ElementValueWrapper: import('styled-components').StyledComponent<"div", any, {
+    noMargin?: boolean;
+}, never>;
+export declare const Container: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps & {
+    isTitle?: boolean;
+    isColumn?: boolean;
+    isMain?: boolean;
+    noBorders?: boolean;
+}, never>;
+export declare const ContainerWrapper: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps & {
+    $zIndex?: CSSProperties["zIndex"];
+    $noMargin?: boolean;
+}, never>;
 export declare const DashboardChip: import('styled-components').StyledComponent<any, any, any, any>;
 export declare const DashboardPlaceholderWrap: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps, never>;
 export declare const DashboardPlaceholder: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps & {

package/dist/components/Dashboard/types.d.ts

@@ -118,6 +118,7 @@ export interface ConfigOptions {
     bigIcon?: boolean;
     onlyIcon?: boolean;
     hideEmpty?: boolean;
+    hideIfEmptyDataSource?: string;
     innerValue?: boolean;
     groupTooltip?: boolean;
     tabId?: string;

package/dist/index.js

@@ -4507,75 +4507,6 @@ const DashboardChip$1 = styled(uilibGl.Chip) `
   ${({ $fontColor, $isDefault }) => !!$fontColor && !$isDefault && CustomChipColorMixin}
 `;
 
-const getAttributeByName = (attributeName, attributes) => {
-    return Array.isArray(attributeName)
-        ? null
-        : attributeName
-            ? attributes?.find(({ name }) => name === attributeName)
-            : null;
-};
-
-const formatElementValue = ({ t, value, elementConfig, attributes, wrap, }) => {
-    const { id, type, defaultValue, options, style, attributeName, templateName } = elementConfig || {};
-    const attribute = attributeName ? getAttributeByName(attributeName, attributes) : null;
-    const { fontColor, fontSize, noUnits, tagView, bgColor, withDivider, radius } = options || {};
-    const valueOrDefault = value || defaultValue;
-    const resultValue = type === "attributeValue" && attribute?.type && attribute?.stringFormat
-        ? formatAttributeValue({
-            t,
-            type: attribute.type,
-            value: valueOrDefault,
-            stringFormat: attribute.stringFormat,
-            noUnits,
-        })
-        : valueOrDefault;
-    if (!wrap)
-        return resultValue;
-    return (jsxRuntime.jsxs(React.Fragment, { children: [tagView ? (jsxRuntime.jsx(DashboardChip$1, { text: resultValue, "$bgColor": bgColor, "$fontColor": fontColor, "$fontSize": fontSize, "$radius": radius, style: style })) : resultValue, withDivider && jsxRuntime.jsx(uilibGl.Divider, {})] }, id));
-};
-
-const getAttributeValue = (element, attributes) => {
-    const attribute = getAttributeByName(element?.attributeName, attributes);
-    const { maxLength, separator, expandable, lineBreak } = element.options || {};
-    let value = "";
-    if (attribute?.type === api.AttributeType.Boolean && typeof attribute.value === "boolean") {
-        return jsxRuntime.jsx(DashboardCheckbox, { title: attribute.alias || attribute.name, checked: attribute.value });
-    }
-    if (Array.isArray(element?.attributeName)) {
-        const concatAttributes = element.attributeName.map((attributeName) => attributes?.find(({ name }) => name === attributeName)?.value || "");
-        value = concatAttributes.join(separator || ", ");
-    }
-    else {
-        value = attribute?.value?.toString() || "";
-    }
-    return maxLength && maxLength < value.length ? (jsxRuntime.jsx(TextTrim, { maxLength: maxLength, expandable: expandable, lineBreak: lineBreak, children: value })) : (value);
-};
-
-const getChartAxes = (chartElement) => chartElement?.options?.relatedDataSources?.filter(({ chartAxis }) => chartAxis === "y");
-
-const getChartFilterName = (relatedDataSources) => {
-    const relatedAttributes = relatedDataSources || [];
-    const axes = relatedAttributes.filter(({ chartAxis }) => chartAxis === "y");
-    return axes?.[0]?.filterName;
-};
-
-function getValueIndex(items, attributes) {
-    return items?.findIndex(({ name }) => name.toString() === attributes.value?.toString());
-}
-const getChartMarkers = (items, markers, dataSources) => {
-    if (typeof markers === "string") {
-        const dataSource = getDataSource(markers, dataSources);
-        return dataSource?.features?.map(({ attributes }) => ({
-            ...attributes,
-            value: getValueIndex(items, attributes),
-        })) || [];
-    }
-    return (markers?.map(marker => ({
-        ...marker,
-        value: getValueIndex(items, marker),
-    })) || []);
-};
-
 const LayerGroupContainer = styled(uilibGl.Flex) `
   display: flex;
   justify-content: center;
@@ -5104,21 +5035,34 @@ const LayerListContainer = styled(uilibGl.Flex) `
   box-sizing: border-box;
 `;
 
+const ElementValueWrapper = styled.div `
+  transition: background-color ${uilibGl.transition.toggle};
+  
+  ${({ noMargin }) => styled.css `
+    &&&& {
+      margin-bottom: 0;
+    }
+  `};
+`;
 const Container = styled(uilibGl.Flex) `
   flex-direction: column;
   width: 100%;
-
+  
   ${({ isColumn }) => isColumn
     ? styled.css `
-          > * {
-            width: 100%;
+        > * {
+          width: 100%;
+
+          :not(:last-child) {
+            margin-bottom: 1.5rem;
           }
-        `
+        }
+      `
     : styled.css `
-          flex-direction: row;
-          justify-content: space-between;
-          align-items: center;
-        `}
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+      `}
 
   ${({ isTitle }) => isTitle &&
     styled.css `
@@ -5147,10 +5091,6 @@ const ContainerWrapper = styled(uilibGl.Flex) `
   color: ${({ theme: { palette } }) => palette.textPrimary};
   z-index: ${({ $zIndex }) => $zIndex ?? 1};
   transition: background-color ${uilibGl.transition.toggle};
-
-  ${Container} > :not(:last-child) {
-    margin-bottom: 1.5rem;
-  }
   
   ${({ $noMargin }) => $noMargin && styled.css `
     &&&& {
@@ -5192,6 +5132,7 @@ const DashboardPlaceholder = styled(uilibGl.Flex) `
     styled.css `
       width: 6.25rem;
     `}
+  
   &&& > * {
     margin-bottom: 0;
   }
@@ -5401,13 +5342,82 @@ const FeatureControls = styled(uilibGl.Flex) `
   }
 `;
 
+const getAttributeByName = (attributeName, attributes) => {
+    return Array.isArray(attributeName)
+        ? null
+        : attributeName
+            ? attributes?.find(({ name }) => name === attributeName)
+            : null;
+};
+
+const formatElementValue = ({ t, value, elementConfig, attributes, wrap, }) => {
+    const { id, type, defaultValue, options, style, attributeName, templateName } = elementConfig || {};
+    const attribute = attributeName ? getAttributeByName(attributeName, attributes) : null;
+    const { fontColor, fontSize, noUnits, tagView, bgColor, withDivider, radius, noMargin } = options || {};
+    const valueOrDefault = value || defaultValue;
+    const resultValue = type === "attributeValue" && attribute?.type && attribute?.stringFormat
+        ? formatAttributeValue({
+            t,
+            type: attribute.type,
+            value: valueOrDefault,
+            stringFormat: attribute.stringFormat,
+            noUnits,
+        })
+        : valueOrDefault;
+    if (!wrap)
+        return resultValue;
+    return (jsxRuntime.jsxs(React.Fragment, { children: [tagView ? (jsxRuntime.jsx(DashboardChip$1, { "data-id": id, "data-templatename": templateName, style: style, text: resultValue, "$bgColor": bgColor, "$fontColor": fontColor, "$fontSize": fontSize, "$radius": radius })) : (jsxRuntime.jsx(ElementValueWrapper, { "data-id": id, "data-templatename": templateName, style: style, noMargin: noMargin, children: resultValue })), withDivider && jsxRuntime.jsx(uilibGl.Divider, {})] }, id));
+};
+
+const getAttributeValue = (element, attributes) => {
+    const attribute = getAttributeByName(element?.attributeName, attributes);
+    const { maxLength, separator, expandable, lineBreak } = element.options || {};
+    let value = "";
+    if (attribute?.type === api.AttributeType.Boolean && typeof attribute.value === "boolean") {
+        return jsxRuntime.jsx(DashboardCheckbox, { title: attribute.alias || attribute.name, checked: attribute.value });
+    }
+    if (Array.isArray(element?.attributeName)) {
+        const concatAttributes = element.attributeName.map((attributeName) => attributes?.find(({ name }) => name === attributeName)?.value || "");
+        value = concatAttributes.join(separator || ", ");
+    }
+    else {
+        value = attribute?.value?.toString() || "";
+    }
+    return maxLength && maxLength < value.length ? (jsxRuntime.jsx(TextTrim, { maxLength: maxLength, expandable: expandable, lineBreak: lineBreak, children: value })) : (value);
+};
+
+const getChartAxes = (chartElement) => chartElement?.options?.relatedDataSources?.filter(({ chartAxis }) => chartAxis === "y");
+
+const getChartFilterName = (relatedDataSources) => {
+    const relatedAttributes = relatedDataSources || [];
+    const axes = relatedAttributes.filter(({ chartAxis }) => chartAxis === "y");
+    return axes?.[0]?.filterName;
+};
+
+function getValueIndex(items, attributes) {
+    return items?.findIndex(({ name }) => name.toString() === attributes.value?.toString());
+}
+const getChartMarkers = (items, markers, dataSources) => {
+    if (typeof markers === "string") {
+        const dataSource = getDataSource(markers, dataSources);
+        return dataSource?.features?.map(({ attributes }) => ({
+            ...attributes,
+            value: getValueIndex(items, attributes),
+        })) || [];
+    }
+    return (markers?.map(marker => ({
+        ...marker,
+        value: getValueIndex(items, marker),
+    })) || []);
+};
+
 const ContainersGroupContainer = React.memo(({ elementConfig, type, renderElement }) => {
     const { expandedContainers } = useWidgetContext(type);
-    const { id, children, options, style } = elementConfig || {};
+    const { id, children, options } = elementConfig || {};
     const { column, expandable, expanded } = options || {};
     const isColumn = column === undefined || column;
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(Container, { id: id, isColumn: isColumn, style: style, children: jsxRuntime.jsx(ContainerChildren, { items: children, elementConfig: elementConfig, isColumn: isColumn, isMain: id?.startsWith(CONFIG_PAGE_ID), renderElement: renderElement }) }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(Container, { id: id, isColumn: isColumn, children: jsxRuntime.jsx(ContainerChildren, { type: type, items: children, elementConfig: elementConfig, isColumn: isColumn, isMain: id?.startsWith(CONFIG_PAGE_ID), renderElement: renderElement }) }))] }));
 });
 
 const ChartLegendContainer = styled(uilibGl.Flex) `
@@ -6112,7 +6122,7 @@ const PagesContainer = React.memo(({ type = exports.WidgetType.Dashboard, noBord
         setSelectedTabId,
         type,
     ]);
-    return (jsxRuntime.jsx(Container, { id: getRootElementId(type), style: { width }, isMain: true, isColumn: isColumn, noBorders: noBorders, children: jsxRuntime.jsx(ContainerChildren, { items: filteredChildren, isMain: true, renderElement: renderElement }) }));
+    return (jsxRuntime.jsx(Container, { id: getRootElementId(type), style: { width }, isMain: true, isColumn: isColumn, noBorders: noBorders, children: jsxRuntime.jsx(ContainerChildren, { type: type, items: filteredChildren, isMain: true, renderElement: renderElement }) }));
 });
 
 const ImageContainerBg$1 = styled.div `
@@ -8247,7 +8257,7 @@ const getElementValue = ({ getDefaultContainer, ...props }) => {
         return attribute?.name ? layerInfo.layerDefinition.attributes[attribute.name]?.description || null : null;
     }
     const ElementComponent = type ? elementComponents[type] : null;
-    return ElementComponent ? jsxRuntime.jsx(ElementComponent, { ...props }) : getDefaultContainer();
+    return ElementComponent ? jsxRuntime.jsx(ElementComponent, { ...props }) : getDefaultContainer?.();
 };
 
 const getLayerAttributes = (layerDefinition) => {
@@ -9955,6 +9965,15 @@ const useGetConfigLayer = () => {
     return React.useCallback((layerName) => currentPage?.layers?.find(({ name }) => name === layerName), [currentPage?.layers]);
 };
 
+const useHideIfEmptyDataSource = (type = exports.WidgetType.Dashboard) => {
+    const { dataSources } = useWidgetContext(type);
+    return React.useCallback((dataSourceName) => {
+        if (!dataSourceName)
+            return false;
+        return !getDataSource(dataSourceName, dataSources)?.features?.length;
+    }, [dataSources]);
+};
+
 const useProjectDashboardInit = () => {
     const { projectInfo, updateProject } = useWidgetContext();
     return React.useCallback(() => {
@@ -10262,7 +10281,8 @@ const ChartLegend = ({ data, chartElement, fontSize, type, twoColumns, loading }
     return (jsxRuntime.jsxs(uilibGl.Flex, { flexDirection: "column", opacity: loading ? FILTERED_VALUE_OPACITY / 100 : 1, children: [jsxRuntime.jsx(ChartLegendContainer, { twoColumns: twoColumns, children: sliceItems(data)?.map(({ name, color }, index) => (jsxRuntime.jsxs(ChartLegendItem, { hasAnyFilter: hasAnyFilter, isFiltered: isFiltered(name), onClick: axes?.[0]?.filterName ? () => onFilter(name) : undefined, children: [jsxRuntime.jsx(ChartLegendColor, { color: color }), jsxRuntime.jsx(ChartLegendName, { "$fontSize": fontSize, "$fontColor": fontColor, children: name })] }, index))) }), showMoreBtn && (jsxRuntime.jsx(uilibGl.LegendToggler, { onClick: onShowMore, toggled: showMore, children: t("other", { ns: "dashboard", defaultValue: "Другое" }) }))] }));
 };
 
-const ContainerChildren = React.memo(({ items, isColumn, isMain, renderElement }) => {
+const ContainerChildren = React.memo(({ type, items, isColumn, isMain, renderElement }) => {
+    const checkIfEmptyDataSource = useHideIfEmptyDataSource(type);
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: items
             ?.filter(item => !["title", "icon", "titleIcon"].includes(item.id))
             ?.map((item, index) => {
@@ -10271,6 +10291,8 @@ const ContainerChildren = React.memo(({ items, isColumn, isMain, renderElement }
                 index,
                 wrap: isColumn || isMain,
             });
+            if (checkIfEmptyDataSource(item.options?.hideIfEmptyDataSource))
+                return null;
             return isMain ? (jsxRuntime.jsx(ContainerWrapper, { "data-id": item.id, "data-templatename": item.templateName, "$noMargin": item.options?.noMargin, children: jsxRuntime.jsx(DashboardWrapper, { children: render }) }, index)) : (jsxRuntime.jsx(React.Fragment, { children: render }, index));
         }) }));
 });
@@ -10827,6 +10849,7 @@ exports.ElementMarkdown = ElementMarkdown;
 exports.ElementSlideshow = ElementSlideshow;
 exports.ElementSvg = ElementSvg;
 exports.ElementTooltip = ElementTooltip;
+exports.ElementValueWrapper = ElementValueWrapper;
 exports.ExpandableTitle = ExpandableTitle;
 exports.FEATURE_CARD_DEFAULT_COLORS = FEATURE_CARD_DEFAULT_COLORS;
 exports.FEATURE_CARD_OTHER_COLOR = FEATURE_CARD_OTHER_COLOR;
@@ -11010,6 +11033,7 @@ exports.useExportPdf = useExportPdf;
 exports.useGetConfigLayer = useGetConfigLayer;
 exports.useGlobalContext = useGlobalContext;
 exports.useHeaderRender = useHeaderRender;
+exports.useHideIfEmptyDataSource = useHideIfEmptyDataSource;
 exports.useLayerParams = useLayerParams;
 exports.useMapContext = useMapContext;
 exports.useMapDraw = useMapDraw;