@spscommerce/ds-react-charts 4.34.2-ie → 4.36.1

package/lib/index.es.js

@@ -1,3 +1,22 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import * as React from "react";
 import React__default, { useMemo } from "react";
 import * as DSColors from "@spscommerce/ds-colors";
@@ -4611,57 +4630,13 @@ function impl() {
   return propTypes$3.exports.object;
 }
 propTypes$3.exports.oneOfType([propTypes$3.exports.node, propTypes$3.exports.func]);
-var spsGlobalPropTypes = {
+const spsGlobalPropTypes = {
   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
 };
-var __assign$1 = function() {
-  __assign$1 = Object.assign || function(t) {
-    for (var s, i2 = 1, n = arguments.length; i2 < n; i2++) {
-      s = arguments[i2];
-      for (var p in s)
-        if (Object.prototype.hasOwnProperty.call(s, p))
-          t[p] = s[p];
-    }
-    return t;
-  };
-  return __assign$1.apply(this, arguments);
-};
-var __read$2 = function(o, n) {
-  var m = typeof Symbol === "function" && o[Symbol.iterator];
-  if (!m)
-    return o;
-  var i2 = m.call(o), r, ar = [], e;
-  try {
-    while ((n === void 0 || n-- > 0) && !(r = i2.next()).done)
-      ar.push(r.value);
-  } catch (error) {
-    e = { error };
-  } finally {
-    try {
-      if (r && !r.done && (m = i2["return"]))
-        m.call(i2);
-    } finally {
-      if (e)
-        throw e.error;
-    }
-  }
-  return ar;
-};
-var __spreadArray$2 = function(to, from, pack) {
-  if (pack || arguments.length === 2)
-    for (var i2 = 0, l = from.length, ar; i2 < l; i2++) {
-      if (ar || !(i2 in from)) {
-        if (!ar)
-          ar = Array.prototype.slice.call(from, 0, i2);
-        ar[i2] = from[i2];
-      }
-    }
-  return to.concat(ar || Array.prototype.slice.call(from));
-};
-var propsDoc$2 = {
+const propsDoc$2 = {
   barFillColor1: "string",
   barFillColor2: "string",
   barFillColorHover: "string",
@@ -4674,51 +4649,84 @@ var propsDoc$2 = {
   yMaxValue: "number",
   yTickFormat: "(i: number) => string"
 };
-var propTypes$2 = __assign$1(__assign$1({}, 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(), yMaxValue: propTypes$3.exports.number, yTickFormat: fun() });
+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(),
+  yMaxValue: propTypes$3.exports.number,
+  yTickFormat: fun()
+});
 function SpsBarChart(props) {
-  var _a = props.barFillColor1, barFillColor1 = _a === void 0 ? DSColors.colors.blue200 : _a, _b = props.barFillColor2, barFillColor2 = _b === void 0 ? "#007DB880" : _b, _c = props.barFillColorHover, barFillColorHover = _c === void 0 ? DSColors.colors.blue300 : _c, chartData = props.chartData, chartHeight = props.chartHeight, chartWidth = props.chartWidth, barSize = props.barSize, _d = props.yAxis, yAxis = _d === void 0 ? {
-    tickValues: "value",
-    tickCount: 3
-  } : _d, _e = props.xAxis, xAxis = _e === void 0 ? {
-    tickValues: "label"
-  } : _e, yMaxValue = props.yMaxValue, yTickFormat = props.yTickFormat;
-  var margin = {
+  const {
+    barFillColor1 = DSColors.colors.blue200,
+    barFillColor2 = "#007DB880",
+    barFillColorHover = DSColors.colors.blue300,
+    chartData,
+    chartHeight,
+    chartWidth,
+    barSize,
+    yAxis = {
+      tickValues: "value",
+      tickCount: 3
+    },
+    xAxis = {
+      tickValues: "label"
+    },
+    yMaxValue,
+    yTickFormat
+  } = props;
+  const margin = {
     top: 30,
     bottom: 70,
     left: 50,
     right: 30
   };
-  var xMax = chartWidth - margin.left - margin.right;
-  var yMax = chartHeight - margin.top - margin.bottom;
-  var x = function(d) {
-    return d[xAxis.tickValues];
-  };
-  var y = function(d) {
-    return d[yAxis.tickValues];
-  };
-  var xScale = createBandScale({
+  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 xScale = createBandScale({
     range: [0, xMax],
     round: true,
     domain: chartData.map(x),
     padding: 0.4
   });
-  var yScale = createLinearScale({
+  const yScale = createLinearScale({
     range: [yMax, 0],
     round: true,
-    domain: [0, yMaxValue || Math.max.apply(Math, __spreadArray$2([], __read$2(chartData.map(y)), false))]
+    domain: [0, yMaxValue || Math.max(...chartData.map(y))]
   });
-  var compose = function(scale, accessor) {
-    return function(data) {
-      return scale(accessor(data));
-    };
-  };
-  var xPoint = compose(xScale, x);
-  var yPoint = compose(yScale, y);
-  var colorGradientID = nanoid();
-  return React.createElement("svg", { width: chartWidth, height: chartHeight, className: "sps-chart-wrapper" }, React.createElement(GridRows, { scale: yScale, left: margin.left, width: xMax, numTicks: yAxis.tickCount, stroke: DSColors.colors.gray400, strokeOpacity: 0.2 }), React.createElement(LinearGradient, { id: colorGradientID, from: barFillColor1, to: barFillColor2 }), chartData.map(function(element, idx) {
-    var barHeight = yMax - yPoint(element);
-    var barID = nanoid();
-    return React.createElement(Group, { key: idx }, React.createElement(BarRounded, {
+  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,
+    className: "sps-chart-wrapper"
+  }, /* @__PURE__ */ React.createElement(GridRows, {
+    scale: yScale,
+    left: margin.left,
+    width: xMax,
+    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(BarRounded, {
       id: barID,
       top: true,
       radius: 4,
@@ -4726,24 +4734,36 @@ function SpsBarChart(props) {
       y: yMax - barHeight,
       height: barHeight,
       width: barSize || xScale.bandwidth(),
-      fill: "url(#" + colorGradientID + ")",
-      onMouseEnter: function(e) {
-        var targetElement = e.target;
+      fill: `url(#${colorGradientID})`,
+      onMouseEnter: (e) => {
+        const targetElement = e.target;
         targetElement.style.fill = barFillColorHover;
       },
-      onMouseLeave: function(e) {
-        var targetElement = e.target;
+      onMouseLeave: (e) => {
+        const targetElement = e.target;
         targetElement.style.fill = null;
       }
-    }), React.createElement(AxisLeft, { scale: yScale, left: margin.left, hideTicks: true, numTicks: yAxis.tickCount, tickFormat: yTickFormat || void 0, stroke: DSColors.colors.gray300, tickLabelProps: function() {
-      return {
+    }), /* @__PURE__ */ React.createElement(AxisLeft, {
+      scale: yScale,
+      left: margin.left,
+      hideTicks: true,
+      numTicks: yAxis.tickCount,
+      tickFormat: yTickFormat || void 0,
+      stroke: DSColors.colors.gray300,
+      tickLabelProps: () => ({
         textAnchor: "end",
         fontSize: "12px",
         fill: DSColors.colors.gray400,
         fontWeight: "200"
-      };
-    } }), React.createElement(AxisBottom, { top: yMax, scale: xScale, left: margin.left, hideTicks: true, hideAxisLine: true, stroke: DSColors.colors.gray300, tickLabelProps: function() {
-      return {
+      })
+    }), /* @__PURE__ */ React.createElement(AxisBottom, {
+      top: yMax,
+      scale: xScale,
+      left: margin.left,
+      hideTicks: true,
+      hideAxisLine: true,
+      stroke: DSColors.colors.gray300,
+      tickLabelProps: () => ({
         textAnchor: "middle",
         fontSize: "12px",
         fontWeight: "200",
@@ -4751,8 +4771,10 @@ function SpsBarChart(props) {
         width: xScale.bandwidth() + xScale.bandwidth() / 2,
         lineHeight: "15px",
         verticalAnchor: "start"
-      };
-    } }), React.createElement(SpsTooltip, { for: barID }, element.label));
+      })
+    }), /* @__PURE__ */ React.createElement(SpsTooltip, {
+      for: barID
+    }, element.label));
   }));
 }
 Object.assign(SpsBarChart, {
@@ -4760,28 +4782,23 @@ Object.assign(SpsBarChart, {
   propTypes: propTypes$2,
   displayName: "SpsBarChart"
 });
-var __makeTemplateObject$1 = function(cooked, raw) {
-  if (Object.defineProperty) {
-    Object.defineProperty(cooked, "raw", { value: raw });
-  } else {
-    cooked.raw = raw;
-  }
-  return cooked;
-};
-var SpsBarChartExamples = {
+const SpsBarChartExamples = {
   general: {
     label: "General Usage",
-    description: function(_a) {
-      var NavigateTo = _a.NavigateTo, Link = _a.Link;
-      return React.createElement(React.Fragment, null, 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)."), 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", " ", React.createElement(NavigateTo, { to: "Tables" }, "Table"), "."), React.createElement("h5", null, "Color"), 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", " ", React.createElement(Link, { to: "/style-and-layout/colors" }, "Colors"), " section."), React.createElement("h5", null, "Interaction"), 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."));
-    }
+    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(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject$1(["\n            <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>\n        "], ["\n            <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>\n        "]))),
+    description: code`
+            <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(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject$1([`
+        react: code`
                     function DemoComponent() {
                         const data = [
                             { value: 69, label: "Aktie Sports" },
@@ -4820,87 +4837,19 @@ var SpsBarChartExamples = {
                             />
                         )
                     }
-                `], [`
-                    function DemoComponent() {
-                        const data = [
-                            { 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(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject$1(["\n            <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>\n            <p>If the categories become too crowded along the X-axis, opt for a Horizontal Bar Chart instead.</p>\n        "], ["\n            <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>\n            <p>If the categories become too crowded along the X-axis, opt for a Horizontal Bar Chart instead.</p>\n        "]))),
+    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(templateObject_4 || (templateObject_4 = __makeTemplateObject$1([`
-                    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={364}
-                                chartWidth={838}
-                                barFillColor1 = "#9B4B87"
-                                barFillColor2 = "#9B4B8780"
-                                barFillColorHover = "#7C3C6C"
-                                yAxis={{
-                                    tickValues: 'value',
-                                    tickCount: '5',
-                                }}
-                                xAxis={{
-                                    tickValues: 'label',
-                                }}
-                                yMaxValue={125}
-                                barSize={45}
-                            />
-                        )
-                    }
-                `], [`
+        react: code`
                     function DemoComponent() {
                       const data = [
                         { value: 112, label: "Aktie Sports" },
@@ -4932,57 +4881,12 @@ var SpsBarChartExamples = {
                             />
                         )
                     }
-                `])))
+                `
       }
     }
   }
 };
-var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4;
-var __assign = function() {
-  __assign = Object.assign || function(t) {
-    for (var s, i2 = 1, n = arguments.length; i2 < n; i2++) {
-      s = arguments[i2];
-      for (var p in s)
-        if (Object.prototype.hasOwnProperty.call(s, p))
-          t[p] = s[p];
-    }
-    return t;
-  };
-  return __assign.apply(this, arguments);
-};
-var __read$1 = function(o, n) {
-  var m = typeof Symbol === "function" && o[Symbol.iterator];
-  if (!m)
-    return o;
-  var i2 = m.call(o), r, ar = [], e;
-  try {
-    while ((n === void 0 || n-- > 0) && !(r = i2.next()).done)
-      ar.push(r.value);
-  } catch (error) {
-    e = { error };
-  } finally {
-    try {
-      if (r && !r.done && (m = i2["return"]))
-        m.call(i2);
-    } finally {
-      if (e)
-        throw e.error;
-    }
-  }
-  return ar;
-};
-var __spreadArray$1 = function(to, from, pack) {
-  if (pack || arguments.length === 2)
-    for (var i2 = 0, l = from.length, ar; i2 < l; i2++) {
-      if (ar || !(i2 in from)) {
-        if (!ar)
-          ar = Array.prototype.slice.call(from, 0, i2);
-        ar[i2] = from[i2];
-      }
-    }
-  return to.concat(ar || Array.prototype.slice.call(from));
-};
-var propsDoc$1 = {
+const propsDoc$1 = {
   barFillColor1: "string",
   barFillColor2: "string",
   barFillColorHover: "string",
@@ -4996,58 +4900,98 @@ var propsDoc$1 = {
   xMaxValue: "number",
   xTickFormat: "(i: number) => string"
 };
-var propTypes$1 = __assign(__assign({}, 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() });
+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) {
-  var _a = props.barFillColor1, barFillColor1 = _a === void 0 ? DSColors.colors.blue200 : _a, _b = props.barFillColor2, barFillColor2 = _b === void 0 ? "#007DB880" : _b, _c = props.barFillColorHover, barFillColorHover = _c === void 0 ? DSColors.colors.blue300 : _c, chartData = props.chartData, chartHeight = props.chartHeight, chartWidth = props.chartWidth, barSize = props.barSize, _d = props.yAxis, yAxis = _d === void 0 ? {
-    tickValues: "label"
-  } : _d, _e = props.xAxis, xAxis = _e === void 0 ? {
-    tickValues: "value",
-    tickCount: 3
-  } : _e, _f = props.marginLeft, marginLeft = _f === void 0 ? 30 : _f, xMaxValue = props.xMaxValue, xTickFormat = props.xTickFormat;
-  var margin = {
+  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
   };
-  var xMax = chartWidth - margin.left - margin.right;
-  var yMax = chartHeight - margin.top - margin.bottom;
-  var x = function(d) {
-    return d[xAxis.tickValues];
-  };
-  var y = function(d) {
-    return d[yAxis.tickValues];
-  };
-  var yScale = createBandScale({
+  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
   });
-  var xScale = createLinearScale({
+  const xScale = createLinearScale({
     range: [0, xMax],
     round: true,
-    domain: [0, xMaxValue || Math.max.apply(Math, __spreadArray$1([], __read$1(chartData.map(x)), false))]
+    domain: [0, xMaxValue || Math.max(...chartData.map(x))]
   });
-  var compose = function(scale, accessor) {
-    return function(data) {
-      return scale(accessor(data));
-    };
-  };
-  var xPoint = compose(xScale, x);
-  var yPoint = compose(yScale, y);
-  var colorGradientID = nanoid();
-  var bgColorGradientID = nanoid();
-  return React.createElement("svg", { width: chartWidth, height: chartHeight, className: "sps-chart-wrapper" }, React.createElement(GridColumns, { scale: xScale, left: margin.left, height: yMax, stroke: DSColors.colors.gray400, strokeOpacity: 0.2 }), React.createElement(LinearGradient, { id: bgColorGradientID, from: "#D2D4D580", to: "#D2D4D5", vertical: false }), React.createElement(LinearGradient, { id: colorGradientID, from: barFillColor2, to: barFillColor1, vertical: false }), chartData.map(function(element, idx) {
-    var barWidth = xPoint(element);
-    var barID = nanoid();
-    return React.createElement(Group, { key: idx }, React.createElement("rect", {
+  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 + ")"
-    }), React.createElement(BarRounded, {
+      fill: `url(#${bgColorGradientID})`
+    }), /* @__PURE__ */ React.createElement(BarRounded, {
       id: barID,
       right: true,
       radius: 4,
@@ -5055,32 +4999,46 @@ function SpsHorizontalBarChart(props) {
       y: yPoint(element) + (barSize ? (yScale.bandwidth() - barSize) / 2 : 0),
       height: barSize || yScale.bandwidth(),
       width: barWidth,
-      fill: "url(#" + colorGradientID + ")",
-      onMouseEnter: function(e) {
-        var targetElement = e.target;
+      fill: `url(#${colorGradientID})`,
+      onMouseEnter: (e) => {
+        const targetElement = e.target;
         targetElement.style.fill = barFillColorHover;
       },
-      onMouseLeave: function(e) {
-        var targetElement = e.target;
+      onMouseLeave: (e) => {
+        const targetElement = e.target;
         targetElement.style.fill = null;
       }
-    }), React.createElement(AxisLeft, { scale: yScale, left: margin.left, hideTicks: true, hideAxisLine: true, stroke: DSColors.colors.gray300, tickLabelProps: function() {
-      return {
+    }), /* @__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"
-      };
-    } }), React.createElement(AxisBottom, { top: yMax, scale: xScale, left: margin.left, hideTicks: true, numTicks: xAxis.tickCount, tickFormat: xTickFormat || void 0, stroke: DSColors.colors.gray300, tickLabelProps: function() {
-      return {
+      })
+    }), /* @__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
-      };
-    } }), React.createElement(SpsTooltip, { for: barID }, element.label));
+      })
+    }), /* @__PURE__ */ React.createElement(SpsTooltip, {
+      for: barID
+    }, element.label));
   }));
 }
 Object.assign(SpsHorizontalBarChart, {
@@ -5454,39 +5412,7 @@ Legend.propTypes = {
 function Ordinal(props) {
   return /* @__PURE__ */ React__default.createElement(Legend, props);
 }
-var __read = function(o, n) {
-  var m = typeof Symbol === "function" && o[Symbol.iterator];
-  if (!m)
-    return o;
-  var i2 = m.call(o), r, ar = [], e;
-  try {
-    while ((n === void 0 || n-- > 0) && !(r = i2.next()).done)
-      ar.push(r.value);
-  } catch (error) {
-    e = { error };
-  } finally {
-    try {
-      if (r && !r.done && (m = i2["return"]))
-        m.call(i2);
-    } finally {
-      if (e)
-        throw e.error;
-    }
-  }
-  return ar;
-};
-var __spreadArray = function(to, from, pack) {
-  if (pack || arguments.length === 2)
-    for (var i2 = 0, l = from.length, ar; i2 < l; i2++) {
-      if (ar || !(i2 in from)) {
-        if (!ar)
-          ar = Array.prototype.slice.call(from, 0, i2);
-        ar[i2] = from[i2];
-      }
-    }
-  return to.concat(ar || Array.prototype.slice.call(from));
-};
-var propsDoc = {
+const propsDoc = {
   chartData: "ChartDataProps[]",
   chartHeight: "number",
   chartWidth: "number",
@@ -5494,7 +5420,7 @@ var propsDoc = {
   goal: "number",
   total: "number"
 };
-var propTypes = {
+const propTypes = {
   chartData: propTypes$3.exports.arrayOf(impl()),
   chartHeight: propTypes$3.exports.number,
   chartWidth: propTypes$3.exports.number,
@@ -5503,116 +5429,233 @@ var propTypes = {
   total: propTypes$3.exports.number
 };
 function SpsStackedHorizontalBarChart(props) {
-  var chartData = props.chartData, chartHeight = props.chartHeight, chartWidth = props.chartWidth, goal = props.goal, target = props.target, total = props.total;
-  var margin = {
+  const {
+    chartData,
+    chartHeight,
+    chartWidth,
+    goal,
+    target,
+    total
+  } = props;
+  const margin = {
     top: 25,
     bottom: 40,
     left: 30,
     right: 30
   };
   function hexToRGB(hex2, alpha) {
-    var r = parseInt(hex2.slice(1, 3), 16);
-    var g = parseInt(hex2.slice(3, 5), 16);
-    var b = parseInt(hex2.slice(5, 7), 16);
+    const r = parseInt(hex2.slice(1, 3), 16);
+    const g = parseInt(hex2.slice(3, 5), 16);
+    const b = parseInt(hex2.slice(5, 7), 16);
     if (alpha) {
-      return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
+      return `rgba(${r}, ${g}, ${b}, ${alpha})`;
     }
-    return "rgb(" + r + ", " + g + ", " + b + ")";
-  }
-  var colors = chartData.map(function(c) {
-    return c.color;
-  });
-  var keys = chartData.map(function(c) {
-    return c.label;
-  });
-  var xScale = createLinearScale({
+    return `rgb(${r}, ${g}, ${b})`;
+  }
+  const colors = chartData.map((c) => c.color);
+  const keys = chartData.map((c) => c.label);
+  const values = chartData.map((c) => c.value);
+  const valuesSum = values.reduce((pv, cv) => pv + cv, 0);
+  const relativeValues = values.map((c) => Math.round(c / valuesSum * 100 * 10) / 10);
+  const xScale = createLinearScale({
     domain: [0, 100],
     nice: true
   });
-  var data = [chartData.reduce(function(obj, item) {
-    var _a;
-    return Object.assign(obj, (_a = {}, _a[item.label] = item.value, _a));
-  }, {})];
-  var yScale = createBandScale({
-    domain: data,
+  const absoluteData = [chartData.reduce((obj, item) => Object.assign(obj, { [item.label]: item.value }), {})];
+  const relativeData = [chartData.reduce((obj, item, index) => Object.assign(obj, { [item.label]: relativeValues[index] }), {})];
+  const yScale = createBandScale({
+    domain: absoluteData,
     padding: 0.2
   });
-  var colorScale = createOrdinalScale({
-    domain: keys.map(function(c) {
-      return c + ": " + data[0][c] + "%";
-    }),
-    range: __spreadArray([], __read(colors), false)
+  const colorScale = createOrdinalScale({
+    domain: keys.map((c) => `${c}: ${relativeData[0][c]}%`),
+    range: [...colors]
   });
-  var xMax = chartWidth - margin.left - margin.right;
-  var yMax = chartHeight - margin.top - margin.bottom;
+  const xMax = chartWidth - margin.left - margin.right;
+  const yMax = chartHeight - margin.top - margin.bottom;
   xScale.rangeRound([0, xMax]);
   yScale.rangeRound([yMax, 0]);
-  var tickFormat2 = function(i2) {
-    return i2 + "%";
-  };
-  return React.createElement("div", { style: { width: chartWidth }, className: "position-relative" }, React.createElement(Ordinal, { className: "fs-12 lh-18 gray600", scale: colorScale, direction: "row", shape: "rect", shapeWidth: 30, shapeHeight: 4, shapeMargin: "0 5px 0 0", shapeStyle: function() {
-    return { borderRadius: "2px" };
-  }, labelMargin: "0", itemMargin: "0 10px 0 10px", style: {
-    display: "flex",
-    justifyContent: "center",
-    fontSize: "16px"
-  } }), goal && target && total && React.createElement("div", { className: "position-absolute", style: {
-    top: "26px",
-    width: chartWidth - margin.left - margin.right + "px",
-    margin: "0 " + margin.left + "px",
-    height: "12px"
-  } }, React.createElement("i", { className: "sps-icon sps-icon-chevron-down green200 fs-14 position-absolute", style: { left: "calc(" + total + "% - 5px)" } }), React.createElement("i", { className: "sps-icon sps-icon-chevron-down gray600 fs-14 position-absolute", style: { left: "calc(" + target + "% - 5px)" } }), React.createElement("i", { className: "sps-icon sps-icon-chevron-down red200 fs-14 position-absolute", style: { left: "calc(" + goal + "% - 5px)" } })), React.createElement("svg", { width: chartWidth, height: chartHeight }, React.createElement(Group, { top: margin.top, left: margin.left }, React.createElement(BarStackHorizontal, { data, keys, height: yMax, y: function() {
-    return "";
-  }, xScale, yScale, color: colorScale }, function(barStacks) {
-    return barStacks.map(function(barStack) {
-      return barStack.bars.map(function(bar) {
-        return React.createElement(Group, { key: "barstack-horizontal-" + barStack.index + "-" + bar.index }, React.createElement(LinearGradient, { id: "gradient-" + barStack.index, vertical: false, from: hexToRGB(bar.color, 0.5), to: bar.color }), React.createElement("rect", { id: bar.key, x: bar.x !== 0 ? bar.x + 1.5 : bar.x, y: bar.y, width: bar.x !== 0 ? barStacks.length - 1 === barStack.index ? bar.width - 1.5 : bar.width - 3 : bar.width - 1.5, height: 20, fill: "url(#gradient-" + barStack.index + ")" }, React.createElement(SpsTooltip, { for: bar.key }, bar.key, React.createElement("div", { className: "text-center" }, data[0][barStack.key]))));
-      });
-    });
-  }), React.createElement(AxisBottom, { top: yMax + 6, tickFormat: tickFormat2, scale: xScale, stroke: DSColors.colors.gray400, tickStroke: DSColors.colors.gray400, tickLength: 4, tickLineProps: {
-    y1: -11,
-    y2: 5
-  }, tickLabelProps: function() {
-    return {
+  const tickFormat2 = (i2) => `${i2}%`;
+  return /* @__PURE__ */ React.createElement("div", {
+    style: { width: chartWidth },
+    className: "position-relative"
+  }, /* @__PURE__ */ React.createElement(Ordinal, {
+    className: "fs-12 lh-18 gray600",
+    scale: colorScale,
+    direction: "row",
+    shape: "rect",
+    shapeWidth: 30,
+    shapeHeight: 4,
+    shapeMargin: "0 5px 0 0",
+    shapeStyle: () => ({ borderRadius: "2px" }),
+    labelMargin: "0",
+    itemMargin: "0 10px 0 10px",
+    style: {
+      display: "flex",
+      justifyContent: "center",
+      fontSize: "16px"
+    }
+  }), goal && target && total && /* @__PURE__ */ React.createElement("div", {
+    className: "position-absolute",
+    style: {
+      top: "26px",
+      width: `${chartWidth - margin.left - margin.right}px`,
+      margin: `0 ${margin.left}px`,
+      height: "12px"
+    }
+  }, /* @__PURE__ */ React.createElement("i", {
+    className: "sps-icon sps-icon-chevron-down green200 fs-14 position-absolute",
+    style: { left: `calc(${total}% - 5px)` }
+  }), /* @__PURE__ */ React.createElement("i", {
+    className: "sps-icon sps-icon-chevron-down gray600 fs-14 position-absolute",
+    style: { left: `calc(${target}% - 5px)` }
+  }), /* @__PURE__ */ React.createElement("i", {
+    className: "sps-icon sps-icon-chevron-down red200 fs-14 position-absolute",
+    style: { left: `calc(${goal}% - 5px)` }
+  })), /* @__PURE__ */ React.createElement("svg", {
+    width: chartWidth,
+    height: chartHeight
+  }, /* @__PURE__ */ React.createElement(Group, {
+    top: margin.top,
+    left: margin.left
+  }, /* @__PURE__ */ React.createElement(BarStackHorizontal, {
+    data: relativeData,
+    keys,
+    height: yMax,
+    y: () => "",
+    xScale,
+    yScale,
+    color: colorScale
+  }, (barStacks) => barStacks.map((barStack) => barStack.bars.map((bar) => {
+    let width = null;
+    if (bar.x === 0 || barStacks.length - 1 === barStack.index) {
+      width = bar.width - 1.5;
+    } else {
+      width = bar.width - 3;
+    }
+    if (width < 0) {
+      width = 0;
+    }
+    return /* @__PURE__ */ React.createElement(Group, {
+      key: `barstack-horizontal-${barStack.index}-${bar.index}`
+    }, /* @__PURE__ */ React.createElement(LinearGradient, {
+      id: `gradient-${barStack.index}`,
+      vertical: false,
+      from: hexToRGB(bar.color, 0.5),
+      to: bar.color
+    }), /* @__PURE__ */ React.createElement("rect", {
+      id: bar.key,
+      x: bar.x !== 0 ? bar.x + 1.5 : bar.x,
+      y: bar.y,
+      width,
+      height: 20,
+      fill: `url(#gradient-${barStack.index})`
+    }, /* @__PURE__ */ React.createElement(SpsTooltip, {
+      for: bar.key
+    }, bar.key, /* @__PURE__ */ React.createElement("div", {
+      className: "text-center"
+    }, absoluteData[0][barStack.key]))));
+  }))), /* @__PURE__ */ React.createElement(AxisBottom, {
+    top: yMax + 6,
+    tickFormat: tickFormat2,
+    scale: xScale,
+    stroke: DSColors.colors.gray400,
+    tickStroke: DSColors.colors.gray400,
+    tickLength: 4,
+    tickLineProps: {
+      y1: -11,
+      y2: 5
+    },
+    tickLabelProps: () => ({
       fill: DSColors.colors.gray400,
       fontSize: 12,
       textAnchor: "middle"
-    };
-  } }))), goal && target && total && React.createElement("footer", { className: "fs-12 lh-18 gray600 d-flex justify-content-center" }, React.createElement("span", { className: "d-flex align-items-center" }, React.createElement("i", { className: "sps-icon sps-icon-chevron-down green200 fs-14 mr-1" }), "Current Total:", React.createElement("span", { className: "sps-text-semibold gray600 ml-1" }, total, "%")), React.createElement("span", { className: "ml-3 d-flex align-items-center" }, React.createElement("i", { className: "sps-icon sps-icon-chevron-down gray600 fs-14 mr-1" }), "Current Target:", React.createElement("span", { className: "sps-text-semibold gray600 ml-1" }, target, "%")), React.createElement("span", { className: "ml-3 d-flex align-items-center" }, React.createElement("i", { className: "sps-icon sps-icon-chevron-down red200 fs-14 mr-1" }), "Goal:", React.createElement("span", { className: "sps-text-semibold gray600 ml-1" }, goal, "%"))));
+    })
+  }))), goal && target && total && /* @__PURE__ */ React.createElement("footer", {
+    className: "fs-12 lh-18 gray600 d-flex justify-content-center"
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: "d-flex align-items-center"
+  }, /* @__PURE__ */ React.createElement("i", {
+    className: "sps-icon sps-icon-chevron-down green200 fs-14 mr-1"
+  }), "Current Total:", /* @__PURE__ */ React.createElement("span", {
+    className: "sps-text-semibold gray600 ml-1"
+  }, total, "%")), /* @__PURE__ */ React.createElement("span", {
+    className: "ml-3 d-flex align-items-center"
+  }, /* @__PURE__ */ React.createElement("i", {
+    className: "sps-icon sps-icon-chevron-down gray600 fs-14 mr-1"
+  }), "Current Target:", /* @__PURE__ */ React.createElement("span", {
+    className: "sps-text-semibold gray600 ml-1"
+  }, target, "%")), /* @__PURE__ */ React.createElement("span", {
+    className: "ml-3 d-flex align-items-center"
+  }, /* @__PURE__ */ React.createElement("i", {
+    className: "sps-icon sps-icon-chevron-down red200 fs-14 mr-1"
+  }), "Goal:", /* @__PURE__ */ React.createElement("span", {
+    className: "sps-text-semibold gray600 ml-1"
+  }, goal, "%"))));
 }
 Object.assign(SpsStackedHorizontalBarChart, {
   props: propsDoc,
   propTypes,
   displayName: "SpsStackedHorizontalBarChart"
 });
-var __makeTemplateObject = function(cooked, raw) {
-  if (Object.defineProperty) {
-    Object.defineProperty(cooked, "raw", { value: raw });
-  } else {
-    cooked.raw = raw;
-  }
-  return cooked;
-};
-var SpsStackedHorizontalBarChartExamples = {
+const SpsStackedHorizontalBarChartExamples = {
   basic: {
     label: "Basic",
-    description: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            <p>Stacked horizontal bar chart example.</p>\n        "], ["\n            <p>Stacked horizontal bar chart example.</p>\n        "]))),
+    description: code`
+            <p>Stacked horizontal bar chart example.</p>
+        `,
     examples: {
       basic: {
-        react: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        // The sum of the values must be 100\n                        const data = [\n                            {label: 'Label 1', value: 10, color: '#6c5efb'},\n                            {label: 'Label 2', value: 7, color: '#ff9632'},\n                            {label: 'Label 3', value: 35, color: '#a44afe'},\n                            {label: 'Label 4', value: 29, color: '#32be6f'},\n                            {label: 'Label 5', value: 19, color: '#a5a9ab'}\n                        ];\n\n                        return (\n                            <SpsStackedHorizontalBarChart\n                                chartData={data}\n                                chartHeight={100}\n                                chartWidth={800}\n                            />\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        // The sum of the values must be 100\n                        const data = [\n                            {label: 'Label 1', value: 10, color: '#6c5efb'},\n                            {label: 'Label 2', value: 7, color: '#ff9632'},\n                            {label: 'Label 3', value: 35, color: '#a44afe'},\n                            {label: 'Label 4', value: 29, color: '#32be6f'},\n                            {label: 'Label 5', value: 19, color: '#a5a9ab'}\n                        ];\n\n                        return (\n                            <SpsStackedHorizontalBarChart\n                                chartData={data}\n                                chartHeight={100}\n                                chartWidth={800}\n                            />\n                        )\n                    }\n                "])))
+        react: code`
+                    function DemoComponent() {
+                        const data = [
+                            {label: 'Label 1', value: 0.9, color: '#6c5efb'},
+                            {label: 'Label 2', value: 7, color: '#ff9632'},
+                            {label: 'Label 3', value: 15, color: '#a44afe'},
+                            {label: 'Label 4', value: 0, color: '#32be6f'},
+                            {label: 'Label 5', value: 10, color: '#a5a9ab'}
+                        ];
+
+                        return (
+                            <SpsStackedHorizontalBarChart
+                                chartData={data}
+                                chartHeight={100}
+                                chartWidth={800}
+                            />
+                        )
+                    }
+                `
       },
       vertical: {
-        react: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        // The sum of the values must be 100\n                        const data = [\n                            {label: 'Label 1', value: 10, color: '#6c5efb'},\n                            {label: 'Label 2', value: 7, color: '#ff9632'},\n                            {label: 'Label 3', value: 35, color: '#a44afe'},\n                            {label: 'Label 4', value: 29, color: '#32be6f'},\n                            {label: 'Label 5', value: 19, color: '#a5a9ab'}\n                        ];\n\n                        return (\n                            <SpsStackedHorizontalBarChart\n                                chartData={data}\n                                chartHeight={100}\n                                chartWidth={800}\n                                total={81}\n                                target={67}\n                                goal={99}\n                            />\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        // The sum of the values must be 100\n                        const data = [\n                            {label: 'Label 1', value: 10, color: '#6c5efb'},\n                            {label: 'Label 2', value: 7, color: '#ff9632'},\n                            {label: 'Label 3', value: 35, color: '#a44afe'},\n                            {label: 'Label 4', value: 29, color: '#32be6f'},\n                            {label: 'Label 5', value: 19, color: '#a5a9ab'}\n                        ];\n\n                        return (\n                            <SpsStackedHorizontalBarChart\n                                chartData={data}\n                                chartHeight={100}\n                                chartWidth={800}\n                                total={81}\n                                target={67}\n                                goal={99}\n                            />\n                        )\n                    }\n                "])))
+        react: code`
+                    function DemoComponent() {
+                        const data = [
+                            {label: 'Label 1', value: 10, color: '#6c5efb'},
+                            {label: 'Label 2', value: 7, color: '#ff9632'},
+                            {label: 'Label 3', value: 35, color: '#a44afe'},
+                            {label: 'Label 4', value: 29, color: '#32be6f'},
+                            {label: 'Label 5', value: 19, color: '#a5a9ab'}
+                        ];
+
+                        return (
+                            <SpsStackedHorizontalBarChart
+                                chartData={data}
+                                chartHeight={100}
+                                chartWidth={800}
+                                total={81}
+                                target={67}
+                                goal={99}
+                            />
+                        )
+                    }
+                `
       }
     }
   }
 };
-var templateObject_1, templateObject_2, templateObject_3;
-var MANIFEST = {
+const MANIFEST = {
   "Bar Chart": {
-    description: function() {
-      return 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. ", React.createElement("br", null), "Each chart should focus on answering a single question about the dataset.");
-    },
+    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
   },