q2-tecton-elements 1.72.0 → 1.73.0

package/dist/components/q2-chart-donut.js

@@ -1,20 +1,20 @@
 import { proxyCustomElement as t, HTMLElement as e, createEvent as i, h as n, transformTag as o } from "@stencil/core/internal/client";
 
-import { o as a, i as r, l as s, d as l } from "./index2.js";
+import { l as a, o as r, i as s, d as l } from "./index2.js";
 
 import { m as c } from "./mirror-emit.js";
 
-import { bd as h, V as d, _ as u, aF as f, be as p, bf as v, bc as g, bg as m, E as b, bh as w, bi as y, y as x, a1 as S, J as T, x as M, bj as C, aT as L, b8 as I, j as k, bk as A, F as P, bl as V, bm as z, bn as D, bo as N, d as R, bp as O, bq as U, br as H, bs as B, bt as W, bu as F, bv as E, bw as j, bx as X, by as G, bz as Y, bA as q, bB as $, bC as K, aR as _, bD as J, b6 as Z, bE as Q, bF as tt, bG as et, a as it, aa as nt, b7 as ot, bH as at, aH as rt, bI as st, a5 as lt, m as ct, o as ht, a7 as dt, G as ut, z as ft, am as pt, bJ as vt, bK as gt, b as mt, bL as bt, b9 as wt, bM as yt, bN as xt, bO as St, c as Tt, bP as Mt, aI as Ct, ah as Lt, aJ as It, bQ as kt, u as At, bR as Pt, a2 as Vt, aD as zt, X as Dt, bS as Nt, U as Rt, aj as Ot, C as Ut, i as Ht, s as Bt, A as Wt, t as Ft, g as Et, bT as jt, bU as Xt, ar as Gt, at as Yt, bV as qt, bW as $t, bX as Kt, S as _t, bY as Jt, ag as Zt, af as Qt, ab as te, ac as ee } from "./charting.js";
+import { bf as h, V as d, _ as u, aH as f, bg as p, bh as v, be as g, bi as m, E as b, bj as y, bk as w, y as x, a1 as S, J as T, x as M, bl as L, aV as C, ba as I, j as k, bm as A, F as P, bn as V, bo as z, bp as D, bq as N, d as R, br as O, bs as H, bt as U, bu as B, bv as W, bw as F, bx as E, by as j, bz as X, bA as G, bB as Y, bC as q, bD as $, bE as K, aT as _, bF as J, b8 as Z, bG as Q, bH as tt, bI as et, a as it, aa as nt, b9 as ot, bJ as at, aJ as rt, bK as st, a5 as lt, m as ct, o as ht, a7 as dt, G as ut, z as ft, ao as pt, bL as vt, bM as gt, b as mt, bN as bt, bb as yt, bO as wt, bP as xt, bQ as St, c as Tt, bR as Mt, aK as Lt, aj as Ct, aL as It, bS as kt, u as At, bT as Pt, a2 as Vt, aF as zt, X as Dt, bU as Nt, U as Rt, al as Ot, C as Ht, i as Ut, s as Bt, A as Wt, t as Ft, g as Et, bV as jt, bW as Xt, at as Gt, av as Yt, bX as qt, bY as $t, bZ as Kt, S as _t, b_ as Jt, ai as Zt, ah as Qt, ad as te, ac as ee, af as ie } from "./charting.js";
 
-import { d as ie } from "./click-elsewhere2.js";
+import { d as ne } from "./click-elsewhere2.js";
 
-import { d as ne } from "./q2-icon2.js";
+import { d as oe } from "./q2-icon2.js";
 
-import { d as oe } from "./q2-legend2.js";
+import { d as ae } from "./q2-legend2.js";
 
-import { l as ae, a as re, g as se, s as le, b as ce, i as he } from "./sectorHelper.js";
+import { l as re, a as se, g as le, s as ce, b as he, i as de } from "./sectorHelper.js";
 
