react-sparklines-typescript
Version:
react-sparklines rewritten in typescript and modern react patterns
44 lines • 2.19 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 SparklinesLine = function (props) {
var _a = props.data, data = _a === void 0 ? [] : _a, _b = props.points, points = _b === void 0 ? [] : _b, _c = props.height, height = _c === void 0 ? 0 : _c, _d = props.margin, margin = _d === void 0 ? 0 : _d, color = props.color, _e = props.style, style = _e === void 0 ? {} : _e, _f = props.onMouseMove, onMouseMove = _f === void 0 ? function () { } : _f;
var linePoints = points
.map(function (p) { return [p.x, p.y]; })
.reduce(function (a, b) { return a.concat(b); });
var closePolyPoints = [
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",
pointerEvents: "auto",
};
var tooltips = points.map(function (p, i) {
return (react_1.default.createElement("circle", { key: i, cx: p.x, cy: p.y, r: 2, style: fillStyle, onMouseEnter: function () { return onMouseMove("enter", data[i], p); }, onClick: function () { return onMouseMove("click", data[i], p); } }));
});
return (react_1.default.createElement("g", null,
tooltips,
react_1.default.createElement("polyline", { points: fillPoints.join(" "), style: fillStyle }),
react_1.default.createElement("polyline", { points: linePoints.join(" "), style: lineStyle })));
};
exports.default = SparklinesLine;
//# sourceMappingURL=SparklinesLine.js.map