@evergis/react 3.1.16 → 3.1.17

package/dist/react.esm.js

@@ -2,7 +2,7 @@ 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 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, { createGlobalStyle, css, useTheme } from 'styled-components';
-import { lineChartClassNames, barChartClassNames, BarChart as BarChart$1, LineChart, PieChart } from '@evergis/charts';
+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';
@@ -110,7 +110,7 @@ const Tooltip = styled.div `
     height: 0;
   }
 `;
-const LineChartTooltipStyles = createGlobalStyle `
+const LineChartStyles = createGlobalStyle `
   .dashboardLineChartTooltip.${lineChartClassNames.lineChartMouseLabel} {
     .${lineChartClassNames.lineChartLabelFlex} {
       justify-content: center;
@@ -185,11 +185,19 @@ const LineChartTooltipStyles = createGlobalStyle `
     fill: ${({ theme: { palette } }) => palette.textDisabled};
   }
 `;
-const BarChartStyles = createGlobalStyle `
-  .dashboardBarChart {
-    .domain,
+const StyledBarChart = styled(BarChart$1) `
+  .domain,
+  line {
+    display: none;
+  }
+
+  .tick {
+    text {
+      fill: ${({ theme: { palette } }) => palette.textDisabled};
+    }
+
     line {
-      display: none;
+      visibility: hidden;
     }
   }
 `;
@@ -3987,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);
@@ -4058,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`)
@@ -4108,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];
 };
 
@@ -5397,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()),
@@ -8149,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)
@@ -8481,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;
@@ -9127,10 +9111,11 @@ const StackBar = ({ data, filterName, type, alias, options, renderElement, rende
 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";
@@ -9142,7 +9127,6 @@ 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);
@@ -9162,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]);
@@ -9190,11 +9175,17 @@ const Chart = memo(({ config, element, elementConfig, type, renderElement }) =>
                     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;
@@ -9212,7 +9203,7 @@ const Chart = memo(({ config, element, elementConfig, type, renderElement }) =>
                 .flat()
                 .map(({ values }) => values)
                 .flat();
-            return (jsxs(AnyChartWrapper, { height: height, children: [jsx(LineChartTooltipStyles, {}), jsx(LineChart, { data: lineChartData, labels: labels, width: +width, height: height, xAxisPadding: 15, yAxisPadding: 0, min: Math.min(...chartValues), customYAxisSelection: yAxis => {
+            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();
                             }
@@ -9234,18 +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 markersMargin = options?.showMarkers ? 10 : 0;
+        const barChartData = getDataFromFilterItems(data[0]?.items);
+        const markersMargin = showMarkers ? 10 : 0;
         const margin = {
             top: markersMargin,
             right: markersMargin,
             bottom: markers?.length ? 20 : markersMargin,
             left: markersMargin
         };
-        return (jsx(BarChartWrapper, { height: height + margin.bottom, children: jsxs(BarChartContainer, { children: [jsx(BarChartStyles, {}), 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, className: "dashboardBarChart", customXAxis: axis => axis.remove(), customYAxis: axis => !options?.showMarkers && axis.remove(), customBars: ({ bars }) => {
-                            bars.attr("rx", radius);
-                            bars.attr("ry", radius);
-                        }, margin: margin, xAxisPadding: 0, yAxisPadding: 0, formatTooltipValue: formatTooltipValue, formatTooltipName: formatTooltipName, hideTooltipGroupName: true, dynamicTooltipEnable: true, isBarTooltip: true, onBarClick: filterName ? item => onFilter(item.name) : undefined })] }) }));
+        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, hideTooltipGroupName: true, dynamicTooltipEnable: true, isBarTooltip: true, onBarClick: filterName ? item => onFilter(item.name) : undefined }) }) }));
     }, [
+        customXAxisBottom,
         element,
         isLineChart,
         isStackBar,
@@ -9257,6 +9250,8 @@ const Chart = memo(({ config, element, elementConfig, type, renderElement }) =>
         formatFilterColor,
         width,
         barWidth,
+        showLabels,
+        showMarkers,
         padding,
         formatTooltipValue,
         formatTooltipName,