react-sparklines-typescript
Version:
react-sparklines rewritten in typescript and modern react patterns
66 lines • 2.33 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var SparklinesCurve = function (props) {
var _a = props.points, points = _a === void 0 ? [] : _a, _b = props.height, height = _b === void 0 ? 0 : _b, _c = props.margin, margin = _c === void 0 ? 0 : _c, color = props.color, _d = props.style, style = _d === void 0 ? {} : _d, _e = props.divisor, divisor = _e === void 0 ? 0.25 : _e;
var prev;
var curve = function (p) {
var res;
if (!prev) {
res = [p.x, p.y];
}
else {
var len = (p.x - prev.x) * divisor;
res = [
"C",
//x1
prev.x + len,
//y1
prev.y,
//x2,
p.x - len,
//y2,
p.y,
//x,
p.x,
//y
p.y,
];
}
prev = p;
return res;
};
var linePoints = points
.map(function (p) { return curve(p); })
.reduce(function (a, b) { return a.concat(b); });
var closePolyPoints = [
"L" + points[points.length - 1].x,
height - margin,
margin,
height - margin,
margin,
points[0].y,
];
var fillPoints = linePoints.concat(closePolyPoints);
var lineStyle = {
stroke: color || style.stroke || "slategray",
strokeWidth: style.strokeWidth || "1",
strokeLinejoin: style.strokeLinejoin || "round",
strokeLinecap: style.strokeLinecap || "round",
fill: "none",
};
var fillStyle = {
stroke: style.stroke || "none",
strokeWidth: "0",
fillOpacity: style.fillOpacity || 0.1,
fill: style.fill || color || "slategray",
};
return (react_1.default.createElement("g", null,
react_1.default.createElement("path", { d: "M" + fillPoints.join(" "), style: fillStyle }),
react_1.default.createElement("path", { d: "M" + linePoints.join(" "), style: lineStyle })));
};
exports.default = SparklinesCurve;
//# sourceMappingURL=SparklinesCurve.js.map