@evergis/react 3.1.27 → 3.1.29

package/dist/react.esm.js

@@ -3729,7 +3729,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);
     }
@@ -4512,7 +4512,7 @@ const Container = styled(Flex) `
   ${({ isMain, isColumn }) => (isMain || isColumn) &&
     css `
       > :not(:last-child) {
-        margin-bottom: 0.5rem;
+        margin-bottom: 1.5rem;
       }
     `}
 
@@ -4526,8 +4526,7 @@ const Container = styled(Flex) `
   ${({ noBorders }) => noBorders && css `
     ${ContainerWrapper} {
       box-shadow: none;
-      padding-left: 0;
-      padding-right: 0;
+      padding: 0;
     }
   `}
 `;
@@ -5959,7 +5958,7 @@ const ChartContainer = memo(({ elementConfig, isVisible, type, renderElement })
     const hasItems = !!data[0]?.items?.length;
     if (!loading && !hasItems && hideEmpty)
         return null;
-    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxs(Container, { isColumn: true, children: [aliasElement && jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsx(ContainerValue, { column: !twoColumns, alignItems: "center", children: hasItems ? (jsxs(Fragment$1, { children: [jsx(ContainerChart, { children: renderElement({ id: "chart" }) }), jsx(ContainerLegend, { children: renderElement({ id: "legend" }) })] })) : (jsx(Fragment$1, { children: "\u2014" })) })] }))] }));
+    return (jsxs(FlexSpan, { flexDirection: "column", children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxs(Container, { isColumn: true, children: [aliasElement && jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsx(ContainerValue, { column: !twoColumns, alignItems: "center", children: hasItems ? (jsxs(Fragment$1, { children: [jsx(ContainerChart, { children: renderElement({ id: "chart" }) }), jsx(ContainerLegend, { children: renderElement({ id: "legend" }) })] })) : (jsx(Fragment$1, { children: "\u2014" })) })] }))] }));
 });
 
 const PagesContainer = memo(({ type = WidgetType.Dashboard, noBorders }) => {
@@ -6470,7 +6469,7 @@ const RoundedBackgroundContainerWrapper = styled(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;
   }
@@ -6486,6 +6485,7 @@ const RoundedBackgroundContainerWrapper = styled(Flex) `
 
 const ALIAS_DEFAULT_MAX_LENGTH = 28;
 const RoundedBackgroundContainer = memo(({ type, elementConfig, feature, renderElement }) => {
+    const { t } = useGlobalContext();
     const { dataSources } = useWidgetContext(type);
     const { attributes } = useRelatedDataSourceAttributes({
         type,
@@ -6499,7 +6499,14 @@ const RoundedBackgroundContainer = memo(({ type, elementConfig, feature, renderE
     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 = useMemo(() => attributes.find(({ name }) => name === valueElement.attributeName), [attributes, valueElement.attributeName]);
+    const value = useMemo(() => formatAttributeValue({
+        t,
+        type: attribute.type,
+        value: attribute.value,
+        stringFormat: attribute.stringFormat,
+        noUnits: valueElement.options?.noUnits,
+    }), [t, attribute, valueElement.options?.noUnits]);
     const color = useMemo(() => attributes?.find(({ name }) => name === colorAttribute)?.value || fontColor, [attributes, colorAttribute, fontColor]);
     const renderIcon = useMemo(() => {
         if (!iconElement)
@@ -6767,6 +6774,7 @@ const Header = styled(Flex) `
   top: 0;
   flex-shrink: 0;
   overflow: hidden;
+  width: 100%;
   padding: 0.5rem;
 
   ${HeaderContainer} {
@@ -6854,8 +6862,6 @@ const HeaderFontColorMixin$1 = css `
   }
 `;
 const HeaderWrapperMixin$1 = css `
-  padding: 0.5rem 0.5rem 0;
-
   ${Header} {
     min-height: 5.25rem;
   }
@@ -6920,8 +6926,6 @@ const HeaderFontColorMixin = css `
   }
 `;
 const HeaderWrapperMixin = css `
-  padding: 0.5rem 0.5rem 0;
-
   ${Header} {
     min-height: 5.25rem;
   }
@@ -6979,7 +6983,7 @@ const BigIconHeaderMixin = 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;