@visactor/vchart-extension 1.13.9-alpha.1 → 1.13.9-alpha.11

package/cjs/charts/sequence-scatter-pixel/sequence-scatter-pixel-transformer.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.SequenceScatterPixelChartSpecTransformer = void 0;
+
+const vchart_1 = require("@visactor/vchart"), utils_1 = require("./utils"), constant_1 = require("./constant");
+
+class SequenceScatterPixelChartSpecTransformer extends vchart_1.CommonChartSpecTransformer {
+    transformSpec(spec) {
+        var _a, _b, _c, _d, _e;
+        super.transformSpec(spec);
+        const dataSpecs = (0, utils_1.processSequenceData)(spec);
+        spec.type = "common", spec.dataKey = constant_1.DATA_KEY, spec.data = dataSpecs[0].data, 
+        spec.width = 300, spec.height = 300, spec.autoFit = !1, spec.series = [ {
+            type: "scatter",
+            xField: spec.xField,
+            yField: spec.yField
+        } ], spec.player && (spec.player = Object.assign(Object.assign({}, spec.player), {
+            specs: dataSpecs
+        }), spec.animationAppear = {
+            duration: null !== (_b = null === (_a = spec.player) || void 0 === _a ? void 0 : _a.duration) && void 0 !== _b ? _b : 2e3,
+            easing: "linear"
+        }, spec.animationUpdate = {
+            duration: null !== (_d = null === (_c = spec.player) || void 0 === _c ? void 0 : _c.duration) && void 0 !== _d ? _d : 2e3,
+            easing: "linear"
+        }), spec.axes = [ {
+            orient: "left",
+            type: "linear"
+        }, {
+            orient: "bottom",
+            label: {
+                visible: !0
+            },
+            type: "linear"
+        } ], spec.customMark = [ {
+            type: "image",
+            dataIndex: 2,
+            style: {
+                x: 0,
+                y: 0,
+                width: 300,
+                height: 300,
+                image: datum => datum.imageData,
+                zIndex: -1
+            }
+        }, {
+            type: "text",
+            dataIndex: 1,
+            style: Object.assign({
+                text: datum => datum.inter,
+                x: 50,
+                y: () => 10,
+                textBaseline: "top",
+                textAlign: "left",
+                fontSize: 100,
+                fontWeight: "bolder",
+                fill: "black",
+                fillOpacity: .2
+            }, null === (_e = spec.infoLabel) || void 0 === _e ? void 0 : _e.style)
+        } ], spec.tooltip = {
+            visible: !1
+        }, super.transformSpec(spec);
+    }
+}
+
+exports.SequenceScatterPixelChartSpecTransformer = SequenceScatterPixelChartSpecTransformer;
+//# sourceMappingURL=sequence-scatter-pixel-transformer.js.map

package/cjs/charts/sequence-scatter-pixel/sequence-scatter-pixel-transformer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["charts/sequence-scatter-pixel/sequence-scatter-pixel-transformer.ts"],"names":[],"mappings":";;;AAEA,6CAA8D;AAC9D,mCAA8C;AAC9C,yCAAsC;AAEtC,MAAa,wCAAyC,SAAQ,mCAA+B;IAC3F,aAAa,CAAC,IAAS;;QACrB,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAC1B,MAAM,SAAS,GAAG,IAAA,2BAAmB,EAAC,IAA4C,CAAC,CAAC;QAEpF,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;QACrB,IAAI,CAAC,OAAO,GAAG,mBAAQ,CAAC;QACxB,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAE9B,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;QACjB,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC;QAClB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QAErB,IAAI,CAAC,MAAM,GAAG;YACZ;gBACE,IAAI,EAAE,SAAS;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,MAAM,EAAE,IAAI,CAAC,MAAM;aACpB;SACF,CAAC;QAEF,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,KAAK,EAAE,SAAS,GACjB,CAAC;YACF,IAAI,CAAC,eAAe,GAAG;gBACrB,QAAQ,EAAE,MAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,QAAQ,mCAAI,IAAI;gBACvC,MAAM,EAAE,QAAQ;aACjB,CAAC;YAEF,IAAI,CAAC,eAAe,GAAG;gBACrB,QAAQ,EAAE,MAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,QAAQ,mCAAI,IAAI;gBACvC,MAAM,EAAE,QAAQ;aACjB,CAAC;SACH;QAED,IAAI,CAAC,IAAI,GAAG;YACV;gBACE,MAAM,EAAE,MAAM;gBACd,IAAI,EAAE,QAAQ;aACf;YACD;gBACE,MAAM,EAAE,QAAQ;gBAChB,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;gBACxB,IAAI,EAAE,QAAQ;aACf;SACF,CAAC;QAEF,IAAI,CAAC,UAAU,GAAG;YAEhB;gBACE,IAAI,EAAE,OAAO;gBACb,SAAS,EAAE,CAAC;gBACZ,KAAK,EAAE;oBACL,CAAC,EAAE,CAAC;oBACJ,CAAC,EAAE,CAAC;oBACJ,KAAK,EAAE,GAAG;oBACV,MAAM,EAAE,GAAG;oBACX,KAAK,EAAE,CAAC,KAAY,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS;oBACxC,MAAM,EAAE,CAAC,CAAC;iBACX;aACF;YACD;gBACE,IAAI,EAAE,MAAM;gBACZ,SAAS,EAAE,CAAC;gBACZ,KAAK,kBACH,IAAI,EAAE,CAAC,KAAY,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,EACtC,CAAC,EAAE,EAAE,EACL,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EACX,YAAY,EAAE,KAAK,EACnB,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,GAAG,EACb,UAAU,EAAE,QAAQ,EACpB,IAAI,EAAE,OAAO,EACb,WAAW,EAAE,GAAG,IACb,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,CACzB;aACF;SACF,CAAC;QAEF,IAAI,CAAC,OAAO,GAAG;YACb,OAAO,EAAE,KAAK;SACf,CAAC;QAEF,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;CACF;AAvFD,4FAuFC","file":"sequence-scatter-pixel-transformer.js","sourcesContent":["import { Datum } from '@visactor/vchart/src/typings';\nimport type { ISequenceScatterPixelSpec } from './interface';\nimport { CommonChartSpecTransformer } from '@visactor/vchart';\nimport { processSequenceData } from './utils';\nimport { DATA_KEY } from './constant';\n\nexport class SequenceScatterPixelChartSpecTransformer extends CommonChartSpecTransformer<any> {\n  transformSpec(spec: any): void {\n    super.transformSpec(spec);\n    const dataSpecs = processSequenceData(spec as unknown as ISequenceScatterPixelSpec);\n\n    spec.type = 'common';\n    spec.dataKey = DATA_KEY;\n    spec.data = dataSpecs[0].data;\n\n    spec.width = 300;\n    spec.height = 300;\n    spec.autoFit = false;\n\n    spec.series = [\n      {\n        type: 'scatter',\n        xField: spec.xField,\n        yField: spec.yField\n      }\n    ];\n\n    if (spec.player) {\n      spec.player = {\n        ...spec.player,\n        specs: dataSpecs\n      };\n      spec.animationAppear = {\n        duration: spec.player?.duration ?? 2000,\n        easing: 'linear'\n      };\n\n      spec.animationUpdate = {\n        duration: spec.player?.duration ?? 2000,\n        easing: 'linear'\n      };\n    }\n\n    spec.axes = [\n      {\n        orient: 'left',\n        type: 'linear'\n      },\n      {\n        orient: 'bottom',\n        label: { visible: true },\n        type: 'linear'\n      }\n    ];\n\n    spec.customMark = [\n      // 背景图像\n      {\n        type: 'image',\n        dataIndex: 2,\n        style: {\n          x: 0,\n          y: 0,\n          width: 300,\n          height: 300,\n          image: (datum: Datum) => datum.imageData,\n          zIndex: -1\n        }\n      },\n      {\n        type: 'text',\n        dataIndex: 1,\n        style: {\n          text: (datum: Datum) => datum['inter'],\n          x: 50,\n          y: () => 10,\n          textBaseline: 'top',\n          textAlign: 'left',\n          fontSize: 100,\n          fontWeight: 'bolder',\n          fill: 'black',\n          fillOpacity: 0.2,\n          ...spec.infoLabel?.style\n        }\n      }\n    ];\n\n    spec.tooltip = {\n      visible: false\n    };\n\n    super.transformSpec(spec);\n  }\n}\n"]}

