rumble-charts/es/Ticks.js

Truly declarative React charts components

import { __assign } from './external/tslib/tslib.es6.js';
import React from 'react';
import './helpers/colorFunc.js';
import 'd3-shape';
import 'd3-ease';
import { isString } from './helpers/isString.js';
import { isUndefined } from './helpers/isUndefined.js';
import { normalizeNumber } from './helpers/normalizeNumber.js';
import { isNumber } from './helpers/isNumber.js';
import { value } from './helpers/value.js';

/**
 * Renders ticks (labels and lines) for axis (x and y).
 */
function Ticks(props) {
    var className = props.className, scaleX = props.scaleX, scaleY = props.scaleY, _a = props.axis, axis = _a === void 0 ? 'x' : _a, style = props.style;
    var x = scaleX.factory(props);
    var y = scaleY.factory(props);
    var horizontal = (axis === 'y' && !scaleX.swap && !scaleY.swap) ||
        (axis === 'x' && (scaleX.swap || scaleY.swap));
    var position = props.position ||
        (axis === 'x' ?
            (scaleX.swap || scaleY.swap ? 'top' : 'bottom') :
            'left');
    var ticks1 = value([props.ticks], props);
    var ticks2 = isNumber(ticks1) ? { maxTicks: ticks1 } : (ticks1 || {});
    var ticks = Array.isArray(ticks2) ? ticks2 : generateTicks(props, ticks2);
    return React.createElement("g", { className: className, style: style, opacity: props.opacity }, ticks.map(function (tick, index) { return renderTick({
        ticksLength: ticks.length,
        tick: tick,
        index: index,
        x: x,
        y: y,
        horizontal: horizontal,
        position: position,
        props: props
    }); }));
}
function generateTicks(props, _a) {
    var maxTicks = _a.maxTicks, minDistance = _a.minDistance, distance = _a.distance;
    var axis = props.axis, maxX = props.maxX, maxY = props.maxY, minX = props.minX, minY = props.minY;
    var max = axis === 'y' ? maxY : maxX;
    var min = axis === 'y' ? minY : minX;
    var length = max - min;
    if (isUndefined(minDistance)) {
        minDistance = Math.min(1, length);
    }
    if (isUndefined(maxTicks)) {
        maxTicks = Math.min((length + minDistance) / minDistance, 5);
    }
    if (isUndefined(distance)) {
        distance = Math.max(minDistance, length / maxTicks);
        distance = Math.ceil(distance / minDistance) * minDistance;
    }
    var result = [];
    for (var i = min; i < max + minDistance; i += distance) {
        result.push(i);
    }
    return result;
}
function renderTick(_a) {
    var _b;
    var ticksLength = _a.ticksLength, _tick = _a.tick, index = _a.index, x = _a.x, y = _a.y, horizontal = _a.horizontal, position = _a.position, props = _a.props;
    var axis = props.axis, className = props.className, layerWidth = props.layerWidth, layerHeight = props.layerHeight, scaleX = props.scaleX, scaleY = props.scaleY;
    var tick = isNumber(_tick) ? (_b = {}, _b[axis] = _tick, _b) : _tick;
    if ('tickVisible' in props) {
        var tickVisible = value(props.tickVisible, { index: index, ticksLength: ticksLength, tick: tick, props: props });
        if (!tickVisible) {
            return;
        }
    }
    var tickAttributes = value(props.tickAttributes, { index: index, ticksLength: ticksLength, tick: tick, props: props });
    var tickStyle = value(props.tickStyle, { index: index, ticksLength: ticksLength, tick: tick, props: props });
    var pX = axis === 'x' ? x(tick.x) : normalizeNumber(position, layerWidth);
    var pY = axis === 'y' ? y(tick.y) : normalizeNumber(position, layerHeight);
    var transform = (scaleX.swap || scaleY.swap) ?
        ('translate(' + pY + ' ' + pX + ')') :
        ('translate(' + pX + ' ' + pY + ')');
    return React.createElement("g", __assign({ key: index, style: tickStyle, transform: transform, className: className && (className + '-tick ' + className + '-tick-' + index) }, tickAttributes),
        renderLabel({ ticksLength: ticksLength, tick: tick, index: index, props: props }),
        renderLine({ ticksLength: ticksLength, tick: tick, index: index, horizontal: horizontal, props: props }));
}
function renderLabel(_a) {
    var ticksLength = _a.ticksLength, tick = _a.tick, index = _a.index, props = _a.props;
    var className = props.className, axis = props.axis;
    if ('labelVisible' in props) {
        var labelVisible = value(props.labelVisible, { index: index, ticksLength: ticksLength, tick: tick, props: props });
        if (!labelVisible) {
            return;
        }
    }
    var labelAttributes = value([tick.labelAttributes, props.labelAttributes], { index: index, ticksLength: ticksLength, tick: tick, props: props });
    var labelStyle = value([tick.labelStyle, props.labelStyle], { index: index, ticksLength: ticksLength, tick: tick, props: props });
    var label = value([tick.label, props.label, tick[axis]], { index: index, ticksLength: ticksLength, tick: tick, props: props });
    if (isString(label) || isNumber(label)) {
        return React.createElement("text", __assign({ style: labelStyle, className: className && ("".concat(className, "-label ").concat(className, "-label-").concat(index)) }, labelAttributes), value(props.labelFormat, label + '') || label);
    }
    else {
        return label;
    }
}
function renderLine(_a) {
    var ticksLength = _a.ticksLength, tick = _a.tick, index = _a.index, horizontal = _a.horizontal, props = _a.props;
    var _b = props.lineLength, lineLength = _b === void 0 ? 5 : _b, _c = props.lineOffset, lineOffset = _c === void 0 ? 0 : _c, layerWidth = props.layerWidth, layerHeight = props.layerHeight, className = props.className;
    if ('lineVisible' in props) {
        var lineVisible = value(props.lineVisible, { index: index, ticksLength: ticksLength, tick: tick, props: props });
        if (!lineVisible) {
            return null;
        }
    }
    var lineAttributes = value([tick.lineAttributes, props.lineAttributes], { index: index, ticksLength: ticksLength, tick: tick, props: props });
    var lineStyle = value([tick.lineStyle, props.lineStyle], { index: index, ticksLength: ticksLength, tick: tick, props: props });
    var _lineLength = normalizeNumber(value([tick.lineLength, lineLength], { index: index, ticksLength: ticksLength, tick: tick, props: props }), horizontal ? layerWidth : layerHeight);
    var _lineOffset = normalizeNumber(value([tick.lineOffset, lineOffset], { index: index, ticksLength: ticksLength, tick: tick, props: props }), horizontal ? layerWidth : layerHeight);
    var d = horizontal ?
        ('M' + _lineOffset + ',0 h' + _lineLength) :
        ('M0,' + _lineOffset + ' v' + _lineLength);
    return React.createElement("path", __assign({ style: lineStyle, className: className && ("".concat(className, "-line ").concat(className, "-line-").concat(index)), d: d }, lineAttributes));
}

export { Ticks };