lucid-ui/dist/cjs/components/Axis/Axis.stories.js

A UI component library from Xandr.

"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DiagonalText = exports.Ordinal = exports.Time = exports.Right = exports.Left = exports.Top = exports.Basic = void 0;
var react_1 = __importDefault(require("react"));
var d3Scale = __importStar(require("d3-scale"));
var d3Time = __importStar(require("d3-time"));
var Axis_1 = __importDefault(require("./Axis"));
exports.default = {
    title: 'Visualizations/Axis',
    component: Axis_1.default,
    parameters: {
        docs: {
            description: {
                component: Axis_1.default.peek.description,
            },
        },
    },
};
/* Basic */
var Basic = function (args) {
    var margin = { right: 40, left: 20, top: 40, bottom: 10 };
    var width = 500;
    var height = 100;
    var innerWidth = width - margin.right - margin.left;
    var x = d3Scale.scaleLinear().domain([0, 100000]).range([0, innerWidth]);
    return (react_1.default.createElement("svg", { width: width, height: height },
        react_1.default.createElement("g", { transform: "translate(".concat(margin.left, ", ").concat(height / 2, ")") },
            react_1.default.createElement(Axis_1.default, __assign({}, args, { scale: x, orient: 'bottom', tickCount: 6 })))));
};
exports.Basic = Basic;
/* Top */
var Top = function (args) {
    var margin = { right: 20, left: 20 };
    var width = 400;
    var height = 50;
    var innerWidth = width - margin.right - margin.left;
    var x = d3Scale.scaleLinear().domain([0, 100000]).range([0, innerWidth]);
    return (react_1.default.createElement("svg", { width: width, height: height },
        react_1.default.createElement("g", { transform: "translate(".concat(margin.left, ", ").concat(height / 2, ")") },
            react_1.default.createElement(Axis_1.default, __assign({}, args, { scale: x, orient: 'top', textOrientation: 'horizontal', tickCount: 6 })))));
};
exports.Top = Top;
/* Left */
var Left = function (args) {
    var margin = { top: 10, bottom: 10 };
    var width = 50;
    var height = 200;
    var innerHeight = height - margin.top - margin.bottom;
    var y = d3Scale.scaleLinear().domain([0, 100000]).range([innerHeight, 0]);
    return (react_1.default.createElement("svg", { width: width, height: height },
        react_1.default.createElement("g", { transform: "translate(".concat(width - 1, ", ").concat(margin.top, ")") },
            react_1.default.createElement(Axis_1.default, __assign({}, args, { scale: y, orient: 'left' })))));
};
exports.Left = Left;
/* Right */
var Right = function (args) {
    var margin = { top: 10, bottom: 10 };
    var width = 50;
    var height = 200;
    var innerHeight = height - margin.top - margin.bottom;
    var y = d3Scale.scaleLinear().domain([0, 50]).range([innerHeight, 0]);
    return (react_1.default.createElement("svg", { width: width, height: height },
        react_1.default.createElement("g", { transform: "translate(0, ".concat(margin.top, ")") },
            react_1.default.createElement(Axis_1.default, __assign({}, args, { scale: y, orient: 'right', textOrientation: 'horizontal' })))));
};
exports.Right = Right;
/* Time */
var Time = function (args) {
    var margin = { right: 10, left: 30 };
    var width = 400;
    var height = 200;
    var innerWidth = width - margin.right - margin.left;
    var x = d3Scale
        .scaleTime()
        .domain([new Date('2015-01-01'), new Date('2017-02-01')])
        .range([0, innerWidth]);
    return (react_1.default.createElement("svg", { width: width, height: height },
        react_1.default.createElement("g", { transform: "translate(".concat(margin.left, ", 1)") },
            react_1.default.createElement(Axis_1.default, __assign({}, args, { orient: 'bottom', scale: x }))),
        react_1.default.createElement("g", { transform: "translate(".concat(margin.left, ", ").concat((height / 3) * 1, ")") },
            react_1.default.createElement(Axis_1.default, __assign({}, args, { orient: 'bottom', scale: x, ticks: x.ticks(d3Time.timeMonth, 6) }))),
        react_1.default.createElement("g", { transform: "translate(".concat(margin.left, ", ").concat((height / 3) * 2, ")") },
            react_1.default.createElement(Axis_1.default, __assign({}, args, { orient: 'bottom', scale: x, ticks: x.ticks(d3Time.timeYear, 1) })))));
};
exports.Time = Time;
/* Ordinal */
var Ordinal = function (args) {
    var margin = { right: 20, left: 20 };
    var width = 400;
    var height = 40;
    var innerWidth = width - margin.right - margin.left;
    var x = d3Scale
        .scaleBand()
        .domain(['a', 'b', 'c', 'd'])
        .range([0, innerWidth]);
    return (react_1.default.createElement("svg", { width: width, height: height },
        react_1.default.createElement("g", { transform: "translate(".concat(margin.left, ", 1)") },
            react_1.default.createElement(Axis_1.default, __assign({}, args, { orient: 'bottom', scale: x })))));
};
exports.Ordinal = Ordinal;
/* Diagonal Text */
var DiagonalText = function (args) {
    // 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]);
    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(".concat(margin.left, ", ").concat(horizontalAxisHeight / 2, ")") },
                    react_1.default.createElement(Axis_1.default, __assign({}, args, { 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(".concat(margin.left, ", ").concat(horizontalAxisHeight / 2, ")") },
                    react_1.default.createElement(Axis_1.default, __assign({}, args, { 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, ".concat(margin.top, ")") },
                    react_1.default.createElement(Axis_1.default, __assign({}, args, { 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(".concat(verticalAxisWidth - 1, ", ").concat(margin.top, ")") },
                    react_1.default.createElement(Axis_1.default, __assign({}, args, { scale: y, orient: 'left', textOrientation: 'diagonal', tickCount: 6 })))))));
};
exports.DiagonalText = DiagonalText;
//# sourceMappingURL=Axis.stories.js.map