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

package/dist/components/Dashboard/utils/getAttributesConfiguration.d.ts

@@ -1,2 +1,2 @@
-import { AttributesConfigurationDc, ServiceInfoDc } from '@evergis/api';
-export declare const getAttributesConfiguration: (layer: ServiceInfoDc) => AttributesConfigurationDc;
+import { AttributesConfigurationDc, QueryLayerServiceInfoDc } from '@evergis/api';
+export declare const getAttributesConfiguration: (layer: QueryLayerServiceInfoDc) => AttributesConfigurationDc;

package/dist/components/Dashboard/utils/getLayerInfo.d.ts

@@ -2,7 +2,5 @@ import { ProxyServiceInfoDc, QueryLayerServiceInfoDc, ServiceInfoDc } from '@eve
 import { ProxyServiceInfo } from '../../../types';
 export declare const isCompositeLayerConfiguration: (value?: unknown) => value is ServiceInfoDc;
 export declare const isProxyService: (value?: unknown) => value is ProxyServiceInfoDc;
-export declare const getProxyService: (layer?: ServiceInfoDc) => ProxyServiceInfo;
-export declare function getLayerInfo(layer?: ServiceInfoDc & {
-    type?: string;
-}): QueryLayerServiceInfoDc;
+export declare const getProxyService: (layer?: QueryLayerServiceInfoDc) => ProxyServiceInfo;
+export declare function getLayerInfo(layer?: QueryLayerServiceInfoDc): QueryLayerServiceInfoDc;

package/dist/index.js