package/cjs/charts/sequence-scatter-pixel/sequence-scatter-pixel.d.ts

@@ -0,0 +1,16 @@
+import { ISequenceScatterPixelSpec } from './interface';
+import { VChart, BaseChart } from '@visactor/vchart';
+import { SequenceScatterPixelChartSpecTransformer } from './sequence-scatter-pixel-transformer';
+export declare class SequenceScatterPixel extends BaseChart<Omit<ISequenceScatterPixelSpec, 'data'>> {
+    type: string;
+    static type: string;
+    static readonly view: string;
+    _spec: ISequenceScatterPixelSpec;
+    static readonly transformerConstructor: typeof SequenceScatterPixelChartSpecTransformer;
+    readonly transformerConstructor: typeof SequenceScatterPixelChartSpecTransformer;
+    init(): void;
+    protected isValid(): boolean;
+}
+export declare const registerSequenceScatterPixel: (option?: {
+    VChart?: typeof VChart;
+}) => void;

package/cjs/charts/sequence-scatter-pixel/sequence-scatter-pixel.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.registerSequenceScatterPixel = exports.SequenceScatterPixel = void 0;
+
+const vchart_1 = require("@visactor/vchart"), sequence_scatter_pixel_transformer_1 = require("./sequence-scatter-pixel-transformer");
+
+class SequenceScatterPixel extends vchart_1.BaseChart {
+    constructor() {
+        super(...arguments), this.type = "sequenceScatterPixel", this.transformerConstructor = sequence_scatter_pixel_transformer_1.SequenceScatterPixelChartSpecTransformer;
+    }
+    init() {
+        this.isValid() && super.init();
+    }
+    isValid() {
+        var _a, _b, _c, _d;
+        const {xField: xField, yField: yField, data: data} = this._spec;
+        return xField && yField ? !!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` "), 
+        !1);
+    }
+}
+
+exports.SequenceScatterPixel = SequenceScatterPixel, SequenceScatterPixel.type = "sequenceScatterPixel", 
+SequenceScatterPixel.view = "singleDefault", SequenceScatterPixel.transformerConstructor = sequence_scatter_pixel_transformer_1.SequenceScatterPixelChartSpecTransformer;
+
+const registerSequenceScatterPixel = option => {
+    const vchartConstructor = (null == option ? void 0 : option.VChart) || vchart_1.VChart;
+    vchartConstructor && vchartConstructor.useChart([ SequenceScatterPixel, vchart_1.ScatterChart ]);
+};
+
+exports.registerSequenceScatterPixel = registerSequenceScatterPixel;
+//# sourceMappingURL=sequence-scatter-pixel.js.map

package/cjs/charts/sequence-scatter-pixel/sequence-scatter-pixel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["charts/sequence-scatter-pixel/sequence-scatter-pixel.ts"],"names":[],"mappings":";;;AACA,6CAAmE;AACnE,6FAAgG;AAEhG,MAAa,oBAAqB,SAAQ,kBAAkD;IAA5F;;QACE,SAAI,GAAG,sBAAsB,CAAC;QAOrB,2BAAsB,GAAG,6EAAwC,CAAC;IAqB7E,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,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC5C,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE;YACtB,MAAA,MAAA,IAAI,CAAC,OAAO,EAAC,OAAO,mDAAG,8CAA8C,CAAC,CAAC;YACvE,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;;AA5BH,oDA6BC;AA3BQ,yBAAI,GAAG,sBAAsB,CAAC;AACrB,yBAAI,GAAW,eAAe,CAAC;AAI/B,2CAAsB,GAAG,6EAAwC,CAAC;AAwB7E,MAAM,4BAA4B,GAAG,CAAC,MAAmC,EAAE,EAAE;IAClF,MAAM,iBAAiB,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,KAAI,eAAM,CAAC;IACnD,IAAI,iBAAiB,EAAE;QACrB,iBAAiB,CAAC,QAAQ,CAAC,CAAC,oBAAoB,EAAE,qBAAY,CAAC,CAAC,CAAC;KAClE;AACH,CAAC,CAAC;AALW,QAAA,4BAA4B,gCAKvC","file":"sequence-scatter-pixel.js","sourcesContent":["import { ISequenceScatterPixelSpec } from './interface';\nimport { VChart, BaseChart, ScatterChart } from '@visactor/vchart';\nimport { SequenceScatterPixelChartSpecTransformer } from './sequence-scatter-pixel-transformer';\n\nexport class SequenceScatterPixel extends BaseChart<Omit<ISequenceScatterPixelSpec, 'data'>> {\n  type = 'sequenceScatterPixel';\n  static type = 'sequenceScatterPixel';\n  static readonly view: string = 'singleDefault';\n\n  declare _spec: ISequenceScatterPixelSpec;\n\n  static readonly transformerConstructor = SequenceScatterPixelChartSpecTransformer;\n  readonly transformerConstructor = SequenceScatterPixelChartSpecTransformer;\n\n  init() {\n    if (!this.isValid()) {\n      return;\n    }\n    super.init();\n  }\n\n  protected isValid() {\n    const { xField, yField, data } = this._spec;\n    if (!xField || !yField) {\n      this._option.onError?.('Missing Required Config: `xField`, `yField` ');\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 registerSequenceScatterPixel = (option?: { VChart?: typeof VChart }) => {\n  const vchartConstructor = option?.VChart || VChart;\n  if (vchartConstructor) {\n    vchartConstructor.useChart([SequenceScatterPixel, ScatterChart]);\n  }\n};\n"]}

package/cjs/charts/sequence-scatter-pixel/utils.d.ts

@@ -0,0 +1,3 @@
+import { ISequenceScatterPixelSpec } from './interface';
+export declare function createImageDataFromColorMatrix(colorMatrix: any[][], spec: ISequenceScatterPixelSpec): string | null;
+export declare function processSequenceData(spec: ISequenceScatterPixelSpec): any[];

package/cjs/charts/sequence-scatter-pixel/utils.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.processSequenceData = exports.createImageDataFromColorMatrix = void 0;
+
+const constant_1 = require("./constant");
+
+function createImageDataFromColorMatrix(colorMatrix, spec) {
+    var _a;
+    if ("undefined" == typeof document) throw new Error("Canvas rendering requires browser environment with document object");
+    const canvas = document.createElement("canvas");
+    canvas.width = spec.width, canvas.height = spec.height;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) throw new Error("Failed to get 2D rendering context from canvas");
+    const imageData = ctx.createImageData(spec.width, spec.height);
+    for (let y = 0; y < 300; y++) for (let x = 0; x < 300; x++) {
+        const rgb = (null === (_a = colorMatrix[y]) || void 0 === _a ? void 0 : _a[x]) || [ 0, 0, 0 ], pixelIndex = 4 * (300 * y + x);
+        imageData.data[pixelIndex] = Math.round(255 * rgb[0]), imageData.data[pixelIndex + 1] = Math.round(255 * rgb[1]), 
+        imageData.data[pixelIndex + 2] = Math.round(255 * rgb[2]), imageData.data[pixelIndex + 3] = 255;
+    }
+    return ctx.putImageData(imageData, 0, 0), canvas.toDataURL("image/png");
+}
+
+function processSequenceData(spec) {
+    const result = [];
+    return Object.keys(spec.data).forEach((inter => {
+        let backgroundData = null;
+        if (spec.backgroundColors && spec.backgroundColors[inter]) {
+            backgroundData = {
+                imageData: createImageDataFromColorMatrix(spec.backgroundColors[inter], spec)
+            };
+        }
+        result.push({
+            data: [ {
+                id: "nodes",
+                values: spec.data[inter].map(((d, i) => Object.assign(Object.assign({}, d), {
+                    [constant_1.DATA_KEY]: i
+                })))
+            }, {
+                id: "inter",
+                values: [ {
+                    inter: inter
+                } ]
+            }, {
+                id: constant_1.BACKGROUND_KEY,
+                values: backgroundData ? [ backgroundData ] : []
+            } ]
+        });
+    })), result;
+}
+
+exports.createImageDataFromColorMatrix = createImageDataFromColorMatrix, exports.processSequenceData = processSequenceData;

package/cjs/charts/sequence-scatter-pixel/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["charts/sequence-scatter-pixel/utils.ts"],"names":[],"mappings":"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","file":"utils.js","sourcesContent":["import { ISequenceScatterPixelSpec } from './interface';\nimport { BACKGROUND_KEY, DATA_KEY } from './constant';\n\n// 将RGB三元组数组转换为Canvas可用的imageData\nexport function createImageDataFromColorMatrix(colorMatrix: any[][], spec: ISequenceScatterPixelSpec): string | null {\n  // 浏览器环境检查\n  if (typeof document === 'undefined') {\n    throw new Error('Canvas rendering requires browser environment with document object'); // 非浏览器环境下返回null\n  }\n\n  // 创建Canvas离屏渲染\n  const canvas = document.createElement('canvas');\n  canvas.width = spec.width;\n  canvas.height = spec.height;\n  const ctx = canvas.getContext('2d');\n\n  if (!ctx) {\n    throw new Error('Failed to get 2D rendering context from canvas'); // Canvas context creation failed\n  }\n\n  // 创建imageData\n  const imageData = ctx.createImageData(spec.width, spec.height);\n\n  // 填充像素数据\n  for (let y = 0; y < 300; y++) {\n    for (let x = 0; x < 300; x++) {\n      const rgb = colorMatrix[y]?.[x] || [0, 0, 0];\n      const pixelIndex = (y * 300 + x) * 4;\n\n      // 转换0-1范围到0-255\n      imageData.data[pixelIndex] = Math.round(rgb[0] * 255); // R\n      imageData.data[pixelIndex + 1] = Math.round(rgb[1] * 255); // G\n      imageData.data[pixelIndex + 2] = Math.round(rgb[2] * 255); // B\n      imageData.data[pixelIndex + 3] = 255; // A (完全不透明)\n    }\n  }\n\n  // 将imageData绘制到canvas然后返回dataURL\n  ctx.putImageData(imageData, 0, 0);\n  return canvas.toDataURL('image/png');\n}\n\nexport function processSequenceData(spec: ISequenceScatterPixelSpec) {\n  const result: any[] = [];\n  Object.keys(spec.data).forEach(inter => {\n    let backgroundData = null;\n    if (spec.backgroundColors && spec.backgroundColors[inter]) {\n      const imageData = createImageDataFromColorMatrix(spec.backgroundColors[inter], spec);\n      backgroundData = { imageData };\n    }\n    result.push({\n      data: [\n        {\n          id: 'nodes',\n          values: spec.data[inter].map((d, i) => {\n            return { ...d, [DATA_KEY]: i };\n          })\n        },\n        {\n          id: 'inter',\n          values: [\n            {\n              inter\n            }\n          ]\n        },\n        {\n          id: BACKGROUND_KEY,\n          values: backgroundData ? [backgroundData] : []\n        }\n      ]\n    });\n  });\n  return result;\n}\n"]}

package/cjs/components/series-label/type.js

@@ -2,4 +2,5 @@
 
 Object.defineProperty(exports, "__esModule", {
     value: !0
-});
+});
+//# sourceMappingURL=type.js.map

package/cjs/index.d.ts

@@ -1,6 +1,9 @@
 export * from './charts/ranking-bar/ranking-bar';
 export * from './charts/ranking-list/ranking-list';
 export * from './charts/conversion-funnel';
+export * from './charts/sequence-scatter-link/sequence-scatter-link';
+export * from './charts/sequence-scatter-kde/sequence-scatter-kde';
+export * from './charts/sequence-scatter-pixel/sequence-scatter-pixel';
 export * from './components/series-break';
 export * from './components/bar-link';
 export * from './components/series-label';

package/cjs/index.js

@@ -18,5 +18,8 @@ var __createBinding = this && this.__createBinding || (Object.create ? function(
 Object.defineProperty(exports, "__esModule", {
     value: !0
 }), __exportStar(require("./charts/ranking-bar/ranking-bar"), exports), __exportStar(require("./charts/ranking-list/ranking-list"), exports), 
-__exportStar(require("./charts/conversion-funnel"), exports), __exportStar(require("./components/series-break"), exports), 
-__exportStar(require("./components/bar-link"), exports), __exportStar(require("./components/series-label"), exports);
+__exportStar(require("./charts/conversion-funnel"), exports), __exportStar(require("./charts/sequence-scatter-link/sequence-scatter-link"), exports), 
+__exportStar(require("./charts/sequence-scatter-kde/sequence-scatter-kde"), exports), 
+__exportStar(require("./charts/sequence-scatter-pixel/sequence-scatter-pixel"), exports), 
+__exportStar(require("./components/series-break"), exports), __exportStar(require("./components/bar-link"), exports), 
+__exportStar(require("./components/series-label"), exports);

package/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,mEAAiD;AACjD,qEAAmD;AACnD,6DAA2C;AAE3C,4DAA0C;AAC1C,wDAAsC;AACtC,4DAA0C","file":"index.js","sourcesContent":["export * from './charts/ranking-bar/ranking-bar';\nexport * from './charts/ranking-list/ranking-list';\nexport * from './charts/conversion-funnel';\n\nexport * from './components/series-break';\nexport * from './components/bar-link';\nexport * from './components/series-label';\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,mEAAiD;AACjD,qEAAmD;AACnD,6DAA2C;AAC3C,uFAAqE;AACrE,qFAAmE;AACnE,yFAAuE;AAEvE,4DAA0C;AAC1C,wDAAsC;AACtC,4DAA0C","file":"index.js","sourcesContent":["export * from './charts/ranking-bar/ranking-bar';\nexport * from './charts/ranking-list/ranking-list';\nexport * from './charts/conversion-funnel';\nexport * from './charts/sequence-scatter-link/sequence-scatter-link';\nexport * from './charts/sequence-scatter-kde/sequence-scatter-kde';\nexport * from './charts/sequence-scatter-pixel/sequence-scatter-pixel';\n\nexport * from './components/series-break';\nexport * from './components/bar-link';\nexport * from './components/series-label';\n"]}

package/esm/charts/sequence-scatter-kde/constant.d.ts

@@ -0,0 +1,3 @@
+export declare const DATA_KEY = "dataKey";
+export declare const BACKGROUND_KEY = "background";
+export declare const EXPAND_RATIO = 0.2;

package/esm/charts/sequence-scatter-kde/constant.js

@@ -0,0 +1,6 @@
+export const DATA_KEY = "dataKey";
+
+export const BACKGROUND_KEY = "background";
+
+export const EXPAND_RATIO = .2;
+//# sourceMappingURL=constant.js.map

package/esm/charts/sequence-scatter-kde/constant.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["charts/sequence-scatter-kde/constant.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG,SAAS,CAAC;AAClC,MAAM,CAAC,MAAM,cAAc,GAAG,YAAY,CAAC;AAC3C,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAC","file":"constant.js","sourcesContent":["export const DATA_KEY = 'dataKey';\nexport const BACKGROUND_KEY = 'background';\nexport const EXPAND_RATIO = 0.2; // 拓展比例\n"]}

package/esm/charts/sequence-scatter-kde/interface.d.ts

@@ -0,0 +1,29 @@
+import { IPlayerSpec } from '@visactor/vchart';
+import { Datum } from '@visactor/vchart/src/typings/common';
+import { ITextGraphicAttribute } from '@visactor/vrender-core';
+type IterationData = Datum[];
+type ISequenceScatterKDEData = {
+    [Iteration: string]: IterationData;
+};
+export interface ISequenceScatterKDESpec {
+    type: 'sequenceScatterKDE';
+    data: ISequenceScatterKDEData;
+    xField: string;
+    yField: string;
+    player: Omit<IPlayerSpec, 'specs'>;
+    infoLabel: {
+        visible: boolean;
+        style: ITextGraphicAttribute;
+    };
+    backgroundColors: {
+        [Iteration: string]: any;
+    };
+    width: number;
+    height: number;
+}
+export interface Point {
+    x: number;
+    y: number;
+    label?: string;
+}
+export {};

package/esm/charts/sequence-scatter-kde/interface.js

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

package/esm/charts/sequence-scatter-kde/interface.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["charts/sequence-scatter-kde/interface.ts"],"names":[],"mappings":"","file":"interface.js","sourcesContent":["import { IPlayerSpec } from '@visactor/vchart';\nimport { Datum } from '@visactor/vchart/src/typings/common';\nimport { ITextGraphicAttribute } from '@visactor/vrender-core';\n\ntype IterationData = Datum[];\ntype ISequenceScatterKDEData = {\n  /**\n   * key: 迭代信息\n   * value: 每个迭代的数据\n   */\n  [Iteration: string]: IterationData;\n\n  // TODO: 支持边的绘制\n  // [Iteration: string]: {\n  //   /**\n  //    * 节点数据\n  //    */\n  //   nodes: IterationNodesData;\n  //   /**\n  //    * 边数据\n  //    */\n  //   edges: IterationEdgesData;\n  // };\n};\n\nexport interface ISequenceScatterKDESpec {\n  /**\n   * 图表类型\n   */\n  type: 'sequenceScatterKDE';\n  /**\n   * 数据\n   */\n  data: ISequenceScatterKDEData;\n  /**\n   * x轴字段\n   */\n  xField: string;\n  /**\n   * y轴字段\n   */\n  yField: string;\n  /**\n   * 播放器配置\n   */\n  player: Omit<IPlayerSpec, 'specs'>;\n  /**\n   * 文字标记（标记当前处于第几个迭代）\n   */\n  infoLabel: {\n    visible: boolean;\n    style: ITextGraphicAttribute;\n  };\n  /**\n   * 背景数据\n   */\n  backgroundColors: {\n    [Iteration: string]: any;\n  };\n  /**\n   * 宽度\n   */\n  width: number;\n  /**\n   * 高度\n   */\n  height: number;\n}\n\nexport interface Point {\n  x: number;\n  y: number;\n  label?: string;\n}\n"]}

package/esm/charts/sequence-scatter-kde/sequence-scatter-kde-transformer.d.ts

@@ -0,0 +1,6 @@
+import type { ISequenceScatterKDESpec } from './interface';
+import { CommonChartSpecTransformer } from '@visactor/vchart';
+export declare class SequenceScatterKDEChartSpecTransformer extends CommonChartSpecTransformer<any> {
+    transformSpec(spec: any): void;
+}
+export declare function processSequenceData(spec: ISequenceScatterKDESpec): any[];

package/esm/charts/sequence-scatter-kde/sequence-scatter-kde-transformer.js

@@ -0,0 +1,137 @@
+import { CommonChartSpecTransformer } from "@visactor/vchart";
+
+import { calculateKDE } from "./utils";
+
+const DATA_KEY = "dataKey";
+
+export class SequenceScatterKDEChartSpecTransformer extends CommonChartSpecTransformer {
+    transformSpec(spec) {
+        var _a, _b, _c, _d, _e, _f;
+        super.transformSpec(spec);
+        const dataSpecs = processSequenceData(spec);
+        spec.type = "common", spec.dataKey = DATA_KEY, spec.data = dataSpecs[0].data, spec.scales = [ {
+            id: "colorScale",
+            type: "ordinal",
+            specified: {
+                0: "rgb(150, 10, 100)",
+                1: "rgb(31, 119, 180)",
+                2: "rgb(255, 127, 14)",
+                3: "rgb(44, 160, 44)",
+                4: "rgb(214, 39, 40)",
+                5: "rgb(148, 103, 189)",
+                6: "rgb(140, 86, 75)",
+                7: "rgb(227, 119, 194)",
+                8: "rgb(127, 127, 127)",
+                9: "rgb(188, 189, 34)",
+                10: "rgb(23, 190, 207)"
+            }
+        }, {
+            id: "brighterColorScale",
+            type: "ordinal",
+            specified: {
+                0: "rgb(150, 10, 150)",
+                1: "rgb(31, 119, 230)",
+                2: "rgb(255, 127, 64)",
+                3: "rgb(44, 160, 94)",
+                4: "rgb(214, 39, 90)",
+                5: "rgb(148, 103, 239)",
+                6: "rgb(140, 86, 125)",
+                7: "rgb(227, 119, 244)",
+                8: "rgb(127, 127, 177)",
+                9: "rgb(188, 189, 84)",
+                10: "rgb(23, 190, 255)"
+            }
+        }, ...null !== (_a = spec.scales) && void 0 !== _a ? _a : [] ], spec.series = [ {
+            type: "scatter",
+            dataIndex: 0,
+            xField: spec.xField,
+            yField: spec.yField,
+            seriesField: spec.seriesField,
+            size: 5,
+            point: {
+                zIndex: 1e3,
+                style: {
+                    fill: {
+                        scale: "colorScale",
+                        field: spec.seriesField
+                    }
+                }
+            }
+        } ];
+        spec.customMark = [ {
+            type: "text",
+            dataIndex: 1,
+            style: Object.assign({
+                text: datum => datum.iter,
+                x: 10,
+                y: () => 10,
+                textBaseline: "top",
+                textAlign: "left",
+                fontSize: 25,
+                fontWeight: "bolder",
+                fill: "black",
+                fillOpacity: .2
+            }, null === (_b = spec.infoLabel) || void 0 === _b ? void 0 : _b.style)
+        }, {
+            type: "symbol",
+            dataIndex: 2,
+            style: {
+                symbolType: "rect",
+                x: (datum, ctx) => 54 + (0, ctx.chart.getAllSeries()[0]._markAttributeContext.valueToX)([ datum.x ]),
+                y: (datum, ctx) => (0, ctx.chart.getAllSeries()[0]._markAttributeContext.valueToY)([ datum.y ]) + 26,
+                size: 5,
+                fill: {
+                    scale: "brighterColorScale",
+                    field: "label"
+                },
+                fillOpacity: datum => 10 * datum.kde
+            }
+        } ], spec.tooltip = {
+            visible: !0,
+            fields: [ "x", "y", "label" ]
+        }, spec.player && (spec.player = Object.assign(Object.assign({}, spec.player), {
+            specs: dataSpecs
+        }), spec.animationAppear = {
+            duration: null !== (_d = null === (_c = spec.player) || void 0 === _c ? void 0 : _c.duration) && void 0 !== _d ? _d : 2e3,
+            easing: "linear"
+        }, spec.animationUpdate = {
+            duration: null !== (_f = null === (_e = spec.player) || void 0 === _e ? void 0 : _e.duration) && void 0 !== _f ? _f : 2e3,
+            easing: "linear"
+        }), spec.axes = [ {
+            orient: "left",
+            type: "linear",
+            nice: !0
+        }, {
+            orient: "bottom",
+            type: "linear",
+            nice: !0,
+            label: {
+                visible: !0
+            }
+        } ], super.transformSpec(spec);
+    }
+}
+
+export function processSequenceData(spec) {
+    const result = [];
+    return Object.keys(spec.data).forEach((iter => {
+        const currentData = spec.data[iter].map(((d, i) => Object.assign(Object.assign({}, d), {
+            [DATA_KEY]: i
+        }))), kdeResults = calculateKDE(currentData, 150);
+        result.push({
+            data: [ {
+                id: "nodes",
+                values: currentData
+            }, {
+                id: "iter",
+                values: [ {
+                    iter: iter
+                } ]
+            }, {
+                id: "kde",
+                values: kdeResults
+            } ]
+        });
+    })), result;
+}
+//# sourceMappingURL=sequence-scatter-kde-transformer.js.map

package/esm/charts/sequence-scatter-kde/sequence-scatter-kde-transformer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["charts/sequence-scatter-kde/sequence-scatter-kde-transformer.ts"],"names":[],"mappings":"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","file":"sequence-scatter-kde-transformer.js","sourcesContent":["import { Datum } from '@visactor/vchart/src/typings';\nimport type { ISequenceScatterKDESpec } from './interface';\nimport { CommonChartSpecTransformer } from '@visactor/vchart';\nimport { Point } from './interface';\nimport { calculateKDE } from './utils';\n\nconst DATA_KEY = 'dataKey';\n\nexport class SequenceScatterKDEChartSpecTransformer extends CommonChartSpecTransformer<any> {\n  transformSpec(spec: any): void {\n    super.transformSpec(spec);\n    const dataSpecs = processSequenceData(spec as unknown as ISequenceScatterKDESpec);\n\n    spec.type = 'common';\n    spec.dataKey = DATA_KEY;\n    spec.data = dataSpecs[0].data;\n\n    spec.scales = [\n      {\n        id: 'colorScale',\n        type: 'ordinal',\n        specified: {\n          '0': 'rgb(150, 10, 100)',\n          '1': 'rgb(31, 119, 180)',\n          '2': 'rgb(255, 127, 14)',\n          '3': 'rgb(44, 160, 44)',\n          '4': 'rgb(214, 39, 40)',\n          '5': 'rgb(148, 103, 189)',\n          '6': 'rgb(140, 86, 75)',\n          '7': 'rgb(227, 119, 194)',\n          '8': 'rgb(127, 127, 127)',\n          '9': 'rgb(188, 189, 34)',\n          '10': 'rgb(23, 190, 207)'\n        }\n      },\n      {\n        id: 'brighterColorScale',\n        type: 'ordinal',\n        specified: {\n          '0': 'rgb(150, 10, 150)',\n          '1': 'rgb(31, 119, 230)',\n          '2': 'rgb(255, 127, 64)',\n          '3': 'rgb(44, 160, 94)',\n          '4': 'rgb(214, 39, 90)',\n          '5': 'rgb(148, 103, 239)',\n          '6': 'rgb(140, 86, 125)',\n          '7': 'rgb(227, 119, 244)',\n          '8': 'rgb(127, 127, 177)',\n          '9': 'rgb(188, 189, 84)',\n          '10': 'rgb(23, 190, 255)'\n        }\n      },\n      ...(spec.scales ?? [])\n    ];\n    spec.series = [\n      {\n        type: 'scatter',\n        dataIndex: 0,\n        xField: spec.xField,\n        yField: spec.yField,\n        seriesField: spec.seriesField,\n        size: 5,\n        point: {\n          zIndex: 1000,\n          style: {\n            fill: {\n              scale: 'colorScale',\n              field: spec.seriesField\n            }\n          }\n        }\n      }\n    ];\n    // spec.width = 800;\n    // spec.height = 500;\n\n    // 获取图元位置\n    const regionX = 54;\n    const regionY = 26;\n\n    spec.customMark = [\n      {\n        type: 'text',\n        dataIndex: 1,\n        style: {\n          text: (datum: Datum) => datum['iter'],\n          x: 10,\n          y: () => 10,\n          textBaseline: 'top',\n          textAlign: 'left',\n          fontSize: 25,\n          fontWeight: 'bolder',\n          fill: 'black',\n          fillOpacity: 0.2,\n          ...spec.infoLabel?.style\n        }\n      },\n      {\n        type: 'symbol',\n        dataIndex: 2,\n        style: {\n          symbolType: 'rect',\n          x: (datum: any, ctx: any) => {\n            // 获取region位置\n            // const regionStartPoint = ctx.chart.getAllRegions()[0].getLayoutStartPoint();\n            // const { x: regionX } = regionStartPoint;\n            // 获取图元位置\n            const valueToX = ctx.chart.getAllSeries()[0]._markAttributeContext.valueToX;\n            const markX = valueToX([datum.x]);\n            return regionX + markX;\n          },\n          y: (datum: any, ctx: any) => {\n            const valueToY = ctx.chart.getAllSeries()[0]._markAttributeContext.valueToY;\n            const markY = valueToY([datum.y]);\n            return markY + regionY;\n          },\n          size: 5,\n          fill: {\n            scale: 'brighterColorScale',\n            field: 'label'\n          },\n          fillOpacity: (datum: any) => datum.kde * 10\n        }\n      }\n    ];\n\n    spec.tooltip = {\n      visible: true,\n      fields: ['x', 'y', 'label']\n    };\n\n    if (spec.player) {\n      spec.player = {\n        ...spec.player,\n        specs: dataSpecs\n      };\n\n      spec.animationAppear = {\n        duration: spec.player?.duration ?? 2000,\n        easing: 'linear'\n      };\n\n      spec.animationUpdate = {\n        duration: spec.player?.duration ?? 2000,\n        easing: 'linear'\n      };\n    }\n\n    spec.axes = [\n      {\n        orient: 'left',\n        type: 'linear',\n        nice: true\n      },\n      {\n        orient: 'bottom',\n        type: 'linear',\n        nice: true,\n        label: { visible: true }\n      }\n    ];\n\n    super.transformSpec(spec);\n  }\n}\n\nexport function processSequenceData(spec: ISequenceScatterKDESpec) {\n  const result: any[] = [];\n  Object.keys(spec.data).forEach(iter => {\n    const currentData = spec.data[iter].map((d: Datum, i) => ({\n      ...(d as Point),\n      [DATA_KEY]: i\n    }));\n\n    const kdeResults = calculateKDE(currentData, 150);\n    result.push({\n      data: [\n        {\n          id: 'nodes',\n          values: currentData\n        },\n        {\n          id: 'iter',\n          values: [{ iter }]\n        },\n        {\n          id: 'kde',\n          values: kdeResults\n        }\n      ]\n    });\n  });\n  return result;\n}\n"]}

package/esm/charts/sequence-scatter-kde/sequence-scatter-kde.d.ts

@@ -0,0 +1,16 @@
+import { ISequenceScatterKDESpec } from './interface';
+import { VChart, BaseChart } from '@visactor/vchart';
+import { SequenceScatterKDEChartSpecTransformer } from './sequence-scatter-kde-transformer';
+export declare class SequenceScatterKDE extends BaseChart<Omit<ISequenceScatterKDESpec, 'data'>> {
+    type: string;
+    static type: string;
+    static readonly view: string;
+    _spec: ISequenceScatterKDESpec;
+    static readonly transformerConstructor: typeof SequenceScatterKDEChartSpecTransformer;
+    readonly transformerConstructor: typeof SequenceScatterKDEChartSpecTransformer;
+    init(): void;
+    protected isValid(): boolean;
+}
+export declare const registerSequenceScatterKDE: (option?: {
+    VChart?: typeof VChart;
+}) => void;

package/esm/charts/sequence-scatter-kde/sequence-scatter-kde.js

@@ -0,0 +1,28 @@
+import { VChart, BaseChart, ScatterChart } from "@visactor/vchart";
+
+import { SequenceScatterKDEChartSpecTransformer } from "./sequence-scatter-kde-transformer";
+
+export class SequenceScatterKDE extends BaseChart {
+    constructor() {
+        super(...arguments), this.type = "sequenceScatterKDE", this.transformerConstructor = SequenceScatterKDEChartSpecTransformer;
+    }
+    init() {
+        this.isValid() && super.init();
+    }
+    isValid() {
+        var _a, _b, _c, _d;
+        const {xField: xField, yField: yField, data: data} = this._spec;
+        return xField && yField ? !!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` "), 
+        !1);
+    }
+}
+
+SequenceScatterKDE.type = "sequenceScatterKDE", SequenceScatterKDE.view = "singleDefault", 
+SequenceScatterKDE.transformerConstructor = SequenceScatterKDEChartSpecTransformer;
+
+export const registerSequenceScatterKDE = option => {
+    const vchartConstructor = (null == option ? void 0 : option.VChart) || VChart;
+    vchartConstructor && vchartConstructor.useChart([ SequenceScatterKDE, ScatterChart ]);
+};
+//# sourceMappingURL=sequence-scatter-kde.js.map