-var de = /** @class */ function(t) {
+var ue = /** @class */ function(t) {
   function TooltipModel() {
     var e = null !== t && t.apply(this, arguments) || this;
     return e.type = TooltipModel.type, e;
@@ -96,7 +96,7 @@ function testStyle(t) {
   if (v.domSupported) for (var e = document.documentElement.style, i = 0, n = t.length; i < n; i++) if (t[i] in e) return t[i];
 }
 
-var ue = testStyle([ "transform", "webkitTransform", "OTransform", "MozTransform", "msTransform" ]);
+var fe = testStyle([ "transform", "webkitTransform", "OTransform", "MozTransform", "msTransform" ]);
 
 function toCSSVendorPrefix(t, e) {
   if (!t) return e;
@@ -106,7 +106,7 @@ function toCSSVendorPrefix(t, e) {
 }
 
 /* global document, window */
-var fe = toCSSVendorPrefix(testStyle([ "webkitTransition", "transition", "OTransition", "MozTransition", "msTransition" ]), "transition"), pe = toCSSVendorPrefix(ue, "transform"), ve = "position:absolute;display:block;border-style:solid;white-space:nowrap;z-index:9999999;" + (v.transform3dSupported ? "will-change:transform;" : "");
+var pe = toCSSVendorPrefix(testStyle([ "webkitTransition", "transition", "OTransition", "MozTransition", "msTransition" ]), "transition"), ve = toCSSVendorPrefix(fe, "transform"), ge = "position:absolute;display:block;border-style:solid;white-space:nowrap;z-index:9999999;" + (v.transform3dSupported ? "will-change:transform;" : "");
 
 function assembleTransform(t, e, i) {
   // If using float on style, the final width of the dom might
@@ -116,7 +116,7 @@ function assembleTransform(t, e, i) {
   if (!v.transformSupported) return i ? "top:" + o + ";left:" + n + ";" : [ [ "top", o ], [ "left", n ] ];
   // support transform
     var a = v.transform3dSupported, r = "translate" + (a ? "3d" : "") + "(" + n + "," + o + (a ? ",0" : "") + ")";
-  return i ? "top:0;left:0;" + pe + ":" + r + ";" : [ [ "top", 0 ], [ "left", 0 ], [ ue, r ] ];
+  return i ? "top:0;left:0;" + ve + ":" + r + ";" : [ [ "top", 0 ], [ "left", 0 ], [ fe, r ] ];
 }
 
 /**
@@ -124,13 +124,13 @@ function assembleTransform(t, e, i) {
  * @return {string}
  * @inner
  */ function assembleCssText(t, e, i) {
-  var n = [], o = t.get("transitionDuration"), a = t.get("backgroundColor"), r = t.get("shadowBlur"), s = t.get("shadowColor"), l = t.get("shadowOffsetX"), c = t.get("shadowOffsetY"), d = t.getModel("textStyle"), u = C(t, "html"), f = l + "px " + c + "px " + r + "px " + s;
+  var n = [], o = t.get("transitionDuration"), a = t.get("backgroundColor"), r = t.get("shadowBlur"), s = t.get("shadowColor"), l = t.get("shadowOffsetX"), c = t.get("shadowOffsetY"), d = t.getModel("textStyle"), u = L(t, "html"), f = l + "px " + c + "px " + r + "px " + s;
   return n.push("box-shadow:" + f), 
   // Animation transition. Do not animate when transitionDuration is 0.
   e && o && n.push(function(t, e) {
     var i = "cubic-bezier(0.23,1,0.32,1)", n = " " + t / 2 + "s " + i, o = "opacity" + n + ",visibility" + n;
-    return e || (n = " " + t + "s " + i, o += v.transformSupported ? "," + pe + n : ",left" + n + ",top" + n), 
-    fe + ":" + o;
+    return e || (n = " " + t + "s " + i, o += v.transformSupported ? "," + ve + n : ",left" + n + ",top" + n), 
+    pe + ":" + o;
   }(o, i)), a && n.push("background-color:" + a), 
   // Border style
   T([ "width", "color", "radius" ], (function(e) {
@@ -162,7 +162,7 @@ function makeStyleCoord$1(t, e, i, n, o) {
     var r = a && a.getViewportRoot();
     r && 
     // Some APPs might use scale on body, so we support CSS transform here.
-    y(t, r, i, n, o);
+    w(t, r, i, n, o);
   } else {
     t[0] = n, t[1] = o;
     // xy should be based on canvas root. But tooltipContent is
@@ -174,7 +174,7 @@ function makeStyleCoord$1(t, e, i, n, o) {
   t[2] = t[0] / e.getWidth(), t[3] = t[1] / e.getHeight();
 }
 
-var ge = /** @class */ function() {
+var me = /** @class */ function() {
   function TooltipHTMLContent(t, e) {
     if (this._show = !1, this._styleCoord = [ 0, 0, 0, 0 ], this._enterable = !0, this._alwaysShowContent = !1, 
     this._firstShow = !0, this._longHide = !0, v.wxa) return null;
@@ -200,7 +200,7 @@ var ge = /** @class */ function() {
         // Try trigger zrender event to avoid mouse
         // in and out shape too frequently
         var e = n.handler, i = n.painter.getViewportRoot();
-        w(i, t, !0), e.dispatch("mousemove", t);
+        y(i, t, !0), e.dispatch("mousemove", t);
       }
     }, i.onmouseleave = function() {
       // set `_inContent` to `false` before `hideLater`
@@ -229,7 +229,7 @@ var ge = /** @class */ function() {
   }, TooltipHTMLContent.prototype.show = function(t, e) {
     clearTimeout(this._hideTimeout), clearTimeout(this._longHideTimeout);
     var i = this.el, n = i.style, o = this._styleCoord;
-    i.innerHTML ? n.cssText = ve + assembleCssText(t, !this._firstShow, this._longHide) + assembleTransform(o[0], o[1], !0) + "border-color:" + x(e) + ";" + (t.get("extraCssText") || "") + ";pointer-events:" + (this._enterable ? "auto" : "none") : n.display = "none", 
+    i.innerHTML ? n.cssText = ge + assembleCssText(t, !this._firstShow, this._longHide) + assembleTransform(o[0], o[1], !0) + "border-color:" + x(e) + ";" + (t.get("extraCssText") || "") + ";pointer-events:" + (this._enterable ? "auto" : "none") : n.display = "none", 
     this._show = !0, this._firstShow = !1, this._longHide = !1;
   }, TooltipHTMLContent.prototype.setContent = function(t, e, i, n, o) {
     var a = this.el;
@@ -241,8 +241,8 @@ var ge = /** @class */ function() {
         e = x(e);
         var a, r = function(t) {
           return "left" === t ? "right" : "right" === t ? "left" : "top" === t ? "bottom" : "top";
-        }(i), s = Math.max(1.5 * Math.round(o), 6), l = "", c = pe + ":";
-        L([ "left", "right" ], r) > -1 ? (l += "top:50%", c += "translateY(-50%) rotate(" + (a = "left" === r ? -225 : -45) + "deg)") : (l += "left:50%", 
+        }(i), s = Math.max(1.5 * Math.round(o), 6), l = "", c = ve + ":";
+        C([ "left", "right" ], r) > -1 ? (l += "top:50%", c += "translateY(-50%) rotate(" + (a = "left" === r ? -225 : -45) + "deg)") : (l += "left:50%", 
         c += "translateX(-50%) rotate(" + (a = "top" === r ? 225 : 45) + "deg)");
         var h = a * Math.PI / 180, d = s + o, u = d * Math.abs(Math.cos(h)) + d * Math.abs(Math.sin(h)), f = e + " solid " + o + "px;";
         return '<div style="position:absolute;width:' + s + "px;height:" + s + "px;z-index:-1;" + (l += ";" + r + ":-" + Math.round(100 * ((u - Math.SQRT2 * o) / 2 + Math.SQRT2 * o - (u - d) / 2)) / 100 + "px") + ";" + c + ";border-bottom:" + f + "border-right:" + f + "background-color:" + n + ';"></div>';
@@ -301,7 +301,7 @@ var ge = /** @class */ function() {
     var t = this.el.parentNode;
     t && t.removeChild(this.el), this.el = this._container = null;
   }, TooltipHTMLContent;
-}(), me = /** @class */ function() {
+}(), be = /** @class */ function() {
   function TooltipRichContent(t) {
     this._show = !1, this._styleCoord = [ 0, 0, 0, 0 ], this._alwaysShowContent = !1, 
     this._enterable = !0, this._zr = t.getZr(), makeStyleCoord(this._styleCoord, this._zr, t.getWidth() / 2, t.getHeight() / 2);
@@ -332,7 +332,7 @@ var ge = /** @class */ function() {
         borderColor: n,
         textShadowColor: r.get("textShadowColor"),
         fill: i.get([ "textStyle", "color" ]),
-        padding: C(i, "richText"),
+        padding: L(i, "richText"),
         verticalAlign: "top",
         align: "left"
       },
@@ -404,7 +404,7 @@ function makeStyleCoord(t, e, i, n) {
   t[0] = i, t[1] = n, t[2] = t[0] / e.getWidth(), t[3] = t[1] / e.getHeight();
 }
 
-var be = new d({
+var ye = new d({
   shape: {
     x: -1,
     y: -1,
@@ -419,7 +419,7 @@ var be = new d({
   return u(TooltipView, t), TooltipView.prototype.init = function(t, e) {
     if (!v.node && e.getDom()) {
       var i = t.getComponent("tooltip"), n = this._renderMode = V(i.get("renderMode"));
-      this._tooltipContent = "richText" === n ? new me(e) : new ge(e, {
+      this._tooltipContent = "richText" === n ? new be(e) : new me(e, {
         appendTo: i.get("appendToBody", !0) ? "body" : i.get("appendTo", !0)
       });
     }
@@ -526,7 +526,7 @@ var be = new d({
           positionDefault: "bottom"
         }, o);
       } else if (n.tooltip && null != n.x && null != n.y) {
-        var l = be;
+        var l = ye;
         l.x = n.x, l.y = n.y, l.update(), R(l).tooltipConfig = {
           name: null,
           option: n.tooltip
@@ -599,7 +599,7 @@ var be = new d({
         if ("legend" === R(i).ssrType) 
         // Don't trigger tooltip for legend tooltip item
         return;
-        this._lastDataByCoordSys = null, U(i, (function(t) {
+        this._lastDataByCoordSys = null, H(i, (function(t) {
           // Always show item tooltip if mouse is on the element with dataIndex
           return null != R(t).dataIndex ? (o = t, !0) : 
           // Tooltip provided directly. Like legend.
@@ -615,7 +615,7 @@ var be = new d({
     var i = t.get("showDelay");
     e = M(e, this), clearTimeout(this._showTimout), i > 0 ? this._showTimout = setTimeout(e, i) : e();
   }, TooltipView.prototype._showAxisTooltip = function(t, e) {
-    var i = this._ecModel, n = this._tooltipModel, o = [ e.offsetX, e.offsetY ], a = buildTooltipModel([ e.tooltipOption ], n), r = this._renderMode, s = [], l = H("section", {
+    var i = this._ecModel, n = this._tooltipModel, o = [ e.offsetX, e.offsetY ], a = buildTooltipModel([ e.tooltipOption ], n), r = this._renderMode, s = [], l = U("section", {
       blocks: [],
       noHeader: !0
     }), c = [], h = new E;
@@ -623,7 +623,7 @@ var be = new d({
       T(t.dataByAxis, (function(t) {
         var e = i.getComponent(t.axisDim + "Axis", t.axisIndex), o = t.value;
         if (e && null != o) {
-          var a = B(o, e.axis, i, t.seriesDataIndices, t.valueLabelOpt), d = H("section", {
+          var a = B(o, e.axis, i, t.seriesDataIndices, t.valueLabelOpt), d = U("section", {
             header: a,
             noHeader: !W(a),
             sortBlocks: !0,
@@ -671,9 +671,9 @@ var be = new d({
       // Pre-create marker style for makers. Users can assemble richText
       // text in `formatter` callback and use those markers style.
       v.marker = g.makeTooltipMarker("item", x(v.color), d);
-      var m = j(s.formatTooltip(l, !1, c)), b = f.get("order"), w = f.get("valueFormatter"), y = m.frag, S = y ? X(w ? it({
-        valueFormatter: w
-      }, y) : y, g, d, b, n.get("useUTC"), f.get("textStyle")) : m.text, T = "item_" + s.name + "_" + l;
+      var m = j(s.formatTooltip(l, !1, c)), b = f.get("order"), y = f.get("valueFormatter"), w = m.frag, S = w ? X(y ? it({
+        valueFormatter: y
+      }, w) : w, g, d, b, n.get("useUTC"), f.get("textStyle")) : m.text, T = "item_" + s.name + "_" + l;
       this._showOrMove(f, (function() {
         this._showTooltipContent(f, S, v, T, t.offsetX, t.offsetY, t.position, t.target, g);
       })), 
@@ -899,7 +899,7 @@ function isCenterAlign(t) {
   return "center" === t || "middle" === t;
 }
 
-var ye = /** @class */ function(t) {
+var xe = /** @class */ function(t) {
   function LegendModel() {
     var e = null !== t && t.apply(this, arguments) || this;
     return e.type = LegendModel.type, e.layoutMode = {
@@ -1011,7 +1011,7 @@ var ye = /** @class */ function(t) {
     }));
   }, LegendModel.prototype.isSelected = function(t) {
     var e = this.option.selected;
-    return !(e.hasOwnProperty(t) && !e[t]) && L(this._availableNames, t) >= 0;
+    return !(e.hasOwnProperty(t) && !e[t]) && C(this._availableNames, t) >= 0;
   }, LegendModel.prototype.getOrient = function() {
     return "vertical" === this.get("orient") ? {
       index: 1,
@@ -1094,13 +1094,13 @@ var ye = /** @class */ function(t) {
       show: !1
     }
   }, LegendModel;
-}(f), xe = pt, Se = T, Te = ut, Me = /** @class */ function(t) {
+}(f), Se = pt, Te = T, Me = ut, Le = /** @class */ function(t) {
   function LegendView() {
     var e = null !== t && t.apply(this, arguments) || this;
     return e.type = LegendView.type, e.newlineDisabled = !1, e;
   }
   return u(LegendView, t), LegendView.prototype.init = function() {
-    this.group.add(this._contentGroup = new Te), this.group.add(this._selectorGroup = new Te), 
+    this.group.add(this._contentGroup = new Me), this.group.add(this._selectorGroup = new Me), 
     this._isFirstRender = !0;
   }, 
   /**
@@ -1163,11 +1163,11 @@ var ye = /** @class */ function(t) {
     var s = this.getContentGroup(), l = lt(), c = e.get("selectedMode"), h = [];
     i.eachRawSeries((function(t) {
       !t.get("legendHoverLink") && h.push(t.id);
-    })), Se(e.getData(), (function(o, a) {
+    })), Te(e.getData(), (function(o, a) {
       var r = o.get("name");
       // Use empty string or \n as a newline string
             if (!this.newlineDisabled && ("" === r || "\n" === r)) {
-        var d = new Te;
+        var d = new Me;
         // @ts-ignore
                 return d.newline = !0, void s.add(d);
       }
@@ -1177,7 +1177,7 @@ var ye = /** @class */ function(t) {
       // Legend to control series.
       if (u) {
         var f = u.getData(), p = f.getVisual("legendLineStyle") || {}, v = f.getVisual("legendIcon"), g = f.getVisual("style"), m = this._createItem(u, r, a, o, e, t, p, g, v, c, n);
-        m.on("click", xe(dispatchSelectAction, r, null, n, h)).on("mouseover", xe(dispatchHighlightAction, u.name, null, n, h)).on("mouseout", xe(dispatchDownplayAction, u.name, null, n, h)), 
+        m.on("click", Se(dispatchSelectAction, r, null, n, h)).on("mouseover", Se(dispatchHighlightAction, u.name, null, n, h)).on("mouseout", Se(dispatchDownplayAction, u.name, null, n, h)), 
         i.ssr && m.eachChild((function(t) {
           var e = R(t);
           e.seriesIndex = u.seriesIndex, e.dataIndex = a, e.ssrType = "legend";
@@ -1199,7 +1199,7 @@ var ye = /** @class */ function(t) {
           }));
           var g = this._createItem(s, r, a, o, e, t, {}, f, p, c, n);
           // FIXME: consider different series has items with the same name.
-                    g.on("click", xe(dispatchSelectAction, null, r, n, h)).on("mouseover", xe(dispatchHighlightAction, null, r, n, h)).on("mouseout", xe(dispatchDownplayAction, null, r, n, h)), 
+                    g.on("click", Se(dispatchSelectAction, null, r, n, h)).on("mouseover", Se(dispatchHighlightAction, null, r, n, h)).on("mouseout", Se(dispatchDownplayAction, null, r, n, h)), 
           i.ssr && g.eachChild((function(t) {
             var e = R(t);
             e.seriesIndex = s.seriesIndex, e.dataIndex = a, e.ssrType = "legend";
@@ -1209,7 +1209,7 @@ var ye = /** @class */ function(t) {
     }), this), o && this._createSelector(o, e, n, a, r);
   }, LegendView.prototype._createSelector = function(t, e, i, n, o) {
     var a = this.getSelectorGroup();
-    Se(t, (function(t) {
+    Te(t, (function(t) {
       var n = t.type, o = new P({
         style: {
           x: 0,
@@ -1234,14 +1234,14 @@ var ye = /** @class */ function(t) {
       }), bt(o);
     }));
   }, LegendView.prototype._createItem = function(t, e, i, n, o, a, r, s, l, c, h) {
-    var u = t.visualDrawType, f = o.get("itemWidth"), p = o.get("itemHeight"), v = o.isSelected(e), m = n.get("symbolRotate"), w = n.get("symbolKeepAspect"), y = n.get("icon"), x = function(t, e, i, n, o, a, r) {
+    var u = t.visualDrawType, f = o.get("itemWidth"), p = o.get("itemHeight"), v = o.isSelected(e), m = n.get("symbolRotate"), y = n.get("symbolKeepAspect"), w = n.get("icon"), x = function(t, e, i, n, o, a, r) {
       /**
    * 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
-        "auto" === t.lineWidth && (t.lineWidth = e.lineWidth > 0 ? 2 : 0), Se(t, (function(i, n) {
+        "auto" === t.lineWidth && (t.lineWidth = e.lineWidth > 0 ? 2 : 0), Te(t, (function(i, n) {
           "inherit" === t[n] && (t[n] = e[n]);
         }));
       }
@@ -1284,10 +1284,10 @@ var ye = /** @class */ function(t) {
         itemStyle: l,
         lineStyle: u
       };
-    }(l = y || l || "roundRect", n, r, s, u, v, h), S = new Te, T = n.getModel("textStyle");
-    if (!b(t.getLegendIcon) || y && "inherit" !== y) {
+    }(l = w || l || "roundRect", n, r, s, u, v, h), S = new Me, T = n.getModel("textStyle");
+    if (!b(t.getLegendIcon) || w && "inherit" !== w) {
       // Use default legend icon policy for most series
-      var M = "inherit" === y && t.getData().getVisual("symbol") ? "inherit" === m ? t.getData().getVisual("symbolRotate") : m : 0;
+      var M = "inherit" === w && t.getData().getVisual("symbol") ? "inherit" === m ? t.getData().getVisual("symbolRotate") : m : 0;
  // No rotation for no icon
             S.add(function(t) {
         var e = t.icon || "roundRect", i = Tt(e, 0, 0, t.itemWidth, t.itemHeight, t.itemStyle.fill, t.symbolKeepAspect);
@@ -1301,7 +1301,7 @@ var ye = /** @class */ function(t) {
         icon: l,
         iconRotate: M,
         itemStyle: x.itemStyle,
-        symbolKeepAspect: w
+        symbolKeepAspect: y
       }));
     } else 
     // Series has specific way to define legend icon
@@ -1312,18 +1312,18 @@ var ye = /** @class */ function(t) {
       iconRotate: m,
       itemStyle: x.itemStyle,
       lineStyle: x.lineStyle,
-      symbolKeepAspect: w
+      symbolKeepAspect: y
     }));
-    var C = "left" === a ? f + 5 : -5, L = a, I = o.get("formatter"), k = e;
+    var L = "left" === a ? f + 5 : -5, C = a, I = o.get("formatter"), k = e;
     g(I) && I ? k = I.replace("{name}", null != e ? e : "") : b(I) && (k = I(e));
     var A = v ? T.getTextColor() : n.get("inactiveColor");
     S.add(new P({
-      style: wt(T, {
+      style: yt(T, {
         text: k,
-        x: C,
+        x: L,
         y: p / 2,
         fill: A,
-        align: L,
+        align: C,
         verticalAlign: "middle"
       }, {
         inheritColor: A
@@ -1337,7 +1337,7 @@ var ye = /** @class */ function(t) {
         fill: "transparent"
       }
     }), z = n.getModel("tooltip");
-    return z.get("show") && yt({
+    return z.get("show") && wt({
       el: V,
       componentModel: o,
       itemName: e,
@@ -1508,7 +1508,7 @@ function makeSelectedMap(t, e) {
 }
 
 function install$3(t) {
-  t.registerComponentModel(ye), t.registerComponentView(Me), t.registerProcessor(t.PRIORITY.PROCESSOR.SERIES_FILTER, legendFilter), 
+  t.registerComponentModel(xe), t.registerComponentView(Le), t.registerProcessor(t.PRIORITY.PROCESSOR.SERIES_FILTER, legendFilter), 
   t.registerSubTypeDefaulter("legend", (function() {
     return "plain";
   })), function(t) {
@@ -1549,7 +1549,7 @@ var Ce = /** @class */ function(t) {
    */  return u(ScrollableLegendModel, t), ScrollableLegendModel.prototype.setScrollDataIndex = function(t) {
     this.option.scrollDataIndex = t;
   }, ScrollableLegendModel.prototype.init = function(e, i, n) {
-    var o = Ct(e);
+    var o = Lt(e);
     t.prototype.init.call(this, e, i, n), mergeAndNormalizeLayoutParams(this, e, o);
   }, 
   /**
@@ -1557,7 +1557,7 @@ var Ce = /** @class */ function(t) {
    */
   ScrollableLegendModel.prototype.mergeOption = function(e, i) {
     t.prototype.mergeOption.call(this, e, i), mergeAndNormalizeLayoutParams(this, this.option, e);
-  }, ScrollableLegendModel.type = "legend.scroll", ScrollableLegendModel.defaultOption = Lt(ye.defaultOption, {
+  }, ScrollableLegendModel.type = "legend.scroll", ScrollableLegendModel.defaultOption = Ct(xe.defaultOption, {
     scrollDataIndex: 0,
     pageButtonItemGap: 5,
     pageButtonGap: null,
@@ -1575,7 +1575,7 @@ var Ce = /** @class */ function(t) {
     },
     animationDurationUpdate: 800
   }), ScrollableLegendModel;
-}(ye);
+}(xe);
 
 // Do not `ignoreSize` to enable setting {left: 10, right: 10}.
 function mergeAndNormalizeLayoutParams(t, e, i) {
@@ -1586,15 +1586,15 @@ function mergeAndNormalizeLayoutParams(t, e, i) {
   });
 }
 
-var Le = ut, Ie = [ "width", "height" ], ke = [ "x", "y" ], Ae = /** @class */ function(t) {
+var Ie = ut, ke = [ "width", "height" ], Ae = [ "x", "y" ], Pe = /** @class */ function(t) {
   function ScrollableLegendView() {
     var e = null !== t && t.apply(this, arguments) || this;
     return e.type = ScrollableLegendView.type, e.newlineDisabled = !0, e._currentIndex = 0, 
     e;
   }
   return u(ScrollableLegendView, t), ScrollableLegendView.prototype.init = function() {
-    t.prototype.init.call(this), this.group.add(this._containerGroup = new Le), this._containerGroup.add(this.getContentGroup()), 
-    this.group.add(this._controllerGroup = new Le);
+    t.prototype.init.call(this), this.group.add(this._containerGroup = new Ie), this._containerGroup.add(this.getContentGroup()), 
+    this.group.add(this._controllerGroup = new Ie);
   }, 
   /**
    * @override
@@ -1645,7 +1645,7 @@ var Le = ut, Ie = [ "width", "height" ], ke = [ "x", "y" ], Ae = /** @class */ f
    * @override
    */
   ScrollableLegendView.prototype.layoutInner = function(t, e, i, n, o, a) {
-    var r = this.getSelectorGroup(), s = t.getOrient().index, l = Ie[s], c = ke[s], h = Ie[1 - s], d = ke[1 - s];
+    var r = this.getSelectorGroup(), s = t.getOrient().index, l = ke[s], c = Ae[s], h = ke[1 - s], d = Ae[1 - s];
     o && xt(
     // Buttons in selectorGroup always layout horizontally
     "horizontal", r, t.get("selectorItemGap", !0));
@@ -1684,24 +1684,24 @@ var Le = ut, Ie = [ "width", "height" ], ke = [ "x", "y" ], Ae = /** @class */ f
     // Calculate `mainRect` and set `clipPath`.
     // mainRect should not be calculated by `this.group.getBoundingRect()`
     // for sake of the overflow.
-    var w = {
+    var y = {
       x: 0,
       y: 0
     };
     // Consider content may be overflow (should be clipped).
-        if (w[o] = p ? i[o] : u[o], w[a] = Math.max(u[a], f[a]), 
+        if (y[o] = p ? i[o] : u[o], y[a] = Math.max(u[a], f[a]), 
     // `containerRect[yx] + containerPos[1 - orientIdx]` is 0.
-    w[r] = Math.min(0, f[r] + m[1 - n]), c.__rectSize = i[o], p) {
-      var y = {
+    y[r] = Math.min(0, f[r] + m[1 - n]), c.__rectSize = i[o], p) {
+      var w = {
         x: 0,
         y: 0
       };
-      y[o] = Math.max(i[o] - f[o] - b, 0), y[a] = w[a], c.setClipPath(new d({
-        shape: y
+      w[o] = Math.max(i[o] - f[o] - b, 0), w[a] = y[a], c.setClipPath(new d({
+        shape: w
       })), 
       // Consider content may be larger than container, container rect
       // can not be obtained from `containerGroup.getBoundingRect()`.
-      c.__rectSize = y[o];
+      c.__rectSize = w[o];
     } else 
     // Do not remove or ignore controller. Keep them set as placeholders.
     h.eachChild((function(t) {
@@ -1718,7 +1718,7 @@ var Le = ut, Ie = [ "width", "height" ], ke = [ "x", "y" ], Ae = /** @class */ f
     }, 
     // When switch from "show controller" to "not show controller", view should be
     // updated immediately without animation, otherwise causes weird effect.
-    p ? t : null), this._updatePageInfoView(t, x), w;
+    p ? t : null), this._updatePageInfoView(t, x), y;
   }, ScrollableLegendView.prototype._pageGo = function(t, e, i) {
     var n = this._getPageInfo(e)[t];
     null != n && i.dispatchAction({
@@ -1748,7 +1748,7 @@ var Le = ut, Ie = [ "width", "height" ], ke = [ "x", "y" ], Ae = /** @class */ f
    * }
    */
   ScrollableLegendView.prototype._getPageInfo = function(t) {
-    var e = t.get("scrollDataIndex", !0), i = this.getContentGroup(), n = this._containerGroup.__rectSize, o = t.getOrient().index, a = Ie[o], r = ke[o], s = this._findTargetItemIndex(e), l = i.children(), c = l[s], h = l.length, d = h ? 1 : 0, u = {
+    var e = t.get("scrollDataIndex", !0), i = this.getContentGroup(), n = this._containerGroup.__rectSize, o = t.getOrient().index, a = ke[o], r = Ae[o], s = this._findTargetItemIndex(e), l = i.children(), c = l[s], h = l.length, d = h ? 1 : 0, u = {
       contentPosition: [ i.x, i.y ],
       pageCount: d,
       pageIndex: d - 1,
@@ -1804,10 +1804,10 @@ var Le = ut, Ie = [ "width", "height" ], ke = [ "x", "y" ], Ae = /** @class */ f
     })), null != e ? e : i) : 0;
     var e, i;
   }, ScrollableLegendView.type = "legend.scroll", ScrollableLegendView;
-}(Me);
+}(Le);
 
 function install$2(t) {
-  nt(install$3), t.registerComponentModel(Ce), t.registerComponentView(Ae), 
+  nt(install$3), t.registerComponentModel(Ce), t.registerComponentView(Pe), 
   /*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
@@ -1867,7 +1867,7 @@ function install$2(t) {
   }(t);
 }
 
-var Pe = 2 * Math.PI, Ve = Math.PI / 180;
+var Ve = 2 * Math.PI, ze = Math.PI / 180;
 
 function getViewRect(t, e) {
   return _(t.getBoxLayoutParams(), {
@@ -1896,20 +1896,20 @@ function getBasicPieLayout(t, e) {
 
 function pieLayout(t, e, i) {
   e.eachSeriesByType(t, (function(t) {
-    var e = t.getData(), n = e.mapDimension("value"), o = getViewRect(t, i), a = getBasicPieLayout(t, i), r = a.cx, s = a.cy, l = a.r, c = a.r0, h = -t.get("startAngle") * Ve, d = t.get("endAngle"), u = t.get("padAngle") * Ve;
-    d = "auto" === d ? h - Pe : -d * Ve;
-    var f = t.get("minAngle") * Ve + u, p = 0;
+    var e = t.getData(), n = e.mapDimension("value"), o = getViewRect(t, i), a = getBasicPieLayout(t, i), r = a.cx, s = a.cy, l = a.r, c = a.r0, h = -t.get("startAngle") * ze, d = t.get("endAngle"), u = t.get("padAngle") * ze;
+    d = "auto" === d ? h - Ve : -d * ze;
+    var f = t.get("minAngle") * ze + u, p = 0;
     e.each(n, (function(t) {
       !isNaN(t) && p++;
     }));
-    var v = e.getSum(n), g = Math.PI / (v || p) * 2, m = t.get("clockwise"), b = t.get("roseType"), w = t.get("stillShowZeroSum"), y = e.getDataExtent(n);
+    var v = e.getSum(n), g = Math.PI / (v || p) * 2, m = t.get("clockwise"), b = t.get("roseType"), y = t.get("stillShowZeroSum"), w = e.getDataExtent(n);
     // Sum may be 0
-        y[0] = 0;
+        w[0] = 0;
     var x = m ? 1 : -1, S = [ h, d ], T = x * u / 2;
     Pt(S, !m), h = S[0], d = S[1];
-    var M = ze(t);
+    var M = De(t);
     M.startAngle = h, M.endAngle = d, M.clockwise = m;
-    var C = Math.abs(d - h), L = C, I = 0, k = h;
+    var L = Math.abs(d - h), C = L, I = 0, k = h;
     // In the case some sector angle is smaller than minAngle
         // Some sector is constrained by minAngle and padAngle
     // Rest sectors needs recalculate angle
@@ -1930,7 +1930,7 @@ function pieLayout(t, e, i) {
       }); else {
         (
         // FIXME 兼容 2.0 但是 roseType 是 area 的时候才是这样？
-        n = "area" !== b ? 0 === v && w ? g : t * g : C / p) < f ? (n = f, L -= f) : I += t;
+        n = "area" !== b ? 0 === v && y ? g : t * g : L / p) < f ? (n = f, C -= f) : I += t;
         var o = k + x * n, a = 0, h = 0;
         // calculate display angle
                 u > n ? h = a = k + x * n / 2 : (a = k + T, h = o - T), e.setItemLayout(i, {
@@ -1941,14 +1941,14 @@ function pieLayout(t, e, i) {
           cx: r,
           cy: s,
           r0: c,
-          r: b ? zt(t, y, [ c, l ]) : l
+          r: b ? zt(t, w, [ c, l ]) : l
         }), k = o;
       }
-    })), L < Pe && p) 
+    })), C < Ve && p) 
     // Average the angle if rest angle is not enough after all angles is
     // Constrained by minAngle and padAngle
-    if (L <= .001) {
-      var A = C / p;
+    if (C <= .001) {
+      var A = L / p;
       e.each(n, (function(t, i) {
         if (!isNaN(t)) {
           var n = e.getItemLayout(i);
@@ -1958,7 +1958,7 @@ function pieLayout(t, e, i) {
           n.startAngle = o, n.endAngle = a;
         }
       }));
-    } else g = L / I, k = h, e.each(n, (function(t, i) {
+    } else g = C / I, k = h, e.each(n, (function(t, i) {
       if (!isNaN(t)) {
         var n = e.getItemLayout(i), o = n.angle === f ? f : t * g, a = 0, r = 0;
         o < u ? r = a = k + x * o / 2 : (a = k + T, r = k + x * o - T), n.startAngle = a, 
@@ -1968,7 +1968,7 @@ function pieLayout(t, e, i) {
   }));
 }
 
-var ze = Vt();
+var De = Vt();
 
 /*
 * Licensed to the Apache Software Foundation (ASF) under one
@@ -2008,7 +2008,7 @@ var ze = Vt();
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
-*/ var De = Math.PI / 180;
+*/ var Ne = Math.PI / 180;
 
 function adjustSingleSide(t, e, i, n, o, a, r, s, l, c) {
   if (!(t.length < 2)) {
@@ -2093,12 +2093,12 @@ function isPositionCenter(t) {
 }
 
 function pieLabelLayout(t) {
-  var e, i, n = t.getData(), o = [], a = !1, r = (t.get("minShowLabelAngle") || 0) * De, s = n.getLayout("viewRect"), l = n.getLayout("r"), c = s.width, h = s.x, d = s.y, u = s.height;
+  var e, i, n = t.getData(), o = [], a = !1, r = (t.get("minShowLabelAngle") || 0) * Ne, s = n.getLayout("viewRect"), l = n.getLayout("r"), c = s.width, h = s.x, d = s.y, u = s.height;
   function setNotShow(t) {
     t.ignore = !0;
   }
   n.each((function(t) {
-    var s = n.getItemGraphicEl(t), d = s.shape, u = s.getTextContent(), f = s.getTextGuideLine(), p = n.getItemModel(t), v = p.getModel("label"), g = v.get("position") || p.get([ "emphasis", "label", "position" ]), m = v.get("distanceToLabelLine"), b = v.get("alignTo"), w = K(v.get("edgeDistance"), c), y = v.get("bleedMargin"), x = p.getModel("labelLine"), S = x.get("length");
+    var s = n.getItemGraphicEl(t), d = s.shape, u = s.getTextContent(), f = s.getTextGuideLine(), p = n.getItemModel(t), v = p.getModel("label"), g = v.get("position") || p.get([ "emphasis", "label", "position" ]), m = v.get("distanceToLabelLine"), b = v.get("alignTo"), y = K(v.get("edgeDistance"), c), w = v.get("bleedMargin"), x = p.getModel("labelLine"), S = x.get("length");
     S = K(S, c);
     var M = x.get("length2");
     if (M = K(M, c), Math.abs(d.endAngle - d.startAngle) < r) return T(u.states, setNotShow), 
@@ -2108,28 +2108,28 @@ function pieLabelLayout(t) {
       for (var e in t.states) if (!1 === t.states[e].ignore) return !0;
       return !1;
     }(u)) {
-      var C, L, I, k, A = (d.startAngle + d.endAngle) / 2, P = Math.cos(A), V = Math.sin(A);
+      var L, C, I, k, A = (d.startAngle + d.endAngle) / 2, P = Math.cos(A), V = Math.sin(A);
       e = d.cx, i = d.cy;
       var z = "inside" === g || "inner" === g;
-      if ("center" === g) C = d.cx, L = d.cy, k = "center"; else {
+      if ("center" === g) L = d.cx, C = d.cy, k = "center"; else {
         var D = (z ? (d.r + d.r0) / 2 * P : d.r * P) + e, N = (z ? (d.r + d.r0) / 2 * V : d.r * V) + i;
-        if (C = D + 3 * P, L = N + 3 * V, !z) {
+        if (L = D + 3 * P, C = N + 3 * V, !z) {
           // For roseType
-          var R = D + P * (S + l - d.r), O = N + V * (S + l - d.r), U = R + (P < 0 ? -1 : 1) * M;
+          var R = D + P * (S + l - d.r), O = N + V * (S + l - d.r), H = R + (P < 0 ? -1 : 1) * M;
           // Adjust textX because text align of edge is opposite
-          C = "edge" === b ? P < 0 ? h + w : h + c - w : U + (P < 0 ? -m : m), L = O, I = [ [ D, N ], [ R, O ], [ U, O ] ];
+          L = "edge" === b ? P < 0 ? h + y : h + c - y : H + (P < 0 ? -m : m), C = O, I = [ [ D, N ], [ R, O ], [ H, O ] ];
         }
         k = z ? "center" : "edge" === b ? P > 0 ? "right" : "left" : P > 0 ? "left" : "right";
       }
-      var H = Math.PI, B = 0, W = v.get("rotate");
-      if (ht(W)) B = W * (H / 180); else if ("center" === g) B = 0; else if ("radial" === W || !0 === W) {
-        B = P < 0 ? -A + H : -A;
+      var U = Math.PI, B = 0, W = v.get("rotate");
+      if (ht(W)) B = W * (U / 180); else if ("center" === g) B = 0; else if ("radial" === W || !0 === W) {
+        B = P < 0 ? -A + U : -A;
       } else if ("tangential" === W && "outside" !== g && "outer" !== g) {
         var F = Math.atan2(P, V);
-        F < 0 && (F = 2 * H + F), V > 0 && (F = H + F), B = F - H;
+        F < 0 && (F = 2 * U + F), V > 0 && (F = U + F), B = F - U;
       }
       // Not sectorShape the inside label
-      if (a = !!B, u.x = C, u.y = L, u.rotation = B, u.setStyle({
+      if (a = !!B, u.x = L, u.y = C, u.rotation = B, u.setStyle({
         verticalAlign: "middle"
       }), z) {
         u.setStyle({
@@ -2155,8 +2155,8 @@ function pieLabelLayout(t) {
           textAlign: k,
           labelDistance: m,
           labelAlignTo: b,
-          edgeDistance: w,
-          bleedMargin: y,
+          edgeDistance: y,
+          bleedMargin: w,
           rect: j,
           unconstrainedWidth: j.width,
           labelStyleWidth: u.style.width
@@ -2184,7 +2184,7 @@ function pieLabelLayout(t) {
       var g;
       if (!isPositionCenter(g = t[u]) && g.linePoints) {
         f = g.label, p = g.linePoints;
-        var m = "edge" === g.labelAlignTo, b = f.style.padding, w = b ? b[1] + b[3] : 0, y = f.style.backgroundColor ? 0 : w, x = g.rect.width + y, S = p[1][0] - p[2][0];
+        var m = "edge" === g.labelAlignTo, b = f.style.padding, y = b ? b[1] + b[3] : 0, w = f.style.backgroundColor ? 0 : y, x = g.rect.width + w, S = p[1][0] - p[2][0];
         m ? f.x < e ? p[2][0] = r + g.edgeDistance + x + g.labelDistance : p[2][0] = r + o - g.edgeDistance - x - g.labelDistance : (f.x < e ? p[2][0] = f.x + g.labelDistance : p[2][0] = f.x - g.labelDistance, 
         p[1][0] = p[2][0] + S), p[1][1] = p[2][1] = f.y;
       }
@@ -2200,14 +2200,14 @@ function pieLabelLayout(t) {
       b && (b.x += v.x, b.y += v.y);
     }
     if (g) {
-      var w = p.linePoints;
-      m || !w ? (T(g.states, setNotShow), g.ignore = !0) : (ae(w, p.minTurnAngle), re(w, p.surfaceNormal, p.maxSurfaceAngle), 
+      var y = p.linePoints;
+      m || !y ? (T(g.states, setNotShow), g.ignore = !0) : (re(y, p.minTurnAngle), se(y, p.surfaceNormal, p.maxSurfaceAngle), 
       g.setShape({
-        points: w
+        points: y
       }), 
       // Set the anchor to the midpoint of sector
       v.__hostTarget.textGuideLineConfig = {
-        anchor: new Dt(w[0][0], w[0][1])
+        anchor: new Dt(y[0][0], y[0][1])
       });
     }
   }
@@ -2215,7 +2215,7 @@ function pieLabelLayout(t) {
 
 /**
  * Piece of pie including Sector, Label, LabelLine
- */ var Ne = /** @class */ function(t) {
+ */ var Re = /** @class */ function(t) {
   function PiePiece(e, i, n) {
     var o = t.call(this) || this;
     o.z2 = 2;
@@ -2223,7 +2223,7 @@ function pieLabelLayout(t) {
     return o.setTextContent(a), o.updateData(e, i, n, !0), o;
   }
   return u(PiePiece, t), PiePiece.prototype.updateData = function(t, e, i, n) {
-    var o = this, a = t.hostModel, r = t.getItemModel(e), s = r.getModel("emphasis"), l = t.getItemLayout(e), c = it(se(r.getModel("itemStyle"), l, !0), l);
+    var o = this, a = t.hostModel, r = t.getItemModel(e), s = r.getModel("emphasis"), l = t.getItemLayout(e), c = it(le(r.getModel("itemStyle"), l, !0), l);
     // Ignore NaN data.
     if (isNaN(c.startAngle)) 
     // Use NaN shape to avoid drawing shape.
@@ -2234,20 +2234,20 @@ function pieLabelLayout(t) {
         a.ecModel.ssr ? (
         // Use scale animation in SSR mode(opacity?)
         // Because CSS SVG animation doesn't support very customized shape animation.
-        Ht(o, {
+        Ut(o, {
           scaleX: 0,
           scaleY: 0
         }, a, {
           dataIndex: e,
           isFrom: !0
-        }), o.originX = c.cx, o.originY = c.cy) : "scale" === h ? (o.shape.r = l.r0, Ht(o, {
+        }), o.originX = c.cx, o.originY = c.cy) : "scale" === h ? (o.shape.r = l.r0, Ut(o, {
           shape: {
             r: l.r
           }
         }, a, e)) : null != i ? (o.setShape({
           startAngle: i,
           endAngle: i
-        }), Ht(o, {
+        }), Ut(o, {
           shape: {
             startAngle: l.startAngle,
             endAngle: l.endAngle
@@ -2266,12 +2266,12 @@ function pieLabelLayout(t) {
       var d = (l.startAngle + l.endAngle) / 2, u = a.get("selectedOffset"), f = Math.cos(d) * u, p = Math.sin(d) * u, v = r.getShallow("cursor");
       v && o.attr("cursor", v), this._updateLabel(a, t, e), o.ensureState("emphasis").shape = it({
         r: l.r + (s.get("scale") && s.get("scaleSize") || 0)
-      }, se(s.getModel("itemStyle"), l)), it(o.ensureState("select"), {
+      }, le(s.getModel("itemStyle"), l)), it(o.ensureState("select"), {
         x: f,
         y: p,
-        shape: se(r.getModel([ "select", "itemStyle" ]), l)
+        shape: le(r.getModel([ "select", "itemStyle" ]), l)
       }), it(o.ensureState("blur"), {
-        shape: se(r.getModel([ "blur", "itemStyle" ]), l)
+        shape: le(r.getModel([ "blur", "itemStyle" ]), l)
       });
       var g = o.getTextGuideLine(), m = o.getTextContent();
       g && it(g.ensureState("select"), {
@@ -2310,13 +2310,13 @@ function pieLabelLayout(t) {
       var d = this.getTextGuideLine();
       d || (d = new jt, this.setTextGuideLine(d)), 
       // Default use item visual color
-      le(this, ce(o), {
+      ce(this, he(o), {
         stroke: s,
         opacity: Xt(a.get([ "lineStyle", "opacity" ]), l, 1)
       });
     }
   }, PiePiece;
-}(Rt), Re = /** @class */ function(t) {
+}(Rt), Oe = /** @class */ function(t) {
   function PieView() {
     var e = null !== t && t.apply(this, arguments) || this;
     return e.ignoreLabelLineUpdate = !0, e;
@@ -2331,14 +2331,14 @@ function pieLabelLayout(t) {
     // remove empty-circle if it exists
         // when all data are filtered, show lightgray empty circle
     if (this._emptyCircleSector && s.remove(this._emptyCircleSector), 0 === a.count() && t.get("showEmptyCircle")) {
-      var h = ze(t), d = new Rt({
+      var h = De(t), d = new Rt({
         shape: it(getBasicPieLayout(t, i), h)
       });
       d.useStyle(t.getModel("emptyCircleStyle").getItemStyle()), this._emptyCircleSector = d, 
       s.add(d);
     }
     a.diff(r).add((function(t) {
-      var e = new Ne(a, t, o);
+      var e = new Re(a, t, o);
       a.setItemGraphicEl(t, e), s.add(e);
     })).update((function(t, e) {
       var i = r.getItemGraphicEl(e);
@@ -2356,7 +2356,7 @@ function pieLabelLayout(t) {
       return a <= i.r && a >= i.r0;
     }
   }, PieView.type = "pie", PieView;
-}(Ut);
+}(Ht);
 
 // Pie view
 /*
@@ -2402,7 +2402,7 @@ function pieLabelLayout(t) {
  * LegendVisualProvider is an bridge that pick encoded color from data and
  * provide to the legend component.
  */
-var Oe = /** @class */ function() {
+var He = /** @class */ function() {
   function LegendVisualProvider(
   // Function to get data after filtered. It stores all the encoding info
   t, 
@@ -2422,7 +2422,7 @@ var Oe = /** @class */ function() {
   }, LegendVisualProvider.prototype.getItemVisual = function(t, e) {
     return this._getDataWithEncodedVisual().getItemVisual(t, e);
   }, LegendVisualProvider;
-}(), Ue = Vt(), He = /** @class */ function(t) {
+}(), Ue = Vt(), Be = /** @class */ function(t) {
   function PieSeriesModel() {
     return null !== t && t.apply(this, arguments) || this;
   }
@@ -2432,7 +2432,7 @@ var Oe = /** @class */ function() {
     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 Oe(M(this.getData, this), M(this.getRawData, this)), 
+    this.legendVisualProvider = new He(M(this.getData, this), M(this.getRawData, this)), 
     this._defaultLabelLine(e);
   }, 
   /**
@@ -2588,7 +2588,7 @@ var Oe = /** @class */ function() {
 }(_t);
 
 nt([ function(t) {
-  nt(ot), t.registerComponentModel(de), t.registerComponentView(we), 
+  nt(ot), t.registerComponentModel(ue), t.registerComponentView(we), 
   /**
    * @action
    * @property {string} type
@@ -2609,7 +2609,7 @@ nt([ function(t) {
 }, function(t) {
   nt(install$3), nt(install$2);
 }, function(t) {
-  t.registerChartView(Re), t.registerSeriesModel(He), Jt("pie", t.registerAction), 
+  t.registerChartView(Oe), t.registerSeriesModel(Be), Jt("pie", t.registerAction), 
   t.registerLayout(pt(pieLayout, "pie")), t.registerProcessor(function(t) {
     return {
       seriesType: t,
@@ -2642,9 +2642,9 @@ nt([ function(t) {
       }
     };
   }("pie"));
-}, Zt, Qt, he ]);
+}, Zt, Qt, de ]);
 
-const Be =  t(class extends e {
+const We =  t(class extends e {
   constructor(t) {
     super(), !1 !== t && this.__registerHost(), this.__attachShadow(), this.change = i(this, "change", 7), 
     this.click = i(this, "click", 7), this.tctChange = i(this, "tctChange", 7), this.tctClick = i(this, "tctClick", 7), 
@@ -2652,7 +2652,7 @@ const Be =  t(class extends e {
       id: null,
       value: null,
       name: null
-    }, 
+    }, this.keyboardAnnouncement = "", 
     /** An array of objects that contain the data to be displayed. */
     this.data = [], 
     /** The amount which the slice will scale when hovered. */
@@ -2691,11 +2691,11 @@ const Be =  t(class extends e {
       c(this, [ "click", "tctClick" ], i);
     }, this.onButtonKeyDown = t => {
       const {selectedId: e, data: i} = this;
+      if (!i.length || t.altKey || t.ctrlKey || t.metaKey || t.shiftKey) return;
       let n = this.getIndexById(e) || 0;
       switch (t.key) {
        case "ArrowUp":
        case "ArrowDown":
-       case " ":
         t.preventDefault();
         break;
 
@@ -2716,12 +2716,24 @@ const Be =  t(class extends e {
         break;
 
        case "Escape":
-        this.clearSelection();
+        return t.preventDefault(), this.clearSelection(), void (this.keyboardAnnouncement = a(this.summaryName || "tecton.element.chartDonut.button.summaryName"));
+
+       case "Home":
+       case "End":
+        t.preventDefault(), n = "Home" === t.key ? 0 : i.length - 1, this.chart.dispatchAction({
+          type: "select",
+          seriesId: "pie",
+          dataIndex: n
+        });
         break;
 
        default:
         return;
       }
+      if ([ "ArrowLeft", "ArrowRight", "Home", "End" ].includes(t.key)) {
+        const t = i[n];
+        this.keyboardAnnouncement = te(t.name, this.displayValue(t.value), n, i.length);
+      }
     }, this.onClickElsewhere = t => {
       t.stopPropagation(), this.clearSelection();
     }, this.onContainerClick = t => {
@@ -2778,17 +2790,17 @@ const Be =  t(class extends e {
     this.hoveredId = null, this.selectedId = null;
   }
   componentDidLoad() {
-    const t = te(this.chartContainer);
+    const t = ee(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);
+    r(this.hostElement);
   }
   // #endregion
   // #region Listeners
   delegateFocus(t) {
-    var e;
-    r(t, this.hostElement) && this.isClickable && (null === (e = this.centerButtonElement) || void 0 === e || e.focus());
+    var e, i;
+    s(t, this.hostElement) && (this.isClickable ? null === (e = this.centerButtonElement) || void 0 === e || e.focus() : this.data.length && (null === (i = this.chartContainer) || void 0 === i || i.focus()));
   }
   // #endregion
   // #region Public Methods API
@@ -2847,7 +2859,8 @@ const Be =  t(class extends e {
     this.chart && this.updateChart(this.chart);
   }
   dataUpdated() {
-    this.chart && (this.colors = this.getColors(), this.updateChart(this.chart), this.setLegendData());
+    this.keyboardAnnouncement = "", this.chart && (this.colors = this.getColors(), this.updateChart(this.chart), 
+    this.setLegendData());
   }
   innerRadiusUpdated() {
     const {innerRadius: t, outerRadius: e} = this, i = parseFloat(t), n = parseFloat(e);
@@ -2880,7 +2893,7 @@ const Be =  t(class extends e {
       ...this.getDataById(i),
       color: this.colors[n]
     } : {
-      name: s(this.summaryName || "tecton.element.chartDonut.button.summaryName"),
+      name: a(this.summaryName || "tecton.element.chartDonut.button.summaryName"),
       icon: this.summaryIcon,
       value: e.reduce(((t, e) => t + e.value), 0),
       color: null
@@ -2907,7 +2920,7 @@ const Be =  t(class extends e {
     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, n) => {
       let o = t[n % t.length];
-      return i.color && (o = i.color), e.push(ee(o, this.chartContainerStyles, this.hostElementStyles) || o), 
+      return i.color && (o = i.color), e.push(ie(o, this.chartContainerStyles, this.hostElementStyles) || o), 
       e;
     }), []);
   }
@@ -2971,7 +2984,8 @@ const Be =  t(class extends e {
     }));
   }
   updateChart(t) {
-    return this.validateColor(), t.setOption({
+    var e;
+    this.validateColor(), t.setOption({
       tooltip: {
         show: !1
       },
@@ -3010,7 +3024,9 @@ const Be =  t(class extends e {
         minAngle: this.getMinSliceSizeAsAngle(),
         data: this.data
       } ]
-    });
+    }), 
+    // The clickable variant handles keyboard interaction on its native center button.
+    null === (e = this.chartContainer) || void 0 === e || e.setAttribute("role", this.isClickable ? "img" : "application");
   }
   validateColor() {
     // check if there is name duplicated, then custom style using `itemStyle` object will be used.
@@ -3025,12 +3041,13 @@ const Be =  t(class extends e {
   // #endregion
   // #region Render Methods
   renderCenterBlock() {
-    const {icon: t, name: e, value: i, color: o} = this.centerData, {isClickable: a} = this, r = a ? "button" : "div", l = this.displayValue(i), c = a ? {
+    const {icon: t, name: e, value: i, color: o} = this.centerData, {isClickable: r} = this, s = r ? "button" : "div", l = this.displayValue(i), c = r ? {
       onKeyDown: this.onButtonKeyDown,
+      onBlur: () => this.keyboardAnnouncement = "",
       onClick: this.onButtonClick,
       ref: t => this.centerButtonElement = t,
-      "aria-describedby": "center-card-description",
-      "aria-roledescription": s("tecton.element.chartDonut.button.roleDescription")
+      "aria-describedby": "center-card-description chart-keyboard-instructions",
+      "aria-roledescription": a("tecton.element.chartDonut.button.roleDescription")
     } : null;
     return n("div", {
       class: "center-card-container",
@@ -3041,7 +3058,10 @@ const Be =  t(class extends e {
     }, n("div", {
       id: "center-card-description",
       class: "sr"
-    }, s("tecton.element.chartDonut.button.description")), n(r, {
+    }, a("tecton.element.chartDonut.button.description")), n("div", {
+      id: "chart-keyboard-instructions",
+      class: "sr"
+    }, a("tecton.element.chart.keyboardInstructions")), n(s, {
       class: "center-card",
       "test-id": "centerCard",
       ...c
@@ -3060,27 +3080,33 @@ const Be =  t(class extends e {
   }
   render() {
     return n("click-elsewhere", {
-      key: "27c21f281ef0746c9bd9d7235fa1833df7711e4d",
+      key: "54e5d16621ac527fec69834b2c1cc1e7d2c6540b",
       onChange: this.onClickElsewhere
     }, n("figure", {
-      key: "8356a94846a4319b682e3bc3171e6a71afb228f8"
+      key: "61e0c1e30fed4e89816d228c1c190b5bd38991a3"
     }, n("div", {
-      key: "a6b016aaa11371fdff673eb8cd7508bb5f3ce852",
+      key: "0685b804780ebdf17d7bfe5956306a027c3c9dba",
       class: "container"
     }, n("div", {
-      key: "862baeb8b1c1e096c92d260bc7340666875f9763",
+      key: "458dfa5c6ad8d704de66d4d51461e2d7b28ba13c",
       ref: t => this.chartContainer = t,
-      "aria-describedby": this.isClickable ? void 0 : "center-card-description",
+      "aria-describedby": this.isClickable ? void 0 : "center-card-description chart-keyboard-instructions",
       class: "chart-container",
-      role: "img",
+      role: this.isClickable ? "img" : "application",
       "test-id": "chartContainer",
       onClick: this.onContainerClick,
-      tabIndex: this.isClickable ? void 0 : 0,
-      onKeyDown: this.isClickable ? void 0 : this.onButtonKeyDown
-    }), this.renderCenterBlock()), this.showLegend && n("figcaption", {
-      key: "24f16b0d7afd3a6433c58cd8eb6806785fc938e5"
+      tabIndex: !this.isClickable && this.data.length ? 0 : void 0,
+      onKeyDown: this.isClickable ? void 0 : this.onButtonKeyDown,
+      onBlur: () => this.keyboardAnnouncement = ""
+    }), this.renderCenterBlock(), n("div", {
+      key: "105396c05b8aa162b1c0515cb4b96dadafcca911",
+      class: "sr",
+      role: "status",
+      "aria-atomic": "true"
+    }, this.keyboardAnnouncement)), this.showLegend && n("figcaption", {
+      key: "c6462ae033852ff7fa09d752e4fc8860608448c6"
     }, n("q2-legend", {
-      key: "6bd27b69926b77181ab16726bb4e79c91e4dcc37",
+      key: "d8f1ceb9b46392264b306d316d1fb6066b2f5b4d",
       class: "legend",
       data: this.legendData,
       format: this.format,
@@ -3146,6 +3172,7 @@ const Be =  t(class extends e {
   summaryIcon: [ 513, "summary-icon" ],
   summaryName: [ 513, "summary-name" ],
   hoveredId: [ 32 ],
+  keyboardAnnouncement: [ 32 ],
   legendData: [ 32 ],
   clearSelection: [ 64 ],
   getChartOptions: [ 64 ],
@@ -3183,26 +3210,26 @@ const Be =  t(class extends e {
   } ]
 } ]);
 
-const We = Be, defineCustomElement = function() {
+const Fe = We, defineCustomElement = function() {
   if ("undefined" == typeof customElements) return;
   [ "q2-chart-donut", "click-elsewhere", "q2-icon", "q2-legend" ].forEach((t => {
     switch (t) {
      case "q2-chart-donut":
-      customElements.get(o(t)) || customElements.define(o(t), Be);
+      customElements.get(o(t)) || customElements.define(o(t), We);
       break;
 
      case "click-elsewhere":
-      customElements.get(o(t)) || ie();
+      customElements.get(o(t)) || ne();
       break;
 
      case "q2-icon":
-      customElements.get(o(t)) || ne();
+      customElements.get(o(t)) || oe();
       break;
 
      case "q2-legend":
-      customElements.get(o(t)) || oe();
+      customElements.get(o(t)) || ae();
     }
   }));
 };
 
-export { We as Q2ChartDonut, defineCustomElement }
+export { Fe as Q2ChartDonut, defineCustomElement }