@arcgis/charts-components 5.0.0-next.98 → 5.1.0-next.0

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

@@ -1,40 +1,20 @@
-import "@arcgis/toolkit/intl";
-import "lodash-es";
-import { W as h } from "./series-types.js";
-import "d3-array";
-import { bf as S, b3 as n, bJ as a, aC as d, aq as c } from "./index.js";
-import "@arcgis/core/Graphic.js";
-import "@arcgis/core/renderers/support/jsonUtils.js";
-import "@arcgis/core/symbols/support/symbolUtils.js";
-import "@arcgis/core/intl.js";
-import "@arcgis/core/layers/support/FeatureFilter.js";
-import "@arcgis/core/smartMapping/statistics/histogram.js";
-import "@arcgis/core/smartMapping/statistics/summaryStatistics.js";
-import "simple-statistics";
-import "@arcgis/core/request.js";
-import "@arcgis/core/AttributeBinsGraphic.js";
-import "@arcgis/core/geometry/support/jsonUtils.js";
-import "@arcgis/core/rest/support/AttributeBinsQuery.js";
-import "@arcgis/core/rest/support/Query.js";
-import "@arcgis/core/rest/support/StatisticDefinition.js";
-import "@arcgis/core/time/TimeExtent.js";
-import "@arcgis/core/core/promiseUtils.js";
-import "./runtime.js";
-import "@arcgis/toolkit/dom";
-import { s as p, a as y, b as g, c as u, d as b, e as I, f as _, m as v, M as C, g as L } from "./model-with-multi-axes.js";
-import { S as M } from "./serial-chart-model.js";
-import { c as m, d as k } from "./serial-chart-data.js";
-/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.98 */
-var D = Object.defineProperty, F = Object.getOwnPropertyDescriptor, x = (o, e, r, t) => {
-  for (var i = F(e, r), s = o.length - 1, l; s >= 0; s--)
-    (l = o[s]) && (i = l(e, r, i) || i);
-  return i && D(e, r, i), i;
+/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+import { s as S, a as m, b as d, c, d as y, W as g } from "./negative-values-stacked-to-baseline.js";
+import { S as u, s as p, a as b } from "./serial-chart-model.js";
+import { g as n } from "./serial-chart-data.js";
+import { a as I } from "./utils.js";
+import { m as v } from "./model-setter.js";
+import { W as _ } from "./series-types.js";
+import { bf as C, b3 as f, bK as a, aC as L, ap as M } from "./index.js";
+import { M as k } from "./model-with-line-marker-styling.js";
+var D = Object.defineProperty, F = Object.getOwnPropertyDescriptor, x = (o, e, s, t) => {
+  for (var i = F(e, s), r = o.length - 1, l; r >= 0; r--)
+    (l = o[r]) && (i = l(e, s, i) || i);
+  return i && D(e, s, i), i;
 };
-class f extends M {
+class h extends u {
   constructor() {
-    super(...arguments), this._chartType = h.LineSeries;
+    super(...arguments), this._chartType = _.LineSeries;
   }
   async setup(e) {
     await this.loadConfigFromLayer(e), this.setupLocalProps(), e.config !== void 0 && await this.updateSeriesFromLayerFilter(), this.initDefaultSeries(), typeof this.resolveSetup == "function" && this.resolveSetup();
@@ -44,9 +24,9 @@ class f extends M {
   // #region Protected methods
   // ---------------------------------------------------------------------------------------------
   generateDefaultConfig() {
-    const e = S(this.commonStrings);
+    const e = C(this.commonStrings);
     return e.series = [
-      n({
+      f({
         commonStrings: this.commonStrings,
         objectIDField: a(this.layerInfo.layer).idField
       })
@@ -56,27 +36,27 @@ class f extends M {
    * Initializes the default series for the line chart. Used in resetting the series styling.
    */
   initDefaultSeries() {
-    this.defaultSeries = n({
+    this.defaultSeries = f({
       commonStrings: this.commonStrings,
       objectIDField: a(this.layerInfo.layer).idField
     });
   }
   resetSeriesStyling() {
     for (let e = 0; e < this.seriesLength; e += 1) {
-      const r = d({
+      const s = L({
         colorIndex: e,
-        opacity: c
+        opacity: M
       });
-      if (p(r, e, this._config), y(r, e, this._config), this.layerInfo !== void 0) {
-        const t = this.getSeriesId(e), i = m({
+      if (p(s, e, this._config), S(s, e, this._config), this.layerInfo !== void 0) {
+        const t = this.getSeriesId(e), i = n({
           config: this._config,
           seriesIndex: e,
           layerInfo: this.layerInfo,
           commonStrings: this.commonStrings
         });
-        i !== a(this.layerInfo.layer).idField && g(i ?? t, e, this._config);
+        i !== a(this.layerInfo.layer).idField && b(i ?? t, e, this._config);
       }
-      u(this.defaultSeries?.lineSymbol?.style, e, this._config), b(this.defaultSeries?.lineSymbol?.width, e, this._config), I(this.defaultSeries?.markerSymbol?.style, e, this._config), _(this.defaultSeries?.markerSymbol?.size, e, this._config);
+      m(this.defaultSeries?.lineSymbol?.style, e, this._config), d(this.defaultSeries?.lineSymbol?.width, e, this._config), c(this.defaultSeries?.markerSymbol?.style, e, this._config), y(this.defaultSeries?.markerSymbol?.size, e, this._config);
     }
     this._config.colorMatch = !0;
   }
@@ -85,30 +65,31 @@ class f extends M {
    */
   resetAvailable() {
     const e = !this.colorMatch;
-    let r = !1;
+    let s = !1;
     if (!e)
       for (let t = 0; t < this.seriesLength; t += 1) {
         if (this.layerInfo !== void 0) {
-          const i = m({
+          const i = n({
             config: this._config,
             seriesIndex: t,
             layerInfo: this.layerInfo,
             commonStrings: this.commonStrings
-          }), s = this.getSeriesName(t);
-          i !== void 0 && i !== this.layerInfo.objectIdField && i !== s && (r = !0);
+          }), r = this.getSeriesName(t);
+          i !== void 0 && i !== this.layerInfo.objectIdField && i !== r && (s = !0);
         }
         if (this.defaultSeries?.lineSymbol?.style !== void 0 && this.defaultSeries?.lineSymbol.style !== this.getSeriesLineStyle(t) || this.defaultSeries?.lineSymbol?.width !== void 0 && this.defaultSeries?.lineSymbol.width !== this.getSeriesLineWidth(t) || this.defaultSeries?.markerSymbol?.style !== void 0 && this.defaultSeries?.markerSymbol?.style !== this.getSeriesMarkerStyle(t) || this.defaultSeries?.markerSymbol?.size !== void 0 && this.defaultSeries?.markerSymbol?.size !== this.getSeriesMarkerSize(t)) {
-          r = !0;
+          s = !0;
           break;
         }
       }
-    return e || r;
+    return e || s;
   }
 }
 x([
   v
-], f.prototype, "resetSeriesStyling");
-k(f, [C, L]);
+], h.prototype, "resetSeriesStyling");
+const w = [g, k];
+I(h, w);
 export {
-  f as LineChartModel
+  h as LineChartModel
 };

package/dist/chunks/model-setter.js

@@ -0,0 +1,125 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+import { fetchT9nStringsBundle as p, getElementLocale as d } from "@arcgis/toolkit/intl";
+import { g as h } from "./runtime.js";
+import { bF as r, bH as c, bK as g, aQ as f } from "./index.js";
+import { c as l } from "./index2.js";
+import "lodash-es";
+import "luxon";
+import "d3-array";
+import "@arcgis/toolkit/type";
+import "./series-types.js";
+import "@arcgis/core/core/promiseUtils.js";
+import "@arcgis/core/request.js";
+import "@arcgis/core/geometry/support/jsonUtils.js";
+import "@arcgis/core/rest/support/AttributeBinsQuery.js";
+import "@arcgis/core/rest/support/StatisticDefinition.js";
+import "@arcgis/core/time/TimeExtent.js";
+import "@esri/arcgis-html-sanitizer";
+import "@arcgis/toolkit/dom";
+import "@arcgis/core/Graphic.js";
+import "@arcgis/core/renderers/support/jsonUtils.js";
+import "@arcgis/core/symbols/support/symbolUtils.js";
+import "@arcgis/core/intl.js";
+import "@arcgis/core/layers/support/FeatureFilter.js";
+import "@arcgis/core/smartMapping/statistics/histogram.js";
+import "@arcgis/core/smartMapping/statistics/summaryStatistics.js";
+import "simple-statistics";
+import "@arcgis/core/AttributeBinsGraphic.js";
+class z extends EventTarget {
+  /**
+   * @param args
+   * @privateRemarks This "any" constructor is needed for TypeScript to merge
+   * the base class and mixin classes types together smoothly.
+   */
+  constructor(...i) {
+    super(), this.dirtyAsyncSetters = [], this.asyncConfigUpdateInProgress = !1, this.pendingUpdates = 0, this.dataStore = {}, this.asyncUpdatesPromise = new Promise((t) => {
+      this.resolveSetup = t;
+    }), this.emitConfigUpdate = (t) => {
+      this.dispatchEvent(
+        new CustomEvent("arcgisChartsModelConfigChange", {
+          detail: { config: this._config, setterName: t }
+        })
+      );
+    }, this.guardSetterFromAsyncOverwrite = async (t) => {
+      t(), this.asyncConfigUpdateInProgress && (await this.asyncUpdatesPromise, t());
+    };
+  }
+  /**
+   * The chart type.
+   */
+  get chartType() {
+    return this._chartType;
+  }
+  /**
+   * Checks if the current chart model is for the same chart as another chart model.
+   *
+   * @param otherModel - The other chart model to compare to.
+   */
+  isSameChartAs(i) {
+    const t = i?.layer;
+    return t !== void 0 && this._config.id === i?.chartId && this.layerInfo?.layer.id === t.id;
+  }
+  /**
+   * Can be awaited to allow any pending async updates to complete.
+   * @public
+   */
+  async update() {
+    await this.asyncUpdatesPromise;
+  }
+  /**
+   * A function that loads the config based on the provided props.
+   *
+   * @param params.layer - The layer to be used as the data source for the chart.
+   * @param params.iLayer - The layer description to use if the layer is not provided.
+   * @param params.config - The config object to be loaded.
+   */
+  async loadConfigFromLayer(i) {
+    const { layer: t, iLayer: s, config: a } = i;
+    this.commonStrings = await p(
+      d(document.documentElement).t9nLocale,
+      h("./assets/common/t9n"),
+      "messages."
+    );
+    let e = t;
+    if (!e && s ? e = await r(s) : !e && a?.iLayer && (e = await r(a.iLayer)), e) {
+      const o = await c(e, !0), m = g(e).idField;
+      this.layerInfo = {
+        layer: e,
+        layerFieldsInfo: o,
+        objectIdField: m
+      };
+    }
+    this._config = a ? await l(a) : this.generateDefaultConfig(), this._config.legend !== void 0 && this._config.legend?.title === void 0 && (this._config.legend.title = f().title), s && (this._config.iLayer = s);
+  }
+  /**
+   * Manually block the async guard to queue up config updates until unblocked.
+   */
+  startAsyncUpdate() {
+    this.pendingUpdates === 0 && (this.asyncConfigUpdateInProgress = !0, this.asyncUpdatesPromise = new Promise((i) => {
+      this.resolveSetup = i;
+    })), this.pendingUpdates += 1;
+  }
+  /**
+   * Manually unblock the async guard to allow queued config updates to proceed.
+   */
+  finishAsyncUpdate() {
+    this.pendingUpdates -= 1, this.pendingUpdates === 0 && (this.asyncConfigUpdateInProgress = !1, this.resolveSetup?.());
+  }
+  // #endregion
+}
+function G(n, i, t) {
+  const s = t.set, a = t.value;
+  return s && (t.set = function(e) {
+    this.guardSetterFromAsyncOverwrite(() => {
+      s.call(this, e), this.emitConfigUpdate(i);
+    });
+  }), a && (t.value = function(...e) {
+    this.guardSetterFromAsyncOverwrite(() => {
+      a.apply(this, e), this.emitConfigUpdate(i);
+    });
+  }), t;
+}
+export {
+  z as C,
+  G as m
+};

package/dist/chunks/model-with-guides.js

@@ -0,0 +1,317 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+import { C as f, m as a } from "./model-setter.js";
+import { k as b, s as m, a as _ } from "./utils.js";
+import { e as h, f as S } from "./utils2.js";
+import { C as L } from "./chart-model.js";
+import { cloneDeep as T } from "lodash-es";
+import "@arcgis/toolkit/type";
+import { W as x } from "./series-types.js";
+import { f as c } from "./rest-js-object-literals.js";
+import "@arcgis/toolkit/intl";
+import "luxon";
+import "d3-array";
+import { aH as B, aG as C, bB as p, aJ as X, i as A } from "./index.js";
+import "@esri/arcgis-html-sanitizer";
+import "@arcgis/core/geometry/support/jsonUtils.js";
+import "@arcgis/core/rest/support/AttributeBinsQuery.js";
+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 "./runtime.js";
+import { c as M, b as O } from "./index4.js";
+import "@arcgis/toolkit/dom";
+import { G as g } from "./common.js";
+var P = Object.defineProperty, D = Object.getOwnPropertyDescriptor, V = (t, e, i, s) => {
+  for (var o = D(e, i), n = t.length - 1, d; n >= 0; n--)
+    (d = t[n]) && (o = d(e, i, o) || o);
+  return o && P(e, i, o), o;
+};
+const R = (t) => b({ config: t, axisIndex: 0, isMax: !0 }), E = (t, e) => {
+  m({ config: t, value: e, axisIndex: 0, isMax: !0 });
+};
+class y extends f {
+  /**
+   * Maximum bound set for the x-axis. Null indicates no explicit maximum.
+   */
+  get maxXBound() {
+    return R(this._config);
+  }
+  set maxXBound(e) {
+    E(this._config, e);
+  }
+}
+V([
+  a
+], y.prototype, "maxXBound");
+var W = Object.defineProperty, w = Object.getOwnPropertyDescriptor, F = (t, e, i, s) => {
+  for (var o = w(e, i), n = t.length - 1, d; n >= 0; n--)
+    (d = t[n]) && (o = d(e, i, o) || o);
+  return o && W(e, i, o), o;
+};
+const j = (t) => b({ config: t, axisIndex: 0, isMax: !1 }), $ = (t, e) => {
+  m({ config: t, value: e, axisIndex: 0, isMax: !1 });
+};
+class v extends f {
+  /**
+   * Minimum bound set for the x-axis. Null indicates no explicit minimum.
+   */
+  get minXBound() {
+    return j(this._config);
+  }
+  set minXBound(e) {
+    $(this._config, e);
+  }
+}
+F([
+  a
+], v.prototype, "minXBound");
+class N extends f {
+}
+_(N, [y, v]);
+class Pe extends f {
+  /**
+   * Whether the x-axis labels are visible.
+   */
+  get xAxisLabelsVisibility() {
+    return h(0, this._config);
+  }
+  set xAxisLabelsVisibility(e) {
+    this.guardSetterFromAsyncOverwrite(() => {
+      S(e, 0, this._config), this.emitConfigUpdate("xAxisLabelsVisibility");
+    });
+  }
+}
+const I = (t) => {
+  for (const e of t.axes ?? [])
+    for (const i of e?.guides ?? [])
+      if (i.label !== void 0)
+        return i.label;
+}, H = (t, e) => {
+  for (const i of e.axes ?? [])
+    for (const s of i?.guides ?? []) {
+      const o = s.label?.text ?? "";
+      s.label = T(t), s.label !== void 0 && (s.label.text = o);
+    }
+};
+function r(t) {
+  return {
+    ...t,
+    axis: t.orientation === g.X ? t.config.axes?.[0] : t.config.axes?.[1],
+    index: t.index ?? 0,
+    orientation: t.orientation ?? g.Y
+  };
+}
+const J = (t) => {
+  const { axis: e, index: i } = r(t);
+  return e?.guides?.[i]?.visible ?? !0;
+}, U = (t) => {
+  const { visible: e, axis: i, index: s } = r(t);
+  i?.guides?.[s] !== void 0 && (i.guides[s].visible = e);
+}, G = (t) => {
+  const e = A(t.start, t.end);
+  M(t.style) && e === c.SFS ? t.style = { type: c.SFS, color: t.style.color } : O(t.style) && e === c.SLS && (t.style = { type: c.SLS, color: t.style.color });
+}, Y = (t) => {
+  const { axis: e, index: i } = r(t);
+  return e?.guides?.[i]?.start ?? null;
+}, q = (t) => {
+  const { start: e, axis: i, index: s } = r(t);
+  i?.guides?.[s] !== void 0 && (i.guides[s].start = e, G(i.guides[s]));
+}, z = (t) => {
+  const { axis: e, index: i } = r(t);
+  return e?.guides?.[i]?.end;
+}, K = (t) => {
+  const { end: e, axis: i, index: s } = r(t);
+  i?.guides?.[s] !== void 0 && (i.guides[s].end = e, G(i.guides[s]));
+}, Q = (t) => {
+  const { axis: e, index: i } = r(t);
+  return e?.guides?.[i]?.name;
+}, Z = (t) => {
+  const { name: e, axis: i, index: s } = r(t);
+  i?.guides?.[s] !== void 0 && (i.guides[s].name = e);
+}, k = (t) => {
+  const { axis: e, index: i } = r(t);
+  return e?.guides?.[i]?.label?.text;
+}, ee = (t) => {
+  const { labelText: e, axis: i, index: s } = r(t), o = i?.guides?.[s]?.label ?? B(e, C(p.GuideLabel), p.GuideLabel);
+  i?.guides?.[s] !== void 0 && (i.guides[s].label = { ...o, text: e });
+}, ie = (t) => {
+  const { axis: e, index: i } = r(t);
+  return e?.guides?.[i]?.above ?? !1;
+}, te = (t) => {
+  const { above: e, axis: i, index: s } = r(t);
+  i?.guides?.[s] !== void 0 && (i.guides[s].above = e);
+}, se = (t) => {
+  const { axis: e, index: i } = r(t);
+  return e?.guides?.[i]?.style;
+}, oe = (t) => {
+  const { style: e, axis: i, index: s } = r(t);
+  i?.guides?.[s] !== void 0 && (i.guides[s].style = e);
+}, De = (t) => {
+  const { config: e, name: i, index: s, orientation: o } = t, n = o === g.X ? e.axes?.[0] : e.axes?.[1];
+  if (n !== void 0) {
+    n.guides = n.guides ?? [];
+    const d = {
+      type: x.Guide,
+      name: i,
+      start: n.valueFormat.type === x.DateAxisFormat ? "" : 0,
+      style: X()
+    };
+    s !== void 0 && s < n.guides.length ? n.guides.splice(s, 0, d) : n.guides.push(d);
+  }
+}, Ve = (t) => {
+  const { config: e, index: i, orientation: s } = t, o = s === g.X ? e.axes?.[0] : e.axes?.[1];
+  o?.guides !== void 0 && (i !== void 0 && i < o.guides.length ? o.guides.splice(i, 1) : o.guides.pop());
+}, ne = (t) => {
+  const { axis: e, index: i } = r(t);
+  return e?.guides?.[i]?.tooltipReverseColor ?? !1;
+}, re = (t) => {
+  const { reverseColor: e, axis: i, index: s } = r(t);
+  i?.guides?.[s] !== void 0 && (i.guides[s].tooltipReverseColor = e);
+};
+var de = Object.defineProperty, ae = Object.getOwnPropertyDescriptor, u = (t, e, i, s) => {
+  for (var o = ae(e, i), n = t.length - 1, d; n >= 0; n--)
+    (d = t[n]) && (o = d(e, i, o) || o);
+  return o && de(e, i, o), o;
+};
+class l extends L {
+  /**
+   * The guide labels text symbol (font, color, style).
+   */
+  get guideLabelsSymbol() {
+    return I(this._config);
+  }
+  set guideLabelsSymbol(e) {
+    H(e, this._config);
+  }
+  /**
+   * Gets whether a guide is visible.
+   *
+   * @param index - Default `0`. The index of the guide in the list of guides for the given axis orientation.
+   * @param orientation - Default `y`. The axis orientation of the guide.
+   */
+  getGuideVisibility(e, i) {
+    return J({ config: this._config, index: e, orientation: i });
+  }
+  setGuideVisibility(e, i, s) {
+    U({ visible: e, config: this._config, index: i, orientation: s });
+  }
+  /**
+   * Gets the start value of a guide.
+   *
+   * @param index - Default `0`. The index of the guide in the list of guides for the given axis orientation.
+   * @param orientation - Default `y`. The axis orientation of the guide.
+   */
+  getGuideStart(e, i) {
+    return Y({ config: this._config, index: e, orientation: i });
+  }
+  setGuideStart(e, i, s) {
+    q({ start: e, config: this._config, index: i, orientation: s });
+  }
+  /**
+   * Gets the end value of a guide.
+   *
+   * @param index - Default `0`. The index of the guide in the list of guides for the given axis orientation.
+   * @param orientation - Default `y`. The axis orientation of the guide.
+   */
+  getGuideEnd(e, i) {
+    return z({ config: this._config, index: e, orientation: i });
+  }
+  setGuideEnd(e, i, s) {
+    K({ end: e, config: this._config, index: i, orientation: s });
+  }
+  /**
+   * Gets the name of a guide.
+   *
+   * @param index - Default `0`. The index of the guide in the list of guides for the given axis orientation.
+   * @param orientation - Default `y`. The axis orientation of the guide.
+   */
+  getGuideName(e, i) {
+    return Q({ config: this._config, index: e, orientation: i });
+  }
+  setGuideName(e, i, s) {
+    Z({ name: e, config: this._config, index: i, orientation: s });
+  }
+  /**
+   * Gets the guide label text.
+   *
+   * @param index - Default `0`. The index of the guide in the list of guides for the given axis orientation.
+   * @param orientation - Default `y`. The axis orientation of the guide.
+   */
+  getGuideLabelText(e, i) {
+    return k({ config: this._config, index: e, orientation: i });
+  }
+  setGuideLabelText(e, i, s) {
+    ee({ labelText: e, config: this._config, index: i, orientation: s });
+  }
+  /**
+   * Gets whether the guide should be rendered above the other chart elements.
+   *
+   * @param index - Default `0`. The index of the guide in the list of guides for the given axis orientation.
+   * @param orientation - Default `y`. The axis orientation of the guide.
+   */
+  getGuideAbove(e, i) {
+    return ie({ config: this._config, index: e, orientation: i });
+  }
+  setGuideAbove(e, i, s) {
+    te({ above: e, config: this._config, index: i, orientation: s });
+  }
+  /**
+   * Gets the guide style.
+   *
+   * @param index Default `0`. The index of the guide in the list of guides for the given axis orientation.
+   * @param orientation Default `y`. The axis orientation of the guide.
+   */
+  getGuideStyle(e, i) {
+    return se({ config: this._config, index: e, orientation: i });
+  }
+  setGuideStyle(e, i, s) {
+    oe({ style: e, config: this._config, index: i, orientation: s });
+  }
+  /**
+   * Gets whether the tooltip text color should be reversed for a guide.
+   *
+   * @param index - The index of the guide in the list of guides for the given axis orientation.
+   * @param orientation - The axis orientation of the guide.
+   */
+  getTooltipReverseColor(e, i) {
+    return ne({ config: this._config, index: e, orientation: i });
+  }
+  setTooltipReverseColor(e, i, s) {
+    re({ reverseColor: e, config: this._config, index: i, orientation: s });
+  }
+}
+u([
+  a
+], l.prototype, "guideLabelsSymbol");
+u([
+  a
+], l.prototype, "setGuideVisibility");
+u([
+  a
+], l.prototype, "setGuideStart");
+u([
+  a
+], l.prototype, "setGuideEnd");
+u([
+  a
+], l.prototype, "setGuideName");
+u([
+  a
+], l.prototype, "setGuideLabelText");
+u([
+  a
+], l.prototype, "setGuideAbove");
+u([
+  a
+], l.prototype, "setGuideStyle");
+u([
+  a
+], l.prototype, "setTooltipReverseColor");
+export {
+  l as M,
+  Pe as W,
+  De as a,
+  N as b,
+  Ve as d
+};