@visactor/vmind/esm/atom/chartGenerator/spec/transformers/rankingBar.js

<div align="center"> <a href="https://github.com/VisActor#gh-light-mode-only" target="_blank"> <img alt="VisActor Logo" width="200" src="https://github.com/VisActor/.github/blob/main/profile/logo_500_200_light.svg"/> </a> <a href="https://githu

import { isValidDataTable } from "../../../../utils/dataTable";

import { COLOR_THEMES } from "../constants";

import { seriesField } from "./cartesian";

export const sequenceData = context => {
    const {dataTable: dataTable, cell: cell, totalTime: totalTime, spec: spec} = context, timeField = cell.time, latestData = isValidDataTable(dataTable) ? dataTable : [];
    spec.timeField = timeField;
    const timeArray = [], contentMap = {};
    latestData.forEach((element => {
        if (!element[timeField]) return;
        const time = element[timeField].toString();
        timeArray.includes(time) || (timeArray.push(time), contentMap[time] = []), contentMap[time].push(element);
    }));
    const valueField = cell.y;
    for (const time in contentMap) {
        contentMap[time].sort((function(a, b) {
            return b[valueField] - a[valueField];
        }));
    }
    const dataSpecs = Object.keys(contentMap).map((year => ({
        data: [ {
            id: "id",
            values: contentMap[year]
        }, {
            id: "year",
            values: [ {
                year: year
            } ]
        } ]
    })));
    spec.data = dataSpecs.length > 0 ? dataSpecs[0].data : [];
    const duration = totalTime ? totalTime / (dataSpecs.length ? dataSpecs.length : 1) : 1e3;
    return spec.player = {
        type: "continuous",
        orient: "bottom",
        auto: !0,
        loop: !0,
        dx: 0,
        position: "middle",
        interval: duration,
        specs: dataSpecs,
        slider: {
            railStyle: {
                visible: !1,
                height: 6
            },
            trackStyle: {
                visible: !1
            },
            handlerStyle: {
                visible: !1
            }
        },
        controller: {
            backward: {
                style: {
                    visible: !1,
                    size: 12
                }
            },
            forward: {
                style: {
                    visible: !1,
                    size: 12
                }
            },
            start: {
                style: {
                    visible: !1
                },
                order: 1,
                position: "end"
            },
            pause: {
                style: {
                    visible: !1
                }
            }
        }
    }, spec.animationUpdate = {
        bar: [ {
            type: "update",
            options: {
                excludeChannels: [ "x", "y" ]
            },
            duration: duration,
            easing: "linear"
        }, {
            channel: [ "x", "y" ],
            options: {
                excludeChannels: [ "width" ]
            },
            duration: duration,
            easing: "linear"
        } ],
        axis: {
            duration: duration,
            easing: "linear"
        }
    }, {
        spec: spec
    };
};

export const colorDynamicBar = context => {
    const {colors: colors, spec: spec} = context, colorThemes = COLOR_THEMES.default;
    return colors && colors.length > 0 ? spec.color = colors : spec.color = colorThemes.map((c => ({
        gradient: "linear",
        x0: 1,
        y0: .01,
        x1: .01,
        y1: .01,
        stops: [ {
            offset: 0,
            color: `#${c.split("#")[1]}FF`
        }, {
            offset: 1,
            color: `#${c.split("#")[1]}00`
        } ]
    }))), {
        spec: spec
    };
};

export const rankingBarField = context => {
    const {cell: cell, spec: spec} = context;
    return spec.xField = cell.y, spec.yField = cell.x, cell.color ? spec.seriesField = cell.color : spec.seriesField = spec.yField, 
    spec.direction = "horizontal", {
        spec: spec
    };
};

export const rankingBarAxis = context => {
    const {spec: spec} = context;
    return spec.axes = [ {
        animation: !0,
        orient: "bottom",
        type: "linear",
        visible: !0,
        title: {
            visible: !1,
            style: {}
        },
        label: {
            style: {}
        },
        grid: {
            visible: !0
        }
    }, {
        animation: !0,
        id: "axis-left",
        orient: "left",
        tick: {
            visible: !1
        },
        title: {
            visible: !1,
            style: {}
        },
        label: {
            style: {}
        },
        type: "band"
    } ], {
        spec: spec
    };
};

export const customMark = context => {
    const {spec: spec} = context;
    return spec.customMark = [ {
        type: "text",
        dataId: "year",
        style: {
            textBaseline: "bottom",
            fontSize: 130,
            textAlign: "right",
            fontFamily: "PingFang SC",
            fontWeight: 600,
            text: datum => datum.year,
            x: () => 700,
            y: () => 430,
            fill: "grey",
            fillOpacity: .5
        }
    } ], {
        spec: spec
    };
};

export const rankingBarLabel = context => {
    const {spec: spec} = context;
    return spec.label = {
        visible: !0,
        style: {
            fill: "#FFFFFF",
            stroke: null
        },
        animation: {
            duration: spec.animationUpdate.axis.duration,
            easing: "linear"
        }
    }, {
        spec: spec
    };
};

export const pipelineRankingBar = [ sequenceData, colorDynamicBar, rankingBarField, rankingBarAxis, seriesField, customMark, rankingBarLabel ];
//# sourceMappingURL=rankingBar.js.map