@evergis/react 3.1.80 → 3.1.82

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

@@ -1,7 +1,6 @@
 import { FC } from 'react';
-import { ConfigContainer, WidgetType } from '../../types';
+import { WidgetType } from '../../types';
 export declare const Dashboard: FC<{
     type?: WidgetType;
-    config?: ConfigContainer;
     noBorders?: boolean;
 }>;

package/dist/components/Dashboard/containers/EditContainer/index.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { ContainerProps } from '../../types';
+export declare const EditContainer: FC<ContainerProps>;

package/dist/components/Dashboard/containers/registry.d.ts

@@ -29,5 +29,6 @@ export declare const containerComponents: {
     readonly ExportPdf: import('react').FC<import('../types').ContainerProps>;
     readonly Upload: import('react').FC<import('../types').ContainerProps>;
     readonly Task: import('react').FC<import('../types').ContainerProps>;
+    readonly Edit: import('react').FC<import('../types').ContainerProps>;
     readonly default: import('react').FC<import('../types').ContainerProps>;
 };

package/dist/components/Dashboard/elements/ElementControl/index.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { ContainerProps } from '../../types';
+export declare const ElementControl: FC<ContainerProps>;

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

@@ -3,6 +3,7 @@ export * from './ElementCamera';
 export * from './ElementCamera/styled';
 export * from './ElementChart';
 export * from './ElementChips';
+export * from './ElementControl';
 export * from './ElementIcon';
 export * from './ElementImage';
 export * from './ElementLegend';

package/dist/components/Dashboard/elements/registry.d.ts

