@spscommerce/ds-react-charts 4.29.2 → 4.32.0

package/lib/index.es.js

@@ -23,7 +23,7 @@ import * as DSColors from "@spscommerce/ds-colors";
 import { SpsTooltip } from "@spscommerce/ds-react";
 import { code } from "@spscommerce/utils";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
-var propTypes$2 = { exports: {} };
+var propTypes$3 = { exports: {} };
 var ReactPropTypesSecret$1 = "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";
 var ReactPropTypesSecret_1 = ReactPropTypesSecret$1;
 var ReactPropTypesSecret = ReactPropTypesSecret_1;
@@ -71,9 +71,9 @@ var factoryWithThrowingShims = function() {
   return ReactPropTypes;
 };
 {
-  propTypes$2.exports = factoryWithThrowingShims();
+  propTypes$3.exports = factoryWithThrowingShims();
 }
-var _pt = propTypes$2.exports;
+var _pt = propTypes$3.exports;
 var classnames = { exports: {} };
 /*!
   Copyright (c) 2018 Jed Watson.
@@ -85,8 +85,8 @@ var classnames = { exports: {} };
     var hasOwn = {}.hasOwnProperty;
     function classNames() {
       var classes = [];
-      for (var i = 0; i < arguments.length; i++) {
-        var arg = arguments[i];
+      for (var i2 = 0; i2 < arguments.length; i2++) {
+        var arg = arguments[i2];
         if (!arg)
           continue;
         var argType = typeof arg;
@@ -122,10 +122,10 @@ var classnames = { exports: {} };
   })();
 })(classnames);
 var cx = classnames.exports;
-function _extends$j() {
-  _extends$j = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+function _extends$k() {
+  _extends$k = Object.assign || function(target) {
+    for (var i2 = 1; i2 < arguments.length; i2++) {
+      var source = arguments[i2];
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
@@ -134,16 +134,16 @@ function _extends$j() {
     }
     return target;
   };
-  return _extends$j.apply(this, arguments);
+  return _extends$k.apply(this, arguments);
 }
-function _objectWithoutPropertiesLoose$f(source, excluded) {
+function _objectWithoutPropertiesLoose$g(source, excluded) {
   if (source == null)
     return {};
   var target = {};
   var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
+  var key, i2;
+  for (i2 = 0; i2 < sourceKeys.length; i2++) {
+    key = sourceKeys[i2];
     if (excluded.indexOf(key) >= 0)
       continue;
     target[key] = source[key];
@@ -151,8 +151,8 @@ function _objectWithoutPropertiesLoose$f(source, excluded) {
   return target;
 }
 function Group(_ref) {
-  var _ref$top = _ref.top, top = _ref$top === void 0 ? 0 : _ref$top, _ref$left = _ref.left, left = _ref$left === void 0 ? 0 : _ref$left, transform = _ref.transform, className = _ref.className, children = _ref.children, innerRef = _ref.innerRef, restProps = _objectWithoutPropertiesLoose$f(_ref, ["top", "left", "transform", "className", "children", "innerRef"]);
-  return /* @__PURE__ */ React__default.createElement("g", _extends$j({
+  var _ref$top = _ref.top, top = _ref$top === void 0 ? 0 : _ref$top, _ref$left = _ref.left, left = _ref$left === void 0 ? 0 : _ref$left, transform = _ref.transform, className = _ref.className, children = _ref.children, innerRef = _ref.innerRef, restProps = _objectWithoutPropertiesLoose$g(_ref, ["top", "left", "transform", "className", "children", "innerRef"]);
+  return /* @__PURE__ */ React__default.createElement("g", _extends$k({
     ref: innerRef,
     className: cx("visx-group", className),
     transform: transform || "translate(" + left + ", " + top + ")"
@@ -175,8 +175,8 @@ var slice = Array.prototype.slice;
 function stackOffsetNone(series, order) {
   if (!((n = series.length) > 1))
     return;
-  for (var i = 1, j, s0, s1 = series[order[0]], n, m = s1.length; i < n; ++i) {
-    s0 = s1, s1 = series[order[i]];
+  for (var i2 = 1, j, s0, s1 = series[order[0]], n, m = s1.length; i2 < n; ++i2) {
+    s0 = s1, s1 = series[order[i2]];
     for (j = 0; j < m; ++j) {
       s1[j][1] += s1[j][0] = isNaN(s0[j][1]) ? s0[j][0] : s0[j][1];
     }
@@ -194,16 +194,16 @@ function stackValue(d, key) {
 function d3stack() {
   var keys = constant$1([]), order = stackOrderNone, offset = stackOffsetNone, value = stackValue;
   function stack2(data) {
-    var kz = keys.apply(this, arguments), i, m = data.length, n = kz.length, sz = new Array(n), oz;
-    for (i = 0; i < n; ++i) {
-      for (var ki = kz[i], si = sz[i] = new Array(m), j = 0, sij; j < m; ++j) {
+    var kz = keys.apply(this, arguments), i2, m = data.length, n = kz.length, sz = new Array(n), oz;
+    for (i2 = 0; i2 < n; ++i2) {
+      for (var ki = kz[i2], si = sz[i2] = new Array(m), j = 0, sij; j < m; ++j) {
         si[j] = sij = [0, +value(data[j], ki, j, data)];
         sij.data = data[j];
       }
       si.key = ki;
     }
-    for (i = 0, oz = order(sz); i < n; ++i) {
-      sz[oz[i]].index = i;
+    for (i2 = 0, oz = order(sz); i2 < n; ++i2) {
+      sz[oz[i2]].index = i2;
     }
     offset(sz, oz);
     return sz;
@@ -225,21 +225,21 @@ function d3stack() {
 function stackOffsetExpand(series, order) {
   if (!((n = series.length) > 0))
     return;
-  for (var i, n, j = 0, m = series[0].length, y; j < m; ++j) {
-    for (y = i = 0; i < n; ++i)
-      y += series[i][j][1] || 0;
+  for (var i2, n, j = 0, m = series[0].length, y; j < m; ++j) {
+    for (y = i2 = 0; i2 < n; ++i2)
+      y += series[i2][j][1] || 0;
     if (y)
-      for (i = 0; i < n; ++i)
-        series[i][j][1] /= y;
+      for (i2 = 0; i2 < n; ++i2)
+        series[i2][j][1] /= y;
   }
   stackOffsetNone(series, order);
 }
 function stackOffsetDiverging(series, order) {
   if (!((n = series.length) > 0))
     return;
-  for (var i, j = 0, d, dy, yp, yn, n, m = series[order[0]].length; j < m; ++j) {
-    for (yp = yn = 0, i = 0; i < n; ++i) {
-      if ((dy = (d = series[order[i]][j])[1] - d[0]) > 0) {
+  for (var i2, j = 0, d, dy, yp, yn, n, m = series[order[0]].length; j < m; ++j) {
+    for (yp = yn = 0, i2 = 0; i2 < n; ++i2) {
+      if ((dy = (d = series[order[i2]][j])[1] - d[0]) > 0) {
         d[0] = yp, d[1] = yp += dy;
       } else if (dy < 0) {
         d[1] = yn, d[0] = yn += dy;
@@ -253,8 +253,8 @@ function stackOffsetSilhouette(series, order) {
   if (!((n = series.length) > 0))
     return;
   for (var j = 0, s0 = series[order[0]], n, m = s0.length; j < m; ++j) {
-    for (var i = 0, y = 0; i < n; ++i)
-      y += series[i][j][1] || 0;
+    for (var i2 = 0, y = 0; i2 < n; ++i2)
+      y += series[i2][j][1] || 0;
     s0[j][1] += s0[j][0] = -y / 2;
   }
   stackOffsetNone(series, order);
@@ -263,9 +263,9 @@ function stackOffsetWiggle(series, order) {
   if (!((n = series.length) > 0) || !((m = (s0 = series[order[0]]).length) > 0))
     return;
   for (var y = 0, j = 1, s0, m, n; j < m; ++j) {
-    for (var i = 0, s1 = 0, s2 = 0; i < n; ++i) {
-      var si = series[order[i]], sij0 = si[j][1] || 0, sij1 = si[j - 1][1] || 0, s3 = (sij0 - sij1) / 2;
-      for (var k = 0; k < i; ++k) {
+    for (var i2 = 0, s1 = 0, s2 = 0; i2 < n; ++i2) {
+      var si = series[order[i2]], sij0 = si[j][1] || 0, sij1 = si[j - 1][1] || 0, s3 = (sij0 - sij1) / 2;
+      for (var k = 0; k < i2; ++k) {
         var sk = series[order[k]], skj0 = sk[j][1] || 0, skj1 = sk[j - 1][1] || 0;
         s3 += skj0 - skj1;
       }
@@ -285,10 +285,10 @@ function appearance(series) {
   });
 }
 function peak(series) {
-  var i = -1, j = 0, n = series.length, vi, vj = -Infinity;
-  while (++i < n)
-    if ((vi = +series[i][1]) > vj)
-      vj = vi, j = i;
+  var i2 = -1, j = 0, n = series.length, vi, vj = -Infinity;
+  while (++i2 < n)
+    if ((vi = +series[i2][1]) > vj)
+      vj = vi, j = i2;
   return j;
 }
 function stackOrderAscending(series) {
@@ -298,9 +298,9 @@ function stackOrderAscending(series) {
   });
 }
 function sum(series) {
-  var s = 0, i = -1, n = series.length, v;
-  while (++i < n)
-    if (v = +series[i][1])
+  var s = 0, i2 = -1, n = series.length, v;
+  while (++i2 < n)
+    if (v = +series[i2][1])
       s += v;
   return s;
 }
@@ -308,9 +308,9 @@ function stackOrderDescending(series) {
   return stackOrderAscending(series).reverse();
 }
 function stackOrderInsideOut(series) {
-  var n = series.length, i, j, sums = series.map(sum), order = appearance(series), top = 0, bottom = 0, tops = [], bottoms = [];
-  for (i = 0; i < n; ++i) {
-    j = order[i];
+  var n = series.length, i2, j, sums = series.map(sum), order = appearance(series), top = 0, bottom = 0, tops = [], bottoms = [];
+  for (i2 = 0; i2 < n; ++i2) {
+    j = order[i2];
     if (top < bottom) {
       top += sums[j];
       tops.push(j);
@@ -350,11 +350,11 @@ var STACK_OFFSETS = {
 function stackOffset(offset) {
   return offset && STACK_OFFSETS[offset] || STACK_OFFSETS.none;
 }
-var _excluded$d = ["from", "to", "fill", "className", "innerRef"];
-function _extends$i() {
-  _extends$i = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+var _excluded$e = ["from", "to", "fill", "className", "innerRef"];
+function _extends$j() {
+  _extends$j = Object.assign || function(target) {
+    for (var i2 = 1; i2 < arguments.length; i2++) {
+      var source = arguments[i2];
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
@@ -363,16 +363,16 @@ function _extends$i() {
     }
     return target;
   };
-  return _extends$i.apply(this, arguments);
+  return _extends$j.apply(this, arguments);
 }
-function _objectWithoutPropertiesLoose$e(source, excluded) {
+function _objectWithoutPropertiesLoose$f(source, excluded) {
   if (source == null)
     return {};
   var target = {};
   var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
+  var key, i2;
+  for (i2 = 0; i2 < sourceKeys.length; i2++) {
+    key = sourceKeys[i2];
     if (excluded.indexOf(key) >= 0)
       continue;
     target[key] = source[key];
@@ -386,9 +386,9 @@ function Line$1(_ref) {
   } : _ref$from, _ref$to = _ref.to, to = _ref$to === void 0 ? {
     x: 1,
     y: 1
-  } : _ref$to, _ref$fill = _ref.fill, fill = _ref$fill === void 0 ? "transparent" : _ref$fill, className = _ref.className, innerRef = _ref.innerRef, restProps = _objectWithoutPropertiesLoose$e(_ref, _excluded$d);
+  } : _ref$to, _ref$fill = _ref.fill, fill = _ref$fill === void 0 ? "transparent" : _ref$fill, className = _ref.className, innerRef = _ref.innerRef, restProps = _objectWithoutPropertiesLoose$f(_ref, _excluded$e);
   var isRectilinear = from.x === to.x || from.y === to.y;
-  return /* @__PURE__ */ React__default.createElement("line", _extends$i({
+  return /* @__PURE__ */ React__default.createElement("line", _extends$j({
     ref: innerRef,
     className: cx("visx-line", className),
     x1: from.x,
@@ -399,11 +399,11 @@ function Line$1(_ref) {
     shapeRendering: isRectilinear ? "crispEdges" : "auto"
   }, restProps));
 }
-var _excluded$c = ["className", "innerRef"];
-function _extends$h() {
-  _extends$h = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+var _excluded$d = ["className", "innerRef"];
+function _extends$i() {
+  _extends$i = Object.assign || function(target) {
+    for (var i2 = 1; i2 < arguments.length; i2++) {
+      var source = arguments[i2];
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
@@ -412,16 +412,16 @@ function _extends$h() {
     }
     return target;
   };
-  return _extends$h.apply(this, arguments);
+  return _extends$i.apply(this, arguments);
 }
-function _objectWithoutPropertiesLoose$d(source, excluded) {
+function _objectWithoutPropertiesLoose$e(source, excluded) {
   if (source == null)
     return {};
   var target = {};
   var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
+  var key, i2;
+  for (i2 = 0; i2 < sourceKeys.length; i2++) {
+    key = sourceKeys[i2];
     if (excluded.indexOf(key) >= 0)
       continue;
     target[key] = source[key];
@@ -429,17 +429,17 @@ function _objectWithoutPropertiesLoose$d(source, excluded) {
   return target;
 }
 function Bar(_ref) {
-  var className = _ref.className, innerRef = _ref.innerRef, restProps = _objectWithoutPropertiesLoose$d(_ref, _excluded$c);
-  return /* @__PURE__ */ React__default.createElement("rect", _extends$h({
+  var className = _ref.className, innerRef = _ref.innerRef, restProps = _objectWithoutPropertiesLoose$e(_ref, _excluded$d);
+  return /* @__PURE__ */ React__default.createElement("rect", _extends$i({
     ref: innerRef,
     className: cx("visx-bar", className)
   }, restProps));
 }
-var _excluded$b = ["className", "innerRef", "x", "y", "width", "height", "radius", "all", "top", "bottom", "left", "right", "topLeft", "topRight", "bottomLeft", "bottomRight"];
-function _extends$g() {
-  _extends$g = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+var _excluded$c = ["className", "innerRef", "x", "y", "width", "height", "radius", "all", "top", "bottom", "left", "right", "topLeft", "topRight", "bottomLeft", "bottomRight"];
+function _extends$h() {
+  _extends$h = Object.assign || function(target) {
+    for (var i2 = 1; i2 < arguments.length; i2++) {
+      var source = arguments[i2];
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
@@ -448,16 +448,16 @@ function _extends$g() {
     }
     return target;
   };
-  return _extends$g.apply(this, arguments);
+  return _extends$h.apply(this, arguments);
 }
-function _objectWithoutPropertiesLoose$c(source, excluded) {
+function _objectWithoutPropertiesLoose$d(source, excluded) {
   if (source == null)
     return {};
   var target = {};
   var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
+  var key, i2;
+  for (i2 = 0; i2 < sourceKeys.length; i2++) {
+    key = sourceKeys[i2];
     if (excluded.indexOf(key) >= 0)
       continue;
     target[key] = source[key];
@@ -465,7 +465,7 @@ function _objectWithoutPropertiesLoose$c(source, excluded) {
   return target;
 }
 function BarRounded(_ref) {
-  var className = _ref.className, innerRef = _ref.innerRef, x = _ref.x, y = _ref.y, width = _ref.width, height = _ref.height, radius = _ref.radius, _ref$all = _ref.all, all = _ref$all === void 0 ? false : _ref$all, _ref$top = _ref.top, top = _ref$top === void 0 ? false : _ref$top, _ref$bottom = _ref.bottom, bottom = _ref$bottom === void 0 ? false : _ref$bottom, _ref$left = _ref.left, left = _ref$left === void 0 ? false : _ref$left, _ref$right = _ref.right, right = _ref$right === void 0 ? false : _ref$right, _ref$topLeft = _ref.topLeft, topLeft = _ref$topLeft === void 0 ? false : _ref$topLeft, _ref$topRight = _ref.topRight, topRight = _ref$topRight === void 0 ? false : _ref$topRight, _ref$bottomLeft = _ref.bottomLeft, bottomLeft = _ref$bottomLeft === void 0 ? false : _ref$bottomLeft, _ref$bottomRight = _ref.bottomRight, bottomRight = _ref$bottomRight === void 0 ? false : _ref$bottomRight, restProps = _objectWithoutPropertiesLoose$c(_ref, _excluded$b);
+  var className = _ref.className, innerRef = _ref.innerRef, x = _ref.x, y = _ref.y, width = _ref.width, height = _ref.height, radius = _ref.radius, _ref$all = _ref.all, all = _ref$all === void 0 ? false : _ref$all, _ref$top = _ref.top, top = _ref$top === void 0 ? false : _ref$top, _ref$bottom = _ref.bottom, bottom = _ref$bottom === void 0 ? false : _ref$bottom, _ref$left = _ref.left, left = _ref$left === void 0 ? false : _ref$left, _ref$right = _ref.right, right = _ref$right === void 0 ? false : _ref$right, _ref$topLeft = _ref.topLeft, topLeft = _ref$topLeft === void 0 ? false : _ref$topLeft, _ref$topRight = _ref.topRight, topRight = _ref$topRight === void 0 ? false : _ref$topRight, _ref$bottomLeft = _ref.bottomLeft, bottomLeft = _ref$bottomLeft === void 0 ? false : _ref$bottomLeft, _ref$bottomRight = _ref.bottomRight, bottomRight = _ref$bottomRight === void 0 ? false : _ref$bottomRight, restProps = _objectWithoutPropertiesLoose$d(_ref, _excluded$c);
   topRight = all || top || right || topRight;
   bottomRight = all || bottom || right || bottomRight;
   bottomLeft = all || bottom || left || bottomLeft;
@@ -473,7 +473,7 @@ function BarRounded(_ref) {
   radius = Math.min(radius, Math.min(width, height) / 2);
   var diameter = 2 * radius;
   var path = ("M" + (x + radius) + "," + y + " h" + (width - diameter) + "\n " + (topRight ? "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius : "h" + radius + "v" + radius) + "\n v" + (height - diameter) + "\n " + (bottomRight ? "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + radius : "v" + radius + "h" + -radius) + "\n h" + (diameter - width) + "\n " + (bottomLeft ? "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + -radius : "h" + -radius + "v" + -radius) + "\n v" + (diameter - height) + "\n " + (topLeft ? "a" + radius + "," + radius + " 0 0 1 " + radius + "," + -radius : "v" + -radius + "h" + radius) + "\nz").split("\n").join("");
-  return /* @__PURE__ */ React__default.createElement("path", _extends$g({
+  return /* @__PURE__ */ React__default.createElement("path", _extends$h({
     ref: innerRef,
     className: cx("visx-bar-rounded", className),
     d: path
@@ -493,11 +493,11 @@ function getFirstItem(d) {
 function getSecondItem(d) {
   return d == null ? void 0 : d[1];
 }
-var _excluded$a = ["data", "className", "top", "left", "y", "x0", "x1", "xScale", "yScale", "color", "keys", "value", "order", "offset", "children"];
-function _extends$f() {
-  _extends$f = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+var _excluded$b = ["data", "className", "top", "left", "y", "x0", "x1", "xScale", "yScale", "color", "keys", "value", "order", "offset", "children"];
+function _extends$g() {
+  _extends$g = Object.assign || function(target) {
+    for (var i2 = 1; i2 < arguments.length; i2++) {
+      var source = arguments[i2];
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
@@ -506,16 +506,16 @@ function _extends$f() {
     }
     return target;
   };
-  return _extends$f.apply(this, arguments);
+  return _extends$g.apply(this, arguments);
 }
-function _objectWithoutPropertiesLoose$b(source, excluded) {
+function _objectWithoutPropertiesLoose$c(source, excluded) {
   if (source == null)
     return {};
   var target = {};
   var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
+  var key, i2;
+  for (i2 = 0; i2 < sourceKeys.length; i2++) {
+    key = sourceKeys[i2];
     if (excluded.indexOf(key) >= 0)
       continue;
     target[key] = source[key];
@@ -523,7 +523,7 @@ function _objectWithoutPropertiesLoose$b(source, excluded) {
   return target;
 }
 function BarStackHorizontal(_ref) {
-  var data = _ref.data, className = _ref.className, top = _ref.top, left = _ref.left, y = _ref.y, _ref$x = _ref.x0, x0 = _ref$x === void 0 ? getFirstItem : _ref$x, _ref$x2 = _ref.x1, x1 = _ref$x2 === void 0 ? getSecondItem : _ref$x2, xScale = _ref.xScale, yScale = _ref.yScale, color2 = _ref.color, keys = _ref.keys, value = _ref.value, order = _ref.order, offset = _ref.offset, children = _ref.children, restProps = _objectWithoutPropertiesLoose$b(_ref, _excluded$a);
+  var data = _ref.data, className = _ref.className, top = _ref.top, left = _ref.left, y = _ref.y, _ref$x = _ref.x0, x0 = _ref$x === void 0 ? getFirstItem : _ref$x, _ref$x2 = _ref.x1, x1 = _ref$x2 === void 0 ? getSecondItem : _ref$x2, xScale = _ref.xScale, yScale = _ref.yScale, color2 = _ref.color, keys = _ref.keys, value = _ref.value, order = _ref.order, offset = _ref.offset, children = _ref.children, restProps = _objectWithoutPropertiesLoose$c(_ref, _excluded$b);
   var stack2 = d3stack();
   if (keys)
     stack2.keys(keys);
@@ -535,10 +535,10 @@ function BarStackHorizontal(_ref) {
     stack2.offset(stackOffset(offset));
   var stacks = stack2(data);
   var barHeight = getBandwidth(yScale);
-  var barStacks = stacks.map(function(barStack, i) {
+  var barStacks = stacks.map(function(barStack, i2) {
     var key = barStack.key;
     return {
-      index: i,
+      index: i2,
       key,
       bars: barStack.map(function(bar, j) {
         var barWidth = (xScale(x1(bar)) || 0) - (xScale(x0(bar)) || 0);
@@ -565,7 +565,7 @@ function BarStackHorizontal(_ref) {
     left
   }, barStacks.map(function(barStack) {
     return barStack.bars.map(function(bar) {
-      return /* @__PURE__ */ React__default.createElement(Bar, _extends$f({
+      return /* @__PURE__ */ React__default.createElement(Bar, _extends$g({
         key: "bar-stack-" + barStack.index + "-" + bar.index,
         x: bar.x,
         y: bar.y,
@@ -619,8 +619,8 @@ function bisector(f) {
       lo = 0;
     if (hi == null)
       hi = a.length;
-    const i = left(a, x, lo, hi - 1);
-    return i > lo && delta(a[i - 1], x) > -delta(a[i], x) ? i - 1 : i;
+    const i2 = left(a, x, lo, hi - 1);
+    return i2 > lo && delta(a[i2 - 1], x) > -delta(a[i2], x) ? i2 - 1 : i2;
   }
   return { left, center, right };
 }
@@ -636,7 +636,7 @@ bisector(number$1).center;
 var bisect = bisectRight;
 var e10 = Math.sqrt(50), e5 = Math.sqrt(10), e2 = Math.sqrt(2);
 function ticks(start, stop, count) {
-  var reverse, i = -1, n, ticks2, step;
+  var reverse, i2 = -1, n, ticks2, step;
   stop = +stop, start = +start, count = +count;
   if (start === stop && count > 0)
     return [start];
@@ -651,8 +651,8 @@ function ticks(start, stop, count) {
     if (r1 * step > stop)
       --r1;
     ticks2 = new Array(n = r1 - r0 + 1);
-    while (++i < n)
-      ticks2[i] = (r0 + i) * step;
+    while (++i2 < n)
+      ticks2[i2] = (r0 + i2) * step;
   } else {
     step = -step;
     let r0 = Math.round(start * step), r1 = Math.round(stop * step);
@@ -661,8 +661,8 @@ function ticks(start, stop, count) {
     if (r1 / step > stop)
       --r1;
     ticks2 = new Array(n = r1 - r0 + 1);
-    while (++i < n)
-      ticks2[i] = (r0 + i) / step;
+    while (++i2 < n)
+      ticks2[i2] = (r0 + i2) / step;
   }
   if (reverse)
     ticks2.reverse();
@@ -684,9 +684,9 @@ function tickStep(start, stop, count) {
 }
 function sequence(start, stop, step) {
   start = +start, stop = +stop, step = (n = arguments.length) < 2 ? (stop = start, start = 0, 1) : n < 3 ? 1 : +step;
-  var i = -1, n = Math.max(0, Math.ceil((stop - start) / step)) | 0, range2 = new Array(n);
-  while (++i < n) {
-    range2[i] = start + i * step;
+  var i2 = -1, n = Math.max(0, Math.ceil((stop - start) / step)) | 0, range2 = new Array(n);
+  while (++i2 < n) {
+    range2[i2] = start + i2 * step;
   }
   return range2;
 }
@@ -707,13 +707,13 @@ const implicit = Symbol("implicit");
 function ordinal() {
   var index = new Map(), domain = [], range2 = [], unknown = implicit;
   function scale(d) {
-    var key = d + "", i = index.get(key);
-    if (!i) {
+    var key = d + "", i2 = index.get(key);
+    if (!i2) {
       if (unknown !== implicit)
         return unknown;
-      index.set(key, i = domain.push(d));
+      index.set(key, i2 = domain.push(d));
     }
-    return range2[(i - 1) % range2.length];
+    return range2[(i2 - 1) % range2.length];
   }
   scale.domain = function(_) {
     if (!arguments.length)
@@ -751,8 +751,8 @@ function band() {
     bandwidth = step * (1 - paddingInner);
     if (round)
       start = Math.round(start), bandwidth = Math.round(bandwidth);
-    var values = sequence(n).map(function(i) {
-      return start + step * i;
+    var values = sequence(n).map(function(i2) {
+      return start + step * i2;
     });
     return ordinalRange(reverse ? values.reverse() : values);
   }
@@ -1277,10 +1277,10 @@ var interpolateRgb = function rgbGamma(y) {
 function numberArray(a, b) {
   if (!b)
     b = [];
-  var n = a ? Math.min(b.length, a.length) : 0, c = b.slice(), i;
+  var n = a ? Math.min(b.length, a.length) : 0, c = b.slice(), i2;
   return function(t) {
-    for (i = 0; i < n; ++i)
-      c[i] = a[i] * (1 - t) + b[i] * t;
+    for (i2 = 0; i2 < n; ++i2)
+      c[i2] = a[i2] * (1 - t) + b[i2] * t;
     return c;
   };
 }
@@ -1288,14 +1288,14 @@ function isNumberArray(x) {
   return ArrayBuffer.isView(x) && !(x instanceof DataView);
 }
 function genericArray(a, b) {
-  var nb = b ? b.length : 0, na = a ? Math.min(nb, a.length) : 0, x = new Array(na), c = new Array(nb), i;
-  for (i = 0; i < na; ++i)
-    x[i] = interpolate(a[i], b[i]);
-  for (; i < nb; ++i)
-    c[i] = b[i];
+  var nb = b ? b.length : 0, na = a ? Math.min(nb, a.length) : 0, x = new Array(na), c = new Array(nb), i2;
+  for (i2 = 0; i2 < na; ++i2)
+    x[i2] = interpolate(a[i2], b[i2]);
+  for (; i2 < nb; ++i2)
+    c[i2] = b[i2];
   return function(t) {
-    for (i = 0; i < na; ++i)
-      c[i] = x[i](t);
+    for (i2 = 0; i2 < na; ++i2)
+      c[i2] = x[i2](t);
     return c;
   };
 }
@@ -1311,21 +1311,21 @@ function interpolateNumber(a, b) {
   };
 }
 function object(a, b) {
-  var i = {}, c = {}, k;
+  var i2 = {}, c = {}, k;
   if (a === null || typeof a !== "object")
     a = {};
   if (b === null || typeof b !== "object")
     b = {};
   for (k in b) {
     if (k in a) {
-      i[k] = interpolate(a[k], b[k]);
+      i2[k] = interpolate(a[k], b[k]);
     } else {
       c[k] = b[k];
     }
   }
   return function(t) {
-    for (k in i)
-      c[k] = i[k](t);
+    for (k in i2)
+      c[k] = i2[k](t);
     return c;
   };
 }
@@ -1341,37 +1341,37 @@ function one(b) {
   };
 }
 function string(a, b) {
-  var bi = reA.lastIndex = reB.lastIndex = 0, am, bm, bs, i = -1, s = [], q = [];
+  var bi = reA.lastIndex = reB.lastIndex = 0, am, bm, bs, i2 = -1, s = [], q = [];
   a = a + "", b = b + "";
   while ((am = reA.exec(a)) && (bm = reB.exec(b))) {
     if ((bs = bm.index) > bi) {
       bs = b.slice(bi, bs);
-      if (s[i])
-        s[i] += bs;
+      if (s[i2])
+        s[i2] += bs;
       else
-        s[++i] = bs;
+        s[++i2] = bs;
     }
     if ((am = am[0]) === (bm = bm[0])) {
-      if (s[i])
-        s[i] += bm;
+      if (s[i2])
+        s[i2] += bm;
       else
-        s[++i] = bm;
+        s[++i2] = bm;
     } else {
-      s[++i] = null;
-      q.push({ i, x: interpolateNumber(am, bm) });
+      s[++i2] = null;
+      q.push({ i: i2, x: interpolateNumber(am, bm) });
     }
     bi = reB.lastIndex;
   }
   if (bi < b.length) {
     bs = b.slice(bi);
-    if (s[i])
-      s[i] += bs;
+    if (s[i2])
+      s[i2] += bs;
     else
-      s[++i] = bs;
+      s[++i2] = bs;
   }
   return s.length < 2 ? q[0] ? one(q[0].x) : zero(b) : (b = q.length, function(t) {
-    for (var i2 = 0, o; i2 < b; ++i2)
-      s[(o = q[i2]).i] = o.x(t);
+    for (var i3 = 0, o; i3 < b; ++i3)
+      s[(o = q[i3]).i] = o.x(t);
     return s.join("");
   });
 }
@@ -1477,18 +1477,18 @@ function bimap(domain, range2, interpolate2) {
   };
 }
 function polymap(domain, range2, interpolate2) {
-  var j = Math.min(domain.length, range2.length) - 1, d = new Array(j), r = new Array(j), i = -1;
+  var j = Math.min(domain.length, range2.length) - 1, d = new Array(j), r = new Array(j), i2 = -1;
   if (domain[j] < domain[0]) {
     domain = domain.slice().reverse();
     range2 = range2.slice().reverse();
   }
-  while (++i < j) {
-    d[i] = normalize(domain[i], domain[i + 1]);
-    r[i] = interpolate2(range2[i], range2[i + 1]);
+  while (++i2 < j) {
+    d[i2] = normalize(domain[i2], domain[i2 + 1]);
+    r[i2] = interpolate2(range2[i2], range2[i2 + 1]);
   }
   return function(x) {
-    var i2 = bisect(domain, x, 1, j) - 1;
-    return r[i2](d[i2](x));
+    var i3 = bisect(domain, x, 1, j) - 1;
+    return r[i3](d[i3](x));
   };
 }
 function copy(source, target) {
@@ -1540,12 +1540,12 @@ function formatDecimal(x) {
   return Math.abs(x = Math.round(x)) >= 1e21 ? x.toLocaleString("en").replace(/,/g, "") : x.toString(10);
 }
 function formatDecimalParts(x, p) {
-  if ((i = (x = p ? x.toExponential(p - 1) : x.toExponential()).indexOf("e")) < 0)
+  if ((i2 = (x = p ? x.toExponential(p - 1) : x.toExponential()).indexOf("e")) < 0)
     return null;
-  var i, coefficient = x.slice(0, i);
+  var i2, coefficient = x.slice(0, i2);
   return [
     coefficient.length > 1 ? coefficient[0] + coefficient.slice(2) : coefficient,
-    +x.slice(i + 1)
+    +x.slice(i2 + 1)
   ];
 }
 function exponent(x) {
@@ -1553,11 +1553,11 @@ function exponent(x) {
 }
 function formatGroup(grouping, thousands) {
   return function(value, width) {
-    var i = value.length, t = [], j = 0, g = grouping[0], length = 0;
-    while (i > 0 && g > 0) {
+    var i2 = value.length, t = [], j = 0, g = grouping[0], length = 0;
+    while (i2 > 0 && g > 0) {
       if (length + g + 1 > width)
         g = Math.max(1, width - length);
-      t.push(value.substring(i -= g, i + g));
+      t.push(value.substring(i2 -= g, i2 + g));
       if ((length += g + 1) > width)
         break;
       g = grouping[j = (j + 1) % grouping.length];
@@ -1567,8 +1567,8 @@ function formatGroup(grouping, thousands) {
 }
 function formatNumerals(numerals) {
   return function(value) {
-    return value.replace(/[0-9]/g, function(i) {
-      return numerals[+i];
+    return value.replace(/[0-9]/g, function(i2) {
+      return numerals[+i2];
     });
   };
 }
@@ -1608,18 +1608,18 @@ FormatSpecifier.prototype.toString = function() {
 };
 function formatTrim(s) {
   out:
-    for (var n = s.length, i = 1, i0 = -1, i1; i < n; ++i) {
-      switch (s[i]) {
+    for (var n = s.length, i2 = 1, i0 = -1, i1; i2 < n; ++i2) {
+      switch (s[i2]) {
         case ".":
-          i0 = i1 = i;
+          i0 = i1 = i2;
           break;
         case "0":
           if (i0 === 0)
-            i0 = i;
-          i1 = i;
+            i0 = i2;
+          i1 = i2;
           break;
         default:
-          if (!+s[i])
+          if (!+s[i2])
             break out;
           if (i0 > 0)
             i0 = 0;
@@ -1633,8 +1633,8 @@ function formatPrefixAuto(x, p) {
   var d = formatDecimalParts(x, p);
   if (!d)
     return x + "";
-  var coefficient = d[0], exponent2 = d[1], i = exponent2 - (prefixExponent = Math.max(-8, Math.min(8, Math.floor(exponent2 / 3))) * 3) + 1, n = coefficient.length;
-  return i === n ? coefficient : i > n ? coefficient + new Array(i - n + 1).join("0") : i > 0 ? coefficient.slice(0, i) + "." + coefficient.slice(i) : "0." + new Array(1 - i).join("0") + formatDecimalParts(x, Math.max(0, p + i - 1))[0];
+  var coefficient = d[0], exponent2 = d[1], i2 = exponent2 - (prefixExponent = Math.max(-8, Math.min(8, Math.floor(exponent2 / 3))) * 3) + 1, n = coefficient.length;
+  return i2 === n ? coefficient : i2 > n ? coefficient + new Array(i2 - n + 1).join("0") : i2 > 0 ? coefficient.slice(0, i2) + "." + coefficient.slice(i2) : "0." + new Array(1 - i2).join("0") + formatDecimalParts(x, Math.max(0, p + i2 - 1))[0];
 }
 function formatRounded(x, p) {
   var d = formatDecimalParts(x, p);
@@ -1677,7 +1677,7 @@ function formatLocale(locale2) {
     var formatType = formatTypes[type2], maybeSuffix = /[defgprs%]/.test(type2);
     precision = precision === void 0 ? 6 : /[gprs]/.test(type2) ? Math.max(1, Math.min(21, precision)) : Math.max(0, Math.min(20, precision));
     function format2(value) {
-      var valuePrefix = prefix, valueSuffix = suffix, i, n, c;
+      var valuePrefix = prefix, valueSuffix = suffix, i2, n, c;
       if (type2 === "c") {
         valueSuffix = formatType(value) + valueSuffix;
         value = "";
@@ -1692,11 +1692,11 @@ function formatLocale(locale2) {
         valuePrefix = (valueNegative ? sign === "(" ? sign : minus : sign === "-" || sign === "(" ? "" : sign) + valuePrefix;
         valueSuffix = (type2 === "s" ? prefixes[8 + prefixExponent / 3] : "") + valueSuffix + (valueNegative && sign === "(" ? ")" : "");
         if (maybeSuffix) {
-          i = -1, n = value.length;
-          while (++i < n) {
-            if (c = value.charCodeAt(i), 48 > c || c > 57) {
-              valueSuffix = (c === 46 ? decimal + value.slice(i + 1) : value.slice(i)) + valueSuffix;
-              value = value.slice(0, i);
+          i2 = -1, n = value.length;
+          while (++i2 < n) {
+            if (c = value.charCodeAt(i2), 48 > c || c > 57) {
+              valueSuffix = (c === 46 ? decimal + value.slice(i2 + 1) : value.slice(i2)) + valueSuffix;
+              value = value.slice(0, i2);
               break;
             }
           }
@@ -1948,9 +1948,9 @@ var hour = newInterval(function(date2) {
 var timeHour = hour;
 var day = newInterval((date2) => date2.setHours(0, 0, 0, 0), (date2, step) => date2.setDate(date2.getDate() + step), (start, end) => (end - start - (end.getTimezoneOffset() - start.getTimezoneOffset()) * durationMinute) / durationDay, (date2) => date2.getDate() - 1);
 var timeDay = day;
-function weekday(i) {
+function weekday(i2) {
   return newInterval(function(date2) {
-    date2.setDate(date2.getDate() - (date2.getDay() + 7 - i) % 7);
+    date2.setDate(date2.getDate() - (date2.getDay() + 7 - i2) % 7);
     date2.setHours(0, 0, 0, 0);
   }, function(date2, step) {
     date2.setDate(date2.getDate() + step * 7);
@@ -2026,9 +2026,9 @@ var utcDay = newInterval(function(date2) {
   return date2.getUTCDate() - 1;
 });
 var utcDay$1 = utcDay;
-function utcWeekday(i) {
+function utcWeekday(i2) {
   return newInterval(function(date2) {
-    date2.setUTCDate(date2.getUTCDate() - (date2.getUTCDay() + 7 - i) % 7);
+    date2.setUTCDate(date2.getUTCDate() - (date2.getUTCDay() + 7 - i2) % 7);
     date2.setUTCHours(0, 0, 0, 0);
   }, function(date2, step) {
     date2.setUTCDate(date2.getUTCDate() + step * 7);
@@ -2327,10 +2327,10 @@ function getTicks(scale, numTicks) {
 function toString(x) {
   return x == null ? void 0 : x.toString();
 }
-function _extends$e() {
-  _extends$e = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+function _extends$f() {
+  _extends$f = Object.assign || function(target) {
+    for (var i2 = 1; i2 < arguments.length; i2++) {
+      var source = arguments[i2];
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
@@ -2339,16 +2339,16 @@ function _extends$e() {
     }
     return target;
   };
-  return _extends$e.apply(this, arguments);
+  return _extends$f.apply(this, arguments);
 }
-function _objectWithoutPropertiesLoose$a(source, excluded) {
+function _objectWithoutPropertiesLoose$b(source, excluded) {
   if (source == null)
     return {};
   var target = {};
   var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
+  var key, i2;
+  for (i2 = 0; i2 < sourceKeys.length; i2++) {
+    key = sourceKeys[i2];
     if (excluded.indexOf(key) >= 0)
       continue;
     target[key] = source[key];
@@ -2356,7 +2356,7 @@ function _objectWithoutPropertiesLoose$a(source, excluded) {
   return target;
 }
 function LinearGradient(_ref) {
-  var children = _ref.children, id = _ref.id, from = _ref.from, to = _ref.to, _x1 = _ref.x1, _y1 = _ref.y1, _x2 = _ref.x2, _y2 = _ref.y2, _ref$fromOffset = _ref.fromOffset, fromOffset = _ref$fromOffset === void 0 ? "0%" : _ref$fromOffset, _ref$fromOpacity = _ref.fromOpacity, fromOpacity = _ref$fromOpacity === void 0 ? 1 : _ref$fromOpacity, _ref$toOffset = _ref.toOffset, toOffset = _ref$toOffset === void 0 ? "100%" : _ref$toOffset, _ref$toOpacity = _ref.toOpacity, toOpacity = _ref$toOpacity === void 0 ? 1 : _ref$toOpacity, rotate = _ref.rotate, transform = _ref.transform, _ref$vertical = _ref.vertical, vertical = _ref$vertical === void 0 ? true : _ref$vertical, restProps = _objectWithoutPropertiesLoose$a(_ref, ["children", "id", "from", "to", "x1", "y1", "x2", "y2", "fromOffset", "fromOpacity", "toOffset", "toOpacity", "rotate", "transform", "vertical"]);
+  var children = _ref.children, id = _ref.id, from = _ref.from, to = _ref.to, _x1 = _ref.x1, _y1 = _ref.y1, _x2 = _ref.x2, _y2 = _ref.y2, _ref$fromOffset = _ref.fromOffset, fromOffset = _ref$fromOffset === void 0 ? "0%" : _ref$fromOffset, _ref$fromOpacity = _ref.fromOpacity, fromOpacity = _ref$fromOpacity === void 0 ? 1 : _ref$fromOpacity, _ref$toOffset = _ref.toOffset, toOffset = _ref$toOffset === void 0 ? "100%" : _ref$toOffset, _ref$toOpacity = _ref.toOpacity, toOpacity = _ref$toOpacity === void 0 ? 1 : _ref$toOpacity, rotate = _ref.rotate, transform = _ref.transform, _ref$vertical = _ref.vertical, vertical = _ref$vertical === void 0 ? true : _ref$vertical, restProps = _objectWithoutPropertiesLoose$b(_ref, ["children", "id", "from", "to", "x1", "y1", "x2", "y2", "fromOffset", "fromOpacity", "toOffset", "toOpacity", "rotate", "transform", "vertical"]);
   var x1 = _x1;
   var x2 = _x2;
   var y1 = _y1;
@@ -2367,7 +2367,7 @@ function LinearGradient(_ref) {
     y1 = "0";
     y2 = "1";
   }
-  return /* @__PURE__ */ React__default.createElement("defs", null, /* @__PURE__ */ React__default.createElement("linearGradient", _extends$e({
+  return /* @__PURE__ */ React__default.createElement("defs", null, /* @__PURE__ */ React__default.createElement("linearGradient", _extends$f({
     id,
     x1,
     y1,
@@ -2425,14 +2425,14 @@ function range$1(a, b, str) {
   var begs, beg, left, right, result;
   var ai = str.indexOf(a);
   var bi = str.indexOf(b, ai + 1);
-  var i = ai;
+  var i2 = ai;
   if (ai >= 0 && bi > 0) {
     begs = [];
     left = str.length;
-    while (i >= 0 && !result) {
-      if (i == ai) {
-        begs.push(i);
-        ai = str.indexOf(a, i + 1);
+    while (i2 >= 0 && !result) {
+      if (i2 == ai) {
+        begs.push(i2);
+        ai = str.indexOf(a, i2 + 1);
       } else if (begs.length == 1) {
         result = [begs.pop(), bi];
       } else {
@@ -2441,9 +2441,9 @@ function range$1(a, b, str) {
           left = beg;
           right = bi;
         }
-        bi = str.indexOf(b, i + 1);
+        bi = str.indexOf(b, i2 + 1);
       }
-      i = ai < bi && ai >= 0 ? ai : bi;
+      i2 = ai < bi && ai >= 0 ? ai : bi;
     }
     if (begs.length) {
       result = [left, right];
@@ -2475,17 +2475,17 @@ function range(a, b, str) {
   var begs, beg, left, right, result;
   var ai = str.indexOf(a);
   var bi = str.indexOf(b, ai + 1);
-  var i = ai;
+  var i2 = ai;
   if (ai >= 0 && bi > 0) {
     if (a === b) {
       return [ai, bi];
     }
     begs = [];
     left = str.length;
-    while (i >= 0 && !result) {
-      if (i == ai) {
-        begs.push(i);
-        ai = str.indexOf(a, i + 1);
+    while (i2 >= 0 && !result) {
+      if (i2 == ai) {
+        begs.push(i2);
+        ai = str.indexOf(a, i2 + 1);
       } else if (begs.length == 1) {
         result = [begs.pop(), bi];
       } else {
@@ -2494,9 +2494,9 @@ function range(a, b, str) {
           left = beg;
           right = bi;
         }
-        bi = str.indexOf(b, i + 1);
+        bi = str.indexOf(b, i2 + 1);
       }
-      i = ai < bi && ai >= 0 ? ai : bi;
+      i2 = ai < bi && ai >= 0 ? ai : bi;
     }
     if (begs.length) {
       result = [left, right];
@@ -2571,8 +2571,8 @@ Mexp$4.math = {
       choice = other;
       other = r;
     }
-    for (var i = choice + 1; i <= n; i++) {
-      pro *= i;
+    for (var i2 = choice + 1; i2 <= n; i2++) {
+      pro *= i2;
     }
     return pro / Mexp$4.math.fact(other);
   },
@@ -2594,16 +2594,16 @@ Mexp$4.math = {
     if (n % 1 !== 0)
       return "NaN";
     var pro = 1;
-    for (var i = 2; i <= n; i++) {
-      pro *= i;
+    for (var i2 = 2; i2 <= n; i2++) {
+      pro *= i2;
     }
     return pro;
   },
   inverse: function(x) {
     return 1 / x;
   },
-  log: function(i) {
-    return Math.log(i) / Math.log(10);
+  log: function(i2) {
+    return Math.log(i2) / Math.log(10);
   },
   mod: function(a, b) {
     return a % b;
@@ -2613,16 +2613,16 @@ Mexp$4.math = {
   },
   P: function(n, r) {
     var pro = 1;
-    for (var i = Math.floor(n) - Math.floor(r) + 1; i <= Math.floor(n); i++) {
-      pro *= i;
+    for (var i2 = Math.floor(n) - Math.floor(r) + 1; i2 <= Math.floor(n); i2++) {
+      pro *= i2;
     }
     return pro;
   },
   Pi: function(low, high, ex) {
     var pro = 1;
-    for (var i = low; i <= high; i++) {
+    for (var i2 = low; i2 <= high; i2++) {
       pro *= Number(ex.postfixEval({
-        n: i
+        n: i2
       }));
     }
     return pro;
@@ -2636,9 +2636,9 @@ Mexp$4.math = {
   },
   sigma: function(low, high, ex) {
     var sum2 = 0;
-    for (var i = low; i <= high; i++) {
+    for (var i2 = low; i2 <= high; i2++) {
       sum2 += Number(ex.postfixEval({
-        n: i
+        n: i2
       }));
     }
     return sum2;
@@ -2672,8 +2672,8 @@ Mexp$4.Exception = function(message) {
 var math_function = Mexp$4;
 var Mexp$3 = math_function;
 function inc(arr, val) {
-  for (var i = 0; i < arr.length; i++) {
-    arr[i] += val;
+  for (var i2 = 0; i2 < arr.length; i2++) {
+    arr[i2] += val;
   }
   return arr;
 }
@@ -2970,39 +2970,39 @@ var newAr = [
   ["asin", "acos", "atan", "cosh", "root", "tanh", "sinh"],
   ["acosh", "atanh", "asinh", "Sigma"]
 ];
-function match(str1, str2, i, x) {
+function match(str1, str2, i2, x) {
   for (var f = 0; f < x; f++) {
-    if (str1[i + f] !== str2[f]) {
+    if (str1[i2 + f] !== str2[f]) {
       return false;
     }
   }
   return true;
 }
 Mexp$3.addToken = function(tokens) {
-  for (var i = 0; i < tokens.length; i++) {
-    var x = tokens[i].token.length;
+  for (var i2 = 0; i2 < tokens.length; i2++) {
+    var x = tokens[i2].token.length;
     var temp = -1;
     newAr[x] = newAr[x] || [];
     for (var y = 0; y < newAr[x].length; y++) {
-      if (tokens[i].token === newAr[x][y]) {
+      if (tokens[i2].token === newAr[x][y]) {
         temp = token.indexOf(newAr[x][y]);
         break;
       }
     }
     if (temp === -1) {
-      token.push(tokens[i].token);
-      type.push(tokens[i].type);
-      if (newAr.length <= tokens[i].token.length) {
-        newAr[tokens[i].token.length] = [];
+      token.push(tokens[i2].token);
+      type.push(tokens[i2].type);
+      if (newAr.length <= tokens[i2].token.length) {
+        newAr[tokens[i2].token.length] = [];
       }
-      newAr[tokens[i].token.length].push(tokens[i].token);
-      eva.push(tokens[i].value);
-      show.push(tokens[i].show);
+      newAr[tokens[i2].token.length].push(tokens[i2].token);
+      eva.push(tokens[i2].value);
+      show.push(tokens[i2].show);
     } else {
-      token[temp] = tokens[i].token;
-      type[temp] = tokens[i].type;
-      eva[temp] = tokens[i].value;
-      show[temp] = tokens[i].show;
+      token[temp] = tokens[i2].token;
+      type[temp] = tokens[i2].type;
+      eva[temp] = tokens[i2].value;
+      show[temp] = tokens[i2].show;
     }
   }
 };
@@ -3010,25 +3010,25 @@ function tokenize(string2) {
   var nodes = [];
   var length = string2.length;
   var key, x, y;
-  for (var i = 0; i < length; i++) {
-    if (i < length - 1 && string2[i] === " " && string2[i + 1] === " ") {
+  for (var i2 = 0; i2 < length; i2++) {
+    if (i2 < length - 1 && string2[i2] === " " && string2[i2 + 1] === " ") {
       continue;
     }
     key = "";
-    for (x = string2.length - i > newAr.length - 2 ? newAr.length - 1 : string2.length - i; x > 0; x--) {
+    for (x = string2.length - i2 > newAr.length - 2 ? newAr.length - 1 : string2.length - i2; x > 0; x--) {
       if (newAr[x] === void 0)
         continue;
       for (y = 0; y < newAr[x].length; y++) {
-        if (match(string2, newAr[x][y], i, x)) {
+        if (match(string2, newAr[x][y], i2, x)) {
           key = newAr[x][y];
           y = newAr[x].length;
           x = 0;
         }
       }
     }
-    i += key.length - 1;
+    i2 += key.length - 1;
     if (key === "") {
-      throw new Mexp$3.Exception("Can't understand after " + string2.slice(i));
+      throw new Mexp$3.Exception("Can't understand after " + string2.slice(i2));
     }
     var index = token.indexOf(key);
     nodes.push({
@@ -3068,16 +3068,16 @@ Mexp$3.lex = function(inp, tokens) {
   var bracToClose = 0;
   var asterick = empty;
   var prevKey = "";
-  var i;
+  var i2;
   if (typeof tokens !== "undefined") {
     Mexp$3.addToken(tokens);
   }
   var obj = {};
   var nodes = tokenize(inpStr);
-  for (i = 0; i < nodes.length; i++) {
-    var node = nodes[i];
+  for (i2 = 0; i2 < nodes.length; i2++) {
+    var node = nodes[i2];
     if (node.type === 14) {
-      if (i > 0 && i < nodes.length - 1 && nodes[i + 1].type === 1 && (nodes[i - 1].type === 1 || nodes[i - 1].type === 6)) {
+      if (i2 > 0 && i2 < nodes.length - 1 && nodes[i2 + 1].type === 1 && (nodes[i2 - 1].type === 1 || nodes[i2 - 1].type === 6)) {
         throw new Mexp$3.Exception("Unexpected Space");
       }
       continue;
@@ -3111,7 +3111,7 @@ Mexp$3.lex = function(inp, tokens) {
       cEv = Mexp$3.math.mul;
       cShow = "&times;";
       cPre = 3;
-      i = i - 1;
+      i2 = i2 - 1;
     }
     obj = {
       value: cEv,
@@ -3258,24 +3258,24 @@ Mexp$2.prototype.toPostfix = function() {
   var post = [], elem, popped, prep, pre, ele;
   var stack2 = [{ value: "(", type: 4, pre: 0 }];
   var arr = this.value;
-  for (var i = 1; i < arr.length; i++) {
-    if (arr[i].type === 1 || arr[i].type === 3 || arr[i].type === 13) {
-      if (arr[i].type === 1)
-        arr[i].value = Number(arr[i].value);
-      post.push(arr[i]);
-    } else if (arr[i].type === 4) {
-      stack2.push(arr[i]);
-    } else if (arr[i].type === 5) {
+  for (var i2 = 1; i2 < arr.length; i2++) {
+    if (arr[i2].type === 1 || arr[i2].type === 3 || arr[i2].type === 13) {
+      if (arr[i2].type === 1)
+        arr[i2].value = Number(arr[i2].value);
+      post.push(arr[i2]);
+    } else if (arr[i2].type === 4) {
+      stack2.push(arr[i2]);
+    } else if (arr[i2].type === 5) {
       while ((popped = stack2.pop()).type !== 4) {
         post.push(popped);
       }
-    } else if (arr[i].type === 11) {
+    } else if (arr[i2].type === 11) {
       while ((popped = stack2.pop()).type !== 4) {
         post.push(popped);
       }
       stack2.push(popped);
     } else {
-      elem = arr[i];
+      elem = arr[i2];
       pre = elem.pre;
       ele = stack2[stack2.length - 1];
       prep = ele.pre;
@@ -3305,66 +3305,66 @@ Mexp$1.prototype.postfixEval = function(UserDefined) {
   var stack2 = [], pop1, pop2, pop3;
   var arr = this.value;
   var bool = typeof UserDefined.n !== "undefined";
-  for (var i = 0; i < arr.length; i++) {
-    if (arr[i].type === 1) {
-      stack2.push({ value: arr[i].value, type: 1 });
-    } else if (arr[i].type === 3) {
-      stack2.push({ value: UserDefined[arr[i].value], type: 1 });
-    } else if (arr[i].type === 0) {
+  for (var i2 = 0; i2 < arr.length; i2++) {
+    if (arr[i2].type === 1) {
+      stack2.push({ value: arr[i2].value, type: 1 });
+    } else if (arr[i2].type === 3) {
+      stack2.push({ value: UserDefined[arr[i2].value], type: 1 });
+    } else if (arr[i2].type === 0) {
       if (typeof stack2[stack2.length - 1].type === "undefined") {
-        stack2[stack2.length - 1].value.push(arr[i]);
+        stack2[stack2.length - 1].value.push(arr[i2]);
       } else
-        stack2[stack2.length - 1].value = arr[i].value(stack2[stack2.length - 1].value);
-    } else if (arr[i].type === 7) {
+        stack2[stack2.length - 1].value = arr[i2].value(stack2[stack2.length - 1].value);
+    } else if (arr[i2].type === 7) {
       if (typeof stack2[stack2.length - 1].type === "undefined") {
-        stack2[stack2.length - 1].value.push(arr[i]);
+        stack2[stack2.length - 1].value.push(arr[i2]);
       } else
-        stack2[stack2.length - 1].value = arr[i].value(stack2[stack2.length - 1].value);
-    } else if (arr[i].type === 8) {
+        stack2[stack2.length - 1].value = arr[i2].value(stack2[stack2.length - 1].value);
+    } else if (arr[i2].type === 8) {
       pop1 = stack2.pop();
       pop2 = stack2.pop();
-      stack2.push({ type: 1, value: arr[i].value(pop2.value, pop1.value) });
-    } else if (arr[i].type === 10) {
+      stack2.push({ type: 1, value: arr[i2].value(pop2.value, pop1.value) });
+    } else if (arr[i2].type === 10) {
       pop1 = stack2.pop();
       pop2 = stack2.pop();
       if (typeof pop2.type === "undefined") {
         pop2.value = pop2.concat(pop1);
-        pop2.value.push(arr[i]);
+        pop2.value.push(arr[i2]);
         stack2.push(pop2);
       } else if (typeof pop1.type === "undefined") {
         pop1.unshift(pop2);
-        pop1.push(arr[i]);
+        pop1.push(arr[i2]);
         stack2.push(pop1);
       } else {
-        stack2.push({ type: 1, value: arr[i].value(pop2.value, pop1.value) });
+        stack2.push({ type: 1, value: arr[i2].value(pop2.value, pop1.value) });
       }
-    } else if (arr[i].type === 2 || arr[i].type === 9) {
+    } else if (arr[i2].type === 2 || arr[i2].type === 9) {
       pop1 = stack2.pop();
       pop2 = stack2.pop();
       if (typeof pop2.type === "undefined") {
         pop2 = pop2.concat(pop1);
-        pop2.push(arr[i]);
+        pop2.push(arr[i2]);
         stack2.push(pop2);
       } else if (typeof pop1.type === "undefined") {
         pop1.unshift(pop2);
-        pop1.push(arr[i]);
+        pop1.push(arr[i2]);
         stack2.push(pop1);
       } else {
-        stack2.push({ type: 1, value: arr[i].value(pop2.value, pop1.value) });
+        stack2.push({ type: 1, value: arr[i2].value(pop2.value, pop1.value) });
       }
-    } else if (arr[i].type === 12) {
+    } else if (arr[i2].type === 12) {
       pop1 = stack2.pop();
       if (typeof pop1.type !== "undefined") {
         pop1 = [pop1];
       }
       pop2 = stack2.pop();
       pop3 = stack2.pop();
-      stack2.push({ type: 1, value: arr[i].value(pop3.value, pop2.value, new Mexp$1(pop1)) });
-    } else if (arr[i].type === 13) {
+      stack2.push({ type: 1, value: arr[i2].value(pop3.value, pop2.value, new Mexp$1(pop1)) });
+    } else if (arr[i2].type === 13) {
       if (bool) {
-        stack2.push({ value: UserDefined[arr[i].value], type: 3 });
+        stack2.push({ value: UserDefined[arr[i2].value], type: 3 });
       } else
-        stack2.push([arr[i]]);
+        stack2.push([arr[i2]]);
     }
   }
   if (stack2.length > 1) {
@@ -3389,31 +3389,31 @@ Mexp.prototype.formulaEval = function() {
   var pop1, pop2, pop3;
   var disp = [];
   var arr = this.value;
-  for (var i = 0; i < arr.length; i++) {
-    if (arr[i].type === 1 || arr[i].type === 3) {
-      disp.push({ value: arr[i].type === 3 ? arr[i].show : arr[i].value, type: 1 });
-    } else if (arr[i].type === 13) {
-      disp.push({ value: arr[i].show, type: 1 });
-    } else if (arr[i].type === 0) {
-      disp[disp.length - 1] = { value: arr[i].show + (arr[i].show != "-" ? "(" : "") + disp[disp.length - 1].value + (arr[i].show != "-" ? ")" : ""), type: 0 };
-    } else if (arr[i].type === 7) {
-      disp[disp.length - 1] = { value: (disp[disp.length - 1].type != 1 ? "(" : "") + disp[disp.length - 1].value + (disp[disp.length - 1].type != 1 ? ")" : "") + arr[i].show, type: 7 };
-    } else if (arr[i].type === 10) {
+  for (var i2 = 0; i2 < arr.length; i2++) {
+    if (arr[i2].type === 1 || arr[i2].type === 3) {
+      disp.push({ value: arr[i2].type === 3 ? arr[i2].show : arr[i2].value, type: 1 });
+    } else if (arr[i2].type === 13) {
+      disp.push({ value: arr[i2].show, type: 1 });
+    } else if (arr[i2].type === 0) {
+      disp[disp.length - 1] = { value: arr[i2].show + (arr[i2].show != "-" ? "(" : "") + disp[disp.length - 1].value + (arr[i2].show != "-" ? ")" : ""), type: 0 };
+    } else if (arr[i2].type === 7) {
+      disp[disp.length - 1] = { value: (disp[disp.length - 1].type != 1 ? "(" : "") + disp[disp.length - 1].value + (disp[disp.length - 1].type != 1 ? ")" : "") + arr[i2].show, type: 7 };
+    } else if (arr[i2].type === 10) {
       pop1 = disp.pop();
       pop2 = disp.pop();
-      if (arr[i].show === "P" || arr[i].show === "C")
-        disp.push({ value: "<sup>" + pop2.value + "</sup>" + arr[i].show + "<sub>" + pop1.value + "</sub>", type: 10 });
+      if (arr[i2].show === "P" || arr[i2].show === "C")
+        disp.push({ value: "<sup>" + pop2.value + "</sup>" + arr[i2].show + "<sub>" + pop1.value + "</sub>", type: 10 });
       else
         disp.push({ value: (pop2.type != 1 ? "(" : "") + pop2.value + (pop2.type != 1 ? ")" : "") + "<sup>" + pop1.value + "</sup>", type: 1 });
-    } else if (arr[i].type === 2 || arr[i].type === 9) {
+    } else if (arr[i2].type === 2 || arr[i2].type === 9) {
       pop1 = disp.pop();
       pop2 = disp.pop();
-      disp.push({ value: (pop2.type != 1 ? "(" : "") + pop2.value + (pop2.type != 1 ? ")" : "") + arr[i].show + (pop1.type != 1 ? "(" : "") + pop1.value + (pop1.type != 1 ? ")" : ""), type: arr[i].type });
-    } else if (arr[i].type === 12) {
+      disp.push({ value: (pop2.type != 1 ? "(" : "") + pop2.value + (pop2.type != 1 ? ")" : "") + arr[i2].show + (pop1.type != 1 ? "(" : "") + pop1.value + (pop1.type != 1 ? ")" : ""), type: arr[i2].type });
+    } else if (arr[i2].type === 12) {
       pop1 = disp.pop();
       pop2 = disp.pop();
       pop3 = disp.pop();
-      disp.push({ value: arr[i].show + "(" + pop3.value + "," + pop2.value + "," + pop1.value + ")", type: 12 });
+      disp.push({ value: arr[i2].show + "(" + pop3.value + "," + pop2.value + "," + pop1.value + ")", type: 12 });
     }
   }
   return disp[0].value;
@@ -3867,15 +3867,15 @@ function getStringWidth(str, style) {
 var getStringWidth$1 = memoize$1(getStringWidth, function(str, style) {
   return str + "_" + JSON.stringify(style);
 });
-var _excluded$9 = ["verticalAnchor", "scaleToFit", "angle", "width", "lineHeight", "capHeight", "children", "style"];
-function _objectWithoutPropertiesLoose$9(source, excluded) {
+var _excluded$a = ["verticalAnchor", "scaleToFit", "angle", "width", "lineHeight", "capHeight", "children", "style"];
+function _objectWithoutPropertiesLoose$a(source, excluded) {
   if (source == null)
     return {};
   var target = {};
   var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
+  var key, i2;
+  for (i2 = 0; i2 < sourceKeys.length; i2++) {
+    key = sourceKeys[i2];
     if (excluded.indexOf(key) >= 0)
       continue;
     target[key] = source[key];
@@ -3889,7 +3889,7 @@ function isXOrYInValid(xOrY) {
   return typeof xOrY === "number" && Number.isFinite(xOrY) || typeof xOrY === "string";
 }
 function useText(props) {
-  var _props$verticalAnchor = props.verticalAnchor, verticalAnchor = _props$verticalAnchor === void 0 ? "end" : _props$verticalAnchor, _props$scaleToFit = props.scaleToFit, scaleToFit = _props$scaleToFit === void 0 ? false : _props$scaleToFit, angle = props.angle, width = props.width, _props$lineHeight = props.lineHeight, lineHeight = _props$lineHeight === void 0 ? "1em" : _props$lineHeight, _props$capHeight = props.capHeight, capHeight = _props$capHeight === void 0 ? "0.71em" : _props$capHeight, children = props.children, style = props.style, textProps = _objectWithoutPropertiesLoose$9(props, _excluded$9);
+  var _props$verticalAnchor = props.verticalAnchor, verticalAnchor = _props$verticalAnchor === void 0 ? "end" : _props$verticalAnchor, _props$scaleToFit = props.scaleToFit, scaleToFit = _props$scaleToFit === void 0 ? false : _props$scaleToFit, angle = props.angle, width = props.width, _props$lineHeight = props.lineHeight, lineHeight = _props$lineHeight === void 0 ? "1em" : _props$lineHeight, _props$capHeight = props.capHeight, capHeight = _props$capHeight === void 0 ? "0.71em" : _props$capHeight, children = props.children, style = props.style, textProps = _objectWithoutPropertiesLoose$a(props, _excluded$a);
   var _textProps$x = textProps.x, x = _textProps$x === void 0 ? 0 : _textProps$x, _textProps$y = textProps.y, y = _textProps$y === void 0 ? 0 : _textProps$y;
   var isXOrYNotValid = !isXOrYInValid(x) || !isXOrYInValid(y);
   var _useMemo = useMemo(function() {
@@ -3958,11 +3958,11 @@ function useText(props) {
     transform
   };
 }
-var _excluded$8 = ["dx", "dy", "textAnchor", "innerRef", "innerTextRef", "verticalAnchor", "angle", "lineHeight", "scaleToFit", "capHeight", "width"];
-function _extends$d() {
-  _extends$d = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+var _excluded$9 = ["dx", "dy", "textAnchor", "innerRef", "innerTextRef", "verticalAnchor", "angle", "lineHeight", "scaleToFit", "capHeight", "width"];
+function _extends$e() {
+  _extends$e = Object.assign || function(target) {
+    for (var i2 = 1; i2 < arguments.length; i2++) {
+      var source = arguments[i2];
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
@@ -3971,16 +3971,16 @@ function _extends$d() {
     }
     return target;
   };
-  return _extends$d.apply(this, arguments);
+  return _extends$e.apply(this, arguments);
 }
-function _objectWithoutPropertiesLoose$8(source, excluded) {
+function _objectWithoutPropertiesLoose$9(source, excluded) {
   if (source == null)
     return {};
   var target = {};
   var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
+  var key, i2;
+  for (i2 = 0; i2 < sourceKeys.length; i2++) {
+    key = sourceKeys[i2];
     if (excluded.indexOf(key) >= 0)
       continue;
     target[key] = source[key];
@@ -3998,7 +3998,7 @@ function Text(props) {
   props.scaleToFit;
   props.capHeight;
   props.width;
-  var textProps = _objectWithoutPropertiesLoose$8(props, _excluded$8);
+  var textProps = _objectWithoutPropertiesLoose$9(props, _excluded$9);
   var _textProps$x = textProps.x, x = _textProps$x === void 0 ? 0 : _textProps$x, fontSize = textProps.fontSize;
   var _useText = useText(props), wordsByLines = _useText.wordsByLines, startDy = _useText.startDy, transform = _useText.transform;
   return /* @__PURE__ */ React__default.createElement("svg", {
@@ -4007,7 +4007,7 @@ function Text(props) {
     y: dy,
     fontSize,
     style: SVG_STYLE
-  }, wordsByLines.length > 0 ? /* @__PURE__ */ React__default.createElement("text", _extends$d({
+  }, wordsByLines.length > 0 ? /* @__PURE__ */ React__default.createElement("text", _extends$e({
     ref: innerTextRef,
     transform
   }, textProps, {
@@ -4048,10 +4048,10 @@ function getLabelTransform(_ref) {
     transform
   };
 }
-function _extends$c() {
-  _extends$c = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+function _extends$d() {
+  _extends$d = Object.assign || function(target) {
+    for (var i2 = 1; i2 < arguments.length; i2++) {
+      var source = arguments[i2];
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
@@ -4060,7 +4060,7 @@ function _extends$c() {
     }
     return target;
   };
-  return _extends$c.apply(this, arguments);
+  return _extends$d.apply(this, arguments);
 }
 function Ticks(_ref) {
   var hideTicks = _ref.hideTicks, horizontal = _ref.horizontal, orientation = _ref.orientation, tickClassName = _ref.tickClassName, tickComponent = _ref.tickComponent, allTickLabelProps = _ref.tickLabelProps, _ref$tickStroke = _ref.tickStroke, tickStroke = _ref$tickStroke === void 0 ? "#222" : _ref$tickStroke, tickTransform = _ref.tickTransform, ticks2 = _ref.ticks, strokeWidth = _ref.strokeWidth, tickLineProps = _ref.tickLineProps;
@@ -4074,26 +4074,26 @@ function Ticks(_ref) {
       key: "visx-tick-" + value + "-" + index,
       className: cx("visx-axis-tick", tickClassName),
       transform: tickTransform
-    }, !hideTicks && /* @__PURE__ */ React__default.createElement(Line$1, _extends$c({
+    }, !hideTicks && /* @__PURE__ */ React__default.createElement(Line$1, _extends$d({
       from,
       to,
       stroke: tickStroke,
       strokeWidth,
       strokeLinecap: "square"
-    }, tickLineProps)), tickComponent ? tickComponent(_extends$c({}, tickLabelProps, {
+    }, tickLineProps)), tickComponent ? tickComponent(_extends$d({}, tickLabelProps, {
       x: to.x,
       y: tickYCoord,
       formattedValue
-    })) : /* @__PURE__ */ React__default.createElement(Text, _extends$c({
+    })) : /* @__PURE__ */ React__default.createElement(Text, _extends$d({
       x: to.x,
       y: tickYCoord
     }, tickLabelProps), formattedValue));
   });
 }
-function _extends$b() {
-  _extends$b = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+function _extends$c() {
+  _extends$c = Object.assign || function(target) {
+    for (var i2 = 1; i2 < arguments.length; i2++) {
+      var source = arguments[i2];
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
@@ -4102,7 +4102,7 @@ function _extends$b() {
     }
     return target;
   };
-  return _extends$b.apply(this, arguments);
+  return _extends$c.apply(this, arguments);
 }
 var defaultTextProps = {
   textAnchor: "middle",
@@ -4141,7 +4141,7 @@ function AxisRenderer(_ref) {
     stroke,
     strokeWidth,
     strokeDasharray
-  }), label && /* @__PURE__ */ React__default.createElement(Text, _extends$b({
+  }), label && /* @__PURE__ */ React__default.createElement(Text, _extends$c({
     className: cx("visx-axis-label", labelClassName)
   }, getLabelTransform({
     labelOffset,
@@ -4215,11 +4215,11 @@ function createPoint(_ref, horizontal) {
     y: x
   });
 }
-var _excluded$7 = ["children", "axisClassName", "hideAxisLine", "hideTicks", "hideZero", "left", "numTicks", "orientation", "rangePadding", "scale", "tickFormat", "tickLength", "tickValues", "top"];
-function _extends$a() {
-  _extends$a = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+var _excluded$8 = ["children", "axisClassName", "hideAxisLine", "hideTicks", "hideZero", "left", "numTicks", "orientation", "rangePadding", "scale", "tickFormat", "tickLength", "tickValues", "top"];
+function _extends$b() {
+  _extends$b = Object.assign || function(target) {
+    for (var i2 = 1; i2 < arguments.length; i2++) {
+      var source = arguments[i2];
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
@@ -4228,16 +4228,16 @@ function _extends$a() {
     }
     return target;
   };
-  return _extends$a.apply(this, arguments);
+  return _extends$b.apply(this, arguments);
 }
-function _objectWithoutPropertiesLoose$7(source, excluded) {
+function _objectWithoutPropertiesLoose$8(source, excluded) {
   if (source == null)
     return {};
   var target = {};
   var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
+  var key, i2;
+  for (i2 = 0; i2 < sourceKeys.length; i2++) {
+    key = sourceKeys[i2];
     if (excluded.indexOf(key) >= 0)
       continue;
     target[key] = source[key];
@@ -4245,7 +4245,7 @@ function _objectWithoutPropertiesLoose$7(source, excluded) {
   return target;
 }
 function Axis(_ref) {
-  var _ref$children = _ref.children, children = _ref$children === void 0 ? AxisRenderer : _ref$children, axisClassName = _ref.axisClassName, _ref$hideAxisLine = _ref.hideAxisLine, hideAxisLine = _ref$hideAxisLine === void 0 ? false : _ref$hideAxisLine, _ref$hideTicks = _ref.hideTicks, hideTicks = _ref$hideTicks === void 0 ? false : _ref$hideTicks, _ref$hideZero = _ref.hideZero, hideZero = _ref$hideZero === void 0 ? false : _ref$hideZero, _ref$left = _ref.left, left = _ref$left === void 0 ? 0 : _ref$left, _ref$numTicks = _ref.numTicks, numTicks = _ref$numTicks === void 0 ? 10 : _ref$numTicks, _ref$orientation = _ref.orientation, orientation = _ref$orientation === void 0 ? Orientation$1.bottom : _ref$orientation, _ref$rangePadding = _ref.rangePadding, rangePadding = _ref$rangePadding === void 0 ? 0 : _ref$rangePadding, scale = _ref.scale, tickFormat2 = _ref.tickFormat, _ref$tickLength = _ref.tickLength, tickLength = _ref$tickLength === void 0 ? 8 : _ref$tickLength, tickValues = _ref.tickValues, _ref$top = _ref.top, top = _ref$top === void 0 ? 0 : _ref$top, restProps = _objectWithoutPropertiesLoose$7(_ref, _excluded$7);
+  var _ref$children = _ref.children, children = _ref$children === void 0 ? AxisRenderer : _ref$children, axisClassName = _ref.axisClassName, _ref$hideAxisLine = _ref.hideAxisLine, hideAxisLine = _ref$hideAxisLine === void 0 ? false : _ref$hideAxisLine, _ref$hideTicks = _ref.hideTicks, hideTicks = _ref$hideTicks === void 0 ? false : _ref$hideTicks, _ref$hideZero = _ref.hideZero, hideZero = _ref$hideZero === void 0 ? false : _ref$hideZero, _ref$left = _ref.left, left = _ref$left === void 0 ? 0 : _ref$left, _ref$numTicks = _ref.numTicks, numTicks = _ref$numTicks === void 0 ? 10 : _ref$numTicks, _ref$orientation = _ref.orientation, orientation = _ref$orientation === void 0 ? Orientation$1.bottom : _ref$orientation, _ref$rangePadding = _ref.rangePadding, rangePadding = _ref$rangePadding === void 0 ? 0 : _ref$rangePadding, scale = _ref.scale, tickFormat2 = _ref.tickFormat, _ref$tickLength = _ref.tickLength, tickLength = _ref$tickLength === void 0 ? 8 : _ref$tickLength, tickValues = _ref.tickValues, _ref$top = _ref.top, top = _ref$top === void 0 ? 0 : _ref$top, restProps = _objectWithoutPropertiesLoose$8(_ref, _excluded$8);
   var format2 = tickFormat2 != null ? tickFormat2 : getTickFormatter(scale);
   var isLeft = orientation === Orientation$1.left;
   var isTop = orientation === Orientation$1.top;
@@ -4290,7 +4290,7 @@ function Axis(_ref) {
     className: cx("visx-axis", axisClassName),
     top,
     left
-  }, children(_extends$a({}, restProps, {
+  }, children(_extends$b({}, restProps, {
     axisFromPoint,
     axisToPoint,
     hideAxisLine,
@@ -4308,11 +4308,11 @@ function Axis(_ref) {
     ticks: ticks2
   })));
 }
-var _excluded$6 = ["axisClassName", "labelOffset", "tickLabelProps", "tickLength"];
-function _extends$9() {
-  _extends$9 = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+var _excluded$7 = ["axisClassName", "labelOffset", "tickLabelProps", "tickLength"];
+function _extends$a() {
+  _extends$a = Object.assign || function(target) {
+    for (var i2 = 1; i2 < arguments.length; i2++) {
+      var source = arguments[i2];
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
@@ -4321,16 +4321,16 @@ function _extends$9() {
     }
     return target;
   };
-  return _extends$9.apply(this, arguments);
+  return _extends$a.apply(this, arguments);
 }
-function _objectWithoutPropertiesLoose$6(source, excluded) {
+function _objectWithoutPropertiesLoose$7(source, excluded) {
   if (source == null)
     return {};
   var target = {};
   var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
+  var key, i2;
+  for (i2 = 0; i2 < sourceKeys.length; i2++) {
+    key = sourceKeys[i2];
     if (excluded.indexOf(key) >= 0)
       continue;
     target[key] = source[key];
@@ -4348,8 +4348,8 @@ var leftTickLabelProps = function leftTickLabelProps2() {
   };
 };
 function AxisLeft(_ref) {
-  var axisClassName = _ref.axisClassName, _ref$labelOffset = _ref.labelOffset, labelOffset = _ref$labelOffset === void 0 ? 36 : _ref$labelOffset, _ref$tickLabelProps = _ref.tickLabelProps, tickLabelProps = _ref$tickLabelProps === void 0 ? leftTickLabelProps : _ref$tickLabelProps, _ref$tickLength = _ref.tickLength, tickLength = _ref$tickLength === void 0 ? 8 : _ref$tickLength, restProps = _objectWithoutPropertiesLoose$6(_ref, _excluded$6);
-  return /* @__PURE__ */ React__default.createElement(Axis, _extends$9({
+  var axisClassName = _ref.axisClassName, _ref$labelOffset = _ref.labelOffset, labelOffset = _ref$labelOffset === void 0 ? 36 : _ref$labelOffset, _ref$tickLabelProps = _ref.tickLabelProps, tickLabelProps = _ref$tickLabelProps === void 0 ? leftTickLabelProps : _ref$tickLabelProps, _ref$tickLength = _ref.tickLength, tickLength = _ref$tickLength === void 0 ? 8 : _ref$tickLength, restProps = _objectWithoutPropertiesLoose$7(_ref, _excluded$7);
+  return /* @__PURE__ */ React__default.createElement(Axis, _extends$a({
     axisClassName: cx("visx-axis-left", axisClassName),
     labelOffset,
     orientation: Orientation$1.left,
@@ -4357,11 +4357,11 @@ function AxisLeft(_ref) {
     tickLength
   }, restProps));
 }
-var _excluded$5 = ["axisClassName", "labelOffset", "tickLabelProps", "tickLength"];
-function _extends$8() {
-  _extends$8 = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+var _excluded$6 = ["axisClassName", "labelOffset", "tickLabelProps", "tickLength"];
+function _extends$9() {
+  _extends$9 = Object.assign || function(target) {
+    for (var i2 = 1; i2 < arguments.length; i2++) {
+      var source = arguments[i2];
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
@@ -4370,16 +4370,16 @@ function _extends$8() {
     }
     return target;
   };
-  return _extends$8.apply(this, arguments);
+  return _extends$9.apply(this, arguments);
 }
-function _objectWithoutPropertiesLoose$5(source, excluded) {
+function _objectWithoutPropertiesLoose$6(source, excluded) {
   if (source == null)
     return {};
   var target = {};
   var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
+  var key, i2;
+  for (i2 = 0; i2 < sourceKeys.length; i2++) {
+    key = sourceKeys[i2];
     if (excluded.indexOf(key) >= 0)
       continue;
     target[key] = source[key];
@@ -4396,8 +4396,8 @@ var bottomTickLabelProps = function bottomTickLabelProps2() {
   };
 };
 function AxisBottom(_ref) {
-  var axisClassName = _ref.axisClassName, _ref$labelOffset = _ref.labelOffset, labelOffset = _ref$labelOffset === void 0 ? 8 : _ref$labelOffset, _ref$tickLabelProps = _ref.tickLabelProps, tickLabelProps = _ref$tickLabelProps === void 0 ? bottomTickLabelProps : _ref$tickLabelProps, _ref$tickLength = _ref.tickLength, tickLength = _ref$tickLength === void 0 ? 8 : _ref$tickLength, restProps = _objectWithoutPropertiesLoose$5(_ref, _excluded$5);
-  return /* @__PURE__ */ React__default.createElement(Axis, _extends$8({
+  var axisClassName = _ref.axisClassName, _ref$labelOffset = _ref.labelOffset, labelOffset = _ref$labelOffset === void 0 ? 8 : _ref$labelOffset, _ref$tickLabelProps = _ref.tickLabelProps, tickLabelProps = _ref$tickLabelProps === void 0 ? bottomTickLabelProps : _ref$tickLabelProps, _ref$tickLength = _ref.tickLength, tickLength = _ref$tickLength === void 0 ? 8 : _ref$tickLength, restProps = _objectWithoutPropertiesLoose$6(_ref, _excluded$6);
+  return /* @__PURE__ */ React__default.createElement(Axis, _extends$9({
     axisClassName: cx("visx-axis-bottom", axisClassName),
     labelOffset,
     orientation: Orientation$1.bottom,
@@ -4408,14 +4408,14 @@ function AxisBottom(_ref) {
 var _default = Line;
 var _react = _interopRequireDefault(React__default);
 var _classnames = _interopRequireDefault(classnames.exports);
-var _excluded$4 = ["from", "to", "fill", "className", "innerRef"];
+var _excluded$5 = ["from", "to", "fill", "className", "innerRef"];
 function _interopRequireDefault(obj) {
   return obj && obj.__esModule ? obj : { default: obj };
 }
-function _extends$7() {
-  _extends$7 = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+function _extends$8() {
+  _extends$8 = Object.assign || function(target) {
+    for (var i2 = 1; i2 < arguments.length; i2++) {
+      var source = arguments[i2];
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
@@ -4424,16 +4424,16 @@ function _extends$7() {
     }
     return target;
   };
-  return _extends$7.apply(this, arguments);
+  return _extends$8.apply(this, arguments);
 }
-function _objectWithoutPropertiesLoose$4(source, excluded) {
+function _objectWithoutPropertiesLoose$5(source, excluded) {
   if (source == null)
     return {};
   var target = {};
   var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
+  var key, i2;
+  for (i2 = 0; i2 < sourceKeys.length; i2++) {
+    key = sourceKeys[i2];
     if (excluded.indexOf(key) >= 0)
       continue;
     target[key] = source[key];
@@ -4447,9 +4447,9 @@ function Line(_ref) {
   } : _ref$from, _ref$to = _ref.to, to = _ref$to === void 0 ? {
     x: 1,
     y: 1
-  } : _ref$to, _ref$fill = _ref.fill, fill = _ref$fill === void 0 ? "transparent" : _ref$fill, className = _ref.className, innerRef = _ref.innerRef, restProps = _objectWithoutPropertiesLoose$4(_ref, _excluded$4);
+  } : _ref$to, _ref$fill = _ref.fill, fill = _ref$fill === void 0 ? "transparent" : _ref$fill, className = _ref.className, innerRef = _ref.innerRef, restProps = _objectWithoutPropertiesLoose$5(_ref, _excluded$5);
   var isRectilinear = from.x === to.x || from.y === to.y;
-  return /* @__PURE__ */ _react.default.createElement("line", _extends$7({
+  return /* @__PURE__ */ _react.default.createElement("line", _extends$8({
     ref: innerRef,
     className: (0, _classnames.default)("visx-line", className),
     x1: from.x,
@@ -4463,11 +4463,11 @@ function Line(_ref) {
 function getScaleBandwidth(scale) {
   return "bandwidth" in scale ? scale.bandwidth() : 0;
 }
-var _excluded$3 = ["top", "left", "scale", "width", "stroke", "strokeWidth", "strokeDasharray", "className", "children", "numTicks", "lineStyle", "offset", "tickValues"];
-function _extends$6() {
-  _extends$6 = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+var _excluded$4 = ["top", "left", "scale", "width", "stroke", "strokeWidth", "strokeDasharray", "className", "children", "numTicks", "lineStyle", "offset", "tickValues"];
+function _extends$7() {
+  _extends$7 = Object.assign || function(target) {
+    for (var i2 = 1; i2 < arguments.length; i2++) {
+      var source = arguments[i2];
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
@@ -4476,16 +4476,16 @@ function _extends$6() {
     }
     return target;
   };
-  return _extends$6.apply(this, arguments);
+  return _extends$7.apply(this, arguments);
 }
-function _objectWithoutPropertiesLoose$3(source, excluded) {
+function _objectWithoutPropertiesLoose$4(source, excluded) {
   if (source == null)
     return {};
   var target = {};
   var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
+  var key, i2;
+  for (i2 = 0; i2 < sourceKeys.length; i2++) {
+    key = sourceKeys[i2];
     if (excluded.indexOf(key) >= 0)
       continue;
     target[key] = source[key];
@@ -4493,7 +4493,7 @@ function _objectWithoutPropertiesLoose$3(source, excluded) {
   return target;
 }
 function GridRows(_ref) {
-  var _ref$top = _ref.top, top = _ref$top === void 0 ? 0 : _ref$top, _ref$left = _ref.left, left = _ref$left === void 0 ? 0 : _ref$left, scale = _ref.scale, width = _ref.width, _ref$stroke = _ref.stroke, stroke = _ref$stroke === void 0 ? "#eaf0f6" : _ref$stroke, _ref$strokeWidth = _ref.strokeWidth, strokeWidth = _ref$strokeWidth === void 0 ? 1 : _ref$strokeWidth, strokeDasharray = _ref.strokeDasharray, className = _ref.className, children = _ref.children, _ref$numTicks = _ref.numTicks, numTicks = _ref$numTicks === void 0 ? 10 : _ref$numTicks, lineStyle = _ref.lineStyle, offset = _ref.offset, tickValues = _ref.tickValues, restProps = _objectWithoutPropertiesLoose$3(_ref, _excluded$3);
+  var _ref$top = _ref.top, top = _ref$top === void 0 ? 0 : _ref$top, _ref$left = _ref.left, left = _ref$left === void 0 ? 0 : _ref$left, scale = _ref.scale, width = _ref.width, _ref$stroke = _ref.stroke, stroke = _ref$stroke === void 0 ? "#eaf0f6" : _ref$stroke, _ref$strokeWidth = _ref.strokeWidth, strokeWidth = _ref$strokeWidth === void 0 ? 1 : _ref$strokeWidth, strokeDasharray = _ref.strokeDasharray, className = _ref.className, children = _ref.children, _ref$numTicks = _ref.numTicks, numTicks = _ref$numTicks === void 0 ? 10 : _ref$numTicks, lineStyle = _ref.lineStyle, offset = _ref.offset, tickValues = _ref.tickValues, restProps = _objectWithoutPropertiesLoose$4(_ref, _excluded$4);
   var ticks2 = tickValues != null ? tickValues : getTicks(scale, numTicks);
   var scaleOffset = (offset != null ? offset : 0) + getScaleBandwidth(scale) / 2;
   var tickLines = ticks2.map(function(d) {
@@ -4516,10 +4516,10 @@ function GridRows(_ref) {
     left
   }, children ? children({
     lines: tickLines
-  }) : tickLines.map(function(_ref2, i) {
+  }) : tickLines.map(function(_ref2, i2) {
     var from = _ref2.from, to = _ref2.to;
-    return /* @__PURE__ */ React__default.createElement(_default, _extends$6({
-      key: "row-line-" + i,
+    return /* @__PURE__ */ React__default.createElement(_default, _extends$7({
+      key: "row-line-" + i2,
       from,
       to,
       stroke,
@@ -4533,17 +4533,110 @@ GridRows.propTypes = {
   tickValues: _pt.array,
   width: _pt.number.isRequired
 };
+var _excluded$3 = ["top", "left", "scale", "height", "stroke", "strokeWidth", "strokeDasharray", "className", "numTicks", "lineStyle", "offset", "tickValues", "children"];
+function _extends$6() {
+  _extends$6 = Object.assign || function(target) {
+    for (var i2 = 1; i2 < arguments.length; i2++) {
+      var source = arguments[i2];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$6.apply(this, arguments);
+}
+function _objectWithoutPropertiesLoose$3(source, excluded) {
+  if (source == null)
+    return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i2;
+  for (i2 = 0; i2 < sourceKeys.length; i2++) {
+    key = sourceKeys[i2];
+    if (excluded.indexOf(key) >= 0)
+      continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+function GridColumns(_ref) {
+  var _ref$top = _ref.top, top = _ref$top === void 0 ? 0 : _ref$top, _ref$left = _ref.left, left = _ref$left === void 0 ? 0 : _ref$left, scale = _ref.scale, height = _ref.height, _ref$stroke = _ref.stroke, stroke = _ref$stroke === void 0 ? "#eaf0f6" : _ref$stroke, _ref$strokeWidth = _ref.strokeWidth, strokeWidth = _ref$strokeWidth === void 0 ? 1 : _ref$strokeWidth, strokeDasharray = _ref.strokeDasharray, className = _ref.className, _ref$numTicks = _ref.numTicks, numTicks = _ref$numTicks === void 0 ? 10 : _ref$numTicks, lineStyle = _ref.lineStyle, offset = _ref.offset, tickValues = _ref.tickValues, children = _ref.children, restProps = _objectWithoutPropertiesLoose$3(_ref, _excluded$3);
+  var ticks2 = tickValues != null ? tickValues : getTicks(scale, numTicks);
+  var scaleOffset = (offset != null ? offset : 0) + getScaleBandwidth(scale) / 2;
+  var tickLines = ticks2.map(function(d) {
+    var _coerceNumber;
+    var x = ((_coerceNumber = coerceNumber(scale(d))) != null ? _coerceNumber : 0) + scaleOffset;
+    return {
+      from: new Point({
+        x,
+        y: 0
+      }),
+      to: new Point({
+        x,
+        y: height
+      })
+    };
+  });
+  return /* @__PURE__ */ React__default.createElement(Group, {
+    className: cx("visx-columns", className),
+    top,
+    left
+  }, children ? children({
+    lines: tickLines
+  }) : tickLines.map(function(_ref2, i2) {
+    var from = _ref2.from, to = _ref2.to;
+    return /* @__PURE__ */ React__default.createElement(_default, _extends$6({
+      key: "column-line-" + i2,
+      from,
+      to,
+      stroke,
+      strokeWidth,
+      strokeDasharray,
+      style: lineStyle
+    }, restProps));
+  }));
+}
+GridColumns.propTypes = {
+  tickValues: _pt.array,
+  height: _pt.number.isRequired
+};
+var crypto = self.crypto || self.msCrypto;
+var url = "-_";
+var i = 36;
+while (i--) {
+  url += i.toString(36);
+}
+i = 36;
+while (i-- - 10) {
+  url += i.toString(36).toUpperCase();
+}
+var index_browser = function(size) {
+  var id = "";
+  var bytes = crypto.getRandomValues(new Uint8Array(size || 21));
+  i = size || 21;
+  while (i--) {
+    id += url[bytes[i] & 63];
+  }
+  return id;
+};
+var nanoid = index_browser;
+function fun() {
+  return propTypes$3.exports.func;
+}
 function impl() {
-  return propTypes$2.exports.object;
+  return propTypes$3.exports.object;
 }
-propTypes$2.exports.oneOfType([propTypes$2.exports.node, propTypes$2.exports.func]);
+propTypes$3.exports.oneOfType([propTypes$3.exports.node, propTypes$3.exports.func]);
 const spsGlobalPropTypes = {
-  children: propTypes$2.exports.oneOfType([propTypes$2.exports.arrayOf(propTypes$2.exports.node), propTypes$2.exports.node]),
-  className: propTypes$2.exports.string,
-  "data-testid": propTypes$2.exports.string,
-  unsafelyReplaceClassName: propTypes$2.exports.string
+  children: propTypes$3.exports.oneOfType([propTypes$3.exports.arrayOf(propTypes$3.exports.node), propTypes$3.exports.node]),
+  className: propTypes$3.exports.string,
+  "data-testid": propTypes$3.exports.string,
+  unsafelyReplaceClassName: propTypes$3.exports.string
 };
-const propsDoc$1 = {
+const propsDoc$2 = {
   barFillColor1: "string",
   barFillColor2: "string",
   barFillColorHover: "string",
@@ -4552,18 +4645,22 @@ const propsDoc$1 = {
   chartWidth: "number",
   barSize: "number",
   yAxis: "ChartAxis",
-  xAxis: "ChartAxis"
+  xAxis: "ChartAxis",
+  yMaxValue: "number",
+  yTickFormat: "(i: number) => string"
 };
-const propTypes$1 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  barFillColor1: propTypes$2.exports.string,
-  barFillColor2: propTypes$2.exports.string,
-  barFillColorHover: propTypes$2.exports.string,
-  chartData: propTypes$2.exports.arrayOf(impl()),
-  chartHeight: propTypes$2.exports.number,
-  chartWidth: propTypes$2.exports.number,
-  barSize: propTypes$2.exports.number,
+const propTypes$2 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  barFillColor1: propTypes$3.exports.string,
+  barFillColor2: propTypes$3.exports.string,
+  barFillColorHover: propTypes$3.exports.string,
+  chartData: propTypes$3.exports.arrayOf(impl()),
+  chartHeight: propTypes$3.exports.number,
+  chartWidth: propTypes$3.exports.number,
+  barSize: propTypes$3.exports.number,
   yAxis: impl(),
-  xAxis: impl()
+  xAxis: impl(),
+  yMaxValue: propTypes$3.exports.number,
+  yTickFormat: fun()
 });
 function SpsBarChart(props) {
   const {
@@ -4580,12 +4677,14 @@ function SpsBarChart(props) {
     },
     xAxis = {
       tickValues: "label"
-    }
+    },
+    yMaxValue,
+    yTickFormat
   } = props;
   const margin = {
     top: 30,
-    bottom: 30,
-    left: 30,
+    bottom: 70,
+    left: 50,
     right: 30
   };
   const xMax = chartWidth - margin.left - margin.right;
@@ -4601,14 +4700,16 @@ function SpsBarChart(props) {
   const yScale = createLinearScale({
     range: [yMax, 0],
     round: true,
-    domain: [0, Math.max(...chartData.map(y))]
+    domain: [0, yMaxValue || Math.max(...chartData.map(y))]
   });
   const compose = (scale, accessor) => (data) => scale(accessor(data));
   const xPoint = compose(xScale, x);
   const yPoint = compose(yScale, y);
+  const colorGradientID = nanoid();
   return /* @__PURE__ */ React.createElement("svg", {
     width: chartWidth,
-    height: chartHeight
+    height: chartHeight,
+    className: "sps-chart-wrapper"
   }, /* @__PURE__ */ React.createElement(GridRows, {
     scale: yScale,
     left: margin.left,
@@ -4616,23 +4717,24 @@ function SpsBarChart(props) {
     numTicks: yAxis.tickCount,
     stroke: DSColors.colors.gray400,
     strokeOpacity: 0.2
+  }), /* @__PURE__ */ React.createElement(LinearGradient, {
+    id: colorGradientID,
+    from: barFillColor1,
+    to: barFillColor2
   }), chartData.map((element, idx) => {
     const barHeight = yMax - yPoint(element);
+    const barID = nanoid();
     return /* @__PURE__ */ React.createElement(Group, {
       key: idx
-    }, /* @__PURE__ */ React.createElement(LinearGradient, {
-      id: "gradient",
-      from: barFillColor1,
-      to: barFillColor2
-    }), /* @__PURE__ */ React.createElement(BarRounded, {
-      id: element.label,
+    }, /* @__PURE__ */ React.createElement(BarRounded, {
+      id: barID,
       top: true,
       radius: 4,
-      x: xPoint(element),
+      x: xPoint(element) + margin.left + (barSize ? (xScale.bandwidth() - barSize) / 2 : 0),
       y: yMax - barHeight,
       height: barHeight,
       width: barSize || xScale.bandwidth(),
-      fill: "url(#gradient)",
+      fill: `url(#${colorGradientID})`,
       onMouseEnter: (e) => {
         const targetElement = e.target;
         targetElement.style.fill = barFillColorHover;
@@ -4646,6 +4748,7 @@ function SpsBarChart(props) {
       left: margin.left,
       hideTicks: true,
       numTicks: yAxis.tickCount,
+      tickFormat: yTickFormat || void 0,
       stroke: DSColors.colors.gray300,
       tickLabelProps: () => ({
         textAnchor: "end",
@@ -4656,6 +4759,7 @@ function SpsBarChart(props) {
     }), /* @__PURE__ */ React.createElement(AxisBottom, {
       top: yMax,
       scale: xScale,
+      left: margin.left,
       hideTicks: true,
       hideAxisLine: true,
       stroke: DSColors.colors.gray300,
@@ -4663,48 +4767,117 @@ function SpsBarChart(props) {
         textAnchor: "middle",
         fontSize: "12px",
         fontWeight: "200",
-        fill: DSColors.colors.gray400
+        fill: DSColors.colors.gray400,
+        width: xScale.bandwidth() + xScale.bandwidth() / 2,
+        lineHeight: "15px",
+        verticalAnchor: "start"
       })
     }), /* @__PURE__ */ React.createElement(SpsTooltip, {
-      for: element.label
+      for: barID
     }, element.label));
   }));
 }
 Object.assign(SpsBarChart, {
-  props: propsDoc$1,
-  propTypes: propTypes$1,
+  props: propsDoc$2,
+  propTypes: propTypes$2,
   displayName: "SpsBarChart"
 });
 const SpsBarChartExamples = {
-  vertical: {
-    label: "Vertical",
+  general: {
+    label: "General Usage",
+    description: ({ NavigateTo, Link }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, "Use Bar Charts to visualize the comparison of a dataset across multiple categories or subjects. When using bar charts, the dataset should attempt to provide a clear answer to a clear question (i.e. avoid comparing multiple or unrelated datasets in a single chart)."), /* @__PURE__ */ React.createElement("p", null, "Bar Charts should not be used when the visualization of the data is too complex or the number of categories too numerous to be easily understood at a glance. In these cases consider the use of more general lists of content such as a", " ", /* @__PURE__ */ React.createElement(NavigateTo, {
+      to: "Tables"
+    }, "Table"), "."), /* @__PURE__ */ React.createElement("h5", null, "Color"), /* @__PURE__ */ React.createElement("p", null, "The number of colors used should be directly related to the number of comparisons being made. When comparing categories across a single data set, only one color should be used. When comparing multiple categories across multiple series of data, use the appropriate number of colors to the number of categories. For more details on color usage visit the", " ", /* @__PURE__ */ React.createElement(Link, {
+      to: "/style-and-layout/colors"
+    }, "Colors"), " section."), /* @__PURE__ */ React.createElement("h5", null, "Interaction"), /* @__PURE__ */ React.createElement("p", null, "Charts should include interactivity on hover to give users insight to specifics of the data. Tooltips can be used to display expanded definitions or additional related data points for the selected category."))
+  },
+  horizontal: {
+    label: "Horizontal Bar Chart",
     description: code`
-            <p>Vertical bar chart example.</p>
+            <p>In Horizontal Bar Charts categories are listed vertically on the Y-axis and with data points are plotted horizontally on the X-axis.</p>
         `,
     examples: {
       vertical: {
         react: code`
                     function DemoComponent() {
                         const data = [
-                            { value: 5, label: "Company 1" },
-                            { value: 12, label: "Company 2" },
-                            { value: 21, label: "Company 3" },
-                            { value: 25, label: "Company 4" },
-                            { value: 20, label: "Company 5" },
-                        ];
+                            { value: 69, label: "Aktie Sports" },
+                            { value: 69, label: "Dicks Sporting Goods" },
+                            { value: 64, label: "FGL Sports" },
+                            { value: 62, label: "Foot Asylum" },
+                            { value: 55, label: "Hervis" },
+                            { value: 51, label: "Lovell Rugby" },
+                            { value: 48, label: "Modells Sporting Goods" },
+                            { value: 44, label: "Perry Sport" },
+                            { value: 44, label: "Sportman Warhouse Australia" },
+                            { value: 44, label: "Perry Sport 2" },
+                        ]
+
+                        xTickFormat = (i) => \`\${i}\${i !== 0 ? "%" : ""}\`
+
+                        return (
+                            <SpsHorizontalBarChart
+                                chartData={data}
+                                chartHeight={523}
+                                chartWidth={838}
+                                barFillColor1 = "#32BE6F"
+                                barFillColor2 = "#32BE6F80"
+                                barFillColorHover = "#289858"
+                                yAxis={{
+                                    tickValues: 'label',
+                                }}
+                                xAxis={{
+                                    tickValues: 'value',
+                                    tickCount: '10'
+                                }}
+                                marginLeft={135}
+                                xMaxValue={100}
+                                barSize={20}
+                                xTickFormat={xTickFormat}
+                            />
+                        )
+                    }
+                `
+      }
+    }
+  },
+  vertical: {
+    label: "Vertical Bar Chart",
+    description: code`
+            <p>In Vertical Bar Charts data points are plotted vertically on the Y-axis and with categories being listed horizontally on the X-axis.</p>
+            <p>If the categories become too crowded along the X-axis, opt for a Horizontal Bar Chart instead.</p>
+        `,
+    examples: {
+      vertical: {
+        react: code`
+                    function DemoComponent() {
+                      const data = [
+                        { value: 112, label: "Aktie Sports" },
+                        { value: 100, label: "Dicks Sporting Goods" },
+                        { value: 90, label: "FGL Sports" },
+                        { value: 82, label: "Foot Asylum" },
+                        { value: 76, label: "Hervis" },
+                        { value: 64, label: "Lovell Rugby" },
+                        { value: 64, label: "Modells Sporting Goods" },
+                      ]
 
                         return (
                             <SpsBarChart
                                 chartData={data}
-                                chartHeight={400}
-                                chartWidth={800}
+                                chartHeight={364}
+                                chartWidth={838}
+                                barFillColor1 = "#9B4B87"
+                                barFillColor2 = "#9B4B8780"
+                                barFillColorHover = "#7C3C6C"
                                 yAxis={{
                                     tickValues: 'value',
-                                    tickCount: '3',
+                                    tickCount: '5',
                                 }}
                                 xAxis={{
                                     tickValues: 'label',
                                 }}
+                                yMaxValue={125}
+                                barSize={45}
                             />
                         )
                     }
@@ -4713,11 +4886,171 @@ const SpsBarChartExamples = {
     }
   }
 };
+const propsDoc$1 = {
+  barFillColor1: "string",
+  barFillColor2: "string",
+  barFillColorHover: "string",
+  chartData: "ChartDataObject[]",
+  chartHeight: "number",
+  chartWidth: "number",
+  barSize: "number",
+  yAxis: "ChartAxis",
+  xAxis: "ChartAxis",
+  marginLeft: "number",
+  xMaxValue: "number",
+  xTickFormat: "(i: number) => string"
+};
+const propTypes$1 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
+  barFillColor1: propTypes$3.exports.string,
+  barFillColor2: propTypes$3.exports.string,
+  barFillColorHover: propTypes$3.exports.string,
+  chartData: propTypes$3.exports.arrayOf(impl()),
+  chartHeight: propTypes$3.exports.number,
+  chartWidth: propTypes$3.exports.number,
+  barSize: propTypes$3.exports.number,
+  yAxis: impl(),
+  xAxis: impl(),
+  marginLeft: propTypes$3.exports.number,
+  xMaxValue: propTypes$3.exports.number,
+  xTickFormat: fun()
+});
+function SpsHorizontalBarChart(props) {
+  const {
+    barFillColor1 = DSColors.colors.blue200,
+    barFillColor2 = "#007DB880",
+    barFillColorHover = DSColors.colors.blue300,
+    chartData,
+    chartHeight,
+    chartWidth,
+    barSize,
+    yAxis = {
+      tickValues: "label"
+    },
+    xAxis = {
+      tickValues: "value",
+      tickCount: 3
+    },
+    marginLeft = 30,
+    xMaxValue,
+    xTickFormat
+  } = props;
+  const margin = {
+    top: 30,
+    bottom: 30,
+    left: marginLeft,
+    right: 30
+  };
+  const xMax = chartWidth - margin.left - margin.right;
+  const yMax = chartHeight - margin.top - margin.bottom;
+  const x = (d) => d[xAxis.tickValues];
+  const y = (d) => d[yAxis.tickValues];
+  const yScale = createBandScale({
+    range: [0, yMax],
+    round: true,
+    domain: chartData.map(y),
+    padding: 0.4
+  });
+  const xScale = createLinearScale({
+    range: [0, xMax],
+    round: true,
+    domain: [0, xMaxValue || Math.max(...chartData.map(x))]
+  });
+  const compose = (scale, accessor) => (data) => scale(accessor(data));
+  const xPoint = compose(xScale, x);
+  const yPoint = compose(yScale, y);
+  const colorGradientID = nanoid();
+  const bgColorGradientID = nanoid();
+  return /* @__PURE__ */ React.createElement("svg", {
+    width: chartWidth,
+    height: chartHeight,
+    className: "sps-chart-wrapper"
+  }, /* @__PURE__ */ React.createElement(GridColumns, {
+    scale: xScale,
+    left: margin.left,
+    height: yMax,
+    stroke: DSColors.colors.gray400,
+    strokeOpacity: 0.2
+  }), /* @__PURE__ */ React.createElement(LinearGradient, {
+    id: bgColorGradientID,
+    from: "#D2D4D580",
+    to: "#D2D4D5",
+    vertical: false
+  }), /* @__PURE__ */ React.createElement(LinearGradient, {
+    id: colorGradientID,
+    from: barFillColor2,
+    to: barFillColor1,
+    vertical: false
+  }), chartData.map((element, idx) => {
+    const barWidth = xPoint(element);
+    const barID = nanoid();
+    return /* @__PURE__ */ React.createElement(Group, {
+      key: idx
+    }, /* @__PURE__ */ React.createElement("rect", {
+      x: margin.left,
+      y: yPoint(element) + (barSize ? (yScale.bandwidth() - barSize) / 2 : 0),
+      height: barSize || yScale.bandwidth(),
+      width: xMax,
+      fill: `url(#${bgColorGradientID})`
+    }), /* @__PURE__ */ React.createElement(BarRounded, {
+      id: barID,
+      right: true,
+      radius: 4,
+      x: margin.left,
+      y: yPoint(element) + (barSize ? (yScale.bandwidth() - barSize) / 2 : 0),
+      height: barSize || yScale.bandwidth(),
+      width: barWidth,
+      fill: `url(#${colorGradientID})`,
+      onMouseEnter: (e) => {
+        const targetElement = e.target;
+        targetElement.style.fill = barFillColorHover;
+      },
+      onMouseLeave: (e) => {
+        const targetElement = e.target;
+        targetElement.style.fill = null;
+      }
+    }), /* @__PURE__ */ React.createElement(AxisLeft, {
+      scale: yScale,
+      left: margin.left,
+      hideTicks: true,
+      hideAxisLine: true,
+      stroke: DSColors.colors.gray300,
+      tickLabelProps: () => ({
+        textAnchor: "end",
+        fontSize: "12px",
+        fill: DSColors.colors.gray400,
+        fontWeight: "200",
+        width: margin.left,
+        verticalAnchor: "middle"
+      })
+    }), /* @__PURE__ */ React.createElement(AxisBottom, {
+      top: yMax,
+      scale: xScale,
+      left: margin.left,
+      hideTicks: true,
+      numTicks: xAxis.tickCount,
+      tickFormat: xTickFormat || void 0,
+      stroke: DSColors.colors.gray300,
+      tickLabelProps: () => ({
+        textAnchor: "middle",
+        fontSize: "12px",
+        fontWeight: "200",
+        fill: DSColors.colors.gray400
+      })
+    }), /* @__PURE__ */ React.createElement(SpsTooltip, {
+      for: barID
+    }, element.label));
+  }));
+}
+Object.assign(SpsHorizontalBarChart, {
+  props: propsDoc$1,
+  propTypes: propTypes$1,
+  displayName: "SpsHorizontalBarChart"
+});
 var _excluded$2 = ["flexDirection", "alignItems", "margin", "display", "children"];
 function _extends$5() {
   _extends$5 = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+    for (var i2 = 1; i2 < arguments.length; i2++) {
+      var source = arguments[i2];
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
@@ -4733,9 +5066,9 @@ function _objectWithoutPropertiesLoose$2(source, excluded) {
     return {};
   var target = {};
   var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
+  var key, i2;
+  for (i2 = 0; i2 < sourceKeys.length; i2++) {
+    key = sourceKeys[i2];
     if (excluded.indexOf(key) >= 0)
       continue;
     target[key] = source[key];
@@ -4763,8 +5096,8 @@ LegendItem.propTypes = {
 var _excluded$1 = ["flex", "label", "margin", "align", "children"];
 function _extends$4() {
   _extends$4 = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+    for (var i2 = 1; i2 < arguments.length; i2++) {
+      var source = arguments[i2];
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
@@ -4780,9 +5113,9 @@ function _objectWithoutPropertiesLoose$1(source, excluded) {
     return {};
   var target = {};
   var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
+  var key, i2;
+  for (i2 = 0; i2 < sourceKeys.length; i2++) {
+    key = sourceKeys[i2];
     if (excluded.indexOf(key) >= 0)
       continue;
     target[key] = source[key];
@@ -4810,8 +5143,8 @@ LegendLabel.propTypes = {
 };
 function _extends$3() {
   _extends$3 = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+    for (var i2 = 1; i2 < arguments.length; i2++) {
+      var source = arguments[i2];
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
@@ -4886,8 +5219,8 @@ ShapeLine.propTypes = {
 };
 function _extends$2() {
   _extends$2 = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+    for (var i2 = 1; i2 < arguments.length; i2++) {
+      var source = arguments[i2];
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
@@ -4932,8 +5265,8 @@ function renderShape(_ref) {
 }
 function _extends$1() {
   _extends$1 = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+    for (var i2 = 1; i2 < arguments.length; i2++) {
+      var source = arguments[i2];
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
@@ -4981,11 +5314,11 @@ function valueOrIdentityString(_) {
 }
 function labelTransformFactory(_ref) {
   var scale = _ref.scale, labelFormat = _ref.labelFormat;
-  return function(d, i) {
+  return function(d, i2) {
     return {
       datum: d,
-      index: i,
-      text: "" + labelFormat(d, i),
+      index: i2,
+      text: "" + labelFormat(d, i2),
       value: scale(d)
     };
   };
@@ -4993,8 +5326,8 @@ function labelTransformFactory(_ref) {
 var _excluded = ["className", "style", "scale", "shape", "domain", "fill", "size", "labelFormat", "labelTransform", "shapeWidth", "shapeHeight", "shapeMargin", "shapeStyle", "labelAlign", "labelFlex", "labelMargin", "itemMargin", "direction", "itemDirection", "legendLabelProps", "children"];
 function _extends() {
   _extends = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+    for (var i2 = 1; i2 < arguments.length; i2++) {
+      var source = arguments[i2];
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
@@ -5010,9 +5343,9 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     return {};
   var target = {};
   var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
+  var key, i2;
+  for (i2 = 0; i2 < sourceKeys.length; i2++) {
+    key = sourceKeys[i2];
     if (excluded.indexOf(key) >= 0)
       continue;
     target[key] = source[key];
@@ -5037,9 +5370,9 @@ function Legend(_ref) {
     style: _extends({}, style, {
       flexDirection: direction
     })
-  }, labels.map(function(label, i) {
+  }, labels.map(function(label, i2) {
     return /* @__PURE__ */ React__default.createElement(LegendItem, _extends({
-      key: "legend-" + label.text + "-" + i,
+      key: "legend-" + label.text + "-" + i2,
       margin: itemMargin,
       flexDirection: itemDirection
     }, legendItemProps), /* @__PURE__ */ React__default.createElement(LegendShape, {
@@ -5047,8 +5380,8 @@ function Legend(_ref) {
       height: shapeHeight,
       width: shapeWidth,
       margin: shapeMargin,
-      item: domain[i],
-      itemIndex: i,
+      item: domain[i2],
+      itemIndex: i2,
       label,
       fill,
       size,
@@ -5088,12 +5421,12 @@ const propsDoc = {
   total: "number"
 };
 const propTypes = {
-  chartData: propTypes$2.exports.arrayOf(impl()),
-  chartHeight: propTypes$2.exports.number,
-  chartWidth: propTypes$2.exports.number,
-  target: propTypes$2.exports.number,
-  goal: propTypes$2.exports.number,
-  total: propTypes$2.exports.number
+  chartData: propTypes$3.exports.arrayOf(impl()),
+  chartHeight: propTypes$3.exports.number,
+  chartWidth: propTypes$3.exports.number,
+  target: propTypes$3.exports.number,
+  goal: propTypes$3.exports.number,
+  total: propTypes$3.exports.number
 };
 function SpsStackedHorizontalBarChart(props) {
   const {
@@ -5138,7 +5471,7 @@ function SpsStackedHorizontalBarChart(props) {
   const yMax = chartHeight - margin.top - margin.bottom;
   xScale.rangeRound([0, xMax]);
   yScale.rangeRound([yMax, 0]);
-  const tickFormat2 = (i) => `${i}%`;
+  const tickFormat2 = (i2) => `${i2}%`;
   return /* @__PURE__ */ React.createElement("div", {
     style: { width: chartWidth },
     className: "position-relative"
@@ -5309,7 +5642,8 @@ const SpsStackedHorizontalBarChartExamples = {
 };
 const MANIFEST = {
   "Bar Chart": {
-    components: [SpsBarChart],
+    description: () => /* @__PURE__ */ React.createElement("p", null, "Bar Charts are a data visualization used to compare sets of data to more easily analyze questions or identify gaps oriented toward user goals. ", /* @__PURE__ */ React.createElement("br", null), "Each chart should focus on answering a single question about the dataset."),
+    components: [SpsBarChart, SpsHorizontalBarChart],
     examples: SpsBarChartExamples
   },
   "Stacked Horizontal Bar Chart": {
@@ -5317,4 +5651,4 @@ const MANIFEST = {
     examples: SpsStackedHorizontalBarChartExamples
   }
 };
-export { MANIFEST, SpsBarChart, SpsBarChartExamples, SpsStackedHorizontalBarChart, SpsStackedHorizontalBarChartExamples };
+export { MANIFEST, SpsBarChart, SpsBarChartExamples, SpsHorizontalBarChart, SpsStackedHorizontalBarChart, SpsStackedHorizontalBarChartExamples };