@splunk/visualizations 23.2.0 → 23.5.0

package/Punchcard.js

@@ -87,7 +87,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 192);
+/******/ 	return __webpack_require__(__webpack_require__.s = 206);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -170,6 +170,77 @@ module.exports = require("@babel/runtime/helpers/defineProperty");
 "use strict";
 
 
+var _typeof = __webpack_require__(22);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.deepMergeWithArrayOverrides = exports.extendStaticWrapperProps = void 0;
+
+var lodash_1 = __webpack_require__(2);
+/**
+ * @method extendStaticWrapperProps
+ * @param {Object} props
+ * @param {DashboardVizType} props.Wrapper
+ * @param {DashboardVizType} props.Visualization
+ */
+
+
+var extendStaticWrapperProps = function extendStaticWrapperProps(_ref) {
+  var Wrapper = _ref.Wrapper,
+      Visualization = _ref.Visualization;
+  var extendProperties = ['propTypes', 'defaultProps', 'config'];
+  extendProperties.forEach(function (prop) {
+    if (Visualization[prop]) {
+      Wrapper[prop] = Visualization[prop];
+    }
+  });
+};
+
+exports.extendStaticWrapperProps = extendStaticWrapperProps;
+/**
+ * helper to deeply merge objects while preserving arrays in earlier source objects
+ * deeply nested primitive keys are merged similarly to lodash's defaultsDeep, while keys with arrays will be preserved if already present in the resultant merged object
+ * this prevents default arrays from appending values to user-defined arrays (this occurs if the default array is longer than the user-defined one)
+ *
+ * @method deepMergeWithArrayOverrides
+ * @param {Object} initial - target object to merge values into
+ * @param {Object[]} sources - other default options to be merged into the resultant object if no explicit value is provided, with earlier args taking precedence over later ones
+ *
+ * @returns {Object}
+ */
+
+var deepMergeWithArrayOverrides = function deepMergeWithArrayOverrides(initial) {
+  var clone = lodash_1.cloneDeep(initial);
+
+  for (var _len = arguments.length, sources = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    sources[_key - 1] = arguments[_key];
+  }
+
+  sources.forEach(function (sourceToApply) {
+    Object.keys(sourceToApply).forEach(function (sourceKey) {
+      if (!clone.hasOwnProperty(sourceKey)) {
+        clone[sourceKey] = lodash_1.cloneDeep(sourceToApply[sourceKey]);
+      } // object merging excluding arrays
+
+
+      if (clone[sourceKey] && _typeof(clone[sourceKey]) === 'object' && !Array.isArray(clone[sourceKey]) && _typeof(sourceToApply[sourceKey]) === 'object') {
+        clone[sourceKey] = exports.deepMergeWithArrayOverrides(clone[sourceKey], sourceToApply[sourceKey]);
+      }
+    });
+  });
+  return clone;
+};
+
+exports.deepMergeWithArrayOverrides = deepMergeWithArrayOverrides;
+
+/***/ }),
+/* 8 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
 var _defineProperty = __webpack_require__(6);
 
 var __rest = this && this.__rest || function (s, e) {
@@ -355,25 +426,25 @@ function generatePrecisionValues(numPrecisionValues) {
 exports.generatePrecisionValues = generatePrecisionValues;
 
 /***/ }),
-/* 8 */
+/* 9 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/Message");
 
 /***/ }),
-/* 9 */
+/* 10 */
 /***/ (function(module, exports) {
 
 module.exports = require("@babel/runtime/helpers/classCallCheck");
 
 /***/ }),
-/* 10 */
+/* 11 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/colorUtils");
 
 /***/ }),
-/* 11 */
+/* 12 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -387,11 +458,11 @@ var React = __webpack_require__(1);
 
 var styled_components_1 = __webpack_require__(4);
 
-var SizeAwareWrapper_1 = __webpack_require__(18);
+var SizeAwareWrapper_1 = __webpack_require__(17);
 
 var style_1 = __webpack_require__(13);
 
-var colorUtils_1 = __webpack_require__(10);
+var colorUtils_1 = __webpack_require__(11);
 
 var Item = styled_components_1.default.div.attrs(function (_ref) {
   var width = _ref.width;
@@ -467,37 +538,6 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
 
 exports.default = withFixedSizeContainer;
 
-/***/ }),
-/* 12 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.extendStaticWrapperProps = void 0;
-/**
- * @method extendStaticWrapperProps
- * @param {Object} props
- * @param {DashboardVizType} props.Wrapper
- * @param {DashboardVizType} props.Visualization
- */
-
-var extendStaticWrapperProps = function extendStaticWrapperProps(_ref) {
-  var Wrapper = _ref.Wrapper,
-      Visualization = _ref.Visualization;
-  var extendProperties = ['propTypes', 'defaultProps', 'config'];
-  extendProperties.forEach(function (prop) {
-    if (Visualization[prop]) {
-      Wrapper[prop] = Visualization[prop];
-    }
-  });
-};
-
-exports.extendStaticWrapperProps = extendStaticWrapperProps;
-
 /***/ }),
 /* 13 */
 /***/ (function(module, exports) {
@@ -512,19 +552,19 @@ module.exports = require("@splunk/visualizations-shared/schemaUtils");
 
 /***/ }),
 /* 15 */,
-/* 16 */,
-/* 17 */
+/* 16 */
 /***/ (function(module, exports) {
 
 module.exports = require("@babel/runtime/helpers/createClass");
 
 /***/ }),
-/* 18 */
+/* 17 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
 
 /***/ }),
+/* 18 */,
 /* 19 */
 /***/ (function(module, exports) {
 
@@ -534,10 +574,22 @@ module.exports = require("@splunk/themes/variables");
 /* 20 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/themes/pick");
+module.exports = require("@splunk/visualizations-shared/numberUtils");
 
 /***/ }),
 /* 21 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/themes/pick");
+
+/***/ }),
+/* 22 */
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/typeof");
+
+/***/ }),
+/* 23 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -554,7 +606,7 @@ var T = __webpack_require__(0);
 
 var lodash_1 = __webpack_require__(2);
 
-var DataSource_1 = __webpack_require__(31);
+var DataSource_1 = __webpack_require__(33);
 
 exports.SortParamsPropTypes = T.shape({
   currentSortKey: T.string,
@@ -607,7 +659,7 @@ var getSortingParams = function getSortingParams(_ref) {
 exports.getSortingParams = getSortingParams;
 
 /***/ }),
-/* 22 */
+/* 24 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -671,7 +723,7 @@ var getPaginationParams = function getPaginationParams(_ref) {
 exports.getPaginationParams = getPaginationParams;
 
 /***/ }),
