@visactor/vchart/esm/series/box-plot/animation.js

charts lib based @visactor/VGrammar

import { isValidNumber } from "@visactor/vutils";

import { ACustomAnimate, AnimateExecutor } from "@visactor/vrender-animate";

const scaleIn = computeCenter => (graphic, options, animationParameters) => {
    var _a;
    const finalAttribute = graphic.getFinalAttribute(), direction = null !== (_a = finalAttribute.direction) && void 0 !== _a ? _a : "vertical", center = computeCenter(graphic, direction, options);
    if (!isValidNumber(center)) return {};
    const {x: x, y: y, min: min, max: max, q1: q1, q3: q3, median: median} = finalAttribute, animateAttributes = {
        from: {
            x: x,
            y: y
        },
        to: {
            x: x,
            y: y
        }
    };
    return isValidNumber(min) && (animateAttributes.from.min = center, animateAttributes.to.min = min), 
    isValidNumber(max) && (animateAttributes.from.max = center, animateAttributes.to.max = max), 
    isValidNumber(q1) && (animateAttributes.from.q1 = center, animateAttributes.to.q1 = q1), 
    isValidNumber(q3) && (animateAttributes.from.q3 = center, animateAttributes.to.q3 = q3), 
    isValidNumber(median) && (animateAttributes.from.median = center, animateAttributes.to.median = median), 
    animateAttributes;
}, scaleOut = computeCenter => (graphic, options, animationParameters) => {
    var _a;
    const finalAttribute = graphic.getFinalAttribute(), direction = null !== (_a = finalAttribute.direction) && void 0 !== _a ? _a : "vertical", center = computeCenter(graphic, direction, options);
    if (!isValidNumber(center)) return {};
    const {x: x, y: y, min: min, max: max, q1: q1, q3: q3, median: median} = finalAttribute, animateAttributes = {
        from: {
            x: x,
            y: y
        },
        to: {
            x: x,
            y: y
        }
    };
    return isValidNumber(min) && (animateAttributes.to.min = center, animateAttributes.from.min = min), 
    isValidNumber(max) && (animateAttributes.to.max = center, animateAttributes.from.max = max), 
    isValidNumber(q1) && (animateAttributes.to.q1 = center, animateAttributes.from.q1 = q1), 
    isValidNumber(q3) && (animateAttributes.to.q3 = center, animateAttributes.from.q3 = q3), 
    isValidNumber(median) && (animateAttributes.to.median = center, animateAttributes.from.median = median), 
    animateAttributes;
}, getGlyphChildByName = (mark, name) => mark.getSubGraphic().find((child => child.name === name)), computeBoxplotCenter = (glyphMark, direction, options) => {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
    if (options && isValidNumber(options.center)) return options.center;
    let median, max, min, q1, q3;
    if ("horizontal" === direction) {
        median = null === (_c = null === (_b = (null === (_a = getGlyphChildByName(glyphMark, "median")) || void 0 === _a ? void 0 : _a.attribute).points) || void 0 === _b ? void 0 : _b[0]) || void 0 === _c ? void 0 : _c.x, 
        max = null === (_g = null === (_f = null === (_e = null === (_d = getGlyphChildByName(glyphMark, "max")) || void 0 === _d ? void 0 : _d.attribute) || void 0 === _e ? void 0 : _e.points) || void 0 === _f ? void 0 : _f[0]) || void 0 === _g ? void 0 : _g.x, 
        min = null === (_l = null === (_k = null === (_j = null === (_h = getGlyphChildByName(glyphMark, "min")) || void 0 === _h ? void 0 : _h.attribute) || void 0 === _j ? void 0 : _j.points) || void 0 === _k ? void 0 : _k[0]) || void 0 === _l ? void 0 : _l.x;
        const boxWidth = getGlyphChildByName(glyphMark, "box").attribute.width, boxX = getGlyphChildByName(glyphMark, "box").attribute.x;
        q1 = boxX, q3 = boxX + boxWidth;
    } else {
        median = null === (_p = null === (_o = (null === (_m = getGlyphChildByName(glyphMark, "median")) || void 0 === _m ? void 0 : _m.attribute).points) || void 0 === _o ? void 0 : _o[0]) || void 0 === _p ? void 0 : _p.y, 
        max = null === (_t = null === (_s = null === (_r = null === (_q = getGlyphChildByName(glyphMark, "max")) || void 0 === _q ? void 0 : _q.attribute) || void 0 === _r ? void 0 : _r.points) || void 0 === _s ? void 0 : _s[0]) || void 0 === _t ? void 0 : _t.y, 
        min = null === (_x = null === (_w = null === (_v = null === (_u = getGlyphChildByName(glyphMark, "min")) || void 0 === _u ? void 0 : _u.attribute) || void 0 === _v ? void 0 : _v.points) || void 0 === _w ? void 0 : _w[0]) || void 0 === _x ? void 0 : _x.y;
        const boxHeight = getGlyphChildByName(glyphMark, "box").attribute.height, boxY = getGlyphChildByName(glyphMark, "box").attribute.y;
        q1 = boxY, q3 = boxY + boxHeight;
    }
    return isValidNumber(median) ? median : isValidNumber(q1) && isValidNumber(q3) ? (q1 + q3) / 2 : isValidNumber(max) && isValidNumber(min) ? (max + min) / 2 : isValidNumber(min) ? min : isValidNumber(max) ? max : NaN;
}, computeBarBoxplotCenter = (glyphMark, direction, options) => {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
    if (isValidNumber(null == options ? void 0 : options.center)) return options.center;
    let median, max, min, q1, q3;
    if ("horizontal" === direction) {
        median = null === (_c = null === (_b = (null === (_a = getGlyphChildByName(glyphMark, "median")) || void 0 === _a ? void 0 : _a.attribute).points) || void 0 === _b ? void 0 : _b[0]) || void 0 === _c ? void 0 : _c.x;
        const minMaxBoxWidth = (null === (_d = getGlyphChildByName(glyphMark, "minMaxBox")) || void 0 === _d ? void 0 : _d.attribute).width, minMaxBoxBoxX = null === (_e = getGlyphChildByName(glyphMark, "minMaxBox")) || void 0 === _e ? void 0 : _e.attribute.x;
        min = minMaxBoxBoxX, max = minMaxBoxBoxX + minMaxBoxWidth;
        const q1q3BoxWidth = (null === (_f = getGlyphChildByName(glyphMark, "q1q3Box")) || void 0 === _f ? void 0 : _f.attribute).width, q1q3BoxX = null === (_g = getGlyphChildByName(glyphMark, "q1q3Box")) || void 0 === _g ? void 0 : _g.attribute.x;
        q1 = q1q3BoxX, q3 = q1q3BoxX + q1q3BoxWidth;
    } else {
        median = null === (_k = null === (_j = (null === (_h = getGlyphChildByName(glyphMark, "median")) || void 0 === _h ? void 0 : _h.attribute).points) || void 0 === _j ? void 0 : _j[0]) || void 0 === _k ? void 0 : _k.y;
        const minMaxBoxHeight = (null === (_l = getGlyphChildByName(glyphMark, "minMaxBox")) || void 0 === _l ? void 0 : _l.attribute).height, minMaxBoxBoxY = null === (_m = getGlyphChildByName(glyphMark, "minMaxBox")) || void 0 === _m ? void 0 : _m.attribute.y;
        min = minMaxBoxBoxY, max = minMaxBoxBoxY + minMaxBoxHeight;
        const q1q3BoxHeight = (null === (_o = getGlyphChildByName(glyphMark, "q1q3Box")) || void 0 === _o ? void 0 : _o.attribute).height, q1q3BoxY = null === (_p = getGlyphChildByName(glyphMark, "q1q3Box")) || void 0 === _p ? void 0 : _p.attribute.y;
        q1 = q1q3BoxY, q3 = q1q3BoxY + q1q3BoxHeight;
    }
    return isValidNumber(median) ? median : isValidNumber(q1) && isValidNumber(q3) ? (q1 + q3) / 2 : isValidNumber(max) && isValidNumber(min) ? (max + min) / 2 : isValidNumber(min) ? min : isValidNumber(max) ? max : NaN;
};

