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

package/dist/out-tsc/bar/SpsBarChart.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import type { ChartDataObject, ChartAxis } from "@spscommerce/ds-shared";
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    barFillColor1: PropTypes.Requireable<string>;
+    barFillColor2: PropTypes.Requireable<string>;
+    barFillColorHover: PropTypes.Requireable<string>;
+    chartData: PropTypes.Requireable<ChartDataObject[]>;
+    chartHeight: PropTypes.Requireable<number>;
+    chartWidth: PropTypes.Requireable<number>;
+    barSize: PropTypes.Requireable<number>;
+    yAxis: PropTypes.Requireable<ChartAxis>;
+    xAxis: PropTypes.Requireable<ChartAxis>;
+    yMaxValue: PropTypes.Requireable<number>;
+    yTickFormat: PropTypes.Requireable<(i: number) => string>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsBarChartProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsBarChart(props: SpsBarChartProps): JSX.Element;
+export {};

package/dist/out-tsc/bar/SpsBarChart.examples.d.ts

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

package/dist/out-tsc/bar/SpsBarChart.examples.js

@@ -0,0 +1,49 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from "react";
+import { code } from "@spscommerce/utils";
+export var 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.")));
+        },
+    },
+    horizontal: {
+        label: "Horizontal Bar Chart",
+        description: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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        "]))),
+        examples: {
+            vertical: {
+                react: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const data = [\n                            { value: 69, label: \"Aktie Sports\" },\n                            { value: 69, label: \"Dicks Sporting Goods\" },\n                            { value: 64, label: \"FGL Sports\" },\n                            { value: 62, label: \"Foot Asylum\" },\n                            { value: 55, label: \"Hervis\" },\n                            { value: 51, label: \"Lovell Rugby\" },\n                            { value: 48, label: \"Modells Sporting Goods\" },\n                            { value: 44, label: \"Perry Sport\" },\n                            { value: 44, label: \"Sportman Warhouse Australia\" },\n                            { value: 44, label: \"Perry Sport 2\" },\n                        ]\n\n                        xTickFormat = (i) => `${i}${i !== 0 ? \"%\" : \"\"}`\n\n                        return (\n                            <SpsHorizontalBarChart\n                                chartData={data}\n                                chartHeight={523}\n                                chartWidth={838}\n                                barFillColor1 = \"#32BE6F\"\n                                barFillColor2 = \"#32BE6F80\"\n                                barFillColorHover = \"#289858\"\n                                yAxis={{\n                                    tickValues: 'label',\n                                }}\n                                xAxis={{\n                                    tickValues: 'value',\n                                    tickCount: '10'\n                                }}\n                                marginLeft={135}\n                                xMaxValue={100}\n                                barSize={20}\n                                xTickFormat={xTickFormat}\n                            />\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const data = [\n                            { value: 69, label: \"Aktie Sports\" },\n                            { value: 69, label: \"Dicks Sporting Goods\" },\n                            { value: 64, label: \"FGL Sports\" },\n                            { value: 62, label: \"Foot Asylum\" },\n                            { value: 55, label: \"Hervis\" },\n                            { value: 51, label: \"Lovell Rugby\" },\n                            { value: 48, label: \"Modells Sporting Goods\" },\n                            { value: 44, label: \"Perry Sport\" },\n                            { value: 44, label: \"Sportman Warhouse Australia\" },\n                            { value: 44, label: \"Perry Sport 2\" },\n                        ]\n\n                        xTickFormat = (i) => \\`\\${i}\\${i !== 0 ? \"%\" : \"\"}\\`\n\n                        return (\n                            <SpsHorizontalBarChart\n                                chartData={data}\n                                chartHeight={523}\n                                chartWidth={838}\n                                barFillColor1 = \"#32BE6F\"\n                                barFillColor2 = \"#32BE6F80\"\n                                barFillColorHover = \"#289858\"\n                                yAxis={{\n                                    tickValues: 'label',\n                                }}\n                                xAxis={{\n                                    tickValues: 'value',\n                                    tickCount: '10'\n                                }}\n                                marginLeft={135}\n                                xMaxValue={100}\n                                barSize={20}\n                                xTickFormat={xTickFormat}\n                            />\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+    vertical: {
+        label: "Vertical Bar Chart",
+        description: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\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        "]))),
+        examples: {
+            vertical: {
+                react: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                    function DemoComponent() {\n                      const data = [\n                        { value: 112, label: \"Aktie Sports\" },\n                        { value: 100, label: \"Dicks Sporting Goods\" },\n                        { value: 90, label: \"FGL Sports\" },\n                        { value: 82, label: \"Foot Asylum\" },\n                        { value: 76, label: \"Hervis\" },\n                        { value: 64, label: \"Lovell Rugby\" },\n                        { value: 64, label: \"Modells Sporting Goods\" },\n                      ]\n\n                        return (\n                            <SpsBarChart\n                                chartData={data}\n                                chartHeight={364}\n                                chartWidth={838}\n                                barFillColor1 = \"#9B4B87\"\n                                barFillColor2 = \"#9B4B8780\"\n                                barFillColorHover = \"#7C3C6C\"\n                                yAxis={{\n                                    tickValues: 'value',\n                                    tickCount: '5',\n                                }}\n                                xAxis={{\n                                    tickValues: 'label',\n                                }}\n                                yMaxValue={125}\n                                barSize={45}\n                            />\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                      const data = [\n                        { value: 112, label: \"Aktie Sports\" },\n                        { value: 100, label: \"Dicks Sporting Goods\" },\n                        { value: 90, label: \"FGL Sports\" },\n                        { value: 82, label: \"Foot Asylum\" },\n                        { value: 76, label: \"Hervis\" },\n                        { value: 64, label: \"Lovell Rugby\" },\n                        { value: 64, label: \"Modells Sporting Goods\" },\n                      ]\n\n                        return (\n                            <SpsBarChart\n                                chartData={data}\n                                chartHeight={364}\n                                chartWidth={838}\n                                barFillColor1 = \"#9B4B87\"\n                                barFillColor2 = \"#9B4B8780\"\n                                barFillColorHover = \"#7C3C6C\"\n                                yAxis={{\n                                    tickValues: 'value',\n                                    tickCount: '5',\n                                }}\n                                xAxis={{\n                                    tickValues: 'label',\n                                }}\n                                yMaxValue={125}\n                                barSize={45}\n                            />\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+//# sourceMappingURL=SpsBarChart.examples.js.map

package/dist/out-tsc/bar/SpsBarChart.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsBarChart.examples.js","sourceRoot":"","sources":["../../../src/bar/SpsBarChart.examples.tsx"],"names":[],"mappings":";;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,mBAAmB,GAAoB;IAClD,OAAO,EAAE;QACP,KAAK,EAAE,eAAe;QACtB,WAAW,EAAE,UAAC,EAAoB;gBAAlB,UAAU,gBAAA,EAAE,IAAI,UAAA;YAAO,OAAA,CACrC;gBACE,0SAKI;gBACJ;;oBAG0E,GAAG;oBAC3E,oBAAC,UAAU,IAAC,EAAE,EAAC,QAAQ,YAAmB;wBACxC;gBACJ,wCAAc;gBACd;;oBAK4C,GAAG;oBAC7C,oBAAC,IAAI,IAAC,EAAE,EAAC,0BAA0B,aAAc;gCAC/C;gBACJ,8CAAoB;gBACpB,gPAII,CACH,CACJ;QA9BsC,CA8BtC;KACF;IACD,UAAU,EAAE;QACV,KAAK,EAAE,sBAAsB;QAC7B,WAAW,EAAE,IAAI,wOAAA,qKAEZ,IAAA;QACL,QAAQ,EAAE;YACR,QAAQ,EAAE;gBACR,KAAK,EAAE,IAAI,m/DAAA,w7DAuCF,IAAA;aACV;SACF;KACF;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,oBAAoB;QAC3B,WAAW,EAAE,IAAI,2VAAA,wRAGZ,IAAA;QACL,QAAQ,EAAE;YACR,QAAQ,EAAE;gBACR,KAAK,EAAE,IAAI,gjDAAA,6+CAgCF,IAAA;aACV;SACF;KACF;CACF,CAAC"}

package/dist/out-tsc/bar/SpsBarChart.js

@@ -0,0 +1,137 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            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 = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import * as React from "react";
+import { Group } from "@visx/group";
+import { BarRounded } from "@visx/shape";
+import { scaleLinear, scaleBand } from "@visx/scale";
+import { LinearGradient } from "@visx/gradient";
+import { AxisBottom, AxisLeft } from "@visx/axis";
+import { GridRows } from "@visx/grid";
+import * as DSColors from "@spscommerce/ds-colors";
+import { SpsTooltip } from "@spscommerce/ds-react";
+import nanoid from "nanoid";
+import * as PropTypes from "../prop-types";
+var propsDoc = {
+    barFillColor1: "string",
+    barFillColor2: "string",
+    barFillColorHover: "string",
+    chartData: "ChartDataObject[]",
+    chartHeight: "number",
+    chartWidth: "number",
+    barSize: "number",
+    yAxis: "ChartAxis",
+    xAxis: "ChartAxis",
+    yMaxValue: "number",
+    yTickFormat: "(i: number) => string",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { barFillColor1: PropTypes.string, barFillColor2: PropTypes.string, barFillColorHover: PropTypes.string, chartData: PropTypes.arrayOf(PropTypes.impl()), chartHeight: PropTypes.number, chartWidth: PropTypes.number, barSize: PropTypes.number, yAxis: PropTypes.impl(), xAxis: PropTypes.impl(), yMaxValue: PropTypes.number, yTickFormat: PropTypes.fun() });
+export 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 = {
+        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 = scaleBand({
+        range: [0, xMax],
+        round: true,
+        domain: chartData.map(x),
+        padding: 0.4,
+    });
+    var yScale = scaleLinear({
+        range: [yMax, 0],
+        round: true,
+        domain: [0, yMaxValue || Math.max.apply(Math, __spreadArray([], __read(chartData.map(y)), false))],
+    });
+    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, { id: barID, top: true, radius: 4, 
+                    /*
+                     * When we have barSize defined we need to recalculate the x position
+                     * so the label is centered in the middle of the bar
+                     */
+                    x: xPoint(element) + margin.left
+                        + (barSize ? ((xScale.bandwidth() - barSize) / 2) : 0), y: yMax - barHeight, height: barHeight, width: barSize || xScale.bandwidth(), fill: "url(#" + colorGradientID + ")", onMouseEnter: function (e) {
+                        var targetElement = e.target;
+                        targetElement.style.fill = barFillColorHover;
+                    }, onMouseLeave: function (e) {
+                        var targetElement = e.target;
+                        targetElement.style.fill = null;
+                    } }),
+                React.createElement(AxisLeft, { scale: yScale, left: margin.left, hideTicks: true, numTicks: yAxis.tickCount, tickFormat: yTickFormat || undefined, stroke: DSColors.colors.gray300, tickLabelProps: function () { return ({
+                        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 ({
+                        textAnchor: "middle",
+                        fontSize: "12px",
+                        fontWeight: "200",
+                        fill: DSColors.colors.gray400,
+                        width: xScale.bandwidth() + (xScale.bandwidth() / 2),
+                        lineHeight: "15px",
+                        verticalAnchor: "start",
+                    }); } }),
+                React.createElement(SpsTooltip, { for: barID }, element.label)));
+        })));
+}
+Object.assign(SpsBarChart, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsBarChart",
+});
+//# sourceMappingURL=SpsBarChart.js.map

package/dist/out-tsc/bar/SpsBarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsBarChart.js","sourceRoot":"","sources":["../../../src/bar/SpsBarChart.tsx"],"names":[],"mappings":"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"}

package/dist/out-tsc/bar/SpsHorizontalBarChart.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import type { ChartDataObject, ChartAxis } from "@spscommerce/ds-shared";
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    barFillColor1: PropTypes.Requireable<string>;
+    barFillColor2: PropTypes.Requireable<string>;
+    barFillColorHover: PropTypes.Requireable<string>;
+    chartData: PropTypes.Requireable<ChartDataObject[]>;
+    chartHeight: PropTypes.Requireable<number>;
+    chartWidth: PropTypes.Requireable<number>;
+    barSize: PropTypes.Requireable<number>;
+    yAxis: PropTypes.Requireable<ChartAxis>;
+    xAxis: PropTypes.Requireable<ChartAxis>;
+    marginLeft: PropTypes.Requireable<number>;
+    xMaxValue: PropTypes.Requireable<number>;
+    xTickFormat: PropTypes.Requireable<(i: number) => string>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsHorizontalBarChartProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsHorizontalBarChart(props: SpsHorizontalBarChartProps): JSX.Element;
+export {};

package/dist/out-tsc/bar/SpsHorizontalBarChart.js

@@ -0,0 +1,144 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            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 = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import * as React from "react";
+import { Group } from "@visx/group";
+import { BarRounded } from "@visx/shape";
+import { scaleLinear, scaleBand } from "@visx/scale";
+import { LinearGradient } from "@visx/gradient";
+import { AxisBottom, AxisLeft } from "@visx/axis";
+import { GridColumns } from "@visx/grid";
+import * as DSColors from "@spscommerce/ds-colors";
+import { SpsTooltip } from "@spscommerce/ds-react";
+import nanoid from "nanoid";
+import * as PropTypes from "../prop-types";
+var propsDoc = {
+    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",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { barFillColor1: PropTypes.string, barFillColor2: PropTypes.string, barFillColorHover: PropTypes.string, chartData: PropTypes.arrayOf(PropTypes.impl()), chartHeight: PropTypes.number, chartWidth: PropTypes.number, barSize: PropTypes.number, yAxis: PropTypes.impl(), xAxis: PropTypes.impl(), marginLeft: PropTypes.number, xMaxValue: PropTypes.number, xTickFormat: PropTypes.fun() });
+export 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 = {
+        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 = scaleBand({
+        range: [0, yMax],
+        round: true,
+        domain: chartData.map(y),
+        padding: 0.4,
+    });
+    var xScale = scaleLinear({
+        range: [0, xMax],
+        round: true,
+        domain: [0, xMaxValue || Math.max.apply(Math, __spreadArray([], __read(chartData.map(x)), false))],
+    });
+    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", { x: margin.left, 
+                    /*
+                     * When we have barSize defined we need to recalculate the y position
+                     * so the label is centered in the middle of the bar
+                     */
+                    y: yPoint(element) + (barSize ? ((yScale.bandwidth() - barSize) / 2) : 0), height: barSize || yScale.bandwidth(), width: xMax, fill: "url(#" + bgColorGradientID + ")" }),
+                React.createElement(BarRounded, { id: barID, right: true, radius: 4, x: margin.left, 
+                    /*
+                     * When we have barSize defined we need to recalculate the y position
+                     * so the label is centered in the middle of the bar
+                     */
+                    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;
+                        targetElement.style.fill = barFillColorHover;
+                    }, onMouseLeave: function (e) {
+                        var 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 ({
+                        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 || undefined, stroke: DSColors.colors.gray300, tickLabelProps: function () { return ({
+                        textAnchor: "middle",
+                        fontSize: "12px",
+                        fontWeight: "200",
+                        fill: DSColors.colors.gray400,
+                    }); } }),
+                React.createElement(SpsTooltip, { for: barID }, element.label)));
+        })));
+}
+Object.assign(SpsHorizontalBarChart, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsHorizontalBarChart",
+});
+//# sourceMappingURL=SpsHorizontalBarChart.js.map

