lucid-ui

Version:
A UI component library from AppNexus.
45 lines • 3.2 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var create_react_class_1 = __importDefault(require("create-react-class"));
var index_1 = require("../../../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 = index_1.d3Scale.scaleLinear().domain([0, 100000]).range([0, innerWidth]);
var y = index_1.d3Scale.scaleLinear().domain([0, 100000]).range([innerHeight, 0]);
exports.default = create_react_class_1.default({
    render: function () {
        return (react_1.default.createElement("div", null,
            react_1.default.createElement("div", null,
                react_1.default.createElement("p", null, "top"),
                react_1.default.createElement("svg", { width: horizontalAxisWidth, height: horizontalAxisHeight },
                    react_1.default.createElement("g", { transform: "translate(" + margin.left + ", " + horizontalAxisHeight / 2 + ")" },
                        react_1.default.createElement(index_1.Axis, { scale: x, orient: 'top', textOrientation: 'diagonal', tickCount: 6 })))),
            react_1.default.createElement("div", null,
                react_1.default.createElement("p", null, "bottom"),
                react_1.default.createElement("svg", { width: horizontalAxisWidth, height: horizontalAxisHeight },
                    react_1.default.createElement("g", { transform: "translate(" + margin.left + ", " + horizontalAxisHeight / 2 + ")" },
                        react_1.default.createElement(index_1.Axis, { scale: x, orient: 'bottom', textOrientation: 'diagonal', tickCount: 6 })))),
            react_1.default.createElement("div", null,
                react_1.default.createElement("p", null, "right"),
                react_1.default.createElement("svg", { width: verticalAxisWidth, height: verticalAxisHeight },
                    react_1.default.createElement("g", { transform: "translate(0, " + margin.top + ")" },
                        react_1.default.createElement(index_1.Axis, { scale: y, orient: 'right', textOrientation: 'diagonal', tickCount: 6 })))),
            react_1.default.createElement("div", null,
                react_1.default.createElement("p", null, "left"),
                react_1.default.createElement("svg", { width: verticalAxisWidth, height: verticalAxisHeight },
                    react_1.default.createElement("g", { transform: "translate(" + (verticalAxisWidth - 1) + ", " + margin.top + ")" },
                        react_1.default.createElement(index_1.Axis, { scale: y, orient: 'left', textOrientation: 'diagonal', tickCount: 6 }))))));
    },
});
//# sourceMappingURL=8.diagonal-text.js.map