q2-tecton-elements 1.51.1 → 1.52.1

package/dist/q2-tecton-elements/q2-chart-donut.entry.js

@@ -0,0 +1,4537 @@
+import { r as t, c as e, h as i, g as r } from "./index-7a5365e2.js";
+
+import { o as a, i as n, l as o, d as s } from "./index-d18e2a20.js";
+
+import { br as l, W as c, _ as h, ay as u, bs as v, bt as d, b5 as f, bu as p, D as g, bv as b, x as m, a0 as w, I as y, bw as x, aM as S, bx as T, by as M, j as L, bz as C, E as I, bA as A, bB as P, bC as k, bD as V, d as D, bE as z, bF as O, bG as N, bH as R, bI as B, bJ as H, bK as W, bL as U, a as F, bM as j, bN as $, bO as X, bP as G, bQ as Y, bj as E, aK as _, bR as K, a$ as q, bS as J, bT as Z, bU as Q, a9 as tt, b0 as et, bV as it, aA as rt, bW as at, a4 as nt, m as ot, a6 as st, o as lt, y as ct, bX as ht, bY as ut, b as vt, bZ as dt, b2 as ft, b_ as pt, b$ as gt, c0 as bt, c as mt, ai as wt, G as yt, aB as xt, b6 as St, aC as Tt, c1 as Mt, b1 as Lt, u as Ct, c2 as It, aw as At, a3 as Pt, R as kt, bm as Vt, i as Dt, s as zt, z as Ot, t as Nt, g as Rt, be as Bt, c3 as Ht, V as Wt, b8 as Ut, C as Ft, ak as jt, am as $t, c4 as Xt, c5 as Gt, c6 as Yt, S as Et, c7 as _t, ab as Kt, aa as qt, ac as Jt, ad as Zt } from "./charting-1abfb877.js";
+
+import { l as Qt, a as te, g as ee, s as ie, b as re, i as ae } from "./sectorHelper-183cedd0.js";
+
+function makeBackground(t, e) {
+  var i = l(e.get("padding"));
+  var r = e.getItemStyle([ "color", "opacity" ]);
+  r.fill = e.get("backgroundColor");
+  t = new c({
+    shape: {
+      x: t.x - i[3],
+      y: t.y - i[0],
+      width: t.width + i[1] + i[3],
+      height: t.height + i[0] + i[2],
+      r: e.get("borderRadius")
+    },
+    style: r,
+    silent: true,
+    z2: -1
+  });
+  // FIXME
+  // `subPixelOptimizeRect` may bring some gap between edge of viewpart
+  // and background rect when setting like `left: 0`, `top: 0`.
+  // graphic.subPixelOptimizeRect(rect);
+    return t;
+}
+
+var ne = /** @class */ function(t) {
+  h(TooltipModel, t);
+  function TooltipModel() {
+    var e = t !== null && t.apply(this, arguments) || this;
+    e.type = TooltipModel.type;
+    return e;
+  }
+  TooltipModel.type = "tooltip";
+  TooltipModel.dependencies = [ "axisPointer" ];
+  TooltipModel.defaultOption = {
+    // zlevel: 0,
+    z: 60,
+    show: true,
+    // tooltip main content
+    showContent: true,
+    // 'trigger' only works on coordinate system.
+    // 'item' | 'axis' | 'none'
+    trigger: "item",
+    // 'click' | 'mousemove' | 'none'
+    triggerOn: "mousemove|click",
+    alwaysShowContent: false,
+    displayMode: "single",
+    renderMode: "auto",
+    // whether restraint content inside viewRect.
+    // If renderMode: 'richText', default true.
+    // If renderMode: 'html', defaut false (for backward compat).
+    confine: null,
+    showDelay: 0,
+    hideDelay: 100,
+    // Animation transition time, unit is second
+    transitionDuration: .4,
+    enterable: false,
+    backgroundColor: "#fff",
+    // box shadow
+    shadowBlur: 10,
+    shadowColor: "rgba(0, 0, 0, .2)",
+    shadowOffsetX: 1,
+    shadowOffsetY: 2,
+    // tooltip border radius, unit is px, default is 4
+    borderRadius: 4,
+    // tooltip border width, unit is px, default is 0 (no border)
+    borderWidth: 1,
+    // Tooltip inside padding, default is 5 for all direction
+    // Array is allowed to set up, right, bottom, left, same with css
+    // The default value: See `tooltip/tooltipMarkup.ts#getPaddingFromTooltipModel`.
+    padding: null,
+    // Extra css text
+    extraCssText: "",
+    // axis indicator, trigger by axis
+    axisPointer: {
+      // default is line
+      // legal values: 'line' | 'shadow' | 'cross'
+      type: "line",
+      // Valid when type is line, appoint tooltip line locate on which line. Optional
+      // legal values: 'x' | 'y' | 'angle' | 'radius' | 'auto'
+      // default is 'auto', chose the axis which type is category.
+      // for multiply y axis, cartesian coord chose x axis, polar chose angle axis
+      axis: "auto",
+      animation: "auto",
+      animationDurationUpdate: 200,
+      animationEasingUpdate: "exponentialOut",
+      crossStyle: {
+        color: "#999",
+        width: 1,
+        type: "dashed",
+        // TODO formatter
+        textStyle: {}
+      }
+    },
+    textStyle: {
+      color: "#666",
+      fontSize: 14
+    }
+  };
+  return TooltipModel;
+}(u);
+
+const oe = ne;
+
+/* global document */ function shouldTooltipConfine(t) {
+  var e = t.get("confine");
+  return e != null ? !!e : t.get("renderMode") === "richText";
+}
+
+function testStyle(t) {
+  if (!d.domSupported) {
+    return;
+  }
+  var e = document.documentElement.style;
+  for (var i = 0, r = t.length; i < r; i++) {
+    if (t[i] in e) {
+      return t[i];
+    }
+  }
+}
+
+var se = testStyle([ "transform", "webkitTransform", "OTransform", "MozTransform", "msTransform" ]);
+
+var le = testStyle([ "webkitTransition", "transition", "OTransition", "MozTransition", "msTransition" ]);
+
+function toCSSVendorPrefix(t, e) {
+  if (!t) {
+    return e;
+  }
+  e = v(e, true);
+  var i = t.indexOf(e);
+  t = i === -1 ? e : "-" + t.slice(0, i) + "-" + e;
+  return t.toLowerCase();
+}
+
+function getComputedStyle$1(t, e) {
+  var i = t.currentStyle || document.defaultView && document.defaultView.getComputedStyle(t);
+  return i ? e ? i[e] : i : null;
+}
+
+/* global document, window */ var ce = toCSSVendorPrefix(le, "transition");
+
+var he = toCSSVendorPrefix(se, "transform");
+
+// eslint-disable-next-line
+var ue = "position:absolute;display:block;border-style:solid;white-space:nowrap;z-index:9999999;" + (d.transform3dSupported ? "will-change:transform;" : "");
+
+function mirrorPos(t) {
+  t = t === "left" ? "right" : t === "right" ? "left" : t === "top" ? "bottom" : "top";
+  return t;
+}
+
+function assembleArrow(t, e, i) {
+  if (!f(i) || i === "inside") {
+    return "";
+  }
+  var r = t.get("backgroundColor");
+  var a = t.get("borderWidth");
+  e = m(e);
+  var n = mirrorPos(i);
+  var o = Math.max(Math.round(a) * 1.5, 6);
+  var s = "";
+  var l = he + ":";
+  var c;
+  if (S([ "left", "right" ], n) > -1) {
+    s += "top:50%";
+    l += "translateY(-50%) rotate(" + (c = n === "left" ? -225 : -45) + "deg)";
+  } else {
+    s += "left:50%";
+    l += "translateX(-50%) rotate(" + (c = n === "top" ? 225 : 45) + "deg)";
+  }
+  var h = c * Math.PI / 180;
+  var u = o + a;
+  var v = u * Math.abs(Math.cos(h)) + u * Math.abs(Math.sin(h));
+  var d = Math.round(((v - Math.SQRT2 * a) / 2 + Math.SQRT2 * a - (v - u) / 2) * 100) / 100;
+  s += ";" + n + ":-" + d + "px";
+  var p = e + " solid " + a + "px;";
+  var g = [ "position:absolute;width:" + o + "px;height:" + o + "px;z-index:-1;", s + ";" + l + ";", "border-bottom:" + p, "border-right:" + p, "background-color:" + r + ";" ];
+  return '<div style="' + g.join("") + '"></div>';
+}
+
+function assembleTransition(t, e) {
+  var i = "cubic-bezier(0.23,1,0.32,1)";
+  var r = " " + t / 2 + "s " + i;
+  var a = "opacity" + r + ",visibility" + r;
+  if (!e) {
+    r = " " + t + "s " + i;
+    a += d.transformSupported ? "," + he + r : ",left" + r + ",top" + r;
+  }
+  return ce + ":" + a;
+}
+
+function assembleTransform(t, e, i) {
+  // If using float on style, the final width of the dom might
+  // keep changing slightly while mouse move. So `toFixed(0)` them.
+  var r = t.toFixed(0) + "px";
+  var a = e.toFixed(0) + "px";
+  // not support transform, use `left` and `top` instead.
+    if (!d.transformSupported) {
+    return i ? "top:" + a + ";left:" + r + ";" : [ [ "top", a ], [ "left", r ] ];
+  }
+  // support transform
+    var n = d.transform3dSupported;
+  var o = "translate" + (n ? "3d" : "") + "(" + r + "," + a + (n ? ",0" : "") + ")";
+  return i ? "top:0;left:0;" + he + ":" + o + ";" : [ [ "top", 0 ], [ "left", 0 ], [ se, o ] ];
+}
+
+/**
+ * @param {Object} textStyle
+ * @return {string}
+ * @inner
+ */ function assembleFont(t) {
+  var e = [];
+  var i = t.get("fontSize");
+  var r = t.getTextColor();
+  r && e.push("color:" + r);
+  e.push("font:" + t.getFont());
+  i && e.push("line-height:" + Math.round(i * 3 / 2) + "px");
+  var a = t.get("textShadowColor");
+  var n = t.get("textShadowBlur") || 0;
+  var o = t.get("textShadowOffsetX") || 0;
+  var s = t.get("textShadowOffsetY") || 0;
+  a && n && e.push("text-shadow:" + o + "px " + s + "px " + n + "px " + a);
+  y([ "decoration", "align" ], (function(i) {
+    var r = t.get(i);
+    r && e.push("text-" + i + ":" + r);
+  }));
+  return e.join(";");
+}
+
+function assembleCssText(t, e, i) {
+  var r = [];
+  var a = t.get("transitionDuration");
+  var n = t.get("backgroundColor");
+  var o = t.get("shadowBlur");
+  var s = t.get("shadowColor");
+  var c = t.get("shadowOffsetX");
+  var h = t.get("shadowOffsetY");
+  var u = t.getModel("textStyle");
+  var d = T(t, "html");
+  var f = c + "px " + h + "px " + o + "px " + s;
+  r.push("box-shadow:" + f);
+  // Animation transition. Do not animate when transitionDuration is 0.
+    e && a && r.push(assembleTransition(a, i));
+  if (n) {
+    r.push("background-color:" + n);
+  }
+  // Border style
+    y([ "width", "color", "radius" ], (function(e) {
+    var i = "border-" + e;
+    var a = v(i);
+    var n = t.get(a);
+    n != null && r.push(i + ":" + n + (e === "color" ? "" : "px"));
+  }));
+  // Text style
+    r.push(assembleFont(u));
+  // Padding
+    if (d != null) {
+    r.push("padding:" + l(d).join("px ") + "px");
+  }
+  return r.join(";") + ";";
+}
+
+// If not able to make, do not modify the input `out`.
+function makeStyleCoord$1(t, e, i, r, a) {
+  var n = e && e.painter;
+  if (i) {
+    var o = n && n.getViewportRoot();
+    if (o) {
+      // Some APPs might use scale on body, so we support CSS transform here.
+      M(t, o, i, r, a);
+    }
+  } else {
+    t[0] = r;
+    t[1] = a;
+    // xy should be based on canvas root. But tooltipContent is
+    // the sibling of canvas root. So padding of ec container
+    // should be considered here.
+        var s = n && n.getViewportRootOffset();
+    if (s) {
+      t[0] += s.offsetLeft;
+      t[1] += s.offsetTop;
+    }
+  }
+  t[2] = t[0] / e.getWidth();
+  t[3] = t[1] / e.getHeight();
+}
+
+var ve = /** @class */ function() {
+  function TooltipHTMLContent(t, e) {
+    this._show = false;
+    this._styleCoord = [ 0, 0, 0, 0 ];
+    this._enterable = true;
+    this._alwaysShowContent = false;
+    this._firstShow = true;
+    this._longHide = true;
+    if (d.wxa) {
+      return null;
+    }
+    var i = document.createElement("div");
+    // TODO: TYPE
+        i.domBelongToZr = true;
+    this.el = i;
+    var r = this._zr = t.getZr();
+    var a = e.appendTo;
+    var n = a && (f(a) ? document.querySelector(a) : p(a) ? a : g(a) && a(t.getDom()));
+    makeStyleCoord$1(this._styleCoord, r, n, t.getWidth() / 2, t.getHeight() / 2);
+    (n || t.getDom()).appendChild(i);
+    this._api = t;
+    this._container = n;
+    // FIXME
+    // Is it needed to trigger zr event manually if
+    // the browser do not support `pointer-events: none`.
+        var o = this;
+    i.onmouseenter = function() {
+      // clear the timeout in hideLater and keep showing tooltip
+      if (o._enterable) {
+        clearTimeout(o._hideTimeout);
+        o._show = true;
+      }
+      o._inContent = true;
+    };
+    i.onmousemove = function(t) {
+      t = t || window.event;
+      if (!o._enterable) {
+        // `pointer-events: none` is set to tooltip content div
+        // if `enterable` is set as `false`, and `el.onmousemove`
+        // can not be triggered. But in browser that do not
+        // support `pointer-events`, we need to do this:
+        // Try trigger zrender event to avoid mouse
+        // in and out shape too frequently
+        var e = r.handler;
+        var i = r.painter.getViewportRoot();
+        b(i, t, true);
+        e.dispatch("mousemove", t);
+      }
+    };
+    i.onmouseleave = function() {
+      // set `_inContent` to `false` before `hideLater`
+      o._inContent = false;
+      if (o._enterable) {
+        if (o._show) {
+          o.hideLater(o._hideDelay);
+        }
+      }
+    };
+  }
+  /**
+   * Update when tooltip is rendered
+   */  TooltipHTMLContent.prototype.update = function(t) {
+    // FIXME
+    // Move this logic to ec main?
+    if (!this._container) {
+      var e = this._api.getDom();
+      var i = getComputedStyle$1(e, "position");
+      var r = e.style;
+      if (r.position !== "absolute" && i !== "absolute") {
+        r.position = "relative";
+      }
+    }
+    // move tooltip if chart resized
+        var a = t.get("alwaysShowContent");
+    a && this._moveIfResized();
+    // update alwaysShowContent
+        this._alwaysShowContent = a;
+    // update className
+        this.el.className = t.get("className") || "";
+    // Hide the tooltip
+    // PENDING
+    // this.hide();
+    };
+  TooltipHTMLContent.prototype.show = function(t, e) {
+    clearTimeout(this._hideTimeout);
+    clearTimeout(this._longHideTimeout);
+    var i = this.el;
+    var r = i.style;
+    var a = this._styleCoord;
+    if (!i.innerHTML) {
+      r.display = "none";
+    } else {
+      r.cssText = ue + assembleCssText(t, !this._firstShow, this._longHide) + assembleTransform(a[0], a[1], true) + ("border-color:" + m(e) + ";") + (t.get("extraCssText") || "") + (";pointer-events:" + (this._enterable ? "auto" : "none"));
+    }
+    this._show = true;
+    this._firstShow = false;
+    this._longHide = false;
+  };
+  TooltipHTMLContent.prototype.setContent = function(t, e, i, r, a) {
+    var n = this.el;
+    if (t == null) {
+      n.innerHTML = "";
+      return;
+    }
+    var o = "";
+    if (f(a) && i.get("trigger") === "item" && !shouldTooltipConfine(i)) {
+      o = assembleArrow(i, r, a);
+    }
+    if (f(t)) {
+      n.innerHTML = t + o;
+    } else if (t) {
+      // Clear previous
+      n.innerHTML = "";
+      if (!w(t)) {
+        t = [ t ];
+      }
+      for (var s = 0; s < t.length; s++) {
+        if (p(t[s]) && t[s].parentNode !== n) {
+          n.appendChild(t[s]);
+        }
+      }
+      // no arrow if empty
+            if (o && n.childNodes.length) {
+        // no need to create a new parent element, but it's not supported by IE 10 and older.
+        // const arrowEl = document.createRange().createContextualFragment(arrow);
+        var l = document.createElement("div");
+        l.innerHTML = o;
+        n.appendChild(l);
+      }
+    }
+  };
+  TooltipHTMLContent.prototype.setEnterable = function(t) {
+    this._enterable = t;
+  };
+  TooltipHTMLContent.prototype.getSize = function() {
+    var t = this.el;
+    return [ t.offsetWidth, t.offsetHeight ];
+  };
+  TooltipHTMLContent.prototype.moveTo = function(t, e) {
+    var i = this._styleCoord;
+    makeStyleCoord$1(i, this._zr, this._container, t, e);
+    if (i[0] != null && i[1] != null) {
+      var r = this.el.style;
+      var a = assembleTransform(i[0], i[1]);
+      y(a, (function(t) {
+        r[t[0]] = t[1];
+      }));
+    }
+  };
+  /**
+   * when `alwaysShowContent` is true,
+   * move the tooltip after chart resized
+   */  TooltipHTMLContent.prototype._moveIfResized = function() {
+    // The ratio of left to width
+    var t = this._styleCoord[2];
+    // The ratio of top to height
+        var e = this._styleCoord[3];
+    this.moveTo(t * this._zr.getWidth(), e * this._zr.getHeight());
+  };
+  TooltipHTMLContent.prototype.hide = function() {
+    var t = this;
+    var e = this.el.style;
+    e.visibility = "hidden";
+    e.opacity = "0";
+    d.transform3dSupported && (e.willChange = "");
+    this._show = false;
+    this._longHideTimeout = setTimeout((function() {
+      return t._longHide = true;
+    }), 500);
+  };
+  TooltipHTMLContent.prototype.hideLater = function(t) {
+    if (this._show && !(this._inContent && this._enterable) && !this._alwaysShowContent) {
+      if (t) {
+        this._hideDelay = t;
+        // Set show false to avoid invoke hideLater multiple times
+                this._show = false;
+        this._hideTimeout = setTimeout(x(this.hide, this), t);
+      } else {
+        this.hide();
+      }
+    }
+  };
+  TooltipHTMLContent.prototype.isShow = function() {
+    return this._show;
+  };
+  TooltipHTMLContent.prototype.dispose = function() {
+    clearTimeout(this._hideTimeout);
+    clearTimeout(this._longHideTimeout);
+    var t = this.el.parentNode;
+    t && t.removeChild(this.el);
+    this.el = this._container = null;
+  };
+  return TooltipHTMLContent;
+}();
+
+const de = ve;
+
+var fe = /** @class */ function() {
+  function TooltipRichContent(t) {
+    this._show = false;
+    this._styleCoord = [ 0, 0, 0, 0 ];
+    this._alwaysShowContent = false;
+    this._enterable = true;
+    this._zr = t.getZr();
+    makeStyleCoord(this._styleCoord, this._zr, t.getWidth() / 2, t.getHeight() / 2);
+  }
+  /**
+   * Update when tooltip is rendered
+   */  TooltipRichContent.prototype.update = function(t) {
+    var e = t.get("alwaysShowContent");
+    e && this._moveIfResized();
+    // update alwaysShowContent
+        this._alwaysShowContent = e;
+  };
+  TooltipRichContent.prototype.show = function() {
+    if (this._hideTimeout) {
+      clearTimeout(this._hideTimeout);
+    }
+    this.el.show();
+    this._show = true;
+  };
+  /**
+   * Set tooltip content
+   */  TooltipRichContent.prototype.setContent = function(t, e, i, r, a) {
+    var n = this;
+    if (L(t)) {
+      C("");
+    }
+    if (this.el) {
+      this._zr.remove(this.el);
+    }
+    var o = i.getModel("textStyle");
+    this.el = new I({
+      style: {
+        rich: e.richTextStyles,
+        text: t,
+        lineHeight: 22,
+        borderWidth: 1,
+        borderColor: r,
+        textShadowColor: o.get("textShadowColor"),
+        fill: i.get([ "textStyle", "color" ]),
+        padding: T(i, "richText"),
+        verticalAlign: "top",
+        align: "left"
+      },
+      z: i.get("z")
+    });
+    y([ "backgroundColor", "borderRadius", "shadowColor", "shadowBlur", "shadowOffsetX", "shadowOffsetY" ], (function(t) {
+      n.el.style[t] = i.get(t);
+    }));
+    y([ "textShadowBlur", "textShadowOffsetX", "textShadowOffsetY" ], (function(t) {
+      n.el.style[t] = o.get(t) || 0;
+    }));
+    this._zr.add(this.el);
+    var s = this;
+    this.el.on("mouseover", (function() {
+      // clear the timeout in hideLater and keep showing tooltip
+      if (s._enterable) {
+        clearTimeout(s._hideTimeout);
+        s._show = true;
+      }
+      s._inContent = true;
+    }));
+    this.el.on("mouseout", (function() {
+      if (s._enterable) {
+        if (s._show) {
+          s.hideLater(s._hideDelay);
+        }
+      }
+      s._inContent = false;
+    }));
+  };
+  TooltipRichContent.prototype.setEnterable = function(t) {
+    this._enterable = t;
+  };
+  TooltipRichContent.prototype.getSize = function() {
+    var t = this.el;
+    var e = this.el.getBoundingRect();
+    // bounding rect does not include shadow. For renderMode richText,
+    // if overflow, it will be cut. So calculate them accurately.
+        var i = calcShadowOuterSize(t.style);
+    return [ e.width + i.left + i.right, e.height + i.top + i.bottom ];
+  };
+  TooltipRichContent.prototype.moveTo = function(t, e) {
+    var i = this.el;
+    if (i) {
+      var r = this._styleCoord;
+      makeStyleCoord(r, this._zr, t, e);
+      t = r[0];
+      e = r[1];
+      var a = i.style;
+      var n = mathMaxWith0(a.borderWidth || 0);
+      var o = calcShadowOuterSize(a);
+      // rich text x, y do not include border.
+            i.x = t + n + o.left;
+      i.y = e + n + o.top;
+      i.markRedraw();
+    }
+  };
+  /**
+   * when `alwaysShowContent` is true,
+   * move the tooltip after chart resized
+   */  TooltipRichContent.prototype._moveIfResized = function() {
+    // The ratio of left to width
+    var t = this._styleCoord[2];
+    // The ratio of top to height
+        var e = this._styleCoord[3];
+    this.moveTo(t * this._zr.getWidth(), e * this._zr.getHeight());
+  };
+  TooltipRichContent.prototype.hide = function() {
+    if (this.el) {
+      this.el.hide();
+    }
+    this._show = false;
+  };
+  TooltipRichContent.prototype.hideLater = function(t) {
+    if (this._show && !(this._inContent && this._enterable) && !this._alwaysShowContent) {
+      if (t) {
+        this._hideDelay = t;
+        // Set show false to avoid invoke hideLater multiple times
+                this._show = false;
+        this._hideTimeout = setTimeout(x(this.hide, this), t);
+      } else {
+        this.hide();
+      }
+    }
+  };
+  TooltipRichContent.prototype.isShow = function() {
+    return this._show;
+  };
+  TooltipRichContent.prototype.dispose = function() {
+    this._zr.remove(this.el);
+  };
+  return TooltipRichContent;
+}();
+
+function mathMaxWith0(t) {
+  return Math.max(0, t);
+}
+
+function calcShadowOuterSize(t) {
+  var e = mathMaxWith0(t.shadowBlur || 0);
+  var i = mathMaxWith0(t.shadowOffsetX || 0);
+  var r = mathMaxWith0(t.shadowOffsetY || 0);
+  return {
+    left: mathMaxWith0(e - i),
+    right: mathMaxWith0(e + i),
+    top: mathMaxWith0(e - r),
+    bottom: mathMaxWith0(e + r)
+  };
+}
+
+function makeStyleCoord(t, e, i, r) {
+  t[0] = i;
+  t[1] = r;
+  t[2] = t[0] / e.getWidth();
+  t[3] = t[1] / e.getHeight();
+}
+
+const pe = fe;
+
+var ge = new c({
+  shape: {
+    x: -1,
+    y: -1,
+    width: 2,
+    height: 2
+  }
+});
+
+var be = /** @class */ function(t) {
+  h(TooltipView, t);
+  function TooltipView() {
+    var e = t !== null && t.apply(this, arguments) || this;
+    e.type = TooltipView.type;
+    return e;
+  }
+  TooltipView.prototype.init = function(t, e) {
+    if (d.node || !e.getDom()) {
+      return;
+    }
+    var i = t.getComponent("tooltip");
+    var r = this._renderMode = A(i.get("renderMode"));
+    this._tooltipContent = r === "richText" ? new pe(e) : new de(e, {
+      appendTo: i.get("appendToBody", true) ? "body" : i.get("appendTo", true)
+    });
+  };
+  TooltipView.prototype.render = function(t, e, i) {
+    if (d.node || !i.getDom()) {
+      return;
+    }
+    // Reset
+        this.group.removeAll();
+    this._tooltipModel = t;
+    this._ecModel = e;
+    this._api = i;
+    var r = this._tooltipContent;
+    r.update(t);
+    r.setEnterable(t.get("enterable"));
+    this._initGlobalListener();
+    this._keepShow();
+    // PENDING
+    // `mousemove` event will be triggered very frequently when the mouse moves fast,
+    // which causes that the `updatePosition` function was also called frequently.
+    // In Chrome with devtools open and Firefox, tooltip looks laggy and shakes. See #14695 #16101
+    // To avoid frequent triggering,
+    // consider throttling it in 50ms when transition is enabled
+        if (this._renderMode !== "richText" && t.get("transitionDuration")) {
+      P(this, "_updatePosition", 50, "fixRate");
+    } else {
+      k(this, "_updatePosition");
+    }
+  };
+  TooltipView.prototype._initGlobalListener = function() {
+    var t = this._tooltipModel;
+    var e = t.get("triggerOn");
+    V("itemTooltip", this._api, x((function(t, i, r) {
+      // If 'none', it is not controlled by mouse totally.
+      if (e !== "none") {
+        if (e.indexOf(t) >= 0) {
+          this._tryShow(i, r);
+        } else if (t === "leave") {
+          this._hide(r);
+        }
+      }
+    }), this));
+  };
+  TooltipView.prototype._keepShow = function() {
+    var t = this._tooltipModel;
+    var e = this._ecModel;
+    var i = this._api;
+    var r = t.get("triggerOn");
+    // Try to keep the tooltip show when refreshing
+        if (this._lastX != null && this._lastY != null && r !== "none" && r !== "click") {
+      var a = this;
+      clearTimeout(this._refreshUpdateTimeout);
+      this._refreshUpdateTimeout = setTimeout((function() {
+        // Show tip next tick after other charts are rendered
+        // In case highlight action has wrong result
+        // FIXME
+        !i.isDisposed() && a.manuallyShowTip(t, e, i, {
+          x: a._lastX,
+          y: a._lastY,
+          dataByCoordSys: a._lastDataByCoordSys
+        });
+      }));
+    }
+  };
+  /**
+   * Show tip manually by
+   * dispatchAction({
+   *     type: 'showTip',
+   *     x: 10,
+   *     y: 10
+   * });
+   * Or
+   * dispatchAction({
+   *      type: 'showTip',
+   *      seriesIndex: 0,
+   *      dataIndex or dataIndexInside or name
+   * });
+   *
+   *  TODO Batch
+   */  TooltipView.prototype.manuallyShowTip = function(t, e, i, r) {
+    if (r.from === this.uid || d.node || !i.getDom()) {
+      return;
+    }
+    var a = makeDispatchAction(r, i);
+    // Reset ticket
+        this._ticket = "";
+    // When triggered from axisPointer.
+        var n = r.dataByCoordSys;
+    var o = findComponentReference(r, e, i);
+    if (o) {
+      var s = o.el.getBoundingRect().clone();
+      s.applyTransform(o.el.transform);
+      this._tryShow({
+        offsetX: s.x + s.width / 2,
+        offsetY: s.y + s.height / 2,
+        target: o.el,
+        position: r.position,
+        // When manully trigger, the mouse is not on the el, so we'd better to
+        // position tooltip on the bottom of the el and display arrow is possible.
+        positionDefault: "bottom"
+      }, a);
+    } else if (r.tooltip && r.x != null && r.y != null) {
+      var l = ge;
+      l.x = r.x;
+      l.y = r.y;
+      l.update();
+      D(l).tooltipConfig = {
+        name: null,
+        option: r.tooltip
+      };
+      // Manually show tooltip while view is not using zrender elements.
+            this._tryShow({
+        offsetX: r.x,
+        offsetY: r.y,
+        target: l
+      }, a);
+    } else if (n) {
+      this._tryShow({
+        offsetX: r.x,
+        offsetY: r.y,
+        position: r.position,
+        dataByCoordSys: n,
+        tooltipOption: r.tooltipOption
+      }, a);
+    } else if (r.seriesIndex != null) {
+      if (this._manuallyAxisShowTip(t, e, i, r)) {
+        return;
+      }
+      var c = z(r, e);
+      var h = c.point[0];
+      var u = c.point[1];
+      if (h != null && u != null) {
+        this._tryShow({
+          offsetX: h,
+          offsetY: u,
+          target: c.el,
+          position: r.position,
+          // When manully trigger, the mouse is not on the el, so we'd better to
+          // position tooltip on the bottom of the el and display arrow is possible.
+          positionDefault: "bottom"
+        }, a);
+      }
+    } else if (r.x != null && r.y != null) {
+      // FIXME
+      // should wrap dispatchAction like `axisPointer/globalListener` ?
+      i.dispatchAction({
+        type: "updateAxisPointer",
+        x: r.x,
+        y: r.y
+      });
+      this._tryShow({
+        offsetX: r.x,
+        offsetY: r.y,
+        position: r.position,
+        target: i.getZr().findHover(r.x, r.y).target
+      }, a);
+    }
+  };
+  TooltipView.prototype.manuallyHideTip = function(t, e, i, r) {
+    var a = this._tooltipContent;
+    if (this._tooltipModel) {
+      a.hideLater(this._tooltipModel.get("hideDelay"));
+    }
+    this._lastX = this._lastY = this._lastDataByCoordSys = null;
+    if (r.from !== this.uid) {
+      this._hide(makeDispatchAction(r, i));
+    }
+  };
+  // Be compatible with previous design, that is, when tooltip.type is 'axis' and
+  // dispatchAction 'showTip' with seriesIndex and dataIndex will trigger axis pointer
+  // and tooltip.
+    TooltipView.prototype._manuallyAxisShowTip = function(t, e, i, r) {
+    var a = r.seriesIndex;
+    var n = r.dataIndex;
+    // @ts-ignore
+        var o = e.getComponent("axisPointer").coordSysAxesInfo;
+    if (a == null || n == null || o == null) {
+      return;
+    }
+    var s = e.getSeriesByIndex(a);
+    if (!s) {
+      return;
+    }
+    var l = s.getData();
+    var c = buildTooltipModel([ l.getItemModel(n), s, (s.coordinateSystem || {}).model ], this._tooltipModel);
+    if (c.get("trigger") !== "axis") {
+      return;
+    }
+    i.dispatchAction({
+      type: "updateAxisPointer",
+      seriesIndex: a,
+      dataIndex: n,
+      position: r.position
+    });
+    return true;
+  };
+  TooltipView.prototype._tryShow = function(t, e) {
+    var i = t.target;
+    var r = this._tooltipModel;
+    if (!r) {
+      return;
+    }
+    // Save mouse x, mouse y. So we can try to keep showing the tip if chart is refreshed
+        this._lastX = t.offsetX;
+    this._lastY = t.offsetY;
+    var a = t.dataByCoordSys;
+    if (a && a.length) {
+      this._showAxisTooltip(a, t);
+    } else if (i) {
+      var n = D(i);
+      if (n.ssrType === "legend") {
+        // Don't trigger tooltip for legend tooltip item
+        return;
+      }
+      this._lastDataByCoordSys = null;
+      var o;
+      var s;
+      O(i, (function(t) {
+        // Always show item tooltip if mouse is on the element with dataIndex
+        if (D(t).dataIndex != null) {
+          o = t;
+          return true;
+        }
+        // Tooltip provided directly. Like legend.
+                if (D(t).tooltipConfig != null) {
+          s = t;
+          return true;
+        }
+      }), true);
+      if (o) {
+        this._showSeriesItemTooltip(t, o, e);
+      } else if (s) {
+        this._showComponentItemTooltip(t, s, e);
+      } else {
+        this._hide(e);
+      }
+    } else {
+      this._lastDataByCoordSys = null;
+      this._hide(e);
+    }
+  };
+  TooltipView.prototype._showOrMove = function(t, e) {
+    // showDelay is used in this case: tooltip.enterable is set
+    // as true. User intent to move mouse into tooltip and click
+    // something. `showDelay` makes it easier to enter the content
+    // but tooltip do not move immediately.
+    var i = t.get("showDelay");
+    e = x(e, this);
+    clearTimeout(this._showTimout);
+    i > 0 ? this._showTimout = setTimeout(e, i) : e();
+  };
+  TooltipView.prototype._showAxisTooltip = function(t, e) {
+    var i = this._ecModel;
+    var r = this._tooltipModel;
+    var a = [ e.offsetX, e.offsetY ];
+    var n = buildTooltipModel([ e.tooltipOption ], r);
+    var o = this._renderMode;
+    var s = [];
+    var l = N("section", {
+      blocks: [],
+      noHeader: true
+    });
+    // Only for legacy: `Serise['formatTooltip']` returns a string.
+        var c = [];
+    var h = new R;
+    y(t, (function(t) {
+      y(t.dataByAxis, (function(t) {
+        var e = i.getComponent(t.axisDim + "Axis", t.axisIndex);
+        var a = t.value;
+        if (!e || a == null) {
+          return;
+        }
+        var n = B(a, e.axis, i, t.seriesDataIndices, t.valueLabelOpt);
+        var u = N("section", {
+          header: n,
+          noHeader: !H(n),
+          sortBlocks: true,
+          blocks: []
+        });
+        l.blocks.push(u);
+        y(t.seriesDataIndices, (function(l) {
+          var v = i.getSeriesByIndex(l.seriesIndex);
+          var d = l.dataIndexInside;
+          var f = v.getDataParams(d);
+          // Can't find data.
+                    if (f.dataIndex < 0) {
+            return;
+          }
+          f.axisDim = t.axisDim;
+          f.axisIndex = t.axisIndex;
+          f.axisType = t.axisType;
+          f.axisId = t.axisId;
+          f.axisValue = W(e.axis, {
+            value: a
+          });
+          f.axisValueLabel = n;
+          // Pre-create marker style for makers. Users can assemble richText
+          // text in `formatter` callback and use those markers style.
+                    f.marker = h.makeTooltipMarker("item", m(f.color), o);
+          var p = U(v.formatTooltip(d, true, null));
+          var g = p.frag;
+          if (g) {
+            var b = buildTooltipModel([ v ], r).get("valueFormatter");
+            u.blocks.push(b ? F({
+              valueFormatter: b
+            }, g) : g);
+          }
+          if (p.text) {
+            c.push(p.text);
+          }
+          s.push(f);
+        }));
+      }));
+    }));
+    // In most cases, the second axis is displays upper on the first one.
+    // So we reverse it to look better.
+        l.blocks.reverse();
+    c.reverse();
+    var u = e.position;
+    var v = n.get("order");
+    var d = j(l, h, o, v, i.get("useUTC"), n.get("textStyle"));
+    d && c.unshift(d);
+    var f = o === "richText" ? "\n\n" : "<br/>";
+    var p = c.join(f);
+    this._showOrMove(n, (function() {
+      if (this._updateContentNotChangedOnAxis(t, s)) {
+        this._updatePosition(n, u, a[0], a[1], this._tooltipContent, s);
+      } else {
+        this._showTooltipContent(n, p, s, Math.random() + "", a[0], a[1], u, null, h);
+      }
+    }));
+    // Do not trigger events here, because this branch only be entered
+    // from dispatchAction.
+    };
+  TooltipView.prototype._showSeriesItemTooltip = function(t, e, i) {
+    var r = this._ecModel;
+    var a = D(e);
+    // Use dataModel in element if possible
+    // Used when mouseover on a element like markPoint or edge
+    // In which case, the data is not main data in series.
+        var n = a.seriesIndex;
+    var o = r.getSeriesByIndex(n);
+    // For example, graph link.
+        var s = a.dataModel || o;
+    var l = a.dataIndex;
+    var c = a.dataType;
+    var h = s.getData(c);
+    var u = this._renderMode;
+    var v = t.positionDefault;
+    var d = buildTooltipModel([ h.getItemModel(l), s, o && (o.coordinateSystem || {}).model ], this._tooltipModel, v ? {
+      position: v
+    } : null);
+    var f = d.get("trigger");
+    if (f != null && f !== "item") {
+      return;
+    }
+    var p = s.getDataParams(l, c);
+    var g = new R;
+    // Pre-create marker style for makers. Users can assemble richText
+    // text in `formatter` callback and use those markers style.
+        p.marker = g.makeTooltipMarker("item", m(p.color), u);
+    var b = U(s.formatTooltip(l, false, c));
+    var w = d.get("order");
+    var y = d.get("valueFormatter");
+    var x = b.frag;
+    var S = x ? j(y ? F({
+      valueFormatter: y
+    }, x) : x, g, u, w, r.get("useUTC"), d.get("textStyle")) : b.text;
+    var T = "item_" + s.name + "_" + l;
+    this._showOrMove(d, (function() {
+      this._showTooltipContent(d, S, p, T, t.offsetX, t.offsetY, t.position, t.target, g);
+    }));
+    // FIXME
+    // duplicated showtip if manuallyShowTip is called from dispatchAction.
+        i({
+      type: "showTip",
+      dataIndexInside: l,
+      dataIndex: h.getRawIndex(l),
+      seriesIndex: n,
+      from: this.uid
+    });
+  };
+  TooltipView.prototype._showComponentItemTooltip = function(t, e, i) {
+    var r = this._renderMode === "html";
+    var a = D(e);
+    var n = a.tooltipConfig;
+    var o = n.option || {};
+    var s = o.encodeHTMLContent;
+    if (f(o)) {
+      var l = o;
+      o = {
+        content: l,
+        // Fixed formatter
+        formatter: l
+      };
+      // when `tooltipConfig.option` is a string rather than an object,
+      // we can't know if the content needs to be encoded
+      // for the sake of security, encode it by default.
+            s = true;
+    }
+    if (s && r && o.content) {
+      // clone might be unnecessary?
+      o = $(o);
+      o.content = X(o.content);
+    }
+    var c = [ o ];
+    var h = this._ecModel.getComponent(a.componentMainType, a.componentIndex);
+    if (h) {
+      c.push(h);
+    }
+    // In most cases, component tooltip formatter has different params with series tooltip formatter,
+    // so that they cannot share the same formatter. Since the global tooltip formatter is used for series
+    // by convention, we do not use it as the default formatter for component.
+        c.push({
+      formatter: o.content
+    });
+    var u = t.positionDefault;
+    var v = buildTooltipModel(c, this._tooltipModel, u ? {
+      position: u
+    } : null);
+    var d = v.get("content");
+    var p = Math.random() + "";
+    // PENDING: this case do not support richText style yet.
+        var g = new R;
+    // Do not check whether `trigger` is 'none' here, because `trigger`
+    // only works on coordinate system. In fact, we have not found case
+    // that requires setting `trigger` nothing on component yet.
+        this._showOrMove(v, (function() {
+      // Use formatterParams from element defined in component
+      // Avoid users modify it.
+      var i = $(v.get("formatterParams") || {});
+      this._showTooltipContent(v, d, i, p, t.offsetX, t.offsetY, t.position, e, g);
+    }));
+    // If not dispatch showTip, tip may be hide triggered by axis.
+        i({
+      type: "showTip",
+      from: this.uid
+    });
+  };
+  TooltipView.prototype._showTooltipContent = function(
+  // Use Model<TooltipOption> insteadof TooltipModel because this model may be from series or other options.
+  // Instead of top level tooltip.
+  t, e, i, r, a, n, o, s, l) {
+    // Reset ticket
+    this._ticket = "";
+    if (!t.get("showContent") || !t.get("show")) {
+      return;
+    }
+    var c = this._tooltipContent;
+    c.setEnterable(t.get("enterable"));
+    var h = t.get("formatter");
+    o = o || t.get("position");
+    var u = e;
+    var v = this._getNearestPoint([ a, n ], i, t.get("trigger"), t.get("borderColor"));
+    var d = v.color;
+    if (h) {
+      if (f(h)) {
+        var p = t.ecModel.get("useUTC");
+        var b = w(i) ? i[0] : i;
+        var m = b && b.axisType && b.axisType.indexOf("time") >= 0;
+        u = h;
+        if (m) {
+          u = G(b.axisValue, u, p);
+        }
+        u = Y(u, i, true);
+      } else if (g(h)) {
+        var y = x((function(e, r) {
+          if (e === this._ticket) {
+            c.setContent(r, l, t, d, o);
+            this._updatePosition(t, o, a, n, c, i, s);
+          }
+        }), this);
+        this._ticket = r;
+        u = h(i, r, y);
+      } else {
+        u = h;
+      }
+    }
+    c.setContent(u, l, t, d, o);
+    c.show(t, d);
+    this._updatePosition(t, o, a, n, c, i, s);
+  };
+  TooltipView.prototype._getNearestPoint = function(t, e, i, r) {
+    if (i === "axis" || w(e)) {
+      return {
+        color: r || (this._renderMode === "html" ? "#fff" : "none")
+      };
+    }
+    if (!w(e)) {
+      return {
+        color: r || e.color || e.borderColor
+      };
+    }
+  };
+  TooltipView.prototype._updatePosition = function(t, e, i, 
+  // Mouse x
+  r, 
+  // Mouse y
+  a, n, o) {
+    var s = this._api.getWidth();
+    var l = this._api.getHeight();
+    e = e || t.get("position");
+    var c = a.getSize();
+    var h = t.get("align");
+    var u = t.get("verticalAlign");
+    var v = o && o.getBoundingRect().clone();
+    o && v.applyTransform(o.transform);
+    if (g(e)) {
+      // Callback of position can be an array or a string specify the position
+      e = e([ i, r ], n, a.el, v, {
+        viewSize: [ s, l ],
+        contentSize: c.slice()
+      });
+    }
+    if (w(e)) {
+      i = E(e[0], s);
+      r = E(e[1], l);
+    } else if (L(e)) {
+      var d = e;
+      d.width = c[0];
+      d.height = c[1];
+      var p = _(d, {
+        width: s,
+        height: l
+      });
+      i = p.x;
+      r = p.y;
+      h = null;
+      // When positionExpr is left/top/right/bottom,
+      // align and verticalAlign will not work.
+            u = null;
+    }
+    // Specify tooltip position by string 'top' 'bottom' 'left' 'right' around graphic element
+     else if (f(e) && o) {
+      var b = calcTooltipPosition(e, v, c, t.get("borderWidth"));
+      i = b[0];
+      r = b[1];
+    } else {
+      var b = refixTooltipPosition(i, r, a, s, l, h ? null : 20, u ? null : 20);
+      i = b[0];
+      r = b[1];
+    }
+    h && (i -= isCenterAlign(h) ? c[0] / 2 : h === "right" ? c[0] : 0);
+    u && (r -= isCenterAlign(u) ? c[1] / 2 : u === "bottom" ? c[1] : 0);
+    if (shouldTooltipConfine(t)) {
+      var b = confineTooltipPosition(i, r, a, s, l);
+      i = b[0];
+      r = b[1];
+    }
+    a.moveTo(i, r);
+  };
+  // FIXME
+  // Should we remove this but leave this to user?
+    TooltipView.prototype._updateContentNotChangedOnAxis = function(t, e) {
+    var i = this._lastDataByCoordSys;
+    var r = this._cbParamsList;
+    var a = !!i && i.length === t.length;
+    a && y(i, (function(i, n) {
+      var o = i.dataByAxis || [];
+      var s = t[n] || {};
+      var l = s.dataByAxis || [];
+      a = a && o.length === l.length;
+      a && y(o, (function(t, i) {
+        var n = l[i] || {};
+        var o = t.seriesDataIndices || [];
+        var s = n.seriesDataIndices || [];
+        a = a && t.value === n.value && t.axisType === n.axisType && t.axisId === n.axisId && o.length === s.length;
+        a && y(o, (function(t, e) {
+          var i = s[e];
+          a = a && t.seriesIndex === i.seriesIndex && t.dataIndex === i.dataIndex;
+        }));
+        // check is cbParams data value changed
+                r && y(t.seriesDataIndices, (function(t) {
+          var i = t.seriesIndex;
+          var n = e[i];
+          var o = r[i];
+          if (n && o && o.data !== n.data) {
+            a = false;
+          }
+        }));
+      }));
+    }));
+    this._lastDataByCoordSys = t;
+    this._cbParamsList = e;
+    return !!a;
+  };
+  TooltipView.prototype._hide = function(t) {
+    // Do not directly hideLater here, because this behavior may be prevented
+    // in dispatchAction when showTip is dispatched.
+    // FIXME
+    // duplicated hideTip if manuallyHideTip is called from dispatchAction.
+    this._lastDataByCoordSys = null;
+    t({
+      type: "hideTip",
+      from: this.uid
+    });
+  };
+  TooltipView.prototype.dispose = function(t, e) {
+    if (d.node || !e.getDom()) {
+      return;
+    }
+    k(this, "_updatePosition");
+    this._tooltipContent.dispose();
+    K("itemTooltip", e);
+  };
+  TooltipView.type = "tooltip";
+  return TooltipView;
+}(q);
+
+/**
+ * From top to bottom. (the last one should be globalTooltipModel);
+ */ function buildTooltipModel(t, e, i) {
+  // Last is always tooltip model.
+  var r = e.ecModel;
+  var a;
+  if (i) {
+    a = new J(i, r, r);
+    a = new J(e.option, a, r);
+  } else {
+    a = e;
+  }
+  for (var n = t.length - 1; n >= 0; n--) {
+    var o = t[n];
+    if (o) {
+      if (o instanceof J) {
+        o = o.get("tooltip", true);
+      }
+      // In each data item tooltip can be simply write:
+      // {
+      //  value: 10,
+      //  tooltip: 'Something you need to know'
+      // }
+            if (f(o)) {
+        o = {
+          formatter: o
+        };
+      }
+      if (o) {
+        a = new J(o, a, r);
+      }
+    }
+  }
+  return a;
+}
+
+function makeDispatchAction(t, e) {
+  return t.dispatchAction || x(e.dispatchAction, e);
+}
+
+function refixTooltipPosition(t, e, i, r, a, n, o) {
+  var s = i.getSize();
+  var l = s[0];
+  var c = s[1];
+  if (n != null) {
+    // Add extra 2 pixels for this case:
+    // At present the "values" in default tooltip are using CSS `float: right`.
+    // When the right edge of the tooltip box is on the right side of the
+    // viewport, the `float` layout might push the "values" to the second line.
+    if (t + l + n + 2 > r) {
+      t -= l + n;
+    } else {
+      t += n;
+    }
+  }
+  if (o != null) {
+    if (e + c + o > a) {
+      e -= c + o;
+    } else {
+      e += o;
+    }
+  }
+  return [ t, e ];
+}
+
+function confineTooltipPosition(t, e, i, r, a) {
+  var n = i.getSize();
+  var o = n[0];
+  var s = n[1];
+  t = Math.min(t + o, r) - o;
+  e = Math.min(e + s, a) - s;
+  t = Math.max(t, 0);
+  e = Math.max(e, 0);
+  return [ t, e ];
+}
+
+function calcTooltipPosition(t, e, i, r) {
+  var a = i[0];
+  var n = i[1];
+  var o = Math.ceil(Math.SQRT2 * r) + 8;
+  var s = 0;
+  var l = 0;
+  var c = e.width;
+  var h = e.height;
+  switch (t) {
+   case "inside":
+    s = e.x + c / 2 - a / 2;
+    l = e.y + h / 2 - n / 2;
+    break;
+
+   case "top":
+    s = e.x + c / 2 - a / 2;
+    l = e.y - n - o;
+    break;
+
+   case "bottom":
+    s = e.x + c / 2 - a / 2;
+    l = e.y + h + o;
+    break;
+
+   case "left":
+    s = e.x - a - o;
+    l = e.y + h / 2 - n / 2;
+    break;
+
+   case "right":
+    s = e.x + c + o;
+    l = e.y + h / 2 - n / 2;
+  }
+  return [ s, l ];
+}
+
+function isCenterAlign(t) {
+  return t === "center" || t === "middle";
+}
+
+/**
+ * Find target component by payload like:
+ * ```js
+ * { legendId: 'some_id', name: 'xxx' }
+ * { toolboxIndex: 1, name: 'xxx' }
+ * { geoName: 'some_name', name: 'xxx' }
+ * ```
+ * PENDING: at present only
+ *
+ * If not found, return null/undefined.
+ */ function findComponentReference(t, e, i) {
+  var r = Z(t).queryOptionMap;
+  var a = r.keys()[0];
+  if (!a || a === "series") {
+    return;
+  }
+  var n = Q(e, a, r.get(a), {
+    useDefault: false,
+    enableAll: false,
+    enableNone: false
+  });
+  var o = n.models[0];
+  if (!o) {
+    return;
+  }
+  var s = i.getViewOfComponentModel(o);
+  var l;
+  s.group.traverse((function(e) {
+    var i = D(e).tooltipConfig;
+    if (i && i.name === t.name) {
+      l = e;
+      return true;
+ // stop
+        }
+  }));
+  if (l) {
+    return {
+      componentMainType: a,
+      componentIndex: o.componentIndex,
+      el: l
+    };
+  }
+}
+
+const me = be;
+
+function install$4(t) {
+  tt(et);
+  t.registerComponentModel(oe);
+  t.registerComponentView(me);
+  /**
+   * @action
+   * @property {string} type
+   * @property {number} seriesIndex
+   * @property {number} dataIndex
+   * @property {number} [x]
+   * @property {number} [y]
+   */  t.registerAction({
+    type: "showTip",
+    event: "showTip",
+    update: "tooltip:manuallyShowTip"
+  }, it);
+  t.registerAction({
+    type: "hideTip",
+    event: "hideTip",
+    update: "tooltip:manuallyHideTip"
+  }, it);
+}
+
+var getDefaultSelectorOptions = function(t, e) {
+  if (e === "all") {
+    return {
+      type: "all",
+      title: t.getLocaleModel().get([ "legend", "selector", "all" ])
+    };
+  } else if (e === "inverse") {
+    return {
+      type: "inverse",
+      title: t.getLocaleModel().get([ "legend", "selector", "inverse" ])
+    };
+  }
+};
+
+var we = /** @class */ function(t) {
+  h(LegendModel, t);
+  function LegendModel() {
+    var e = t !== null && t.apply(this, arguments) || this;
+    e.type = LegendModel.type;
+    e.layoutMode = {
+      type: "box",
+      // legend.width/height are maxWidth/maxHeight actually,
+      // whereas real width/height is calculated by its content.
+      // (Setting {left: 10, right: 10} does not make sense).
+      // So consider the case:
+      // `setOption({legend: {left: 10});`
+      // then `setOption({legend: {right: 10});`
+      // The previous `left` should be cleared by setting `ignoreSize`.
+      ignoreSize: true
+    };
+    return e;
+  }
+  LegendModel.prototype.init = function(t, e, i) {
+    this.mergeDefaultAndTheme(t, i);
+    t.selected = t.selected || {};
+    this._updateSelector(t);
+  };
+  LegendModel.prototype.mergeOption = function(e, i) {
+    t.prototype.mergeOption.call(this, e, i);
+    this._updateSelector(e);
+  };
+  LegendModel.prototype._updateSelector = function(t) {
+    var e = t.selector;
+    var i = this.ecModel;
+    if (e === true) {
+      e = t.selector = [ "all", "inverse" ];
+    }
+    if (w(e)) {
+      y(e, (function(t, r) {
+        f(t) && (t = {
+          type: t
+        });
+        e[r] = rt(t, getDefaultSelectorOptions(i, t.type));
+      }));
+    }
+  };
+  LegendModel.prototype.optionUpdated = function() {
+    this._updateData(this.ecModel);
+    var t = this._data;
+    // If selectedMode is single, try to select one
+        if (t[0] && this.get("selectedMode") === "single") {
+      var e = false;
+      // If has any selected in option.selected
+            for (var i = 0; i < t.length; i++) {
+        var r = t[i].get("name");
+        if (this.isSelected(r)) {
+          // Force to unselect others
+          this.select(r);
+          e = true;
+          break;
+        }
+      }
+      // Try select the first if selectedMode is single
+            !e && this.select(t[0].get("name"));
+    }
+  };
+  LegendModel.prototype._updateData = function(t) {
+    var e = [];
+    var i = [];
+    t.eachRawSeries((function(r) {
+      var a = r.name;
+      i.push(a);
+      var n;
+      if (r.legendVisualProvider) {
+        var o = r.legendVisualProvider;
+        var s = o.getAllNames();
+        if (!t.isSeriesFiltered(r)) {
+          i = i.concat(s);
+        }
+        if (s.length) {
+          e = e.concat(s);
+        } else {
+          n = true;
+        }
+      } else {
+        n = true;
+      }
+      if (n && at(r)) {
+        e.push(r.name);
+      }
+    }));
+    /**
+     * @type {Array.<string>}
+     * @private
+     */    this._availableNames = i;
+    // If legend.data is not specified in option, use availableNames as data,
+    // which is convenient for user preparing option.
+        var r = this.get("data") || e;
+    var a = nt();
+    var n = ot(r, (function(t) {
+      // Can be string or number
+      if (f(t) || lt(t)) {
+        t = {
+          name: t
+        };
+      }
+      if (a.get(t.name)) {
+        // remove legend name duplicate
+        return null;
+      }
+      a.set(t.name, true);
+      return new J(t, this, this.ecModel);
+    }), this);
+    /**
+     * @type {Array.<module:echarts/model/Model>}
+     * @private
+     */    this._data = st(n, (function(t) {
+      return !!t;
+    }));
+  };
+  LegendModel.prototype.getData = function() {
+    return this._data;
+  };
+  LegendModel.prototype.select = function(t) {
+    var e = this.option.selected;
+    var i = this.get("selectedMode");
+    if (i === "single") {
+      var r = this._data;
+      y(r, (function(t) {
+        e[t.get("name")] = false;
+      }));
+    }
+    e[t] = true;
+  };
+  LegendModel.prototype.unSelect = function(t) {
+    if (this.get("selectedMode") !== "single") {
+      this.option.selected[t] = false;
+    }
+  };
+  LegendModel.prototype.toggleSelected = function(t) {
+    var e = this.option.selected;
+    // Default is true
+        if (!e.hasOwnProperty(t)) {
+      e[t] = true;
+    }
+    this[e[t] ? "unSelect" : "select"](t);
+  };
+  LegendModel.prototype.allSelect = function() {
+    var t = this._data;
+    var e = this.option.selected;
+    y(t, (function(t) {
+      e[t.get("name", true)] = true;
+    }));
+  };
+  LegendModel.prototype.inverseSelect = function() {
+    var t = this._data;
+    var e = this.option.selected;
+    y(t, (function(t) {
+      var i = t.get("name", true);
+      // Initially, default value is true
+            if (!e.hasOwnProperty(i)) {
+        e[i] = true;
+      }
+      e[i] = !e[i];
+    }));
+  };
+  LegendModel.prototype.isSelected = function(t) {
+    var e = this.option.selected;
+    return !(e.hasOwnProperty(t) && !e[t]) && S(this._availableNames, t) >= 0;
+  };
+  LegendModel.prototype.getOrient = function() {
+    return this.get("orient") === "vertical" ? {
+      index: 1,
+      name: "vertical"
+    } : {
+      index: 0,
+      name: "horizontal"
+    };
+  };
+  LegendModel.type = "legend.plain";
+  LegendModel.dependencies = [ "series" ];
+  LegendModel.defaultOption = {
+    // zlevel: 0,
+    z: 4,
+    show: true,
+    orient: "horizontal",
+    left: "center",
+    // right: 'center',
+    top: 0,
+    // bottom: null,
+    align: "auto",
+    backgroundColor: "rgba(0,0,0,0)",
+    borderColor: "#ccc",
+    borderRadius: 0,
+    borderWidth: 0,
+    padding: 5,
+    itemGap: 10,
+    itemWidth: 25,
+    itemHeight: 14,
+    symbolRotate: "inherit",
+    symbolKeepAspect: true,
+    inactiveColor: "#ccc",
+    inactiveBorderColor: "#ccc",
+    inactiveBorderWidth: "auto",
+    itemStyle: {
+      color: "inherit",
+      opacity: "inherit",
+      borderColor: "inherit",
+      borderWidth: "auto",
+      borderCap: "inherit",
+      borderJoin: "inherit",
+      borderDashOffset: "inherit",
+      borderMiterLimit: "inherit"
+    },
+    lineStyle: {
+      width: "auto",
+      color: "inherit",
+      inactiveColor: "#ccc",
+      inactiveWidth: 2,
+      opacity: "inherit",
+      type: "inherit",
+      cap: "inherit",
+      join: "inherit",
+      dashOffset: "inherit",
+      miterLimit: "inherit"
+    },
+    textStyle: {
+      color: "#333"
+    },
+    selectedMode: true,
+    selector: false,
+    selectorLabel: {
+      show: true,
+      borderRadius: 10,
+      padding: [ 3, 5, 3, 5 ],
+      fontSize: 12,
+      fontFamily: "sans-serif",
+      color: "#666",
+      borderWidth: 1,
+      borderColor: "#666"
+    },
+    emphasis: {
+      selectorLabel: {
+        show: true,
+        color: "#eee",
+        backgroundColor: "#666"
+      }
+    },
+    selectorPosition: "auto",
+    selectorItemGap: 7,
+    selectorButtonGap: 10,
+    tooltip: {
+      show: false
+    }
+  };
+  return LegendModel;
+}(u);
+
+const ye = we;
+
+var xe = wt;
+
+var Se = y;
+
+var Te = yt;
+
+var Me = /** @class */ function(t) {
+  h(LegendView, t);
+  function LegendView() {
+    var e = t !== null && t.apply(this, arguments) || this;
+    e.type = LegendView.type;
+    e.newlineDisabled = false;
+    return e;
+  }
+  LegendView.prototype.init = function() {
+    this.group.add(this._contentGroup = new Te);
+    this.group.add(this._selectorGroup = new Te);
+    this._isFirstRender = true;
+  };
+  /**
+   * @protected
+   */  LegendView.prototype.getContentGroup = function() {
+    return this._contentGroup;
+  };
+  /**
+   * @protected
+   */  LegendView.prototype.getSelectorGroup = function() {
+    return this._selectorGroup;
+  };
+  /**
+   * @override
+   */  LegendView.prototype.render = function(t, e, i) {
+    var r = this._isFirstRender;
+    this._isFirstRender = false;
+    this.resetInner();
+    if (!t.get("show", true)) {
+      return;
+    }
+    var a = t.get("align");
+    var n = t.get("orient");
+    if (!a || a === "auto") {
+      a = t.get("left") === "right" && n === "vertical" ? "right" : "left";
+    }
+    // selector has been normalized to an array in model
+        var o = t.get("selector", true);
+    var s = t.get("selectorPosition", true);
+    if (o && (!s || s === "auto")) {
+      s = n === "horizontal" ? "end" : "start";
+    }
+    this.renderInner(a, t, e, i, o, n, s);
+    // Perform layout.
+        var l = t.getBoxLayoutParams();
+    var c = {
+      width: i.getWidth(),
+      height: i.getHeight()
+    };
+    var h = t.get("padding");
+    var u = _(l, c, h);
+    var v = this.layoutInner(t, a, u, r, o, s);
+    // Place mainGroup, based on the calculated `mainRect`.
+        var d = _(ct({
+      width: v.width,
+      height: v.height
+    }, l), c, h);
+    this.group.x = d.x - v.x;
+    this.group.y = d.y - v.y;
+    this.group.markRedraw();
+    // Render background after group is layout.
+        this.group.add(this._backgroundEl = makeBackground(v, t));
+  };
+  LegendView.prototype.resetInner = function() {
+    this.getContentGroup().removeAll();
+    this._backgroundEl && this.group.remove(this._backgroundEl);
+    this.getSelectorGroup().removeAll();
+  };
+  LegendView.prototype.renderInner = function(t, e, i, r, a, n, o) {
+    var s = this.getContentGroup();
+    var l = nt();
+    var c = e.get("selectedMode");
+    var h = [];
+    i.eachRawSeries((function(t) {
+      !t.get("legendHoverLink") && h.push(t.id);
+    }));
+    Se(e.getData(), (function(a, n) {
+      var o = a.get("name");
+      // Use empty string or \n as a newline string
+            if (!this.newlineDisabled && (o === "" || o === "\n")) {
+        var u = new Te;
+        // @ts-ignore
+                u.newline = true;
+        s.add(u);
+        return;
+      }
+      // Representitive series.
+            var v = i.getSeriesByName(o)[0];
+      if (l.get(o)) {
+        // Have been drawn
+        return;
+      }
+      // Legend to control series.
+            if (v) {
+        var d = v.getData();
+        var f = d.getVisual("legendLineStyle") || {};
+        var p = d.getVisual("legendIcon");
+        /**
+         * `data.getVisual('style')` may be the color from the register
+         * in series. For example, for line series,
+         */        var g = d.getVisual("style");
+        var b = this._createItem(v, o, n, a, e, t, f, g, p, c, r);
+        b.on("click", xe(dispatchSelectAction, o, null, r, h)).on("mouseover", xe(dispatchHighlightAction, v.name, null, r, h)).on("mouseout", xe(dispatchDownplayAction, v.name, null, r, h));
+        if (i.ssr) {
+          b.eachChild((function(t) {
+            var e = D(t);
+            e.seriesIndex = v.seriesIndex;
+            e.dataIndex = n;
+            e.ssrType = "legend";
+          }));
+        }
+        l.set(o, true);
+      } else {
+        // Legend to control data. In pie and funnel.
+        i.eachRawSeries((function(s) {
+          // In case multiple series has same data name
+          if (l.get(o)) {
+            return;
+          }
+          if (s.legendVisualProvider) {
+            var u = s.legendVisualProvider;
+            if (!u.containName(o)) {
+              return;
+            }
+            var v = u.indexOfName(o);
+            var d = u.getItemVisual(v, "style");
+            var f = u.getItemVisual(v, "legendIcon");
+            var p = ht(d.fill);
+            // Color may be set to transparent in visualMap when data is out of range.
+            // Do not show nothing.
+                        if (p && p[3] === 0) {
+              p[3] = .2;
+              // TODO color is set to 0, 0, 0, 0. Should show correct RGBA
+                            d = F(F({}, d), {
+                fill: ut(p, "rgba")
+              });
+            }
+            var g = this._createItem(s, o, n, a, e, t, {}, d, f, c, r);
+            // FIXME: consider different series has items with the same name.
+                        g.on("click", xe(dispatchSelectAction, null, o, r, h)).on("mouseover", xe(dispatchHighlightAction, null, o, r, h)).on("mouseout", xe(dispatchDownplayAction, null, o, r, h));
+            if (i.ssr) {
+              g.eachChild((function(t) {
+                var e = D(t);
+                e.seriesIndex = s.seriesIndex;
+                e.dataIndex = n;
+                e.ssrType = "legend";
+              }));
+            }
+            l.set(o, true);
+          }
+        }), this);
+      }
+    }), this);
+    if (a) {
+      this._createSelector(a, e, r, n, o);
+    }
+  };
+  LegendView.prototype._createSelector = function(t, e, i, r, a) {
+    var n = this.getSelectorGroup();
+    Se(t, (function createSelectorButton(t) {
+      var r = t.type;
+      var a = new I({
+        style: {
+          x: 0,
+          y: 0,
+          align: "center",
+          verticalAlign: "middle"
+        },
+        onclick: function() {
+          i.dispatchAction({
+            type: r === "all" ? "legendAllSelect" : "legendInverseSelect"
+          });
+        }
+      });
+      n.add(a);
+      var o = e.getModel("selectorLabel");
+      var s = e.getModel([ "emphasis", "selectorLabel" ]);
+      vt(a, {
+        normal: o,
+        emphasis: s
+      }, {
+        defaultText: t.title
+      });
+      dt(a);
+    }));
+  };
+  LegendView.prototype._createItem = function(t, e, i, r, a, n, o, s, l, h, u) {
+    var v = t.visualDrawType;
+    var d = a.get("itemWidth");
+    var p = a.get("itemHeight");
+    var b = a.isSelected(e);
+    var m = r.get("symbolRotate");
+    var w = r.get("symbolKeepAspect");
+    var y = r.get("icon");
+    l = y || l || "roundRect";
+    var x = getLegendStyle(l, r, o, s, v, b, u);
+    var S = new Te;
+    var T = r.getModel("textStyle");
+    if (g(t.getLegendIcon) && (!y || y === "inherit")) {
+      // Series has specific way to define legend icon
+      S.add(t.getLegendIcon({
+        itemWidth: d,
+        itemHeight: p,
+        icon: l,
+        iconRotate: m,
+        itemStyle: x.itemStyle,
+        lineStyle: x.lineStyle,
+        symbolKeepAspect: w
+      }));
+    } else {
+      // Use default legend icon policy for most series
+      var M = y === "inherit" && t.getData().getVisual("symbol") ? m === "inherit" ? t.getData().getVisual("symbolRotate") : m : 0;
+ // No rotation for no icon
+            S.add(getDefaultLegendIcon({
+        itemWidth: d,
+        itemHeight: p,
+        icon: l,
+        iconRotate: M,
+        itemStyle: x.itemStyle,
+        lineStyle: x.lineStyle,
+        symbolKeepAspect: w
+      }));
+    }
+    var L = n === "left" ? d + 5 : -5;
+    var C = n;
+    var A = a.get("formatter");
+    var P = e;
+    if (f(A) && A) {
+      P = A.replace("{name}", e != null ? e : "");
+    } else if (g(A)) {
+      P = A(e);
+    }
+    var k = b ? T.getTextColor() : r.get("inactiveColor");
+    S.add(new I({
+      style: ft(T, {
+        text: P,
+        x: L,
+        y: p / 2,
+        fill: k,
+        align: C,
+        verticalAlign: "middle"
+      }, {
+        inheritColor: k
+      })
+    }));
+    // Add a invisible rect to increase the area of mouse hover
+        var V = new c({
+      shape: S.getBoundingRect(),
+      style: {
+        // Cannot use 'invisible' because SVG SSR will miss the node
+        fill: "transparent"
+      }
+    });
+    var D = r.getModel("tooltip");
+    if (D.get("show")) {
+      pt({
+        el: V,
+        componentModel: a,
+        itemName: e,
+        itemTooltipOption: D.option
+      });
+    }
+    S.add(V);
+    S.eachChild((function(t) {
+      t.silent = true;
+    }));
+    V.silent = !h;
+    this.getContentGroup().add(S);
+    dt(S);
+    // @ts-ignore
+        S.__legendDataIndex = i;
+    return S;
+  };
+  LegendView.prototype.layoutInner = function(t, e, i, r, a, n) {
+    var o = this.getContentGroup();
+    var s = this.getSelectorGroup();
+    // Place items in contentGroup.
+        gt(t.get("orient"), o, t.get("itemGap"), i.width, i.height);
+    var l = o.getBoundingRect();
+    var c = [ -l.x, -l.y ];
+    s.markRedraw();
+    o.markRedraw();
+    if (a) {
+      // Place buttons in selectorGroup
+      gt(
+      // Buttons in selectorGroup always layout horizontally
+      "horizontal", s, t.get("selectorItemGap", true));
+      var h = s.getBoundingRect();
+      var u = [ -h.x, -h.y ];
+      var v = t.get("selectorButtonGap", true);
+      var d = t.getOrient().index;
+      var f = d === 0 ? "width" : "height";
+      var p = d === 0 ? "height" : "width";
+      var g = d === 0 ? "y" : "x";
+      if (n === "end") {
+        u[d] += l[f] + v;
+      } else {
+        c[d] += h[f] + v;
+      }
+      // Always align selector to content as 'middle'
+            u[1 - d] += l[p] / 2 - h[p] / 2;
+      s.x = u[0];
+      s.y = u[1];
+      o.x = c[0];
+      o.y = c[1];
+      var b = {
+        x: 0,
+        y: 0
+      };
+      b[f] = l[f] + v + h[f];
+      b[p] = Math.max(l[p], h[p]);
+      b[g] = Math.min(0, h[g] + u[1 - d]);
+      return b;
+    } else {
+      o.x = c[0];
+      o.y = c[1];
+      return this.group.getBoundingRect();
+    }
+  };
+  /**
+   * @protected
+   */  LegendView.prototype.remove = function() {
+    this.getContentGroup().removeAll();
+    this._isFirstRender = true;
+  };
+  LegendView.type = "legend.plain";
+  return LegendView;
+}(q);
+
+function getLegendStyle(t, e, i, r, a, n, o) {
+  /**
+   * Use series style if is inherit;
+   * elsewise, use legend style
+   */
+  function handleCommonProps(t, e) {
+    // If lineStyle.width is 'auto', it is set to be 2 if series has border
+    if (t.lineWidth === "auto") {
+      t.lineWidth = e.lineWidth > 0 ? 2 : 0;
+    }
+    Se(t, (function(i, r) {
+      t[r] === "inherit" && (t[r] = e[r]);
+    }));
+  }
+  // itemStyle
+    var s = e.getModel("itemStyle");
+  var l = s.getItemStyle();
+  var c = t.lastIndexOf("empty", 0) === 0 ? "fill" : "stroke";
+  var h = s.getShallow("decal");
+  l.decal = !h || h === "inherit" ? r.decal : bt(h, o);
+  if (l.fill === "inherit") {
+    /**
+     * Series with visualDrawType as 'stroke' should have
+     * series stroke as legend fill
+     */
+    l.fill = r[a];
+  }
+  if (l.stroke === "inherit") {
+    /**
+     * icon type with "emptyXXX" should use fill color
+     * in visual style
+     */
+    l.stroke = r[c];
+  }
+  if (l.opacity === "inherit") {
+    /**
+     * Use lineStyle.opacity if drawType is stroke
+     */
+    l.opacity = (a === "fill" ? r : i).opacity;
+  }
+  handleCommonProps(l, r);
+  // lineStyle
+    var u = e.getModel("lineStyle");
+  var v = u.getLineStyle();
+  handleCommonProps(v, i);
+  // Fix auto color to real color
+    l.fill === "auto" && (l.fill = r.fill);
+  l.stroke === "auto" && (l.stroke = r.fill);
+  v.stroke === "auto" && (v.stroke = r.fill);
+  if (!n) {
+    var d = e.get("inactiveBorderWidth");
+    /**
+     * Since stroke is set to be inactiveBorderColor, it may occur that
+     * there is no border in series but border in legend, so we need to
+     * use border only when series has border if is set to be auto
+     */    var f = l[c];
+    l.lineWidth = d === "auto" ? r.lineWidth > 0 && f ? 2 : 0 : l.lineWidth;
+    l.fill = e.get("inactiveColor");
+    l.stroke = e.get("inactiveBorderColor");
+    v.stroke = u.get("inactiveColor");
+    v.lineWidth = u.get("inactiveWidth");
+  }
+  return {
+    itemStyle: l,
+    lineStyle: v
+  };
+}
+
+function getDefaultLegendIcon(t) {
+  var e = t.icon || "roundRect";
+  var i = mt(e, 0, 0, t.itemWidth, t.itemHeight, t.itemStyle.fill, t.symbolKeepAspect);
+  i.setStyle(t.itemStyle);
+  i.rotation = (t.iconRotate || 0) * Math.PI / 180;
+  i.setOrigin([ t.itemWidth / 2, t.itemHeight / 2 ]);
+  if (e.indexOf("empty") > -1) {
+    i.style.stroke = i.style.fill;
+    i.style.fill = "#fff";
+    i.style.lineWidth = 2;
+  }
+  return i;
+}
+
+function dispatchSelectAction(t, e, i, r) {
+  // downplay before unselect
+  dispatchDownplayAction(t, e, i, r);
+  i.dispatchAction({
+    type: "legendToggleSelect",
+    name: t != null ? t : e
+  });
+  // highlight after select
+  // TODO highlight immediately may cause animation loss.
+    dispatchHighlightAction(t, e, i, r);
+}
+
+function isUseHoverLayer(t) {
+  var e = t.getZr().storage.getDisplayList();
+  var i;
+  var r = 0;
+  var a = e.length;
+  while (r < a && !(i = e[r].states.emphasis)) {
+    r++;
+  }
+  return i && i.hoverLayer;
+}
+
+function dispatchHighlightAction(t, e, i, r) {
+  // If element hover will move to a hoverLayer.
+  if (!isUseHoverLayer(i)) {
+    i.dispatchAction({
+      type: "highlight",
+      seriesName: t,
+      name: e,
+      excludeSeriesId: r
+    });
+  }
+}
+
+function dispatchDownplayAction(t, e, i, r) {
+  // If element hover will move to a hoverLayer.
+  if (!isUseHoverLayer(i)) {
+    i.dispatchAction({
+      type: "downplay",
+      seriesName: t,
+      name: e,
+      excludeSeriesId: r
+    });
+  }
+}
+
+const Le = Me;
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+/**
+ * AUTO-GENERATED FILE. DO NOT MODIFY.
+ */
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/ function legendFilter(t) {
+  var e = t.findComponents({
+    mainType: "legend"
+  });
+  if (e && e.length) {
+    t.filterSeries((function(t) {
+      // If in any legend component the status is not selected.
+      // Because in legend series is assumed selected when it is not in the legend data.
+      for (var i = 0; i < e.length; i++) {
+        if (!e[i].isSelected(t.name)) {
+          return false;
+        }
+      }
+      return true;
+    }));
+  }
+}
+
+function legendSelectActionHandler(t, e, i) {
+  var r = {};
+  var a = t === "toggleSelected";
+  var n;
+  // Update all legend components
+    i.eachComponent("legend", (function(i) {
+    if (a && n != null) {
+      // Force other legend has same selected status
+      // Or the first is toggled to true and other are toggled to false
+      // In the case one legend has some item unSelected in option. And if other legend
+      // doesn't has the item, they will assume it is selected.
+      i[n ? "select" : "unSelect"](e.name);
+    } else if (t === "allSelect" || t === "inverseSelect") {
+      i[t]();
+    } else {
+      i[t](e.name);
+      n = i.isSelected(e.name);
+    }
+    var o = i.getData();
+    y(o, (function(t) {
+      var e = t.get("name");
+      // Wrap element
+            if (e === "\n" || e === "") {
+        return;
+      }
+      var a = i.isSelected(e);
+      if (r.hasOwnProperty(e)) {
+        // Unselected if any legend is unselected
+        r[e] = r[e] && a;
+      } else {
+        r[e] = a;
+      }
+    }));
+  }));
+  // Return the event explicitly
+    return t === "allSelect" || t === "inverseSelect" ? {
+    selected: r
+  } : {
+    name: e.name,
+    selected: r
+  };
+}
+
+function installLegendAction(t) {
+  /**
+   * @event legendToggleSelect
+   * @type {Object}
+   * @property {string} type 'legendToggleSelect'
+   * @property {string} [from]
+   * @property {string} name Series name or data item name
+   */
+  t.registerAction("legendToggleSelect", "legendselectchanged", wt(legendSelectActionHandler, "toggleSelected"));
+  t.registerAction("legendAllSelect", "legendselectall", wt(legendSelectActionHandler, "allSelect"));
+  t.registerAction("legendInverseSelect", "legendinverseselect", wt(legendSelectActionHandler, "inverseSelect"));
+  /**
+   * @event legendSelect
+   * @type {Object}
+   * @property {string} type 'legendSelect'
+   * @property {string} name Series name or data item name
+   */  t.registerAction("legendSelect", "legendselected", wt(legendSelectActionHandler, "select"));
+  /**
+   * @event legendUnSelect
+   * @type {Object}
+   * @property {string} type 'legendUnSelect'
+   * @property {string} name Series name or data item name
+   */  t.registerAction("legendUnSelect", "legendunselected", wt(legendSelectActionHandler, "unSelect"));
+}
+
+function install$3(t) {
+  t.registerComponentModel(ye);
+  t.registerComponentView(Le);
+  t.registerProcessor(t.PRIORITY.PROCESSOR.SERIES_FILTER, legendFilter);
+  t.registerSubTypeDefaulter("legend", (function() {
+    return "plain";
+  }));
+  installLegendAction(t);
+}
+
+var Ce = /** @class */ function(t) {
+  h(ScrollableLegendModel, t);
+  function ScrollableLegendModel() {
+    var e = t !== null && t.apply(this, arguments) || this;
+    e.type = ScrollableLegendModel.type;
+    return e;
+  }
+  /**
+   * @param {number} scrollDataIndex
+   */  ScrollableLegendModel.prototype.setScrollDataIndex = function(t) {
+    this.option.scrollDataIndex = t;
+  };
+  ScrollableLegendModel.prototype.init = function(e, i, r) {
+    var a = xt(e);
+    t.prototype.init.call(this, e, i, r);
+    mergeAndNormalizeLayoutParams(this, e, a);
+  };
+  /**
+   * @override
+   */  ScrollableLegendModel.prototype.mergeOption = function(e, i) {
+    t.prototype.mergeOption.call(this, e, i);
+    mergeAndNormalizeLayoutParams(this, this.option, e);
+  };
+  ScrollableLegendModel.type = "legend.scroll";
+  ScrollableLegendModel.defaultOption = St(ye.defaultOption, {
+    scrollDataIndex: 0,
+    pageButtonItemGap: 5,
+    pageButtonGap: null,
+    pageButtonPosition: "end",
+    pageFormatter: "{current}/{total}",
+    pageIcons: {
+      horizontal: [ "M0,0L12,-10L12,10z", "M0,0L-12,-10L-12,10z" ],
+      vertical: [ "M0,0L20,0L10,-20z", "M0,0L20,0L10,20z" ]
+    },
+    pageIconColor: "#2f4554",
+    pageIconInactiveColor: "#aaa",
+    pageIconSize: 15,
+    pageTextStyle: {
+      color: "#333"
+    },
+    animationDurationUpdate: 800
+  });
+  return ScrollableLegendModel;
+}(ye);
+
+// Do not `ignoreSize` to enable setting {left: 10, right: 10}.
+function mergeAndNormalizeLayoutParams(t, e, i) {
+  var r = t.getOrient();
+  var a = [ 1, 1 ];
+  a[r.index] = 0;
+  Tt(e, i, {
+    type: "box",
+    ignoreSize: !!a
+  });
+}
+
+const Ie = Ce;
+
+var Ae = yt;
+
+var Pe = [ "width", "height" ];
+
+var ke = [ "x", "y" ];
+
+var Ve = /** @class */ function(t) {
+  h(ScrollableLegendView, t);
+  function ScrollableLegendView() {
+    var e = t !== null && t.apply(this, arguments) || this;
+    e.type = ScrollableLegendView.type;
+    e.newlineDisabled = true;
+    e._currentIndex = 0;
+    return e;
+  }
+  ScrollableLegendView.prototype.init = function() {
+    t.prototype.init.call(this);
+    this.group.add(this._containerGroup = new Ae);
+    this._containerGroup.add(this.getContentGroup());
+    this.group.add(this._controllerGroup = new Ae);
+  };
+  /**
+   * @override
+   */  ScrollableLegendView.prototype.resetInner = function() {
+    t.prototype.resetInner.call(this);
+    this._controllerGroup.removeAll();
+    this._containerGroup.removeClipPath();
+    this._containerGroup.__rectSize = null;
+  };
+  /**
+   * @override
+   */  ScrollableLegendView.prototype.renderInner = function(e, i, r, a, n, o, s) {
+    var l = this;
+    // Render content items.
+        t.prototype.renderInner.call(this, e, i, r, a, n, o, s);
+    var c = this._controllerGroup;
+    // FIXME: support be 'auto' adapt to size number text length,
+    // e.g., '3/12345' should not overlap with the control arrow button.
+        var h = i.get("pageIconSize", true);
+    var u = w(h) ? h : [ h, h ];
+    createPageButton("pagePrev", 0);
+    var v = i.getModel("pageTextStyle");
+    c.add(new I({
+      name: "pageText",
+      style: {
+        // Placeholder to calculate a proper layout.
+        text: "xx/xx",
+        fill: v.getTextColor(),
+        font: v.getFont(),
+        verticalAlign: "middle",
+        align: "center"
+      },
+      silent: true
+    }));
+    createPageButton("pageNext", 1);
+    function createPageButton(t, e) {
+      var r = t + "DataIndex";
+      var n = Mt(i.get("pageIcons", true)[i.getOrient().name][e], {
+        // Buttons will be created in each render, so we do not need
+        // to worry about avoiding using legendModel kept in scope.
+        onclick: x(l._pageGo, l, r, i, a)
+      }, {
+        x: -u[0] / 2,
+        y: -u[1] / 2,
+        width: u[0],
+        height: u[1]
+      });
+      n.name = t;
+      c.add(n);
+    }
+  };
+  /**
+   * @override
+   */  ScrollableLegendView.prototype.layoutInner = function(t, e, i, r, a, n) {
+    var o = this.getSelectorGroup();
+    var s = t.getOrient().index;
+    var l = Pe[s];
+    var c = ke[s];
+    var h = Pe[1 - s];
+    var u = ke[1 - s];
+    a && gt(
+    // Buttons in selectorGroup always layout horizontally
+    "horizontal", o, t.get("selectorItemGap", true));
+    var v = t.get("selectorButtonGap", true);
+    var d = o.getBoundingRect();
+    var f = [ -d.x, -d.y ];
+    var p = $(i);
+    a && (p[l] = i[l] - d[l] - v);
+    var g = this._layoutContentAndController(t, r, p, s, l, h, u, c);
+    if (a) {
+      if (n === "end") {
+        f[s] += g[l] + v;
+      } else {
+        var b = d[l] + v;
+        f[s] -= b;
+        g[c] -= b;
+      }
+      g[l] += d[l] + v;
+      f[1 - s] += g[u] + g[h] / 2 - d[h] / 2;
+      g[h] = Math.max(g[h], d[h]);
+      g[u] = Math.min(g[u], d[u] + f[1 - s]);
+      o.x = f[0];
+      o.y = f[1];
+      o.markRedraw();
+    }
+    return g;
+  };
+  ScrollableLegendView.prototype._layoutContentAndController = function(t, e, i, r, a, n, o, s) {
+    var l = this.getContentGroup();
+    var h = this._containerGroup;
+    var u = this._controllerGroup;
+    // Place items in contentGroup.
+        gt(t.get("orient"), l, t.get("itemGap"), !r ? null : i.width, r ? null : i.height);
+    gt(
+    // Buttons in controller are layout always horizontally.
+    "horizontal", u, t.get("pageButtonItemGap", true));
+    var v = l.getBoundingRect();
+    var d = u.getBoundingRect();
+    var f = this._showController = v[a] > i[a];
+    // In case that the inner elements of contentGroup layout do not based on [0, 0]
+        var p = [ -v.x, -v.y ];
+    // Remain contentPos when scroll animation perfroming.
+    // If first rendering, `contentGroup.position` is [0, 0], which
+    // does not make sense and may cause unexepcted animation if adopted.
+        if (!e) {
+      p[r] = l[s];
+    }
+    // Layout container group based on 0.
+        var g = [ 0, 0 ];
+    var b = [ -d.x, -d.y ];
+    var m = Lt(t.get("pageButtonGap", true), t.get("itemGap", true));
+    // Place containerGroup and controllerGroup and contentGroup.
+        if (f) {
+      var w = t.get("pageButtonPosition", true);
+      // controller is on the right / bottom.
+            if (w === "end") {
+        b[r] += i[a] - d[a];
+      }
+      // controller is on the left / top.
+       else {
+        g[r] += d[a] + m;
+      }
+    }
+    // Always align controller to content as 'middle'.
+        b[1 - r] += v[n] / 2 - d[n] / 2;
+    l.setPosition(p);
+    h.setPosition(g);
+    u.setPosition(b);
+    // Calculate `mainRect` and set `clipPath`.
+    // mainRect should not be calculated by `this.group.getBoundingRect()`
+    // for sake of the overflow.
+        var y = {
+      x: 0,
+      y: 0
+    };
+    // Consider content may be overflow (should be clipped).
+        y[a] = f ? i[a] : v[a];
+    y[n] = Math.max(v[n], d[n]);
+    // `containerRect[yx] + containerPos[1 - orientIdx]` is 0.
+        y[o] = Math.min(0, d[o] + b[1 - r]);
+    h.__rectSize = i[a];
+    if (f) {
+      var x = {
+        x: 0,
+        y: 0
+      };
+      x[a] = Math.max(i[a] - d[a] - m, 0);
+      x[n] = y[n];
+      h.setClipPath(new c({
+        shape: x
+      }));
+      // Consider content may be larger than container, container rect
+      // can not be obtained from `containerGroup.getBoundingRect()`.
+            h.__rectSize = x[a];
+    } else {
+      // Do not remove or ignore controller. Keep them set as placeholders.
+      u.eachChild((function(t) {
+        t.attr({
+          invisible: true,
+          silent: true
+        });
+      }));
+    }
+    // Content translate animation.
+        var S = this._getPageInfo(t);
+    S.pageIndex != null && Ct(l, {
+      x: S.contentPosition[0],
+      y: S.contentPosition[1]
+    }, 
+    // When switch from "show controller" to "not show controller", view should be
+    // updated immediately without animation, otherwise causes weird effect.
+    f ? t : null);
+    this._updatePageInfoView(t, S);
+    return y;
+  };
+  ScrollableLegendView.prototype._pageGo = function(t, e, i) {
+    var r = this._getPageInfo(e)[t];
+    r != null && i.dispatchAction({
+      type: "legendScroll",
+      scrollDataIndex: r,
+      legendId: e.id
+    });
+  };
+  ScrollableLegendView.prototype._updatePageInfoView = function(t, e) {
+    var i = this._controllerGroup;
+    y([ "pagePrev", "pageNext" ], (function(r) {
+      var a = r + "DataIndex";
+      var n = e[a] != null;
+      var o = i.childOfName(r);
+      if (o) {
+        o.setStyle("fill", n ? t.get("pageIconColor", true) : t.get("pageIconInactiveColor", true));
+        o.cursor = n ? "pointer" : "default";
+      }
+    }));
+    var r = i.childOfName("pageText");
+    var a = t.get("pageFormatter");
+    var n = e.pageIndex;
+    var o = n != null ? n + 1 : 0;
+    var s = e.pageCount;
+    r && a && r.setStyle("text", f(a) ? a.replace("{current}", o == null ? "" : o + "").replace("{total}", s == null ? "" : s + "") : a({
+      current: o,
+      total: s
+    }));
+  };
+  /**
+   *  contentPosition: Array.<number>, null when data item not found.
+   *  pageIndex: number, null when data item not found.
+   *  pageCount: number, always be a number, can be 0.
+   *  pagePrevDataIndex: number, null when no previous page.
+   *  pageNextDataIndex: number, null when no next page.
+   * }
+   */  ScrollableLegendView.prototype._getPageInfo = function(t) {
+    var e = t.get("scrollDataIndex", true);
+    var i = this.getContentGroup();
+    var r = this._containerGroup.__rectSize;
+    var a = t.getOrient().index;
+    var n = Pe[a];
+    var o = ke[a];
+    var s = this._findTargetItemIndex(e);
+    var l = i.children();
+    var c = l[s];
+    var h = l.length;
+    var u = !h ? 0 : 1;
+    var v = {
+      contentPosition: [ i.x, i.y ],
+      pageCount: u,
+      pageIndex: u - 1,
+      pagePrevDataIndex: null,
+      pageNextDataIndex: null
+    };
+    if (!c) {
+      return v;
+    }
+    var d = getItemInfo(c);
+    v.contentPosition[a] = -d.s;
+    // Strategy:
+    // (1) Always align based on the left/top most item.
+    // (2) It is user-friendly that the last item shown in the
+    // current window is shown at the begining of next window.
+    // Otherwise if half of the last item is cut by the window,
+    // it will have no chance to display entirely.
+    // (3) Consider that item size probably be different, we
+    // have calculate pageIndex by size rather than item index,
+    // and we can not get page index directly by division.
+    // (4) The window is to narrow to contain more than
+    // one item, we should make sure that the page can be fliped.
+        for (var f = s + 1, p = d, g = d, b = null; f <= h; ++f) {
+      b = getItemInfo(l[f]);
+      if (
+      // Half of the last item is out of the window.
+      !b && g.e > p.s + r || b && !intersect(b, p.s)) {
+        if (g.i > p.i) {
+          p = g;
+        } else {
+          // e.g., when page size is smaller than item size.
+          p = b;
+        }
+        if (p) {
+          if (v.pageNextDataIndex == null) {
+            v.pageNextDataIndex = p.i;
+          }
+          ++v.pageCount;
+        }
+      }
+      g = b;
+    }
+    for (var f = s - 1, p = d, g = d, b = null; f >= -1; --f) {
+      b = getItemInfo(l[f]);
+      if (
+      // If the the end item does not intersect with the window started
+      // from the current item, a page can be settled.
+      (!b || !intersect(g, b.s)) && p.i < g.i) {
+        g = p;
+        if (v.pagePrevDataIndex == null) {
+          v.pagePrevDataIndex = p.i;
+        }
+        ++v.pageCount;
+        ++v.pageIndex;
+      }
+      p = b;
+    }
+    return v;
+    function getItemInfo(t) {
+      if (t) {
+        var e = t.getBoundingRect();
+        var i = e[o] + t[o];
+        return {
+          s: i,
+          e: i + e[n],
+          i: t.__legendDataIndex
+        };
+      }
+    }
+    function intersect(t, e) {
+      return t.e >= e && t.s <= e + r;
+    }
+  };
+  ScrollableLegendView.prototype._findTargetItemIndex = function(t) {
+    if (!this._showController) {
+      return 0;
+    }
+    var e;
+    var i = this.getContentGroup();
+    var r;
+    i.eachChild((function(i, a) {
+      var n = i.__legendDataIndex;
+      // FIXME
+      // If the given targetDataIndex (from model) is illegal,
+      // we use defaultIndex. But the index on the legend model and
+      // action payload is still illegal. That case will not be
+      // changed until some scenario requires.
+            if (r == null && n != null) {
+        r = a;
+      }
+      if (n === t) {
+        e = a;
+      }
+    }));
+    return e != null ? e : r;
+  };
+  ScrollableLegendView.type = "legend.scroll";
+  return ScrollableLegendView;
+}(Le);
+
+const De = Ve;
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+/**
+ * AUTO-GENERATED FILE. DO NOT MODIFY.
+ */
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/ function installScrollableLegendAction(t) {
+  /**
+   * @event legendScroll
+   * @type {Object}
+   * @property {string} type 'legendScroll'
+   * @property {string} scrollDataIndex
+   */
+  t.registerAction("legendScroll", "legendscroll", (function(t, e) {
+    var i = t.scrollDataIndex;
+    i != null && e.eachComponent({
+      mainType: "legend",
+      subType: "scroll",
+      query: t
+    }, (function(t) {
+      t.setScrollDataIndex(i);
+    }));
+  }));
+}
+
+function install$2(t) {
+  tt(install$3);
+  t.registerComponentModel(Ie);
+  t.registerComponentView(De);
+  installScrollableLegendAction(t);
+}
+
+function install$1(t) {
+  tt(install$3);
+  tt(install$2);
+}
+
+var ze = Math.PI * 2;
+
+var Oe = Math.PI / 180;
+
+function getViewRect(t, e) {
+  return _(t.getBoxLayoutParams(), {
+    width: e.getWidth(),
+    height: e.getHeight()
+  });
+}
+
+function getBasicPieLayout(t, e) {
+  var i = getViewRect(t, e);
+  // center can be string or number when coordinateSystem is specified
+    var r = t.get("center");
+  var a = t.get("radius");
+  if (!w(a)) {
+    a = [ 0, a ];
+  }
+  var n = E(i.width, e.getWidth());
+  var o = E(i.height, e.getHeight());
+  var s = Math.min(n, o);
+  var l = E(a[0], s / 2);
+  var c = E(a[1], s / 2);
+  var h;
+  var u;
+  var v = t.coordinateSystem;
+  if (v) {
+    // percentage is not allowed when coordinate system is specified
+    var d = v.dataToPoint(r);
+    h = d[0] || 0;
+    u = d[1] || 0;
+  } else {
+    if (!w(r)) {
+      r = [ r, r ];
+    }
+    h = E(r[0], n) + i.x;
+    u = E(r[1], o) + i.y;
+  }
+  return {
+    cx: h,
+    cy: u,
+    r0: l,
+    r: c
+  };
+}
+
+function pieLayout(t, e, i) {
+  e.eachSeriesByType(t, (function(t) {
+    var e = t.getData();
+    var r = e.mapDimension("value");
+    var a = getViewRect(t, i);
+    var n = getBasicPieLayout(t, i), o = n.cx, s = n.cy, l = n.r, c = n.r0;
+    var h = -t.get("startAngle") * Oe;
+    var u = t.get("endAngle");
+    var v = t.get("padAngle") * Oe;
+    u = u === "auto" ? h - ze : -u * Oe;
+    var d = t.get("minAngle") * Oe;
+    var f = d + v;
+    var p = 0;
+    e.each(r, (function(t) {
+      !isNaN(t) && p++;
+    }));
+    var g = e.getSum(r);
+    // Sum may be 0
+        var b = Math.PI / (g || p) * 2;
+    var m = t.get("clockwise");
+    var w = t.get("roseType");
+    var y = t.get("stillShowZeroSum");
+    // [0...max]
+        var x = e.getDataExtent(r);
+    x[0] = 0;
+    var S = m ? 1 : -1;
+    var T = [ h, u ];
+    var M = S * v / 2;
+    It(T, !m);
+    h = T[0], u = T[1];
+    var L = Ne(t);
+    L.startAngle = h;
+    L.endAngle = u;
+    L.clockwise = m;
+    var C = Math.abs(u - h);
+    // In the case some sector angle is smaller than minAngle
+        var I = C;
+    var A = 0;
+    var P = h;
+    e.setLayout({
+      viewRect: a,
+      r: l
+    });
+    e.each(r, (function(t, i) {
+      var r;
+      if (isNaN(t)) {
+        e.setItemLayout(i, {
+          angle: NaN,
+          startAngle: NaN,
+          endAngle: NaN,
+          clockwise: m,
+          cx: o,
+          cy: s,
+          r0: c,
+          r: w ? NaN : l
+        });
+        return;
+      }
+      // FIXME 兼容 2.0 但是 roseType 是 area 的时候才是这样？
+            if (w !== "area") {
+        r = g === 0 && y ? b : t * b;
+      } else {
+        r = C / p;
+      }
+      if (r < f) {
+        r = f;
+        I -= f;
+      } else {
+        A += t;
+      }
+      var a = P + S * r;
+      // calculate display angle
+            var n = 0;
+      var h = 0;
+      if (v > r) {
+        n = P + S * r / 2;
+        h = n;
+      } else {
+        n = P + M;
+        h = a - M;
+      }
+      e.setItemLayout(i, {
+        angle: r,
+        startAngle: n,
+        endAngle: h,
+        clockwise: m,
+        cx: o,
+        cy: s,
+        r0: c,
+        r: w ? At(t, x, [ c, l ]) : l
+      });
+      P = a;
+    }));
+    // Some sector is constrained by minAngle and padAngle
+    // Rest sectors needs recalculate angle
+        if (I < ze && p) {
+      // Average the angle if rest angle is not enough after all angles is
+      // Constrained by minAngle and padAngle
+      if (I <= .001) {
+        var k = C / p;
+        e.each(r, (function(t, i) {
+          if (!isNaN(t)) {
+            var r = e.getItemLayout(i);
+            r.angle = k;
+            var a = 0;
+            var n = 0;
+            if (k < v) {
+              a = h + S * (i + 1 / 2) * k;
+              n = a;
+            } else {
+              a = h + S * i * k + M;
+              n = h + S * (i + 1) * k - M;
+            }
+            r.startAngle = a;
+            r.endAngle = n;
+          }
+        }));
+      } else {
+        b = I / A;
+        P = h;
+        e.each(r, (function(t, i) {
+          if (!isNaN(t)) {
+            var r = e.getItemLayout(i);
+            var a = r.angle === f ? f : t * b;
+            var n = 0;
+            var o = 0;
+            if (a < v) {
+              n = P + S * a / 2;
+              o = n;
+            } else {
+              n = P + M;
+              o = P + S * a - M;
+            }
+            r.startAngle = n;
+            r.endAngle = o;
+            P += S * a;
+          }
+        }));
+      }
+    }
+  }));
+}
+
+var Ne = Pt();
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+/**
+ * AUTO-GENERATED FILE. DO NOT MODIFY.
+ */
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/ function dataFilter(t) {
+  return {
+    seriesType: t,
+    reset: function(t, e) {
+      var i = e.findComponents({
+        mainType: "legend"
+      });
+      if (!i || !i.length) {
+        return;
+      }
+      var r = t.getData();
+      r.filterSelf((function(t) {
+        var e = r.getName(t);
+        // If in any legend component the status is not selected.
+                for (var a = 0; a < i.length; a++) {
+          // @ts-ignore FIXME: LegendModel
+          if (!i[a].isSelected(e)) {
+            return false;
+          }
+        }
+        return true;
+      }));
+    }
+  };
+}
+
+var Re = Math.PI / 180;
+
+function adjustSingleSide(t, e, i, r, a, n, o, s, l, c) {
+  if (t.length < 2) {
+    return;
+  }
+  function recalculateXOnSemiToAlignOnEllipseCurve(t) {
+    var n = t.rB;
+    var o = n * n;
+    for (var s = 0; s < t.list.length; s++) {
+      var l = t.list[s];
+      var c = Math.abs(l.label.y - i);
+      // horizontal r is always same with original r because x is not changed.
+            var h = r + l.len;
+      var u = h * h;
+      // Use ellipse implicit function to calculate x
+            var v = Math.sqrt((1 - Math.abs(c * c / o)) * u);
+      var d = e + (v + l.len2) * a;
+      var f = d - l.label.x;
+      var p = l.targetTextWidth - f * a;
+      // text x is changed, so need to recalculate width.
+            constrainTextWidth(l, p, true);
+      l.label.x = d;
+    }
+  }
+  // Adjust X based on the shifted y. Make tight labels aligned on an ellipse curve.
+    function recalculateX(t) {
+    // Extremes of
+    var n = {
+      list: [],
+      maxY: 0
+    };
+    var o = {
+      list: [],
+      maxY: 0
+    };
+    for (var s = 0; s < t.length; s++) {
+      if (t[s].labelAlignTo !== "none") {
+        continue;
+      }
+      var l = t[s];
+      var c = l.label.y > i ? o : n;
+      var h = Math.abs(l.label.y - i);
+      if (h >= c.maxY) {
+        var u = l.label.x - e - l.len2 * a;
+        // horizontal r is always same with original r because x is not changed.
+                var v = r + l.len;
+        // Canculate rB based on the topest / bottemest label.
+                var d = Math.abs(u) < v ? Math.sqrt(h * h / (1 - u * u / v / v)) : v;
+        c.rB = d;
+        c.maxY = h;
+      }
+      c.list.push(l);
+    }
+    recalculateXOnSemiToAlignOnEllipseCurve(n);
+    recalculateXOnSemiToAlignOnEllipseCurve(o);
+  }
+  var h = t.length;
+  for (var u = 0; u < h; u++) {
+    if (t[u].position === "outer" && t[u].labelAlignTo === "labelLine") {
+      var v = t[u].label.x - c;
+      t[u].linePoints[1][0] += v;
+      t[u].label.x = c;
+    }
+  }
+  if (Vt(t, l, l + o)) {
+    recalculateX(t);
+  }
+}
+
+function avoidOverlap(t, e, i, r, a, n, o, s) {
+  var l = [];
+  var c = [];
+  var h = Number.MAX_VALUE;
+  var u = -Number.MAX_VALUE;
+  for (var v = 0; v < t.length; v++) {
+    var d = t[v].label;
+    if (isPositionCenter(t[v])) {
+      continue;
+    }
+    if (d.x < e) {
+      h = Math.min(h, d.x);
+      l.push(t[v]);
+    } else {
+      u = Math.max(u, d.x);
+      c.push(t[v]);
+    }
+  }
+  for (var v = 0; v < t.length; v++) {
+    var f = t[v];
+    if (!isPositionCenter(f) && f.linePoints) {
+      if (f.labelStyleWidth != null) {
+        continue;
+      }
+      var d = f.label;
+      var p = f.linePoints;
+      var g = void 0;
+      if (f.labelAlignTo === "edge") {
+        if (d.x < e) {
+          g = p[2][0] - f.labelDistance - o - f.edgeDistance;
+        } else {
+          g = o + a - f.edgeDistance - p[2][0] - f.labelDistance;
+        }
+      } else if (f.labelAlignTo === "labelLine") {
+        if (d.x < e) {
+          g = h - o - f.bleedMargin;
+        } else {
+          g = o + a - u - f.bleedMargin;
+        }
+      } else {
+        if (d.x < e) {
+          g = d.x - o - f.bleedMargin;
+        } else {
+          g = o + a - d.x - f.bleedMargin;
+        }
+      }
+      f.targetTextWidth = g;
+      constrainTextWidth(f, g);
+    }
+  }
+  adjustSingleSide(c, e, i, r, 1, a, n, o, s, u);
+  adjustSingleSide(l, e, i, r, -1, a, n, o, s, h);
+  for (var v = 0; v < t.length; v++) {
+    var f = t[v];
+    if (!isPositionCenter(f) && f.linePoints) {
+      var d = f.label;
+      var p = f.linePoints;
+      var b = f.labelAlignTo === "edge";
+      var m = d.style.padding;
+      var w = m ? m[1] + m[3] : 0;
+      // textRect.width already contains paddingH if bgColor is set
+            var y = d.style.backgroundColor ? 0 : w;
+      var x = f.rect.width + y;
+      var S = p[1][0] - p[2][0];
+      if (b) {
+        if (d.x < e) {
+          p[2][0] = o + f.edgeDistance + x + f.labelDistance;
+        } else {
+          p[2][0] = o + a - f.edgeDistance - x - f.labelDistance;
+        }
+      } else {
+        if (d.x < e) {
+          p[2][0] = d.x + f.labelDistance;
+        } else {
+          p[2][0] = d.x - f.labelDistance;
+        }
+        p[1][0] = p[2][0] + S;
+      }
+      p[1][1] = p[2][1] = d.y;
+    }
+  }
+}
+
+/**
+ * Set max width of each label, and then wrap each label to the max width.
+ *
+ * @param layout label layout
+ * @param availableWidth max width for the label to display
+ * @param forceRecalculate recaculate the text layout even if the current width
+ * is smaller than `availableWidth`. This is useful when the text was previously
+ * wrapped by calling `constrainTextWidth` but now `availableWidth` changed, in
+ * which case, previous wrapping should be redo.
+ */ function constrainTextWidth(t, e, i) {
+  if (i === void 0) {
+    i = false;
+  }
+  if (t.labelStyleWidth != null) {
+    // User-defined style.width has the highest priority.
+    return;
+  }
+  var r = t.label;
+  var a = r.style;
+  var n = t.rect;
+  var o = a.backgroundColor;
+  var s = a.padding;
+  var l = s ? s[1] + s[3] : 0;
+  var c = a.overflow;
+  // textRect.width already contains paddingH if bgColor is set
+    var h = n.width + (o ? 0 : l);
+  if (e < h || i) {
+    var u = n.height;
+    if (c && c.match("break")) {
+      // Temporarily set background to be null to calculate
+      // the bounding box without background.
+      r.setStyle("backgroundColor", null);
+      // Set constraining width
+            r.setStyle("width", e - l);
+      // This is the real bounding box of the text without padding.
+            var v = r.getBoundingRect();
+      r.setStyle("width", Math.ceil(v.width));
+      r.setStyle("backgroundColor", o);
+    } else {
+      var d = e - l;
+      var f = e < h ? d : 
+      // Current available width is enough, but the text may have
+      // already been wrapped with a smaller available width.
+      i ? d > t.unconstrainedWidth ? null : d : null;
+      r.setStyle("width", f);
+    }
+    var p = r.getBoundingRect();
+    n.width = p.width;
+    var g = (r.style.margin || 0) + 2.1;
+    n.height = p.height + g;
+    n.y -= (n.height - u) / 2;
+  }
+}
+
+function isPositionCenter(t) {
+  // Not change x for center label
+  return t.position === "center";
+}
+
+function pieLabelLayout(t) {
+  var e = t.getData();
+  var i = [];
+  var r;
+  var a;
+  var n = false;
+  var o = (t.get("minShowLabelAngle") || 0) * Re;
+  var s = e.getLayout("viewRect");
+  var l = e.getLayout("r");
+  var c = s.width;
+  var h = s.x;
+  var u = s.y;
+  var v = s.height;
+  function setNotShow(t) {
+    t.ignore = true;
+  }
+  function isLabelShown(t) {
+    if (!t.ignore) {
+      return true;
+    }
+    for (var e in t.states) {
+      if (t.states[e].ignore === false) {
+        return true;
+      }
+    }
+    return false;
+  }
+  e.each((function(t) {
+    var s = e.getItemGraphicEl(t);
+    var u = s.shape;
+    var v = s.getTextContent();
+    var d = s.getTextGuideLine();
+    var f = e.getItemModel(t);
+    var p = f.getModel("label");
+    // Use position in normal or emphasis
+        var g = p.get("position") || f.get([ "emphasis", "label", "position" ]);
+    var b = p.get("distanceToLabelLine");
+    var m = p.get("alignTo");
+    var w = E(p.get("edgeDistance"), c);
+    var x = p.get("bleedMargin");
+    var S = f.getModel("labelLine");
+    var T = S.get("length");
+    T = E(T, c);
+    var M = S.get("length2");
+    M = E(M, c);
+    if (Math.abs(u.endAngle - u.startAngle) < o) {
+      y(v.states, setNotShow);
+      v.ignore = true;
+      if (d) {
+        y(d.states, setNotShow);
+        d.ignore = true;
+      }
+      return;
+    }
+    if (!isLabelShown(v)) {
+      return;
+    }
+    var L = (u.startAngle + u.endAngle) / 2;
+    var C = Math.cos(L);
+    var I = Math.sin(L);
+    var A;
+    var P;
+    var k;
+    var V;
+    r = u.cx;
+    a = u.cy;
+    var D = g === "inside" || g === "inner";
+    if (g === "center") {
+      A = u.cx;
+      P = u.cy;
+      V = "center";
+    } else {
+      var z = (D ? (u.r + u.r0) / 2 * C : u.r * C) + r;
+      var O = (D ? (u.r + u.r0) / 2 * I : u.r * I) + a;
+      A = z + C * 3;
+      P = O + I * 3;
+      if (!D) {
+        // For roseType
+        var N = z + C * (T + l - u.r);
+        var R = O + I * (T + l - u.r);
+        var B = N + (C < 0 ? -1 : 1) * M;
+        var H = R;
+        if (m === "edge") {
+          // Adjust textX because text align of edge is opposite
+          A = C < 0 ? h + w : h + c - w;
+        } else {
+          A = B + (C < 0 ? -b : b);
+        }
+        P = H;
+        k = [ [ z, O ], [ N, R ], [ B, H ] ];
+      }
+      V = D ? "center" : m === "edge" ? C > 0 ? "right" : "left" : C > 0 ? "left" : "right";
+    }
+    var W = Math.PI;
+    var U = 0;
+    var F = p.get("rotate");
+    if (lt(F)) {
+      U = F * (W / 180);
+    } else if (g === "center") {
+      U = 0;
+    } else if (F === "radial" || F === true) {
+      var j = C < 0 ? -L + W : -L;
+      U = j;
+    } else if (F === "tangential" && g !== "outside" && g !== "outer") {
+      var $ = Math.atan2(C, I);
+      if ($ < 0) {
+        $ = W * 2 + $;
+      }
+      var X = I > 0;
+      if (X) {
+        $ = W + $;
+      }
+      U = $ - W;
+    }
+    n = !!U;
+    v.x = A;
+    v.y = P;
+    v.rotation = U;
+    v.setStyle({
+      verticalAlign: "middle"
+    });
+    // Not sectorShape the inside label
+        if (!D) {
+      var G = v.getBoundingRect().clone();
+      G.applyTransform(v.getComputedTransform());
+      // Text has a default 1px stroke. Exclude this.
+            var Y = (v.style.margin || 0) + 2.1;
+      G.y -= Y / 2;
+      G.height += Y;
+      i.push({
+        label: v,
+        labelLine: d,
+        position: g,
+        len: T,
+        len2: M,
+        minTurnAngle: S.get("minTurnAngle"),
+        maxSurfaceAngle: S.get("maxSurfaceAngle"),
+        surfaceNormal: new kt(C, I),
+        linePoints: k,
+        textAlign: V,
+        labelDistance: b,
+        labelAlignTo: m,
+        edgeDistance: w,
+        bleedMargin: x,
+        rect: G,
+        unconstrainedWidth: G.width,
+        labelStyleWidth: v.style.width
+      });
+    } else {
+      v.setStyle({
+        align: V
+      });
+      var _ = v.states.select;
+      if (_) {
+        _.x += v.x;
+        _.y += v.y;
+      }
+    }
+    s.setTextConfig({
+      inside: D
+    });
+  }));
+  if (!n && t.get("avoidLabelOverlap")) {
+    avoidOverlap(i, r, a, l, c, v, h, u);
+  }
+  for (var d = 0; d < i.length; d++) {
+    var f = i[d];
+    var p = f.label;
+    var g = f.labelLine;
+    var b = isNaN(p.x) || isNaN(p.y);
+    if (p) {
+      p.setStyle({
+        align: f.textAlign
+      });
+      if (b) {
+        y(p.states, setNotShow);
+        p.ignore = true;
+      }
+      var m = p.states.select;
+      if (m) {
+        m.x += p.x;
+        m.y += p.y;
+      }
+    }
+    if (g) {
+      var w = f.linePoints;
+      if (b || !w) {
+        y(g.states, setNotShow);
+        g.ignore = true;
+      } else {
+        Qt(w, f.minTurnAngle);
+        te(w, f.surfaceNormal, f.maxSurfaceAngle);
+        g.setShape({
+          points: w
+        });
+        // Set the anchor to the midpoint of sector
+                p.__hostTarget.textGuideLineConfig = {
+          anchor: new kt(w[0][0], w[0][1])
+        };
+      }
+    }
+  }
+}
+
+/**
+ * Piece of pie including Sector, Label, LabelLine
+ */ var Be = /** @class */ function(t) {
+  h(PiePiece, t);
+  function PiePiece(e, i, r) {
+    var a = t.call(this) || this;
+    a.z2 = 2;
+    var n = new I;
+    a.setTextContent(n);
+    a.updateData(e, i, r, true);
+    return a;
+  }
+  PiePiece.prototype.updateData = function(t, e, i, r) {
+    var a = this;
+    var n = t.hostModel;
+    var o = t.getItemModel(e);
+    var s = o.getModel("emphasis");
+    var l = t.getItemLayout(e);
+    // cornerRadius & innerCornerRadius doesn't exist in the item layout. Use `0` if null value is specified.
+    // see `setItemLayout` in `pieLayout.ts`.
+        var c = F(ee(o.getModel("itemStyle"), l, true), l);
+    // Ignore NaN data.
+        if (isNaN(c.startAngle)) {
+      // Use NaN shape to avoid drawing shape.
+      a.setShape(c);
+      return;
+    }
+    if (r) {
+      a.setShape(c);
+      var h = n.getShallow("animationType");
+      if (n.ecModel.ssr) {
+        // Use scale animation in SSR mode(opacity?)
+        // Because CSS SVG animation doesn't support very customized shape animation.
+        Dt(a, {
+          scaleX: 0,
+          scaleY: 0
+        }, n, {
+          dataIndex: e,
+          isFrom: true
+        });
+        a.originX = c.cx;
+        a.originY = c.cy;
+      } else if (h === "scale") {
+        a.shape.r = l.r0;
+        Dt(a, {
+          shape: {
+            r: l.r
+          }
+        }, n, e);
+      }
+      // Expansion
+       else {
+        if (i != null) {
+          a.setShape({
+            startAngle: i,
+            endAngle: i
+          });
+          Dt(a, {
+            shape: {
+              startAngle: l.startAngle,
+              endAngle: l.endAngle
+            }
+          }, n, e);
+        } else {
+          a.shape.endAngle = l.startAngle;
+          Ct(a, {
+            shape: {
+              endAngle: l.endAngle
+            }
+          }, n, e);
+        }
+      }
+    } else {
+      zt(a);
+      // Transition animation from the old shape
+            Ct(a, {
+        shape: c
+      }, n, e);
+    }
+    a.useStyle(t.getItemVisual(e, "style"));
+    Ot(a, o);
+    var u = (l.startAngle + l.endAngle) / 2;
+    var v = n.get("selectedOffset");
+    var d = Math.cos(u) * v;
+    var f = Math.sin(u) * v;
+    var p = o.getShallow("cursor");
+    p && a.attr("cursor", p);
+    this._updateLabel(n, t, e);
+    a.ensureState("emphasis").shape = F({
+      r: l.r + (s.get("scale") ? s.get("scaleSize") || 0 : 0)
+    }, ee(s.getModel("itemStyle"), l));
+    F(a.ensureState("select"), {
+      x: d,
+      y: f,
+      shape: ee(o.getModel([ "select", "itemStyle" ]), l)
+    });
+    F(a.ensureState("blur"), {
+      shape: ee(o.getModel([ "blur", "itemStyle" ]), l)
+    });
+    var g = a.getTextGuideLine();
+    var b = a.getTextContent();
+    g && F(g.ensureState("select"), {
+      x: d,
+      y: f
+    });
+    // TODO: needs dx, dy in zrender?
+        F(b.ensureState("select"), {
+      x: d,
+      y: f
+    });
+    Nt(this, s.get("focus"), s.get("blurScope"), s.get("disabled"));
+  };
+  PiePiece.prototype._updateLabel = function(t, e, i) {
+    var r = this;
+    var a = e.getItemModel(i);
+    var n = a.getModel("labelLine");
+    var o = e.getItemVisual(i, "style");
+    var s = o && o.fill;
+    var l = o && o.opacity;
+    vt(r, Rt(a), {
+      labelFetcher: e.hostModel,
+      labelDataIndex: i,
+      inheritColor: s,
+      defaultOpacity: l,
+      defaultText: t.getFormattedLabel(i, "normal") || e.getName(i)
+    });
+    var c = r.getTextContent();
+    // Set textConfig on sector.
+        r.setTextConfig({
+      // reset position, rotation
+      position: null,
+      rotation: null
+    });
+    // Make sure update style on labelText after setLabelStyle.
+    // Because setLabelStyle will replace a new style on it.
+        c.attr({
+      z2: 10
+    });
+    var h = t.get([ "label", "position" ]);
+    if (h !== "outside" && h !== "outer") {
+      r.removeTextGuideLine();
+    } else {
+      var u = this.getTextGuideLine();
+      if (!u) {
+        u = new Bt;
+        this.setTextGuideLine(u);
+      }
+      // Default use item visual color
+            ie(this, re(a), {
+        stroke: s,
+        opacity: Ht(n.get([ "lineStyle", "opacity" ]), l, 1)
+      });
+    }
+  };
+  return PiePiece;
+}(Wt);
+
+// Pie view
+var He = /** @class */ function(t) {
+  h(PieView, t);
+  function PieView() {
+    var e = t !== null && t.apply(this, arguments) || this;
+    e.ignoreLabelLineUpdate = true;
+    return e;
+  }
+  PieView.prototype.render = function(t, e, i, r) {
+    var a = t.getData();
+    var n = this._data;
+    var o = this.group;
+    var s;
+    // First render
+        if (!n && a.count() > 0) {
+      var l = a.getItemLayout(0);
+      for (var c = 1; isNaN(l && l.startAngle) && c < a.count(); ++c) {
+        l = a.getItemLayout(c);
+      }
+      if (l) {
+        s = l.startAngle;
+      }
+    }
+    // remove empty-circle if it exists
+        if (this._emptyCircleSector) {
+      o.remove(this._emptyCircleSector);
+    }
+    // when all data are filtered, show lightgray empty circle
+        if (a.count() === 0 && t.get("showEmptyCircle")) {
+      var h = Ne(t);
+      var u = new Wt({
+        shape: F(getBasicPieLayout(t, i), h)
+      });
+      u.useStyle(t.getModel("emptyCircleStyle").getItemStyle());
+      this._emptyCircleSector = u;
+      o.add(u);
+    }
+    a.diff(n).add((function(t) {
+      var e = new Be(a, t, s);
+      a.setItemGraphicEl(t, e);
+      o.add(e);
+    })).update((function(t, e) {
+      var i = n.getItemGraphicEl(e);
+      i.updateData(a, t, s);
+      i.off("click");
+      o.add(i);
+      a.setItemGraphicEl(t, i);
+    })).remove((function(e) {
+      var i = n.getItemGraphicEl(e);
+      Ut(i, t, e);
+    })).execute();
+    pieLabelLayout(t);
+    // Always use initial animation.
+        if (t.get("animationTypeUpdate") !== "expansion") {
+      this._data = a;
+    }
+  };
+  PieView.prototype.dispose = function() {};
+  PieView.prototype.containPoint = function(t, e) {
+    var i = e.getData();
+    var r = i.getItemLayout(0);
+    if (r) {
+      var a = t[0] - r.cx;
+      var n = t[1] - r.cy;
+      var o = Math.sqrt(a * a + n * n);
+      return o <= r.r && o >= r.r0;
+    }
+  };
+  PieView.type = "pie";
+  return PieView;
+}(Ft);
+
+const We = He;
+
+/**
+ * [Usage]:
+ * (1)
+ * createListSimply(seriesModel, ['value']);
+ * (2)
+ * createListSimply(seriesModel, {
+ *     coordDimensions: ['value'],
+ *     dimensionsCount: 5
+ * });
+ */ function createSeriesDataSimply(t, e, i) {
+  e = w(e) && {
+    coordDimensions: e
+  } || F({
+    encodeDefine: t.getEncode()
+  }, e);
+  var r = t.getSource();
+  var a = jt(r, e).dimensions;
+  var n = new $t(a, t);
+  n.initData(r, i);
+  return n;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+/**
+ * AUTO-GENERATED FILE. DO NOT MODIFY.
+ */
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+/**
+ * LegendVisualProvider is an bridge that pick encoded color from data and
+ * provide to the legend component.
+ */ var Ue = /** @class */ function() {
+  function LegendVisualProvider(
+  // Function to get data after filtered. It stores all the encoding info
+  t, 
+  // Function to get raw data before filtered.
+  e) {
+    this._getDataWithEncodedVisual = t;
+    this._getRawData = e;
+  }
+  LegendVisualProvider.prototype.getAllNames = function() {
+    var t = this._getRawData();
+    // We find the name from the raw data. In case it's filtered by the legend component.
+    // Normally, the name can be found in rawData, but can't be found in filtered data will display as gray.
+        return t.mapArray(t.getName);
+  };
+  LegendVisualProvider.prototype.containName = function(t) {
+    var e = this._getRawData();
+    return e.indexOfName(t) >= 0;
+  };
+  LegendVisualProvider.prototype.indexOfName = function(t) {
+    // Only get data when necessary.
+    // Because LegendVisualProvider constructor may be new in the stage that data is not prepared yet.
+    // Invoking Series#getData immediately will throw an error.
+    var e = this._getDataWithEncodedVisual();
+    return e.indexOfName(t);
+  };
+  LegendVisualProvider.prototype.getItemVisual = function(t, e) {
+    // Get encoded visual properties from final filtered data.
+    var i = this._getDataWithEncodedVisual();
+    return i.getItemVisual(t, e);
+  };
+  return LegendVisualProvider;
+}();
+
+const Fe = Ue;
+
+var je = Pt();
+
+var $e = /** @class */ function(t) {
+  h(PieSeriesModel, t);
+  function PieSeriesModel() {
+    return t !== null && t.apply(this, arguments) || this;
+  }
+  /**
+   * @overwrite
+   */  PieSeriesModel.prototype.init = function(e) {
+    t.prototype.init.apply(this, arguments);
+    // Enable legend selection for each data item
+    // Use a function instead of direct access because data reference may changed
+        this.legendVisualProvider = new Fe(x(this.getData, this), x(this.getRawData, this));
+    this._defaultLabelLine(e);
+  };
+  /**
+   * @overwrite
+   */  PieSeriesModel.prototype.mergeOption = function() {
+    t.prototype.mergeOption.apply(this, arguments);
+  };
+  /**
+   * @overwrite
+   */  PieSeriesModel.prototype.getInitialData = function() {
+    return createSeriesDataSimply(this, {
+      coordDimensions: [ "value" ],
+      encodeDefaulter: wt(Xt, this)
+    });
+  };
+  /**
+   * @overwrite
+   */  PieSeriesModel.prototype.getDataParams = function(e) {
+    var i = this.getData();
+    // update seats when data is changed
+        var r = je(i);
+    var a = r.seats;
+    if (!a) {
+      var n = [];
+      i.each(i.mapDimension("value"), (function(t) {
+        n.push(t);
+      }));
+      a = r.seats = Gt(n, i.hostModel.get("percentPrecision"));
+    }
+    var o = t.prototype.getDataParams.call(this, e);
+    // seats may be empty when sum is 0
+        o.percent = a[e] || 0;
+    o.$vars.push("percent");
+    return o;
+  };
+  PieSeriesModel.prototype._defaultLabelLine = function(t) {
+    // Extend labelLine emphasis
+    Yt(t, "labelLine", [ "show" ]);
+    var e = t.labelLine;
+    var i = t.emphasis.labelLine;
+    // Not show label line if `label.normal.show = false`
+        e.show = e.show && t.label.show;
+    i.show = i.show && t.emphasis.label.show;
+  };
+  PieSeriesModel.type = "series.pie";
+  PieSeriesModel.defaultOption = {
+    // zlevel: 0,
+    z: 2,
+    legendHoverLink: true,
+    colorBy: "data",
+    // 默认全局居中
+    center: [ "50%", "50%" ],
+    radius: [ 0, "75%" ],
+    // 默认顺时针
+    clockwise: true,
+    startAngle: 90,
+    endAngle: "auto",
+    padAngle: 0,
+    // 最小角度改为0
+    minAngle: 0,
+    // If the angle of a sector less than `minShowLabelAngle`,
+    // the label will not be displayed.
+    minShowLabelAngle: 0,
+    // 选中时扇区偏移量
+    selectedOffset: 10,
+    // 选择模式，默认关闭，可选single，multiple
+    // selectedMode: false,
+    // 南丁格尔玫瑰图模式，'radius'（半径） | 'area'（面积）
+    // roseType: null,
+    percentPrecision: 2,
+    // If still show when all data zero.
+    stillShowZeroSum: true,
+    // cursor: null,
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    width: null,
+    height: null,
+    label: {
+      // color: 'inherit',
+      // If rotate around circle
+      rotate: 0,
+      show: true,
+      overflow: "truncate",
+      // 'outer', 'inside', 'center'
+      position: "outer",
+      // 'none', 'labelLine', 'edge'. Works only when position is 'outer'
+      alignTo: "none",
+      // Closest distance between label and chart edge.
+      // Works only position is 'outer' and alignTo is 'edge'.
+      edgeDistance: "25%",
+      // Works only position is 'outer' and alignTo is not 'edge'.
+      bleedMargin: 10,
+      // Distance between text and label line.
+      distanceToLabelLine: 5
+    },
+    // Enabled when label.normal.position is 'outer'
+    labelLine: {
+      show: true,
+      // 引导线两段中的第一段长度
+      length: 15,
+      // 引导线两段中的第二段长度
+      length2: 15,
+      smooth: false,
+      minTurnAngle: 90,
+      maxSurfaceAngle: 90,
+      lineStyle: {
+        // color: 各异,
+        width: 1,
+        type: "solid"
+      }
+    },
+    itemStyle: {
+      borderWidth: 1,
+      borderJoin: "round"
+    },
+    showEmptyCircle: true,
+    emptyCircleStyle: {
+      color: "lightgray",
+      opacity: 1
+    },
+    labelLayout: {
+      // Hide the overlapped label.
+      hideOverlap: true
+    },
+    emphasis: {
+      scale: true,
+      scaleSize: 5
+    },
+    // If use strategy to avoid label overlapping
+    avoidLabelOverlap: true,
+    // Animation type. Valid values: expansion, scale
+    animationType: "expansion",
+    animationDuration: 1e3,
+    // Animation type when update. Valid values: transition, expansion
+    animationTypeUpdate: "transition",
+    animationEasingUpdate: "cubicInOut",
+    animationDurationUpdate: 500,
+    animationEasing: "cubicInOut"
+  };
+  return PieSeriesModel;
+}(Et);
+
+const Xe = $e;
+
+function negativeDataFilter(t) {
+  return {
+    seriesType: t,
+    reset: function(t, e) {
+      var i = t.getData();
+      i.filterSelf((function(t) {
+        // handle negative value condition
+        var e = i.mapDimension("value");
+        var r = i.get(e, t);
+        if (lt(r) && !isNaN(r) && r < 0) {
+          return false;
+        }
+        return true;
+      }));
+    }
+  };
+}
+
+function install(t) {
+  t.registerChartView(We);
+  t.registerSeriesModel(Xe);
+  _t("pie", t.registerAction);
+  t.registerLayout(wt(pieLayout, "pie"));
+  t.registerProcessor(dataFilter("pie"));
+  t.registerProcessor(negativeDataFilter("pie"));
+}
+
+const Ge = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{position:relative;width:100%;display:block}.container{aspect-ratio:1/1;width:100%;display:flex;justify-content:center;align-items:center;position:relative}.chart-container{width:100%;height:100%;--comp-color-1:var(--tct-chart-donut-color-1, var(--t-chart-donut-color-1, var(--t-accent-1, #e05252)));--comp-color-2:var(--tct-chart-donut-color-2, var(--t-chart-donut-color-2, var(--t-accent-2, #e09952)));--comp-color-3:var(--tct-chart-donut-color-3, var(--t-chart-donut-color-3, var(--t-accent-3, #e0e052)));--comp-color-4:var(--tct-chart-donut-color-4, var(--t-chart-donut-color-4, var(--t-accent-4, #99e052)));--comp-color-5:var(--tct-chart-donut-color-5, var(--t-chart-donut-color-5, var(--t-accent-5, #52e052)));--comp-color-6:var(--tct-chart-donut-color-6, var(--t-chart-donut-color-6, var(--t-accent-6, #52e099)));--comp-color-7:var(--tct-chart-donut-color-7, var(--t-chart-donut-color-7, var(--t-accent-7, #52e0e0)));--comp-color-8:var(--tct-chart-donut-color-8, var(--t-chart-donut-color-8, var(--t-accent-8, #5299e0)));--comp-color-9:var(--tct-chart-donut-color-9, var(--t-chart-donut-color-9, var(--t-accent-9, #5252e0)));--comp-color-10:var(--tct-chart-donut-color-10, var(--t-chart-donut-color-10, var(--t-accent-10, #9952e0)));--comp-color-11:var(--tct-chart-donut-color-11, var(--t-chart-donut-color-11, var(--t-accent-11, #e052e0)));--comp-color-12:var(--tct-chart-donut-color-12, var(--t-chart-donut-color-12, var(--t-accent-12, #e05299)))}.chart-container,.center-card{--comp-background-color:var(--tct-chart-donut-border-color, var(--t-chart-donut-border-color, var(--t-base, #ffffff)))}button{--comp-button-padding:var(--tct-chart-donut-button-padding, var(--tct-chart-donut-button-vertical-padding, var(--t-chart-donut-button-vertical-padding, var(--app-scale-1x, 5px))) 0);transition:box-shadow var(--tct-chart-donut-button-tween, var(--t-chart-donut-button-tween, var(--app-tween-1, 0.2s ease)));padding:var(--comp-button-padding)}button:active{box-shadow:var(--const-double-focus-ring), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}button:hover{box-shadow:var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}button:focus{box-shadow:var(--const-double-focus-ring), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}.center-card-container{position:absolute;top:50%;transform:translateY(-50%);padding:var(--tct-chart-donut-button-container-padding, var(--t-chart-donut-button-container-padding, var(--app-scale-1x, 5px)))}.center-card{width:100%;text-align:center;color:var(--tct-chart-donut-text-color, var(--t-chart-donut-text-color, var(--t-text, #4d4d4d)));margin-inline:auto;display:block}.center-card:is(button){cursor:pointer;background:var(--comp-background-color);border:0;border-radius:var(--tct-chart-donut-button-border-radius, var(--t-chart-donut-button-border-radius, var(--app-border-radius-1, 4px)))}q2-icon{--tct-icon-size:var(--tct-chart-donut-icon-size, var(--t-chart-donut-icon-size, 26px));--comp-icon-margin:var(--tct-chart-donut-icon-margin, 0 0 var(--tct-chart-donut-icon-margin-bottom, var(--t-chart-donut-icon-margin-bottom, var(--app-scale-1x, 5px))));margin:var(--comp-icon-margin)}.name{font-size:var(--tct-chart-donut-name-font-size, var(--t-chart-donut-name-font-size, 14px))}.value{font-size:var(--tct-chart-donut-value-font-size, var(--t-chart-donut-value-font-size, 21px))}figure{margin:0}.legend{margin-top:var(--tct-chart-donut-legend-margin-top, var(--app-scale-0x, 0))}";
+
+const Ye = Ge;
+
+tt([ install$4, install$1, install, Kt, qt, ae ]);
+
+const Ee = class {
+  constructor(i) {
+    t(this, i);
+    this.change = e(this, "change", 7);
+    this.click = e(this, "click", 7);
+    this.defaultRecord = {
+      id: null,
+      value: null,
+      name: null
+    };
+    this.onButtonClick = t => {
+      t.stopPropagation();
+      const {selectedId: e} = this;
+      const i = e ? this.getDataById(e) : Object.assign({}, this.defaultRecord);
+      this.click.emit(i);
+    };
+    this.onButtonKeyDown = t => {
+      const {selectedId: e, data: i} = this;
+      let r = this.getIndexById(e) || 0;
+      switch (t.key) {
+       case "ArrowUp":
+       case "ArrowDown":
+        t.preventDefault();
+        break;
+
+       case "ArrowLeft":
+        t.preventDefault();
+        r--;
+        if (r < 0) r = i.length - 1;
+        this.chart.dispatchAction({
+          type: "select",
+          seriesId: "pie",
+          dataIndex: r
+        });
+        break;
+
+       case "ArrowRight":
+        t.preventDefault();
+        r++;
+        if (r > i.length - 1) r = 0;
+        this.chart.dispatchAction({
+          type: "select",
+          seriesId: "pie",
+          dataIndex: r
+        });
+        break;
+
+       case "Escape":
+        this.clearSelection();
+        break;
+
+       case " ":
+        t.preventDefault();
+        break;
+
+       default:
+        return;
+      }
+    };
+    this.onClickElsewhere = t => {
+      t.stopPropagation();
+      this.clearSelection();
+    };
+    this.onContainerClick = t => {
+      if (this.isInChangeEvent) return;
+      if (!(t.target instanceof HTMLElement)) return;
+      this.clearSelection();
+      t.stopPropagation();
+    };
+    this.onLegendClick = t => {
+      t.stopPropagation();
+      if (t.detail) {
+        const e = this.getDataIndexForId(t.detail.id);
+        this.selectedId = t.detail.id;
+        this.chart.dispatchAction({
+          type: "select",
+          seriesIndex: 0,
+          dataIndex: e
+        });
+      } else {
+        const t = this.getDataIndexForId(this.selectedId);
+        this.hoveredId = this.selectedId;
+        this.selectedId = null;
+        this.chart.dispatchAction({
+          type: "unselect",
+          seriesIndex: 0,
+          dataIndex: t
+        });
+      }
+    };
+    this.onLegendMouseenter = t => {
+      const e = this.getDataIndexForId(t.detail.id);
+      this.hoveredId = t.detail.id;
+      this.chart.dispatchAction({
+        type: "highlight",
+        seriesIndex: 0,
+        dataIndex: e
+      });
+    };
+    this.onLegendMouseleave = t => {
+      const e = this.getDataIndexForId(t.detail.id);
+      this.hoveredId = this.selectedId;
+      this.chart.dispatchAction({
+        type: "downplay",
+        seriesIndex: 0,
+        dataIndex: e
+      });
+    };
+    this.hoveredId = undefined;
+    this.legendData = undefined;
+    this.chartName = undefined;
+    this.data = [];
+    this.format = undefined;
+    this.hoverScaleSize = 5;
+    this.innerRadius = "70%";
+    this.isClickable = undefined;
+    this.minSliceSize = "2.5%";
+    this.outerRadius = "85%";
+    this.selectedId = undefined;
+    this.selectedOffset = 10;
+    this.showLegend = false;
+    this.summaryIcon = undefined;
+    this.summaryName = undefined;
+  }
+  // #endregion
+  // #region Component Lifecycle Events
+  disconnectedCallback() {
+    var t;
+    (t = this.resizeObserver) === null || t === void 0 ? void 0 : t.disconnect();
+    this.resizeObserver = null;
+  }
+  componentDidLoad() {
+    const t = Jt(this.chartContainer);
+    this.cacheComputedStyles();
+    this.colors = this.getColors();
+    this.resizeObserver = new ResizeObserver((() => this.resizeChart()));
+    this.resizeObserver.observe(this.hostElement);
+    this.updateChart(t);
+    this.setupChartEvents(t);
+    this.checkSelectedId();
+    this.chart = t;
+    this.setLegendData();
+    this.selectById(this.selectedId);
+    a(this.hostElement);
+  }
+  // #endregion
+  // #region Listeners
+  delegateFocus(t) {
+    var e;
+    if (!n(t, this.hostElement)) return;
+    if (!this.isClickable) return;
+    (e = this.centerButtonElement) === null || e === void 0 ? void 0 : e.focus();
+  }
+  // #endregion
+  // #region Public Methods API
+  /**
+     * Clears any selected slice.
+     */
+  async clearSelection() {
+    const {selectedId: t} = this;
+    if (!t) return;
+    this.chart.dispatchAction({
+      type: "unselect",
+      seriesId: "pie",
+      dataIndex: this.getIndexById(t)
+    });
+  }
+  /**
+     * Returns the chart instance for e2e testing.
+     *
+     * @testOnly
+     */  async getChartOptions() {
+    return this.chart.getOption();
+  }
+  /**
+     * Selects a slice by its provided `id` in the provided `data`.
+     */  async selectById(t) {
+    const e = this.getIndexById(t);
+    if (e === -1) return;
+    this.chart.dispatchAction({
+      type: "select",
+      seriesId: "pie",
+      dataIndex: e
+    });
+  }
+  /**
+     * Selects a slice by its index in the provided `data`.
+     */  async selectByIndex(t) {
+    const e = this.data[t] ? t : null;
+    if (!e) return;
+    this.chart.dispatchAction({
+      type: "select",
+      seriesId: "pie",
+      dataIndex: e
+    });
+  }
+  // #endregion
+  // #region Watchers
+  propsUpdates() {
+    this.updateChart(this.chart);
+  }
+  dataUpdated() {
+    this.colors = this.getColors();
+    this.updateChart(this.chart);
+    this.setLegendData();
+  }
+  innerRadiusUpdated() {
+    const {innerRadius: t, outerRadius: e} = this;
+    const i = parseFloat(t);
+    const r = parseFloat(e);
+    if (i >= r) {
+      this.innerRadius = `${r - 15}%`;
+    }
+  }
+  outerRadiusUpdated() {
+    const {innerRadius: t, outerRadius: e} = this;
+    const i = parseFloat(t);
+    const r = parseFloat(e);
+    if (r <= i) {
+      this.outerRadius = `${i + 15}%`;
+    }
+  }
+  /**
+     * Function to detect and set a data range (category) as selected
+     * Logic for when legends are present, and can set selectedId when ledgend category is clicked
+     * Also can be used by dev to preset
+     */  checkSelectedId() {
+    if (!!this.selectedId) {
+      this.hoveredId = this.selectedId;
+      // Dispatch action only to be fired when chart is rendered
+            if (this.chart) {
+        this.selectById(this.selectedId);
+      }
+    } else {
+      // Dispatch action only to be fired when chart is rendered
+      if (this.chart) {
+        this.chart.dispatchAction({
+          type: "unselect",
+          seriesId: "pie",
+          dataIndex: this.getIndexById(this.hoveredId)
+        });
+      }
+      this.hoveredId = null;
+    }
+  }
+  // #endregion
+  // #region Local Methods
+  get centerData() {
+    const {hoveredId: t, data: e} = this;
+    const i = t;
+    const r = this.getIndexById(i);
+    return i ? Object.assign(Object.assign({}, this.getDataById(i)), {
+      color: this.colors[r]
+    }) : {
+      name: o(this.summaryName || "tecton.element.chartDonut.button.summaryName"),
+      icon: this.summaryIcon,
+      value: e.reduce(((t, e) => t + e.value), 0),
+      color: null
+    };
+  }
+  get isMobile() {
+    return s();
+  }
+  get legendHoveredId() {
+    return this.hoveredId === this.selectedId ? null : this.hoveredId;
+  }
+  cacheComputedStyles() {
+    this.chartContainerStyles = getComputedStyle(this.chartContainer);
+    this.hostElementStyles = getComputedStyle(this.hostElement);
+  }
+  displayValue(t) {
+    const e = parseFloat(t.toString());
+    if (isNaN(e)) return;
+    if (this.format === "currency") {
+      return Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD"
+      }).format(e);
+    } else {
+      return Intl.NumberFormat("en-US").format(e);
+    }
+  }
+  getColors() {
+    const t = [ 1, 3, 8, 4, 2, 10, 7, 11, 6, 9, 12, 5 ].map((t => `--comp-color-${t}`));
+    return this.data.reduce(((e, i, r) => {
+      let a = t[r % t.length];
+      if (i.color) a = i.color;
+      e.push(Zt(a, this.chartContainerStyles, this.hostElementStyles) || a);
+      return e;
+    }), []);
+  }
+  getCSSProperty(t) {
+    let e;
+    if (t.startsWith("var(") && t.endsWith(")")) {
+      const i = /var\((.*)\)/g;
+      const r = i.exec(t);
+      const a = r.length >= 2 ? r[1].split(",") : [];
+      t = a[0];
+      e = a[1];
+    }
+    let i = this.chartContainerStyles.getPropertyValue(t).trim();
+    if (!i) i = this.hostElementStyles.getPropertyValue(t).trim();
+    return i || e;
+  }
+  getDataById(t) {
+    if (!t) return;
+    return this.data.find((e => e.id === t));
+  }
+  getDataByIndex(t) {
+    if (typeof t !== "number") return;
+    return this.data[t];
+  }
+  getDataIndexForId(t) {
+    return this.data.findIndex((e => e.id === t));
+  }
+  getIndexById(t) {
+    return this.data.findIndex((e => e.id === t));
+  }
+  getMinSliceSizeAsAngle() {
+    return parseFloat(this.minSliceSize) / 100 * 360;
+  }
+  resizeChart() {
+    this.chart.resize();
+  }
+  setLegendData() {
+    const t = this.chart.getOption().series[0].color;
+    this.legendData = this.data.map(((e, i) => {
+      const r = Object.assign({}, e);
+      if (!r.color) r.color = t[i];
+      return r;
+    }));
+  }
+  // Edit with caution. Echarts does not interpret events the same on mobile.
+  setupChartEvents(t) {
+    if (!this.isMobile) {
+      t.on("mouseover", (t => {
+        this.hoveredId = t.data.id;
+      }));
+      t.on("mouseout", (() => {
+        this.hoveredId = this.selectedId;
+      }));
+    }
+    t.on("click", (t => {
+      t.event.stop();
+    }));
+    t.on("selectchanged", (t => {
+      var e, i, r, a;
+      const n = (a = (r = (i = (e = t.selected) === null || e === void 0 ? void 0 : e[0]) === null || i === void 0 ? void 0 : i.dataIndex) === null || r === void 0 ? void 0 : r[0]) !== null && a !== void 0 ? a : null;
+      const o = typeof n === "number" ? this.getDataByIndex(n) : Object.assign({}, this.defaultRecord);
+      this.selectedId = o.id;
+      this.isInChangeEvent = true;
+      this.change.emit(o);
+      setTimeout((() => {
+        this.isInChangeEvent = false;
+      }), 0);
+    }));
+    t.on("finished", (() => {
+      var e;
+      const i = t.getDom().querySelector("canvas");
+      if ((e = i === null || i === void 0 ? void 0 : i.hasAttribute("aria-hidden")) !== null && e !== void 0 ? e : false) return;
+      i.setAttribute("aria-hidden", "true");
+    }));
+  }
+  validateColor() {
+    // check if there is name duplicated, then custom style using `itemStyle` object will be used.
+    if (this.data.length > Object.keys(this.data.reduce(((t, e) => {
+      t[e.name] = e.name;
+      return t;
+    }), {})).length) {
+      this.data.forEach(((t, e) => {
+        t.itemStyle = Object.assign(Object.assign({}, t.itemStyle), {
+          color: t.color || this.colors[e]
+        });
+      }));
+    }
+  }
+  updateChart(t) {
+    this.validateColor();
+    return t.setOption({
+      tooltip: {
+        show: false
+      },
+      legend: {
+        show: false
+      },
+      aria: {
+        enabled: true
+      },
+      series: [ {
+        name: this.chartName,
+        animationType: "scale",
+        color: this.colors,
+        id: "pie",
+        type: "pie",
+        selectedOffset: this.selectedOffset,
+        selectedMode: "single",
+        radius: [ this.innerRadius, this.outerRadius ],
+        label: {
+          show: false
+        },
+        labelLine: {
+          show: false
+        },
+        itemStyle: {
+          borderWidth: 5,
+          borderColor: Zt("--comp-background-color", this.chartContainerStyles, this.hostElementStyles)
+        },
+        emphasis: {
+          disabled: this.isMobile,
+          scaleSize: this.hoverScaleSize,
+          itemStyle: {
+            color: "inherit"
+          }
+        },
+        minAngle: this.getMinSliceSizeAsAngle(),
+        data: this.data
+      } ]
+    });
+  }
+  // #endregion
+  // #region Test Methods API
+  /**
+     * A method to select a slice with index.
+     *
+     * @testOnly
+     */
+  async selectDataPoint(t) {
+    this.chart.dispatchAction({
+      type: "select",
+      seriesId: "pie",
+      dataIndex: t
+    });
+  }
+  // #endregion
+  // #region Render Methods
+  renderCenterBlock() {
+    const {icon: t, name: e, value: r, color: a} = this.centerData;
+    const {isClickable: n} = this;
+    const s = n ? "button" : "div";
+    const l = this.displayValue(r);
+    const c = n ? {
+      onKeyDown: this.onButtonKeyDown,
+      onClick: this.onButtonClick,
+      ref: t => this.centerButtonElement = t,
+      "aria-describedby": "center-card-description",
+      "aria-roledescription": o("tecton.element.chartDonut.button.roleDescription")
+    } : null;
+    return i("div", {
+      class: "center-card-container",
+      style: {
+        width: `calc(${this.innerRadius} - 10%)`
+      }
+    }, i("div", {
+      id: "center-card-description",
+      class: "sr"
+    }, o("tecton.element.chartDonut.button.description")), i(s, Object.assign({
+      class: "center-card",
+      "test-id": "centerCard"
+    }, c), !!t && i("q2-icon", {
+      type: t,
+      style: a && {
+        "--tct-icon-stroke-primary": a,
+        "--tct-icon-stroke-secondary": a,
+        color: a
+      }
+    }), !!e && i("div", {
+      class: "name"
+    }, e), !isNaN(r) && i("div", {
+      class: "value"
+    }, l)));
+  }
+  render() {
+    return i("click-elsewhere", {
+      key: "061f0df2cfc531af2df0d583f7cea0a2e7d68c7d",
+      onChange: this.onClickElsewhere
+    }, i("figure", {
+      key: "324163777739ef74d986c94fda412a91f0f34124"
+    }, i("div", {
+      key: "a866867bfd653239d8f7c0a630f2b222c353bdb1",
+      class: "container"
+    }, i("div", {
+      key: "fcb2076e8b390ef19ab28f03d25e66bb48c7bdd9",
+      ref: t => this.chartContainer = t,
+      "aria-describedby": !this.isClickable ? "center-card-description" : undefined,
+      class: "chart-container",
+      role: "img",
+      "test-id": "chartContainer",
+      onClick: this.onContainerClick,
+      tabIndex: !this.isClickable ? 0 : undefined,
+      onKeyDown: !this.isClickable ? this.onButtonKeyDown : undefined
+    }), this.renderCenterBlock()), this.showLegend && i("figcaption", {
+      key: "2115b858f955bb6751a8d7d4476d4addc76e8f50"
+    }, i("q2-legend", {
+      key: "2a20e076a5bb3ac2b3430f1cefe38d9cdf594ccb",
+      class: "legend",
+      data: this.legendData,
+      format: this.format,
+      hoveredItemId: this.legendHoveredId,
+      onClick: this.onLegendClick,
+      onMouseleave: this.onLegendMouseleave,
+      onMouseenter: this.onLegendMouseenter,
+      selectedItemId: this.selectedId
+    }))));
+  }
+  get hostElement() {
+    return r(this);
+  }
+  static get watchers() {
+    return {
+      chartName: [ "propsUpdates" ],
+      innerRadius: [ "propsUpdates", "innerRadiusUpdated" ],
+      outerRadius: [ "propsUpdates", "outerRadiusUpdated" ],
+      minSliceSize: [ "propsUpdates" ],
+      hoverScaleSize: [ "propsUpdates" ],
+      selectedOffset: [ "propsUpdates" ],
+      data: [ "dataUpdated" ],
+      selectedId: [ "checkSelectedId" ]
+    };
+  }
+};
+
+Ee.style = Ye;
+
+export { Ee as q2_chart_donut };
+//# sourceMappingURL=q2-chart-donut.entry.js.map