@@ -1,4 +1,5 @@
 export declare const elementComponents: {
+    readonly control: import('react').FC<import('..').ContainerProps>;
     readonly image: import('react').FC<import('..').ContainerProps>;
     readonly slideshow: import('react').FC<import('./ElementSlideshow/types').DashboardSlideshowProps>;
     readonly svg: import('react').FC<import('..').ContainerProps>;

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

@@ -20,6 +20,7 @@ export declare const useWidgetContext: (type?: WidgetType) => {
         ProjectPagesMenu?: import('react').FC;
     };
     config: import('../types').ConfigContainer;
+    isEditing: boolean;
     isLoading: boolean;
     pageIndex: number;
     filters: import('../types').SelectedFilters;

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

@@ -48,6 +48,7 @@ export interface ConfigOptions {
     relatedResources?: ConfigRelatedResource[];
     statusColors?: Record<RemoteTaskStatus, string>;
     chartType?: "bar" | "line" | "pie" | "stack";
+    controlType?: "dropdown" | "checkbox";
     layerNames?: string[];
     layerName?: string;
     geometryType?: GeometryType | EditGeometryType;
@@ -268,6 +269,7 @@ export declare enum ContainerTemplate {
     ExportPdf = "ExportPdf",
     Upload = "Upload",
     Task = "Task",
+    Edit = "Edit",
     Divider = "Divider"
 }
 export declare enum HeaderTemplate {

package/dist/contexts/DashboardContext/types.d.ts

@@ -12,6 +12,7 @@ export type DashboardContextProps = PropsWithChildren<{
     dataSources?: WidgetDataSource[];
     geometryFilter?: boolean;
     loading?: boolean;
+    editMode?: boolean;
     filters?: SelectedFilters;
     dashboardLayers?: DashboardState["layers"];
     setDashboardLayer?: (props: DashboardLayerPayload) => void;

package/dist/contexts/FeatureCardContext/types.d.ts

@@ -10,7 +10,7 @@ export type FeatureCardContextSettings = PropsWithChildren<{
     pageIndex?: number;
     handBookReference?: LayerReferenceConfigurationDc;
     isRaster?: boolean;
-    isEditing?: boolean;
+    editMode?: boolean;
     isFeatureEditable?: boolean;
     hasCopyRights?: boolean;
     editOnly?: boolean;

package/dist/index.js

@@ -3387,6 +3387,7 @@ exports.ContainerTemplate = void 0;
     ContainerTemplate["ExportPdf"] = "ExportPdf";
     ContainerTemplate["Upload"] = "Upload";
     ContainerTemplate["Task"] = "Task";
+    ContainerTemplate["Edit"] = "Edit";
     ContainerTemplate["Divider"] = "Divider";
 })(exports.ContainerTemplate || (exports.ContainerTemplate = {}));
 exports.HeaderTemplate = void 0;
@@ -4002,8 +4003,8 @@ const ServerNotificationsProvider = ({ url, initialized, children }) => {
 };
 
 const useWidgetContext = (type = exports.WidgetType.Dashboard) => {
-    const { projectInfo, updateProject, layerInfos, geometryFilter, dashboardLayers, setDashboardLayer, components: dashboardComponents, config: dashboardConfig, containerIds, pageIndex: projectPageIndex, selectedTabId: projectSelectedTabId, setSelectedTabId: setProjectSelectedTabId, dataSources: projectDataSources, loading: projectLoading, filters: projectFilters, changeFilters: projectChangeFilters, expandContainer: projectExpandContainer, expandedContainers: projectExpandedContainers, nextPage: projectNextPage, prevPage: projectPrevPage, changePage: projectChangePage, } = React.useContext(DashboardContext) || {};
-    const { layerInfo, attributes, feature, closeFeatureCard, config: featureConfig, pageIndex: featurePageIndex, selectedTabId: featureSelectedTabId, setSelectedTabId: setFeatureSelectedTabId, dataSources: featureDataSources, loading: featureLoading, filters: featureFilters, changeFilters: featureChangeFilters, expandContainer: featureExpandContainer, expandedContainers: featureExpandedContainers, nextPage: featureNextPage, prevPage: featurePrevPage, changePage: featureChangePage, } = React.useContext(FeatureCardContext) || {};
+    const { projectInfo, updateProject, layerInfos, geometryFilter, dashboardLayers, setDashboardLayer, components: dashboardComponents, config: dashboardConfig, containerIds, pageIndex: projectPageIndex, selectedTabId: projectSelectedTabId, setSelectedTabId: setProjectSelectedTabId, dataSources: projectDataSources, loading: projectLoading, editMode: projectEditMode, filters: projectFilters, changeFilters: projectChangeFilters, expandContainer: projectExpandContainer, expandedContainers: projectExpandedContainers, nextPage: projectNextPage, prevPage: projectPrevPage, changePage: projectChangePage, } = React.useContext(DashboardContext) || {};
+    const { layerInfo, attributes, feature, closeFeatureCard, config: featureConfig, pageIndex: featurePageIndex, selectedTabId: featureSelectedTabId, setSelectedTabId: setFeatureSelectedTabId, dataSources: featureDataSources, loading: featureLoading, editMode: featureEditMode, filters: featureFilters, changeFilters: featureChangeFilters, expandContainer: featureExpandContainer, expandedContainers: featureExpandedContainers, nextPage: featureNextPage, prevPage: featurePrevPage, changePage: featureChangePage, } = React.useContext(FeatureCardContext) || {};
     return {
         projectInfo,
         layerInfos,
@@ -4018,6 +4019,7 @@ const useWidgetContext = (type = exports.WidgetType.Dashboard) => {
         containerIds,
         components: dashboardComponents,
         config: type === exports.WidgetType.Dashboard ? dashboardConfig : featureConfig,
+        isEditing: type === exports.WidgetType.Dashboard ? projectEditMode : featureEditMode,
         isLoading: type === exports.WidgetType.Dashboard ? projectLoading : featureLoading,
         pageIndex: type === exports.WidgetType.Dashboard ? projectPageIndex || 1 : featurePageIndex || 1,
         filters: type === exports.WidgetType.Dashboard ? projectFilters : featureFilters,
@@ -5163,14 +5165,16 @@ const Container = styled(uilibGl.Flex) `
   
   ${({ isColumn }) => isColumn
     ? styled.css `
-        &&& > * {
-          justify-content: flex-start;
-          width: 100%;
+      &&& > * {
+        justify-content: flex-start;
+      }
+      > * {
+        width: 100%;
 
-          :not(:last-child) {
-            margin-bottom: 1.5rem;
-          }
+        :not(:last-child) {
+          margin-bottom: 1.5rem;
         }
+      }
       `
     : styled.css `
         flex-direction: row;
@@ -6501,16 +6505,6 @@ const TitleContainer = React.memo(({ containerId, templateName, layerNames, font
     return (jsxRuntime.jsx(Container, { id: id, style: style, isTitle: isVisible, children: jsxRuntime.jsxs(ContainerTitle, { simple: simple, children: [jsxRuntime.jsxs(ContainerIconTitle, { fontColor: fontColor, children: [renderElement({ id: "titleIcon", wrap: false }), renderElement({ id: "title" }), !!downloadById && (jsxRuntime.jsx(uilibGl.IconButton, { kind: "download", onClick: onExport })), isLayers && renderToggler] }), !isLayers && renderToggler, renderVisibility] }) }));
 });
 
-const ContainerDivider = styled(uilibGl.Divider) `
-  width: 100%;
-  border-color: ${({ theme: { palette }, $bgColor }) => $bgColor || palette.elementDeep};
-`;
-
-const DividerContainer = React.memo(({ elementConfig, config }) => {
-    const { id, style } = elementConfig || {};
-    return (jsxRuntime.jsx(Container, { id: id, style: style, children: jsxRuntime.jsx(ContainerDivider, { "$bgColor": config?.options?.bgColor }) }));
-});
-
 const SlideshowContainer = React.memo(({ config, elementConfig, type }) => {
     const { pageIndex, expandedContainers, selectedTabId, setSelectedTabId, dataSources } = useWidgetContext(type);
     const { attributes, layerInfo } = useRelatedDataSourceAttributes({
@@ -6963,6 +6957,21 @@ const TaskContainer = React.memo(({ type, elementConfig, renderElement }) => {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), jsxRuntime.jsxs(uilibGl.Flex, { justifyContent: center ? "center" : "flex-start", children: [jsxRuntime.jsx(StatusWaitingButton, { title: title || t("run", { ns: "dashboard", defaultValue: "Запуск" }), icon: icon, status: status, statusColors: statusColors, isWaiting: loading || !!taskId, isDisabled: !relatedResources?.length, onClick: onClick }), !!(log || taskId) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(uilibGl.IconButton, { kind: "info", onClick: openLog }), jsxRuntime.jsx(LogDialog, { logs: log, status: status, statusColors: statusColors, isOpen: isLogDialogOpen, onClose: closeLog })] }))] })] }));
 });
 
+const EditContainer = ({ type, elementConfig, renderElement }) => {
+    const { id, style } = elementConfig || {};
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: style, children: [jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { children: renderElement({ id: "value" }) })] })] }));
+};
+
+const ContainerDivider = styled(uilibGl.Divider) `
+  width: 100%;
+  border-color: ${({ theme: { palette }, $bgColor }) => $bgColor || palette.elementDeep};
+`;
+
+const DividerContainer = React.memo(({ elementConfig, config }) => {
+    const { id, style } = elementConfig || {};
+    return (jsxRuntime.jsx(Container, { id: id, style: style, children: jsxRuntime.jsx(ContainerDivider, { "$bgColor": config?.options?.bgColor }) }));
+});
+
 const containerComponents = {
     [exports.ContainerTemplate.DefaultAttributes]: DefaultAttributesContainer,
     [exports.ContainerTemplate.Pages]: PagesContainer,
@@ -6986,6 +6995,7 @@ const containerComponents = {
     [exports.ContainerTemplate.ExportPdf]: ExportPdfContainer,
     [exports.ContainerTemplate.Upload]: UploadContainer,
     [exports.ContainerTemplate.Task]: TaskContainer,
+    [exports.ContainerTemplate.Edit]: EditContainer,
     default: ContainersGroupContainer,
 };
 
@@ -7759,6 +7769,35 @@ const ElementChips = React.memo(({ type, elementConfig }) => {
     return (jsxRuntime.jsx(DashboardChipsContainer, { style: style, children: tags?.map(tag => (jsxRuntime.jsx(DashboardChip$1, { text: tag, "$bgColor": colorAttr?.value || bgColor, "$fontColor": fontColor, "$fontSize": fontSize, "$isDefault": !colorAttr?.value }, tag))) }));
 });
 
+const ElementControl = ({ elementConfig }) => {
+    const { t } = useGlobalContext();
+    const { dataSources, filters, changeFilters } = useWidgetContext(exports.WidgetType.FeatureCard);
+    const [value, setValue] = React.useState();
+    const { options, attributeName } = elementConfig || {};
+    const { filterName, relatedDataSource, label, placeholder = t("selectValue", { ns: "dashboard", defaultValue: "Выберите значение" }) } = options || {};
+    const dataSource = React.useMemo(() => getDataSource(relatedDataSource, dataSources), [relatedDataSource, dataSources]);
+    const items = React.useMemo(() => {
+        if (!dataSource?.features?.length || !attributeName) {
+            return [];
+        }
+        return dataSource.features.map(({ attributes }) => ({
+            value: attributes?.[attributeName] || "",
+            text: attributes?.[attributeName] || "",
+        }));
+    }, [dataSource?.features, attributeName]);
+    const handleChange = React.useCallback(([option]) => {
+        setValue(option?.value);
+        if (filterName) {
+            changeFilters?.({
+                [filterName]: {
+                    value: option?.value,
+                },
+            });
+        }
+    }, [changeFilters, filterName]);
+    return (jsxRuntime.jsx(uilibGl.Dropdown, { zIndex: 1000, width: "100%", label: label, options: items, value: filters?.[filterName]?.value ?? value, placeholder: placeholder, onChange: handleChange }));
+};
+
 const StyledIconFontSizeMixin = styled.css `
   height: ${({ fontSize }) => `${fontSize}px`};
 
@@ -8398,6 +8437,7 @@ const ElementUploader = React.memo(({ elementConfig, type }) => {
 });
 
 const elementComponents = {
+    control: ElementControl,
     image: ElementImage,
     slideshow: ElementSlideshow,
     svg: ElementSvg,
@@ -9578,11 +9618,16 @@ const tooltipValueFromRelatedFeatures = (t, value, relatedAttributes, layerInfo)
 };
 
 const useWidgetConfig = (type = exports.WidgetType.Dashboard) => {
-    const { config: configProp, containerIds, projectInfo, layerInfo } = useWidgetContext(type);
+    const { config: configProp, containerIds, projectInfo, layerInfo, isEditing } = useWidgetContext(type);
     const config = React.useMemo(() => {
         if (configProp) {
             return configProp;
         }
+        if (isEditing) {
+            return type === exports.WidgetType.Dashboard
+                ? (projectInfo?.content?.editConfiguration || {})
+                : (layerInfo?.configuration?.editConfiguration || {});
+        }
         const currentConfig = type === exports.WidgetType.Dashboard
             ? (projectInfo?.content?.dashboardConfiguration || {})
             : (layerInfo?.configuration?.cardConfiguration || {});
@@ -9598,7 +9643,7 @@ const useWidgetConfig = (type = exports.WidgetType.Dashboard) => {
             return newConfig;
         }
         return currentConfig;
-    }, [configProp, containerIds, layerInfo?.configuration?.cardConfiguration, projectInfo?.content?.dashboardConfiguration, type]);
+    }, [configProp, containerIds, layerInfo?.configuration?.cardConfiguration, projectInfo?.content?.dashboardConfiguration, type, isEditing]);
     const pages = React.useMemo(() => (getPagesFromConfig(config) || []), [config]);
     return {
         config,
@@ -10338,20 +10383,17 @@ const Chart = React.memo(({ config, element, elementConfig, type, renderElement
         return (jsxRuntime.jsxs(Tooltip, { children: [jsxRuntime.jsx(ChartTooltipLabel, { children: labels[indexX] }), items
                     .filter(({ value }) => !isEmptyValue(value))
                     ?.map(({ layerName, attributeName, attributeUnits, dataSourceName, value, stroke }, index) => {
-                    const layerInfo = !attributeUnits
-                        ? layerInfos?.find(({ name }) => name === layerName)
-                        : null;
-                    const attribute = !attributeUnits
-                        ? layerInfo?.layerDefinition.attributes[attributeName]
-                        : null;
-                    const dataSource = dataSourceName ? getDataSource(dataSourceName, dataSources) : null;
-                    const dataSourceUnits = !dataSource || !attributeUnits
-                        ? null
-                        : dataSource.features?.[0]?.attributes?.[attributeUnits];
-                    const legendValue = attribute
-                        ? formatAttributeValue({ t, type: attribute.type, value, stringFormat: attribute.stringFormat })
-                        : [value, dataSourceUnits].filter(Boolean).join(" ");
-                    return (jsxRuntime.jsxs(ChartTooltipRow, { children: [jsxRuntime.jsx(ChartLegendColor$1, { "$color": stroke }), jsxRuntime.jsx(ChartLegendValue, { children: legendValue })] }, index));
+                    const layerInfo = layerInfos?.find(({ name }) => name === layerName);
+                    const attribute = layerInfo?.layerDefinition.attributes[attributeName];
+                    const dataSource = getDataSource(dataSourceName, dataSources);
+                    const units = attributeUnits
+                        ? dataSource?.features?.[0]?.attributes?.[attributeUnits]
+                        : attribute?.stringFormat?.unitsLabel;
+                    const formatValue = attribute
+                        ? formatAttributeValue({ t, type: attribute.type, value, stringFormat: attribute.stringFormat, noUnits: true })
+                        : value;
+                    const resultValue = [formatValue, units].filter(Boolean).join(" ");
+                    return (jsxRuntime.jsxs(ChartTooltipRow, { children: [jsxRuntime.jsx(ChartLegendColor$1, { "$color": stroke }), jsxRuntime.jsx(ChartLegendValue, { children: resultValue })] }, index));
                 })] }));
     }, [labels, layerInfos, dataSources, dotSnapping]);
     const markers = React.useMemo(() => getChartMarkers(data[0]?.items, configMarkers, dataSources), [data, dataSources, configMarkers]);
@@ -10497,7 +10539,7 @@ const DashboardLoading = React.memo(() => {
     return (jsxRuntime.jsx(Container, { noBorders: true, children: jsxRuntime.jsx(ContainerWrapper, { "$noMargin": true, children: jsxRuntime.jsx(DashboardWrapper, { children: jsxRuntime.jsx(DashboardPlaceholderWrap, { children: jsxRuntime.jsxs(DashboardPlaceholder, { isLoading: true, children: [jsxRuntime.jsx(uilibGl.Icon, { kind: "dashboard_loading" }), jsxRuntime.jsx(uilibGl.Flex, { width: "8rem", children: jsxRuntime.jsx(uilibGl.LinearProgress, {}) })] }) }) }) }) }));
 });
 
-const Dashboard = React.memo(({ type = exports.WidgetType.Dashboard, config, noBorders }) => {
+const Dashboard = React.memo(({ type = exports.WidgetType.Dashboard, noBorders }) => {
     const { dataSources, isLoading } = useWidgetContext(type);
     const { currentPage } = useWidgetPage(type);
     const isDiffPage = useDiffPage(type);
@@ -10505,7 +10547,7 @@ const Dashboard = React.memo(({ type = exports.WidgetType.Dashboard, config, noB
     if (dataSourceLoading || isDiffPage) {
         return (jsxRuntime.jsx(DashboardLoading, {}));
     }
-    return (jsxRuntime.jsx(PagesContainer, { type: type, config: config, noBorders: noBorders }));
+    return (jsxRuntime.jsx(PagesContainer, { type: type, noBorders: noBorders }));
 });
 
 const CardCheckbox = styled(uilibGl.Checkbox) `
@@ -11153,6 +11195,7 @@ exports.ElementButton = ElementButton;
 exports.ElementCamera = ElementCamera;
 exports.ElementChart = ElementChart;
 exports.ElementChips = ElementChips;
+exports.ElementControl = ElementControl;
 exports.ElementIcon = ElementIcon;
 exports.ElementImage = ElementImage;
 exports.ElementLegend = ElementLegend;