@splunk/visualizations 24.3.5 → 24.5.1

package/Markdown.js

@@ -87,7 +87,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 201);
+/******/ 	return __webpack_require__(__webpack_require__.s = 205);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -113,14 +113,28 @@ module.exports = require("@babel/runtime/helpers/classCallCheck");
 
 /***/ }),
 
+/***/ 103:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Paragraph");
+
+/***/ }),
+
 /***/ 11:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/colorUtils");
+module.exports = require("@splunk/themes/variables");
 
 /***/ }),
 
 /***/ 12:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/colorUtils");
+
+/***/ }),
+
+/***/ 13:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -134,11 +148,11 @@ var React = __webpack_require__(1);
 
 var styled_components_1 = __webpack_require__(4);
 
-var SizeAwareWrapper_1 = __webpack_require__(16);
+var SizeAwareWrapper_1 = __webpack_require__(17);
 
-var style_1 = __webpack_require__(13);
+var style_1 = __webpack_require__(14);
 
-var colorUtils_1 = __webpack_require__(11);
+var colorUtils_1 = __webpack_require__(12);
 
 var Item = styled_components_1.default.div.attrs(function (_ref) {
   var width = _ref.width;
@@ -195,7 +209,7 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
 
     return React.createElement(FixSizeItem, {
       "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "24.3.5 - 8d7f16f22",
+      "data-splunk-visualization-version": "24.5.1 - edc4c958c",
       width: width,
       height: height,
       backgroundColor: backgroundColor
@@ -217,42 +231,88 @@ exports.default = withFixedSizeContainer;
 
 /***/ }),
 
-/***/ 124:
+/***/ 130:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
+var _taggedTemplateLiteral = __webpack_require__(77);
+
+var _templateObject;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.config = exports.themes = void 0;
+exports.getFontMap = exports.config = exports.themes = void 0;
 
 var lodash_1 = __webpack_require__(2);
 
 var React = __webpack_require__(1);
 
-var style_1 = __webpack_require__(13);
+var style_1 = __webpack_require__(14);
 
-var Markdown_1 = __webpack_require__(202);
+var Markdown_1 = __webpack_require__(206);
 
 var styled_components_1 = __webpack_require__(4);
 
 var T = __webpack_require__(0);
 
-var config_1 = __webpack_require__(203);
+var themes_1 = __webpack_require__(65);
+
+var Heading_1 = __webpack_require__(207);
+
+var Paragraph_1 = __webpack_require__(103);
+
+var List_1 = __webpack_require__(208);
+
+var Code_1 = __webpack_require__(209);
+
+var withDashboardViz_1 = __webpack_require__(29);
 
-exports.config = config_1.default;
+var config_1 = __webpack_require__(210);
 
-var withDashboardViz_1 = __webpack_require__(28); // startsWithHeader is a prop that can be
+exports.config = config_1.default; // map of valid font sizes with elements' respective pixel sizes
+
+var FONT_SIZES = {
+  extraSmall: {
+    h1: 18,
+    h2: 14,
+    h3: 12,
+    p: 10
+  },
+  small: {
+    h1: 20,
+    h2: 16,
+    h3: 14,
+    p: 12
+  },
+  default: {
+    h1: 24,
+    h2: 18,
+    h3: 16,
+    p: 14
+  },
+  large: {
+    h1: 32,
+    h2: 24,
+    h3: 18,
+    p: 16
+  },
+  extraLarge: {
+    h1: 48,
+    h2: 32,
+    h3: 24,
+    p: 18
+  }
+}; // startsWithHeader is a prop that can be
 // falsy if the markdown text begins with text
 // or the number of heading level;
 // casting heading level below 4 to 4
 // because ReactMarkdown supports heading level 1-4
 
-
-var Container = styled_components_1.default.div.withConfig({
-  displayName: "Markdown__Container",
+var MarkdownContainer = styled_components_1.default.div.withConfig({
+  displayName: "Markdown__MarkdownContainer",
   componentId: "zd3qkg-0"
 })(["overflow:auto;position:relative;box-sizing:border-box;", ";", ";background-color:", ";& *:not(code):not(pre):not(code *):not(a){color:", ";}", ";"], function (props) {
   return style_1.toDimension(lodash_1.pick(props, ['width', 'height']));
@@ -266,19 +326,119 @@ var Container = styled_components_1.default.div.withConfig({
   var startsWithHeader = _ref.startsWithHeader;
   return startsWithHeader && "\n        h".concat(startsWithHeader >= 4 ? 4 : startsWithHeader, ":first-of-type { \n            margin-top: 0px;\n        }\n    ");
 });
+var CodeBlockContainer = styled_components_1.default.div.withConfig({
+  displayName: "Markdown__CodeBlockContainer",
+  componentId: "zd3qkg-1"
+})(["padding:", ";margin:", " 0;background-color:", ";pre[data-test='code']{margin-bottom:0px;}code{font-size:", "px !important;}"], themes_1.pick({
+  enterprise: themes_1.variables.spacingHalf,
+  prisma: styled_components_1.css(_templateObject || (_templateObject = _taggedTemplateLiteral(["10px ", ""])), themes_1.variables.spacingLarge)
+}), themes_1.pick({
+  enterprise: themes_1.variables.spacingHalf,
+  prisma: themes_1.variables.spacingLarge
+}), themes_1.pick({
+  enterprise: {
+    light: themes_1.variables.gray96,
+    dark: themes_1.variables.gray22
+  },
+  prisma: themes_1.variables.backgroundColorSection
+}), function (props) {
+  return props.fontSize;
+});
+var CodeInlineContainer = styled_components_1.default.code.withConfig({
+  displayName: "Markdown__CodeInlineContainer",
+  componentId: "zd3qkg-2"
+})(["", ";font-family:", ";background-color:", ";"], themes_1.mixins.reset('inline'), themes_1.variables.monoFontFamily, themes_1.pick({
+  enterprise: {
+    light: themes_1.variables.gray92,
+    dark: themes_1.variables.gray22
+  },
+  prisma: themes_1.variables.neutral200
+})); // retrieves the font map associated with a valid `fontSize` value. If the fontSize
+//  passed is invalid (does not exist in FONT_SIZES), the `default` value is used.
+
+var getFontMap = function getFontMap(fontSize) {
+  var font = fontSize;
+
+  if (!FONT_SIZES[fontSize]) {
+    console.error("'".concat(fontSize, "' is not a valid value for Markdown's fontSize option. Using the 'default' font size."));
+    font = 'default';
+  }
+
+  return FONT_SIZES[font];
+};
+
+exports.getFontMap = getFontMap; // returns renderers customized with the appropriate font sizes given the provided `fontSize` value.
+
+var getMarkdownRenderer = function getMarkdownRenderer(fontSize) {
+  /* eslint-disable react/display-name, react/prop-types */
+  var fontMap = getFontMap(fontSize);
+  return {
+    paragraphRenderer: function paragraphRenderer(_ref2) {
+      var children = _ref2.children;
+      return React.createElement(Paragraph_1.default, {
+        style: {
+          fontSize: fontMap.p
+        }
+      }, children);
+    },
+    headingRenderer: function headingRenderer(_ref3) {
+      var children = _ref3.children,
+          level = _ref3.level;
+      return React.createElement(Heading_1.default, {
+        level: level,
+        style: {
+          fontSize: fontMap["h".concat(level)],
+          lineHeight: "".concat(fontMap["h".concat(level)], "px")
+        }
+      }, children);
+    },
+    itemRenderer: function itemRenderer(_ref4) {
+      var children = _ref4.children,
+          nodeKey = _ref4.nodeKey;
+      return React.createElement(List_1.default.Item, {
+        style: {
+          fontSize: fontMap.p
+        },
+        key: nodeKey
+      }, children);
+    },
+    codeBlockRenderer: function codeBlockRenderer(_ref5) {
+      var language = _ref5.language,
+          literal = _ref5.literal,
+          nodeKey = _ref5.nodeKey;
+      return React.createElement(CodeBlockContainer, {
+        fontSize: fontMap.p
+      }, React.createElement(Code_1.default, {
+        value: literal,
+        language: language,
+        key: nodeKey
+      }));
+    },
+    codeRenderer: function codeRenderer(_ref6) {
+      var literal = _ref6.literal;
+      return React.createElement(CodeInlineContainer, {
+        style: {
+          fontSize: fontMap.p
+        }
+      }, literal);
+    }
+  };
+};
 
-var MarkdownVisualization = function MarkdownVisualization(_ref2) {
-  var height = _ref2.height,
-      width = _ref2.width,
-      markdown = _ref2.markdown,
-      backgroundColor = _ref2.backgroundColor,
-      fontColor = _ref2.fontColor;
+var MarkdownVisualization = function MarkdownVisualization(_ref7) {
+  var height = _ref7.height,
+      width = _ref7.width,
+      markdown = _ref7.markdown,
+      backgroundColor = _ref7.backgroundColor,
+      fontColor = _ref7.fontColor,
+      fontSize = _ref7.fontSize;
 
   var _a; // because DSL evaluation is not guaranteed to return string data if `markdown` is powered by DSL, we do a typecast here
 
 
   var stringifiedMarkdown = "".concat(markdown);
-  return React.createElement(Container, {
+  var renderersForFontSize = getMarkdownRenderer(fontSize);
+  return React.createElement(MarkdownContainer, {
     "data-testid": "markdown-container",
     padding: [5, 5, 5, 5],
     width: width,
@@ -286,9 +446,9 @@ var MarkdownVisualization = function MarkdownVisualization(_ref2) {
     backgroundColor: backgroundColor,
     fontColor: fontColor,
     startsWithHeader: (_a = stringifiedMarkdown.trim().match(/^#+/)) === null || _a === void 0 ? void 0 : _a[0].length
-  }, React.createElement(Markdown_1.default, {
+  }, React.createElement(Markdown_1.default, Object.assign({
     text: stringifiedMarkdown
-  }));
+  }, renderersForFontSize)));
 };
 
 var propTypes = {
@@ -296,14 +456,16 @@ var propTypes = {
   height: T.oneOfType([T.string, T.number]),
   markdown: T.string,
   backgroundColor: T.string,
-  fontColor: T.string
+  fontColor: T.string,
+  fontSize: T.string
 };
 var defaultProps = {
   width: '100%',
   height: undefined,
   markdown: '',
   backgroundColor: 'transparent',
-  fontColor: 'rgba(255, 255, 255, 0.7)'
+  fontColor: 'rgba(255, 255, 255, 0.7)',
+  fontSize: 'default'
 };
 MarkdownVisualization.propTypes = propTypes;
 MarkdownVisualization.defaultProps = defaultProps;
@@ -317,49 +479,49 @@ exports.default = Markdown;
 
 /***/ }),
 
-/***/ 13:
+/***/ 14:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/style");
 
 /***/ }),
 
-/***/ 14:
+/***/ 15:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/schemaUtils");
 
 /***/ }),
 
-/***/ 15:
+/***/ 16:
 /***/ (function(module, exports) {
 
 module.exports = require("@babel/runtime/helpers/createClass");
 
 /***/ }),
 
-/***/ 16:
+/***/ 17:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
 
 /***/ }),
 
-/***/ 2:
+/***/ 19:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash");
+module.exports = require("@splunk/visualization-context/TimezoneContext");
 
 /***/ }),
 
-/***/ 20:
+/***/ 2:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/typeof");
+module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 201:
+/***/ 205:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -389,9 +551,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-__exportStar(__webpack_require__(124), exports);
+__exportStar(__webpack_require__(130), exports);
 
-var Markdown_1 = __webpack_require__(124);
+var Markdown_1 = __webpack_require__(130);
 
 Object.defineProperty(exports, "default", {
   enumerable: true,
@@ -402,38 +564,66 @@ Object.defineProperty(exports, "default", {
 
 /***/ }),
 
-/***/ 202:
+/***/ 206:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Markdown");
 
 /***/ }),
 
-/***/ 203:
+/***/ 207:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Heading");
+
+/***/ }),
+
+/***/ 208:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/List");
+
+/***/ }),
+
+/***/ 209:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Code");
+
+/***/ }),
+
+/***/ 21:
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/typeof");
+
+/***/ }),
+
+/***/ 210:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _toConsumableArray = __webpack_require__(39);
+var _toConsumableArray = __webpack_require__(41);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var themes_1 = __webpack_require__(70);
+var themes_1 = __webpack_require__(65);
 
 var i18n_1 = __webpack_require__(3);
 
