@visactor/vchart-extension 2.0.0-alpha.1 → 2.0.0-alpha.2

package/build/index.js

@@ -1071,6 +1071,180 @@
       return 0;
     }
 
+    const tagNameToType = {
+        svg: "group",
+        rect: "rect",
+        line: "rule",
+        polygon: "polygon",
+        path: "path",
+        polyline: "line",
+        g: "group",
+        circle: "arc",
+        ellipse: "arc"
+      },
+      validTagName = Object.keys(tagNameToType),
+      validGroupNode = ["g", "svg", "text", "tspan", "switch"],
+      validTextAttributes = ["font-size", "font-family", "font-weight", "font-style", "text-align", "text-anchor"],
+      validCircleAttributes = ["cx", "cy", "r"],
+      validEllipseAttributes = ["cx", "cy", "rx", "ry"],
+      validLineAttributes = ["x1", "x2", "y1", "y2"],
+      validAttributes = ["visibility", "x", "y", "width", "height", "d", "points", "stroke", "stroke-width", "fill", "fill-opacity", "stroke-opacity", ...validTextAttributes, ...validCircleAttributes, ...validEllipseAttributes, ...validLineAttributes],
+      validInheritAttributes = ["visible", "fill", "stroke", "stroke-width", "fill-opacity", "stroke-opacity", ...validTextAttributes],
+      numberReg = /-?([0-9]*\.)?[0-9]+([eE]-?[0-9]+)?/g;
+    function splitNumberSequence(rawStr) {
+      return rawStr.match(numberReg) || [];
+    }
+    const svgParser = function (data) {
+      let option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      let parser = option.customDOMParser;
+      if (parser || (null === window || void 0 === window ? void 0 : window.DOMParser) && (parser = svg => new DOMParser().parseFromString(svg, "text/xml")), !parser) throw new Error("No Available DOMParser!");
+      const svg = parser(data);
+      let node = 9 === svg.nodeType ? svg.firstChild : svg;
+      for (; node && ("svg" !== node.nodeName.toLowerCase() || 1 !== node.nodeType);) node = node.nextSibling;
+      if (node) {
+        return parseSvgNode(node);
+      }
+      return null;
+    };
+    let idx = 0;
+    function parseSvgNode(svg) {
+      let opt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      const elements = [],
+        root = parseNode(svg, null);
+      let width = parseFloat(svg.getAttribute("width") || opt.width),
+        height = parseFloat(svg.getAttribute("height") || opt.height);
+      !vutils.isValidNumber(width) && (width = null), !vutils.isValidNumber(height) && (height = null);
+      const viewBox = svg.getAttribute("viewBox");
+      let viewBoxRect;
+      if (viewBox) {
+        const viewBoxArr = splitNumberSequence(viewBox);
+        if (viewBoxArr.length >= 4 && (viewBoxRect = {
+          x: parseFloat(viewBoxArr[0] || 0),
+          y: parseFloat(viewBoxArr[1] || 0),
+          width: parseFloat(viewBoxArr[2]),
+          height: parseFloat(viewBoxArr[3])
+        }, width || height)) {
+          const boundingRect = {
+              x: 0,
+              y: 0,
+              width: width,
+              height: height
+            },
+            scaleX = boundingRect.width / viewBoxRect.width,
+            scaleY = boundingRect.height / viewBoxRect.height,
+            scale = Math.min(scaleX, scaleY),
+            transLateX = -(viewBoxRect.x + viewBoxRect.width / 2) * scale + (boundingRect.x + boundingRect.width / 2),
+            transLateY = -(viewBoxRect.y + viewBoxRect.height / 2) * scale + (boundingRect.y + boundingRect.height / 2),
+            viewBoxTransform = new vutils.Matrix().translate(transLateX, transLateY).scale(scale, scale);
+          root.transform = viewBoxTransform;
+        }
+      }
+      return traverse(svg, root, elements), {
+        root: root,
+        width: width,
+        height: height,
+        elements: elements,
+        viewBoxRect: viewBoxRect
+      };
+    }
+    function parseInheritAttributes(parsedElement) {
+      let inheritedAttrs;
+      const {
+          parent: parent,
+          attributes: attributes
+        } = parsedElement,
+        parse = parent => parent ? validInheritAttributes.reduce((acc, attrName) => {
+          const camelAttrName = vutils.toCamelCase(attrName);
+          return vutils.isValid(parent[camelAttrName]) && (acc[camelAttrName] = parent[camelAttrName]), acc;
+        }, {}) : {};
+      return parent ? (parent._inheritStyle || (parent._inheritStyle = parse(parent.attributes)), inheritedAttrs = vutils.merge({}, parent._inheritStyle, parse(attributes))) : inheritedAttrs = parse(attributes), inheritedAttrs;
+    }
+    function parseAttributes(el) {
+      var _a, _b, _c;
+      const attrs = {},
+        attributes = null !== (_a = el.attributes) && void 0 !== _a ? _a : {},
+        style = null !== (_b = el.style) && void 0 !== _b ? _b : {};
+      for (let i = 0; i < validAttributes.length; i++) {
+        const attrName = validAttributes[i],
+          attrValue = vutils.isValid(style[attrName]) && "" !== style[attrName] ? style[attrName] : null === (_c = attributes[attrName]) || void 0 === _c ? void 0 : _c.value;
+        vutils.isValid(attrValue) && (attrs[vutils.toCamelCase(attrName)] = isNaN(+attrValue) ? attrValue : parseFloat(attrValue));
+      }
+      return "none" === style.display && (attrs.visible = !1), ["fontSize", "strokeWidth", "width", "height"].forEach(attr => {
+        const attrValue = attrs[attr];
+        vutils.isString(attrs[attr]) && (attrs[attr] = parseFloat(attrValue));
+      }), attrs;
+    }
+    function parseNode(node, parent) {
+      var _a, _b, _c, _d, _e;
+      const tagName = null === (_a = node.tagName) || void 0 === _a ? void 0 : _a.toLowerCase();
+      if (3 === node.nodeType || "text" === tagName || "tspan" === tagName) return parseText(node, parent);
+      if (!validTagName.includes(tagName)) return null;
+      const parsed = {
+        tagName: tagName,
+        graphicType: tagNameToType[tagName],
+        attributes: parseAttributes(node),
+        parent: parent,
+        name: null !== (_b = node.getAttribute("name")) && void 0 !== _b ? _b : null === (_c = null == parent ? void 0 : parent.attributes) || void 0 === _c ? void 0 : _c.name,
+        id: null !== (_d = node.getAttribute("id")) && void 0 !== _d ? _d : `${tagName}-${idx++}`,
+        transform: parseTransform(node)
+      };
+      return parsed._inheritStyle = parseInheritAttributes(parsed), parent && !vutils.isValid(parsed.name) && (parsed._nameFromParent = null !== (_e = parent.name) && void 0 !== _e ? _e : parent._nameFromParent), parsed;
+    }
+    function parseText(node, parent) {
+      var _a, _b, _c, _d, _e, _f;
+      if (!parent) return null;
+      const tagName = null === (_a = node.tagName) || void 0 === _a ? void 0 : _a.toLowerCase();
+      if (!tagName && "group" !== parent.graphicType) return null;
+      const nodeAsGroup = "text" === tagName || "tspan" === tagName,
+        elType = nodeAsGroup ? "group" : "text",
+        value = nodeAsGroup || null === (_b = node.textContent) || void 0 === _b ? void 0 : _b.replace(/\n/g, " ").replace(/\s+/g, " ");
+      if (" " === value) return null;
+      let parsed;
+      return parsed = nodeAsGroup ? {
+        tagName: tagName,
+        graphicType: elType,
+        attributes: parseAttributes(node),
+        parent: parent,
+        name: node.getAttribute("name"),
+        id: null !== (_c = node.getAttribute("id")) && void 0 !== _c ? _c : `${tagName}-${idx++}`,
+        transform: parseTransform(node),
+        value: value
+      } : {
+        tagName: tagName,
+        graphicType: "text",
+        attributes: parseAttributes(node),
+        parent: parent,
+        name: null == parent ? void 0 : parent.name,
+        id: null !== (_e = null === (_d = node.getAttribute) || void 0 === _d ? void 0 : _d.call(node, "id")) && void 0 !== _e ? _e : `${tagName}-${idx++}`,
+        value: value
+      }, parsed._inheritStyle = parseInheritAttributes(parsed), vutils.isValid(parsed.name) || (parsed._nameFromParent = null !== (_f = parent.name) && void 0 !== _f ? _f : parent._nameFromParent), nodeAsGroup ? parent._textGroupStyle ? parsed._textGroupStyle = vutils.merge({}, parent._textGroupStyle, parseAttributes(node)) : parsed._textGroupStyle = parseAttributes(node) : parsed.attributes = parsed._inheritStyle, parsed;
+    }
+    function parseTransform(node) {
+      var _a, _b;
+      const transforms = null === (_a = node.transform) || void 0 === _a ? void 0 : _a.baseVal;
+      if (!transforms) return null;
+      const matrix = null === (_b = transforms.consolidate()) || void 0 === _b ? void 0 : _b.matrix;
+      if (!matrix) return null;
+      const {
+        a: a,
+        b: b,
+        c: c,
+        d: d,
+        e: e,
+        f: f
+      } = matrix;
+      return new vutils.Matrix(a, b, c, d, e, f);
+    }
+    function traverse(node, parsedParent) {
+      let result = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+      var _a;
+      if (!node) return;
+      let parseResult;
+      "svg" !== node.nodeName && (parseResult = parseNode(node, parsedParent)), parseResult && result.push(parseResult);
+      let child = validGroupNode.includes(null === (_a = node.tagName) || void 0 === _a ? void 0 : _a.toLocaleLowerCase()) ? node.firstChild : null;
+      for (; child;) traverse(child, null != parseResult ? parseResult : parsedParent, result), child = child.nextSibling;
+    }
+
     let idIndex = 0;
     const maxId = 1e8;
     function getUUID() {
@@ -1078,6 +1252,88 @@
       return idIndex > maxId && (idIndex = 0), prefix + "_" + idIndex++;
     }
 
+    class DataSet {
+      constructor(options) {
+        var _a;
+        let name;
+        this.options = options, this.isDataSet = !0, this.transformMap = {}, this.parserMap = {}, this.dataViewMap = {}, this.target = new vutils.EventEmitter(), name = (null == options ? void 0 : options.name) ? options.name : getUUID("dataset"), this.name = name, this._logger = null !== (_a = null == options ? void 0 : options.logger) && void 0 !== _a ? _a : vutils.Logger.getInstance();
+      }
+      setLogger(logger) {
+        this._logger = logger;
+      }
+      getDataView(name) {
+        return this.dataViewMap[name];
+      }
+      setDataView(name, dataView) {
+        var _a;
+        this.dataViewMap[name] && (null === (_a = this._logger) || void 0 === _a || _a.error(`Error: dataView ${name} 之前已存在，请重新命名`)), this.dataViewMap[name] = dataView;
+      }
+      removeDataView(name) {
+        this.dataViewMap[name] = null, delete this.dataViewMap[name];
+      }
+      registerParser(name, parser) {
+        var _a;
+        this.parserMap[name] && (null === (_a = this._logger) || void 0 === _a || _a.warn(`Warn: transform ${name} 之前已注册，执行覆盖逻辑`)), this.parserMap[name] = parser;
+      }
+      removeParser(name) {
+        this.parserMap[name] = null, delete this.parserMap[name];
+      }
+      getParser(name) {
+        return this.parserMap[name] || this.parserMap.default;
+      }
+      registerTransform(name, transform) {
+        var _a;
+        this.transformMap[name] && (null === (_a = this._logger) || void 0 === _a || _a.warn(`Warn: transform ${name} 之前已注册，执行覆盖逻辑`)), this.transformMap[name] = transform;
+      }
+      removeTransform(name) {
+        this.transformMap[name] = null, delete this.transformMap[name];
+      }
+      getTransform(name) {
+        return this.transformMap[name];
+      }
+      multipleDataViewAddListener(list, event, call) {
+        this._callMap || (this._callMap = new Map());
+        let callAd = this._callMap.get(call);
+        callAd || (callAd = () => {
+          list.some(l => l.isRunning) || call();
+        }), list.forEach(l => {
+          l.target.addListener(event, callAd);
+        }), this._callMap.set(call, callAd);
+      }
+      allDataViewAddListener(event, call) {
+        this.multipleDataViewAddListener(Object.values(this.dataViewMap), event, call);
+      }
+      multipleDataViewRemoveListener(list, event, call) {
+        if (this._callMap) {
+          const callAd = this._callMap.get(call);
+          callAd && list.forEach(l => {
+            l.target.removeListener(event, callAd);
+          }), this._callMap.delete(call);
+        }
+      }
+      multipleDataViewUpdateInParse(newData) {
+        newData.forEach(d => {
+          var _a;
+          return null === (_a = this.getDataView(d.name)) || void 0 === _a ? void 0 : _a.markRunning();
+        }), newData.forEach(d => {
+          var _a;
+          return null === (_a = this.getDataView(d.name)) || void 0 === _a ? void 0 : _a.parseNewData(d.data, d.options);
+        });
+      }
+      multipleDataViewUpdateInRawData(newData) {
+        newData.forEach(d => {
+          var _a;
+          return null === (_a = this.getDataView(d.name)) || void 0 === _a ? void 0 : _a.markRunning();
+        }), newData.forEach(d => {
+          var _a;
+          return null === (_a = this.getDataView(d.name)) || void 0 === _a ? void 0 : _a.updateRawData(d.data, d.options);
+        });
+      }
+      destroy() {
+        this.transformMap = null, this.parserMap = null, this.dataViewMap = null, this._callMap = null, this.target.removeAllListeners();
+      }
+    }
+
     class DataView {
       constructor(dataSet, options) {
         var _this = this;
@@ -6352,7 +6608,7 @@
       }
     }
 
-    function circle(ctx, r, x, y, z) {
+    function circle$1(ctx, r, x, y, z) {
       return z ? ctx.arc(x, y, r, 0, vutils.tau, !1, z) : ctx.arc(x, y, r, 0, vutils.tau), !1;
     }
     class CircleSymbol extends BaseSymbol {
@@ -6360,17 +6616,17 @@
         super(...arguments), this.type = "circle", this.pathStr = "M0.5,0A0.5,0.5,0,1,1,-0.5,0A0.5,0.5,0,1,1,0.5,0";
       }
       draw(ctx, size, x, y, z) {
-        return circle(ctx, this.parseSize(size) / 2, x, y, z);
+        return circle$1(ctx, this.parseSize(size) / 2, x, y, z);
       }
       drawOffset(ctx, size, x, y, offset, z) {
-        return circle(ctx, this.parseSize(size) / 2 + offset, x, y, z);
+        return circle$1(ctx, this.parseSize(size) / 2 + offset, x, y, z);
       }
       drawToSvgPath(size, x, y, z) {
         const r = this.parseSize(size) / 2;
         return `M ${x - r}, ${y} a ${r},${r} 0 1,0 ${2 * r},0 a ${r},${r} 0 1,0 -${2 * r},0`;
       }
     }
-    var circle$1 = new CircleSymbol();
+    var circle$2 = new CircleSymbol();
 
     function cross(ctx, r, x, y, z) {
       return ctx.moveTo(-3 * r + x, -r + y, z), ctx.lineTo(-r + x, -r + y, z), ctx.lineTo(-r + x, -3 * r + y, z), ctx.lineTo(r + x, -3 * r + y, z), ctx.lineTo(r + x, -r + y, z), ctx.lineTo(3 * r + x, -r + y, z), ctx.lineTo(3 * r + x, r + y, z), ctx.lineTo(r + x, r + y, z), ctx.lineTo(r + x, 3 * r + y, z), ctx.lineTo(-r + x, 3 * r + y, z), ctx.lineTo(-r + x, r + y, z), ctx.lineTo(-3 * r + x, r + y, z), ctx.closePath(), !0;
@@ -6391,7 +6647,7 @@
     }
     var cross$1 = new CrossSymbol();
 
-    function diamond(ctx, r, x, y, z) {
+    function diamond$1(ctx, r, x, y, z) {
       return ctx.moveTo(x, y - r, z), ctx.lineTo(r + x, y, z), ctx.lineTo(x, y + r, z), ctx.lineTo(x - r, y, z), ctx.closePath(), !0;
     }
     class DiamondSymbol extends BaseSymbol {
@@ -6399,18 +6655,18 @@
         super(...arguments), this.type = "diamond", this.pathStr = "M-0.5,0L0,-0.5L0.5,0L0,0.5Z";
       }
       draw(ctx, size, x, y, z) {
-        return diamond(ctx, this.parseSize(size) / 2, x, y, z);
+        return diamond$1(ctx, this.parseSize(size) / 2, x, y, z);
       }
       drawFitDir(ctx, size, x, y, z) {
-        return diamond(ctx, this.parseSize(size) / 2, x, y, z);
+        return diamond$1(ctx, this.parseSize(size) / 2, x, y, z);
       }
       drawOffset(ctx, size, x, y, offset, z) {
-        return diamond(ctx, this.parseSize(size) / 2 + offset, x, y, z);
+        return diamond$1(ctx, this.parseSize(size) / 2 + offset, x, y, z);
       }
     }
-    var diamond$1 = new DiamondSymbol();
+    var diamond$2 = new DiamondSymbol();
 
-    function square(ctx, r, x, y) {
+    function square$2(ctx, r, x, y) {
       const wh = 2 * r;
       return ctx.rect(x - r, y - r, wh, wh), !1;
     }
@@ -6419,13 +6675,13 @@
         super(...arguments), this.type = "square", this.pathStr = "M-0.5,-0.5h1v1h-1Z";
       }
       draw(ctx, size, x, y) {
-        return square(ctx, this.parseSize(size) / 2, x, y);
+        return square$2(ctx, this.parseSize(size) / 2, x, y);
       }
       drawOffset(ctx, size, x, y, offset) {
-        return square(ctx, this.parseSize(size) / 2 + offset, x, y);
+        return square$2(ctx, this.parseSize(size) / 2 + offset, x, y);
       }
     }
-    var square$1 = new SquareSymbol();
+    var square$3 = new SquareSymbol();
 
     function trianglUpOffset(ctx, r, x, y) {
       let offset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
@@ -6449,12 +6705,12 @@
         super(...arguments), this.type = "triangle";
       }
     }
-    var triangle = new TriangleSymbol();
+    var triangle$1 = new TriangleSymbol();
 
     const kr = Math.sin(Math.PI / 10) / Math.sin(7 * Math.PI / 10),
       kx = Math.sin(vutils.tau / 10) * kr,
       ky = -Math.cos(vutils.tau / 10) * kr;
-    function star(ctx, r, transX, transY) {
+    function star$1(ctx, r, transX, transY) {
       const x = kx * r,
         y = ky * r;
       ctx.moveTo(transX, -r + transY), ctx.lineTo(x + transX, y + transY);
@@ -6471,13 +6727,13 @@
         super(...arguments), this.type = "star", this.pathStr = "M0 -1L0.22451398828979266 -0.3090169943749474L0.9510565162951535 -0.30901699437494745L0.3632712640026804 0.1180339887498948L0.5877852522924732 0.8090169943749473L8.326672684688674e-17 0.3819660112501051L-0.587785252292473 0.8090169943749476L-0.3632712640026804 0.11803398874989487L-0.9510565162951536 -0.30901699437494723L-0.22451398828979274 -0.30901699437494734Z";
       }
       draw(ctx, size, transX, transY) {
-        return star(ctx, this.parseSize(size) / 2, transX, transY);
+        return star$1(ctx, this.parseSize(size) / 2, transX, transY);
       }
       drawOffset(ctx, size, transX, transY, offset) {
-        return star(ctx, this.parseSize(size) / 2 + offset, transX, transY);
+        return star$1(ctx, this.parseSize(size) / 2 + offset, transX, transY);
       }
     }
