@evergis/react 3.1.21 → 3.1.23

package/dist/components/Dashboard/hooks/useChartChange.d.ts

@@ -1,6 +1,6 @@
-import { LineChartProps } from '@evergis/charts';
+import { BarChartMarker, LineChartProps } from '@evergis/charts';
 import { ConfigDataSource, ConfigRelatedDataSource } from '../types';
-export declare const useChartChange: ({ dataSources, chartId, width, height, relatedAttributes, defaultColor, fontColor, showMarkers, }: {
+export declare const useChartChange: ({ dataSources, chartId, width, height, relatedAttributes, defaultColor, fontColor, markers, showMarkers, }: {
     dataSources: ConfigDataSource[];
     chartId: string;
     width: string | number;
@@ -8,5 +8,6 @@ export declare const useChartChange: ({ dataSources, chartId, width, height, rel
     relatedAttributes: ConfigRelatedDataSource[];
     defaultColor: string;
     fontColor: string;
+    markers: BarChartMarker[] | string;
     showMarkers: number;
 }) => [LineChartProps["customize"], (range: [number, number]) => void];

package/dist/components/Dashboard/hooks/useDataSources.d.ts

@@ -8,7 +8,7 @@ export declare const useDataSources: ({ type: widgetType, config, attributes, fi
     layerParams?: Record<string, string>;
     eqlParameters?: QueryLayerServiceConfigurationDc["eqlParameters"];
 }) => {
-    getDataSourcePromises: ({ ds, query, parameters, layerName, limit, condition, url, resourceId, type }: ConfigDataSource, newFilters?: SelectedFilters, offset?: number) => Promise<EqlDataSource | import('@evergis/api').PagedFeaturesListDc>;
+    getDataSourcePromises: ({ ds, query, parameters, layerName, limit, condition, url, resourceId }: ConfigDataSource, newFilters?: SelectedFilters, offset?: number) => Promise<EqlDataSource | import('@evergis/api').PagedFeaturesListDc>;
     getUpdatingDataSources: () => ConfigDataSource[];
     getUpdatedDataSources: (responses: DataSourcePromise[], currentDataSources: ConfigDataSource[], otherDataSources: FetchedDataSource[]) => any;
     zoomToLayersExtent: (layers: Array<{

package/dist/hooks/index.d.ts

@@ -1,5 +1,6 @@
 export * from './map';
 export * from './serverNotifications';
+export * from './useAppHeight';
 export * from './useDebouncedCallback';
 export * from './useToggle';
 export * from './useWindowResize';

package/dist/hooks/useAppHeight.d.ts

@@ -0,0 +1 @@
+export declare const useAppHeight: () => void;

package/dist/index.js

@@ -70,7 +70,7 @@ const ChartTooltipRow = styled(uilibGl.Flex) `
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
-  margin-top: 0.25rem;
+  margin-top: 0.5rem;
   line-height: 0;
 
   ${ChartLegendColor$1} {
@@ -188,8 +188,7 @@ const LineChartStyles = styled.createGlobalStyle `
   }
 `;
 const StyledBarChart = styled(charts.BarChart) `
-  .domain,
-  line {
+  .domain {
     display: none;
   }
 
@@ -4004,7 +4003,7 @@ function wrap() {
         textLength = self.node().getComputedTextLength();
     }
 }
-const useChartChange = ({ dataSources, chartId, width, height, relatedAttributes, defaultColor, fontColor, showMarkers, }) => {
+const useChartChange = ({ dataSources, chartId, width, height, relatedAttributes, defaultColor, fontColor, markers, showMarkers, }) => {
     const { t } = useGlobalContext();
     const { layerInfos } = useWidgetContext();
     const strokeColors = relatedAttributes.filter(({ chartAxis }) => chartAxis === "y").map(({ axisColor }) => axisColor);
@@ -4041,8 +4040,11 @@ const useChartChange = ({ dataSources, chartId, width, height, relatedAttributes
             if (index === nodes.length - 1) {
                 nodes[index].style.textAnchor = "end";
             }
+            if (markers) {
+                nodes[index].remove();
+            }
             if (showMarkers) {
-                if (index % (showMarkers || 1) !== 0) {
+                if (index % showMarkers !== 0) {
                     nodes[index].remove();
                 }
             }
@@ -4097,7 +4099,7 @@ const useChartChange = ({ dataSources, chartId, width, height, relatedAttributes
             onChange();
         });
         svg.append("defs").html(() => defs.join(""));
-    }, [fontColor, dataSources, layerInfos, relatedAttributes, chartId, strokeColors, defaultColor, width, onChange, showMarkers]);
+    }, [fontColor, dataSources, layerInfos, relatedAttributes, chartId, strokeColors, defaultColor, width, onChange, showMarkers, markers]);
     return [customize, onChange];
 };
 
@@ -4944,6 +4946,19 @@ const useServerNotificationsContext = () => {
     return React.useContext(ServerNotificationsContext);
 };
 
+const useAppHeight = () => {
+    React.useEffect(() => {
+        const setAppHeight = () => {
+            document.documentElement.style.setProperty("--app-height", `${window.innerHeight}px`);
+        };
+        window.addEventListener("resize", setAppHeight);
+        setAppHeight();
+        return () => {
+            window.removeEventListener("resize", setAppHeight);
+        };
+    }, []);
+};
+
 const useDebouncedCallback = (interval) => {
     return React.useMemo(() => debounce((cb) => {
         cb();
@@ -5386,14 +5401,20 @@ const getChartFilterName = (relatedDataSources) => {
     return axes?.[0]?.filterName;
 };
 
+function getValueIndex(items, attributes) {
+    return items?.findIndex(({ name }) => name.toString() === attributes.value?.toString());
+}
 const getChartMarkers = (items, markers, dataSources) => {
     if (typeof markers === "string") {
         const dataSource = getDataSource(markers, dataSources);
-        return dataSource?.features?.map(({ attributes }) => attributes) || [];
+        return dataSource?.features?.map(({ attributes }) => ({
+            ...attributes,
+            value: getValueIndex(items, attributes),
+        })) || [];
     }
     return (markers?.map(marker => ({
         ...marker,
-        value: items?.findIndex(({ name }) => name.toString() === marker.value?.toString()),
+        value: getValueIndex(items, marker),
     })) || []);
 };
 
@@ -8779,11 +8800,26 @@ const useDataSources = ({ type: widgetType, config, attributes, filters, layerPa
     const { dataSources } = useWidgetContext(widgetType);
     const { filters: configFilters, dataSources: configDataSources } = config || {};
     const prevFilters = React.useRef({});
-    const getDataSourcePromises = React.useCallback(async ({ ds, query, parameters, layerName, limit, condition, url, resourceId, type }, newFilters, offset = 0) => {
+    const getDataSourcePromises = React.useCallback(async ({ ds, query, parameters, layerName, limit, condition, url, resourceId }, newFilters, offset = 0) => {
         const selectedFilters = {
             ...(filters || {}),
             ...(newFilters || {}),
         };
+        if (resourceId) {
+            const response = await api.remoteTaskManager.post({
+                workerType: "pythonService",
+                methodType: "pythonrunner/run",
+                data: {
+                    method: "get",
+                    resourceId,
+                    parameters,
+                }
+            });
+            return {
+                items: response.result.items,
+                attributeDefinition: null,
+            };
+        }
         const newParams = applyQueryFilters({
             parameters,
             dataSources,
@@ -8791,8 +8827,8 @@ const useDataSources = ({ type: widgetType, config, attributes, filters, layerPa
             filters: configFilters,
             geometry: ewktGeometry,
         });
-        if (url || resourceId) {
-            const response = await fetch(url || `https://beta5.evergis.ru/sp/${type}/resource/run?resourceId=${resourceId}`, {
+        if (url) {
+            const response = await fetch(url, {
                 method: "POST",
                 headers: {
                     Accept: "application/json",
@@ -9162,6 +9198,7 @@ const Chart = React.memo(({ config, element, elementConfig, type, renderElement
         fontColor,
         relatedAttributes,
         defaultColor: primaryColor,
+        markers: configMarkers,
         showMarkers,
     });
     const { formatFilterColor, onFilter } = useFeatureFilters(type, filterName, data?.[0]?.items);
@@ -9191,6 +9228,15 @@ const Chart = React.memo(({ config, element, elementConfig, type, renderElement
                 })] }));
     }, [labels, layerInfos]);
     const markers = React.useMemo(() => getChartMarkers(data[0]?.items, configMarkers, dataSources), [data, dataSources, configMarkers]);
+    const margin = React.useMemo(() => {
+        const markersMargin = showMarkers ? 10 : 0;
+        return {
+            top: markersMargin,
+            right: markersMargin,
+            bottom: markers?.length ? 20 : markersMargin,
+            left: markersMargin
+        };
+    }, [showMarkers, markers?.length]);
     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)
@@ -9199,11 +9245,14 @@ const Chart = React.memo(({ config, element, elementConfig, type, renderElement
         yAxisLeft.tickFormat((index) => index);
     }, []);
     const customXAxisBottom = React.useCallback((xAxisBottom, data) => {
-        xAxisBottom.tickFormat((index) => (showMarkers
-            ? index % (showMarkers || 1) === 0
-            : index === 0 || index === data.length - 1)
-            ? data[index]?.groupName || "" : "");
-    }, [showMarkers]);
+        xAxisBottom.tickFormat((index) => markers
+            ? ""
+            : (showMarkers
+                ? index % showMarkers === 0
+                : index === 0 || index === data.length - 1)
+                ? data[index]?.groupName || ""
+                : "");
+    }, [markers, showMarkers]);
     const renderChart = React.useMemo(() => {
         if (!element)
             return null;
@@ -9221,16 +9270,11 @@ const Chart = React.memo(({ config, element, elementConfig, type, renderElement
                 .flat()
                 .map(({ values }) => values)
                 .flat();
-            return (jsxRuntime.jsxs(AnyChartWrapper, { height: height, children: [jsxRuntime.jsx(LineChartStyles, {}), jsxRuntime.jsx(charts.LineChart, { data: lineChartData, labels: labels, width: +width, height: height, xAxisPadding: 15, yAxisPadding: 0, min: Math.min(...chartValues), customYAxisSelection: yAxis => {
+            return (jsxRuntime.jsxs(AnyChartWrapper, { height: height, children: [jsxRuntime.jsx(LineChartStyles, {}), jsxRuntime.jsx(charts.LineChart, { data: lineChartData, labels: labels, markers: markers, width: +width, height: height, xAxisPadding: 15, yAxisPadding: 0, min: Math.min(...chartValues), customYAxisSelection: yAxis => {
                             if (isHidedY) {
                                 yAxis.remove();
                             }
-                        }, customYAxis: yAxis => yAxis.ticks(4), renderTooltip: renderLineChartTooltip, customize: customize, dynamicTooltipEnable: true, stackedTooltip: true, tooltipClassName: "dashboardLineChartTooltip", drawGridX: !isHidedY, margin: {
-                            top: 0,
-                            right: 0,
-                            bottom: 0,
-                            left: 0
-                        } })] }));
+                        }, customYAxis: yAxis => yAxis.ticks(4), renderTooltip: renderLineChartTooltip, customize: customize, 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 }) }));
@@ -9244,13 +9288,6 @@ const Chart = React.memo(({ config, element, elementConfig, type, renderElement
                     })) || []), 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);
-        const markersMargin = showMarkers ? 10 : 0;
-        const margin = {
-            top: markersMargin,
-            right: markersMargin,
-            bottom: markers?.length ? 20 : markersMargin,
-            left: markersMargin
-        };
         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 }) => {
                         bars.attr("rx", radius);
                         bars.attr("ry", radius);
@@ -9277,6 +9314,7 @@ const Chart = React.memo(({ config, element, elementConfig, type, renderElement
         filterName,
         axes,
         labels,
+        margin,
         renderLineChartTooltip,
         customize,
         primaryColor,
@@ -9763,7 +9801,7 @@ const VectorLayer = ({ layer, tileUrl, visible, beforeId, getLayerTempStyle, })
     return (jsxRuntime.jsx(MapGL.Source, { promoteId: idAttribute, id: layer.name, type: "vector", tiles: [tileUrl], children: clientStyle?.items ? renderClientStyle() : renderLayerByGeometryType() }));
 };
 
-const Layer = ({ layer, layerType, visible, beforeId, tileUrl, getLayerTempStyle, onMount = () => null, }) => {
+const Layer = ({ layer, layerType, visible, beforeId, tileUrl, getLayerTempStyle, onMount = () => { }, }) => {
     React.useEffect(onMount, []); // eslint-disable-line
     if (!layer) {
         return null;
@@ -10037,6 +10075,7 @@ exports.tooltipValueFromAttributes = tooltipValueFromAttributes;
 exports.tooltipValueFromRelatedFeatures = tooltipValueFromRelatedFeatures;
 exports.transparentizeColor = transparentizeColor;
 exports.treeNodesToProjectItems = treeNodesToProjectItems;
+exports.useAppHeight = useAppHeight;
 exports.useChartChange = useChartChange;
 exports.useChartData = useChartData;
 exports.useDashboardHeader = useDashboardHeader;