@evergis/react 4.0.14 → 4.0.20

package/dist/react.esm.js

@@ -4202,7 +4202,9 @@ function getLinePoints(numPoints, svgLine) {
     else {
         interval = lineLength / (numPoints - 1);
     }
-    return range(numPoints).filter(d => d * interval).map(d => {
+    return range(numPoints)
+        .filter(d => d * interval)
+        .map(d => {
         const value = d * interval;
         const { x, y } = svgLine.getPointAtLength(value);
         return [x, y];
@@ -4223,7 +4225,9 @@ function wrap() {
 const useChartChange = ({ dataSources, chartId, width, height, relatedAttributes, defaultColor, fontColor, markers, showMarkers, }) => {
     const { t } = useGlobalContext();
     const { layerInfos } = useWidgetContext();
-    const strokeColors = relatedAttributes.filter(({ chartAxis }) => chartAxis === "y").map(({ axisColor }) => axisColor);
+    const strokeColors = relatedAttributes
+        .filter(({ chartAxis }) => chartAxis === "y")
+        .map(({ axisColor }) => axisColor);
     const ref = useRef({
         path: null,
         area: null,
@@ -4244,13 +4248,15 @@ const useChartChange = ({ dataSources, chartId, width, height, relatedAttributes
     const customize = useCallback(({ svg }) => {
         svg.style("overflow", "visible");
         svg
-            .selectAll(`.${lineChartClassNames.lineChartXScaleGlobal} line,
-              .${lineChartClassNames.lineChartYScaleGlobal} line,
+            .selectAll(`.${lineChartClassNames.lineChartXScaleGlobal} line,
+              .${lineChartClassNames.lineChartYScaleGlobal} line,
               .domain`)
             .each((_, index, nodes) => {
             nodes[index].remove();
         });
-        svg.selectAll(`.${lineChartClassNames.lineChartXScaleGlobal} .tick`).each((_, index, nodes) => {
+        svg
+            .selectAll(`.${lineChartClassNames.lineChartXScaleGlobal} .tick`)
+            .each((_, index, nodes) => {
             if (!index) {
                 nodes[index].style.textAnchor = "start";
             }
@@ -4271,16 +4277,28 @@ const useChartChange = ({ dataSources, chartId, width, height, relatedAttributes
                 }
             }
         });
-        svg.selectAll(`.${lineChartClassNames.lineChartXScaleGlobal} .tick text`).attr("y", 16);
+        svg
+            .selectAll(`.${lineChartClassNames.lineChartXScaleGlobal} .tick text`)
+            .attr("y", 16);
         svg
             .selectAll(`.${lineChartClassNames.lineChartYScaleGlobal} .tick text`)
             .text(item => {
             if (!item)
                 return 0;
             const dataSource = dataSources?.find(({ name }) => name === relatedAttributes[0].dataSourceName);
-            const layerInfo = dataSource ? layerInfos.find(({ name }) => name === dataSource.layerName) : null;
+            const layerInfo = dataSource
+                ? layerInfos.find(({ name }) => name === dataSource.layerName)
+                : null;
             const attribute = layerInfo?.layerDefinition.attributes[relatedAttributes[0].attributeName];
-            return attribute ? formatAttributeValue({ t, type: attribute.type, value: item, stringFormat: attribute.stringFormat, noUnits: true }) : item;
+            return attribute
+                ? formatAttributeValue({
+                    t,
+                    type: attribute.type,
+                    value: item,
+                    stringFormat: attribute.stringFormat,
+                    noUnits: true,
+                })
+                : item;
         })
             .each(wrap);
         svg.selectAll(".tick text").attr("style", `color: ${fontColor}`);
@@ -4302,11 +4320,11 @@ const useChartChange = ({ dataSources, chartId, width, height, relatedAttributes
                 .attr("fill", `url(#${gradientId})`)
                 .attr("stroke-width", "0")
                 .attr("fill-opacity", FILL_OPACITY);
-            defs.push(`
-          <linearGradient id="${gradientId}" x1="0" y1="0" x2="0" y2="1">
-            <stop offset="0" stop-color="${color}" stop-opacity="1" />
-            <stop offset="1" stop-color="${color}" stop-opacity="0" />
-          </linearGradient>
+            defs.push(`
+          <linearGradient id="${gradientId}" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0" stop-color="${color}" stop-opacity="1" />
+            <stop offset="1" stop-color="${color}" stop-opacity="0" />
+          </linearGradient>
         `);
             ref.current = {
                 path: newPath,
@@ -4316,7 +4334,19 @@ const useChartChange = ({ dataSources, chartId, width, height, relatedAttributes
             onChange();
         });
         svg.append("defs").html(() => defs.join(""));
-    }, [fontColor, dataSources, layerInfos, relatedAttributes, chartId, strokeColors, defaultColor, width, onChange, showMarkers, markers]);
+    }, [
+        fontColor,
+        dataSources,
+        layerInfos,
+        relatedAttributes,
+        chartId,
+        strokeColors,
+        defaultColor,
+        width,
+        onChange,
+        showMarkers,
+        markers,
+    ]);
     return [customize, onChange];
 };
 
@@ -8464,11 +8494,19 @@ const ElementChart = memo(({ type, elementConfig, renderElement }) => {
 const ElementChips = memo(({ type, elementConfig }) => {
     const { attributes } = useWidgetContext(type);
     const { attributeName, options, style } = elementConfig || {};
-    const { separator, bgColor, fontColor, fontSize, colorAttribute } = options || {};
+    const { separator, bgColor, fontColor, fontSize, colorAttribute, variants, } = options || {};
     const valueAttr = getAttributeByName(attributeName, attributes);
     const colorAttr = getAttributeByName(colorAttribute, attributes);
-    const tags = valueAttr?.value?.split(separator || ",");
-    return (jsx(DashboardChipsContainer, { style: style, children: tags?.map(tag => (jsx(DashboardChip$1, { text: tag, "$bgColor": colorAttr?.value || bgColor, "$fontColor": fontColor, "$fontSize": fontSize, "$isDefault": !colorAttr?.value }, tag))) }));
+    const tags = useMemo(() => {
+        if (variants?.length) {
+            return variants.map(({ text, color }) => ({
+                text,
+                color,
+            }));
+        }
+        return (valueAttr?.value?.split(separator || ",") ?? []).map(text => ({ text, color: undefined }));
+    }, [variants, valueAttr?.value, separator]);
+    return (jsx(DashboardChipsContainer, { style: style, children: tags.map(tag => (jsx(DashboardChip$1, { text: tag.text, "$bgColor": tag.color || colorAttr?.value || bgColor, "$fontColor": fontColor, "$fontSize": fontSize, "$isDefault": !tag.color && !colorAttr?.value }, tag.text))) }));
 });
 
 const ElementControl = ({ elementConfig }) => {
@@ -8482,6 +8520,9 @@ const ElementControl = ({ elementConfig }) => {
     const attribute = useMemo(() => attributes?.find(({ name }) => name === control?.targetAttributeName), [attributes, control?.targetAttributeName]);
     const dataSource = useMemo(() => getDataSource(relatedDataSource, dataSources), [relatedDataSource, dataSources]);
     const items = useMemo(() => {
+        if (control?.variants) {
+            return control.variants;
+        }
         if (!dataSource?.features?.length || !attributeName) {
             return [];
         }
@@ -8489,14 +8530,23 @@ const ElementControl = ({ elementConfig }) => {
             value: item.properties?.[attributeName] || "",
             text: item.properties?.[control?.attributeName || attributeName] || "",
         }));
-    }, [control?.attributeName, dataSource?.features, attributeName]);
+    }, [
+        control?.variants,
+        control?.attributeName,
+        dataSource?.features,
+        attributeName,
+    ]);
     const isDisabled = useMemo(() => {
         const attr = layerInfo?.configuration?.attributesConfiguration?.attributes?.find(item => item.attributeName === control?.targetAttributeName);
         return !attr?.isEditable;
     }, [
         control?.targetAttributeName,
-        layerInfo?.configuration?.attributesConfiguration?.attributes,
+        layerInfo?.configuration
+            ?.attributesConfiguration?.attributes,
     ]);
+    const currentValue = controls?.[control?.targetAttributeName] ??
+        attribute?.value ??
+        defaultValue;
     const handleChange = useCallback(([option]) => {
         if (control?.targetAttributeName && changeControls) {
             changeControls({
@@ -8504,9 +8554,7 @@ const ElementControl = ({ elementConfig }) => {
             });
         }
     }, [changeControls, control?.targetAttributeName]);
-    return (jsx(Dropdown, { zIndex: 1000, width: `${width ?? DEFAULT_DROPDOWN_WIDTH}px`, label: label, options: items, value: controls?.[control?.targetAttributeName] ??
-            attribute?.value ??
-            defaultValue, placeholder: placeholder, disabled: isDisabled, onChange: handleChange }));
+    return (jsx(Dropdown, { zIndex: 1000, width: `${width ?? DEFAULT_DROPDOWN_WIDTH}px`, label: label, options: items, value: currentValue, placeholder: placeholder, disabled: isDisabled, onChange: handleChange }));
 };
 
 const StyledIconFontSizeMixin = css `
@@ -8576,7 +8624,7 @@ const ElementLegend = memo(({ type, element, elementConfig }) => {
             return axes.map(({ alias, axisColor }) => {
                 return {
                     name: alias,
-                    color: axisColor
+                    color: axisColor,
                 };
             });
         }
@@ -8588,8 +8636,16 @@ const ElementLegend = memo(({ type, element, elementConfig }) => {
                 const attribute = getAttributeByName(item.name, attributes);
                 return { ...item, name: attribute?.alias || item.name };
             });
-    }, [attributes, axes, data, options.chartType, relatedDataSources, dataSources]);
-    return !chartElement?.options?.expanded || expandedContainers?.[chartElement.id] ? (jsx(ChartLegend, { data: legendData, loading: loading, chartElement: chartElement, twoColumns: twoColumns, fontSize: fontSize, type: type })) : null;
+    }, [
+        attributes,
+        axes,
+        data,
+        options.chartType,
+        relatedDataSources,
+        dataSources,
+    ]);
+    return !chartElement?.options?.expanded ||
+        expandedContainers?.[chartElement.id] ? (jsx(ChartLegend, { data: legendData, loading: loading, chartElement: chartElement, twoColumns: twoColumns, fontSize: fontSize, type: type })) : null;
 });
 
 const ExternalLink = styled(IconButton).attrs(() => ({
@@ -10604,7 +10660,9 @@ const useChartData = ({ element, type }) => {
                 const dataSource = configDataSources.find(({ name }) => name === dataSourceName);
                 const layerInfo = layerInfos?.find(item => item?.name === dataSource?.layerName);
                 const featureDataSource = getDataSource(dataSourceName, dataSources);
-                const hasLayerInfo = !!layerInfo || !!featureDataSource?.attributeDefinition || !!featureDataSource?.features?.length;
+                const hasLayerInfo = !!layerInfo ||
+                    !!featureDataSource?.attributeDefinition ||
+                    !!featureDataSource?.features?.length;
                 return {
                     items: hasLayerInfo
                         ? getDataFromRelatedFeatures({
@@ -10614,7 +10672,11 @@ const useChartData = ({ element, type }) => {
                             relatedConfig: relatedAxis,
                             dataSource: featureDataSource,
                             layerInfo: layerInfo ||
-                                { layerDefinition: { attributes: featureDataSource.attributeDefinition } },
+                                {
+                                    layerDefinition: {
+                                        attributes: featureDataSource.attributeDefinition,
+                                    },
+                                },
                         })
                         : null,
                     color: axisColor,
@@ -10624,7 +10686,8 @@ const useChartData = ({ element, type }) => {
                     layerInfo,
                 };
             })
-                .filter(({ items }) => items === null || (items?.length && !items.every(({ value }) => value === null)));
+                .filter(({ items }) => items === null ||
+                (items?.length && !items.every(({ value }) => value === null)));
         }
         return [
             {