@visactor/vchart/esm/mark/liquid.js

charts lib based @visactor/VGrammar

import { Factory } from "./../core/factory";

import { GlyphMark, registerGlyphMark } from "./glyph";

import { createArea } from "@visactor/vrender-core";

import { registerArea } from "@visactor/vrender-kits";

export class LiquidMark extends GlyphMark {
    constructor() {
        super(...arguments), this.type = LiquidMark.type, this._subMarks = {
            wave0: {
                type: "area",
                defaultAttributes: {
                    curveType: "monotoneX",
                    fillOpacity: 1
                }
            },
            wave1: {
                type: "area",
                defaultAttributes: {
                    curveType: "monotoneX",
                    fillOpacity: .66
                }
            },
            wave2: {
                type: "area",
                defaultAttributes: {
                    curveType: "monotoneX",
                    fillOpacity: .33
                }
            }
        }, this._positionChannels = [ "wave", "y", "height" ], this._positionEncoder = (glyphAttrs, datum, g) => {
            const {wave: wave = g.attribute.wave, y: y = g.attribute.y, height: height = g.attribute.height} = glyphAttrs, points0 = [], points1 = [], points2 = [];
            for (let i = 0; i < 21; i++) {
                const x = 50 * i - 500, wy = y + (i % 2 == 0 ? 20 : 0), wy1 = y + height;
                points0.push({
                    x: x + 100 * wave,
                    y: wy,
                    y1: wy1
                }), points1.push({
                    x: x + 200 * wave - 40,
                    y: wy,
                    y1: wy1
                }), points2.push({
                    x: x + 300 * wave - 20,
                    y: wy,
                    y1: wy1
                });
            }
            return {
                wave0: {
                    x: 0,
                    y: 0,
                    points: points0
                },
                wave1: {
                    x: 0,
                    y: 0,
                    points: points1
                },
                wave2: {
                    x: 0,
                    y: 0,
                    points: points2
                }
            };
        };
    }
    _getDefaultStyle() {
        return Object.assign(Object.assign({}, super._getDefaultStyle()), {
            wave: 0
        });
    }
}

LiquidMark.type = "liquid";

export const registerLiquidMark = () => {
    registerGlyphMark(), registerArea(), Factory.registerMark(LiquidMark.type, LiquidMark), 
    Factory.registerGraphicComponent("area", (attrs => createArea(attrs)));
};
//# sourceMappingURL=liquid.js.map