package/esm/charts/sequence-scatter-kde/sequence-scatter-kde.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["charts/sequence-scatter-kde/sequence-scatter-kde.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACnE,OAAO,EAAE,sCAAsC,EAAE,MAAM,oCAAoC,CAAC;AAE5F,MAAM,OAAO,kBAAmB,SAAQ,SAAgD;IAAxF;;QACE,SAAI,GAAG,oBAAoB,CAAC;QAOnB,2BAAsB,GAAG,sCAAsC,CAAC;IAqB3E,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,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC5C,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE;YACtB,MAAA,MAAA,IAAI,CAAC,OAAO,EAAC,OAAO,mDAAG,8CAA8C,CAAC,CAAC;YACvE,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,uBAAI,GAAG,oBAAoB,CAAC;AACnB,uBAAI,GAAW,eAAe,CAAC;AAI/B,yCAAsB,GAAG,sCAAsC,CAAC;AAwBlF,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,MAAmC,EAAE,EAAE;IAChF,MAAM,iBAAiB,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,KAAI,MAAM,CAAC;IACnD,IAAI,iBAAiB,EAAE;QACrB,iBAAiB,CAAC,QAAQ,CAAC,CAAC,kBAAkB,EAAE,YAAY,CAAC,CAAC,CAAC;KAChE;AACH,CAAC,CAAC","file":"sequence-scatter-kde.js","sourcesContent":["import { ISequenceScatterKDESpec } from './interface';\nimport { VChart, BaseChart, ScatterChart } from '@visactor/vchart';\nimport { SequenceScatterKDEChartSpecTransformer } from './sequence-scatter-kde-transformer';\n\nexport class SequenceScatterKDE extends BaseChart<Omit<ISequenceScatterKDESpec, 'data'>> {\n  type = 'sequenceScatterKDE';\n  static type = 'sequenceScatterKDE';\n  static readonly view: string = 'singleDefault';\n\n  declare _spec: ISequenceScatterKDESpec;\n\n  static readonly transformerConstructor = SequenceScatterKDEChartSpecTransformer;\n  readonly transformerConstructor = SequenceScatterKDEChartSpecTransformer;\n\n  init() {\n    if (!this.isValid()) {\n      return;\n    }\n    super.init();\n  }\n\n  protected isValid() {\n    const { xField, yField, data } = this._spec;\n    if (!xField || !yField) {\n      this._option.onError?.('Missing Required Config: `xField`, `yField` ');\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 registerSequenceScatterKDE = (option?: { VChart?: typeof VChart }) => {\n  const vchartConstructor = option?.VChart || VChart;\n  if (vchartConstructor) {\n    vchartConstructor.useChart([SequenceScatterKDE, ScatterChart]);\n  }\n};\n"]}