package/dist/out-tsc/bar/SpsHorizontalBarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsHorizontalBarChart.js","sourceRoot":"","sources":["../../../src/bar/SpsHorizontalBarChart.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzC,OAAO,KAAK,QAAQ,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,MAAM,MAAM,QAAQ,CAAC;AAC5B,OAAO,KAAK,SAAS,MAAM,eAAe,CAAC;AAE3C,IAAM,QAAQ,GAAG;IACf,aAAa,EAAE,QAAQ;IACvB,aAAa,EAAE,QAAQ;IACvB,iBAAiB,EAAE,QAAQ;IAC3B,SAAS,EAAE,mBAAmB;IAC9B,WAAW,EAAE,QAAQ;IACrB,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE,QAAQ;IACjB,KAAK,EAAE,WAAW;IAClB,KAAK,EAAE,WAAW;IAClB,UAAU,EAAE,QAAQ;IACpB,SAAS,EAAE,QAAQ;IACnB,WAAW,EAAE,uBAAuB;CACrC,CAAC;AAEF,IAAM,SAAS,yBACV,SAAS,CAAC,kBAAkB,KAC/B,aAAa,EAAE,SAAS,CAAC,MAAM,EAC/B,aAAa,EAAE,SAAS,CAAC,MAAM,EAC/B,iBAAiB,EAAE,SAAS,CAAC,MAAM,EACnC,SAAS,EAAE,SAAS,CAAC,OAAO,CAAkB,SAAS,CAAC,IAAI,EAAmB,CAAC,EAChF,WAAW,EAAE,SAAS,CAAC,MAAM,EAC7B,UAAU,EAAE,SAAS,CAAC,MAAM,EAC5B,OAAO,EAAE,SAAS,CAAC,MAAM,EACzB,KAAK,EAAE,SAAS,CAAC,IAAI,EAAa,EAClC,KAAK,EAAE,SAAS,CAAC,IAAI,EAAa,EAClC,UAAU,EAAE,SAAS,CAAC,MAAM,EAC5B,SAAS,EAAE,SAAS,CAAC,MAAM,EAC3B,WAAW,EAAE,SAAS,CAAC,GAAG,EAAyB,GACpD,CAAC;AAIF,MAAM,UAAU,qBAAqB,CAAC,KAAiC;IAEnE,IAAA,KAiBE,KAAK,cAjBgC,EAAvC,aAAa,mBAAG,QAAQ,CAAC,MAAM,CAAC,OAAO,KAAA,EACvC,KAgBE,KAAK,cAhBoB,EAA3B,aAAa,mBAAG,WAAW,KAAA,EAC3B,KAeE,KAAK,kBAfoC,EAA3C,iBAAiB,mBAAG,QAAQ,CAAC,MAAM,CAAC,OAAO,KAAA,EAC3C,SAAS,GAcP,KAAK,UAdE,EACT,WAAW,GAaT,KAAK,YAbI,EACX,UAAU,GAYR,KAAK,WAZG,EACV,OAAO,GAWL,KAAK,QAXA,EACP,KAUE,KAAK,MARN,EAFD,KAAK,mBAAG;QACN,UAAU,EAAE,OAAO;KACpB,KAAA,EACD,KAOE,KAAK,MAJN,EAHD,KAAK,mBAAG;QACN,UAAU,EAAE,OAAO;QACnB,SAAS,EAAE,CAAC;KACb,KAAA,EACD,KAGE,KAAK,WAHQ,EAAf,UAAU,mBAAG,EAAE,KAAA,EACf,SAAS,GAEP,KAAK,UAFE,EACT,WAAW,GACT,KAAK,YADI,CACH;IAEV,IAAM,MAAM,GAAG;QACb,GAAG,EAAE,EAAE;QACP,MAAM,EAAE,EAAE;QACV,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,EAAE;KACV,CAAC;IAEF,IAAM,IAAI,GAAG,UAAU,GAAG,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC;IACrD,IAAM,IAAI,GAAG,WAAW,GAAG,MAAM,CAAC,GAAG,GAAG,MAAM,CAAC,MAAM,CAAC;IAEtD,IAAM,CAAC,GAAG,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,EAAnB,CAAmB,CAAC;IACrC,IAAM,CAAC,GAAG,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,EAAnB,CAAmB,CAAC;IAErC,IAAM,MAAM,GAAG,SAAS,CAAC;QACvB,KAAK,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC;QAChB,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;QACxB,OAAO,EAAE,GAAG;KACb,CAAC,CAAC;IAEH,IAAM,MAAM,GAAG,WAAW,CAAC;QACzB,KAAK,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC;QAChB,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,IAAI,CAAC,GAAG,OAAR,IAAI,2BAAQ,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,UAAC,CAAC;KACxD,CAAC,CAAC;IAEH,IAAM,OAAO,GAAG,UAAC,KAAK,EAAE,QAAQ,IAAK,OAAA,UAAC,IAAI,IAAK,OAAA,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,EAArB,CAAqB,EAA/B,CAA+B,CAAC;IACrE,IAAM,MAAM,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;IAClC,IAAM,MAAM,GAA0B,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;IAEzD,IAAM,eAAe,GAAW,MAAM,EAAE,CAAC;IACzC,IAAM,iBAAiB,GAAW,MAAM,EAAE,CAAC;IAE3C,OAAO,CACL,6BAAK,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAC,mBAAmB;QACxE,oBAAC,WAAW,IACV,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,MAAM,EAAE,IAAI,EACZ,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,OAAO,EAC/B,aAAa,EAAE,GAAG,GAClB;QACF,oBAAC,cAAc,IACb,EAAE,EAAE,iBAAiB,EACrB,IAAI,EAAE,WAAW,EACjB,EAAE,EAAE,SAAS,EACb,QAAQ,EAAE,KAAK,GACf;QACF,oBAAC,cAAc,IACb,EAAE,EAAE,eAAe,EACnB,IAAI,EAAE,aAAa,EACnB,EAAE,EAAE,aAAa,EACjB,QAAQ,EAAE,KAAK,GACf;QACD,SAAS,CAAC,GAAG,CAAC,UAAC,OAAO,EAAE,GAAG;YAC1B,IAAM,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;YACjC,IAAM,KAAK,GAAG,MAAM,EAAE,CAAC;YACvB,OAAO,CACL,oBAAC,KAAK,IAAC,GAAG,EAAE,GAAG;gBACb,8BACE,CAAC,EAAE,MAAM,CAAC,IAAI;oBACd;;;uBAGG;oBACH,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACzE,MAAM,EAAE,OAAO,IAAI,MAAM,CAAC,SAAS,EAAE,EACrC,KAAK,EAAE,IAAI,EACX,IAAI,EAAE,UAAQ,iBAAiB,MAAG,GAClC;gBACF,oBAAC,UAAU,IACT,EAAE,EAAE,KAAK,EACT,KAAK,QAAC,MAAM,EAAE,CAAC,EACf,CAAC,EAAE,MAAM,CAAC,IAAI;oBACd;;;uBAGG;oBACH,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACzE,MAAM,EAAE,OAAO,IAAI,MAAM,CAAC,SAAS,EAAE,EACrC,KAAK,EAAE,QAAQ,EACf,IAAI,EAAE,UAAQ,eAAe,MAAG,EAChC,YAAY,EAAG,UAAC,CAAC;wBACf,IAAM,aAAa,GAAG,CAAC,CAAC,MAAwB,CAAC;wBACjD,aAAa,CAAC,KAAK,CAAC,IAAI,GAAG,iBAAiB,CAAC;oBAC/C,CAAC,EACD,YAAY,EAAE,UAAC,CAAC;wBACd,IAAM,aAAa,GAAG,CAAC,CAAC,MAAwB,CAAC;wBACjD,aAAa,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;oBAClC,CAAC,GACD;gBACF,oBAAC,QAAQ,IACP,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,SAAS,QACT,YAAY,QACZ,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,OAAO,EAC/B,cAAc,EAAE,cAAM,OAAA,CAAC;wBACrB,UAAU,EAAE,KAAK;wBACjB,QAAQ,EAAE,MAAM;wBAChB,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,OAAO;wBAC7B,UAAU,EAAE,KAAK;wBACjB,KAAK,EAAE,MAAM,CAAC,IAAI;wBAClB,cAAc,EAAE,QAAQ;qBACzB,CAAC,EAPoB,CAOpB,GACF;gBACF,oBAAC,UAAU,IACT,GAAG,EAAE,IAAI,EACT,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,SAAS,QACT,QAAQ,EAAE,KAAK,CAAC,SAAS,EACzB,UAAU,EAAE,WAAW,IAAI,SAAS,EACpC,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,OAAO,EAC/B,cAAc,EAAE,cAAM,OAAA,CAAC;wBACrB,UAAU,EAAE,QAAQ;wBACpB,QAAQ,EAAE,MAAM;wBAChB,UAAU,EAAE,KAAK;wBACjB,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,OAAO;qBAC9B,CAAC,EALoB,CAKpB,GACF;gBACF,oBAAC,UAAU,IAAC,GAAG,EAAE,KAAK,IACnB,OAAO,CAAC,KAAK,CACH,CACP,CACT,CAAC;QACJ,CAAC,CAAC,CACE,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,CAAC,qBAAqB,EAAE;IACnC,KAAK,EAAE,QAAQ;IACf,SAAS,WAAA;IACT,WAAW,EAAE,uBAAuB;CACrC,CAAC,CAAC"}