-    var star$1 = new StarSymbol();
+    var star$2 = new StarSymbol();
 
     const sqrt3$1 = vutils.sqrt(3);
     function arrow(ctx, r, transX, transY) {
@@ -6843,7 +7099,7 @@
       }
     }
 
-    const builtinSymbols = [circle$1, cross$1, diamond$1, square$1, thinTriangle$1, triangle, star$1, arrow$1, wedge$1, stroke$1, wye$1, triangleLeft, triangleRight, triangleUp, triangleDown, arrow2Left$1, arrow2Right$1, arrow2Up$1, arrow2Down$1, rect, lineV$1, lineH$1, close$1];
+    const builtinSymbols = [circle$2, cross$1, diamond$2, square$3, thinTriangle$1, triangle$1, star$2, arrow$1, wedge$1, stroke$1, wye$1, triangleLeft, triangleRight, triangleUp, triangleDown, arrow2Left$1, arrow2Right$1, arrow2Up$1, arrow2Down$1, rect, lineV$1, lineH$1, close$1];
     const builtinSymbolsMap = {};
     builtinSymbols.forEach(symbol => {
       builtinSymbolsMap[symbol.type] = symbol;
@@ -16985,6 +17241,2793 @@
         vchart.Factory.registerChart(RangeColumn3dChart.type, RangeColumn3dChart);
     };
 
+    const PICTOGRAM_CHART_TYPE = 'pictogram';
+    const PICTOGRAM_SERIES_TYPE = 'pictogram';
+    const ELEMENT_HIGHLIGHT_BY_GRPHIC_NAME = 'element-highlight-by-graphic-name';
+    const ELEMENT_SELECT_BY_GRPHIC_NAME = 'element-select-by-graphic-name';
+    var PictogramMarkNameEnum;
+    (function (PictogramMarkNameEnum) {
+        PictogramMarkNameEnum["pictogram"] = "pictogram";
+    })(PictogramMarkNameEnum || (PictogramMarkNameEnum = {}));
+    const PictogramSeriesMark = Object.assign(Object.assign({}, vchart.baseSeriesMark), { ["pictogram"]: { name: "pictogram", type: "group" } });
+
+    class PictogramChartSpecTransformer extends vchart.BaseChartSpecTransformer {
+        _isValidSeries(type) {
+            return type === PICTOGRAM_SERIES_TYPE;
+        }
+        _getDefaultSeriesSpec(spec) {
+            return super._getDefaultSeriesSpec(spec, [
+                'type',
+                'nameField',
+                'valueField',
+                'svg',
+                'pictogram',
+                'defaultFillColor'
+            ]);
+        }
+        transformSpec(spec) {
+            super.transformSpec(spec);
+            spec.region.forEach((r) => {
+                r.coordinate = 'geo';
+            });
+            super.transformSeriesSpec(spec);
+        }
+    }
+
+    const svgSourceMap = new Map();
+    let svgDataSet;
+    function initSVGDataSet() {
+        if (svgDataSet) {
+            return;
+        }
+        svgDataSet = new DataSet();
+        vchart.registerDataSetInstanceParser(svgDataSet, 'svg', svgParser);
+    }
+    function registerSVGSource(key, source) {
+        if (svgSourceMap.has(key)) {
+            vchart.warn(`svg source key of '${key}' already exists, will be overwritten.`);
+        }
+        initSVGDataSet();
+        const dataView = new DataView(svgDataSet);
+        dataView.parse(source, {
+            type: 'svg'
+        });
+        svgSourceMap.set(key, dataView);
+    }
+    function unregisterSVGSource(key) {
+        if (!svgSourceMap.has(key)) {
+            vchart.warn(`map type of '${key}' does not exists.`);
+            return;
+        }
+        svgSourceMap.delete(key);
+    }
+    function getSVGSource(type) {
+        return svgSourceMap.get(type);
+    }
+    function clearSVGSource() {
+        svgSourceMap.clear();
+        svgDataSet = null;
+    }
+
+    class PictogramSeriesSpecTransformer extends vchart.BaseSeriesSpecTransformer {
+        _getDefaultSpecFromChart(chartSpec) {
+            var _a, _b, _c;
+            const spec = (_a = super._getDefaultSpecFromChart(chartSpec)) !== null && _a !== void 0 ? _a : {};
+            const svg = chartSpec.svg;
+            const elements = (_c = (_b = svgSourceMap.get(svg)) === null || _b === void 0 ? void 0 : _b.latestData) === null || _c === void 0 ? void 0 : _c.elements;
+            if (elements && elements.length) {
+                const names = elements.map(e => e.name).filter(n => vutils.isValid(n));
+                names.forEach(name => {
+                    if (chartSpec[name]) {
+                        spec[name] = chartSpec[name];
+                    }
+                });
+            }
+            return spec;
+        }
+    }
+
+    class PictogramSeriesTooltipHelper extends vchart.BaseSeriesTooltipHelper {
+        constructor() {
+            super(...arguments);
+            this.dimensionTooltipTitleCallback = (datum) => {
+                var _a;
+                const series = this.series;
+                return (_a = this._getDimensionData(datum)) !== null && _a !== void 0 ? _a : series.getDatumName(datum);
+            };
+            this.markTooltipValueCallback = (datum, params) => {
+                const { measureFields } = this._seriesCacheInfo;
+                if (measureFields[0] && datum.data) {
+                    return datum.data[measureFields[0]];
+                }
+            };
+            this.markTooltipKeyCallback = (datum) => {
+                var _a;
+                return (_a = datum.data) === null || _a === void 0 ? void 0 : _a[this.series.getDimensionField()[0]];
+            };
+        }
+    }
+
+    const type$1 = 'element-highlight-by-graphic-name';
+    class ElementHighlightByGraphicName extends vchart.ElementHighlight {
+        constructor() {
+            super(...arguments);
+            this.type = type$1;
+            this.handleStart = (e) => {
+                if (e && e.item && this.isGraphicInMark(e.item)) {
+                    const shouldStart = this.options.shouldStart ? this.options.shouldStart(e) : this._filterByName(e);
+                    if (shouldStart) {
+                        const itemKey = this._parseTargetKey(e);
+                        this.start(itemKey);
+                    }
+                }
+            };
+            this.handleReset = (e) => {
+                if (e && e.item && this.isGraphicInMark(e.item)) {
+                    this.reset();
+                }
+            };
+        }
+        _filterByName(e) {
+            var _a;
+            const name = (_a = e === null || e === void 0 ? void 0 : e.node) === null || _a === void 0 ? void 0 : _a.name;
+            return !!name;
+        }
+        _parseTargetKey(e) {
+            return e.node.name;
+        }
+        start(itemKey) {
+            if (vutils.isNil(itemKey)) {
+                return;
+            }
+            const { interaction, highlightState, blurState } = this.options;
+            const statedGraphics = interaction.getStatedGraphics(this);
+            const newStatedGraphics = [];
+            this.getMarks().forEach(m => {
+                var _a;
+                (_a = m.getGraphics()) === null || _a === void 0 ? void 0 : _a.forEach(g => {
+                    if (g.name === itemKey) {
+                        newStatedGraphics.push(g);
+                    }
+                });
+            });
+            interaction.updateStates(this, newStatedGraphics, statedGraphics, highlightState, blurState);
+            interaction.setStatedGraphics(this, newStatedGraphics);
+        }
+        reset() {
+            const { highlightState, blurState, interaction } = this.options;
+            interaction.clearAllStatesOfTrigger(this, highlightState, blurState);
+            interaction.setStatedGraphics(this, []);
+        }
+    }
+    ElementHighlightByGraphicName.type = type$1;
+    const registerElementHighlightByGraphicName = () => {
+        vchart.Factory.registerInteractionTrigger(ElementHighlightByGraphicName.type, ElementHighlightByGraphicName);
+    };
+
+    const type = 'element-select-by-graphic-name';
+    class ElementSelectByGraphicName extends vchart.ElementSelect {
+        constructor() {
+            super(...arguments);
+            this.type = type;
+        }
+        start(markGraphic) {
+            const name = markGraphic === null || markGraphic === void 0 ? void 0 : markGraphic.name;
+            if (name) {
+                this.getMarks().forEach(mark => {
+                    var _a;
+                    (_a = mark.getGraphics()) === null || _a === void 0 ? void 0 : _a.forEach(g => {
+                        if (g.name === name) {
+                            super.start(g);
+                        }
+                    });
+                });
+            }
+        }
+    }
+    ElementSelectByGraphicName.type = type;
+    const registerElementSelectByGraphicName = () => {
+        vchart.Factory.registerInteractionTrigger(ElementSelectByGraphicName.type, ElementSelectByGraphicName);
+    };
+
+    function isValidStrokeOrFill(attr) {
+        var _a;
+        return vutils.isValid(attr) && attr !== 'none' && !((_a = attr.includes) === null || _a === void 0 ? void 0 : _a.call(attr, 'url'));
+    }
+    const getLineWidth = (attributes) => {
+        const strokeWidth = parseFloat(attributes.strokeWidth);
+        if (!isNaN(strokeWidth)) {
+            return strokeWidth;
+        }
+        const stroke = attributes.stroke;
+        return stroke && isValidStrokeOrFill(stroke) ? 1 : 0;
+    };
+    const getFill = (attributes, defaultFill) => {
+        var _a;
+        const fill = (_a = attributes.fill) !== null && _a !== void 0 ? _a : defaultFill;
+        return fill && isValidStrokeOrFill(fill) ? fill : undefined;
+    };
+    const getStroke = (attributes, defaultStroke) => {
+        var _a;
+        const stroke = (_a = attributes.stroke) !== null && _a !== void 0 ? _a : defaultStroke;
+        return stroke && isValidStrokeOrFill(stroke) ? stroke : false;
+    };
+    const commonAttributes = (attributes) => {
+        return Object.assign(Object.assign({}, attributes), { x: parseFloat(attributes.x) || undefined, y: parseFloat(attributes.y) || undefined, fillStrokeOrder: false, fill: getFill(attributes), lineWidth: getLineWidth(attributes), stroke: getStroke(attributes) });
+    };
+    const graphicAttributeTransform = {
+        group: (attributes) => {
+            const common = commonAttributes(attributes);
+            return Object.assign(Object.assign({}, common), { visibleAll: common.visible !== false });
+        },
+        rule: (attributes) => {
+            return Object.assign(Object.assign({}, commonAttributes(attributes)), { x: parseFloat(attributes.x1), y: parseFloat(attributes.y1), x1: parseFloat(attributes.x2), y1: parseFloat(attributes.y2) });
+        },
+        rect: (attributes) => {
+            return Object.assign(Object.assign({}, commonAttributes(attributes)), { fill: getFill(attributes, '#000'), width: parseFloat(attributes.width), height: parseFloat(attributes.height) });
+        },
+        polygon: (attributes) => {
+            return Object.assign(Object.assign({}, commonAttributes(attributes)), { fill: getFill(attributes, '#000'), points: attributes.points
+                    .trim()
+                    .split(/\s+/)
+                    .map((pair) => {
+                    const [x, y] = pair.split(',').map(Number);
+                    return { x, y };
+                }) });
+        },
+        line: (attributes) => {
+            return Object.assign(Object.assign({}, commonAttributes(attributes)), { points: attributes.points
+                    .trim()
+                    .split(/\s+/)
+                    .map((pair) => {
+                    const [x, y] = pair.split(',').map(Number);
+                    return { x, y };
+                }) });
+        },
+        path: (attributes) => {
+            return Object.assign(Object.assign({}, commonAttributes(attributes)), { path: attributes.d, fillStrokeOrder: false, fill: getFill(attributes, '#000') });
+        },
+        arc: (attributes) => {
+            var _a;
+            return Object.assign(Object.assign({}, commonAttributes(attributes)), { outerRadius: (_a = attributes.r) !== null && _a !== void 0 ? _a : attributes.ry, x: parseFloat(attributes.cx), y: parseFloat(attributes.cy), startAngle: 0, endAngle: Math.PI * 2, scaleX: parseFloat(attributes.rx) / parseFloat(attributes.ry) || 1, fill: getFill(attributes, '#000') });
+        },
+        text: (attributes, value) => {
+            var _a, _b;
+            return Object.assign(Object.assign({}, commonAttributes(attributes)), { text: value, textAlign: (_a = attributes.textAlign) !== null && _a !== void 0 ? _a : 'left', textBaseLine: (_b = attributes.textAnchor) !== null && _b !== void 0 ? _b : 'middle', anchor: [0, 0], fill: getFill(attributes, '#000') });
+        }
+    };
+    const pictogram = (data) => {
+        var _a, _b;
+        if (!data || !data[0]) {
+            return {};
+        }
+        const { elements } = data[0].latestData;
+        if (elements && elements.length) {
+            elements.forEach((el, index) => {
+                var _a;
+                el[vchart.DEFAULT_DATA_INDEX] = index;
+                el._uniqueId = `${el.id}-${index}`;
+                el.data = undefined;
+                const { graphicType: type, transform } = el;
+                const finalAttributes = {
+                    visible: el.attributes.visibility !== 'hidden' && el.attributes.visibility !== 'collapse'
+                };
+                if (el.graphicType === 'text') {
+                    vutils.merge(finalAttributes, el._inheritStyle, (_a = el.parent) === null || _a === void 0 ? void 0 : _a._textGroupStyle, el.attributes);
+                }
+                else if (el.graphicType !== 'group') {
+                    vutils.merge(finalAttributes, el._inheritStyle, el.attributes);
+                }
+                if (graphicAttributeTransform[type]) {
+                    el._finalAttributes = graphicAttributeTransform[type](finalAttributes, el.value);
+                }
+                else {
+                    el._finalAttributes = finalAttributes;
+                }
+                if (transform) {
+                    el._finalAttributes.postMatrix = Object.assign({}, transform);
+                }
+            });
+            const texts = elements.filter(el => el.tagName === 'text');
+            for (let i = 0; i < texts.length; i++) {
+                const textId = texts[i]._uniqueId;
+                const children = elements.filter(el => {
+                    let result = false;
+                    let parent = el.parent;
+                    while (parent) {
+                        if (parent._uniqueId === textId) {
+                            result = true;
+                            break;
+                        }
+                        parent = parent.parent;
+                    }
+                    return result;
+                });
+                if (children && children.length) {
+                    const startX = (_b = (_a = texts[i]._textGroupStyle) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0;
+                    let curX = startX;
+                    for (let j = 0; j < children.length; j++) {
+                        const currentChild = children[j];
+                        if (currentChild.graphicType === 'group') {
+                            curX = startX;
+                        }
+                        else if (currentChild.value) {
+                            if (currentChild.parent._textGroupStyle.x === undefined) {
+                                const lastText = children
+                                    .slice(0, j)
+                                    .reverse()
+                                    .find(c => c.graphicType === 'text' && c.value);
+                                if (lastText) {
+                                    const width = vchart.measureText(lastText.value, lastText._finalAttributes).width;
+                                    curX += width;
+                                }
+                                currentChild._finalAttributes.x = curX;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        return elements;
+    };
+
+    class PictogramSeries extends vchart.GeoSeries {
+        constructor() {
+            super(...arguments);
+            this.type = PICTOGRAM_SERIES_TYPE;
+            this._idToMark = new Map();
+        }
+        setAttrFromSpec() {
+            var _a, _b, _c;
+            super.setAttrFromSpec();
+            this.svg = this._spec.svg;
+            this._nameField = this._spec.nameField;
+            this._valueField = this._spec.valueField;
+            if (!this.svg) {
+                (_a = this._option) === null || _a === void 0 ? void 0 : _a.onError(`svg source is not specified !`);
+            }
+            this._parsedSvgResult = (_b = getSVGSource(this.svg)) === null || _b === void 0 ? void 0 : _b.latestData;
+            if (!this._parsedSvgResult) {
+                (_c = this._option) === null || _c === void 0 ? void 0 : _c.onError(`'${this.svg}' is not registered !`);
+            }
+        }
+        getDatumCenter(datum) {
+            return [Number.NaN, Number.NaN];
+        }
+        getDatumName(datum) {
+            return datum.name || datum._nameFromParent;
+        }
+        getMarksWithoutRoot() {
+            return this.getMarks().filter(m => m.name && !m.name.includes('seriesGroup') && !m.name.includes('root') && m !== this._pictogramMark);
+        }
+        _buildMarkAttributeContext() {
+            super._buildMarkAttributeContext();
+            this._markAttributeContext.getTransformMatrix = this.getRootMatrix.bind(this);
+            this._markAttributeContext.coordToPosition = this.coordToPosition.bind(this);
+            this._markAttributeContext.dataToPosition = this.dataToPosition.bind(this);
+        }
+        _defaultHoverConfig(finalHoverSpec) {
+            return {
+                type: ELEMENT_HIGHLIGHT_BY_GRPHIC_NAME,
+                trigger: finalHoverSpec.trigger,
+                triggerOff: 'pointerout',
+                blurState: vchart.STATE_VALUE_ENUM.STATE_HOVER_REVERSE,
+                highlightState: vchart.STATE_VALUE_ENUM.STATE_HOVER
+            };
+        }
+        _defaultSelectConfig(finalSelectSpec) {
+            const isMultiple = finalSelectSpec.mode === 'multiple';
+            const triggerOff = vutils.isValid(finalSelectSpec.triggerOff)
+                ? finalSelectSpec.triggerOff
+                : isMultiple
+                    ? ['empty', 'self']
+                    : ['empty', finalSelectSpec.trigger];
+            return {
+                type: ELEMENT_SELECT_BY_GRPHIC_NAME,
+                trigger: finalSelectSpec.trigger,
+                triggerOff: triggerOff,
+                reverseState: vchart.STATE_VALUE_ENUM.STATE_SELECTED_REVERSE,
+                state: vchart.STATE_VALUE_ENUM.STATE_SELECTED,
+                isMultiple
+            };
+        }
+        initMark() {
+            var _a;
+            this._pictogramMark = this._createMark(PictogramSeries.mark.pictogram, {
+                groupKey: this.getDimensionField()[0],
+                isSeriesMark: true,
+                skipBeforeLayouted: true
+            }, {
+                morph: vchart.shouldMarkDoMorph(this._spec, PictogramSeries.mark.pictogram.name)
+            });
+            if (!this._pictogramMark) {
+                return;
+            }
+            this._pictogramMark.setData(this._mapViewData);
+            this._pictogramMark.setUserId(PictogramSeries.mark.pictogram.name);
+            for (const element of this._mapViewData.getDataView().latestData) {
+                const { graphicType: type, name, parent, id, _nameFromParent, _uniqueId } = element;
+                const mark = this._createMark({ type, name: name !== null && name !== void 0 ? name : _nameFromParent }, {
+                    groupKey: _uniqueId,
+                    isSeriesMark: false,
+                    skipBeforeLayouted: true,
+                    parent: (_a = this._idToMark.get(parent === null || parent === void 0 ? void 0 : parent._uniqueId)) !== null && _a !== void 0 ? _a : this._pictogramMark
+                }, {
+                    morph: vchart.shouldMarkDoMorph(this._spec, PictogramSeries.mark.pictogram.name)
+                });
+                if (mark) {
+                    mark.setData(this._mapViewData);
+                    mark.setUserId(_uniqueId);
+                    this._idToMark.set(_uniqueId, mark);
+                    if (mark.type !== 'group') {
+                        mark.setMarkConfig({ graphicName: mark.name });
+                    }
+                    mark.setTransform([
+                        {
+                            type: 'filter',
+                            callback: (datum) => {
+                                return datum._uniqueId === _uniqueId;
+                            }
+                        }
+                    ]);
+                }
+            }
+            this._initLabelMark();
+        }
+        _initLabelMark() {
+            if (this._spec.label.visible !== true) {
+                return;
+            }
+            const labelMark = this._createMark(PictogramSeries.mark.label, {
+                isSeriesMark: false,
+                parent: this._pictogramMark,
+                groupKey: '_uniqueId',
+                skipBeforeLayouted: true
+            });
+            if (labelMark) {
+                this._labelMark = labelMark;
+                this._labelMark.setData(this._mapViewData);
+            }
+        }
+        initLabelMarkStyle() {
+            if (!this._labelMark) {
+                return;
+            }
+            this.setMarkStyle(this._labelMark, {
+                visible: (d) => !!this._validElement(d),
+                x: (d) => { var _a; return (_a = this.dataToPosition(d, true)) === null || _a === void 0 ? void 0 : _a.x; },
+                y: (d) => { var _a; return (_a = this.dataToPosition(d, true)) === null || _a === void 0 ? void 0 : _a.y; },
+                text: (d) => d[this.nameField],
+                textAlign: 'center',
+                textBaseline: 'middle'
+            }, vchart.STATE_VALUE_ENUM.STATE_NORMAL, vchart.AttributeLevel.Series);
+        }
+        initMarkStyle() {
+            const { root, viewBoxRect } = this._parsedSvgResult;
+            const elements = this._mapViewData.getDataView().latestData;
+            if (root) {
+                this.setMarkStyle(this._pictogramMark, graphicAttributeTransform.group(root.attributes), 'normal', vchart.AttributeLevel.Built_In);
+                if (root.transform) {
+                    this.setMarkStyle(this._pictogramMark, {
+                        postMatrix: () => root.transform
+                    }, 'normal', vchart.AttributeLevel.Built_In);
+                }
+                if (viewBoxRect) {
+                    this._pictogramMark.setMarkConfig({
+                        clip: true,
+                        clipPath: [createRect(Object.assign(Object.assign({}, viewBoxRect), { fill: true }))]
+                    });
+                }
+            }
+            for (const element of elements) {
+                const { _uniqueId, _finalAttributes: attributes } = element;
+                const mark = this._idToMark.get(_uniqueId);
+                const valid = this._validElement(element);
+                if (mark) {
+                    this.setMarkStyle(mark, { keepStrokeScale: true }, 'normal', vchart.AttributeLevel.Built_In);
+                    if (valid) {
+                        this.initMarkStyleWithSpec(mark, vutils.merge({}, this._spec.pictogram, this._spec[mark.name]));
+                        this.setMarkStyle(mark, attributes, 'normal', vchart.AttributeLevel.Series);
+                        mark.setPostProcess('fill', (result, datum) => {
+                            return vutils.isValid(result) ? result : this._spec.defaultFillColor;
+                        });
+                    }
+                    else {
+                        mark.setMarkConfig({ interactive: false });
+                        this.setMarkStyle(mark, attributes, 'normal', vchart.AttributeLevel.Built_In);
+                    }
+                }
+            }
+            this.initLabelMarkStyle();
+        }
+        _validElement(element) {
+            return element.name || element._nameFromParent;
+        }
+        initTooltip() {
+            this._tooltipHelper = new PictogramSeriesTooltipHelper(this);
+            this.getMarksWithoutRoot().forEach(mark => {
+                if (mark && mark.name) {
+                    this._tooltipHelper.activeTriggerSet.mark.add(mark);
+                }
+            });
+        }
+        dataToPosition(datum, global = false) {
+            if (!datum) {
+                return null;
+            }
+            const name = datum[this.nameField];
+            if (!name) {
+                return null;
+            }
+            const mark = this.getMarksWithoutRoot().filter(mark => mark.name === name);
+            if (!mark || mark.length === 0) {
+                return null;
+            }
+            let bounds = new vutils.Bounds();
+            if (global) {
+                mark.forEach(m => {
+                    bounds = bounds.union(m.getGraphics()[0].globalAABBBounds);
+                });
+            }
+            else {
+                mark.forEach(m => {
+                    bounds = bounds.union(m.getProduct().AABBBounds);
+                });
+            }
+            const point = { x: (bounds.x1 + bounds.x2) / 2, y: (bounds.y1 + bounds.y2) / 2 };
+            if (global) {
+                const { x, y } = this.getLayoutStartPoint();
+                point.x -= x;
+                point.y -= y;
+            }
+            return point;
+        }
+        coordToPosition(point) {
+            if (!point) {
+                return null;
+            }
+            const { x, y } = point;
+            const matrix = this.getRootMatrix();
+            if (!matrix) {
+                return null;
+            }
+            const position = {};
+            matrix.getInverse().transformPoint({ x, y }, position);
+            return position;
+        }
+        getRootMatrix() {
+            var _a;
+            return (_a = this.getPictogramRootGraphic()) === null || _a === void 0 ? void 0 : _a.transMatrix;
+        }
+        getPictogramRootGraphic() {
+            return this._pictogramMark.getProduct();
+        }
+        initData() {
+            var _a, _b;
+            super.initData();
+            const parsedSvg = svgSourceMap.get(this.svg);
+            if (!parsedSvg) {
+                (_a = this._option) === null || _a === void 0 ? void 0 : _a.onError('no valid svg found!');
+            }
+            const svgData = new DataView(this._dataSet, { name: `pictogram_${this.id}_data` });
+            vchart.registerDataSetInstanceTransform(this._dataSet, 'pictogram', pictogram);
+            vchart.registerDataSetInstanceTransform(this._dataSet, 'lookup', vchart.lookup);
+            svgData
+                .parse([parsedSvg], {
+                type: 'dataview'
+            })
+                .transform({ type: 'pictogram' })
+                .transform({
+                type: 'lookup',
+                options: {
+                    from: () => this.getViewData().latestData,
+                    key: 'name',
+                    fields: this._nameField,
+                    set: (a, b) => {
+                        if (b) {
+                            a.data = b;
+                        }
+                    }
+                }
+            })
+                .transform({
+                type: 'lookup',
+                options: {
+                    from: () => this.getViewData().latestData,
+                    key: '_nameFromParent',
+                    fields: this._nameField,
+                    set: (a, b) => {
+                        if (b) {
+                            a.data = b;
+                        }
+                    }
+                }
+            });
+            (_b = this._data) === null || _b === void 0 ? void 0 : _b.getDataView().target.addListener('change', svgData.reRunAllTransform);
+            this._mapViewData = new vchart.CompilableData(this._option, svgData);
+        }
+        mapViewDataUpdate() {
+            this._mapViewData.updateData();
+        }
+        onLayoutEnd() {
+            var _a;
+            super.onLayoutEnd();
+            (_a = this._mapViewData) === null || _a === void 0 ? void 0 : _a.getDataView().reRunAllTransform();
+        }
+        updateSVGSize() {
+            const { width: regionWidth, height: regionHeight } = this.getLayoutRect();
+            const regionCenterX = regionWidth / 2;
+            const regionCenterY = regionHeight / 2;
+            const root = this.getPictogramRootGraphic();
+            if (root) {
+                const bounds = root.AABBBounds;
+                const { x1, x2, y1, y2 } = root.AABBBounds;
+                const width = bounds.width();
+                const height = bounds.height();
+                const rootCenterX = (x1 + x2) / 2;
+                const rootCenterY = (y1 + y2) / 2;
+                const scaleX = regionWidth / width;
+                const scaleY = regionHeight / height;
+                const scale = Math.min(scaleX, scaleY);
+                root.scale(scale, scale, { x: rootCenterX, y: rootCenterY });
+                root.translate(regionCenterX - rootCenterX, regionCenterY - rootCenterY);
+            }
+        }
+        initEvent() {
+            var _a;
+            super.initEvent();
+            (_a = this._mapViewData.getDataView()) === null || _a === void 0 ? void 0 : _a.target.addListener('change', this.mapViewDataUpdate.bind(this));
+            this.event.on(vchart.ChartEvent.afterMarkLayoutEnd, this.updateSVGSize.bind(this));
+        }
+        handleZoom(e) {
+            const { scale, scaleCenter } = e;
+            if (scale === 1) {
+                return;
+            }
+            const root = this.getPictogramRootGraphic();
+            if (root) {
+                if (!root.attribute.postMatrix) {
+                    root.setAttributes({
+                        postMatrix: new vutils.Matrix()
+                    });
+                }
+                root.scale(scale, scale, scaleCenter);
+            }
+        }
+        handlePan(e) {
+            const { delta } = e;
+            if (delta[0] === 0 && delta[1] === 0) {
+                return;
+            }
+            const root = this.getPictogramRootGraphic();
+            if (root) {
+                if (!root.attribute.postMatrix) {
+                    root.setAttributes({
+                        postMatrix: new vutils.Matrix()
+                    });
+                }
+                root.translate(delta[0], delta[1]);
+            }
+        }
+        getMarkData(datum) {
+            var _a;
+            return (_a = datum.data) !== null && _a !== void 0 ? _a : {};
+        }
+        getMeasureField() {
+            return [this.valueField];
+        }
+        getDimensionField() {
+            return [this.nameField];
+        }
+        _getSeriesInfo(field, keys) {
+            const defaultShapeType = this.getDefaultShapeType();
+            return keys.map(key => {
+                return {
+                    key,
+                    originalKey: key,
+                    style: this.getSeriesStyle({
+                        data: {
+                            [field]: key
+                        }
+                    }),
+                    shapeType: defaultShapeType
+                };
+            });
+        }
+        release() {
+            this._parsedSvgResult = null;
+            this._idToMark.clear();
+            this._idToMark = null;
+        }
+    }
+    PictogramSeries.type = PICTOGRAM_SERIES_TYPE;
+    PictogramSeries.mark = PictogramSeriesMark;
+    PictogramSeries.transformerConstructor = PictogramSeriesSpecTransformer;
+    const registerPictogramSeries = () => {
+        vchart.Factory.registerSeries(PictogramSeries.type, PictogramSeries);
+        vchart.Factory.registerImplement('registerSVG', registerSVGSource);
+        vchart.Factory.registerImplement('unregisterSVG', unregisterSVGSource);
+        registerElementHighlightByGraphicName();
+        registerElementSelectByGraphicName();
+    };
+
+    class PictogramChart extends vchart.BaseChart {
+        constructor() {
+            super(...arguments);
+            this.transformerConstructor = PictogramChartSpecTransformer;
+            this.type = PICTOGRAM_CHART_TYPE;
+            this.seriesType = PICTOGRAM_SERIES_TYPE;
+        }
+    }
+    PictogramChart.type = PICTOGRAM_SERIES_TYPE;
+    PictogramChart.seriesType = PICTOGRAM_CHART_TYPE;
+    PictogramChart.transformerConstructor = PictogramChartSpecTransformer;
+    const registerPictogramChart = () => {
+        vchart.registerMarkTooltipProcessor();
+        registerPictogramSeries();
+        vchart.Factory.registerChart(PictogramChart.type, PictogramChart);
+    };
+
+    class ImageCloudChartSpecTransformer extends vchart.BaseChartSpecTransformer {
+        transformSpec(spec) {
+            super.transformSpec(spec);
+            this.transformSeriesSpec(spec);
+        }
+        _getDefaultSeriesSpec(spec) {
+            const series = super._getDefaultSeriesSpec(spec, [
+                'urlField',
+                'nameField',
+                'valueField',
+                'imageSize',
+                'imageSizeRange',
+                'ratio',
+                'maskShape',
+                'imageMask',
+                'layoutConfig',
+                'image'
+            ]);
+            return series;
+        }
+    }
+
+    const IMAGE_CLOUD_CHART_TYPE = 'imageCloud';
+    const IMAGE_CLOUD_SERIES_TYPE = 'imageCloud';
+    var ImageCloudMarkNameEnum;
+    (function (ImageCloudMarkNameEnum) {
+        ImageCloudMarkNameEnum["image"] = "image";
+        ImageCloudMarkNameEnum["imageMask"] = "imageMask";
+    })(ImageCloudMarkNameEnum || (ImageCloudMarkNameEnum = {}));
+    const imageCloudSeriesMark = Object.assign(Object.assign({}, vchart.baseSeriesMark), { ["image"]: { name: "image", type: "image" }, ["imageMask"]: { name: "imageMask", type: "rect" } });
+
+    const shapes = {
+      triangleForward: triangleForward,
+      triangleUpright: triangle,
+      triangle: triangle,
+      diamond: diamond,
+      square: square$1,
+      star: star,
+      cardioid: cardioid,
+      circle: circle,
+      pentagon: pentagon
+    };
+    function diamond() {
+      return function (theta) {
+        const thetaPrime = theta % (2 * Math.PI / 4);
+        return 1 / (Math.cos(thetaPrime) + Math.sin(thetaPrime));
+      };
+    }
+    function star() {
+      return function (theta) {
+        const thetaPrime = (theta + .955) % (2 * Math.PI / 10);
+        return (theta + .955) % (2 * Math.PI / 5) - 2 * Math.PI / 10 >= 0 ? 1 / (Math.cos(2 * Math.PI / 10 - thetaPrime) + 3.07768 * Math.sin(2 * Math.PI / 10 - thetaPrime)) : 1 / (Math.cos(thetaPrime) + 3.07768 * Math.sin(thetaPrime));
+      };
+    }
+    function square$1() {
+      return function (theta) {
+        return Math.min(1 / Math.abs(Math.cos(theta)), 1 / Math.abs(Math.sin(theta)));
+      };
+    }
+    function triangle() {
+      return function (theta) {
+        const thetaPrime = (theta + 3 * Math.PI / 2) % (2 * Math.PI / 3);
+        return 1 / (Math.cos(thetaPrime) + Math.sqrt(3) * Math.sin(thetaPrime));
+      };
+    }
+    function triangleForward() {
+      return function (theta) {
+        const thetaPrime = theta % (2 * Math.PI / 3);
+        return 1 / (Math.cos(thetaPrime) + Math.sqrt(3) * Math.sin(thetaPrime));
+      };
+    }
+    function cardioid() {
+      return function (theta) {
+        return 1 + Math.sin(theta);
+      };
+    }
+    function circle() {
+      return function () {
+        return 1;
+      };
+    }
+    function pentagon() {
+      return function (theta) {
+        const thetaPrime = (theta + .955) % (2 * Math.PI / 5);
+        return 1 / (Math.cos(thetaPrime) + .726543 * Math.sin(thetaPrime));
+      };
+    }
+    function getMaxRadiusAndCenter(shape, size) {
+      const w = size[0],
+        h = size[1];
+      let maxRadius = 1;
+      const center = [size[0] >> 1, size[1] >> 1];
+      switch (shape) {
+        case "cardioid":
+          center[1] = ~~(h / 2.7 * .4), maxRadius = Math.floor(Math.min(w / 2.3, h / 2.6));
+          break;
+        case "triangleForward":
+          maxRadius = h / Math.sqrt(.75) > w ? Math.floor(w / 2) : Math.floor(h / (2 * Math.sqrt(.75)));
+          break;
+        case "triangle":
+        case "triangleUpright":
+          center[1] = ~~(h / 1.5), maxRadius = Math.floor(Math.min(h / 1.5, w / 2));
+          break;
+        case "circle":
+        case "diamond":
+        case "square":
+        case "star":
+        case "pentagon":
+          maxRadius = Math.floor(Math.min(w / 2, h / 2));
+          break;
+        default:
+          maxRadius = Math.floor(Math.max(w / 2, h / 2));
+      }
+      return {
+        maxRadius: maxRadius,
+        center: center
+      };
+    }
+    const getShapeFunction = type => shapes[type] ? shapes[type]() : shapes.circle();
+
+    const spirals = {
+      archimedean: archimedeanSpiral,
+      rectangular: rectangularSpiral
+    };
+    function archimedeanSpiral(size) {
+      const e = size[0] / size[1];
+      return t => [e * (t *= .1) * Math.cos(t), t * Math.sin(t)];
+    }
+    function rectangularSpiral(size) {
+      const dx = 4 * size[0] / size[1];
+      let x = 0,
+        y = 0;
+      return t => {
+        const sign = t < 0 ? -1 : 1;
+        switch (Math.sqrt(1 + 4 * sign * t) - sign & 3) {
+          case 0:
+            x += dx;
+            break;
+          case 1:
+            y += 4;
+            break;
+          case 2:
+            x -= dx;
+            break;
+          default:
+            y -= 4;
+        }
+        return [x, y];
+      };
+    }
+
+    const generateIsEmptyPixel = (backgroundColor, options, createCanvas) => {
+      const {
+        threshold: threshold,
+        invert = !1
+      } = null != options ? options : {};
+      if (!backgroundColor || "#fff" === backgroundColor) return (imageData, y, x) => {
+        const width = imageData.width;
+        if (0 === imageData.data[y * width * 4 + 4 * x + 3]) return !invert;
+        const r = imageData.data[y * width * 4 + 4 * x + 0],
+          g = imageData.data[y * width * 4 + 4 * x + 1],
+          b = imageData.data[y * width * 4 + 4 * x + 2];
+        if (255 === r && 255 === g && 255 === b) return !invert;
+        if (vutils.isValidNumber(threshold)) {
+          const grayValue = .3 * r + .59 * g + .11 * b;
+          return invert ? grayValue <= threshold : grayValue >= threshold;
+        }
+        return !1;
+      };
+      const bctx = createCanvas({
+        width: 1,
+        height: 1
+      }).getContext("2d", {
+        willReadFrequently: !0
+      });
+      bctx.fillStyle = backgroundColor, bctx.fillRect(0, 0, 1, 1);
+      const bgPixel = bctx.getImageData(0, 0, 1, 1).data;
+      return (imageData, y, x) => {
+        const width = imageData.width;
+        return [0, 1, 2, 3].every(i => invert ? imageData.data[4 * (y * width + x) + i] !== bgPixel[i] : imageData.data[4 * (y * width + x) + i] === bgPixel[i]);
+      };
+    };
+    const generateMaskCanvas = function (shape, width, height, cacheCanvas) {
+      let invert = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : !1;
+      let createCanvas = arguments.length > 5 ? arguments[5] : undefined;
+      let {
+          backgroundColor = "#fff"
+        } = shape,
+        {
+          fill: foregroundColor = "#000"
+        } = shape;
+      invert && ([backgroundColor, foregroundColor] = [foregroundColor, backgroundColor]);
+      const maskCanvas = cacheCanvas || createCanvas({
+          width: width,
+          height: height,
+          dpr: 1
+        }),
+        tempContext = maskCanvas.getContext("2d", {
+          willReadFrequently: !0
+        });
+      if (cacheCanvas) {
+        const prevWidth = cacheCanvas.width,
+          prevHeight = cacheCanvas.height;
+        tempContext.clearRect(0, 0, prevWidth, prevHeight), cacheCanvas.style.width = `${width}px`, cacheCanvas.style.height = `${height}px`, cacheCanvas.width = width, cacheCanvas.height = height;
+      }
+      return tempContext.fillStyle = backgroundColor, tempContext.fillRect(0, 0, maskCanvas.width, maskCanvas.height), "text" === shape.type ? drawTextMask(shape, foregroundColor, maskCanvas.width, maskCanvas.height, tempContext) : "geometric" === shape.type && drawGeometricMask(shape, foregroundColor, maskCanvas.width, maskCanvas.height, tempContext), maskCanvas;
+    };
+    const drawTextMask = (shape, fillColor, width, height, ctx) => {
+      const {
+        fontFamily = "sans-serif",
+        fontWeight = "normal",
+        fontStyle = "normal",
+        fontVariant = "normal",
+        text: text,
+        hollow: hollow
+      } = shape;
+      let baseFontSize = 12;
+      ctx.font = `${fontStyle} ${fontVariant} ${fontWeight} ${baseFontSize}px ${fontFamily}`, ctx.textAlign = "center", ctx.textBaseline = "middle", ctx.fillStyle = fillColor;
+      const textMetrics = ctx.measureText(text),
+        scale = "normal" !== fontStyle ? 1.1 : 1,
+        actualWidth = vutils.isValid(textMetrics.actualBoundingBoxRight) && vutils.isValid(textMetrics.actualBoundingBoxLeft) ? Math.ceil(scale * (Math.abs(textMetrics.actualBoundingBoxRight) + Math.abs(textMetrics.actualBoundingBoxLeft))) : 0,
+        textWidth = Math.max(Math.ceil(textMetrics.width), actualWidth, baseFontSize);
+      if (hollow && (ctx.globalCompositeOperation = "xor"), textWidth > width) {
+        const scale = Math.min(width / textWidth, height / baseFontSize);
+        ctx.fillText(text, width / 2, height / 2), ctx.scale(scale, scale);
+      } else baseFontSize = Math.floor(baseFontSize * width / textWidth), baseFontSize = Math.min(baseFontSize, height), ctx.font = `${fontStyle} ${fontVariant} ${fontWeight} ${baseFontSize}px ${fontFamily}`, ctx.fillText(text, Math.floor(width / 2), Math.floor(height / 2));
+    };
+    const generatePoints = function (center, radius) {
+      let startAngle = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+      let count = arguments.length > 3 ? arguments[3] : undefined;
+      const angle = 2 * Math.PI / count;
+      return new Array(count).fill(0).map((entry, index) => vutils.polarToCartesian(center, radius, startAngle + index * angle));
+    };
+    const generateCardioidPoints = function (center, radius) {
+      let startAngle = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+      let count = arguments.length > 3 ? arguments[3] : undefined;
+      const angle = 2 * Math.PI / count,
+        func = getShapeFunction("cardioid");
+      return new Array(count).fill(0).map((entry, index) => {
+        const theta = startAngle + index * angle,
+          r = radius * func(theta);
+        return vutils.polarToCartesian(center, r, theta);
+      });
+    };
+    const drawRegularPolygon = (ctx, points) => {
+      ctx.beginPath(), points.forEach((p, index) => {
+        0 === index ? ctx.moveTo(p.x, p.y) : ctx.lineTo(p.x, p.y);
+      }), ctx.closePath(), ctx.fill();
+    };
+    const drawCardioid = (ctx, points) => {
+      let prev;
+      ctx.beginPath(), points.forEach((p, index) => {
+        0 === index ? ctx.moveTo(p.x, p.y) : ctx.bezierCurveTo(p.x, p.y, prev.x, prev.y, p.x, p.y), prev = p;
+      }), ctx.closePath(), ctx.fill();
+    };
+    const drawGeometricMask = (shape, fillColor, width, height, ctx) => {
+      const {
+          hollow: hollow
+        } = shape,
+        {
+          center: center,
+          maxRadius: maxRadius
+        } = getMaxRadiusAndCenter(shape.shape, [width, height]);
+      ctx.fillStyle = fillColor, hollow && (ctx.globalCompositeOperation = "xor");
+      const cx = center[0],
+        cy = center[1];
+      if ("cardioid" === shape.shape) drawCardioid(ctx, generateCardioidPoints({
+        x: cx,
+        y: cy
+      }, maxRadius, 0, 100));else if ("circle" === shape.shape) ctx.beginPath(), ctx.arc(cx, cy, maxRadius, 0, 2 * Math.PI, !0), ctx.fill();else if ("diamond" === shape.shape) drawRegularPolygon(ctx, generatePoints({
+        x: cx,
+        y: cy
+      }, maxRadius, -Math.PI / 2, 4));else if ("square" === shape.shape) drawRegularPolygon(ctx, generatePoints({
+        x: cx,
+        y: cy
+      }, maxRadius, -Math.PI / 4, 4));else if ("pentagon" === shape.shape) drawRegularPolygon(ctx, generatePoints({
+        x: cx,
+        y: cy
+      }, maxRadius, Math.PI / 2, 5));else if ("triangle" === shape.shape || "triangleUpright" === shape.shape) drawRegularPolygon(ctx, generatePoints({
+        x: cx,
+        y: cy
+      }, maxRadius, -Math.PI / 2, 3));else if ("triangleForward" === shape.shape) drawRegularPolygon(ctx, generatePoints({
+        x: cx,
+        y: cy
+      }, maxRadius, 0, 3));else if ("star" === shape.shape) {
+        const outterPoints = generatePoints({
+            x: cx,
+            y: cy
+          }, maxRadius, -Math.PI / 2, 5),
+          innerPoints = generatePoints({
+            x: cx,
+            y: cy
+          }, maxRadius / (2 * Math.cos(Math.PI / 5)), -Math.PI / 2 + Math.PI / 5, 5),
+          points = [];
+        for (let i = 0; i < 5; i++) points.push(outterPoints[i]), points.push(innerPoints[i]);
+        drawRegularPolygon(ctx, points);
+      } else ctx.fillRect(0, 0, width, height);
+    };
+    function segmentation(segmentationInput) {
+      const {
+          size: size,
+          maskCanvas: maskCanvas
+        } = segmentationInput,
+        imageData = maskCanvas.getContext("2d", {
+          willReadFrequently: !0
+        }).getImageData(0, 0, maskCanvas.width, maskCanvas.height),
+        labels = new Array(size[0] * size[1]).fill(0);
+      let curLabel = 1;
+      const offset = [[0, 1], [1, 0], [-1, 0], [0, -1]];
+      let queue = [];
+      for (let i = 0; i < size[1]; i++) for (let j = 0; j < size[0]; j++) if (0 === labels[i * size[0] + j] && !segmentationInput.isEmptyPixel(imageData, i, j)) {
+        labels[i * size[0] + j] = curLabel, queue.push([i, j]);
+        for (let k = 0; k < queue.length; k++) for (let m = 0; m < 4; m++) {
+          let row = queue[k][0] + offset[m][0],
+            col = queue[k][1] + offset[m][1];
+          row = row < 0 ? 0 : row >= size[1] ? size[1] - 1 : row, col = col < 0 ? 0 : col >= size[0] ? size[0] - 1 : col, 0 !== labels[row * size[0] + col] || segmentationInput.isEmptyPixel(imageData, row, col) || (labels[row * size[0] + col] = curLabel, queue.push([row, col]));
+        }
+        curLabel++, queue = [];
+      }
+      const boundaries = {},
+        areas = {},
+        centers = {},
+        maxPoints = {},
+        maxR = {},
+        ratios = {},
+        shapeBounds = {
+          x1: 1 / 0,
+          x2: -1 / 0,
+          y1: 1 / 0,
+          y2: -1 / 0,
+          width: 0,
+          height: 0
+        },
+        boundaryPixels = [];
+      for (let i = 0; i < size[1]; i++) for (let j = 0; j < size[0]; j++) {
+        const label = labels[i * size[0] + j];
+        0 !== label && (isBoundaryPixel(i, j) && (boundaryPixels.push([i, j]), boundaries[label] = boundaries[label] || [], boundaries[label].push([j, i]), maxPoints[label] || (maxPoints[label] = [1 / 0, -1 / 0, 1 / 0, -1 / 0]), i < maxPoints[label][0] && (maxPoints[label][0] = i), i > maxPoints[label][1] && (maxPoints[label][1] = i), j < maxPoints[label][2] && (maxPoints[label][2] = j), j > maxPoints[label][3] && (maxPoints[label][3] = j), j < shapeBounds.x1 && (shapeBounds.x1 = j), j > shapeBounds.x2 && (shapeBounds.x2 = j), i < shapeBounds.y1 && (shapeBounds.y1 = i), i > shapeBounds.y2 && (shapeBounds.y2 = i)), areas[label] = (areas[label] || 0) + 1);
+      }
+      const allBoundaries = [];
+      for (const label in boundaries) {
+        const boundary = boundaries[label],
+          x = ~~(boundary.reduce((acc, cur) => acc + cur[0], 0) / boundary.length),
+          y = ~~(boundary.reduce((acc, cur) => acc + cur[1], 0) / boundary.length);
+        centers[label] = [x, y], allBoundaries.push(...boundary);
+        const [yMin, yMax, xMin, xMax] = maxPoints[label];
+        maxR[label] = ~~Math.max(Math.sqrt((x - xMin) ** 2 + (y - yMin) ** 2), Math.sqrt((x - xMax) ** 2 + (y - yMax) ** 2), Math.sqrt((x - xMin) ** 2 + (y - yMax) ** 2), Math.sqrt((x - xMax) ** 2 + (y - yMin) ** 2)), ratios[label] = (xMax - xMin) / (yMax - yMin);
+      }
+      const regions = Object.keys(centers).map(key => ({
+        label: key - 1,
+        boundary: boundaries[key],
+        area: areas[key],
+        center: centers[key],
+        maxPoint: maxPoints[key],
+        maxR: maxR[key],
+        ratio: ratios[key]
+      }));
+      shapeBounds.width = shapeBounds.x2 - shapeBounds.x1 + 1, shapeBounds.height = shapeBounds.y2 - shapeBounds.y1 + 1;
+      const x = ~~(allBoundaries.reduce((acc, cur) => acc + cur[0], 0) / allBoundaries.length),
+        y = ~~(allBoundaries.reduce((acc, cur) => acc + cur[1], 0) / allBoundaries.length),
+        shapeMaxR = ~~Math.max(Math.sqrt((x - shapeBounds.x1) ** 2 + (y - shapeBounds.y1) ** 2), Math.sqrt((x - shapeBounds.x2) ** 2 + (y - shapeBounds.y2) ** 2), Math.sqrt((x - shapeBounds.x1) ** 2 + (y - shapeBounds.y2) ** 2), Math.sqrt((x - shapeBounds.x2) ** 2 + (y - shapeBounds.y1) ** 2)),
+        shapeRatio = shapeBounds.width / shapeBounds.height,
+        shapeArea = Object.keys(areas).reduce((acc, key) => acc + areas[key], 0),
+        segmentation = {
+          regions: regions,
+          labels: labels,
+          labelNumber: curLabel - 1
+        };
+      if (segmentationInput.blur) {
+        const blur = segmentationInput.blur,
+          blurredLabels = gaussianBlur(labels, size[0], size[1], blur);
+        drawContour(labels, boundaryPixels, size[0], size[1], Math.ceil(blur / 2)).forEach((value, index) => {
+          1 === value && (labels[index] = blurredLabels[index]);
+        });
+      }
+      return Object.assign(segmentationInput, {
+        segmentation: segmentation,
+        shapeBounds: shapeBounds,
+        shapeMaxR: shapeMaxR,
+        shapeRatio: shapeRatio,
+        shapeCenter: [x, y],
+        shapeArea: shapeArea
+      });
+      function isBoundaryPixel(i, j) {
+        const offset = [[0, 1], [1, 0], [-1, 0], [0, -1]];
+        if (0 === i || 0 === j || i === size[1] - 1 || j === size[0] - 1) return !0;
+        for (let k = 0; k < 4; k++) {
+          let row = i + offset[k][0],
+            col = j + offset[k][1];
+          if (row = row < 0 ? 0 : row >= size[1] ? size[1] - 1 : row, col = col < 0 ? 0 : col >= size[0] ? size[0] - 1 : col, 0 === labels[row * size[0] + col]) return !0;
+        }
+        return !1;
+      }
+    }
+    function generateGaussianKernel1D(size, sigma) {
+      const kernel = new Array(2 * size + 1).fill(0),
+        center = size;
+      let sum = 0;
+      for (let x = -size; x <= size; x++) {
+        const g = Math.exp(-x * x / (2 * sigma * sigma));
+        kernel[x + center] = g, sum += g;
+      }
+      for (let i = 0; i < kernel.length; i++) kernel[i] /= sum;
+      return kernel;
+    }
+    function gaussianBlur(labels, width, height, blur) {
+      const sigma = blur / 3,
+        size = Math.ceil(blur / 2),
+        kernel = generateGaussianKernel1D(size, sigma),
+        temp = new Array(labels.length).fill(0),
+        result = new Array(labels.length).fill(0);
+      for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
+        let sum = 0;
+        for (let i = -size; i <= size; i++) {
+          sum += labels[y * width + Math.min(Math.max(x + i, 0), width - 1)] * kernel[i + size];
+        }
+        temp[y * width + x] = sum;
+      }
+      for (let x = 0; x < width; x++) for (let y = 0; y < height; y++) {
+        let sum = 0;
+        for (let i = -size; i <= size; i++) {
+          sum += temp[Math.min(Math.max(y + i, 0), height - 1) * width + x] * kernel[i + size];
+        }
+        result[y * width + x] = Math.max(0, Math.min(1, sum));
+      }
+      return result;
+    }
+    function drawContour(labels, boundaryPixels, width, height) {
+      let thickness = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
+      const result = new Array(labels.length).fill(0);
+      for (const [i, j] of boundaryPixels) if (result[i * width + j] = 1, thickness > 1) for (let di = 1 - thickness; di <= thickness - 1; di++) for (let dj = 1 - thickness; dj <= thickness - 1; dj++) {
+        if (Math.sqrt(di * di + dj * dj) < thickness) {
+          const ni = i + di,
+            nj = j + dj;
+          ni >= 0 && ni < height && nj >= 0 && nj < width && (result[ni * width + nj] = 1);
+        }
+      }
+      return result;
+    }
+    function removeBorder(image, canvas, isEmptyPixel) {
+      canvas.width = image.width, canvas.height = image.height;
+      const ctx = canvas.getContext("2d", {
+        willReadFrequently: !0
+      });
+      ctx.clearRect(0, 0, canvas.width, canvas.height), ctx.drawImage(image, 0, 0);
+      const width = canvas.width,
+        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+      let top = 0,
+        bottom = imageData.height,
+        left = 0,
+        right = imageData.width;
+      const rowBlank = (width, y) => {
+          for (let x = 0; x < width; ++x) if (!isEmptyPixel(imageData, y, x)) return !1;
+          return !0;
+        },
+        columnBlank = (x, y0, y1) => {
+          for (let y = y0; y < y1; ++y) if (!isEmptyPixel(imageData, y, x)) return !1;
+          return !0;
+        };
+      for (; top < bottom && rowBlank(width, top);) ++top;
+      for (; bottom - 1 > top && rowBlank(width, bottom - 1);) --bottom;
+      for (; left < right && columnBlank(left, top, bottom);) ++left;
+      for (; right - 1 > left && columnBlank(right - 1, top, bottom);) --right;
+      const trimmed = ctx.getImageData(left, top, right - left, bottom - top);
+      return canvas.width = trimmed.width, canvas.height = trimmed.height, ctx.clearRect(0, 0, canvas.width, canvas.height), ctx.putImageData(trimmed, 0, 0), canvas;
+    }
+    function scaleAndMiddleShape(image, size) {
+      const width = image.width,
+        height = image.height;
+      let scale = size[0] / width;
+      height * scale > size[1] && (scale = size[1] / height);
+      const newWidth = Math.floor(scale * width),
+        newHeight = Math.floor(scale * height);
+      return {
+        x: (size[0] - newWidth) / 2,
+        y: (size[1] - newHeight) / 2,
+        width: newWidth,
+        height: newHeight,
+        scale: scale
+      };
+    }
+
+    function loadImage(url, createImage) {
+      return url && (vutils.isValidUrl(url) || vutils.isBase64(url) || url.startsWith("<svg")) ? new Promise((resolve, reject) => {
+        var _a;
+        const imageMark = createImage({
+            image: url
+          }),
+          imgData = null === (_a = imageMark.resources) || void 0 === _a ? void 0 : _a.get(url);
+        imgData && "success" === imgData.state && imgData.data ? resolve(imgData.data) : (imageMark.successCallback = () => {
+          var _a;
+          if (imageMark) {
+            const imgData = null === (_a = imageMark.resources) || void 0 === _a ? void 0 : _a.get(url);
+            imgData && "success" === imgData.state && imgData.data ? resolve(imgData.data) : reject(new Error("image load failed: " + url));
+          } else reject(new Error("image load failed: " + url));
+        }, imageMark.failCallback = () => {
+          reject(new Error("image load failed: " + url));
+        });
+      }) : null;
+    }
+    function loadImages(urls, createImage) {
+      return Promise.allSettled(urls.map(url => loadImage(url, createImage)));
+    }
+
+    var ScaleEnum;
+    !function (ScaleEnum) {
+      ScaleEnum.Identity = "identity", ScaleEnum.Linear = "linear", ScaleEnum.Log = "log", ScaleEnum.Pow = "pow", ScaleEnum.Sqrt = "sqrt", ScaleEnum.Symlog = "symlog", ScaleEnum.Time = "time", ScaleEnum.Quantile = "quantile", ScaleEnum.Quantize = "quantize", ScaleEnum.Threshold = "threshold", ScaleEnum.Ordinal = "ordinal", ScaleEnum.Point = "point", ScaleEnum.Band = "band";
+    }(ScaleEnum || (ScaleEnum = {}));
+    Object.values(ScaleEnum).forEach(v => {
+    });
+
+    function identity(x) {
+      return x;
+    }
+    const sqrt = x => x < 0 ? -Math.sqrt(-x) : Math.sqrt(x);
+    const square = x => x < 0 ? -x * x : x * x;
+    function normalize(a, b) {
+      if (a = Number(a), b = Number(b), b -= a) return x => (x - a) / b;
+      const result = Number.isNaN(b) ? NaN : .5;
+      return () => result;
+    }
+    function bimap(domain, range, interpolate) {
+      const d0 = domain[0],
+        d1 = domain[1],
+        r0 = range[0],
+        r1 = range[1];
+      let d0Fuc, r0Fuc;
+      return d1 < d0 ? (d0Fuc = normalize(d1, d0), r0Fuc = interpolate(r1, r0)) : (d0Fuc = normalize(d0, d1), r0Fuc = interpolate(r0, r1)), x => r0Fuc(d0Fuc(x));
+    }
+    function calculateWholeRangeFromRangeFactor(range, rangeFactor) {
+      const k = (range[1] - range[0]) / (rangeFactor[1] - rangeFactor[0]),
+        b = range[0] - k * rangeFactor[0];
+      return [b, k + b];
+    }
+    function polymap(domain, range, interpolate) {
+      const j = Math.min(domain.length, range.length) - 1,
+        d = new Array(j),
+        r = new Array(j);
+      let i = -1;
+      for (domain[j] < domain[0] && (domain = domain.slice().reverse(), range = range.slice().reverse()); ++i < j;) d[i] = normalize(domain[i], domain[i + 1]), r[i] = interpolate(range[i], range[i + 1]);
+      return function (x) {
+        const i = vutils.bisect(domain, x, 1, j) - 1;
+        return r[i](d[i](x));
+      };
+    }
+    const niceNumber = function (value) {
+      let round = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+      const exponent = Math.floor(Math.log10(value)),
+        fraction = value / Math.pow(10, exponent);
+      let niceFraction;
+      return niceFraction = round ? fraction < 1.5 ? 1 : fraction < 3 ? 2 : fraction < 7 ? 5 : 10 : fraction <= 1 ? 1 : fraction <= 2 ? 2 : fraction <= 5 ? 5 : 10, niceFraction * Math.pow(10, exponent);
+    };
+    const restrictNumber = (value, domain) => {
+      let min, max;
+      return domain[0] < domain[1] ? (min = domain[0], max = domain[1]) : (min = domain[1], max = domain[0]), Math.min(Math.max(value, min), max);
+    };
+
+    class BaseScale {
+      constructor() {
+        this._rangeFactorStart = null, this._rangeFactorEnd = null;
+      }
+      _calculateWholeRange(range) {
+        return this._wholeRange ? this._wholeRange : vutils.isValid(this._rangeFactorStart) && vutils.isValid(this._rangeFactorEnd) && 2 === range.length ? (this._wholeRange = calculateWholeRangeFromRangeFactor(range, [this._rangeFactorStart, this._rangeFactorEnd]), this._wholeRange) : range;
+      }
+      rangeFactor(_, slience, clear) {
+        return _ ? (2 === _.length && _.every(r => r >= 0 && r <= 1) && (this._wholeRange = null, 0 === _[0] && 1 === _[1] ? (this._rangeFactorStart = null, this._rangeFactorEnd = null) : (this._rangeFactorStart = _[0], this._rangeFactorEnd = _[1])), this) : clear ? (this._wholeRange = null, this._rangeFactorStart = null, this._rangeFactorEnd = null, this) : vutils.isValid(this._rangeFactorStart) && vutils.isValid(this._rangeFactorEnd) ? [this._rangeFactorStart, this._rangeFactorEnd] : null;
+      }
+      rangeFactorStart(_, slience) {
+        var _a;
+        return vutils.isNil(_) ? this._rangeFactorStart : (_ >= 0 && _ <= 1 && (this._wholeRange = null, 0 !== _ || !vutils.isNil(this._rangeFactorEnd) && 1 !== this._rangeFactorEnd ? (this._rangeFactorStart = _, this._rangeFactorEnd = null !== (_a = this._rangeFactorEnd) && void 0 !== _a ? _a : 1) : (this._rangeFactorStart = null, this._rangeFactorEnd = null)), this);
+      }
+      rangeFactorEnd(_, slience) {
+        var _a;
+        return vutils.isNil(_) ? this._rangeFactorEnd : (_ >= 0 && _ <= 1 && (this._wholeRange = null, 0 !== _ || !vutils.isNil(this._rangeFactorStart) && 0 !== this._rangeFactorStart ? (this._rangeFactorEnd = _, this._rangeFactorStart = null !== (_a = this._rangeFactorStart) && void 0 !== _a ? _a : 0) : (this._rangeFactorStart = null, this._rangeFactorEnd = null)), this);
+      }
+      generateFishEyeTransform() {
+        var _a;
+        if (!this._fishEyeOptions) return void (this._fishEyeTransform = null);
+        const {
+            distortion = 2,
+            radiusRatio = .1,
+            radius: radius
+          } = this._fishEyeOptions,
+          range = this.range(),
+          first = range[0],
+          last = range[range.length - 1],
+          min = Math.min(first, last),
+          max = Math.max(first, last),
+          focus = vutils.clamp(null !== (_a = this._fishEyeOptions.focus) && void 0 !== _a ? _a : 0, min, max),
+          rangeRadius = vutils.isNil(radius) ? (max - min) * radiusRatio : radius;
+        let k0 = Math.exp(distortion);
+        k0 = k0 / (k0 - 1) * rangeRadius;
+        const k1 = distortion / rangeRadius;
+        this._fishEyeTransform = output => {
+          const delta = Math.abs(output - focus);
+          if (delta >= rangeRadius) return output;
+          if (delta <= 1e-6) return focus;
+          const k = k0 * (1 - Math.exp(-delta * k1)) / delta * .75 + .25;
+          return focus + (output - focus) * k;
+        };
+      }
+      unknown(_) {
+        return arguments.length ? (this._unknown = _, this) : this._unknown;
+      }
+      get(key, defaultValue) {
+        var _a;
+        return null !== (_a = null == this ? void 0 : this[key]) && void 0 !== _a ? _a : defaultValue;
+      }
+    }
+
+    const {
+      interpolateRgb: interpolateRgb
+    } = vutils.ColorUtil;
+    function interpolate(a, b) {
+      const t = typeof b;
+      let c;
+      if (vutils.isNil(b) || "boolean" === t) return () => b;
+      if ("number" === t) return vutils.interpolateNumber(a, b);
+      if ("string" === t) {
+        if (c = vutils.ColorUtil.Color.parseColorString(b)) {
+          const rgb = interpolateRgb(vutils.ColorUtil.Color.parseColorString(a), c);
+          return t => rgb(t).formatRgb();
+        }
+        return vutils.interpolateNumber(Number(a), Number(b));
+      }
+      return b instanceof vutils.ColorUtil.RGB ? interpolateRgb(a, b) : b instanceof vutils.ColorUtil.Color ? interpolateRgb(a.color, b.color) : b instanceof Date ? vutils.interpolateDate(a, b) : vutils.interpolateNumber(Number(a), Number(b));
+    }
+
+    class ContinuousScale extends BaseScale {
+      constructor() {
+        let transformer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : identity;
+        let untransformer = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : identity;
+        super(), this._unknown = void 0, this.transformer = transformer, this.untransformer = untransformer, this._forceAlign = !0, this._domain = [0, 1], this._range = [0, 1], this._clamp = identity, this._piecewise = bimap, this._interpolate = interpolate;
+      }
+      calculateVisibleDomain(range) {
+        var _a;
+        if (vutils.isValid(this._rangeFactorStart) && vutils.isValid(this._rangeFactorEnd) && 2 === range.length) {
+          return [this.invert(range[0]), this.invert(range[1])];
+        }
+        return null !== (_a = this._niceDomain) && void 0 !== _a ? _a : this._domain;
+      }
+      fishEye(options, slience, clear) {
+        return options || clear ? (this._fishEyeOptions = options, this._fishEyeTransform = null, this.rescale(slience)) : this._fishEyeOptions;
+      }
+      scale(x) {
+        var _a;
+        if (x = Number(x), Number.isNaN(x) || this._domainValidator && !this._domainValidator(x)) return this._unknown;
+        this._output || (this._output = this._piecewise((null !== (_a = this._niceDomain) && void 0 !== _a ? _a : this._domain).map(this.transformer), this._calculateWholeRange(this._range), this._interpolate));
+        const output = this._output(this.transformer(this._clamp(x)));
+        return this._fishEyeTransform ? this._fishEyeTransform(output) : output;
+      }
+      invert(y) {
+        var _a;
+        return this._input || (this._input = this._piecewise(this._calculateWholeRange(this._range), (null !== (_a = this._niceDomain) && void 0 !== _a ? _a : this._domain).map(this.transformer), vutils.interpolateNumber)), this._clamp(this.untransformer(this._input(y)));
+      }
+      domain(_, slience) {
+        var _a;
+        if (!_) return (null !== (_a = this._niceDomain) && void 0 !== _a ? _a : this._domain).slice();
+        this._domainValidator = null, this._niceType = null, this._niceDomain = null;
+        const nextDomain = Array.from(_, vutils.toNumber);
+        return this._domain = nextDomain, this.rescale(slience);
+      }
+      range(_, slience) {
+        if (!_) return this._range.slice();
+        const nextRange = Array.from(_);
+        return this._range = nextRange, this.rescale(slience);
+      }
+      rangeRound(_, slience) {
+        const nextRange = Array.from(_);
+        return this._range = nextRange, this._interpolate = vutils.interpolateNumberRound, this.rescale(slience);
+      }
+      rescale(slience) {
+        var _a;
+        if (slience) return this;
+        const domain = null !== (_a = this._niceDomain) && void 0 !== _a ? _a : this._domain,
+          domainLength = domain.length,
+          rangeLength = this._range.length;
+        let n = Math.min(domainLength, rangeLength);
+        if (domainLength && domainLength < rangeLength && this._forceAlign) {
+          const deltaStep = rangeLength - domainLength + 1,
+            last = domain[domainLength - 1],
+            delta = domainLength >= 2 ? (last - domain[domainLength - 2]) / deltaStep : 0;
+          for (let i = 1; i <= deltaStep; i++) domain[domainLength - 2 + i] = last - delta * (deltaStep - i);
+          n = rangeLength;
+        }
+        return this._autoClamp && (this._clamp = vutils.clamper(domain[0], domain[n - 1])), this._piecewise = n > 2 ? polymap : bimap, this._output = this._input = null, this._wholeRange = null, this.generateFishEyeTransform(), this;
+      }
+      clamp(_, f, slience) {
+        return arguments.length ? (f ? (this._autoClamp = !1, this._clamp = f) : (this._autoClamp = !!_, this._clamp = _ ? void 0 : identity), this.rescale(slience)) : this._clamp !== identity;
+      }
+      interpolate(_, slience) {
+        return arguments.length ? (this._interpolate = _, this.rescale(slience)) : this._interpolate;
+      }
+      ticks() {
+        return [];
+      }
+      tickData() {
+        let count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
+        const ticks = this.ticks(count);
+        return (null != ticks ? ticks : []).map((tick, index) => ({
+          index: index,
+          tick: tick,
+          value: (this.scale(tick) - this._range[0]) / (this._range[1] - this._range[0])
+        }));
+      }
+      rangeFactor(_, slience) {
+        return _ ? (super.rangeFactor(_), this._output = this._input = null, this) : super.rangeFactor();
+      }
+      rangeFactorStart(_, slience) {
+        return vutils.isNil(_) ? super.rangeFactorStart() : (super.rangeFactorStart(_), this._output = this._input = null, this);
+      }
+      rangeFactorEnd(_, slience) {
+        return vutils.isNil(_) ? super.rangeFactorEnd() : (super.rangeFactorEnd(_), this._output = this._input = null, this);
+      }
+      forceAlignDomainRange(forceAlign) {
+        return arguments.length ? (this._forceAlign = forceAlign, this) : this._forceAlign;
+      }
+    }
+
+    const e10 = Math.sqrt(50),
+      e5 = Math.sqrt(10),
+      e2 = Math.sqrt(2),
+      niceNumbers = [1, 2, 5, 10];
+    const calculateTicksOfSingleValue = (value, tickCount, noDecimals) => {
+      let step = 1,
+        start = value;
+      const middleIndex = Math.floor((tickCount - 1) / 2),
+        absVal = Math.abs(value);
+      return value >= 0 && value <= Number.MIN_VALUE ? start = 0 : value < 0 && value >= -Number.MIN_VALUE ? start = -(tickCount - 1) : !noDecimals && absVal < 1 ? step = getNickStep(absVal).step : (noDecimals || absVal > 1) && (start = Math.floor(value) - middleIndex * step), step > 0 ? (value > 0 ? start = Math.max(start, 0) : value < 0 && (start = Math.min(start, -(tickCount - 1) * step)), vutils.range(0, tickCount).map(index => start + index * step)) : value > 0 ? calculateTicksByStep(0, -(tickCount - 1) / step, step) : calculateTicksByStep((tickCount - 1) / step, 0, step);
+    };
+    const d3Ticks = vutils.memoize((start, stop, count, options) => {
+      let reverse,
+        n,
+        ticks,
+        step,
+        i = -1;
+      if (count = +count, (start = +start) === (stop = +stop)) return [start];
+      if (Math.abs(start - stop) <= Number.MIN_VALUE && count > 0) return [start];
+      if ((reverse = stop < start) && (n = start, start = stop, stop = n), step = tickIncrement(start, stop, count).step, !isFinite(step)) return [];
+      if (step > 0) {
+        let r0 = Math.round(start / step),
+          r1 = Math.round(stop / step);
+        for (r0 * step < start && ++r0, r1 * step > stop && --r1, ticks = new Array(n = r1 - r0 + 1); ++i < n;) ticks[i] = (r0 + i) * step;
+      } else if (step < 0 && (null == options ? void 0 : options.noDecimals)) {
+        step = 1;
+        const r0 = Math.ceil(start),
+          r1 = Math.floor(stop);
+        if (!(r0 <= r1)) return [];
+        for (ticks = new Array(n = r1 - r0 + 1); ++i < n;) ticks[i] = r0 + i;
+      } else {
+        step = -step;
+        let r0 = Math.round(start * step),
+          r1 = Math.round(stop * step);
+        for (r0 / step < start && ++r0, r1 / step > stop && --r1, ticks = new Array(n = r1 - r0 + 1); ++i < n;) ticks[i] = (r0 + i) / step;
+      }
+      return reverse && ticks.reverse(), ticks;
+    });
+    const calculateTicksByStep = (start, stop, step) => {
+      let n,
+        ticks,
+        i = -1;
+      if (step > 0) {
+        let r0 = Math.floor(start / step),
+          r1 = Math.ceil(stop / step);
+        for ((r0 + 1) * step < start && ++r0, (r1 - 1) * step > stop && --r1, ticks = new Array(n = r1 - r0 + 1); ++i < n;) ticks[i] = (r0 + i) * step;
+      } else {
+        step = -step;
+        let r0 = Math.floor(start * step),
+          r1 = Math.ceil(stop * step);
+        for ((r0 + 1) / step < start && ++r0, (r1 - 1) / step > stop && --r1, ticks = new Array(n = r1 - r0 + 1); ++i < n;) ticks[i] = (r0 + i) / step;
+      }
+      return ticks;
+    };
+    const appendTicksToCount = (ticks, count, step) => {
+      let n;
+      const firstTick = ticks[0],
+        lastTick = ticks[ticks.length - 1],
+        appendCount = count - ticks.length;
+      if (lastTick <= 0) {
+        const headTicks = [];
+        for (n = appendCount; n >= 1; n--) headTicks.push(firstTick - n * step);
+        return headTicks.concat(ticks);
+      }
+      if (firstTick >= 0) {
+        for (n = 1; n <= appendCount; n++) ticks.push(lastTick + n * step);
+        return ticks;
+      }
+      let headTicks = [];
+      const tailTicks = [];
+      for (n = 1; n <= appendCount; n++) n % 2 == 0 ? headTicks = [firstTick - Math.floor(n / 2) * step].concat(headTicks) : tailTicks.push(lastTick + Math.ceil(n / 2) * step);
+      return headTicks.concat(ticks).concat(tailTicks);
+    };
+    const ticks = vutils.memoize((start, stop, count, options) => {
+      let reverse, ticks, n;
+      if (count = +count, (start = +start) === (stop = +stop)) return calculateTicksOfSingleValue(start, count, null == options ? void 0 : options.noDecimals);
+      if (Math.abs(start - stop) <= Number.MIN_VALUE && count > 0) return calculateTicksOfSingleValue(start, count, null == options ? void 0 : options.noDecimals);
+      (reverse = stop < start) && (n = start, start = stop, stop = n);
+      const stepRes = tickIncrement(start, stop, count);
+      let step = stepRes.step;
+      if (!isFinite(step)) return [];
+      if (step > 0) {
+        let cur = 1;
+        const {
+            power: power,
+            gap: gap
+          } = stepRes,
+          delatStep = 10 === gap ? 2 * 10 ** power : 1 * 10 ** power;
+        for (; cur <= 5 && (ticks = calculateTicksByStep(start, stop, step), ticks.length > count + 1) && count > 2;) step += delatStep, cur += 1;
+        count > 2 && ticks.length < count - 1 && (ticks = appendTicksToCount(ticks, count, step));
+      } else (null == options ? void 0 : options.noDecimals) && step < 0 && (step = 1), ticks = calculateTicksByStep(start, stop, step);
+      return reverse && ticks.reverse(), ticks;
+    });
+    const getNickStep = step => {
+      const power = Math.floor(Math.log(step) / Math.LN10),
+        error = step / 10 ** power;
+      let gap = niceNumbers[0];
+      return error >= e10 ? gap = niceNumbers[3] : error >= e5 ? gap = niceNumbers[2] : error >= e2 && (gap = niceNumbers[1]), power >= 0 ? {
+        step: gap * 10 ** power,
+        gap: gap,
+        power: power
+      } : {
+        step: -(10 ** -power) / gap,
+        gap: gap,
+        power: power
+      };
+    };
+    function tickIncrement(start, stop, count) {
+      const step = (stop - start) / Math.max(0, count);
+      return getNickStep(step);
+    }
+    function forceTicks(start, stop, count) {
+      let step;
+      if (count = +count, (start = +start) === (stop = +stop) && count > 0) return [start];
+      if (count <= 0 || 0 === (step = forceTickIncrement(start, stop, count)) || !isFinite(step)) return [];
+      const ticks = new Array(count);
+      for (let i = 0; i < count; i++) ticks[i] = start + i * step;
+      return ticks;
+    }
+    function forceTickIncrement(start, stop, count) {
+      return (stop - start) / Math.max(1, count - 1);
+    }
+    function stepTicks(start, stop, step) {
+      let n,
+        reverse,
+        i = -1;
+      if (step = +step, (reverse = (stop = +stop) < (start = +start)) && (n = start, start = stop, stop = n), !isFinite(step) || stop - start <= step) return [start];
+      const count = Math.floor((stop - start) / step + 1),
+        ticks = new Array(count);
+      for (; ++i < count;) ticks[i] = start + i * step;
+      return reverse && ticks.reverse(), ticks;
+    }
+    function niceLinear(d) {
+      let count = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
+      let prestep,
+        step,
+        i0 = 0,
+        i1 = d.length - 1,
+        start = d[i0],
+        stop = d[i1],
+        maxIter = 10;
+      for (stop < start && (step = start, start = stop, stop = step, step = i0, i0 = i1, i1 = step); maxIter-- > 0;) {
+        if (step = tickIncrement(start, stop, count).step, step === prestep) return d[i0] = start, d[i1] = stop, d;
+        if (step > 0) start = Math.floor(start / step) * step, stop = Math.ceil(stop / step) * step;else {
+          if (!(step < 0)) break;
+          start = Math.ceil(start * step) / step, stop = Math.floor(stop * step) / step;
+        }
+        prestep = step;
+      }
+    }
+    function parseNiceOptions(originalDomain, option) {
+      const hasForceMin = vutils.isNumber(option.forceMin),
+        hasForceMax = vutils.isNumber(option.forceMax);
+      let niceType = null;
+      const niceMinMax = [];
+      let niceDomain = null;
+      const domainValidator = hasForceMin && hasForceMax ? x => x >= option.forceMin && x <= option.forceMax : hasForceMin ? x => x >= option.forceMin : hasForceMax ? x => x <= option.forceMax : null;
+      return hasForceMin ? niceMinMax[0] = option.forceMin : vutils.isNumber(option.min) && option.min <= Math.min(originalDomain[0], originalDomain[originalDomain.length - 1]) && (niceMinMax[0] = option.min), hasForceMax ? niceMinMax[1] = option.forceMax : vutils.isNumber(option.max) && option.max >= Math.max(originalDomain[0], originalDomain[originalDomain.length - 1]) && (niceMinMax[1] = option.max), vutils.isNumber(niceMinMax[0]) && vutils.isNumber(niceMinMax[1]) ? (niceDomain = originalDomain.slice(), niceDomain[0] = niceMinMax[0], niceDomain[niceDomain.length - 1] = niceMinMax[1]) : niceType = vutils.isNumber(niceMinMax[0]) || vutils.isNumber(niceMinMax[1]) ? vutils.isNumber(niceMinMax[0]) ? "max" : "min" : "all", {
+        niceType: niceType,
+        niceDomain: niceDomain,
+        niceMinMax: niceMinMax,
+        domainValidator: domainValidator
+      };
+    }
+    const fixPrecision = (start, stop, value) => Math.abs(stop - start) < 1 ? +value.toFixed(1) : Math.round(+value);
+    vutils.memoize((start, stop, count, base, transformer, untransformer, options) => {
+      let u = start,
+        v = stop;
+      const r = v < u;
+      r && ([u, v] = [v, u]);
+      let k,
+        t,
+        i = transformer(u),
+        j = transformer(v),
+        z = [];
+      if (!(base % 1) && j - i < count) {
+        if (i = Math.floor(i), j = Math.ceil(j), u > 0) {
+          for (; i <= j; ++i) for (k = 1; k < base; ++k) if (t = i < 0 ? k / untransformer(-i) : k * untransformer(i), !(t < u)) {
+            if (t > v) break;
+            z.push(t);
+          }
+        } else for (; i <= j; ++i) for (k = base - 1; k >= 1; --k) if (t = i > 0 ? k / untransformer(-i) : k * untransformer(i), !(t < u)) {
+          if (t > v) break;
+          z.push(t);
+        }
+        2 * z.length < count && (z = ticks(u, v, count));
+      } else z = ticks(i, j, Math.min(j - i, count)).map(untransformer);
+      return z = z.filter(t => 0 !== t), (null == options ? void 0 : options.noDecimals) && (z = Array.from(new Set(z.map(t => Math.floor(t))))), r ? z.reverse() : z;
+    });
+    vutils.memoize((start, stop, count, base, transformer, untransformer) => {
+      const ticksResult = [],
+        ticksMap = {},
+        startExp = transformer(start),
+        stopExp = transformer(stop);
+      let ticksExp = [];
+      if (Number.isInteger(base)) ticksExp = ticks(startExp, stopExp, count);else {
+        const stepExp = (stopExp - startExp) / (count - 1);
+        for (let i = 0; i < count; i++) ticksExp.push(startExp + i * stepExp);
+      }
+      return ticksExp.forEach(tl => {
+        const power = untransformer(tl),
+          nicePower = Number.isInteger(base) ? fixPrecision(start, stop, power) : fixPrecision(start, stop, niceNumber(power)),
+          scopePower = fixPrecision(start, stop, restrictNumber(nicePower, [start, stop]));
+        !ticksMap[scopePower] && !isNaN(scopePower) && ticksExp.length > 1 && (ticksMap[scopePower] = 1, ticksResult.push(scopePower));
+      }), ticksResult;
+    });
+    vutils.memoize((start, stop, count, transformer, untransformer) => forceTicks(transformer(start), transformer(stop), count).map(te => niceNumber(untransformer(te))));
+    vutils.memoize((start, stop, step, transformer, untransformer) => stepTicks(transformer(start), transformer(stop), step).map(te => niceNumber(untransformer(te))));
+
+    class LinearScale extends ContinuousScale {
+      constructor() {
+        super(...arguments), this.type = ScaleEnum.Linear;
+      }
+      clone() {
+        var _a;
+        const scale = new LinearScale();
+        return scale.domain(this._domain, !0).range(this._range, !0).unknown(this._unknown).clamp(this.clamp(), null, !0).interpolate(this._interpolate), this._niceType && (scale._niceType = this._niceType, scale._domainValidator = this._domainValidator, scale._niceDomain = null === (_a = this._niceDomain) || void 0 === _a ? void 0 : _a.slice()), scale;
+      }
+      tickFormat() {
+        return () => {};
+      }
+      d3Ticks() {
+        let count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
+        let options = arguments.length > 1 ? arguments[1] : undefined;
+        const d = this.calculateVisibleDomain(this._range);
+        return d3Ticks(d[0], d[d.length - 1], count, options);
+      }
+      ticks() {
+        let count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
+        let options = arguments.length > 1 ? arguments[1] : undefined;
+        var _a;
+        if (vutils.isFunction(null == options ? void 0 : options.customTicks)) return options.customTicks(this, count);
+        if (vutils.isValid(this._rangeFactorStart) && vutils.isValid(this._rangeFactorEnd) && (this._rangeFactorStart > 0 || this._rangeFactorEnd < 1) && 2 === this._range.length || !this._niceType) return this.d3Ticks(count, options);
+        const curNiceDomain = null !== (_a = this._niceDomain) && void 0 !== _a ? _a : this._domain,
+          originalDomain = this._domain,
+          start = curNiceDomain[0],
+          stop = curNiceDomain[curNiceDomain.length - 1];
+        let ticksResult = ticks(originalDomain[0], originalDomain[originalDomain.length - 1], count, options);
+        if (!ticksResult.length) return ticksResult;
+        if (this._domainValidator) ticksResult = ticksResult.filter(this._domainValidator);else if ((ticksResult[0] !== start || ticksResult[ticksResult.length - 1] !== stop) && this._niceType) {
+          const newNiceDomain = curNiceDomain.slice();
+          if ("all" === this._niceType ? (newNiceDomain[0] = ticksResult[0], newNiceDomain[newNiceDomain.length - 1] = ticksResult[ticksResult.length - 1], this._niceDomain = newNiceDomain, this.rescale()) : "min" === this._niceType && ticksResult[0] !== start ? (newNiceDomain[0] = ticksResult[0], this._niceDomain = newNiceDomain, this.rescale()) : "max" === this._niceType && ticksResult[ticksResult.length - 1] !== stop && (newNiceDomain[newNiceDomain.length - 1] = ticksResult[ticksResult.length - 1], this._niceDomain = newNiceDomain, this.rescale()), "all" !== this._niceType) {
+            const min = Math.min(newNiceDomain[0], newNiceDomain[newNiceDomain.length - 1]),
+              max = Math.max(newNiceDomain[0], newNiceDomain[newNiceDomain.length - 1]);
+            ticksResult = ticksResult.filter(entry => entry >= min && entry <= max);
+          }
+        }
+        return ticksResult;
+      }
+      forceTicks() {
+        let count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
+        const d = this.calculateVisibleDomain(this._range);
+        return forceTicks(d[0], d[d.length - 1], count);
+      }
+      stepTicks(step) {
+        const d = this.calculateVisibleDomain(this._range);
+        return stepTicks(d[0], d[d.length - 1], step);
+      }
+      nice() {
+        let count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
+        let option = arguments.length > 1 ? arguments[1] : undefined;
+        var _a, _b;
+        const originalDomain = this._domain;
+        let niceMinMax = [];
+        if (option) {
+          const res = parseNiceOptions(originalDomain, option);
+          if (niceMinMax = res.niceMinMax, this._domainValidator = res.domainValidator, this._niceType = res.niceType, res.niceDomain) return this._niceDomain = res.niceDomain, this.rescale(), this;
+        } else this._niceType = "all";
+        if (this._niceType) {
+          const niceDomain = niceLinear(originalDomain.slice(), count);
+          "min" === this._niceType ? niceDomain[niceDomain.length - 1] = null !== (_a = niceMinMax[1]) && void 0 !== _a ? _a : niceDomain[niceDomain.length - 1] : "max" === this._niceType && (niceDomain[0] = null !== (_b = niceMinMax[0]) && void 0 !== _b ? _b : niceDomain[0]), this._niceDomain = niceDomain, this.rescale();
+        }
+        return this;
+      }
+      niceMin() {
+        let count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
+        this._niceType = "min";
+        const maxD = this._domain[this._domain.length - 1],
+          niceDomain = niceLinear(this.domain(), count);
+        return niceDomain && (niceDomain[niceDomain.length - 1] = maxD, this._niceDomain = niceDomain, this.rescale()), this;
+      }
+      niceMax() {
+        let count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
+        this._niceType = "max";
+        const minD = this._domain[0],
+          niceDomain = niceLinear(this._domain.slice(), count);
+        return niceDomain && (niceDomain[0] = minD, this._niceDomain = niceDomain, this.rescale()), this;
+      }
+    }
+
+    class SqrtScale extends LinearScale {
+      constructor() {
+        super(sqrt, square), this.type = ScaleEnum.Sqrt;
+      }
+      clone() {
+        return new SqrtScale().domain(this._domain, !0).range(this._range, !0).unknown(this._unknown).clamp(this.clamp(), null, !0).interpolate(this._interpolate);
+      }
+    }
+
+    var IMAGECLOUD_HOOK_EVENT;
+    !function (IMAGECLOUD_HOOK_EVENT) {
+      IMAGECLOUD_HOOK_EVENT.BEFORE_IMAGECLOUD_LAYOUT = "beforeImagecloudLayout", IMAGECLOUD_HOOK_EVENT.AFTER_IMAGECLOUD_LAYOUT = "afterImagecloudLayout", IMAGECLOUD_HOOK_EVENT.AFTER_IMAGECLOUD_DRAW = "afterImagecloudDraw";
+    }(IMAGECLOUD_HOOK_EVENT || (IMAGECLOUD_HOOK_EVENT = {}));
+    function setSize(image, longSideLength) {
+      image.aspectRatio > 1 ? (image.width = longSideLength, image.height = ~~(longSideLength / image.aspectRatio)) : (image.height = longSideLength, image.width = ~~(longSideLength * image.aspectRatio));
+    }
+    function setSizeByShortSide(image, shortSideLength) {
+      image.aspectRatio > 1 ? (image.height = shortSideLength, image.width = ~~(shortSideLength * image.aspectRatio)) : (image.width = shortSideLength, image.height = ~~(shortSideLength / image.aspectRatio));
+    }
+
+    class Layout {
+      constructor(options) {
+        this.progressiveResult = [], this.imageCollageList = [], this.options = options;
+      }
+      preProcess() {
+        const {
+            imageConfig = {},
+            weight: weight
+          } = this.options,
+          {
+            padding = 0
+          } = imageConfig;
+        let images = this.imageCollageList;
+        return images.forEach((img, index) => {
+          !1 === img.valid ? (img.x = -10, img.y = -10, img.width = 0, img.height = 0, img.opacity = 0) : (img.padding = padding, img.weight = vutils.simpleField(weight)(this.data[index]), img.datum = this.data[index]);
+        }), images = images.filter(img => !1 !== img.valid).sort((a, b) => b.weight - a.weight), images;
+      }
+      onImageCollageInputReady(images) {
+        images.forEach((img, i) => {
+          if ("fulfilled" === img.status) {
+            const imageElement = img.value,
+              {
+                width: width,
+                height: height
+              } = imageElement;
+            this.imageCollageList.push(Object.assign({}, this.data[i], {
+              aspectRatio: width / height
+            }));
+          } else this.imageCollageList.push(Object.assign({}, this.data[i], {
+            valid: !1
+          }));
+        });
+      }
+      layout(data) {
+        this.data = data, this.loadSegmentationInput(), this.loadImageCollageInput();
+      }
+      loadSegmentationInput() {
+        var _a, _b, _c, _d, _e, _f;
+        const options = this.options,
+          size = options.size,
+          segmentationInput = {
+            shapeUrl: null !== (_a = options.mask) && void 0 !== _a ? _a : {
+              type: "geometric",
+              shape: "rect"
+            },
+            size: size,
+            ratio: options.ratio || .8,
+            tempCanvas: void 0,
+            boardSize: [0, 0],
+            random: !1,
+            randomGenerator: void 0,
+            blur: null === (_b = options.maskConfig) || void 0 === _b ? void 0 : _b.edgeBlur
+          },
+          tempCanvas = this.options.createCanvas({
+            width: size[0],
+            height: size[1]
+          }),
+          tempCtx = tempCanvas.getContext("2d", {
+            willReadFrequently: !0
+          });
+        tempCtx.textAlign = "center", tempCtx.textBaseline = "middle", segmentationInput.tempCanvas = tempCanvas;
+        const boardW = size[0] + 31 >> 5 << 5;
+        if (segmentationInput.boardSize = [boardW, size[1]], segmentationInput.random ? segmentationInput.randomGenerator = Math.random : segmentationInput.randomGenerator = vutils.fakeRandom(), this.segmentationInput = segmentationInput, vutils.isString(segmentationInput.shapeUrl)) {
+          segmentationInput.isEmptyPixel = generateIsEmptyPixel(void 0, {
+            threshold: null !== (_d = null === (_c = options.maskConfig) || void 0 === _c ? void 0 : _c.threshold) && void 0 !== _d ? _d : 200,
+            invert: null === (_e = options.maskConfig) || void 0 === _e ? void 0 : _e.invert
+          }, this.options.createCanvas);
+          const imagePromise = loadImage(segmentationInput.shapeUrl, this.options.createImage);
+          imagePromise ? (this.isMaskImageFinished = !1, this.isLayoutFinished = !1, imagePromise.then(shapeImage => {
+            var _a, _b;
+            this.isMaskImageFinished = !0;
+            const size = options.size,
+              maskCanvas = this.options.createCanvas({
+                width: size[0],
+                height: size[1],
+                dpr: 1
+              });
+            segmentationInput.maskCanvas = maskCanvas;
+            const ctx = maskCanvas.getContext("2d");
+            (null === (_a = options.maskConfig) || void 0 === _a ? void 0 : _a.removeWhiteBorder) && removeBorder(shapeImage, maskCanvas, segmentationInput.isEmptyPixel);
+            const shapeConfig = scaleAndMiddleShape(shapeImage, size);
+            let transparentMaskCanvas;
+            ctx.clearRect(0, 0, size[0], size[1]), ctx.drawImage(shapeImage, shapeConfig.x, shapeConfig.y, shapeConfig.width, shapeConfig.height), this.segmentationOutput = segmentation(this.segmentationInput), "masked" === (null === (_b = this.options.layoutConfig) || void 0 === _b ? void 0 : _b.placement) && (transparentMaskCanvas = this.generateTransparentMaskCanvas(shapeImage, size)), this.segmentationOutput.transparentMaskCanvas = transparentMaskCanvas, this.options.onUpdateMaskCanvas && this.options.onUpdateMaskCanvas(maskCanvas, transparentMaskCanvas);
+          }).catch(error => {
+            this.isMaskImageFinished = !0;
+          })) : (this.isMaskImageFinished = !0, this.isLayoutFinished = !0);
+        } else if (segmentationInput.shapeUrl && ("text" === segmentationInput.shapeUrl.type || "geometric" === segmentationInput.shapeUrl.type)) {
+          segmentationInput.isEmptyPixel = generateIsEmptyPixel(segmentationInput.shapeUrl.backgroundColor, void 0, this.options.createCanvas), "text" !== segmentationInput.shapeUrl.type && "geometric" !== segmentationInput.shapeUrl.type || segmentationInput.shapeUrl.backgroundColor || (segmentationInput.shapeUrl.backgroundColor = "rgba(255,255,255,255)");
+          const maskCanvas = generateMaskCanvas(segmentationInput.shapeUrl, size[0], size[1], void 0, null === (_f = options.maskConfig) || void 0 === _f ? void 0 : _f.invert, this.options.createCanvas);
+          segmentationInput.maskCanvas = maskCanvas, this.segmentationOutput = segmentation(this.segmentationInput), this.options.onUpdateMaskCanvas && this.options.onUpdateMaskCanvas(maskCanvas, maskCanvas), this.isMaskImageFinished = !0;
+        }
+      }
+      loadImageCollageInput() {
+        const data = this.data,
+          imagesPromise = loadImages(data.map(d => vutils.simpleField(this.options.image)(d)), this.options.createImage);
+        imagesPromise ? imagesPromise.then(images => {
+          this.onImageCollageInputReady(images), this.isImagesFinished = !0;
+        }).catch(error => {
+          this.isImagesFinished = !0, this.isLayoutFinished = !0, vutils.Logger.getInstance().error("image load failed", error);
+        }) : (this.isImagesFinished = !0, this.isLayoutFinished = !0);
+      }
+      canAnimate() {
+        return !0;
+      }
+      unfinished() {
+        return !this.isLayoutFinished;
+      }
+      output() {
+        return this.progressiveResult;
+      }
+      progressiveRun() {
+        if (this.isImagesFinished && this.isMaskImageFinished && !this.isLayoutFinished) {
+          const images = this.preProcess(),
+            layoutResult = this.doLayout(images);
+          this.options && this.options.onLayoutEnd && this.options.onLayoutEnd(layoutResult), this.progressiveResult = this.processOutput(layoutResult), this.isLayoutFinished = !0;
+        }
+      }
+      progressiveOutput() {
+        return this.progressiveResult;
+      }
+      release() {
+        this.segmentationInput = null, this.data = null, this.progressiveResult = null, this.options = null;
+      }
+      calculateImageSize(images) {
+        let imageConfig = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+        let ratio = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : .45;
+        const {
+            imageSizeRange: imageSizeRange,
+            padding = 0
+          } = imageConfig,
+          imageSize = vutils.isNumber(imageConfig.imageSize) ? imageConfig.imageSize : vutils.field(imageConfig.imageSize),
+          size = this.options.size;
+        if (imageSize || imageSizeRange) {
+          if (imageSize && !vutils.isFunction(imageSize)) images.forEach(img => setSize(img, imageSize));else if (imageSizeRange) {
+            const sizeScale = new SqrtScale().domain(vutils.extent(images, d => d.weight)).range(imageSizeRange);
+            images.forEach(img => setSize(img, ~~sizeScale.scale(img.weight)));
+          } else if (imageSize && vutils.isFunction(imageSize) && !imageSizeRange) {
+            const a = .5,
+              [min, max] = vutils.extent(images, d => d.weight),
+              picArea = images.reduce((prev, img) => {
+                const r = img.aspectRatio,
+                  w = (img.weight - min) / (max - min);
+                return prev + (r > 1 ? 1 / r : r) * (a + (1 - a) * w) ** 2;
+              }, 0),
+              x = ~~Math.sqrt(ratio * size[0] * size[1] / picArea),
+              range = [~~(a * x) - 2 * padding < 0 ? 1 : ~~(a * x) - 2 * padding, ~~x - 2 * padding < 0 ? 1 : ~~x - 2 * padding],
+              sizeScale = new SqrtScale().domain(vutils.extent(images, d => d.weight)).range(range);
+            images.forEach(img => setSize(img, ~~sizeScale.scale(img.weight)));
+          } else console.warn("image cloud imageSize error");
+        } else {
+          const imageArea = images.reduce((prev, pic) => {
+            const r = pic.aspectRatio;
+            return prev + (r > 1 ? 1 / r : r);
+          }, 0);
+          let longSideLength = ~~Math.sqrt(ratio * size[0] * size[1] / imageArea);
+          longSideLength = longSideLength - 2 * padding < 0 ? 1 : longSideLength - 2 * padding, images.forEach(img => setSize(img, longSideLength));
+        }
+        return images;
+      }
+      generateTransparentMaskCanvas(shapeImage, size) {
+        var _a;
+        const transparentMaskCanvas = this.options.createCanvas({
+            width: size[0],
+            height: size[1],
+            dpr: 1
+          }),
+          transparentMaskContext = transparentMaskCanvas.getContext("2d");
+        this.segmentationOutput.transparentMaskCanvas = transparentMaskCanvas, (null === (_a = this.options.maskConfig) || void 0 === _a ? void 0 : _a.removeWhiteBorder) && removeBorder(shapeImage, transparentMaskCanvas, this.segmentationInput.isEmptyPixel);
+        const imageData = transparentMaskContext.createImageData(size[0], size[1]),
+          labels = this.segmentationOutput.segmentation.labels;
+        for (let i = 0; i < labels.length; i++) {
+          const color = 0 === labels[i] ? 255 : 0,
+            alpha = 255 * labels[i],
+            pixelIndex = 4 * i;
+          imageData.data[pixelIndex] = color, imageData.data[pixelIndex + 1] = color, imageData.data[pixelIndex + 2] = color, imageData.data[pixelIndex + 3] = alpha;
+        }
+        return transparentMaskContext.clearRect(0, 0, size[0], size[1]), transparentMaskContext.fillStyle = "rgba(255,255,255,0)", transparentMaskContext.fillRect(0, 0, size[0], size[1]), transparentMaskContext.putImageData(imageData, 0, 0), transparentMaskCanvas;
+      }
+      processOutput(images) {
+        var _a;
+        const outputAs = null === (_a = this.options) || void 0 === _a ? void 0 : _a.as;
+        return outputAs && Object.keys(outputAs).forEach(key => {
+          images.forEach(img => {
+            img[outputAs[key]] = img[key], delete img[key];
+          });
+        }), images;
+      }
+    }
+
+    class SpiralLayout extends Layout {
+      preProcess() {
+        const images = super.preProcess(),
+          {
+            imageConfig = {},
+            ratio = .45
+          } = this.options;
+        return this.calculateImageSize(images, imageConfig, ratio);
+      }
+      tryPlaceImage(image, size, spiralType, segmentationOutput, fixedImages) {
+        let dt = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 1;
+        const [width, height] = size,
+          centerX = width / 2,
+          centerY = height / 2,
+          maxR = Math.sqrt(centerX ** 2 + centerY ** 2),
+          spiral = spirals[spiralType](size);
+        let dx,
+          dy,
+          t = -dt;
+        const {
+            segmentation: segmentation
+          } = segmentationOutput,
+          {
+            labels: labels
+          } = segmentation;
+        for (; ([dx, dy] = spiral(t += dt)) && !(Math.min(Math.abs(dx), Math.abs(dy)) >= maxR);) if (dx -= image.width / 2, dy -= image.height / 2, image.visible = !0, image.x = ~~(centerX + dx), image.y = ~~(centerY + dy), image._left = image.x + image.padding, image._top = image.y + image.padding, image._leftWithoutPadding = image.x, image._topWithoutPadding = image.y, fit(image, fixedImages)) {
+          const {
+            x: x,
+            y: y,
+            width: imageWidth,
+            height: imageHeight
+          } = image;
+          let intersect = !1;
+          for (let r = 0; r < imageWidth; r++) {
+            for (let c = 0; c < imageHeight && y + r <= height; c++) {
+              if (x + c > width) continue;
+              if (!!!labels[(y + r) * width + (x + c)]) {
+                intersect = !0;
+                break;
+              }
+            }
+            if (intersect) break;
+          }
+          if (!intersect) {
+            const corners = [{
+              x: image.x,
+              y: image.y
+            }, {
+              x: image.x + image.width,
+              y: image.y
+            }, {
+              x: image.x,
+              y: image.y + image.height
+            }, {
+              x: image.x + image.width,
+              y: image.y + image.height
+            }];
+            let allCornersInShape = !0;
+            for (const corner of corners) if (!labels[corner.y * width + corner.x]) {
+              allCornersInShape = !1;
+              break;
+            }
+            if (!allCornersInShape) continue;
+            return !0;
+          }
+        }
+        return !1;
+      }
+      doLayout(images) {
+        var _a;
+        const {
+            segmentationOutput: segmentationOutput
+          } = this,
+          {
+            layoutConfig = {}
+          } = this.options,
+          size = this.options.size,
+          {
+            spiralType = "archimedean",
+            fillingTimes = 4,
+            minFillingImageSize = 10
+          } = layoutConfig,
+          fixedImages = [],
+          key = Object.keys(images[0]).find(k => k.includes("VGRAMMAR"));
+        for (const image of images) image._widthWithPadding = image.width + 2 * image.padding, image._heightWithPadding = image.height + 2 * image.padding, image.frequency = 1, this.tryPlaceImage(image, size, spiralType, segmentationOutput, fixedImages) && fixedImages.push(image);
+        const minImageWidth = vutils.minInArray(fixedImages, (a, b) => a.width - b.width).width,
+          minImageHeight = vutils.minInArray(fixedImages, (a, b) => a.height - b.height).height,
+          fixedFillingImages = [];
+        for (let i = 0; i < fillingTimes; i++) {
+          const minWidth = .5 * minImageWidth - 1 * i,
+            minHeight = .5 * minImageHeight - 1 * i;
+          for (const image of images) {
+            const fillingImage = Object.assign({}, image, {
+                visible: !0
+              }),
+              imageSize = Math.max(minFillingImageSize, fillingImage.aspectRatio > 1 ? minWidth : minHeight);
+            setSize(fillingImage, imageSize), fillingImage._widthWithPadding = fillingImage.width + 2 * fillingImage.padding, fillingImage._heightWithPadding = fillingImage.height + 2 * fillingImage.padding, this.tryPlaceImage(fillingImage, size, spiralType, segmentationOutput, [...fixedFillingImages, ...fixedImages], .5) && (image._tempFrequency = (null !== (_a = image._tempFrequency) && void 0 !== _a ? _a : image.frequency) + 1, fillingImage.frequency = image._tempFrequency, fillingImage.distance = Math.sqrt(Math.pow(fillingImage.x - size[0] / 2, 2) + Math.pow(fillingImage.y - size[1] / 2, 2)), fillingImage[key] = `${fillingImage[key]}_${fillingImage.frequency}`, fixedFillingImages.push(fillingImage));
+          }
+        }
+        return [...fixedImages, ...fixedFillingImages].filter(image => image.visible);
+      }
+    }
+    function fit(image, fixedImages) {
+      for (let i = 0; i < fixedImages.length; i++) if (isOverlap$1(image, fixedImages[i])) return !1;
+      return !0;
+    }
+    function isOverlap$1(a, b) {
+      return !(a._leftWithoutPadding + a._widthWithPadding < b._leftWithoutPadding || a._topWithoutPadding + a._heightWithPadding < b._topWithoutPadding || a._leftWithoutPadding > b._leftWithoutPadding + b._widthWithPadding || a._topWithoutPadding > b._topWithoutPadding + b._heightWithPadding);
+    }
+
+    function rectGridLayout(options) {
+      const {
+          imageConfig = {},
+          size: size,
+          ratio = .1,
+          layoutConfig = {}
+        } = options,
+        {
+          padding = 0,
+          imageSize: imageSize
+        } = imageConfig,
+        [width, height] = size;
+      let shortSideLength;
+      shortSideLength = imageSize || Math.min(width, height) * ratio - 2 * padding, shortSideLength < 0 && (shortSideLength = 1);
+      const {
+        rectAspectRatio = 1
+      } = layoutConfig;
+      let cellWidth, cellHeight;
+      rectAspectRatio > 1 ? (cellWidth = shortSideLength, cellHeight = shortSideLength / rectAspectRatio) : (cellHeight = shortSideLength, cellWidth = shortSideLength * rectAspectRatio);
+      const rows = Math.ceil(height / (cellHeight + padding)),
+        cols = Math.ceil(width / (cellWidth + padding)),
+        center_x = width / 2,
+        center_y = height / 2,
+        cellInfo = new Array(cols * rows);
+      for (let r = 0; r < rows; r++) for (let c = 0; c < cols; c++) {
+        const cellCenterX = c * (cellWidth + padding) + cellWidth / 2,
+          cellCenterY = r * (cellHeight + padding) + cellHeight / 2;
+        cellInfo[r * cols + c] = {
+          centerX: cellCenterX,
+          centerY: cellCenterY,
+          x: cellCenterX - cellWidth / 2,
+          y: cellCenterY - cellHeight / 2,
+          row: r,
+          col: c,
+          distance: Math.sqrt(Math.pow(cellCenterX - center_x, 2) + Math.pow(cellCenterY - center_y, 2))
+        };
+      }
+      return {
+        context: Object.assign({}, layoutConfig, {
+          cellWidth: cellWidth,
+          cellHeight: cellHeight,
+          cellInfo: cellInfo,
+          cellCount: cellInfo.length,
+          cellType: "rect",
+          cellPixelCount: cellWidth * cellHeight,
+          eachPixel: (cell, callback) => {
+            const {
+              x: x,
+              y: y
+            } = cell;
+            for (let r = 0; r < cellWidth; r++) for (let c = 0; c < cellHeight && y + r <= height; c++) x + c > width || callback((~~y + r) * width + (~~x + c));
+          },
+          clipPath: `M${-cellWidth / 2} ${-cellHeight / 2} L${cellWidth / 2} ${-cellHeight / 2} L${cellWidth / 2} ${cellHeight / 2} L${-cellWidth / 2} ${cellHeight / 2} Z`
+        }),
+        imageLength: shortSideLength
+      };
+    }
+
+    function circleGridLayout(options) {
+      const {
+          imageConfig = {},
+          size: size,
+          ratio = .1,
+          layoutConfig = {}
+        } = options,
+        {
+          padding = 0,
+          imageSize = 0
+        } = imageConfig,
+        [width, height] = size,
+        center_x = width / 2,
+        center_y = height / 2;
+      let circleRadius = 0;
+      circleRadius = imageSize ? imageSize / 2 : Math.min(width, height) * ratio / 2, circleRadius - padding <= 0 && (circleRadius = padding + 1);
+      const circleDiameter = 2 * circleRadius,
+        rowHeight = Math.sqrt(3) / 2 * circleDiameter + padding,
+        cellInfo = [];
+      let index = 0;
+      for (let r = 0; r * rowHeight - circleRadius < height; r++) {
+        const y = r * rowHeight,
+          offsetX = r % 2 == 0 ? 0 : circleRadius;
+        for (let c = -1; c * (circleDiameter + padding) + offsetX - circleRadius < width; c++) {
+          const x = c * (circleDiameter + padding) + offsetX + circleRadius;
+          cellInfo[index++] = {
+            centerX: x,
+            centerY: y,
+            x: x - circleRadius,
+            y: y - circleRadius,
+            row: r,
+            col: c,
+            distance: Math.sqrt(Math.pow(x - center_x, 2) + Math.pow(y - center_y, 2))
+          };
+        }
+      }
+      let cellPixelCount = 0;
+      const rSquared = circleRadius * circleRadius;
+      for (let r = 0; r < circleDiameter; r++) for (let c = 0; c < circleDiameter; c++) {
+        const dx = r - circleRadius,
+          dy = c - circleRadius;
+        dx * dx + dy * dy <= rSquared && cellPixelCount++;
+      }
+      return {
+        context: Object.assign({}, layoutConfig, {
+          cellWidth: circleDiameter,
+          cellHeight: circleDiameter,
+          cellInfo: cellInfo,
+          cellCount: cellInfo.length,
+          cellType: "circle",
+          cellPixelCount: cellPixelCount,
+          eachPixel: (cell, callback) => {
+            const {
+              x: x,
+              y: y
+            } = cell;
+            for (let r = 0; r < circleDiameter; r++) for (let c = 0; c < circleDiameter; c++) {
+              if (r + x < 0 || r + x > width || c + y > height || c + y < 0) continue;
+              const dx = r - circleRadius,
+                dy = c - circleRadius;
+              dx * dx + dy * dy <= rSquared && callback((~~y + r) * width + (~~x + c));
+            }
+          },
+          clipPath: "M 1 0 A 1 1 0 1 0 -1 0 A 1 1 0 1 0 1 0 Z"
+        }),
+        imageLength: circleDiameter
+      };
+    }
+
+    function hexagonalGridLayout(options) {
+      const {
+          imageConfig = {},
+          size: size,
+          ratio = .1,
+          layoutConfig = {}
+        } = options,
+        {
+          padding = 0,
+          imageSize: imageSize
+        } = imageConfig,
+        [width, height] = size,
+        center_x = width / 2,
+        center_y = height / 2;
+      let radius;
+      radius = imageSize ? imageSize / 2 : Math.min(width, height) * ratio / 2, radius - padding <= 0 && (radius = padding + 1);
+      const points = [],
+        step = 2 * Math.PI / 6;
+      for (let i = 0; i < 6; i++) {
+        const angle = step * i;
+        points.push({
+          x: (radius - padding / 2) * Math.cos(angle),
+          y: (radius - padding / 2) * Math.sin(angle)
+        });
+      }
+      const diameter = 2 * radius,
+        edgeLength = Math.sin(Math.PI / 6) * diameter,
+        cellHeight = Math.sqrt(3) * edgeLength,
+        gridSpaceX = diameter - edgeLength / 2,
+        gridSpaceY = Math.cos(Math.PI / 6) * diameter,
+        gridOffsetY = gridSpaceY / 2,
+        rows = Math.floor(height / cellHeight),
+        cols = Math.floor(width / edgeLength),
+        cellInfo = [];
+      for (let r = -1; r <= rows + 1; r++) for (let c = -1; c <= cols; c++) {
+        const centerX = c * gridSpaceX,
+          centerY = r * gridSpaceY + (c % 2 ? gridOffsetY : 0);
+        cellInfo.push({
+          centerX: centerX,
+          centerY: centerY,
+          x: centerX - edgeLength,
+          y: centerY - edgeLength,
+          row: r,
+          col: c,
+          distance: Math.sqrt(Math.pow(centerX - center_x, 2) + Math.pow(centerY - center_y, 2))
+        });
+      }
+      let cellPixelCount = 0;
+      const pixelMap = [];
+      for (let r = 0; r <= cellHeight; r++) for (let c = 0; c <= 2 * edgeLength; c++) {
+        const px = c - edgeLength,
+          py = r - cellHeight / 2,
+          q2x = Math.abs(px),
+          q2y = Math.abs(py);
+        q2x <= edgeLength && q2y <= cellHeight / 2 && 2 * q2y + q2x * Math.sqrt(3) <= cellHeight ? (cellPixelCount++, pixelMap.push(!0)) : pixelMap.push(!1);
+      }
+      return {
+        context: Object.assign({}, layoutConfig, {
+          cellHexSideLength: edgeLength,
+          cellHexPoints: points,
+          cellHeight: cellHeight,
+          cellWidth: 2 * edgeLength,
+          cellInfo: cellInfo,
+          cellCount: cellInfo.length,
+          cellType: "hexagonal",
+          cellPixelCount: cellPixelCount,
+          eachPixel: (cell, callback) => {
+            const {
+              x: x,
+              y: y
+            } = cell;
+            let index = 0;
+            for (let r = 0; r <= cellHeight; r++) for (let c = 0; c <= 2 * edgeLength; c++) pixelMap[index++] && callback((~~y + r) * width + (~~x + c));
+          },
+          clipPath: "M 1 0 L 0.5 0.866 L -0.5 0.866 L -1 0 L -0.5 -0.866 L 0.5 -0.866 Z"
+        }),
+        imageLength: diameter - padding
+      };
+    }
+
+    const cellLayout = {
+      rect: rectGridLayout,
+      circle: circleGridLayout,
+      hexagonal: hexagonalGridLayout
+    };
+    class GridLayout extends Layout {
+      preProcess() {
+        var _a;
+        const images = super.preProcess(),
+          {
+            layoutConfig = {}
+          } = this.options,
+          {
+            cellType = "rect"
+          } = layoutConfig,
+          layoutResult = (null !== (_a = cellLayout[cellType]) && void 0 !== _a ? _a : cellLayout.rect)(this.options),
+          {
+            context: context,
+            imageLength: shortSideLength
+          } = layoutResult;
+        return images.forEach(img => setSizeByShortSide(img, shortSideLength)), context.cellInfo.sort((cellA, cellB) => cellA.distance - cellB.distance), this.layoutContext = context, images;
+      }
+      doLayout(images) {
+        const {
+          cellWidth: cellWidth,
+          cellHeight: cellHeight,
+          cellInfo: cellInfo,
+          cellCount: cellCount,
+          clipPath: clipPath,
+          eachPixel: eachPixel,
+          cellPixelCount: cellPixelCount
+        } = this.layoutContext;
+        if (0 === images.length || 0 === cellCount || 0 === cellWidth || 0 === cellHeight || 0 === cellInfo.length) return void (this.isLayoutFinished = !0);
+        const {
+            segmentationOutput: segmentationOutput
+          } = this,
+          {
+            layoutConfig = {}
+          } = this.options,
+          {
+            placement = "default"
+          } = layoutConfig;
+        if ("edge" === placement || "default" === placement) {
+          const {
+              segmentation: segmentation
+            } = segmentationOutput,
+            {
+              labels: labels
+            } = segmentation;
+          cellInfo.forEach(cell => {
+            let intersectPixelCount = 0;
+            eachPixel(cell, index => {
+              labels[index] && intersectPixelCount++;
+            }), cell.intersectPixels = intersectPixelCount;
+          });
+        }
+        const imageCount = images.length,
+          imageVisible = cell => {
+            const {
+              intersectPixels: intersectPixels
+            } = cell;
+            return "default" === placement ? intersectPixels >= .45 * cellPixelCount : "edge" !== placement || intersectPixels > .1 * cellPixelCount && intersectPixels < cellPixelCount;
+          };
+        for (let i = 0; i < imageCount; i++) {
+          const image = images[i],
+            cell = cellInfo[i];
+          cell && (image.x = cell.centerX - image.width / 2, image.y = cell.centerY - image.height / 2, image.clipConfig = {
+            shape: clipPath
+          }, image.frequency = 1, image.visible = imageVisible(cell), image.cell = vutils.pickWithout(cell, ["image"]), image.distance = cell.distance, cell.image = image);
+        }
+        const key = Object.keys(images[0]).find(k => k.includes("VGRAMMAR"));
+        if (imageCount < cellCount) for (let i = imageCount; i < cellCount; i++) {
+          const image = images[i - imageCount],
+            cell = cellInfo[i];
+          if (cell) {
+            const repeatImage = Object.assign({}, image);
+            repeatImage.x = cell.centerX - repeatImage.width / 2, repeatImage.y = cell.centerY - repeatImage.height / 2, repeatImage.frequency += 1, repeatImage[key] = `${repeatImage[key]}_${repeatImage.frequency}`, repeatImage.visible = imageVisible(cell), repeatImage.distance = cell.distance, repeatImage.cell = vutils.pickWithout(cell, ["image"]), cell.image = repeatImage, images.push(repeatImage);
+          }
+        }
+        return images.filter(img => img.visible);
+      }
+    }
+
+    class StackLayout extends Layout {
+      preProcess() {
+        const images = super.preProcess(),
+          {
+            imageConfig = {},
+            ratio = .1
+          } = this.options,
+          cellLayoutMethod = rectGridLayout;
+        return this.layoutContext = cellLayoutMethod(Object.assign({}, this.options, {
+          imageConfig: {
+            imageSize: null
+          }
+        })).context, this.layoutContext.cellInfo.sort((cellA, cellB) => cellA.distance - cellB.distance), this.calculateImageSize(images, imageConfig, ratio);
+      }
+      doLayout(images) {
+        const {
+            segmentationOutput: segmentationOutput
+          } = this,
+          {
+            cellWidth: cellWidth,
+            cellHeight: cellHeight,
+            cellInfo: cellInfo,
+            cellCount: cellCount,
+            eachPixel: eachPixel,
+            cellPixelCount: cellPixelCount
+          } = this.layoutContext;
+        if (0 === images.length || 0 === cellCount || 0 === cellWidth || 0 === cellHeight || 0 === cellInfo.length) return void (this.isLayoutFinished = !0);
+        const {
+            layoutConfig = {}
+          } = this.options,
+          size = this.options.size,
+          {
+            placement = "default",
+            maxAngle = Math.PI / 180 * 45
+          } = layoutConfig;
+        if ("edge" === placement || "default" === placement) {
+          const {
+              segmentation: segmentation
+            } = segmentationOutput,
+            {
+              labels: labels
+            } = segmentation;
+          cellInfo.forEach(cell => {
+            let intersectPixelCount = 0;
+            eachPixel(cell, index => {
+              labels[index] && intersectPixelCount++;
+            }), cell.intersectPixels = intersectPixelCount;
+          });
+        }
+        const imageCount = images.length,
+          maxDistance = Math.sqrt(Math.pow(size[0], 2) + Math.pow(size[1], 2)),
+          imageVisible = cell => {
+            const {
+              intersectPixels: intersectPixels
+            } = cell;
+            return "default" === placement ? intersectPixels > .5 * cellPixelCount : "edge" !== placement || intersectPixels > .1 * cellPixelCount && intersectPixels < cellPixelCount;
+          };
+        for (let i = 0; i < imageCount; i++) {
+          const image = images[i],
+            cell = cellInfo[i];
+          cell && (image.x = cell.centerX - image.width / 2, image.y = cell.centerY - image.height / 2, image.visible = imageVisible(cell), image.cell = `${cell.row}_${cell.col}`, image.angle = Math.random() * (2 * maxAngle) - maxAngle, image.anchor = [image.x + image.width / 2, image.y + image.height / 2], image.zIndex = maxDistance - cell.distance, image.distance = cell.distance, image.frequency = 1, cell.image = image);
+        }
+        const key = Object.keys(images[0]).find(k => k.includes("VGRAMMAR"));
+        if (imageCount < cellCount) for (let i = imageCount; i < cellCount; i++) {
+          const image = images[i - imageCount],
+            cell = cellInfo[i];
+          if (cell) {
+            const repeatImage = Object.assign({}, image);
+            repeatImage.x = cell.centerX - repeatImage.width / 2, repeatImage.y = cell.centerY - repeatImage.height / 2, repeatImage.anchor = [repeatImage.x + repeatImage.width / 2, repeatImage.y + repeatImage.height / 2], repeatImage.angle = Math.random() * (2 * maxAngle) - maxAngle, repeatImage.frequency += 1, repeatImage[key] = `${repeatImage[key]}_${repeatImage.frequency}`, repeatImage.visible = imageVisible(cell), repeatImage.cell = `${cell.row}_${cell.col}`, repeatImage.distance = cell.distance, repeatImage.zIndex = maxDistance - cell.distance, cell.image = repeatImage, images.push(repeatImage);
+          }
+        }
+        return images.filter(img => img.visible);
+      }
+    }
+
+    const transform = (options, upstreamData, parameters) => {
+      var _a, _b;
+      const size = vutils.isFunction(options.size) ? options.size() : options.size;
+      if (options.size = size, !size || vutils.isNil(size[0]) || vutils.isNil(size[1]) || size[0] <= 0 || size[1] <= 0) {
+        return vutils.Logger.getInstance().info("Wordcloud size dimensions must be greater than 0"), [];
+      }
+      if (options.size = [Math.ceil(size[0]), Math.ceil(size[1])], options.image || vutils.Logger.getInstance().error("Imagecloud: image source must be specified."), options.onBeforeLayout && options.onBeforeLayout(), !upstreamData || 0 === upstreamData.length) return [];
+      let layoutConstructor;
+      switch (null !== (_b = null === (_a = options.layoutConfig) || void 0 === _a ? void 0 : _a.layoutMode) && void 0 !== _b ? _b : "spiral") {
+        case "grid":
+          layoutConstructor = GridLayout;
+          break;
+        case "stack":
+          layoutConstructor = StackLayout;
+          break;
+        default:
+          layoutConstructor = SpiralLayout;
+      }
+      const layout = new layoutConstructor(options);
+      return layout.layout(upstreamData), layout.unfinished() ? {
+        progressive: layout
+      } : layout.output();
+    };
+
+    class AxialRotateAnimation extends ACustomAnimate {
+        constructor(from, to, duration, easing, params) {
+            var _a;
+            super(from, to, duration, easing, params);
+            this._rotations = (_a = params === null || params === void 0 ? void 0 : params.rotation) !== null && _a !== void 0 ? _a : 1;
+        }
+        onBind() {
+            this._scaleX = this.target.attribute.scaleX;
+            if (!vutils.isValidNumber(this._rotations)) {
+                this.valid = false;
+            }
+        }
+        onUpdate(end, ratio, out) {
+            var _a;
+            if (this.valid === false) {
+                return;
+            }
+            if (end) {
+                out.scaleX = this._scaleX;
+                return;
+            }
+            const currentAngle = this._rotations * 360 * ratio;
+            const currentAngleInRadians = (currentAngle * Math.PI) / 180;
+            const scaleX = Math.abs(Math.cos(currentAngleInRadians)) * ((_a = this._scaleX) !== null && _a !== void 0 ? _a : 1);
+            this.target.attribute.scaleX = scaleX;
+            this.target.addUpdatePositionTag();
+            this.target.addUpdateShapeAndBoundsTag();
+        }
+    }
+    function imageCloudPresetAnimation(params, preset) {
+        switch (preset) {
+            case 'axialRotate':
+                return [
+                    {
+                        custom: AxialRotateAnimation,
+                        customParameters: {
+                            rotation: 1
+                        },
+                        duration: vchart.DEFAULT_ANIMATION_CONFIG.appear.duration
+                    },
+                    {
+                        channel: {
+                            y: {
+                                from: (datum, element) => {
+                                    return params.height() + element.getFinalAttribute().y;
+                                }
+                            },
+                            fillOpacity: {
+                                from: 0,
+                                to: 1
+                            }
+                        },
+                        easing: 'sineInOut'
+                    }
+                ];
+            case 'growIn':
+                return {
+                    channel: {
+                        scaleX: {
+                            from: 0,
+                            to: 1
+                        },
+                        scaleY: {
+                            from: 0,
+                            to: 1
+                        },
+                        x: { from: () => params.center().x },
+                        y: { from: () => params.center().y }
+                    },
+                    duration: vchart.DEFAULT_ANIMATION_CONFIG.appear.duration
+                };
+            case 'scaleIn':
+                return { type: 'scaleIn', duration: vchart.DEFAULT_ANIMATION_CONFIG.appear.duration };
+            case 'fadeIn':
+            default:
+                return { type: 'fadeIn', easing: 'linear', duration: vchart.DEFAULT_ANIMATION_CONFIG.appear.duration };
+        }
+    }
+    const registerImageCloudAnimation = () => {
+        vchart.Factory.registerAnimation('imageCloud', (params, preset) => ({
+            appear: imageCloudPresetAnimation(params, preset),
+            enter: imageCloudPresetAnimation(params, preset),
+            exit: { type: 'fadeOut' },
+            disappear: { type: 'fadeOut' }
+        }));
+    };
+
+    class ImageCloudTooltipHelper extends vchart.BaseSeriesTooltipHelper {
+        constructor() {
+            super(...arguments);
+            this.markTooltipKeyCallback = (datum) => {
+                var _a, _b;
+                return (_b = (_a = this.series) === null || _a === void 0 ? void 0 : _a.getMarkData(datum)) === null || _b === void 0 ? void 0 : _b[this.series.getDimensionField()[0]];
+            };
+            this.markTooltipValueCallback = (datum) => {
+                var _a, _b;
+                const { measureFields } = this._seriesCacheInfo;
+                const data = (_a = this.series) === null || _a === void 0 ? void 0 : _a.getMarkData(datum);
+                if (measureFields[0] && data) {
+                    return (_b = data[measureFields[0]]) !== null && _b !== void 0 ? _b : datum.value;
+                }
+                return undefined;
+            };
+            this.dimensionTooltipTitleCallback = (datum) => {
+                var _a;
+                const { dimensionFields } = this._seriesCacheInfo;
+                const data = (_a = this.series) === null || _a === void 0 ? void 0 : _a.getMarkData(datum);
+                if (dimensionFields[0] && data) {
+                    return data[dimensionFields[0]];
+                }
+                return undefined;
+            };
+        }
+        get defaultShapeType() {
+            return 'square';
+        }
+    }
+
+    class ImageCloudSeries extends vchart.BaseSeries {
+        constructor() {
+            super(...arguments);
+            this.type = IMAGE_CLOUD_SERIES_TYPE;
+        }
+        setValueField(field) {
+            if (vutils.isValid(field)) {
+                this._valueField = field;
+            }
+        }
+        setAttrFromSpec() {
+            super.setAttrFromSpec();
+            this._nameField = this._spec.nameField;
+            this._valueField = this._spec.valueField;
+            this._urlField = this._spec.urlField;
+        }
+        initMark() {
+            var _a;
+            if ((_a = this._spec.imageMask) === null || _a === void 0 ? void 0 : _a.visible) {
+                this._maskMark = this._createMark(imageCloudSeriesMark.imageMask, {
+                    dataView: false,
+                    skipBeforeLayouted: true
+                });
+            }
+            this._imageMark = this._createMark(imageCloudSeriesMark.image, {
+                key: datum => `${datum[vchart.DEFAULT_DATA_KEY]}-${datum.frequency}`,
+                isSeriesMark: true,
+                skipBeforeLayouted: true
+            });
+        }
+        initMarkStyle() {
+            this._initImageMarkStyle();
+            this._initMaskMarkStyle();
+        }
+        _initImageMarkStyle() {
+            var _a, _b;
+            if (!this._imageMark) {
+                return;
+            }
+            this._imageMark.setTransform([
+                Object.assign({ type: 'imagecloud' }, this._imageCloudTransformOption())
+            ]);
+            this.setMarkStyle(this._imageMark, {
+                x: (datum) => datum.x,
+                y: (datum) => datum.y,
+                width: (datum) => datum.width,
+                height: (datum) => datum.height,
+                visible: (datum) => datum.visible,
+                angle: (datum) => datum.angle,
+                clipConfig: (datum) => datum.clipConfig,
+                image: (datum) => datum[this._urlField],
+                scaleCenter: ['50%', '50%']
+            }, 'normal', vchart.AttributeLevel.Series);
+            const isMasked = ((_a = this._spec.layoutConfig) === null || _a === void 0 ? void 0 : _a.placement) === 'masked';
+            if (isMasked) {
+                this.setMarkStyle(this._imageMark, {
+                    globalCompositeOperation: 'source-atop'
+                }, 'normal', vchart.AttributeLevel.Series);
+                this.setMarkStyle(this._rootMark, {
+                    width: () => this._region.getLayoutRect().width,
+                    height: () => this._region.getLayoutRect().height,
+                    globalCompositeOperation: 'destination-in',
+                    clip: true,
+                    drawMode: 1
+                }, 'normal', vchart.AttributeLevel.Series);
+            }
+            if (((_b = this._spec.layoutConfig) === null || _b === void 0 ? void 0 : _b.layoutMode) === 'stack') {
+                this.setMarkStyle(this._imageMark, {
+                    stroke: 'white',
+                    lineWidth: 2,
+                    shadowBlur: 6,
+                    shadowColor: 'grey'
+                }, 'normal', vchart.AttributeLevel.Series);
+            }
+        }
+        isFillingImage(datum) {
+            return datum._frequency > 1;
+        }
+        _initMaskMarkStyle() {
+            if (!this._maskMark) {
+                return;
+            }
+            this._maskMark.setMarkConfig({ interactive: false });
+            this.setMarkStyle(this._maskMark, {
+                width: () => {
+                    return this._region.getLayoutRect().width;
+                },
+                height: () => {
+                    return this._region.getLayoutRect().height;
+                }
+            }, 'normal', vchart.AttributeLevel.Series);
+        }
+        initTooltip() {
+            this._tooltipHelper = new ImageCloudTooltipHelper(this);
+            this._imageMark && this._tooltipHelper.activeTriggerSet.mark.add(this._imageMark);
+        }
+        _imageCloudTransformOption() {
+            var _a;
+            return {
+                size: () => {
+                    const { width, height } = this._region.getLayoutRect();
+                    return [width, height];
+                },
+                image: { field: this._urlField },
+                weight: { field: this._valueField },
+                imageConfig: {
+                    imageSize: this._spec.imageSize,
+                    imageSizeRange: this._spec.imageSizeRange,
+                    padding: (_a = this._spec.image) === null || _a === void 0 ? void 0 : _a.padding
+                },
+                ratio: this._spec.ratio,
+                mask: this._spec.maskShape,
+                maskConfig: this._spec.imageMask,
+                layoutConfig: this._spec.layoutConfig,
+                createCanvas: vchart.vglobal.createCanvas.bind(vchart.vglobal),
+                createImage,
+                onUpdateMaskCanvas: ((inputImage, maskImage) => {
+                    var _a;
+                    if (inputImage && this._maskMark) {
+                        this._maskMark
+                            .getProduct()
+                            .getChildren()
+                            .forEach((element) => {
+                            element.setAttribute('background', inputImage);
+                        });
+                    }
+                    if (maskImage && ((_a = this._spec.layoutConfig) === null || _a === void 0 ? void 0 : _a.placement) === 'masked') {
+                        this._rootMark.getProduct().setAttribute('background', maskImage);
+                    }
+                }).bind(this)
+            };
+        }
+        _buildMarkAttributeContext() {
+            super._buildMarkAttributeContext();
+            this._markAttributeContext.isFillingImage = this.isFillingImage.bind(this);
+        }
+        initAnimation() {
+            [this._imageMark].forEach(mark => {
+                var _a, _b;
+                if (mark) {
+                    const appearPreset = (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.animationAppear) === null || _b === void 0 ? void 0 : _b.preset;
+                    const params = {
+                        center: () => {
+                            const { width, height } = this._region.getLayoutRect();
+                            return { x: width / 2, y: height / 2 };
+                        },
+                        height: () => {
+                            const { height } = this._region.getLayoutRect();
+                            return height;
+                        }
+                    };
+                    mark.setAnimationConfig(vchart.animationConfig(vchart.Factory.getAnimationInKey('imageCloud')(params, appearPreset), vchart.userAnimationConfig("image", this._spec, this._markAttributeContext)));
+                }
+            });
+        }
+        getDimensionField() {
+            var _a;
+            return [(_a = this._nameField) !== null && _a !== void 0 ? _a : this._spec.urlField];
+        }
+        getMeasureField() {
+            return [this._valueField];
+        }
+        getStatisticFields() {
+            const fields = [];
+            fields.push({ key: this._nameField, operations: ['values'] });
+            fields.push({ key: this._valueField, operations: ['max', 'min'] });
+            return fields;
+        }
+        getActiveMarks() {
+            return [this._imageMark];
+        }
+        getMarkData(datum) {
+            var _a;
+            return (_a = datum === null || datum === void 0 ? void 0 : datum.datum) !== null && _a !== void 0 ? _a : datum;
+        }
+        getGroupFields() {
+            return [];
+        }
+        dataToPosition(data) {
+            return null;
+        }
+        dataToPositionX(data) {
+            var _a;
+            return (_a = this.dataToPosition(data)) === null || _a === void 0 ? void 0 : _a.x;
+        }
+        dataToPositionY(data) {
+            var _a;
+            return (_a = this.dataToPosition(data)) === null || _a === void 0 ? void 0 : _a.y;
+        }
+        valueToPosition(value1, value2) {
+            return null;
+        }
+        getStackGroupFields() {
+            return [];
+        }
+        getStackValueField() {
+            return '';
+        }
+    }
+    ImageCloudSeries.type = IMAGE_CLOUD_SERIES_TYPE;
+    ImageCloudSeries.mark = imageCloudSeriesMark;
+    const registerImageCloudSeries = () => {
+        vchart.registerImageMark();
+        registerImageCloudAnimation();
+        vchart.Factory.registerSeries(ImageCloudSeries.type, ImageCloudSeries);
+        vchart.Factory.registerGrammarTransform('imagecloud', {
+            transform: transform
+        });
+    };
+
+    class ImageCloudChart extends vchart.BaseChart {
+        constructor() {
+            super(...arguments);
+            this.transformerConstructor = ImageCloudChart.transformerConstructor;
+            this.type = IMAGE_CLOUD_CHART_TYPE;
+            this.seriesType = IMAGE_CLOUD_SERIES_TYPE;
+        }
+    }
+    ImageCloudChart.type = IMAGE_CLOUD_CHART_TYPE;
+    ImageCloudChart.seriesType = IMAGE_CLOUD_SERIES_TYPE;
+    ImageCloudChart.transformerConstructor = ImageCloudChartSpecTransformer;
+    const registerImageCloudChart = () => {
+        registerImageCloudSeries();
+        vchart.Factory.registerChart(ImageCloudChart.type, ImageCloudChart);
+    };
+
     const GROUP_ATTRIBUTES = ["x", "y", "dx", "dy", "scaleX", "scaleY", "angle", "anchor", "postMatrix", "visible", "clip", "pickable", "childrenPickable", "zIndex", "cursor"];
     class AbstractComponent extends Group {
       constructor(attributes, options) {
@@ -20053,7 +23096,11 @@
     exports.Funnel3dSeries = Funnel3dSeries;
     exports.Funnel3dSeriesSpecTransformer = Funnel3dSeriesSpecTransformer;
     exports.Histogram3dChart = Histogram3dChart;
+    exports.ImageCloudChart = ImageCloudChart;
     exports.MapLabelComponent = MapLabelComponent;
+    exports.PictogramChart = PictogramChart;
+    exports.PictogramChartSpecTransformer = PictogramChartSpecTransformer;
+    exports.PictogramSeries = PictogramSeries;
     exports.Pie3dChart = Pie3dChart;
     exports.Pie3dChartSpecTransformer = Pie3dChartSpecTransformer;
     exports.Pie3dSeries = Pie3dSeries;
@@ -20076,7 +23123,9 @@
     exports.appendBarLinkConfig = appendBarLinkConfig;
     exports.appendSeriesBreakConfig = appendSeriesBreakConfig;
     exports.appendSeriesLabelConfig = appendSeriesLabelConfig;
+    exports.clearSVGSource = clearSVGSource;
     exports.getBarLinkConfig = getBarLinkConfig;
+    exports.getSVGSource = getSVGSource;
     exports.getSeriesBreakConfig = getSeriesBreakConfig;
     exports.getSeriesLabelConfig = getSeriesLabelConfig;
     exports.register3DPlugin = register3DPlugin;
@@ -20088,13 +23137,17 @@
     exports.registerFunnel3dChart = registerFunnel3dChart;
     exports.registerFunnel3dSeries = registerFunnel3dSeries;
     exports.registerHistogram3dChart = registerHistogram3dChart;
+    exports.registerImageCloudChart = registerImageCloudChart;
     exports.registerMapLabel = registerMapLabel;
+    exports.registerPictogramChart = registerPictogramChart;
+    exports.registerPictogramSeries = registerPictogramSeries;
     exports.registerPie3dChart = registerPie3dChart;
     exports.registerPie3dSeries = registerPie3dSeries;
     exports.registerRangeColumn3dChart = registerRangeColumn3dChart;
     exports.registerRangeColumn3dSeries = registerRangeColumn3dSeries;
     exports.registerRankingBarChart = registerRankingBarChart;
     exports.registerRankingList = registerRankingList;
+    exports.registerSVGSource = registerSVGSource;
     exports.registerSequenceScatterKDE = registerSequenceScatterKDE;
     exports.registerSequenceScatterLink = registerSequenceScatterLink;
     exports.registerSequenceScatterPixel = registerSequenceScatterPixel;
@@ -20104,5 +23157,7 @@
     exports.registerWordCloud3dSeries = registerWordCloud3dSeries;
     exports.registerWordCloudShape3dChart = registerWordCloudShape3dChart;
     exports.registerWordCloudShape3dSeries = registerWordCloudShape3dSeries;
+    exports.svgSourceMap = svgSourceMap;
+    exports.unregisterSVGSource = unregisterSVGSource;
 
 }));