@evergis/react 3.1.15 → 3.1.17

package/dist/react.esm.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { IconButton, Flex, transition, Chip, Icon, Description, FlexSpan, IconToggle, Popup, Menu, DraggableTree, shadows, Divider, LegendToggler, Tooltip, DropdownField, MultiSelectContainer, IconButtonButton, FlatButton, DraggableTreeContainer, LinearProgress, H2, ThemeProvider, defaultTheme, Preview, Blank, Popover, darkTheme, NumberRangeSlider, useAsyncAutocomplete, AutoComplete, Dropdown, Checkbox, CircularProgress, RangeNumberInput, dateFormat } from '@evergis/uilib-gl';
+import { IconButton, Flex, transition, Chip, Icon, Description, FlexSpan, IconToggle, Popup, Menu, DraggableTree, shadows, Divider, LegendToggler, Tooltip as Tooltip$1, DropdownField, MultiSelectContainer, IconButtonButton, FlatButton, DraggableTreeContainer, LinearProgress, H2, ThemeProvider, defaultTheme, Preview, Blank, Popover, darkTheme, NumberRangeSlider, useAsyncAutocomplete, AutoComplete, Dropdown, Checkbox, CircularProgress, RangeNumberInput, dateFormat } from '@evergis/uilib-gl';
 import { createContext, memo, useRef, useState, useEffect, useCallback, useContext, useMemo, Fragment } from 'react';
-import styled, { css, useTheme } from 'styled-components';
-import { lineChartClassNames, barChartClassNames, BarChart as BarChart$1, LineChart, PieChart } from '@evergis/charts';
+import styled, { createGlobalStyle, css, useTheme } from 'styled-components';
+import { lineChartClassNames, BarChart as BarChart$1, barChartClassNames, LineChart, PieChart } from '@evergis/charts';
 import { AttributeType, GeometryType } from '@evergis/api';
 import Gradient from 'javascript-color-gradient';
 import { Color as Color$1 } from '@evergis/color';
@@ -35,14 +35,18 @@ const ChartTooltipTable = styled.table `
   }
 `;
 const ChartTooltip = styled(Flex) `
-  flex-direction: row;
-  align-items: center;
   flex-wrap: nowrap;
+  background: rgb(48, 69, 79);
+  border-radius: 0.25rem;
+  color: white;
 
   :not(:last-child) {
     margin-bottom: 0.25rem;
   }
 `;