-var schemaUtils_1 = __webpack_require__(14);
+var schemaUtils_1 = __webpack_require__(15);
 
 var VizBehavior_1 = __webpack_require__(5);
 
-var VizCategory_1 = __webpack_require__(27);
+var VizCategory_1 = __webpack_require__(28);
 
 var configUtils_1 = __webpack_require__(6);
 
-var BackgroundColor_1 = __webpack_require__(45);
+var BackgroundColor_1 = __webpack_require__(48);
 
 var dataContract = {
   requiredDataSources: [],
@@ -468,6 +658,12 @@ var optionsSchema = {
     default: '> themes.defaultFontColor',
     pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA
   },
+  fontSize: {
+    description: 'Specify the font size you would like to use for markdown content. Font sizes range from extra small (10px for unformatted text) to extra large (18px for unformatted text) with the default being 14px for unformatted text.',
+    type: 'string',
+    default: 'default',
+    pattern: schemaUtils_1.getPattern(['extraSmall', 'small', 'default', 'large', 'extraLarge'])
+  },
   markdown: {
     description: 'Add text using basic markdown syntax.',
     type: 'string'
@@ -506,7 +702,29 @@ var editorConfig = [{
   }].concat(_toConsumableArray(BackgroundColor_1.default({
     label: 'Background Color',
     themes: themes
-  })))]
+  }))), [{
+    label: i18n_1._('Font Size'),
+    option: 'fontSize',
+    editor: 'editor.select',
+    editorProps: {
+      values: [{
+        label: i18n_1._('Extra Small'),
+        value: 'extraSmall'
+      }, {
+        label: i18n_1._('Small'),
+        value: 'small'
+      }, {
+        label: i18n_1._('Default'),
+        value: 'default'
+      }, {
+        label: i18n_1._('Large'),
+        value: 'large'
+      }, {
+        label: i18n_1._('Extra Large'),
+        value: 'extraLarge'
+      }]
+    }
+  }]]
 }];
 /**
  * visualization configuration
@@ -540,13 +758,139 @@ exports.default = configUtils_1.enhanceConfig(config);
 
 /***/ }),
 
