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

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

@@ -0,0 +1,148 @@
+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 { BarStackHorizontal } from "@visx/shape";
+import { scaleBand, scaleLinear, scaleOrdinal } from "@visx/scale";
+import { AxisBottom } from "@visx/axis";
+import { Group } from "@visx/group";
+import { LinearGradient } from "@visx/gradient";
+import { LegendOrdinal } from "@visx/legend";
+import * as DSColors from "@spscommerce/ds-colors";
+import { SpsTooltip } from "@spscommerce/ds-react";
+import * as PropTypes from "../prop-types";
+var propsDoc = {
+    chartData: "ChartDataProps[]",
+    chartHeight: "number",
+    chartWidth: "number",
+    target: "number",
+    goal: "number",
+    total: "number",
+};
+var propTypes = {
+    chartData: PropTypes.arrayOf(PropTypes.impl()),
+    chartHeight: PropTypes.number,
+    chartWidth: PropTypes.number,
+    target: PropTypes.number,
+    goal: PropTypes.number,
+    total: PropTypes.number,
+};
+export function SpsStackedHorizontalBarChart(props) {
+    var chartData = props.chartData, chartHeight = props.chartHeight, chartWidth = props.chartWidth, goal = props.goal, target = props.target, total = props.total;
+    var margin = {
+        top: 25,
+        bottom: 40,
+        left: 30,
+        right: 30,
+    };
+    function hexToRGB(hex, alpha) {
+        var r = parseInt(hex.slice(1, 3), 16);
+        var g = parseInt(hex.slice(3, 5), 16);
+        var b = parseInt(hex.slice(5, 7), 16);
+        if (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 = scaleLinear({
+        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 = scaleBand({
+        domain: data,
+        padding: 0.2,
+    });
+    var colorScale = scaleOrdinal({
+        domain: keys.map(function (c) { return c + ": " + data[0][c] + "%"; }),
+        range: __spreadArray([], __read(colors), false),
+    });
+    var xMax = chartWidth - margin.left - margin.right;
+    var yMax = chartHeight - margin.top - margin.bottom;
+    xScale.rangeRound([0, xMax]);
+    yScale.rangeRound([yMax, 0]);
+    var tickFormat = function (i) { return i + "%"; };
+    return (React.createElement("div", { style: { width: chartWidth }, className: "position-relative" },
+        React.createElement(LegendOrdinal, { 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: data, keys: keys, height: yMax, y: function () { return ""; }, xScale: xScale, yScale: 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: tickFormat, scale: xScale, stroke: DSColors.colors.gray400, tickStroke: DSColors.colors.gray400, tickLength: 4, tickLineProps: {
+                        y1: -11,
+                        y2: 5,
+                    }, tickLabelProps: function () { return ({
+                        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,
+                    "%"))))));
+}
+Object.assign(SpsStackedHorizontalBarChart, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsStackedHorizontalBarChart",
+});
+//# sourceMappingURL=SpsStackedHorizontalBarChart.js.map

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

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