+const ChartTooltipLabel = styled.div `
+  margin-right: 0.25rem;
+`;
 const ChartTooltipColor = styled.div `
   width: 0.625rem;
   height: 0.625rem;
@@ -88,6 +92,115 @@ const ChartWrapperContainer = styled.div `
   position: relative;
   width: 100%;
 `;
+const Tooltip = styled.div `
+  position: relative;
+  border-radius: 0.25rem;
+  background-color: rgba(28, 33, 48);
+  padding: 0.5rem;
+  box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.15);
+  font-size: 0.75rem;
+  transform: ${({ transform }) => transform};
+  color: white;
+
+  :before {
+    position: absolute;
+    display: block;
+    content: "";
+    width: 0;
+    height: 0;
+  }
+`;
+const LineChartStyles = createGlobalStyle `
+  .dashboardLineChartTooltip.${lineChartClassNames.lineChartMouseLabel} {
+    .${lineChartClassNames.lineChartLabelFlex} {
+      justify-content: center;
+      align-items: flex-end;
+
+      ${Tooltip} {
+        margin: 0 0 12px 0;
+
+        :before {
+          top: auto;
+          bottom: 0;
+          left: 50%;
+          transform: translate(-50%, 100%);
+          border-left: 4px solid transparent;
+          border-right: 4px solid transparent;
+          border-top: 4px solid rgba(28, 33, 48, 0.9);
+        }
+      }
+    }
+  }
+  
+  .${lineChartClassNames.lineChartYScaleGlobal}, .${lineChartClassNames.lineChartXScaleGlobal} {
+    .domain {
+      visibility: hidden;
+    }
+
+    .tick {
+      text {
+        fill: ${({ theme: { palette } }) => palette.textDisabled};
+      }
+
+      line {
+        visibility: hidden;
+      }
+    }
+  }
+
+  .${lineChartClassNames.lineChartXScaleGlobal} {
+    .tick {
+      :first-of-type {
+        text {
+          text-anchor: start;
+        }
+      }
+
+      :last-of-type {
+        text {
+          text-anchor: end;
+        }
+      }
+    }
+  }
+
+  .${lineChartClassNames.lineChartLine} {
+    stroke-width: 2px;
+  }
+
+  .${lineChartClassNames.lineChartLabel} {
+    color: ${({ theme: { palette } }) => palette.textPrimary};
+  }
+
+  .${lineChartClassNames.lineChartMouseCircle} {
+    stroke: #ffffff;
+    stroke-width: 2px;
+  }
+
+  .${lineChartClassNames.lineChartGridLineX} {
+    stroke: ${({ theme: { palette } }) => palette.element};
+  }
+
+  text {
+    fill: ${({ theme: { palette } }) => palette.textDisabled};
+  }
+`;
+const StyledBarChart = styled(BarChart$1) `
+  .domain,
+  line {
+    display: none;
+  }
+
+  .tick {
+    text {
+      fill: ${({ theme: { palette } }) => palette.textDisabled};
+    }
+
+    line {
+      visibility: hidden;
+    }
+  }
+`;
 
 function range(start, stop, step) {
   start = +start, stop = +stop, step = (n = arguments.length) < 2 ? (stop = start, start = 0, 1) : n < 3 ? 1 : +step;
@@ -3882,41 +3995,7 @@ function wrap() {
         textLength = self.node().getComputedTextLength();
     }
 }
-// https://jr.everpoint.ru/browse/PUB-5221
-/* function wrap2(text, width, content) {
-  text.each(() => {
-    const textElem = d3.select(this);
-    const words = content.split(/\s+/).reverse();
-    let word;
-    let line = [];
-    let lineNumber = 0;
-    const lineHeight = 1.1; // ems
-    const x = 0; // textElem.attr("x");
-    const y = 0; // textElem.attr("y");
-    const dy = 0; // parseFloat(text.attr("dy")),
-    // eslint-disable-next-line newline-per-chained-call
-    let tspan = textElem.text(null).append("tspan").attr("x", x).attr("y", y).attr("dy", `${dy}em`);
-
-    // eslint-disable-next-line no-cond-assign
-    while ((word = words.pop())) {
-      line.push(word);
-      tspan.text(line.join(" "));
-      if (tspan.node().getComputedTextLength() > width) {
-        line.pop();
-        tspan.text(line.join(" "));
-        line = [word];
-        tspan = textElem
-          .append("tspan")
-          .attr("x", x)
-          .attr("y", y)
-          // eslint-disable-next-line no-plusplus
-          .attr("dy", `${++lineNumber * lineHeight + dy}em`)
-          .text(word);
-      }
-    }
-  });
-}*/
-const useChartChange = ({ dataSources, chartId, width, height, relatedAttributes, defaultColor, fontColor, }) => {
+const useChartChange = ({ dataSources, chartId, width, height, relatedAttributes, defaultColor, fontColor, showMarkers, }) => {
     const { t } = useGlobalContext();
     const { layerInfos } = useWidgetContext();
     const strokeColors = relatedAttributes.filter(({ chartAxis }) => chartAxis === "y").map(({ axisColor }) => axisColor);
@@ -3953,11 +4032,17 @@ const useChartChange = ({ dataSources, chartId, width, height, relatedAttributes
             if (index === nodes.length - 1) {
                 nodes[index].style.textAnchor = "end";
             }
-            if (index && index < nodes.length - 1) {
-                nodes[index].remove();
+            if (showMarkers) {
+                if (index % (showMarkers || 1) !== 0) {
+                    nodes[index].remove();
+                }
+            }
+            else {
+                if (index && index < nodes.length - 1) {
+                    nodes[index].remove();
+                }
             }
         });
-        // svg.selectAll(`.${lineChartClassNames.lineChartXScaleGlobal} .tick text`).call(wrap2, 5, "!!!");
         svg.selectAll(`.${lineChartClassNames.lineChartXScaleGlobal} .tick text`).attr("y", 16);
         svg
             .selectAll(`.${lineChartClassNames.lineChartYScaleGlobal} .tick text`)
@@ -4003,7 +4088,7 @@ const useChartChange = ({ dataSources, chartId, width, height, relatedAttributes
             onChange();
         });
         svg.append("defs").html(() => defs.join(""));
-    }, [fontColor, dataSources, layerInfos, relatedAttributes, chartId, strokeColors, defaultColor, width, onChange]);
+    }, [fontColor, dataSources, layerInfos, relatedAttributes, chartId, strokeColors, defaultColor, width, onChange, showMarkers]);
     return [customize, onChange];
 };
 
@@ -5292,7 +5377,11 @@ const getChartFilterName = (relatedDataSources) => {
     return axes?.[0]?.filterName;
 };
 
-const getChartMarkers = (items, markers) => {
+const getChartMarkers = (items, markers, dataSources) => {
+    if (typeof markers === "string") {
+        const dataSource = getDataSource(markers, dataSources);
+        return dataSource?.features?.map(({ attributes }) => attributes) || [];
+    }
     return (markers?.map(marker => ({
         ...marker,
         value: items?.findIndex(({ name }) => name.toString() === marker.value?.toString()),
@@ -5618,7 +5707,7 @@ const ProgressContainer = memo(({ type, elementConfig, feature, maxValue, index,
     const color = useMemo(() => colorAttribute
         ? attributes?.find(({ name }) => name === colorAttribute)?.value
         : colors?.[index] || bgColor, [attributes, bgColor, colorAttribute, colors, index]);
-    return (jsx(Tooltip, { content: renderTooltip, placement: "top", arrow: true, children: ref => (jsxs(ProgressContainerWrapper, { ref: ref, style: innerTemplateStyle || style, children: [renderIcon && jsx(ProgressIcon, { children: renderIcon }), jsxs(ProgressContent, { children: [!hideTitle && (jsxs(ProgressAlias, { children: [jsx("div", { children: renderAlias }), jsxs(ProgressValue, { children: [renderValue, unitsElement && jsx(ProgressUnits, { children: renderElement({ id: "units" }) })] })] })), jsxs(ProgressBarContainer, { innerValue: innerValue, children: [jsx(ProgressBarWrapper, { children: jsx(ProgressBar, { "$width": width, "$color": color }) }), !!(hideTitle || innerValue) && jsx(ProgressInnerValue, { children: renderValue })] })] })] })) }));
+    return (jsx(Tooltip$1, { content: renderTooltip, placement: "top", arrow: true, children: ref => (jsxs(ProgressContainerWrapper, { ref: ref, style: innerTemplateStyle || style, children: [renderIcon && jsx(ProgressIcon, { children: renderIcon }), jsxs(ProgressContent, { children: [!hideTitle && (jsxs(ProgressAlias, { children: [jsx("div", { children: renderAlias }), jsxs(ProgressValue, { children: [renderValue, unitsElement && jsx(ProgressUnits, { children: renderElement({ id: "units" }) })] })] })), jsxs(ProgressBarContainer, { innerValue: innerValue, children: [jsx(ProgressBarWrapper, { children: jsx(ProgressBar, { "$width": width, "$color": color }) }), !!(hideTitle || innerValue) && jsx(ProgressInnerValue, { children: renderValue })] })] })] })) }));
 });
 
 const RANGE_MIN_VALUE = 0;
@@ -5714,7 +5803,6 @@ const AnyChartWrapper = styled.div `
 `;
 const BarChartWrapper = styled(AnyChartWrapper) `
   width: 100%;