-/* 23 */
+/* 25 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -690,9 +742,9 @@ var lodash_1 = __webpack_require__(2);
 
 var i18n_1 = __webpack_require__(3);
 
-var Message_1 = __webpack_require__(8);
+var Message_1 = __webpack_require__(9);
 
-var FixedSizeContainer_1 = __webpack_require__(11);
+var FixedSizeContainer_1 = __webpack_require__(12);
 /**
  * @method shouldShowIconPlaceholder
  * @param {object} dataSources
@@ -758,7 +810,7 @@ IconPlaceholder.defaultProps = {
 exports.default = FixedSizeContainer_1.default(IconPlaceholder);
 
 /***/ }),
-/* 24 */
+/* 26 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -781,10 +833,12 @@ var VizCategory;
   VizCategory["SHAPES"] = "Shapes";
   VizCategory["MISC"] = "misc";
   VizCategory["FLOW"] = "Flow";
+  VizCategory["CORRELATION"] = "Correlation";
+  VizCategory["SPATIAL"] = "Spatial";
 })(VizCategory = exports.VizCategory || (exports.VizCategory = {}));
 
 /***/ }),
-/* 25 */
+/* 27 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -798,31 +852,33 @@ var React = __webpack_require__(1);
 
 var lodash_1 = __webpack_require__(2);
 
-var getSettingsFromThemedProps_1 = __webpack_require__(26);
-
-var Options_1 = __webpack_require__(27);
+var getSettingsFromThemedProps_1 = __webpack_require__(28);
 
-var SanitizeProps_1 = __webpack_require__(28);
+var Options_1 = __webpack_require__(29);
 
-var SplunkVisualization_1 = __webpack_require__(29);
+var SanitizeProps_1 = __webpack_require__(30);
 
 var styled_components_1 = __webpack_require__(4);
 
+var SplunkVisualization_1 = __webpack_require__(31);
+
 var VizBehavior_1 = __webpack_require__(5);
 
-var getSorting_1 = __webpack_require__(21);
+var getSorting_1 = __webpack_require__(23);
 
-var getPagination_1 = __webpack_require__(22);
+var getPagination_1 = __webpack_require__(24);
 
-var useDeepMemo_1 = __webpack_require__(32);
+var useDeepMemo_1 = __webpack_require__(34);
 
-var JSONSchemaUtils_1 = __webpack_require__(33);
+var JSONSchemaUtils_1 = __webpack_require__(35);
 
-var MissingPropsMessage_1 = __webpack_require__(34);
+var MissingPropsMessage_1 = __webpack_require__(36);
 
-var withEditModeCover_1 = __webpack_require__(35);
+var withEditModeCover_1 = __webpack_require__(37);
 
-var withPlaceholder_1 = __webpack_require__(36);
+var withPlaceholder_1 = __webpack_require__(38);
+
+var hocUtils_1 = __webpack_require__(7);
 /**
  * hoc that wraps a pure react visualization in a Dashboard visualization
  * @param {DashboardVizOpts} opts
@@ -875,7 +931,7 @@ var withDashboardViz = function withDashboardViz(opts) {
       try {
         return Options_1.Options.evaluate({
           context: lodash_1.defaultsDeep({}, context, vizConfig.defaultContext),
-          options: lodash_1.defaultsDeep({}, options, defaultOptions)
+          options: hocUtils_1.deepMergeWithArrayOverrides({}, options, defaultOptions)
         }, dataSources, themeFunc);
       } catch (e) {
         console.error("unexpected error evaluating options:  + ".concat(e.message));
@@ -886,7 +942,7 @@ var withDashboardViz = function withDashboardViz(opts) {
 
     React.useEffect(function () {
       onComputedProps(evaluatedOptions);
-    }); //present warning message if any required props are missing
+    }); // present warning message if any required props are missing
 
     var _vizConfig$requiredPr = vizConfig.requiredProps,
         requiredProps = _vizConfig$requiredPr === void 0 ? [] : _vizConfig$requiredPr,
@@ -909,7 +965,7 @@ var withDashboardViz = function withDashboardViz(opts) {
     if (hasEventHandlers && mode === 'view' && vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.EVENTS) > -1) {
       var supportedEvents = vizConfig.events;
       Object.keys(supportedEvents).forEach(function (eventName) {
-        var eventCallbackPropName = lodash_1.camelCase('on.' + eventName);
+        var eventCallbackPropName = lodash_1.camelCase("on.".concat(eventName));
         eventCallbackProps[eventCallbackPropName] = null; // todo: refactor single value and single value icon to send payload from viz
         // then remove these lines
 
@@ -1004,31 +1060,31 @@ var withDashboardViz = function withDashboardViz(opts) {
 exports.default = withDashboardViz;
 
 /***/ }),
-/* 26 */
+/* 28 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes/getSettingsFromThemedProps");
 
 /***/ }),
-/* 27 */
+/* 29 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-encoding/Options");
 
 /***/ }),
-/* 28 */
+/* 30 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/SanitizeProps");
 
 /***/ }),
-/* 29 */
+/* 31 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _classCallCheck = __webpack_require__(9);
+var _classCallCheck = __webpack_require__(10);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -1040,7 +1096,7 @@ var T = __webpack_require__(0);
 
 var lodash_1 = __webpack_require__(2);
 
-var VizActionHandler_1 = __webpack_require__(30); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
+var VizActionHandler_1 = __webpack_require__(32); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
 
 
 exports.INITIAL_WIDTH = 250;
@@ -1173,15 +1229,15 @@ SplunkVisualization.defaultProps = {
 exports.default = SplunkVisualization;
 
 /***/ }),
-/* 30 */
+/* 32 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _classCallCheck = __webpack_require__(9);
+var _classCallCheck = __webpack_require__(10);
 
-var _createClass = __webpack_require__(17);
+var _createClass = __webpack_require__(16);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -1210,7 +1266,7 @@ var DefaultVizActionHandler = /*#__PURE__*/function () {
 exports.DefaultVizActionHandler = DefaultVizActionHandler;
 
 /***/ }),
-/* 31 */
+/* 33 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1223,7 +1279,7 @@ exports.validSortDirs = void 0;
 exports.validSortDirs = ['asc', 'desc', 'none'];
 
 /***/ }),
-/* 32 */
+/* 34 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1268,7 +1324,7 @@ var useDeepMemo = function useDeepMemo(fn, dependencies) {
 exports.useDeepMemo = useDeepMemo;
 
 /***/ }),
-/* 33 */
+/* 35 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1301,7 +1357,7 @@ var pickFieldFromJSONSchema = function pickFieldFromJSONSchema(optionsSchema) {
 exports.pickFieldFromJSONSchema = pickFieldFromJSONSchema;
 
 /***/ }),
-/* 34 */
+/* 36 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1318,9 +1374,9 @@ var T = __webpack_require__(0);
 
 var i18n_1 = __webpack_require__(3);
 
-var Message_1 = __webpack_require__(8);
+var Message_1 = __webpack_require__(9);
 
-var FixedSizeContainer_1 = __webpack_require__(11);
+var FixedSizeContainer_1 = __webpack_require__(12);
 /**
  * @method isMissing
  * @param {any} v
@@ -1380,7 +1436,7 @@ exports.MissingPropsMessage.defaultProps = {
 exports.default = FixedSizeContainer_1.default(exports.MissingPropsMessage);
 
 /***/ }),
