@evergis/react 3.1.19 → 3.1.21

package/dist/react.esm.js

@@ -3719,17 +3719,19 @@ const formatNumberValue = (stringFormat, value, type, noUnits = false) => {
 };
 const formatAttributeValue = ({ t, type, value, stringFormat, noUnits = false }) => {
     if (type === AttributeType.Point) {
-        if (!(stringFormat && stringFormat.format) || !value)
+        if (!stringFormat?.format || !value)
             return null;
         const { coordinates } = value;
         return formatPointValue({ t, stringFormat, value: coordinates });
     }
     if (type === AttributeType.DateTime) {
-        if (!(stringFormat && stringFormat.format) || !value)
+        if (!stringFormat?.format || !value)
             return null;
         return formatDateValue(stringFormat, value);
     }
     if (numberFormatTypes.includes(type) && !isNaN(value)) {
+        if (!stringFormat?.format)
+            return value.toString();
         return formatNumberValue(stringFormat, value, type, noUnits);
     }
     if (type === AttributeType.Json) {
@@ -6465,16 +6467,22 @@ const RoundedBackgroundContainer = memo(({ type, elementConfig, feature, renderE
     });
     const { options, style, children } = elementConfig || {};
     const { maxLength, center, fontColor, innerTemplateStyle, inlineUnits, big, bigIcon, hideEmpty, colorAttribute } = options || {};
+    const iconElement = children?.find(({ id }) => id === "icon");
     const aliasElement = children?.find(({ id }) => id === "alias");
     const unitsElement = children?.find(({ id }) => id === "units");
     const valueElement = children?.find(({ id }) => id === "value");
     const value = renderElement({ id: "value" });
     const color = useMemo(() => attributes?.find(({ name }) => name === colorAttribute)?.value || fontColor, [attributes, colorAttribute, fontColor]);
+    const renderIcon = useMemo(() => {
+        if (!iconElement)
+            return null;
+        return (jsx(FlexSpan, { width: iconElement.options?.width || "1rem", alignItems: "center", mr: "0.5rem", children: renderElement({ id: "icon", wrap: false }) }));
+    }, [iconElement, renderElement]);
     const renderAlias = useMemo(() => (jsx(ContainerAlias, { style: aliasElement?.style, children: jsx(TextTrim, { maxLength: maxLength || ALIAS_DEFAULT_MAX_LENGTH, children: renderElement({ id: "alias", wrap: false }) }) })), [aliasElement?.style, maxLength, renderElement]);
     const renderValue = useMemo(() => (jsxs(ContainerValue, { style: valueElement?.style, big: true, children: [value, !!unitsElement && (jsx(ContainerUnits, { style: unitsElement?.style, children: renderElement({ id: "units" }) }))] })), [valueElement?.style, value, unitsElement, renderElement]);
     if (!value && hideEmpty)
         return null;
-    return (jsxs(RoundedBackgroundContainerWrapper, { style: innerTemplateStyle || style, "$center": center, "$color": color, "$inlineUnits": inlineUnits, "$big": big, "$bigIcon": bigIcon, children: [jsxs(ContainerIconValue, { children: [renderElement({ id: "icon", wrap: false }), big ? renderAlias : renderValue] }), big ? renderValue : renderAlias] }));
+    return (jsxs(RoundedBackgroundContainerWrapper, { style: innerTemplateStyle || style, "$center": center, "$color": color, "$inlineUnits": inlineUnits, "$big": big, "$bigIcon": bigIcon, children: [jsxs(ContainerIconValue, { children: [renderIcon, big ? renderAlias : renderValue] }), big ? renderValue : renderAlias] }));
 });
 
 const AddFeatureContainer = memo(({ elementConfig }) => {
@@ -9185,6 +9193,9 @@ const Chart = memo(({ config, element, elementConfig, type, renderElement }) =>
     const formatTooltipValue = useCallback((value, name) => isRelated
         ? tooltipValueFromRelatedFeatures(t, value, relatedAttributes, data[0]?.layerInfo)
         : tooltipValueFromAttributes(t, value, name, formattedAttributes), [data, formattedAttributes, isRelated, relatedAttributes]);
+    const customYAxisLeft = useCallback(yAxisLeft => {
+        yAxisLeft.tickFormat((index) => index);
+    }, []);
     const customXAxisBottom = useCallback((xAxisBottom, data) => {
         xAxisBottom.tickFormat((index) => (showMarkers
             ? index % (showMarkers || 1) === 0
@@ -9238,12 +9249,13 @@ const Chart = memo(({ config, element, elementConfig, type, renderElement }) =>
             bottom: markers?.length ? 20 : markersMargin,
             left: markersMargin
         };
-        return (jsx(BarChartWrapper, { height: height + margin.bottom, children: jsx(BarChartContainer, { children: jsx(StyledBarChart, { data: barChartData, colors: getColorsFromFilterItems(data[0]?.items, defaultColor, formatFilterColor), minValue: getMinValueFromFilterItems(data[0]?.items), markers: markers, width: +width, height: height, barWidth: barWidth, barPadding: padding, className: "dashboardBarChart", customXAxisBottom: xAxisBottom => customXAxisBottom(xAxisBottom, barChartData), customYAxis: axis => !showLabels && axis.remove(), customBars: ({ bars }) => {
+        return (jsx(BarChartWrapper, { height: height + margin.bottom, children: jsx(BarChartContainer, { children: jsx(StyledBarChart, { data: barChartData, colors: getColorsFromFilterItems(data[0]?.items, defaultColor, formatFilterColor), minValue: getMinValueFromFilterItems(data[0]?.items), markers: markers, width: +width, height: height, barWidth: barWidth, barPadding: padding, customYAxisLeft: customYAxisLeft, customXAxisBottom: xAxisBottom => customXAxisBottom(xAxisBottom, barChartData), customYAxis: axis => !showLabels && axis.remove(), customBars: ({ bars }) => {
                         bars.attr("rx", radius);
                         bars.attr("ry", radius);
                     }, margin: margin, xAxisPadding: 0, yAxisPadding: 0, formatTooltipValue: formatTooltipValue, formatTooltipName: formatTooltipName, hideTooltipGroupName: true, dynamicTooltipEnable: true, isBarTooltip: true, onBarClick: filterName ? item => onFilter(item.name) : undefined }) }) }));
     }, [
         customXAxisBottom,
+        customYAxisLeft,
         element,
         isLineChart,
         isStackBar,