-  max-width: ${MAX_CHART_WIDTH}px;
   margin: 0 auto ${BAR_CHART_FOOTER_MARGIN}px;
 
   :hover {
@@ -5844,7 +5932,7 @@ const PagesContainer = memo(({ type }) => {
     const { pageIndex, currentPage } = useWidgetPage(type);
     const { selectedTabId, setSelectedTabId, expandedContainers, attributes } = useWidgetContext(type);
     const { options } = config || {};
-    const { column } = options || {};
+    const { column, width } = options || {};
     const isColumn = column === undefined || column;
     const filteredChildren = useMemo(() => !selectedTabId
         ? currentPage.children
@@ -5869,7 +5957,7 @@ const PagesContainer = memo(({ type }) => {
         setSelectedTabId,
         type,
     ]);
-    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: config, type: type, renderElement: renderElement }), jsx(Container, { isColumn: isColumn, isMain: true, children: jsx(ContainerChildren, { items: filteredChildren, isMain: true, renderElement: renderElement }) })] }));
+    return (jsxs("div", { style: { width }, children: [jsx(ExpandableTitle, { elementConfig: config, type: type, renderElement: renderElement }), jsx(Container, { isColumn: isColumn, isMain: true, children: jsx(ContainerChildren, { items: filteredChildren, isMain: true, renderElement: renderElement }) })] }));
 });
 
 const TwoColumnsInnerContainer = memo(({ renderElement }) => {
@@ -6268,6 +6356,7 @@ const TabsContainer = memo(({ elementConfig, type }) => {
     return (jsx(SwiperContainer, { style: style, children: jsx(Swiper, { spaceBetween: 0, slidesPerView: shownItems || 2, children: tabs.map(({ id, value, options: tabOptions }) => (jsxs(SwiperSlide, { children: [jsxs(TabContainer, { href: `#${id}`, active: selectedTabId === id, column: column, bgColor: bgColor, noBg: noBg, radius: radius, onlyIcon: onlyIcon, hasIcon: !!tabOptions?.icon, onClick: () => onClick(id), children: [renderIcon(tabOptions?.icon, selectedTabId === id), !onlyIcon && (jsx(TabValue, { children: jsx(TextTrim, { maxLength: maxLength, children: value }) }))] }), jsx(TabAnchor, { id: id })] }, id))) }) }));
 });
 
+const ContainerIconValue = styled(Flex) ``;
 const RoundedBackgroundContainerWrapper = styled(Flex) `
   position: relative;
   flex-direction: ${({ $bigIcon }) => ($bigIcon ? "row" : "column")};
@@ -6285,13 +6374,10 @@ const RoundedBackgroundContainerWrapper = styled(Flex) `
     css `
       align-items: center;
 
-      * {
+      > * {
         display: flex;
         justify-content: center;
         text-align: center;
-      }
-
-      > * {
         width: 100%;
       }
     `};
@@ -6324,8 +6410,32 @@ const RoundedBackgroundContainerWrapper = styled(Flex) `
       }
     `};
 
+  ${ContainerIconValue} {
+    align-items: center;
+    flex-direction: column;
+
+    ${({ $big }) => $big &&
+    css `
+        flex-direction: row;
+        margin-bottom: 0.5rem;
+
+        > * {
+          text-align: left;
+        }
+
+        span[kind] {
+          margin-right: 0.5rem;
+        }
+        
+        ${ContainerValue} {
+          width: auto;
+        }
+      `};
+  }
+
   ${ContainerValue} {
     flex-direction: ${({ $inlineUnits }) => ($inlineUnits ? "row" : "column")};
+    justify-content: ${({ $big }) => ($big ? "flex-start" : "flex-end")};
     align-items: ${({ $inlineUnits }) => ($inlineUnits ? "center" : "flex-start")};
     line-height: 1;
   }
