@evergis/react 3.1.37 → 3.1.39

package/dist/components/Dashboard/containers/ExportPdfContainer/index.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { ContainerProps } from '../../types';
+export declare const ExportPdfContainer: FC<ContainerProps>;

package/dist/components/Dashboard/containers/registry.d.ts

@@ -27,5 +27,6 @@ export declare const containerComponents: {
     readonly Camera: import('react').FC<import('../types').ContainerProps>;
     readonly AddFeature: import('react').FC<import('../types').ContainerProps>;
     readonly Divider: import('react').FC<import('../types').ContainerProps>;
+    readonly ExportPdf: import('react').FC<import('../types').ContainerProps>;
     readonly default: import('react').FC<import('../types').ContainerProps>;
 };

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

@@ -4,7 +4,8 @@ export * from './useDashboardHeader';
 export * from './useDataSources';
 export * from './useDiffPage';
 export * from './useExpandableContainers';
-export * from './useFeatureFilters';
+export * from './useExportPdf';
+export * from './useWidgetFilters';
 export * from './useGetConfigLayer';
 export * from './useGlobalContext';
 export * from './useHeaderRender';

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

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

package/dist/components/Dashboard/hooks/{useFeatureFilters.d.ts → useWidgetFilters.d.ts}

@@ -1,5 +1,5 @@
 import { FilterItem, WidgetType } from '../types';
