@visactor/vgrammar-core/es/glyph/wave.js

VGrammar is a visual grammar library

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

import { registerAreaGraphic, registerGlyphGraphic } from "../graph/mark/graphic";

import { registerGlyphMark } from "../view/glyph";

export const registerWaveGlyph = () => {
    Factory.registerGlyph("wave", {
        wave0: "area",
        wave1: "area",
        wave2: "area"
    }).registerChannelEncoder("wave", ((channel, encodeValue, encodeValues, datum, element) => {
        const originPoints = new Array(21).fill(0).map(((v, index) => {
            const waveHeight = index % 2 == 0 ? 20 : 0;
            return {
                x: 50 * index - 500,
                y: encodeValues.y + waveHeight,
                y1: encodeValues.y + encodeValues.height
            };
        }));
        return {
            wave0: {
                points: originPoints.map((point => ({
                    x: point.x + 100 * encodeValue,
                    y: point.y,
                    y1: point.y1
                }))),
                x: 0,
                y: 0
            },
            wave1: {
                points: originPoints.map((point => ({
                    x: point.x + 200 * encodeValue - 40,
                    y: point.y,
                    y1: point.y1
                }))),
                x: 0,
                y: 0
            },
            wave2: {
                points: originPoints.map((point => ({
                    x: point.x + 300 * encodeValue - 20,
                    y: point.y,
                    y1: point.y1
                }))),
                x: 0,
                y: 0
            }
        };
    })).registerDefaultEncoder((() => ({
        wave0: {
            curveType: "monotoneX",
            fillOpacity: 1
        },
        wave1: {
            curveType: "monotoneX",
            fillOpacity: .66
        },
        wave2: {
            curveType: "monotoneX",
            fillOpacity: .33
        }
    }))), registerGlyphMark(), registerGlyphGraphic(), registerAreaGraphic();
};
//# sourceMappingURL=wave.js.map