@evergis/react 3.1.41 → 3.1.42

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

@@ -5,5 +5,6 @@ export declare const ChartLegend: FC<{
     chartElement?: ConfigContainerChild;
     type: WidgetType;
     twoColumns: boolean;
+    fontSize: string | number;
     loading: boolean;
 }>;

package/dist/components/Dashboard/components/ChartLegend/styled.d.ts

@@ -10,5 +10,6 @@ export declare const ChartLegendColor: import('styled-components').StyledCompone
     color: string;
 }, never>;
 export declare const ChartLegendName: import('styled-components').StyledComponent<"div", any, {
+    $fontSize?: string | number;
     $fontColor?: string;
 }, never>;

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

@@ -1,4 +1,5 @@
 export declare const ElementValueWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const InnerContainerWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const ContainerWrapper: any;
 export declare const DashboardChip: import('styled-components').StyledComponent<any, any, any, any>;
 export declare const DashboardPlaceholderWrap: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps, never>;

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

@@ -50,6 +50,7 @@ export interface ConfigOptions {
     dotSnapping?: boolean;
     tagView?: boolean;
     simple?: boolean;
+    downloadById?: string;
     separator?: string;
     lineBreak?: string;
     image?: string;

package/dist/index.js

@@ -4500,7 +4500,7 @@ const ChartLegendColor = styled.div `
 `;
 const ChartLegendName = styled.div `
   flex: 1;
-  font-size: 0.625rem;
+  font-size: ${({ $fontSize }) => $fontSize || "0.625rem"};
   color: ${({ theme: { palette }, $fontColor }) => $fontColor || palette.textPrimary};
 `;
 
@@ -5103,6 +5103,9 @@ const LayerListContainer = styled(uilibGl.Flex) `
 const ElementValueWrapper = styled.div `
   transition: background-color ${uilibGl.transition.toggle};
 `;
+const InnerContainerWrapper$1 = styled.div `
+  width: 100%;
+`;
 const ContainerWrapper = styled(uilibGl.Flex) `
   position: relative;
   min-height: 1rem;
@@ -6197,6 +6200,17 @@ const ContainerIconTitle = styled(uilibGl.Flex) `
   ${uilibGl.LegendToggler} {
     margin-left: 0.25rem;
   }
+  
+  span[kind="download"] {
+    opacity: 0;
+    transition: opacity ${uilibGl.transition.hover};
+  }
+  
+  :hover {
+    span[kind="download"] {
+      opacity: 1;
+    }
+  }
 `;
 const ContainerTitle = styled(uilibGl.Flex) `
   align-items: center;
@@ -6232,8 +6246,9 @@ const TitleContainer = React.memo(({ containerId, templateName, layerNames, font
     const [layersVisibility, toggleVisibility] = useToggle(true);
     const { palette } = styled.useTheme();
     const { style, options } = elementConfig || {};
-    const { simple } = options || {};
+    const { simple, downloadById } = options || {};
     const isLayers = templateName === exports.ContainerTemplate.Layers;
+    const { onExport } = useExportPdf(downloadById);
     const onClick = React.useCallback(() => {
         if (!expandable)
             return;
@@ -6248,7 +6263,7 @@ const TitleContainer = React.memo(({ containerId, templateName, layerNames, font
     const renderVisibility = React.useMemo(() => isLayers && (jsxRuntime.jsx(uilibGl.FlexSpan, { mr: "-1rem", children: jsxRuntime.jsx(uilibGl.IconToggle, { kind: layersVisibility ? "password_show" : "password_hide", className: "feature-visible", isSelected: layersVisibility, onClick: onToggleVisibility }) })), [isLayers, layersVisibility, onToggleVisibility]);
     const renderToggler = React.useMemo(() => !!containerId &&
         expandable && (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(uilibGl.LegendToggler, { color: palette.icon, toggled: expandedContainers?.[containerId] !== undefined ? expandedContainers[containerId] : expanded, onClick: onClick }) })), [containerId, expandable, expanded, expandedContainers, onClick, palette.icon]);
-    return (jsxRuntime.jsx(Container, { isTitle: isVisible, style: style, children: jsxRuntime.jsxs(ContainerTitle, { simple: simple, children: [jsxRuntime.jsxs(ContainerIconTitle, { fontColor: fontColor, children: [renderElement({ id: "titleIcon", wrap: false }), renderElement({ id: "title" }), isLayers && renderToggler] }), !isLayers && renderToggler, renderVisibility] }) }));
+    return (jsxRuntime.jsx(Container, { isTitle: isVisible, style: style, children: jsxRuntime.jsxs(ContainerTitle, { simple: simple, children: [jsxRuntime.jsxs(ContainerIconTitle, { fontColor: fontColor, children: [renderElement({ id: "titleIcon", wrap: false }), renderElement({ id: "title" }), !!downloadById && (jsxRuntime.jsx(uilibGl.IconButton, { kind: "download", onClick: onExport })), isLayers && renderToggler] }), !isLayers && renderToggler, renderVisibility] }) }));
 });
 
 const ContainerDivider = styled(uilibGl.Divider) `
@@ -7437,7 +7452,7 @@ const ElementImage = React.memo(({ type, elementConfig }) => {
 const ElementLegend = React.memo(({ type, element, elementConfig, expandedContainers }) => {
     const { attributes, dataSources } = useWidgetContext(type);
     const { options } = elementConfig || {};
-    const { twoColumns, chartId, relatedDataSources } = options || {};
+    const { twoColumns, chartId, relatedDataSources, fontSize } = options || {};
     const chartElement = React.useMemo(() => findAnd.returnFound(element?.children, { id: chartId }), [chartId, element?.children]);
     const { data, loading } = useChartData({
         element: chartElement,
@@ -7464,7 +7479,7 @@ const ElementLegend = React.memo(({ type, element, elementConfig, expandedContai
                 return { ...item, name: attribute?.alias || item.name };
             });
     }, [attributes, axes, data, options.chartType, relatedDataSources, dataSources]);
-    return !chartElement?.options?.expanded || expandedContainers?.[chartElement.id] ? (jsxRuntime.jsx(ChartLegend, { data: legendData, loading: loading, chartElement: chartElement, twoColumns: twoColumns, type: type })) : null;
+    return !chartElement?.options?.expanded || expandedContainers?.[chartElement.id] ? (jsxRuntime.jsx(ChartLegend, { data: legendData, loading: loading, chartElement: chartElement, twoColumns: twoColumns, fontSize: fontSize, type: type })) : null;
 });
 
 const ExternalLink = styled(uilibGl.IconButton).attrs(() => ({
@@ -9582,7 +9597,7 @@ const Chart = React.memo(({ config, element, elementConfig, type, renderElement
     return (jsxRuntime.jsx(ChartWrapper, { width: width, height: isStackBar ? "auto" : isPieChart ? width : height, column: column, loading: loading, children: renderChart }));
 });
 
-const ChartLegend = ({ data, chartElement, type, twoColumns, loading }) => {
+const ChartLegend = ({ data, chartElement, fontSize, type, twoColumns, loading }) => {
     const { t } = useGlobalContext();
     const { sliceItems, showMore, onShowMore } = useShownOtherItems(chartElement?.options);
     const axes = React.useMemo(() => getChartAxes(chartElement), [chartElement]);
@@ -9591,7 +9606,7 @@ const ChartLegend = ({ data, chartElement, type, twoColumns, loading }) => {
     const showMoreBtn = !!shownItems && data.length > shownItems;
     if (!loading && !data?.length && !!hideEmpty)
         return null;
-    return (jsxRuntime.jsxs(uilibGl.Flex, { flexDirection: "column", opacity: loading ? FILTERED_VALUE_OPACITY / 100 : 1, children: [jsxRuntime.jsx(ChartLegendContainer, { twoColumns: twoColumns, children: sliceItems(data)?.map(({ name, color }, index) => (jsxRuntime.jsxs(ChartLegendItem, { hasAnyFilter: hasAnyFilter, isFiltered: isFiltered(name), onClick: axes?.[0]?.filterName ? () => onFilter(name) : undefined, children: [jsxRuntime.jsx(ChartLegendColor, { color: color }), jsxRuntime.jsx(ChartLegendName, { "$fontColor": fontColor, children: name })] }, index))) }), showMoreBtn && (jsxRuntime.jsx(uilibGl.LegendToggler, { onClick: onShowMore, toggled: showMore, children: t("other", { ns: "dashboard", defaultValue: "Другое" }) }))] }));
+    return (jsxRuntime.jsxs(uilibGl.Flex, { flexDirection: "column", opacity: loading ? FILTERED_VALUE_OPACITY / 100 : 1, children: [jsxRuntime.jsx(ChartLegendContainer, { twoColumns: twoColumns, children: sliceItems(data)?.map(({ name, color }, index) => (jsxRuntime.jsxs(ChartLegendItem, { hasAnyFilter: hasAnyFilter, isFiltered: isFiltered(name), onClick: axes?.[0]?.filterName ? () => onFilter(name) : undefined, children: [jsxRuntime.jsx(ChartLegendColor, { color: color }), jsxRuntime.jsx(ChartLegendName, { "$fontSize": fontSize, "$fontColor": fontColor, children: name })] }, index))) }), showMoreBtn && (jsxRuntime.jsx(uilibGl.LegendToggler, { onClick: onShowMore, toggled: showMore, children: t("other", { ns: "dashboard", defaultValue: "Другое" }) }))] }));
 };
 
 const ContainerChildren = React.memo(({ items, isColumn, isMain, renderElement }) => {
@@ -9603,7 +9618,7 @@ const ContainerChildren = React.memo(({ items, isColumn, isMain, renderElement }
                 index,
                 wrap: isColumn || isMain,
             });
-            return isMain ? (jsxRuntime.jsx(ContainerWrapper, { "data-id": item.id, "data-templatename": item.templateName, children: jsxRuntime.jsx(DashboardWrapper, { children: render }) }, index)) : (jsxRuntime.jsx(React.Fragment, { children: render }, index));
+            return isMain ? (jsxRuntime.jsx(ContainerWrapper, { id: item.id, "data-templatename": item.templateName, children: jsxRuntime.jsx(DashboardWrapper, { children: render }) }, index)) : (jsxRuntime.jsx(InnerContainerWrapper$1, { id: item.id, children: render }, index));
         }) }));
 });
 
@@ -10185,6 +10200,7 @@ exports.HeaderTitleContainer = HeaderTitleContainer;
 exports.HiddenTitleItems = HiddenTitleItems;
 exports.IconContainer = IconContainer;
 exports.ImageContainer = ImageContainer;
+exports.InnerContainerWrapper = InnerContainerWrapper$1;
 exports.LEFT_PANEL_HEADER_HEIGHT = LEFT_PANEL_HEADER_HEIGHT;
 exports.Layer = Layer;
 exports.LayerDescription = LayerDescription;