@visactor/vchart-extension 1.13.22 → 1.13.23-alpha.0

package/esm/charts/conversion-funnel/conversion-funnel.js

@@ -0,0 +1,81 @@
+import { VChart, FunnelChart, PREFIX, FunnelSeries } from "@visactor/vchart";
+
+import { DataView } from "@visactor/vdataset";
+
+import { ConversionFunnelChartSpecTransformer } from "./conversion-funnel-transformer";
+
+import { conversionArrowTransform } from "./arrow-data-transform";
+
+export class ConversionFunnelChart extends FunnelChart {
+    constructor() {
+        super(...arguments), this.type = "conversionFunnel", this.transformerConstructor = ConversionFunnelChartSpecTransformer;
+    }
+}
+
+ConversionFunnelChart.type = "conversionFunnel", ConversionFunnelChart.transformerConstructor = ConversionFunnelChartSpecTransformer;
+
+export class ConversionFunnelSeries extends FunnelSeries {
+    initData() {
+        var _a;
+        super.initData();
+        const {conversionArrow: conversionArrow} = this._spec;
+        conversionArrow && (null === (_a = conversionArrow.arrows) || void 0 === _a ? void 0 : _a.length) && (this._arrowData = new DataView(this._dataSet, {
+            name: `${PREFIX}_series_${this.id}_arrowData`
+        }), this._dataSet.getTransform("conversionArrow") || this._dataSet.registerTransform("conversionArrow", conversionArrowTransform), 
+        this._arrowData.parse(conversionArrow).transform({
+            type: "conversionArrow",
+            options: {
+                categoryField: this._spec.categoryField
+            }
+        }));
+    }
+    afterCompile() {
+        var _a;
+        null === (_a = super.afterCompile) || void 0 === _a || _a.call(this);
+        const rightGroup = this.getMarkInName("arrowRight");
+        rightGroup && rightGroup.getMarks().forEach((mark => {
+            mark.setDataView(this._arrowData), mark.compileData(), mark.getProduct().transform([ {
+                type: "filter",
+                callback: datum => "right" === datum.position
+            } ]);
+        }));
+        const leftGroup = this.getMarkInName("arrowLeft");
+        leftGroup && leftGroup.getMarks().forEach((mark => {
+            mark.setDataView(this._arrowData), mark.compileData(), mark.getProduct().transform([ {
+                type: "filter",
+                callback: datum => "left" === datum.position
+            } ]);
+        }));
+    }
+}
+
+export const registerConversionFunnelChart = option => {
+    const vchartConstructor = (null == option ? void 0 : option.VChart) || VChart;
+    vchartConstructor && (vchartConstructor.useChart([ ConversionFunnelChart ]), vchartConstructor.useSeries([ ConversionFunnelSeries ]));
+};
+
+export const DEFAULT_ARROW_MARK_STYLE = {
+    cornerRadius: 4,
+    stroke: "black",
+    strokeOpacity: 1,
+    lineWidth: 1,
+    closePath: !1,
+    pickable: !1
+};
+
+export const DEFAULT_ARROW_SYMBOL_MARK_STYLE = {
+    symbolType: "triangle",
+    size: 8,
+    scaleX: .7,
+    fill: "black"
+};
+
+export const DEFAULT_ARROW_TEXT_MARK_STYLE = {
+    fill: "#606773",
+    fontSize: 12
+};
+
+export const DEFAULT_FUNNEL_BACKGROUND_MARK_STYLE = {
+    fill: "#eff1f9"
+};
+//# sourceMappingURL=conversion-funnel.js.map

package/esm/charts/conversion-funnel/conversion-funnel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["charts/conversion-funnel/conversion-funnel.ts"],"names":[],"mappings":"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","file":"conversion-funnel.js","sourcesContent":["import type { IConversionFunnelChartSpecBase, IConversionFunnelSeriesSpecBase } from './interface';\nimport { VChart, FunnelChart, PREFIX, FunnelSeries, GroupMark } from '@visactor/vchart';\nimport { DataView } from '@visactor/vdataset';\nimport { ConversionFunnelChartSpecTransformer } from './conversion-funnel-transformer';\nimport { conversionArrowTransform } from './arrow-data-transform';\n\nexport class ConversionFunnelChart extends FunnelChart<IConversionFunnelChartSpecBase> {\n  type = 'conversionFunnel';\n  static type = 'conversionFunnel';\n\n  declare _spec: IConversionFunnelChartSpecBase;\n\n  static readonly transformerConstructor = ConversionFunnelChartSpecTransformer;\n  readonly transformerConstructor = ConversionFunnelChartSpecTransformer;\n}\n\nexport class ConversionFunnelSeries extends FunnelSeries<IConversionFunnelSeriesSpecBase> {\n  protected _arrowData?: DataView;\n\n  initData() {\n    super.initData();\n    const { conversionArrow } = this._spec;\n    if (conversionArrow && conversionArrow.arrows?.length) {\n      this._arrowData = new DataView(this._dataSet, { name: `${PREFIX}_series_${this.id}_arrowData` });\n      if (!this._dataSet.getTransform('conversionArrow')) {\n        this._dataSet.registerTransform('conversionArrow', conversionArrowTransform);\n      }\n      this._arrowData.parse(conversionArrow).transform({\n        type: 'conversionArrow',\n        options: {\n          categoryField: this._spec.categoryField\n        }\n      });\n    }\n  }\n\n  afterCompile() {\n    // @ts-ignore\n    super.afterCompile?.();\n    const rightGroup = this.getMarkInName('arrowRight') as unknown as GroupMark;\n    if (rightGroup) {\n      rightGroup.getMarks().forEach(mark => {\n        mark.setDataView(this._arrowData);\n        mark.compileData();\n        mark.getProduct().transform([\n          {\n            type: 'filter',\n            callback: datum => datum.position === 'right'\n          }\n        ]);\n      });\n    }\n    const leftGroup = this.getMarkInName('arrowLeft') as unknown as GroupMark;\n    if (leftGroup) {\n      leftGroup.getMarks().forEach(mark => {\n        mark.setDataView(this._arrowData);\n        mark.compileData();\n        mark.getProduct().transform([\n          {\n            type: 'filter',\n            callback: datum => datum.position === 'left'\n          }\n        ]);\n      });\n    }\n  }\n}\n\nexport const registerConversionFunnelChart = (option?: { VChart?: typeof VChart }) => {\n  const vchartConstructor = option?.VChart || VChart;\n  if (vchartConstructor) {\n    vchartConstructor.useChart([ConversionFunnelChart]);\n    vchartConstructor.useSeries([ConversionFunnelSeries]);\n  }\n};\n\nexport const DEFAULT_ARROW_MARK_STYLE = {\n  cornerRadius: 4,\n  stroke: 'black',\n  strokeOpacity: 1,\n  lineWidth: 1,\n  closePath: false,\n  pickable: false\n};\n\nexport const DEFAULT_ARROW_SYMBOL_MARK_STYLE = {\n  symbolType: 'triangle',\n  size: 8,\n  scaleX: 0.7,\n  fill: 'black'\n};\n\nexport const DEFAULT_ARROW_TEXT_MARK_STYLE = {\n  fill: '#606773',\n  fontSize: 12\n};\n\nexport const DEFAULT_FUNNEL_BACKGROUND_MARK_STYLE = {\n  fill: '#eff1f9'\n};\n"]}