-/***/ 23:
+/***/ 24:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _defineProperty = __webpack_require__(8);
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pickFieldFromJSONSchema = void 0;
+
+var lodash_1 = __webpack_require__(2);
+
+var pickFieldFromJSONSchema = function pickFieldFromJSONSchema(optionsSchema) {
+  var fieldName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'default';
+  return Object.keys(optionsSchema).reduce(function (accum, k) {
+    if (lodash_1.has(optionsSchema[k], fieldName)) {
+      accum[k] = optionsSchema[k][fieldName];
+    } else if (lodash_1.get(optionsSchema, [k, 'type']) === 'object' && lodash_1.has(optionsSchema[k], 'properties')) {
+      var nestedSchema = exports.pickFieldFromJSONSchema(optionsSchema[k].properties, fieldName);
+
+      if (!lodash_1.isEmpty(nestedSchema)) {
+        accum[k] = nestedSchema;
+      }
+    }
+
+    return accum;
+  }, {});
+};
+
+exports.pickFieldFromJSONSchema = pickFieldFromJSONSchema;
+
+/***/ }),
+
+/***/ 25:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shouldShowIconPlaceholder = void 0;
+
+var React = __webpack_require__(1);
+
+var T = __webpack_require__(0);
+
+var lodash_1 = __webpack_require__(2);
+
+var i18n_1 = __webpack_require__(3);
+
+var Message_1 = __webpack_require__(9);
+
+var FixedSizeContainer_1 = __webpack_require__(13);
+/**
+ * @method shouldShowIconPlaceholder
+ * @param {object} dataSources
+ * @param {boolean} loading
+ * @returns {boolean}
+ */
+
+
+var shouldShowIconPlaceholder = function shouldShowIconPlaceholder(dataSources) {
+  var loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var data = lodash_1.get(dataSources, 'primary.data.columns[0]', undefined);
+  var noData = data === undefined;
+  var fields = lodash_1.get(dataSources, 'primary.data.fields[0]', undefined);
+  var noFields = fields === undefined;
+  return loading || noData || noFields;
+};
+
+exports.shouldShowIconPlaceholder = shouldShowIconPlaceholder;
+var propTypes = {
+  icon: T.func,
+  width: T.oneOfType([T.string, T.number]),
+  height: T.oneOfType([T.string, T.number]),
+  // eslint-disable-next-line react/no-unused-prop-types
+  backgroundColor: T.string,
+  iconColor: T.string
+};
+/**
+ * @method IconPlaceholder
+ * @param {IconPlaceholderProps} props
+ * @returns {React.ReactElement}
+ */
+
+var IconPlaceholder = function IconPlaceholder(props) {
+  var width = props.width,
+      height = props.height,
+      icon = props.icon,
+      iconColor = props.iconColor;
+
+  if (icon) {
+    return React.createElement(icon, {
+      style: {
+        left: '50%',
+        top: '50%',
+        color: iconColor,
+        opacity: 0.15,
+        position: 'absolute',
+        transform: 'translate(-50%, -50%)'
+      },
+      width: '50%',
+      height: '50%'
+    });
+  }
+
+  return React.createElement(Message_1.default, {
+    width: width,
+    height: height,
+    level: "warning",
+    message: i18n_1._('No DataSource Connected')
+  });
+};
+
+IconPlaceholder.propTypes = propTypes;
+IconPlaceholder.defaultProps = {
+  width: '100%',
+  height: 250
+};
+exports.default = FixedSizeContainer_1.default(IconPlaceholder);
+
+/***/ }),
+
+/***/ 26:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _defineProperty = __webpack_require__(7);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -557,7 +901,7 @@ var T = __webpack_require__(0);
 
 var lodash_1 = __webpack_require__(2);
 
