@splunk/visualizations 25.13.1 → 26.1.0

package/common/Charting.js

@@ -87,7 +87,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 41);
+/******/ 	return __webpack_require__(__webpack_require__.s = 42);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -170,15 +170,19 @@ module.exports = require("@splunk/visualizations-shared/style");
 
 
 var _classCallCheck = __webpack_require__(4);
+
 var _createClass = __webpack_require__(6);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartingApiFunctional = void 0;
+
 var ChartingApiFunctional = /*#__PURE__*/function () {
   // eslint-disable-next-line no-useless-constructor
   function ChartingApiFunctional(chartRef) {
     _classCallCheck(this, ChartingApiFunctional);
+
     this.chartRef = chartRef;
   }
   /**
@@ -186,15 +190,18 @@ var ChartingApiFunctional = /*#__PURE__*/function () {
    *
    * @memberof ChartingApiFunctional
    */
+
+
   _createClass(ChartingApiFunctional, [{
     key: "highlight",
     value: function highlight() {
       var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
-          xValue: '',
-          seriesName: ''
-        },
-        xValue = _ref.xValue,
-        seriesName = _ref.seriesName;
+        xValue: '',
+        seriesName: ''
+      },
+          xValue = _ref.xValue,
+          seriesName = _ref.seriesName;
+
       this.getChart().highlight(xValue, seriesName);
     }
     /**
@@ -202,21 +209,25 @@ var ChartingApiFunctional = /*#__PURE__*/function () {
      *
      * @memberof ChartingApiFunctional
      */
+
   }, {
     key: "unHighlight",
     value: function unHighlight() {
       this.getChart().unHighlight();
-    }
-    // returns chart object
+    } // returns chart object
+
   }, {
     key: "getChart",
     value: function getChart() {
       var _a;
+
       return (_a = this.chartRef) === null || _a === void 0 ? void 0 : _a.current;
     }
   }]);
+
   return ChartingApiFunctional;
 }();
+
 exports.ChartingApiFunctional = ChartingApiFunctional;
 
 /***/ }),
@@ -238,7 +249,8 @@ exports.ChartingApiFunctional = ChartingApiFunctional;
 /* 38 */,
 /* 39 */,
 /* 40 */,
-/* 41 */
+/* 41 */,
+/* 42 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -249,23 +261,42 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.updateRowPayload = exports.canUpdateInPlace = exports.changedOptions = exports.NO_INPLACE_PROPS = void 0;
 /* eslint-disable react/no-unused-prop-types */
+
 var lodash_1 = __webpack_require__(3);
+
 var i18n_1 = __webpack_require__(7);
-var visualization_color_palettes_1 = __webpack_require__(42);
+
+var visualization_color_palettes_1 = __webpack_require__(43);
+
 var react_1 = __webpack_require__(0);
+
 var React = __webpack_require__(0);
+
 var T = __webpack_require__(1);
-var react_event_listener_1 = __webpack_require__(43);
-__webpack_require__(44); // fixme, @splunk/charting should be refactor to use locale & timezone instead of i18n functions
-var charting_bundle_1 = __webpack_require__(45);
+
+var react_event_listener_1 = __webpack_require__(44);
+
+__webpack_require__(45); // fixme, @splunk/charting should be refactor to use locale & timezone instead of i18n functions
+
+
+var charting_bundle_1 = __webpack_require__(46);
+
 var TimezoneContext_1 = __webpack_require__(20);
+
 var style_1 = __webpack_require__(21);
+
 var styled_components_1 = __webpack_require__(2);
+
 var Message_1 = __webpack_require__(18);
-var useSplunkTheme_1 = __webpack_require__(46);
-var themeUtils_1 = __webpack_require__(47);
+
+var useSplunkTheme_1 = __webpack_require__(47);
+
+var themeUtils_1 = __webpack_require__(48);
+
 var ChartingApi_1 = __webpack_require__(22);
+
 exports.NO_INPLACE_PROPS = ['chart', 'chart.orientation', 'layout.splitSeries', 'chart.style', 'legend.placement'];
