@evergis/react 3.1.129-alpha.3 → 3.1.129-alpha.4

package/dist/react.esm.js

@@ -3472,7 +3472,7 @@ const StackBarSection = styled.div `
   margin: 0 0.5px;
   background-color: ${({ $color }) => $color};
   opacity: ${({ hasAnyFilter, isFiltered }) => (isFiltered ? 1 : hasAnyFilter ? FILTERED_VALUE_OPACITY / 100 : 1)};
-  transition: opacity ${transition.release};
+  transition: opacity ${transition.release}, background-color ${transition.release};
 
   :first-child {
     border-top-left-radius: ${({ cornerRadius }) => (cornerRadius ? `${cornerRadius}px` : "0.5rem")};
@@ -4424,7 +4424,7 @@ const getAttributesConfiguration = (layer) => {
     const configuration = layer?.configuration ??
         {};
     const emptyAttributesConfiguration = {
-        geometryAttribute: layer?.geometryType === OgcGeometryType.Unknown
+        geometryAttribute: layer?.layerDefinition?.geometryType === OgcGeometryType.Unknown
             ? undefined
             : GEOMETRY_ATTRIBUTE,
         idAttribute: DEFAULT_ID_ATTRIBUTE_NAME,
@@ -4435,8 +4435,7 @@ const getAttributesConfiguration = (layer) => {
     }
     return {
         ...emptyAttributesConfiguration,
-        ...(configuration
-            .attributesConfiguration || {}),
+        ...(configuration.attributesConfiguration || {}),
     };
 };
 
@@ -7809,8 +7808,8 @@ const HeaderTitle = ({ noFeature }) => {
     const { t } = useGlobalContext();
     const { attributes, layerInfo, feature } = useWidgetContext(WidgetType.FeatureCard);
     const zoomToFeatures = useZoomToFeatures();
-    const { alias, name, layerDefinition } = layerInfo || {};
-    const resultDescription = alias || name || "";
+    const { configuration, layerDefinition } = layerInfo || {};
+    const resultDescription = configuration?.alias || configuration?.name || "";
     const resultTitle = useMemo(() => {
         const layerDefinitionAttribute = layerDefinition && attributes?.length
             ? attributes.find(item => item.name === layerDefinition.titleAttribute)
@@ -7858,10 +7857,10 @@ var img = "data:image/svg+xml,%3csvg width='32' height='32' viewBox='0 0 32 32'
 
 const LayerIcon = ({ layerInfo, error }) => {
     const renderSymbol = useMemo(() => {
-        if (!layerInfo.geometryType || error) {
+        if (!layerInfo?.layerDefinition?.geometryType || error) {
             return (jsx(AlertIconContainer, { children: jsx(Icon, { kind: "warning" }) }));
         }
-        switch (layerInfo.geometryType) {
+        switch (layerInfo?.layerDefinition?.geometryType) {
             case OgcGeometryType.MultiLineString:
                 return jsx("img", { src: img$1, alt: "" });
             case OgcGeometryType.Polygon:
@@ -7871,7 +7870,7 @@ const LayerIcon = ({ layerInfo, error }) => {
             default:
                 return jsx("img", { src: img$2, alt: "" });
         }
-    }, [layerInfo.geometryType]);
+    }, [layerInfo?.layerDefinition?.geometryType]);
     return jsx(LayerIconContainer, { children: renderSymbol });
 };
 
@@ -10172,21 +10171,21 @@ const getProxyService = (layer) => {
     if (!isProxyService(layer))
         return {
             layers: [],
-            sourceType: "",
             sourceUrl: "",
-            copyrightText: "",
+            sourceType: "",
+            layerDefinition: layer?.layerDefinition,
             legend: {
                 layers: [],
             },
         };
-    const { layers, sourceType, sourceUrl, legend, copyrightText } = layer;
+    const { layers, sourceType, sourceUrl, legend, layerDefinition } = layer;
     return {
         layers: layers || [],
-        copyrightText: copyrightText || "",
         sourceUrl: sourceUrl || "",
         sourceType: sourceType || "",
+        layerDefinition,
         legend: {
-            layers: (legend && legend.layers) || [],
+            layers: legend?.layers || [],
         },
     };
 };
@@ -11088,8 +11087,9 @@ const Chart = memo(({ config, element, elementConfig, type, renderElement }) =>
     const isRelated = !!relatedAttributes?.length;
     const { data, loading } = useChartData({ element, type });
     const totalWidthFromBarWidth = (data[0]?.items?.length || 0) * (barWidth + padding);
-    const width = options?.width ? options.width :
-        isStackBar
+    const width = options?.width
+        ? options.width
+        : isStackBar
             ? "100%"
             : isBarChart
                 ? totalWidthFromBarWidth || MAX_CHART_WIDTH
@@ -11111,21 +11111,24 @@ const Chart = memo(({ config, element, elementConfig, type, renderElement }) =>
         ? getTotalFromRelatedFeatures((data[0]?.items || []))
         : getTotalFromAttributes(children, formattedAttributes), [data, children, formattedAttributes, isRelated]);
     const totalWord = useMemo(() => totalAttribute
-        ? attributes?.find(({ name }) => name === totalAttribute)?.value
+        ? attributes?.find(({ name }) => name === totalAttribute)
+            ?.value
         : configTotalWord, [attributes, totalAttribute, configTotalWord]);
     const renderPieChartTooltip = useCallback(item => isRelated
         ? pieChartTooltipFromRelatedFeatures(t, item, relatedAttributes, data[0]?.layerInfo)
-        : pieChartTooltipFromAttributes(t, item, formattedAttributes), [data, formattedAttributes, isRelated, relatedAttributes]);
+        : pieChartTooltipFromAttributes(t, item, formattedAttributes), [data, formattedAttributes, isRelated, relatedAttributes, t]);
     const labels = useMemo(() => {
         if (!isLineChart)
             return [];
-        const result = data?.map(item => item?.items?.map(({ name }) => name?.toString()))?.flat();
+        const result = data
+            ?.map(item => item?.items?.map(({ name }) => name?.toString()))
+            ?.flat();
         return result?.filter((name, index) => result.indexOf(name) === index);
     }, [data, isLineChart]);
     const renderLineChartTooltip = useCallback((items, { indexX }) => {
         return (jsxs(Tooltip, { children: [jsx(ChartTooltipLabel, { children: labels[indexX] }), items
                     .filter(({ value }) => !isEmptyValue(value))
-                    ?.map(({ layerName, attributeName, attributeUnits, dataSourceName, value, stroke }, index) => {
+                    ?.map(({ layerName, attributeName, attributeUnits, dataSourceName, value, stroke, }, index) => {
                     const layerInfo = layerInfos?.find(({ name }) => name === layerName);
                     const attribute = layerInfo?.layerDefinition.attributes[attributeName];
                     const dataSource = getDataSource(dataSourceName, dataSources);
@@ -11133,12 +11136,20 @@ const Chart = memo(({ config, element, elementConfig, type, renderElement }) =>
                         ? dataSource?.features?.[0]?.properties?.[attributeUnits]
                         : attribute?.stringFormat?.unitsLabel;
                     const formatValue = attribute
-                        ? formatAttributeValue({ t, type: attribute.type, value, stringFormat: attribute.stringFormat, noUnits: true })
+                        ? formatAttributeValue({
+                            t,
+                            type: attribute.type,
+                            value,
+                            stringFormat: attribute.stringFormat,
+                            noUnits: true,
+                        })
                         : value;
-                    const resultValue = [formatValue, units].filter(Boolean).join(" ");
+                    const resultValue = [formatValue, units]
+                        .filter(Boolean)
+                        .join(" ");
                     return (jsxs(ChartTooltipRow, { children: [jsx(ChartLegendColor$1, { "$color": stroke }), jsx(ChartLegendValue, { children: resultValue })] }, index));
                 })] }));
-    }, [labels, layerInfos, dataSources, dotSnapping]);
+    }, [labels, layerInfos, dataSources, t]);
     const markers = useMemo(() => getChartMarkers(data[0]?.items, configMarkers, dataSources), [data, dataSources, configMarkers]);
     const margin = useMemo(() => {
         const markersMargin = showMarkers ? 10 : 0;
@@ -11146,23 +11157,23 @@ const Chart = memo(({ config, element, elementConfig, type, renderElement }) =>
             top: markersMargin,
             right: markersMargin,
             bottom: markers?.length ? 20 : markersMargin,
-            left: markersMargin
+            left: markersMargin,
         };
     }, [showMarkers, markers?.length]);
-    const formatTooltipName = useCallback((name) => (isRelated ? name : tooltipNameFromAttributes(name, formattedAttributes)), [formattedAttributes, isRelated]);
+    const formatTooltipName = useCallback((name) => isRelated ? name : tooltipNameFromAttributes(name, formattedAttributes), [formattedAttributes, isRelated]);
     const formatTooltipValue = useCallback((value, name) => isRelated
         ? tooltipValueFromRelatedFeatures(t, value, relatedAttributes, data[0]?.layerInfo)
-        : tooltipValueFromAttributes(t, value, name, formattedAttributes), [data, formattedAttributes, isRelated, relatedAttributes]);
+        : tooltipValueFromAttributes(t, value, name, formattedAttributes), [data, formattedAttributes, isRelated, relatedAttributes, t]);
     const customYAxisLeft = useCallback(yAxisLeft => {
         yAxisLeft.tickFormat((index) => index);
     }, []);
-    const customXAxisBottom = useCallback((xAxisBottom, data) => {
+    const customXAxisBottom = useCallback((xAxisBottom, xAxisData) => {
         xAxisBottom.tickFormat((index) => markers
             ? ""
             : (showMarkers
                 ? index % showMarkers === 0
-                : index === 0 || index === data.length - 1)
-                ? data[index]?.groupName || ""
+                : index === 0 || index === xAxisData.length - 1)
+                ? xAxisData[index]?.groupName || ""
                 : "");
     }, [markers, showMarkers]);
     const renderChart = useMemo(() => {
@@ -11177,7 +11188,7 @@ const Chart = memo(({ config, element, elementConfig, type, renderElement }) =>
                 stroke: item.color || primaryColor,
                 values: item.items
                     ?.filter(({ value }) => !isEmptyValue(value))
-                    ?.map(({ value }) => Number(value))
+                    ?.map(({ value }) => Number(value)),
             }));
             const isHidedY = axes.every(({ hideAxis }) => hideAxis);
             const chartValues = lineChartData
@@ -11198,8 +11209,8 @@ const Chart = memo(({ config, element, elementConfig, type, renderElement }) =>
                         ?.filter(({ value }) => !isEmptyValue(value))
                         ?.map(item => ({
                         ...item,
-                        color: formatFilterColor(item.name, item.color, defaultColor)
-                    })) || []), width: +width, height: +width, padAngle: angle, outerRadius: radius, cornerRadius: cornerRadius, renderTooltip: renderPieChartTooltip, withTooltip: true, onClick: filterName ? item => onFilter(item.name) : undefined, children: showTotal && jsx(PieChartCenter, { children: totalWord || roundTotalSum(+totalSum) }) }) }));
+                        color: formatFilterColor(item.name, item.color, defaultColor),
+                    })) || []), width: +width, height: +width, padAngle: angle, outerRadius: radius, cornerRadius: cornerRadius, renderTooltip: renderPieChartTooltip, withTooltip: true, onClick: filterName ? item => onFilter(item.name) : undefined, children: showTotal && (jsx(PieChartCenter, { children: totalWord || roundTotalSum(+totalSum) })) }) }));
         }
         const barChartData = getDataFromFilterItems(data[0]?.items);
         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 }) => {
@@ -11243,7 +11254,7 @@ const Chart = memo(({ config, element, elementConfig, type, renderElement }) =>
         showTotal,
         totalWord,
         totalSum,
-        onFilter
+        onFilter,
     ]);
     if (!isVisibleContainer(id, expandable, expanded, expandedContainers))
         return null;
@@ -11342,8 +11353,8 @@ const FeatureCardHeader = () => {
 const FeatureCardTitle = ({ title, description }) => {
     const { t } = useGlobalContext();
     const { attributes, layerInfo, feature } = useWidgetContext(WidgetType.FeatureCard);
-    const { alias, name, layerDefinition } = layerInfo || {};
-    const resultDescription = description || alias || name || "";
+    const { configuration, layerDefinition } = layerInfo || {};
+    const resultDescription = description || configuration?.alias || configuration?.name || "";
     const resultTitle = useMemo(() => {
         const layerDefinitionAttribute = layerDefinition && attributes?.length
             ? attributes.find(item => item.name === layerDefinition.titleAttribute)