@@ -6349,15 +6459,17 @@ const RoundedBackgroundContainer = memo(({ type, elementConfig, feature, renderE
         feature
     });
     const { options, style, children } = elementConfig || {};
-    const { maxLength, center, fontColor, innerTemplateStyle, inlineUnits, bigIcon, hideEmpty, colorAttribute } = options || {};
+    const { maxLength, center, fontColor, innerTemplateStyle, inlineUnits, big, bigIcon, hideEmpty, colorAttribute } = options || {};
     const aliasElement = children?.find(({ id }) => id === "alias");
     const unitsElement = children?.find(({ id }) => id === "units");
     const valueElement = children?.find(({ id }) => id === "value");
     const value = renderElement({ id: "value" });
     const color = useMemo(() => attributes?.find(({ name }) => name === colorAttribute)?.value || fontColor, [attributes, colorAttribute, fontColor]);
+    const renderAlias = useMemo(() => (jsx(ContainerAlias, { style: aliasElement?.style, children: jsx(TextTrim, { maxLength: maxLength || ALIAS_DEFAULT_MAX_LENGTH, children: renderElement({ id: "alias", wrap: false }) }) })), [aliasElement?.style, maxLength, renderElement]);
+    const renderValue = useMemo(() => (jsxs(ContainerValue, { style: valueElement?.style, big: true, children: [value, !!unitsElement && (jsx(ContainerUnits, { style: unitsElement?.style, children: renderElement({ id: "units" }) }))] })), [valueElement?.style, value, unitsElement, renderElement]);
     if (!value && hideEmpty)
         return null;
-    return (jsxs(RoundedBackgroundContainerWrapper, { style: innerTemplateStyle || style, "$center": center, "$color": color, "$inlineUnits": inlineUnits, "$bigIcon": bigIcon, children: [renderElement({ id: "icon", wrap: false }), jsxs(ContainerValue, { style: valueElement?.style, big: true, children: [value, !!unitsElement && (jsx(ContainerUnits, { style: unitsElement?.style, children: renderElement({ id: "units" }) }))] }), jsx(ContainerAlias, { style: aliasElement?.style, children: jsx(TextTrim, { maxLength: maxLength || ALIAS_DEFAULT_MAX_LENGTH, children: renderElement({ id: "alias", wrap: false }) }) })] }));
+    return (jsxs(RoundedBackgroundContainerWrapper, { style: innerTemplateStyle || style, "$center": center, "$color": color, "$inlineUnits": inlineUnits, "$big": big, "$bigIcon": bigIcon, children: [jsxs(ContainerIconValue, { children: [renderElement({ id: "icon", wrap: false }), big ? renderAlias : renderValue] }), big ? renderValue : renderAlias] }));
 });
 
 const AddFeatureContainer = memo(({ elementConfig }) => {
@@ -6543,7 +6655,7 @@ var EditGeometryType;
 const DashboardDefaultHeader = memo(() => {
     const { components: { ProjectCatalogMenu, ProjectPanelMenu, ProjectPagesMenu }, } = useWidgetContext();
     const { pageId, image, icon, tooltip, themeName } = useDashboardHeader();
-    return (jsxs(DefaultHeaderContainer, { image: image, isDark: themeName === ThemeName.Dark, children: [!pageId && jsx(LinearProgress, {}), jsxs(Flex, { column: true, gap: "1rem", children: [jsx(FlexSpan, { children: jsxs(TopContainer, { children: [jsx(LogoContainer, { children: icon }), jsxs(TopContainerButtons, { children: [jsx(ProjectCatalogMenu, {}), jsx(ProjectPanelMenu, {})] })] }) }), jsx(FlexSpan, { children: jsx(Flex, { column: true, gap: "0.25rem", children: jsx(FlexSpan, { children: jsxs(Flex, { alignItems: "center", children: [jsx(FlexSpan, { flexGrow: 1, children: jsx(Tooltip, { arrow: true, content: tooltip, children: ref => (jsx(PageTitle, { ref: ref, children: jsx(ProjectPagesMenu, {}) })) }) }), jsx(FlexSpan, { children: jsx(Pagination, {}) })] }) }) }) })] })] }));
+    return (jsxs(DefaultHeaderContainer, { image: image, isDark: themeName === ThemeName.Dark, children: [!pageId && jsx(LinearProgress, {}), jsxs(Flex, { column: true, gap: "1rem", children: [jsx(FlexSpan, { children: jsxs(TopContainer, { children: [jsx(LogoContainer, { children: icon }), jsxs(TopContainerButtons, { children: [jsx(ProjectCatalogMenu, {}), jsx(ProjectPanelMenu, {})] })] }) }), jsx(FlexSpan, { children: jsx(Flex, { column: true, gap: "0.25rem", children: jsx(FlexSpan, { children: jsxs(Flex, { alignItems: "center", children: [jsx(FlexSpan, { flexGrow: 1, children: jsx(Tooltip$1, { arrow: true, content: tooltip, children: ref => (jsx(PageTitle, { ref: ref, children: jsx(ProjectPagesMenu, {}) })) }) }), jsx(FlexSpan, { children: jsx(Pagination, {}) })] }) }) }) })] })] }));
 });
 
 const HeaderFrontView = styled(Flex) `
@@ -6645,7 +6757,7 @@ const HeaderTitle = ({ noFeature }) => {
             })) ||
             feature?.id);
     }, [attributes, feature, layerDefinition]);
-    return (jsxs(HeaderTitleContainer, { children: [noFeature ? (jsx(FeatureTitleContainer, { children: t("noObjectFound", { ns: "dashboard" }) })) : (jsx(FeatureTitleContainer, { clickable: true, children: jsx(Tooltip, { arrow: true, placement: "top", content: t("zoomToFeature", { ns: "dashboard" }), delay: [600, 0], children: ref => (jsx(FlexSpan, { ref: ref, onClick: () => zoomToFeatures([feature]), children: resultTitle })) }) })), jsx(LayerDescription, { title: resultDescription, children: resultDescription })] }));
+    return (jsxs(HeaderTitleContainer, { children: [noFeature ? (jsx(FeatureTitleContainer, { children: t("noObjectFound", { ns: "dashboard" }) })) : (jsx(FeatureTitleContainer, { clickable: true, children: jsx(Tooltip$1, { arrow: true, placement: "top", content: t("zoomToFeature", { ns: "dashboard" }), delay: [600, 0], children: ref => (jsx(FlexSpan, { ref: ref, onClick: () => zoomToFeatures([feature]), children: resultTitle })) }) })), jsx(LayerDescription, { title: resultDescription, children: resultDescription })] }));
 };
 
 const LayerIconContainer = styled.div `
@@ -7394,7 +7506,7 @@ const ElementTooltip = memo(({ type, elementConfig }) => {
     const { icon } = options || {};
     const attribute = getAttributeByName(attributeName, attributes);
     const text = (attribute?.value || elementConfig?.value);
-    return text ? (jsx(Tooltip, { placement: "top", arrow: true, content: text, children: ref => jsx(TooltipIcon, { kind: icon || "question", ref: ref }) })) : null;
+    return text ? (jsx(Tooltip$1, { placement: "top", arrow: true, content: text, children: ref => jsx(TooltipIcon, { kind: icon || "question", ref: ref }) })) : null;
 });
 
 const SlideshowHeaderWrapper = styled.div `
@@ -8021,7 +8133,7 @@ const useBarChartFilter = ({ type, filter, elementConfig }) => {
         bars.attr("rx", radius).attr("ry", radius);
     }, [radius]);
     const tooltipY = useMemo(() => (barHeight ? height - barHeight - DEFAULT_BAR_CHART_MARGINS.bottom : undefined), [barHeight, height]);
-    const markers = useMemo(() => getChartMarkers(filterItems, configMarkers), [configMarkers, filterItems]);
+    const markers = useMemo(() => getChartMarkers(filterItems, configMarkers, dataSources), [configMarkers, dataSources, filterItems]);
     const hasDefinedColors = useMemo(() => configColors?.length || colorAttribute, [configColors, colorAttribute]);
     const marshalledMap = useCallback(items => {
         if (hasDefinedColors)
@@ -8353,7 +8465,7 @@ const getRenderElement = ({ t, config, elementConfig, attributes = [], layerInfo
     return formatElementValue({ t, value, elementConfig: element, attributes, wrap });
 };
 
-const getResourceUrl = (url) => url ? (url.startsWith("http") ? url : `/sp/resources/${url}/download`) : "";
+const getResourceUrl = (url) => url ? (url.startsWith("http") ? url : `/sp/resources/file/${url}`) : "";
 
 const getSlideshowImages = ({ element, attribute, }) => {
     const { defaultValue, options } = element;
@@ -8406,7 +8518,7 @@ const pieChartTooltipFromAttributes = (t, data, attributes) => {
 const pieChartTooltipFromRelatedFeatures = (t, data, relatedAttributes, layerInfo) => {
     if (!data?.length)
         return "";
-    return (jsx(ThemeProvider, { children: jsxs(ChartTooltip, { children: [jsx(ChartTooltipColor, { "$color": data[0].color }), jsxs("div", { children: [data[0].name, " \u00A0 ", formatChartRelatedValue(t, data[0].value, layerInfo, relatedAttributes)] })] }) }));
+    return (jsx(ThemeProvider, { children: jsxs(ChartTooltip, { alignItems: "center", children: [jsx(ChartTooltipColor, { "$color": data[0].color }), jsxs("div", { children: [data[0].name, " \u00A0 ", formatChartRelatedValue(t, data[0].value, layerInfo, relatedAttributes)] })] }) }));
 };
 
 const removeDataSource = (dashboardConfiguration, name, pageIndex) => {
@@ -8988,21 +9100,22 @@ const StackBar = ({ data, filterName, type, alias, options, renderElement, rende
     const units = attribute?.stringFormat?.unitsLabel;
     const total = useMemo(() => items?.reduce((result, { value }) => result + Number(value), 0) || 0, [items]);
     const getWidth = useCallback(value => ((Number(value) / total) * 100).toFixed(2), [total]);
-    const renderGroupTooltip = useMemo(() => (jsx(ThemeProvider, { children: jsx(ChartTooltipTable, { cellPadding: 0, cellSpacing: 0, children: items?.map(({ name, value, color }, index) => (jsxs("tr", { children: [jsx("td", { children: jsxs(ChartTooltip, { children: [jsx(ChartTooltipColor, { "$color": color }), jsx(ChartTooltipName, { children: name })] }) }), jsx("td", { children: value })] }, index))) }) })), [items]);
+    const renderGroupTooltip = useMemo(() => (jsx(ThemeProvider, { children: jsx(ChartTooltipTable, { cellPadding: 0, cellSpacing: 0, children: items?.map(({ name, value, color }, index) => (jsxs("tr", { children: [jsx("td", { children: jsxs(ChartTooltip, { alignItems: "center", children: [jsx(ChartTooltipColor, { "$color": color }), jsx(ChartTooltipName, { children: name })] }) }), jsx("td", { children: value })] }, index))) }) })), [items]);
     const renderItem = useCallback(({ name, value, color }, ref) => (jsx(StackBarSection, { ref: ref, "$width": getWidth(value), "$height": height, "$color": color, cornerRadius: cornerRadius, hasAnyFilter: hasAnyFilter, isFiltered: isFiltered(name), onClick: filterName ? () => onFilter(name) : undefined })), [cornerRadius, filterName, getWidth, hasAnyFilter, height, isFiltered, onFilter]);
-    const renderItems = useMemo(() => (jsx(Fragment$1, { children: items?.map((item, index) => (jsx(Fragment, { children: groupTooltip ? (renderItem(item)) : (jsx(ThemeProvider, { children: jsx(Tooltip, { placement: "top", arrow: true, content: renderTooltip([item]), children: ref => renderItem(item, ref) }) })) }, index))) })), [groupTooltip, items, renderItem, renderTooltip]);
+    const renderItems = useMemo(() => (jsx(Fragment$1, { children: items?.map((item, index) => (jsx(Fragment, { children: groupTooltip ? (renderItem(item)) : (jsx(ThemeProvider, { children: jsx(Tooltip$1, { placement: "top", arrow: true, content: renderTooltip([item]), children: ref => renderItem(item, ref) }) })) }, index))) })), [groupTooltip, items, renderItem, renderTooltip]);
     if (!total || !attribute)
         return null;
-    return (jsxs(Fragment$1, { children: [(alias || showTotal) && (jsxs(StackBarHeader, { children: [jsx(StackBarAlias, { children: renderElement({ id: "alias" }) }), showTotal && (jsxs(StackBarTotal, { children: [jsx(StackBarValue, { children: formatAttributeValue({ t, type: attribute.type, value: total, stringFormat: attribute.stringFormat, noUnits: true }) }), !!units && jsx(StackBarUnits, { children: units })] }))] })), groupTooltip ? (jsx(Tooltip, { placement: "top", arrow: true, content: renderGroupTooltip, children: ref => jsx(StackBarContainer, { ref: ref, children: renderItems }) })) : (jsx(StackBarContainer, { children: renderItems }))] }));
+    return (jsxs(Fragment$1, { children: [(alias || showTotal) && (jsxs(StackBarHeader, { children: [jsx(StackBarAlias, { children: renderElement({ id: "alias" }) }), showTotal && (jsxs(StackBarTotal, { children: [jsx(StackBarValue, { children: formatAttributeValue({ t, type: attribute.type, value: total, stringFormat: attribute.stringFormat, noUnits: true }) }), !!units && jsx(StackBarUnits, { children: units })] }))] })), groupTooltip ? (jsx(Tooltip$1, { placement: "top", arrow: true, content: renderGroupTooltip, children: ref => jsx(StackBarContainer, { ref: ref, children: renderItems }) })) : (jsx(StackBarContainer, { children: renderItems }))] }));
 };
 
 const Chart = memo(({ config, element, elementConfig, type, renderElement }) => {
     const theme = useTheme();
     const { palette } = theme;
+    const primaryColor = palette.primary;
     const { t } = useGlobalContext();
-    const { expandedContainers, layerInfos, attributes } = useWidgetContext(type);
+    const { expandedContainers, layerInfos, attributes, dataSources } = useWidgetContext(type);
     const { id, options, children } = element || {};
-    const { column, markers: configMarkers, showTotal, expandable, expanded, chartType, relatedDataSources, defaultColor } = options || {};
+    const { column, markers: configMarkers, showLabels, showMarkers, showTotal, totalWord: configTotalWord, totalAttribute, expandable, expanded, chartType, relatedDataSources, defaultColor } = options || {};
     const isLineChart = chartType === "line";
     const isPieChart = chartType === "pie";
     const isStackBar = chartType === "stack";
@@ -9014,23 +9127,17 @@ const Chart = memo(({ config, element, elementConfig, type, renderElement }) =>
     const angle = options?.angle || DEFAULT_CHART_ANGLE;
     const barWidth = options?.barWidth || DEFAULT_BAR_WIDTH;
     const cornerRadius = options?.cornerRadius || 0;
-    const primaryColor = theme.palette.primary;
     const relatedAttributes = useMemo(() => relatedDataSources || [], [relatedDataSources]);
     const axes = useMemo(() => relatedAttributes.filter(({ chartAxis }) => chartAxis === "y"), [relatedAttributes]);
     const filterName = getChartFilterName(relatedDataSources);
     const isRelated = !!relatedAttributes?.length;
     const { data, loading } = useChartData({ element, type });
     const totalWidthFromBarWidth = (data[0]?.items?.length || 0) * (barWidth + padding);
-    const width = options?.width
-        ? options.width > MAX_CHART_WIDTH
-            ? MAX_CHART_WIDTH
-            : options.width
-        : isStackBar
+    const width = options?.width ? options.width :
+        isStackBar
             ? "100%"
             : isBarChart
-                ? totalWidthFromBarWidth < MAX_CHART_WIDTH
-                    ? MAX_CHART_WIDTH
-                    : totalWidthFromBarWidth
+                ? totalWidthFromBarWidth || MAX_CHART_WIDTH
                 : DEFAULT_CHART_WIDTH;
     const [customize] = useChartChange({
         dataSources: config.dataSources,
@@ -9039,16 +9146,17 @@ const Chart = memo(({ config, element, elementConfig, type, renderElement }) =>
         height,
         fontColor,
         relatedAttributes,
-        defaultColor: primaryColor
+        defaultColor: primaryColor,
+        showMarkers,
     });
     const { formatFilterColor, onFilter } = useFeatureFilters(type, filterName, data?.[0]?.items);
     const formattedAttributes = useMemo(() => getFormattedAttributes(t, (data[0]?.items || []), attributes, element), [attributes, data, element, t]);
     const totalSum = useMemo(() => isRelated
         ? getTotalFromRelatedFeatures((data[0]?.items || []))
         : getTotalFromAttributes(children, formattedAttributes), [data, children, formattedAttributes, isRelated]);
-    const totalWord = useMemo(() => options?.totalAttribute
-        ? attributes?.find(({ name }) => name === options.totalAttribute)?.value
-        : options?.totalWord, [attributes, options.totalAttribute, options?.totalWord]);
+    const totalWord = useMemo(() => totalAttribute
+        ? attributes?.find(({ name }) => name === totalAttribute)?.value
+        : configTotalWord, [attributes, totalAttribute, configTotalWord]);
     const renderPieChartTooltip = useCallback(item => isRelated
         ? pieChartTooltipFromRelatedFeatures(t, item, relatedAttributes, data[0]?.layerInfo)
         : pieChartTooltipFromAttributes(t, item, formattedAttributes), [data, formattedAttributes, isRelated, relatedAttributes]);
@@ -9059,19 +9167,25 @@ const Chart = memo(({ config, element, elementConfig, type, renderElement }) =>
         return result?.filter((name, index) => result.indexOf(name) === index);
     }, [data, isLineChart]);
     const renderLineChartTooltip = useCallback((items, { indexX }) => {
-        return (jsx(ThemeProvider, { children: jsxs(ChartTooltip, { children: [jsx("div", { 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 (jsxs(ChartTooltipRow, { children: [jsx(ChartLegendColor$1, { "$color": stroke }), jsx(ChartLegendValue, { children: attribute ? formatAttributeValue({ t, type: attribute.type, value, stringFormat: attribute.stringFormat }) : value })] }, index));
-                    })] }) }));
+        return (jsxs(Tooltip, { children: [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 (jsxs(ChartTooltipRow, { children: [jsx(ChartLegendColor$1, { "$color": stroke }), jsx(ChartLegendValue, { children: attribute ? formatAttributeValue({ t, type: attribute.type, value, stringFormat: attribute.stringFormat }) : value })] }, index));
+                })] }));
     }, [labels, layerInfos]);
-    const markers = useMemo(() => getChartMarkers(data[0]?.items, configMarkers), [data, configMarkers]);
+    const markers = useMemo(() => getChartMarkers(data[0]?.items, configMarkers, dataSources), [data, dataSources, configMarkers]);
     const formatTooltipName = useCallback((name) => (isRelated ? name : tooltipNameFromAttributes(name, formattedAttributes)), [formattedAttributes, isRelated]);
     const formatTooltipValue = useCallback((value, name) => isRelated
         ? tooltipValueFromRelatedFeatures(t, value, relatedAttributes, data[0]?.layerInfo)
         : tooltipValueFromAttributes(t, value, name, formattedAttributes), [data, formattedAttributes, isRelated, relatedAttributes]);
+    const customXAxisBottom = useCallback((xAxisBottom, data) => {
+        xAxisBottom.tickFormat((index) => (showMarkers
+            ? index % (showMarkers || 1) === 0
+            : index === 0 || index === data.length - 1)
+            ? data[index]?.groupName || "" : "");
+    }, [showMarkers]);
     const renderChart = useMemo(() => {
         if (!element)
             return null;
@@ -9089,16 +9203,16 @@ const Chart = memo(({ config, element, elementConfig, type, renderElement }) =>
                 .flat()
                 .map(({ values }) => values)
                 .flat();
-            return (jsx(AnyChartWrapper, { height: height, children: jsx(LineChart, { data: lineChartData, labels: labels, 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, drawGridX: !isHidedY, margin: {
-                        top: 0,
-                        right: 0,
-                        bottom: 0,
-                        left: 0
-                    } }) }));
+            return (jsxs(AnyChartWrapper, { height: height, children: [jsx(LineChartStyles, {}), jsx(LineChart, { data: lineChartData, labels: labels, 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
+                        } })] }));
         }
         if (isStackBar) {
             return (jsx(AnyChartWrapper, { height: height, children: jsx(StackBar, { data: data, filterName: filterName, type: type, alias: elementConfig?.children?.find(child => child.id === "alias"), options: options, renderTooltip: renderPieChartTooltip, renderElement: renderElement }) }));
@@ -9111,17 +9225,20 @@ const Chart = memo(({ config, element, elementConfig, type, renderElement }) =>
                         color: formatFilterColor(item.name, item.color, defaultColor)
                     })) || []), width: +width, height: +width, padAngle: angle, outerRadius: radius, cornerRadius: cornerRadius, renderTooltip: renderPieChartTooltip, withTooltip: true, onClick: filterName ? item => onFilter(item.name) : undefined, children: showTotal && jsx(PieChartCenter, { children: totalWord || roundTotalSum(+totalSum) }) }) }));
         }
+        const barChartData = getDataFromFilterItems(data[0]?.items);
+        const markersMargin = showMarkers ? 10 : 0;
         const margin = {
-            top: 0,
-            right: 0,
-            bottom: markers?.length ? 20 : 0,
-            left: 0
+            top: markersMargin,
+            right: markersMargin,
+            bottom: markers?.length ? 20 : markersMargin,
+            left: markersMargin
         };
-        return (jsx(BarChartWrapper, { height: height + margin.bottom, children: jsx(BarChartContainer, { children: jsx(BarChart$1, { data: getDataFromFilterItems(data[0]?.items), colors: getColorsFromFilterItems(data[0]?.items, defaultColor, formatFilterColor), minValue: getMinValueFromFilterItems(data[0]?.items), markers: markers, width: +width, height: height, barWidth: barWidth, barPadding: padding, customXAxis: axis => axis.remove(), customYAxis: axis => axis.remove(), customBars: ({ bars }) => {
+        return (jsx(BarChartWrapper, { height: height + margin.bottom, children: jsx(BarChartContainer, { children: 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, className: "dashboardBarChart", customXAxisBottom: xAxisBottom => customXAxisBottom(xAxisBottom, barChartData), customYAxis: axis => !showLabels && axis.remove(), customBars: ({ bars }) => {
                         bars.attr("rx", radius);
                         bars.attr("ry", radius);
-                    }, margin: margin, xAxisPadding: 0, yAxisPadding: 0, formatTooltipValue: formatTooltipValue, formatTooltipName: formatTooltipName, onBarClick: filterName ? item => onFilter(item.name) : undefined, hideTooltipGroupName: true, dynamicTooltipEnable: true, isBarTooltip: true }) }) }));
+                    }, margin: margin, xAxisPadding: 0, yAxisPadding: 0, formatTooltipValue: formatTooltipValue, formatTooltipName: formatTooltipName, hideTooltipGroupName: true, dynamicTooltipEnable: true, isBarTooltip: true, onBarClick: filterName ? item => onFilter(item.name) : undefined }) }) }));
     }, [
+        customXAxisBottom,
         element,
         isLineChart,
         isStackBar,
@@ -9133,6 +9250,8 @@ const Chart = memo(({ config, element, elementConfig, type, renderElement }) =>
         formatFilterColor,
         width,
         barWidth,
+        showLabels,
+        showMarkers,
         padding,
         formatTooltipValue,
         formatTooltipName,
@@ -9169,7 +9288,7 @@ const ChartLegend = ({ data, chartElement, type, twoColumns, loading }) => {
     const showMoreBtn = !!shownItems && data.length > shownItems;
     if (!loading && !data?.length && !!hideEmpty)
         return null;
-    return (jsxs(Flex, { opacity: loading ? FILTERED_VALUE_OPACITY / 100 : 1, children: [jsx(ChartLegendContainer, { twoColumns: twoColumns, children: sliceItems(data)?.map(({ name, color }, index) => (jsxs(ChartLegendItem, { hasAnyFilter: hasAnyFilter, isFiltered: isFiltered(name), onClick: axes?.[0]?.filterName ? () => onFilter(name) : undefined, children: [jsx(ChartLegendColor, { color: color }), jsx(ChartLegendName, { "$fontColor": fontColor, children: name })] }, index))) }), showMoreBtn && (jsx(LegendToggler, { onClick: onShowMore, toggled: showMore, children: t("other", { ns: "dashboard" }) }))] }));
+    return (jsxs(Flex, { flexDirection: "column", opacity: loading ? FILTERED_VALUE_OPACITY / 100 : 1, children: [jsx(ChartLegendContainer, { twoColumns: twoColumns, children: sliceItems(data)?.map(({ name, color }, index) => (jsxs(ChartLegendItem, { hasAnyFilter: hasAnyFilter, isFiltered: isFiltered(name), onClick: axes?.[0]?.filterName ? () => onFilter(name) : undefined, children: [jsx(ChartLegendColor, { color: color }), jsx(ChartLegendName, { "$fontColor": fontColor, children: name })] }, index))) }), showMoreBtn && (jsx(LegendToggler, { onClick: onShowMore, toggled: showMore, children: t("other", { ns: "dashboard" }) }))] }));
 };
 
 const ContainerChildren = memo(({ items, isColumn, isMain, renderElement }) => {
@@ -9273,7 +9392,7 @@ const FeatureCardTitle = ({ title, description }) => {
                 })) ||
             feature?.id);
     }, [attributes, feature?.id, layerDefinition, title, titleAttribute]);
-    return (jsxs(HeaderTitleContainer, { children: [jsx(FeatureTitleContainer, { clickable: true, children: jsx(Tooltip, { arrow: true, placement: "top", content: t("zoomToFeature", { ns: "dashboard" }), delay: [600, 0], children: ref => (jsx(FlexSpan, { ref: ref, onClick: () => zoomToFeatures([feature]), children: resultTitle })) }) }), jsx(LayerDescription, { title: resultDescription, children: resultDescription })] }));
+    return (jsxs(HeaderTitleContainer, { children: [jsx(FeatureTitleContainer, { clickable: true, children: jsx(Tooltip$1, { arrow: true, placement: "top", content: t("zoomToFeature", { ns: "dashboard" }), delay: [600, 0], children: ref => (jsx(FlexSpan, { ref: ref, onClick: () => zoomToFeatures([feature]), children: resultTitle })) }) }), jsx(LayerDescription, { title: resultDescription, children: resultDescription })] }));
 };
 
 const HiddenFilters = styled(Flex) `
@@ -9447,7 +9566,7 @@ const TextTrim = memo(({ maxLength, expandable, lineBreak, children }) => {
     if (expandable) {
         return (jsxs(Fragment$1, { children: [formatValue(expanded ? text : substring), jsx(LegendToggler, { toggled: expanded, onClick: toggleExpanded, children: expanded ? t("hide", { ns: "dashboard" }) : t("more", { ns: "dashboard" }) })] }));
     }
-    return (jsx(Tooltip, { placement: "top", arrow: true, content: text, children: ref => jsx("div", { ref: ref, children: formatValue(substring) }) }));
+    return (jsx(Tooltip$1, { placement: "top", arrow: true, content: text, children: ref => jsx("div", { ref: ref, children: formatValue(substring) }) }));
 });
 
 const DEFAULT_COLOR = "#00ffff";