@arcgis/charts-components 4.33.0-next.136 → 4.33.0-next.138

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

@@ -1,8 +1,8 @@
 import { c as E } from "../../chunks/runtime.js";
-import { WebChartTypes as b, RESTSymbolType as P } from "@arcgis/charts-spec";
-import { cloneDeep as I, isEmpty as T, toNumber as z } from "lodash-es";
+import { WebChartTypes as b, RESTSymbolType as z } from "@arcgis/charts-spec";
+import { cloneDeep as I, isEmpty as T, toNumber as $ } from "lodash-es";
 import "d3-array";
-import { aO as F, ca as y, Z as $, P as w } from "../../chunks/interfaces.js";
+import { aO as F, c9 as y, Z as C, P as w } from "../../chunks/interfaces.js";
 import "@arcgis/core/geometry/support/jsonUtils.js";
 import "@arcgis/core/rest/support/AttributeBinsQuery.js";
 import "@arcgis/core/rest/support/Query.js";
@@ -10,18 +10,18 @@ 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 { r as C, c as L, P as k } from "../../chunks/popover-ui-utils.js";
+import { r as x, c as L, P as k } from "../../chunks/popover-ui-utils.js";
 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 g, f as M, s as u, D as V, c as p } from "../../chunks/chart-ui-utils2.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 { createRef as d, ref as a } from "lit-html/directives/ref.js";
-import { LitElement as D, createEvent as v, safeClassMap as i, safeStyleMap as x } from "@arcgis/lumina";
+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";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.33/esri/copyright.txt for details.
-v4.33.0-next.136 */
+v4.33.0-next.138 */
 const s = {
   label: "label",
   r2: "r2",
@@ -35,7 +35,7 @@ const s = {
 }, 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 {
   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) => {
+    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;
       this.model.setLinearTrendSymbol(I(t));
     }, this.setFixedSymbolRGBAColor = (e) => {
@@ -47,7 +47,7 @@ class K extends D {
     }, this.setXYField = async (e) => {
       try {
         const t = e.detail;
-        A(m), this.contentKind === l.xAxisField ? await this.model.setXAxisField(t) : await this.model.setYAxisField(t), this.removeScatterPlotPopover();
+        A(m), this.contentKind === l.xAxisField ? await this.model.setXAxisField(t) : await this.model.setYAxisField(t), this.removeScatterplotPopover();
       } catch (t) {
         throw this.arcgisChartsConfigDataChangeError.emit({ error: t, model: this.model }), t;
       }
@@ -58,37 +58,37 @@ class K extends D {
           ...this.model.getSizePolicy(),
           type: b.SizePolicy,
           field: t
-        }) : this.model.setSizePolicy(void 0), m.scatterPlotData[m.selectedChartId] = {
-          ...m.scatterPlotData[m.selectedChartId],
+        }) : this.model.setSizePolicy(void 0), m.scatterplotData[m.selectedChartId] = {
+          ...m.scatterplotData[m.selectedChartId],
           sizePolicyField: this.model.getSizePolicy()?.field ?? void 0
-        }, this.removeScatterPlotPopover();
+        }, this.removeScatterplotPopover();
       } catch (t) {
         throw this.arcgisChartsConfigDataChangeError.emit({ error: t, model: this.model }), t;
       }
