@arcgis/charts-components 4.34.0-next.13 → 4.34.0-next.131

package/dist/chunks/pie-chart-model.js

@@ -1,7 +1,8 @@
-import { WebChartTypes as T, defaultPieFromFieldsName as D, WebChartStatisticType as p, WebChartSortOrderKinds as b, WebChartOrderDataByTypes as y, defaultPieFromFieldsValue as I, RESTSymbolType as V } from "@arcgis/charts-spec";
-import { memoize as se, cloneDeep as E, isEmpty as ae, isNull as re } from "lodash-es";
+import { W as o, R as l } from "./series-types.js";
+import "@arcgis/toolkit/intl";
+import { cloneDeep as x } from "lodash-es";
 import "d3-array";
-import { aa as F, av as R, aL as oe, c9 as U, bR as L, at as K, a6 as M, V as j, k as B, cs as v, o as ne, aC as le } from "./interfaces.js";
+import { aj as f, aC as b, af as h, a1 as D, p, cx as g, x as N, aL as U, aE as F } from "./interfaces.js";
 import "@arcgis/core/geometry/support/jsonUtils.js";
 import "@arcgis/core/rest/support/AttributeBinsQuery.js";
 import "@arcgis/core/rest/support/Query.js";
@@ -9,20 +10,25 @@ import "@arcgis/core/rest/support/StatisticDefinition.js";
 import "@arcgis/core/time/TimeExtent.js";
 import "@arcgis/core/core/promiseUtils.js";
 import "@arcgis/core/request.js";