package/esm/charts/conversion-funnel/index.d.ts

@@ -0,0 +1,2 @@
+export * from './interface';
+export * from './conversion-funnel';

package/esm/charts/conversion-funnel/index.js

@@ -0,0 +1,4 @@
+export * from "./interface";
+
+export * from "./conversion-funnel";
+//# sourceMappingURL=index.js.map

package/esm/charts/conversion-funnel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["charts/conversion-funnel/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC","file":"index.js","sourcesContent":["export * from './interface';\nexport * from './conversion-funnel';\n"]}

package/esm/charts/conversion-funnel/interface.d.ts

@@ -0,0 +1,35 @@
+import type { IFormatMethod, IMarkSpec, IPathMarkSpec, IFunnelChartSpec, ISymbolMarkSpec, ITextMarkSpec, IFunnelSeriesSpec, IRectMarkSpec } from '@visactor/vchart';
+export interface Arrow {
+    from: number;
+    to: number;
+    position?: 'left' | 'right';
+    distance?: number;
+    text?: string;
+}
+export interface IConversionFunnelSpec {
+    conversionArrow?: {
+        arrows?: Arrow[];
+        margin?: number;
+        line?: IMarkSpec<Omit<IPathMarkSpec, 'points' | 'fill'>>;
+        symbol?: IMarkSpec<ISymbolMarkSpec>;
+        text?: IMarkSpec<ITextMarkSpec> & {
+            formatMethod?: IFormatMethod<[text: string, params?: {
+                from: any;
+                to: any;
+                arrow: Arrow;
+            }]>;
+            textMargin?: number;
+        };
+    };
+    funnelBackground?: IMarkSpec<IRectMarkSpec>;
+}
+export interface IConversionFunnelSeriesSpecBase extends IFunnelSeriesSpec, IConversionFunnelSpec {
+}
+export interface IConversionFunnelChartSpecBase extends IFunnelChartSpec, IConversionFunnelSpec {
+}
+export interface IConversionFunnelSeriesSpec extends Omit<IConversionFunnelSeriesSpecBase, 'type' | 'series'> {
+    type: 'conversionFunnel';
+}
+export interface IConversionFunnelChartSpec extends Omit<IConversionFunnelChartSpecBase, 'type' | 'series'> {
+    type: 'conversionFunnel';
+}

package/esm/charts/conversion-funnel/interface.js

@@ -0,0 +1,2 @@
+export { };
+//# sourceMappingURL=interface.js.map

package/esm/charts/conversion-funnel/interface.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["charts/conversion-funnel/interface.ts"],"names":[],"mappings":"","file":"interface.js","sourcesContent":["import type {\n  IFormatMethod,\n  IMarkSpec,\n  IPathMarkSpec,\n  IFunnelChartSpec,\n  ISymbolMarkSpec,\n  ITextMarkSpec,\n  IFunnelSeriesSpec,\n  IRectMarkSpec\n} from '@visactor/vchart';\n\nexport interface Arrow {\n  /**\n   * from 节点索引\n   */\n  from: number;\n  /**\n   * to 节点索引\n   */\n  to: number;\n  /**\n   * 箭头位置\n   */\n  position?: 'left' | 'right';\n  /**\n   * 箭头与柱子之间的距离\n   */\n  distance?: number;\n  /**\n   * 箭头文字\n   */\n  text?: string;\n}\n\nexport interface IConversionFunnelSpec {\n  /**\n   * 转化率箭头配置\n   */\n  conversionArrow?: {\n    /**\n     * 箭头配置\n     */\n    arrows?: Arrow[];\n    /**\n     * 箭头与柱子之间的距离\n     * @default 12\n     */\n    margin?: number;\n    /**\n     * 箭头线配置\n     */\n    line?: IMarkSpec<Omit<IPathMarkSpec, 'points' | 'fill'>>;\n    /**\n     * 箭头符号配置\n     */\n    symbol?: IMarkSpec<ISymbolMarkSpec>;\n    /**\n     * 标签配置\n     */\n    text?: IMarkSpec<ITextMarkSpec> & {\n      /**\n       * 箭头文字格式化方法\n       */\n      formatMethod?: IFormatMethod<[text: string, params?: { from: any; to: any; arrow: Arrow }]>;\n      /**\n       * 箭头文本与柱子之间的距离\n       * @default 4\n       */\n      textMargin?: number;\n    };\n  };\n  /**\n   * 漏斗层背景配置\n   */\n  funnelBackground?: IMarkSpec<IRectMarkSpec>;\n}\n\nexport interface IConversionFunnelSeriesSpecBase extends IFunnelSeriesSpec, IConversionFunnelSpec {}\n\nexport interface IConversionFunnelChartSpecBase extends IFunnelChartSpec, IConversionFunnelSpec {}\n\nexport interface IConversionFunnelSeriesSpec extends Omit<IConversionFunnelSeriesSpecBase, 'type' | 'series'> {\n  type: 'conversionFunnel';\n}\n\nexport interface IConversionFunnelChartSpec extends Omit<IConversionFunnelChartSpecBase, 'type' | 'series'> {\n  type: 'conversionFunnel';\n}\n"]}