-/* 35 */
+/* 37 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1394,7 +1450,7 @@ var React = __webpack_require__(1);
 
 var styled_components_1 = __webpack_require__(4);
 
-var hocUtils_1 = __webpack_require__(12);
+var hocUtils_1 = __webpack_require__(7);
 
 var Cover = styled_components_1.default.div.withConfig({
   displayName: "withEditModeCover__Cover",
@@ -1429,7 +1485,7 @@ var withEditModeCover = function withEditModeCover(Visualization) {
 exports.default = withEditModeCover;
 
 /***/ }),
-/* 36 */
+/* 38 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1441,13 +1497,13 @@ Object.defineProperty(exports, "__esModule", {
 
 var React = __webpack_require__(1);
 
-var colorUtils_1 = __webpack_require__(10);
+var colorUtils_1 = __webpack_require__(11);
 
-var IconPlaceholder_1 = __webpack_require__(23);
+var IconPlaceholder_1 = __webpack_require__(25);
 
 var VizBehavior_1 = __webpack_require__(5);
 
-var hocUtils_1 = __webpack_require__(12);
+var hocUtils_1 = __webpack_require__(7);
 
 var withPlaceholder = function withPlaceholder(Visualization) {
   var useIconPlaceholder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : IconPlaceholder_1.shouldShowIconPlaceholder;
@@ -1488,35 +1544,277 @@ var withPlaceholder = function withPlaceholder(Visualization) {
 exports.default = withPlaceholder;
 
 /***/ }),
-/* 37 */
+/* 39 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/numberUtils");
+module.exports = require("@babel/runtime/helpers/toConsumableArray");
 
 /***/ }),
-/* 38 */,
-/* 39 */
+/* 40 */,
+/* 41 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-icons");
+module.exports = require("@splunk/visualization-color-palettes");
 
 /***/ }),
-/* 40 */
+/* 42 */
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/toConsumableArray");
+module.exports = require("@splunk/visualization-icons");
 
 /***/ }),
-/* 41 */
-/***/ (function(module, exports) {
+/* 43 */,
+/* 44 */
+/***/ (function(module, exports, __webpack_require__) {
 
-module.exports = require("@splunk/visualization-color-palettes");
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var i18n_1 = __webpack_require__(3);
+
+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;
+
+/***/ }),
+/* 45 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _toConsumableArray = __webpack_require__(39);
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.constructFieldsAndColumns = exports.toArrayForSeries = exports.isMultiSeriesData = exports.convertOverlayFields = exports.convertY2AxisOptions = exports.mapToValues = exports.truncateData = exports.getAnnotations = void 0;
+
+var lodash_1 = __webpack_require__(2);
+/**
+ * Get formatted annotations
+ * @method getAnnotations
+ * @param {Object} options
+ * @param {Array} options.annotationX
+ * @param {Array} options.annotationColor
+ * @param {Array} options.annotationLabel
+ * @returns {Array}
+ */
+
+
+var getAnnotations = function getAnnotations(_ref) {
+  var annotationX = _ref.annotationX,
+      annotationColor = _ref.annotationColor,
+      annotationLabel = _ref.annotationLabel;
+  return annotationX && annotationX.length ? annotationX.map(function (timestamp, i) {
+    return {
+      color: annotationColor && annotationColor[i],
+      label: annotationLabel && annotationLabel[i],
+      time: timestamp
+    };
+  }) : [];
+};
+
+exports.getAnnotations = getAnnotations;
+/**
+ * Truncate the result set to given limit
+ * @method truncateData
+ * @param {Object} dataSet - dataSources.primary.data
+ * @param {Number|String} truncationLimit - options['chart.resultTruncationLimit']
+ * @returns {Object}
+ */
+
+var truncateData = function truncateData(dataSet, truncationLimit) {
+  if (!dataSet) {
+    return null;
+  }
+
+  var limit = parseInt(truncationLimit, 10);
+
+  if (!limit || limit <= 0) {
+    return dataSet;
+  }
+
+  var truncatedData = Object.assign({}, dataSet);
+  truncatedData.columns = truncatedData.columns.map(function (columnData) {
+    return columnData.slice(0, limit);
+  });
+  return truncatedData;
+};
+
+exports.truncateData = truncateData;
+/**
+ * Helper method to update the option values into the values that SC accepts
+ * @method mapToValues
+ * @param {Object} options
+ * @returns {Object}
+ */
+
+var mapToValues = function mapToValues(optionValuesSCMapping) {
+  return function (options) {
+    var convertedOptions = Object.assign({}, options);
+    Object.keys(optionValuesSCMapping).forEach(function (key) {
+      if (lodash_1.has(options, key)) {
+        var updatedValue = optionValuesSCMapping[key][options[key]];
+
+        if (!lodash_1.isUndefined(updatedValue)) {
+          convertedOptions[key] = updatedValue;
+        }
+      }
+    });
+    return convertedOptions;
+  };
+};
+
+exports.mapToValues = mapToValues;
+/**
+ * Helper method to process options related to y2Fields
+ * @method convertY2AxisOptions
+ * @param {Object} originalOptions
+ * @returns {Object}
+ */
+
+var convertY2AxisOptions = function convertY2AxisOptions(_a) {
+  var y2Fields = _a.y2Fields,
+      originalOptions = __rest(_a, ["y2Fields"]);
+
+  var convertedOptions = Object.assign({}, originalOptions);
+
+  if (y2Fields) {
+    convertedOptions['axisY2.enabled'] = true;
+    convertedOptions['axisY2.fields'] = lodash_1.isArray(y2Fields) ? y2Fields.filter(function (name) {
+      return name;
+    }).join(',') : y2Fields;
+  }
+
+  return convertedOptions;
+};
+
+exports.convertY2AxisOptions = convertY2AxisOptions;
+/**
+ * Helper method to format value for overlayFields
+ * @method convertOverlayFields
+ * @param {Object} originalOptions
+ * @returns {Object}
+ */
+
+var convertOverlayFields = function convertOverlayFields(originalOptions) {
+  var convertedOptions = Object.assign({}, originalOptions);
+  var overlayFields = originalOptions.overlayFields;
+
+  if (overlayFields) {
+    convertedOptions.overlayFields = Array.isArray(overlayFields) ? overlayFields.filter(function (field) {
+      return field;
+    }).map(function (field) {
+      return field.trim();
+    }).join(',') : overlayFields;
+  }
+
+  return convertedOptions;
+};
+
+exports.convertOverlayFields = convertOverlayFields;
+/**
+ * checks whether data is multi series data
+ * @param {array} data array
+ * @return {Boolean}
+ */
+
+var isMultiSeriesData = function isMultiSeriesData(data) {
+  return Array.isArray(data) && Array.isArray(data[0]);
+};
+
+exports.isMultiSeriesData = isMultiSeriesData;
+/**
+ * checks whether data is multi series data and returns value as array
+ * @param {array} data array
+ * @param {*} value to return as array
+ * @return {array}
+ */
+
+var toArrayForSeries = function toArrayForSeries(data, value) {
+  return exports.isMultiSeriesData(data) ? value : [value];
+};
+
+exports.toArrayForSeries = toArrayForSeries;
+
+var constructFieldsAndColumns = function constructFieldsAndColumns(_ref2) {
+  var _ref2$x = _ref2.x,
+      x = _ref2$x === void 0 ? [] : _ref2$x,
+      _ref2$y = _ref2.y,
+      y = _ref2$y === void 0 ? [] : _ref2$y,
+      xField = _ref2.xField,
+      yFields = _ref2.yFields,
+      y2 = _ref2.y2,
+      y2Fields = _ref2.y2Fields;
+  var columns = [x.map(String)].concat(_toConsumableArray(exports.toArrayForSeries(y, y).map(function (series) {
+    return series.map(String);
+  })));
+  var yFieldsArray = exports.toArrayForSeries(y, yFields);
+  var fields = [{
+    name: xField
+  }].concat(_toConsumableArray(yFieldsArray.map(function (field) {
+    return {
+      name: field
+    };
+  }))); // splunk-charting requires y2 to be part of columns
+  // when y & y2 options are configured with different (mutually exclusive) series
+  // y2 columns need to be added to columns
+
+  if (y2Fields) {
+    var y2FieldsArray = exports.toArrayForSeries(y2, y2Fields);
+    var y2AsArray = exports.toArrayForSeries(y2, y2).map(function (series) {
+      return series === null || series === void 0 ? void 0 : series.map(String);
+    });
+    y2FieldsArray.forEach(function (y2Field, index) {
+      if (yFieldsArray.indexOf(y2Field) === -1 && y2AsArray[index]) {
+        fields.push({
+          name: y2Field
+        });
+        columns.push(y2AsArray[index]);
+      }
+    });
+  }
+
+  return {
+    columns: columns,
+    fields: fields
+  };
+};
+
+exports.constructFieldsAndColumns = constructFieldsAndColumns;
 
 /***/ }),