package/dist/out-tsc/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./manifest";
+export * from "./bar/SpsBarChart";
+export * from "./bar/SpsHorizontalBarChart";
+export * from "./bar/SpsBarChart.examples";
+export * from "./stackedHorizontalBarChart/SpsStackedHorizontalBarChart";
+export * from "./stackedHorizontalBarChart/SpsStackedHorizontalBarChart.examples";

package/dist/out-tsc/index.js

@@ -0,0 +1,7 @@
+export * from "./manifest";
+export * from "./bar/SpsBarChart";
+export * from "./bar/SpsHorizontalBarChart";
+export * from "./bar/SpsBarChart.examples";
+export * from "./stackedHorizontalBarChart/SpsStackedHorizontalBarChart";
+export * from "./stackedHorizontalBarChart/SpsStackedHorizontalBarChart.examples";
+//# sourceMappingURL=index.js.map

package/dist/out-tsc/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAE3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,0DAA0D,CAAC;AACzE,cAAc,mEAAmE,CAAC"}

package/dist/out-tsc/manifest.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentManifest } from "@spscommerce/ds-shared";
+export declare const MANIFEST: ComponentManifest;

package/dist/out-tsc/manifest.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { SpsBarChart } from "./bar/SpsBarChart";
+import { SpsBarChartExamples } from "./bar/SpsBarChart.examples";
+import { SpsHorizontalBarChart } from "./bar/SpsHorizontalBarChart";
+import { SpsStackedHorizontalBarChart } from "./stackedHorizontalBarChart/SpsStackedHorizontalBarChart";
+import { SpsStackedHorizontalBarChartExamples } from "./stackedHorizontalBarChart/SpsStackedHorizontalBarChart.examples";
+export var 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.")); },
+        components: [SpsBarChart, SpsHorizontalBarChart],
+        examples: SpsBarChartExamples,
+    },
+    "Stacked Horizontal Bar Chart": {
+        components: [SpsStackedHorizontalBarChart],
+        examples: SpsStackedHorizontalBarChartExamples,
+    },
+};
+//# sourceMappingURL=manifest.js.map