package/esm/charts/conversion-funnel/util.d.ts

@@ -0,0 +1,3 @@
+import type { ParsedArrow } from './conversion-funnel-transformer';
+export declare function isArrowCross(arrow1: ParsedArrow, arrow2: ParsedArrow): boolean;
+export declare function isSameArrow(arrow1: ParsedArrow, arrow2: ParsedArrow): boolean;

package/esm/charts/conversion-funnel/util.js

@@ -0,0 +1,10 @@
+export function isArrowCross(arrow1, arrow2) {
+    const {from: from1, to: to1} = arrow1, {from: from2, to: to2} = arrow2;
+    return to1 > from2 && to2 > from1;
+}
+
+export function isSameArrow(arrow1, arrow2) {
+    const {from: from1, to: to1} = arrow1, {from: from2, to: to2} = arrow2;
+    return from1 === from2 && to1 === to2;
+}
+//# sourceMappingURL=util.js.map

package/esm/charts/conversion-funnel/util.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["charts/conversion-funnel/util.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,YAAY,CAAC,MAAmB,EAAE,MAAmB;IACnE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,MAAM,CAAC;IACxC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,MAAM,CAAC;IACxC,OAAO,GAAG,GAAG,KAAK,IAAI,GAAG,GAAG,KAAK,CAAC;AACpC,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,MAAmB,EAAE,MAAmB;IAClE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,MAAM,CAAC;IACxC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,MAAM,CAAC;IACxC,OAAO,KAAK,KAAK,KAAK,IAAI,GAAG,KAAK,GAAG,CAAC;AACxC,CAAC","file":"util.js","sourcesContent":["import type { ParsedArrow } from './conversion-funnel-transformer';\n\nexport function isArrowCross(arrow1: ParsedArrow, arrow2: ParsedArrow) {\n  const { from: from1, to: to1 } = arrow1;\n  const { from: from2, to: to2 } = arrow2;\n  return to1 > from2 && to2 > from1;\n}\n\nexport function isSameArrow(arrow1: ParsedArrow, arrow2: ParsedArrow) {\n  const { from: from1, to: to1 } = arrow1;\n  const { from: from2, to: to2 } = arrow2;\n  return from1 === from2 && to1 === to2;\n}\n"]}

package/esm/charts/ranking-bar/interface.d.ts

@@ -0,0 +1,45 @@
+import type { ILineGraphicAttribute, ITextGraphicAttribute } from '@visactor/vrender-core';
+export type IRankingBarData = any[];
+export interface IPlayConfig {
+    interval?: number;
+}
+export interface IRankingBarSpec extends IPlayConfig {
+    type: string;
+    data: IRankingBarData;
+    timeField: string;
+    xField: string;
+    yField: string;
+    topN?: number;
+    bar?: {
+        padding?: number;
+        cornerRadius?: number;
+    };
+    color?: Record<string, string>;
+    icon?: Record<string, string>;
+    iconPosition?: 'bar-end' | 'bar-start' | 'axis';
+    iconShape?: 'circle' | 'rect';
+    background?: string;
+    label?: {
+        visible?: boolean;
+        style?: ITextGraphicAttribute;
+    };
+    nameLabel?: ITextGraphicAttribute & {
+        visible?: boolean;
+        position?: 'bar-end' | 'bar-start';
+        style?: ITextGraphicAttribute;
+    };
+    timeLabel?: {
+        visible?: boolean;
+        style?: ITextGraphicAttribute;
+    };
+    xAxis?: {
+        label?: ITextGraphicAttribute;
+        domainLine?: ILineGraphicAttribute;
+        grid?: ILineGraphicAttribute;
+    };
+    yAxis?: {
+        label?: ITextGraphicAttribute;
+        domainLine?: ILineGraphicAttribute;
+        grid?: ILineGraphicAttribute;
+    };
+}

package/esm/charts/ranking-bar/interface.js

@@ -0,0 +1,2 @@
+export { };
+//# sourceMappingURL=interface.js.map