-var DataSource_1 = __webpack_require__(34);
+var DataSource_1 = __webpack_require__(36);
 
 exports.SortParamsPropTypes = T.shape({
   currentSortKey: T.string,
@@ -611,7 +955,7 @@ exports.getSortingParams = getSortingParams;
 
 /***/ }),
 
-/***/ 24:
+/***/ 27:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -676,130 +1020,7 @@ exports.getPaginationParams = getPaginationParams;
 
 /***/ }),
 
-/***/ 25:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.pickFieldFromJSONSchema = void 0;
-
-var lodash_1 = __webpack_require__(2);
-
-var pickFieldFromJSONSchema = function pickFieldFromJSONSchema(optionsSchema) {
-  var fieldName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'default';
-  return Object.keys(optionsSchema).reduce(function (accum, k) {
-    if (lodash_1.has(optionsSchema[k], fieldName)) {
-      accum[k] = optionsSchema[k][fieldName];
-    } else if (lodash_1.get(optionsSchema, [k, 'type']) === 'object' && lodash_1.has(optionsSchema[k], 'properties')) {
-      var nestedSchema = exports.pickFieldFromJSONSchema(optionsSchema[k].properties, fieldName);
-
-      if (!lodash_1.isEmpty(nestedSchema)) {
-        accum[k] = nestedSchema;
-      }
-    }
-
-    return accum;
-  }, {});
-};
-
-exports.pickFieldFromJSONSchema = pickFieldFromJSONSchema;
-
-/***/ }),
-
-/***/ 26:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.shouldShowIconPlaceholder = void 0;
-
-var React = __webpack_require__(1);
-
-var T = __webpack_require__(0);
-
-var lodash_1 = __webpack_require__(2);
-
-var i18n_1 = __webpack_require__(3);
-
-var Message_1 = __webpack_require__(9);
-
-var FixedSizeContainer_1 = __webpack_require__(12);
-/**
- * @method shouldShowIconPlaceholder
- * @param {object} dataSources
- * @param {boolean} loading
- * @returns {boolean}
- */
-
-
-var shouldShowIconPlaceholder = function shouldShowIconPlaceholder(dataSources) {
-  var loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var data = lodash_1.get(dataSources, 'primary.data.columns[0]', undefined);
-  var noData = data === undefined;
-  var fields = lodash_1.get(dataSources, 'primary.data.fields[0]', undefined);
-  var noFields = fields === undefined;
-  return loading || noData || noFields;
-};
-
-exports.shouldShowIconPlaceholder = shouldShowIconPlaceholder;
-var propTypes = {
-  icon: T.func,
-  width: T.oneOfType([T.string, T.number]),
-  height: T.oneOfType([T.string, T.number]),
-  // eslint-disable-next-line react/no-unused-prop-types
-  backgroundColor: T.string
-};
-/**
- * @method IconPlaceholder
- * @param {IconPlaceholderProps} props
- * @returns {React.ReactElement}
- */
-
-var IconPlaceholder = function IconPlaceholder(props) {
-  var width = props.width,
-      height = props.height,
-      icon = props.icon;
-
-  if (icon) {
-    return React.createElement(icon, {
-      style: {
-        left: '50%',
-        top: '50%',
-        color: 'grey',
-        position: 'absolute',
-        transform: 'translate(-50%, -50%)'
-      },
-      width: '50%',
-      height: '50%'
-    });
-  }
-
-  return React.createElement(Message_1.default, {
-    width: width,
-    height: height,
-    level: "warning",
-    message: i18n_1._('No DataSource Connected')
-  });
-};
-
-IconPlaceholder.propTypes = propTypes;
-IconPlaceholder.defaultProps = {
-  width: '100%',
-  height: 250
-};
-exports.default = FixedSizeContainer_1.default(IconPlaceholder);
-
-/***/ }),
-
-/***/ 27:
+/***/ 28:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -828,7 +1049,7 @@ var VizCategory;
 
 /***/ }),
 
