@arcgis/charts-components 4.34.0-next.5 → 4.34.0-next.51

package/dist/components/arcgis-charts-config-scatter-plot-data/customElement.js

@@ -15,13 +15,12 @@ import { S as l, b as h } from "../../chunks/interfaces2.js";
 import { d as A, s as m } from "../../chunks/store.js";
 import { b as f, m as p, f as M, s as u, D as V, c as g } from "../../chunks/chart-ui-utils2.js";
 import { u as _ } from "../../chunks/useT9n.js";
-import { html as r } from "lit";
+import { css as D, html as r } from "lit";
 import { createRef as d, ref as a } from "lit-html/directives/ref.js";
-import { LitElement as D, createEvent as v, safeClassMap as i, safeStyleMap as P } from "@arcgis/lumina";
-import { css as N } from "@lit/reactive-element/css-tag.js";
+import { LitElement as N, createEvent as v, safeClassMap as i, safeStyleMap as P } from "@arcgis/lumina";
 /*! 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.5 */
+v4.34.0-next.51 */
 const s = {
   label: "label",
   r2: "r2",
@@ -30,10 +29,9 @@ const s = {
   sectionLabel: "section-label",
   switchElement: "switch-element",
   sectionContainer: "section-container",
-  multiInputSection: "multi-input-section",
-  rtl: "arcgis-charts-rtl"
-}, R = N`.hide{display:none}.am5-modal{width:100%;height:100%;position:absolute;z-index:100000;top:0;left:0}.am5-modal-curtain{top:0;left:0;width:100%;height:100%;position:absolute;background:#fff!important;z-index:100}.am5-modal-wrapper{top:0;left:0;width:100%;height:100%;position:absolute;display:flex;align-items:center;justify-content:center;white-space:nowrap;background:#ffffff80;z-index:101}.am5-modal-content{display:inline-block;padding:1.2em;vertical-align:middle;text-align:start;white-space:normal;background:#fff;border-radius:4px;box-shadow:#00000073 0 0 36px;color:#000}.am5-layer-1000{z-index:1000!important}.arcgis-charts-modal{box-shadow:none!important}.arcgis-charts-modal-header{background-color:#0000000d;font-weight:700;padding:4px;align-content:center}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}:host{display:flex;flex-direction:column;width:var(--arcgis-charts-config-calcite-block-default-width);margin:var(--arcgis-charts-config-calcite-block-default-margin)}:host .number-input{margin-bottom:.5rem;display:flex}:host .number-input>div{width:100%}:host .arcgis-charts-rtl .text{margin-left:0rem;margin-right:var(--arcgis-charts-config-margin-minor)}:host .arcgis-charts-rtl .sub-header{margin-left:0rem;margin-right:var(--arcgis-charts-config-margin-minor)}:host .arcgis-charts-rtl .switch-element{margin-left:var(--arcgis-charts-config-margin-minor);margin-right:0rem}calcite-list-item{margin-left:var(--arcgis-charts-config-margin-minor);margin-right:var(--arcgis-charts-config-margin-minor)}calcite-slider{margin-top:-1.5rem}.r2{margin:var(--arcgis-charts-config-margin-major) var(--arcgis-charts-config-margin-minor)}.label{display:flex;margin-left:var(--arcgis-charts-config-margin-minor);margin-right:var(--arcgis-charts-config-margin-minor);margin-bottom:var(--arcgis-charts-config-margin-minor);justify-content:space-between}.text{display:flex;margin-left:var(--arcgis-charts-config-margin-minor);width:calc(100% - 1.5rem);height:2rem;margin-bottom:var(--arcgis-charts-config-margin-minor);justify-content:space-between}.section-container{display:flex;flex-direction:column}.icon-select{cursor:pointer}.section-label{display:flex;margin:var(--arcgis-charts-config-margin-major) var(--arcgis-charts-config-margin-minor);justify-content:space-between;align-items:center;font-weight:var(--calcite-font-weight-medium);font-size:var(--calcite-font-size-0)}.switch-element{margin-right:var(--arcgis-charts-config-margin-minor)}.multi-input-section{display:flex;justify-content:space-between;align-items:center}`;
-class K extends D {
+  multiInputSection: "multi-input-section"
+}, R = D`.hide{display:none}.am5-modal{width:100%;height:100%;position:absolute;z-index:100000;top:0;left:0}.am5-modal-curtain{top:0;left:0;width:100%;height:100%;position:absolute;background:#fff!important;z-index:100}.am5-modal-wrapper{top:0;left:0;width:100%;height:100%;position:absolute;display:flex;align-items:center;justify-content:center;white-space:nowrap;background:#ffffff80;z-index:101}.am5-modal-content{display:inline-block;padding:1.2em;vertical-align:middle;text-align:start;white-space:normal;background:#fff;border-radius:4px;box-shadow:#00000073 0 0 36px;color:#000}.am5-layer-1000{z-index:1000!important}.arcgis-charts-modal{box-shadow:none!important}.arcgis-charts-modal-header{background-color:#0000000d;font-weight:700;padding:4px;align-content:center}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}:host{display:flex;flex-direction:column;width:var(--arcgis-charts-config-calcite-block-default-width);margin:var(--arcgis-charts-config-calcite-block-default-margin)}:host .number-input{margin-bottom:.5rem;display:flex}:host .number-input>div{width:100%}calcite-list-item{margin-left:var(--arcgis-charts-config-margin-minor);margin-right:var(--arcgis-charts-config-margin-minor)}calcite-slider{margin-top:-1.5rem}.r2{margin:var(--arcgis-charts-config-margin-major) var(--arcgis-charts-config-margin-minor)}.label{display:flex;margin-left:var(--arcgis-charts-config-margin-minor);margin-right:var(--arcgis-charts-config-margin-minor);margin-bottom:var(--arcgis-charts-config-margin-minor);justify-content:space-between}.text{display:flex;margin-left:var(--arcgis-charts-config-margin-minor);width:calc(100% - 1.5rem);height:2rem;margin-bottom:var(--arcgis-charts-config-margin-minor);justify-content:space-between}.section-container{display:flex;flex-direction:column}.icon-select{cursor:pointer}.section-label{display:flex;margin:var(--arcgis-charts-config-margin-major) var(--arcgis-charts-config-margin-minor);justify-content:space-between;align-items:center;font-weight:var(--calcite-font-weight-medium);font-size:var(--calcite-font-size-0)}.switch-element{margin-right:var(--arcgis-charts-config-margin-minor)}.multi-input-section{display:flex;justify-content:space-between;align-items:center}`;
+class K extends N {
   constructor() {
     super(...arguments), this._messages = _(), this.scatterplotPopover = null, this.selectColorElement = d(), this.selectTrendLineElement = d(), this.xAxisElement = d(), this.yAxisElement = d(), this.sizeVariableElement = d(), this.colorModeElement = d(), this.symbolSizeModeElement = d(), this.minSizeInputElement = d(), this.maxSizeInputElement = d(), this.items = [], this.setTrendLineSymbol = (e) => {
       const t = e.detail;
@@ -271,7 +269,7 @@ class K extends D {
     return r`<div class=${i(s.sectionContainer)}>${this.renderSymbolSizeType()}${this.selectedSizeType === h.Proportional ? this.renderProportionalSymbol() : this.renderFixedSymbol()}<calcite-label class=${i(s.label)}>${this._messages.color}${this.isTableLayer !== !0 ? r`<calcite-segmented-control name=layerColor layout=horizontal scale=s @calciteSegmentedControlChange=${this.changeColorTypeToggle} ${a(this.colorModeElement)}><calcite-segmented-control-item .value=${this._messages.useLayerColors} .checked=${this.model.getColorMatch()} ${a(this.segmentedControlRef)}>${this._messages.useLayerColors}</calcite-segmented-control-item><calcite-segmented-control-item .value=${this._messages.singleColor} .checked=${!this.model.getColorMatch()} ${a(this.segmentedControlRef)}>${this._messages.singleColor}</calcite-segmented-control-item></calcite-segmented-control>` : null}</calcite-label><calcite-list label selection-mode=single selection-appearance=border><calcite-list-item .label=${this._messages.color} value=selectColor .hidden=${this.model.getColorMatch() && this.isTableLayer !== !0} .selected=${Array.isArray(this.selectedElement)} @click=${this.changeElementStyle} ${a(this.selectColorElement)}><calcite-icon slot=content-end icon=circle-f style=${P({ color: `rgba(${e},${t},${o},${n / 255})` })} class=${i(s.iconSelect)} @click=${this.changeElementStyle}></calcite-icon></calcite-list-item></calcite-list></div>`;
   }
   render() {
-    return r`<div class=${i({ [s.rtl]: this.direction === "rtl" })}><h3 class=${i(s.sectionLabel)}>${this._messages.variables}</h3><calcite-label class=${i(s.label)}>${this._messages.xAxisNumber}${this.renderXVariable()}</calcite-label><calcite-label class=${i(s.label)}>${this._messages.yAxisNumber}${this.renderYVariable()}</calcite-label><h3 class=${i(s.sectionLabel)}>${this._messages.statistics}</h3>${this.renderStatistics()}<h3 class=${i(s.sectionLabel)}>${this._messages.symbol}</h3>${this.renderSymbol()}</div>`;
+    return r`<div><h3 class=${i(s.sectionLabel)}>${this._messages.variables}</h3><calcite-label class=${i(s.label)}>${this._messages.xAxisNumber}${this.renderXVariable()}</calcite-label><calcite-label class=${i(s.label)}>${this._messages.yAxisNumber}${this.renderYVariable()}</calcite-label><h3 class=${i(s.sectionLabel)}>${this._messages.statistics}</h3>${this.renderStatistics()}<h3 class=${i(s.sectionLabel)}>${this._messages.symbol}</h3>${this.renderSymbol()}</div>`;
   }
 }
 E("arcgis-charts-config-scatter-plot-data", K);

package/dist/components/arcgis-charts-config-scatter-plot-data/resource.d.ts

@@ -8,5 +8,4 @@ export declare const HTMLClasses: {
     readonly switchElement: "switch-element";
     readonly sectionContainer: "section-container";
     readonly multiInputSection: "multi-input-section";
-    readonly rtl: "arcgis-charts-rtl";
 };

package/dist/components/arcgis-charts-config-scatter-plot-popover/customElement.js

@@ -1,5 +1,5 @@
 import { c as C } from "../../chunks/runtime.js";
-import { keyed as n } from "lit-html/directives/keyed.js";
+import { keyed as n } from "lit/directives/keyed.js";
 import { RESTSymbolType as c } from "@arcgis/charts-spec";
 import "lodash-es";
 import "d3-array";
@@ -13,15 +13,14 @@ import "@arcgis/core/core/promiseUtils.js";
 import "@arcgis/core/request.js";
 import { e as y } from "../../chunks/popover-ui-utils.js";
 import { S as p } from "../../chunks/interfaces2.js";
-import { U as h, a as b, i as m } from "../../chunks/chart-ui-utils2.js";
+import { U as h, a as b, i as d } from "../../chunks/chart-ui-utils2.js";
 import { u as $ } from "../../chunks/useT9n.js";
-import { html as o } from "lit";
-import { createRef as d, ref as g } from "lit-html/directives/ref.js";
-import { LitElement as S, createEvent as a, safeClassMap as l } from "@arcgis/lumina";
-import { css as P } from "@lit/reactive-element/css-tag.js";
+import { css as S, html as o } from "lit";
+import { createRef as m, ref as g } from "lit-html/directives/ref.js";
+import { LitElement as P, createEvent as a, safeClassMap as l } from "@arcgis/lumina";
 /*! 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.5 */
+v4.34.0-next.51 */
 const r = {
   jsAppFlyout: "js-app-flyout",
   scatterplotPopover: "scatter-plot-popover",
@@ -29,10 +28,10 @@ const r = {
   header: "header",
   pickListItemLabel: "pick-list-item-label",
   pickListPanel: "pick-list-panel"
-}, k = P`.hide{display:none}.am5-modal{width:100%;height:100%;position:absolute;z-index:100000;top:0;left:0}.am5-modal-curtain{top:0;left:0;width:100%;height:100%;position:absolute;background:#fff!important;z-index:100}.am5-modal-wrapper{top:0;left:0;width:100%;height:100%;position:absolute;display:flex;align-items:center;justify-content:center;white-space:nowrap;background:#ffffff80;z-index:101}.am5-modal-content{display:inline-block;padding:1.2em;vertical-align:middle;text-align:start;white-space:normal;background:#fff;border-radius:4px;box-shadow:#00000073 0 0 36px;color:#000}.am5-layer-1000{z-index:1000!important}.arcgis-charts-modal{box-shadow:none!important}.arcgis-charts-modal-header{background-color:#0000000d;font-weight:700;padding:4px;align-content:center}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}:host{width:100%}.pick-list-panel{max-height:60vh}`;
-class F extends S {
+}, k = S`.hide{display:none}.am5-modal{width:100%;height:100%;position:absolute;z-index:100000;top:0;left:0}.am5-modal-curtain{top:0;left:0;width:100%;height:100%;position:absolute;background:#fff!important;z-index:100}.am5-modal-wrapper{top:0;left:0;width:100%;height:100%;position:absolute;display:flex;align-items:center;justify-content:center;white-space:nowrap;background:#ffffff80;z-index:101}.am5-modal-content{display:inline-block;padding:1.2em;vertical-align:middle;text-align:start;white-space:normal;background:#fff;border-radius:4px;box-shadow:#00000073 0 0 36px;color:#000}.am5-layer-1000{z-index:1000!important}.arcgis-charts-modal{box-shadow:none!important}.arcgis-charts-modal-header{background-color:#0000000d;font-weight:700;padding:4px;align-content:center}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}:host{width:100%}.pick-list-panel{max-height:60vh}`;
+class F extends P {
   constructor() {
-    super(...arguments), this.picklist = d(), this._messages = $(), this.popoverElement = d(), this.layerFieldsInfo = [], this.arcgisChartsConfigPopoverClose = a(), this.arcgisChartsConfigPopoverOpenChange = a(), this.arcgisChartsConfigScatterplotFillColorChange = a(), this.arcgisChartsConfigScatterplotLineStyleChange = a(), this.arcgisChartsConfigScatterplotSizeVariableFieldChange = a(), this.arcgisChartsConfigScatterplotXYFieldChange = a();
+    super(...arguments), this.picklist = m(), this._messages = $(), this.popoverElement = m(), this.layerFieldsInfo = [], this.arcgisChartsConfigPopoverClose = a(), this.arcgisChartsConfigPopoverOpenChange = a(), this.arcgisChartsConfigScatterplotFillColorChange = a(), this.arcgisChartsConfigScatterplotLineStyleChange = a(), this.arcgisChartsConfigScatterplotSizeVariableFieldChange = a(), this.arcgisChartsConfigScatterplotXYFieldChange = a();
   }
   static {
     this.properties = { messageOverrides: 0, headingTitle: 3, contentKind: 3, selectedContent: 3, referenceElement: 2, placement: 3, open: 7, layerFieldsInfo: 0 };
@@ -81,12 +80,12 @@ class F extends S {
   }
   renderVariablePickList() {
     const e = this.layerFieldsInfo?.length ?? 0, t = [];
-    this.contentKind === p.sizeVariable && t.push(n(" ", o`<calcite-list-item label=" " value=" " .selected=${m("", this.selectedContent)}></calcite-list-item>`));
+    this.contentKind === p.sizeVariable && t.push(n(" ", o`<calcite-list-item label=" " value=" " .selected=${d("", this.selectedContent)}></calcite-list-item>`));
     for (let i = 0; i < e; i += 1) {
       const s = this.layerFieldsInfo?.[i] ?? void 0;
       if (s !== void 0 && v(s)) {
         const f = u(this.layerFieldsInfo, s.name);
-        t.push(n(s.name, o`<calcite-list-item .label=${f} .value=${s.name} .selected=${m(s.name, this.selectedContent)}></calcite-list-item>`));
+        t.push(n(s.name, o`<calcite-list-item .label=${f} .value=${s.name} .selected=${d(s.name, this.selectedContent)}></calcite-list-item>`));
       }
     }
     return o`<calcite-panel class=${l(r.pickListPanel)} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div slot=header-content class=${l(r.header)}>${this.headingTitle ?? ""}</div><calcite-list label class=${l(r.pickListItemLabel)} selection-mode=single selection-appearance=border filter-enabled @calciteListChange=${this.onFieldSelectionChange} ${g(this.picklist)}>${t}</calcite-list></calcite-panel>`;

package/dist/components/arcgis-charts-config-select-chart-type-popover/customElement.js

@@ -1,5 +1,5 @@
 import { c as l } from "../../chunks/runtime.js";
-import { html as a } from "lit-html";
+import { css as c, html as a } from "lit";
 import "@arcgis/charts-spec";
 import "lodash-es";
 import "d3-array";
@@ -11,25 +11,23 @@ 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 { e as c } from "../../chunks/popover-ui-utils.js";
-import { U as r } from "../../chunks/chart-ui-utils2.js";
-import { u as n } from "../../chunks/useT9n.js";
-import { createRef as p, ref as h } from "lit-html/directives/ref.js";
-import { LitElement as m, createEvent as o, safeClassMap as s } from "@arcgis/lumina";
-import { css as d } from "@lit/reactive-element/css-tag.js";
+import { e as r } from "../../chunks/popover-ui-utils.js";
+import { U as n } from "../../chunks/chart-ui-utils2.js";
+import { u as p } from "../../chunks/useT9n.js";
+import { createRef as h, ref as m } from "lit-html/directives/ref.js";
+import { LitElement as d, createEvent as o, safeClassMap as s } from "@arcgis/lumina";
 import { M as e } from "../../chunks/common.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.5 */
-const t = {
+v4.34.0-next.51 */
+const i = {
   selectChartComponent: "select-chart-component",
-  rtl: "arcgis-charts-rtl",
   jsAppFlyout: "js-app-flyout",
   panel: "panel"
-}, g = d`.hide{display:none}.am5-modal{width:100%;height:100%;position:absolute;z-index:100000;top:0;left:0}.am5-modal-curtain{top:0;left:0;width:100%;height:100%;position:absolute;background:#fff!important;z-index:100}.am5-modal-wrapper{top:0;left:0;width:100%;height:100%;position:absolute;display:flex;align-items:center;justify-content:center;white-space:nowrap;background:#ffffff80;z-index:101}.am5-modal-content{display:inline-block;padding:1.2em;vertical-align:middle;text-align:start;white-space:normal;background:#fff;border-radius:4px;box-shadow:#00000073 0 0 36px;color:#000}.am5-layer-1000{z-index:1000!important}.arcgis-charts-modal{box-shadow:none!important}.arcgis-charts-modal-header{background-color:#0000000d;font-weight:700;padding:4px;align-content:center}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}:host .arcgis-charts-rtl .label{margin-left:0rem;margin-right:1rem}.select-chart-component{width:var(--arcgis-charts-config-panel-width);height:var(--arcgis-charts-config-panel-height)}calcite-block{width:var(--arcgis-charts-config-calcite-block-default-width);height:var(--arcgis-charts-config-calcite-block-default-height);margin:var(--arcgis-charts-config-calcite-block-default-margin)}.label{display:flex;margin-left:1rem;margin-bottom:.5rem;justify-content:space-between}.header{margin:0}.panel{max-height:60vh}`;
-class f extends m {
+}, g = c`.hide{display:none}.am5-modal{width:100%;height:100%;position:absolute;z-index:100000;top:0;left:0}.am5-modal-curtain{top:0;left:0;width:100%;height:100%;position:absolute;background:#fff!important;z-index:100}.am5-modal-wrapper{top:0;left:0;width:100%;height:100%;position:absolute;display:flex;align-items:center;justify-content:center;white-space:nowrap;background:#ffffff80;z-index:101}.am5-modal-content{display:inline-block;padding:1.2em;vertical-align:middle;text-align:start;white-space:normal;background:#fff;border-radius:4px;box-shadow:#00000073 0 0 36px;color:#000}.am5-layer-1000{z-index:1000!important}.arcgis-charts-modal{box-shadow:none!important}.arcgis-charts-modal-header{background-color:#0000000d;font-weight:700;padding:4px;align-content:center}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}.select-chart-component{width:var(--arcgis-charts-config-panel-width);height:var(--arcgis-charts-config-panel-height)}calcite-block{width:var(--arcgis-charts-config-calcite-block-default-width);height:var(--arcgis-charts-config-calcite-block-default-height);margin:var(--arcgis-charts-config-calcite-block-default-margin)}.label{display:flex;margin-left:1rem;margin-bottom:.5rem;justify-content:space-between}.header{margin:0}.panel{max-height:60vh}`;
+class f extends d {
   constructor() {
-    super(...arguments), this._messages = n(), this.selectChartTypePopover = p(), this.arcgisChartsConfigPopoverClose = o(), this.arcgisChartsConfigSelectChartTypeChange = o();
+    super(...arguments), this._messages = p(), this.selectChartTypePopover = h(), this.arcgisChartsConfigPopoverClose = o(), this.arcgisChartsConfigSelectChartTypeChange = o();
   }
   static {
     this.properties = { messageOverrides: 0, headerTitle: 3, layerId: 3, open: 7, popoverReferenceElement: 0, popoverPlacement: 3, selectedModelType: 3 };
@@ -41,15 +39,15 @@ class f extends m {
     await this.selectChartTypePopover.value?.reposition();
   }
   updated() {
-    c(this.selectChartTypePopover.value, this.open), this.hasUpdated || setTimeout(() => {
+    r(this.selectChartTypePopover.value, this.open), this.hasUpdated || setTimeout(() => {
       this.selectChartTypePopover.value?.reposition();
-    }, r.PopoverTimer);
+    }, n.PopoverTimer);
   }
   buildChartTypesList() {
     return a`<calcite-list label @click=${this.onChartTypeClick}><calcite-list-item .label=${this._messages.barChart} .value=${e.BarChart} .selected=${this.selectedModelType === e.BarChart}><calcite-icon slot=content-start icon=graph-bar></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.lineChart} .value=${e.LineChart} .selected=${this.selectedModelType === e.LineChart}><calcite-icon slot=content-start icon=graph-time-series></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.pieChart} .value=${e.PieChart} .selected=${this.selectedModelType === e.PieChart}><calcite-icon slot=content-start icon=pie-chart></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.histogram} .value=${e.Histogram} .selected=${this.selectedModelType === e.Histogram}><calcite-icon slot=content-start icon=graph-histogram></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.scatterplot} .value=${e.Scatterplot} .selected=${this.selectedModelType === e.Scatterplot}><calcite-icon slot=content-start icon=graph-scatter-plot></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.boxPlot} .value=${e.BoxPlot} .selected=${this.selectedModelType === e.BoxPlot}><calcite-icon slot=content-start icon=box-chart></calcite-icon></calcite-list-item></calcite-list>`;
   }
-  onChartTypeClick(i) {
-    i.target?.localName === "calcite-list-item" ? this.selectedModelType = i.target?.value : this.selectedModelType = i.target?.parentNode?.value, this.arcgisChartsConfigSelectChartTypeChange.emit();
+  onChartTypeClick(t) {
+    t.target?.localName === "calcite-list-item" ? this.selectedModelType = t.target?.value : this.selectedModelType = t.target?.parentNode?.value, this.arcgisChartsConfigSelectChartTypeChange.emit();
   }
   popoverOpen() {
     setTimeout(async () => await this.selectChartTypePopover.value?.setFocus(), 250);
@@ -59,10 +57,9 @@ class f extends m {
   }
   render() {
     return a`<div class=${s({
-      [t.rtl]: this.direction === "rtl",
-      [t.selectChartComponent]: !0,
-      [t.jsAppFlyout]: !0
-    })}><calcite-popover .referenceElement=${this.popoverReferenceElement ?? document.body} .placement=${this.popoverPlacement} .flipPlacements=${["top", "bottom"]} @calcitePopoverOpen=${this.popoverOpen} @calcitePopoverClose=${this.popoverClose} .open=${this.open} label ${h(this.selectChartTypePopover)}><calcite-panel class=${s(t.panel)} .heading=${this.headerTitle ?? this._messages.chooseChartType} closable @calcitePanelClose=${this.popoverClose} .closed=${!this.open}>${this.buildChartTypesList()}</calcite-panel></calcite-popover></div>`;
+      [i.selectChartComponent]: !0,
+      [i.jsAppFlyout]: !0
+    })}><calcite-popover .referenceElement=${this.popoverReferenceElement ?? document.body} .placement=${this.popoverPlacement} .flipPlacements=${["top", "bottom"]} @calcitePopoverOpen=${this.popoverOpen} @calcitePopoverClose=${this.popoverClose} .open=${this.open} label ${m(this.selectChartTypePopover)}><calcite-panel class=${s(i.panel)} .heading=${this.headerTitle ?? this._messages.chooseChartType} closable @calcitePanelClose=${this.popoverClose} .closed=${!this.open}>${this.buildChartTypesList()}</calcite-panel></calcite-popover></div>`;
   }
 }
 l("arcgis-charts-config-select-chart-type-popover", f);

package/dist/components/arcgis-charts-config-select-chart-type-popover/resource.d.ts

@@ -1,7 +1,6 @@
 export declare const HTMLClasses: {
     readonly selectChartComponent: "select-chart-component";
     readonly header: "header";
-    readonly rtl: "arcgis-charts-rtl";
     readonly jsAppFlyout: "js-app-flyout";
     readonly panel: "panel";
 };

package/dist/components/arcgis-charts-config-view-charts/customElement.d.ts

@@ -36,7 +36,7 @@ export declare class ArcgisChartsConfigViewCharts extends LitElement {
      */
     noGroup: boolean;
     /**
-     * Disable the three-dot menu for editing, renaming, and deleting charts. Useful if the list is only intended for viewing.
+     * Disable the three-dot menu for editing, renaming & deleting charts and disable re-ordering charts position in the charts list. Useful if the list is only intended for viewing.
      *
      * @category Public
      * @default false

package/dist/components/arcgis-charts-config-view-charts/customElement.js

@@ -13,20 +13,19 @@ import "@arcgis/core/request.js";
 import { g as m } from "../../chunks/chart-ui-utils.js";
 import { c as p, r as C, P as g } from "../../chunks/popover-ui-utils.js";
 import { u as f } from "../../chunks/useT9n.js";
-import { html as o } from "lit";
-import { LitElement as v, createEvent as r, safeClassMap as n } from "@arcgis/lumina";
-import { repeat as u } from "lit-html/directives/repeat.js";
-import { css as w } from "@lit/reactive-element/css-tag.js";
+import { css as v, html as o } from "lit";
+import { LitElement as u, createEvent as r, safeClassMap as n } from "@arcgis/lumina";
+import { repeat as w } from "lit-html/directives/repeat.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.5 */
+v4.34.0-next.51 */
 const c = {
   addChartContainer: "add-chart-container",
   viewChartComponent: "view-chart-component",
   header: "header",
   dropdownPopup: "dropdown-popup"
-}, I = w`.view-chart-component{width:var(--arcgis-charts-config-panel-width);height:var(--arcgis-charts-config-panel-height)}.add-chart-container{display:flex;justify-content:center;padding:2rem 0;background-color:var(--calcite-color-background)}.header{margin-left:1rem}.dropdown-popup{position:relative}`;
-class R extends v {
+}, I = v`.view-chart-component{width:var(--arcgis-charts-config-panel-width);height:var(--arcgis-charts-config-panel-height)}.add-chart-container{display:flex;justify-content:center;padding:2rem 0;background-color:var(--calcite-color-background)}.header{margin-left:1rem}.dropdown-popup{position:relative}`;
+class R extends u {
   constructor() {
     super(...arguments), this._messages = f(), this.chartRenamePopover = null, this.popoverClose = () => {
       const e = this.modelList?.find((t) => t.getChartId() === this.selectedChartId);
@@ -71,11 +70,11 @@ class R extends v {
     });
   }
   buildChartList() {
-    const e = this.modelList ? u(this.modelList, (t) => t.getChartId(), (t, i) => {
+    const e = this.modelList ? w(this.modelList, (t) => t.getChartId(), (t, i) => {
       const a = t.getChartId(), s = t.getTitleText(), l = m(t.getConfig());
       return o`<calcite-list-item .label=${s ?? a ?? d(this._messages.chartTitle ?? "", { index: i.toString() })} .selected=${this.selectedChartId === (a?.toString() ?? i.toString())} .value=${a ?? i.toString()} @click=${this.onChartSelect}><calcite-icon slot=content-start .icon=${l}></calcite-icon>${this.disableEditing ? null : o`<calcite-dropdown slot=actions-end overlay-positioning=fixed placement=bottom-end @calciteDropdownClose=${() => this.chartActionClosed(a ?? "")} @calciteDropdownOpen=${() => this.chartActionOpened(a ?? "")} class=${n(c.dropdownPopup)}><calcite-action scale=l .text=${this._messages.chartActions ?? ""} slot=trigger .active=${a === this.selectedActionChartId}><calcite-icon icon=ellipsis></calcite-icon></calcite-action><calcite-dropdown-group selection-mode=none><calcite-dropdown-item accesskey=edit @calciteDropdownItemSelect=${this.chartEditSelect}>${this._messages.edit}</calcite-dropdown-item><calcite-dropdown-item accesskey=rename @calciteDropdownItemSelect=${this.chartRenameSelect}>${this._messages.rename}</calcite-dropdown-item><calcite-dropdown-item accesskey=delete @calciteDropdownItemSelect=${this.chartDeleteSelect}>${this._messages.delete}</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown>`}</calcite-list-item>`;
     }) : null;
-    return this.layer ? o`<div>${this.noGroup ? null : o`<p class=${n(c.header)}>${this.layer.title ?? this.layer.id.toString()}</p>`}<calcite-list label drag-enabled selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${e}${this.disableEditing ? null : o`<div class=${n(c.addChartContainer)}><calcite-fab slot=fab appearance=outline-fill kind=neutral text-enabled .text=${this._messages.addChart} .label=${this._messages.addChart} @click=${this.onAddChartClick} scale=s></calcite-fab></div>`}</calcite-list></div>` : null;
+    return this.layer ? o`<div>${this.noGroup ? null : o`<p class=${n(c.header)}>${this.layer.title ?? this.layer.id.toString()}</p>`}<calcite-list label .dragEnabled=${!this.disableEditing} selection-mode=single selection-appearance=border @calciteListOrderChange=${this.onCalciteListOrderChange}>${e}${this.disableEditing ? null : o`<div class=${n(c.addChartContainer)}><calcite-fab slot=fab appearance=outline-fill kind=neutral text-enabled .text=${this._messages.addChart} .label=${this._messages.addChart} @click=${this.onAddChartClick} scale=s></calcite-fab></div>`}</calcite-list></div>` : null;
   }
   onChartSelect(e) {
     const t = e.currentTarget;

package/dist/demo-chart-rendering/common/index.d.ts

@@ -69,6 +69,7 @@ export declare const ControlLabels: {
     readonly ExportConfig: "Download config";
     readonly ExportImage: "Export PNG";
     readonly ExportImageNext: "Export PNG (Next)";
+    readonly ExportAsTable: "Export As Table";
     readonly DataType: "Data type";
     readonly StackedType: "Stacked type";
     readonly StackNegativeValuesOption: "Stack negative values to base line";

package/dist/docs/api.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2025-05-27T05:03:32",
+  "timestamp": "2025-07-09T04:46:29",
   "compiler": {
     "name": "@arcgis/lumina-compiler",
-    "version": "4.34.0-next.5",
+    "version": "4.34.0-next.51",
     "typescriptVersion": "5.8.3"
   },
   "schemaVersion": "1.0.0",
@@ -16,7 +16,7 @@
           "customElement": true,
           "name": "ArcgisChart",
           "tagName": "arcgis-chart",
-          "description": "Chart component renders various chart types based on the provided model, including bar charts, line charts, pie charts, box plots, combo bar-line charts, gauges, scatterplots, and histograms.",
+          "description": "The ArcGIS Chart component renders various chart types based on the provided model.\n\nSupported chart types include bar charts, line charts, pie charts, box plots, combo bar-line charts, gauges, scatterplots, histograms and radar charts.\n\nThe Chart component can be rendered using an [existing model](https://developers.arcgis.com/javascript/latest/charts-components-intro/#use-an-existing-model-from-a-webmap-or-feature-layer) from a web map or feature layer,\nor by [creating a new model](https://developers.arcgis.com/javascript/latest/charts-components-intro/#create-a-new-model).\n\nSee also:\n- [Introduction to Charts components](https://developers.arcgis.com/javascript/latest/charts-components-intro/)\n- [Tutorial: Display and create charts components](https://developers.arcgis.com/javascript/latest/tutorials/display-and-create-charts-components/)",
           "demos": [
             {
               "description": "Docs",
@@ -27,7 +27,7 @@
               "url": "https://developers.arcgis.com/javascript/latest/storybook/charts-components/?path=/story/arcgis-chart--bar-chart&singleStory=true"
             },
             {
-              "description": "Box Plot\nBox plots visualize and compares the distribution and central tendency of numeric values through their quartiles.",
+              "description": "Box Plot\nBox plots visualize and compare the distribution and central tendency of numeric values through their quartiles.",
               "url": "https://developers.arcgis.com/javascript/latest/storybook/charts-components/?path=/story/arcgis-chart--box-plot&singleStory=true"
             },
             {
@@ -247,7 +247,7 @@
               "docsTags": [
                 {
                   "name": "example",
-                  "text": "const arcgisChart = document.createElement(\"arcgis-chart\");\ndocument.body.append(arcgisChart);\narcgisChart.componentOnReady().then(() => {\n  console.log(\"arcgis-chart is ready to go!\");\n});"
+                  "text": "```js\nconst arcgisChart = document.querySelector(\"arcgis-chart\");\ndocument.body.append(arcgisChart);\nawait arcgisChart.componentOnReady();\nconsole.log(\"arcgis-chart is ready to go!\");\n```"
                 }
               ]
             },
@@ -589,7 +589,7 @@
               "docsTags": [
                 {
                   "name": "param",
-                  "text": "options The options to use when exporting the data.\n\nThe `Options` object can contain the following properties:\n- `columns` - An array of column to include in the CSV file.\n- `delimiter` - The delimiter to use in the CSV file. Default is `,`.\n- `includeHeader` - Whether to include the header row in the CSV file. Default is `true`.\n- `quoteAll` - Whether to quote all values in the CSV file. Default is `false`."
+                  "text": "options The options to use when exporting the data.\n\nNOTE: This method won't work for scatter plot series. The support charts for this method are:\n- Bar chart\n- Line chart\n- Combo bar-line chart\n- Box plot\n- Histogram\n- Pie chart\n\nThe `Options` object can contain the following properties:\n- `columns` - An array of column to include in the CSV file.\n- `delimiter` - The delimiter to use in the CSV file. Default is `,`.\n- `includeHeader` - Whether to include the header row in the CSV file. Default is `true`.\n- `quoteAll` - Whether to quote all values in the CSV file. Default is `false`."
                 },
                 {
                   "name": "category",
@@ -2984,7 +2984,7 @@
           "slots": [
             {
               "name": "action-bar",
-              "description": "A slot for adding charts-action-bar component or calcite-action-bar."
+              "description": "Slot for adding a `charts-action-bar` component or `calcite-action-bar`."
             }
           ]
         }
@@ -3009,7 +3009,7 @@
           "customElement": true,
           "name": "ArcgisChartsActionBar",
           "tagName": "arcgis-charts-action-bar",
-          "description": "The charts action bar component enhances chart functionality by offering context-specific actions such as rotation, zooming, and filtering. It is designed to be used in conjunction with a chart component and is not intended for standalone use.",
+          "description": "The ArcGIS charts action bar component enhances chart functionality by offering context-specific actions such as rotation, zooming, and filtering.\nIt also supports general actions like exporting the chart as an image or CSV.\nThis component is designed to be used with a chart component and is not intended for standalone use.\n\nSee also:\n- [Tutorial: Charts components with Map components using charts action bar](https://developers.arcgis.com/javascript/latest/tutorials/charts-components-with-map-components/)",
           "demos": [
             {
               "description": "Docs",
@@ -3264,7 +3264,7 @@
               "docsTags": [
                 {
                   "name": "example",
-                  "text": "const arcgisChartsActionBar = document.createElement(\"arcgis-charts-action-bar\");\ndocument.body.append(arcgisChartsActionBar);\narcgisChartsActionBar.componentOnReady().then(() => {\n  console.log(\"arcgis-charts-action-bar is ready to go!\");\n});"
+                  "text": "```js\nconst arcgisChartsActionBar = document.querySelector(\"arcgis-charts-action-bar\");\ndocument.body.append(arcgisChartsActionBar);\nawait arcgisChartsActionBar.componentOnReady();\nconsole.log(\"arcgis-charts-action-bar is ready to go!\");\n```"
                 }
               ]
             },
@@ -3842,7 +3842,7 @@
               "name": "hiddenActions",
               "description": "Holds a list of actions to hide from the action bar.\n\n**Note:** The edit chart action is hidden by default. To show it, remove its value from this array.",
               "type": {
-                "text": "Array<\"legend\" | \"fullExtent\" | \"filterBySelection\" | \"filterByExtent\" | \"rotateChart\" | \"selection\" | \"clearSelection\" | \"switchSelection\" | \"zoom\" | \"editChart\" | \"exportAsImage\" | \"exportAsCSV\">",
+                "text": "Array<\"zoom\" | \"legend\" | \"fullExtent\" | \"filterBySelection\" | \"filterByExtent\" | \"rotateChart\" | \"selection\" | \"clearSelection\" | \"switchSelection\" | \"editChart\" | \"exportAsImage\" | \"exportAsCSV\">",
                 "references": [
                   {
                     "name": "Array",

package/dist/docs/docs.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2025-05-27T05:03:32",
+  "timestamp": "2025-07-09T04:46:29",
   "compiler": {
     "name": "@arcgis/lumina-compiler",
-    "version": "4.34.0-next.5",
+    "version": "4.34.0-next.51",
     "typescriptVersion": "5.8.3"
   },
   "components": [
@@ -12,7 +12,7 @@
       "overview": "",
       "readme": "",
       "usage": {},
-      "docs": "Chart component renders various chart types based on the provided model, including bar charts, line charts, pie charts, box plots, combo bar-line charts, gauges, scatterplots, and histograms.",
+      "docs": "The ArcGIS Chart component renders various chart types based on the provided model.\n\nSupported chart types include bar charts, line charts, pie charts, box plots, combo bar-line charts, gauges, scatterplots, histograms and radar charts.\n\nThe Chart component can be rendered using an [existing model](https://developers.arcgis.com/javascript/latest/charts-components-intro/#use-an-existing-model-from-a-webmap-or-feature-layer) from a web map or feature layer,\nor by [creating a new model](https://developers.arcgis.com/javascript/latest/charts-components-intro/#create-a-new-model).\n\nSee also:\n- [Introduction to Charts components](https://developers.arcgis.com/javascript/latest/charts-components-intro/)\n- [Tutorial: Display and create charts components](https://developers.arcgis.com/javascript/latest/tutorials/display-and-create-charts-components/)",
       "docsTags": [
         {
           "name": "superclass",
@@ -1989,7 +1989,7 @@
           "docsTags": [
             {
               "name": "example",
-              "text": "const arcgisChart = document.createElement(\"arcgis-chart\");\ndocument.body.append(arcgisChart);\narcgisChart.componentOnReady().then(() => {\n  console.log(\"arcgis-chart is ready to go!\");\n});"
+              "text": "```js\nconst arcgisChart = document.querySelector(\"arcgis-chart\");\ndocument.body.append(arcgisChart);\nawait arcgisChart.componentOnReady();\nconsole.log(\"arcgis-chart is ready to go!\");\n```"
             },
             {
               "name": "inheritedFrom",
@@ -2082,7 +2082,7 @@
           "docsTags": [
             {
               "name": "param",
-              "text": "options The options to use when exporting the data.\n\nThe `Options` object can contain the following properties:\n- `columns` - An array of column to include in the CSV file.\n- `delimiter` - The delimiter to use in the CSV file. Default is `,`.\n- `includeHeader` - Whether to include the header row in the CSV file. Default is `true`.\n- `quoteAll` - Whether to quote all values in the CSV file. Default is `false`."
+              "text": "options The options to use when exporting the data.\n\nNOTE: This method won't work for scatter plot series. The support charts for this method are:\n- Bar chart\n- Line chart\n- Combo bar-line chart\n- Box plot\n- Histogram\n- Pie chart\n\nThe `Options` object can contain the following properties:\n- `columns` - An array of column to include in the CSV file.\n- `delimiter` - The delimiter to use in the CSV file. Default is `,`.\n- `includeHeader` - Whether to include the header row in the CSV file. Default is `true`.\n- `quoteAll` - Whether to quote all values in the CSV file. Default is `false`."
             },
             {
               "name": "category",
@@ -2647,7 +2647,7 @@
       "slots": [
         {
           "name": "action-bar",
-          "docs": "A slot for adding charts-action-bar component or calcite-action-bar."
+          "docs": "Slot for adding a `charts-action-bar` component or `calcite-action-bar`."
         }
       ],
       "parts": [],
@@ -2659,7 +2659,7 @@
       "overview": "",
       "readme": "",
       "usage": {},
-      "docs": "The charts action bar component enhances chart functionality by offering context-specific actions such as rotation, zooming, and filtering. It is designed to be used in conjunction with a chart component and is not intended for standalone use.",
+      "docs": "The ArcGIS charts action bar component enhances chart functionality by offering context-specific actions such as rotation, zooming, and filtering.\nIt also supports general actions like exporting the chart as an image or CSV.\nThis component is designed to be used with a chart component and is not intended for standalone use.\n\nSee also:\n- [Tutorial: Charts components with Map components using charts action bar](https://developers.arcgis.com/javascript/latest/tutorials/charts-components-with-map-components/)",
       "docsTags": [
         {
           "name": "superclass",
@@ -3579,10 +3579,10 @@
         },
         {
           "name": "hiddenActions",
-          "type": "Array<\"legend\" | \"fullExtent\" | \"filterBySelection\" | \"filterByExtent\" | \"rotateChart\" | \"selection\" | \"clearSelection\" | \"switchSelection\" | \"zoom\" | \"editChart\" | \"exportAsImage\" | \"exportAsCSV\">",
+          "type": "Array<\"zoom\" | \"legend\" | \"fullExtent\" | \"filterBySelection\" | \"filterByExtent\" | \"rotateChart\" | \"selection\" | \"clearSelection\" | \"switchSelection\" | \"editChart\" | \"exportAsImage\" | \"exportAsCSV\">",
           "complexType": {
-            "original": "Array<\"legend\" | \"fullExtent\" | \"filterBySelection\" | \"filterByExtent\" | \"rotateChart\" | \"selection\" | \"clearSelection\" | \"switchSelection\" | \"zoom\" | \"editChart\" | \"exportAsImage\" | \"exportAsCSV\">",
-            "resolved": "Array<\"legend\" | \"fullExtent\" | \"filterBySelection\" | \"filterByExtent\" | \"rotateChart\" | \"selection\" | \"clearSelection\" | \"switchSelection\" | \"zoom\" | \"editChart\" | \"exportAsImage\" | \"exportAsCSV\">",
+            "original": "Array<\"zoom\" | \"legend\" | \"fullExtent\" | \"filterBySelection\" | \"filterByExtent\" | \"rotateChart\" | \"selection\" | \"clearSelection\" | \"switchSelection\" | \"editChart\" | \"exportAsImage\" | \"exportAsCSV\">",
+            "resolved": "Array<\"zoom\" | \"legend\" | \"fullExtent\" | \"filterBySelection\" | \"filterByExtent\" | \"rotateChart\" | \"selection\" | \"clearSelection\" | \"switchSelection\" | \"editChart\" | \"exportAsImage\" | \"exportAsCSV\">",
             "references": {
               "Array": {
                 "location": "import",
@@ -4166,7 +4166,7 @@
           "docsTags": [
             {
               "name": "example",
-              "text": "const arcgisChartsActionBar = document.createElement(\"arcgis-charts-action-bar\");\ndocument.body.append(arcgisChartsActionBar);\narcgisChartsActionBar.componentOnReady().then(() => {\n  console.log(\"arcgis-charts-action-bar is ready to go!\");\n});"
+              "text": "```js\nconst arcgisChartsActionBar = document.querySelector(\"arcgis-charts-action-bar\");\ndocument.body.append(arcgisChartsActionBar);\nawait arcgisChartsActionBar.componentOnReady();\nconsole.log(\"arcgis-charts-action-bar is ready to go!\");\n```"
             },
             {
               "name": "inheritedFrom",

package/dist/docs/vscode.html-custom-data.json

@@ -4,7 +4,7 @@
   "tags": [
     {
       "name": "arcgis-chart",
-      "description": "Chart component renders various chart types based on the provided model, including bar charts, line charts, pie charts, box plots, combo bar-line charts, gauges, scatterplots, and histograms.\n--\n\n### Events\n- **arcgisAxesMinMaxChange** - Event triggered once the chart axes min/max values are computed\n- **arcgisBadDataWarningRaise** - Event triggered when an error is detected with the data set\n- **arcgisConfigChange** - Event triggered when the chart config is changed\n- **arcgisDataFetchComplete** - Event triggered once the chart data has been fetched but not yet fully processed.\nFor instance it can be useful for a pie chart to see all the slices before they get grouped into an 'other' slice during the post-processing step.\n- **arcgisDataProcessComplete** - Event triggered once the chart data has been processed\n- **arcgisDataProcessError** - Event triggered when an error occurred while fetching of processing the data for the chart\n- **arcgisLegendItemVisibilityChange** - Event triggered once a legend item visibility has been changed\n- **arcgisNoRenderPropChange** - Event triggered when a no-render prop is changed\n- **arcgisRuntimeError** - Event triggered when an error occurred that prevents the chart from being created or updated\n- **arcgisSelectionComplete** - Event triggered when a selection is applied to the chart\n- **arcgisSeriesColorChange** - Event triggered once the chart series color have been assigned\n- **arcgisSeriesOrder** - Event carrying the series id as they have been sorted following the `orderOptions` instructions\n- **arcgisUpdateComplete** - Event triggered once the chart is updated\n\n### Methods\n- `clearSelection(): Promise<void>` - Clears all selection on the chart.\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `errorAlert(errorMessage?: string): Promise<void>` - Triggers an alert to display an error message.\n- `exportAsCSV(options?: CSVOptions): Promise<void>` - Export the current chart's data as a CSV file.\n- `exportAsImage(format?: DownloadableChartImagesTypes): Promise<void>` - Export the current chart as an image.\n- `notify(message?: string, heading?: string, options?: NotifyOptions): Promise<void>` - Notify method allows passing external messages to the chart component.\nIt can be used to pass validation or information messages.\nIn a situation where a config update is overriding your notification modal,\nconsider waiting for the `arcgisUpdateComplete` event.\n- `refresh(props?: { updateData?: boolean; resetAxesBounds?: boolean; updateExtent?: boolean; }): Promise<void>` - Re-render the chart.\n- `resetZoom(): Promise<void>` - Resets the chart zoom to bring it back to full extent\n- `switchSelection(): Promise<void>` - Switches the selection on the chart.\n\n### Slots\n- **action-bar** - A slot for adding charts-action-bar component or calcite-action-bar.",
+      "description": "The ArcGIS Chart component renders various chart types based on the provided model.\n\nSupported chart types include bar charts, line charts, pie charts, box plots, combo bar-line charts, gauges, scatterplots, histograms and radar charts.\n\nThe Chart component can be rendered using an [existing model](https://developers.arcgis.com/javascript/latest/charts-components-intro/#use-an-existing-model-from-a-webmap-or-feature-layer) from a web map or feature layer,\nor by [creating a new model](https://developers.arcgis.com/javascript/latest/charts-components-intro/#create-a-new-model).\n\nSee also:\n- [Introduction to Charts components](https://developers.arcgis.com/javascript/latest/charts-components-intro/)\n- [Tutorial: Display and create charts components](https://developers.arcgis.com/javascript/latest/tutorials/display-and-create-charts-components/)\n--\n\n### Events\n- **arcgisAxesMinMaxChange** - Event triggered once the chart axes min/max values are computed\n- **arcgisBadDataWarningRaise** - Event triggered when an error is detected with the data set\n- **arcgisConfigChange** - Event triggered when the chart config is changed\n- **arcgisDataFetchComplete** - Event triggered once the chart data has been fetched but not yet fully processed.\nFor instance it can be useful for a pie chart to see all the slices before they get grouped into an 'other' slice during the post-processing step.\n- **arcgisDataProcessComplete** - Event triggered once the chart data has been processed\n- **arcgisDataProcessError** - Event triggered when an error occurred while fetching of processing the data for the chart\n- **arcgisLegendItemVisibilityChange** - Event triggered once a legend item visibility has been changed\n- **arcgisNoRenderPropChange** - Event triggered when a no-render prop is changed\n- **arcgisRuntimeError** - Event triggered when an error occurred that prevents the chart from being created or updated\n- **arcgisSelectionComplete** - Event triggered when a selection is applied to the chart\n- **arcgisSeriesColorChange** - Event triggered once the chart series color have been assigned\n- **arcgisSeriesOrder** - Event carrying the series id as they have been sorted following the `orderOptions` instructions\n- **arcgisUpdateComplete** - Event triggered once the chart is updated\n\n### Methods\n- `clearSelection(): Promise<void>` - Clears all selection on the chart.\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `errorAlert(errorMessage?: string): Promise<void>` - Triggers an alert to display an error message.\n- `exportAsCSV(options?: CSVOptions): Promise<void>` - Export the current chart's data as a CSV file.\n- `exportAsImage(format?: DownloadableChartImagesTypes): Promise<void>` - Export the current chart as an image.\n- `notify(message?: string, heading?: string, options?: NotifyOptions): Promise<void>` - Notify method allows passing external messages to the chart component.\nIt can be used to pass validation or information messages.\nIn a situation where a config update is overriding your notification modal,\nconsider waiting for the `arcgisUpdateComplete` event.\n- `refresh(props?: { updateData?: boolean; resetAxesBounds?: boolean; updateExtent?: boolean; }): Promise<void>` - Re-render the chart.\n- `resetZoom(): Promise<void>` - Resets the chart zoom to bring it back to full extent\n- `switchSelection(): Promise<void>` - Switches the selection on the chart.\n\n### Slots\n- **action-bar** - Slot for adding a `charts-action-bar` component or `calcite-action-bar`.",
       "attributes": [
         {
           "name": "action-mode",
@@ -285,7 +285,7 @@
           "url": "https://developers.arcgis.com/javascript/latest/storybook/charts-components/?path=/story/arcgis-chart--bar-chart&singleStory=true"
         },
         {
-          "name": "Box Plot\nBox plots visualize and compares the distribution and central tendency of numeric values through their quartiles.",
+          "name": "Box Plot\nBox plots visualize and compare the distribution and central tendency of numeric values through their quartiles.",
           "url": "https://developers.arcgis.com/javascript/latest/storybook/charts-components/?path=/story/arcgis-chart--box-plot&singleStory=true"
         },
         {
@@ -320,7 +320,7 @@
     },
     {
       "name": "arcgis-charts-action-bar",
-      "description": "The charts action bar component enhances chart functionality by offering context-specific actions such as rotation, zooming, and filtering. It is designed to be used in conjunction with a chart component and is not intended for standalone use.\n--\n\n### Events\n- **arcgisActionBarToggle** - Event triggered once action bar expand is toggled\n- **arcgisDefaultActionSelect** - Event triggered once a default action is selected\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- **custom-action-top** - A slot for adding custom `calcite-action` to the top of the default actions.\n- **custom-action-below** - A slot for adding custom `calcite-action` to the bottom of the default actions.",
+      "description": "The ArcGIS charts action bar component enhances chart functionality by offering context-specific actions such as rotation, zooming, and filtering.\nIt also supports general actions like exporting the chart as an image or CSV.\nThis component is designed to be used with a chart component and is not intended for standalone use.\n\nSee also:\n- [Tutorial: Charts components with Map components using charts action bar](https://developers.arcgis.com/javascript/latest/tutorials/charts-components-with-map-components/)\n--\n\n### Events\n- **arcgisActionBarToggle** - Event triggered once action bar expand is toggled\n- **arcgisDefaultActionSelect** - Event triggered once a default action is selected\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- **custom-action-top** - A slot for adding custom `calcite-action` to the top of the default actions.\n- **custom-action-below** - A slot for adding custom `calcite-action` to the bottom of the default actions.",
       "attributes": [
         {
           "name": "action-bar-selection-mode",

package/dist/docs/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@arcgis/charts-components",
-  "version": "4.34.0-next.5",
+  "version": "4.34.0-next.51",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "arcgis-chart",
-          "description": "Chart component renders various chart types based on the provided model, including bar charts, line charts, pie charts, box plots, combo bar-line charts, gauges, scatterplots, and histograms.\n--\n\n### Events\n- **arcgisAxesMinMaxChange** - Event triggered once the chart axes min/max values are computed\n- **arcgisBadDataWarningRaise** - Event triggered when an error is detected with the data set\n- **arcgisConfigChange** - Event triggered when the chart config is changed\n- **arcgisDataFetchComplete** - Event triggered once the chart data has been fetched but not yet fully processed.\nFor instance it can be useful for a pie chart to see all the slices before they get grouped into an 'other' slice during the post-processing step.\n- **arcgisDataProcessComplete** - Event triggered once the chart data has been processed\n- **arcgisDataProcessError** - Event triggered when an error occurred while fetching of processing the data for the chart\n- **arcgisLegendItemVisibilityChange** - Event triggered once a legend item visibility has been changed\n- **arcgisNoRenderPropChange** - Event triggered when a no-render prop is changed\n- **arcgisRuntimeError** - Event triggered when an error occurred that prevents the chart from being created or updated\n- **arcgisSelectionComplete** - Event triggered when a selection is applied to the chart\n- **arcgisSeriesColorChange** - Event triggered once the chart series color have been assigned\n- **arcgisSeriesOrder** - Event carrying the series id as they have been sorted following the `orderOptions` instructions\n- **arcgisUpdateComplete** - Event triggered once the chart is updated\n\n### Methods\n- `clearSelection(): Promise<void>` - Clears all selection on the chart.\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `errorAlert(errorMessage?: string): Promise<void>` - Triggers an alert to display an error message.\n- `exportAsCSV(options?: CSVOptions): Promise<void>` - Export the current chart's data as a CSV file.\n- `exportAsImage(format?: DownloadableChartImagesTypes): Promise<void>` - Export the current chart as an image.\n- `notify(message?: string, heading?: string, options?: NotifyOptions): Promise<void>` - Notify method allows passing external messages to the chart component.\nIt can be used to pass validation or information messages.\nIn a situation where a config update is overriding your notification modal,\nconsider waiting for the `arcgisUpdateComplete` event.\n- `refresh(props?: { updateData?: boolean; resetAxesBounds?: boolean; updateExtent?: boolean; }): Promise<void>` - Re-render the chart.\n- `resetZoom(): Promise<void>` - Resets the chart zoom to bring it back to full extent\n- `switchSelection(): Promise<void>` - Switches the selection on the chart.\n\n### Slots\n- **action-bar** - A slot for adding charts-action-bar component or calcite-action-bar.",
+          "description": "The ArcGIS Chart component renders various chart types based on the provided model.\n\nSupported chart types include bar charts, line charts, pie charts, box plots, combo bar-line charts, gauges, scatterplots, histograms and radar charts.\n\nThe Chart component can be rendered using an [existing model](https://developers.arcgis.com/javascript/latest/charts-components-intro/#use-an-existing-model-from-a-webmap-or-feature-layer) from a web map or feature layer,\nor by [creating a new model](https://developers.arcgis.com/javascript/latest/charts-components-intro/#create-a-new-model).\n\nSee also:\n- [Introduction to Charts components](https://developers.arcgis.com/javascript/latest/charts-components-intro/)\n- [Tutorial: Display and create charts components](https://developers.arcgis.com/javascript/latest/tutorials/display-and-create-charts-components/)\n--\n\n### Events\n- **arcgisAxesMinMaxChange** - Event triggered once the chart axes min/max values are computed\n- **arcgisBadDataWarningRaise** - Event triggered when an error is detected with the data set\n- **arcgisConfigChange** - Event triggered when the chart config is changed\n- **arcgisDataFetchComplete** - Event triggered once the chart data has been fetched but not yet fully processed.\nFor instance it can be useful for a pie chart to see all the slices before they get grouped into an 'other' slice during the post-processing step.\n- **arcgisDataProcessComplete** - Event triggered once the chart data has been processed\n- **arcgisDataProcessError** - Event triggered when an error occurred while fetching of processing the data for the chart\n- **arcgisLegendItemVisibilityChange** - Event triggered once a legend item visibility has been changed\n- **arcgisNoRenderPropChange** - Event triggered when a no-render prop is changed\n- **arcgisRuntimeError** - Event triggered when an error occurred that prevents the chart from being created or updated\n- **arcgisSelectionComplete** - Event triggered when a selection is applied to the chart\n- **arcgisSeriesColorChange** - Event triggered once the chart series color have been assigned\n- **arcgisSeriesOrder** - Event carrying the series id as they have been sorted following the `orderOptions` instructions\n- **arcgisUpdateComplete** - Event triggered once the chart is updated\n\n### Methods\n- `clearSelection(): Promise<void>` - Clears all selection on the chart.\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `errorAlert(errorMessage?: string): Promise<void>` - Triggers an alert to display an error message.\n- `exportAsCSV(options?: CSVOptions): Promise<void>` - Export the current chart's data as a CSV file.\n- `exportAsImage(format?: DownloadableChartImagesTypes): Promise<void>` - Export the current chart as an image.\n- `notify(message?: string, heading?: string, options?: NotifyOptions): Promise<void>` - Notify method allows passing external messages to the chart component.\nIt can be used to pass validation or information messages.\nIn a situation where a config update is overriding your notification modal,\nconsider waiting for the `arcgisUpdateComplete` event.\n- `refresh(props?: { updateData?: boolean; resetAxesBounds?: boolean; updateExtent?: boolean; }): Promise<void>` - Re-render the chart.\n- `resetZoom(): Promise<void>` - Resets the chart zoom to bring it back to full extent\n- `switchSelection(): Promise<void>` - Switches the selection on the chart.\n\n### Slots\n- **action-bar** - Slot for adding a `charts-action-bar` component or `calcite-action-bar`.",
           "doc-url": "https://developers.arcgis.com/javascript/latest/references/charts-components/arcgis-chart/",
           "attributes": [
             {
@@ -339,7 +339,7 @@
           "slots": [
             {
               "name": "action-bar",
-              "description": "A slot for adding charts-action-bar component or calcite-action-bar."
+              "description": "Slot for adding a `charts-action-bar` component or `calcite-action-bar`."
             }
           ],
           "events": [
@@ -758,7 +758,7 @@
         },
         {
           "name": "arcgis-charts-action-bar",
-          "description": "The charts action bar component enhances chart functionality by offering context-specific actions such as rotation, zooming, and filtering. It is designed to be used in conjunction with a chart component and is not intended for standalone use.\n--\n\n### Events\n- **arcgisActionBarToggle** - Event triggered once action bar expand is toggled\n- **arcgisDefaultActionSelect** - Event triggered once a default action is selected\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- **custom-action-top** - A slot for adding custom `calcite-action` to the top of the default actions.\n- **custom-action-below** - A slot for adding custom `calcite-action` to the bottom of the default actions.",
+          "description": "The ArcGIS charts action bar component enhances chart functionality by offering context-specific actions such as rotation, zooming, and filtering.\nIt also supports general actions like exporting the chart as an image or CSV.\nThis component is designed to be used with a chart component and is not intended for standalone use.\n\nSee also:\n- [Tutorial: Charts components with Map components using charts action bar](https://developers.arcgis.com/javascript/latest/tutorials/charts-components-with-map-components/)\n--\n\n### Events\n- **arcgisActionBarToggle** - Event triggered once action bar expand is toggled\n- **arcgisDefaultActionSelect** - Event triggered once a default action is selected\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- **custom-action-top** - A slot for adding custom `calcite-action` to the top of the default actions.\n- **custom-action-below** - A slot for adding custom `calcite-action` to the bottom of the default actions.",
           "doc-url": "https://developers.arcgis.com/javascript/latest/references/charts-components/arcgis-charts-action-bar/",
           "attributes": [
             {
@@ -1311,7 +1311,7 @@
               {
                 "name": "hiddenActions",
                 "description": "Holds a list of actions to hide from the action bar.\n\n**Note:** The edit chart action is hidden by default. To show it, remove its value from this array.",
-                "type": "Array<\"legend\" | \"fullExtent\" | \"filterBySelection\" | \"filterByExtent\" | \"rotateChart\" | \"selection\" | \"clearSelection\" | \"switchSelection\" | \"zoom\" | \"editChart\" | \"exportAsImage\" | \"exportAsCSV\">"
+                "type": "Array<\"zoom\" | \"legend\" | \"fullExtent\" | \"filterBySelection\" | \"filterByExtent\" | \"rotateChart\" | \"selection\" | \"clearSelection\" | \"switchSelection\" | \"editChart\" | \"exportAsImage\" | \"exportAsCSV\">"
               },
               {
                 "name": "legendState",

package/dist/index.js

@@ -13,7 +13,7 @@ import { B as Er, a as kr, C as Mr, H as Vr, L as Qr, P as Wr, S as wr } from ".
 import { g as _r, s as Gr } from "./chunks/runtime.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.5 */
+v4.34.0-next.51 */
 function R(a) {
   let o;
   switch (a.length) {

package/dist/loader.js

@@ -2,7 +2,7 @@ import { r as e } from "./chunks/runtime.js";
 import { makeDefineCustomElements as t } from "@arcgis/lumina";
 /*! 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.5 */
+v4.34.0-next.51 */
 const o = t(e, {
   "arcgis-chart": [() => import("./components/arcgis-chart/customElement.js"), "actionMode,autoDisposeChart,chartLimits:,chartWillRender:,componentVersion,cursorRange,dataLabelFormatter:,disableInteractions,disableTogglingLegendItems,enableConfiguration,enableResponsiveFeatures,errorPolicy,featureIndex,filterByExtent,filterBySelection,gaugeInnerLabelFormatter:,guideTooltipFormatter:,hideEmptySeries,hideLicenseWatermark,hideLoaderAnimation,ignoreSmoothRenderingLimit,ignoreViewExtent,layer:,layerFieldsChangePolicy,layerFilterChangePolicy,layerRendererChangePolicy,legendPosition,legendValueLabelFormatter:,legendVisibility,loaderColors:,messageOptions:,model:,placeholder,queueChartCreation,replaceNoValueCategoryWithZero,returnFeaturesExtent,returnSelectionIndexes,returnSelectionOIDs,rotation,runtimeDataFilters:,secondaryYAxisLabelFormatter:,selectionData:,selectionTheme:,setTimeBinningInfoWhenNotProvided,syncSelection,syncSelectionsBetweenChartAndLayerViewPolicy,timeZone,tooltipFormatter:,updateSplitBySeries:,useAnimatedCharts,usePopupTemplateFieldsInfo,view:,viewTimeExtentChangePolicy,xAxisLabelFormatter:,yAxisLabelFormatter:;clearSelection,errorAlert,exportAsCSV,exportAsImage,notify,refresh,resetZoom,switchSelection"],
   "arcgis-charts-action-bar": [() => import("./components/arcgis-charts-action-bar/customElement.js"), "actionBarSelectionMode,chartElement:,chartType,clearSelectionState,clearSelectionTitle,clearSelectionToggle,disableCSVExportForChartTypes:,disabledExportAction,editChartState,editChartTitle,editChartToggle,expanded,exportAsCSVState,exportAsCSVTitle,exportAsImageState,exportAsImageTitle,filterByExtentState,filterByExtentTitle,filterByExtentToggle,filterBySelectionState,filterBySelectionTitle,filterBySelectionToggle,forceDisableActions,fullExtentState,fullExtentTitle,fullExtentToggle,hiddenActions:,legendState,legendTitle,legendToggle,messageOverrides:,rotateChartState,rotateChartTitle,rotateChartToggle,selectionState,selectionTitle,selectionToggle,switchSelectionState,switchSelectionTitle,switchSelectionToggle,zoomState,zoomTitle,zoomToggle"],

package/dist/model/chart-model/utils/data.d.ts

@@ -11,3 +11,9 @@ export declare const setFetchNULLValues: (fetchNULLValues: boolean, config: Char
  * @returns {boolean} Boolean value indicates whether NULL values will be fetched.
  */
 export declare const getFetchNULLValues: (config: ChartConfig) => boolean;
+/**
+ * Gets the split by values from the chart config.
+ * @param config The chart config.
+ * @returns {string[]} An array of split by values.
+ */
+export declare const getSplitByValues: (config: ChartConfig) => string[];