package/esm/charts/ranking-bar/interface.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["charts/ranking-bar/interface.ts"],"names":[],"mappings":"","file":"interface.js","sourcesContent":["import type { ILineGraphicAttribute, ITextGraphicAttribute } from '@visactor/vrender-core';\n\nexport type IRankingBarData = any[];\n\nexport interface IPlayConfig {\n  interval?: number; // 单位毫秒\n}\n\nexport interface IRankingBarSpec extends IPlayConfig {\n  type: string;\n  data: IRankingBarData;\n\n  timeField: string;\n  xField: string;\n  yField: string;\n\n  topN?: number;\n\n  bar?: {\n    padding?: number;\n    cornerRadius?: number;\n  };\n\n  color?: Record<string, string>;\n\n  icon?: Record<string, string>;\n\n  iconPosition?: 'bar-end' | 'bar-start' | 'axis';\n\n  iconShape?: 'circle' | 'rect';\n\n  background?: string;\n\n  label?: {\n    visible?: boolean;\n    style?: ITextGraphicAttribute;\n  };\n\n  nameLabel?: ITextGraphicAttribute & {\n    visible?: boolean;\n    position?: 'bar-end' | 'bar-start';\n    style?: ITextGraphicAttribute;\n  };\n\n  timeLabel?: {\n    visible?: boolean;\n    style?: ITextGraphicAttribute;\n  };\n\n  xAxis?: {\n    label?: ITextGraphicAttribute;\n    domainLine?: ILineGraphicAttribute;\n    grid?: ILineGraphicAttribute;\n  };\n\n  yAxis?: {\n    label?: ITextGraphicAttribute;\n    domainLine?: ILineGraphicAttribute;\n    grid?: ILineGraphicAttribute;\n  };\n}\n"]}

package/esm/charts/ranking-bar/ranking-bar-transformer.d.ts

@@ -0,0 +1,10 @@
+import type { IRankingBarSpec } from './interface';
+import type { ICommonChartSpec } from '@visactor/vchart';
+import { BaseChartSpecTransformer } from '@visactor/vchart';
+export declare class RankingBarChartSpecTransformer<T extends ICommonChartSpec> extends BaseChartSpecTransformer<any> {
+    transformSpec(spec: T): void;
+}
+export declare function processData(spec: IRankingBarSpec): {
+    timeData: Map<any, any>;
+    timeNodes: string[];
+};

package/esm/charts/ranking-bar/ranking-bar-transformer.js

