@visactor/vstory 0.0.18 → 0.0.19

package/dist/index.js

@@ -4382,6 +4382,11 @@
   var lowerCamelCaseToMiddle = function lowerCamelCaseToMiddle(str) {
     return str.replace(/([A-Z])/g, "-$1").toLowerCase();
   };
+  function toCamelCase(str) {
+    return str.replace(/-([a-z])/g, function (_, letter) {
+      return letter.toUpperCase();
+    });
+  }
 
   /**
    * @module helpers
@@ -35186,6 +35191,180 @@
     }), data;
   };
 
+  var 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"].concat(validTextAttributes, validCircleAttributes, validEllipseAttributes, validLineAttributes),
+    validInheritAttributes = ["visible", "fill", "stroke", "stroke-width", "fill-opacity", "stroke-opacity"].concat(validTextAttributes),
+    numberReg = /-?([0-9]*\.)?[0-9]+([eE]-?[0-9]+)?/g;
+  function splitNumberSequence(rawStr) {
+    return rawStr.match(numberReg) || [];
+  }
+  var svgParser = function svgParser(data) {
+    var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var parser = option.customDOMParser;
+    if (parser || (null === window || void 0 === window ? void 0 : window.DOMParser) && (parser = function parser(svg) {
+      return new DOMParser().parseFromString(svg, "text/xml");
+    }), !parser) throw new Error("No Available DOMParser!");
+    var svg = parser(data);
+    var 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;
+  };
+  var idx = 0;
+  function parseSvgNode(svg) {
+    var opt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var elements = [],
+      root = parseNode(svg, null);
+    var width = parseFloat(svg.getAttribute("width") || opt.width),
+      height = parseFloat(svg.getAttribute("height") || opt.height);
+    !isValidNumber$1(width) && (width = null), !isValidNumber$1(height) && (height = null);
+    var viewBox = svg.getAttribute("viewBox");
+    var viewBoxRect;
+    if (viewBox) {
+      var 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)) {
+        var 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 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) {
+    var inheritedAttrs;
+    var parent = parsedElement.parent,
+      attributes = parsedElement.attributes,
+      parse = function parse(parent) {
+        return parent ? validInheritAttributes.reduce(function (acc, attrName) {
+          var camelAttrName = toCamelCase(attrName);
+          return isValid$3(parent[camelAttrName]) && (acc[camelAttrName] = parent[camelAttrName]), acc;
+        }, {}) : {};
+      };
+    return parent ? (parent._inheritStyle || (parent._inheritStyle = parse(parent.attributes)), inheritedAttrs = merge$2({}, parent._inheritStyle, parse(attributes))) : inheritedAttrs = parse(attributes), inheritedAttrs;
+  }
+  function parseAttributes(el) {
+    var _a, _b, _c;
+    var attrs = {},
+      attributes = null !== (_a = el.attributes) && void 0 !== _a ? _a : {},
+      style = null !== (_b = el.style) && void 0 !== _b ? _b : {};
+    for (var i = 0; i < validAttributes.length; i++) {
+      var attrName = validAttributes[i],
+        attrValue = isValid$3(style[attrName]) && "" !== style[attrName] ? style[attrName] : null === (_c = attributes[attrName]) || void 0 === _c ? void 0 : _c.value;
+      isValid$3(attrValue) && (attrs[toCamelCase(attrName)] = isNaN(+attrValue) ? attrValue : parseFloat(attrValue));
+    }
+    return "none" === style.display && (attrs.visible = !1), ["fontSize", "strokeWidth", "width", "height"].forEach(function (attr) {
+      var attrValue = attrs[attr];
+      isString$3(attrs[attr]) && (attrs[attr] = parseFloat(attrValue));
+    }), attrs;
+  }
+  function parseNode(node, parent) {
+    var _a, _b, _c, _d, _e;
+    var 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;
+    var 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 : "".concat(tagName, "-").concat(idx++),
+      transform: parseTransform$1(node)
+    };
+    return parsed._inheritStyle = parseInheritAttributes(parsed), parent && !isValid$3(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;
+    var tagName = null === (_a = node.tagName) || void 0 === _a ? void 0 : _a.toLowerCase();
+    if (!tagName && "group" !== parent.graphicType) return null;
+    var 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;
+    var 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 : "".concat(tagName, "-").concat(idx++),
+      transform: parseTransform$1(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 : "".concat(tagName, "-").concat(idx++),
+      value: value
+    }, parsed._inheritStyle = parseInheritAttributes(parsed), isValid$3(parsed.name) || (parsed._nameFromParent = null !== (_f = parent.name) && void 0 !== _f ? _f : parent._nameFromParent), nodeAsGroup ? parent._textGroupStyle ? parsed._textGroupStyle = merge$2({}, parent._textGroupStyle, parseAttributes(node)) : parsed._textGroupStyle = parseAttributes(node) : parsed.attributes = parsed._inheritStyle, parsed;
+  }
+  function parseTransform$1(node) {
+    var _a, _b;
+    var transforms = null === (_a = node.transform) || void 0 === _a ? void 0 : _a.baseVal;
+    if (!transforms) return null;
+    var matrix = null === (_b = transforms.consolidate()) || void 0 === _b ? void 0 : _b.matrix;
+    if (!matrix) return null;
+    var a = matrix.a,
+      b = matrix.b,
+      c = matrix.c,
+      d = matrix.d,
+      e = matrix.e,
+      f = matrix.f;
+    return new Matrix(a, b, c, d, e, f);
+  }
+  function traverse(node, parsedParent) {
+    var result = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+    var _a;
+    if (!node) return;
+    var parseResult;
+    "svg" !== node.nodeName && (parseResult = parseNode(node, parsedParent)), parseResult && result.push(parseResult);
+    var 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;
+  }
+
   var idIndex = 0;
   var maxId = 1e8;
   function getUUID() {
@@ -55585,7 +55764,7 @@
     graphicItem && (graphicItem[BridgeElementKey] = null, graphicItem.release(), graphicItem.parent && graphicItem.parent.removeChild(graphicItem));
   };
 
-  var commonAttributes = ["fillOpacity"];
+  var commonAttributes$1 = ["fillOpacity"];
   var transformCommonAttribute = function transformCommonAttribute(graphicAttributes, changedKey, nextAttrs) {
     var _a;
     return "fillOpacity" === changedKey ? (graphicAttributes.fillOpacity = null !== (_a = nextAttrs.fillOpacity) && void 0 !== _a ? _a : 1, ["fillOpacity"]) : [];
@@ -55666,10 +55845,10 @@
             } else transform.transform(graphicAttributes, nextAttrs, null);
             tags[index] = !0, isTransformed = !0;
           }
-        }), isTransformed || (commonAttributes.includes(key) ? transformCommonAttribute(graphicAttributes, key, nextAttrs) : graphicAttributes[key] = nextAttrs[key]);
+        }), isTransformed || (commonAttributes$1.includes(key) ? transformCommonAttribute(graphicAttributes, key, nextAttrs) : graphicAttributes[key] = nextAttrs[key]);
       });
     } else changedKeys.forEach(function (key) {
-      commonAttributes.includes(key) ? transformCommonAttribute(graphicAttributes, key, nextAttrs) : graphicAttributes[key] = nextAttrs[key];
+      commonAttributes$1.includes(key) ? transformCommonAttribute(graphicAttributes, key, nextAttrs) : graphicAttributes[key] = nextAttrs[key];
     });
     return graphicAttributes;
   };
@@ -56876,6 +57055,84 @@
     filterType: "groupKey"
   };
 
+  var ElementHighlightByGraphicName = /*#__PURE__*/function (_ElementHighlight) {
+    function ElementHighlightByGraphicName(view, options) {
+      var _this;
+      _classCallCheck(this, ElementHighlightByGraphicName);
+      _this = _callSuper(this, ElementHighlightByGraphicName, [view, options]), _this.type = ElementHighlightByGraphicName.type, _this.handleStart = function (e) {
+        if (e && e.element && _this._marks.includes(e.element.mark)) {
+          if (_this.options.shouldStart ? _this.options.shouldStart(e) : _this._filterByName(e)) {
+            var itemKey = _this._parseTargetKey(e, e.element);
+            _this.start(itemKey);
+          }
+        }
+      }, _this.handleReset = function (e) {
+        e && e.element && _this._marks.includes(e.element.mark) && _this.reset();
+      }, _this.options = Object.assign({}, ElementHighlightByGraphicName.defaultOptions, options), _this._marks = view.getMarksBySelector(_this.options.selector);
+      return _this;
+    }
+    _inherits(ElementHighlightByGraphicName, _ElementHighlight);
+    return _createClass(ElementHighlightByGraphicName, [{
+      key: "_filterByName",
+      value: function _filterByName(e) {
+        var _a;
+        return !!(null === (_a = null == e ? void 0 : e.target) || void 0 === _a ? void 0 : _a.name);
+      }
+    }, {
+      key: "_parseTargetKey",
+      value: function _parseTargetKey(e, element) {
+        return e.target.name;
+      }
+    }, {
+      key: "start",
+      value: function start(itemKey) {
+        var _this2 = this;
+        isNil$1(itemKey) || this._marks.forEach(function (mark) {
+          mark.elements.forEach(function (el) {
+            var _a;
+            (null === (_a = el.getGraphicItem()) || void 0 === _a ? void 0 : _a.name) === itemKey ? el.updateStates(_defineProperty(_defineProperty({}, _this2.options.blurState, !1), _this2.options.highlightState, !0)) : el.updateStates(_defineProperty(_defineProperty({}, _this2.options.blurState, !0), _this2.options.highlightState, !1));
+          });
+        });
+      }
+    }, {
+      key: "reset",
+      value: function reset() {
+        var states = [this.options.blurState, this.options.highlightState];
+        this._marks.forEach(function (mark) {
+          mark.elements.forEach(function (el) {
+            el.removeState(states);
+          });
+        });
+      }
+    }]);
+  }(ElementHighlight);
+  ElementHighlightByGraphicName.type = "element-highlight-by-graphic-name";
+
+  var ElementSelectByGraphicName = /*#__PURE__*/function (_ElementSelect) {
+    function ElementSelectByGraphicName() {
+      var _this;
+      _classCallCheck(this, ElementSelectByGraphicName);
+      _this = _callSuper(this, ElementSelectByGraphicName, arguments), _this.type = ElementSelectByGraphicName.type;
+      return _this;
+    }
+    _inherits(ElementSelectByGraphicName, _ElementSelect);
+    return _createClass(ElementSelectByGraphicName, [{
+      key: "start",
+      value: function start(element) {
+        var _this2 = this;
+        var _a;
+        var name = null === (_a = element.getGraphicItem()) || void 0 === _a ? void 0 : _a.name;
+        name && this._marks.forEach(function (mark) {
+          mark.elements.forEach(function (el) {
+            var _a;
+            (null === (_a = el.getGraphicItem()) || void 0 === _a ? void 0 : _a.name) === name && _superPropGet(ElementSelectByGraphicName, "start", _this2, 3)([el]);
+          });
+        });
+      }
+    }]);
+  }(ElementSelect);
+  ElementSelectByGraphicName.type = "element-select-by-graphic-name";
+
   function getBandWidthOfScale(scale) {
     if (scale) return scale.type === ScaleEnum.Band ? scale.bandwidth() : scale.type === ScaleEnum.Point ? scale.step() : void 0;
   }
