@evergis/react 4.0.14 → 4.0.20

package/dist/components/Dashboard/elements/ElementSvg/index.d.ts

@@ -1,9 +1,8 @@
 import { FC } from 'react';
 import { QueryLayerServiceInfoDc } from '@evergis/api';
 import { ClientFeatureAttribute, ContainerProps } from '../../types';
-interface ElementSvgProps extends ContainerProps {
+export interface ElementSvgProps extends ContainerProps {
     layerInfo?: QueryLayerServiceInfoDc;
     attributes?: ClientFeatureAttribute[];
 }
 export declare const ElementSvg: FC<ElementSvgProps>;
-export {};

package/dist/components/Dashboard/elements/registry.d.ts

@@ -2,7 +2,7 @@ export declare const elementComponents: {
     readonly control: import('react').FC<import('..').ContainerProps>;
     readonly image: import('react').FC<import('..').ContainerProps>;
     readonly slideshow: import('react').FC<import('./ElementSlideshow/types').DashboardSlideshowProps>;
-    readonly svg: import('react').FC<import('..').ContainerProps>;
+    readonly svg: import('react').FC<import('./ElementSvg').ElementSvgProps>;
     readonly icon: import('react').FC<import('..').ContainerProps>;
     readonly tooltip: import('react').FC<import('..').ContainerProps>;
     readonly tags: import('react').FC<import('..').ContainerProps>;

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

@@ -33,7 +33,7 @@ export interface ConfigRelatedResource {
     fileName?: string;
     methodName?: string;
 }
-export interface ConfigControl extends Pick<ConfigOptions, "relatedDataSource" | "minValue" | "maxValue" | "step" | "label" | "placeholder" | "width"> {
+export interface ConfigControl extends Pick<ConfigOptions, "relatedDataSource" | "minValue" | "maxValue" | "step" | "label" | "placeholder" | "width" | "variants"> {
     type: "dropdown" | "checkbox" | "chips" | "string";
     attributeName?: string;
     targetAttributeName?: string;

package/dist/index.js

@@ -4204,7 +4204,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];
@@ -4225,7 +4227,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 = React.useRef({
         path: null,
         area: null,
@@ -4246,13 +4250,15 @@ const useChartChange = ({ dataSources, chartId, width, height, relatedAttributes
     const customize = React.useCallback(({ svg }) => {
         svg.style("overflow", "visible");
         svg
-            .selectAll(`.${charts.lineChartClassNames.lineChartXScaleGlobal} line,
-              .${charts.lineChartClassNames.lineChartYScaleGlobal} line,
+            .selectAll(`.${charts.lineChartClassNames.lineChartXScaleGlobal} line,
+              .${charts.lineChartClassNames.lineChartYScaleGlobal} line,
               .domain`)
             .each((_, index, nodes) => {
             nodes[index].remove();
         });
-        svg.selectAll(`.${charts.lineChartClassNames.lineChartXScaleGlobal} .tick`).each((_, index, nodes) => {
+        svg
+            .selectAll(`.${charts.lineChartClassNames.lineChartXScaleGlobal} .tick`)
+            .each((_, index, nodes) => {
             if (!index) {
                 nodes[index].style.textAnchor = "start";
             }
@@ -4273,16 +4279,28 @@ const useChartChange = ({ dataSources, chartId, width, height, relatedAttributes
                 }
             }
         });
-        svg.selectAll(`.${charts.lineChartClassNames.lineChartXScaleGlobal} .tick text`).attr("y", 16);
+        svg
+            .selectAll(`.${charts.lineChartClassNames.lineChartXScaleGlobal} .tick text`)
+            .attr("y", 16);
         svg
             .selectAll(`.${charts.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}`);
@@ -4304,11 +4322,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,
@@ -4318,7 +4336,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];
 };
 
@@ -8466,11 +8496,19 @@ const ElementChart = React.memo(({ type, elementConfig, renderElement }) => {
 const ElementChips = React.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 (jsxRuntime.jsx(DashboardChipsContainer, { style: style, children: tags?.map(tag => (jsxRuntime.jsx(DashboardChip$1, { text: tag, "$bgColor": colorAttr?.value || bgColor, "$fontColor": fontColor, "$fontSize": fontSize, "$isDefault": !colorAttr?.value }, tag))) }));
+    const tags = React.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 (jsxRuntime.jsx(DashboardChipsContainer, { style: style, children: tags.map(tag => (jsxRuntime.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 }) => {
@@ -8484,6 +8522,9 @@ const ElementControl = ({ elementConfig }) => {
     const attribute = React.useMemo(() => attributes?.find(({ name }) => name === control?.targetAttributeName), [attributes, control?.targetAttributeName]);
     const dataSource = React.useMemo(() => getDataSource(relatedDataSource, dataSources), [relatedDataSource, dataSources]);
     const items = React.useMemo(() => {
+        if (control?.variants) {
+            return control.variants;
+        }
         if (!dataSource?.features?.length || !attributeName) {
             return [];
         }
@@ -8491,14 +8532,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 = React.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 = React.useCallback(([option]) => {
         if (control?.targetAttributeName && changeControls) {
             changeControls({
@@ -8506,9 +8556,7 @@ const ElementControl = ({ elementConfig }) => {
             });
         }
     }, [changeControls, control?.targetAttributeName]);
-    return (jsxRuntime.jsx(uilibGl.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 (jsxRuntime.jsx(uilibGl.Dropdown, { zIndex: 1000, width: `${width ?? DEFAULT_DROPDOWN_WIDTH}px`, label: label, options: items, value: currentValue, placeholder: placeholder, disabled: isDisabled, onChange: handleChange }));
 };
 
 const StyledIconFontSizeMixin = styled.css `
@@ -8578,7 +8626,7 @@ const ElementLegend = React.memo(({ type, element, elementConfig }) => {
             return axes.map(({ alias, axisColor }) => {
                 return {
                     name: alias,
-                    color: axisColor
+                    color: axisColor,
                 };
             });
         }
@@ -8590,8 +8638,16 @@ const ElementLegend = React.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] ? (jsxRuntime.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] ? (jsxRuntime.jsx(ChartLegend, { data: legendData, loading: loading, chartElement: chartElement, twoColumns: twoColumns, fontSize: fontSize, type: type })) : null;
 });
 
 const ExternalLink = styled(uilibGl.IconButton).attrs(() => ({
@@ -10606,7 +10662,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({
@@ -10616,7 +10674,11 @@ const useChartData = ({ element, type }) => {
                             relatedConfig: relatedAxis,
                             dataSource: featureDataSource,
                             layerInfo: layerInfo ||
-                                { layerDefinition: { attributes: featureDataSource.attributeDefinition } },
+                                {
+                                    layerDefinition: {
+                                        attributes: featureDataSource.attributeDefinition,
+                                    },
+                                },
                         })
                         : null,
                     color: axisColor,
@@ -10626,7 +10688,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 [
             {