-/* 42 */,
-/* 43 */,
-/* 44 */,
-/* 45 */,
 /* 46 */,
 /* 47 */,
 /* 48 */,
@@ -1547,13 +1845,15 @@ module.exports = require("@babel/runtime/helpers/slicedToArray");
 /* 68 */,
 /* 69 */,
 /* 70 */,
-/* 71 */
+/* 71 */,
+/* 72 */,
+/* 73 */
 /***/ (function(module, exports) {
 
 module.exports = require("d3-scale");
 
 /***/ }),
-/* 72 */
+/* 74 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1566,7 +1866,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.truncateAxisLabelText = exports.isBubbleSelected = exports.isSomethingSelected = exports.getDataByRows = exports.createValueScale = exports.getScales = exports.getChartAreaDimensions = exports.getColorCategoryMapping = exports.GRAYSCALE_FILTER_ID = exports.BUBBLE_LABELS_TYPES = exports.COLOR_MODE_TYPES = exports.BUBBLE_SCALE_TYPES = exports.BUBBLE_ROW_SCALE_TYPES = exports.AXIS_ORIENTATION_TYPES = void 0;
 
-var d3_scale_1 = __webpack_require__(71);
+var d3_scale_1 = __webpack_require__(73);
 /**
  * @enum {AXIS_ORIENTATION_TYPES}
  */
@@ -1761,7 +2061,7 @@ exports.createValueScale = createValueScale;
  * @param {Array<String>} category
  * @param {Function} colorCategoryMapping
  * @param {COLOR_MODE_TYPES} colorMode
- * @param {String} bubbleColor
+ * @param {(String|Array<String>)} bubbleColor
  * @param {Number} minBubbleColorIntensity
  * @param {Array<Number>} size
  * @param {(Array<String>\|Array<Number>)} x
@@ -1797,6 +2097,7 @@ var getDataByRows = function getDataByRows(_ref4) {
   var maxRadius = isBubbleSizeDynamic ? minBand / 2 * maxBubbleSize : maxBubbleRadius;
   var minArea = Math.PI * Math.pow(minRadius, 2);
   var maxArea = Math.PI * Math.pow(maxRadius, 2);
+  var isBubbleColorAnArray = Array.isArray(bubbleColor);
   var globalSizeScale = exports.createValueScale(size);
 
   var getRadiusValue = function getRadiusValue(value, sizeScale) {
@@ -1808,13 +2109,14 @@ var getDataByRows = function getDataByRows(_ref4) {
   };
 
   var getOpacityValue = function getOpacityValue(value, sizeScale) {
-    return colorMode === COLOR_MODE_TYPES.CATEGORICAL ? 1 : sizeScale(Math.abs(value)) * (1 - minBubbleColorIntensity) + minBubbleColorIntensity;
+    return colorMode === COLOR_MODE_TYPES.CATEGORICAL || isBubbleColorAnArray ? 1 : sizeScale(Math.abs(value)) * (1 - minBubbleColorIntensity) + minBubbleColorIntensity;
   };
 
   y.forEach(function (yValue, index) {
     var xValue = x[index];
     var sizeValue = size[index];
-    var categoryValue = category && category[index] ? category[index] : null; // if we find an invalid data point here (x, y or size is null or undefined), we ignore it
+    var categoryValue = category && category[index] ? category[index] : null;
+    var bubbleColorValue = colorMode === COLOR_MODE_TYPES.SEQUENTIAL && isBubbleColorAnArray ? bubbleColor[index] : getColorValue(categoryValue); // if we find an invalid data point here (x, y or size is null or undefined), we ignore it
 
     if (xValue == null || yValue == null || sizeValue == null) {
       return;
@@ -1836,7 +2138,7 @@ var getDataByRows = function getDataByRows(_ref4) {
     dataByRows[yValue].rowXValues.push(xValue);
     dataByRows[yValue].rowSizeValues.push(sizeValue);
     dataByRows[yValue].rowCategoryValues.push(categoryValue);
-    dataByRows[yValue].rowColorValues.push(getColorValue(categoryValue));
+    dataByRows[yValue].rowColorValues.push(bubbleColorValue);
     dataByRows[yValue].rowFillOpacityValues.push(getOpacityValue(size[index], dataByRows[yValue].rowSizeScale));
     dataByRows[yValue].rowRadiusValues.push(getRadiusValue(size[index], dataByRows[yValue].rowSizeScale));
   }); // If we are using row scaling we need to recalculate opacity, radius and size scale
@@ -1959,17 +2261,15 @@ var truncateAxisLabelText = function truncateAxisLabelText(_ref9) {
 exports.truncateAxisLabelText = truncateAxisLabelText;
 
 /***/ }),
-/* 73 */,
-/* 74 */,
 /* 75 */,
 /* 76 */,
-/* 77 */
+/* 77 */,
+/* 78 */
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/find");
 
 /***/ }),
-/* 78 */,
 /* 79 */,
 /* 80 */,
 /* 81 */,
@@ -1981,37 +2281,37 @@ module.exports = require("lodash/find");
 /* 87 */,
 /* 88 */,
 /* 89 */,
-/* 90 */
+/* 90 */,
+/* 91 */,
+/* 92 */,
+/* 93 */,
+/* 94 */
 /***/ (function(module, exports) {
 
 module.exports = require("@babel/runtime/helpers/taggedTemplateLiteral");
 
 /***/ }),
-/* 91 */,
-/* 92 */,
-/* 93 */,
-/* 94 */,
 /* 95 */,
 /* 96 */,
 /* 97 */,
 /* 98 */,
 /* 99 */,
 /* 100 */,
-/* 101 */
+/* 101 */,
+/* 102 */,
+/* 103 */,
+/* 104 */
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/findIndex");
 
 /***/ }),
