@spscommerce/ds-react-charts 3.12.4 → 3.16.0

package/lib/bar/SpsBarChart.d.ts

@@ -1,17 +1,17 @@
-import * as React from "react";
-import { AxisDomain } from "recharts";
+import * as React from 'react';
+import { AxisDomain } from 'recharts';
 export interface BarChartProps {
     isHorizontalBarChart?: boolean;
     chartHeight: number;
     chartWidth: number;
     yAxis: {
-        type: "number" | "category";
+        type: 'number' | 'category';
         domain?: [AxisDomain, AxisDomain];
         tickValues?: number[] | string[];
         tickCount?: number;
     };
     xAxis: {
-        type: "number" | "category";
+        type: 'number' | 'category';
         domain?: [AxisDomain, AxisDomain];
         tickValues?: number[] | string[];
         tickCount?: number;

package/lib/bar/SpsBarChart.examples.d.ts

@@ -1,2 +1,2 @@
-import { DSReactExamples } from "@spscommerce/ds-shared";
+import { DSReactExamples } from '@spscommerce/ds-shared';
 export declare const SpsBarChartExamples: DSReactExamples;

package/lib/bar/SpsBarChartComponents.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { ChartDataObject } from "./SpsBarChart";
+import * as React from 'react';
+import { ChartDataObject } from './SpsBarChart';
 /**
  * Creates a percentage axis tick on the X axis with proper styling.
  * Can be passed to tick in the XAxis Recharts component within SpsBarChart.
@@ -7,7 +7,7 @@ import { ChartDataObject } from "./SpsBarChart";
  * @param x - X value for placement on the SVG, provided by Recharts.
  * @param y - Y value for placement on the SVG, provided by Recharts.
  */
-export declare const PercentXAxisTick: ({ payload, x, y }: any) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>;
+export declare const PercentXAxisTick: ({ payload, x, y }: any) => React.ReactElement;
 /**
  * Creates axis tick on the X axis with proper styling.
  * Can be passed to tick in the XAxis Recharts component within SpsBarChart.
@@ -16,7 +16,7 @@ export declare const PercentXAxisTick: ({ payload, x, y }: any) => React.ReactEl
  * @param x - X value for placement on the SVG, provided by Recharts.
  * @param y - Y value for placement on the SVG, provided by Recharts.
  */
-export declare const SpsDefaultXAxisTick: ({ payload, x, y }: any) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>;
+export declare const SpsDefaultXAxisTick: ({ payload, x, y }: any) => React.ReactElement;
 /**
  * Creates axis tick on the Y axis with proper styling.
  * Can be passed to tick in the YAxis Recharts component within SpsBarChart.
@@ -25,7 +25,7 @@ export declare const SpsDefaultXAxisTick: ({ payload, x, y }: any) => React.Reac
  * @param x - X value for placement on the SVG, provided by Recharts.
  * @param y - Y value for placement on the SVG, provided by Recharts.
  */
-export declare const SpsDefaultYAxisTick: ({ payload, x, y }: any) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>;
+export declare const SpsDefaultYAxisTick: ({ payload, x, y }: any) => React.ReactElement;
 /**
  * The tooltip for each bar rendered with proper styling.
  * Is passed into the toolTipWrapper from the ToolTipHandler.
@@ -35,7 +35,7 @@ export declare const SpsDefaultYAxisTick: ({ payload, x, y }: any) => React.Reac
  * @param label - Title of the toolTip, comes from the label provided in the ChartData.
  * @param width - Calculated width of the toolTip for positioning of the caret.
  */
-export declare const SpsDefaultChartTooltip: ({ descriptions, label, width }: any) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>;
+export declare const SpsDefaultChartTooltip: ({ descriptions, label, width }: any) => React.ReactElement;
 /**
  * Wraps the toolTip in a foreign object so HTML elements can be displayed and
  * positioned within the SVG. Calculates the width of the toolTip for positioning
@@ -53,6 +53,6 @@ export declare const ToolTipWrapper: ({ x, barWidth, y, isHorizontalBarChart, cu
     barWidth: number;
     y: number;
     isHorizontalBarChart: boolean;
-    customToolTip: React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>;
+    customToolTip: React.ReactElement;
     chartData: ChartDataObject;
-}) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>;
+}) => React.ReactElement;

package/lib/bar/SpsBarChartHelperFunctions.d.ts

@@ -1,4 +1,4 @@
-import { ChartDataObject } from "./SpsBarChart";
+import { ChartDataObject } from './SpsBarChart';
 /**
  * Handler for wrapping text on the x and y axis. Adds words one at a time to a
  * tspan, if tspan node becomes longer than the given width it removes the
@@ -26,4 +26,4 @@ export declare const adjustAxisDY: (textGroup: any, textHeight: number) => void;
  * @param  identifier - Identifier for the chart, used to differentiate the
  *                      gradients if multiple charts are rendered on a single page
  */
-export declare const gradientCalculator: (defs: any, data: ChartDataObject[], isHorizontal: boolean, fillColor: string, identifier: string) => void;
+export declare const gradientCalculator: (defs: any, data: Array<ChartDataObject>, isHorizontal: boolean, fillColor: string, identifier: string) => void;

package/lib/index.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var EventEmitter = require('events');
 var dsColors = require('@spscommerce/ds-colors');
-var utils$1 = require('@spscommerce/utils');
+var utils = require('@spscommerce/utils');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -65,10 +65,14 @@ function __read(o, n) {
     return ar;
 }
 
-function __spread() {
-    for (var ar = [], i = 0; i < arguments.length; i++)
-        ar = ar.concat(__read(arguments[i]));
-    return ar;
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 }
 
 function __makeTemplateObject(cooked, raw) {
@@ -78,21 +82,6 @@ function __makeTemplateObject(cooked, raw) {
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
-function getAugmentedNamespace(n) {
-	if (n.__esModule) return n;
-	var a = Object.defineProperty({}, '__esModule', {value: true});
-	Object.keys(n).forEach(function (k) {
-		var d = Object.getOwnPropertyDescriptor(n, k);
-		Object.defineProperty(a, k, d.get ? d : {
-			enumerable: true,
-			get: function () {
-				return n[k];
-			}
-		});
-	});
-	return a;
-}
-
 var _global = {exports: {}};
 
 // https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
@@ -2243,7 +2232,7 @@ var PropTypes = propTypes$5.exports;
 var classnames = {exports: {}};
 
 /*!
-  Copyright (c) 2017 Jed Watson.
+  Copyright (c) 2018 Jed Watson.
   Licensed under the MIT License (MIT), see
   http://jedwatson.github.io/classnames
 */
@@ -2255,7 +2244,7 @@ var classnames = {exports: {}};
 
 	var hasOwn = {}.hasOwnProperty;
 
-	function classNames () {
+	function classNames() {
 		var classes = [];
 
 		for (var i = 0; i < arguments.length; i++) {
@@ -2266,16 +2255,22 @@ var classnames = {exports: {}};
 
 			if (argType === 'string' || argType === 'number') {
 				classes.push(arg);
-			} else if (Array.isArray(arg) && arg.length) {
-				var inner = classNames.apply(null, arg);
-				if (inner) {
-					classes.push(inner);
+			} else if (Array.isArray(arg)) {
+				if (arg.length) {
+					var inner = classNames.apply(null, arg);
+					if (inner) {
+						classes.push(inner);
+					}
 				}
 			} else if (argType === 'object') {
-				for (var key in arg) {
-					if (hasOwn.call(arg, key) && arg[key]) {
-						classes.push(key);
+				if (arg.toString === Object.prototype.toString) {
+					for (var key in arg) {
+						if (hasOwn.call(arg, key) && arg[key]) {
+							classes.push(key);
+						}
 					}
+				} else {
+					classes.push(arg.toString());
 				}
 			}
 		}
@@ -10622,15 +10617,54 @@ var now$2 = function() {
 
 var now_1 = now$2;
 
-var isObject$2 = isObject_1,
+/** Used to match a single whitespace character. */
+
+var reWhitespace = /\s/;
+
+/**
+ * Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace
+ * character of `string`.
+ *
+ * @private
+ * @param {string} string The string to inspect.
+ * @returns {number} Returns the index of the last non-whitespace character.
+ */
+function trimmedEndIndex$1(string) {
+  var index = string.length;
+
+  while (index-- && reWhitespace.test(string.charAt(index))) {}
+  return index;
+}
+
+var _trimmedEndIndex = trimmedEndIndex$1;
+
+var trimmedEndIndex = _trimmedEndIndex;
+
+/** Used to match leading whitespace. */
+var reTrimStart = /^\s+/;
+
+/**
+ * The base implementation of `_.trim`.
+ *
+ * @private
+ * @param {string} string The string to trim.
+ * @returns {string} Returns the trimmed string.
+ */
+function baseTrim$1(string) {
+  return string
+    ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '')
+    : string;
+}
+
+var _baseTrim = baseTrim$1;
+
+var baseTrim = _baseTrim,
+    isObject$2 = isObject_1,
     isSymbol$1 = isSymbol_1;
 
 /** Used as references for various `Number` constants. */
 var NAN = 0 / 0;
 
-/** Used to match leading and trailing whitespace. */
-var reTrim = /^\s+|\s+$/g;
-
 /** Used to detect bad signed hexadecimal string values. */
 var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
 
@@ -10680,7 +10714,7 @@ function toNumber$2(value) {
   if (typeof value != 'string') {
     return value === 0 ? value : +value;
   }
-  value = value.replace(reTrim, '');
+  value = baseTrim(value);
   var isBinary = reIsBinary.test(value);
   return (isBinary || reIsOctal.test(value))
     ? freeParseInt(value.slice(2), isBinary ? 2 : 8)
@@ -11004,6 +11038,9 @@ function range$3(a, b, str) {
   var i = ai;
 
   if (ai >= 0 && bi > 0) {
+    if(a===b) {
+      return [ai, bi];
+    }
     begs = [];
     left = str.length;
 
@@ -12600,10 +12637,6 @@ function flatMap(collection, iteratee) {
 
 var flatMap_1 = flatMap;
 
-var lib = {};
-
-var getNiceTickValues$1 = {};
-
 /*
  *  decimal.js-light v2.5.1
  *  An arbitrary-precision Decimal type for JavaScript.
@@ -14590,28 +14623,17 @@ ONE = new Decimal(1);
 
 var Decimal$1 = Decimal;
 
-var decimal = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    get Decimal () { return Decimal; },
-    'default': Decimal$1
-});
+function _toConsumableArray$5(arr) { return _arrayWithoutHoles$5(arr) || _iterableToArray$5(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableSpread$5(); }
 
-var require$$0 = /*@__PURE__*/getAugmentedNamespace(decimal);
+function _nonIterableSpread$5() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-var utils = {};
+function _unsupportedIterableToArray$1(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$1(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen); }
 
-Object.defineProperty(utils, "__esModule", {
-  value: true
-});
-utils.memoize = utils.reverse = utils.compose = utils.map = utils.range = utils.curry = utils.PLACE_HOLDER = void 0;
-
-function _toConsumableArray$5(arr) { return _arrayWithoutHoles$5(arr) || _iterableToArray$5(arr) || _nonIterableSpread$5(); }
+function _iterableToArray$5(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
 
-function _nonIterableSpread$5() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
+function _arrayWithoutHoles$5(arr) { if (Array.isArray(arr)) return _arrayLikeToArray$1(arr); }
 
-function _iterableToArray$5(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
-
-function _arrayWithoutHoles$5(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
+function _arrayLikeToArray$1(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
 var identity$4 = function identity(i) {
   return i;
@@ -14620,7 +14642,6 @@ var identity$4 = function identity(i) {
 var PLACE_HOLDER = {
   '@@functional/placeholder': true
 };
-utils.PLACE_HOLDER = PLACE_HOLDER;
 
 var isPlaceHolder = function isPlaceHolder(val) {
   return val === PLACE_HOLDER;
@@ -14670,9 +14691,6 @@ var curryN = function curryN(n, fn) {
 var curry = function curry(fn) {
   return curryN(fn.length, fn);
 };
-
-utils.curry = curry;
-
 var range$2 = function range(begin, end) {
   var arr = [];
 
@@ -14682,8 +14700,6 @@ var range$2 = function range(begin, end) {
 
   return arr;
 };
-
-utils.range = range$2;
 var map$3 = curry(function (fn, arr) {
   if (Array.isArray(arr)) {
     return arr.map(fn);
@@ -14693,8 +14709,6 @@ var map$3 = curry(function (fn, arr) {
     return arr[key];
   }).map(fn);
 });
-utils.map = map$3;
-
 var compose = function compose() {
   for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
     args[_key3] = arguments[_key3];
@@ -14714,9 +14728,6 @@ var compose = function compose() {
     }, firstFn.apply(void 0, arguments));
   };
 };
-
-utils.compose = compose;
-
 var reverse = function reverse(arr) {
   if (Array.isArray(arr)) {
     return arr.reverse();
@@ -14725,9 +14736,6 @@ var reverse = function reverse(arr) {
 
   return arr.split('').reverse.join('');
 };
-
-utils.reverse = reverse;
-
 var memoize = function memoize(fn) {
   var lastArgs = null;
   var lastResult = null;
@@ -14748,27 +14756,11 @@ var memoize = function memoize(fn) {
   };
 };
 
-utils.memoize = memoize;
-
-var arithmetic = {};
-
-Object.defineProperty(arithmetic, "__esModule", {
-  value: true
-});
-arithmetic.default = void 0;
-
-var _decimal$1 = _interopRequireDefault$1(require$$0);
-
-var _utils$1 = utils;
-
-function _interopRequireDefault$1(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /**
  * @fileOverview 一些公用的运算方法
  * @author xile611
  * @date 2015-09-17
  */
-
 /**
  * 获取数值的位数
  * 其中绝对值属于区间[0.1, 1)， 得到的值为0
@@ -14778,13 +14770,14 @@ function _interopRequireDefault$1(obj) { return obj && obj.__esModule ? obj : {
  * @param  {Number} value 数值
  * @return {Integer} 位数
  */
+
 function getDigitCount(value) {
   var result;
 
   if (value === 0) {
     result = 1;
   } else {
-    result = Math.floor(new _decimal$1.default(value).abs().log(10).toNumber()) + 1;
+    result = Math.floor(new Decimal$1(value).abs().log(10).toNumber()) + 1;
   }
 
   return result;
@@ -14801,7 +14794,7 @@ function getDigitCount(value) {
 
 
 function rangeStep(start, end, step) {
-  var num = new _decimal$1.default(start);
+  var num = new Decimal$1(start);
   var i = 0;
   var result = []; // magic number to prevent infinite loop
 
@@ -14823,7 +14816,7 @@ function rangeStep(start, end, step) {
  */
 
 
-var interpolateNumber$1 = (0, _utils$1.curry)(function (a, b, t) {
+var interpolateNumber$1 = curry(function (a, b, t) {
   var newA = +a;
   var newB = +b;
   return newA + t * (newB - newA);
@@ -14837,7 +14830,7 @@ var interpolateNumber$1 = (0, _utils$1.curry)(function (a, b, t) {
  * @return {Number}   当x在 a ~ b这个范围内时，返回值属于[0, 1]
  */
 
-var uninterpolateNumber = (0, _utils$1.curry)(function (a, b, x) {
+var uninterpolateNumber = curry(function (a, b, x) {
   var diff = b - +a;
   diff = diff || Infinity;
   return (x - a) / diff;
@@ -14852,49 +14845,38 @@ var uninterpolateNumber = (0, _utils$1.curry)(function (a, b, x) {
  * 当x不在 a ~ b这个区间时，会截断到 a ~ b 这个区间
  */
 
-var uninterpolateTruncation = (0, _utils$1.curry)(function (a, b, x) {
+var uninterpolateTruncation = curry(function (a, b, x) {
   var diff = b - +a;
   diff = diff || Infinity;
   return Math.max(0, Math.min(1, (x - a) / diff));
 });
-var _default = {
+var Arithmetic = {
   rangeStep: rangeStep,
   getDigitCount: getDigitCount,
   interpolateNumber: interpolateNumber$1,
   uninterpolateNumber: uninterpolateNumber,
   uninterpolateTruncation: uninterpolateTruncation
 };
-arithmetic.default = _default;
-
-Object.defineProperty(getNiceTickValues$1, "__esModule", {
-  value: true
-});
-getNiceTickValues$1.getTickValuesFixedDomain = getNiceTickValues$1.getTickValues = getNiceTickValues$1.getNiceTickValues = void 0;
-
-var _decimal = _interopRequireDefault(require$$0);
 
-var _utils = utils;
+function _toConsumableArray$4(arr) { return _arrayWithoutHoles$4(arr) || _iterableToArray$4(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread$4(); }
 
-var _arithmetic = _interopRequireDefault(arithmetic);
+function _nonIterableSpread$4() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _iterableToArray$4(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
 
-function _toConsumableArray$4(arr) { return _arrayWithoutHoles$4(arr) || _iterableToArray$4(arr) || _nonIterableSpread$4(); }
+function _arrayWithoutHoles$4(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 
-function _nonIterableSpread$4() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
+function _slicedToArray$2(arr, i) { return _arrayWithHoles$2(arr) || _iterableToArrayLimit$2(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest$2(); }
 
-function _iterableToArray$4(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
+function _nonIterableRest$2() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-function _arrayWithoutHoles$4(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
-function _slicedToArray$2(arr, i) { return _arrayWithHoles$2(arr) || _iterableToArrayLimit$2(arr, i) || _nonIterableRest$2(); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function _nonIterableRest$2() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
-
-function _iterableToArrayLimit$2(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _iterableToArrayLimit$2(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
 function _arrayWithHoles$2(arr) { if (Array.isArray(arr)) return arr; }
-
 /**
  * Calculate a interval of a minimum value and a maximum value
  *
@@ -14902,6 +14884,7 @@ function _arrayWithHoles$2(arr) { if (Array.isArray(arr)) return arr; }
  * @param  {Number} max       The maximum value
  * @return {Array} An interval
  */
+
 function getValidInterval(_ref) {
   var _ref2 = _slicedToArray$2(_ref, 2),
       min = _ref2[0],
@@ -14930,20 +14913,19 @@ function getValidInterval(_ref) {
 
 function getFormatStep(roughStep, allowDecimals, correctionFactor) {
   if (roughStep.lte(0)) {
-    return new _decimal.default(0);
+    return new Decimal$1(0);
   }
 
-  var digitCount = _arithmetic.default.getDigitCount(roughStep.toNumber()); // The ratio between the rough step and the smallest number which has a bigger
+  var digitCount = Arithmetic.getDigitCount(roughStep.toNumber()); // The ratio between the rough step and the smallest number which has a bigger
   // order of magnitudes than the rough step
 
-
-  var digitCountValue = new _decimal.default(10).pow(digitCount);
+  var digitCountValue = new Decimal$1(10).pow(digitCount);
   var stepRatio = roughStep.div(digitCountValue); // When an integer and a float multiplied, the accuracy of result may be wrong
 
   var stepRatioScale = digitCount !== 1 ? 0.05 : 0.1;
-  var amendStepRatio = new _decimal.default(Math.ceil(stepRatio.div(stepRatioScale).toNumber())).add(correctionFactor).mul(stepRatioScale);
+  var amendStepRatio = new Decimal$1(Math.ceil(stepRatio.div(stepRatioScale).toNumber())).add(correctionFactor).mul(stepRatioScale);
   var formatStep = amendStepRatio.mul(digitCountValue);
-  return allowDecimals ? formatStep : new _decimal.default(Math.ceil(formatStep));
+  return allowDecimals ? formatStep : new Decimal$1(Math.ceil(formatStep));
 }
 /**
  * calculate the ticks when the minimum value equals to the maximum value
@@ -14958,29 +14940,29 @@ function getFormatStep(roughStep, allowDecimals, correctionFactor) {
 function getTickOfSingleValue(value, tickCount, allowDecimals) {
   var step = 1; // calculate the middle value of ticks
 
-  var middle = new _decimal.default(value);
+  var middle = new Decimal$1(value);
 
   if (!middle.isint() && allowDecimals) {
     var absVal = Math.abs(value);
 
     if (absVal < 1) {
       // The step should be a float number when the difference is smaller than 1
-      step = new _decimal.default(10).pow(_arithmetic.default.getDigitCount(value) - 1);
-      middle = new _decimal.default(Math.floor(middle.div(step).toNumber())).mul(step);
+      step = new Decimal$1(10).pow(Arithmetic.getDigitCount(value) - 1);
+      middle = new Decimal$1(Math.floor(middle.div(step).toNumber())).mul(step);
     } else if (absVal > 1) {
       // Return the maximum integer which is smaller than 'value' when 'value' is greater than 1
-      middle = new _decimal.default(Math.floor(value));
+      middle = new Decimal$1(Math.floor(value));
     }
   } else if (value === 0) {
-    middle = new _decimal.default(Math.floor((tickCount - 1) / 2));
+    middle = new Decimal$1(Math.floor((tickCount - 1) / 2));
   } else if (!allowDecimals) {
-    middle = new _decimal.default(Math.floor(value));
+    middle = new Decimal$1(Math.floor(value));
   }
 
   var middleIndex = Math.floor((tickCount - 1) / 2);
-  var fn = (0, _utils.compose)((0, _utils.map)(function (n) {
-    return middle.add(new _decimal.default(n - middleIndex).mul(step)).toNumber();
-  }), _utils.range);
+  var fn = compose(map$3(function (n) {
+    return middle.add(new Decimal$1(n - middleIndex).mul(step)).toNumber();
+  }), range$2);
   return fn(0, tickCount);
 }
 /**
@@ -15001,28 +14983,28 @@ function calculateStep(min, max, tickCount, allowDecimals) {
   // dirty hack (for recharts' test)
   if (!Number.isFinite((max - min) / (tickCount - 1))) {
     return {
-      step: new _decimal.default(0),
-      tickMin: new _decimal.default(0),
-      tickMax: new _decimal.default(0)
+      step: new Decimal$1(0),
+      tickMin: new Decimal$1(0),
+      tickMax: new Decimal$1(0)
     };
   } // The step which is easy to understand between two ticks
 
 
-  var step = getFormatStep(new _decimal.default(max).sub(min).div(tickCount - 1), allowDecimals, correctionFactor); // A medial value of ticks
+  var step = getFormatStep(new Decimal$1(max).sub(min).div(tickCount - 1), allowDecimals, correctionFactor); // A medial value of ticks
 
   var middle; // When 0 is inside the interval, 0 should be a tick
 
   if (min <= 0 && max >= 0) {
-    middle = new _decimal.default(0);
+    middle = new Decimal$1(0);
   } else {
     // calculate the middle value
-    middle = new _decimal.default(min).add(max).div(2); // minus modulo value
+    middle = new Decimal$1(min).add(max).div(2); // minus modulo value
 
-    middle = middle.sub(new _decimal.default(middle).mod(step));
+    middle = middle.sub(new Decimal$1(middle).mod(step));
   }
 
   var belowCount = Math.ceil(middle.sub(min).div(step).toNumber());
-  var upCount = Math.ceil(new _decimal.default(max).sub(middle).div(step).toNumber());
+  var upCount = Math.ceil(new Decimal$1(max).sub(middle).div(step).toNumber());
   var scaleCount = belowCount + upCount + 1;
 
   if (scaleCount > tickCount) {
@@ -15038,8 +15020,8 @@ function calculateStep(min, max, tickCount, allowDecimals) {
 
   return {
     step: step,
-    tickMin: middle.sub(new _decimal.default(belowCount).mul(step)),
-    tickMax: middle.add(new _decimal.default(upCount).mul(step))
+    tickMin: middle.sub(new Decimal$1(belowCount).mul(step)),
+    tickMax: middle.add(new Decimal$1(upCount).mul(step))
   };
 }
 /**
@@ -15068,13 +15050,13 @@ function getNiceTickValuesFn(_ref3) {
       cormax = _getValidInterval2[1];
 
   if (cormin === -Infinity || cormax === Infinity) {
-    var _values = cormax === Infinity ? [cormin].concat(_toConsumableArray$4((0, _utils.range)(0, tickCount - 1).map(function () {
+    var _values = cormax === Infinity ? [cormin].concat(_toConsumableArray$4(range$2(0, tickCount - 1).map(function () {
       return Infinity;
-    }))) : _toConsumableArray$4((0, _utils.range)(0, tickCount - 1).map(function () {
+    }))) : [].concat(_toConsumableArray$4(range$2(0, tickCount - 1).map(function () {
       return -Infinity;
-    })).concat([cormax]);
+    })), [cormax]);
 
-    return min > max ? (0, _utils.reverse)(_values) : _values;
+    return min > max ? reverse(_values) : _values;
   }
 
   if (cormin === cormax) {
@@ -15087,51 +15069,8 @@ function getNiceTickValuesFn(_ref3) {
       tickMin = _calculateStep.tickMin,
       tickMax = _calculateStep.tickMax;
 
-  var values = _arithmetic.default.rangeStep(tickMin, tickMax.add(new _decimal.default(0.1).mul(step)), step);
-
-  return min > max ? (0, _utils.reverse)(values) : values;
-}
-/**
- * Calculate the ticks of an interval, the count of ticks won't be guraranteed
- *
- * @param  {Number}  min, max      min: The minimum value, max: The maximum value
- * @param  {Integer} tickCount     The count of ticks
- * @param  {Boolean} allowDecimals Allow the ticks to be decimals or not
- * @return {Array}   ticks
- */
-
-
-function getTickValuesFn(_ref5) {
-  var _ref6 = _slicedToArray$2(_ref5, 2),
-      min = _ref6[0],
-      max = _ref6[1];
-
-  var tickCount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 6;
-  var allowDecimals = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-  // More than two ticks should be return
-  var count = Math.max(tickCount, 2);
-
-  var _getValidInterval3 = getValidInterval([min, max]),
-      _getValidInterval4 = _slicedToArray$2(_getValidInterval3, 2),
-      cormin = _getValidInterval4[0],
-      cormax = _getValidInterval4[1];
-
-  if (cormin === -Infinity || cormax === Infinity) {
-    return [min, max];
-  }
-
-  if (cormin === cormax) {
-    return getTickOfSingleValue(cormin, tickCount, allowDecimals);
-  }
-
-  var step = getFormatStep(new _decimal.default(cormax).sub(cormin).div(count - 1), allowDecimals, 0);
-  var fn = (0, _utils.compose)((0, _utils.map)(function (n) {
-    return new _decimal.default(cormin).add(new _decimal.default(n).mul(step)).toNumber();
-  }), _utils.range);
-  var values = fn(0, count).filter(function (entry) {
-    return entry >= cormin && entry <= cormax;
-  });
-  return min > max ? (0, _utils.reverse)(values) : values;
+  var values = Arithmetic.rangeStep(tickMin, tickMax.add(new Decimal$1(0.1).mul(step)), step);
+  return min > max ? reverse(values) : values;
 }
 /**
  * Calculate the ticks of an interval, the count of ticks won't be guraranteed,
@@ -15166,46 +15105,13 @@ function getTickValuesFixedDomainFn(_ref7, tickCount) {
   }
 
   var count = Math.max(tickCount, 2);
-  var step = getFormatStep(new _decimal.default(cormax).sub(cormin).div(count - 1), allowDecimals, 0);
-
-  var values = _toConsumableArray$4(_arithmetic.default.rangeStep(new _decimal.default(cormin), new _decimal.default(cormax).sub(new _decimal.default(0.99).mul(step)), step)).concat([cormax]);
-
-  return min > max ? (0, _utils.reverse)(values) : values;
+  var step = getFormatStep(new Decimal$1(cormax).sub(cormin).div(count - 1), allowDecimals, 0);
+  var values = [].concat(_toConsumableArray$4(Arithmetic.rangeStep(new Decimal$1(cormin), new Decimal$1(cormax).sub(new Decimal$1(0.99).mul(step)), step)), [cormax]);
+  return min > max ? reverse(values) : values;
 }
 
-var getNiceTickValues = (0, _utils.memoize)(getNiceTickValuesFn);
-getNiceTickValues$1.getNiceTickValues = getNiceTickValues;
-var getTickValues = (0, _utils.memoize)(getTickValuesFn);
-getNiceTickValues$1.getTickValues = getTickValues;
-var getTickValuesFixedDomain = (0, _utils.memoize)(getTickValuesFixedDomainFn);
-getNiceTickValues$1.getTickValuesFixedDomain = getTickValuesFixedDomain;
-
-(function (exports) {
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "getTickValues", {
-  enumerable: true,
-  get: function get() {
-    return _getNiceTickValues.getTickValues;
-  }
-});
-Object.defineProperty(exports, "getNiceTickValues", {
-  enumerable: true,
-  get: function get() {
-    return _getNiceTickValues.getNiceTickValues;
-  }
-});
-Object.defineProperty(exports, "getTickValuesFixedDomain", {
-  enumerable: true,
-  get: function get() {
-    return _getNiceTickValues.getTickValuesFixedDomain;
-  }
-});
-
-var _getNiceTickValues = getNiceTickValues$1;
-}(lib));
+var getNiceTickValues = memoize(getNiceTickValuesFn);
+var getTickValuesFixedDomain = memoize(getTickValuesFixedDomainFn);
 
 function ascending$1(a, b) {
   return a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
@@ -19611,7 +19517,7 @@ var getTicksOfScale = function getTicksOfScale(scale, opts) {
   if (tickCount && type === 'number' && originalDomain && (originalDomain[0] === 'auto' || originalDomain[1] === 'auto')) {
     // Calculate the ticks by the number of grid when the axis is a number axis
     var domain = scale.domain();
-    var tickValues = lib.getNiceTickValues(domain, tickCount, allowDecimals);
+    var tickValues = getNiceTickValues(domain, tickCount, allowDecimals);
     scale.domain(calculateDomainOfTicks(tickValues, type));
     return {
       niceTicks: tickValues
@@ -19621,7 +19527,7 @@ var getTicksOfScale = function getTicksOfScale(scale, opts) {
   if (tickCount && type === 'number') {
     var _domain = scale.domain();
 
-    var _tickValues = lib.getTickValuesFixedDomain(_domain, tickCount, allowDecimals);
+    var _tickValues = getTickValuesFixedDomain(_domain, tickCount, allowDecimals);
 
     return {
       niceTicks: _tickValues
@@ -27121,128 +27027,6 @@ var RechartsBarChart = generateCategoricalChart({
   formatAxisMap: formatAxisMap
 });
 
-var fontFamily = "Source Sans Pro,Helvetica,Arial,sans-serif";
-/**
- * Creates a percentage axis tick on the X axis with proper styling.
- * Can be passed to tick in the XAxis Recharts component within SpsBarChart.
- * @param payload - Payload containing value to be displayed, provided by Recharts.
- * @param x - X value for placement on the SVG, provided by Recharts.
- * @param y - Y value for placement on the SVG, provided by Recharts.
- */
-var PercentXAxisTick = function (_a) {
-    var payload = _a.payload, x = _a.x, y = _a.y;
-    return (React__namespace.createElement(Text, { verticalAnchor: "start", width: 30, height: 30, x: x, y: y, stroke: "none", textAnchor: "middle", style: {
-            fill: dsColors.colors.gray500,
-            fontFamily: fontFamily,
-            fontWeight: 400,
-        } }, payload.value.toString() + "%"));
-};
-/**
- * Creates axis tick on the X axis with proper styling.
- * Can be passed to tick in the XAxis Recharts component within SpsBarChart.
- * Is the default X Axis tick in SpsBarChart.
- * @param payload - Payload containing value to be displayed, provided by Recharts.
- * @param x - X value for placement on the SVG, provided by Recharts.
- * @param y - Y value for placement on the SVG, provided by Recharts.
- */
-var SpsDefaultXAxisTick = function (_a) {
-    var payload = _a.payload, x = _a.x, y = _a.y;
-    return (React__namespace.createElement("text", { x: x, y: y, dy: "0.75rem", stroke: "none", textAnchor: "middle", style: {
-            fill: dsColors.colors.gray500,
-            fontFamily: fontFamily,
-            fontWeight: 400,
-        }, className: "default-x-axis" }, payload.value.toString()));
-};
-/**
- * Creates axis tick on the Y axis with proper styling.
- * Can be passed to tick in the YAxis Recharts component within SpsBarChart.
- * Is the default Y Axis tick in SpsBarChart
- * @param payload - Payload containing value to be displayed, provided by Recharts.
- * @param x - X value for placement on the SVG, provided by Recharts.
- * @param y - Y value for placement on the SVG, provided by Recharts.
- */
-var SpsDefaultYAxisTick = function (_a) {
-    var payload = _a.payload, x = _a.x, y = _a.y;
-    return (React__namespace.createElement("text", { x: x, y: y, stroke: "none", textAnchor: "end", style: {
-            fill: dsColors.colors.gray500,
-            fontFamily: fontFamily,
-            fontWeight: 500,
-        }, className: "default-y-axis" }, payload.value.toString()));
-};
-/**
- * The tooltip for each bar rendered with proper styling.
- * Is passed into the toolTipWrapper from the ToolTipHandler.
- * Is the default customTooltip in SpsBarChart
- * @param descriptions - Array containing any toolTip content wanted.
- *                       Each entry is a new line.
- * @param label - Title of the toolTip, comes from the label provided in the ChartData.
- * @param width - Calculated width of the toolTip for positioning of the caret.
- */
-var SpsDefaultChartTooltip = function (_a) {
-    var descriptions = _a.descriptions, label = _a.label, width = _a.width;
-    return (React__namespace.createElement("div", { style: {
-            backgroundColor: dsColors.colors.gray600,
-            color: dsColors.colors.white,
-            fontSize: "0.875rem",
-            width: "auto",
-            height: "auto",
-            padding: "1.25rem",
-            borderRadius: ".1875rem",
-            whiteSpace: "normal",
-        } },
-        React__namespace.createElement("span", { className: "sps-tooltip__title d-block" }, label),
-        descriptions &&
-            descriptions.map(function (data, index) {
-                return (React__namespace.createElement("span", { key: index, className: "sps-tooltip__body d-block" }, data));
-            }),
-        React__namespace.createElement("span", { className: "sps-tooltip__caret", style: { bottom: "-0.313rem", left: width / 2 - 5 } })));
-};
-/**
- * Wraps the toolTip in a foreign object so HTML elements can be displayed and
- * positioned within the SVG. Calculates the width of the toolTip for positioning
- * relative to the corresponding bar.
- * @param x - X value of the corresponding bar.
- * @param barWidth - Width of corresponding bar, in px.
- * @param y - Y value of the corresponding bar.
- * @param isHorizontalBarChart - Whether or not the toolTip position should
- *                              be calculated for a horizontal graph.
- * @param customToolTip - Custom Tooltip to be wrapped and rendered.
- * @param chartData - Data to be provided to the toolTip
- */
-var ToolTipWrapper = function (_a) {
-    var x = _a.x, barWidth = _a.barWidth, y = _a.y, isHorizontalBarChart = _a.isHorizontalBarChart, customToolTip = _a.customToolTip, chartData = _a.chartData;
-    var toolTip = React.useRef(null);
-    var _b = __read(React.useState(0), 2), toolTipWidth = _b[0], setToolTipWidth = _b[1];
-    React.useEffect(function () {
-        var width = toolTip.current ? toolTip.current.offsetWidth : 0;
-        setToolTipWidth(width);
-    }, [toolTip.current]);
-    if (isHorizontalBarChart) {
-        return (React__namespace.createElement("g", null,
-            React__namespace.createElement("foreignObject", { height: 300, width: 300, x: x + barWidth - toolTipWidth / 2, y: y - 300, textAnchor: "middle", style: { position: "relative" } },
-                React__namespace.createElement("div", { style: {
-                        position: "absolute",
-                        bottom: "0.625rem",
-                    }, ref: toolTip }, React__namespace.cloneElement(customToolTip, {
-                    descriptions: chartData.descriptions,
-                    label: chartData.label,
-                    width: toolTipWidth,
-                })))));
-    }
-    else {
-        return (React__namespace.createElement("g", null,
-            React__namespace.createElement("foreignObject", { height: 300, width: 300, x: x + barWidth / 2 - toolTipWidth / 2, y: y - 300, textAnchor: "middle", style: { position: "relative" } },
-                React__namespace.createElement("div", { style: {
-                        position: "absolute",
-                        bottom: "0.625rem",
-                    }, ref: toolTip }, React__namespace.cloneElement(customToolTip, {
-                    descriptions: chartData.descriptions,
-                    label: chartData.label,
-                    width: toolTipWidth,
-                })))));
-    }
-};
-
 var noop = {value: function() {}};
 
 function dispatch() {
@@ -29152,6 +28936,124 @@ function selection_transition(name) {
 selection.prototype.interrupt = selection_interrupt;
 selection.prototype.transition = selection_transition;
 
+var fontFamily = 'Source Sans Pro,Helvetica,Arial,sans-serif';
+/**
+ * Creates a percentage axis tick on the X axis with proper styling.
+ * Can be passed to tick in the XAxis Recharts component within SpsBarChart.
+ * @param payload - Payload containing value to be displayed, provided by Recharts.
+ * @param x - X value for placement on the SVG, provided by Recharts.
+ * @param y - Y value for placement on the SVG, provided by Recharts.
+ */
+var PercentXAxisTick = function (_a) {
+    var payload = _a.payload, x = _a.x, y = _a.y;
+    return (React__namespace.createElement(Text, { verticalAnchor: "start", width: 30, height: 30, x: x, y: y, stroke: "none", textAnchor: "middle", style: {
+            fill: dsColors.colors.gray500,
+            fontFamily: fontFamily,
+            fontWeight: 400,
+        } }, payload.value.toString() + "%"));
+};
+/**
+ * Creates axis tick on the X axis with proper styling.
+ * Can be passed to tick in the XAxis Recharts component within SpsBarChart.
+ * Is the default X Axis tick in SpsBarChart.
+ * @param payload - Payload containing value to be displayed, provided by Recharts.
+ * @param x - X value for placement on the SVG, provided by Recharts.
+ * @param y - Y value for placement on the SVG, provided by Recharts.
+ */
+var SpsDefaultXAxisTick = function (_a) {
+    var payload = _a.payload, x = _a.x, y = _a.y;
+    return (React__namespace.createElement("text", { x: x, y: y, dy: "0.75rem", stroke: "none", textAnchor: "middle", style: {
+            fill: dsColors.colors.gray500,
+            fontFamily: fontFamily,
+            fontWeight: 400,
+        }, className: "default-x-axis" }, payload.value.toString()));
+};
+/**
+ * Creates axis tick on the Y axis with proper styling.
+ * Can be passed to tick in the YAxis Recharts component within SpsBarChart.
+ * Is the default Y Axis tick in SpsBarChart
+ * @param payload - Payload containing value to be displayed, provided by Recharts.
+ * @param x - X value for placement on the SVG, provided by Recharts.
+ * @param y - Y value for placement on the SVG, provided by Recharts.
+ */
+var SpsDefaultYAxisTick = function (_a) {
+    var payload = _a.payload, x = _a.x, y = _a.y;
+    return (React__namespace.createElement("text", { x: x, y: y, stroke: "none", textAnchor: "end", style: {
+            fill: dsColors.colors.gray500,
+            fontFamily: fontFamily,
+            fontWeight: 500,
+        }, className: "default-y-axis" }, payload.value.toString()));
+};
+/**
+ * The tooltip for each bar rendered with proper styling.
+ * Is passed into the toolTipWrapper from the ToolTipHandler.
+ * Is the default customTooltip in SpsBarChart
+ * @param descriptions - Array containing any toolTip content wanted.
+ *                       Each entry is a new line.
+ * @param label - Title of the toolTip, comes from the label provided in the ChartData.
+ * @param width - Calculated width of the toolTip for positioning of the caret.
+ */
+var SpsDefaultChartTooltip = function (_a) {
+    var descriptions = _a.descriptions, label = _a.label, width = _a.width;
+    return (React__namespace.createElement("div", { style: {
+            backgroundColor: dsColors.colors.gray600,
+            color: dsColors.colors.white,
+            fontSize: '0.875rem',
+            width: 'auto',
+            height: 'auto',
+            padding: '1.25rem',
+            borderRadius: '.1875rem',
+            whiteSpace: 'normal',
+        } },
+        React__namespace.createElement("span", { className: "sps-tooltip__title d-block" }, label),
+        descriptions
+            && descriptions.map(function (data, index) { return (React__namespace.createElement("span", { key: index, className: "sps-tooltip__body d-block" }, data)); }),
+        React__namespace.createElement("span", { className: "sps-tooltip__caret", style: { bottom: '-0.313rem', left: width / 2 - 5 } })));
+};
+/**
+ * Wraps the toolTip in a foreign object so HTML elements can be displayed and
+ * positioned within the SVG. Calculates the width of the toolTip for positioning
+ * relative to the corresponding bar.
+ * @param x - X value of the corresponding bar.
+ * @param barWidth - Width of corresponding bar, in px.
+ * @param y - Y value of the corresponding bar.
+ * @param isHorizontalBarChart - Whether or not the toolTip position should
+ *                              be calculated for a horizontal graph.
+ * @param customToolTip - Custom Tooltip to be wrapped and rendered.
+ * @param chartData - Data to be provided to the toolTip
+ */
+var ToolTipWrapper = function (_a) {
+    var x = _a.x, barWidth = _a.barWidth, y = _a.y, isHorizontalBarChart = _a.isHorizontalBarChart, customToolTip = _a.customToolTip, chartData = _a.chartData;
+    var toolTip = React.useRef(null);
+    var _b = __read(React.useState(0), 2), toolTipWidth = _b[0], setToolTipWidth = _b[1];
+    React.useEffect(function () {
+        var width = toolTip.current ? toolTip.current.offsetWidth : 0;
+        setToolTipWidth(width);
+    }, [toolTip.current]);
+    if (isHorizontalBarChart) {
+        return (React__namespace.createElement("g", null,
+            React__namespace.createElement("foreignObject", { height: 300, width: 300, x: x + barWidth - toolTipWidth / 2, y: y - 300, textAnchor: "middle", style: { position: 'relative' } },
+                React__namespace.createElement("div", { style: {
+                        position: 'absolute',
+                        bottom: '0.625rem',
+                    }, ref: toolTip }, React__namespace.cloneElement(customToolTip, {
+                    descriptions: chartData.descriptions,
+                    label: chartData.label,
+                    width: toolTipWidth,
+                })))));
+    }
+    return (React__namespace.createElement("g", null,
+        React__namespace.createElement("foreignObject", { height: 300, width: 300, x: x + barWidth / 2 - toolTipWidth / 2, y: y - 300, textAnchor: "middle", style: { position: 'relative' } },
+            React__namespace.createElement("div", { style: {
+                    position: 'absolute',
+                    bottom: '0.625rem',
+                }, ref: toolTip }, React__namespace.cloneElement(customToolTip, {
+                descriptions: chartData.descriptions,
+                label: chartData.label,
+                width: toolTipWidth,
+            })))));
+};
+
 var defaultLineHeight = 1.1; // ems,
 var defaultDY = 0.275; // ems
 var twoLinesDY = defaultDY * -1;
@@ -29169,39 +29071,41 @@ var wrapText = function (textGroup, width, isYAxis) {
     textGroup.each(function () {
         var text = select(this);
         var words = text.text().split(/\s+/).reverse();
-        var word, line = [], lineNumber = 0;
+        var word;
+        var line = [];
+        var lineNumber = 0;
         var lineNumberLimit = isYAxis ? 2 : 3;
         var lineHeight = defaultLineHeight;
-        var x = text.attr("x") ? text.attr("x") : 0;
-        var y = text.attr("y") ? text.attr("y") : 0;
-        var dy = parseFloat(text.attr("dy")) || defaultDY;
+        var x = text.attr('x') ? text.attr('x') : 0;
+        var y = text.attr('y') ? text.attr('y') : 0;
+        var dy = parseFloat(text.attr('dy')) || defaultDY;
         var tspan = text
             .text(null)
-            .append("tspan")
-            .attr("x", x)
-            .attr("y", y)
-            .attr("dy", dy + "em")
-            .attr("anchor", isYAxis ? "end" : "middle");
+            .append('tspan')
+            .attr('x', x)
+            .attr('y', y)
+            .attr('dy', dy + "em")
+            .attr('anchor', isYAxis ? 'end' : 'middle');
         while ((word = words.pop())) {
             line.push(word);
-            tspan.text(line.join(" "));
-            if (tspan &&
-                tspan.node().getBoundingClientRect() &&
-                tspan.node().getBoundingClientRect().width > width &&
-                line.length > 1) {
+            tspan.text(line.join(' '));
+            if (tspan
+                && tspan.node().getBoundingClientRect()
+                && tspan.node().getBoundingClientRect().width > width
+                && line.length > 1) {
                 line.pop();
                 if (lineNumber >= lineNumberLimit) {
-                    tspan.text(line.join(" ") + "...");
+                    tspan.text(line.join(' ') + "...");
                     break;
                 }
-                tspan.text(line.join(" "));
+                tspan.text(line.join(' '));
                 line = [word];
                 tspan = text
-                    .append("tspan")
-                    .attr("x", x)
-                    .attr("y", y)
-                    .attr("dy", (++lineNumber * lineHeight + dy).toFixed(3) + "em")
-                    .attr("anchor", isYAxis ? "end" : "middle")
+                    .append('tspan')
+                    .attr('x', x)
+                    .attr('y', y)
+                    .attr('dy', (++lineNumber * lineHeight + dy).toFixed(3) + "em")
+                    .attr('anchor', isYAxis ? 'end' : 'middle')
                     .text(lineNumber === lineNumberLimit && words.length > 0 ? word + "..." : word);
             }
         }
@@ -29219,11 +29123,9 @@ var adjustAxisDY = function (textGroup, textHeight) {
         var height = text.node().getBoundingClientRect && text.node().getBoundingClientRect().height;
         var startDY = height > textHeight * 3 ? threeLinesDY : twoLinesDY;
         if (height > textHeight * 2) {
-            text.selectAll("tspan").attr("dy", function (d, i) {
-                return i === 0
-                    ? startDY + "em"
-                    : (startDY + i * defaultLineHeight).toFixed(3) + "em";
-            });
+            text.selectAll('tspan').attr('dy', function (d, i) { return (i === 0
+                ? startDY + "em"
+                : (startDY + i * defaultLineHeight).toFixed(3) + "em"); });
         }
     });
 };
@@ -29238,78 +29140,78 @@ var adjustAxisDY = function (textGroup, textHeight) {
  *                      gradients if multiple charts are rendered on a single page
  */
 var gradientCalculator = function (defs, data, isHorizontal, fillColor, identifier) {
-    var max = Math.max.apply(Math, __spread(data.map(function (a) { return a.value; })));
+    var max = Math.max.apply(Math, __spreadArray([], __read(data.map(function (a) { return a.value; }))));
     data.forEach(function (element, index) {
         var valueDividedByMax = isNaN(element.value / max) ? 0 : element.value / max;
         if (isHorizontal) {
             var linearGradient = defs
-                .append("linearGradient")
-                .attr("id", "gradient-" + identifier + "-" + index);
+                .append('linearGradient')
+                .attr('id', "gradient-" + identifier + "-" + index);
             linearGradient
-                .append("stop")
-                .attr("stop-color", fillColor)
-                .attr("offset", "0%")
-                .attr("stop-opacity", 0.5);
+                .append('stop')
+                .attr('stop-color', fillColor)
+                .attr('offset', '0%')
+                .attr('stop-opacity', 0.5);
             linearGradient
-                .append("stop")
-                .attr("stop-color", fillColor)
-                .attr("offset", "100%")
-                .attr("stop-opacity", Math.max(0.5, valueDividedByMax));
+                .append('stop')
+                .attr('stop-color', fillColor)
+                .attr('offset', '100%')
+                .attr('stop-opacity', Math.max(0.5, valueDividedByMax));
         }
         else {
             var linearGradient = defs
-                .append("linearGradient")
-                .attr("id", "gradient-" + identifier + "-" + index)
-                .attr("gradientTransform", "rotate(90)");
+                .append('linearGradient')
+                .attr('id', "gradient-" + identifier + "-" + index)
+                .attr('gradientTransform', 'rotate(90)');
             linearGradient
-                .append("stop")
-                .attr("stop-color", fillColor)
-                .attr("offset", "0%")
-                .attr("stop-opacity", Math.max(0.5, valueDividedByMax));
+                .append('stop')
+                .attr('stop-color', fillColor)
+                .attr('offset', '0%')
+                .attr('stop-opacity', Math.max(0.5, valueDividedByMax));
             linearGradient
-                .append("stop")
-                .attr("stop-color", fillColor)
-                .attr("offset", Math.max(50, valueDividedByMax * 100) + "%")
-                .attr("stop-opacity", 0.5);
+                .append('stop')
+                .attr('stop-color', fillColor)
+                .attr('offset', Math.max(50, valueDividedByMax * 100) + "%")
+                .attr('stop-opacity', 0.5);
             linearGradient
-                .append("stop")
-                .attr("stop-color", fillColor)
-                .attr("offset", "100%")
-                .attr("stop-opacity", 0.5);
+                .append('stop')
+                .attr('stop-color', fillColor)
+                .attr('offset', '100%')
+                .attr('stop-opacity', 0.5);
         }
     });
 };
 
 var SpsBarChart = function (_a) {
-    var xAxis = _a.xAxis, yAxis = _a.yAxis, chartData = _a.chartData, chartHeight = _a.chartHeight, identifier = _a.identifier, chartWidth = _a.chartWidth, _b = _a.isHorizontalBarChart, isHorizontalBarChart = _b === void 0 ? false : _b, _c = _a.customXAxis, customXAxis = _c === void 0 ? React__namespace.createElement(SpsDefaultXAxisTick, null) : _c, _d = _a.customYAxis, customYAxis = _d === void 0 ? React__namespace.createElement(SpsDefaultYAxisTick, null) : _d, _e = _a.barFillColor, barFillColor = _e === void 0 ? dsColors.colors.blue200 : _e, _f = _a.customToolTip, customToolTip = _f === void 0 ? React__namespace.createElement(SpsDefaultChartTooltip, null) : _f, _g = _a.barSize, barSize = _g === void 0 ? 40 : _g, _h = _a.barCategoryGap, barCategoryGap = _h === void 0 ? 20 : _h, _j = _a.margins, margins = _j === void 0 ? { bottom: 30, left: 0, top: 40, right: 10 } : _j, _k = _a.barHoverFill, barHoverFill = _k === void 0 ? dsColors.colors.blue300 : _k;
+    var xAxis = _a.xAxis, yAxis = _a.yAxis, chartData = _a.chartData, chartHeight = _a.chartHeight, identifier = _a.identifier, chartWidth = _a.chartWidth, _b = _a.isHorizontalBarChart, isHorizontalBarChart = _b === void 0 ? false : _b, _c = _a.customXAxis, customXAxis = _c === void 0 ? React__namespace.createElement(SpsDefaultXAxisTick, null) : _c, _d = _a.customYAxis, customYAxis = _d === void 0 ? React__namespace.createElement(SpsDefaultYAxisTick, null) : _d, _e = _a.barFillColor, barFillColor = _e === void 0 ? dsColors.colors.blue200 : _e, _f = _a.customToolTip, customToolTip = _f === void 0 ? React__namespace.createElement(SpsDefaultChartTooltip, null) : _f, _g = _a.barSize, barSize = _g === void 0 ? 40 : _g, _h = _a.barCategoryGap, barCategoryGap = _h === void 0 ? 20 : _h, _j = _a.margins, margins = _j === void 0 ? {
+        bottom: 30, left: 0, top: 40, right: 10,
+    } : _j, _k = _a.barHoverFill, barHoverFill = _k === void 0 ? dsColors.colors.blue300 : _k;
     var _l = __read(React.useState(null), 2), isToolTipActive = _l[0], setIsToolTipActive = _l[1];
     var defaultTextHeight = 12; // px
     var leftMarginSpacing = 20; // px
     React.useEffect(function () {
         select("#" + identifier)
-            .select(".recharts-surface")
-            .selectAll(".default-y-axis")
+            .select('.recharts-surface')
+            .selectAll('.default-y-axis')
             .call(wrapText, margins.left + leftMarginSpacing, isHorizontalBarChart);
         select("#" + identifier)
-            .select(".recharts-surface")
-            .selectAll(".default-y-axis")
+            .select('.recharts-surface')
+            .selectAll('.default-y-axis')
             .call(adjustAxisDY, defaultTextHeight);
         select("#" + identifier)
-            .select(".recharts-surface")
-            .selectAll(".default-x-axis")
+            .select('.recharts-surface')
+            .selectAll('.default-x-axis')
             .call(wrapText, barSize, isHorizontalBarChart);
         select("#" + identifier)
-            .select(".recharts-surface")
-            .append("defs")
+            .select('.recharts-surface')
+            .append('defs')
             .call(gradientCalculator, chartData, isHorizontalBarChart, barFillColor, identifier);
     }, [chartData, barFillColor, isHorizontalBarChart, barSize, margins.left, identifier]);
     /**
      * Grabs the generated gradient for the bar from the SVG defs.
      * @param index - Index of bar, used to grab correct gradient
      */
-    var getGradient = function (index) {
-        return "url(#gradient-" + identifier + "-" + index + ")";
-    };
+    var getGradient = function (index) { return "url(#gradient-" + identifier + "-" + index + ")"; };
     /**
      * Handler to render the toolTipWrapper on mouse over of corresponding bar.
      * @param index - Index of bar, used to identify active bar and provide
@@ -29326,39 +29228,45 @@ var SpsBarChart = function (_a) {
     };
     return (React__namespace.createElement("div", { className: "sps-chart" },
         React__namespace.createElement("div", { id: identifier },
-            React__namespace.createElement(RechartsBarChart, { data: chartData, layout: isHorizontalBarChart ? "vertical" : "horizontal", barSize: barSize, barCategoryGap: barCategoryGap, margin: margins, height: chartHeight, width: chartWidth },
+            React__namespace.createElement(RechartsBarChart, { data: chartData, layout: isHorizontalBarChart ? 'vertical' : 'horizontal', barSize: barSize, barCategoryGap: barCategoryGap, margin: margins, height: chartHeight, width: chartWidth },
                 React__namespace.createElement(CartesianGrid, { vertical: isHorizontalBarChart, horizontal: !isHorizontalBarChart, stroke: dsColors.colors.gray300 }),
-                React__namespace.createElement(XAxis, { dataKey: isHorizontalBarChart ? "value" : "label", type: xAxis.type, domain: xAxis.domain, ticks: xAxis.tickValues, tickCount: xAxis.tickCount, tick: customXAxis, allowDataOverflow: false, interval: 0, tickLine: false, stroke: dsColors.colors.gray300 }),
-                React__namespace.createElement(YAxis, { dataKey: isHorizontalBarChart ? "label" : "value", type: yAxis.type, domain: yAxis.domain, ticks: yAxis.tickValues, tickCount: yAxis.tickCount, tick: customYAxis, allowDataOverflow: false, interval: 0, tickLine: false, stroke: dsColors.colors.gray300 }),
+                React__namespace.createElement(XAxis, { dataKey: isHorizontalBarChart ? 'value' : 'label', type: xAxis.type, domain: xAxis.domain, ticks: xAxis.tickValues, tickCount: xAxis.tickCount, tick: customXAxis, allowDataOverflow: false, interval: 0, tickLine: false, stroke: dsColors.colors.gray300 }),
+                React__namespace.createElement(YAxis, { dataKey: isHorizontalBarChart ? 'label' : 'value', type: yAxis.type, domain: yAxis.domain, ticks: yAxis.tickValues, tickCount: yAxis.tickCount, tick: customYAxis, allowDataOverflow: false, interval: 0, tickLine: false, stroke: dsColors.colors.gray300 }),
                 React__namespace.createElement(Bar, { dataKey: "value", radius: isHorizontalBarChart ? [0, 4, 4, 0] : [4, 4, 0, 0], background: isHorizontalBarChart && {
                         fill: dsColors.colors.gray200,
-                        opacity: ".6",
+                        opacity: '.6',
                     }, onMouseEnter: function (props, index) {
                         setIsToolTipActive(index);
                     }, onMouseLeave: function () {
                         setIsToolTipActive(null);
                     } },
-                    chartData.map(function (entry, index) {
-                        return (React__namespace.createElement(Cell, { cursor: "pointer", key: "cell-" + index, fill: index === isToolTipActive
-                                ? barHoverFill
-                                : getGradient(index) }));
-                    }),
+                    chartData.map(function (entry, index) { return (React__namespace.createElement(Cell, { cursor: "pointer", key: "cell-" + index, fill: index === isToolTipActive
+                            ? barHoverFill
+                            : getGradient(index) })); }),
                     React__namespace.createElement(LabelList, { dataKey: "label", content: ToolTipHandler }))))));
 };
 
 var SpsBarChartExamples = {
     vertical: {
-        label: "Vertical",
-        description: utils$1.code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            <p>Vertical bar chart example.</p>\n        "], ["\n            <p>Vertical bar chart example.</p>\n        "]))),
+        label: 'Vertical',
+        description: utils.code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            <p>Vertical bar chart example.</p>\n        "], ["\n            <p>Vertical bar chart example.</p>\n        "]))),
         examples: {
             vertical: {
-                react: utils$1.code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                function DemoComponent() {\n                    const data = [{connections: 100, role: 'retailer', name: 'company 1'}, {connections: 150, role: 'retailer', name: 'company 2'}, {connections: 200, role: 'retailer', name: 'company 3'}, {connections: 220, role: 'retailer', name: 'company 4'}, {connections: 300, role: 'retailer', name: 'company 5'}]\n                    const chartData = data.map((retailer) => {\n                      return {\n                        label: retailer.name,\n                        value: parseInt(retailer.connections),\n                      }\n                    })\n                    return (\n                      <SpsBarChart\n                          chartData={chartData}\n                          xAxis=\"{ type: 'category' }\"\n                          yAxis=\"{\n                              type: 'number',\n                              domain: [0, 'auto'],\n                              tickCount: 8,\n                          }\"\n                          chartHeight={400}\n                          chartWidth={800}\n                          identifier=\"original-blue\"\n                      />\n\n                    )\n                  }\n                "], ["\n                function DemoComponent() {\n                    const data = [{connections: 100, role: 'retailer', name: 'company 1'}, {connections: 150, role: 'retailer', name: 'company 2'}, {connections: 200, role: 'retailer', name: 'company 3'}, {connections: 220, role: 'retailer', name: 'company 4'}, {connections: 300, role: 'retailer', name: 'company 5'}]\n                    const chartData = data.map((retailer) => {\n                      return {\n                        label: retailer.name,\n                        value: parseInt(retailer.connections),\n                      }\n                    })\n                    return (\n                      <SpsBarChart\n                          chartData={chartData}\n                          xAxis=\"{ type: 'category' }\"\n                          yAxis=\"{\n                              type: 'number',\n                              domain: [0, 'auto'],\n                              tickCount: 8,\n                          }\"\n                          chartHeight={400}\n                          chartWidth={800}\n                          identifier=\"original-blue\"\n                      />\n\n                    )\n                  }\n                "]))),
+                react: utils.code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                function DemoComponent() {\n                    const data = [{connections: 100, role: 'retailer', name: 'company 1'}, {connections: 150, role: 'retailer', name: 'company 2'}, {connections: 200, role: 'retailer', name: 'company 3'}, {connections: 220, role: 'retailer', name: 'company 4'}, {connections: 300, role: 'retailer', name: 'company 5'}]\n                    const chartData = data.map((retailer) => {\n                      return {\n                        label: retailer.name,\n                        value: parseInt(retailer.connections),\n                      }\n                    })\n                    return (\n                      <SpsBarChart\n                          chartData={chartData}\n                          xAxis=\"{ type: 'category' }\"\n                          yAxis=\"{\n                              type: 'number',\n                              domain: [0, 'auto'],\n                              tickCount: 8,\n                          }\"\n                          chartHeight={400}\n                          chartWidth={800}\n                          identifier=\"original-blue\"\n                      />\n\n                    )\n                  }\n                "], ["\n                function DemoComponent() {\n                    const data = [{connections: 100, role: 'retailer', name: 'company 1'}, {connections: 150, role: 'retailer', name: 'company 2'}, {connections: 200, role: 'retailer', name: 'company 3'}, {connections: 220, role: 'retailer', name: 'company 4'}, {connections: 300, role: 'retailer', name: 'company 5'}]\n                    const chartData = data.map((retailer) => {\n                      return {\n                        label: retailer.name,\n                        value: parseInt(retailer.connections),\n                      }\n                    })\n                    return (\n                      <SpsBarChart\n                          chartData={chartData}\n                          xAxis=\"{ type: 'category' }\"\n                          yAxis=\"{\n                              type: 'number',\n                              domain: [0, 'auto'],\n                              tickCount: 8,\n                          }\"\n                          chartHeight={400}\n                          chartWidth={800}\n                          identifier=\"original-blue\"\n                      />\n\n                    )\n                  }\n                "]))),
             },
         },
     },
 };
 var templateObject_1, templateObject_2;
 
+var MANIFEST = {
+    'Bar Chart': {
+        components: [SpsBarChart],
+        examples: SpsBarChartExamples,
+    },
+};
+
+exports.MANIFEST = MANIFEST;
 exports.PercentXAxisTick = PercentXAxisTick;
 exports.SpsBarChart = SpsBarChart;
 exports.SpsBarChartExamples = SpsBarChartExamples;