-/***/ 28:
+/***/ 29:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -842,33 +1063,37 @@ var React = __webpack_require__(1);
 
 var lodash_1 = __webpack_require__(2);
 
-var getSettingsFromThemedProps_1 = __webpack_require__(29);
+var getSettingsFromThemedProps_1 = __webpack_require__(30);
+
+var Options_1 = __webpack_require__(31);
 
-var Options_1 = __webpack_require__(30);
+var SanitizeProps_1 = __webpack_require__(32);
 
-var SanitizeProps_1 = __webpack_require__(31);
+var TimezoneContext_1 = __webpack_require__(19);
+
+var moment_1 = __webpack_require__(33);
 
 var styled_components_1 = __webpack_require__(4);
 
-var SplunkVisualization_1 = __webpack_require__(32);
+var SplunkVisualization_1 = __webpack_require__(34);
 
 var VizBehavior_1 = __webpack_require__(5);
 
-var getSorting_1 = __webpack_require__(23);
+var getSorting_1 = __webpack_require__(26);
 
-var getPagination_1 = __webpack_require__(24);
+var getPagination_1 = __webpack_require__(27);
 
-var useDeepMemo_1 = __webpack_require__(35);
+var useDeepMemo_1 = __webpack_require__(37);
 
-var JSONSchemaUtils_1 = __webpack_require__(25);
+var JSONSchemaUtils_1 = __webpack_require__(24);
 