-    }, this.closeScatterPlotPopover = (e) => {
-      this.scatterPlotPopover === e?.target && (this.contentKind = l.none, this.removeScatterPlotPopover());
+    }, this.closeScatterplotPopover = (e) => {
+      this.scatterplotPopover === e?.target && (this.contentKind = l.none, this.removeScatterplotPopover());
     }, this.openChange = (e) => {
       this.arcgisChartsConfigPopoverOpenChange.emit(e.detail);
     }, this.onModelConfigChange = () => {
       this.requestUpdate();
       const { minSize: e, maxSize: t } = this.model.getSizePolicy() ?? {};
-      this.minSizeInputElement.value !== void 0 && e !== void 0 && (this.minSizeInputElement.value.value = `${e}`, f(this.minSizeInputElement.value.value, this.minSizeInputElement.value.min, this.minSizeInputElement.value.max) ? g({
+      this.minSizeInputElement.value !== void 0 && e !== void 0 && (this.minSizeInputElement.value.value = `${e}`, f(this.minSizeInputElement.value.value, this.minSizeInputElement.value.min, this.minSizeInputElement.value.max) ? p({
         inputElement: this.minSizeInputElement.value,
-        status: p.IDLE
-      }) : g({
+        status: g.IDLE
+      }) : p({
         inputElement: this.minSizeInputElement.value,
-        status: p.INVALID
-      })), this.maxSizeInputElement.value !== void 0 && t !== void 0 && (this.maxSizeInputElement.value.value = `${t}`, f(this.maxSizeInputElement.value.value, this.maxSizeInputElement.value.min, this.maxSizeInputElement.value.max) ? g({
+        status: g.INVALID
+      })), this.maxSizeInputElement.value !== void 0 && t !== void 0 && (this.maxSizeInputElement.value.value = `${t}`, f(this.maxSizeInputElement.value.value, this.maxSizeInputElement.value.min, this.maxSizeInputElement.value.max) ? p({
         inputElement: this.maxSizeInputElement.value,
-        status: p.IDLE
-      }) : g({
+        status: g.IDLE
+      }) : p({
         inputElement: this.maxSizeInputElement.value,
-        status: p.INVALID
+        status: g.INVALID
       }));
     }, this.segmentedControlRef = (e) => {
       e && (e.focus = () => {
       }, this.items.push(e));
-    }, this.layerFieldsInfo = [], this.arcgisChartsConfigDataChangeError = v(), this.arcgisChartsConfigPopoverOpenChange = v(), this.arcgisChartsConfigScatterPlotPopoverChange = v();
+    }, this.layerFieldsInfo = [], this.arcgisChartsConfigDataChangeError = v(), this.arcgisChartsConfigPopoverOpenChange = v(), this.arcgisChartsConfigScatterplotPopoverChange = v();
   }
   static {
     this.properties = { selectedElement: 16, selectedSizeType: 16, messageOverrides: 0, model: 0, r2: 11, layerFieldsInfo: 0, isTableLayer: 5, open: 7 };
@@ -97,8 +97,8 @@ class K extends D {
     this.styles = R;
   }
   async load() {
-    this.modelChange(this.model), this.onModelConfigChange(), this.defaultR2Label = await F(), this.selectedSizeType = this.getCurrentSymbolSizeType(), this.selectedSizeType === h.Proportional && (m.scatterPlotData[m.selectedChartId] = {
-      ...m.scatterPlotData[m.selectedChartId],
+    this.modelChange(this.model), this.onModelConfigChange(), this.defaultR2Label = await F(), this.selectedSizeType = this.getCurrentSymbolSizeType(), this.selectedSizeType === h.Proportional && (m.scatterplotData[m.selectedChartId] = {
+      ...m.scatterplotData[m.selectedChartId],
       sizePolicyField: this.model.getSizePolicy()?.field
     });
   }
@@ -106,22 +106,22 @@ class K extends D {
     e.has("model") && this.modelChange(this.model, e.get("model")), e.has("selectedElement") && this.openPopover();
   }
   async loaded() {
-    await (async (t) => void await new Promise((o) => setTimeout(() => o(), t)))(250), this.items.forEach((t) => {
+    await (async (t) => await new Promise((o) => setTimeout(() => o(), t)))(250), this.items.forEach((t) => {
       delete t.focus;
     });
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.removeScatterPlotPopover(), this.model.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
+    super.disconnectedCallback(), this.removeScatterplotPopover(), this.model.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
   modelChange(e, t) {
     t?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), e?.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
   openPopover() {
-    (typeof this.selectedElement == "string" || !T(this.selectedElement)) && this.setupScatterPlotPopover();
+    (typeof this.selectedElement == "string" || !T(this.selectedElement)) && this.setupScatterplotPopover();
   }
   setShowTrendLine(e) {
     const t = e.target.checked;
-    this.model.setShowLinearTrend(t), !t && this.contentKind === l.trendLine && this.closeScatterPlotPopover(e);
+    this.model.setShowLinearTrend(t), !t && this.contentKind === l.trendLine && this.closeScatterplotPopover(e);
   }
   symbolSizeChange(e) {
     const t = e.target, { value: o } = t;
@@ -147,14 +147,14 @@ class K extends D {
           });
           break;
       }
-      g({
+      p({
         inputElement: t,
-        status: p.IDLE
+        status: g.IDLE
       });
     } else
-      g({
+      p({
         inputElement: t,
-        status: p.INVALID
+        status: g.INVALID
       });
   }
   symbolSizeRangeSliderInput(e) {
@@ -172,7 +172,7 @@ class K extends D {
   changeSymbolSizeTypeToggle() {
     const e = this.symbolSizeModeElement.value?.value;
     this.selectedSizeType = e;
-    const t = m.scatterPlotData[m.selectedChartId]?.sizePolicyField;
+    const t = m.scatterplotData[m.selectedChartId]?.sizePolicyField;
     e === h.Proportional && t !== void 0 ? this.model.setSizePolicy({
       ...this.model.getSizePolicy(),
       type: b.SizePolicy,
@@ -196,43 +196,43 @@ class K extends D {
   onSizeVariableSelectChange() {
     this.contentKind = l.sizeVariable, this.selectedElement = this.model.getSizePolicy()?.field ?? "";
   }
-  setupScatterPlotPopover() {
-    this.scatterPlotPopover = C(this.scatterPlotPopover);
+  setupScatterplotPopover() {
+    this.scatterplotPopover = x(this.scatterplotPopover);
     const e = {
       setTrendLineSymbol: this.setTrendLineSymbol,
       setFixedSymbolRGBAColor: this.setFixedSymbolRGBAColor,
       setXYField: this.setXYField,
       setSizeVariableField: this.setSizeVariableField,
       openChange: this.openChange,
-      popoverClose: this.closeScatterPlotPopover
+      popoverClose: this.closeScatterplotPopover
     };
-    switch (this.scatterPlotPopover = L(k.ScatterPlotDataPopover, e), this.scatterPlotPopover.layerFieldsInfo = [...this.layerFieldsInfo], this.scatterPlotPopover.contentKind = this.contentKind, this.contentKind) {
+    switch (this.scatterplotPopover = L(k.ScatterplotDataPopover, e), this.scatterplotPopover.layerFieldsInfo = [...this.layerFieldsInfo], this.scatterplotPopover.contentKind = this.contentKind, this.contentKind) {
       case l.xAxisField:
-        this.scatterPlotPopover.referenceElement = this.xAxisElement.value, this.scatterPlotPopover.placement = "trailing", this.scatterPlotPopover.selectedContent = this.model.getXAxisField(), this.scatterPlotPopover.headingTitle = this._messages.selectAField;
+        this.scatterplotPopover.referenceElement = this.xAxisElement.value, this.scatterplotPopover.placement = "trailing", this.scatterplotPopover.selectedContent = this.model.getXAxisField(), this.scatterplotPopover.headingTitle = this._messages.selectAField;
         break;
       case l.yAxisField:
-        this.scatterPlotPopover.referenceElement = this.yAxisElement.value, this.scatterPlotPopover.placement = "trailing", this.scatterPlotPopover.selectedContent = this.model.getYAxisField(), this.scatterPlotPopover.headingTitle = this._messages.selectAField;
+        this.scatterplotPopover.referenceElement = this.yAxisElement.value, this.scatterplotPopover.placement = "trailing", this.scatterplotPopover.selectedContent = this.model.getYAxisField(), this.scatterplotPopover.headingTitle = this._messages.selectAField;
         break;
       case l.sizeVariable:
-        this.scatterPlotPopover.referenceElement = this.sizeVariableElement.value, this.scatterPlotPopover.placement = "trailing", this.scatterPlotPopover.selectedContent = this.model.getSizePolicy()?.field ?? "", this.scatterPlotPopover.headingTitle = this._messages.selectAField;
+        this.scatterplotPopover.referenceElement = this.sizeVariableElement.value, this.scatterplotPopover.placement = "trailing", this.scatterplotPopover.selectedContent = this.model.getSizePolicy()?.field ?? "", this.scatterplotPopover.headingTitle = this._messages.selectAField;
         break;
       case l.symbol:
       case l.trendLine: {
         const t = this.selectedElement;
-        this.scatterPlotPopover.selectedContent = this.selectedElement, this.scatterPlotPopover.placement = "leading", Array.isArray(this.selectedElement) ? this.scatterPlotPopover.referenceElement = this.selectColorElement.value : t?.type === P.SLS && (this.scatterPlotPopover.referenceElement = this.selectTrendLineElement.value);
+        this.scatterplotPopover.selectedContent = this.selectedElement, this.scatterplotPopover.placement = "leading", Array.isArray(this.selectedElement) ? this.scatterplotPopover.referenceElement = this.selectColorElement.value : t?.type === z.SLS && (this.scatterplotPopover.referenceElement = this.selectTrendLineElement.value);
         break;
       }
       default:
-        this.contentKind = l.none, this.removeScatterPlotPopover();
+        this.contentKind = l.none, this.removeScatterplotPopover();
         break;
     }
-    this.contentKind !== l.none && (this.scatterPlotPopover.open = !0, this.addScatterPlotPopover());
+    this.contentKind !== l.none && (this.scatterplotPopover.open = !0, this.addScatterplotPopover());
   }
-  removeScatterPlotPopover() {
-    this.scatterPlotPopover !== null && (this.scatterPlotPopover = C(this.scatterPlotPopover)), this.selectedElement = {};
+  removeScatterplotPopover() {
+    this.scatterplotPopover !== null && (this.scatterplotPopover = x(this.scatterplotPopover)), this.selectedElement = {};
   }
-  addScatterPlotPopover() {
-    !document.body.contains(this.scatterPlotPopover) && this.scatterPlotPopover !== void 0 && this.scatterPlotPopover !== null && document.body.appendChild(this.scatterPlotPopover);
+  addScatterplotPopover() {
+    !document.body.contains(this.scatterplotPopover) && this.scatterplotPopover !== void 0 && this.scatterplotPopover !== null && document.body.appendChild(this.scatterplotPopover);
   }
   getCurrentSymbolSizeType() {
     const e = this.model.getSizePolicy();
@@ -245,8 +245,8 @@ class K extends D {
     return r`<arcgis-charts-config-field-select .label=${y(this.layerFieldsInfo, this.model.getYAxisField() ?? "")} @click=${this.onYVariableSelectChange} ${a(this.yAxisElement)}></arcgis-charts-config-field-select>`;
   }
   renderStatistics() {
-    const [e, t, o, n] = [...this.model.getLinearTrendSymbol()?.color ?? $(0)];
-    return r`<div class=${i(s.sectionContainer)}><calcite-label class=${i(s.label)} layout=inline-space-between>${this._messages.showLinearTrend}<calcite-switch class=${i(s.switchElement)} .checked=${this.model.getShowLinearTrend()} @calciteSwitchChange=${this.setShowTrendLine}></calcite-switch></calcite-label><calcite-list label selection-mode=single selection-appearance=border><calcite-list-item .label=${this._messages.trendLineStyle} value=selectTrendLine .hidden=${!this.model.getShowLinearTrend()} .selected=${this.selectedElement?.type === P.SLS} @click=${this.changeElementStyle} ${a(this.selectTrendLineElement)}><calcite-icon slot=content-end icon=line-solid style=${x({ color: `rgba(${e},${t},${o},${n / 255})` })} class=${i(s.iconSelect)} @click=${this.changeElementStyle}></calcite-icon></calcite-list-item></calcite-list><div class=${i(s.r2)} .hidden=${!this.model.getShowLinearTrend()}>${`${this._messages.r2}: ${Number.isNaN(this.r2) ? this.defaultR2Label : M(this.r2, V)}`}</div></div>`;
+    const [e, t, o, n] = [...this.model.getLinearTrendSymbol()?.color ?? C(0)];
+    return r`<div class=${i(s.sectionContainer)}><calcite-label class=${i(s.label)} layout=inline-space-between>${this._messages.showLinearTrend}<calcite-switch class=${i(s.switchElement)} .checked=${this.model.getShowLinearTrend()} @calciteSwitchChange=${this.setShowTrendLine}></calcite-switch></calcite-label><calcite-list label selection-mode=single selection-appearance=border><calcite-list-item .label=${this._messages.trendLineStyle} value=selectTrendLine .hidden=${!this.model.getShowLinearTrend()} .selected=${this.selectedElement?.type === z.SLS} @click=${this.changeElementStyle} ${a(this.selectTrendLineElement)}><calcite-icon slot=content-end icon=line-solid style=${P({ color: `rgba(${e},${t},${o},${n / 255})` })} class=${i(s.iconSelect)} @click=${this.changeElementStyle}></calcite-icon></calcite-list-item></calcite-list><div class=${i(s.r2)} .hidden=${!this.model.getShowLinearTrend()}>${`${this._messages.r2}: ${Number.isNaN(this.r2) ? this.defaultR2Label : M(this.r2, V)}`}</div></div>`;
   }
   renderFixedSymbol() {
     return r`<calcite-label class=${i(s.label)}>${this._messages.size}<calcite-input type=number name=fixed-symbol-size class=${i(s.numberInput)} min=1 max=100 step=1 .value=${u(this.model.getFixedMarkerSymbol()?.size)} @calciteInputInput=${this.symbolSizeChange}></calcite-input></calcite-label>`;
@@ -261,14 +261,14 @@ class K extends D {
     return r`<calcite-input type=number name=proportional-symbol-max-size class=${i(s.numberInput)} .min=${this.model.getSizePolicy()?.minSize ?? 1} max=100 step=1 .value=${u(this.model.getSizePolicy()?.maxSize)} @calciteInputInput=${this.symbolSizeChange} ${a(this.maxSizeInputElement)}></calcite-input>`;
   }
   renderProportionalSymbol() {
-    return r`<div class=${i(s.sectionContainer)}><calcite-label class=${i(s.label)}>${this._messages.numberRequired}${this.renderSizeVariable()}</calcite-label><div class=${i(s.multiInputSection)}><calcite-label class=${i(s.label)}>${this._messages.minSize}${this.renderMinSizeInput()}</calcite-label><calcite-label class=${i(s.label)}>${this._messages.maxSize}${this.renderMaxSizeInput()}</calcite-label></div><calcite-label><calcite-slider min=1 max=100 .minValue=${z(u(this.model.getSizePolicy()?.minSize))} .maxValue=${z(u(this.model.getSizePolicy()?.maxSize))} step=1 @calciteSliderInput=${this.symbolSizeRangeSliderInput}></calcite-slider></calcite-label></div>`;
+    return r`<div class=${i(s.sectionContainer)}><calcite-label class=${i(s.label)}>${this._messages.numberRequired}${this.renderSizeVariable()}</calcite-label><div class=${i(s.multiInputSection)}><calcite-label class=${i(s.label)}>${this._messages.minSize}${this.renderMinSizeInput()}</calcite-label><calcite-label class=${i(s.label)}>${this._messages.maxSize}${this.renderMaxSizeInput()}</calcite-label></div><calcite-label><calcite-slider min=1 max=100 .minValue=${$(u(this.model.getSizePolicy()?.minSize))} .maxValue=${$(u(this.model.getSizePolicy()?.maxSize))} step=1 @calciteSliderInput=${this.symbolSizeRangeSliderInput}></calcite-slider></calcite-label></div>`;
   }
   renderSymbolSizeType() {
     return r`<calcite-label class=${i(s.label)}>${this._messages.size}<calcite-segmented-control name=symbolSizeType layout=horizontal scale=s @calciteSegmentedControlChange=${this.changeSymbolSizeTypeToggle} ${a(this.symbolSizeModeElement)}><calcite-segmented-control-item .value=${h.Fixed} .checked=${h.Fixed === this.selectedSizeType} ${a(this.segmentedControlRef)}>${this._messages.fixed}</calcite-segmented-control-item><calcite-segmented-control-item .value=${h.Proportional} .checked=${h.Proportional === this.selectedSizeType} ${a(this.segmentedControlRef)}>${this._messages.proportional}</calcite-segmented-control-item></calcite-segmented-control></calcite-label>`;
   }
   renderSymbol() {
-    const [e, t, o, n] = [...this.model.getFixedMarkerSymbol()?.color ?? $(0)];
-    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=${x({ color: `rgba(${e},${t},${o},${n / 255})` })} class=${i(s.iconSelect)} @click=${this.changeElementStyle}></calcite-icon></calcite-list-item></calcite-list></div>`;
+    const [e, t, o, n] = [...this.model.getFixedMarkerSymbol()?.color ?? C(0)];
+    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>`;
@@ -276,5 +276,5 @@ class K extends D {
 }
 E("arcgis-charts-config-scatter-plot-data", K);
 export {
-  K as ArcgisChartsConfigScatterPlotData
+  K as ArcgisChartsConfigScatterplotData
 };

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

@@ -1,12 +1,12 @@
 /// <reference types="../../index.d.ts" />
 import { Color, IField, ISimpleLineSymbol } from '@arcgis/charts-spec';
-import { ScatterPlotDataPopoverKinds } from '../../interfaces';
+import { ScatterplotDataPopoverKinds } from '../../interfaces';
 import { PopoverOpenChangePayload } from '../../utils/components/event-payloads';
 import { PropertyValues } from 'lit';
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
 
 /** @private */
-export declare class ArcgisChartsConfigScatterPlotPopover extends LitElement {
+export declare class ArcgisChartsConfigScatterplotPopover extends LitElement {
     /** Overwrite localized strings for this component */
     messageOverrides?: typeof this._messages._overrides;
     /**
@@ -20,7 +20,7 @@ export declare class ArcgisChartsConfigScatterPlotPopover extends LitElement {
      *
      * @category Public
      */
-    contentKind?: ScatterPlotDataPopoverKinds;
+    contentKind?: ScatterplotDataPopoverKinds;
     /**
      * Selected text properties to show for font style.
      *
@@ -75,24 +75,24 @@ export declare class ArcgisChartsConfigScatterPlotPopover extends LitElement {
      *
      * @category Public
      */
-    readonly arcgisChartsConfigScatterPlotFillColorChange: TargetedEvent<this, void>;
+    readonly arcgisChartsConfigScatterplotFillColorChange: TargetedEvent<this, void>;
     /**
      * Event emitted when there is a change in symbol property.
      *
      * @category Public
      */
-    readonly arcgisChartsConfigScatterPlotLineStyleChange: TargetedEvent<this, void>;
+    readonly arcgisChartsConfigScatterplotLineStyleChange: TargetedEvent<this, void>;
     /**
      * Event emitted when there is a change in size variable field type.
      *
      * @event
      */
-    readonly arcgisChartsConfigScatterPlotSizeVariableFieldChange: TargetedEvent<this, void>;
+    readonly arcgisChartsConfigScatterplotSizeVariableFieldChange: TargetedEvent<this, void>;
     /**
      * Event emitted when there is a change in X-axis or Y-axis field type.
      *
      * @event
      */
-    readonly arcgisChartsConfigScatterPlotXYFieldChange: TargetedEvent<this, void>;
+    readonly arcgisChartsConfigScatterplotXYFieldChange: TargetedEvent<this, void>;
     private _messages;
 }

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

@@ -3,7 +3,7 @@ import { keyed as n } from "lit-html/directives/keyed.js";
 import { RESTSymbolType as c } from "@arcgis/charts-spec";
 import "lodash-es";
 import "d3-array";
-import { b1 as v, ca as u } from "../../chunks/interfaces.js";
+import { b1 as v, c9 as u } from "../../chunks/interfaces.js";
 import "@arcgis/core/geometry/support/jsonUtils.js";
 import "@arcgis/core/rest/support/AttributeBinsQuery.js";
 import "@arcgis/core/rest/support/Query.js";
@@ -13,26 +13,26 @@ 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 P, i as m } from "../../chunks/chart-ui-utils2.js";
-import { u as b } from "../../chunks/useT9n.js";
+import { U as h, a as b, i as m } 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 $, createEvent as a, safeClassMap as l } from "@arcgis/lumina";
-import { css as S } from "@lit/reactive-element/css-tag.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";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.33/esri/copyright.txt for details.
-v4.33.0-next.136 */
+v4.33.0-next.138 */
 const r = {
   jsAppFlyout: "js-app-flyout",
-  scatterPlotPopover: "scatter-plot-popover",
+  scatterplotPopover: "scatter-plot-popover",
   fillColor: "fill-color",
   header: "header",
   pickListItemLabel: "pick-list-item-label",
   pickListPanel: "pick-list-panel"
-}, 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 $ {
+}, 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 {
   constructor() {
-    super(...arguments), this.picklist = d(), this._messages = b(), 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 = 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();
   }
   static {
     this.properties = { messageOverrides: 0, headingTitle: 3, contentKind: 3, selectedContent: 3, referenceElement: 2, placement: 3, open: 7, layerFieldsInfo: 0 };
@@ -66,18 +66,18 @@ class F extends $ {
     this.open = !1, this.arcgisChartsConfigPopoverClose.emit();
   }
   updateSymbolProperties(e) {
-    this.selectedContent = e.target.lineStyle, this.arcgisChartsConfigScatterPlotLineStyleChange.emit(e.detail);
+    this.selectedContent = e.target.lineStyle, this.arcgisChartsConfigScatterplotLineStyleChange.emit(e.detail);
   }
   updateColorProperties(e) {
-    this.selectedContent = e.detail, this.arcgisChartsConfigScatterPlotFillColorChange.emit(e.detail);
+    this.selectedContent = e.detail, this.arcgisChartsConfigScatterplotFillColorChange.emit(e.detail);
   }
   onFieldSelectionChange(e) {
     const t = e.target.selectedItems;
-    this.contentKind === p.sizeVariable ? this.arcgisChartsConfigScatterPlotSizeVariableFieldChange.emit(t.map((i) => i.value)[0]) : this.arcgisChartsConfigScatterPlotXYFieldChange.emit(t.map((i) => i.value)[0]), this.open = !1;
+    this.contentKind === p.sizeVariable ? this.arcgisChartsConfigScatterplotSizeVariableFieldChange.emit(t.map((i) => i.value)[0]) : this.arcgisChartsConfigScatterplotXYFieldChange.emit(t.map((i) => i.value)[0]), this.open = !1;
   }
   render() {
     const e = this.selectedContent, t = this.selectedContent;
-    return o`<div class=${l({ [r.jsAppFlyout]: !0 })}><calcite-popover class=${l(r.scatterPlotPopover)} .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .offsetDistance=${P(this.placement)} @calcitePopoverClose=${this.closePopover} .open=${this.open} label ${g(this.popoverElement)}>${Array.isArray(e) ? o`<arcgis-charts-config-color-style .header=${this._messages.fillColor} class=${l(r.fillColor)} enable-close .open=${this.open} .selectedColor=${e} @arcgisChartsConfigColorStyleClose=${this.seriesPopoverClose} @arcgisChartsConfigColorStyleChange=${this.updateColorProperties}></arcgis-charts-config-color-style>` : null}${t?.type === c.SLS ? o`<arcgis-charts-config-line-style .header=${this._messages.lineStyle} .open=${this.open} enable-close .lineStyle=${t} @arcgisChartsConfigLineStyleClose=${this.seriesPopoverClose} @arcgisChartsConfigLineStyleChange=${this.updateSymbolProperties}></arcgis-charts-config-line-style>` : null}${!Array.isArray(e) && t?.type !== c.SLS ? this.renderVariablePickList() : null}</calcite-popover></div>`;
+    return o`<div class=${l({ [r.jsAppFlyout]: !0 })}><calcite-popover class=${l(r.scatterplotPopover)} .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .offsetDistance=${b(this.placement)} @calcitePopoverClose=${this.closePopover} .open=${this.open} label ${g(this.popoverElement)}>${Array.isArray(e) ? o`<arcgis-charts-config-color-style .header=${this._messages.fillColor} class=${l(r.fillColor)} enable-close .open=${this.open} .selectedColor=${e} @arcgisChartsConfigColorStyleClose=${this.seriesPopoverClose} @arcgisChartsConfigColorStyleChange=${this.updateColorProperties}></arcgis-charts-config-color-style>` : null}${t?.type === c.SLS ? o`<arcgis-charts-config-line-style .header=${this._messages.lineStyle} .open=${this.open} enable-close .lineStyle=${t} @arcgisChartsConfigLineStyleClose=${this.seriesPopoverClose} @arcgisChartsConfigLineStyleChange=${this.updateSymbolProperties}></arcgis-charts-config-line-style>` : null}${!Array.isArray(e) && t?.type !== c.SLS ? this.renderVariablePickList() : null}</calcite-popover></div>`;
   }
   renderVariablePickList() {
     const e = this.layerFieldsInfo?.length ?? 0, t = [];
@@ -94,5 +94,5 @@ class F extends $ {
 }
 C("arcgis-charts-config-scatter-plot-popover", F);
 export {
-  F as ArcgisChartsConfigScatterPlotPopover
+  F as ArcgisChartsConfigScatterplotPopover
 };

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

@@ -2,7 +2,7 @@ export declare const HTMLClasses: {
     readonly symbolPropertyPopover: "symbol-property-popover";
     readonly text: "text";
     readonly jsAppFlyout: "js-app-flyout";
-    readonly scatterPlotPopover: "scatter-plot-popover";
+    readonly scatterplotPopover: "scatter-plot-popover";
     readonly fillColor: "fill-color";
     readonly header: "header";
     readonly pickListItemLabel: "pick-list-item-label";

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

@@ -17,10 +17,10 @@ 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 { w as e } from "../../chunks/scatter-plot-model.js";
+import { M as e } from "../../chunks/common.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.33/esri/copyright.txt for details.
-v4.33.0-next.136 */
+v4.33.0-next.138 */
 const t = {
   selectChartComponent: "select-chart-component",
   rtl: "arcgis-charts-rtl",
@@ -46,7 +46,7 @@ class f extends m {
     }, r.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>`;
+    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();

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

@@ -19,7 +19,7 @@ import { repeat as u } from "lit-html/directives/repeat.js";
 import { css as w } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.33/esri/copyright.txt for details.
-v4.33.0-next.136 */
+v4.33.0-next.138 */
 const c = {
   addChartContainer: "add-chart-container",
   viewChartComponent: "view-chart-component",

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

@@ -82,10 +82,13 @@ export declare const ControlLabels: {
     readonly PiePercentagePrefix: "Add prefix to percentages";
     readonly PiePercentageSuffix: "Add suffix to percentages";
     readonly PieDataLabelsCharacterLimit: "Character limit on data labels";
+    readonly PieDisplayCategoryOnLegend: "Display category on legend";
     readonly PieDisplayValueOnLegend: "Display value on legend";
     readonly PieDisplayPercentageOnLegend: "Display percentage on legend";
+    readonly PieDisplayCategoryOnDataLabel: "Display category on data label";
     readonly PieDisplayValueOnDataLabel: "Display value on data label";
     readonly PieDisplayPercentageOnDataLabel: "Display percentage on data label";
+    readonly PieDisplayCategoryOnTooltip: "Display category on tooltip";
     readonly PieDisplayValueOnTooltip: "Display value on tooltip";
     readonly PieDisplayPercentageOnTooltip: "Display percentage on tooltip";
     readonly PieDisplayNumericValues: "Display numeric values";
@@ -168,8 +171,8 @@ export declare const ControlLabels: {
     readonly TwoLineSeriesLimitTotal: "Maximum markers in total if two series";
     readonly ThreeLineSeriesLimitPerSeries: "Maximum markers per series if three series";
     readonly ThreeLineSeriesLimitTotal: "Maximum markers in total if three series";
-    readonly ScatterPlotLimitBeforeAggregation: "Aggregation threshold";
-    readonly ScatterPlotLimitAfterAggregation: "Number maximum of points after aggregation";
+    readonly ScatterplotLimitBeforeAggregation: "Aggregation threshold";
+    readonly ScatterplotLimitAfterAggregation: "Number maximum of points after aggregation";
     readonly SizePolicyField: "Size policy field";
     readonly SizePolicyMin: "Size policy min";
     readonly SizePolicyMax: "Size policy max";
@@ -220,7 +223,7 @@ export declare const ConfigFileKey: {
     readonly ChicagoCrimeGauge: "ChicagoCrimeGauge";
     readonly ChicagoCrimeHistogram: "ChicagoCrimeHistogram";
     readonly ChicagoCrimePieChart: "ChicagoCrimePieChart";
-    readonly ChicagoCrimeScatterPlot: "ChicagoCrimeScatterPlot";
+    readonly ChicagoCrimeScatterplot: "ChicagoCrimeScatterplot";
     readonly AirBnBBarChart: "AirBnBBarChart";
     readonly AirBnBLineChart: "AirBnBLineChart";
     readonly AirBnBRadarChart: "AirBnBRadarChart";
@@ -229,13 +232,13 @@ export declare const ConfigFileKey: {
     readonly AirBnBGauge: "AirBnBGauge";
     readonly AirBnBHistogram: "AirBnBHistogram";
     readonly AirBnBPieChart: "AirBnBPieChart";
-    readonly AirBnBScatterPlot: "AirBnBScatterPlot";
+    readonly AirBnBScatterplot: "AirBnBScatterplot";
     readonly IncomeDiversityBoxPlot: "IncomeDiversityBoxPlot";
     readonly FeatureCollectionBarChart: "featureCollectionBarChart";
     readonly FeatureCollectionLineChart: "featureCollectionLineChart";
     readonly FeatureCollectionRadarChart: "featureCollectionRadarChart";
     readonly FeatureCollectionBarLineChart: "featureCollectionBarLineChart";
-    readonly FeatureCollectionScatterPlot: "featureCollectionScatterPlot";
+    readonly FeatureCollectionScatterplot: "featureCollectionScatterplot";
     readonly FeatureCollectionPieChart: "featureCollectionPieChart";
     readonly FeatureCollectionGauge: "featureCollectionGauge";
     readonly FeatureCollectionBoxPlot: "featureCollectionBoxPlot";
@@ -243,7 +246,7 @@ export declare const ConfigFileKey: {
     readonly RendererClassBreakLineChart: "rendererClassBreakLineChart";
     readonly RendererClassBreakPieChart: "rendererClassBreakPieChart";
     readonly RendererClassBreakHistogram: "rendererClassBreakHistogram";
-    readonly RendererClassBreakScatterPlot: "rendererClassBreakScatterPlot";
+    readonly RendererClassBreakScatterplot: "rendererClassBreakScatterplot";
     readonly RendererClassBreakBoxPlot: "rendererClassBreakBoxPlot";
     readonly SpecialColorMatch: "specialColorMatch";
     readonly SpecialSubtypeDomain: "specialSubtypeDomain";

package/dist/demo-chart-rendering/config-update/legend.d.ts

@@ -1,3 +1,4 @@
 import { WebChart, WebChartLegendPositions } from '@arcgis/charts-spec';
+export declare function updateDisplayCategoryOnLegend(configToUpdate: WebChart, value: boolean): WebChart;
 export declare function updateDisplayValueOrPercentageOnLegend(configToUpdate: WebChart, value: boolean, valueOrPercentage: "displayNumericValue" | "displayPercentage"): WebChart;
 export declare function updateLegend(configToUpdate: WebChart, controlName: string, newValue: WebChartLegendPositions | boolean | number): WebChart;

package/dist/demo-chart-rendering/config-update/series.d.ts

@@ -6,6 +6,7 @@ export declare function updateLineShowMarker(configToUpdate: WebChart, newValue:
 export declare function updateLineShowArea(configToUpdate: WebChart, newValue: boolean): WebChart;
 export declare function updateLineSmoothed(configToUpdate: WebChart, newValue: boolean): WebChart;
 export declare function updateValuePrefixOrSuffix(configToUpdate: WebChart, value: string, prefixOrSuffix: "percentagePrefix" | "percentageSuffix" | "valuePrefix" | "valueSuffix"): WebChart | WebGaugeChart;
+export declare function updateDisplayCategoryOnSeries(configToUpdate: WebChart, value: boolean, category: "displayCategoryOnDataLabel" | "displayCategoryOnTooltip"): WebChart;
 export declare function updateDisplayValueOrPercentageOnSeries(configToUpdate: WebChart, value: boolean, valueOrPercentage: "displayNumericValueOnDataLabel" | "displayNumericValueOnTooltip" | "displayPercentageOnDataLabel" | "displayPercentageOnTooltip"): WebChart;
 export declare function updateDataLabelsVisibility(configToUpdate: WebChart, visible: boolean): WebChart;
 export declare function updateSeries(configToUpdate: WebChart | WebGaugeChart, controlName: string, newValue: boolean | number | string): WebChart | WebGaugeChart;

package/dist/demo-chart-rendering/controls/scatter-plot.d.ts

@@ -1,3 +1,3 @@
 import { WebChart } from '@arcgis/charts-spec';
 import { ControlDefinition } from './interfaces';
-export declare function getScatterPlotControls(chartConfig: WebChart): ControlDefinition[];
+export declare function getScatterplotControls(chartConfig: WebChart): ControlDefinition[];