lucid-ui
Version:
A UI component library from AppNexus.
48 lines (47 loc) • 2.68 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.
const margin = { right: 40, left: 20, top: 40, bottom: 10 };
const horizontalAxisWidth = 500;
const horizontalAxisHeight = 100;
const verticalAxisWidth = 100;
const verticalAxisHeight = 200;
const innerWidth = horizontalAxisWidth - margin.right - margin.left;
const innerHeight = verticalAxisHeight - margin.top - margin.bottom;
const x = d3Scale
.scaleLinear()
.domain([0, 100000])
.range([0, innerWidth]);
const y = d3Scale
.scaleLinear()
.domain([0, 100000])
.range([innerHeight, 0]);
export default createClass({
render() {
return (React.createElement("div", null,
React.createElement("div", null,
React.createElement("p", null, "top"),
React.createElement("svg", { width: horizontalAxisWidth, height: horizontalAxisHeight },
React.createElement("g", { transform: `translate(${margin.left}, ${horizontalAxisHeight /
2})` },
React.createElement(Axis, { scale: x, orient: 'top', textOrientation: 'diagonal', tickCount: 6 })))),
React.createElement("div", null,
React.createElement("p", null, "bottom"),
React.createElement("svg", { width: horizontalAxisWidth, height: horizontalAxisHeight },
React.createElement("g", { transform: `translate(${margin.left}, ${horizontalAxisHeight /
2})` },
React.createElement(Axis, { scale: x, orient: 'bottom', textOrientation: 'diagonal', tickCount: 6 })))),
React.createElement("div", null,
React.createElement("p", null, "right"),
React.createElement("svg", { width: verticalAxisWidth, height: verticalAxisHeight },
React.createElement("g", { transform: `translate(0, ${margin.top})` },
React.createElement(Axis, { scale: y, orient: 'right', textOrientation: 'diagonal', tickCount: 6 })))),
React.createElement("div", null,
React.createElement("p", null, "left"),
React.createElement("svg", { width: verticalAxisWidth, height: verticalAxisHeight },
React.createElement("g", { transform: `translate(${verticalAxisWidth - 1}, ${margin.top})` },
React.createElement(Axis, { scale: y, orient: 'left', textOrientation: 'diagonal', tickCount: 6 }))))));
},
});