react-d3-axis-mod
Version:
React-based Axis component for D3 (fork with text shadow)
73 lines • 3.42 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.LEFT = exports.BOTTOM = exports.RIGHT = exports.TOP = void 0;
const react_1 = __importDefault(require("react"));
function translateX(scale0, scale1, d) {
const x = scale0(d);
return `translate(${Number.isFinite(x) ? x : scale1(d)},0)`;
}
function translateY(scale0, scale1, d) {
const y = scale0(d);
return `translate(0,${Number.isFinite(y) ? y : scale1(d)})`;
}
exports.TOP = 'TOP';
exports.RIGHT = 'RIGHT';
exports.BOTTOM = 'BOTTOM';
exports.LEFT = 'LEFT';
const defaultAxisStyle = {
orient: exports.BOTTOM,
tickSizeInner: 6,
tickSizeOuter: 6,
tickPadding: 3,
strokeWidth: 1,
tickFont: 'sans-serif',
tickFontSize: 10,
};
function Axis({ style, range, values, position, format, shadow = 0, bg = 'white', fg = 'black', }) {
const axisStyle = { ...defaultAxisStyle, ...style };
const { orient, tickSizeInner, tickPadding, tickSizeOuter, strokeWidth, tickFont, tickFontSize, } = axisStyle;
const transform = orient === exports.TOP || orient === exports.BOTTOM ? translateX : translateY;
const tickTransformer = (d) => transform(position, position, d);
const k = orient === exports.TOP || orient === exports.LEFT ? -1 : 1;
const isRight = orient === exports.RIGHT;
const isLeft = orient === exports.LEFT;
const isTop = orient === exports.TOP;
const isBottom = orient === exports.BOTTOM;
const isHorizontal = isRight || isLeft;
const x = isHorizontal ? 'x' : 'y';
const y = isHorizontal ? 'y' : 'x';
const halfWidth = strokeWidth / 2;
const range0 = range[0] + halfWidth;
const range1 = range[range.length - 1] + halfWidth;
const spacing = Math.max(tickSizeInner, 0) + tickPadding;
return (react_1.default.createElement("g", { fill: "none", fontSize: tickFontSize, fontFamily: tickFont, textAnchor: isRight ? 'start' : isLeft ? 'end' : 'middle', strokeWidth: strokeWidth },
react_1.default.createElement("path", { stroke: fg, d: isHorizontal
? `M${k * tickSizeOuter},${range0}H${halfWidth}V${range1}H${k * tickSizeOuter}`
: `M${range0},${k * tickSizeOuter}V${halfWidth}H${range1}V${k * tickSizeOuter}` }),
values.map((v, idx) => {
let lineProps = {
stroke: fg,
};
lineProps[`${x}2`] = k * tickSizeInner;
lineProps[`${y}1`] = halfWidth;
lineProps[`${y}2`] = halfWidth;
let textProps = {
fill: fg,
dy: isTop ? '0em' : isBottom ? '0.71em' : '0.32em',
};
textProps[`${x}`] = k * spacing;
textProps[`${y}`] = halfWidth;
return (react_1.default.createElement("g", { key: `tick-${idx}`, opacity: 1, transform: tickTransformer(v) },
react_1.default.createElement("line", { ...lineProps }),
shadow ? (react_1.default.createElement("text", { style: {
stroke: bg,
strokeWidth: shadow,
}, ...textProps }, format(v))) : null,
react_1.default.createElement("text", { ...textProps }, format(v))));
})));
}
exports.default = Axis;
//# sourceMappingURL=Axis.js.map