lucid-ui
Version:
A UI component library from AppNexus.
71 lines • 2.14 kB
JavaScript
import React from 'react';
import createClass from 'create-react-class';
import { AxisLabel, chartConstants } from '../../../index';
var width = 1000;
var height = 400;
var margin = {
top: 50,
right: 50,
bottom: 50,
left: 50
};
var innerWidth = width - margin.right - margin.left;
var innerHeight = height - margin.top - margin.bottom;
export default createClass({
render: function render() {
return /*#__PURE__*/React.createElement("svg", {
width: width,
height: height
}, /*#__PURE__*/React.createElement("rect", {
x: 1,
y: 1,
width: width - 2,
height: height - 2,
style: {
strokeWidth: 1,
strokeDasharray: '2,2',
fill: 'none',
stroke: 'black'
}
}), /*#__PURE__*/React.createElement("g", {
transform: "translate(".concat(margin.left, ", ").concat(margin.top, ")")
}, /*#__PURE__*/React.createElement("rect", {
style: {
fill: 'lightgrey'
},
width: innerWidth,
height: innerHeight
})), /*#__PURE__*/React.createElement("g", {
transform: 'translate(0,0)'
}, /*#__PURE__*/React.createElement(AxisLabel, {
orient: "left",
width: margin.left,
height: height,
label: "Left"
})), /*#__PURE__*/React.createElement("g", {
transform: "translate(".concat(margin.left + innerWidth, ", 0)")
}, /*#__PURE__*/React.createElement(AxisLabel, {
orient: "right",
color: chartConstants.COLOR_0,
width: margin.right,
height: height,
label: "Right"
})), /*#__PURE__*/React.createElement("g", {
transform: "translate(0, ".concat(margin.top + innerHeight, ")")
}, /*#__PURE__*/React.createElement(AxisLabel, {
orient: "bottom",
color: chartConstants.COLOR_1,
width: width,
height: margin.bottom,
label: "Bottom"
})), /*#__PURE__*/React.createElement("g", {
transform: 'translate(0, 0)'
}, /*#__PURE__*/React.createElement(AxisLabel, {
orient: "top",
color: chartConstants.COLOR_2,
width: width,
height: margin.top,
label: "Top"
})));
}
});