package/dist/out-tsc/manifest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"manifest.js","sourceRoot":"","sources":["../../src/manifest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,EAAE,4BAA4B,EAAE,MAAM,0DAA0D,CAAC;AACxG,OAAO,EAAE,oCAAoC,EAAE,MAAM,mEAAmE,CAAC;AAEzH,MAAM,CAAC,IAAM,QAAQ,GAAsB;IACzC,WAAW,EAAE;QACX,WAAW,EAAE,cAAM,OAAA,CACjB;;YAEkE,+BAAM;wFAEpE,CACL,EANkB,CAMlB;QACD,UAAU,EAAE,CAAC,WAAW,EAAE,qBAAqB,CAAC;QAChD,QAAQ,EAAE,mBAAmB;KAC9B;IACD,8BAA8B,EAAE;QAC9B,UAAU,EAAE,CAAC,4BAA4B,CAAC;QAC1C,QAAQ,EAAE,oCAAoC;KAC/C;CACF,CAAC"}

package/dist/out-tsc/prop-types.d.ts

@@ -0,0 +1,23 @@
+import type { MutableRefObject } from "react";
+import * as PropTypes from "prop-types";
+export declare type Deprecated<T> = PropTypes.Requireable<T>;
+export declare function deprecated<T>(type: PropTypes.Requireable<T>): Deprecated<T>;
+export declare function enumValue<T>(e: any): PropTypes.Requireable<T>;
+export declare function fun<T extends (...args: any[]) => any>(): PropTypes.Requireable<T>;
+export declare function impl<T>(): PropTypes.Requireable<T>;
+export declare function ref<T>(): PropTypes.Requireable<MutableRefObject<T>>;
+export declare type ReactNodeOrRenderFn = PropTypes.ReactNodeLike | (() => PropTypes.ReactNodeLike);
+export declare const nodeOrRenderFn: PropTypes.Requireable<ReactNodeOrRenderFn>;
+export declare type TypeDoc = Record<string, string | {
+    type: string;
+    required?: boolean;
+    deprecated?: boolean;
+}>;
+export declare type InferTS<T, K extends HTMLElement> = PropTypes.InferProps<T> & Omit<React.HTMLProps<K>, keyof T>;
+export declare const spsGlobalPropTypes: {
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export * from "prop-types";

package/dist/out-tsc/prop-types.js

@@ -0,0 +1,26 @@
+import { values } from "@spscommerce/utils";
+import * as PropTypes from "prop-types";
+export function deprecated(type) {
+    return type;
+}
+export function enumValue(e) {
+    return PropTypes.oneOf(values(e));
+}
+export function fun() {
+    return PropTypes.func;
+}
+export function impl() {
+    return PropTypes.object;
+}
+export function ref() {
+    return PropTypes.object;
+}
+export var nodeOrRenderFn = PropTypes.oneOfType([PropTypes.node, PropTypes.func]);
+export var spsGlobalPropTypes = {
+    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+    className: PropTypes.string,
+    "data-testid": PropTypes.string,
+    unsafelyReplaceClassName: PropTypes.string,
+};
+export * from "prop-types";
+//# sourceMappingURL=prop-types.js.map

package/dist/out-tsc/prop-types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prop-types.js","sourceRoot":"","sources":["../../src/prop-types.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,KAAK,SAAS,MAAM,YAAY,CAAC;AAIxC,MAAM,UAAU,UAAU,CAAI,IAA8B;IAC1D,OAAO,IAAqB,CAAC;AAC/B,CAAC;AAED,MAAM,UAAU,SAAS,CAAI,CAAM;IACjC,OAAO,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACpC,CAAC;AAED,MAAM,UAAU,GAAG;IACjB,OAAQ,SAAS,CAAC,IAAiC,CAAC;AACtD,CAAC;AAED,MAAM,UAAU,IAAI;IAClB,OAAQ,SAAS,CAAC,MAA0C,CAAC;AAC/D,CAAC;AAED,MAAM,UAAU,GAAG;IACjB,OAAQ,SAAS,CAAC,MAA4D,CAAC;AACjF,CAAC;AAID,MAAM,CAAC,IAAM,cAAc,GAAG,SAAS,CAAC,SAAS,CAC/C,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,CACjC,CAAC;AAWF,MAAM,CAAC,IAAM,kBAAkB,GAAG;IAChC,QAAQ,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;IAClF,SAAS,EAAE,SAAS,CAAC,MAAM;IAC3B,aAAa,EAAE,SAAS,CAAC,MAAM;IAC/B,wBAAwB,EAAE,SAAS,CAAC,MAAM;CAC3C,CAAC;AAEF,cAAc,YAAY,CAAC"}

package/dist/out-tsc/setup-jest.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/out-tsc/setup-jest.js

@@ -0,0 +1,3 @@
+import * as jestDom from "@testing-library/jest-dom";
+expect.extend(jestDom);
+//# sourceMappingURL=setup-jest.js.map

package/dist/out-tsc/setup-jest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup-jest.js","sourceRoot":"","sources":["../../src/setup-jest.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC;AAErD,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC"}

package/dist/out-tsc/stackedHorizontalBarChart/SpsStackedHorizontalBarChart.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    chartData: PropTypes.Requireable<ChartDataProps[]>;
+    chartHeight: PropTypes.Requireable<number>;
+    chartWidth: PropTypes.Requireable<number>;
+    target: PropTypes.Requireable<number>;
+    goal: PropTypes.Requireable<number>;
+    total: PropTypes.Requireable<number>;
+};
+export interface ChartDataProps {
+    label: string;
+    value: number;
+    color: string;
+}
+export declare type SpsStackedHorizontalBarChartProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsStackedHorizontalBarChart(props: SpsStackedHorizontalBarChartProps): JSX.Element;
+export {};

package/dist/out-tsc/stackedHorizontalBarChart/SpsStackedHorizontalBarChart.examples.d.ts

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

package/dist/out-tsc/stackedHorizontalBarChart/SpsStackedHorizontalBarChart.examples.js

@@ -0,0 +1,21 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { code } from "@spscommerce/utils";
+export var 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        "]))),
+        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                "]))),
+            },
+            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                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3;
+//# sourceMappingURL=SpsStackedHorizontalBarChart.examples.js.map

package/dist/out-tsc/stackedHorizontalBarChart/SpsStackedHorizontalBarChart.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsStackedHorizontalBarChart.examples.js","sourceRoot":"","sources":["../../../src/stackedHorizontalBarChart/SpsStackedHorizontalBarChart.examples.tsx"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,oCAAoC,GAAoB;IACnE,KAAK,EAAE;QACL,KAAK,EAAE,OAAO;QACd,WAAW,EAAE,IAAI,yIAAA,sEAEZ,IAAA;QACL,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,q9BAAA,k5BAmBF,IAAA;aACV;YACD,QAAQ,EAAE;gBACR,KAAK,EAAE,IAAI,ylCAAA,shCAsBF,IAAA;aACV;SACF;KACF;CACF,CAAC"}