@evergis/react 2.0.190 → 2.0.192

package/dist/react.cjs.development.js

@@ -58,7 +58,6 @@ var styled = require('styled-components');
 var styled__default = _interopDefault(styled);
 var punycode = _interopDefault(require('punycode'));
 var TileLayer$1 = require('@evergis/sgis/es/layers/TileLayer');
-var reactI18next = require('react-i18next');
 var svg_js = require('@svgdotjs/svg.js');
 var Color = require('@evergis/color/es/Color');
 
@@ -728,6 +727,73 @@ const isParameterValueSymbol = parameterValue => !isParameterValueSimple(paramet
 
 const isStyle = value => 'symbol' in value;
 
+let EvergisStyle = /*#__PURE__*/function () {
+  function EvergisStyle(style) {
+    _classCallCheck(this, EvergisStyle);
+
+    this.style = extractStyle(style);
+    this.classificationManager = new ClassificationManager(this.style);
+  }
+
+  _createClass(EvergisStyle, [{
+    key: "serialize",
+    value: function serialize() {
+      return packStyle(this.style);
+    }
+  }, {
+    key: "hasRasters",
+    value: function hasRasters() {
+      return !!(this.style.raster || (this.style.children || []).some(style => style.raster));
+    }
+  }, {
+    key: "symbol",
+    get: function get() {
+      return this.style.symbol;
+    }
+  }, {
+    key: "raster",
+    get: function get() {
+      return this.style.raster;
+    }
+  }, {
+    key: "label",
+    get: function get() {
+      return this.style.label;
+    }
+  }, {
+    key: "children",
+    get: function get() {
+      return this.style.children;
+    }
+  }, {
+    key: "title",
+    get: function get() {
+      return this.style.title;
+    }
+  }, {
+    key: "condition",
+    get: function get() {
+      return this.style.condition;
+    }
+  }, {
+    key: "ignoreLabel",
+    get: function get() {
+      return this.style.ignoreLabel;
+    }
+  }, {
+    key: "resolution",
+    get: function get() {
+      const {
+        minResolution,
+        maxResolution
+      } = this.style;
+      return minResolution === void 0 || maxResolution === void 0 ? null : [minResolution, maxResolution];
+    }
+  }]);
+
+  return EvergisStyle;
+}();
+
 const toClassificationClass = (parameterValue, title, condition) => _extends({
   parameterValue,
   title
@@ -903,73 +969,6 @@ function getRangeValues(_ref, isDouble, isDate, index) {
   };
 }
 
-let EvergisStyle = /*#__PURE__*/function () {
-  function EvergisStyle(style) {
-    _classCallCheck(this, EvergisStyle);
-
-    this.style = extractStyle(style);
-    this.classificationManager = new ClassificationManager(this.style);
-  }
-
-  _createClass(EvergisStyle, [{
-    key: "serialize",
-    value: function serialize() {
-      return packStyle(this.style);
-    }
-  }, {
-    key: "hasRasters",
-    value: function hasRasters() {
-      return !!(this.style.raster || (this.style.children || []).some(style => style.raster));
-    }
-  }, {
-    key: "symbol",
-    get: function get() {
-      return this.style.symbol;
-    }
-  }, {
-    key: "raster",
-    get: function get() {
-      return this.style.raster;
-    }
-  }, {
-    key: "label",
-    get: function get() {
-      return this.style.label;
-    }
-  }, {
-    key: "children",
-    get: function get() {
-      return this.style.children;
-    }
-  }, {
-    key: "title",
-    get: function get() {
-      return this.style.title;
-    }
-  }, {
-    key: "condition",
-    get: function get() {
-      return this.style.condition;
-    }
-  }, {
-    key: "ignoreLabel",
-    get: function get() {
-      return this.style.ignoreLabel;
-    }
-  }, {
-    key: "resolution",
-    get: function get() {
-      const {
-        minResolution,
-        maxResolution
-      } = this.style;
-      return minResolution === void 0 || maxResolution === void 0 ? null : [minResolution, maxResolution];
-    }
-  }]);
-
-  return EvergisStyle;
-}();
-
 const getHexColor = colorString => colorString ? new color.Color(colorString).toString('hex') : undefined;
 
 // TODO reduce
@@ -2501,10 +2500,10 @@ let FilterCondition = /*#__PURE__*/function () {
   return FilterCondition;
 }();
 
-const isLayerService = value => isObject(value) && "name" in value;
+const isLayerService = value => isObject(value) && 'name' in value;
 const getAttributeFromCondition = condition => {
-  const parts = condition.split(" ");
-  return parts[0].startsWith("(") ? parts[0].slice(1) : parts[0];
+  const parts = condition.split(' ');
+  return parts[0].startsWith('(') ? parts[0].slice(1) : parts[0];
 };
 const getExprFromCondition = (condition, partIndex) => {
   var _expr;
@@ -2512,13 +2511,13 @@ const getExprFromCondition = (condition, partIndex) => {
   let expr;
 
   if (partIndex) {
-    const parts = condition.split(" && ").map(part => part.slice(1, -1));
+    const parts = condition.split(' && ').map(part => part.slice(1, -1));
     expr = parts[partIndex - 1];
   } else {
     expr = condition;
   }
 
-  return (_expr = expr) == null ? void 0 : _expr.split(" ");
+  return (_expr = expr) == null ? void 0 : _expr.split(' ');
 };
 const getSignFromConditionPart = (condition, partIndex) => {
   var _getExprFromCondition;
@@ -2530,7 +2529,7 @@ const getValueFromConditionPart = (condition, partIndex) => {
 
   return (_getExprFromCondition2 = getExprFromCondition(condition, partIndex)) == null ? void 0 : _getExprFromCondition2[2];
 };
-const isRangeCondition = condition => condition.includes("(");
+const isRangeCondition = condition => (condition == null ? void 0 : condition.includes('(')) || false;
 const getSymbolParameterInfo = parameter => {
   return PARAMETER_INFOS[parameter] || DEFAULT_PARAMETER_INFO;
 };
@@ -2554,8 +2553,8 @@ const getRangeValues$1 = (_ref, isDouble, isDate, index) => {
 const formatRangeClassValue = (value, formatValue, index) => {
   var _value$attribute, _value$attribute2, _value$attribute3, _value$attribute4, _value$attribute5, _value$attribute6;
 
-  const isDouble = ((_value$attribute = value.attribute) == null ? void 0 : _value$attribute.type) === "Double";
-  const isDate = ((_value$attribute2 = value.attribute) == null ? void 0 : _value$attribute2.type) === "DateTime";
+  const isDouble = ((_value$attribute = value.attribute) == null ? void 0 : _value$attribute.type) === 'Double';
+  const isDate = ((_value$attribute2 = value.attribute) == null ? void 0 : _value$attribute2.type) === 'DateTime';
   const {
     from,
     to
@@ -2564,11 +2563,11 @@ const formatRangeClassValue = (value, formatValue, index) => {
   const formattedTo = formatValue ? formatValue((_value$attribute5 = value.attribute) == null ? void 0 : _value$attribute5.type, to, (_value$attribute6 = value.attribute) == null ? void 0 : _value$attribute6.stringFormat) : to;
 
   if (from === null) {
-    return "" + formattedTo + (!isDate ? " и менее" : "");
+    return "" + formattedTo + (!isDate ? ' и менее' : '');
   }
 
   if (to === null) {
-    return "" + (!isDate ? "более " : "") + formattedFrom;
+    return "" + (!isDate ? 'более ' : '') + formattedFrom;
   }
 
   return from === to ? "" + formattedFrom : formattedFrom + " - " + formattedTo;
@@ -2580,69 +2579,68 @@ const checkLayerHasLegend = layerInfo => {
     var _layerInfo$style;
 
     const paramValue = get((_layerInfo$style = layerInfo.style) == null ? void 0 : _layerInfo$style.symbol, param);
-    return (paramValue == null ? void 0 : paramValue.type) === "byAttribute";
+    return (paramValue == null ? void 0 : paramValue.type) === 'byAttribute';
   })) || false;
 };
 const getTitleFromCondition = condition => {
   var _parts$;
 
-  const parts = condition.split(" == ");
-  return (_parts$ = parts[1]) == null ? void 0 : _parts$.slice(1, -1);
+  const parts = condition == null ? void 0 : condition.split(' == ');
+  return (parts == null ? void 0 : (_parts$ = parts[1]) == null ? void 0 : _parts$.slice(1, -1)) || '';
 };
-
-function createValueTitle$1(paramValue, attribute, formatValue, index) {
+function createValueTitleFromCondition(paramValue, attribute, formatValue, index) {
+  if (!attribute) return '';
   if (paramValue.title) return paramValue.title;
   const value = {
     parameterValue: getParameterValue(paramValue.value),
     attribute
   };
   const sign = getSignFromConditionPart(paramValue.condition, 1);
-  const isFirstFrom = sign.includes(">");
+  const isFirstFrom = sign.includes('>');
   value.from = isFirstFrom ? getValueFromConditionPart(paramValue.condition, 1) : null;
-  value.to = paramValue.condition.includes(" && ") && isFirstFrom ? getValueFromConditionPart(paramValue.condition, 2) : !isFirstFrom ? getValueFromConditionPart(paramValue.condition, 1) : null;
+  value.to = paramValue.condition.includes(' && ') && isFirstFrom ? getValueFromConditionPart(paramValue.condition, 2) : !isFirstFrom ? getValueFromConditionPart(paramValue.condition, 1) : null;
   if (isRangeClass(value)) return formatRangeClassValue(value, formatValue, index);
   if (isUniqueClass(value)) return formatUniqueClassValue(value, formatValue);
-  return "";
+  return '';
 } // Основывается на http://cf.everpoint.ru/pages/viewpage.action?pageId=45024217 ->
 // пункт "Настраиваемые значения параметров символики в системе"
 // Для добавления подготовленных значений размеров символов нужно использовать константу PREPARED_SYMBOL_SIZES
 
-
 const DEFAULT_LEGEND_STYLES = {
   [0
   /* Point */
   ]: {
-    fillColor: "#00000047",
+    fillColor: '#00000047',
     strokeWidth: 1,
-    strokeColor: "#0000001f"
+    strokeColor: '#0000001f'
   },
   [1
   /* ImagePoint */
   ]: {
-    maskedColor: "#00000047"
+    maskedColor: '#00000047'
   },
   [2
   /* Line */
   ]: {
     stroke: {
       width: 2,
-      color: "#00000047"
+      color: '#00000047'
     }
   },
   [3
   /* Polygon */
   ]: {
     fill: {
-      color: "#00000000",
-      hatchColor: "#00000000"
+      color: '#00000000',
+      hatchColor: '#00000000'
     },
     stroke: {
       width: 1,
-      color: "#0000001f"
+      color: '#0000001f'
     }
   }
 };
-const SYMBOL_SIZE_PARAMETERS = ["size", "width", "height"]; // Основывается на http://cf.everpoint.ru/pages/viewpage.action?pageId=45024217 -> пункт "Библиотека символов"
+const SYMBOL_SIZE_PARAMETERS = ['size', 'width', 'height']; // Основывается на http://cf.everpoint.ru/pages/viewpage.action?pageId=45024217 -> пункт "Библиотека символов"
 
 const DEFAULT_LEGEND_SIZES = {
   circlePointSymbol: 8,
@@ -2672,16 +2670,16 @@ const updateSymbolParameter = (symbol, path, value) => symbolParameterWalker(()
 
 const createPointSymbol = (baseSymbol, parameter, classificationsParams, parameterValue) => {
   return updateSymbolParameter(_extends({}, baseSymbol, {
-    fillColor: getNonClassifiedParamValue(baseSymbol, "fillColor", classificationsParams, 0
+    fillColor: getNonClassifiedParamValue(baseSymbol, 'fillColor', classificationsParams, 0
     /* Point */
     ),
-    strokeColor: getNonClassifiedParamValue(baseSymbol, "strokeColor", classificationsParams, 0
+    strokeColor: getNonClassifiedParamValue(baseSymbol, 'strokeColor', classificationsParams, 0
     /* Point */
     ),
-    strokeWidth: getNonClassifiedParamValue(baseSymbol, "strokeWidth", classificationsParams, 0
+    strokeWidth: getNonClassifiedParamValue(baseSymbol, 'strokeWidth', classificationsParams, 0
     /* Point */
     ),
-    size: getNonClassifiedParamValue(baseSymbol, "size", classificationsParams, 0
+    size: getNonClassifiedParamValue(baseSymbol, 'size', classificationsParams, 0
     /* Point */
     ),
     offset: [0, 0]
@@ -2718,12 +2716,12 @@ const createImagePointSymbol = (baseSymbol, parameter, classificationsParams, pa
   let symbol = _extends({}, baseSymbol);
 
   if (isMaskedImageSymbol(symbol)) {
-    symbol.maskedColor = getNonClassifiedParamValue(baseSymbol, "maskedColor", classificationsParams, 1
+    symbol.maskedColor = getNonClassifiedParamValue(baseSymbol, 'maskedColor', classificationsParams, 1
     /* ImagePoint */
     );
   }
 
-  if (parameter === "height" || parameter === "width") {
+  if (parameter === 'height' || parameter === 'width') {
     const {
       height,
       width
@@ -2731,7 +2729,7 @@ const createImagePointSymbol = (baseSymbol, parameter, classificationsParams, pa
     symbol.height = height;
     symbol.width = width;
   } else {
-    symbol.width = getNonClassifiedParamValue(baseSymbol, "width", classificationsParams, 1
+    symbol.width = getNonClassifiedParamValue(baseSymbol, 'width', classificationsParams, 1
     /* ImagePoint */
     );
     symbol.height = symbol.width;
@@ -2744,12 +2742,12 @@ const createImagePointSymbol = (baseSymbol, parameter, classificationsParams, pa
 
 const createLineSymbol = (baseSymbol, parameter, classificationsParams, parameterValue) => {
   return updateSymbolParameter(_extends({}, baseSymbol, {
-    type: "polylineSymbol",
+    type: 'polylineSymbol',
     stroke: {
-      color: getNonClassifiedParamValue(baseSymbol, "stroke.color", classificationsParams, 2
+      color: getNonClassifiedParamValue(baseSymbol, 'stroke.color', classificationsParams, 2
       /* Line */
       ),
-      width: getNonClassifiedParamValue(baseSymbol, "stroke.width", classificationsParams, 2
+      width: getNonClassifiedParamValue(baseSymbol, 'stroke.width', classificationsParams, 2
       /* Line */
       )
     }
@@ -2759,18 +2757,18 @@ const createLineSymbol = (baseSymbol, parameter, classificationsParams, paramete
 const createPolygonSymbol = (baseSymbol, parameter, classificationsParams, parameterValue) => {
   return updateSymbolParameter(_extends({}, baseSymbol, {
     fill: {
-      color: getNonClassifiedParamValue(baseSymbol, "fill.color", classificationsParams, 3
+      color: getNonClassifiedParamValue(baseSymbol, 'fill.color', classificationsParams, 3
       /* Polygon */
       ),
-      hatchColor: getNonClassifiedParamValue(baseSymbol, "fill.hatchColor", classificationsParams, 3
+      hatchColor: getNonClassifiedParamValue(baseSymbol, 'fill.hatchColor', classificationsParams, 3
       /* Polygon */
       )
     },
     stroke: {
-      color: getNonClassifiedParamValue(baseSymbol, "stroke.color", classificationsParams, 3
+      color: getNonClassifiedParamValue(baseSymbol, 'stroke.color', classificationsParams, 3
       /* Polygon */
       ),
-      width: getNonClassifiedParamValue(baseSymbol, "stroke.width", classificationsParams, 3
+      width: getNonClassifiedParamValue(baseSymbol, 'stroke.width', classificationsParams, 3
       /* Polygon */
       )
     }
@@ -2780,29 +2778,37 @@ const createPolygonSymbol = (baseSymbol, parameter, classificationsParams, param
 const createH3Symbol = (baseSymbol, parameter, classificationsParams, parameterValue) => {
   return updateSymbolParameter(_extends({}, baseSymbol, {
     fill: {
-      color: getNonClassifiedParamValue(baseSymbol, "fill.color", classificationsParams, 3
+      color: getNonClassifiedParamValue(baseSymbol, 'fill.color', classificationsParams, 3
       /* Polygon */
       )
     },
     stroke: {
-      color: getNonClassifiedParamValue(baseSymbol, "stroke.color", classificationsParams, 3
+      color: getNonClassifiedParamValue(baseSymbol, 'stroke.color', classificationsParams, 3
       /* Polygon */
       ),
-      width: getNonClassifiedParamValue(baseSymbol, "stroke.width", classificationsParams, 3
+      width: getNonClassifiedParamValue(baseSymbol, 'stroke.width', classificationsParams, 3
       /* Polygon */
       )
     }
   }), parameter, parameterValue);
 };
 
+const createClusterSymbol = (baseSymbol, parameter, classificationsParams, parameterValue) => {
+  return updateSymbolParameter(_extends({}, baseSymbol, {
+    fillColor: getNonClassifiedParamValue(baseSymbol, 'fillColor', classificationsParams, 0
+    /* Point */
+    )
+  }), parameter, parameterValue);
+};
+
 const createLegendSymbol = (parameterValue, parameter, classificationsParams, baseSymbol) => {
   if (isParameterValueSymbol(parameterValue)) {
     return parameterValue;
   }
-  /* if (isClusterSymbol(baseSymbol)) {
-    return createClusterSymbol(baseSymbol, parameter, classificationsParams, parameterValue);
-  }*/
 
+  if (isClusterSymbol(baseSymbol)) {
+    return createClusterSymbol(baseSymbol, parameter, classificationsParams, parameterValue);
+  }
 
   if (isSizableSymbol(baseSymbol)) {
     return createPointSymbol(baseSymbol, parameter, classificationsParams, parameterValue);
@@ -2894,7 +2900,7 @@ const getMinimizedLegendValues = (attribute, classified, formatValue, index, oth
       const to = getValueFromConditionPart(paramValue.condition, 2);
       result.from = from ? isNumeric(from) ? +from : formatDate(from) : null;
       result.to = to ? isNumeric(to) ? +to : formatDate(to) : null;
-      result.title = createValueTitle$1(paramValue, attribute, formatValue, index);
+      result.title = createValueTitleFromCondition(paramValue, attribute, formatValue, index);
       return result;
     }
 
@@ -2920,7 +2926,7 @@ const getMaximizedLegendValues = (attribute, param, params, classified, symbol,
     const result = {
       symbol: createLegendSymbol(paramValue.value, param, params, symbol)
     };
-    result.title = isRangeCondition(paramValue.condition) ? createValueTitle$1(paramValue, attribute, formatValue, sectionIndex) : getTitleFromCondition(paramValue.condition);
+    result.title = isRangeCondition(paramValue.condition) ? createValueTitleFromCondition(paramValue, attribute, formatValue, sectionIndex) : getTitleFromCondition(paramValue.condition);
     result.hiddenCondition = createHiddenCondition(attribute.name, attribute.type, getClassificationValue(paramValue.value, result.title, new ClassificationCondition(classified.values[index].condition)));
     return result;
   });
@@ -2932,12 +2938,27 @@ const getMaximizedLegendValues = (attribute, param, params, classified, symbol,
   return [...items, other];
 };
 const getClassified = layerInfo => {
+  var _layerInfo$style2, _layerInfo$style2$chi;
+
+  if ((_layerInfo$style2 = layerInfo.style) != null && (_layerInfo$style2$chi = _layerInfo$style2.children) != null && _layerInfo$style2$chi.length) {
+    var _layerInfo$style3;
+
+    return {
+      symbol: {
+        type: 'byAttribute',
+        defaultValue: layerInfo.style.symbol,
+        title: null,
+        values: (_layerInfo$style3 = layerInfo.style) == null ? void 0 : _layerInfo$style3.children
+      }
+    };
+  }
+
   const classifyParams = SYMBOL_CLASSIFICATION[layerInfo.geometryType];
   return classifyParams == null ? void 0 : classifyParams.reduce((result, classified) => {
-    var _layerInfo$style2;
+    var _layerInfo$style4;
 
-    const param = get((_layerInfo$style2 = layerInfo.style) == null ? void 0 : _layerInfo$style2.symbol, classified);
-    return (param == null ? void 0 : param.type) === "byAttribute" ? _extends({}, result, {
+    const param = get((_layerInfo$style4 = layerInfo.style) == null ? void 0 : _layerInfo$style4.symbol, classified);
+    return (param == null ? void 0 : param.type) === 'byAttribute' ? _extends({}, result, {
       [classified]: param
     }) : result;
   }, {});
@@ -2975,7 +2996,7 @@ const getLegendSymbolSize = symbol => {
   }
 
   if (isPolylineSymbols(symbol)) {
-    size = getParameterValue(getParameterFromSymbol(symbol, "stroke.width"));
+    size = getParameterValue(getParameterFromSymbol(symbol, 'stroke.width'));
   }
 
   return Math.max(DEFAULT_LEGEND_SYMBOL_SIZE, size);
@@ -2987,13 +3008,13 @@ const serializeSvgPointSymbol = symbol => {
   const figureFillColor = ((_symbol$figure = symbol.figure) == null ? void 0 : _symbol$figure.fillColor) || null;
   const bgFillColor = ((_symbol$background2 = symbol.background) == null ? void 0 : _symbol$background2.fillColor) || null;
   return _extends({
-    type: "svgPointSymbol",
+    type: 'svgPointSymbol',
     size: symbol.size,
     offset: symbol.offset,
     angle: symbol.angle
   }, bgFillColor ? {
     background: {
-      id: "symbol-bg",
+      id: 'symbol-bg',
       fillColor: bgFillColor,
       strokeColor: ((_symbol$background3 = symbol.background) == null ? void 0 : _symbol$background3.strokeColor) || null,
       strokeWidth: ((_symbol$background4 = symbol.background) == null ? void 0 : _symbol$background4.strokeWidth) || null,
@@ -3001,35 +3022,35 @@ const serializeSvgPointSymbol = symbol => {
     }
   } : {}, figureFillColor ? {
     figure: {
-      id: "symbol-figure",
+      id: 'symbol-figure',
       fillColor: figureFillColor
     }
   } : {});
 };
-const SIZE_PARAMETERS = ["size", "height", "strokeWidth", "stroke.width"];
+const SIZE_PARAMETERS = ['size', 'height', 'strokeWidth', 'stroke.width'];
 const isSizeClassification = parameter => SIZE_PARAMETERS.includes(parameter);
 const getServiceConfiguration = layer => {
   const emptyServiceConfiguration = {
-    name: ""
+    name: ''
   };
-  if (!isLayerService(layer) || !("configuration" in layer)) return emptyServiceConfiguration;
+  if (!isLayerService(layer) || !('configuration' in layer)) return emptyServiceConfiguration;
   return _extends({}, emptyServiceConfiguration, layer.configuration || {});
 };
 /** default attribute name which use for geometry info */
 
-const GEOMETRY_ATTRIBUTE = "geometry";
+const GEOMETRY_ATTRIBUTE = 'geometry';
 /** default attribute name which contains unique id info */
 
-const DEFAULT_ID_ATTRIBUTE_NAME = "gid";
+const DEFAULT_ID_ATTRIBUTE_NAME = 'gid';
 const getAttributesConfiguration = layer => {
   const serviceConfiguration = getServiceConfiguration(layer);
   const emptyAttributesConfiguration = {
     geometryAttribute: GEOMETRY_ATTRIBUTE,
     idAttribute: DEFAULT_ID_ATTRIBUTE_NAME,
-    tableName: ""
+    tableName: ''
   };
 
-  if (!serviceConfiguration || !("attributesConfiguration" in serviceConfiguration)) {
+  if (!serviceConfiguration || !('attributesConfiguration' in serviceConfiguration)) {
     return emptyAttributesConfiguration;
   }
 
@@ -3045,10 +3066,10 @@ const getLayerDefinition = layer => {
     geometryAttribute: geometryAttribute,
     idAttribute,
     geometryType: api.GeometryType.Unknown,
-    titleAttribute: ""
+    titleAttribute: ''
   };
 
-  if (!isLayerService(layer) || !("layerDefinition" in layer)) {
+  if (!isLayerService(layer) || !('layerDefinition' in layer)) {
     return emptyLayerDefinition;
   }
 
@@ -3063,7 +3084,6 @@ function getAttributeType(layer, attributeName) {
   const attribute = attributes[attributeName];
   return attribute ? attribute.type : api.AttributeType.Unknown;
 }
-
 const getClassificationValue = (parameterValue, title, condition) => _extends({
   parameterValue,
   title
@@ -3108,13 +3128,14 @@ const DEFAULT_LEGEND_SYMBOL_SIZE = 26;
 const EXTRA_BORDER_SIZE = 4;
 const DEFAULT_SYMBOL_SIZE = 20;
 const DEFAULT_SYMBOL_WITH_BG_SIZE = 24;
-const DEFAULT_SYMBOL_FILL_COLOR = "rgba(0, 163, 245, 1)";
-const DEFAULT_SYMBOL_STROKE_COLOR = "rgb(255, 255, 255)";
+const DEFAULT_SYMBOL_FILL_COLOR = 'rgba(0, 163, 245, 1)';
+const DEFAULT_SYMBOL_STROKE_COLOR = 'rgb(255, 255, 255)';
 const DEFAULT_SYMBOL_OFFSET = [0, 0];
+const DEFAULT_CLUSTER_SVG = "\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 56 56\" width=\"56px\" height=\"56px\">\n  <circle cx=\"28\" cy=\"28\" r=\"22\" fill=\"#00AAFF\" stroke=\"#00AAFF\" stroke-opacity=\"0.28\" stroke-width=\"12\" id=\"symbol-bg\" />\n</svg>\n";
 const SYMBOL_CLASSIFICATION = {
-  [api.GeometryType.Polygon]: ["fill.color", "stroke.color", "stroke.width"],
-  [api.GeometryType.Polyline]: ["stroke.color", "stroke.width"],
-  [api.GeometryType.Point]: ["angle", "background.fillColor", "background.strokeColor", "background.strokeWidth", "figure.fillColor", "size"]
+  [api.GeometryType.Polygon]: ['fill.color', 'stroke.color', 'stroke.width'],
+  [api.GeometryType.Polyline]: ['stroke.color', 'stroke.width'],
+  [api.GeometryType.Point]: ['angle', 'size', 'fill.color', 'fillColor', 'background.fillColor', 'background.strokeColor', 'background.strokeWidth', 'figure.fillColor', 'singleObjectSymbol.figure.fillColor', 'singleObjectSymbol.background.fillColor']
 };
 const SYMBOL_LIMITS = {
   SIZE_MIN: 1,
@@ -3157,22 +3178,22 @@ const PARAMETER_INFOS = {
   })
 };
 const OPERATOR_CONDITION_REMAP = {
-  [exports.ComparisonOperator.Equals]: "==",
-  [exports.ComparisonOperator.NotEquals]: "!=",
-  [exports.ComparisonOperator.GreaterThan]: ">",
-  [exports.ComparisonOperator.GreaterOrEquals]: ">=",
-  [exports.ComparisonOperator.LessThan]: "<",
-  [exports.ComparisonOperator.LessOrEquals]: "<=",
-  [exports.ComparisonOperator.Filled]: "!=",
-  [exports.ComparisonOperator.Empty]: "==",
-  [exports.ComparisonOperator.Contains]: "==",
-  [exports.ComparisonOperator.NotContains]: "!=",
-  [exports.ComparisonOperator.StartsWith]: "==",
-  [exports.ComparisonOperator.NotStartsWith]: "!=",
-  [exports.ComparisonOperator.EndsWith]: "==",
-  [exports.ComparisonOperator.NotEndsWith]: "!=",
-  [exports.ComparisonOperator.Between]: "between",
-  [exports.ComparisonOperator.Outside]: "!between"
+  [exports.ComparisonOperator.Equals]: '==',
+  [exports.ComparisonOperator.NotEquals]: '!=',
+  [exports.ComparisonOperator.GreaterThan]: '>',
+  [exports.ComparisonOperator.GreaterOrEquals]: '>=',
+  [exports.ComparisonOperator.LessThan]: '<',
+  [exports.ComparisonOperator.LessOrEquals]: '<=',
+  [exports.ComparisonOperator.Filled]: '!=',
+  [exports.ComparisonOperator.Empty]: '==',
+  [exports.ComparisonOperator.Contains]: '==',
+  [exports.ComparisonOperator.NotContains]: '!=',
+  [exports.ComparisonOperator.StartsWith]: '==',
+  [exports.ComparisonOperator.NotStartsWith]: '!=',
+  [exports.ComparisonOperator.EndsWith]: '==',
+  [exports.ComparisonOperator.NotEndsWith]: '!=',
+  [exports.ComparisonOperator.Between]: 'between',
+  [exports.ComparisonOperator.Outside]: '!between'
 };
 const BASE_OPERATORS = [exports.ComparisonOperator.Equals, exports.ComparisonOperator.NotEquals];
 const CONTAINS_OPERATORS = [exports.ComparisonOperator.Contains, exports.ComparisonOperator.NotContains];
@@ -5790,7 +5811,7 @@ const Fullscreen = () => {
   }));
 };
 
-var _templateObject$4, _templateObject2$4, _templateObject3$3, _templateObject4$3, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36;
+var _templateObject$4, _templateObject2$4, _templateObject3$3, _templateObject4$3, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37;
 const MapLegendDescription = /*#__PURE__*/styled__default.div(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: 0.75rem;\n"])));
 const ItemText = /*#__PURE__*/styled__default.div(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-width: calc(100% - 2rem);\n  font: ", ";\n"])), _ref => {
   let {
@@ -5800,18 +5821,18 @@ const ItemText = /*#__PURE__*/styled__default.div(_templateObject2$4 || (_templa
   } = _ref;
   return fonts.description;
 });
-const ItemSeparator = /*#__PURE__*/styled__default.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  :after {\n    content: \"-\";\n    margin: 0 0.5rem;\n    font-size: 0.75rem;\n  }\n"])));
-const SymbolContainer = /*#__PURE__*/styled__default("span")(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  min-width: 16px;\n  margin-right: 0.5rem;\n"])));
+const ItemSeparator = /*#__PURE__*/styled__default.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  :after {\n    content: '-';\n    margin: 0 0.5rem;\n    font-size: 0.75rem;\n  }\n"])));
+const SymbolContainer = /*#__PURE__*/styled__default('span')(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  min-width: 16px;\n  margin-right: 0.5rem;\n"])));
 const ClassifiedItem = /*#__PURE__*/styled__default.div(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  cursor: ", ";\n  pointer-events: ", ";\n\n  :not(:last-of-type) {\n    margin-bottom: 0.25rem;\n  }\n\n  ", ", ", " {\n    transition: opacity 150ms;\n  }\n\n  ", " {\n    opacity: ", ";\n  }\n\n  ", " {\n    opacity: ", ";\n  }\n\n  :hover {\n    ", ", ", " {\n      opacity: 1;\n    }\n  }\n"])), _ref2 => {
   let {
     isClusterFillColor
   } = _ref2;
-  return isClusterFillColor ? "default" : "pointer";
+  return isClusterFillColor ? 'default' : 'pointer';
 }, _ref3 => {
   let {
     isClusterFillColor
   } = _ref3;
-  return isClusterFillColor ? "none" : "auto";
+  return isClusterFillColor ? 'none' : 'auto';
 }, ItemText, SymbolContainer, ItemText, _ref4 => {
   let {
     isHidden
@@ -5845,7 +5866,7 @@ const MaximizedLegendContainer = /*#__PURE__*/styled__default.div(_templateObjec
   let {
     isShown
   } = _ref8;
-  return isShown ? "relative" : "absolute";
+  return isShown ? 'relative' : 'absolute';
 }, _ref9 => {
   let {
     isShown
@@ -5855,7 +5876,7 @@ const MaximizedLegendContainer = /*#__PURE__*/styled__default.div(_templateObjec
   let {
     isShown
   } = _ref10;
-  return isShown ? "visible" : "hidden";
+  return isShown ? 'visible' : 'hidden';
 });
 const MinimizedLegendContainer = /*#__PURE__*/styled__default(MaximizedLegendContainer)(_templateObject13$1 || (_templateObject13$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: calc(100% - 1.5rem);\n  padding-right: 1.5rem;\n"])));
 const MapLegendSectionContainer = /*#__PURE__*/styled__default.div(_templateObject14$1 || (_templateObject14$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n\n  :not(:last-child) {\n    margin-bottom: 1rem;\n  }\n"])));
@@ -5870,7 +5891,7 @@ const MapLegendSectionItems = /*#__PURE__*/styled__default.div(_templateObject15
   let {
     isExpanded
   } = _ref12;
-  return isExpanded ? "none" : "hidden";
+  return isExpanded ? 'none' : 'hidden';
 });
 const MapLegendValueDescr = /*#__PURE__*/styled__default.div(_templateObject16$1 || (_templateObject16$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  min-height: 1rem;\n  margin-bottom: 0.25rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  line-height: 1rem;\n"])));
 
@@ -5879,7 +5900,7 @@ const SizeLegendItemMixin = function SizeLegendItemMixin(value) {
     value = 0;
   }
 
-  return styled.css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  display: flex;\n  align-items: flex-end;\n  flex: none;\n  height: inherit;\n  width: inherit;\n  margin: 0 auto;\n  background: none;\n  border: none;\n\n  :after {\n    content: \"\";\n    display: flex;\n    border: 1px rgba(48, 69, 79, 0.28) solid;\n    border-radius: 50%;\n    margin: 0 0 0 -", "px;\n    width: ", "px;\n    height: ", "px;\n  }\n"])), value / 2, value, value);
+  return styled.css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  display: flex;\n  align-items: flex-end;\n  flex: none;\n  height: inherit;\n  width: inherit;\n  margin: 0 auto;\n  background: none;\n  border: none;\n\n  :after {\n    content: '';\n    display: flex;\n    border: 1px rgba(48, 69, 79, 0.28) solid;\n    border-radius: 50%;\n    margin: 0 0 0 -", "px;\n    width: ", "px;\n    height: ", "px;\n  }\n"])), value / 2, value, value);
 };
 
 const StrokeWidthLegendItemMixin = function StrokeWidthLegendItemMixin(value) {
@@ -5887,7 +5908,7 @@ const StrokeWidthLegendItemMixin = function StrokeWidthLegendItemMixin(value) {
     value = 0;
   }
 
-  return styled.css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  background: none;\n  border: none;\n  display: flex;\n  align-items: center;\n  flex: none;\n  width: calc(100% - 2rem);\n  height: ", "px;\n  margin: 0 0 0.25rem 0;\n  padding-left: 2rem;\n  font-size: 0.75rem;\n  \n  :first-child, :last-child {\n    height: auto;\n  }\n\n  :after {\n    content: \"\";\n    position: absolute;\n    top: 50%;\n    left: 0;\n    width: 1.5rem;\n    height: ", "px;\n    margin-top: -", "px;\n    background: rgb(224, 224, 224);\n  }\n"])), value, value, Math.round(value / 2));
+  return styled.css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  background: none;\n  border: none;\n  display: flex;\n  align-items: center;\n  flex: none;\n  width: calc(100% - 2rem);\n  height: ", "px;\n  margin: 0 0 0.25rem 0;\n  padding-left: 2rem;\n  font-size: 0.75rem;\n\n  :first-child,\n  :last-child {\n    height: auto;\n  }\n\n  :after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 0;\n    width: 1.5rem;\n    height: ", "px;\n    margin-top: -", "px;\n    background: rgb(224, 224, 224);\n  }\n"])), value, value, Math.round(value / 2));
 };
 
 const StrokeColorLegendItemMixin = /*#__PURE__*/styled.css(_templateObject19 || (_templateObject19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 0.5rem;\n  width: 1.5rem;\n"])));
@@ -5895,12 +5916,12 @@ const MapLegendItem = /*#__PURE__*/styled__default.div(_templateObject20 || (_te
   let {
     parameter
   } = _ref13;
-  return isParameterType(["strokeColor", "stroke.color"], parameter) ? 0.25 : 1;
+  return isParameterType(['strokeColor', 'stroke.color'], parameter) ? 0.25 : 1;
 }, _ref14 => {
   let {
     value
   } = _ref14;
-  return typeof value === "number" ? "none" : value;
+  return typeof value === 'number' ? 'none' : value;
 }, _ref15 => {
   let {
     isHidden
@@ -5911,13 +5932,13 @@ const MapLegendItem = /*#__PURE__*/styled__default.div(_templateObject20 || (_te
     value,
     parameter
   } = _ref16;
-  return isParameterType("size", parameter) && SizeLegendItemMixin(value);
+  return isParameterType('size', parameter) && SizeLegendItemMixin(value);
 }, _ref17 => {
   let {
     value,
     parameter
   } = _ref17;
-  return isParameterType(["strokeWidth", "stroke.width"], parameter) && StrokeWidthLegendItemMixin(value);
+  return isParameterType(['strokeWidth', 'stroke.width'], parameter) && StrokeWidthLegendItemMixin(value);
 });
 const MapLegendOther = /*#__PURE__*/styled__default(MapLegendItem)(_templateObject21 || (_templateObject21 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  flex: none;\n  position: relative;\n  width: 1rem;\n  margin-left: 0.25rem;\n  border-radius: 0.125rem;\n"])));
 const SizeLegendItemsMixin = /*#__PURE__*/styled.css(_templateObject22 || (_templateObject22 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 2rem;\n  height: 2rem;\n  margin: 0 auto;\n\n  ", " {\n    width: auto;\n    margin-left: 0;\n  }\n"])), MapLegendOther);
@@ -5937,7 +5958,7 @@ const SingleLegendItemsMixin = /*#__PURE__*/styled.css(_templateObject30 || (_te
   let {
     parameter
   } = _ref19;
-  return isParameterType(["strokeColor", "stroke.color"], parameter) && StrokeColorLegendItemMixin;
+  return isParameterType(['strokeColor', 'stroke.color'], parameter) && StrokeColorLegendItemMixin;
 });
 const MapLegendItems = /*#__PURE__*/styled__default.div(_templateObject31 || (_templateObject31 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  border-radius: 0.125rem;\n\n  ", ";\n  ", ";\n  ", ";\n"])), _ref20 => {
   let {
@@ -5959,7 +5980,8 @@ const MapLegendItemsContainer = /*#__PURE__*/styled__default.div(_templateObject
 const MapLegendValues = /*#__PURE__*/styled__default.div(_templateObject33 || (_templateObject33 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  margin-top: 0.5rem;\n  font-size: 0.75rem;\n  color: rgba(48, 69, 79, 0.65);\n"])));
 const MapLegendValuesRange = /*#__PURE__*/styled__default.div(_templateObject34 || (_templateObject34 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  width: calc(100% - 1.25rem);\n\n  div {\n    flex: 1;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n\n    :first-child {\n      margin-right: 0.5rem;\n    }\n\n    :last-child {\n      margin-left: 0.5rem;\n      text-align: right;\n    }\n  }\n"])));
 const MapLegendValuesOther = /*#__PURE__*/styled__default(MapLegendOther)(_templateObject35 || (_templateObject35 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n  border: 0;\n  overflow: visible;\n"])));
-const MapLegendExpandButton = /*#__PURE__*/styled__default.div(_templateObject36 || (_templateObject36 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  margin-top: 0.1rem;\n  font-size: 0.625rem;\n  color: #1FB3AA;\n"])));
+const MapLegendExpandButton = /*#__PURE__*/styled__default.div(_templateObject36 || (_templateObject36 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  margin-top: 0.1rem;\n  font-size: 0.625rem;\n  color: #1fb3aa;\n"])));
+const ClusterLegendContainer = /*#__PURE__*/styled__default.div(_templateObject37 || (_templateObject37 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: -0.9rem;\n  transform: scale(0.5);\n"])));
 
 const getValueFromLegendTitle = (title, minOrMax) => {
   if (title.includes(" - ")) {
@@ -6112,7 +6134,7 @@ const useSvgSymbol = (symbol, skipOffset) => {
 
 var _templateObject$5, _templateObject2$5;
 const SvgSymbolContainer = /*#__PURE__*/styled__default.div(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
-const SvgSymbolLabel = /*#__PURE__*/styled__default.div(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: #fff;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), _ref => {
+const SvgSymbolLabel = /*#__PURE__*/styled__default.div(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: #fff;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  line-height: 0;\n"])), _ref => {
   let {
     fontSettings
   } = _ref;
@@ -6136,7 +6158,7 @@ const SvgSymbolLabel = /*#__PURE__*/styled__default.div(_templateObject2$5 || (_
   let {
     fontSettings
   } = _ref5;
-  return !!(fontSettings != null && fontSettings.fontSize) && "font-size: " + (typeof fontSettings.fontSize === "string" ? fontSettings.fontSize : fontSettings.fontSize + "px");
+  return !!(fontSettings != null && fontSettings.fontSize) && "font-size: " + (typeof fontSettings.fontSize === 'string' ? fontSettings.fontSize : fontSettings.fontSize + "px");
 }, _ref6 => {
   let {
     fontSettings
@@ -6219,24 +6241,48 @@ const SymbolByType = _ref => {
   }
 };
 
+const ClusterSymbolPreview = _ref => {
+  var _symbol$labelSymbol;
+
+  let {
+    symbol,
+    size = 56,
+    fontSize = '1.25rem'
+  } = _ref;
+  const svgSymbol = {
+    type: 'svgPointSymbol',
+    size,
+    offset: [0, 0],
+    angle: 0,
+    background: {
+      id: 'symbol-bg',
+      fillColor: getParameterValue(symbol.fillColor),
+      strokeColor: symbol.strokeColor,
+      strokeWidth: 6,
+      type: 'circle'
+    }
+  };
+  return React__default.createElement(SvgSymbol, {
+    svg: DEFAULT_CLUSTER_SVG,
+    symbol: svgSymbol,
+    text: '99',
+    fontSettings: _extends({}, symbol.labelSymbol, {
+      fontSize: fontSize || ((_symbol$labelSymbol = symbol.labelSymbol) == null ? void 0 : _symbol$labelSymbol.fontSize)
+    })
+  });
+};
+
 const LegendSymbolRenderer = /*#__PURE__*/React.memo(_ref => {
   let {
     symbol
   } = _ref;
 
-  /* return isClusterSymbol(symbol) ? (
-    <ClusterLegendContainer>
-      <ClusterSymbolPreview symbol={symbol as ClusterSymbolDc} />
-    </ClusterLegendContainer>
-  ) : (
-    <SymbolByType
-      symbol={deserializeSymbol(symbol)}
-      size={getLegendSymbolSize(symbol) || DEFAULT_LEGEND_SYMBOL_SIZE}
-      type={symbol.type}
-      svg={(symbol as SvgPointSymbol).data}
-      skipOffset
-    />
-  );*/
+  if (isClusterSymbol(symbol)) {
+    return React__default.createElement(ClusterLegendContainer, null, React__default.createElement(ClusterSymbolPreview, {
+      symbol: symbol
+    }));
+  }
+
   return React__default.createElement(SymbolByType, {
     symbol: deserializeSymbol(symbol),
     size: getLegendSymbolSize(symbol) || DEFAULT_LEGEND_SYMBOL_SIZE,
@@ -6246,6 +6292,46 @@ const LegendSymbolRenderer = /*#__PURE__*/React.memo(_ref => {
   });
 });
 
+const isHiddenLegend = (hiddenCondition, hiddenLegends) => !!(hiddenLegends != null && hiddenLegends.includes(hiddenCondition));
+
+const renderColumn = (column, index) => {
+  const dateTime = column.split(' ');
+  return React__default.createElement(React.Fragment, {
+    key: index
+  }, React__default.createElement(ItemText, {
+    title: column
+  }, dateTime[0], React__default.createElement(MapLegendDescription, null, dateTime[1])), index === 0 && React__default.createElement(ItemSeparator, null));
+};
+
+const getLegendText = _ref => {
+  let {
+    title,
+    index,
+    isDate
+  } = _ref;
+
+  if (!title) {
+    return React__default.createElement(ItemText, null, "\u0414\u0440\u0443\u0433\u043E\u0435");
+  }
+
+  const columns = title == null ? void 0 : title.split(' - ');
+  const isSingleColumn = (columns == null ? void 0 : columns.length) === 1;
+
+  if (!isDate || index && isSingleColumn) {
+    return React__default.createElement(ItemText, {
+      title: title
+    }, title);
+  }
+
+  if (!index && isSingleColumn) {
+    return React__default.createElement(React__default.Fragment, null, React__default.createElement(ItemText, {
+      title: "\u221E"
+    }, "\u221E"), React__default.createElement(ItemSeparator, null), renderColumn(title));
+  }
+
+  return React__default.createElement(React__default.Fragment, null, columns.map(renderColumn));
+};
+
 const MaximizedLegend = _ref => {
   let {
     innerRef,
@@ -6259,45 +6345,11 @@ const MaximizedLegend = _ref => {
     hiddenLegends,
     toggleHiddenLegend
   } = _ref;
-  const {
-    t
-  } = reactI18next.useTranslation("common");
-  const isDate = attributeType === "DateTime";
-  const isSize = isParameterType("size", parameter);
-  const isStrokeWidth = isParameterType(["strokeWidth", "stroke.width"], parameter);
-  const isStrokeColor = isParameterType(["strokeColor", "stroke.color"], parameter);
+  const isDate = attributeType === 'DateTime';
+  const isSize = isParameterType('size', parameter);
+  const isStrokeWidth = isParameterType(['strokeWidth', 'stroke.width'], parameter);
+  const isStrokeColor = isParameterType(['strokeColor', 'stroke.color'], parameter);
   const parameterValue = React.useMemo(() => get(sectionSymbol, parameter), [sectionSymbol, parameter]);
-  const renderColumn = React.useCallback((column, index) => {
-    const dateTime = column.split(" ");
-    return React__default.createElement(React.Fragment, {
-      key: index
-    }, React__default.createElement(ItemText, {
-      title: column
-    }, dateTime[0], React__default.createElement(MapLegendDescription, null, dateTime[1])), index === 0 && React__default.createElement(ItemSeparator, null));
-  }, []);
-  const renderItemText = React.useCallback((title, index) => {
-    if (!title) {
-      return React__default.createElement(ItemText, null, t("classification.other"));
-    }
-
-    const columns = title == null ? void 0 : title.split(" - ");
-    const isSingleColumn = (columns == null ? void 0 : columns.length) === 1;
-
-    if (!isDate || index && isSingleColumn) {
-      return React__default.createElement(ItemText, {
-        title: title
-      }, title);
-    }
-
-    if (!index && isSingleColumn) {
-      return React__default.createElement(React__default.Fragment, null, React__default.createElement(ItemText, {
-        title: "\u221E"
-      }, "\u221E"), React__default.createElement(ItemSeparator, null), renderColumn(title));
-    }
-
-    return React__default.createElement(React__default.Fragment, null, columns.map(renderColumn));
-  }, [isDate, renderColumn, t]);
-  const isHidden = React.useCallback(hiddenCondition => !!(hiddenLegends != null && hiddenLegends.includes(hiddenCondition)), [hiddenLegends]);
   const renderLegend = React.useCallback((_ref2, index) => {
     var _parameterValue$value;
 
@@ -6310,7 +6362,7 @@ const MaximizedLegend = _ref => {
     const isClusterFillColor$1 = isClusterFillColor(symbol, parameter);
     return React__default.createElement(ClassifiedItem, {
       key: sectionIndex + title + index,
-      isHidden: isHidden(hiddenCondition),
+      isHidden: isHiddenLegend(hiddenCondition, hiddenLegends),
       isClusterFillColor: isClusterFillColor$1,
       onClick: () => toggleHiddenLegend == null ? void 0 : toggleHiddenLegend(layerName, hiddenCondition)
     }, isSize || isStrokeWidth || isStrokeColor ? React__default.createElement(MapLegendItems, {
@@ -6326,8 +6378,12 @@ const MaximizedLegend = _ref => {
       parameter: parameter
     })) : React__default.createElement(SymbolContainer, null, React__default.createElement(LegendSymbolRenderer, {
       symbol: isClusterFillColor$1 ? symbol : getExtractedSymbol(symbol, true)
-    })), renderItemText(title, index));
-  }, [isSize, isStrokeColor, isStrokeWidth, parameter, parameterValue == null ? void 0 : parameterValue.defaultValue, parameterValue == null ? void 0 : parameterValue.values, renderItemText, sectionIndex, hiddenLegends, toggleHiddenLegend]);
+    })), getLegendText({
+      title,
+      index,
+      isDate
+    }));
+  }, [parameter, sectionIndex, hiddenLegends, isSize, isStrokeWidth, isStrokeColor, parameterValue, isDate, toggleHiddenLegend, layerName]);
   return React__default.createElement(MaximizedLegendContainer, {
     ref: innerRef,
     isShown: isShown
@@ -6357,12 +6413,10 @@ const LegendSection = _ref => {
     formatValue,
     index
   } = _ref;
-  const {
-    t
-  } = reactI18next.useTranslation("common");
   const [isExpanded, toggleExpanded] = useToggle();
   const [maxRef, maxNode] = useNode();
   const [minRef, minNode] = useNode();
+  if (!attribute) return null;
   return React__default.createElement(MapLegendSectionContainer, null, React__default.createElement(MapLegendHeader, null, attribute.alias || attribute.name), React__default.createElement(LegendParameterDescription, {
     parameter: parameter
   }), React__default.createElement(MapLegendSectionItems, {
@@ -6379,47 +6433,115 @@ const LegendSection = _ref => {
     parameter: parameter,
     attributeType: attribute.type,
     index: index,
-    values: getMaximizedLegendValues(attribute, parameter, parameters, classified, symbol, formatValue, index, t("classification.other"))
+    values: getMaximizedLegendValues(attribute, parameter, parameters, classified, symbol, formatValue, index, 'Другое')
   }), React__default.createElement(MinimizedLegend, {
     innerRef: minRef,
     isShown: !isExpanded,
     hiddenLegends: hiddenLegends == null ? void 0 : hiddenLegends[layerName],
     parameter: parameter,
-    values: getMinimizedLegendValues(attribute, classified, formatValue, index, t("classification.other"))
+    values: getMinimizedLegendValues(attribute, classified, formatValue, index, 'Другое')
   })), React__default.createElement(MapLegendExpandButton, {
     onClick: toggleExpanded
-  }, t(isExpanded ? "toggleMenu" : "Развернуть")));
+  }, isExpanded ? 'Свернуть' : 'Развернуть'));
+};
+
+const getConditionAttribute = (attributes, condition) => {
+  if (!condition) return null;
+  const attributeName = getAttributeNameFromCondition(condition);
+  let attribute = attributes.find(_ref => {
+    let {
+      name
+    } = _ref;
+    return name === attributeName;
+  });
+
+  if (!attribute) {
+    if (attributeName === 'count') {
+      attribute = {
+        name: 'count',
+        alias: 'Количество',
+        type: api.AttributeType.Int32
+      };
+    } else {
+      return null;
+    }
+  }
+
+  return attribute;
 };
 
-const _excluded$3 = ["layerInfo"];
+const LegendChildren = _ref => {
+  var _layerInfo$style, _layerInfo$style$chil;
+
+  let {
+    layerInfo,
+    hiddenLegends,
+    toggleHiddenLegend,
+    formatValue
+  } = _ref;
+  if (!((_layerInfo$style = layerInfo.style) != null && (_layerInfo$style$chil = _layerInfo$style.children) != null && _layerInfo$style$chil.length)) return null;
+  const attributes = getLayerAttributes(layerInfo.layerDefinition);
+  return React__default.createElement(MapLegendContainer, null, layerInfo.style.children.map((paramValue, index) => {
+    var _getConditionAttribut;
+
+    const attribute = getConditionAttribute(attributes, paramValue.condition);
+    if (!attribute) return null;
+    const hiddenCondition = createHiddenCondition(attribute.name, attribute.type, getClassificationValue(paramValue.symbol, paramValue.title, new ClassificationCondition(paramValue.condition)));
+    const legendText = getLegendText({
+      title: isRangeCondition(paramValue.condition) ? createValueTitleFromCondition(paramValue, attribute, formatValue, index) : getTitleFromCondition(paramValue.condition),
+      index,
+      isDate: ((_getConditionAttribut = getConditionAttribute(attributes, paramValue.condition)) == null ? void 0 : _getConditionAttribut.type) === 'DateTime'
+    });
+    return React__default.createElement(ClassifiedItem, {
+      key: index,
+      isHidden: isHiddenLegend(hiddenCondition, hiddenLegends == null ? void 0 : hiddenLegends[layerInfo.name]),
+      onClick: () => toggleHiddenLegend == null ? void 0 : toggleHiddenLegend(layerInfo.name, hiddenCondition)
+    }, React__default.createElement(SymbolContainer, null, React__default.createElement(LegendSymbolRenderer, {
+      symbol: paramValue.symbol
+    })), legendText);
+  }));
+};
+
+const _excluded$3 = ["layerInfo", "formatValue", "hiddenLegends", "toggleHiddenLegend"];
 const Legend = /*#__PURE__*/React.memo(_ref => {
+  var _layerInfo$style, _layerInfo$style$chil;
+
   let {
-    layerInfo
+    layerInfo,
+    formatValue,
+    hiddenLegends,
+    toggleHiddenLegend
   } = _ref,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
+  if ((_layerInfo$style = layerInfo.style) != null && (_layerInfo$style$chil = _layerInfo$style.children) != null && _layerInfo$style$chil.length) {
+    return React__default.createElement(LegendChildren, {
+      layerInfo: layerInfo,
+      formatValue: formatValue,
+      hiddenLegends: hiddenLegends,
+      toggleHiddenLegend: toggleHiddenLegend
+    });
+  }
+
+  const attributes = getLayerAttributes(layerInfo.layerDefinition);
   const classified = getClassified(layerInfo);
   if (!classified) return null;
   const parameters = Object.keys(classified);
-  const attributes = getLayerAttributes(layerInfo.layerDefinition);
   return React__default.createElement(MapLegendContainer, null, Object.keys(classified).map((param, index) => {
-    var _classified$param$val, _layerInfo$style;
+    var _layerInfo$style2, _classified$param, _classified$param$val;
 
-    const attributeName = getAttributeNameFromCondition((_classified$param$val = classified[param].values[0]) == null ? void 0 : _classified$param$val.condition);
     return React__default.createElement(LegendSection, Object.assign({
       key: index,
       layerName: layerInfo.name,
-      symbol: (_layerInfo$style = layerInfo.style) == null ? void 0 : _layerInfo$style.symbol,
-      attribute: attributes.find(_ref2 => {
-        let {
-          name
-        } = _ref2;
-        return name === attributeName;
-      }),
+      symbol: (_layerInfo$style2 = layerInfo.style) == null ? void 0 : _layerInfo$style2.symbol,
+      attribute: getConditionAttribute(attributes, (_classified$param = classified[param]) == null ? void 0 : (_classified$param$val = _classified$param.values[0]) == null ? void 0 : _classified$param$val.condition),
       classified: classified[param],
       parameter: param,
       parameters: parameters,
-      index: index
+      index: index,
+      formatValue: formatValue,
+      hiddenLegends: hiddenLegends,
+      toggleHiddenLegend: toggleHiddenLegend
     }, rest));
   }));
 });
@@ -6840,8 +6962,10 @@ exports.ClassificationCondition = ClassificationCondition;
 exports.ClassificationManager = ClassificationManager;
 exports.ClassifiedItem = ClassifiedItem;
 exports.ClusterLayer = ClusterLayer;
+exports.ClusterLegendContainer = ClusterLegendContainer;
 exports.ClusterSymbol = ClusterSymbol;
 exports.CompoundIcon = CompoundIcon;
+exports.DEFAULT_CLUSTER_SVG = DEFAULT_CLUSTER_SVG;
 exports.DEFAULT_CRS = DEFAULT_CRS;
 exports.DEFAULT_ID_ATTRIBUTE_NAME = DEFAULT_ID_ATTRIBUTE_NAME;
 exports.DEFAULT_LEGEND_SIZES = DEFAULT_LEGEND_SIZES;
@@ -6978,6 +7102,7 @@ exports.createLegendSymbol = createLegendSymbol;
 exports.createOtherHiddenCondition = createOtherHiddenCondition;
 exports.createSvgGradient = createSvgGradient;
 exports.createValueTitle = createValueTitle;
+exports.createValueTitleFromCondition = createValueTitleFromCondition;
 exports.dateComparisonOperators = dateComparisonOperators;
 exports.defaultOffset = defaultOffset;
 exports.defineStrokeStylePreset = defineStrokeStylePreset;
@@ -7000,6 +7125,7 @@ exports.getAttributeNameFromCondition = getAttributeNameFromCondition;
 exports.getAttributeType = getAttributeType;
 exports.getAttributesConfiguration = getAttributesConfiguration;
 exports.getChildSymbols = getChildSymbols;
+exports.getClassificationValue = getClassificationValue;
 exports.getClassified = getClassified;
 exports.getCrs = getCrs;
 exports.getDashStylePreset = getDashStylePreset;