@@ -0,0 +1,285 @@
+import { BaseChartSpecTransformer } from "@visactor/vchart";
+
+import { isValid } from "@visactor/vutils";
+
+export class RankingBarChartSpecTransformer extends BaseChartSpecTransformer {
+    transformSpec(spec) {
+        const {timeData: timeData, timeNodes: timeNodes} = processData(spec), {interval: userInterval, xField: xField, yField: yField, color: color, icon: icon, iconPosition: iconPosition, iconShape: iconShape, timeLabel: timeLabel, label: label, nameLabel: nameLabel, xAxis: xAxis, yAxis: yAxis} = spec, interval = userInterval || 1e3, exchangeDuration = Math.min(interval, 500);
+        if (spec.type = "common", spec.data = [ {
+            id: "timeData",
+            values: timeData.get(timeNodes[0])
+        }, {
+            id: "time",
+            values: [ {
+                time: timeNodes[0]
+            } ]
+        } ], spec.color = {
+            specified: Object.assign({}, color)
+        }, spec.region = [ {
+            clip: !0
+        } ], spec.series = [ {
+            type: "bar",
+            id: "ranking-bar",
+            dataId: "timeData",
+            direction: "horizontal",
+            yField: yField,
+            xField: xField,
+            seriesField: yField,
+            extensionMark: [],
+            label: labelSpec(label, Object.assign(Object.assign({}, nameLabel), {
+                yField: yField
+            }))
+        } ], spec.axes = axisSpec(xAxis, yAxis), spec.player = {
+            type: "continuous",
+            auto: !0,
+            loop: !1,
+            interval: interval,
+            specs: timeNodes.map((time => ({
+                data: [ {
+                    id: "timeData",
+                    values: timeData.get(time)
+                }, {
+                    id: "time",
+                    values: [ {
+                        time: time
+                    } ]
+                } ]
+            })))
+        }, spec.tooltip = {
+            visible: !1
+        }, spec.customMark = [], transformAnimationSpec(spec, {
+            interval: interval,
+            exchangeDuration: exchangeDuration
+        }), timeLabel && !1 === timeLabel.visible || spec.customMark.push(timeLabelSpec(timeLabel.style)), 
+        icon) {
+            const icon = iconSpec(iconPosition, iconShape, {
+                interval: interval,
+                exchangeDuration: exchangeDuration
+            });
+            spec.series[0].extensionMark.push(icon);
+        }
+        super.transformSpec(spec);
+    }
+}
+
+export function processData(spec) {
+    const {xField: xField, yField: yField, timeField: timeField, data: data, topN: topN = 10, icon: icon} = spec, timeNodes = new Set, timeData = new Map;
+    return data.sort(((d1, d2) => Number(d2[xField]) - Number(d1[xField]))), data.forEach((d => {
+        const time = d[timeField];
+        isValid(time) && timeNodes.add(time), timeData.has(time) || timeData.set(time, []);
+        const currentData = timeData.get(time);
+        if (currentData.length < topN) {
+            const _d = Object.assign({}, d);
+            icon && icon[_d[yField]] && (_d.icon = icon[_d[yField]]), currentData.push(_d);
+        }
+    })), {
+        timeData: timeData,
+        timeNodes: Array.from(timeNodes).sort()
+    };
+}
+
+function transformAnimationSpec(spec, {interval: interval, exchangeDuration: exchangeDuration}) {
+    spec.animationAppear = !1, spec.animationUpdate = {
+        bar: [ {
+            type: "update",
+            options: {
+                excludeChannels: [ "y" ]
+            },
+            easing: "linear",
+            duration: interval
+        }, {
+            channel: [ "y" ],
+            easing: "circInOut",
+            duration: exchangeDuration
+        } ],
+        axis: {
+            duration: interval,
+            easing: "linear"
+        }
+    }, spec.animationEnter = {
+        bar: [ {
+            type: "moveIn",
+            duration: exchangeDuration,
+            easing: "cubicInOut",
+            options: {
+                direction: "y",
+                orient: "negative",
+                point: (datum, element, param) => ({
+                    y: param.groupHeight + element.getBounds().height()
+                })
+            }
+        } ]
+    }, spec.animationExit = {
+        bar: [ {
+            type: "moveOut",
+            duration: exchangeDuration,
+            easing: "cubicInOut",
+            options: {
+                direction: "y",
+                orient: "negative"
+            }
+        } ]
+    };
+}
+
+function labelSpec(label = {}, nameLabel) {
+    var _a, _b, _c, _e;
+    const spec = [];
+    return !1 !== label.visible && spec.push({
+        visible: !0,
+        overlap: !1,
+        style: Object.assign({
+            fill: "rgb(64, 64, 64)"
+        }, label.style),
+        smartInvert: {
+            fillStrategy: (null === (_a = label.style) || void 0 === _a ? void 0 : _a.fill) ? "null" : void 0,
+            strokeStrategy: (null === (_b = label.style) || void 0 === _b ? void 0 : _b.stroke) ? "null" : void 0
+        }
+    }), nameLabel.visible && spec.push({
+        visible: !0,
+        overlap: !1,
+        style: Object.assign({}, nameLabel.style),
+        smartInvert: {
+            fillStrategy: (null === (_c = nameLabel.style) || void 0 === _c ? void 0 : _c.fill) ? "null" : void 0,
+            strokeStrategy: (null === (_e = nameLabel.style) || void 0 === _e ? void 0 : _e.stroke) ? "null" : void 0
+        },
+        position: "bar-end" === nameLabel.position ? "inside-right" : "inside-left",
+        formatter: `{${nameLabel.yField}}`
+    }), spec;
+}
+
+function axisSpec(xAxis = {}, yAxis = {}) {
+    const leftAxis = {
+        orient: "left",
+        type: "band",
+        inverse: !0,
+        label: {
+            style: yAxis.label
+        },
+        domainLine: {
+            style: yAxis.domainLine
+        },
+        grid: {
+            style: yAxis.grid
+        }
+    }, bottomAxis = {
+        orient: "bottom",
+        type: "linear",
+        nice: !1,
+        animation: !0,
+        label: {
+            style: xAxis.label
+        },
+        domainLine: {
+            style: xAxis.domainLine
+        },
+        grid: {
+            style: xAxis.grid
+        },
+        innerOffset: {
+            right: "10%"
+        }
+    };
+    return xAxis.label && (bottomAxis.label = xAxis.label), [ leftAxis, bottomAxis ];
+}
+
+function timeLabelSpec(textStyle = {}) {
+    return {
+        type: "text",
+        dataId: "time",
+        style: Object.assign({
+            textBaseline: "bottom",
+            fontSize: 200,
+            textAlign: "end",
+            fontWeight: 600,
+            text: datum => datum.time,
+            x: (datum, ctx) => {
+                var _a;
+                return (null === (_a = ctx.vchart.getChart().getCanvasRect()) || void 0 === _a ? void 0 : _a.width) - 50;
+            },
+            y: (datum, ctx) => {
+                var _a;
+                return (null === (_a = ctx.vchart.getChart().getCanvasRect()) || void 0 === _a ? void 0 : _a.height) - 80;
+            },
+            fill: "grey",
+            fillOpacity: .5
+        }, textStyle)
+    };
+}
+
+function iconSpec(iconPosition = "bar-end", iconShape = "circle", {interval: interval, exchangeDuration: exchangeDuration}) {
+    return {
+        type: "symbol",
+        dataId: "timeData",
+        style: {
+            symbolType: iconShape,
+            stroke: "white",
+            lineWidth: 1,
+            size: (data, ctx) => {
+                var _a, _b;
+                const vchart = ctx.vchart, series = null === (_a = vchart.getChart()) || void 0 === _a ? void 0 : _a.getSeriesInIndex(0)[0];
+                if (vchart && series) {
+                    const bandwidth = null !== (_b = series.getYAxisHelper().getBandwidth(0)) && void 0 !== _b ? _b : 0;
+                    return Math.max(bandwidth - 4, 0);
+                }
+                return 10;
+            },
+            background: data => data.icon,
+            x: (data, ctx) => {
+                var _a, _b;
+                const vchart = ctx.vchart, series = null === (_a = vchart.getChart()) || void 0 === _a ? void 0 : _a.getSeriesInIndex(0)[0];
+                if (vchart && series) {
+                    const bandwidth = null !== (_b = series.getYAxisHelper().getBandwidth(0)) && void 0 !== _b ? _b : 0;
+                    return "bar-start" === iconPosition ? bandwidth / 2 : "axis" === iconPosition ? -bandwidth / 2 : series.dataToPositionX(data) - bandwidth / 2;
+                }
+            },
+            y: (data, ctx) => {
+                var _a, _b;
+                const vchart = ctx.vchart, series = null === (_a = vchart.getChart()) || void 0 === _a ? void 0 : _a.getSeriesInIndex(0)[0];
+                if (vchart && series) {
+                    const bandwidth = null !== (_b = series.getYAxisHelper().getBandwidth(0)) && void 0 !== _b ? _b : 0;
+                    return series.dataToPositionY(data) + bandwidth / 2;
+                }
+            },
+            scaleY: "rect" === iconShape ? 1.2 : 1
+        },
+        animationUpdate: customMarkUpdateAnimation(interval, exchangeDuration),
+        animationEnter: [ {
+            type: "moveIn",
+            duration: exchangeDuration,
+            easing: "cubicInOut",
+            options: {
+                direction: "y",
+                orient: "negative",
+                point: (datum, element, param) => ({
+                    y: param.groupHeight + element.getBounds().height()
+                })
+            }
+        } ],
+        animationExit: [ {
+            type: "moveOut",
+            duration: exchangeDuration,
+            easing: "cubicInOut",
+            options: {
+                direction: "y",
+                orient: "negative"
+            }
+        } ]
+    };
+}
+
+function customMarkUpdateAnimation(duration, exchangeDuration) {
+    return [ {
+        duration: exchangeDuration,
+        easing: "cubicInOut",
+        channel: [ "y" ]
+    }, {
+        options: {
+            excludeChannels: [ "y" ]
+        },
+        channel: [ "x", "x2", "x1" ],
+        easing: "linear",
+        duration: duration
+    } ];
+}
+//# sourceMappingURL=ranking-bar-transformer.js.map

