@evergis/react 4.0.92 → 4.0.94

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

@@ -138,7 +138,7 @@ export interface AddFeatureContainerConfig extends Omit<ConfigContainerChild, "o
 export interface AddFeatureContainerProps extends Omit<ContainerProps, "elementConfig"> {
     elementConfig?: AddFeatureContainerConfig;
 }
-export type AttachmentContainerOptions = Pick<ConfigOptions, "expandable" | "expanded" | "viewMode" | "shownItems" | "otherItems" | "relatedDataSource" | "controls">;
+export type AttachmentContainerOptions = Pick<ConfigOptions, "expandable" | "expanded" | "viewMode" | "shownItems" | "otherItems" | "relatedDataSource" | "controls" | "width" | "height">;
 export interface AttachmentContainerConfig extends Omit<ConfigContainerChild, "options" | "templateName"> {
     templateName?: ContainerTemplate.Attachment;
     options?: AttachmentContainerOptions;
@@ -146,7 +146,7 @@ export interface AttachmentContainerConfig extends Omit<ConfigContainerChild, "o
 export interface AttachmentContainerProps extends Omit<ContainerProps, "elementConfig"> {
     elementConfig?: AttachmentContainerConfig;
 }
-export type CameraContainerOptions = Pick<ConfigOptions, "expandable" | "expanded">;
+export type CameraContainerOptions = Pick<ConfigOptions, "expandable" | "expanded" | "width" | "height">;
 export interface CameraContainerConfig extends Omit<ConfigContainerChild, "options" | "templateName"> {
     templateName?: ContainerTemplate.Camera;
     options?: CameraContainerOptions;
@@ -185,7 +185,7 @@ export interface ChartContainerConfig extends Omit<ConfigContainerChild, "option
 export interface ChartContainerProps extends Omit<ContainerProps, "elementConfig"> {
     elementConfig?: ChartContainerConfig;
 }
-export type ContainersGroupContainerOptions = Pick<ConfigOptions, "column" | "expandable" | "expanded">;
+export type ContainersGroupContainerOptions = Pick<ConfigOptions, "column" | "expandable" | "expanded" | "width" | "height">;
 export interface ContainersGroupContainerConfig extends Omit<ConfigContainerChild, "options" | "templateName"> {
     templateName?: ContainerTemplate.ContainersGroup;
     options?: ContainersGroupContainerOptions;
@@ -193,7 +193,7 @@ export interface ContainersGroupContainerConfig extends Omit<ConfigContainerChil
 export interface ContainersGroupContainerProps extends Omit<ContainerProps, "elementConfig"> {
     elementConfig?: ContainersGroupContainerConfig;
 }
-export type DataSourceContainerOptions = Pick<ConfigOptions, "column" | "relatedDataSource" | "expandable" | "expanded">;
+export type DataSourceContainerOptions = Pick<ConfigOptions, "column" | "relatedDataSource" | "expandable" | "expanded" | "width" | "height">;
 export interface DataSourceContainerConfig extends Omit<ConfigContainerChild, "options" | "templateName"> {
     templateName?: ContainerTemplate.DataSource;
     options?: DataSourceContainerOptions;
@@ -205,7 +205,7 @@ export type DataSourceInnerContainerOptions = Pick<ConfigOptions, "relatedDataSo
 export interface DataSourceInnerContainerConfig extends Omit<ConfigContainerChild, "options"> {
     options?: DataSourceInnerContainerOptions;
 }
-export type DataSourceProgressContainerOptions = Pick<ConfigOptions, "maxValue" | "showTotal" | "relatedDataSource" | "expandable" | "expanded" | "shownItems">;
+export type DataSourceProgressContainerOptions = Pick<ConfigOptions, "maxValue" | "showTotal" | "relatedDataSource" | "expandable" | "expanded" | "shownItems" | "width" | "height">;
 export interface DataSourceProgressContainerConfig extends Omit<ConfigContainerChild, "options" | "templateName"> {
     templateName?: ContainerTemplate.DataSourceProgress;
     options?: DataSourceProgressContainerOptions;
@@ -321,7 +321,7 @@ export interface ExportPdfContainerConfig extends Omit<ConfigContainerChild, "op
 export interface ExportPdfContainerProps extends Omit<ContainerProps, "elementConfig"> {
     elementConfig?: ExportPdfContainerConfig;
 }
-export type FiltersContainerOptions = Pick<ConfigOptions, "padding" | "bgColor" | "fontColor" | "fontSize" | "expandable" | "expanded">;
+export type FiltersContainerOptions = Pick<ConfigOptions, "padding" | "bgColor" | "fontColor" | "fontSize" | "expandable" | "expanded" | "width" | "height">;
 export type FilterChildOptions = Pick<ConfigOptions, "filterName" | "label" | "placeholder" | "control" | "controls" | "relatedDataSource" | "minValue" | "maxValue">;
 export interface FilterChild extends Omit<ConfigContainerChild, "options" | "type"> {
     /** {@link FilterType} оставляем строкой, чтобы не плодить два почти одинаковых union-а в `type`. */
@@ -352,7 +352,7 @@ export interface ImageContainerConfig extends Omit<ConfigContainerChild, "option
 export interface ImageContainerProps extends Omit<ContainerProps, "elementConfig"> {
     elementConfig?: ImageContainerConfig;
 }
-export type LayersContainerOptions = Pick<ConfigOptions, "layerNames" | "expandable" | "expanded">;
+export type LayersContainerOptions = Pick<ConfigOptions, "layerNames" | "expandable" | "expanded" | "width" | "height">;
 export interface LayersContainerConfig extends Omit<ConfigContainerChild, "options" | "templateName"> {
     templateName?: ContainerTemplate.Layers;
     options?: LayersContainerOptions;
@@ -360,7 +360,7 @@ export interface LayersContainerConfig extends Omit<ConfigContainerChild, "optio
 export interface LayersContainerProps extends Omit<ContainerProps, "elementConfig"> {
     elementConfig?: LayersContainerConfig;
 }
-export type OneColumnContainerOptions = Pick<ConfigOptions, "attributes" | "useProjectHiddenAttributes" | "hideEmpty" | "innerTemplateStyle">;
+export type OneColumnContainerOptions = Pick<ConfigOptions, "attributes" | "useProjectHiddenAttributes" | "hideEmpty" | "innerTemplateStyle" | "width" | "height">;
 export interface OneColumnContainerConfig extends Omit<ConfigContainerChild, "options" | "templateName"> {
     templateName?: ContainerTemplate.OneColumn;
     options?: OneColumnContainerOptions;
@@ -395,7 +395,7 @@ export interface RoundedBackgroundContainerConfig extends Omit<ConfigContainerCh
 export interface RoundedBackgroundContainerProps extends Omit<ContainerProps, "elementConfig"> {
     elementConfig?: RoundedBackgroundContainerConfig;
 }
-export type SlideshowContainerOptions = Pick<ConfigOptions, "expandable" | "expanded">;
+export type SlideshowContainerOptions = Pick<ConfigOptions, "expandable" | "expanded" | "width" | "height">;
 export interface SlideshowContainerConfig extends Omit<ConfigContainerChild, "options" | "templateName"> {
     templateName?: ContainerTemplate.Slideshow;
     options?: SlideshowContainerOptions;
@@ -416,7 +416,7 @@ export interface TabsContainerConfig extends Omit<ConfigContainerChild, "options
 export interface TabsContainerProps extends Omit<ContainerProps, "elementConfig"> {
     elementConfig?: TabsContainerConfig;
 }
-export type TaskContainerOptions = Pick<ConfigOptions, "title" | "relatedResources" | "center" | "icon" | "statusColors" | "responseFilters" | "useNotifications">;
+export type TaskContainerOptions = Pick<ConfigOptions, "title" | "relatedResources" | "center" | "icon" | "statusColors" | "responseFilters" | "useNotifications" | "width" | "height">;
 export interface TaskContainerConfig extends Omit<ConfigContainerChild, "options" | "templateName"> {
     templateName?: ContainerTemplate.Task;
     options?: TaskContainerOptions;
@@ -432,7 +432,7 @@ export interface TitleContainerConfig extends Omit<ConfigContainerChild, "option
 export interface TitleContainerProps extends Omit<ContainerProps, "elementConfig"> {
     elementConfig?: TitleContainerConfig;
 }
-export type TwoColumnContainerOptions = Pick<ConfigOptions, "attributes" | "useProjectHiddenAttributes" | "hideEmpty" | "innerTemplateStyle">;
+export type TwoColumnContainerOptions = Pick<ConfigOptions, "attributes" | "useProjectHiddenAttributes" | "hideEmpty" | "innerTemplateStyle" | "width" | "height">;
 export interface TwoColumnContainerConfig extends Omit<ConfigContainerChild, "options" | "templateName"> {
     templateName?: ContainerTemplate.TwoColumn;
     options?: TwoColumnContainerOptions;
@@ -440,7 +440,7 @@ export interface TwoColumnContainerConfig extends Omit<ConfigContainerChild, "op
 export interface TwoColumnContainerProps extends Omit<ContainerProps, "elementConfig"> {
     elementConfig?: TwoColumnContainerConfig;
 }
-export type UploadContainerOptions = Pick<ConfigOptions, "expandable" | "expanded">;
+export type UploadContainerOptions = Pick<ConfigOptions, "expandable" | "expanded" | "width" | "height">;
 export interface UploadContainerConfig extends Omit<ConfigContainerChild, "options" | "templateName"> {
     templateName?: ContainerTemplate.Upload;
     options?: UploadContainerOptions;

package/dist/components/Dashboard/utils/getWrapperSizeStyle.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties } from 'react';
+/**
+ * Мержит `width`/`height` из options контейнера в inline-style его корневой обёртки.
+ *
+ * Значения размера из options имеют приоритет над одноимёнными полями `style`.
+ * Поле добавляется только когда задано — иначе `style` остаётся нетронутым.
+ */
+export declare const getWrapperSizeStyle: (style?: CSSProperties, width?: number, height?: number) => CSSProperties;

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

@@ -45,6 +45,7 @@ export * from './getSlideshowImages';
 export * from './getSvgUrl';
 export * from './getTemplateNameFromAttribute';
 export * from './getThemeByName';
+export * from './getWrapperSizeStyle';
 export * from './getDisplayTemplateNameFromAttribute';
 export * from './getTotalFromAttributes';
 export * from './getTotalFromRelatedFeatures';

package/dist/index.js

@@ -6,7 +6,6 @@ var React = require('react');
 var styled = require('styled-components');
 var charts = require('@evergis/charts');
 var api = require('@evergis/api');
-var Gradient = require('javascript-color-gradient');
 var color$1 = require('@evergis/color');
 var dateFns = require('date-fns');
 var lodash = require('lodash');
@@ -3564,13 +3563,26 @@ const GRADIENT_COLORS = [
     "#A1E062",
     "#51D8A5",
 ];
-const getGradientColors = (colorsCount) => {
-    return new Gradient()
-        .setColorGradient(...GRADIENT_COLORS)
-        .setMidpoint(colorsCount === undefined || colorsCount < GRADIENT_COLORS.length ? GRADIENT_COLORS.length : colorsCount + 10)
-        .getColors()
-        .slice(0, colorsCount === undefined || colorsCount < GRADIENT_COLORS.length ? GRADIENT_COLORS.length : colorsCount);
+const HEX_RRGGBB_LENGTH = 7;
+/**
+ * Растягивает палитру на нужное количество цветов: опорные цвета равномерно
+ * раскладываются по шкале, недостающие интерполируются между ними.
+ * @param colors - опорные цвета палитры в hex
+ * @param count - требуемое количество цветов
+ * @returns массив ровно из count цветов
+ */
+const stretchPalette = (colors, count) => {
+    if (!colors?.length || count <= 0)
+        return [];
+    if (colors.length === 1)
+        return Array.from({ length: count }, () => colors[0]);
+    const scale = new color$1.ColorScale(colors.map((color, index) => [index / (colors.length - 1), color]));
+    return Array.from({ length: count }, (_, index) => {
+        const color = scale.getColor(count === 1 ? 0 : index / (count - 1));
+        return color ? new color$1.Color(color).toString("hex").slice(0, HEX_RRGGBB_LENGTH) : colors[colors.length - 1];
+    });
 };
+const getGradientColors = (colorsCount) => stretchPalette(GRADIENT_COLORS, colorsCount === undefined || colorsCount < GRADIENT_COLORS.length ? GRADIENT_COLORS.length : colorsCount);
 /**
  * Converts HSL hue value to RGB
  * @param p - lower bound
@@ -6407,11 +6419,11 @@ const getChartMarkers = (items, markers, dataSources) => {
 
 const ContainersGroupContainer = React.memo(({ elementConfig, type, renderElement }) => {
     const { expandedContainers } = useWidgetContext(type);
-    const { id, children, options } = elementConfig || {};
-    const { column, expandable, expanded } = options || {};
+    const { id, style, children, options } = elementConfig || {};
+    const { column, expandable, expanded, width, height } = 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, children: jsxRuntime.jsx(ContainerChildren, { type: type, 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, style: getWrapperSizeStyle(style, width, height), 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) `
@@ -6592,7 +6604,8 @@ const useRenderContainer = ({ elementConfig, type, renderElement, renderBody, })
 };
 
 const OneColumnContainer = React.memo(({ type, elementConfig, renderElement }) => {
-    const renderBody = React.useCallback(({ id, value, style, hasUnits, render }) => (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: { ...BASE_CONTAINER_STYLE, ...style }, children: [jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [render({ id: "alias" }), render({ id: "tooltip" }), render({ id: "modal" })] }), jsxRuntime.jsxs(ContainerValue, { children: [value, hasUnits && (jsxRuntime.jsx(ContainerUnits, { children: render({ id: "units" }) }))] })] })), []);
+    const { width, height } = elementConfig?.options || {};
+    const renderBody = React.useCallback(({ id, value, style, hasUnits, render }) => (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: getWrapperSizeStyle({ ...BASE_CONTAINER_STYLE, ...style }, width, height), children: [jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [render({ id: "alias" }), render({ id: "tooltip" }), render({ id: "modal" })] }), jsxRuntime.jsxs(ContainerValue, { children: [value, hasUnits && (jsxRuntime.jsx(ContainerUnits, { children: render({ id: "units" }) }))] })] })), [width, height]);
     const { renderContainer, attributesToRender } = useRenderContainer({
         type,
         elementConfig,
@@ -6603,7 +6616,8 @@ const OneColumnContainer = React.memo(({ type, elementConfig, renderElement }) =
 });
 
 const TwoColumnContainer = React.memo(({ elementConfig, type, renderElement }) => {
-    const renderBody = React.useCallback(({ id, value, style, hasIcon, hasUnits, render }) => (jsxRuntime.jsxs(TwoColumnContainerWrapper, { id: id, style: style, children: [jsxRuntime.jsxs(ContainerAlias, { children: [hasIcon && (jsxRuntime.jsx(ContainerAliasIcon, { children: render({ id: "icon" }) })), render({ id: "alias" }), render({ id: "tooltip" }), render({ id: "modal" })] }), jsxRuntime.jsxs(ContainerValue, { big: true, children: [value, hasUnits && (jsxRuntime.jsx(ContainerUnits, { children: render({ id: "units" }) }))] })] })), []);
+    const { width, height } = elementConfig?.options || {};
+    const renderBody = React.useCallback(({ id, value, style, hasIcon, hasUnits, render }) => (jsxRuntime.jsxs(TwoColumnContainerWrapper, { id: id, style: getWrapperSizeStyle(style, width, height), children: [jsxRuntime.jsxs(ContainerAlias, { children: [hasIcon && (jsxRuntime.jsx(ContainerAliasIcon, { children: render({ id: "icon" }) })), render({ id: "alias" }), render({ id: "tooltip" }), render({ id: "modal" })] }), jsxRuntime.jsxs(ContainerValue, { big: true, children: [value, hasUnits && (jsxRuntime.jsx(ContainerUnits, { children: render({ id: "units" }) }))] })] })), [width, height]);
     const { renderContainer, attributesToRender } = useRenderContainer({
         type,
         elementConfig,
@@ -6789,7 +6803,7 @@ const DataSourceProgressContainer = React.memo(({ config, elementConfig, type, i
     });
     const { attributes } = layerInfo?.configuration?.attributesConfiguration || {};
     const { id, options, children, style } = elementConfig || {};
-    const { maxValue, showTotal, relatedDataSource, expandable, expanded } = options || {};
+    const { maxValue, showTotal, relatedDataSource, expandable, expanded, width, height } = options || {};
     const valueElement = children?.find(item => item.id === "value");
     const unitsElement = children?.find(item => item.id === "units");
     const { sliceItems, checkIsSliced, showMore, onShowMore } = useShownOtherItems(options);
@@ -6822,7 +6836,7 @@ const DataSourceProgressContainer = React.memo(({ config, elementConfig, type, i
         return jsxRuntime.jsx(DataSourceError, { name: elementConfig.templateName });
     }
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), !isVisible ? null : dataSource ? (jsxRuntime.jsxs(DataSourceProgressContainerWrapper, { id: id, style: style, children: [sliceItems(dataSource?.features)?.map((feature, index) => (jsxRuntime.jsx(DataSourceInnerContainer, { type: type, index: index, feature: feature, config: config, elementConfig: elementConfig, maxValue: currentMaxValue, innerComponent: innerComponent }, index))), checkIsSliced(dataSource?.features) && (jsxRuntime.jsx(ContainerToggler, { toggled: showMore, onClick: onShowMore, children: showMore ? t("hide", { ns: "dashboard", defaultValue: "Свернуть" }) : t("showAll", {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), !isVisible ? null : dataSource ? (jsxRuntime.jsxs(DataSourceProgressContainerWrapper, { id: id, style: getWrapperSizeStyle(style, width, height), children: [sliceItems(dataSource?.features)?.map((feature, index) => (jsxRuntime.jsx(DataSourceInnerContainer, { type: type, index: index, feature: feature, config: config, elementConfig: elementConfig, maxValue: currentMaxValue, innerComponent: innerComponent }, index))), checkIsSliced(dataSource?.features) && (jsxRuntime.jsx(ContainerToggler, { toggled: showMore, onClick: onShowMore, children: showMore ? t("hide", { ns: "dashboard", defaultValue: "Свернуть" }) : t("showAll", {
                             ns: "dashboard",
                             defaultValue: "Показать все",
                         }) })), showTotal && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(uilibGl.Divider, {}), jsxRuntime.jsxs(ProgressTotal, { children: [jsxRuntime.jsx(ProgressTotalTitle, { children: t("total", { ns: "dashboard", defaultValue: "Итого" }) }), jsxRuntime.jsxs(ProgressValue, { children: [totalValue, jsxRuntime.jsx(ProgressUnits, { children: totalUnits })] })] })] }))] })) : (jsxRuntime.jsx(ContainerLoading, {})), jsxRuntime.jsx(HiddenTitleItems, { elementConfig: elementConfig, config: config, type: type })] }));
@@ -7049,7 +7063,7 @@ const FiltersContainer = React.memo(({ elementConfig, config, type, renderElemen
     const { currentPage } = useWidgetPage(type);
     const { filters: configFilters } = currentPage;
     const { id, style, options } = elementConfig || {};
-    const { padding, bgColor, fontColor, fontSize, expandable, expanded } = options || {};
+    const { padding, bgColor, fontColor, fontSize, expandable, expanded, width, height } = options || {};
     const isLoading = React.useMemo(() => checkIsLoading(dataSources, config, configFilters), [configFilters, config, dataSources]);
     const filterItems = React.useMemo(() => elementConfig?.children?.filter(child => child.options?.filterName), [elementConfig?.children]);
     const renderFilter = React.useCallback((filter, index) => {
@@ -7058,7 +7072,7 @@ const FiltersContainer = React.memo(({ elementConfig, config, type, renderElemen
     }, [config, type]);
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
     const selectedItems = React.useMemo(() => getFilterSelectedItems(filterItems, filters, configFilters), [configFilters, filters, filterItems]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(uilibGl.Flex, { mb: !isVisible && selectedItems.length ? "2rem" : 0, children: jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }) }), isLoading && jsxRuntime.jsx(ContainerLoading, {}), !isLoading && isVisible && (jsxRuntime.jsx(FiltersContainerWrapper, { id: id, style: style, "$padding": padding, "$bgColor": bgColor, "$fontSize": fontSize, "$fontColor": fontColor, children: filterItems?.map(renderFilter) })), jsxRuntime.jsx(HiddenTitleItems, { elementConfig: elementConfig, config: config, type: type, filter: filterItems[0]?.options?.filterName })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(uilibGl.Flex, { mb: !isVisible && selectedItems.length ? "2rem" : 0, children: jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }) }), isLoading && jsxRuntime.jsx(ContainerLoading, {}), !isLoading && isVisible && (jsxRuntime.jsx(FiltersContainerWrapper, { id: id, style: getWrapperSizeStyle(style, width, height), "$padding": padding, "$bgColor": bgColor, "$fontSize": fontSize, "$fontColor": fontColor, children: filterItems?.map(renderFilter) })), jsxRuntime.jsx(HiddenTitleItems, { elementConfig: elementConfig, config: config, type: type, filter: filterItems[0]?.options?.filterName })] }));
 });
 
 const DefaultAttributesContainer = React.memo(({ type, renderElement }) => {
@@ -7239,7 +7253,7 @@ const IconContainer = React.memo(({ elementConfig, renderElement }) => {
 const DataSourceContainer = React.memo(({ config, elementConfig, type, innerComponent, renderElement }) => {
     const { dataSources, expandedContainers } = useWidgetContext(type);
     const { id, style, options } = elementConfig || {};
-    const { column = true, relatedDataSource, expandable, expanded } = options || {};
+    const { column = true, relatedDataSource, expandable, expanded, width, height } = options || {};
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
     const dataSource = React.useMemo(() => dataSources?.find(({ name }) => name === relatedDataSource), [dataSources, relatedDataSource]);
     if (!relatedDataSource)
@@ -7248,7 +7262,7 @@ const DataSourceContainer = React.memo(({ config, elementConfig, type, innerComp
         return jsxRuntime.jsx(DataSourceError, { name: elementConfig.templateName });
     }
     const isLoading = !dataSource?.features;
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), !isVisible ? null : dataSource ? (jsxRuntime.jsx(Container, { id: id, isColumn: column, style: { height: isLoading ? "3rem" : "auto", ...style }, children: dataSource.features?.map((feature, index) => (jsxRuntime.jsx(DataSourceInnerContainer, { index: index, type: type, config: config, feature: feature, elementConfig: elementConfig, innerComponent: innerComponent }, index))) })) : (jsxRuntime.jsx(ContainerLoading, {}))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), !isVisible ? null : dataSource ? (jsxRuntime.jsx(Container, { id: id, isColumn: column, style: getWrapperSizeStyle({ height: isLoading ? "3rem" : "auto", ...style }, width, height), children: dataSource.features?.map((feature, index) => (jsxRuntime.jsx(DataSourceInnerContainer, { index: index, type: type, config: config, feature: feature, elementConfig: elementConfig, innerComponent: innerComponent }, index))) })) : (jsxRuntime.jsx(ContainerLoading, {}))] }));
 });
 
 const SvgContainerColorMixin = styled.css `
@@ -7387,7 +7401,7 @@ const SlideshowContainer = React.memo(({ config, elementConfig, type }) => {
         dataSources,
     });
     const { id, style, options } = elementConfig || {};
-    const { expandable, expanded } = options || {};
+    const { expandable, expanded, width, height } = options || {};
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
     const render = React.useMemo(() => getRenderElement({
         config,
@@ -7411,7 +7425,7 @@ const SlideshowContainer = React.memo(({ config, elementConfig, type }) => {
         pageIndex,
         type,
     ]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: render }), isVisible && (jsxRuntime.jsxs(Container, { style: style, children: [jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: render({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { children: render({
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: render }), isVisible && (jsxRuntime.jsxs(Container, { style: getWrapperSizeStyle(style, width, height), children: [jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: render({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { children: render({
                             id: "slideshow",
                             wrap: false,
                         }) })] }))] }));
@@ -7420,9 +7434,9 @@ const SlideshowContainer = React.memo(({ config, elementConfig, type }) => {
 const CameraContainer = React.memo(({ elementConfig, type, renderElement }) => {
     const { expandedContainers } = useWidgetContext(type);
     const { id, options, style } = elementConfig || {};
-    const { expandable, expanded } = options || {};
+    const { expandable, expanded, width, height } = options || {};
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(Container, { id: id, style: style, children: [jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { children: renderElement({ id: "value", wrap: false }) })] }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(Container, { id: id, style: getWrapperSizeStyle(style, width, height), children: [jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { children: renderElement({ id: "value", wrap: false }) })] }))] }));
 });
 
 const TabAnchor = styled.div `
@@ -7686,7 +7700,7 @@ const LayersContainer = React.memo(({ type, elementConfig, renderElement }) => {
     const { expandedContainers } = useWidgetContext(type);
     const { currentPage } = useWidgetPage(type);
     const { id, options, style } = elementConfig || {};
-    const { layerNames, expandable, expanded } = options || {};
+    const { layerNames, expandable, expanded, width, height } = options || {};
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
     const layers = React.useMemo(() => {
         if (!currentPage?.layers)
@@ -7695,7 +7709,7 @@ const LayersContainer = React.memo(({ type, elementConfig, renderElement }) => {
             return currentPage.layers;
         return currentPage.layers.filter(({ name }) => layerNames.includes(name));
     }, [currentPage?.layers, layerNames]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(LayersContainerWrapper, { id: id, style: style, children: jsxRuntime.jsx(LayerTree, { layers: layers, onlyMainTools: true }) }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(LayersContainerWrapper, { id: id, style: getWrapperSizeStyle(style, width, height), children: jsxRuntime.jsx(LayerTree, { layers: layers, onlyMainTools: true }) }))] }));
 });
 
 const ExportPdfContainer = React.memo(({ type, elementConfig }) => {
@@ -7709,9 +7723,9 @@ const ExportPdfContainer = React.memo(({ type, elementConfig }) => {
 const UploadContainer = React.memo(({ type, elementConfig, renderElement }) => {
     const { expandedContainers } = useWidgetContext(type);
     const { id, options } = elementConfig || {};
-    const { expandable, expanded } = options || {};
+    const { expandable, expanded, width, height } = options || {};
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && renderElement({ id: "uploader", wrap: false })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(uilibGl.Flex, { column: true, style: getWrapperSizeStyle({ width: "100%" }, width, height), children: renderElement({ id: "uploader", wrap: false }) }))] }));
 });
 
 const StatusBadge = styled(uilibGl.Chip) `
@@ -7926,7 +7940,7 @@ const TaskContainer = React.memo(({ type, elementConfig, renderElement }) => {
     const { currentPage } = useWidgetPage(type);
     const { taskId, runTask, stopTask, status, openLog, loading, isLogDialogOpen, closeLog, log, lastMessage, result, } = usePythonTask();
     const { options } = elementConfig || {};
-    const { title, relatedResources, center, icon, statusColors, responseFilters, useNotifications, } = options || {};
+    const { title, relatedResources, center, icon, statusColors, responseFilters, useNotifications, width, height, } = options || {};
     const { setNotificationDismissed } = useTaskNotifications({
         enabled: !!useNotifications,
         suppressed: isLogDialogOpen,
@@ -7966,7 +7980,7 @@ const TaskContainer = React.memo(({ type, elementConfig, renderElement }) => {
             return runTask({ resourceId, parameters: newParams, script, fileName, methodName });
         }));
     }, [attributes, currentPage.filters, dataSources, ewktGeometry, layerInfo, projectDataSources, relatedResources, runTask, selectedFilters, stopTask, taskId]);
-    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: onCloseLog, onMinimize: useNotifications ? onMinimizeLog : undefined })] }))] })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), jsxRuntime.jsxs(uilibGl.Flex, { justifyContent: center ? "center" : "flex-start", style: getWrapperSizeStyle(undefined, width, height), 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: onCloseLog, onMinimize: useNotifications ? onMinimizeLog : undefined })] }))] })] }));
 });
 
 const EditContainer = ({ type, elementConfig, renderElement }) => {
@@ -8707,7 +8721,7 @@ const AttachmentContainer = React.memo(({ type, elementConfig, renderElement })
     const { expandedContainers } = useWidgetContext(type);
     const { items, visibleItems, viewMode, setViewMode, showMore, setShowMore, hasMore, hiddenCount } = useAttachmentContainer({ type, elementConfig });
     const { id, style, options } = elementConfig || {};
-    const { expandable, expanded } = options || {};
+    const { expandable, expanded, width, height } = options || {};
     const [previewIndex, setPreviewIndex] = React.useState(null);
     const previewImages = useAttachmentPreviewImages({ items, active: previewIndex !== null });
     const handlePreview = React.useCallback((link) => {
@@ -8718,7 +8732,7 @@ const AttachmentContainer = React.memo(({ type, elementConfig, renderElement })
     const handleClosePreview = React.useCallback(() => setPreviewIndex(null), []);
     const handleShowMore = React.useCallback(() => setShowMore(true), [setShowMore]);
     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, style: { ...BASE_CONTAINER_STYLE, ...style }, children: jsxRuntime.jsxs(uilibGl.Flex, { column: true, children: [jsxRuntime.jsx(AttachmentsHeader, { alias: renderElement?.({ id: "alias" }), count: items.length, viewMode: viewMode, onChangeViewMode: setViewMode }), jsxRuntime.jsx(AttachmentsContent, { children: viewMode === "grid" ? (jsxRuntime.jsx(AttachmentsGrid, { items: visibleItems, isEdit: false, onPreview: handlePreview })) : (jsxRuntime.jsx(AttachmentsList, { items: visibleItems, isEdit: false, onPreview: handlePreview })) }), hasMore && !showMore && (jsxRuntime.jsx(ShowMoreButton, { hiddenCount: hiddenCount, onClick: handleShowMore })), previewIndex !== null && (jsxRuntime.jsx(uilibGl.Preview, { images: previewImages, initialIndex: previewIndex, isOpen: previewIndex !== null, onClose: handleClosePreview, errorTitleText: t("attachments.resourceUnavailable", {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(Container, { id: id, style: getWrapperSizeStyle({ ...BASE_CONTAINER_STYLE, ...style }, width, height), children: jsxRuntime.jsxs(uilibGl.Flex, { column: true, children: [jsxRuntime.jsx(AttachmentsHeader, { alias: renderElement?.({ id: "alias" }), count: items.length, viewMode: viewMode, onChangeViewMode: setViewMode }), jsxRuntime.jsx(AttachmentsContent, { children: viewMode === "grid" ? (jsxRuntime.jsx(AttachmentsGrid, { items: visibleItems, isEdit: false, onPreview: handlePreview })) : (jsxRuntime.jsx(AttachmentsList, { items: visibleItems, isEdit: false, onPreview: handlePreview })) }), hasMore && !showMore && (jsxRuntime.jsx(ShowMoreButton, { hiddenCount: hiddenCount, onClick: handleShowMore })), previewIndex !== null && (jsxRuntime.jsx(uilibGl.Preview, { images: previewImages, initialIndex: previewIndex, isOpen: previewIndex !== null, onClose: handleClosePreview, errorTitleText: t("attachments.resourceUnavailable", {
                                 ns: "common",
                                 defaultValue: "Ресурс недоступен",
                             }) }, previewIndex))] }) }))] }));
@@ -10268,7 +10282,7 @@ const getDashboardHeader = (templateName) => {
 };
 
 const getDataFromAttributes = (t, config, attributes) => {
-    const colors = config?.options?.colors || FEATURE_CARD_DEFAULT_COLORS;
+    const colors = stretchPalette(config?.options?.colors || FEATURE_CARD_DEFAULT_COLORS, config?.children?.length || 0);
     const data = config?.children?.map(({ attributeName }, index) => {
         const attribute = attributes?.find(item => item.attributeName === attributeName);
         return {
@@ -10320,12 +10334,8 @@ const getDataFromRelatedFeatures = ({ t, config, filters, relatedConfig, dataSou
     if (isOtherSliced) {
         data = data.slice(0, config?.options?.otherItems);
     }
-    const gradientColors = colors?.length === 1 ? [colors[0], colors[0]] : colors;
-    const gradientArray = relatedConfig.chartAxis && colors?.length < data.length
-        ? new Gradient()
-            .setColorGradient(...gradientColors)
-            .setMidpoint(data.length)
-            .getColors()
+    const gradientArray = relatedConfig.chartAxis
+        ? stretchPalette(colors, data.length)
         : colors;
     const filter = getConfigFilter(relatedConfig?.filterName, filters);
     const result = data.reduce((acc, feature, index) => {
@@ -12047,6 +12057,18 @@ const getThemeByName = (themeName) => {
     return themeName === exports.ThemeName.Dark ? uilibGl.darkTheme : uilibGl.defaultTheme;
 };
 
+/**
+ * Мержит `width`/`height` из options контейнера в inline-style его корневой обёртки.
+ *
+ * Значения размера из options имеют приоритет над одноимёнными полями `style`.
+ * Поле добавляется только когда задано — иначе `style` остаётся нетронутым.
+ */
+const getWrapperSizeStyle = (style, width, height) => ({
+    ...style,
+    ...(width != null && { width }),
+    ...(height != null && { height }),
+});
+
 const getDisplayTemplateNameFromAttribute = (attribute) => {
     if (attribute?.subType === api.StringSubType.Attachments) {
         return exports.ContainerTemplate.Attachment;
@@ -14661,6 +14683,7 @@ exports.getTemplateNameFromAttribute = getTemplateNameFromAttribute;
 exports.getThemeByName = getThemeByName;
 exports.getTotalFromAttributes = getTotalFromAttributes;
 exports.getTotalFromRelatedFeatures = getTotalFromRelatedFeatures;
+exports.getWrapperSizeStyle = getWrapperSizeStyle;
 exports.hexToRgba = hexToRgba;
 exports.isEmptyElementValue = isEmptyElementValue;
 exports.isEmptyValue = isEmptyValue;
@@ -14685,6 +14708,7 @@ exports.removeDataSource = removeDataSource;
 exports.rgbToHex = rgbToHex;
 exports.roundTotalSum = roundTotalSum;
 exports.sliceShownOtherItems = sliceShownOtherItems;
+exports.stretchPalette = stretchPalette;
 exports.timeOptions = timeOptions;
 exports.toRenderableValue = toRenderableValue;
 exports.tooltipNameFromAttributes = tooltipNameFromAttributes;