@splunk/visualizations 26.4.1 → 27.1.0

package/common/Charting.js

@@ -1,1640 +1,759 @@
-/*!
- * Copyright © 2024 Splunk Inc.
- * SPLUNK CONFIDENTIAL – Use or disclosure of this material in whole or
- * in part without a valid written license from Splunk Inc. is PROHIBITED.
- */
-module.exports =
-/******/ (function(modules) { // webpackBootstrap
-/******/ 	// The module cache
-/******/ 	var installedModules = {};
-/******/
-/******/ 	// The require function
-/******/ 	function __webpack_require__(moduleId) {
-/******/
-/******/ 		// Check if module is in cache
-/******/ 		if(installedModules[moduleId]) {
-/******/ 			return installedModules[moduleId].exports;
-/******/ 		}
-/******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = installedModules[moduleId] = {
-/******/ 			i: moduleId,
-/******/ 			l: false,
-/******/ 			exports: {}
-/******/ 		};
-/******/
-/******/ 		// Execute the module function
-/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
-/******/
-/******/ 		// Flag the module as loaded
-/******/ 		module.l = true;
-/******/
-/******/ 		// Return the exports of the module
-/******/ 		return module.exports;
-/******/ 	}
-/******/
-/******/
-/******/ 	// expose the modules object (__webpack_modules__)
-/******/ 	__webpack_require__.m = modules;
-/******/
-/******/ 	// expose the module cache
-/******/ 	__webpack_require__.c = installedModules;
-/******/
-/******/ 	// define getter function for harmony exports
-/******/ 	__webpack_require__.d = function(exports, name, getter) {
-/******/ 		if(!__webpack_require__.o(exports, name)) {
-/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
-/******/ 		}
-/******/ 	};
-/******/
-/******/ 	// define __esModule on exports
-/******/ 	__webpack_require__.r = function(exports) {
-/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 		}
-/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 	};
-/******/
-/******/ 	// create a fake namespace object
-/******/ 	// mode & 1: value is a module id, require it
-/******/ 	// mode & 2: merge all properties of value into the ns
-/******/ 	// mode & 4: return value when already ns object
-/******/ 	// mode & 8|1: behave like require
-/******/ 	__webpack_require__.t = function(value, mode) {
-/******/ 		if(mode & 1) value = __webpack_require__(value);
-/******/ 		if(mode & 8) return value;
-/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
-/******/ 		var ns = Object.create(null);
-/******/ 		__webpack_require__.r(ns);
-/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
-/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
-/******/ 		return ns;
-/******/ 	};
-/******/
-/******/ 	// getDefaultExport function for compatibility with non-harmony modules
-/******/ 	__webpack_require__.n = function(module) {
-/******/ 		var getter = module && module.__esModule ?
-/******/ 			function getDefault() { return module['default']; } :
-/******/ 			function getModuleExports() { return module; };
-/******/ 		__webpack_require__.d(getter, 'a', getter);
-/******/ 		return getter;
-/******/ 	};
-/******/
-/******/ 	// Object.prototype.hasOwnProperty.call
-/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
-/******/
-/******/ 	// __webpack_public_path__
-/******/ 	__webpack_require__.p = "";
-/******/
-/******/
-/******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 73);
-/******/ })
-/************************************************************************/
-/******/ ([
-/* 0 */
-/***/ (function(module, exports) {
-
-module.exports = require("react");
-
-/***/ }),
-/* 1 */
-/***/ (function(module, exports) {
-
-module.exports = require("prop-types");
-
-/***/ }),
-/* 2 */
-/***/ (function(module, exports) {
-
-module.exports = require("styled-components");
-
-/***/ }),
-/* 3 */
-/***/ (function(module, exports) {
-
-module.exports = require("lodash");
-
-/***/ }),
-/* 4 */
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/classCallCheck");
-
-/***/ }),
-/* 5 */
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/ui-utils/i18n");
-
-/***/ }),
-/* 6 */,
-/* 7 */
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/createClass");
-
-/***/ }),
-/* 8 */,
-/* 9 */
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/numberUtils");
-
-/***/ }),
-/* 10 */,
-/* 11 */,
-/* 12 */,
-/* 13 */,
-/* 14 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var _classCallCheck = __webpack_require__(4);
-
-var _createClass = __webpack_require__(7);
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DefaultVizActionHandler = void 0;
-
-var DefaultVizActionHandler = /*#__PURE__*/function () {
-  function DefaultVizActionHandler() {
-    _classCallCheck(this, DefaultVizActionHandler);
-  }
-
-  _createClass(DefaultVizActionHandler, [{
-    key: "focus",
-    value: function focus() {// noop
-    }
-  }, {
-    key: "snapshot",
-    value: function snapshot() {
-      return null; // noop
-    }
-  }]);
-
-  return DefaultVizActionHandler;
-}();
-
-exports.DefaultVizActionHandler = DefaultVizActionHandler;
-
-/***/ }),
-/* 15 */,
-/* 16 */,
-/* 17 */,
-/* 18 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.VizBehavior = void 0;
-var VizBehavior;
-
-(function (VizBehavior) {
-  /**
-   * Dynamic Options Behavior.
-   * This allows visualization options to be powered by data
-   *
-   * **Example**
-   *
-   * sparklineValues: ">primary|seriesByIndex(0)"
-   * would configure sparklineValues with an array of data points
-   * coming from the first series in the primary datasource
-   *
-   */
-  VizBehavior["DYNAMIC_OPTIONS"] = "dynamic-options";
-  VizBehavior["EVENTS"] = "events";
-  VizBehavior["DOWNSAMPLING"] = "downsampling";
-  /**
-   * Placeholder behavior: visualization will display a placeholder rather than fail if any of the `requiredProps` is
-   * missing.
-   * @type {string}
-   */
-
-  VizBehavior["PLACEHOLDER"] = "placeholder";
-  VizBehavior["PAGE_AND_SORT"] = "page-and-sort";
-  VizBehavior["TRELLIS"] = "trellis";
-})(VizBehavior = exports.VizBehavior || (exports.VizBehavior = {}));
-
-/***/ }),
-/* 19 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.VizCategory = void 0;
-var VizCategory;
-
-(function (VizCategory) {
-  VizCategory["SINGLE_VALUE"] = "Single Value";
-  VizCategory["TRENDS"] = "Trends";
-  VizCategory["COMPARISONS"] = "Comparisons";
-  VizCategory["TABLE"] = "Table";
-  VizCategory["GAUGE"] = "Gauge";
-  VizCategory["DISTRIBUTIONS"] = "Distributions";
-  VizCategory["CHOROPLETH"] = "Choropleth Maps";
-  VizCategory["SHAPES"] = "Shapes";
-  VizCategory["MISC"] = "misc";
-  VizCategory["FLOW"] = "Flow";
-  VizCategory["CORRELATION"] = "Correlation";
-  VizCategory["SPATIAL"] = "Spatial";
-})(VizCategory = exports.VizCategory || (exports.VizCategory = {}));
-
-/***/ }),
-/* 20 */,
-/* 21 */,
-/* 22 */,
-/* 23 */,
-/* 24 */
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/Message");
-
-/***/ }),
-/* 25 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.downsampleDataSources = exports.calculateDownsamplingThreshold = exports.calculateThresholdOnRangeSelect = exports.isDownsamplingEnabledForViz = exports.convertToArrOfObjects = void 0;
-
-var numberUtils_1 = __webpack_require__(9);
-
-var interfaces_1 = __webpack_require__(32); // TODO: utilize this fn in ParallelCoordinates
-
-
-var convertToArrOfObjects = function convertToArrOfObjects(columns, fields) {
-  if (!columns || !columns[0] || !columns[0].length) return [];
-  var data = [];
-
-  var _loop = function _loop(i) {
-    var newObj = {};
-    fields.forEach(function (field, index) {
-      var fieldName = typeof field === 'string' ? field : field.name;
-
-      if (columns[index][i] === '') {
-        newObj[fieldName] = null;
-      } else {
-        newObj[fieldName] = columns[index][i];
-      }
-    });
-    data.push(newObj);
-  };
-
-  for (var i = 0; i < columns[0].length; i += 1) {
-    _loop(i);
-  }
-
-  return data;
-};
-
-exports.convertToArrOfObjects = convertToArrOfObjects; // LTTB algorithm which can be used to downsample time series data while striving to maintain
-// the spikes and overall shape of the chart
-// Copied from https://github.com/sveinn-steinarsson/flot-downsample/blob/0815010016fc94b1bbc6a010afb8aad13ada6d0d/jquery.flot.downsample.js
-// Modifications include:
-// 1) Convert to modern JavaScript(use const, let, and use array.push to push to last element of array)
-// 2) Convert to camel case
-// 3) Convert to TS and also return the indices of the points that are in the downsampled result.
-// 4) Add a new parameter preferredDownsampleIndices that correspond to the indices of points
-// that should be used in case of a tie of the max area in a bucket
-
-var largestTriangleThreeBuckets = function largestTriangleThreeBuckets(data, threshold, preferredDownsampleIndices) {
-  var dataLength = data.length;
-  var downsampledIndices = [];
-
-  if (threshold >= dataLength || threshold === 0) {
-    var allIndices = data.map(function (values, index) {
-      return index;
-    });
-    return {
-      downsampledData: data,
-      downsampledIndices: allIndices
-    }; // Nothing to do
-  }
-
-  var sampled = [];
-  var sampledIndex = 0; // Bucket size. Leave room for start and end data points
-
-  var every = (dataLength - 2) / (threshold - 2);
-  var a = 0; // Initially a is the first point in the triangle
-
-  var maxAreaPoint;
-  var maxArea;
-  var area;
-  var nextA;
-  sampled.push(data[a]); // Always add the first point
-
-  downsampledIndices.push(0); // eslint-disable-next-line no-plusplus
-
-  for (var i = 0; i < threshold - 2; i++) {
-    // Calculate point average for next bucket (containing c)
-    var avgX = 0;
-    var avgY = 0;
-    var avgRangeStart = Math.floor((i + 1) * every) + 1;
-    var avgRangeEnd = Math.floor((i + 2) * every) + 1;
-    avgRangeEnd = avgRangeEnd < dataLength ? avgRangeEnd : dataLength;
-    var avgRangeLength = avgRangeEnd - avgRangeStart; // eslint-disable-next-line no-plusplus
-
-    for (; avgRangeStart < avgRangeEnd; avgRangeStart++) {
-      avgX += Number(data[avgRangeStart][0]); // * 1 enforces Number (value may be Date)
-
-      avgY += data[avgRangeStart][1] * 1;
-    }
-
-    avgX /= avgRangeLength;
-    avgY /= avgRangeLength; // Get the range for this bucket
-
-    var rangeOffs = Math.floor((i + 0) * every) + 1;
-    var rangeTo = Math.floor((i + 1) * every) + 1; // Point a
-
-    var pointAX = Number(data[a][0]); // Enforce Number (value may be Date)
-
-    var pointAY = data[a][1] * 1; // eslint-disable-next-line no-multi-assign
-
-    maxArea = area = -1;
-    var maxAreaIndex = rangeOffs; // eslint-disable-next-line no-plusplus
-
-    for (; rangeOffs < rangeTo; rangeOffs++) {
-      // Calculate triangle area over three buckets
-      area = Math.abs((pointAX - avgX) * (data[rangeOffs][1] - pointAY) - (pointAX - Number(data[rangeOffs][0])) * (avgY - pointAY)) * 0.5; // Modification: try to downsample the least amount of points possible when there are multiple series
-      // If all points in a bucket have the same area, prioritize the one with an x index
-      // that also existed from another series so we don't add another point unnecessarily.
-      // By default LTTB picks the leftmost point in the bucket
-
-      if (area > maxArea || area === maxArea && preferredDownsampleIndices.has(rangeOffs)) {
-        maxArea = area;
-        maxAreaPoint = data[rangeOffs];
-        nextA = rangeOffs; // Next a is this b
-        // Modification: save the index of the point with the most area
-
-        maxAreaIndex = rangeOffs;
-      }
-    } // eslint-disable-next-line no-plusplus
-
-
-    sampled[sampledIndex++] = maxAreaPoint; // Pick this point from the bucket
-
-    downsampledIndices.push(maxAreaIndex);
-    a = nextA; // This a is the next a (chosen b)
-  } // eslint-disable-next-line no-plusplus
-
-
-  sampled[sampledIndex++] = data[dataLength - 1]; // Always add last
-
-  downsampledIndices.push(dataLength - 1);
-  return {
-    downsampledData: sampled,
-    downsampledIndices: downsampledIndices
-  };
-};
-/**
- * Strictly coerces the entire column to numbers if it only consists of numeric strings or numbers. Also determines
- * if at least one of the values in the column can be loosely coerced to a number.
- * If the column cannot be strictly downsampled (if it contains nulls or non-numeric strings), returns an empty array and
- * returns that it cannot downsample the column.
- */
-
-
-var strictlyCoerceYColumn = function strictlyCoerceYColumn(column, options) {
-  var isNullCoercionEnabled = options.nullValueDisplay === 'zero'; // Splunk charting allows for numbers in formats such as negative hex that
-  // Number() does not support and also allows loose coercion of hex numbers (but not other formats)
-  // We want to identify columns which contain at least one value that can be loosely coerced
-
-  var canLooselyCoerceSomeValues = column.findIndex(function (value) {
-    return (0, numberUtils_1.startsWithNumber)("".concat(value)) || isNullCoercionEnabled && value === null;
-  }) >= 0; // If not all values in column can be strictly coerced to a number, we do not downsample
-
-  var coercedColumn = [];
-  var canDownsampleColumn = !column.some(function (value) {
-    var coercedValue = Number(value);
-    var coerceValueToZero = isNullCoercionEnabled && value === null; // if it can't be parsed or isn't safe, fail
-
-    if (Number.isNaN(coercedValue) || coercedValue <= Number.MIN_SAFE_INTEGER || coercedValue >= Number.MAX_SAFE_INTEGER || typeof value !== 'string' && typeof value !== 'number' && !coerceValueToZero) {
-      return true;
-    } // save value and continue to next
-
-
-    coercedColumn.push(coercedValue);
-    return false;
-  });
-  return {
-    canDownsampleColumn: canDownsampleColumn,
-    canLooselyCoerceSomeValues: canLooselyCoerceSomeValues,
-    coercedColumn: canDownsampleColumn ? coercedColumn : []
-  };
-};
-/**
- * Tries to coerce the x-column to numbers or dates, if it is eligible for downsampling.
- * Only strictly increasing x-columns are eligible for downsampling.
- * If the column is not eligible for downsampling, returns an empty array.
- */
-
-
-var strictlyCoerceXColumn = function strictlyCoerceXColumn(column, fieldType) {
-  if (fieldType === 'number') {
-    var coercedXColumn = column.map(function (xValue) {
-      return Number(xValue);
-    });
-
-    if (isColumnStrictlyIncreasing(coercedXColumn, fieldType)) {
-      return coercedXColumn;
-    }
-  } else if (fieldType === 'time') {
-    var _coercedXColumn = column.map(function (xValue) {
-      return new Date(xValue);
-    });
-
-    if (isColumnStrictlyIncreasing(_coercedXColumn, fieldType)) {
-      return _coercedXColumn;
-    }
-  }
-
-  return [];
-};
-
-var isDownsamplingEnabledForViz = function isDownsamplingEnabledForViz(_ref) {
-  var vizConfig = _ref.vizConfig;
-
-  var _a;
-
-  return (_a = vizConfig.supports) === null || _a === void 0 ? void 0 : _a.includes(interfaces_1.VizBehavior.DOWNSAMPLING);
-};
-
-exports.isDownsamplingEnabledForViz = isDownsamplingEnabledForViz;
-
-var calculateThresholdOnRangeSelect = function calculateThresholdOnRangeSelect(_ref2) {
-  var firstIndex = _ref2.firstIndex,
-      lastIndex = _ref2.lastIndex,
-      dataSources = _ref2.dataSources,
-      width = _ref2.width;
-
-  var _a, _b, _c;
-
-  var window = lastIndex - firstIndex + 1;
-  var ratio = Math.round(Number(((_c = (_b = (_a = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.columns[0]) === null || _c === void 0 ? void 0 : _c.length) / window) * 10) / 10;
-  return Math.round(ratio * Number(width));
-};
-
-exports.calculateThresholdOnRangeSelect = calculateThresholdOnRangeSelect;
-/**
- * Calculates the downsampling threshold based on the range selection. If search zoom is enabled or there is no selection,
- * then returns the width of the visualization.
- *
- * Otherwise calculates the threshold based on the ratio of the window selected compared to the size of the non-downsampled
- * data sources. Returns null if the chart event's dataset does not match the passed in primary data source or if the chart is zoomed
- * in for a categorical chart.
- */
-
-var calculateDownsamplingThreshold = function calculateDownsamplingThreshold(_ref3) {
-  var enableSearchZoom = _ref3.enableSearchZoom,
-      dataSources = _ref3.dataSources,
-      selectChartEvent = _ref3.selectChartEvent,
-      width = _ref3.width,
-      xField = _ref3.xField;
-
-  var _a, _b, _c;
-
-  if (enableSearchZoom || !selectChartEvent) {
-    return Number(width);
-  }
-
-  var primaryDataSource = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary;
-
-  if (!primaryDataSource) {
-    return null;
-  }
-
-  var startXIndex = selectChartEvent.startXIndex,
-      endXIndex = selectChartEvent.endXIndex,
-      currentTarget = selectChartEvent.currentTarget;
-
-  try {
-    var xFieldIndex = (_a = primaryDataSource === null || primaryDataSource === void 0 ? void 0 : primaryDataSource.data) === null || _a === void 0 ? void 0 : _a.fields.findIndex(function (field) {
-      return field.name === xField;
-    });
-    var downsampledXFieldIndex = (_b = currentTarget.dataSet) === null || _b === void 0 ? void 0 : _b.fields.findIndex(function (field) {
-      return field === xField;
-    });
-
-    if (xFieldIndex === -1 || downsampledXFieldIndex === -1) {
-      return null;
-    }
-
-    var fullSeries = (_c = primaryDataSource === null || primaryDataSource === void 0 ? void 0 : primaryDataSource.data) === null || _c === void 0 ? void 0 : _c.columns[xFieldIndex];
-    var downsampledSeries = currentTarget.dataSet.seriesList[downsampledXFieldIndex];
-    var firstIndex = fullSeries.findIndex(function (x) {
-      return downsampledSeries[startXIndex] === x;
-    });
-    var lastIndex = fullSeries.findIndex(function (x) {
-      return downsampledSeries[endXIndex] === x;
-    });
-
-    if (firstIndex >= 0 && lastIndex >= 0 && firstIndex <= lastIndex) {
-      return (0, exports.calculateThresholdOnRangeSelect)({
-        firstIndex: firstIndex,
-        lastIndex: lastIndex,
-        dataSources: dataSources,
-        width: width
-      });
-    }
-  } catch (e) {
-    // eslint-disable-next-line no-console
-    console.error('Error occurred while setting downsample threshold on range select event', e);
-  }
-
-  return null;
-};
-
-exports.calculateDownsamplingThreshold = calculateDownsamplingThreshold;
-
-var isColumnStrictlyIncreasing = function isColumnStrictlyIncreasing(column, fieldType) {
-  return column.every(function (value, index) {
-    if (fieldType === 'number') {
-      if (Number.isNaN(value)) {
-        return false;
-      }
-    }
-
-    if (fieldType === 'time') {
-      if (Number.isNaN(value.getTime())) {
-        return false;
-      }
-    }
-
-    if (index === 0) {
-      return true;
-    }
-
-    return value > column[index - 1];
-  });
-};
-/**
- * Verifies that all of the columns that are displayed in a chart can be downsampled. Valid columns that can be
- * displayed are those that contain at least one number. We can only downsample columns that only consist of numbers.
- *
- * If all columns can be downsampled, returns the x column coerced to time/number and y columns coerced to numbers.
- * If not all columns can be downsampled, then returns empty arrays for both x and y
- */
-
-
-var tryToCoerceAllDisplayedFields = function tryToCoerceAllDisplayedFields(ds, xField, yFields, fieldTypes, options) {
-  var xColumn = [];
-  var yColumns = [];
-  var canDownsample = !ds.data.fields.some(function (field, index) {
-    var _a, _b;
-
-    var fieldName = (_a = field.name) !== null && _a !== void 0 ? _a : field;
-    var fieldType = (_b = fieldTypes[index]) !== null && _b !== void 0 ? _b : 'unknown';
-    var column = ds.data.columns[index];
-    var hasDisplayedColumnThatCantBeDownsampled = false;
-
-    if (fieldName === xField) {
-      xColumn = strictlyCoerceXColumn(column, fieldType);
-    } else if (yFields.has(fieldName)) {
-      var _strictlyCoerceYColum = strictlyCoerceYColumn(ds.data.columns[index], options),
-          coercedColumn = _strictlyCoerceYColum.coercedColumn,
-          canLooselyCoerceSomeValues = _strictlyCoerceYColum.canLooselyCoerceSomeValues,
-          canDownsampleColumn = _strictlyCoerceYColum.canDownsampleColumn; // do not perform downsampling if a column can possibly be displayed but cannot
-      // be downsampled using LTTB
-
-
-      hasDisplayedColumnThatCantBeDownsampled = canLooselyCoerceSomeValues && !canDownsampleColumn;
-
-      if (hasDisplayedColumnThatCantBeDownsampled) {
-        return true;
-      }
-
-      if (canDownsampleColumn) {
-        yColumns.push(coercedColumn);
-      }
-    }
-
-    return false;
-  });
-
-  if (canDownsample) {
-    return {
-      xColumn: xColumn,
-      yColumns: yColumns
-    };
-  }
-
-  return {
-    xColumn: [],
-    yColumns: []
-  };
-};
-
-var pickIndicesFromDataSource = function pickIndicesFromDataSource(ds, indices) {
-  var sortedIndices = Array.from(indices).sort(function (a, b) {
-    return a - b;
-  });
-  var slicedColumns = [];
-  ds.data.columns.forEach(function (column) {
-    var slicedColumn = [];
-    sortedIndices.forEach(function (index) {
-      slicedColumn.push(column[index]);
-    });
-    slicedColumns.push(slicedColumn);
-  }); // update data columns with downsampled columns
-
-  return Object.assign(Object.assign({}, ds), {
-    data: Object.assign(Object.assign({}, ds.data), {
-      columns: slicedColumns
-    })
-  });
-};
-
-var downsampleDataSources = function downsampleDataSources(_ref4) {
-  var dataSources = _ref4.dataSources,
-      threshold = _ref4.threshold,
-      options = _ref4.options;
-
-  var _a, _b, _c;
-
-  var primaryDS = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary; // only downsample time series when number of data points are over threshold
-
-  var numPoints = (_c = (_b = (_a = primaryDS === null || primaryDS === void 0 ? void 0 : primaryDS.data) === null || _a === void 0 ? void 0 : _a.columns[0]) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0;
-
-  if (Number.isNaN(threshold) || numPoints <= threshold || threshold < 2) {
-    return dataSources;
-  }
-
-  var xField = options.xField,
-      yFields = options.yFields,
-      fieldTypes = options.fieldTypes;
-
-  if (!xField || !(yFields === null || yFields === void 0 ? void 0 : yFields.length) || !(fieldTypes === null || fieldTypes === void 0 ? void 0 : fieldTypes.length)) {
-    return dataSources;
-  }
-
-  var nonInternalYFields = new Set(yFields.filter(function (yField) {
-    return !yField.startsWith('_');
-  }));
-  var maxPointsInDownsample = Math.min(nonInternalYFields.size * threshold, numPoints); // Do not try to downsample if there are too many downsampled pts
-  // At the worst case, each series has non-overlapping downsampled pts
-  // which will mean that all points will be included in the downsampled result
-  // This will just lead to additional overhead due to coercing each
-  // x and y field to number
-
-  if (maxPointsInDownsample >= numPoints) {
-    return dataSources;
-  }
-
-  var _tryToCoerceAllDispla = tryToCoerceAllDisplayedFields(primaryDS, xField, nonInternalYFields, fieldTypes, options),
-      xColumn = _tryToCoerceAllDispla.xColumn,
-      yColumns = _tryToCoerceAllDispla.yColumns;
-
-  if (!yColumns.length || !xColumn.length) {
-    return dataSources;
-  }
-
-  var downsampledDataSources = Object.assign({}, dataSources);
-  var downsampledIndices = new Set();
-  yColumns.forEach(function (yColumn, columnIndex) {
-    // perform LTTB downsampling for current series, LTTB takes an [x, y] pair
-    var xyPair = yColumn.map(function (yValue, index) {
-      return [xColumn[index], yValue];
-    });
-
-    try {
-      var _largestTriangleThree = largestTriangleThreeBuckets(xyPair, threshold, downsampledIndices),
-          downsampledIndicesForSeries = _largestTriangleThree.downsampledIndices;
-
-      downsampledIndicesForSeries.forEach(function (downsampleIndex) {
-        return downsampledIndices.add(downsampleIndex);
-      });
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error("Error occurred while downsampling column ".concat(columnIndex), e);
-    }
-  }); // update data columns with downsampled columns
-
-  downsampledDataSources.primary = pickIndicesFromDataSource(primaryDS, downsampledIndices);
-  return downsampledDataSources;
-};
-
-exports.downsampleDataSources = downsampleDataSources;
-
-/***/ }),
-/* 26 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.validOutputModes = exports.validSortDirs = void 0;
-exports.validSortDirs = ['asc', 'desc', 'none'];
-exports.validOutputModes = ['json_cols', 'json'];
-
-/***/ }),
-/* 27 */,
-/* 28 */
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualization-context/TimezoneContext");
-
-/***/ }),
-/* 29 */
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/style");
-
-/***/ }),
-/* 30 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var _classCallCheck = __webpack_require__(4);
-
-var _createClass = __webpack_require__(7);
-
-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;
-  }
-  /**
-   * Allows users to programmatically highlight a point on the chart
-   *
-   * @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;
-
-      this.getChart().highlight(xValue, seriesName);
-    }
-    /**
-     * Allows users to programmatically unhighlight all points on the chart
-     *
-     * @memberof ChartingApiFunctional
-     */
-
-  }, {
-    key: "unHighlight",
-    value: function unHighlight() {
-      this.getChart().unHighlight();
-    } // 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;
-
-/***/ }),
-/* 31 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var react_1 = __webpack_require__(0);
-
-function usePrevious(value) {
-  var ref = (0, react_1.useRef)();
-  (0, react_1.useEffect)(function () {
-    ref.current = value;
-  });
-  return ref.current;
-}
-
-exports.default = usePrevious;
-
-/***/ }),
-/* 32 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  var desc = Object.getOwnPropertyDescriptor(m, k);
-
-  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-    desc = {
-      enumerable: true,
-      get: function get() {
-        return m[k];
-      }
-    };
-  }
-
-  Object.defineProperty(o, k2, desc);
-} : function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  o[k2] = m[k];
-});
-
-var __exportStar = this && this.__exportStar || function (m, exports) {
-  for (var p in m) {
-    if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-  }
-};
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-__exportStar(__webpack_require__(33), exports);
-
-__exportStar(__webpack_require__(34), exports);
-
-__exportStar(__webpack_require__(26), exports);
-
-__exportStar(__webpack_require__(35), exports);
-
-__exportStar(__webpack_require__(36), exports);
-
-__exportStar(__webpack_require__(37), exports);
-
-__exportStar(__webpack_require__(38), exports);
-
-__exportStar(__webpack_require__(39), exports);
-
-__exportStar(__webpack_require__(40), exports);
-
-__exportStar(__webpack_require__(14), exports);
-
-__exportStar(__webpack_require__(18), exports);
-
-__exportStar(__webpack_require__(19), exports);
-
-__exportStar(__webpack_require__(41), exports);
-
-__exportStar(__webpack_require__(42), exports);
-
-__exportStar(__webpack_require__(43), exports);
-
-__exportStar(__webpack_require__(44), exports);
-
-__exportStar(__webpack_require__(45), exports);
-
-__exportStar(__webpack_require__(46), exports);
-
-/***/ }),
-/* 33 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+/* Copyright © 2020 Splunk Inc.
+SPLUNK CONFIDENTIAL – Use or disclosure of this material in whole or
+in part without a valid written license from Splunk Inc. is PROHIBITED. */
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/common/Charting.tsx
+var Charting_exports = {};
+__export(Charting_exports, {
+  NO_INPLACE_PROPS: () => NO_INPLACE_PROPS,
+  appendTrellisToPayload: () => appendTrellisToPayload,
+  canUpdateInPlace: () => canUpdateInPlace,
+  changedOptions: () => changedOptions,
+  default: () => Charting_default,
+  updateRowPayload: () => updateRowPayload
 });