@@ -56973,6 +57230,12 @@
   var registerElementHighlightByName = function registerElementHighlightByName() {
     Factory.registerInteraction(ElementHighlightByName.type, ElementHighlightByName);
   };
+  var registerElementHighlightByGraphicName = function registerElementHighlightByGraphicName() {
+    Factory.registerInteraction(ElementHighlightByGraphicName.type, ElementHighlightByGraphicName);
+  };
+  var registerElementSelectByGraphicName = function registerElementSelectByGraphicName() {
+    Factory.registerInteraction(ElementSelectByGraphicName.type, ElementSelectByGraphicName);
+  };
 
   var parseOptionValue = function parseOptionValue(value, params) {
     return isGrammar(value) ? value.output() : value && isObject$4(value) ? isFunction$3(value.callback) ? function (datum) {
@@ -70051,6 +70314,20 @@
   }(BasePluginService);
 
   var svgSourceMap = new Map();
+  var svgDataSet;
+  function initSVGDataSet() {
+    svgDataSet || (svgDataSet = new DataSet(), registerDataSetInstanceParser(svgDataSet, "svg", svgParser));
+  }
+  function registerSVGSource(key, source) {
+    svgSourceMap.has(key) && warn("svg source key of '".concat(key, "' already exists, will be overwritten.")), initSVGDataSet();
+    var dataView = new DataView(svgDataSet);
+    dataView.parse(source, {
+      type: "svg"
+    }), svgSourceMap.set(key, dataView);
+  }
+  function unregisterSVGSource(key) {
+    svgSourceMap.has(key) ? svgSourceMap["delete"](key) : warn("map type of '".concat(key, "' does not exists."));
+  }
   function getSVGSource(type) {
     return svgSourceMap.get(type);
   }
@@ -109428,6 +109705,701 @@
     registerMosaicSeries(), Factory$1.registerChart(MosaicChart.type, MosaicChart);
   };
 
