@evergis/react 3.1.40 → 3.1.41

package/dist/react.esm.js

@@ -8833,7 +8833,7 @@ const useChartData = ({ element, type }) => {
                 return [];
             return filteredAttributes
                 .map(relatedAxis => {
-                const { dataSourceName, axisColor, attributeName } = relatedAxis;
+                const { dataSourceName, axisColor, attributeName, attributeUnits } = relatedAxis;
                 const dataSource = configDataSources.find(({ name }) => name === dataSourceName);
                 const layerInfo = layerInfos?.find(item => item?.name === dataSource?.layerName);
                 const featureDataSource = getDataSource(dataSourceName, dataSources);
@@ -8851,8 +8851,10 @@ const useChartData = ({ element, type }) => {
                         })
                         : null,
                     color: axisColor,
+                    attributeName,
+                    attributeUnits,
+                    dataSourceName,
                     layerInfo,
-                    attributeName
                 };
             })
                 .filter(({ items }) => items === null || (items?.length && !items.every(({ value }) => value === null)));
@@ -8862,6 +8864,8 @@ const useChartData = ({ element, type }) => {
                 items: getDataFromAttributes(t, element, attributes),
                 layerInfo: null,
                 attributeName: null,
+                attributeUnits: null,
+                dataSourceName: null,
                 color: null
             }
         ];
@@ -9393,7 +9397,7 @@ const Chart = memo(({ config, element, elementConfig, type, renderElement }) =>
     const { t } = useGlobalContext();
     const { expandedContainers, layerInfos, attributes, dataSources } = useWidgetContext(type);
     const { id, options, children } = element || {};
-    const { column, markers: configMarkers, showLabels, showMarkers, showTotal, totalWord: configTotalWord, totalAttribute, expandable, expanded, chartType, relatedDataSources, defaultColor } = options || {};
+    const { column, markers: configMarkers, showLabels, showMarkers, showTotal, totalWord: configTotalWord, totalAttribute, expandable, expanded, chartType, relatedDataSources, defaultColor, dotSnapping, } = options || {};
     const isLineChart = chartType === "line";
     const isPieChart = chartType === "pie";
     const isStackBar = chartType === "stack";
@@ -9448,14 +9452,23 @@ const Chart = memo(({ config, element, elementConfig, type, renderElement }) =>
     const renderLineChartTooltip = useCallback((items, { indexX }) => {
         return (jsxs(Tooltip, { children: [jsx(ChartTooltipLabel, { children: labels[indexX] }), items
                     .filter(({ value }) => !isEmptyValue(value))
-                    ?.map(({ layerName, attributeName, value, stroke }, index) => {
-                    const layerInfo = layerInfos?.find(({ name }) => name === layerName);
-                    const attribute = layerInfo?.layerDefinition.attributes[attributeName];
-                    return (jsxs(ChartTooltipRow, { children: [jsx(ChartLegendColor$1, { "$color": stroke }), jsx(ChartLegendValue, { children: attribute
-                                    ? formatAttributeValue({ t, type: attribute.type, value, stringFormat: attribute.stringFormat })
-                                    : value })] }, index));
+                    ?.map(({ layerName, attributeName, attributeUnits, dataSourceName, value, stroke }, index) => {
+                    const layerInfo = !attributeUnits
+                        ? layerInfos?.find(({ name }) => name === layerName)
+                        : null;
+                    const attribute = !attributeUnits
+                        ? layerInfo?.layerDefinition.attributes[attributeName]
+                        : null;
+                    const dataSource = dataSourceName ? getDataSource(dataSourceName, dataSources) : null;
+                    const dataSourceUnits = !dataSource || !attributeUnits
+                        ? null
+                        : dataSource.features?.[0]?.attributes?.[attributeUnits];
+                    const legendValue = attribute
+                        ? formatAttributeValue({ t, type: attribute.type, value, stringFormat: attribute.stringFormat })
+                        : [value, dataSourceUnits].filter(Boolean).join(" ");
+                    return (jsxs(ChartTooltipRow, { children: [jsx(ChartLegendColor$1, { "$color": stroke }), jsx(ChartLegendValue, { children: legendValue })] }, index));
                 })] }));
-    }, [labels, layerInfos]);
+    }, [labels, layerInfos, dataSources, dotSnapping]);
     const markers = useMemo(() => getChartMarkers(data[0]?.items, configMarkers, dataSources), [data, dataSources, configMarkers]);
     const margin = useMemo(() => {
         const markersMargin = showMarkers ? 10 : 0;
@@ -9489,6 +9502,8 @@ const Chart = memo(({ config, element, elementConfig, type, renderElement }) =>
             const lineChartData = data.map(item => ({
                 layerName: item.layerInfo?.name,
                 attributeName: item.attributeName,
+                attributeUnits: item.attributeUnits,
+                dataSourceName: item.dataSourceName,
                 stroke: item.color || primaryColor,
                 values: item.items
                     ?.filter(({ value }) => !isEmptyValue(value))
@@ -9503,7 +9518,7 @@ const Chart = memo(({ config, element, elementConfig, type, renderElement }) =>
                             if (isHidedY) {
                                 yAxis.remove();
                             }
-                        }, customYAxis: yAxis => yAxis.ticks(4), renderTooltip: renderLineChartTooltip, customize: customize, dynamicTooltipEnable: true, stackedTooltip: true, tooltipClassName: "dashboardLineChartTooltip", drawGridX: !isHidedY, margin: margin })] }));
+                        }, customYAxis: yAxis => yAxis.ticks(4), renderTooltip: renderLineChartTooltip, customize: customize, dotSnapping: dotSnapping, dynamicTooltipEnable: true, stackedTooltip: true, tooltipClassName: "dashboardLineChartTooltip", drawGridX: !isHidedY, margin: margin })] }));
         }
         if (isStackBar) {
             return (jsx(AnyChartWrapper, { height: height, children: jsx(StackBar, { data: data, filterName: filterName, type: type, alias: elementConfig?.children?.find(child => child.id === "alias"), options: options, renderTooltip: renderPieChartTooltip, renderElement: renderElement }) }));