+module.exports = __toCommonJS(Charting_exports);
 
-/***/ }),
-/* 34 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-/**
- *  A data structure used at runtime to wire up a visualization.
- */
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+// esm-externals:lodash
+var lodash_exports = {};
+__export(lodash_exports, {
+  default: () => lodash_default
 });
-
-/***/ }),
-/* 35 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var defaultImport = __toESM(require("lodash"));
+__reExport(lodash_exports, require("lodash"));
+var lodash_default = "default" in defaultImport ? defaultImport.default : defaultImport;
+
+// esm-externals:@splunk/ui-utils/i18n
+var i18n_exports = {};
+__export(i18n_exports, {
+  default: () => i18n_default
 });
-
-/***/ }),
-/* 36 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var defaultImport2 = __toESM(require("@splunk/ui-utils/i18n"));
+__reExport(i18n_exports, require("@splunk/ui-utils/i18n"));
+var i18n_default = "default" in defaultImport2 ? defaultImport2.default : defaultImport2;
+
+// esm-externals:@splunk/visualization-color-palettes
+var visualization_color_palettes_exports = {};
+__export(visualization_color_palettes_exports, {
+  default: () => visualization_color_palettes_default
 });
-
-/***/ }),
-/* 37 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var defaultImport3 = __toESM(require("@splunk/visualization-color-palettes"));
+__reExport(visualization_color_palettes_exports, require("@splunk/visualization-color-palettes"));
+var visualization_color_palettes_default = "default" in defaultImport3 ? defaultImport3.default : defaultImport3;
+
+// esm-externals:react
+var react_exports = {};
+__export(react_exports, {
+  default: () => react_default
 });
-
-/***/ }),
-/* 38 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var defaultImport4 = __toESM(require("react"));
+__reExport(react_exports, require("react"));
+var react_default = "default" in defaultImport4 ? defaultImport4.default : defaultImport4;
+
+// esm-externals:prop-types
+var prop_types_exports = {};
+__export(prop_types_exports, {
+  default: () => prop_types_default
 });
-
-/***/ }),
-/* 39 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var defaultImport5 = __toESM(require("prop-types"));
+__reExport(prop_types_exports, require("prop-types"));
+var prop_types_default = "default" in defaultImport5 ? defaultImport5.default : defaultImport5;
+
+// esm-externals:react-event-listener
+var react_event_listener_exports = {};
+__export(react_event_listener_exports, {
+  default: () => react_event_listener_default
 });
-
-/***/ }),
-/* 40 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var defaultImport6 = __toESM(require("react-event-listener"));
+__reExport(react_event_listener_exports, require("react-event-listener"));
+var react_event_listener_default = "default" in defaultImport6 ? defaultImport6.default : defaultImport6;
+
+// esm-externals:@splunk/visualizations-shared/i18n
+var i18n_exports2 = {};
+__export(i18n_exports2, {
+  default: () => i18n_default2
 });
-
-/***/ }),
-/* 41 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var defaultImport7 = __toESM(require("@splunk/visualizations-shared/i18n"));
+__reExport(i18n_exports2, require("@splunk/visualizations-shared/i18n"));
+var i18n_default2 = "default" in defaultImport7 ? defaultImport7.default : defaultImport7;
+
+// esm-externals:@splunk/charting-bundle
+var charting_bundle_exports = {};
+__export(charting_bundle_exports, {
+  default: () => charting_bundle_default
 });
-
-/***/ }),
-/* 42 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var defaultImport8 = __toESM(require("@splunk/charting-bundle"));
+__reExport(charting_bundle_exports, require("@splunk/charting-bundle"));
+var charting_bundle_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
+
+// esm-externals:@splunk/visualization-context/TimezoneContext
+var TimezoneContext_exports = {};
+__export(TimezoneContext_exports, {
+  default: () => TimezoneContext_default
 });
-
-/***/ }),
-/* 43 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var defaultImport9 = __toESM(require("@splunk/visualization-context/TimezoneContext"));
+__reExport(TimezoneContext_exports, require("@splunk/visualization-context/TimezoneContext"));
+var TimezoneContext_default = "default" in defaultImport9 ? defaultImport9.default : defaultImport9;
+
+// esm-externals:@splunk/visualizations-shared/style
+var style_exports = {};
+__export(style_exports, {
+  default: () => style_default
 });
-
-/***/ }),
-/* 44 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var defaultImport10 = __toESM(require("@splunk/visualizations-shared/style"));
+__reExport(style_exports, require("@splunk/visualizations-shared/style"));
+var style_default = "default" in defaultImport10 ? defaultImport10.default : defaultImport10;
+
+// esm-externals:styled-components
+var styled_components_exports = {};
+__export(styled_components_exports, {
+  default: () => styled_components_default
 });
-
-/***/ }),
-/* 45 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var defaultImport11 = __toESM(require("styled-components"));
+__reExport(styled_components_exports, require("styled-components"));
+var styled_components_default = "default" in defaultImport11 ? defaultImport11.default : defaultImport11;
+
+// esm-externals:@splunk/visualizations-shared/Message
+var Message_exports = {};
+__export(Message_exports, {
+  default: () => Message_default
 });
-
-/***/ }),
-/* 46 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var defaultImport12 = __toESM(require("@splunk/visualizations-shared/Message"));
+__reExport(Message_exports, require("@splunk/visualizations-shared/Message"));
+var Message_default = "default" in defaultImport12 ? defaultImport12.default : defaultImport12;
+
+// esm-externals:@splunk/themes/useSplunkTheme
+var useSplunkTheme_exports = {};
+__export(useSplunkTheme_exports, {
+  default: () => useSplunkTheme_default
 });
-
-/***/ }),
-/* 47 */,
-/* 48 */,
-/* 49 */,
-/* 50 */,
-/* 51 */,
-/* 52 */,
-/* 53 */,
-/* 54 */,
-/* 55 */,
-/* 56 */,
-/* 57 */,
-/* 58 */,
-/* 59 */,
-/* 60 */,
-/* 61 */,
-/* 62 */,
-/* 63 */,
-/* 64 */,
-/* 65 */,
-/* 66 */,
-/* 67 */,
-/* 68 */,
-/* 69 */,
-/* 70 */,
-/* 71 */,
-/* 72 */,
-/* 73 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var defaultImport13 = __toESM(require("@splunk/themes/useSplunkTheme"));
+__reExport(useSplunkTheme_exports, require("@splunk/themes/useSplunkTheme"));
+var useSplunkTheme_default = "default" in defaultImport13 ? defaultImport13.default : defaultImport13;
+
+// esm-externals:@splunk/visualizations-shared/themeUtils
+var themeUtils_exports = {};
+__export(themeUtils_exports, {
+  default: () => themeUtils_default
 });
-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__(5);
-
-var visualization_color_palettes_1 = __webpack_require__(74);
-
-var react_1 = __webpack_require__(0);
-
-var React = __webpack_require__(0);
-
-var T = __webpack_require__(1);
-
-var react_event_listener_1 = __webpack_require__(75);
-
-__webpack_require__(76); // fixme, @splunk/charting should be refactor to use locale & timezone instead of i18n functions
-
-
-var charting_bundle_1 = __webpack_require__(77);
-
-var TimezoneContext_1 = __webpack_require__(28);
-
-var style_1 = __webpack_require__(29);
-
-var styled_components_1 = __webpack_require__(2);
-
-var Message_1 = __webpack_require__(24);
-
-var useSplunkTheme_1 = __webpack_require__(78);
-
-var themeUtils_1 = __webpack_require__(79);
-
-var ChartingApi_1 = __webpack_require__(30);
+var defaultImport14 = __toESM(require("@splunk/visualizations-shared/themeUtils"));
+__reExport(themeUtils_exports, require("@splunk/visualizations-shared/themeUtils"));
+var themeUtils_default = "default" in defaultImport14 ? defaultImport14.default : defaultImport14;
+
+// esm-externals:@splunk/visualization-schemas
+var visualization_schemas_exports = {};
+__export(visualization_schemas_exports, {
+  default: () => visualization_schemas_default
+});
+var defaultImport15 = __toESM(require("@splunk/visualization-schemas"));
+__reExport(visualization_schemas_exports, require("@splunk/visualization-schemas"));
+var visualization_schemas_default = "default" in defaultImport15 ? defaultImport15.default : defaultImport15;
 
-var usePrevious_1 = __webpack_require__(31);
+// src/common/ChartingApi.ts
+var ChartingApiFunctional = class {
+  // eslint-disable-next-line no-useless-constructor
+  constructor(chartRef) {
+    this.chartRef = chartRef;
+  }
+  /**
+   * Allows users to programmatically highlight a point on the chart
+   *
+   * @memberof ChartingApiFunctional
+   */
+  highlight({ xValue, seriesName } = { xValue: "", seriesName: "" }) {
+    this.getChart().highlight(xValue, seriesName);
+  }
+  /**
+   * Allows users to programmatically unhighlight all points on the chart
+   *
+   * @memberof ChartingApiFunctional
+   */
+  unHighlight() {
+    this.getChart().unHighlight();
+  }
+  // returns chart object
+  getChart() {
+    var _a;
+    return (_a = this.chartRef) == null ? void 0 : _a.current;
+  }
+};
 