-/* 102 */
+/* 105 */
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/flattenDeep");
 
 /***/ }),
-/* 103 */,
-/* 104 */,
-/* 105 */,
 /* 106 */,
 /* 107 */,
 /* 108 */,
@@ -2031,16 +2331,16 @@ module.exports = require("lodash/flattenDeep");
 /* 122 */,
 /* 123 */,
 /* 124 */,
-/* 125 */
+/* 125 */,
+/* 126 */,
+/* 127 */,
+/* 128 */,
+/* 129 */
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/sortBy");
 
 /***/ }),
-/* 126 */,
-/* 127 */,
-/* 128 */,
-/* 129 */,
 /* 130 */,
 /* 131 */,
 /* 132 */,
@@ -2103,34 +2403,99 @@ module.exports = require("lodash/sortBy");
 /* 189 */,
 /* 190 */,
 /* 191 */,
-/* 192 */
+/* 192 */,
+/* 193 */,
+/* 194 */,
+/* 195 */,
+/* 196 */,
+/* 197 */,
+/* 198 */,
+/* 199 */,
+/* 200 */,
+/* 201 */,
+/* 202 */,
+/* 203 */,
+/* 204 */,
+/* 205 */,
+/* 206 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.themes = exports.PurePunchcard = exports.config = void 0;
+exports.themes = exports.computeVizProps = exports.PurePunchcard = exports.config = void 0;
+
+var lodash_1 = __webpack_require__(2);
+
+var config_1 = __webpack_require__(207);
+
+var withDashboardViz_1 = __webpack_require__(27);
 
-var config_1 = __webpack_require__(193);
+var Punchcard_1 = __webpack_require__(208);
 
-var withDashboardViz_1 = __webpack_require__(25);
+var punchcardUtils_1 = __webpack_require__(216);
 
-var Punchcard_1 = __webpack_require__(194);
+var visualization_color_palettes_1 = __webpack_require__(41);
 
 exports.config = config_1.default;
 exports.PurePunchcard = Punchcard_1.default;
+var validOptions = Object.keys(exports.config.optionsSchema);
+
+var computeVizProps = function computeVizProps(_a) {
+  var onPointClick = _a.onPointClick,
+      onLegendClick = _a.onLegendClick,
+      x = _a.x,
+      y = _a.y,
+      category = _a.category,
+      otherOptions = __rest(_a, ["onPointClick", "onLegendClick", "x", "y", "category"]);
+
+  var options = lodash_1.chain(otherOptions).pick(validOptions).thru(punchcardUtils_1.convertToPunchcardProperties).value();
+
+  if (options.seriesColors && typeof options.seriesColors === 'string') {
+    try {
+      options.seriesColors = JSON.parse(options.seriesColors);
+    } catch (e) {
+      options.seriesColors = visualization_color_palettes_1.VIZ_CATEGORICAL;
+    }
+  }
+
+  return Object.assign({
+    onPointClick: onPointClick,
+    onLegendClick: onLegendClick,
+    x: x,
+    y: y,
+    // PurePunchcard accepts category as string array
+    category: category && category.map(String)
+  }, options);
+};
+
+exports.computeVizProps = computeVizProps;
 var viz = withDashboardViz_1.default({
   ReactViz: Punchcard_1.default,
+  computeVizProps: exports.computeVizProps,
   vizConfig: config_1.default
 });
 exports.themes = config_1.default.themes;
 exports.default = viz;
 
 /***/ }),
