@evergis/react 3.1.39 → 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/hooks/useExportPdf.d.ts

@@ -1,4 +1,4 @@
-export declare const useExportPdf: (ids: string[]) => {
+export declare const useExportPdf: (id: string, margin?: number) => {
     loading: boolean;
     onExport: () => Promise<void>;
 };

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/components/Dashboard/utils/getRootElementId.d.ts

@@ -0,0 +1,2 @@
+import { WidgetType } from '../types';
+export declare const getRootElementId: (type?: WidgetType) => string;

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

@@ -14,6 +14,7 @@ export * from './formatElementValue';
 export * from './getAttributeByName';
 export * from './getAttributesConfiguration';
 export * from './getAttributeValue';
+export * from './getChartAxes';
 export * from './getChartFilterName';
 export * from './getChartMarkers';
 export * from './getConfigFilter';
@@ -44,6 +45,7 @@ export * from './getSlideshowImages';
 export * from './getSvgUrl';
 export * from './getTotalFromAttributes';
 export * from './getTotalFromRelatedFeatures';
+export * from './getRootElementId';
 export * from './isEmptyElementValue';
 export * from './isEmptyValue';
 export * from './isHiddenEmptyValue';

package/dist/index.js

@@ -14,10 +14,10 @@ var enUS = require('date-fns/locale/en-US');
 var lodash = require('lodash');
 var signalr = require('@microsoft/signalr');
 var findAnd = require('find-and');
-var MapboxDraw = require('@mapbox/mapbox-gl-draw');
-var turf = require('@turf/turf');
 var jspdf = require('jspdf');
 var html2canvas = require('html2canvas');
+var MapboxDraw = require('@mapbox/mapbox-gl-draw');
+var turf = require('@turf/turf');
 var MapGL = require('react-map-gl/mapbox');
 require('@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css');
 require('mapbox-gl/dist/mapbox-gl.css');
@@ -5414,6 +5414,8 @@ const getAttributeValue = (element, attributes) => {
     return maxLength && maxLength < value.length ? (jsxRuntime.jsx(TextTrim, { maxLength: maxLength, expandable: expandable, lineBreak: lineBreak, children: value })) : (value);
 };
 
+const getChartAxes = (chartElement) => chartElement?.options?.relatedDataSources?.filter(({ chartAxis }) => chartAxis === "y");
+
 const getChartFilterName = (relatedDataSources) => {
     const relatedAttributes = relatedDataSources || [];
     const axes = relatedAttributes.filter(({ chartAxis }) => chartAxis === "y");
@@ -6007,7 +6009,7 @@ const PagesContainer = React.memo(({ type = exports.WidgetType.Dashboard, noBord
         setSelectedTabId,
         type,
     ]);
-    return (jsxRuntime.jsxs("div", { id: "dashboard-root", style: { width }, children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: config, type: type, renderElement: renderElement }), jsxRuntime.jsx(Container, { isColumn: isColumn, isMain: true, noBorders: noBorders, children: jsxRuntime.jsx(ContainerChildren, { items: filteredChildren, isMain: true, renderElement: renderElement }) })] }));
+    return (jsxRuntime.jsx(Container, { id: getRootElementId(type), style: { width }, isMain: true, isColumn: isColumn, noBorders: noBorders, children: jsxRuntime.jsx(ContainerChildren, { items: filteredChildren, isMain: true, renderElement: renderElement }) }));
 });
 
 const TwoColumnsInnerContainer = React.memo(({ renderElement }) => {
@@ -6575,10 +6577,12 @@ const LayersContainer = React.memo(({ type, elementConfig, renderElement }) => {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(LayersContainerWrapper, { style: style, children: jsxRuntime.jsx(LayerTree, { layers: layers, onlyMainTools: true }) }))] }));
 });
 
