@antv/g2/lib/component/slider.js

the Grammar of Graphics in Javascript

"use strict";
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;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Slider = void 0;
const gui_1 = require("@antv/gui");
const d3_format_1 = require("d3-format");
const coordinate_1 = require("../utils/coordinate");
const scale_1 = require("../utils/scale");
function inferPosition(bbox, position, trackSize) {
    const { x, y, width, height } = bbox;
    if (position === 'left')
        return [x + width - trackSize, y];
    if (position === 'right')
        return [x, y];
    if (position === 'bottom')
        return [x, y];
    if (position === 'top')
        return [x, y + height - trackSize];
}
/**
 * Slider component.
 */
const Slider = (options) => {
    // do not pass size.
    const { orientation, labelFormatter, size, style = {}, position } = options, rest = __rest(options, ["orientation", "labelFormatter", "size", "style", "position"]);
    return ({ scales: [scale], value, theme, coordinate }) => {
        var _a;
        const { bbox } = value;
        const { width, height } = bbox;
        const { slider: sliderTheme = {} } = theme;
        const defaultFormatter = ((_a = scale.getFormatter) === null || _a === void 0 ? void 0 : _a.call(scale)) || ((v) => v.toString());
        const formatter = typeof labelFormatter === 'string'
            ? (0, d3_format_1.format)(labelFormatter)
            : labelFormatter;
        const isHorizontal = orientation === 'horizontal';
        const reverse = (0, coordinate_1.isTranspose)(coordinate) && isHorizontal;
        const { trackSize = sliderTheme.trackSize } = style;
        const [x0, y0] = inferPosition(bbox, position, trackSize);
        return new gui_1.Slider({
            className: 'slider',
            style: Object.assign({}, sliderTheme, Object.assign(Object.assign({ x: x0, y: y0, trackLength: isHorizontal ? width : height, orientation, formatter: (v) => {
                    const f = formatter || defaultFormatter;
                    const v1 = reverse ? 1 - v : v;
                    const tick = (0, scale_1.invert)(scale, v1, true);
                    return f(tick);
                } }, style), rest)),
        });
    };
};
exports.Slider = Slider;
exports.Slider.props = {
    defaultPosition: 'bottom',
    defaultSize: 24,
    defaultOrder: 1,
    defaultCrossPadding: [12, 12],
    defaultPadding: [12, 12],
};
//# sourceMappingURL=slider.js.map