-/* 193 */
+/* 207 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2140,19 +2505,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
+var i18n_1 = __webpack_require__(3);
+
 var schemaUtils_1 = __webpack_require__(14);
 
-var visualization_icons_1 = __webpack_require__(39);
+var visualization_icons_1 = __webpack_require__(42);
+
+var visualization_color_palettes_1 = __webpack_require__(41);
 
-var pick_1 = __webpack_require__(20);
+var pick_1 = __webpack_require__(21);
 
 var variables_1 = __webpack_require__(19);
 
 var VizBehavior_1 = __webpack_require__(5);
 
-var VizCategory_1 = __webpack_require__(24);
+var VizCategory_1 = __webpack_require__(26);
 
-var configUtils_1 = __webpack_require__(7);
+var configUtils_1 = __webpack_require__(8);
+
+var BackgroundColor_1 = __webpack_require__(44);
 
 var dataContract = {
   requiredDataSources: [{
@@ -2176,7 +2547,11 @@ var size = {
   initialWidth: 300,
   initialHeight: 300
 };
-var defaultContext = {};
+var defaultContext = {
+  bubbleColorConfig: {
+    colors: ['rgba(123,86,219,0.4)', 'rgba(123,86,219,1)']
+  }
+};
 var optionsSchema = {
   x: {
     default: '> primary | seriesByIndex(0)',
@@ -2236,6 +2611,79 @@ var optionsSchema = {
     pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN,
     type: 'string'
   },
+  bubbleColor: {
+    default: '> size | gradient(bubbleColorConfig)',
+    description: 'Specify the coloring method used for the bubbles when the colorMode “dynamic” is specified. For example “> size | gradient(bubbleColorConfig)".',
+    type: ['string', 'array']
+  },
+  bubbleLabelDisplay: {
+    default: 'all',
+    description: 'Specify whether all bubble labels, the max value bubble labels, or none of the bubble labels should be displayed.',
+    pattern: schemaUtils_1.getPattern(['all', 'max', 'off']),
+    type: 'string'
+  },
+  bubbleRadiusMax: {
+    default: 15,
+    description: 'Specify the max radius (in pixels) of the bubbles when showDynamicBubbleSize option is false. Greater than 0.',
+    type: 'number'
+  },
+  bubbleRadiusMin: {
+    default: 1,
+    description: 'Specify the min radius (in pixels) of the bubbles when showDynamicBubbleSize option is false. Greater than 0.',
+    type: 'number'
+  },
+  bubbleRowScale: {
+    default: 'global',
+    description: 'Specify how bubbles are scaled relative to other rows.',
+    pattern: schemaUtils_1.getPattern(['global', 'row']),
+    type: 'string'
+  },
+  bubbleSizeMax: {
+    default: 1,
+    description: 'Specify the max percentage (in decimal format) of space a bubble should take up within a cell when showDynamicBubbleSize option is true. The number specified must be between 0 and 1.',
+    type: 'number'
+  },
+  bubbleSizeMin: {
+    default: 0.25,
+    description: 'Specify the min percentage (in decimal format) of space a bubble should take up within a cell when showDynamicBubbleSize option is true. The number specified must be between 0 and 1.',
+    type: 'number'
+  },
+  bubbleSizeMethod: {
+    default: 'area',
+    description: 'Specify whether bubble area or diameter corresponds to the size value.',
+    pattern: schemaUtils_1.getPattern(['radius', 'area']),
+    type: 'string'
+  },
+  colorMode: {
+    default: 'dynamic',
+    description: 'Specify the coloring method used for the bubbles.',
+    pattern: schemaUtils_1.getPattern(['categorical', 'dynamic']),
+    type: 'string'
+  },
+  legendDisplay: {
+    default: 'right',
+    description: 'Specify the location of the legend on the panel.',
+    pattern: schemaUtils_1.getPattern(['right', 'off']),
+    type: 'string'
+  },
+  seriesColors: {
+    default: visualization_color_palettes_1.VIZ_CATEGORICAL,
+    description: 'Specify the colors used for a series. For example, "#FF0000", "#0000FF", "#008000".',
+    type: 'array',
+    items: {
+      type: 'string'
+    }
+  },
+  showDefaultSort: {
+    default: false,
+    description: 'Specify whether axes should be sorted based on order of time, digits and strings.',
+    type: 'boolean'
+  },
+  showDynamicBubbleSize: {
+    default: true,
+    description: 'Specify whether the bubble size should be dynamic or fixed.',
+    type: 'boolean'
+  },
   showMaxValuePulsation: {
     default: true,
     description: 'Specify whether the max value bubble should pulsate.',
@@ -2253,7 +2701,116 @@ var themes = {
     })(props);
   }
 };
-var editorConfig = [];
+var editorConfig = [{
+  label: i18n_1._('General'),
+  open: true,
+  layout: [[{
+    label: i18n_1._('Pulsate Max Value'),
+    option: 'showMaxValuePulsation',
+    editor: 'editor.toggle'
+  }], [{
+    label: i18n_1._('Show Bubble Labels'),
+    option: 'bubbleLabelDisplay',
+    editor: 'editor.radioBar',
+    editorProps: {
+      values: [{
+        label: i18n_1._('All'),
+        value: 'all'
+      }, {
+        label: i18n_1._('Max'),
+        value: 'max'
+      }, {
+        label: i18n_1._('Off'),
+        value: 'off'
+      }]
+    }
+  }], [{
+    label: i18n_1._('Bubble Row Scale'),
+    option: 'bubbleRowScale',
+    editor: 'editor.radioBar',
+    editorProps: {
+      values: [{
+        label: i18n_1._('Global'),
+        value: 'global'
+      }, {
+        label: i18n_1._('By Row'),
+        value: 'row'
+      }]
+    }
+  }], [{
+    label: i18n_1._('Bubble Scale'),
+    option: 'bubbleSizeMethod',
+    editor: 'editor.radioBar',
+    editorProps: {
+      values: [{
+        label: i18n_1._('Radius'),
+        value: 'radius'
+      }, {
+        label: i18n_1._('Area'),
+        value: 'area'
+      }]
+    }
+  }]]
+}, {
+  label: i18n_1._('Coloring'),
+  open: true,
+  layout: [[{
+    label: i18n_1._('Color Mode'),
+    option: 'colorMode',
+    editor: 'editor.radioBar',
+    editorProps: {
+      values: [{
+        label: i18n_1._('Dynamic'),
+        value: 'dynamic'
+      }, {
+        label: i18n_1._('Categorical'),
+        value: 'categorical'
+      }]
+    }
+  }], [// This should be hidden in categorical color mode
+  {
+    label: i18n_1._('Color by Field'),
+    editor: 'editor.columnSelector',
+    option: 'bubbleColor',
+    context: 'bubbleColorConfig',
+    showEditor: function showEditor(_ref) {
+      var options = _ref.options;
+      return options.colorMode === 'dynamic' || options.colorMode === undefined;
+    },
+    editorProps: {
+      dataSourceKey: 'primary',
+      prepareValue: function prepareValue(definition) {
+        var bubbleColor = definition.options.bubbleColor;
+        return {
+          context: {},
+          options: {
+            bubbleColor: "".concat(bubbleColor, " | gradient(bubbleColorConfig)")
+          }
+        };
+      }
+    }
+  }], BackgroundColor_1.default({
+    themes: themes,
+    labelPosition: 'left'
+  }), [{
+    label: i18n_1._('Legend Display'),
+    option: 'legendDisplay',
+    editor: 'editor.select',
+    editorProps: {
+      values: [{
+        label: i18n_1._('Right'),
+        value: 'right'
+      }, {
+        label: i18n_1._('Off'),
+        value: 'off'
+      }]
+    },
+    showEditor: function showEditor(_ref2) {
+      var options = _ref2.options;
+      return options.colorMode === 'categorical';
+    }
+  }]]
+}];
 /**
  * visualization configuration
  */
@@ -2268,7 +2825,7 @@ var config = {
    * viz name
    */
   name: 'Punchcard',
-  category: VizCategory_1.VizCategory.DISTRIBUTIONS,
+  category: VizCategory_1.VizCategory.COMPARISONS,
 
   /**
    * viz icon
@@ -2288,12 +2845,13 @@ var config = {
     }
   },
   supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.PLACEHOLDER, VizBehavior_1.VizBehavior.EVENTS],
-  themes: themes
+  themes: themes,
+  requiredProps: ['x', 'y', 'size']
 };
 exports.default = configUtils_1.enhanceConfig(config);
 
 /***/ }),
