@splunk/visualizations 25.4.0 → 25.5.0

package/Map.config.js

@@ -437,7 +437,36 @@ module.exports = require("@splunk/visualization-icons/placeholders");
 module.exports = require("@splunk/visualization-icons");
 
 /***/ }),
-/* 13 */,
+/* 13 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var i18n_1 = __webpack_require__(0);
+
+var background = function background(_ref) {
+  var label = _ref.label,
+      themes = _ref.themes,
+      labelPosition = _ref.labelPosition;
+  return [{
+    label: i18n_1._(label || 'Background'),
+    option: 'backgroundColor',
+    editor: 'editor.color',
+    editorProps: {
+      labelPosition: labelPosition || 'top',
+      themes: themes
+    }
+  }];
+};
+
+exports.default = background;
+
+/***/ }),
 /* 14 */
 /***/ (function(module, exports) {
 
@@ -516,6 +545,8 @@ var configUtils_1 = __webpack_require__(4);
 
 var MapUtils_1 = __webpack_require__(53);
 
+var BackgroundColor_1 = __webpack_require__(13);
+
 var defaultContext = {
   colorRangeConfig: [{
     to: 20,
@@ -561,6 +592,15 @@ var optionsSchema = {
     pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA,
     type: 'string'
   },
+  baseLayerTileServer: {
+    type: 'string',
+    description: 'Specify the URL for the set of tiles that make up the base map.'
+  },
+  baseLayerTileServerType: {
+    type: 'string',
+    description: 'Specify the type of tile set for the base map.',
+    pattern: schemaUtils_1.getPattern(['vector', 'raster'])
+  },
   center: {
     type: 'array',
     description: 'Specify the center of the map in coordinates, in the form of [latitude, longitude]. If you don’t provide coordinates, the map automatically centers, based on available location data. If there is no available location data, the center of the map defaults to [37.7749, -122.4194].',
@@ -592,7 +632,10 @@ var optionsSchema = {
       areaValues: '> primary | seriesByType("number")',
       dataColors: '> areaValues | gradient()',
       additionalTooltipFields: [],
-      resultLimit: 1000
+      resultLimit: 1000,
+      choroplethEmptyAreaColor: '> themes.defaultChoroplethEmptyAreaColor',
+      choroplethStrokeColor: 'transparent',
+      choroplethOpacity: 0.8
     }],
     type: 'array',
     description: 'Specify the optional data visualization layers over the base map. If empty, only the base map appears.',
@@ -678,7 +721,7 @@ var optionsSchema = {
             default: '> primary | seriesByType("number")'
           },
           dataColors: {
-            description: 'Specify the colors to use for data points. You can use an array of colors to be picked from, or you can use a dataSource to apply dynamic coloring. For example, “> primary | seriesByName("status") | matchValue(colorMatchConfig)”. When type: "choropleth", dataColors is defined by default, and the opacities are shown at 80% of maximum to allow textual information to be visible in the map. By default, the dataColors option is not defined for type "bubble" or "marker".',
+            description: 'Specify the colors to use for data points. You can use an array of colors to be picked from, or you can use a dataSource to apply dynamic coloring. For example, “> primary | seriesByName("status") | matchValue(colorMatchConfig)”. When type: "choropleth", dataColors is defined by default. By default, the dataColors option is not defined for type "bubble" or "marker".',
             type: ['string', 'array'],
             items: {
               type: 'string'
@@ -697,6 +740,28 @@ var optionsSchema = {
             description: 'Specify the maximum number of data points to render on the map. Adjust the value to improve performance.',
             type: 'number',
             default: 1000
+          },
+          source: {
+            description: 'Source for the geodata for choropleth layer: "us" or "world", and will override data specified in the SPL geom command.',
+            pattern: schemaUtils_1.getPattern(['geo://default/us', 'geo://default/world']),
+            type: 'string'
+          },
+          choroplethEmptyAreaColor: {
+            description: 'Specify the color used for empty choropleth areas when "type": "choropleth", and will only work when "source" option is correctly configured.',
+            pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA,
+            type: 'string',
+            default: '> themes.defaultChoroplethEmptyAreaColor'
+          },
+          choroplethStrokeColor: {
+            description: 'Specify the stroke color for choropleth area outlines. The hex value format should be "#FFFFFF".',
+            pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA,
+            type: 'string',
+            default: 'transparent'
+          },
+          choroplethOpacity: {
+            description: 'Specify the opacity of choropleth areas. Choose a number in the range of 0 - 1 (inclusive). You can also express the value as a percentage. For example, "0.8" in code or "80%" in UI.',
+            type: 'number',
+            default: 0.8
           }
         }
       }, {
@@ -771,25 +836,20 @@ var optionsSchema = {
     description: 'Specify the scale unit to use.',
     pattern: schemaUtils_1.getPattern(['metric', 'imperial'])
   },
-  // TODO: choropleth map retain old design
-  // showBaseLayer: {
-  //     default: true,
-  //     type: 'boolean',
-  //     description: 'Specify if showing the base map.',
-  // },
+  showBaseLayer: {
+    default: true,
+    type: 'boolean',
+    description: 'Specify if showing the base map.'
+  },
   showScale: {
     default: true,
     type: 'boolean',
     description: 'Specify whether to display the scale on the bottom left.'
   },
-  baseLayerTileServer: {
-    type: 'string',
-    description: 'Specify the URL for the set of tiles that make up the base map.'
-  },
-  baseLayerTileServerType: {
-    type: 'string',
-    description: 'Specify the type of tile set for the base map.',
-    pattern: schemaUtils_1.getPattern(['vector', 'raster'])
+  showZoomControls: {
+    default: true,
+    type: 'boolean',
+    description: 'Specify whether to display the control panel of zoom on the top left.'
   },
   zoom: {
     description: 'Specify the zoom level of the map.',
@@ -820,6 +880,30 @@ var themes = {
       enterprise: themes_1.variables.textColor(props),
       prisma: themes_1.variables.contentColorDefault(props)
     })(props);
+  },
+  defaultChoroplethEmptyAreaColor: function defaultChoroplethEmptyAreaColor(props) {
+    return themes_1.pick({
+      enterprise: {
+        dark: themes_1.variables.gray22(props),
+        light: themes_1.variables.gray92(props)
+      },
+      prisma: {
+        dark: themes_1.variables.interactiveColorBackground(props),
+        light: themes_1.variables.neutral300(props)
+      }
+    })(props);
+  },
+  defaultGradientMigrationConfig: function defaultGradientMigrationConfig(props) {
+    return themes_1.pick({
+      enterprise: {
+        dark: ['#4D4A5D', themes_1.variables.syntaxPurple(props)],
+        light: ['#D2CFDC', themes_1.variables.syntaxPurple(props)]
+      },
+      prisma: {
+        dark: ['#484558', themes_1.variables.syntaxPurple(props)],
+        light: ['#D8D4E1', themes_1.variables.syntaxPurple(props)]
+      }
+    })(props);
   }
 };
 
@@ -827,26 +911,31 @@ var checkTypeIsChoropleth = function checkTypeIsChoropleth(options) {
   return options.layers && options.layers.length && options.layers[0].type === MapUtils_1.LAYER_TYPE.Choropleth;
 };
 
+var checkTypeIsLocalChoropleth = function checkTypeIsLocalChoropleth(options) {
+  return options.layers && options.layers.length && options.layers[0].type === MapUtils_1.LAYER_TYPE.Choropleth && (options.layers[0].source === 'geo://default/us' || options.layers[0].source === 'geo://default/world');
+};
+
+var EDITOR_LABEL_WIDTH = 140;
 var editorConfig = [{
-  label: i18n_1._('Data Layer Formatting'),
+  label: i18n_1._('Data configurations'),
   layout: [[{
-    label: i18n_1._('Layer Type'),
+    label: i18n_1._('Layer type'),
     option: 'layers[0].type',
     editor: 'editor.select',
     editorProps: {
       values: [{
-        label: i18n_1._('Marker'),
-        value: MapUtils_1.LAYER_TYPE.Marker
-      }, {
         label: i18n_1._('Bubble'),
         value: MapUtils_1.LAYER_TYPE.Bubble
+      }, {
+        label: i18n_1._('Marker'),
+        value: MapUtils_1.LAYER_TYPE.Marker
       }, {
         label: i18n_1._('Choropleth'),
         value: MapUtils_1.LAYER_TYPE.Choropleth
       }]
     }
   }], [{
-    label: i18n_1._('Region Area IDs'),
+    label: i18n_1._('Area IDs'),
     option: 'layers[0].areaIds',
     editor: 'editor.columnSelector',
     showEditor: function showEditor(_ref) {
@@ -859,7 +948,7 @@ var editorConfig = [{
       filterByTypes: ['string']
     }
   }], [{
-    label: i18n_1._('Values'),
+    label: i18n_1._('Area values'),
     option: 'layers[0].areaValues',
     editor: 'editor.columnSelector',
     showEditor: function showEditor(_ref2) {
@@ -896,7 +985,7 @@ var editorConfig = [{
       shouldShowInternalFields: false
     }
   }], [{
-    label: i18n_1._('Size'),
+    label: i18n_1._('Bubble size'),
     option: 'layers[0].bubbleSize',
     editor: 'editor.columnMultiSelector',
     showEditor: function showEditor(_ref5) {
@@ -908,6 +997,202 @@ var editorConfig = [{
       shouldShowInternalFields: false,
       excludeByNames: ['latitude', 'longitude', 'geobin']
     }
+  }], // TODO: update columnMultiSelectionByFieldNameEditor in dynamic editor repo and add editor for additionalTooltipFields option
+  // [
+  //     {
+  //         label: _('Additional tooltip fields'),
+  //         option: 'layers[0].additionalTooltipFields',
+  //         editor: 'editor.columnMultiSelectionByFieldNameEditor',
+  //         editorProps: {
+  //             excludeByNames: ['geom'],
+  //         },
+  //     },
+  // ],
+  [{
+    label: i18n_1._('Result limit'),
+    option: 'layers[0].resultLimit',
+    editor: 'editor.number',
+    showEditor: function showEditor(_ref6) {
+      var options = _ref6.options;
+      return !checkTypeIsLocalChoropleth(options);
+    },
+    editorProps: {
+      themes: themes,
+      labelPosition: 'top',
+      min: 0
+    }
+  }]]
+}, {
+  label: i18n_1._('Data display'),
+  layout: [// TODO: add an editor for center option in dynamic editor repo by combining two number editors
+  // [
+  //     {
+  //         label: _('Center'),
+  //         option: 'center',
+  //         editor: 'editor.number',
+  //         editorProps: {
+  //             themes,
+  //             labelPosition: 'top',
+  //         },
+  //     },
+  // ],
+  [{
+    label: i18n_1._('Zoom'),
+    option: 'zoom',
+    editor: 'editor.number',
+    editorProps: {
+      themes: themes,
+      labelPosition: 'top',
+      min: 0
+    }
+  }], [{
+    label: i18n_1._('Show zoom controls'),
+    option: 'showZoomControls',
+    editor: 'editor.toggle',
+    editorProps: {
+      labelPosition: 'left',
+      labelWidth: EDITOR_LABEL_WIDTH
+    }
+  }], [{
+    label: i18n_1._('Show scale'),
+    option: 'showScale',
+    editor: 'editor.toggle',
+    editorProps: {
+      labelPosition: 'left',
+      labelWidth: EDITOR_LABEL_WIDTH
+    }
+  }], [{
+    label: i18n_1._('Scale unit'),
+    option: 'scaleUnit',
+    editor: 'editor.radioBar',
+    showEditor: function showEditor(_ref7) {
+      var options = _ref7.options;
+      return options.showScale !== false;
+    },
+    editorProps: {
+      values: [{
+        label: i18n_1._('Metric'),
+        value: 'metric'
+      }, {
+        label: i18n_1._('Imperial'),
+        value: 'imperial'
+      }]
+    }
+  }]]
+}, {
+  label: i18n_1._('Color and style'),
+  layout: [// TODO: add support for color mode option and its corresponding editor
+  // [
+  //     {
+  //         label: _('Color mode'),
+  //         option: 'colorMode',
+  //         editor: 'editor.radioBar',
+  //         editorProps: {
+  //             values: [
+  //                 { label: _('Static'), value: 'static' },
+  //                 { label: _('Dynamic'), value: 'dynamic' },
+  //             ],
+  //         },
+  //     },
+  // ],
+  // TODO: fix seriesColor editor for map layers in dynamic editor repo
+  // [
+  //     {
+  //         label: _('Series colors'),
+  //         option: 'layers[0].seriesColors',
+  //         editor: 'editor.seriesColors',
+  //         showEditor: ({ options }) =>
+  //             !(options.layers && options.layers.length && options.layers[0].type === 'choropleth'),
+  //     },
+  // ],
+  // TODO: add editor for data colors
+  // [
+  //     {
+  //         label: _('Data colors'),
+  //         option: 'layers[0].dataColors',
+  //         editor: 'editor.text',
+  //         editorProps: {
+  //             themes,
+  //             labelPosition: 'top',
+  //         },
+  //     },
+  // ],
+  [{
+    label: i18n_1._('Choropleth empty area color'),
+    option: 'layers[0].choroplethEmptyAreaColor',
+    editor: 'editor.color',
+    showEditor: function showEditor(_ref8) {
+      var options = _ref8.options;
+      return checkTypeIsLocalChoropleth(options);
+    },
+    editorProps: {
+      themes: themes
+    }
+  }], [{
+    label: i18n_1._('Choropleth stroke color'),
+    option: 'layers[0].choroplethStrokeColor',
+    editor: 'editor.color',
+    showEditor: function showEditor(_ref9) {
+      var options = _ref9.options;
+      return checkTypeIsChoropleth(options);
+    },
+    editorProps: {
+      themes: themes
+    }
+  }], [{
+    label: i18n_1._('Choropleth opacity (%)'),
+    option: 'layers[0].choroplethOpacity',
+    editor: 'editor.percent',
+    showEditor: function showEditor(_ref10) {
+      var options = _ref10.options;
+      return checkTypeIsChoropleth(options);
+    },
+    editorProps: {
+      themes: themes,
+      min: 0
+    }
+  }], // TODO: add support for seriesColorsByField option
+  // [
+  //     {
+  //         label: _('Series colors by field name'),
+  //         option: 'seriesColorsByField',
+  //         editor: 'editor.seriesColorsByField',
+  //     },
+  // ],
+  BackgroundColor_1.default({
+    themes: themes
+  }), [{
+    label: i18n_1._('Show base layer'),
+    option: 'showBaseLayer',
+    editor: 'editor.toggle',
+    editorProps: {
+      labelPosition: 'left'
+    }
+  }], [{
+    label: i18n_1._('Base layer tile server'),
+    option: 'baseLayerTileServer',
+    editor: 'editor.text',
+    showEditor: function showEditor(_ref11) {
+      var options = _ref11.options;
+      return options.showBaseLayer !== false;
+    }
+  }], [{
+    label: i18n_1._('Base layer tile server type'),
+    option: 'baseLayerTileServerType',
+    editor: 'editor.radioBar',
+    showEditor: function showEditor(_ref12) {
+      var options = _ref12.options;
+      return options.showBaseLayer === false ? false : !(typeof options.baseLayerTileServer === 'undefined' || options.baseLayerTileServer === '');
+    },
+    editorProps: {
+      values: [{
+        label: i18n_1._('Vector'),
+        value: 'vector'
+      }, {
+        label: i18n_1._('Raster'),
+        value: 'raster'
+      }]
+    }
   }]]
 }];
 /**
@@ -1074,7 +1359,8 @@ exports.getTilePreset = getTilePreset;
  */
 
 var getMapStyle = function getMapStyle(_ref2) {
-  var _ref2$baseLayerTileSe = _ref2.baseLayerTileServer,
+  var showBaseLayer = _ref2.showBaseLayer,
+      _ref2$baseLayerTileSe = _ref2.baseLayerTileServer,
       baseLayerTileServer = _ref2$baseLayerTileSe === void 0 ? '' : _ref2$baseLayerTileSe,
       _ref2$baseLayerTileSe2 = _ref2.baseLayerTileServerType,
       baseLayerTileServerType = _ref2$baseLayerTileSe2 === void 0 ? '' : _ref2$baseLayerTileSe2,
@@ -1087,6 +1373,26 @@ var getMapStyle = function getMapStyle(_ref2) {
       _ref2$defaultTileDark = _ref2.defaultTileDark,
       defaultTileDark = _ref2$defaultTileDark === void 0 ? {} : _ref2$defaultTileDark;
 
+  if (!showBaseLayer) {
+    return {
+      version: exports.MAP_STYLE_VERSION_NUMBER,
+      sources: {
+        'base-tiles': {
+          type: 'raster',
+          tiles: ['data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='],
+          tileSize: 256
+        }
+      },
+      layers: [{
+        id: 'base-layer',
+        type: 'raster',
+        source: 'base-tiles',
+        minzoom: 0,
+        maxzoom: 22
+      }]
+    };
+  }
+
   if (baseLayerTileServer && tilePreset[baseLayerTileServer] && (tilePreset[baseLayerTileServer].theme === colorScheme || tilePreset[baseLayerTileServer].theme === 'all')) {
     return tilePreset[baseLayerTileServer];
   }
@@ -1441,19 +1747,17 @@ var getGlobalLayerBoundaries = function getGlobalLayerBoundaries(layers) {
 
 exports.getGlobalLayerBoundaries = getGlobalLayerBoundaries;
 
-var getScaledOpacities = function getScaledOpacities(colors) {
+var getScaledOpacities = function getScaledOpacities(colors, cfgOpacity) {
   // extract opacity information from 8 digit hex codes
   var opacities = colors === null || colors === void 0 ? void 0 : colors.map(function (color) {
     var _a;
 
-    return (color === null || color === void 0 ? void 0 : color.length) === 9 ? (_a = chroma(color).alpha()) !== null && _a !== void 0 ? _a : exports.DEFAULT_OPACITY : exports.DEFAULT_OPACITY;
-  }); // opacity cannot be greater than 0.8, otherwise it will block map labels
+    return (color === null || color === void 0 ? void 0 : color.length) === 9 ? (_a = chroma(color).alpha()) !== null && _a !== void 0 ? _a : 1 : 1;
+  }); // opacity cannot be greater than configured opacity
 
-  return (opacities === null || opacities === void 0 ? void 0 : opacities.filter(function (opacity) {
-    return opacity > exports.DEFAULT_OPACITY;
-  }).length) > 0 ? opacities.map(function (opacity) {
-    return opacity * exports.DEFAULT_OPACITY;
-  }) : opacities;
+  return opacities === null || opacities === void 0 ? void 0 : opacities.map(function (opacity) {
+    return opacity * cfgOpacity;
+  });
 };
 
 exports.getScaledOpacities = getScaledOpacities;