lucid-ui
Version:
A UI component library from AppNexus.
64 lines (63 loc) • 2.79 kB
JavaScript
import React from 'react';
import createClass from 'create-react-class';
import { Axis, d3Scale } from '../../../index'; // individual margin values may need to be changed to
// prevent or add extra padding depending on use of axis.
var margin = {
right: 40,
left: 20,
top: 40,
bottom: 10
};
var horizontalAxisWidth = 500;
var horizontalAxisHeight = 100;
var verticalAxisWidth = 100;
var verticalAxisHeight = 200;
var innerWidth = horizontalAxisWidth - margin.right - margin.left;
var innerHeight = verticalAxisHeight - margin.top - margin.bottom;
var x = d3Scale.scaleLinear().domain([0, 100000]).range([0, innerWidth]);
var y = d3Scale.scaleLinear().domain([0, 100000]).range([innerHeight, 0]);
export default createClass({
render: function render() {
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "top"), /*#__PURE__*/React.createElement("svg", {
width: horizontalAxisWidth,
height: horizontalAxisHeight
}, /*#__PURE__*/React.createElement("g", {
transform: "translate(".concat(margin.left, ", ").concat(horizontalAxisHeight / 2, ")")
}, /*#__PURE__*/React.createElement(Axis, {
scale: x,
orient: "top",
textOrientation: "diagonal",
tickCount: 6
})))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "bottom"), /*#__PURE__*/React.createElement("svg", {
width: horizontalAxisWidth,
height: horizontalAxisHeight
}, /*#__PURE__*/React.createElement("g", {
transform: "translate(".concat(margin.left, ", ").concat(horizontalAxisHeight / 2, ")")
}, /*#__PURE__*/React.createElement(Axis, {
scale: x,
orient: "bottom",
textOrientation: "diagonal",
tickCount: 6
})))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "right"), /*#__PURE__*/React.createElement("svg", {
width: verticalAxisWidth,
height: verticalAxisHeight
}, /*#__PURE__*/React.createElement("g", {
transform: "translate(0, ".concat(margin.top, ")")
}, /*#__PURE__*/React.createElement(Axis, {
scale: y,
orient: "right",
textOrientation: "diagonal",
tickCount: 6
})))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "left"), /*#__PURE__*/React.createElement("svg", {
width: verticalAxisWidth,
height: verticalAxisHeight
}, /*#__PURE__*/React.createElement("g", {
transform: "translate(".concat(verticalAxisWidth - 1, ", ").concat(margin.top, ")")
}, /*#__PURE__*/React.createElement(Axis, {
scale: y,
orient: "left",
textOrientation: "diagonal",
tickCount: 6
})))));
}
});