@splunk/visualizations 27.5.0 → 28.1.0

package/Map.js

@@ -1,6 +1,7 @@
 /* Copyright © 2020 Splunk Inc.
 SPLUNK CONFIDENTIAL – Use or disclosure of this material in whole or
 in part without a valid written license from Splunk Inc. is PROHIBITED. */
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -207,7 +208,9 @@ __reExport(maplibre_gl_exports2, require("maplibre-gl/dist/maplibre-gl.css"));
 var maplibre_gl_default2 = "default" in defaultImport15 ? defaultImport15.default : defaultImport15;
 
 // src/Map/PureMap/PureMapContainer.tsx
-var PureMapContainer = styled_components_default.div.attrs({ "data-test": "puremap-container" })`
+var PureMapContainer = styled_components_default.div.attrs({
+  "data-test": "puremap-container"
+})`
     ${maplibre_gl_default2}
     overflow: hidden;
     position: relative;
@@ -232,7 +235,9 @@ var PureMapContainer = styled_components_default.div.attrs({ "data-test": "purem
             border-radius: 4px;
             margin: 8px 0px;
             background-color: ${(props) => props.controlBackgroundColor};
-            box-shadow: 0px 26px 103px rgba(0, 0, 0, 0.64), 0px 11px 18px rgba(0, 0, 0, 0.32),
+            box-shadow:
+                0px 26px 103px rgba(0, 0, 0, 0.64),
+                0px 11px 18px rgba(0, 0, 0, 0.32),
                 0px 3px 6px rgba(0, 0, 0, 0.3);
             & button {
                 width: 40px;
@@ -261,7 +266,9 @@ var PureMapContainer = styled_components_default.div.attrs({ "data-test": "purem
         border-radius: 4px;
         margin: 0;
         background-color: ${(props) => props.controlBackgroundColor};
-        box-shadow: 0px 26px 103px rgba(0, 0, 0, 0.13), 0px 11px 18px rgba(0, 0, 0, 0.06),
+        box-shadow:
+            0px 26px 103px rgba(0, 0, 0, 0.13),
+            0px 11px 18px rgba(0, 0, 0, 0.06),
             0px 3px 6px rgba(0, 0, 0, 0.06);
         .maplibregl-ctrl-scale {
             background-color: ${(props) => props.controlBackgroundColor};
@@ -332,7 +339,11 @@ var getTilePreset = ({
   const tileConfigs = [].concat(defaultTileConfig).concat(customTileConfig);
   (0, lodash_exports.forEach)(tileConfigs, (tileConfig) => {
     const key = tileConfig == null ? void 0 : tileConfig.key;
-    const updatedConfig = __spreadProps(__spreadValues({ theme: "all" }, tileConfig), { version: MAP_STYLE_VERSION_NUMBER });
+    const updatedConfig = __spreadProps(__spreadValues({
+      theme: "all"
+    }, tileConfig), {
+      version: MAP_STYLE_VERSION_NUMBER
+    });
     tilePreset[key] = updatedConfig;
   });
   if (defaultTileConfig.length > 0) {
@@ -656,23 +667,32 @@ var defaultImport21 = __toESM(require("@splunk/visualization-context/FeatureFlag
 __reExport(FeatureFlagContext_exports, require("@splunk/visualization-context/FeatureFlagContext"));
 var FeatureFlagContext_default = "default" in defaultImport21 ? defaultImport21.default : defaultImport21;
 
+// esm-externals:@splunk/ui-utils/id
+var id_exports = {};
+__export(id_exports, {
+  default: () => id_default
+});
+var defaultImport22 = __toESM(require("@splunk/ui-utils/id"));
+__reExport(id_exports, require("@splunk/ui-utils/id"));
+var id_default = "default" in defaultImport22 ? defaultImport22.default : defaultImport22;
+
 // esm-externals:@splunk/react-ui/Popover
 var Popover_exports = {};
 __export(Popover_exports, {
   default: () => Popover_default
 });
-var defaultImport22 = __toESM(require("@splunk/react-ui/Popover"));
+var defaultImport23 = __toESM(require("@splunk/react-ui/Popover"));
 __reExport(Popover_exports, require("@splunk/react-ui/Popover"));
-var Popover_default = "default" in defaultImport22 ? defaultImport22.default : defaultImport22;
+var Popover_default = "default" in defaultImport23 ? defaultImport23.default : defaultImport23;
 
 // esm-externals:@splunk/themes
 var themes_exports = {};
 __export(themes_exports, {
   default: () => themes_default
 });
-var defaultImport23 = __toESM(require("@splunk/themes"));
+var defaultImport24 = __toESM(require("@splunk/themes"));
 __reExport(themes_exports, require("@splunk/themes"));
-var themes_default = "default" in defaultImport23 ? defaultImport23.default : defaultImport23;
+var themes_default = "default" in defaultImport24 ? defaultImport24.default : defaultImport24;
 
 // src/Map/PureMap/Tooltip.tsx
 var StyledPopover = styled_components_default(Popover_default)`
@@ -769,7 +789,7 @@ var Tooltip = ({
       "data-test": "map-marker-tooltip",
       defaultPlacement: "above"
     },
-    /* @__PURE__ */ react_exports.createElement(StyledTable, null, tooltipHeader && /* @__PURE__ */ react_exports.createElement(StyledTooltipHeader, { "data-test": "tooltip-header" }, /* @__PURE__ */ react_exports.createElement("tr", null, /* @__PURE__ */ react_exports.createElement("th", { colSpan: 2 }, /* @__PURE__ */ react_exports.createElement("span", { "data-test": "tooltip-header-value" }, tooltipHeader)))), /* @__PURE__ */ react_exports.createElement("tbody", null, areaId && areaValue && /* @__PURE__ */ react_exports.createElement("tr", null, /* @__PURE__ */ react_exports.createElement(StyledTitleColumn, { "data-test": "area-id" }, areaId), /* @__PURE__ */ react_exports.createElement(StyledValueColumn, { "data-test": "area-value" }, areaValue)), Boolean(showCoordinates && latitude) && /* @__PURE__ */ react_exports.createElement("tr", null, /* @__PURE__ */ react_exports.createElement(StyledTitleColumn, null, (0, i18n_exports._)("Latitude")), /* @__PURE__ */ react_exports.createElement(StyledValueColumn, { "data-test": "latitude" }, convertDegToDMS(latitude, "latitude"))), Boolean(showCoordinates && longitude) && /* @__PURE__ */ react_exports.createElement("tr", null, /* @__PURE__ */ react_exports.createElement(StyledTitleColumn, null, (0, i18n_exports._)("Longitude")), /* @__PURE__ */ react_exports.createElement(StyledValueColumn, { "data-test": "longitude" }, convertDegToDMS(longitude, "longitude"))), additionalFields.filter(({ value }) => value && String(value) !== "0").map(({ name, value, color, icon }, index) => /* @__PURE__ */ react_exports.createElement("tr", { key: String(index) }, /* @__PURE__ */ react_exports.createElement(StyledTitleColumn, { "data-test": "field-title" }, color ? /* @__PURE__ */ react_exports.createElement(StyledColorBlock, { "data-test": "field-color", color }) : null, /* @__PURE__ */ react_exports.createElement(StyledFieldLabel, null, name, isTooltipIconFlagEnabled && icon && ((0, iconUtils_exports.isRemoteIcon)(icon) || (0, iconUtils_exports.isDataURI)(icon)) ? /* @__PURE__ */ react_exports.createElement(StyledIconWrapper, { "data-test": "field-icon" }, /* @__PURE__ */ react_exports.createElement(RemoteIcon_default, { iconURL: icon, width: 16, height: 16 })) : null)), /* @__PURE__ */ react_exports.createElement(StyledValueColumn, { "data-test": "field-value" }, value)))))
+    /* @__PURE__ */ react_exports.createElement(StyledTable, null, tooltipHeader && /* @__PURE__ */ react_exports.createElement(StyledTooltipHeader, { "data-test": "tooltip-header" }, /* @__PURE__ */ react_exports.createElement("tr", null, /* @__PURE__ */ react_exports.createElement("th", { colSpan: 2 }, /* @__PURE__ */ react_exports.createElement("span", { "data-test": "tooltip-header-value" }, tooltipHeader)))), /* @__PURE__ */ react_exports.createElement("tbody", null, areaId && areaValue && /* @__PURE__ */ react_exports.createElement("tr", null, /* @__PURE__ */ react_exports.createElement(StyledTitleColumn, { "data-test": "area-id" }, areaId), /* @__PURE__ */ react_exports.createElement(StyledValueColumn, { "data-test": "area-value" }, areaValue)), Boolean(showCoordinates && latitude) && /* @__PURE__ */ react_exports.createElement("tr", null, /* @__PURE__ */ react_exports.createElement(StyledTitleColumn, null, (0, i18n_exports._)("Latitude")), /* @__PURE__ */ react_exports.createElement(StyledValueColumn, { "data-test": "latitude" }, convertDegToDMS(latitude, "latitude"))), Boolean(showCoordinates && longitude) && /* @__PURE__ */ react_exports.createElement("tr", null, /* @__PURE__ */ react_exports.createElement(StyledTitleColumn, null, (0, i18n_exports._)("Longitude")), /* @__PURE__ */ react_exports.createElement(StyledValueColumn, { "data-test": "longitude" }, convertDegToDMS(longitude, "longitude"))), additionalFields.filter(({ value }) => value && String(value) !== "0").map(({ name, value, color, icon }) => /* @__PURE__ */ react_exports.createElement("tr", { key: (0, id_exports.createDOMID)() }, /* @__PURE__ */ react_exports.createElement(StyledTitleColumn, { "data-test": "field-title" }, color ? /* @__PURE__ */ react_exports.createElement(StyledColorBlock, { "data-test": "field-color", color }) : null, /* @__PURE__ */ react_exports.createElement(StyledFieldLabel, null, name, isTooltipIconFlagEnabled && icon && ((0, iconUtils_exports.isRemoteIcon)(icon) || (0, iconUtils_exports.isDataURI)(icon)) ? /* @__PURE__ */ react_exports.createElement(StyledIconWrapper, { "data-test": "field-icon" }, /* @__PURE__ */ react_exports.createElement(RemoteIcon_default, { iconURL: icon, width: 16, height: 16 })) : null)), /* @__PURE__ */ react_exports.createElement(StyledValueColumn, { "data-test": "field-value" }, value)))))
   );
 };
 var Tooltip_default = Tooltip;
@@ -802,9 +822,10 @@ var MarkerWrapper = (_a) => {
   const container = react_exports.useRef();
   const marker = react_exports.useRef();
   const [isTooltipOpen, setTooltipOpenStatus] = react_exports.useState(false);
-  const isChoroplethTooltip = react_exports.useCallback(() => isChoroplethTooltipOpen !== void 0, [
-    isChoroplethTooltipOpen
-  ]);
+  const isChoroplethTooltip = react_exports.useCallback(
+    () => isChoroplethTooltipOpen !== void 0,
+    [isChoroplethTooltipOpen]
+  );
   const openTooltip = react_exports.useCallback(() => setTooltipOpenStatus(true), []);
   const closeTooltip = react_exports.useCallback(() => setTooltipOpenStatus(false), []);
   const cleanupMarker = react_exports.useCallback(() => {
@@ -833,7 +854,9 @@ var MarkerWrapper = (_a) => {
   return /* @__PURE__ */ react_exports.createElement("div", { style: { visibility: isChoroplethTooltip() ? "hidden" : "visible" } }, /* @__PURE__ */ react_exports.createElement(
     "div",
     __spreadValues({
-      style: { visibility: isChoroplethTooltip() ? "hidden" : "visible" },
+      style: {
+        visibility: isChoroplethTooltip() ? "hidden" : "visible"
+      },
       ref: container,
       "data-test": "map-marker",
       onMouseOver: openTooltip,
@@ -975,7 +998,7 @@ var Bubble = react_exports.memo(
       ), values.map((v, i) => /* @__PURE__ */ react_exports.createElement(
         PieSegment,
         {
-          key: String(i),
+          key: (0, id_exports.createDOMID)(),
           start: offsets[i] / total,
           end: (offsets[i] + v) / total,
           radius,
@@ -1177,7 +1200,7 @@ var StyledMarkerWrapper2 = styled_components_default(MarkerWrapper_default)`
     height: 28px;
     cursor: pointer;
 `;
-var generateMarkerWrapperProps = (markerLayer, onMapClick = lodash_exports.noop, showCoordinates) => {
+var generateMarkerWrapperProps = (markerLayer, showCoordinates, onMapClick = lodash_exports.noop) => {
   var _a;
   const latArray = markerLayer.latitude;
   const lonArray = markerLayer.longitude;
@@ -1223,7 +1246,7 @@ var MarkerLayer = (props) => {
   const { map, themeColorScheme, markerLayer, onMapClick, showCoordinates = true } = props;
   markerLayer.seriesColors = markerLayer.seriesColors || DEFAULT_SERIES_COLORS;
   const markerPropsList = react_exports.useMemo(
-    () => generateMarkerWrapperProps(markerLayer, onMapClick, showCoordinates),
+    () => generateMarkerWrapperProps(markerLayer, showCoordinates, onMapClick),
     [markerLayer, onMapClick, showCoordinates]
   );
   return /* @__PURE__ */ react_exports.createElement(react_exports.Fragment, null, markerPropsList.map((markerProps, i) => /* @__PURE__ */ react_exports.createElement(
@@ -1335,7 +1358,8 @@ var Choropleth = react_exports.memo(
     const strokeId = getStrokeId(id);
     const formattedGeomData = {
       type: "Feature",
-      geometry: geomData
+      geometry: geomData,
+      properties: {}
     };
     const [isTooltipOpen, setTooltipOpenStatus] = react_exports.useState(false);
     const [mouseLat, setmouseLat] = react_exports.useState(0);
@@ -1440,7 +1464,7 @@ var ChoroplethLayer = (props) => {
     onMapClick({ e, payload });
   };
   if (!map || !choroplethLayer || !choroplethLayer.geom) {
-    return /* @__PURE__ */ react_exports.createElement(react_exports.Fragment, null);
+    return null;
   }
   if (isThemeChanged) {
     setIsThemeChanged(false);
@@ -1475,36 +1499,41 @@ var Message_exports = {};
 __export(Message_exports, {
   default: () => Message_default
 });
-var defaultImport24 = __toESM(require("@splunk/visualizations-shared/Message"));
+var defaultImport25 = __toESM(require("@splunk/visualizations-shared/Message"));
 __reExport(Message_exports, require("@splunk/visualizations-shared/Message"));
-var Message_default = "default" in defaultImport24 ? defaultImport24.default : defaultImport24;
+var Message_default = "default" in defaultImport25 ? defaultImport25.default : defaultImport25;
 
 // esm-externals:@splunk/visualization-context/GeoRegistry
 var GeoRegistry_exports = {};
 __export(GeoRegistry_exports, {
   default: () => GeoRegistry_default
 });
-var defaultImport25 = __toESM(require("@splunk/visualization-context/GeoRegistry"));
+var defaultImport26 = __toESM(require("@splunk/visualization-context/GeoRegistry"));
 __reExport(GeoRegistry_exports, require("@splunk/visualization-context/GeoRegistry"));
-var GeoRegistry_default = "default" in defaultImport25 ? defaultImport25.default : defaultImport25;
+var GeoRegistry_default = "default" in defaultImport26 ? defaultImport26.default : defaultImport26;
 
 // esm-externals:@splunk/visualization-context/GeoJsonProvider
 var GeoJsonProvider_exports = {};
 __export(GeoJsonProvider_exports, {
   default: () => GeoJsonProvider_default
 });
-var defaultImport26 = __toESM(require("@splunk/visualization-context/GeoJsonProvider"));
+var defaultImport27 = __toESM(require("@splunk/visualization-context/GeoJsonProvider"));
 __reExport(GeoJsonProvider_exports, require("@splunk/visualization-context/GeoJsonProvider"));
-var GeoJsonProvider_default = "default" in defaultImport26 ? defaultImport26.default : defaultImport26;
+var GeoJsonProvider_default = "default" in defaultImport27 ? defaultImport27.default : defaultImport27;
 
 // src/Map/PureMap/LocalChoroplethLayer.tsx
 var LocalChoroplethLayer = (props) => {
   var _a, _b;
   const { width, height, map, choroplethLayer, isThemeChanged, setIsThemeChanged, onMapClick } = props;
   const cfgOpacity = Math.min(Math.max(choroplethLayer == null ? void 0 : choroplethLayer.choroplethOpacity, 0), 1);
-  const [geoJson, setGeoJson] = react_exports.useState({ features: [{ properties: { name: "" }, geometry: [] }] });
+  const [geoJson, setGeoJson] = react_exports.useState({
+    features: [{ properties: { name: "" }, geometry: [] }]
+  });
   const [validGeoJson, setValidGeoJson] = react_exports.useState(true);
-  const [geoJsonError, setGeoJsonError] = react_exports.useState({ level: "info", message: "" });
+  const [geoJsonError, setGeoJsonError] = react_exports.useState({
+    level: "info",
+    message: ""
+  });
   react_exports.useEffect(() => {
     let geoJsonData;
     const geoRegistry = GeoRegistry_default.create();
@@ -1630,7 +1659,9 @@ var formatColor = (color) => {
     opacity: chromaColor.alpha()
   };
 };
-var StyledFitToDataButton = styled_components_default(Button_default).attrs({ "data-test": "fit-to-data-button" })`
+var StyledFitToDataButton = styled_components_default(Button_default).attrs({
+  "data-test": "fit-to-data-button"
+})`
     position: absolute;
     top: 115px;
     left: 16px;
@@ -1639,7 +1670,9 @@ var StyledFitToDataButton = styled_components_default(Button_default).attrs({ "d
     height: 40px;
     border-radius: 4px;
     border: none;
-    box-shadow: 0px 26px 103px rgba(0, 0, 0, 0.64), 0px 11px 18px rgba(0, 0, 0, 0.32),
+    box-shadow:
+        0px 26px 103px rgba(0, 0, 0, 0.64),
+        0px 11px 18px rgba(0, 0, 0, 0.32),
         0px 3px 6px rgba(0, 0, 0, 0.3) !important;
     background-color: ${(props) => props.controlBackgroundColor} !important;
     background-repeat: no-repeat;
@@ -1742,15 +1775,19 @@ var PureMap = (props) => {
     (mapStyle) => {
       map.current = new maplibre_gl_exports.Map(__spreadValues({
         container: basemapContainer.current,
-        preserveDrawingBuffer: true,
+        canvasContextAttributes: {
+          preserveDrawingBuffer: true
+        },
         style: mapStyle,
         center: lngLatCenter,
         zoom: zoomLevel,
-        cooperativeGestures: {
-          windowsHelpText: (0, i18n_exports._)("Use Ctrl + scroll to zoom map"),
-          macHelpText: (0, i18n_exports._)("Use \u2318 + scroll to zoom map"),
-          mobileHelpText: (0, i18n_exports._)("Use two fingers to move the map")
-        }
+        cooperativeGestures: true,
+        locale: {
+          "CooperativeGesturesHandler.WindowsHelpText": (0, i18n_exports._)("Use Ctrl + scroll to zoom map"),
+          "CooperativeGesturesHandler.MacHelpText": (0, i18n_exports._)("Use \u2318 + scroll to zoom map"),
+          "CooperativeGesturesHandler.MobileHelpText": (0, i18n_exports._)("Use two fingers to move the map")
+        },
+        attributionControl: false
       }, getZoomConstraintsFromTileConfig(mapStyle, baseLayerTileServer)));
       map.current.on("load", () => {
         if ((layers == null ? void 0 : layers.length) > 0 && center === void 0 && zoom === void 0) {
@@ -1771,7 +1808,10 @@ var PureMap = (props) => {
       });
       map.current.on("dragend", () => {
         const newCenter = map.current.getCenter();
-        onOptionsChangeProxy({ center: [newCenter.lat, newCenter.lng], zoom: map.current.getZoom() });
+        onOptionsChangeProxy({
+          center: [newCenter.lat, newCenter.lng],
+          zoom: map.current.getZoom()
+        });
       });
       map.current.on("resize", () => {
         const mapZoomLevel = map.current.getZoom();
@@ -2038,45 +2078,43 @@ var PresetPalettes_exports = {};
 __export(PresetPalettes_exports, {
   default: () => PresetPalettes_default
 });
-var defaultImport27 = __toESM(require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
+var defaultImport28 = __toESM(require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
 __reExport(PresetPalettes_exports, require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
-var PresetPalettes_default = "default" in defaultImport27 ? defaultImport27.default : defaultImport27;
+var PresetPalettes_default = "default" in defaultImport28 ? defaultImport28.default : defaultImport28;
 
 // esm-externals:@splunk/visualization-icons
 var visualization_icons_exports = {};
 __export(visualization_icons_exports, {
   default: () => visualization_icons_default
 });
-var defaultImport28 = __toESM(require("@splunk/visualization-icons"));
+var defaultImport29 = __toESM(require("@splunk/visualization-icons"));
 __reExport(visualization_icons_exports, require("@splunk/visualization-icons"));
-var visualization_icons_default = "default" in defaultImport28 ? defaultImport28.default : defaultImport28;
+var visualization_icons_default = "default" in defaultImport29 ? defaultImport29.default : defaultImport29;
 
 // esm-externals:@splunk/visualization-icons/placeholders
 var placeholders_exports = {};
 __export(placeholders_exports, {
   default: () => placeholders_default
 });
-var defaultImport29 = __toESM(require("@splunk/visualization-icons/placeholders"));
+var defaultImport30 = __toESM(require("@splunk/visualization-icons/placeholders"));
 __reExport(placeholders_exports, require("@splunk/visualization-icons/placeholders"));
-var placeholders_default = "default" in defaultImport29 ? defaultImport29.default : defaultImport29;
+var placeholders_default = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
 
 // esm-externals:@splunk/visualizations-shared/configUtils
 var configUtils_exports = {};
 __export(configUtils_exports, {
   default: () => configUtils_default
 });
-var defaultImport30 = __toESM(require("@splunk/visualizations-shared/configUtils"));
+var defaultImport31 = __toESM(require("@splunk/visualizations-shared/configUtils"));
 __reExport(configUtils_exports, require("@splunk/visualizations-shared/configUtils"));
-var configUtils_default = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
+var configUtils_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
 
 // src/common/utils/configUtils.ts
 function enhanceConfig(vizConfig) {
   const enhancedConfig = __spreadValues({}, vizConfig);
-  enhancedConfig.editorConfig = vizConfig.editorConfig.map(
-    (config2) => {
-      return __spreadProps(__spreadValues({}, config2), { open: config2.open || false });
-    }
-  );
+  enhancedConfig.editorConfig = vizConfig.editorConfig.map((config2) => {
+    return __spreadProps(__spreadValues({}, config2), { open: config2.open || false });
+  });
   return enhancedConfig;
 }
 
@@ -2098,6 +2136,33 @@ var background = ({
 ];
 var BackgroundColor_default = background;
 
+// esm-externals:@splunk/themes/pick
+var pick_exports = {};
+__export(pick_exports, {
+  default: () => pick_default
+});
+var defaultImport32 = __toESM(require("@splunk/themes/pick"));
+__reExport(pick_exports, require("@splunk/themes/pick"));
+var pick_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
+
+// esm-externals:@splunk/themes/variables
+var variables_exports = {};
+__export(variables_exports, {
+  default: () => variables_default
+});
+var defaultImport33 = __toESM(require("@splunk/themes/variables"));
+__reExport(variables_exports, require("@splunk/themes/variables"));
+var variables_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
+
+// src/common/ThemedDefaults.tsx
+var defaultBackgroundColor = (props) => pick_default({
+  enterprise: {
+    dark: variables_default.black(props),
+    light: variables_default.white(props)
+  },
+  prisma: variables_default.backgroundColorSection(props)
+})(props);
+
 // src/Map/config.ts
 var defaultContext = {
   colorRangeConfig: [
@@ -2107,7 +2172,8 @@ var defaultContext = {
     { from: 60, to: 80, value: "#669922" },
     { from: 80, value: "#118832" }
   ],
-  colorMatchConfig: [{ match: "", value: "#5C33FF" }]
+  colorMatchConfig: [{ match: "", value: "#5C33FF" }],
+  colorGradientConfig: { colors: ["#252214", "#B846BB"] }
 };
 var dataContract = {
   requiredDataSources: [],
@@ -2126,13 +2192,7 @@ var size = {
   initialHeight: 600
 };
 var themes = {
-  defaultBackgroundColor: (props) => (0, themes_exports.pick)({
-    enterprise: {
-      dark: themes_exports.variables.black(props),
-      light: themes_exports.variables.backgroundColor(props)
-    },
-    prisma: themes_exports.variables.backgroundColorSidebar(props)
-  })(props),
+  defaultBackgroundColor,
   controlBackgroundColor: (props) => (0, themes_exports.pick)({
     enterprise: {
       dark: themes_exports.variables.gray22(props),
@@ -2184,7 +2244,10 @@ var editorConfig = [
             values: [
               { label: (0, i18n_exports._)("Bubble"), value: visualization_schemas_exports.LAYER_TYPE.Bubble },
               { label: (0, i18n_exports._)("Marker"), value: visualization_schemas_exports.LAYER_TYPE.Marker },
-              { label: (0, i18n_exports._)("Choropleth"), value: visualization_schemas_exports.LAYER_TYPE.Choropleth }
+              {
+                label: (0, i18n_exports._)("Choropleth"),
+                value: visualization_schemas_exports.LAYER_TYPE.Choropleth
+              }
             ]
           }
         }
@@ -2382,6 +2445,7 @@ var editorConfig = [
         {
           label: (0, i18n_exports._)("Data colors"),
           option: "layers[0].dataColors",
+          showEditor: ({ options }) => !isChoroplethLayer(options),
           context: "colorRangeConfig",
           editor: "editor.dynamicColorWithPrecedence",
           editorProps: {
@@ -2411,8 +2475,50 @@ var editorConfig = [
               }
             ],
             defaultPalettesConfig: PresetPalettes_exports.defaultPalettesConfig
-          },
-          showEditor: ({ options }) => !isChoroplethLayer(options)
+          }
+        },
+        {
+          label: (0, i18n_exports._)("Data colors"),
+          option: "layers[0].dataColors",
+          context: "colorGradientConfig",
+          editor: "editor.dynamicColorWithPrecedence",
+          showEditor: ({ options }) => isChoroplethLayer(options),
+          editorProps: {
+            labelPosition: "top",
+            flyoutTitle: (0, i18n_exports._)("Dynamic coloring: value"),
+            formatters: [
+              {
+                label: (0, i18n_exports._)("Gradient"),
+                value: "gradient",
+                isDefault: true,
+                defaults: {
+                  areaValues: defaultContext.colorGradientConfig
+                }
+              },
+              {
+                label: (0, i18n_exports._)("Ranges"),
+                value: "rangeValue",
+                defaults: {
+                  areaValues: defaultContext.colorRangeConfig
+                }
+              },
+              {
+                label: (0, i18n_exports._)("Matches"),
+                value: "matchValue",
+                defaults: {
+                  areaValues: defaultContext.colorMatchConfig
+                }
+              }
+            ],
+            // Use areaValues for Choropleth
+            dataSelectors: [
+              {
+                label: (0, i18n_exports._)("Area values"),
+                value: "areaValues"
+              }
+            ],
+            defaultPalettesConfig: PresetPalettes_exports.defaultPalettesConfig
+          }
         }
       ],
       [
@@ -2557,63 +2663,54 @@ var getSettingsFromThemedProps_exports = {};
 __export(getSettingsFromThemedProps_exports, {
   default: () => getSettingsFromThemedProps_default
 });
-var defaultImport31 = __toESM(require("@splunk/themes/getSettingsFromThemedProps"));
+var defaultImport34 = __toESM(require("@splunk/themes/getSettingsFromThemedProps"));
 __reExport(getSettingsFromThemedProps_exports, require("@splunk/themes/getSettingsFromThemedProps"));
-var getSettingsFromThemedProps_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
+var getSettingsFromThemedProps_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
 
 // esm-externals:@splunk/visualization-encoding/Options
 var Options_exports = {};
 __export(Options_exports, {
   default: () => Options_default
 });
-var defaultImport32 = __toESM(require("@splunk/visualization-encoding/Options"));
+var defaultImport35 = __toESM(require("@splunk/visualization-encoding/Options"));
 __reExport(Options_exports, require("@splunk/visualization-encoding/Options"));
-var Options_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
+var Options_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
 
 // esm-externals:@splunk/visualizations-shared/SanitizeProps
 var SanitizeProps_exports = {};
 __export(SanitizeProps_exports, {
   default: () => SanitizeProps_default
 });
-var defaultImport33 = __toESM(require("@splunk/visualizations-shared/SanitizeProps"));
+var defaultImport36 = __toESM(require("@splunk/visualizations-shared/SanitizeProps"));
 __reExport(SanitizeProps_exports, require("@splunk/visualizations-shared/SanitizeProps"));
-var SanitizeProps_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
+var SanitizeProps_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
 
 // esm-externals:@splunk/visualization-context/TimezoneContext
 var TimezoneContext_exports = {};
 __export(TimezoneContext_exports, {
   default: () => TimezoneContext_default
 });
-var defaultImport34 = __toESM(require("@splunk/visualization-context/TimezoneContext"));
+var defaultImport37 = __toESM(require("@splunk/visualization-context/TimezoneContext"));
 __reExport(TimezoneContext_exports, require("@splunk/visualization-context/TimezoneContext"));
-var TimezoneContext_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
+var TimezoneContext_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
 
 // esm-externals:@splunk/moment
 var moment_exports = {};
 __export(moment_exports, {
   default: () => moment_default
 });
-var defaultImport35 = __toESM(require("@splunk/moment"));
+var defaultImport38 = __toESM(require("@splunk/moment"));
 __reExport(moment_exports, require("@splunk/moment"));
-var moment_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
+var moment_default = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
 
 // esm-externals:@splunk/async-dynamic-options-evaluator
 var async_dynamic_options_evaluator_exports = {};
 __export(async_dynamic_options_evaluator_exports, {
   default: () => async_dynamic_options_evaluator_default
 });
-var defaultImport36 = __toESM(require("@splunk/async-dynamic-options-evaluator"));
+var defaultImport39 = __toESM(require("@splunk/async-dynamic-options-evaluator"));
 __reExport(async_dynamic_options_evaluator_exports, require("@splunk/async-dynamic-options-evaluator"));
-var async_dynamic_options_evaluator_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
-
-// esm-externals:@splunk/ui-utils/id
-var id_exports = {};
-__export(id_exports, {
-  default: () => id_default
-});
-var defaultImport37 = __toESM(require("@splunk/ui-utils/id"));
-__reExport(id_exports, require("@splunk/ui-utils/id"));
-var id_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
+var async_dynamic_options_evaluator_default = "default" in defaultImport39 ? defaultImport39.default : defaultImport39;
 
 // src/common/interfaces/VizActionHandler.ts
 var DefaultVizActionHandler = class {
@@ -2821,9 +2918,9 @@ var SizeAwareWrapper_exports = {};
 __export(SizeAwareWrapper_exports, {
   default: () => SizeAwareWrapper_default
 });
-var defaultImport38 = __toESM(require("@splunk/visualizations-shared/SizeAwareWrapper"));
+var defaultImport40 = __toESM(require("@splunk/visualizations-shared/SizeAwareWrapper"));
 __reExport(SizeAwareWrapper_exports, require("@splunk/visualizations-shared/SizeAwareWrapper"));
-var SizeAwareWrapper_default = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
+var SizeAwareWrapper_default = "default" in defaultImport40 ? defaultImport40.default : defaultImport40;
 
 // src/common/hocs/FixedSizeContainer.tsx
 var Item = styled_components_default.div.attrs(({ width }) => ({
@@ -2834,9 +2931,14 @@ var Item = styled_components_default.div.attrs(({ width }) => ({
     position: relative;
     background-color: ${(props) => (0, colorUtils_exports.isColor)(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor}};
 `;
-var FixSizeItem = styled_components_default.div.attrs(({ width, height }) => ({
-  style: __spreadValues(__spreadValues({}, width && { width: (0, style_exports.toPx)(width) }), height && { height: (0, style_exports.toPx)(height) })
-}))`
+var FixSizeItem = styled_components_default.div.attrs(
+  ({
+    width,
+    height
+  }) => ({
+    style: __spreadValues(__spreadValues({}, width && { width: (0, style_exports.toPx)(width) }), height && { height: (0, style_exports.toPx)(height) })
+  })
+)`
     position: relative;
     flex-direction: column;
     flex: 1;
@@ -2870,7 +2972,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "27.5.0 - 5cfbc7064",
+        "data-splunk-visualization-version": "28.1.0 - 4a1bff08b",
         width,
         height,
         backgroundColor
@@ -2936,7 +3038,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "27.5.0 - 5cfbc7064"
+  "data-splunk-visualization-version": "28.1.0 - 4a1bff08b"
 })`
     position: relative;
     width: 100%;
@@ -2953,15 +3055,6 @@ var withEditModeCover = (Visualization, disableEditModeCover) => {
 };
 var withEditModeCover_default = withEditModeCover;
 
-// esm-externals:@splunk/themes/variables
-var variables_exports = {};
-__export(variables_exports, {
-  default: () => variables_default
-});
-var defaultImport39 = __toESM(require("@splunk/themes/variables"));
-__reExport(variables_exports, require("@splunk/themes/variables"));
-var variables_default = "default" in defaultImport39 ? defaultImport39.default : defaultImport39;
-
 // src/common/components/IconPlaceholder.tsx
 var shouldShowIconPlaceholder = (dataSources, loading = false) => {
   const data = (0, lodash_exports.get)(dataSources, "primary.data.columns[0]", void 0);
@@ -3040,9 +3133,9 @@ var numberUtils_exports = {};
 __export(numberUtils_exports, {
   default: () => numberUtils_default
 });
-var defaultImport40 = __toESM(require("@splunk/visualizations-shared/numberUtils"));
+var defaultImport41 = __toESM(require("@splunk/visualizations-shared/numberUtils"));
 __reExport(numberUtils_exports, require("@splunk/visualizations-shared/numberUtils"));
-var numberUtils_default = "default" in defaultImport40 ? defaultImport40.default : defaultImport40;
+var numberUtils_default = "default" in defaultImport41 ? defaultImport41.default : defaultImport41;
 
 // src/common/utils/dataUtils.ts
 var convertToArrOfObjects = (columns, fields) => {
@@ -3331,7 +3424,12 @@ var useGetXAndYFields = ({
         y2Fields: options.y2 ? "> y2 | getField()" : void 0,
         fieldTypes: "> primary | getType()"
       };
-      const { xField = "", yFields = [], y2Fields = [], fieldTypes } = Options_exports.Options.evaluate(
+      const {
+        xField = "",
+        yFields = [],
+        y2Fields = [],
+        fieldTypes
+      } = Options_exports.Options.evaluate(
         { options: optionsToEvaluate, context },
         dataSourcesWithOnlyOnePoint,
         () => {
@@ -3434,9 +3532,9 @@ var FeatureFlags_exports = {};
 __export(FeatureFlags_exports, {
   default: () => FeatureFlags_default
 });
-var defaultImport41 = __toESM(require("@splunk/visualization-context/FeatureFlags"));
+var defaultImport42 = __toESM(require("@splunk/visualization-context/FeatureFlags"));
 __reExport(FeatureFlags_exports, require("@splunk/visualization-context/FeatureFlags"));
-var FeatureFlags_default = "default" in defaultImport41 ? defaultImport41.default : defaultImport41;
+var FeatureFlags_default = "default" in defaultImport42 ? defaultImport42.default : defaultImport42;
 
 // src/common/utils/featureFlagUtils.ts
 var getFeatureFlag = (context, flagName) => {
@@ -3454,9 +3552,9 @@ var trellisUtils_exports = {};
 __export(trellisUtils_exports, {
   default: () => trellisUtils_default
 });
-var defaultImport42 = __toESM(require("@splunk/visualizations-shared/trellisUtils"));
+var defaultImport43 = __toESM(require("@splunk/visualizations-shared/trellisUtils"));
 __reExport(trellisUtils_exports, require("@splunk/visualizations-shared/trellisUtils"));
-var trellisUtils_default = "default" in defaultImport42 ? defaultImport42.default : defaultImport42;
+var trellisUtils_default = "default" in defaultImport43 ? defaultImport43.default : defaultImport43;
 
 // src/common/utils/trellisUtils.ts
 var turnOffLegendDisplayWhenTrellisIsOn = (isTrellisOn, options) => {
@@ -3612,7 +3710,9 @@ var withDashboardViz = (opts) => {
           return result;
         }
       } catch (e) {
-        console.error(`unexpected error evaluating options: ${e.message}`);
+        if (e instanceof Error) {
+          console.error(`unexpected error evaluating options: ${e.message}`);
+        }
         return {};
       }
       return {};
@@ -3669,9 +3769,13 @@ var withDashboardViz = (opts) => {
         }
         eventCallbackProps[eventCallbackPropName] = (ev) => {
           if (ev && ev.payload) {
-            payload = ev.payload;
+            payload = __spreadValues({}, ev.payload);
           }
-          return onEventTrigger({ originalEvent: ev, payload, type: eventName });
+          return onEventTrigger({
+            originalEvent: ev,
+            payload,
+            type: eventName
+          });
         };
         if (parentKeys) {
           for (let i = parentKeys.length - 1; i >= 0; i -= 1) {
@@ -3737,9 +3841,9 @@ var dsl_exports = {};
 __export(dsl_exports, {
   default: () => dsl_default
 });
-var defaultImport43 = __toESM(require("@splunk/visualization-encoding/utils/dsl"));
+var defaultImport44 = __toESM(require("@splunk/visualization-encoding/utils/dsl"));
 __reExport(dsl_exports, require("@splunk/visualization-encoding/utils/dsl"));
-var dsl_default = "default" in defaultImport43 ? defaultImport43.default : defaultImport43;
+var dsl_default = "default" in defaultImport44 ? defaultImport44.default : defaultImport44;
 
 // src/common/utils/mapUtils.ts
 var columnsNullToZeros = (config2, dataSources, options) => {
@@ -3828,7 +3932,12 @@ var computeVizProps = (props) => {
     (field) => typeof field === "string" ? field : field.name
   );
   layers == null ? void 0 : layers.forEach((l) => formatLayer(l, dataFields, dataSourceData, transformedData));
-  return __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, themeColors), { themeColorScheme }), layers), { onOptionsChange, title });
+  return __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, themeColors), {
+    themeColorScheme
+  }), layers), {
+    onOptionsChange,
+    title
+  });
 };
 var withTooltipFields = (Viz) => {
   const VizWithTooltipFields = (_a) => {