@evergis/react 3.1.40 → 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/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/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

@@ -19,6 +19,7 @@ export interface ConfigRelatedDataSource {
     dataSourceName: string;
     attributeName: string;
     attributeTitle: string;
+    attributeUnits?: string;
     attributeColor?: string;
     alias?: string;
     chartAxis?: string;
@@ -46,8 +47,10 @@ export interface ConfigOptions {
     label?: string;
     withPadding?: boolean;
     withDivider?: boolean;
+    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(() => ({
@@ -8835,7 +8850,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 +8868,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 +8881,8 @@ const useChartData = ({ element, type }) => {
                 items: getDataFromAttributes(t, element, attributes),
                 layerInfo: null,
                 attributeName: null,
+                attributeUnits: null,
+                dataSourceName: null,
                 color: null
             }
         ];
@@ -9395,7 +9414,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 +9469,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 +9519,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 +9535,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 }) }));
@@ -9567,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]);
@@ -9576,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 }) => {
@@ -9588,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));
         }) }));
 });
 
@@ -10170,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;