package/esm/charts/ranking-bar/ranking-bar-transformer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["charts/ranking-bar/ranking-bar-transformer.ts"],"names":[],"mappings":"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","file":"ranking-bar-transformer.js","sourcesContent":["import type { IRankingBarSpec } from './interface';\nimport type { ICartesianAxisSpec, ICommonChartSpec, ILabelSpec } from '@visactor/vchart';\nimport type { ITextGraphicAttribute } from '@visactor/vrender-core';\nimport { BaseChartSpecTransformer } from '@visactor/vchart';\nimport { isValid } from '@visactor/vutils';\n\nexport class RankingBarChartSpecTransformer<T extends ICommonChartSpec> extends BaseChartSpecTransformer<any> {\n  transformSpec(spec: T): void {\n    const { timeData, timeNodes } = processData(spec as unknown as IRankingBarSpec);\n    const {\n      interval: userInterval,\n      xField,\n      yField,\n      color,\n      icon,\n      iconPosition,\n      iconShape,\n      timeLabel,\n      label,\n      nameLabel,\n      xAxis,\n      yAxis\n    } = spec as unknown as IRankingBarSpec;\n\n    const interval = userInterval ? userInterval : 1000;\n    const exchangeDuration = Math.min(interval, 500);\n\n    spec.type = 'common';\n    spec.data = [\n      {\n        id: 'timeData',\n        values: timeData.get(timeNodes[0])\n      },\n      {\n        id: 'time',\n        values: [{ time: timeNodes[0] }]\n      }\n    ];\n\n    // @ts-ignore FIXME: type definition\n    spec.color = {\n      specified: {\n        ...color\n      }\n    };\n    spec.region = [{ clip: true }];\n    spec.series = [\n      {\n        type: 'bar',\n        id: 'ranking-bar',\n        dataId: 'timeData',\n        direction: 'horizontal',\n        yField,\n        xField,\n        seriesField: yField,\n        extensionMark: [],\n        label: labelSpec(label, { ...nameLabel, yField }) as any\n      }\n    ];\n    spec.axes = axisSpec(xAxis, yAxis);\n    spec.player = {\n      type: 'continuous',\n      auto: true,\n      loop: false,\n      interval,\n      specs: timeNodes.map(time => ({\n        data: [\n          { id: 'timeData', values: timeData.get(time) },\n          { id: 'time', values: [{ time }] }\n        ]\n      }))\n    };\n    spec.tooltip = { visible: false };\n    spec.customMark = [];\n\n    transformAnimationSpec(spec, { interval, exchangeDuration });\n\n    if (!timeLabel || timeLabel.visible !== false) {\n      spec.customMark.push(timeLabelSpec(timeLabel.style) as any);\n    }\n    if (icon) {\n      const icon = iconSpec(iconPosition, iconShape, { interval, exchangeDuration });\n      spec.series[0].extensionMark.push(icon as any);\n    }\n\n    super.transformSpec(spec);\n  }\n}\n\nexport function processData(spec: IRankingBarSpec) {\n  const { xField, yField, timeField, data, topN = 10, icon } = spec;\n\n  // 数据处理\n  const timeNodes = new Set<string>();\n  const timeData = new Map();\n\n  data.sort((d1, d2) => Number(d2[xField]) - Number(d1[xField]));\n\n  data.forEach(d => {\n    const time = d[timeField];\n    if (isValid(time)) {\n      timeNodes.add(time);\n    }\n    if (!timeData.has(time)) {\n      timeData.set(time, []);\n    }\n    const currentData = timeData.get(time);\n    if (currentData.length < topN) {\n      const _d = { ...d };\n      if (icon && icon[_d[yField]]) {\n        _d['icon'] = icon[_d[yField]];\n      }\n      currentData.push(_d);\n    }\n  });\n\n  return { timeData, timeNodes: Array.from(timeNodes).sort() };\n}\n\nfunction transformAnimationSpec(\n  spec: ICommonChartSpec,\n  { interval, exchangeDuration }: { interval: number; exchangeDuration: number }\n) {\n  (spec as any).animationAppear = false;\n  (spec as any).animationUpdate = {\n    bar: [\n      {\n        type: 'update',\n        options: { excludeChannels: ['y'] },\n        easing: 'linear',\n        duration: interval\n      },\n      {\n        channel: ['y'],\n        easing: 'circInOut',\n        duration: exchangeDuration\n      }\n    ],\n    axis: {\n      duration: interval,\n      easing: 'linear'\n    }\n  };\n  (spec as any).animationEnter = {\n    bar: [\n      {\n        type: 'moveIn',\n        duration: exchangeDuration,\n        easing: 'cubicInOut',\n        options: {\n          direction: 'y',\n          orient: 'negative',\n          point: (datum: any, element: any, param: any) => {\n            return {\n              y: param.groupHeight + element.getBounds().height()\n            };\n          }\n        }\n      }\n    ]\n  };\n  (spec as any).animationExit = {\n    bar: [\n      {\n        type: 'moveOut',\n        duration: exchangeDuration,\n        easing: 'cubicInOut',\n        options: {\n          direction: 'y',\n          orient: 'negative'\n        }\n      }\n    ]\n  };\n}\n\nfunction labelSpec(label: IRankingBarSpec['label'] = {}, nameLabel: IRankingBarSpec['nameLabel'] & { yField: string }) {\n  const spec: ILabelSpec[] = [];\n\n  if (label.visible !== false) {\n    spec.push({\n      visible: true,\n      overlap: false,\n      style: {\n        // @ts-ignore\n        fill: `rgb(64, 64, 64)`,\n        ...label.style\n      },\n      smartInvert: {\n        fillStrategy: label.style?.fill ? 'null' : undefined,\n        strokeStrategy: label.style?.stroke ? 'null' : undefined\n      }\n    });\n  }\n\n  if (nameLabel.visible) {\n    spec.push({\n      visible: true,\n      overlap: false,\n      // @ts-ignore\n      style: {\n        ...nameLabel.style\n      },\n      smartInvert: {\n        fillStrategy: nameLabel.style?.fill ? 'null' : undefined,\n        strokeStrategy: nameLabel.style?.stroke ? 'null' : undefined\n      },\n      position: nameLabel.position === 'bar-end' ? 'inside-right' : 'inside-left',\n      formatter: `{${nameLabel.yField}}`\n    });\n  }\n\n  return spec;\n}\n\nfunction axisSpec(xAxis: IRankingBarSpec['xAxis'] = {}, yAxis: IRankingBarSpec['yAxis'] = {}) {\n  const leftAxis: ICartesianAxisSpec = {\n    orient: 'left',\n    type: 'band',\n    inverse: true,\n    label: { style: yAxis.label },\n    domainLine: { style: yAxis.domainLine },\n    grid: { style: yAxis.grid }\n  };\n  const bottomAxis: ICartesianAxisSpec = {\n    orient: 'bottom',\n    type: 'linear',\n    nice: false,\n    animation: true,\n    label: { style: xAxis.label },\n    domainLine: { style: xAxis.domainLine },\n    grid: { style: xAxis.grid },\n    innerOffset: { right: '10%' }\n  };\n\n  if (xAxis.label) {\n    bottomAxis.label = xAxis.label;\n  }\n  return [leftAxis, bottomAxis];\n}\n\nfunction timeLabelSpec(textStyle: ITextGraphicAttribute = {}) {\n  return {\n    type: 'text',\n    dataId: 'time',\n    style: {\n      textBaseline: 'bottom',\n      fontSize: 200,\n      textAlign: 'end',\n      fontWeight: 600,\n      text: (datum: any) => datum.time,\n      x: (datum: any, ctx: any) => {\n        return ctx.vchart.getChart().getCanvasRect()?.width - 50;\n      },\n      y: (datum: any, ctx: any) => {\n        return ctx.vchart.getChart().getCanvasRect()?.height - 80;\n      },\n      fill: 'grey',\n      fillOpacity: 0.5,\n      ...textStyle\n    }\n  };\n}\n\nfunction iconSpec(\n  iconPosition: IRankingBarSpec['iconPosition'] = 'bar-end',\n  iconShape: IRankingBarSpec['iconShape'] = 'circle',\n  { interval, exchangeDuration }: any\n) {\n  return {\n    type: 'symbol',\n    dataId: 'timeData',\n    style: {\n      symbolType: iconShape,\n      stroke: 'white',\n      lineWidth: 1,\n      size: (data: any, ctx: any) => {\n        const vchart = ctx.vchart;\n        const series = vchart.getChart()?.getSeriesInIndex(0)[0];\n        if (vchart && series) {\n          const bandwidth = series.getYAxisHelper().getBandwidth(0) ?? 0;\n          return Math.max(bandwidth - 4, 0);\n        }\n        return 10;\n      },\n      background: (data: any) => data.icon,\n      // globalZIndex 有bug，会有动画闪烁和报错\n      // globalZIndex: 1, // 否则会被 region 区域 clip\n      x: (data: any, ctx: any) => {\n        const vchart = ctx.vchart;\n        const series = vchart.getChart()?.getSeriesInIndex(0)[0];\n        if (vchart && series) {\n          const bandwidth = series.getYAxisHelper().getBandwidth(0) ?? 0;\n          if (iconPosition === 'bar-start') {\n            return bandwidth / 2;\n          } else if (iconPosition === 'axis') {\n            return -bandwidth / 2;\n          } else {\n            return series.dataToPositionX(data) - bandwidth / 2;\n          }\n        }\n        return undefined;\n      },\n      y: (data: any, ctx: any) => {\n        const vchart = ctx.vchart;\n        const series = vchart.getChart()?.getSeriesInIndex(0)[0];\n        if (vchart && series) {\n          const bandwidth = series.getYAxisHelper().getBandwidth(0) ?? 0;\n          return series.dataToPositionY(data) + bandwidth / 2;\n        }\n        return undefined;\n      },\n      scaleY: iconShape === 'rect' ? 1.2 : 1\n    },\n    animationUpdate: customMarkUpdateAnimation(interval, exchangeDuration),\n    animationEnter: [\n      {\n        type: 'moveIn',\n        duration: exchangeDuration,\n        easing: 'cubicInOut',\n        options: {\n          direction: 'y',\n          orient: 'negative',\n          point: (datum: any, element: any, param: any) => {\n            return {\n              y: param.groupHeight + element.getBounds().height()\n            };\n          }\n        }\n      }\n    ],\n    animationExit: [\n      {\n        type: 'moveOut',\n        duration: exchangeDuration,\n        easing: 'cubicInOut',\n        options: {\n          direction: 'y',\n          orient: 'negative'\n        }\n      }\n    ]\n  };\n}\n\nfunction customMarkUpdateAnimation(duration: number, exchangeDuration: number) {\n  return [\n    {\n      duration: exchangeDuration,\n      easing: 'cubicInOut',\n      channel: ['y']\n    },\n    {\n      options: { excludeChannels: ['y'] },\n      channel: ['x', 'x2', 'x1'],\n      easing: 'linear',\n      duration\n    }\n  ];\n}\n"]}