package/esm/charts/sequence-scatter-kde/utils.d.ts

@@ -0,0 +1,9 @@
+import { Point } from './interface';
+export declare function gaussKernel(x: number): number;
+export declare function scottBandwidth(data: Point[]): number;
+export declare function calculateKDE(data: Point[], bins?: number, bandwidth?: number): {
+    x: number;
+    y: number;
+    kde: number;
+    label: string;
+}[];

package/esm/charts/sequence-scatter-kde/utils.js

@@ -0,0 +1,34 @@
+import { EXPAND_RATIO } from "./constant";
+
+export function gaussKernel(x) {
+    const SQRT2PI2 = Math.sqrt((2 * Math.PI) ** 2);
+    return Math.exp(-(x ** 2) / 2) / SQRT2PI2;
+}
+
+export function scottBandwidth(data) {
+    return data.length ** (-1 / 6);
+}
+
+export function calculateKDE(data, bins = 100, bandwidth) {
+    const groupedData = data.reduce(((groups, point) => {
+        const label = point.label;
+        return groups[label] = groups[label] || [], groups[label].push(point), groups;
+    }), {}), kdeResult = [];
+    return Object.entries(groupedData).forEach((([label, points]) => {
+        const h = bandwidth || scottBandwidth(points), xValues = points.map((d => d.x)), yValues = points.map((d => d.y)), xMin = Math.min(...xValues), xMax = Math.max(...xValues), yMin = Math.min(...yValues), yMax = Math.max(...yValues), xExpand = (xMax - xMin) * EXPAND_RATIO, yExpand = (yMax - yMin) * EXPAND_RATIO, xExtent_min = xMin - xExpand, yExtent_min = yMin - yExpand, densities = [];
+        for (let i = 0; i < bins; i++) for (let j = 0; j < bins; j++) {
+            const x = xExtent_min + .1 * i, y = yExtent_min + .1 * j;
+            let density = 0;
+            for (const point of points) {
+                density += gaussKernel(Math.sqrt((x - point.x) ** 2 + (y - point.y) ** 2) / h);
+            }
+            density /= points.length * h * h, densities.push(density), kdeResult.push({
+                x: x,
+                y: y,
+                kde: density,
+                label: label
+            });
+        }
+    })), kdeResult;
+}
+//# sourceMappingURL=utils.js.map