-var MissingPropsMessage_1 = __webpack_require__(36);
+var MissingPropsMessage_1 = __webpack_require__(38);
 
-var withEditModeCover_1 = __webpack_require__(37);
+var withEditModeCover_1 = __webpack_require__(39);
 
-var withPlaceholder_1 = __webpack_require__(38);
+var withPlaceholder_1 = __webpack_require__(40);
 
-var hocUtils_1 = __webpack_require__(7);
+var hocUtils_1 = __webpack_require__(8);
 /**
  * hoc that wraps a pure react visualization in a Dashboard visualization
  * @param {DashboardVizOpts} opts
@@ -901,6 +1126,23 @@ var withDashboardViz = function withDashboardViz(opts) {
         theme = props.theme,
         onRequestParamsChange = props.onRequestParamsChange;
 
+    var _React$useContext = React.useContext(TimezoneContext_1.default),
+        serializedTimezone = _React$useContext.serializedTimezone;
+
+    if (serializedTimezone) {
+      /*
+          @splunk/moment currently does not allow us to customize the timezone on a per visualization basis.
+          This ensures that if a timezone was provided via TimezoneContext @splunk/moment time formatting
+           will use it.
+           @TODO(pwied):
+           - remove when we moved away from @splunk/moment
+           - provide timezone context to dynamic option evaluation phase
+      */
+      if (!moment_1.default.getDefaultSplunkTimezone()) {
+        moment_1.default.setDefaultSplunkTimezone(serializedTimezone);
+      }
+    }
+
     var themeFunc = function themeFunc(themeVar) {
       var _a, _b;
 
@@ -929,7 +1171,7 @@ var withDashboardViz = function withDashboardViz(opts) {
         console.error("unexpected error evaluating options:  + ".concat(e.message));
         return {};
       }
-    }, [currentThemeFamily, currentThemeColorScheme, currentThemeDensity, options, context, dataSources]); // useEffect hook needs to be initialized before any early returns
+    }, [currentThemeFamily, currentThemeColorScheme, currentThemeDensity, options, context, dataSources, serializedTimezone]); // useEffect hook needs to be initialized before any early returns
     // this is in accordance with the order of hook calls being the same on each render https://reactjs.org/docs/hooks-rules.html#explanation
 
     React.useEffect(function () {
@@ -1053,35 +1295,42 @@ exports.default = withDashboardViz;
 
 /***/ }),
 