-const ExportPdfContainer = React.memo(({ elementConfig }) => {
-    const { loading, onExport } = useExportPdf(["dashboard-root"]);
-    const { style } = elementConfig || {};
-    return (jsxRuntime.jsx(Container, { style: style, children: jsxRuntime.jsx(uilibGl.IconButton, { kind: "tools_print", primary: true, disabled: loading, onClick: onExport, children: "\u042D\u043A\u0441\u043F\u043E\u0440\u0442 \u0432 PDF" }) }));
+const ExportPdfContainer = React.memo(({ type, elementConfig }) => {
+    const { t } = useGlobalContext();
+    const { loading, onExport } = useExportPdf(getRootElementId(type));
+    const { style, options } = elementConfig || {};
+    const { icon, title } = options || {};
+    return (jsxRuntime.jsx(Container, { children: jsxRuntime.jsx(uilibGl.IconButton, { kind: icon || "download", primary: true, disabled: loading, style: style, onClick: onExport, children: title ?? t("downloadPdf", { ns: "dashboard", defaultValue: "Скачать PDF" }) }) }));
 });
 
 const containerComponents = {
@@ -7430,8 +7434,6 @@ const ElementImage = React.memo(({ type, elementConfig }) => {
     return firstImage ? jsxRuntime.jsx("img", { src: firstImage, alt: firstImage, width: width }) : null;
 });
 
-const getChartAxes = (chartElement) => chartElement?.options?.relatedDataSources?.filter(({ chartAxis }) => chartAxis === "y");
-
 const ElementLegend = React.memo(({ type, element, elementConfig, expandedContainers }) => {
     const { attributes, dataSources } = useWidgetContext(type);
     const { options } = elementConfig || {};
@@ -8642,6 +8644,8 @@ const getTotalFromRelatedFeatures = (data) => {
     return data?.reduce((result, { value }) => result + Number(value), 0)?.toFixed(0) || "";
 };
 
+const getRootElementId = (type = exports.WidgetType.Dashboard) => `${type}-root`;
+
 const pieChartTooltipFromAttributes = (t, data, attributes) => {
     const attribute = attributes?.find(({ name }) => name === data[0].name);
     const renderValue = attribute
@@ -8831,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);
@@ -8849,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)));
@@ -8860,6 +8866,8 @@ const useChartData = ({ element, type }) => {
                 items: getDataFromAttributes(t, element, attributes),
                 layerInfo: null,
                 attributeName: null,
+                attributeUnits: null,
+                dataSourceName: null,
                 color: null
             }
         ];
@@ -9096,125 +9104,99 @@ const useExpandableContainers = () => {
     return [expandedContainers, expandContainer];
 };
 
-const useExportPdf = (ids) => {
+const useExportPdf = (id, margin = 20) => {
     const [loading, setLoading] = React.useState(false);
     const onExport = React.useCallback(async () => {
-        if (ids.length === 0) {
+        if (!id) {
             return;
         }
         setLoading(true);
-        const pdf = new jspdf.jsPDF("landscape", "pt", "a4", false);
-        for (let i = 0; i < ids.length; i++) {
-            const pageItemContents = document.querySelector(`#${ids[i]}`);
-            const data = await html2canvas(pageItemContents, {
-                scale: 2,
-                windowWidth: 800,
-                onclone: (clonedDocument, clonedElement) => {
-                    clonedDocument.body.style.width = "1920px";
-                    clonedDocument.body.style.height = "1080px";
-                    /* if (!isCoverPage) {
-                      clonedDocument.body.style.background = "#f4f7f9";
-                    }
-          
-                    const pageContainers = clonedElement.querySelectorAll(".export-page-container");
-                    const inputWrappers = clonedElement.querySelectorAll(".page-title-input");
-                    const textareas = clonedElement.querySelectorAll(".report-page-item-textarea");
-                    const datePickerWrappers = clonedElement.querySelectorAll(".report-page-item-datepicker");
-                    const pageBlockContainers = clonedElement.querySelectorAll(".report-page-block-container");
-                    const pageItemTitles = clonedDocument.querySelectorAll(".report-page-item-title");
-          
-                    pageContainers.forEach((element) => {
-                      (element as HTMLDivElement).style.background = isCoverPage ? "transparent" : "#f4f7f9";
-                      (element as HTMLDivElement).style.border = "none";
-                      (element as HTMLDivElement).style.padding = isCoverPage ? "0px" : "3rem 3rem 30rem";
-                      (element as HTMLDivElement).style.margin = isCoverPage ? "0px" : "initial";
-                    });
-          
-                    inputWrappers.forEach((inputWrapper) => {
-                      const input = inputWrapper.querySelector("input");
-                      const div = document.createElement("div");
-          
-                      div.innerText = (input as HTMLInputElement).value;
-          
-                      inputWrapper.replaceWith(div);
-                    });
-          
-                    textareas.forEach((textarea) => {
-                      const div = document.createElement("div");
-          
-                      if ((textarea as HTMLTextAreaElement).classList.contains("report-page-item-comment")) {
-                        if (isCoverPage) {
-                          (div as HTMLDivElement).style.display = "none";
-                        } else {
-                          (div as HTMLDivElement).style.fontSize = "24px";
-                          (div as HTMLDivElement).style.fontWeight = "400";
-                          (div as HTMLDivElement).style.opacity = "0.54";
-                          (div as HTMLDivElement).style.marginTop = "2rem";
-                        }
-                      }
-          
-                      if (isCoverPage) {
-                        if ((textarea as HTMLTextAreaElement).classList.contains("report-page-front-cover-title")) {
-                          (div as HTMLDivElement).style.fontSize = "32px";
-                          (div as HTMLDivElement).style.fontWeight = "300";
-                          (div as HTMLDivElement).style.lineHeight = "normal";
-                        }
-          
-                        if ((textarea as HTMLTextAreaElement).classList.contains("report-page-front-cover-comment")) {
-                          (div as HTMLDivElement).style.fontSize = "16px";
-                          (div as HTMLDivElement).style.fontWeight = "400";
-                          (div as HTMLDivElement).style.opacity = "0.54";
-                          (div as HTMLDivElement).style.lineHeight = "normal";
-                        }
-                      }
-          
-                      div.innerText = (textarea as HTMLTextAreaElement).value;
-          
-                      textarea.replaceWith(div);
-                    });
-          
-                    datePickerWrappers.forEach((inputWrapper) => {
-                      const input = inputWrapper.querySelector("input");
-                      const div = document.createElement("div");
-          
-                      if (isCoverPage) {
-                        (div as HTMLDivElement).style.fontSize = "12px";
-                        (div as HTMLDivElement).style.fontWeight = "400";
-                        (div as HTMLDivElement).style.opacity = "0.54";
-                      }
-          
-                      div.innerText = (input as HTMLInputElement).value;
-          
-                      inputWrapper.replaceWith(div);
-                    });
-          
-                    pageBlockContainers.forEach((element) => {
-                      (element as HTMLDivElement).style.background = "#ffffff";
-                    });
-          
-                    pageItemTitles.forEach((item) => {
-                      if (isCoverPage) {
-                        (item as HTMLDivElement).style.display = "none";
-                      } else {
-                        (item as HTMLDivElement).style.fontSize = "40px";
-                        (item as HTMLDivElement).style.fontWeight = "300";
-                        (item as HTMLDivElement).style.marginBottom = "2rem";
-                      }
-                    });*/
-                },
+        const container = document.querySelector(`#${id}`);
+        if (!container) {
+            setLoading(false);
+            return;
+        }
+        // Сохраняем оригинальные стили для восстановления
+        const originalStyles = {
+            overflow: container.style.overflow,
+            position: container.style.position,
+        };
+        // Временные стили для точного измерения
+        container.style.overflow = 'visible';
+        container.style.position = 'relative';
+        const pdf = new jspdf.jsPDF("p", "px", "a4", false);
+        const pageWidth = pdf.internal.pageSize.getWidth();
+        const pageHeight = pdf.internal.pageSize.getHeight();
+        const availableHeight = pageHeight - (2 * margin);
+        // Получаем все дочерние элементы
+        const children = Array.from(container.children);
+        let currentPageHeight = 0;
+        let currentPageElements = [];
+        const pages = [];
+        // Распределяем элементы по страницам
+        for (const child of children) {
+            const childHeight = child.offsetHeight;
+            // Если элемент не помещается на текущей странице, начинаем новую
+            if (currentPageHeight + childHeight > availableHeight && currentPageElements.length > 0) {
+                pages.push([...currentPageElements]);
+                currentPageElements = [];
+                currentPageHeight = 0;
+            }
+            currentPageElements.push(child);
+            currentPageHeight += childHeight;
+        }
+        // Добавляем последнюю страницу
+        if (currentPageElements.length > 0) {
+            pages.push(currentPageElements);
+        }
+        // Генерируем PDF для каждой страницы
+        for (let pageIndex = 0; pageIndex < pages.length; pageIndex++) {
+            if (pageIndex > 0) {
+                pdf.addPage();
+            }
+            const pageElements = pages[pageIndex];
+            // Создаем временный контейнер для текущей страницы
+            const tempContainer = document.createElement('div');
+            tempContainer.style.position = 'absolute';
+            tempContainer.style.left = '-9999px';
+            tempContainer.style.top = '0';
+            tempContainer.style.width = container.offsetWidth + 'px';
+            tempContainer.style.overflow = 'visible';
+            // Клонируем элементы для текущей страницы
+            pageElements.forEach(element => {
+                const clone = element.cloneNode(true);
+                tempContainer.appendChild(clone);
             });
-            const img = data.toDataURL("image/png");
-            const imgProperties = pdf.getImageProperties(img);
-            const pdfWidth = pdf.internal.pageSize.getWidth();
-            const pdfHeight = (imgProperties.height * pdfWidth) / imgProperties.width;
-            if (i > 0) {
-                pdf.addPage("a4", "landscape");
+            document.body.appendChild(tempContainer);
+            try {
+                const canvas = await html2canvas(tempContainer, {
+                    scale: 2,
+                    useCORS: true,
+                    logging: false,
+                    backgroundColor: '#ffffff',
+                    width: container.offsetWidth,
+                    height: tempContainer.offsetHeight,
+                });
+                const imgData = canvas.toDataURL('image/png', 1.0);
+                const imgWidth = pageWidth - (2 * margin);
+                const imgHeight = (canvas.height * imgWidth) / canvas.width;
+                // Центрируем по горизонтали и добавляем с верхним отступом
+                pdf.addImage(imgData, 'PNG', margin, margin, imgWidth, imgHeight);
+            }
+            catch (error) {
+                console.error('Error generating page:', error);
+            }
+            finally {
+                // Удаляем временный контейнер
+                document.body.removeChild(tempContainer);
             }
-            pdf.addImage(img, "PNG", 0, 0, pdfWidth, pdfHeight);
         }
-        pdf.save(`report_${dateFns.format(new Date(), "yyyy-MM-dd_HH:mm:ss")}.pdf`);
+        // Восстанавливаем оригинальные стили
+        container.style.overflow = originalStyles.overflow;
+        container.style.position = originalStyles.position;
+        pdf.save(`${dateFns.format(new Date(), "yyyy-MM-dd_HH:mm:ss")}.pdf`);
         setLoading(false);
-    }, [ids]);
+    }, [id, margin]);
     return { loading, onExport };
 };
 
@@ -9417,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";
@@ -9472,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;
@@ -9513,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))
@@ -9527,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 }) }));
@@ -10274,6 +10267,7 @@ exports.getActualExtrusionHeight = getActualExtrusionHeight;
 exports.getAttributeByName = getAttributeByName;
 exports.getAttributeValue = getAttributeValue;
 exports.getAttributesConfiguration = getAttributesConfiguration;
+exports.getChartAxes = getChartAxes;
 exports.getChartFilterName = getChartFilterName;
 exports.getChartMarkers = getChartMarkers;
 exports.getConfigFilter = getConfigFilter;
@@ -10302,6 +10296,7 @@ exports.getProxyService = getProxyService;
 exports.getRelatedAttribute = getRelatedAttribute;
 exports.getRenderElement = getRenderElement;
 exports.getResourceUrl = getResourceUrl;
+exports.getRootElementId = getRootElementId;
 exports.getSelectedFilterValue = getSelectedFilterValue;
 exports.getSlideshowImages = getSlideshowImages;
 exports.getSvgUrl = getSvgUrl;