+
 var changedOptions = function changedOptions(curOptions, nextOptions) {
   return Object.keys(curOptions).filter(function (key) {
     return !(key in nextOptions);
@@ -273,30 +304,34 @@ var changedOptions = function changedOptions(curOptions, nextOptions) {
     return !(key in curOptions) || curOptions[key] !== nextOptions[key];
   }));
 };
+
 exports.changedOptions = changedOptions;
-charting_bundle_1.default.enableScaledEvents();
+
 function usePrevious(value) {
-  var ref = react_1.useRef();
-  react_1.useEffect(function () {
+  var ref = (0, react_1.useRef)();
+  (0, react_1.useEffect)(function () {
     ref.current = value;
   });
   return ref.current;
 }
+
 var canUpdateInPlace = function canUpdateInPlace(curOptions, nextOptions) {
   // if either of the options are undefined
   // it cannot update in place.
   if (!curOptions || !nextOptions) {
     return false;
   }
+
   return !exports.NO_INPLACE_PROPS.some(function (p) {
     return curOptions[p] !== nextOptions[p];
-  }) && !exports.changedOptions(curOptions, nextOptions).some(function (p) {
+  }) && !(0, exports.changedOptions)(curOptions, nextOptions).some(function (p) {
     return p.toLowerCase().endsWith('color');
   });
 };
-exports.canUpdateInPlace = canUpdateInPlace;
-// create 'row' payloads from 'rowContext' in the flattened format:
+
+exports.canUpdateInPlace = canUpdateInPlace; // create 'row' payloads from 'rowContext' in the flattened format:
 // row.<fieldname>.value
+
 var updateRowPayload = function updateRowPayload(chartEventRowContext, payload) {
   Object.keys(chartEventRowContext || {}).forEach(function (key) {
     // eslint-disable-next-line no-param-reassign
@@ -304,18 +339,21 @@ var updateRowPayload = function updateRowPayload(chartEventRowContext, payload)
   });
   return payload;
 };
+
 exports.updateRowPayload = updateRowPayload;
 var VizChartEventType;
+
 (function (VizChartEventType) {
   VizChartEventType["POINT_CLICK"] = "point.click";
   VizChartEventType["POINT_MOUSE_OUT"] = "point.mouseout";
   VizChartEventType["POINT_MOUSE_OVER"] = "point.mouseover";
   VizChartEventType["LEGEND_CLICK"] = "legend.click";
-})(VizChartEventType || (VizChartEventType = {}));
-// @TODO(pwied): remove after HC upgrade to 8+
+})(VizChartEventType || (VizChartEventType = {})); // @TODO(pwied): remove after HC upgrade to 8+
 // .highcharts-a11y-proxy-container rule addresses a HighCharts < 8 bug
 // caused by the accessibility plugin
 // https://github.com/highcharts/highcharts/issues/12883