-import { a as $, w as N, u as x, f as ce, C as ge, H as de, T as ue } from "./serial-chart-data.js";
-import { a as g, P as d, b as h } from "./common.js";
-import { M as Y, a as pe, b as fe, c as ye } from "./model-with-data-labels.js";
+import "./runtime.js";
+import "@arcgis/toolkit/dom";
+import { C as M } from "./model-with-multi-axes.js";
+import { b as r, a as c } from "./common.js";
+import { M as L, a as G, b as A, c as k } from "./model-with-data-labels.js";
+import "@arcgis/core/intl.js";
+import { o as O, an as w, l as W } from "./data.js";
+import { g as u, s as z, a as B, c as E, b as R, d as j, e as K, f as q, h as m, i as y, j as H } from "./pie-chart-data.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.34/esri/copyright.txt for details.
-v4.34.0-next.13 */
-const he = (t) => t.legend?.displayNumericValue ?? !1, me = (t, e) => {
-  e.series[0]?.type === T.PieSeries && (e.legend === void 0 && (e.legend = F()), e.legend.displayNumericValue = t);
-}, Se = (t) => t.legend?.displayPercentage ?? !1, Ce = (t, e) => {
-  e.series[0]?.type === T.PieSeries && (e.legend === void 0 && (e.legend = F()), e.legend.displayPercentage = t);
-}, be = (t) => t.legend?.labelMaxWidth ?? 200, Oe = (t, e) => {
-  e.series[0]?.type === T.PieSeries && (e.legend === void 0 && (e.legend = F()), e.legend.labelMaxWidth = t);
+v4.34.0-next.131 */
+const J = (i) => i.legend?.displayNumericValue ?? !1, Q = (i, e) => {
+  e.series[0]?.type === o.PieSeries && (e.legend === void 0 && (e.legend = f()), e.legend.displayNumericValue = i);
+}, X = (i) => i.legend?.displayPercentage ?? !1, Y = (i, e) => {
+  e.series[0]?.type === o.PieSeries && (e.legend === void 0 && (e.legend = f()), e.legend.displayPercentage = i);
+}, Z = (i) => i.legend?.labelMaxWidth ?? 200, $ = (i, e) => {
+  e.series[0]?.type === o.PieSeries && (e.legend === void 0 && (e.legend = f()), e.legend.labelMaxWidth = i);
 };
-class H extends Y {
+class P extends L {
   /**
    * Gets the setting for the display of numerical value in the legend items.
    * @returns {boolean}
@@ -30,7 +36,7 @@ class H extends Y {
    * This setting is only applicable to pie charts.
    */
   getDisplayNumericValue() {
-    return he(this._config);
+    return J(this._config);
   }
   /**
    * Sets the setting for the display of numerical value in the legend items.
@@ -39,7 +45,7 @@ class H extends Y {
    * This setting is only applicable to pie charts.
    */
   setDisplayNumericValue(e) {
-    me(e, this._config), this.emitConfigUpdate("setDisplayNumericValue");
+    Q(e, this._config), this.emitConfigUpdate("setDisplayNumericValue");
   }
   /**
    * Gets the setting for the display of percentage in the legend items.
@@ -48,7 +54,7 @@ class H extends Y {
    * This setting is only applicable to pie charts.
    */
   getDisplayPercentage() {
-    return Se(this._config);
+    return X(this._config);
   }
   /**
    * Sets the setting for the display of percentage in the legend items.
@@ -57,7 +63,7 @@ class H extends Y {
    * This setting is only applicable to pie charts.
    */
   setDisplayPercentage(e) {
-    Ce(e, this._config), this.emitConfigUpdate("setDisplayPercentage");
+    Y(e, this._config), this.emitConfigUpdate("setDisplayPercentage");
   }
   /**
    * Gets the maximum width in pixel for the legend item labels.
@@ -66,7 +72,7 @@ class H extends Y {
    * This setting is only applicable to pie charts.
    */
   getLabelMaxWidth() {
-    return be(this._config);
+    return Z(this._config);
   }
   /**
    * Sets the maximum width in pixel for the legend item labels.
@@ -75,302 +81,104 @@ class H extends Y {
    * This setting is only applicable to pie charts.
    */
   setLabelMaxWidth(e) {
-    Oe(e, this._config), this.emitConfigUpdate("setLabelMaxWidth");
-  }
-}
-$(H, [Y]);
-const _ = (t) => t.series?.[0]?.x ?? "";
-function Le(t, e) {
-  const i = t.series?.[0];
-  return [`${e === g.Category ? i.y : I} ${b.Descending}`];
-}
-const A = (t, e) => {
-  let i = d.valueDesc;
-  const s = t.orderOptions?.data?.orderType ?? Le(t, e), a = t.orderOptions?.data?.orderBy ?? b.Descending;
-  return s === y.Category && Array.isArray(a) ? i = d.customSort : s === y.Category ? a === b.Ascending ? i = d.labelAsc : i = d.labelDesc : a === b.Ascending ? i = d.valueAsc : i = d.valueDesc, i;
-}, f = se(
-  // without memoizing, the worst case efficiency is O(series.length), best case is O(1)
-  // with memoizing, the worst case efficiency for repeated calls becomes O(1)
-  (t) => {
-    let e = [];
-    return e = t.series?.[0]?.query?.outStatistics?.map(
-      (i) => i.onStatisticField
-    ) ?? [t.series?.[0]?.y ?? ""], [...new Set(e.filter((i) => i !== ""))];
-  },
-  // using series array address as key, since a change to the numeric fields will always rebuild a fresh series array
-  (t) => t.series
-), m = (t, e) => {
-  const i = f(t);
-  let s;
-  return e === g.Fields && i.length === 0 ? s = p.Sum : s = t.series?.[0]?.query?.outStatistics?.[0]?.statisticType ?? p.NoAggregation, s;
-};
-async function J(t) {
-  const { config: e, layerInfo: i, mode: s } = t, { objectIdField: a } = i ?? {}, o = await R(a), r = _(e), l = e.series[0]?.dataLabels?.visible ?? !1, n = {
-    ...o,
-    x: s === g.Category ? r : D,
-    slices: e.series?.[0]?.slices,
-    dataLabels: { ...o.dataLabels, visible: l },
-    innerRadiusSize: e.series?.[0]?.innerRadius,
-    sliceGrouping: e.series?.[0]?.sliceGrouping,
-    dataLabelsCharacterLimit: e.series?.[0]?.dataLabelsCharacterLimit,
-    numericValueFormat: e.series?.[0]?.numericValueFormat,
-    percentValueFormat: e.series?.[0]?.percentValueFormat,
-    displayCategoryOnDataLabel: e.series?.[0]?.displayCategoryOnDataLabel,
-    displayNumericValueOnDataLabel: e.series?.[0]?.displayNumericValueOnDataLabel,
-    displayPercentageOnDataLabel: e.series?.[0]?.displayPercentageOnDataLabel
-  }, c = m(e, s);
-  if (c !== p.NoAggregation && a !== void 0) {
-    const u = `${c}_${a}_0`.toUpperCase();
-    n.y = s === g.Category ? u : I, n.query = {
-      outStatistics: s === g.Category ? [
-        {
-          statisticType: c,
-          onStatisticField: a,
-          outStatisticFieldName: u
-        }
-      ] : []
-    };
-  }
-  return s === g.Category && n.query !== void 0 ? n.query.groupByFieldsForStatistics = [r] : delete n.query?.groupByFieldsForStatistics, E(n);
-}
-async function w(t, e, i) {
-  const { layerFieldsInfo: s, objectIdField: a } = e, o = _(t), r = f(t), l = m(t, i), n = r.length === 0 || r.includes(a), c = await oe(l), u = n ? "" : r.map((ie) => U(s ?? [], ie)).join(", "), S = U(s ?? [], o);
-  let C = "";
-  const O = await ce();
-  let P;
-  return i === g.Fields ? P = r.length === 0 : P = o === "", P ? C = O.chartType.pieChart : l === p.NoAggregation ? C = L(O.titleLabels.aggrFieldsByCategory, {
-    aggregationFields: n ? a : u,
-    category: S
-  }) : l === p.Count ? C = L(O.titleLabels.aggrTypeCategory, {
-    aggregationType: c,
-    category: S
-  }) : r.length > 0 && (S === D || ae(S) || re(S) ? C = L(O.titleLabels.aggrTypeOfAggrFields, {
-    aggregationType: c,
-    aggregationFields: u
-  }) : C = L(O.titleLabels.aggrTypeOfAggrFieldsByCategory, {
-    aggregationType: c,
-    aggregationFields: u,
-    category: S
-  })), C;
-}
-const De = (t) => {
-  const { newSortOrderKind: e, config: i, orderByList: s } = t;
-  i.orderOptions ??= {}, e === d.customSort && s !== void 0 ? i.orderOptions.data = {
-    orderType: y.Category,
-    orderBy: [...s]
-  } : i.orderOptions.data = {
-    orderType: e === d.labelAsc || e === d.labelDesc ? y.Category : y.YValue,
-    orderBy: e === d.labelAsc || e === d.valueAsc ? b.Ascending : b.Descending
-  };
-}, _e = async (t) => {
-  const { newCategory: e, config: i, layerInfo: s, mode: a } = t, o = i.series?.length ?? 0;
-  if (i.series.forEach((r) => {
-    r.x = a === g.Category ? e : D, r.query !== void 0 && e !== D ? r.query.groupByFieldsForStatistics = [e] : delete r.query?.groupByFieldsForStatistics;
-  }), o === 0) {
-    const r = [await J({ config: i, layerInfo: s, mode: a })];
-    i.series = r;
-  }
-  if (s !== void 0) {
-    const r = await N({
-      config: i,
-      layerInfo: s,
-      numericFields: f(i),
-      aggregationType: m(i, a)
-    });
-    x(i, 1, r), i.title && (i.title.content.text = await w(i, s, a));
-    const l = a === g.Fields ? f(i).filter((n) => n !== s.objectIdField) : f(i);
-    await X({ newNumericFields: l, config: i, layerInfo: s, mode: a });
+    $(e, this._config), this.emitConfigUpdate("setLabelMaxWidth");
   }
-};
-async function Q(t) {
-  const { numericFields: e, aggregationType: i, config: s, layerInfo: a, mode: o } = t, r = [], l = await J({
-    config: s,
-    layerInfo: a,
-    mode: o
-  }), n = {
-    ...l,
-    query: {
-      ...l.query
-    }
-  };
-  if (e.length <= 1 ? n.query.where = l.query?.where : delete n.query.where, i !== p.NoAggregation)
-    if (o === g.Category) {
-      if (e.length > 0) {
-        const c = e[0], u = `${i}_${e[0]}_0`.toUpperCase();
-        n.y = u, n.query.outStatistics = [
-          {
-            ...l.query?.outStatistics?.[0] ?? {},
-            onStatisticField: c,
-            outStatisticFieldName: u,
-            statisticType: i
-          }
-        ];
-      }
-    } else {
-      n.y = I;
-      for (const c of e)
-        n.query.outStatistics?.push({
-          onStatisticField: c,
-          outStatisticFieldName: c,
-          statisticType: i
-        });
-    }
-  else
-    n.y = e[0], n.query = {};
-  r.push(n), s.series = r;
 }
-const Te = async (t) => {
-  const { newAggregationType: e, config: i, layerInfo: s, mode: a } = t, o = f(i);
-  await Q({
-    config: i,
-    layerInfo: s,
-    numericFields: o,
-    aggregationType: e,
-    mode: a
-  });
-  const r = await N({
-    config: i,
-    layerInfo: s,
-    numericFields: f(i),
-    aggregationType: m(i, a)
-  });
-  x(i, 1, r), i.title && (i.title.content.text = await w(i, s, a));
-  const l = i.series?.[0]?.displayCategoryOnDataLabel, n = i.series?.[0]?.displayNumericValueOnDataLabel, c = i.series?.[0]?.displayPercentageOnDataLabel;
-  i.legend = {
-    ...i.legend ?? F(),
-    displayNumericValue: n,
-    displayPercentage: c,
-    displayCategory: l
-  };
-}, X = async (t) => {
-  let { newNumericFields: e } = t;
-  const { config: i, layerInfo: s, mode: a } = t, { objectIdField: o } = s ?? {};
-  let r = m(i, a);
-  if (e = e === "" ? [] : e, e = typeof e == "string" ? [e] : e, o !== void 0 && (e.length === 0 && a === g.Category ? (e.push(o), r = p.Count) : r === p.Count && e.length >= 1 && !e.includes(o) && (r = p.Sum)), s !== void 0) {
-    await Q({
-      config: i,
-      layerInfo: s,
-      numericFields: e,
-      aggregationType: r,
-      mode: a
-    });
-    const l = await N({
-      config: i,
-      layerInfo: s,
-      numericFields: f(i),
-      aggregationType: m(i, a)
-    });
-    x(i, 1, l), i.title && (i.title.content.text = await w(i, s, a));
-  } else
-    i.series.forEach((l) => {
-      delete l.query, l.y = e[0];
-    });
-}, G = (t, e) => {
-  let i = [];
-  const s = t.orderOptions?.data?.orderType, a = A(t, e), o = t.orderOptions?.data?.orderBy;
-  return a === d.customSort && s === y.Category && Array.isArray(o) && (i = o), i;
-}, k = (t) => {
-  const { values: e, config: i, mode: s } = t;
-  i.orderOptions ??= {};
-  const a = i.orderOptions?.data?.orderType;
-  A(i, s) === d.customSort && a === y.Category && (i.orderOptions.data = {
-    orderType: y.Category,
-    orderBy: [...e]
-  });
-}, Fe = (t) => t.series?.[0]?.innerRadius, Pe = (t, e) => {
-  e.series?.[0] && (e.series[0].innerRadius = t);
-}, Ve = (t) => t.series?.[0]?.dataLabelsCharacterLimit, ve = (t, e) => {
-  e.series?.[0] && (e.series[0].dataLabelsCharacterLimit = t);
-}, q = (t) => t.series[0]?.startAngle, W = (t, e) => {
-  e.series?.[0] && (e.series[0].startAngle = t);
-}, Ie = (t) => t.series?.[0]?.displayCategoryOnTooltip ?? !0, Ne = (t) => t.series?.[0]?.displayNumericValueOnTooltip ?? !0, xe = (t) => t.series?.[0]?.displayPercentageOnTooltip ?? !0, Ae = (t, e) => {
-  e.series[0] && (e.series[0].displayPercentageOnTooltip = t);
-}, we = (t) => t.series?.[0]?.valuePrefix, Ue = (t, e) => {
-  e.series?.[0] && (e.series[0].valuePrefix = t);
-}, Me = (t) => t.series?.[0]?.valueSuffix, Be = (t, e) => {
-  e.series?.[0] && (e.series[0].valueSuffix = t);
-}, Ge = (t) => t.series?.[0]?.percentagePrefix, ke = (t, e) => {
-  e.series?.[0] && (e.series[0].percentagePrefix = t);
-}, qe = (t) => t.series?.[0]?.percentageSuffix, We = (t, e) => {
-  e.series?.[0] && (e.series[0].percentageSuffix = t);
-}, ze = (t) => {
+O(P, [L]);
+const ee = (i) => i.series?.[0]?.innerRadius, ie = (i, e) => {
+  e.series?.[0] && (e.series[0].innerRadius = i);
+}, te = (i) => i.series?.[0]?.dataLabelsCharacterLimit, se = (i, e) => {
+  e.series?.[0] && (e.series[0].dataLabelsCharacterLimit = i);
+}, S = (i) => i.series[0]?.startAngle, C = (i, e) => {
+  e.series?.[0] && (e.series[0].startAngle = i);
+}, ae = (i) => i.series?.[0]?.displayCategoryOnTooltip ?? !0, re = (i) => i.series?.[0]?.displayNumericValueOnTooltip ?? !0, ne = (i) => i.series?.[0]?.displayPercentageOnTooltip ?? !0, oe = (i, e) => {
+  e.series[0] && (e.series[0].displayPercentageOnTooltip = i);
+}, le = (i) => i.series?.[0]?.valuePrefix, ge = (i, e) => {
+  e.series?.[0] && (e.series[0].valuePrefix = i);
+}, ce = (i) => i.series?.[0]?.valueSuffix, fe = (i, e) => {
+  e.series?.[0] && (e.series[0].valueSuffix = i);
+}, de = (i) => i.series?.[0]?.percentagePrefix, he = (i, e) => {
+  e.series?.[0] && (e.series[0].percentagePrefix = i);
+}, pe = (i) => i.series?.[0]?.percentageSuffix, ue = (i, e) => {
+  e.series?.[0] && (e.series[0].percentageSuffix = i);
+}, me = (i) => {
   let e;
-  const i = t.series?.[0];
-  return i?.displayNumericValueOnDataLabel === !0 && i?.displayPercentageOnDataLabel === !0 ? e = h.Both : i?.displayNumericValueOnDataLabel === !0 ? e = h.Value : e = h.Percentage, e;
-}, Ee = (t, e) => {
-  const i = t === h.Value || t === h.Both, s = t === h.Percentage || t === h.Both;
-  e.series?.[0] && (e.series[0].displayNumericValueOnDataLabel = i, e.series[0].displayPercentageOnDataLabel = s), e.legend && (e.legend = {
+  const t = i.series?.[0];
+  return t?.displayNumericValueOnDataLabel === !0 && t?.displayPercentageOnDataLabel === !0 ? e = r.Both : t?.displayNumericValueOnDataLabel === !0 ? e = r.Value : e = r.Percentage, e;
+}, ye = (i, e) => {
+  const t = i === r.Value || i === r.Both, s = i === r.Percentage || i === r.Both;
+  e.series?.[0] && (e.series[0].displayNumericValueOnDataLabel = t, e.series[0].displayPercentageOnDataLabel = s), e.legend && (e.legend = {
     ...e.legend,
-    displayNumericValue: i,
+    displayNumericValue: t,
     displayPercentage: s
   });
-}, Re = (t) => t.series?.[0]?.alignDataLabels ?? !1, Ke = (t, e) => {
-  e.series[0] && (e.series[0].alignDataLabels = t);
-}, je = (t) => t.series?.[0]?.dataLabelsInside ?? !1, $e = (t, e) => {
-  e.series[0] && (e.series[0].dataLabelsInside = t);
-}, Ye = (t) => t.series?.[0]?.dataLabelsOffset ?? 10, He = (t, e) => {
-  e.series[0] && (e.series[0].dataLabelsOffset = t);
-}, Je = (t) => t.series?.[0]?.numericValueFormat?.intlOptions?.minimumFractionDigits, Qe = (t, e) => {
-  e.series?.[0] && (e.series[0].numericValueFormat ??= M(), e.series[0].numericValueFormat.intlOptions.minimumFractionDigits = t, e.series[0].numericValueFormat.intlOptions.maximumFractionDigits = t, e.series[0].percentValueFormat ??= M(), e.series[0].percentValueFormat.intlOptions.minimumFractionDigits = t, e.series[0].percentValueFormat.intlOptions.maximumFractionDigits = t);
-}, Xe = (t) => t.series?.[0]?.optimizeDataLabelsOverlapping ?? !1, Ze = (t, e) => {
-  e.series[0] && (e.series[0].optimizeDataLabelsOverlapping = t);
-}, et = (t) => t.series[0]?.ticks?.visible ?? !1, tt = (t, e) => {
-  e.series?.[0] && (e.series[0].ticks ??= K(), e.series[0].ticks.visible = t);
-}, it = (t) => t.series[0]?.ticks?.lineSymbol, st = (t, e) => {
-  t && e.series?.[0] && (e.series[0].ticks ??= K(), e.series[0].ticks.lineSymbol = E(t));
-}, at = (t, e) => e.series?.[0]?.slices?.[t]?.originalLabel, rt = (t, e) => e.series?.[0]?.slices?.[t]?.label, ot = (t, e, i) => {
-  i.series?.[0]?.slices?.[e] && (i.series[0].slices[e].label = t);
-}, nt = (t, e) => e.series?.[0]?.slices?.[t]?.fillSymbol?.color, lt = (t, e, i) => {
-  const s = i.series?.[0]?.slices?.[e]?.fillSymbol;
-  s !== void 0 ? (s.color = t, s.outline !== void 0 ? s.outline.color = t : s.outline = { type: V.SLS, color: t }) : i.series?.[0]?.slices?.[e] !== void 0 && (i.series[0].slices[e].fillSymbol = {
-    type: V.SFS,
-    color: t,
-    outline: { type: V.SLS, color: t }
+}, Se = (i) => i.series?.[0]?.alignDataLabels ?? !1, Ce = (i, e) => {
+  e.series[0] && (e.series[0].alignDataLabels = i);
+}, _e = (i) => i.series?.[0]?.dataLabelsInside ?? !1, be = (i, e) => {
+  e.series[0] && (e.series[0].dataLabelsInside = i);
+}, De = (i) => i.series?.[0]?.dataLabelsOffset ?? 10, Le = (i, e) => {
+  e.series[0] && (e.series[0].dataLabelsOffset = i);
+}, Oe = (i) => i.series?.[0]?.numericValueFormat?.intlOptions?.minimumFractionDigits, Pe = (i, e) => {
+  e.series?.[0] && (e.series[0].numericValueFormat ??= h(), e.series[0].numericValueFormat.intlOptions.minimumFractionDigits = i, e.series[0].numericValueFormat.intlOptions.maximumFractionDigits = i, e.series[0].percentValueFormat ??= h(), e.series[0].percentValueFormat.intlOptions.minimumFractionDigits = i, e.series[0].percentValueFormat.intlOptions.maximumFractionDigits = i);
+}, Te = (i) => i.series?.[0]?.optimizeDataLabelsOverlapping ?? !1, Ve = (i, e) => {
+  e.series[0] && (e.series[0].optimizeDataLabelsOverlapping = i);
+}, Ie = (i) => i.series[0]?.ticks?.visible ?? !1, ve = (i, e) => {
+  e.series?.[0] && (e.series[0].ticks ??= b(), e.series[0].ticks.visible = i);
+}, xe = (i) => i.series[0]?.ticks?.lineSymbol, Ne = (i, e) => {
+  i && e.series?.[0] && (e.series[0].ticks ??= b(), e.series[0].ticks.lineSymbol = x(i));
+}, Ue = (i, e) => e.series?.[0]?.slices?.[i]?.originalLabel, Fe = (i, e) => e.series?.[0]?.slices?.[i]?.label, Me = (i, e, t) => {
+  t.series?.[0]?.slices?.[e] && (t.series[0].slices[e].label = i);
+}, Ge = (i, e) => e.series?.[0]?.slices?.[i]?.fillSymbol?.color, Ae = (i, e, t) => {
+  const s = t.series?.[0]?.slices?.[e]?.fillSymbol;
+  s !== void 0 ? (s.color = i, s.outline !== void 0 ? s.outline.color = i : s.outline = { type: l.SLS, color: i }) : t.series?.[0]?.slices?.[e] !== void 0 && (t.series[0].slices[e].fillSymbol = {
+    type: l.SFS,
+    color: i,
+    outline: { type: l.SLS, color: i }
   });
-}, ct = (t) => t.series?.[0]?.slices?.map((e) => e.sliceId), z = (t, e) => {
+}, ke = (i) => i.series?.[0]?.slices?.map((e) => e.sliceId), _ = (i, e) => {
   e.series?.[0]?.slices?.sort(
-    (i, s) => t.findIndex((a) => i.sliceId === a) - t.findIndex((a) => s.sliceId === a)
+    (t, s) => i.findIndex((a) => t.sliceId === a) - i.findIndex((a) => s.sliceId === a)
   );
-}, gt = (t) => t.series?.[0]?.sliceGrouping, Z = (t, e) => {
-  e.series?.[0] && (e.series[0].sliceGrouping = t);
-}, ee = (t) => t.series?.[0]?.sliceGrouping?.percentageThreshold, dt = (t, e) => {
-  e.series?.[0]?.sliceGrouping !== void 0 ? e.series[0].sliceGrouping.percentageThreshold = t : e.series[0].sliceGrouping = {
-    sliceId: j.defaultGroupOfSlicesId,
-    percentageThreshold: t
+}, we = (i) => i.series?.[0]?.sliceGrouping, T = (i, e) => {
+  e.series?.[0] && (e.series[0].sliceGrouping = i);
+}, V = (i) => i.series?.[0]?.sliceGrouping?.percentageThreshold, We = (i, e) => {
+  e.series?.[0]?.sliceGrouping !== void 0 ? e.series[0].sliceGrouping.percentageThreshold = i : e.series[0].sliceGrouping = {
+    sliceId: D.defaultGroupOfSlicesId,
+    percentageThreshold: i
   };
-}, ut = (t) => t.series?.[0]?.slices, te = (t, e) => {
-  e.series?.[0] && (e.series[0].slices = t);
-}, pt = (t) => {
-  te(void 0, t), Z(
+}, ze = (i) => i.series?.[0]?.slices, I = (i, e) => {
+  e.series?.[0] && (e.series[0].slices = i);
+}, Be = (i) => {
+  I(void 0, i), T(
     {
-      sliceId: j.defaultGroupOfSlicesId,
-      percentageThreshold: ee(t) ?? 0
+      sliceId: D.defaultGroupOfSlicesId,
+      percentageThreshold: V(i) ?? 0
     },
-    t
+    i
   );
-}, ft = (t, e) => e.series[0]?.slices?.[t]?.sliceId, yt = (t, e) => e.series[0]?.slices?.findIndex((i) => i.sliceId === t), ht = (t) => t.series[0]?.slices?.length ?? 0;
-class mt extends ge {
+}, Ee = (i, e) => e.series[0]?.slices?.[i]?.sliceId, Re = (i, e) => e.series[0]?.slices?.findIndex((t) => t.sliceId === i), je = (i) => i.series[0]?.slices?.length ?? 0;
+class Ke extends M {
   constructor() {
-    super(...arguments), this._chartType = T.PieSeries, this._mode = g.Category, this._groupedSliceIds = [];
+    super(...arguments), this._chartType = o.PieSeries, this._mode = c.Category, this._groupedSliceIds = [];
   }
   async setup(e) {
     await this.loadConfigFromLayer(e);
-    const { config: i } = e;
-    if (i !== void 0) {
-      const s = B(i.series);
-      this._mode = s !== v.PieFromFields ? g.Category : g.Fields;
+    const { config: t } = e;
+    if (t !== void 0) {
+      const s = p(t.series);
+      this._mode = s !== g.PieFromFields ? c.Category : c.Fields;
     }
-    this.resolveSetup();
+    typeof this.resolveSetup == "function" && this.resolveSetup();
   }
   // ---------------------------------------------------------------------------------------------
-  // Data Props
+  // #region Data Props
   // ---------------------------------------------------------------------------------------------
   /**
    * Gets the category field for the pie chart.
    * @returns {string}
    */
   getCategory() {
-    return _(this._config);
+    return u(this._config);
   }
   /**
    * Sets the category field for the pie chart.
@@ -378,7 +186,7 @@ class mt extends ge {
    * @async **This method is `async` and must be awaited for the changes to take effect.**
    */
   async setCategory(e) {
-    (!ne(this._config) || e.trim() !== "") && (await _e({
+    (!N(this._config) || e.trim() !== "") && (await z({
       newCategory: e,
       config: this._config,
       layerInfo: this.layerInfo,
@@ -390,7 +198,7 @@ class mt extends ge {
    * @returns {string[]}
    */
   getNumericFields() {
-    return f(this._config);
+    return B(this._config);
   }
   /**
    * Sets the numeric field or numeric fields array for the pie chart.
@@ -398,7 +206,7 @@ class mt extends ge {
    * @async **This method is `async` and must be awaited for the changes to take effect.**
    */
   async setNumericFields(e) {
-    typeof e == "string" && (e = [e]), (this.layerInfo !== void 0 ? de(this.layerInfo.layerFieldsInfo, e) : !0) ? (await X({
+    typeof e == "string" && (e = [e]), (this.layerInfo !== void 0 ? w(this.layerInfo.layerFieldsInfo, e) : !0) ? (await E({
       newNumericFields: e,
       config: this._config,
       layerInfo: this.layerInfo,
@@ -410,7 +218,7 @@ class mt extends ge {
    * @returns {WebChartStatisticType}
    */
   getAggregationType() {
-    return m(this._config, this._mode);
+    return R(this._config, this._mode);
   }
   /**
    * Sets the aggregation type for the pie chart.
@@ -418,7 +226,7 @@ class mt extends ge {
    * @async **This method is `async` and must be awaited for the changes to take effect.**
    */
   async setAggregationType(e) {
-    await Te({
+    await j({
       newAggregationType: e,
       config: this._config,
       layerInfo: this.layerInfo,
@@ -430,31 +238,31 @@ class mt extends ge {
    * @returns {PieChartDataSortingKinds}
    */
   getSortOrder() {
-    return A(this._config, this._mode);
+    return K(this._config, this._mode);
   }
   /**
    * Sets the sort order for the pie chart.
    * @param {PieChartDataSortingKinds} sortOrder The sort order.
    */
-  setSortOrder(e, i) {
-    De({
+  setSortOrder(e, t) {
+    q({
       newSortOrderKind: e,
       config: this._config,
-      orderByList: i
+      orderByList: t
     }), this.emitConfigUpdate("setSortOrder");
   }
   /* Gets the list of category's values for custom sort
    * @returns {string[]}
    */
   getOrderByList() {
-    return G(this._config, this._mode);
+    return m(this._config, this._mode);
   }
   /**
    * Sets the list of category's values for custom sort
    * @param {string[]} orderByList The list of category's values
    */
   setOrderByList(e) {
-    k({
+    y({
       values: e,
       config: this._config,
       mode: this._mode
@@ -490,9 +298,9 @@ class mt extends ge {
    * @returns {string[]}
    */
   async getCustomSortValues() {
-    const e = _(this._config), i = B(this._config.series), s = this.getNumericFields();
+    const e = u(this._config), t = p(this._config.series), s = this.getNumericFields();
     let a = [];
-    return i === v.PieFromFields ? a = s : e.trim() !== "" && i === v.PieFromCategory && (a = await ue({
+    return t === g.PieFromFields ? a = s : e.trim() !== "" && t === g.PieFromCategory && (a = await W({
       category: e,
       config: this._config,
       layerInfo: this.layerInfo
@@ -505,47 +313,47 @@ class mt extends ge {
    * @param {number} fromIndex The index to move the custom sort item from.
    * @param {number} toIndex The index to move the category item to.
    */
-  moveCustomSortValuesInOrderByList(e, i) {
-    const s = G(this._config, this._mode), [a] = s.splice(e, 1);
-    s.splice(i, 0, a), k({
+  moveCustomSortValuesInOrderByList(e, t) {
+    const s = m(this._config, this._mode), [a] = s.splice(e, 1);
+    s.splice(t, 0, a), y({
       values: s,
       config: this._config,
       mode: this._mode
     }), this.emitConfigUpdate("moveCustomSortValuesInOrderByList");
   }
   // ---------------------------------------------------------------------------------------------
-  // Format Props
+  // #region Format Props
   // ---------------------------------------------------------------------------------------------
   /**
    * Gets the symbol for the ticks connecting the slices to the labels.
    * @returns {ISimpleLineSymbol | undefined}
    */
   getTicksSymbol() {
-    return it(this._config);
+    return xe(this._config);
   }
   /**
    * Sets the symbol for the ticks connecting the slices to the labels.
    * @param {ISimpleLineSymbol | undefined} lineSymbol The ticks symbol.
    */
   setTicksSymbol(e) {
-    st(e, this._config), this.emitConfigUpdate("setTicksSymbol");
+    Ne(e, this._config), this.emitConfigUpdate("setTicksSymbol");
   }
   // ---------------------------------------------------------------------------------------------
-  // Slices Props
+  // #region Slices Props
   // ---------------------------------------------------------------------------------------------
   /**
    * Gets the array of slices for the pie chart.
    * @returns {WebChartPieChartSlice[] | undefined}
    */
   getSlices() {
-    return ut(this._config);
+    return ze(this._config);
   }
   /**
    * Sets the array of slices for the pie chart.
    * @param {WebChartPieChartSlice[] | undefined} slices The slices array.
    */
   setSlices(e) {
-    te(e, this._config), this.emitConfigUpdate("setSlices");
+    I(e, this._config), this.emitConfigUpdate("setSlices");
   }
   /**
    * Gets the array of grouped slice ids for the pie chart.
@@ -566,101 +374,101 @@ class mt extends ge {
    * @returns {WebChartPieChartGroupSlice | undefined}
    */
   getSliceGrouping() {
-    return gt(this._config);
+    return we(this._config);
   }
   /**
    * Sets the slice grouping configuration for the pie chart.
    * @param {WebChartPieChartGroupSlice | undefined} sliceGrouping The slice grouping configuration.
    */
   setSliceGrouping(e) {
-    Z(e, this._config), this.emitConfigUpdate("setSliceGrouping");
+    T(e, this._config), this.emitConfigUpdate("setSliceGrouping");
   }
   /**
    * Gets the inner radius size for the pie chart.
    * @returns {number}
    */
   getInnerRadiusSize() {
-    return Fe(this._config) ?? 0;
+    return ee(this._config) ?? 0;
   }
   /**
    * Sets the inner radius size for the pie chart.
    * @param {number} size The inner radius size.
    */
   setInnerRadiusSize(e) {
-    Pe(e, this._config), this.emitConfigUpdate("setInnerRadiusSize");
+    ie(e, this._config), this.emitConfigUpdate("setInnerRadiusSize");
   }
   /**
    * Gets the threshold below which slices will be grouped.
    * @returns {number}
    */
   getGroupingThreshold() {
-    return ee(this._config) ?? 0;
+    return V(this._config) ?? 0;
   }
   /**
    * Sets the threshold below which slices will be grouped.
    * @param {number} threshold The grouping threshold.
    */
   setGroupingThreshold(e) {
-    dt(e, this._config), this.emitConfigUpdate("setGroupingThreshold");
+    We(e, this._config), this.emitConfigUpdate("setGroupingThreshold");
   }
   /**
    * Gets the character limit for the slice labels.
    * @returns {number | null}
    */
   getLabelCharacterLimit() {
-    return Ve(this._config) ?? null;
+    return te(this._config) ?? null;
   }
   /**
    * Sets the character limit for the slice labels.
    * @param {number | null} limit The label character limit.
    */
   setLabelCharacterLimit(e) {
-    ve(e, this._config), this.emitConfigUpdate("setLabelCharacterLimit");
+    se(e, this._config), this.emitConfigUpdate("setLabelCharacterLimit");
   }
   /**
    * Gets the number of decimal places to display in the slice values.
    * @returns {number}
    */
   getDecimalPlaces() {
-    return Je(this._config) ?? 1;
+    return Oe(this._config) ?? 1;
   }
   /**
    * Sets the number of decimal places to display in the slice values.
    * @param {number} decimalPlaces The decimal places.
    */
   setDecimalPlaces(e) {
-    Qe(e, this._config), this.emitConfigUpdate("setDecimalPlaces");
+    Pe(e, this._config), this.emitConfigUpdate("setDecimalPlaces");
   }
   /**
    * Gets the display type for the pie chart slices. Specifies whether to display the slices as a percentage, value, or both.
    * @returns {PieChartSlicesDisplay}
    */
   getDisplayType() {
-    return ze(this._config);
+    return me(this._config);
   }
   /**
    * Sets the display type for the pie chart slices. Specifies whether to display the slices as a percentage, value, or both.
    * @param {PieChartSlicesDisplay} displayType The display type.
    */
   setDisplayType(e) {
-    Ee(e, this._config), this.emitConfigUpdate("setDisplayType");
+    ye(e, this._config), this.emitConfigUpdate("setDisplayType");
   }
   // ---------------------------------------------------------------------------------------------
-  // Protected methods
+  // #region Protected methods
   // ---------------------------------------------------------------------------------------------
   async generateDefaultConfig() {
-    const e = await le();
-    return e.series = [await R(this.layerInfo?.objectIdField)], e;
+    const e = await U();
+    return e.series = [await F(this.layerInfo?.objectIdField)], e;
   }
   // ---------------------------------------------------------------------------------------------
-  // Series Methods
+  // #region Series Methods
   // ---------------------------------------------------------------------------------------------
   /**
    * Gets the original name of the slice based on the slice index.
    * @returns {Date | number | string | null | undefined}
    */
   getOriginalSliceName(e) {
-    return at(e, this._config);
+    return Ue(e, this._config);
   }
   /**
    * Gets the name of the slice based on the slice index. If the index is out of bounds, this function will return `undefined`.
@@ -668,15 +476,15 @@ class mt extends ge {
    * @returns {string | undefined}
    */
   getSliceName(e) {
-    return rt(e, this._config);
+    return Fe(e, this._config);
   }
   /**
    * Sets name of the slice based on the slice index.
    * @param {string} name The name for the slice.
    * @param {number} sliceIndex The index of the slice.
    */
-  setSliceName(e, i) {
-    ot(e, i, this._config), this.emitConfigUpdate("setSliceName");
+  setSliceName(e, t) {
+    Me(e, t, this._config), this.emitConfigUpdate("setSliceName");
   }
   /**
    * Gets the color of the slice based on the slice index. If the index is out of bounds, this function will return `undefined`.
@@ -684,40 +492,40 @@ class mt extends ge {
    * @returns {Color | undefined}
    */
   getSliceColor(e) {
-    return nt(e, this._config);
+    return Ge(e, this._config);
   }
   /**
    * Sets the color of the slice based on the slice index.
    * @param {Color | undefined} color The color for the slice.
    * @param {number} sliceIndex The index of the slice.
    */
-  setSliceColor(e, i) {
-    lt(e, i, this._config), this.emitConfigUpdate("setSliceColor");
+  setSliceColor(e, t) {
+    Ae(e, t, this._config), this.emitConfigUpdate("setSliceColor");
   }
   /**
    * Gets the order of the slice array by returning an array of slice ids
    * @returns {string[] | undefined}
    */
   getOrderOfSlices() {
-    return ct(this._config);
+    return ke(this._config);
   }
   /**
    * Sets the order of the slices array by providing an array of slice ids.
    * @param {string[]} order The order of the slices.
    */
   setOrderOfSlices(e) {
-    z(e, this._config), this.emitConfigUpdate("setOrderOfSlices");
+    _(e, this._config), this.emitConfigUpdate("setOrderOfSlices");
   }
   /**
    * Moves a series from one index in the series array to another.
    * @param {number} fromIndex Index to move the series from.
    * @param {number} toIndex Index to move the series to.
    */
-  moveSeries(e, i) {
+  moveSeries(e, t) {
     const s = this.getOrderOfSlices();
     if (s !== void 0) {
       const [a] = s.splice(e, 1);
-      s.splice(i, 0, a), z(s, this._config), this.emitConfigUpdate("moveSeries");
+      s.splice(t, 0, a), _(s, this._config), this.emitConfigUpdate("moveSeries");
     }
   }
   /**
@@ -726,7 +534,7 @@ class mt extends ge {
    * @returns {string | undefined}
    */
   getSliceId(e) {
-    return ft(e, this._config);
+    return Ee(e, this._config);
   }
   /**
    * Gets the slice index for a given slice id. If the `sliceId` is not found, this function will return `undefined`.
@@ -734,20 +542,20 @@ class mt extends ge {
    * @returns {number | undefined}
    */
   getSliceIndex(e) {
-    return yt(e, this._config);
+    return Re(e, this._config);
   }
   /**
    * Gets the length of the slices array.
    * @returns {number}
    */
   getSlicesLength() {
-    return ht(this._config);
+    return je(this._config);
   }
   /**
    * Resets the slices styling to the default styling.
    */
   resetSlices() {
-    pt(this._config), this.emitConfigUpdate("resetSlices");
+    Be(this._config), this.emitConfigUpdate("resetSlices");
   }
   /**
    * Returns whether the series styling is able to be reset.
@@ -755,59 +563,59 @@ class mt extends ge {
    */
   resetAvailable() {
     const e = !this.getColorMatch();
-    let i = !1;
+    let t = !1;
     const s = this.getSlices()?.length ?? 0;
-    for (let o = 0; o < s; o += 1) {
-      const r = this.getOriginalSliceName(o), l = this.getSliceName(o);
-      if (r !== void 0 && r?.toString() !== l?.toString()) {
-        i = !0;
+    for (let n = 0; n < s; n += 1) {
+      const d = this.getOriginalSliceName(n), v = this.getSliceName(n);
+      if (d !== void 0 && d?.toString() !== v?.toString()) {
+        t = !0;
         break;
       }
     }
     const a = this.getSliceGrouping();
-    return a?.originalLabel !== void 0 && a?.label !== a.originalLabel && (i = !0), e || i;
+    return a?.originalLabel !== void 0 && a?.label !== a.originalLabel && (t = !0), e || t;
   }
   /**
    * Gets the visibility of the ticks.
    * @returns {boolean}
    */
   getTicksVisibility() {
-    return et(this._config);
+    return Ie(this._config);
   }
   /**
    * Sets the visibility of the ticks.
    * @param visibility The visibility setting for the ticks.
    */
   setTicksVisibility(e) {
-    tt(e, this._config), this.emitConfigUpdate("setTicksVisibility");
+    ve(e, this._config), this.emitConfigUpdate("setTicksVisibility");
   }
   /**
    * Gets the start angle of the pie chart.
    * @returns {number | null | undefined}
    */
   getStartAngle() {
-    return q(this._config);
+    return S(this._config);
   }
   /**
    * Sets the start angle for the pie chart.
    * @param angle The start angle for the pie chart.
    */
   setStartAngle(e) {
-    W(e, this._config), this.emitConfigUpdate("setStartAngle");
+    C(e, this._config), this.emitConfigUpdate("setStartAngle");
   }
   /**
    * Gets the end angle of the pie chart.
    * @returns {number | null | undefined}
    */
   getEndAngle() {
-    return q(this._config);
+    return S(this._config);
   }
   /**
    * Sets the end angle for the pie chart.
    * @param angle The end angle for the pie chart.
    */
   setEndAngle(e) {
-    W(e, this._config), this.emitConfigUpdate("setEndAngle");
+    C(e, this._config), this.emitConfigUpdate("setEndAngle");
   }
   /**
    * Gets the display category value on tooltip setting from the chart config.
@@ -815,7 +623,7 @@ class mt extends ge {
    * @remarks If the setting is not found in the config, it will default to `true`.
    */
   getDisplayCategoryValueOnTooltip() {
-    return Ie(this._config);
+    return ae(this._config);
   }
   /**
    * Gets the display numeric value on tooltip setting from the chart config.
@@ -823,7 +631,7 @@ class mt extends ge {
    * @remarks If the setting is not found in the config, it will default to `true`.
    */
   getDisplayNumericValueOnTooltip() {
-    return Ne(this._config);
+    return re(this._config);
   }
   /**
    * Sets the display category value on tooltip setting in the chart config.
@@ -845,129 +653,140 @@ class mt extends ge {
    * @remarks If the setting is not found in the config, it will default to `true`.
    */
   getDisplayPercentageOnTooltip() {
-    return xe(this._config);
+    return ne(this._config);
   }
   /**
    * Sets the display percentage on tooltip setting in the chart config.
    * @param display The boolean value to set the displayPercentageOnTooltip to
    */
   setDisplayPercentageOnTooltip(e) {
-    Ae(e, this._config), this.emitConfigUpdate("setDisplayPercentage");
+    oe(e, this._config), this.emitConfigUpdate("setDisplayPercentage");
   }
   /**
    * Gets the prefix of the values of the slices.
    * @returns {string | undefined}
    */
   getValuePrefix() {
-    return we(this._config);
+    return le(this._config);
   }
   /**
    * Sets the prefix for the values of the slices.
    * @param prefix The prefix for the values of the slices.
    */
   setValuePrefix(e) {
-    Ue(e, this._config), this.emitConfigUpdate("setValuePrefix");
+    ge(e, this._config), this.emitConfigUpdate("setValuePrefix");
   }
   /**
    * Gets the suffix of the values of the slice.
    * @returns {string | undefined}
    */
   getValueSuffix() {
-    return Me(this._config);
+    return ce(this._config);
   }
   /**
    * Sets the suffix for the values of the slices.
    * @param suffix The suffix for the values of the slices.
    */
   setValueSuffix(e) {
-    Be(e, this._config), this.emitConfigUpdate("setValueSuffix");
+    fe(e, this._config), this.emitConfigUpdate("setValueSuffix");
   }
   /**
    * Gets the prefix of the percentages of the slices.
    * @returns {string | undefined}
    */
   getPercentagePrefix() {
-    return Ge(this._config);
+    return de(this._config);
   }
   /**
    * Sets the prefix for the percentages of the slices.
    * @param prefix The prefix for the percentages of the slices.
    */
   setPercentagePrefix(e) {
-    ke(e, this._config), this.emitConfigUpdate("setPercentagePrefix");
+    he(e, this._config), this.emitConfigUpdate("setPercentagePrefix");
   }
   /**
    * Gets the suffix of the percentages of the slices.
    * @returns {string | undefined}
    */
   getPercentageSuffix() {
-    return qe(this._config);
+    return pe(this._config);
   }
   /**
    * Sets the suffix for the percentages of the slices.
    * @param suffix The suffix for the percentages of the slices.
    */
   setPercentageSuffix(e) {
-    We(e, this._config), this.emitConfigUpdate("setPercentageSuffix");
+    ue(e, this._config), this.emitConfigUpdate("setPercentageSuffix");
   }
   /**
    * Gets the offset for the data labels.
    * @returns {string | undefined}
    */
   getDataLabelsOffset() {
-    return Ye(this._config);
+    return De(this._config);
   }
   /**
    * Sets the offset for the data labels.
    * @param offset The offset for the data labels.
    */
   setDataLabelsOffset(e) {
-    He(e, this._config), this.emitConfigUpdate("setDataLabelsOffset");
+    Le(e, this._config), this.emitConfigUpdate("setDataLabelsOffset");
   }
   /**
    * Gets the align data labels setting for the pie chart.
    * @returns {boolean | undefined}
    */
   getAlignDataLabels() {
-    return Re(this._config);
+    return Se(this._config);
   }
   /**
    * Sets the align data labels setting for the pie chart.
    * @param align The align data labels setting for the pie chart.
    */
   setAlignDataLabels(e) {
-    Ke(e, this._config), this.emitConfigUpdate("setAlignDataLabels");
+    Ce(e, this._config), this.emitConfigUpdate("setAlignDataLabels");
   }
   /**
    * Gets the setting for placing the data labels inside of the slices.
    * @returns {boolean | undefined}
    */
   getDataLabelsInside() {
-    return je(this._config);
+    return _e(this._config);
   }
   /**
    * Sets the setting for placing the data labels inside of the slices.
    * @param inside Whether to place the data labels inside of the slices
    */
   setDataLabelsInside(e) {
-    $e(e, this._config), this.emitConfigUpdate("setDataLabelsInside");
+    be(e, this._config), this.emitConfigUpdate("setDataLabelsInside");
   }
   /**
    * Gets the optimize data labels overlapping setting for the pie chart.
    * @returns {boolean | undefined}
    */
   getOptimizeDataLabelsOverlapping() {
-    return Xe(this._config);
+    return Te(this._config);
   }
   /**
    * Sets the optimize data labels overlapping setting for the pie chart.
    * @param optimize The optimize data labels overlapping setting for the pie chart.
    */
   setOptimizeDataLabelsOverlapping(e) {
-    Ze(e, this._config), this.emitConfigUpdate("setOptimizeDataLabelsOverlapping");
+    Ve(e, this._config), this.emitConfigUpdate("setOptimizeDataLabelsOverlapping");
+  }
+  // ---------------------------------------------------------------------------------------------
+  // #region General Props
+  // ---------------------------------------------------------------------------------------------
+  /**
+   * Generate the proper chart title given the current config.
+   *
+   * @returns {string}
+   */
+  async generateChartTitle() {
+    return await H({ config: this._config, layerInfo: this.layerInfo, mode: this._mode });
   }
 }
-$(mt, [H, pe, fe, ye]);
+O(Ke, [P, G, A, k]);
 export {
-  mt as PieChartModel
+  Ke as PieChartModel
 };