@@ -3474,7 +3474,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 ${uilibGl.transition.release};
+  transition: opacity ${uilibGl.transition.release}, background-color ${uilibGl.transition.release};
 
   :first-child {
     border-top-left-radius: ${({ cornerRadius }) => (cornerRadius ? `${cornerRadius}px` : "0.5rem")};
@@ -4426,7 +4426,7 @@ const getAttributesConfiguration = (layer) => {
     const configuration = layer?.configuration ??
         {};
     const emptyAttributesConfiguration = {
-        geometryAttribute: layer?.geometryType === api.OgcGeometryType.Unknown
+        geometryAttribute: layer?.layerDefinition?.geometryType === api.OgcGeometryType.Unknown
             ? undefined
             : GEOMETRY_ATTRIBUTE,
         idAttribute: DEFAULT_ID_ATTRIBUTE_NAME,
@@ -4437,8 +4437,7 @@ const getAttributesConfiguration = (layer) => {
     }
     return {
         ...emptyAttributesConfiguration,
-        ...(configuration
-            .attributesConfiguration || {}),
+        ...(configuration.attributesConfiguration || {}),
     };
 };
 
@@ -7811,8 +7810,8 @@ const HeaderTitle = ({ noFeature }) => {
     const { t } = useGlobalContext();
     const { attributes, layerInfo, feature } = useWidgetContext(exports.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 = React.useMemo(() => {
         const layerDefinitionAttribute = layerDefinition && attributes?.length
             ? attributes.find(item => item.name === layerDefinition.titleAttribute)
@@ -7860,10 +7859,10 @@ var img = "data:image/svg+xml,%3csvg width='32' height='32' viewBox='0 0 32 32'
 
 const LayerIcon = ({ layerInfo, error }) => {
     const renderSymbol = React.useMemo(() => {
-        if (!layerInfo.geometryType || error) {
+        if (!layerInfo?.layerDefinition?.geometryType || error) {
             return (jsxRuntime.jsx(AlertIconContainer, { children: jsxRuntime.jsx(uilibGl.Icon, { kind: "warning" }) }));
         }
-        switch (layerInfo.geometryType) {
+        switch (layerInfo?.layerDefinition?.geometryType) {
             case api.OgcGeometryType.MultiLineString:
                 return jsxRuntime.jsx("img", { src: img$1, alt: "" });
             case api.OgcGeometryType.Polygon:
@@ -7873,7 +7872,7 @@ const LayerIcon = ({ layerInfo, error }) => {
             default:
                 return jsxRuntime.jsx("img", { src: img$2, alt: "" });
         }
-    }, [layerInfo.geometryType]);
+    }, [layerInfo?.layerDefinition?.geometryType]);
     return jsxRuntime.jsx(LayerIconContainer, { children: renderSymbol });
 };
 
@@ -10174,21 +10173,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 || [],
         },
     };
 };
@@ -11090,8 +11089,9 @@ const Chart = React.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
@@ -11113,21 +11113,24 @@ const Chart = React.memo(({ config, element, elementConfig, type, renderElement
         ? getTotalFromRelatedFeatures((data[0]?.items || []))
         : getTotalFromAttributes(children, formattedAttributes), [data, children, formattedAttributes, isRelated]);
     const totalWord = React.useMemo(() => totalAttribute
-        ? attributes?.find(({ name }) => name === totalAttribute)?.value
+        ? attributes?.find(({ name }) => name === totalAttribute)
+            ?.value
         : configTotalWord, [attributes, totalAttribute, configTotalWord]);
     const renderPieChartTooltip = React.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 = React.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 = React.useCallback((items, { indexX }) => {
         return (jsxRuntime.jsxs(Tooltip, { children: [jsxRuntime.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);
@@ -11135,12 +11138,20 @@ const Chart = React.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 (jsxRuntime.jsxs(ChartTooltipRow, { children: [jsxRuntime.jsx(ChartLegendColor$1, { "$color": stroke }), jsxRuntime.jsx(ChartLegendValue, { children: resultValue })] }, index));
                 })] }));
-    }, [labels, layerInfos, dataSources, dotSnapping]);
+    }, [labels, layerInfos, dataSources, t]);
     const markers = React.useMemo(() => getChartMarkers(data[0]?.items, configMarkers, dataSources), [data, dataSources, configMarkers]);
     const margin = React.useMemo(() => {
         const markersMargin = showMarkers ? 10 : 0;
@@ -11148,23 +11159,23 @@ const Chart = React.memo(({ config, element, elementConfig, type, renderElement
             top: markersMargin,
             right: markersMargin,
             bottom: markers?.length ? 20 : markersMargin,
-            left: markersMargin
+            left: markersMargin,
         };
     }, [showMarkers, markers?.length]);
-    const formatTooltipName = React.useCallback((name) => (isRelated ? name : tooltipNameFromAttributes(name, formattedAttributes)), [formattedAttributes, isRelated]);
+    const formatTooltipName = React.useCallback((name) => isRelated ? name : tooltipNameFromAttributes(name, formattedAttributes), [formattedAttributes, isRelated]);
     const formatTooltipValue = React.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 = React.useCallback(yAxisLeft => {
         yAxisLeft.tickFormat((index) => index);
     }, []);
-    const customXAxisBottom = React.useCallback((xAxisBottom, data) => {
+    const customXAxisBottom = React.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 = React.useMemo(() => {
@@ -11179,7 +11190,7 @@ const Chart = React.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
@@ -11200,8 +11211,8 @@ const Chart = React.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 && jsxRuntime.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 && (jsxRuntime.jsx(PieChartCenter, { children: totalWord || roundTotalSum(+totalSum) })) }) }));
         }
         const barChartData = getDataFromFilterItems(data[0]?.items);
         return (jsxRuntime.jsx(BarChartWrapper, { height: height + margin.bottom, children: jsxRuntime.jsx(BarChartContainer, { children: jsxRuntime.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 }) => {
@@ -11245,7 +11256,7 @@ const Chart = React.memo(({ config, element, elementConfig, type, renderElement
         showTotal,
         totalWord,
         totalSum,
-        onFilter
+        onFilter,
     ]);
     if (!isVisibleContainer(id, expandable, expanded, expandedContainers))
         return null;
@@ -11344,8 +11355,8 @@ const FeatureCardHeader = () => {
 const FeatureCardTitle = ({ title, description }) => {
     const { t } = useGlobalContext();
     const { attributes, layerInfo, feature } = useWidgetContext(exports.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 = React.useMemo(() => {
         const layerDefinitionAttribute = layerDefinition && attributes?.length
             ? attributes.find(item => item.name === layerDefinition.titleAttribute)