-/* 194 */
+/* 208 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2309,31 +2867,29 @@ Object.defineProperty(exports, "__esModule", {
 
 var React = __webpack_require__(1);
 
-var react_1 = __webpack_require__(1);
-
 var styled_components_1 = __webpack_require__(4);
 
 var T = __webpack_require__(0);
 
 var lodash_1 = __webpack_require__(2);
 
-var SizeAwareWrapper_1 = __webpack_require__(18);
+var SizeAwareWrapper_1 = __webpack_require__(17);
 
 var style_1 = __webpack_require__(13);
 
 var visualization_color_palettes_1 = __webpack_require__(41);
 
-var punchcardUtils_1 = __webpack_require__(72);
+var punchcardUtils_1 = __webpack_require__(74);
 
-var sortUtils_1 = __webpack_require__(195);
+var sortUtils_1 = __webpack_require__(209);
 
-var PunchcardAxis_1 = __webpack_require__(196);
+var PunchcardAxis_1 = __webpack_require__(210);
 
-var PunchcardChartArea_1 = __webpack_require__(197);
+var PunchcardChartArea_1 = __webpack_require__(211);
 
-var PunchcardLegend_1 = __webpack_require__(200);
+var PunchcardLegend_1 = __webpack_require__(214);
 
-var PunchcardGridLines_1 = __webpack_require__(201);
+var PunchcardGridLines_1 = __webpack_require__(215);
 
 var Container = styled_components_1.default.div.withConfig({
   displayName: "Punchcard__Container",
@@ -2363,20 +2919,20 @@ var PunchcardSVG = styled_components_1.default.svg.withConfig({
 });
 
 var Punchcard = function Punchcard(props) {
-  var _react_1$useState = react_1.useState(null),
-      _react_1$useState2 = _slicedToArray(_react_1$useState, 2),
-      selectedX = _react_1$useState2[0],
-      setSelectedX = _react_1$useState2[1];
+  var _React$useState = React.useState(null),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      selectedX = _React$useState2[0],
+      setSelectedX = _React$useState2[1];
 
-  var _react_1$useState3 = react_1.useState(null),
-      _react_1$useState4 = _slicedToArray(_react_1$useState3, 2),
-      selectedY = _react_1$useState4[0],
-      setSelectedY = _react_1$useState4[1];
+  var _React$useState3 = React.useState(null),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      selectedY = _React$useState4[0],
+      setSelectedY = _React$useState4[1];
 
-  var _react_1$useState5 = react_1.useState(null),
-      _react_1$useState6 = _slicedToArray(_react_1$useState5, 2),
-      selectedCategory = _react_1$useState6[0],
-      setSelectedCategory = _react_1$useState6[1];
+  var _React$useState5 = React.useState(null),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      selectedCategory = _React$useState6[0],
+      setSelectedCategory = _React$useState6[1];
 
   var handleMouseLeave = function handleMouseLeave() {
     setSelectedX(null);
@@ -2438,8 +2994,12 @@ var Punchcard = function Punchcard(props) {
       onLegendClick = props.onLegendClick;
   var calculatedColorMode = category ? colorMode : punchcardUtils_1.COLOR_MODE_TYPES.SEQUENTIAL;
   var displayLegend = showLegend && calculatedColorMode === punchcardUtils_1.COLOR_MODE_TYPES.CATEGORICAL;
-  var uniqX = useDefaultSort ? sortUtils_1.sortAxis(lodash_1.uniq(x)) : lodash_1.uniq(x);
-  var uniqY = useDefaultSort ? sortUtils_1.sortAxis(lodash_1.uniq(y)) : lodash_1.uniq(y);
+  var uniqX = useDefaultSort ? sortUtils_1.sortAxis(lodash_1.uniq(x.map(function (v) {
+    return "".concat(v);
+  }))) : lodash_1.uniq(x);
+  var uniqY = useDefaultSort ? sortUtils_1.sortAxis(lodash_1.uniq(y.map(function (v) {
+    return "".concat(v);
+  }))) : lodash_1.uniq(y);
   var uniqCategory = lodash_1.uniq(category);
   var colorCategoryMapping = punchcardUtils_1.getColorCategoryMapping({
     category: uniqCategory,
@@ -2601,7 +3161,7 @@ var propTypes = {
   categoryField: T.string,
   colorMode: T.oneOf(Object.values(punchcardUtils_1.COLOR_MODE_TYPES)),
   seriesColors: T.arrayOf(T.string),
-  bubbleColor: T.string,
+  bubbleColor: T.oneOfType([T.string, T.arrayOf(T.string)]),
   minBubbleColorIntensity: T.number,
   height: T.oneOfType([T.string, T.number]),
   isBubbleSizeDynamic: T.bool,
@@ -2612,11 +3172,14 @@ var propTypes = {
   useDefaultSort: T.bool,
   showMaxValuePulsation: T.bool,
   showLegend: T.bool,
-  size: T.arrayOf(T.number).isRequired,
   sizeField: T.string,
   width: T.oneOfType([T.string, T.number]),
-  x: T.arrayOf(T.oneOfType([T.string, T.number])).isRequired,
-  y: T.arrayOf(T.oneOfType([T.string, T.number])).isRequired,
+  // hotfix: isRequired check is removed here for x, y and size props
+  // to remove console warnings on early return of this component and
+  // implemented in config file using requiredProps
+  x: T.arrayOf(T.oneOfType([T.string, T.number])),
+  y: T.arrayOf(T.oneOfType([T.string, T.number])),
+  size: T.arrayOf(T.number),
   xField: T.string,
   yField: T.string,
   onPointClick: T.func,
@@ -2657,7 +3220,7 @@ Punchcard.defaultProps = defaultProps;
 exports.default = Punchcard;
 
 /***/ }),
-/* 195 */
+/* 209 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2667,13 +3230,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "sortedByDTime", function() { return sortedByDTime; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "sortByDigitOrAlpha", function() { return sortByDigitOrAlpha; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "sortAxis", function() { return sortAxis; });
-/* harmony import */ var lodash_findIndex__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(101);
+/* harmony import */ var lodash_findIndex__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(104);
 /* harmony import */ var lodash_findIndex__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(lodash_findIndex__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var lodash_find__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(77);
+/* harmony import */ var lodash_find__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(78);
 /* harmony import */ var lodash_find__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash_find__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var lodash_sortBy__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(125);
+/* harmony import */ var lodash_sortBy__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(129);
 /* harmony import */ var lodash_sortBy__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(lodash_sortBy__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var lodash_flattenDeep__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(102);
+/* harmony import */ var lodash_flattenDeep__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(105);
 /* harmony import */ var lodash_flattenDeep__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(lodash_flattenDeep__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(2);
 /* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_4__);
@@ -2941,7 +3504,7 @@ var sortAxis = function sortAxis(axis) {
 };
 
 /***/ }),
-/* 196 */
+/* 210 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2957,11 +3520,11 @@ var T = __webpack_require__(0);
 
 var styled_components_1 = __webpack_require__(4);
 
-var pick_1 = __webpack_require__(20);
+var pick_1 = __webpack_require__(21);
 
 var variables_1 = __webpack_require__(19);
 
-var punchcardUtils_1 = __webpack_require__(72);
+var punchcardUtils_1 = __webpack_require__(74);
 
 var AxisLabelText = styled_components_1.default.text.withConfig({
   displayName: "PunchcardAxis__AxisLabelText",
@@ -3039,13 +3602,13 @@ PunchcardAxis.defaultProps = defaultProps;
 exports.default = PunchcardAxis;
 
 /***/ }),