package/esm/charts/sequence-scatter-kde/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["charts/sequence-scatter-kde/utils.ts"],"names":[],"mappings":"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","file":"utils.js","sourcesContent":["import { EXPAND_RATIO } from './constant';\nimport { Point } from './interface';\n\n// KDE 相关的工具函数\nexport function gaussKernel(x: number) {\n  const SQRT2PI2 = Math.sqrt((Math.PI * 2) ** 2);\n  return Math.exp(-(x ** 2) / 2) / SQRT2PI2;\n}\n\nexport function scottBandwidth(data: Point[]) {\n  return data.length ** (-1 / 6);\n}\nexport function calculateKDE(data: Point[], bins = 100, bandwidth?: number) {\n  const groupedData: { [key: string]: Point[] } = data.reduce(\n    (groups, point) => {\n      const label = point.label;\n      groups[label] = groups[label] || [];\n      groups[label].push(point);\n      return groups;\n    },\n    {} as { [key: string]: Point[] }\n  );\n\n  const kdeResult: Array<{ x: number; y: number; kde: number; label: string }> = [];\n\n  Object.entries(groupedData).forEach(([label, points]) => {\n    const h = bandwidth || scottBandwidth(points);\n\n    const xValues = points.map(d => d.x);\n    const yValues = points.map(d => d.y);\n\n    const xMin = Math.min(...xValues);\n    const xMax = Math.max(...xValues);\n    const yMin = Math.min(...yValues);\n    const yMax = Math.max(...yValues);\n\n    const xExpand = (xMax - xMin) * EXPAND_RATIO;\n    const yExpand = (yMax - yMin) * EXPAND_RATIO;\n\n    const xExtent = { min: xMin - xExpand, max: xMax + xExpand };\n    const yExtent = { min: yMin - yExpand, max: yMax + yExpand };\n\n    // step决定了背景的填充色块的大小，这个大小其实是不变的\n    const xStep = 0.1;\n    const yStep = 0.1;\n\n    const densities: number[] = []; // 用于存储每个点的 density\n    for (let i = 0; i < bins; i++) {\n      for (let j = 0; j < bins; j++) {\n        const x = xExtent.min + i * xStep;\n        const y = yExtent.min + j * yStep;\n        let density = 0;\n        for (const point of points) {\n          const distance = Math.sqrt((x - point.x) ** 2 + (y - point.y) ** 2);\n          density += gaussKernel(distance / h);\n        }\n        density = density / (points.length * h * h);\n        densities.push(density); // 先暂存 density 值\n        kdeResult.push({ x, y, kde: density, label }); // 同时也先存入 kdeResult\n      }\n    }\n\n    // // 归一化每个 label 的 KDE 密度值到 [0, 1] 范围内\n    // const maxDensity = Math.max(...densities);\n    // const minDensity = Math.min(...densities);\n    //\n    // // 归一化\n    // for (let i = 0; i < kdeResult.length; i++) {\n    //   if (kdeResult[i].label === label) {\n    //     kdeResult[i].kde = (kdeResult[i].kde - minDensity) / (maxDensity - minDensity);\n    //   }\n    // }\n  });\n\n  return kdeResult;\n}\n"]}