+  var PictogramChartSpecTransformer = /*#__PURE__*/function (_BaseChartSpecTransfo) {
+    function PictogramChartSpecTransformer() {
+      _classCallCheck(this, PictogramChartSpecTransformer);
+      return _callSuper(this, PictogramChartSpecTransformer, arguments);
+    }
+    _inherits(PictogramChartSpecTransformer, _BaseChartSpecTransfo);
+    return _createClass(PictogramChartSpecTransformer, [{
+      key: "_isValidSeries",
+      value: function _isValidSeries(type) {
+        return type === SeriesTypeEnum.pictogram;
+      }
+    }, {
+      key: "_getDefaultSeriesSpec",
+      value: function _getDefaultSeriesSpec(spec) {
+        return Object.assign(Object.assign({}, _superPropGet(PictogramChartSpecTransformer, "_getDefaultSeriesSpec", this, 3)([spec])), {
+          type: spec.type,
+          nameField: spec.nameField,
+          valueField: spec.valueField,
+          seriesField: spec.seriesField,
+          svg: spec.svg,
+          pictogram: spec.pictogram,
+          defaultFillColor: spec.defaultFillColor
+        });
+      }
+    }, {
+      key: "transformSpec",
+      value: function transformSpec(spec) {
+        var _this = this;
+        _superPropGet(PictogramChartSpecTransformer, "transformSpec", this, 3)([spec]), spec.region.forEach(function (r) {
+          r.coordinate = "geo";
+        });
+        var defaultSeriesSpec = this._getDefaultSeriesSpec(spec);
+        spec.series && 0 !== spec.series.length ? spec.series.forEach(function (s) {
+          _this._isValidSeries(s.type) && Object.keys(defaultSeriesSpec).forEach(function (k) {
+            k in s || (s[k] = defaultSeriesSpec[k]);
+          });
+        }) : spec.series = [defaultSeriesSpec];
+      }
+    }]);
+  }(BaseChartSpecTransformer);
+
+  var PictogramSeriesMark = Object.assign(Object.assign({}, baseSeriesMark), {
+    pictogram: {
+      name: "pictogram",
+      type: "group"
+    }
+  });
+
+  var PictogramSeriesSpecTransformer = /*#__PURE__*/function (_BaseSeriesSpecTransf) {
+    function PictogramSeriesSpecTransformer() {
+      _classCallCheck(this, PictogramSeriesSpecTransformer);
+      return _callSuper(this, PictogramSeriesSpecTransformer, arguments);
+    }
+    _inherits(PictogramSeriesSpecTransformer, _BaseSeriesSpecTransf);
+    return _createClass(PictogramSeriesSpecTransformer, [{
+      key: "_getDefaultSpecFromChart",
+      value: function _getDefaultSpecFromChart(chartSpec) {
+        var _a, _b, _c;
+        var spec = null !== (_a = _superPropGet(PictogramSeriesSpecTransformer, "_getDefaultSpecFromChart", this, 3)([chartSpec])) && void 0 !== _a ? _a : {},
+          svg = chartSpec.svg,
+          elements = null === (_c = null === (_b = svgSourceMap.get(svg)) || void 0 === _b ? void 0 : _b.latestData) || void 0 === _c ? void 0 : _c.elements;
+        if (elements && elements.length) {
+          elements.map(function (e) {
+            return e.name;
+          }).filter(function (n) {
+            return isValid$3(n);
+          }).forEach(function (name) {
+            chartSpec[name] && (spec[name] = chartSpec[name]);
+          });
+        }
+        return spec;
+      }
+    }]);
+  }(BaseSeriesSpecTransformer);
+
+  var PictogramSeriesTooltipHelper = /*#__PURE__*/function (_BaseSeriesTooltipHel) {
+    function PictogramSeriesTooltipHelper() {
+      var _this;
+      _classCallCheck(this, PictogramSeriesTooltipHelper);
+      _this = _callSuper(this, PictogramSeriesTooltipHelper, arguments), _this.dimensionTooltipTitleCallback = function (datum) {
+        var _a;
+        var series = _this.series;
+        return null !== (_a = _this._getDimensionData(datum)) && void 0 !== _a ? _a : series.getDatumName(datum);
+      }, _this.markTooltipValueCallback = function (datum, params) {
+        var measureFields = _this._seriesCacheInfo.measureFields;
+        if (measureFields[0] && datum.data) return datum.data[measureFields[0]];
+      }, _this.markTooltipKeyCallback = function (datum) {
+        var _a;
+        return null === (_a = datum.data) || void 0 === _a ? void 0 : _a[_this.series.getDimensionField()[0]];
+      };
+      return _this;
+    }
+    _inherits(PictogramSeriesTooltipHelper, _BaseSeriesTooltipHel);
+    return _createClass(PictogramSeriesTooltipHelper);
+  }(BaseSeriesTooltipHelper);
+
+  function isValidStrokeOrFill(attr) {
+    var _a;
+    return isValid$3(attr) && "none" !== attr && !(null === (_a = attr.includes) || void 0 === _a ? void 0 : _a.call(attr, "url"));
+  }
+  var getLineWidth = function getLineWidth(attributes) {
+      var strokeWidth = parseFloat(attributes.strokeWidth);
+      if (!isNaN(strokeWidth)) return strokeWidth;
+      var stroke = attributes.stroke;
+      return stroke && isValidStrokeOrFill(stroke) ? 1 : 0;
+    },
+    getFill = function getFill(attributes, defaultFill) {
+      var _a;
+      var fill = null !== (_a = attributes.fill) && void 0 !== _a ? _a : defaultFill;
+      return fill && isValidStrokeOrFill(fill) ? fill : void 0;
+    },
+    getStroke = function getStroke(attributes, defaultStroke) {
+      var _a;
+      var stroke = null !== (_a = attributes.stroke) && void 0 !== _a ? _a : defaultStroke;
+      return !(!stroke || !isValidStrokeOrFill(stroke)) && stroke;
+    },
+    commonAttributes = function commonAttributes(attributes) {
+      return Object.assign(Object.assign({}, attributes), {
+        x: parseFloat(attributes.x) || void 0,
+        y: parseFloat(attributes.y) || void 0,
+        fillStrokeOrder: !1,
+        fill: getFill(attributes),
+        lineWidth: getLineWidth(attributes),
+        stroke: getStroke(attributes)
+      });
+    };
+  var graphicAttributeTransform = {
+    group: function group(attributes) {
+      var common = commonAttributes(attributes);
+      return Object.assign(Object.assign({}, common), {
+        visibleAll: !1 !== common.visible
+      });
+    },
+    rule: function 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: function rect(attributes) {
+      return Object.assign(Object.assign({}, commonAttributes(attributes)), {
+        fill: getFill(attributes, "#000"),
+        width: parseFloat(attributes.width),
+        height: parseFloat(attributes.height)
+      });
+    },
+    polygon: function polygon(attributes) {
+      return Object.assign(Object.assign({}, commonAttributes(attributes)), {
+        fill: getFill(attributes, "#000"),
+        points: attributes.points.trim().split(/\s+/).map(function (pair) {
+          var _pair$split$map = pair.split(",").map(Number),
+            _pair$split$map2 = _slicedToArray(_pair$split$map, 2),
+            x = _pair$split$map2[0],
+            y = _pair$split$map2[1];
+          return {
+            x: x,
+            y: y
+          };
+        })
+      });
+    },
+    line: function line(attributes) {
+      return Object.assign(Object.assign({}, commonAttributes(attributes)), {
+        points: attributes.points.trim().split(/\s+/).map(function (pair) {
+          var _pair$split$map3 = pair.split(",").map(Number),
+            _pair$split$map4 = _slicedToArray(_pair$split$map3, 2),
+            x = _pair$split$map4[0],
+            y = _pair$split$map4[1];
+          return {
+            x: x,
+            y: y
+          };
+        })
+      });
+    },
+    path: function path(attributes) {
+      return Object.assign(Object.assign({}, commonAttributes(attributes)), {
+        path: attributes.d,
+        fillStrokeOrder: !1
+      });
+    },
+    arc: function arc(attributes) {
+      var _a;
+      return Object.assign(Object.assign({}, commonAttributes(attributes)), {
+        outerRadius: null !== (_a = attributes.r) && void 0 !== _a ? _a : attributes.ry,
+        x: parseFloat(attributes.cx),
+        y: parseFloat(attributes.cy),
+        startAngle: 0,
+        endAngle: 2 * Math.PI,
+        scaleX: parseFloat(attributes.rx) / parseFloat(attributes.ry) || 1,
+        fill: getFill(attributes, "#000")
+      });
+    },
+    text: function text(attributes, value) {
+      var _a, _b;
+      return Object.assign(Object.assign({}, commonAttributes(attributes)), {
+        text: value,
+        textAlign: null !== (_a = attributes.textAlign) && void 0 !== _a ? _a : "left",
+        textBaseLine: null !== (_b = attributes.textAnchor) && void 0 !== _b ? _b : "middle",
+        anchor: [0, 0],
+        fill: getFill(attributes, "#000")
+      });
+    }
+  };
+  var pictogram = function pictogram(data) {
+    var _a, _b;
+    if (!data || !data[0]) return {};
+    var elements = data[0].latestData.elements;
+    if (elements && elements.length) {
+      elements.forEach(function (el, index) {
+        var _a;
+        el[DEFAULT_DATA_INDEX] = index, el._uniqueId = "".concat(el.id, "-").concat(index), el.data = void 0;
+        var type = el.graphicType,
+          transform = el.transform;
+        var finalAttributes = {
+          visible: "hidden" !== el.attributes.visibility && "collapse" !== el.attributes.visibility
+        };
+        "text" === el.graphicType ? merge$2(finalAttributes, el._inheritStyle, null === (_a = el.parent) || void 0 === _a ? void 0 : _a._textGroupStyle, el.attributes) : "group" !== el.graphicType && merge$2(finalAttributes, el._inheritStyle, el.attributes), graphicAttributeTransform[type] ? el._finalAttributes = graphicAttributeTransform[type](finalAttributes, el.value) : el._finalAttributes = finalAttributes, transform && (el._finalAttributes.postMatrix = Object.assign({}, transform));
+      });
+      var texts = elements.filter(function (el) {
+        return "text" === el.tagName;
+      });
+      var _loop = function _loop() {
+        var textId = texts[i]._uniqueId,
+          children = elements.filter(function (el) {
+            var result = !1,
+              parent = el.parent;
+            for (; parent;) {
+              if (parent._uniqueId === textId) {
+                result = !0;
+                break;
+              }
+              parent = parent.parent;
+            }
+            return result;
+          });
+        if (children && children.length) {
+          var startX = null !== (_b = null === (_a = texts[i]._textGroupStyle) || void 0 === _a ? void 0 : _a.x) && void 0 !== _b ? _b : 0,
+            curX = startX;
+          for (var j = 0; j < children.length; j++) {
+            var currentChild = children[j];
+            if ("group" === currentChild.graphicType) curX = startX;else if (currentChild.value && void 0 === currentChild.parent._textGroupStyle.x) {
+              var lastText = children.slice(0, j).reverse().find(function (c) {
+                return "text" === c.graphicType && c.value;
+              });
+              if (lastText) {
+                curX += measureText(lastText.value, lastText._finalAttributes).width;
+              }
+              currentChild._finalAttributes.x = curX;
+            }
+          }
+        }
+      };
+      for (var i = 0; i < texts.length; i++) {
+        _loop();
+      }
+    }
+    return elements;
+  };
+
+  var PictogramSeries = /*#__PURE__*/function (_GeoSeries) {
+    function PictogramSeries() {
+      var _this;
+      _classCallCheck(this, PictogramSeries);
+      _this = _callSuper(this, PictogramSeries, arguments), _this.type = SeriesTypeEnum.pictogram;
+      return _this;
+    }
+    _inherits(PictogramSeries, _GeoSeries);
+    return _createClass(PictogramSeries, [{
+      key: "setAttrFromSpec",
+      value: function setAttrFromSpec() {
+        var _a, _b, _c;
+        _superPropGet(PictogramSeries, "setAttrFromSpec", this, 3)([]), this.svg = this._spec.svg, this._nameField = this._spec.nameField, this._valueField = this._spec.valueField, this.svg || null === (_a = this._option) || void 0 === _a || _a.onError("svg source is not specified !"), this._parsedSvgResult = null === (_b = getSVGSource(this.svg)) || void 0 === _b ? void 0 : _b.latestData, this._parsedSvgResult || null === (_c = this._option) || void 0 === _c || _c.onError("'".concat(this.svg, "' is not registered !"));
+      }
+    }, {
+      key: "getDatumCenter",
+      value: function getDatumCenter(datum) {
+        return [Number.NaN, Number.NaN];
+      }
+    }, {
+      key: "getDatumName",
+      value: function getDatumName(datum) {
+        return datum.name || datum._nameFromParent;
+      }
+    }, {
+      key: "getMarksWithoutRoot",
+      value: function getMarksWithoutRoot() {
+        var _this2 = this;
+        return this.getMarks().filter(function (m) {
+          return m.name && !m.name.includes("seriesGroup") && !m.name.includes("root") && m !== _this2._pictogramMark;
+        });
+      }
+    }, {
+      key: "_buildMarkAttributeContext",
+      value: function _buildMarkAttributeContext() {
+        _superPropGet(PictogramSeries, "_buildMarkAttributeContext", this, 3)([]), this._markAttributeContext.getTransformMatrix = this.getRootMatrix.bind(this), this._markAttributeContext.coordToPosition = this.coordToPosition.bind(this), this._markAttributeContext.dataToPosition = this.dataToPosition.bind(this);
+      }
+    }, {
+      key: "_defaultHoverConfig",
+      value: function _defaultHoverConfig(selector, finalHoverSpec) {
+        return {
+          seriesId: this.id,
+          regionId: this._region.id,
+          selector: selector,
+          type: "element-highlight-by-graphic-name",
+          trigger: finalHoverSpec.trigger,
+          triggerOff: "pointerout",
+          blurState: STATE_VALUE_ENUM.STATE_HOVER_REVERSE,
+          highlightState: STATE_VALUE_ENUM.STATE_HOVER
+        };
+      }
+    }, {
+      key: "_defaultSelectConfig",
+      value: function _defaultSelectConfig(selector, finalSelectSpec) {
+        var isMultiple = "multiple" === finalSelectSpec.mode,
+          triggerOff = isValid$3(finalSelectSpec.triggerOff) ? finalSelectSpec.triggerOff : isMultiple ? ["empty", "self"] : ["empty", finalSelectSpec.trigger];
+        return {
+          type: "element-select-by-graphic-name",
+          seriesId: this.id,
+          regionId: this._region.id,
+          selector: selector,
+          trigger: finalSelectSpec.trigger,
+          triggerOff: triggerOff,
+          reverseState: STATE_VALUE_ENUM.STATE_SELECTED_REVERSE,
+          state: STATE_VALUE_ENUM.STATE_SELECTED,
+          isMultiple: isMultiple
+        };
+      }
+    }, {
+      key: "initMark",
+      value: function initMark() {
+        var _this3 = this;
+        var _a;
+        if (this._pictogramMark = this._createMark(PictogramSeries.mark.pictogram, {
+          groupKey: this.getDimensionField()[0],
+          isSeriesMark: !0,
+          skipBeforeLayouted: !0,
+          dataView: this._mapViewData.getDataView(),
+          dataProductId: this._mapViewData.getProductId()
+        }, {
+          morph: shouldMarkDoMorph(this._spec, PictogramSeries.mark.pictogram.name)
+        }), this._pictogramMark) {
+          this._pictogramMark.setUserId(PictogramSeries.mark.pictogram.name);
+          var _iterator = _createForOfIteratorHelper(this._mapViewData.getDataView().latestData),
+            _step;
+          try {
+            var _loop = function _loop() {
+              var element = _step.value;
+              var type = element.graphicType,
+                name = element.name,
+                parent = element.parent,
+                id = element.id,
+                _nameFromParent = element._nameFromParent,
+                _uniqueId = element._uniqueId,
+                mark = _this3._createMark({
+                  type: type,
+                  name: null != name ? name : _nameFromParent
+                }, {
+                  groupKey: _uniqueId,
+                  isSeriesMark: !1,
+                  skipBeforeLayouted: !0,
+                  dataView: _this3._mapViewData.getDataView(),
+                  dataProductId: _this3._mapViewData.getProductId(),
+                  parent: null !== (_a = _this3._pictogramMark.getMarkInUserId(null == parent ? void 0 : parent._uniqueId)) && void 0 !== _a ? _a : _this3._pictogramMark
+                }, {
+                  morph: shouldMarkDoMorph(_this3._spec, PictogramSeries.mark.pictogram.name)
+                });
+              mark && (mark.setUserId(_uniqueId), "group" !== mark.type && mark.setMarkConfig({
+                graphicName: mark.name
+              }), mark.setTransform([{
+                type: "filter",
+                callback: function callback(datum) {
+                  return datum._uniqueId === _uniqueId;
+                }
+              }]));
+            };
+            for (_iterator.s(); !(_step = _iterator.n()).done;) {
+              _loop();
+            }
+          } catch (err) {
+            _iterator.e(err);
+          } finally {
+            _iterator.f();
+          }
+          this._initLabelMark();
+        }
+      }
+    }, {
+      key: "_initLabelMark",
+      value: function _initLabelMark() {
+        if (!0 !== this._spec.label.visible) return;
+        var labelMark = this._createMark(PictogramSeries.mark.label, {
+          isSeriesMark: !1,
+          parent: this._pictogramMark,
+          groupKey: "_uniqueId",
+          skipBeforeLayouted: !0,
+          depend: this.getMarksWithoutRoot()
+        });
+        labelMark && (this._labelMark = labelMark, this._labelMark.setDataView(this._mapViewData.getDataView()));
+      }
+    }, {
+      key: "initLabelMarkStyle",
+      value: function initLabelMarkStyle() {
+        var _this4 = this;
+        this._labelMark && this.setMarkStyle(this._labelMark, {
+          visible: function visible(d) {
+            return !!_this4._validElement(d);
+          },
+          x: function x(d) {
+            var _a;
+            return null === (_a = _this4.dataToPosition(d, !0)) || void 0 === _a ? void 0 : _a.x;
+          },
+          y: function y(d) {
+            var _a;
+            return null === (_a = _this4.dataToPosition(d, !0)) || void 0 === _a ? void 0 : _a.y;
+          },
+          text: function text(d) {
+            return d[_this4.nameField];
+          },
+          textAlign: "center",
+          textBaseline: "middle"
+        }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Series);
+      }
+    }, {
+      key: "initMarkStyle",
+      value: function initMarkStyle() {
+        var _this5 = this;
+        var _this$_parsedSvgResul = this._parsedSvgResult,
+          root = _this$_parsedSvgResul.root,
+          viewBoxRect = _this$_parsedSvgResul.viewBoxRect,
+          elements = this._mapViewData.getDataView().latestData;
+        root && (this.setMarkStyle(this._pictogramMark, graphicAttributeTransform.group(root.attributes), "normal", AttributeLevel.Built_In), root.transform && this.setMarkStyle(this._pictogramMark, {
+          postMatrix: function postMatrix() {
+            return root.transform;
+          }
+        }, "normal", AttributeLevel.Built_In), viewBoxRect && this._pictogramMark.setMarkConfig({
+          clip: !0,
+          clipPath: [createRect(Object.assign(Object.assign({}, viewBoxRect), {
+            fill: !0
+          }))]
+        }));
+        var _iterator2 = _createForOfIteratorHelper(elements),
+          _step2;
+        try {
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            var element = _step2.value;
+            var _uniqueId = element._uniqueId,
+              attributes = element._finalAttributes,
+              mark = this._pictogramMark.getMarkInUserId(_uniqueId),
+              valid = this._validElement(element);
+            mark && (this.setMarkStyle(mark, {
+              keepStrokeScale: !0
+            }, "normal", AttributeLevel.Built_In), valid ? (this.initMarkStyleWithSpec(mark, merge$2({}, this._spec.pictogram, this._spec[mark.name])), this.setMarkStyle(mark, attributes, "normal", AttributeLevel.Series), mark.setPostProcess("fill", function (result, datum) {
+              return isValid$3(result) ? result : _this5._spec.defaultFillColor;
+            })) : (mark.setMarkConfig({
+              interactive: !1
+            }), this.setMarkStyle(mark, attributes, "normal", AttributeLevel.Built_In)));
+          }
+        } catch (err) {
+          _iterator2.e(err);
+        } finally {
+          _iterator2.f();
+        }
+        this.initLabelMarkStyle();
+      }
+    }, {
+      key: "_validElement",
+      value: function _validElement(element) {
+        return element.name || element._nameFromParent;
+      }
+    }, {
+      key: "initTooltip",
+      value: function initTooltip() {
+        var _this6 = this;
+        this._tooltipHelper = new PictogramSeriesTooltipHelper(this), this.getMarksWithoutRoot().forEach(function (mark) {
+          mark && mark.name && _this6._tooltipHelper.activeTriggerSet.mark.add(mark);
+        });
+      }
+    }, {
+      key: "dataToPosition",
+      value: function dataToPosition(datum) {
+        var global = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+        if (!datum) return null;
+        var name = datum[this.nameField];
+        if (!name) return null;
+        var mark = this.getMarksWithoutRoot().filter(function (mark) {
+          return mark.name === name;
+        });
+        if (!mark || 0 === mark.length) return null;
+        var bounds = new Bounds$1();
+        global ? mark.forEach(function (m) {
+          bounds = bounds.union(m.getProduct().getGroupGraphicItem().globalAABBBounds);
+        }) : mark.forEach(function (m) {
+          bounds = bounds.union(m.getProduct().getBounds());
+        });
+        var point = {
+          x: (bounds.x1 + bounds.x2) / 2,
+          y: (bounds.y1 + bounds.y2) / 2
+        };
+        if (global) {
+          var _this$getLayoutStartP = this.getLayoutStartPoint(),
+            x = _this$getLayoutStartP.x,
+            y = _this$getLayoutStartP.y;
+          point.x -= x, point.y -= y;
+        }
+        return point;
+      }
+    }, {
+      key: "coordToPosition",
+      value: function coordToPosition(point) {
+        if (!point) return null;
+        var x = point.x,
+          y = point.y,
+          matrix = this.getRootMatrix();
+        if (!matrix) return null;
+        var position = {};
+        return matrix.getInverse().transformPoint({
+          x: x,
+          y: y
+        }, position), position;
+      }
+    }, {
+      key: "getRootMatrix",
+      value: function getRootMatrix() {
+        var _a;
+        return null === (_a = this.getPictogramRootGraphic()) || void 0 === _a ? void 0 : _a.transMatrix;
+      }
+    }, {
+      key: "getPictogramRootGraphic",
+      value: function getPictogramRootGraphic() {
+        var _a;
+        return null === (_a = this._pictogramMark.getProduct()) || void 0 === _a ? void 0 : _a.getGroupGraphicItem();
+      }
+    }, {
+      key: "initData",
+      value: function initData() {
+        var _this7 = this;
+        var _a, _b;
+        _superPropGet(PictogramSeries, "initData", this, 3)([]);
+        var parsedSvg = svgSourceMap.get(this.svg);
+        parsedSvg || null === (_a = this._option) || void 0 === _a || _a.onError("no valid svg found!");
+        var svgData = new DataView(this._dataSet, {
+          name: "pictogram_".concat(this.id, "_data")
+        });
+        registerDataSetInstanceTransform(this._dataSet, "pictogram", pictogram), registerDataSetInstanceTransform(this._dataSet, "lookup", lookup), svgData.parse([parsedSvg], {
+          type: "dataview"
+        }).transform({
+          type: "pictogram"
+        }).transform({
+          type: "lookup",
+          options: {
+            from: function from() {
+              return _this7.getViewData().latestData;
+            },
+            key: "name",
+            fields: this._nameField,
+            set: function set(a, b) {
+              b && (a.data = b);
+            }
+          }
+        }).transform({
+          type: "lookup",
+          options: {
+            from: function from() {
+              return _this7.getViewData().latestData;
+            },
+            key: "_nameFromParent",
+            fields: this._nameField,
+            set: function set(a, b) {
+              b && (a.data = b);
+            }
+          }
+        }), null === (_b = this._data) || void 0 === _b || _b.getDataView().target.addListener("change", svgData.reRunAllTransform), this._mapViewData = new SeriesData(this._option, svgData);
+      }
+    }, {
+      key: "mapViewDataUpdate",
+      value: function mapViewDataUpdate() {
+        this._mapViewData.updateData();
+      }
+    }, {
+      key: "onLayoutEnd",
+      value: function onLayoutEnd(ctx) {
+        var _a;
+        _superPropGet(PictogramSeries, "onLayoutEnd", this, 3)([ctx]), null === (_a = this._mapViewData) || void 0 === _a || _a.getDataView().reRunAllTransform();
+      }
+    }, {
+      key: "updateSVGSize",
+      value: function updateSVGSize() {
+        var _this$getLayoutRect = this.getLayoutRect(),
+          regionWidth = _this$getLayoutRect.width,
+          regionHeight = _this$getLayoutRect.height,
+          regionCenterX = regionWidth / 2,
+          regionCenterY = regionHeight / 2,
+          root = this.getPictogramRootGraphic();
+        if (root) {
+          var bounds = root.AABBBounds,
+            _root$AABBBounds = root.AABBBounds,
+            x1 = _root$AABBBounds.x1,
+            x2 = _root$AABBBounds.x2,
+            y1 = _root$AABBBounds.y1,
+            y2 = _root$AABBBounds.y2,
+            rootCenterX = (x1 + x2) / 2,
+            rootCenterY = (y1 + y2) / 2,
+            scaleX = regionWidth / bounds.width(),
+            scaleY = regionHeight / bounds.height(),
+            scale = Math.min(scaleX, scaleY);
+          root.scale(scale, scale, {
+            x: rootCenterX,
+            y: rootCenterY
+          }), root.translate(regionCenterX - rootCenterX, regionCenterY - rootCenterY);
+        }
+      }
+    }, {
+      key: "initEvent",
+      value: function initEvent() {
+        var _a;
+        _superPropGet(PictogramSeries, "initEvent", this, 3)([]), null === (_a = this._mapViewData.getDataView()) || void 0 === _a || _a.target.addListener("change", this.mapViewDataUpdate.bind(this)), this.event.on(HOOK_EVENT.AFTER_MARK_LAYOUT_END, this.updateSVGSize.bind(this));
+      }
+    }, {
+      key: "handleZoom",
+      value: function handleZoom(e) {
+        var scale = e.scale,
+          scaleCenter = e.scaleCenter;
+        if (1 === scale) return;
+        var root = this.getPictogramRootGraphic();
+        root && (root.attribute.postMatrix || root.setAttributes({
+          postMatrix: new Matrix()
+        }), root.scale(scale, scale, scaleCenter));
+      }
+    }, {
+      key: "handlePan",
+      value: function handlePan(e) {
+        var delta = e.delta;
+        if (0 === delta[0] && 0 === delta[1]) return;
+        var root = this.getPictogramRootGraphic();
+        root && (root.attribute.postMatrix || root.setAttributes({
+          postMatrix: new Matrix()
+        }), root.translate(delta[0], delta[1]));
+      }
+    }, {
+      key: "getMarkData",
+      value: function getMarkData(datum) {
+        var _a;
+        return null !== (_a = datum.data) && void 0 !== _a ? _a : {};
+      }
+    }, {
+      key: "getMeasureField",
+      value: function getMeasureField() {
+        return [this.valueField];
+      }
+    }, {
+      key: "getDimensionField",
+      value: function getDimensionField() {
+        return [this.nameField];
+      }
+    }, {
+      key: "_getSeriesInfo",
+      value: function _getSeriesInfo(field, keys) {
+        var _this8 = this;
+        var defaultShapeType = this.getDefaultShapeType();
+        return keys.map(function (key) {
+          return {
+            key: key,
+            originalKey: key,
+            style: _this8.getSeriesStyle({
+              data: _defineProperty({}, field, key)
+            }),
+            shapeType: defaultShapeType
+          };
+        });
+      }
+    }]);
+  }(GeoSeries);
+  PictogramSeries.type = SeriesTypeEnum.pictogram, PictogramSeries.mark = PictogramSeriesMark, PictogramSeries.transformerConstructor = PictogramSeriesSpecTransformer;
+  var registerPictogramSeries = function registerPictogramSeries() {
+    Factory$1.registerSeries(PictogramSeries.type, PictogramSeries), Factory$1.registerImplement("registerSVG", registerSVGSource), Factory$1.registerImplement("unregisterSVG", unregisterSVGSource), registerElementHighlightByGraphicName(), registerElementSelectByGraphicName();
+  };
+
+  var PictogramChart = /*#__PURE__*/function (_BaseChart) {
+    function PictogramChart() {
+      var _this;
+      _classCallCheck(this, PictogramChart);
+      _this = _callSuper(this, PictogramChart, arguments), _this.transformerConstructor = PictogramChartSpecTransformer, _this.type = "pictogram", _this.seriesType = SeriesTypeEnum.pictogram;
+      return _this;
+    }
+    _inherits(PictogramChart, _BaseChart);
+    return _createClass(PictogramChart);
+  }(BaseChart);
+  PictogramChart.type = "pictogram", PictogramChart.seriesType = SeriesTypeEnum.pictogram, PictogramChart.transformerConstructor = PictogramChartSpecTransformer;
+  var registerPictogramChart = function registerPictogramChart() {
+    registerPictogramSeries(), Factory$1.registerChart(PictogramChart.type, PictogramChart);
+  };
+
   var __rest$1 = undefined && undefined.__rest || function (s, e) {
     var t = {};
     for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
@@ -110823,7 +111795,7 @@
   }(CharacterChart);
   VChartCharacter.type = "VChart";
   var registerAllVChart = function registerAllVChart() {
-    registerVennChart(), registerLiquidChart(), registerMosaicChart();
+    registerVennChart(), registerLiquidChart(), registerMosaicChart(), registerPictogramChart();
   };
 
   var WaveAnimate = /*#__PURE__*/function (_ACustomAnimate) {
@@ -111619,7 +112591,10 @@
       key: "transformTextAttrsToRichTextConfig",
       value: function transformTextAttrsToRichTextConfig(textStyle, align) {
         var textConfig = textStyle.textConfig;
-        if ((!textConfig || !textConfig.length) && textStyle.text) {
+        if (textConfig && textConfig.length || !textStyle.text) textConfig && textConfig.length && textConfig.forEach(function (item) {
+          var _a;
+          item.textAlign = align, item.lineHeight = null !== (_a = item.lineHeight) && void 0 !== _a ? _a : textStyle.lineHeight;
+        });else {
           var textList = Array.isArray(textStyle.text) ? textStyle.text : [textStyle.text];
           textConfig = textList.map(function (item, i) {
             return {