package/esm/charts/ranking-bar/ranking-bar.d.ts

@@ -0,0 +1,16 @@
+import { IRankingBarSpec } from './interface';
+import { VChart, BaseChart } from '@visactor/vchart';
+import { RankingBarChartSpecTransformer } from './ranking-bar-transformer';
+export declare class RankingBar extends BaseChart<Omit<IRankingBarSpec, 'color'>> {
+    type: string;
+    static type: string;
+    static readonly view: string;
+    _spec: IRankingBarSpec;
+    static readonly transformerConstructor: typeof RankingBarChartSpecTransformer;
+    readonly transformerConstructor: typeof RankingBarChartSpecTransformer;
+    init(): void;
+    protected isValid(): boolean;
+}
+export declare const registerRankingBarChart: (option?: {
+    VChart?: typeof VChart;
+}) => void;

package/esm/charts/ranking-bar/ranking-bar.js

@@ -0,0 +1,27 @@
+import { VChart, BaseChart } from "@visactor/vchart";
+
+import { RankingBarChartSpecTransformer } from "./ranking-bar-transformer";
+
+export class RankingBar extends BaseChart {
+    constructor() {
+        super(...arguments), this.type = "rankingBar", this.transformerConstructor = RankingBarChartSpecTransformer;
+    }
+    init() {
+        this.isValid() && super.init();
+    }
+    isValid() {
+        var _a, _b, _c, _d;
+        const {xField: xField, yField: yField, timeField: timeField, data: data} = this._spec;
+        return xField && yField && timeField ? !!data || (null === (_d = (_c = this._option).onError) || void 0 === _d || _d.call(_c, "Data is required"), 
+        !1) : (null === (_b = (_a = this._option).onError) || void 0 === _b || _b.call(_a, "Missing Required Config: `xField`, `yField`, `timeField` "), 
+        !1);
+    }
+}
+
+RankingBar.type = "rankingBar", RankingBar.view = "singleDefault", RankingBar.transformerConstructor = RankingBarChartSpecTransformer;
+
+export const registerRankingBarChart = option => {
+    const vchartConstructor = (null == option ? void 0 : option.VChart) || VChart;
+    vchartConstructor && vchartConstructor.useChart([ RankingBar ]);
+};
+//# sourceMappingURL=ranking-bar.js.map