-/***/ 29:
+/***/ 3:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/themes/getSettingsFromThemedProps");
+module.exports = require("@splunk/ui-utils/i18n");
 
 /***/ }),
 
-/***/ 3:
+/***/ 30:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/i18n");
+module.exports = require("@splunk/themes/getSettingsFromThemedProps");
 
 /***/ }),
 
-/***/ 30:
+/***/ 31:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-encoding/Options");
 
 /***/ }),
 
-/***/ 31:
+/***/ 32:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/SanitizeProps");
 
 /***/ }),
 
-/***/ 32:
+/***/ 33:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/moment");
+
+/***/ }),
+
+/***/ 34:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1099,7 +1348,7 @@ var T = __webpack_require__(0);
 
 var lodash_1 = __webpack_require__(2);
 
-var VizActionHandler_1 = __webpack_require__(33); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
+var VizActionHandler_1 = __webpack_require__(35); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
 
 
 exports.INITIAL_WIDTH = 250;
@@ -1233,7 +1482,7 @@ exports.default = SplunkVisualization;
 
 /***/ }),
 
-/***/ 33:
+/***/ 35:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1241,7 +1490,7 @@ exports.default = SplunkVisualization;
 
 var _classCallCheck = __webpack_require__(10);
 
-var _createClass = __webpack_require__(15);
+var _createClass = __webpack_require__(16);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -1271,7 +1520,7 @@ exports.DefaultVizActionHandler = DefaultVizActionHandler;
 
 /***/ }),
 
-/***/ 34:
+/***/ 36:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1285,7 +1534,7 @@ exports.validSortDirs = ['asc', 'desc', 'none'];
 
 /***/ }),
 
-/***/ 35:
+/***/ 37:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1331,7 +1580,7 @@ exports.useDeepMemo = useDeepMemo;
 
 /***/ }),
 
-/***/ 36:
+/***/ 38:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1350,7 +1599,7 @@ var i18n_1 = __webpack_require__(3);
 
 var Message_1 = __webpack_require__(9);
 
-var FixedSizeContainer_1 = __webpack_require__(12);
+var FixedSizeContainer_1 = __webpack_require__(13);
 /**
  * @method isMissing
  * @param {any} v
@@ -1412,7 +1661,7 @@ exports.default = FixedSizeContainer_1.default(exports.MissingPropsMessage);
 
 /***/ }),
 
-/***/ 37:
+/***/ 39:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1426,14 +1675,14 @@ var React = __webpack_require__(1);
 
 var styled_components_1 = __webpack_require__(4);
 
-var hocUtils_1 = __webpack_require__(7);
+var hocUtils_1 = __webpack_require__(8);
 
 var Cover = styled_components_1.default.div.withConfig({
   displayName: "withEditModeCover__Cover",
   componentId: "sc-1gsbnxb-0"
 })(["position:absolute;left:0;right:0;top:0;bottom:0;"]);
 var Blocker = styled_components_1.default.div.attrs({
-  'data-splunk-visualization-version': "24.3.5 - 8d7f16f22"
+  'data-splunk-visualization-version': "24.5.1 - edc4c958c"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"
@@ -1465,7 +1714,14 @@ exports.default = withEditModeCover;
 
 /***/ }),
 