-export declare const useFeatureFilters: (type: WidgetType, filterName: string, items?: FilterItem[]) => {
+export declare const useWidgetFilters: (type: WidgetType, filterName: string, items?: FilterItem[]) => {
     filters: import('../types').SelectedFilters;
     formatFilterColor: (name: string, color: string, defaultColor?: string) => string;
     hasAnyFilter: boolean;

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

@@ -238,6 +238,7 @@ export declare enum ContainerTemplate {
     Camera = "Camera",
     AddFeature = "AddFeature",
     Slideshow = "Slideshow",
+    ExportPdf = "ExportPdf",
     Divider = "Divider"
 }
 export declare enum HeaderTemplate {

package/dist/index.js

@@ -16,6 +16,8 @@ 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 MapGL = require('react-map-gl/mapbox');
 require('@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css');
 require('mapbox-gl/dist/mapbox-gl.css');
@@ -3377,6 +3379,7 @@ exports.ContainerTemplate = void 0;
     ContainerTemplate["Camera"] = "Camera";
     ContainerTemplate["AddFeature"] = "AddFeature";
     ContainerTemplate["Slideshow"] = "Slideshow";
+    ContainerTemplate["ExportPdf"] = "ExportPdf";
     ContainerTemplate["Divider"] = "Divider";
 })(exports.ContainerTemplate || (exports.ContainerTemplate = {}));
 exports.HeaderTemplate = void 0;
@@ -5545,7 +5548,7 @@ const DataSourceInnerContainer = React.memo(({ config, elementConfig, feature, m
         t,
         valueElement?.attributeName
     ]);
-    const { hasAnyFilter, isFiltered, onFilter } = useFeatureFilters(type, filterName, data);
+    const { hasAnyFilter, isFiltered, onFilter } = useWidgetFilters(type, filterName, data);
     const render = React.useMemo(() => getRenderElement({
         config,
         elementConfig,
@@ -6004,7 +6007,7 @@ const PagesContainer = React.memo(({ type = exports.WidgetType.Dashboard, noBord
         setSelectedTabId,
         type,
     ]);
-    return (jsxRuntime.jsxs("div", { 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.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 }) })] }));
 });
 
 const TwoColumnsInnerContainer = React.memo(({ renderElement }) => {
@@ -6572,6 +6575,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 containerComponents = {
     [exports.ContainerTemplate.DefaultAttributes]: DefaultAttributesContainer,
     [exports.ContainerTemplate.Pages]: PagesContainer,
@@ -6593,6 +6602,7 @@ const containerComponents = {
     [exports.ContainerTemplate.Camera]: CameraContainer,
     [exports.ContainerTemplate.AddFeature]: AddFeatureContainer,
     [exports.ContainerTemplate.Divider]: DividerContainer,
+    [exports.ContainerTemplate.ExportPdf]: ExportPdfContainer,
     default: ContainersGroupContainer,
 };
 
@@ -8189,7 +8199,7 @@ const useBarChartFilter = ({ type, filter, elementConfig }) => {
     const width = React.useMemo(() => configWidth || amount * barFullWidth, [amount, barFullWidth, configWidth]);
     const data = React.useMemo(() => getDataFromFilterItems(filterItems), [filterItems]);
     const loading = isLoading && !amount;
-    const { formatFilterColor, onFilter } = useFeatureFilters(type, filterName, filterItems);
+    const { formatFilterColor, onFilter } = useWidgetFilters(type, filterName, filterItems);
     const colors = React.useMemo(() => getColorsFromFilterItems(filterItems, defaultColor, formatFilterColor), [defaultColor, filterItems, formatFilterColor]);
     const selectedRange = React.useMemo(() => getIndexRange(selectedPixels, amount, barFullWidth), [amount, barFullWidth, selectedPixels]);
     const customXAxis = React.useCallback(xAxis => {
@@ -9086,6 +9096,128 @@ const useExpandableContainers = () => {
     return [expandedContainers, expandContainer];
 };
 
+const useExportPdf = (ids) => {
+    const [loading, setLoading] = React.useState(false);
+    const onExport = React.useCallback(async () => {
+        if (ids.length === 0) {
+            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 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");
+            }
+            pdf.addImage(img, "PNG", 0, 0, pdfWidth, pdfHeight);
+        }
+        pdf.save(`report_${dateFns.format(new Date(), "yyyy-MM-dd_HH:mm:ss")}.pdf`);
+        setLoading(false);
+    }, [ids]);
+    return { loading, onExport };
+};
+
 const getMinMaxFromStringValue = (items, value, current, type) => {
     const valueIndex = items.findIndex(item => item.value === (type === "min" ? value.min : value.max));
     const currentIndex = items.findIndex(item => item.value === (type === "min" ? value.min : value.max));
@@ -9097,7 +9229,7 @@ const getMinMaxFromStringValue = (items, value, current, type) => {
             ? current.max
             : value.max;
 };
-const useFeatureFilters = (type, filterName, items) => {
+const useWidgetFilters = (type, filterName, items) => {
     const theme = styled.useTheme();
     const { filters, changeFilters } = useWidgetContext(type);
     const { currentPage } = useWidgetPage(type);
@@ -9264,7 +9396,7 @@ const useUpdateDataSource = ({ dataSource, config, filters, attributes, layerPar
 const StackBar = ({ data, filterName, type, alias, options, renderElement, renderTooltip }) => {
     const { height, showTotal, cornerRadius, groupTooltip } = options || {};
     const { t } = useGlobalContext();
-    const { hasAnyFilter, isFiltered, onFilter } = useFeatureFilters(type, filterName, data?.[0]?.items);
+    const { hasAnyFilter, isFiltered, onFilter } = useWidgetFilters(type, filterName, data?.[0]?.items);
     const { items, layerInfo, attributeName } = data?.[0] || {};
     const attribute = layerInfo?.layerDefinition.attributes[attributeName];
     const units = attribute?.stringFormat?.unitsLabel;
@@ -9320,7 +9452,7 @@ const Chart = React.memo(({ config, element, elementConfig, type, renderElement
         markers: configMarkers,
         showMarkers,
     });
-    const { formatFilterColor, onFilter } = useFeatureFilters(type, filterName, data?.[0]?.items);
+    const { formatFilterColor, onFilter } = useWidgetFilters(type, filterName, data?.[0]?.items);
     const formattedAttributes = React.useMemo(() => getFormattedAttributes(t, (data[0]?.items || []), attributes, element), [attributes, data, element, t]);
     const totalSum = React.useMemo(() => isRelated
         ? getTotalFromRelatedFeatures((data[0]?.items || []))
@@ -9461,7 +9593,7 @@ const ChartLegend = ({ data, chartElement, type, twoColumns, loading }) => {
     const { t } = useGlobalContext();
     const { sliceItems, showMore, onShowMore } = useShownOtherItems(chartElement?.options);
     const axes = React.useMemo(() => getChartAxes(chartElement), [chartElement]);
-    const { isFiltered, hasAnyFilter, onFilter } = useFeatureFilters(type, axes?.[0]?.filterName);
+    const { isFiltered, hasAnyFilter, onFilter } = useWidgetFilters(type, axes?.[0]?.filterName);
     const { fontColor, shownItems, hideEmpty } = chartElement?.options || {};
     const showMoreBtn = !!shownItems && data.length > shownItems;
     if (!loading && !data?.length && !!hideEmpty)
@@ -10209,7 +10341,7 @@ exports.useDataSources = useDataSources;
 exports.useDebouncedCallback = useDebouncedCallback;
 exports.useDiffPage = useDiffPage;
 exports.useExpandableContainers = useExpandableContainers;
-exports.useFeatureFilters = useFeatureFilters;
+exports.useExportPdf = useExportPdf;
 exports.useGetConfigLayer = useGetConfigLayer;
 exports.useGlobalContext = useGlobalContext;
 exports.useHeaderRender = useHeaderRender;
@@ -10226,6 +10358,7 @@ exports.useToggle = useToggle;
 exports.useUpdateDataSource = useUpdateDataSource;
 exports.useWidgetConfig = useWidgetConfig;
 exports.useWidgetContext = useWidgetContext;
+exports.useWidgetFilters = useWidgetFilters;
 exports.useWidgetPage = useWidgetPage;
 exports.useWindowResize = useWindowResize;
 exports.useZoomToFeatures = useZoomToFeatures;