package/esm/charts/ranking-bar/ranking-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["charts/ranking-bar/ranking-bar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,8BAA8B,EAAE,MAAM,2BAA2B,CAAC;AAE3E,MAAM,OAAO,UAAW,SAAQ,SAAyC;IAAzE;;QACE,SAAI,GAAG,YAAY,CAAC;QAOX,2BAAsB,GAAG,8BAA8B,CAAC;IAqBnE,CAAC;IAnBC,IAAI;QACF,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE;YACnB,OAAO;SACR;QACD,KAAK,CAAC,IAAI,EAAE,CAAC;IACf,CAAC;IAES,OAAO;;QACf,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACvD,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM,IAAI,CAAC,SAAS,EAAE;YACpC,MAAA,MAAA,IAAI,CAAC,OAAO,EAAC,OAAO,mDAAG,2DAA2D,CAAC,CAAC;YACpF,OAAO,KAAK,CAAC;SACd;QACD,IAAI,CAAC,IAAI,EAAE;YACT,MAAA,MAAA,IAAI,CAAC,OAAO,EAAC,OAAO,mDAAG,kBAAkB,CAAC,CAAC;YAC3C,OAAO,KAAK,CAAC;SACd;QACD,OAAO,IAAI,CAAC;IACd,CAAC;;AA1BM,eAAI,GAAG,YAAY,CAAC;AACX,eAAI,GAAW,eAAe,CAAC;AAI/B,iCAAsB,GAAG,8BAA8B,CAAC;AAwB1E,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,MAAmC,EAAE,EAAE;IAC7E,MAAM,iBAAiB,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,KAAI,MAAM,CAAC;IACnD,IAAI,iBAAiB,EAAE;QACrB,iBAAiB,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;KAC1C;AACH,CAAC,CAAC","file":"ranking-bar.js","sourcesContent":["import { IRankingBarSpec } from './interface';\nimport { VChart, BaseChart } from '@visactor/vchart';\nimport { RankingBarChartSpecTransformer } from './ranking-bar-transformer';\n\nexport class RankingBar extends BaseChart<Omit<IRankingBarSpec, 'color'>> {\n  type = 'rankingBar';\n  static type = 'rankingBar';\n  static readonly view: string = 'singleDefault';\n\n  declare _spec: IRankingBarSpec;\n\n  static readonly transformerConstructor = RankingBarChartSpecTransformer;\n  readonly transformerConstructor = RankingBarChartSpecTransformer;\n\n  init() {\n    if (!this.isValid()) {\n      return;\n    }\n    super.init();\n  }\n\n  protected isValid() {\n    const { xField, yField, timeField, data } = this._spec;\n    if (!xField || !yField || !timeField) {\n      this._option.onError?.('Missing Required Config: `xField`, `yField`, `timeField` ');\n      return false;\n    }\n    if (!data) {\n      this._option.onError?.('Data is required');\n      return false;\n    }\n    return true;\n  }\n}\n\nexport const registerRankingBarChart = (option?: { VChart?: typeof VChart }) => {\n  const vchartConstructor = option?.VChart || VChart;\n  if (vchartConstructor) {\n    vchartConstructor.useChart([RankingBar]);\n  }\n};\n"]}

package/esm/charts/ranking-list/constant.d.ts

@@ -0,0 +1,2 @@
+import { IRankingListSpec } from './interface';
+export declare const defaultSpec: Omit<IRankingListSpec, 'type' | 'data' | 'xField' | 'yField'>;