@awsui/components-react
Version:
AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A
42 lines (41 loc) • 2.44 kB
JavaScript
import React from 'react';
import clsx from 'clsx';
import styles from './styles.css.js';
var margins = {
left: 50,
top: 38,
right: 0,
bottom: 60
};
function createTicks(scale, values) {
if (scale.isNumeric() || scale.isTime()) {
return scale.d3Scale.ticks(values);
}
return scale.d3Scale.domain();
}
export default function Grid(_a) {
var xScale = _a.xScale, yScale = _a.yScale, xTitle = _a.xTitle, yTitle = _a.yTitle, innerWidth = _a.innerWidth, innerHeight = _a.innerHeight;
var xTicks = createTicks(xScale, Math.ceil(innerWidth / 100));
var yTicks = createTicks(yScale, Math.ceil(innerHeight / 50));
return (React.createElement("g", null,
React.createElement("g", { transform: "translate(" + margins.left + ", " + margins.top + ")" },
React.createElement("g", null, yTicks.map(function (value, i) {
var y = yScale.d3Scale(value) || -1;
return (React.createElement("g", { key: "y-tick-" + i, transform: "translate(0," + y + ")", className: clsx(styles.ticks, styles['ticks--y']) },
React.createElement("line", { className: styles.grid, x1: "0", y1: "0", x2: innerWidth, y2: "0" }),
React.createElement("text", { x: "-12", y: "5" }, value),
React.createElement("line", { x1: "0", x2: "5", y1: "0", y2: "0", transform: "translate(-5,0)" })));
})),
React.createElement("g", null, xTicks.map(function (value, i) {
var x = xScale.d3Scale(value) || 0;
if (xScale.isCategorical()) {
var offset = Math.max(0, xScale.d3Scale.bandwidth() - 1) / 2;
x += offset;
}
return (React.createElement("g", { key: "x-tick-" + i, transform: "translate(" + x + "," + innerHeight + ")", className: clsx(styles.ticks, styles['ticks--x']) },
React.createElement("text", { x: "0", y: "12" }, value),
React.createElement("line", { x1: "0", x2: "0", y1: "0", y2: "8" })));
}))),
xTitle && (React.createElement("text", { transform: "translate(" + innerWidth / 2 + "," + (innerHeight + margins.top + 50) + ")", className: clsx(styles['axis-label'], styles['axis-label--x']) }, xTitle)),
yTitle && React.createElement("text", { className: clsx(styles['axis-label'], styles['axis-label--y']) }, yTitle)));
}