-var useEventCallback_1 = __webpack_require__(80);
+// src/common/hooks/usePrevious.ts
+function usePrevious(value) {
+  const ref = (0, react_exports.useRef)();
+  (0, react_exports.useEffect)(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
 
-var dataUtils_1 = __webpack_require__(25);
+// src/common/hooks/useEventCallback.tsx
+var useEventCallback = (fn) => {
+  const ref = (0, react_exports.useRef)(fn);
+  (0, react_exports.useLayoutEffect)(() => {
+    ref.current = fn;
+  });
+  return (0, react_exports.useCallback)((...args) => ref.current(...args), []);
+};
+var useEventCallback_default = useEventCallback;
 
-exports.NO_INPLACE_PROPS = ['chart', 'chart.orientation', 'layout.splitSeries', 'chart.style', 'legend.placement'];
+// esm-externals:@splunk/visualizations-shared/numberUtils
+var numberUtils_exports = {};
+__export(numberUtils_exports, {
+  default: () => numberUtils_default
+});
+var defaultImport16 = __toESM(require("@splunk/visualizations-shared/numberUtils"));
+__reExport(numberUtils_exports, require("@splunk/visualizations-shared/numberUtils"));
+var numberUtils_default = "default" in defaultImport16 ? defaultImport16.default : defaultImport16;
+
+// src/common/utils/dataUtils.ts
+var calculateThresholdOnRangeSelect = ({
+  firstIndex,
+  lastIndex,
+  dataSources,
+  width
+}) => {
+  var _a, _b, _c;
+  const window2 = lastIndex - firstIndex + 1;
+  const ratio = Math.round(Number(((_c = (_b = (_a = dataSources == null ? void 0 : dataSources.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.columns[0]) == null ? void 0 : _c.length) / window2) * 10) / 10;
+  return Math.round(ratio * Number(width));
+};
+var calculateDownsamplingThreshold = ({
+  enableSearchZoom,
+  dataSources,
+  selectChartEvent,
+  width,
+  xField
+}) => {
+  var _a, _b, _c;
+  if (enableSearchZoom || !selectChartEvent) {
+    return Number(width);
+  }
+  const primaryDataSource = dataSources == null ? void 0 : dataSources.primary;
+  if (!primaryDataSource) {
+    return null;
+  }
+  const { startXIndex, endXIndex, currentTarget } = selectChartEvent;
+  try {
+    const xFieldIndex = (_a = primaryDataSource == null ? void 0 : primaryDataSource.data) == null ? void 0 : _a.fields.findIndex((field) => {
+      return field.name === xField;
+    });
+    const downsampledXFieldIndex = (_b = currentTarget.dataSet) == null ? void 0 : _b.fields.findIndex((field) => field === xField);
+    if (xFieldIndex === -1 || downsampledXFieldIndex === -1) {
+      return null;
+    }
+    const fullSeries = (_c = primaryDataSource == null ? void 0 : primaryDataSource.data) == null ? void 0 : _c.columns[xFieldIndex];
+    const downsampledSeries = currentTarget.dataSet.seriesList[downsampledXFieldIndex];
+    const firstIndex = fullSeries.findIndex((x) => {
+      return downsampledSeries[startXIndex] === x;
+    });
+    const lastIndex = fullSeries.findIndex((x) => {
+      return downsampledSeries[endXIndex] === x;
+    });
+    if (firstIndex >= 0 && lastIndex >= 0 && firstIndex <= lastIndex) {
+      return calculateThresholdOnRangeSelect({
+        firstIndex,
+        lastIndex,
+        dataSources,
+        width
+      });
+    }
+  } catch (e) {
+    console.error("Error occurred while setting downsample threshold on range select event", e);
+  }
+  return null;
+};
 
-var changedOptions = function changedOptions(curOptions, nextOptions) {
-  return Object.keys(curOptions).filter(function (key) {
-    return !(key in nextOptions);
-  }).concat(Object.keys(nextOptions).filter(function (key) {
-    return !(key in curOptions) || curOptions[key] !== nextOptions[key];
-  }));
+// esm-externals:@splunk/visualization-context/FeatureFlagContext
+var FeatureFlagContext_exports = {};
+__export(FeatureFlagContext_exports, {
+  default: () => FeatureFlagContext_default
+});
+var defaultImport17 = __toESM(require("@splunk/visualization-context/FeatureFlagContext"));
+__reExport(FeatureFlagContext_exports, require("@splunk/visualization-context/FeatureFlagContext"));
+var FeatureFlagContext_default = "default" in defaultImport17 ? defaultImport17.default : defaultImport17;
+
+// src/common/hooks/useTrellisEnabled.ts
+var useTrellisFeatureFlagOn = () => {
+  const context = (0, react_exports.useContext)(FeatureFlagContext_default);
+  return Boolean(context == null ? void 0 : context.visualizations_enableTrellis);
+};
+var useTrellisEnabled = (layoutType = visualization_schemas_exports.LAYOUT_TYPE.Off) => {
+  const trellisFeatureEnabled = useTrellisFeatureFlagOn();
+  return trellisFeatureEnabled && layoutType === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
 };
 
-exports.changedOptions = changedOptions;
+// src/common/components/TrellisTitle.tsx
+var TRELLIS_TITLE_HEIGHT = 28;
+var TrellisTitleText = styled_components_default.div`
+    margin-left: 10px;
+    margin-right: 10px;
+    padding-top: 8px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+`;
+var TrellisTitleDiv = styled_components_default.div`
+    height: ${TRELLIS_TITLE_HEIGHT}px;
+    font-size: 14px;
+    font-weight: 700;
+    color: ${(props) => props.fontColor};
+    background-color: ${(props) => props.backgroundColor};
+    box-shadow: 0 1px ${(props) => props.backgroundColor}; // this is added to avoid a 1px gap between title and viz divs that showed up intermittently because of pixel rounding error in chrome.
+`;
+var TrellisTitle = (props) => {
+  const titleText = String(props.trellisKey).toString();
+  return /* @__PURE__ */ react_exports.createElement(
+    TrellisTitleDiv,
+    {
+      fontColor: props.fontColor,
+      backgroundColor: props.backgroundColor,
+      "data-test": "trellis-title",
+      title: titleText
+    },
+    /* @__PURE__ */ react_exports.createElement(TrellisTitleText, null, titleText)
+  );
+};
 
-var canUpdateInPlace = function canUpdateInPlace(curOptions, nextOptions) {
-  // if either of the options are undefined
-  // it cannot update in place.
+// src/common/Charting.tsx
+var NO_INPLACE_PROPS = [
+  "chart",
+  "chart.orientation",
+  "layout.splitSeries",
+  "chart.style",
+  "legend.placement"
+];
+var appendTrellisToPayload = (props, payload) => {
+  if (props.trellisSplitBy) {
+    payload["trellis.name"] = props.trellisSplitBy;
+  }
+  if (props.trellisKey) {
+    payload["trellis.value"] = props.trellisKey;
+  }
+  return payload;
+};
+var changedOptions = (curOptions, nextOptions) => Object.keys(curOptions).filter((key) => !(key in nextOptions)).concat(
+  Object.keys(nextOptions).filter(
+    (key) => !(key in curOptions) || curOptions[key] !== nextOptions[key]
+  )
+);
+var canUpdateInPlace = (curOptions, nextOptions) => {
   if (!curOptions || !nextOptions) {
     return false;
   }
-
-  return !exports.NO_INPLACE_PROPS.some(function (p) {
-    return curOptions[p] !== nextOptions[p];
-  }) && !(0, exports.changedOptions)(curOptions, nextOptions).some(function (p) {
-    return p.toLowerCase().endsWith('color');
-  });
+  return !NO_INPLACE_PROPS.some((p) => curOptions[p] !== nextOptions[p]) && !changedOptions(curOptions, nextOptions).some((p) => p.toLowerCase().endsWith("color"));
 };
-
-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
-    payload["".concat(key, ".value")] = chartEventRowContext[key];
+var updateRowPayload = (chartEventRowContext, payload) => {
+  Object.keys(chartEventRowContext || {}).forEach((key) => {
+    payload[`${key}.value`] = chartEventRowContext[key];
   });
   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+
-// .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',
-    width: props.width,
-    height: props.height
-  };
-}).withConfig({
-  displayName: "Charting__ChartingContainer",
-  componentId: "sc-3wbgm0-0"
-})(["& .highcharts-a11y-proxy-container{pointer-events:none;}overflow:hidden;position:relative;", ";"], function (props) {
-  return (0, style_1.toDimension)((0, lodash_1.pick)(props, ['width', 'height']));
-});
+var ChartingContainer = styled_components_default.div.attrs((props) => ({
+  "data-test": "charting-container",
+  width: props.width,
+  height: props.height
+}))`
+    & .highcharts-a11y-proxy-container {
+        pointer-events: none;
+    }
+    overflow: hidden;
+    position: relative;
+    ${(props) => (0, style_exports.toDimension)((0, lodash_exports.pick)(props, ["width", "height"]))};
+`;
 var propTypes = {
-  width: T.oneOfType([T.string, T.number]),
-  height: T.oneOfType([T.string, T.number]),
-  options: T.object,
-  chartData: T.object,
-  onEventTrigger: T.func,
-  onClick: T.func,
-  onSelect: T.func,
-  onPointMouseOver: T.func,
-  onPointMouseOut: T.func,
-  style: T.object,
-  colorPalette: T.array,
-  visualizationApiRef: T.func,
-  themeKey: T.string,
-  originalDataSources: T.object,
-  onDownsamplingThresholdChange: T.func,
-  xField: T.string,
-  y2Fields: T.array
+  width: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number]),
+  height: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number]),
+  options: prop_types_exports.object,
+  chartData: prop_types_exports.object,
+  onEventTrigger: prop_types_exports.func,
+  onClick: prop_types_exports.func,
+  onSelect: prop_types_exports.func,
+  onPointMouseOver: prop_types_exports.func,
+  onPointMouseOut: prop_types_exports.func,
+  style: prop_types_exports.object,
+  colorPalette: prop_types_exports.array,
+  visualizationApiRef: prop_types_exports.func,
+  themeKey: prop_types_exports.string,
+  originalDataSources: prop_types_exports.object,
+  onDownsamplingThresholdChange: prop_types_exports.func,
+  xField: prop_types_exports.string,
+  y2Fields: prop_types_exports.array,
+  splitByLayout: prop_types_exports.oneOf(Object.values(visualization_schemas_exports.LAYOUT_TYPE)),
+  trellisKey: prop_types_exports.string,
+  trellisSplitBy: prop_types_exports.string,
+  backgroundColor: prop_types_exports.string,
+  defaultFontColor: prop_types_exports.string
 };