export class BoxplotScaleIn extends ACustomAnimate {
    constructor(from, to, duration, easing, params) {
        super(from, to, duration, easing, params);
    }
    onBind() {
        super.onBind();
        const finalAttribute = this.target.getFinalAttribute();
        finalAttribute && this.target.setAttributes(finalAttribute);
        const {from: from, to: to} = this.computeAttribute();
        this.propKeys = Object.keys(to).filter((key => null != to[key])), this.animate.reSyncProps(), 
        this.from = from, this.to = to, this.target.setAttributes(this.from);
    }
    computeAttribute() {
        return scaleIn(computeBoxplotCenter)(this.target, this.params, this.params.options);
    }
    onUpdate(end, ratio, out) {
        const attribute = this.target.attribute;
        this.propKeys.forEach((key => {
            attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
        })), this.target.setAttributes(attribute);
    }
}

export class BoxplotScaleOut extends ACustomAnimate {
    constructor(from, to, duration, easing, params) {
        super(from, to, duration, easing, params);
    }
    onBind() {
        var _a;
        (null === (_a = this.params) || void 0 === _a ? void 0 : _a.diffAttrs) && this.target.setAttributes(this.params.diffAttrs);
        const {from: from, to: to} = this.computeAttribute();
        this.propKeys = Object.keys(to).filter((key => null != to[key])), this.animate.reSyncProps(), 
        this.from = from, this.to = to, this.target.setAttributes(this.from);
    }
    computeAttribute() {
        return scaleOut(computeBoxplotCenter)(this.target, this.params, this.params.options);
    }
    onUpdate(end, ratio, out) {
        const attribute = this.target.attribute;
        this.propKeys.forEach((key => {
            attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
        })), this.target.setAttributes(attribute);
    }
}

export class BarBoxplotScaleIn extends BoxplotScaleIn {
    computeAttribute() {
        return scaleIn(computeBarBoxplotCenter)(this.target, this.params, this.params.options);
    }
}

export class BarBoxplotScaleOut extends BoxplotScaleOut {
    computeAttribute() {
        return scaleOut(computeBarBoxplotCenter)(this.target, this.params, this.params.options);
    }
}

export const registeBoxPlotScaleAnimation = () => {
    AnimateExecutor.registerBuiltInAnimate("boxplotScaleIn", BoxplotScaleIn), AnimateExecutor.registerBuiltInAnimate("boxplotScaleOut", BoxplotScaleOut), 
    AnimateExecutor.registerBuiltInAnimate("barBoxplotScaleIn", BarBoxplotScaleIn), 
    AnimateExecutor.registerBuiltInAnimate("barBoxplotScaleOut", BarBoxplotScaleOut);
};
//# sourceMappingURL=animation.js.map