@evergis/react 3.1.40 → 3.1.41

package/dist/components/Dashboard/containers/ChartContainer/types.d.ts

@@ -8,5 +8,7 @@ export type ChartDataProps = {
     items: FilterItem[] | PieChartData[] | BarChartData[];
     layerInfo: LayerInfo | null;
     attributeName: string | null;
+    attributeUnits: string | null;
+    dataSourceName: string | null;
     color: string | null;
 };

package/dist/components/Dashboard/types.d.ts

@@ -19,6 +19,7 @@ export interface ConfigRelatedDataSource {
     dataSourceName: string;
     attributeName: string;
     attributeTitle: string;
+    attributeUnits?: string;
     attributeColor?: string;
     alias?: string;
     chartAxis?: string;
@@ -46,6 +47,7 @@ export interface ConfigOptions {
     label?: string;
     withPadding?: boolean;
     withDivider?: boolean;
+    dotSnapping?: boolean;
     tagView?: boolean;
     simple?: boolean;
     separator?: string;

package/dist/index.js

@@ -8835,7 +8835,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);
@@ -8853,8 +8853,10 @@ const useChartData = ({ element, type }) => {
                         })
                         : null,
                     color: axisColor,
+                    attributeName,
+                    attributeUnits,
+                    dataSourceName,
                     layerInfo,
-                    attributeName
                 };
             })
                 .filter(({ items }) => items === null || (items?.length && !items.every(({ value }) => value === null)));
@@ -8864,6 +8866,8 @@ const useChartData = ({ element, type }) => {
                 items: getDataFromAttributes(t, element, attributes),
                 layerInfo: null,
                 attributeName: null,
+                attributeUnits: null,
+                dataSourceName: null,
                 color: null
             }
         ];
@@ -9395,7 +9399,7 @@ const Chart = React.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";
@@ -9450,14 +9454,23 @@ const Chart = React.memo(({ config, element, elementConfig, type, renderElement
     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, value, stroke }, index) => {
-                    const layerInfo = layerInfos?.find(({ name }) => name === layerName);
-                    const attribute = layerInfo?.layerDefinition.attributes[attributeName];
-                    return (jsxRuntime.jsxs(ChartTooltipRow, { children: [jsxRuntime.jsx(ChartLegendColor$1, { "$color": stroke }), jsxRuntime.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 (jsxRuntime.jsxs(ChartTooltipRow, { children: [jsxRuntime.jsx(ChartLegendColor$1, { "$color": stroke }), jsxRuntime.jsx(ChartLegendValue, { children: legendValue })] }, index));
                 })] }));
-    }, [labels, layerInfos]);
+    }, [labels, layerInfos, dataSources, dotSnapping]);
     const markers = React.useMemo(() => getChartMarkers(data[0]?.items, configMarkers, dataSources), [data, dataSources, configMarkers]);
     const margin = React.useMemo(() => {
         const markersMargin = showMarkers ? 10 : 0;
@@ -9491,6 +9504,8 @@ const Chart = React.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))
@@ -9505,7 +9520,7 @@ const Chart = React.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 (jsxRuntime.jsx(AnyChartWrapper, { height: height, children: jsxRuntime.jsx(StackBar, { data: data, filterName: filterName, type: type, alias: elementConfig?.children?.find(child => child.id === "alias"), options: options, renderTooltip: renderPieChartTooltip, renderElement: renderElement }) }));