-
-var Charting = function Charting(props) {
+var Charting = (props) => {
   var _a, _b;
-
-  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 selectChartEvent = (0, react_1.useRef)(null);
-
-  var computeChartingSize = function computeChartingSize() {
+  const container = (0, react_exports.useRef)(null);
+  const needsInit = (0, react_exports.useRef)(true);
+  const chart = (0, react_exports.useRef)();
+  const needsRedraw = (0, react_exports.useRef)(true);
+  const api = (0, react_exports.useRef)(new ChartingApiFunctional(chart));
+  const timezone = (0, react_exports.useContext)(TimezoneContext_default);
+  const selectChartEvent = (0, react_exports.useRef)(null);
+  const trellisEnabled = useTrellisEnabled(props.splitByLayout);
+  const computeChartingSize = () => {
     if (container.current) {
-      var rect = container.current.getBoundingClientRect();
+      const rect = container.current.getBoundingClientRect();
       return {
         height: rect.height,
         width: rect.width
       };
     }
-
     return {};
   };
-
-  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,
-      originalDataSources = props.originalDataSources,
-      onDownsamplingThresholdChange = props.onDownsamplingThresholdChange,
-      xField = props.xField;
-  var prevOptions = (0, usePrevious_1.default)(options);
-  var prevTimezone = (0, usePrevious_1.default)(timezone);
-
-  var handleClick = function handleClick(chartEvent, type) {
-    var payload = (0, lodash_1.pick)(chartEvent, 'name2', 'value2', '_span', 'modifierKey');
+  const splunkTheme = useSplunkTheme_default();
+  const themeKey = props.themeKey ? props.themeKey : (0, themeUtils_exports.getChartingThemeKey)({ splunkThemeV1: splunkTheme });
+  const {
+    width,
+    height,
+    style,
+    chartData,
+    options,
+    colorPalette,
+    onClick,
+    onSelect,
+    onPointMouseOut,
+    onPointMouseOver,
+    onEventTrigger,
+    originalDataSources,
+    onDownsamplingThresholdChange,
+    xField,
+    backgroundColor,
+    defaultFontColor,
+    trellisKey
+  } = props;
+  const prevOptions = usePrevious(options);
+  const prevTimezone = usePrevious(timezone);
+  const handleClick = (chartEvent, type) => {
+    let payload = (0, lodash_exports.pick)(
+      chartEvent,
+      "name2",
+      "value2",
+      "_span",
+      "modifierKey"
+    );
     payload.name = payload.name2;
     delete payload.name2;
-
-    if (type === VizChartEventType.POINT_CLICK) {
+    if (type === "point.click" /* POINT_CLICK */) {
       payload.value = payload.value2;
       delete payload.value2;
-      payload = (0, exports.updateRowPayload)(chartEvent.rowContext, payload);
+      payload = updateRowPayload(chartEvent.rowContext, payload);
     }
-
+    payload = appendTrellisToPayload(props, payload);
     onClick({
-      type: type,
+      type,
       originalEvent: chartEvent,
-      payload: payload
+      payload
     });
   };
-
-  var destroyChart = function destroyChart() {
+  const destroyChart = () => {
     if (chart.current) {
       chart.current.destroy();
       chart.current = null;
     }
-
     needsRedraw.current = true;
     needsInit.current = true;
   };
-
-  var enableSearchZoom = (_b = (_a = chartData === null || chartData === void 0 ? void 0 : chartData.chartDataOptions) === null || _a === void 0 ? void 0 : _a.enableSearchZoom) !== null && _b !== void 0 ? _b : false;
-  var recalculateDownsamplingThreshold = React.useCallback(function () {
+  const enableSearchZoom = (_b = (_a = chartData == null ? void 0 : chartData.chartDataOptions) == null ? void 0 : _a.enableSearchZoom) != null ? _b : false;
+  const recalculateDownsamplingThreshold = react_exports.useCallback(() => {
     if (!onDownsamplingThresholdChange || !xField) {
       return;
     }
-
-    var newThreshold = (0, dataUtils_1.calculateDownsamplingThreshold)({
-      enableSearchZoom: enableSearchZoom,
+    const newThreshold = calculateDownsamplingThreshold({
+      enableSearchZoom,
       dataSources: originalDataSources,
       width: Number(width),
       selectChartEvent: selectChartEvent.current,
-      xField: xField
+      xField
     });
-
     if (Number.isFinite(newThreshold)) {
       onDownsamplingThresholdChange(newThreshold);
     }
   }, [enableSearchZoom, originalDataSources, onDownsamplingThresholdChange, width, xField]);
-  React.useEffect(function () {
+  react_exports.useEffect(() => {
     recalculateDownsamplingThreshold();
-  }, [recalculateDownsamplingThreshold]); // useEventCallback is used for these handlers to make sure that they are a stable reference and
-  // we always use the latest version of the callback
-  // Since chart drawing is debounced, there is a race condition where a stale callback may be called
-  // if a prop changes and the event handler is called before the chart redraws. This means that
-  // it will use the old callback rather than the newer one, which can lead to inaccurate results
-
-  var handleSelect = (0, useEventCallback_1.default)(function (chartEvent) {
+  }, [recalculateDownsamplingThreshold]);
+  const handleSelect = useEventCallback_default((chartEvent) => {
     selectChartEvent.current = chartEvent;
-    recalculateDownsamplingThreshold(); // todo: need change this after breaking all visualizations
-
-    if (onSelect && typeof onSelect === 'function') {
+    recalculateDownsamplingThreshold();
+    const payload = appendTrellisToPayload(
+      props,
+      (0, lodash_exports.pick)(chartEvent, "startXIndex", "endXIndex", "startXValue", "endXValue")
+    );
+    if (onSelect && typeof onSelect === "function") {
       onSelect({
-        type: 'range.select',
+        type: "range.select",
         originalEvent: chartEvent,
-        payload: (0, lodash_1.pick)(chartEvent, 'startXIndex', 'endXIndex', 'startXValue', 'endXValue')
+        payload
       });
       return;
-    } // the chartEvent here is a jQuery event
-
-
+    }
     onEventTrigger({
-      type: 'range.select',
-      originalEvent: chartEvent,
-      payload: (0, lodash_1.pick)(chartEvent, 'startXIndex', 'endXIndex', 'startXValue', 'endXValue')
-    });
-  });
-  var handlePointMouseOut = (0, useEventCallback_1.default)(function (chartEvent, type) {
-    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 = (0, exports.updateRowPayload)(chartEvent.rowContext, payload);
-    onPointMouseOut({
-      type: type,
-      originalEvent: chartEvent,
-      payload: payload
-    });
-  });
-  var handlePointMouseOver = (0, useEventCallback_1.default)(function (chartEvent, type) {
-    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 = (0, exports.updateRowPayload)(chartEvent.rowContext, payload);
-    onPointMouseOver({
-      type: type,
+      type: "range.select",
       originalEvent: chartEvent,
-      payload: payload
+      payload
     });
   });
-
-  var drawChart = function drawChart() {
-    var updatedOptions = Object.assign(Object.assign({}, options), {
-      shouldColorizeTooltipData: false
-    });
-    var computedChartSize = computeChartingSize();
-    var computedWidth = computedChartSize.width;
-    var computedHeight = computedChartSize.height;
-    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;
-
+  const handlePointMouseOut = useEventCallback_default(
+    (chartEvent, type) => {
+      let payload = (0, lodash_exports.pick)(
+        chartEvent,
+        "name2",
+        "value2",
+        "_span",
+        "modifierKey",
+        "tooltipContext"
+      );
+      payload.name = payload.name2;
+      delete payload.name2;
+      payload.value = payload.value2;
+      delete payload.value2;
+      payload = appendTrellisToPayload(props, updateRowPayload(chartEvent.rowContext, payload));
+      onPointMouseOut({
+        type,
+        originalEvent: chartEvent,
+        payload
+      });
+    }
+  );
+  const handlePointMouseOver = useEventCallback_default(
+    (chartEvent, type) => {
+      let payload = (0, lodash_exports.pick)(
+        chartEvent,
+        "name2",
+        "value2",
+        "_span",
+        "modifierKey",
+        "tooltipContext"
+      );
+      payload.name = payload.name2;
+      delete payload.name2;
+      payload.value = payload.value2;
+      delete payload.value2;
+      payload = appendTrellisToPayload(props, updateRowPayload(chartEvent.rowContext, payload));
+      onPointMouseOver({
+        type,
+        originalEvent: chartEvent,
+        payload
+      });
+    }
+  );
+  const drawChart = () => {
+    const updatedOptions = __spreadProps(__spreadValues({}, options), { shouldColorizeTooltipData: false });
+    const computedChartSize = computeChartingSize();
+    const computedWidth = computedChartSize.width;
+    const computedHeight = computedChartSize.height;
+    const serializedTimezone = timezone == null ? void 0 : timezone.serializedTimezone;
+    const ianaTimezone = timezone == null ? void 0 : timezone.ianaTimezone;
+    const utcOffset = timezone == null ? void 0 : timezone.utcOffset;
     if (!computedWidth || !computedHeight) {
       return;
     }
-
     if (!chartData || !Object.keys(chartData).length) {
       return;
-    } // 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 (prevOptions[key] && updatedOptions[key] === undefined) {
-          updatedOptions[key] = '';
+      Object.keys(prevOptions).forEach((key) => {
+        if (prevOptions[key] && updatedOptions[key] === void 0) {
+          updatedOptions[key] = "";
         }
       });
     }
-
     try {
       if (needsInit.current) {
         destroyChart();
-        charting_bundle_1.default.setTheme(themeKey);
-
+        charting_bundle_default.setTheme(themeKey);
         if (colorPalette.length > 0) {
-          charting_bundle_1.default.setColorPalette(colorPalette);
+          charting_bundle_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' && {
-          'time.serializedTz': serializedTimezone
-        }), typeof ianaTimezone === 'string' && {
-          'time.ianaTimezone': ianaTimezone
-        }), typeof utcOffset === 'number' && {
-          'time.timezoneOffset': utcOffset
-        })); // bind event handlers
-
-        chart.current.on('pointClick', function (e) {
-          handleClick(e, VizChartEventType.POINT_CLICK);
+        chart.current = charting_bundle_default.createChart(container.current, __spreadValues(__spreadValues(__spreadValues(__spreadProps(__spreadValues({}, updatedOptions), {
+          drilldown: "all"
+        }), typeof serializedTimezone === "string" && {
+          "time.serializedTz": serializedTimezone
+        }), typeof ianaTimezone === "string" && {
+          "time.ianaTimezone": ianaTimezone
+        }), typeof utcOffset === "number" && {
+          "time.timezoneOffset": utcOffset
+        }));
+        chart.current.on("pointClick", (e) => {
+          handleClick(e, "point.click" /* POINT_CLICK */);
         });
-        chart.current.on('pointMouseOver', function (e) {
-          handlePointMouseOver(e, VizChartEventType.POINT_MOUSE_OVER);
+        chart.current.on("pointMouseOver", (e) => {
+          handlePointMouseOver(e, "point.mouseover" /* POINT_MOUSE_OVER */);
         });
-        chart.current.on('pointMouseOut', function (e) {
-          handlePointMouseOut(e, VizChartEventType.POINT_MOUSE_OUT);
+        chart.current.on("pointMouseOut", (e) => {
+          handlePointMouseOut(e, "point.mouseout" /* POINT_MOUSE_OUT */);
         });
-        chart.current.on('legendClick', function (e) {
-          handleClick(e, VizChartEventType.LEGEND_CLICK);
+        chart.current.on("legendClick", (e) => {
+          handleClick(e, "legend.click" /* LEGEND_CLICK */);
         });
-        chart.current.on('chartRangeSelect', handleSelect);
+        chart.current.on("chartRangeSelect", handleSelect);
       }
-
       if (needsRedraw.current) {
-        charting_bundle_1.default.setTheme(themeKey);
-
+        charting_bundle_default.setTheme(themeKey);
         if (colorPalette.length > 0) {
-          charting_bundle_1.default.setColorPalette(colorPalette);
+          charting_bundle_default.setColorPalette(colorPalette);
         }
-
-        chart.current.prepareAndDraw(chartData, updatedOptions, function () {
+        const payload = appendTrellisToPayload(props, {
+          width,
+          height,
+          currentTime: (/* @__PURE__ */ new Date()).getTime()
+        });
+        chart.current.prepareAndDraw(chartData, updatedOptions, () => {
           onEventTrigger({
-            type: 'viz.renderedWithData',
-            payload: {
-              width: width,
-              height: height,
-              currentTime: new Date().getTime()
-            }
+            type: "viz.renderedWithData",
+            payload
           });
         });
       }
-
       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);
+      window.console.error("Caught error rendering chart:", e);
     }
   };
-
-  var debouncedDrawChart = (0, lodash_1.debounce)(drawChart, 5);
-
-  var onContainerMount = function onContainerMount(chartingContainer) {
+  const debouncedDrawChart = (0, lodash_exports.debounce)(drawChart, 5);
+  const onContainerMount = (chartingContainer) => {
     container.current = chartingContainer;
     debouncedDrawChart();
   };
-
-  var prevTheme = (0, usePrevious_1.default)(themeKey);
-  var prevOnClick = (0, usePrevious_1.default)(onClick);
-  (0, react_1.useEffect)(function () {
+  const prevTheme = usePrevious(themeKey);
+  const prevOnClick = usePrevious(onClick);
+  (0, react_exports.useEffect)(() => {
     debouncedDrawChart();
     props.visualizationApiRef(api.current);
-    return function () {
+    return () => {
       props.visualizationApiRef(null);
       destroyChart();
     };
   }, []);
-  (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 || !(0, exports.canUpdateInPlace)(prevOptions, options) || // timezone is a simple object so this comparison should be fast
+  (0, react_exports.useEffect)(() => {
+    if (!chart.current || !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;
-    } // 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
-
-
+    }
     needsRedraw.current = true;
     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, {
-    style: style,
-    ref: onContainerMount,
-    width: width,
-    height: height
-  }, React.createElement(react_event_listener_1.default, {
-    target: window,
-    onResize: debouncedDrawChart
-  }));
+  }, [
+    JSON.stringify(options),
+    JSON.stringify(chartData.toJSON()),
+    JSON.stringify(chartData.annotations),
+    timezone == null ? void 0 : timezone.ianaTimezone,
+    timezone == null ? void 0 : timezone.utcOffset,
+    timezone == null ? void 0 : timezone.serializedTimezone,
+    themeKey,
+    onClick
+  ]);
+  return /* @__PURE__ */ react_exports.createElement(react_exports.Fragment, null, trellisEnabled && /* @__PURE__ */ react_exports.createElement(
+    TrellisTitle,
+    {
+      trellisKey,
+      backgroundColor,
+      fontColor: defaultFontColor
+    }
+  ), /* @__PURE__ */ react_exports.createElement(
+    ChartingContainer,
+    {
+      style,
+      ref: onContainerMount,
+      width,
+      height: trellisEnabled ? Number(height) - TRELLIS_TITLE_HEIGHT : height
+    },
+    /* @__PURE__ */ react_exports.createElement(react_event_listener_default, { target: window, onResize: debouncedDrawChart })
+  ));
 };
-
 var defaultProps = {
-  width: '100%',
+  width: "100%",
   height: 250,
   options: {},
   style: {},
   // todo: need remove it
-  onEventTrigger: lodash_1.noop,
-  onClick: lodash_1.noop,
-  onSelect: lodash_1.noop,
-  onPointMouseOver: lodash_1.noop,
-  onPointMouseOut: lodash_1.noop,
-  colorPalette: visualization_color_palettes_1.VIZ_CATEGORICAL,
-  visualizationApiRef: lodash_1.noop,
+  onEventTrigger: lodash_exports.noop,
+  onClick: lodash_exports.noop,
+  onSelect: lodash_exports.noop,
+  onPointMouseOver: lodash_exports.noop,
+  onPointMouseOut: lodash_exports.noop,
+  colorPalette: visualization_color_palettes_exports.VIZ_CATEGORICAL,
+  visualizationApiRef: lodash_exports.noop,
   chartData: null,
   themeKey: null,
   onDownsamplingThresholdChange: null,
   originalDataSources: null,
   xField: null,
-  y2Fields: []
+  y2Fields: [],
+  splitByLayout: void 0,
+  trellisKey: void 0,
+  trellisSplitBy: void 0,
+  backgroundColor: "",
+  defaultFontColor: ""
 };
 Charting.propTypes = propTypes;
-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: (0, i18n_1._)('No DataSource'),
-        level: "warning"
-      });
-    }
-
-    if (chartData && !Object.keys(chartData).length) {
-      return React.createElement(Message_1.default, {
-        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;
-
-
-exports.default = withEmptyChartMessage(Charting);
-
-/***/ }),
-/* 74 */
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualization-color-palettes");
-
-/***/ }),
-/* 75 */
-/***/ (function(module, exports) {
-
-module.exports = require("react-event-listener");
-
-/***/ }),
-/* 76 */
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/i18n");
-
-/***/ }),
-/* 77 */
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/charting-bundle");
-
-/***/ }),
-/* 78 */
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/themes/useSplunkTheme");
-
-/***/ }),
-/* 79 */
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/themeUtils");
-
-/***/ }),
-/* 80 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var react_1 = __webpack_require__(0);
-
-var useEventCallback = function useEventCallback(fn) {
-  var ref = (0, react_1.useRef)(fn);
-  (0, react_1.useLayoutEffect)(function () {
-    ref.current = fn;
-  });
-  return (0, react_1.useCallback)(function () {
-    return ref.current.apply(ref, arguments);
-  }, []);
+Charting.defaultProps = defaultProps;
+var ChartingWrapper = (props) => {
+  const { chartData } = props;
+  if (!chartData) {
+    return /* @__PURE__ */ react_exports.createElement(Message_default, { message: (0, i18n_exports._)("No DataSource"), level: "warning" });
+  }
+  if (!Object.keys(chartData).length) {
+    return /* @__PURE__ */ react_exports.createElement(Message_default, { message: (0, i18n_exports._)("No Result"), level: "info" });
+  }
+  return /* @__PURE__ */ react_exports.createElement(Charting, __spreadValues({}, props));
 };
-
-exports.default = useEventCallback;
-
-/***/ })
-/******/ ]);
-//# sourceMappingURL=Charting.js.map
+ChartingWrapper.propTypes = propTypes;
+ChartingWrapper.defaultProps = defaultProps;
+var Charting_default = ChartingWrapper;
+//# sourceMappingURL=Charting.js.map