-/***/ 38:
+/***/ 4:
+/***/ (function(module, exports) {
+
+module.exports = require("styled-components");
+
+/***/ }),
+
+/***/ 40:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1477,13 +1733,15 @@ Object.defineProperty(exports, "__esModule", {
 
 var React = __webpack_require__(1);
 
-var colorUtils_1 = __webpack_require__(11);
+var colorUtils_1 = __webpack_require__(12);
 
-var IconPlaceholder_1 = __webpack_require__(26);
+var variables_1 = __webpack_require__(11);
+
+var IconPlaceholder_1 = __webpack_require__(25);
 
 var VizBehavior_1 = __webpack_require__(5);
 
-var hocUtils_1 = __webpack_require__(7);
+var hocUtils_1 = __webpack_require__(8);
 
 var withPlaceholder = function withPlaceholder(Visualization) {
   var useIconPlaceholder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : IconPlaceholder_1.shouldShowIconPlaceholder;
@@ -1491,7 +1749,7 @@ var withPlaceholder = function withPlaceholder(Visualization) {
   var themes = config.themes;
 
   var Wrapper = function Wrapper(props) {
-    var _a;
+    var _a, _b;
 
     var dataSources = props.dataSources,
         loading = props.loading,
@@ -1500,14 +1758,17 @@ var withPlaceholder = function withPlaceholder(Visualization) {
         width = props.width;
     var showPlaceholder = useIconPlaceholder(dataSources, loading, options);
     var bgColorFromTheme = colorUtils_1.isColor(options === null || options === void 0 ? void 0 : options.backgroundColor) ? options === null || options === void 0 ? void 0 : options.backgroundColor : (_a = themes === null || themes === void 0 ? void 0 : themes.defaultBackgroundColor) === null || _a === void 0 ? void 0 : _a.call(themes, props);
+    var icon = (_b = config.placeholderIcon) !== null && _b !== void 0 ? _b : config.icon;
+    var iconColor = variables_1.default.contentColorActive(props);
 
     if (config.supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER) && showPlaceholder) {
       return React.createElement(IconPlaceholder_1.default, {
         "data-test": "icon-placeholder",
-        icon: config.icon,
+        icon: icon,
         width: width,
         height: height,
-        backgroundColor: bgColorFromTheme
+        backgroundColor: bgColorFromTheme,
+        iconColor: iconColor
       });
     }
 
@@ -1525,21 +1786,14 @@ exports.default = withPlaceholder;
 
 /***/ }),
 
-/***/ 39:
+/***/ 41:
 /***/ (function(module, exports) {
 
 module.exports = require("@babel/runtime/helpers/toConsumableArray");
 
 /***/ }),
 
-/***/ 4:
-/***/ (function(module, exports) {
-
-module.exports = require("styled-components");
-
-/***/ }),
-
-/***/ 45:
+/***/ 48:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1614,7 +1868,7 @@ var VizBehavior;
 "use strict";
 
 
-var _defineProperty = __webpack_require__(8);
+var _defineProperty = __webpack_require__(7);
 
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
@@ -1636,7 +1890,7 @@ exports.generatePrecisionValues = exports.getInitialPreset = exports.isDynamicOp
 
 var lodash_1 = __webpack_require__(2);
 
-var schemaUtils_1 = __webpack_require__(14);
+var schemaUtils_1 = __webpack_require__(15);
 
 var VizBehavior_1 = __webpack_require__(5);
 
@@ -1800,13 +2054,34 @@ exports.generatePrecisionValues = generatePrecisionValues;
 
 /***/ }),
 
+/***/ 65:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/themes");
+
+/***/ }),
+
 /***/ 7:
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/defineProperty");
+
+/***/ }),
+
+/***/ 77:
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/taggedTemplateLiteral");
+
+/***/ }),
+
+/***/ 8:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _typeof = __webpack_require__(20);
+var _typeof = __webpack_require__(21);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -1929,20 +2204,6 @@ exports.findClosestMatchFromDefaultList = findClosestMatchFromDefaultList;
 
 /***/ }),
 
-/***/ 70:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/themes");
-
-/***/ }),
-
-/***/ 8:
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/defineProperty");
-
-/***/ }),
-
 /***/ 9:
 /***/ (function(module, exports) {