@evergis/react 3.1.27 → 3.1.29

package/dist/index.js

@@ -3731,7 +3731,7 @@ const formatAttributeValue = ({ t, type, value, stringFormat, noUnits = false })
         return formatDateValue(stringFormat, value);
     }
     if (numberFormatTypes.includes(type) && !isNaN(value)) {
-        if (!stringFormat?.format)
+        if (!stringFormat)
             return value.toString();
         return formatNumberValue(stringFormat, value, type, noUnits);
     }
@@ -4514,7 +4514,7 @@ const Container = styled(uilibGl.Flex) `
   ${({ isMain, isColumn }) => (isMain || isColumn) &&
     styled.css `
       > :not(:last-child) {
-        margin-bottom: 0.5rem;
+        margin-bottom: 1.5rem;
       }
     `}
 
@@ -4528,8 +4528,7 @@ const Container = styled(uilibGl.Flex) `
   ${({ noBorders }) => noBorders && styled.css `
     ${ContainerWrapper} {
       box-shadow: none;
-      padding-left: 0;
-      padding-right: 0;
+      padding: 0;
     }
   `}
 `;
@@ -5961,7 +5960,7 @@ const ChartContainer = React.memo(({ elementConfig, isVisible, type, renderEleme
     const hasItems = !!data[0]?.items?.length;
     if (!loading && !hasItems && hideEmpty)
         return null;
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(Container, { isColumn: true, children: [aliasElement && jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { column: !twoColumns, alignItems: "center", children: hasItems ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ContainerChart, { children: renderElement({ id: "chart" }) }), jsxRuntime.jsx(ContainerLegend, { children: renderElement({ id: "legend" }) })] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u2014" })) })] }))] }));
+    return (jsxRuntime.jsxs(uilibGl.FlexSpan, { flexDirection: "column", children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(Container, { isColumn: true, children: [aliasElement && jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { column: !twoColumns, alignItems: "center", children: hasItems ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ContainerChart, { children: renderElement({ id: "chart" }) }), jsxRuntime.jsx(ContainerLegend, { children: renderElement({ id: "legend" }) })] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u2014" })) })] }))] }));
 });
 
 const PagesContainer = React.memo(({ type = exports.WidgetType.Dashboard, noBorders }) => {
@@ -6472,7 +6471,7 @@ const RoundedBackgroundContainerWrapper = styled(uilibGl.Flex) `
 
   ${ContainerValue} {
     flex-direction: ${({ $inlineUnits }) => ($inlineUnits ? "row" : "column")};
-    justify-content: ${({ $big }) => ($big ? "flex-start" : "flex-end")};
+    justify-content: ${({ $big }) => ($big ? "flex-start" : "center")};
     align-items: ${({ $inlineUnits }) => ($inlineUnits ? "center" : "flex-start")};
     line-height: 1;
   }
@@ -6488,6 +6487,7 @@ const RoundedBackgroundContainerWrapper = styled(uilibGl.Flex) `
 
 const ALIAS_DEFAULT_MAX_LENGTH = 28;
 const RoundedBackgroundContainer = React.memo(({ type, elementConfig, feature, renderElement }) => {
+    const { t } = useGlobalContext();
     const { dataSources } = useWidgetContext(type);
     const { attributes } = useRelatedDataSourceAttributes({
         type,
@@ -6501,7 +6501,14 @@ const RoundedBackgroundContainer = React.memo(({ type, elementConfig, feature, r
     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 attribute = React.useMemo(() => attributes.find(({ name }) => name === valueElement.attributeName), [attributes, valueElement.attributeName]);
+    const value = React.useMemo(() => formatAttributeValue({
+        t,
+        type: attribute.type,
+        value: attribute.value,
+        stringFormat: attribute.stringFormat,
+        noUnits: valueElement.options?.noUnits,
+    }), [t, attribute, valueElement.options?.noUnits]);
     const color = React.useMemo(() => attributes?.find(({ name }) => name === colorAttribute)?.value || fontColor, [attributes, colorAttribute, fontColor]);
     const renderIcon = React.useMemo(() => {
         if (!iconElement)
@@ -6769,6 +6776,7 @@ const Header = styled(uilibGl.Flex) `
   top: 0;
   flex-shrink: 0;
   overflow: hidden;
+  width: 100%;
   padding: 0.5rem;
 
   ${HeaderContainer} {
@@ -6856,8 +6864,6 @@ const HeaderFontColorMixin$1 = styled.css `
   }
 `;
 const HeaderWrapperMixin$1 = styled.css `
-  padding: 0.5rem 0.5rem 0;
-
   ${Header} {
     min-height: 5.25rem;
   }
@@ -6922,8 +6928,6 @@ const HeaderFontColorMixin = styled.css `
   }
 `;
 const HeaderWrapperMixin = styled.css `
-  padding: 0.5rem 0.5rem 0;
-
   ${Header} {
     min-height: 5.25rem;
   }
@@ -6981,7 +6985,7 @@ const BigIconHeaderMixin = styled.css `
 `;
 const IconHeaderWrapper = styled.div `
   ${Header} {
-    width: calc(100% + 3rem);
+    width: calc(100% + 1.5rem);
     margin: -1.5rem -1.5rem 0 -1.5rem;
     padding: 1.5rem;
     border-top-left-radius: 0.5rem;