lucid-ui
Version:
A UI component library from AppNexus.
186 lines • 13.2 kB
JavaScript
"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
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 __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Axis = void 0;
var lodash_1 = __importDefault(require("lodash"));
var react_1 = __importDefault(require("react"));
var prop_types_1 = __importDefault(require("react-peek/prop-types"));
var style_helpers_1 = require("../../util/style-helpers");
var chart_helpers_1 = require("../../util/chart-helpers");
var component_types_1 = require("../../util/component-types");
var cx = style_helpers_1.lucidClassNames.bind('&-Axis');
var string = prop_types_1.default.string, array = prop_types_1.default.array, func = prop_types_1.default.func, number = prop_types_1.default.number, oneOf = prop_types_1.default.oneOf;
var defaultProps = {
innerTickSize: 6,
outerTickSize: 6,
tickPadding: 3,
textOrientation: 'horizontal',
orient: 'bottom',
tickCount: null,
};
var Axis = function (props) {
var className = props.className, scale = props.scale, orient = props.orient, tickCount = props.tickCount, _a = props.ticks, ticks = _a === void 0 ? 'ticks' in scale
? scale.ticks(tickCount)
: chart_helpers_1.discreteTicks(scale.domain(), tickCount) : _a, // ordinal scales don't have `ticks` but they do have `domains`
innerTickSize = props.innerTickSize, outerTickSize = props.outerTickSize, _b = props.tickFormat, tickFormat = _b === void 0 ? 'tickFormat' in scale ? scale.tickFormat() : lodash_1.default.identity : _b, tickPadding = props.tickPadding, textOrientation = props.textOrientation, passThroughs = __rest(props, ["className", "scale", "orient", "tickCount", "ticks", "innerTickSize", "outerTickSize", "tickFormat", "tickPadding", "textOrientation"]);
var tickSpacing = Math.max(innerTickSize, 0) + tickPadding;
// Domain
var range = scale.range();
var sign = orient === 'top' || orient === 'left' ? -1 : 1;
var isH = orient === 'top' || orient === 'bottom'; // is horizontal
var getOrientationProperties = function (orient, textOrientation) {
var textAnchor, x, y, dy;
var orientationSign = sign;
var transform = textOrientation === 'vertical'
? 'rotate(-90)'
: textOrientation === 'horizontal'
? ''
: 'rotate(-30)';
switch (orient) {
case 'bottom':
if (textOrientation === 'vertical') {
orientationSign = -orientationSign;
}
textAnchor =
textOrientation === 'vertical'
? 'end'
: textOrientation === 'diagonal'
? 'end'
: 'middle';
x =
textOrientation === 'vertical'
? orientationSign * tickSpacing
: textOrientation === 'diagonal'
? -orientationSign * tickSpacing
: 0;
y = textOrientation === 'vertical' ? 0 : orientationSign * tickSpacing;
dy = textOrientation === 'vertical' ? '.32em' : '.71em';
break;
case 'top':
if (textOrientation === 'vertical') {
orientationSign = -orientationSign;
}
textAnchor =
textOrientation === 'vertical'
? 'start'
: textOrientation === 'diagonal'
? 'start'
: 'middle';
x =
textOrientation === 'vertical' || textOrientation === 'diagonal'
? -orientationSign * tickSpacing
: 0;
y = textOrientation === 'vertical' ? 0 : orientationSign * tickSpacing;
dy =
textOrientation === 'vertical' || textOrientation === 'diagonal'
? '.32em'
: '0em';
break;
case 'right':
textAnchor = textOrientation === 'vertical' ? 'middle' : 'start';
x = textOrientation === 'vertical' ? 0 : orientationSign * tickSpacing;
y =
textOrientation === 'vertical'
? orientationSign * tickSpacing
: textOrientation === 'horizontal'
? 0
: orientationSign * tickSpacing;
dy = textOrientation === 'vertical' ? '.71em' : '.32em';
break;
case 'left':
textAnchor = textOrientation === 'vertical' ? 'middle' : 'end';
x = textOrientation === 'vertical' ? 0 : orientationSign * tickSpacing;
y =
textOrientation === 'vertical' || textOrientation === 'diagonal'
? orientationSign * tickSpacing
: 0;
dy =
textOrientation === 'vertical'
? '0em'
: textOrientation === 'horizontal'
? '.32em'
: '.71em';
break;
default:
textAnchor = 'start';
x = 0;
y = 0;
dy = 'null';
}
return {
transform: transform,
textAnchor: textAnchor,
x: x,
y: y,
dy: dy,
};
};
var orientationProperties = {
vertical: getOrientationProperties(orient, 'vertical'),
horizontal: getOrientationProperties(orient, 'horizontal'),
diagonal: getOrientationProperties(orient, 'diagonal'),
};
var orientationKey = textOrientation || 'horizontal';
// Only band scales have `bandwidth`, this conditional helps center the
// ticks on the bands
var scaleNormalized = 'bandwidth' in scale
? function (d) { return scale(d) + scale.bandwidth() / 2; }
: scale;
return (react_1.default.createElement("g", __assign({}, component_types_1.omitProps(passThroughs, undefined, lodash_1.default.keys(exports.Axis.propTypes)), { className: cx(className, '&') }),
isH ? (react_1.default.createElement("path", { className: cx('&-domain'), d: "M" + range[0] + "," + sign * outerTickSize + "V0H" + range[1] + "V" + sign * outerTickSize })) : (react_1.default.createElement("path", { className: cx('&-domain'), d: "M" + sign * outerTickSize + "," + range[0] + "H0V" + range[1] + "H" + sign * outerTickSize })),
lodash_1.default.map(ticks, function (tick) { return (react_1.default.createElement("g", { key: tick, transform: "translate(" + (isH ? scaleNormalized(tick) : 0) + ", " + (isH ? 0 : scaleNormalized(tick)) + ")" },
react_1.default.createElement("line", { className: cx('&-tick'), x2: isH ? 0 : sign * innerTickSize, y2: isH ? sign * innerTickSize : 0 }),
react_1.default.createElement("text", { className: cx('&-tick-text'), x: orientationProperties[orientationKey].x, y: orientationProperties[orientationKey].y, dy: orientationProperties[orientationKey].dy, style: {
textAnchor: orientationProperties[orientationKey].textAnchor,
}, transform: orientationProperties[orientationKey].transform }, tickFormat(tick)))); })));
};
exports.Axis = Axis;
exports.Axis.defaultProps = defaultProps;
exports.Axis.displayName = 'Axis';
exports.Axis.peek = {
description: "\n\t*`Axis` is used within an `svg`*\n\tAn `Axis` is used to help render human-readable reference marks on charts.\n\tIt can either be horizontal or vertical and really only needs a scale\n\tto be able to draw properly.\n\tThis component is a very close sister to d3's svg axis and most of the\n\tlogic was ported from there.\n\t",
categories: ['visualizations', 'chart primitives'],
};
exports.Axis.propTypes = {
className: string(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t\tAppended to the component-specific class names set on the root element.\n\t"], ["\n\t\tAppended to the component-specific class names set on the root element.\n\t"]))),
scale: func.isRequired(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t\tMust be a d3 scale. Lucid exposes the `lucid.d3Scale` library for use\n\t\there.\n\t"], ["\n\t\tMust be a d3 scale. Lucid exposes the \\`lucid.d3Scale\\` library for use\n\t\there.\n\t"]))),
innerTickSize: number(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\t\tSize of the ticks for each discrete tick mark.\n\t"], ["\n\t\tSize of the ticks for each discrete tick mark.\n\t"]))),
outerTickSize: number(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\t\tSize of the tick marks found at the beginning and end of the axis. It's\n\t\tcommon to set this to `0` to remove them.\n\t"], ["\n\t\tSize of the tick marks found at the beginning and end of the axis. It's\n\t\tcommon to set this to \\`0\\` to remove them.\n\t"]))),
tickFormat: func(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\t\tAn optional function that can format ticks. Generally this shouldn't be\n\t\tneeded since d3 has very good default formatters for most data.\n\t\tSignature: `(tick) => {}`\n\t"], ["\n\t\tAn optional function that can format ticks. Generally this shouldn't be\n\t\tneeded since d3 has very good default formatters for most data.\n\t\tSignature: \\`(tick) => {}\\`\n\t"]))),
ticks: array(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\t\tIf you need fine grained control over the axis ticks, you can pass them\n\t\tin this array.\n\t"], ["\n\t\tIf you need fine grained control over the axis ticks, you can pass them\n\t\tin this array.\n\t"]))),
tickPadding: number(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n\t\tDetermines the spacing between each tick and its text.\n\t"], ["\n\t\tDetermines the spacing between each tick and its text.\n\t"]))),
orient: oneOf(['top', 'bottom', 'left', 'right'])(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n\t\tDetermines the orientation of the ticks. `left` and `right` will\n\t\tgenerate a vertical axis, whereas `top` and `bottom` will generate a\n\t\thorizontal axis.\n\t"], ["\n\t\tDetermines the orientation of the ticks. \\`left\\` and \\`right\\` will\n\t\tgenerate a vertical axis, whereas \\`top\\` and \\`bottom\\` will generate a\n\t\thorizontal axis.\n\t"]))),
tickCount: number(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n\t\tControl the number of ticks displayed. If the scale is time based or\n\t\tlinear, this number acts a \"hint\" per the default behavior of D3. If it's\n\t\tan ordinal scale, this number is treated as an absolute number of ticks\n\t\tto display and is powered by our own utility function `discreteTicks`.\n\t"], ["\n\t\tControl the number of ticks displayed. If the scale is time based or\n\t\tlinear, this number acts a \"hint\" per the default behavior of D3. If it's\n\t\tan ordinal scale, this number is treated as an absolute number of ticks\n\t\tto display and is powered by our own utility function \\`discreteTicks\\`.\n\t"]))),
textOrientation: oneOf(['vertical', 'horizontal', 'diagonal'])(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n\t\tDetermines the orientation of the tick text. This may override what the orient prop\n\t\ttries to determine. This defaults to `horizontal`.\n\t"], ["\n\t\tDetermines the orientation of the tick text. This may override what the orient prop\n\t\ttries to determine. This defaults to \\`horizontal\\`.\n\t"]))),
};
exports.default = exports.Axis;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
//# sourceMappingURL=Axis.js.map