+
+
 var ChartingContainer = styled_components_1.default.div.attrs(function (props) {
   return {
     'data-test': 'charting-container',
@@ -326,7 +364,7 @@ var ChartingContainer = styled_components_1.default.div.attrs(function (props) {
   displayName: "Charting__ChartingContainer",
   componentId: "sc-3wbgm0-0"
 })(["& .highcharts-a11y-proxy-container{pointer-events:none;}overflow:hidden;position:relative;", ";"], function (props) {
-  return style_1.toDimension(lodash_1.pick(props, ['width', 'height']));
+  return (0, style_1.toDimension)((0, lodash_1.pick)(props, ['width', 'height']));
 });
 var propTypes = {
   width: T.oneOfType([T.string, T.number]),
@@ -343,13 +381,15 @@ var propTypes = {
   visualizationApiRef: T.func,
   themeKey: T.string
 };
+
 var Charting = function Charting(props) {
-  var container = react_1.useRef(null);
-  var needsInit = react_1.useRef(true);
-  var chart = react_1.useRef();
-  var needsRedraw = react_1.useRef(true);
-  var api = react_1.useRef(new ChartingApi_1.ChartingApiFunctional(chart));
-  var timezone = react_1.useContext(TimezoneContext_1.default);
+  var container = (0, react_1.useRef)(null);
+  var needsInit = (0, react_1.useRef)(true);
+  var chart = (0, react_1.useRef)();
+  var needsRedraw = (0, react_1.useRef)(true);
+  var api = (0, react_1.useRef)(new ChartingApi_1.ChartingApiFunctional(chart));
+  var timezone = (0, react_1.useContext)(TimezoneContext_1.default);
+
   var computeChartingSize = function computeChartingSize() {
     if (container.current) {
       var rect = container.current.getBoundingClientRect();
@@ -358,91 +398,103 @@ var Charting = function Charting(props) {
         width: rect.width
       };
     }
+
     return {};
   };
-  var splunkTheme = useSplunkTheme_1.default();
-  var themeKey = props.themeKey ? props.themeKey : themeUtils_1.getChartingThemeKey({
+
+  var splunkTheme = (0, useSplunkTheme_1.default)();
+  var themeKey = props.themeKey ? props.themeKey : (0, themeUtils_1.getChartingThemeKey)({
     splunkThemeV1: splunkTheme
   });
   var width = props.width,
-    height = props.height,
-    style = props.style,
-    chartData = props.chartData,
-    options = props.options,
-    colorPalette = props.colorPalette,
-    onClick = props.onClick,
-    onSelect = props.onSelect,
-    onPointMouseOut = props.onPointMouseOut,
-    onPointMouseOver = props.onPointMouseOver,
-    onEventTrigger = props.onEventTrigger;
+      height = props.height,
+      style = props.style,
+      chartData = props.chartData,
+      options = props.options,
+      colorPalette = props.colorPalette,
+      onClick = props.onClick,
+      onSelect = props.onSelect,
+      onPointMouseOut = props.onPointMouseOut,
+      onPointMouseOver = props.onPointMouseOver,
+      onEventTrigger = props.onEventTrigger;
   var prevOptions = usePrevious(options);
   var prevTimezone = usePrevious(timezone);
+
   var handleClick = function handleClick(chartEvent, type) {
-    var payload = lodash_1.pick(chartEvent, 'name2', 'value2', '_span', 'modifierKey');
+    var payload = (0, lodash_1.pick)(chartEvent, 'name2', 'value2', '_span', 'modifierKey');
     payload.name = payload.name2;
     delete payload.name2;
+
     if (type === VizChartEventType.POINT_CLICK) {
       payload.value = payload.value2;
       delete payload.value2;
-      payload = exports.updateRowPayload(chartEvent.rowContext, payload);
+      payload = (0, exports.updateRowPayload)(chartEvent.rowContext, payload);
     }
+
     onClick({
       type: type,
       originalEvent: chartEvent,
       payload: payload
     });
   };
+
   var destroyChart = function destroyChart() {
     if (chart.current) {
       chart.current.destroy();
       chart.current = null;
     }
+
     needsRedraw.current = true;
     needsInit.current = true;
   };
+
   var handleSelect = function handleSelect(chartEvent) {
     // todo: need change this after breaking all visualizations
     if (onSelect && typeof onSelect === 'function') {
       onSelect({
         type: 'range.select',
         originalEvent: chartEvent,
-        payload: lodash_1.pick(chartEvent, 'startXIndex', 'endXIndex', 'startXValue', 'endXValue')
+        payload: (0, lodash_1.pick)(chartEvent, 'startXIndex', 'endXIndex', 'startXValue', 'endXValue')
       });
       return;
-    }
-    // the chartEvent here is a jQuery event
+    } // the chartEvent here is a jQuery event
+
+
     onEventTrigger({
       type: 'range.select',
       originalEvent: chartEvent,
-      payload: lodash_1.pick(chartEvent, 'startXIndex', 'endXIndex', 'startXValue', 'endXValue')
+      payload: (0, lodash_1.pick)(chartEvent, 'startXIndex', 'endXIndex', 'startXValue', 'endXValue')
     });
   };
+
   var handlePointMouseOut = function handlePointMouseOut(chartEvent, type) {
-    var payload = lodash_1.pick(chartEvent, 'name2', 'value2', '_span', 'modifierKey', 'tooltipContext');
+    var payload = (0, lodash_1.pick)(chartEvent, 'name2', 'value2', '_span', 'modifierKey', 'tooltipContext');
     payload.name = payload.name2;
     delete payload.name2;
     payload.value = payload.value2;
     delete payload.value2;
-    payload = exports.updateRowPayload(chartEvent.rowContext, payload);
+    payload = (0, exports.updateRowPayload)(chartEvent.rowContext, payload);
     onPointMouseOut({
       type: type,
       originalEvent: chartEvent,
       payload: payload
     });
   };
+
   var handlePointMouseOver = function handlePointMouseOver(chartEvent, type) {
-    var payload = lodash_1.pick(chartEvent, 'name2', 'value2', '_span', 'modifierKey', 'tooltipContext');
+    var payload = (0, lodash_1.pick)(chartEvent, 'name2', 'value2', '_span', 'modifierKey', 'tooltipContext');
     payload.name = payload.name2;
     delete payload.name2;
     payload.value = payload.value2;
     delete payload.value2;
-    payload = exports.updateRowPayload(chartEvent.rowContext, payload);
+    payload = (0, exports.updateRowPayload)(chartEvent.rowContext, payload);
     onPointMouseOver({
       type: type,
       originalEvent: chartEvent,
       payload: payload
     });
   };
+
   var drawChart = function drawChart() {
     var updatedOptions = Object.assign(Object.assign({}, options), {
       shouldColorizeTooltipData: false
@@ -453,15 +505,18 @@ var Charting = function Charting(props) {
     var serializedTimezone = timezone === null || timezone === void 0 ? void 0 : timezone.serializedTimezone;
     var ianaTimezone = timezone === null || timezone === void 0 ? void 0 : timezone.ianaTimezone;
     var utcOffset = timezone === null || timezone === void 0 ? void 0 : timezone.utcOffset;
+
     if (!computedWidth || !computedHeight) {
       return;
     }
+
     if (!chartData || !Object.keys(chartData).length) {
       return;
-    }
-    // splunk-charting layers configuration option updates.
+    } // splunk-charting layers configuration option updates.
     // when an option is removed it needs to be set to an empty string
     // to override the previous configuration
+
+
     if (prevOptions) {
       Object.keys(prevOptions).forEach(function (key) {
         if (updatedOptions[key] === undefined) {
@@ -469,13 +524,16 @@ var Charting = function Charting(props) {
         }
       });
     }
+
     try {
       if (needsInit.current) {
         destroyChart();
         charting_bundle_1.default.setTheme(themeKey);
+
         if (colorPalette.length > 0) {
           charting_bundle_1.default.setColorPalette(colorPalette);
         }
+
         chart.current = charting_bundle_1.default.createChart(container.current, Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, updatedOptions), {
           drilldown: 'all'
         }), typeof serializedTimezone === 'string' && {
@@ -484,8 +542,8 @@ var Charting = function Charting(props) {
           'time.ianaTimezone': ianaTimezone
         }), typeof utcOffset === 'number' && {
           'time.timezoneOffset': utcOffset
-        }));
-        // bind event handlers
+        })); // bind event handlers
+
         chart.current.on('pointClick', function (e) {
           handleClick(e, VizChartEventType.POINT_CLICK);
         });
@@ -500,32 +558,40 @@ var Charting = function Charting(props) {
         });
         chart.current.on('chartRangeSelect', handleSelect);
       }
+
       if (needsRedraw.current) {
         charting_bundle_1.default.setTheme(themeKey);
+
         if (colorPalette.length > 0) {
           charting_bundle_1.default.setColorPalette(colorPalette);
         }
+
         chart.current.prepareAndDraw(chartData, updatedOptions, function () {});
       }
+
       if (chart.current) {
         if (Math.round(chart.current.height) !== Math.round(computedHeight) || Math.round(chart.current.width) !== Math.round(computedWidth)) {
           chart.current.resize(computedWidth, computedHeight);
         }
       }
+
       needsInit.current = false;
       needsRedraw.current = false;
     } catch (e) {
       window.console.error('Caught error rendering chart:', e);
     }
   };
-  var debouncedDrawChart = lodash_1.debounce(drawChart, 5);
+
+  var debouncedDrawChart = (0, lodash_1.debounce)(drawChart, 5);
+
   var onContainerMount = function onContainerMount(chartingContainer) {
     container.current = chartingContainer;
     debouncedDrawChart();
   };
+
   var prevTheme = usePrevious(themeKey);
   var prevOnClick = usePrevious(onClick);
-  react_1.useEffect(function () {
+  (0, react_1.useEffect)(function () {
     debouncedDrawChart();
     props.visualizationApiRef(api.current);
     return function () {
@@ -533,17 +599,17 @@ var Charting = function Charting(props) {
       destroyChart();
     };
   }, []);
-  react_1.useEffect(function () {
+  (0, react_1.useEffect)(function () {
     // TODO: figure out why re-init is needed for functional components (i.e. PlatformViz) when changing theme
     // seems like redraw doesn't suffice to update the background colors
-    if (!chart.current || !exports.canUpdateInPlace(prevOptions, options) ||
-    // timezone is a simple object so this comparison should be fast
+    if (!chart.current || !(0, exports.canUpdateInPlace)(prevOptions, options) || // timezone is a simple object so this comparison should be fast
     JSON.stringify(prevTimezone) !== JSON.stringify(timezone) || !props.themeKey && prevTheme !== themeKey || prevOnClick !== onClick) {
       needsInit.current = true;
     }
-    needsRedraw.current = true;
-    // need to immediately call drawChart upon an option or chartData change
+
+    needsRedraw.current = true; // need to immediately call drawChart upon an option or chartData change
     // otherwise a noop would occur if the onContainerMount drawChart is re-invoked when dimensions change
+
     drawChart();
   }, [JSON.stringify(options), JSON.stringify(chartData.toJSON()), JSON.stringify(chartData.annotations), timezone === null || timezone === void 0 ? void 0 : timezone.ianaTimezone, timezone === null || timezone === void 0 ? void 0 : timezone.utcOffset, timezone === null || timezone === void 0 ? void 0 : timezone.serializedTimezone, themeKey, onClick]);
   return React.createElement(ChartingContainer, {
@@ -556,6 +622,7 @@ var Charting = function Charting(props) {
     onResize: debouncedDrawChart
   }));
 };
+
 var defaultProps = {
   width: '100%',
   height: 250,
@@ -573,65 +640,70 @@ var defaultProps = {
   themeKey: null
 };
 Charting.propTypes = propTypes;
-Charting.defaultProps = defaultProps;
-// allow for early return in case of empty chartData while still following hook rules
+Charting.defaultProps = defaultProps; // allow for early return in case of empty chartData while still following hook rules
+
 var withEmptyChartMessage = function withEmptyChartMessage(Chart) {
   var Wrapper = function Wrapper(props) {
     var chartData = props.chartData;
+
     if (!chartData) {
       return React.createElement(Message_1.default, {
-        message: i18n_1._('No DataSource'),
+        message: (0, i18n_1._)('No DataSource'),
         level: "warning"
       });
     }
+
     if (chartData && !Object.keys(chartData).length) {
       return React.createElement(Message_1.default, {
-        message: i18n_1._('No Result'),
+        message: (0, i18n_1._)('No Result'),
         level: "info"
       });
     }
+
     return React.createElement(Chart, Object.assign({}, props));
   };
+
   Wrapper.displayName = 'ChartingWrapper';
   Wrapper.propTypes = propTypes;
   Wrapper.defaultProps = defaultProps;
   return Wrapper;
-};
-// export default Charting;
+}; // export default Charting;
+
+
 exports.default = withEmptyChartMessage(Charting);
 
 /***/ }),
-/* 42 */
+/* 43 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-color-palettes");
 
 /***/ }),
-/* 43 */
+/* 44 */
 /***/ (function(module, exports) {
 
 module.exports = require("react-event-listener");
 
 /***/ }),
-/* 44 */
+/* 45 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/i18n");
 
 /***/ }),
-/* 45 */
+/* 46 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/charting-bundle");
 
 /***/ }),
-/* 46 */
+/* 47 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes/useSplunkTheme");
 
 /***/ }),
-/* 47 */
+/* 48 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/themeUtils");