-/* 197 */
+/* 211 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _toConsumableArray = __webpack_require__(40);
+var _toConsumableArray = __webpack_require__(39);
 
 var _slicedToArray = __webpack_require__(60);
 
@@ -3057,9 +3620,9 @@ var React = __webpack_require__(1);
 
 var T = __webpack_require__(0);
 
-var punchcardUtils_1 = __webpack_require__(72);
+var punchcardUtils_1 = __webpack_require__(74);
 
-var PunchcardRow_1 = __webpack_require__(198);
+var PunchcardRow_1 = __webpack_require__(212);
 
 var PunchcardChartArea = function PunchcardChartArea(props) {
   var showBubbleLabels = props.showBubbleLabels,
@@ -3153,7 +3716,7 @@ var propTypes = {
   category: T.arrayOf(T.string),
   colorCategoryMapping: T.func,
   colorMode: T.oneOf(Object.values(punchcardUtils_1.COLOR_MODE_TYPES)),
-  bubbleColor: T.string,
+  bubbleColor: T.oneOfType([T.string, T.arrayOf(T.string)]),
   handleMouseEnter: T.func,
   handleMouseLeave: T.func,
   isBubbleSizeDynamic: T.bool,
@@ -3207,7 +3770,7 @@ PunchcardChartArea.defaultProps = defaultProps;
 exports.default = PunchcardChartArea;
 
 /***/ }),
-/* 198 */
+/* 212 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3223,9 +3786,9 @@ var T = __webpack_require__(0);
 
 var styled_components_1 = __webpack_require__(4);
 
-var PunchcardBubble_1 = __webpack_require__(199);
+var PunchcardBubble_1 = __webpack_require__(213);
 
-var punchcardUtils_1 = __webpack_require__(72);
+var punchcardUtils_1 = __webpack_require__(74);
 
 var PunchcardRow = function PunchcardRow(props) {
   var showBubbleLabels = props.showBubbleLabels,
@@ -3337,13 +3900,13 @@ PunchcardRow.defaultProps = defaultProps;
 exports.default = styled_components_1.withTheme(PunchcardRow);
 
 /***/ }),
-/* 199 */
+/* 213 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _taggedTemplateLiteral = __webpack_require__(90);
+var _taggedTemplateLiteral = __webpack_require__(94);
 
 var _templateObject;
 
@@ -3357,13 +3920,13 @@ var T = __webpack_require__(0);
 
 var styled_components_1 = __webpack_require__(4);
 
-var pick_1 = __webpack_require__(20);
+var pick_1 = __webpack_require__(21);
 
 var variables_1 = __webpack_require__(19);
 
-var numberUtils_1 = __webpack_require__(37);
+var numberUtils_1 = __webpack_require__(20);
 
-var punchcardUtils_1 = __webpack_require__(72);
+var punchcardUtils_1 = __webpack_require__(74);
 
 var BubbleCircle = styled_components_1.default.circle.withConfig({
   displayName: "PunchcardBubble__BubbleCircle",
@@ -3391,7 +3954,7 @@ var pulsateAnimation = function pulsateAnimation(r) {
 var PulsateBubble = styled_components_1.default(BubbleCircle).withConfig({
   displayName: "PunchcardBubble__PulsateBubble",
   componentId: "sc-1jmms9f-1"
-})(["animation:", " 1.4s linear 0.4s infinite;"], function (props) {
+})(["animation:", " 2.4s linear 0.4s infinite;"], function (props) {
   return pulsateAnimation(props.r);
 });
 var BubbleGroup = styled_components_1.default.g.withConfig({
@@ -3519,7 +4082,7 @@ PunchcardBubble.defaultProps = defaultProps;
 exports.default = PunchcardBubble;
 
 /***/ }),
-/* 200 */
+/* 214 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3535,7 +4098,7 @@ var T = __webpack_require__(0);
 
 var styled_components_1 = __webpack_require__(4);
 
-var pick_1 = __webpack_require__(20);
+var pick_1 = __webpack_require__(21);
 
 var variables_1 = __webpack_require__(19);
 
@@ -3636,7 +4199,7 @@ PunchcardLegend.defaultProps = defaultProps;
 exports.default = PunchcardLegend;
 
 /***/ }),
-/* 201 */
+/* 215 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3654,7 +4217,7 @@ var styled_components_1 = __webpack_require__(4);
 
 var lodash_1 = __webpack_require__(2);
 
-var pick_1 = __webpack_require__(20);
+var pick_1 = __webpack_require__(21);
 
 var variables_1 = __webpack_require__(19); // was previously lineColor in themeRegistry
 
@@ -3720,6 +4283,75 @@ PunchcardGridLines.propTypes = propTypes;
 PunchcardGridLines.defaultProps = defaultProps;
 exports.default = PunchcardGridLines;
 
+/***/ }),
+/* 216 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.convertToPunchcardProperties = exports.mapToOldKey = exports.punchcardOptionValuesMapping = void 0;
+
+var lodash_1 = __webpack_require__(2);
+
+var chartingUtils_1 = __webpack_require__(45);
+
+var punchcardOptionsMapping = {
+  legendDisplay: 'showLegend',
+  bubbleLabelDisplay: 'showBubbleLabels',
+  showDefaultSort: 'useDefaultSort',
+  bubbleSizeMethod: 'bubbleScale',
+  showDynamicBubbleSize: 'isBubbleSizeDynamic',
+  bubbleRadiusMax: 'maxBubbleRadius',
+  bubbleRadiusMin: 'minBubbleRadius',
+  bubbleSizeMax: 'maxBubbleSize',
+  bubbleSizeMin: 'minBubbleSize'
+}; // key value mapping of what options (and their corresponding values) which
+// we expose in config.ts to property values PurePunchcard understands
+
+exports.punchcardOptionValuesMapping = {
+  showLegend: {
+    right: true,
+    off: false
+  },
+  showBubbleLabels: {
+    off: 'none'
+  },
+  colorMode: {
+    dynamic: 'sequential'
+  }
+};
+/**
+ * Helper method to update the option names which can be mapped to PurePunchcard options
+ * @method mapToOldKey
+ * @param {Object} options
+ * @returns {Object}
+ */
+
+var mapToOldKey = function mapToOldKey(options) {
+  return lodash_1.mapKeys(options, function (val, key) {
+    return punchcardOptionsMapping[key] ? punchcardOptionsMapping[key] : key;
+  });
+};
+
+exports.mapToOldKey = mapToOldKey;
+/**
+ * Chained helper for mapping the option properties (and values) we expose in config.ts into property values that PurePunchcard accepts
+ * This is for options that has new key name and can not directly be mapped with PurePunchcard props
+ * @method convertToPunchcardProperties
+ * @param {Object} originalOptions
+ * @returns {Object}
+ */
+
+var convertToPunchcardProperties = function convertToPunchcardProperties(originalOptions) {
+  return lodash_1.chain(exports.mapToOldKey(originalOptions)).thru(chartingUtils_1.mapToValues(exports.punchcardOptionValuesMapping)).value();
+};
+
+exports.convertToPunchcardProperties = convertToPunchcardProperties;
+
 /***/ })
 /******/ ]);
 //# sourceMappingURL=Punchcard.js.map