@evergis/react 3.1.81 → 3.1.83

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/constants.d.ts

@@ -24,3 +24,5 @@ export declare const DEFAULT_ZOOM = 10;
 export declare const NUMERIC_ATTRIBUTE_TYPES: AttributeType[];
 export declare const GEOMETRY_ATTRIBUTE = "geometry";
 export declare const DEFAULT_ID_ATTRIBUTE_NAME = "gid";
+export declare const DEFAULT_DROPDOWN_WIDTH = 312;
+export declare const DEFAULT_FILTER_PADDING = 12;

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

@@ -1,6 +1,5 @@
-import { ConfigContainer, ConfigContainerChild, WidgetType } from '../types';
+import { ConfigContainerChild, WidgetType } from '../types';
 export declare const useWidgetConfig: (type?: WidgetType) => {
     config: any;
-    editConfig: ConfigContainer;
     pages: ConfigContainerChild[];
 };

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

@@ -13,6 +13,8 @@ export declare const useWidgetContext: (type?: WidgetType) => {
     feature: import('../../..').SelectedFeature;
     closeFeatureCard: VoidFunction;
     containerIds: string[];
+    controls: Record<string, string>;
+    changeControls: (controls: Record<string, string>) => void;
     components: {
         LayerItem?: import('react').FC<import('../..').LayerItemProps>;
         ProjectCatalogMenu?: import('react').FC;
@@ -20,6 +22,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;
@@ -127,6 +128,7 @@ export interface ConfigOptions {
     tabId?: string;
     column?: boolean;
     relatedDataSource?: string;
+    controlName?: string;
     filterName?: string;
     searchFilterName?: string;
     colorAttribute?: string;

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;
@@ -20,6 +20,8 @@ export type FeatureCardContextSettings = PropsWithChildren<{
     loading?: boolean;
     filters?: SelectedFilters;
     changeFilters?: (filters: SelectedFilters) => void;
+    controls?: Record<string, string>;
+    changeControls?: (controls: Record<string, string>) => void;
     expandContainer?: (id: string, expanded?: boolean) => void;
     setSelectedTabId?: (id: string) => void;
     setHandBookReference?: (reference: LayerReferenceConfigurationDc) => void;

package/dist/index.js

@@ -3438,6 +3438,8 @@ const DEFAULT_ZOOM = 10;
 const NUMERIC_ATTRIBUTE_TYPES = [api.AttributeType.Double, api.AttributeType.Int32, api.AttributeType.Int64];
 const GEOMETRY_ATTRIBUTE = "geometry";
 const DEFAULT_ID_ATTRIBUTE_NAME = "gid";
+const DEFAULT_DROPDOWN_WIDTH = 312;
+const DEFAULT_FILTER_PADDING = 12;
 
 const StackBarContainer = styled(uilibGl.Flex) `
   flex-wrap: nowrap;
@@ -4003,8 +4005,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, controls, changeControls, 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,
@@ -4017,8 +4019,11 @@ const useWidgetContext = (type = exports.WidgetType.Dashboard) => {
         feature,
         closeFeatureCard,
         containerIds,
+        controls,
+        changeControls,
         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,
@@ -6009,7 +6014,7 @@ const DEFAULT_BAR_CHART_MARGINS = {
 
 const FiltersContainerWrapper = styled(uilibGl.Flex) `
   flex-direction: column;
-  padding: ${({ $padding }) => $padding ?? "0.75rem"};
+  padding: ${({ $padding }) => $padding ?? `${DEFAULT_FILTER_PADDING}px`};
   background-color: ${({ $bgColor, $fontColor, theme: { palette } }) => $bgColor || ($fontColor ? transparentizeColor($fontColor, 6) : palette.element)};
   border-radius: ${({ theme: { borderRadius } }) => borderRadius.medium};
 
@@ -7770,34 +7775,29 @@ const ElementChips = React.memo(({ type, elementConfig }) => {
 
 const ElementControl = ({ elementConfig }) => {
     const { t } = useGlobalContext();
-    const { dataSources, filters, changeFilters } = useWidgetContext(exports.WidgetType.FeatureCard);
+    const { dataSources, controls, changeControls } = useWidgetContext(exports.WidgetType.FeatureCard);
+    const [value, setValue] = React.useState();
     const { options, attributeName } = elementConfig || {};
-    const { filterName, relatedDataSource, label, placeholder = t("selectValue", { ns: "dashboard", defaultValue: "Выберите значение" }) } = options || {};
-    // Получаем данные из datasource
+    const { relatedDataSource, controlName, label, width, placeholder = t("selectValue", { ns: "dashboard", defaultValue: "Выберите значение" }) } = options || {};
     const dataSource = React.useMemo(() => getDataSource(relatedDataSource, dataSources), [relatedDataSource, dataSources]);
-    // Формируем опции для dropdown из features datasource
     const items = React.useMemo(() => {
         if (!dataSource?.features?.length || !attributeName) {
             return [];
         }
-        return dataSource.features.map((feature, index) => ({
-            id: feature.id || index,
-            value: feature.attributes?.[attributeName] || "",
-            label: feature.attributes?.[attributeName] || "",
+        return dataSource.features.map(({ attributes }) => ({
+            value: attributes?.[attributeName] || "",
+            text: attributes?.[attributeName] || "",
         }));
-    }, [dataSource, attributeName]);
-    // Получаем текущее выбранное значение
-    const selectedItem = React.useMemo(() => items.find(opt => opt.value === filters?.[filterName]?.value), [items, filters, filterName]);
-    const handleChange = React.useCallback((option) => {
-        if (changeFilters && filterName) {
-            changeFilters({
-                [filterName]: {
-                    value: option?.value || null,
-                },
+    }, [dataSource?.features, attributeName]);
+    const handleChange = React.useCallback(([option]) => {
+        setValue(option?.value);
+        if (controlName && changeControls) {
+            changeControls({
+                [controlName]: option?.value,
             });
         }
-    }, [changeFilters, filterName]);
-    return (jsxRuntime.jsx(uilibGl.Dropdown, { label: label, options: items, value: selectedItem, onChange: handleChange, width: "100%", placeholder: placeholder }));
+    }, [changeControls, controlName]);
+    return (jsxRuntime.jsx(uilibGl.Dropdown, { zIndex: 1000, width: `${width ?? DEFAULT_DROPDOWN_WIDTH}px`, label: label, options: items, value: controls?.[controlName] ?? value, placeholder: placeholder, onChange: handleChange }));
 };
 
 const StyledIconFontSizeMixin = styled.css `
@@ -8718,7 +8718,7 @@ const DropdownFilter = ({ type, filter, elementConfig }) => {
     }, [changeFilters, filterName]);
     if (!configFilter)
         return null;
-    return (jsxRuntime.jsx(uilibGl.Dropdown, { zIndex: 100, width: `${width ?? 288}px`, value: value, placeholder: placeholder, options: filterOptions, onChange: onChange }));
+    return (jsxRuntime.jsx(uilibGl.Dropdown, { zIndex: 100, width: `${width ?? (DEFAULT_DROPDOWN_WIDTH - DEFAULT_FILTER_PADDING * 2)}px`, value: value, placeholder: placeholder, options: filterOptions, onChange: onChange }));
 };
 
 const CheckboxFilter = ({ type, filter, elementConfig }) => {
@@ -9620,11 +9620,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 || {});
@@ -9640,14 +9645,10 @@ const useWidgetConfig = (type = exports.WidgetType.Dashboard) => {
             return newConfig;
         }
         return currentConfig;
-    }, [configProp, containerIds, layerInfo?.configuration?.cardConfiguration, projectInfo?.content?.dashboardConfiguration, type]);
-    const editConfig = React.useMemo(() => type === exports.WidgetType.Dashboard
-        ? (projectInfo?.content?.editConfiguration || {})
-        : (layerInfo?.configuration?.editConfiguration || {}), []);
+    }, [configProp, containerIds, layerInfo?.configuration?.cardConfiguration, projectInfo?.content?.dashboardConfiguration, type, isEditing]);
     const pages = React.useMemo(() => (getPagesFromConfig(config) || []), [config]);
     return {
         config,
-        editConfig,
         pages,
     };
 };
@@ -10384,20 +10385,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]);
@@ -10543,7 +10541,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);
@@ -10551,7 +10549,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) `
@@ -11165,8 +11163,10 @@ exports.DEFAULT_CHART_WIDTH = DEFAULT_CHART_WIDTH;
 exports.DEFAULT_CIRCLE_PAINT = DEFAULT_CIRCLE_PAINT;
 exports.DEFAULT_DASHBOARD_CONFIG = DEFAULT_DASHBOARD_CONFIG;
 exports.DEFAULT_DATA_SOURCE_LIMIT = DEFAULT_DATA_SOURCE_LIMIT;
+exports.DEFAULT_DROPDOWN_WIDTH = DEFAULT_DROPDOWN_WIDTH;
 exports.DEFAULT_FILL_EXTRUSION_PAINT = DEFAULT_FILL_EXTRUSION_PAINT;
 exports.DEFAULT_FILL_PAINT = DEFAULT_FILL_PAINT;
+exports.DEFAULT_FILTER_PADDING = DEFAULT_FILTER_PADDING;
 exports.DEFAULT_ID_ATTRIBUTE_NAME = DEFAULT_ID_ATTRIBUTE_NAME;
 exports.DEFAULT_LAT = DEFAULT_LAT;
 exports.DEFAULT_LINE_PAINT = DEFAULT_LINE_PAINT;