@arcgis/charts-components 4.34.0-next.129 → 4.34.0-next.130

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

@@ -1,9 +1,9 @@
 import { c as P } from "../../chunks/runtime.js";
 import "@arcgis/toolkit/intl";
-import { cloneDeep as I, isEmpty as T, toNumber as v } from "lodash-es";
-import { W as y, R as z } from "../../chunks/series-types.js";
+import { cloneDeep as I, isEmpty as F, toNumber as v } from "lodash-es";
+import { W as y, R as $ } from "../../chunks/series-types.js";
 import "d3-array";
-import { aX as F, cd as b, a6 as $, X as w } from "../../chunks/interfaces.js";
+import { aX as T, cd as b, a6 as z, X 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";
@@ -13,16 +13,16 @@ import "@arcgis/core/core/promiseUtils.js";
 import "@arcgis/core/request.js";
 import "@arcgis/toolkit/dom";
 import { r as C } from "../../chunks/popover-ui-utils.js";
-import { S as n, b as d } from "../../chunks/interfaces2.js";
+import { S as a, b as d } from "../../chunks/interfaces2.js";
 import { d as L, s as m } from "../../chunks/store.js";
-import { a as f, m as p, f as k, s as S, D as A, b as u } from "../../chunks/chart-ui-utils2.js";
+import { a as f, m as g, f as A, s as S, D as k, b as u } from "../../chunks/chart-ui-utils2.js";
 import { u as M } from "../../chunks/useT9n.js";
 import { css as V, html as r } from "lit";
 import { createRef as h, ref as c } from "lit/directives/ref.js";
 import { LitElement as _, createEvent as x, renderElement as D, safeClassMap as i, safeStyleMap as E } 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.129 */
+v4.34.0-next.130 */
 const l = {
   label: "label",
   r2: "r2",
@@ -35,22 +35,25 @@ const l = {
 }, N = V`.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}.am5-layer-30{z-index:100!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 R extends _ {
   constructor() {
-    super(...arguments), this._messages = M(), this.scatterplotPopover = null, this.selectColorElement = h(), this.selectTrendLineElement = h(), this.xAxisElement = h(), this.yAxisElement = h(), this.sizeVariableElement = h(), this.colorModeElement = h(), this.symbolSizeModeElement = h(), this.minSizeInputElement = h(), this.maxSizeInputElement = h(), this.items = [], this.setTrendLineSymbol = (e) => {
+    super(...arguments), this._messages = M(), this.scatterplotPopover = null, this.selectColorElement = h(), this.selectTrendLineElement = h(), this.xAxisElement = h(), this.yAxisElement = h(), this.tooltipFieldElement = h(), this.sizeVariableElement = h(), this.colorModeElement = h(), this.symbolSizeModeElement = h(), this.minSizeInputElement = h(), this.maxSizeInputElement = h(), this.items = [], this.setTrendLineSymbol = (e) => {
       const t = e.detail;
       this.model.setLinearTrendSymbol(I(t));
     }, this.setFixedSymbolRGBAColor = (e) => {
-      const t = e.detail, [s, a, o] = t, g = w * 255;
+      const t = e.detail, [s, o, n] = t, p = w * 255;
       this.model.setFixedMarkerSymbol({
         ...this.model.getFixedMarkerSymbol(),
-        color: [s, a, o, g]
+        color: [s, o, n, p]
       });
     }, this.setXYField = async (e) => {
       try {
         const t = e.detail;
-        L(m), this.contentKind === n.xAxisField ? await this.model.setXAxisField(t) : await this.model.setYAxisField(t), this.removeScatterplotPopover();
+        L(m), this.contentKind === a.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;
       }
+    }, this.setAdditionalTooltipField = async (e) => {
+      const t = e.detail;
+      this.model.setAdditionalTooltipField(t), this.removeScatterplotPopover();
     }, this.setSizeVariableField = (e) => {
       try {
         const t = e.detail;
@@ -66,20 +69,20 @@ class R extends _ {
         throw this.arcgisChartsConfigDataChangeError.emit({ error: t, model: this.model }), t;
       }
     }, this.closeScatterplotPopover = (e) => {
-      this.scatterplotPopover === e?.target && (this.contentKind = n.none, this.removeScatterplotPopover());
+      this.scatterplotPopover === e?.target && (this.contentKind = a.none, this.removeScatterplotPopover());
     }, 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) ? p({
+      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({
         inputElement: this.minSizeInputElement.value,
         status: u.IDLE
-      }) : p({
+      }) : g({
         inputElement: this.minSizeInputElement.value,
         status: u.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({
+      })), 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({
         inputElement: this.maxSizeInputElement.value,
         status: u.IDLE
-      }) : p({
+      }) : g({
         inputElement: this.maxSizeInputElement.value,
         status: u.INVALID
       }));
@@ -95,7 +98,7 @@ class R extends _ {
     this.styles = N;
   }
   async load() {
-    this.modelChange(this.model), this.onModelConfigChange(), this.defaultR2Label = await F(), this.selectedSizeType = this.getCurrentSymbolSizeType(), this.selectedSizeType === d.Proportional && (m.scatterplotData[m.selectedChartId] = {
+    this.modelChange(this.model), this.onModelConfigChange(), this.defaultR2Label = await T(), this.selectedSizeType = this.getCurrentSymbolSizeType(), this.selectedSizeType === d.Proportional && (m.scatterplotData[m.selectedChartId] = {
       ...m.scatterplotData[m.selectedChartId],
       sizePolicyField: this.model.getSizePolicy()?.field
     });
@@ -111,57 +114,57 @@ class R extends _ {
   disconnectedCallback() {
     super.disconnectedCallback(), this.removeScatterplotPopover(), this.model.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
+  openPopover() {
+    (typeof this.selectedElement == "string" || !F(this.selectedElement)) && this.setupPopover();
+  }
   modelChange(e, t) {
     t?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), e?.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
-  openPopover() {
-    (typeof this.selectedElement == "string" || !T(this.selectedElement)) && this.setupPopover();
-  }
   setShowTrendLine(e) {
     const t = e.target.checked;
-    this.model.setShowLinearTrend(t), !t && this.contentKind === n.trendLine && this.closeScatterplotPopover(e);
+    this.model.setShowLinearTrend(t), !t && this.contentKind === a.trendLine && this.closeScatterplotPopover(e);
   }
   symbolSizeChange(e) {
     const t = e.target, { value: s } = t;
     if (s !== void 0 && f(s, t.min, t.max)) {
-      const a = Number.parseInt(s), o = this.model.getSizePolicy(), g = this.model.getFixedMarkerSymbol();
+      const o = Number.parseInt(s), n = this.model.getSizePolicy(), p = this.model.getFixedMarkerSymbol();
       switch (t.name) {
         case "fixed-symbol-size":
-          g !== void 0 && this.model.setFixedMarkerSymbol({
-            ...g,
-            size: a
+          p !== void 0 && this.model.setFixedMarkerSymbol({
+            ...p,
+            size: o
           });
           break;
         case "proportional-symbol-min-size":
-          o !== void 0 && this.model.setSizePolicy({
-            ...o,
-            minSize: a
+          n !== void 0 && this.model.setSizePolicy({
+            ...n,
+            minSize: o
           });
           break;
         case "proportional-symbol-max-size":
-          o !== void 0 && this.model.setSizePolicy({
-            ...o,
-            maxSize: a
+          n !== void 0 && this.model.setSizePolicy({
+            ...n,
+            maxSize: o
           });
           break;
       }
-      p({
+      g({
         inputElement: t,
         status: u.IDLE
       });
     } else
-      p({
+      g({
         inputElement: t,
         status: u.INVALID
       });
   }
   symbolSizeRangeSliderInput(e) {
-    const t = e.target, { minValue: s, maxValue: a } = t, o = this.model.getSizePolicy();
-    o !== void 0 && (this.model.setSizePolicy({
-      ...o,
+    const t = e.target, { minValue: s, maxValue: o } = t, n = this.model.getSizePolicy();
+    n !== void 0 && (this.model.setSizePolicy({
+      ...n,
       minSize: s,
-      maxSize: a
-    }), this.minSizeInputElement.value !== void 0 && (this.minSizeInputElement.value.value = `${s}`), this.maxSizeInputElement.value !== void 0 && (this.maxSizeInputElement.value.value = `${a}`));
+      maxSize: o
+    }), this.minSizeInputElement.value !== void 0 && (this.minSizeInputElement.value.value = `${s}`), this.maxSizeInputElement.value !== void 0 && (this.maxSizeInputElement.value.value = `${o}`));
   }
   changeColorTypeToggle() {
     const e = this.colorModeElement.value?.selectedItem?.value;
@@ -184,42 +187,48 @@ class R extends _ {
   changeElementStyle(e) {
     e.stopImmediatePropagation();
     let t = e.target;
-    t.localName === "calcite-icon" && (t = t.parentElement), t.value === "selectColor" ? (this.contentKind = n.symbol, this.selectedElement = this.model.getFixedMarkerSymbol()?.color) : t.value === "selectTrendLine" && (this.contentKind = n.trendLine, this.selectedElement = this.model.getLinearTrendSymbol());
+    t.localName === "calcite-icon" && (t = t.parentElement), t.value === "selectColor" ? (this.contentKind = a.symbol, this.selectedElement = this.model.getFixedMarkerSymbol()?.color) : t.value === "selectTrendLine" && (this.contentKind = a.trendLine, this.selectedElement = this.model.getLinearTrendSymbol());
   }
   onXVariableSelectChange(e) {
-    e.stopImmediatePropagation(), this.contentKind = n.xAxisField, this.selectedElement = this.model.getXAxisField();
+    e.stopImmediatePropagation(), this.contentKind = a.xAxisField, this.selectedElement = this.model.getXAxisField();
   }
   onYVariableSelectChange(e) {
-    e.stopImmediatePropagation(), this.contentKind = n.yAxisField, this.selectedElement = this.model.getYAxisField();
+    e.stopImmediatePropagation(), this.contentKind = a.yAxisField, this.selectedElement = this.model.getYAxisField();
+  }
+  onAdditionalTooltipFieldSelectChange(e) {
+    e.stopImmediatePropagation(), this.contentKind = a.additionalTooltipFields, this.selectedElement = this.model.getAdditionalTooltipField()?.[0] ?? "";
   }
   onSizeVariableSelectChange(e) {
-    e.stopImmediatePropagation(), this.contentKind = n.sizeVariable, this.selectedElement = this.model.getSizePolicy()?.field ?? "";
+    e.stopImmediatePropagation(), this.contentKind = a.sizeVariable, this.selectedElement = this.model.getSizePolicy()?.field ?? "";
   }
   setupPopover() {
     this.scatterplotPopover = C(this.scatterplotPopover);
     const e = [...this.layerFieldsInfo];
-    let t, s, a, o = "trailing";
+    let t, s, o, n = "trailing";
     switch (this.contentKind) {
-      case n.xAxisField:
-        t = this.xAxisElement.value, a = this.model.getXAxisField(), s = this._messages.selectAField;
+      case a.xAxisField:
+        t = this.xAxisElement.value, o = this.model.getXAxisField(), s = this._messages.selectAField;
         break;
-      case n.yAxisField:
-        t = this.yAxisElement.value, a = this.model.getYAxisField(), s = this._messages.selectAField;
+      case a.yAxisField:
+        t = this.yAxisElement.value, o = this.model.getYAxisField(), s = this._messages.selectAField;
         break;
-      case n.sizeVariable:
-        t = this.sizeVariableElement.value, a = this.model.getSizePolicy()?.field ?? "", s = this._messages.selectAField;
+      case a.sizeVariable:
+        t = this.sizeVariableElement.value, o = this.model.getSizePolicy()?.field ?? "", s = this._messages.selectAField;
         break;
-      case n.symbol:
-      case n.trendLine: {
-        const g = this.selectedElement;
-        a = this.selectedElement, o = "leading", Array.isArray(this.selectedElement) ? t = this.selectColorElement.value : g?.type === z.SLS && (t = this.selectTrendLineElement.value);
+      case a.additionalTooltipFields:
+        t = this.tooltipFieldElement.value, o = this.model.getAdditionalTooltipField()?.[0] ?? "", s = this._messages.selectAField;
+        break;
+      case a.symbol:
+      case a.trendLine: {
+        const p = this.selectedElement;
+        o = this.selectedElement, n = "leading", Array.isArray(this.selectedElement) ? t = this.selectColorElement.value : p?.type === $.SLS && (t = this.selectTrendLineElement.value);
         break;
       }
       default:
-        this.contentKind = n.none, this.removeScatterplotPopover();
+        this.contentKind = a.none, this.removeScatterplotPopover();
         break;
     }
-    this.scatterplotPopover = D(r`<arcgis-charts-config-scatter-plot-popover .headingTitle=${s} .referenceElement=${t} open .contentKind=${this.contentKind} .layerFieldsInfo=${e} .selectedContent=${a} .placement=${o} @arcgisChartsConfigPopoverClose=${this.closeScatterplotPopover} @arcgisChartsConfigScatterplotFillColorChange=${this.setFixedSymbolRGBAColor} @arcgisChartsConfigScatterplotLineStyleChange=${this.setTrendLineSymbol} @arcgisChartsConfigScatterplotXYFieldChange=${this.setXYField} @arcgisChartsConfigScatterplotSizeVariableFieldChange=${this.setSizeVariableField}></arcgis-charts-config-scatter-plot-popover>`), !document.body.contains(this.scatterplotPopover) && this.scatterplotPopover !== null && document.body.appendChild(this.scatterplotPopover);
+    this.scatterplotPopover = D(r`<arcgis-charts-config-scatter-plot-popover .headingTitle=${s} .referenceElement=${t} open .contentKind=${this.contentKind} .layerFieldsInfo=${e} .selectedContent=${o} .placement=${n} @arcgisChartsConfigPopoverClose=${this.closeScatterplotPopover} @arcgisChartsConfigScatterplotFillColorChange=${this.setFixedSymbolRGBAColor} @arcgisChartsConfigScatterplotLineStyleChange=${this.setTrendLineSymbol} @arcgisChartsConfigScatterplotXYFieldChange=${this.setXYField} @arcgisChartsConfigScatterplotSizeVariableFieldChange=${this.setSizeVariableField} @arcgisChartsConfigScatterplotAdditionalTooltipFieldChange=${this.setAdditionalTooltipField}></arcgis-charts-config-scatter-plot-popover>`), !document.body.contains(this.scatterplotPopover) && this.scatterplotPopover !== null && document.body.appendChild(this.scatterplotPopover);
   }
   removeScatterplotPopover() {
     this.scatterplotPopover !== null && (this.scatterplotPopover = C(this.scatterplotPopover)), this.selectedElement = {};
@@ -234,9 +243,12 @@ class R extends _ {
   renderYVariable() {
     return r`<arcgis-charts-config-field-select .label=${b(this.layerFieldsInfo, this.model.getYAxisField() ?? "")} @click=${this.onYVariableSelectChange} ${c(this.yAxisElement)}></arcgis-charts-config-field-select>`;
   }
+  renderTooltipField() {
+    return r`<arcgis-charts-config-field-select .label=${b(this.layerFieldsInfo, this.model.getAdditionalTooltipField()?.[0] ?? "")} @click=${this.onAdditionalTooltipFieldSelectChange} ${c(this.tooltipFieldElement)}></arcgis-charts-config-field-select>`;
+  }
   renderStatistics() {
-    const [e, t, s, a] = [...this.model.getLinearTrendSymbol()?.color ?? $(0)];
-    return r`<div class=${i(l.sectionContainer)}><calcite-label class=${i(l.label)} layout=inline-space-between>${this._messages.showLinearTrend}<calcite-switch class=${i(l.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} ${c(this.selectTrendLineElement)}><calcite-icon slot=content-end icon=line-solid style=${E({ color: `rgba(${e},${t},${s},${a / 255})` })} class=${i(l.iconSelect)} @click=${this.changeElementStyle}></calcite-icon></calcite-list-item></calcite-list><div class=${i(l.r2)} .hidden=${!this.model.getShowLinearTrend()}>${`${this._messages.r2}: ${Number.isNaN(this.r2) ? this.defaultR2Label : k(this.r2, A)}`}</div></div>`;
+    const [e, t, s, o] = [...this.model.getLinearTrendSymbol()?.color ?? z(0)];
+    return r`<div class=${i(l.sectionContainer)}><calcite-label class=${i(l.label)} layout=inline-space-between>${this._messages.showLinearTrend}<calcite-switch class=${i(l.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 === $.SLS} @click=${this.changeElementStyle} ${c(this.selectTrendLineElement)}><calcite-icon slot=content-end icon=line-solid style=${E({ color: `rgba(${e},${t},${s},${o / 255})` })} class=${i(l.iconSelect)} @click=${this.changeElementStyle}></calcite-icon></calcite-list-item></calcite-list><div class=${i(l.r2)} .hidden=${!this.model.getShowLinearTrend()}>${`${this._messages.r2}: ${Number.isNaN(this.r2) ? this.defaultR2Label : A(this.r2, k)}`}</div></div>`;
   }
   renderFixedSymbol() {
     return r`<calcite-label class=${i(l.label)}>${this._messages.size}<calcite-input type=number name=fixed-symbol-size class=${i(l.numberInput)} min=1 max=100 step=1 .value=${S(this.model.getFixedMarkerSymbol()?.size)} @calciteInputInput=${this.symbolSizeChange}></calcite-input></calcite-label>`;
@@ -257,11 +269,11 @@ class R extends _ {
     return r`<calcite-label class=${i(l.label)}>${this._messages.size}<calcite-segmented-control name=symbolSizeType layout=horizontal scale=s @calciteSegmentedControlChange=${this.changeSymbolSizeTypeToggle} ${c(this.symbolSizeModeElement)}><calcite-segmented-control-item .value=${d.Fixed} .checked=${d.Fixed === this.selectedSizeType} ${c(this.segmentedControlRef)}>${this._messages.fixed}</calcite-segmented-control-item><calcite-segmented-control-item .value=${d.Proportional} .checked=${d.Proportional === this.selectedSizeType} ${c(this.segmentedControlRef)}>${this._messages.proportional}</calcite-segmented-control-item></calcite-segmented-control></calcite-label>`;
   }
   renderSymbol() {
-    const [e, t, s, a] = [...this.model.getFixedMarkerSymbol()?.color ?? $(0)];
-    return r`<div class=${i(l.sectionContainer)}>${this.renderSymbolSizeType()}${this.selectedSizeType === d.Proportional ? this.renderProportionalSymbol() : this.renderFixedSymbol()}<calcite-label class=${i(l.label)}>${this._messages.color}${this.isTableLayer !== !0 ? r`<calcite-segmented-control name=layerColor layout=horizontal scale=s @calciteSegmentedControlChange=${this.changeColorTypeToggle} ${c(this.colorModeElement)}><calcite-segmented-control-item .value=${this._messages.useLayerColors} .checked=${this.model.getColorMatch()} ${c(this.segmentedControlRef)}>${this._messages.useLayerColors}</calcite-segmented-control-item><calcite-segmented-control-item .value=${this._messages.singleColor} .checked=${!this.model.getColorMatch()} ${c(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} ${c(this.selectColorElement)}><calcite-icon slot=content-end icon=circle-f style=${E({ color: `rgba(${e},${t},${s},${a / 255})` })} class=${i(l.iconSelect)} @click=${this.changeElementStyle}></calcite-icon></calcite-list-item></calcite-list></div>`;
+    const [e, t, s, o] = [...this.model.getFixedMarkerSymbol()?.color ?? z(0)];
+    return r`<div class=${i(l.sectionContainer)}>${this.renderSymbolSizeType()}${this.selectedSizeType === d.Proportional ? this.renderProportionalSymbol() : this.renderFixedSymbol()}<calcite-label class=${i(l.label)}>${this._messages.color}${this.isTableLayer !== !0 ? r`<calcite-segmented-control name=layerColor layout=horizontal scale=s @calciteSegmentedControlChange=${this.changeColorTypeToggle} ${c(this.colorModeElement)}><calcite-segmented-control-item .value=${this._messages.useLayerColors} .checked=${this.model.getColorMatch()} ${c(this.segmentedControlRef)}>${this._messages.useLayerColors}</calcite-segmented-control-item><calcite-segmented-control-item .value=${this._messages.singleColor} .checked=${!this.model.getColorMatch()} ${c(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} ${c(this.selectColorElement)}><calcite-icon slot=content-end icon=circle-f style=${E({ color: `rgba(${e},${t},${s},${o / 255})` })} class=${i(l.iconSelect)} @click=${this.changeElementStyle}></calcite-icon></calcite-list-item></calcite-list></div>`;
   }
   render() {
-    return r`<div><h3 class=${i(l.sectionLabel)}>${this._messages.variables}</h3><calcite-label class=${i(l.label)}>${this._messages.xAxisNumber}${this.renderXVariable()}</calcite-label><calcite-label class=${i(l.label)}>${this._messages.yAxisNumber}${this.renderYVariable()}</calcite-label><h3 class=${i(l.sectionLabel)}>${this._messages.statistics}</h3>${this.renderStatistics()}<h3 class=${i(l.sectionLabel)}>${this._messages.symbol}</h3>${this.renderSymbol()}</div>`;
+    return r`<div><h3 class=${i(l.sectionLabel)}>${this._messages.variables}</h3><calcite-label class=${i(l.label)}>${this._messages.xAxisNumber}${this.renderXVariable()}</calcite-label><calcite-label class=${i(l.label)}>${this._messages.yAxisNumber}${this.renderYVariable()}</calcite-label><calcite-label class=${i(l.label)}>${this._messages.additionalTooltipFields}${this.renderTooltipField()}</calcite-label><h3 class=${i(l.sectionLabel)}>${this._messages.statistics}</h3>${this.renderStatistics()}<h3 class=${i(l.sectionLabel)}>${this._messages.symbol}</h3>${this.renderSymbol()}</div>`;
   }
 }
 P("arcgis-charts-config-scatter-plot-data", R);

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

@@ -18,6 +18,7 @@ export declare class ArcgisChartsConfigScatterplotPopover extends LitElement {
     readonly arcgisChartsConfigScatterplotFillColorChange: TargetedEvent<this, Color>;
     readonly arcgisChartsConfigScatterplotLineStyleChange: TargetedEvent<this, ISimpleLineSymbol>;
     readonly arcgisChartsConfigScatterplotSizeVariableFieldChange: TargetedEvent<this, string>;
+    readonly arcgisChartsConfigScatterplotAdditionalTooltipFieldChange: TargetedEvent<this, string>;
     readonly arcgisChartsConfigScatterplotXYFieldChange: TargetedEvent<this, string>;
     private _messages;
 }

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

@@ -1,7 +1,7 @@
 import { c as C } from "../../chunks/runtime.js";
-import { css as u, html as o } from "lit";
-import { keyed as n } from "lit/directives/keyed.js";
-import { R as c } from "../../chunks/series-types.js";
+import { css as u, html as s } from "lit";
+import { keyed as c } from "lit/directives/keyed.js";
+import { R as p } from "../../chunks/series-types.js";
 import "@arcgis/toolkit/intl";
 import "lodash-es";
 import "d3-array";
@@ -15,31 +15,31 @@ import "@arcgis/core/core/promiseUtils.js";
 import "@arcgis/core/request.js";
 import "@arcgis/toolkit/dom";
 import { e as b } from "../../chunks/popover-ui-utils.js";
-import { S as p } from "../../chunks/interfaces2.js";
-import { U as h, g as $, i as m } from "../../chunks/chart-ui-utils2.js";
-import { u as S } from "../../chunks/useT9n.js";
-import { createRef as d, ref as g } from "lit/directives/ref.js";
-import { LitElement as P, createEvent as r, safeClassMap as a } from "@arcgis/lumina";
+import { S as n } from "../../chunks/interfaces2.js";
+import { U as h, g as S, i as d } from "../../chunks/chart-ui-utils2.js";
+import { u as $ } from "../../chunks/useT9n.js";
+import { createRef as m, ref as g } from "lit/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.129 */
-const l = {
+v4.34.0-next.130 */
+const r = {
   jsAppFlyout: "js-app-flyout",
   scatterplotPopover: "scatter-plot-popover",
   fillColor: "fill-color",
   header: "header",
   pickListItemLabel: "pick-list-item-label",
   pickListPanel: "pick-list-panel"
-}, k = u`.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}.am5-layer-30{z-index:100!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 x extends P {
+}, F = u`.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}.am5-layer-30{z-index:100!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 k extends P {
   constructor() {
-    super(...arguments), this.picklist = d(), this._messages = S(), this.popoverElement = d(), this.layerFieldsInfo = [], this.arcgisChartsConfigPopoverClose = r(), this.arcgisChartsConfigScatterplotFillColorChange = r(), this.arcgisChartsConfigScatterplotLineStyleChange = r(), this.arcgisChartsConfigScatterplotSizeVariableFieldChange = r(), this.arcgisChartsConfigScatterplotXYFieldChange = r();
+    super(...arguments), this.picklist = m(), this._messages = $(), this.popoverElement = m(), this.layerFieldsInfo = [], this.arcgisChartsConfigPopoverClose = a(), this.arcgisChartsConfigScatterplotFillColorChange = a(), this.arcgisChartsConfigScatterplotLineStyleChange = a(), this.arcgisChartsConfigScatterplotSizeVariableFieldChange = a(), this.arcgisChartsConfigScatterplotAdditionalTooltipFieldChange = a(), this.arcgisChartsConfigScatterplotXYFieldChange = a();
   }
   static {
     this.properties = { messageOverrides: 0, headingTitle: 3, contentKind: 3, selectedContent: 3, referenceElement: 2, placement: 3, open: 7, layerFieldsInfo: 0 };
   }
   static {
-    this.styles = k;
+    this.styles = F;
   }
   async reposition() {
     await this.popoverElement.value?.reposition();
@@ -65,26 +65,26 @@ class x extends P {
   }
   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 === n.sizeVariable ? this.arcgisChartsConfigScatterplotSizeVariableFieldChange.emit(t.map((i) => i.value)[0]) : this.contentKind === n.additionalTooltipFields ? this.arcgisChartsConfigScatterplotAdditionalTooltipFieldChange.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=${a({ [l.jsAppFlyout]: !0 })}><calcite-popover class=${a(l.scatterplotPopover)} .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .offsetDistance=${$(this.placement)} @calcitePopoverClose=${this.closePopover} .open=${this.open} label auto-close ${g(this.popoverElement)}>${Array.isArray(e) ? o`<arcgis-charts-config-color-style .header=${this._messages.fillColor} class=${a(l.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 s`<div class=${l({ [r.jsAppFlyout]: !0 })}><calcite-popover class=${l(r.scatterplotPopover)} .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .offsetDistance=${S(this.placement)} @calcitePopoverClose=${this.closePopover} .open=${this.open} label auto-close ${g(this.popoverElement)}>${Array.isArray(e) ? s`<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 === p.SLS ? s`<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 !== p.SLS ? this.renderVariablePickList() : null}</calcite-popover></div>`;
   }
   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 === n.sizeVariable || this.contentKind === n.additionalTooltipFields) && t.push(c(" ", s`<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 = y(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>`));
+      const o = this.layerFieldsInfo?.[i] ?? void 0;
+      if (o !== void 0 && v(o)) {
+        const f = y(this.layerFieldsInfo, o.name);
+        t.push(c(o.name, s`<calcite-list-item .label=${f} .value=${o.name} .selected=${d(o.name, this.selectedContent)}></calcite-list-item>`));
       }
     }
-    return o`<calcite-panel class=${a(l.pickListPanel)} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div slot=header-content class=${a(l.header)}>${this.headingTitle ?? ""}</div><calcite-list label class=${a(l.pickListItemLabel)} selection-mode=single selection-appearance=border filter-enabled @calciteListChange=${this.onFieldSelectionChange} ${g(this.picklist)}>${t}</calcite-list></calcite-panel>`;
+    return s`<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>`;
   }
 }
-C("arcgis-charts-config-scatter-plot-popover", x);
+C("arcgis-charts-config-scatter-plot-popover", k);
 export {
-  x as ArcgisChartsConfigScatterplotPopover
+  k as ArcgisChartsConfigScatterplotPopover
 };

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

@@ -21,7 +21,7 @@ import { LitElement as d, createEvent as o, safeClassMap as s } from "@arcgis/lu
 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.129 */
+v4.34.0-next.130 */
 const i = {
   selectChartComponent: "select-chart-component",
   jsAppFlyout: "js-app-flyout",

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

@@ -21,7 +21,7 @@ import { LitElement as v, createEvent as o, safeClassMap as c, renderElement as
 import { repeat as w } from "lit/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.129 */
+v4.34.0-next.130 */
 const n = {
   addChartContainer: "add-chart-container",
   viewChartComponent: "view-chart-component",

package/dist/docs/api.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2025-09-12T04:43:36",
+  "timestamp": "2025-09-13T04:42:55",
   "compiler": {
     "name": "@arcgis/lumina-compiler",
-    "version": "4.34.0-next.129",
+    "version": "4.34.0-next.130",
     "typescriptVersion": "5.8.3"
   },
   "schemaVersion": "1.0.0",
@@ -380,7 +380,7 @@
               "name": "dataLabelFormatter",
               "description": "A callback function used to format the data labels. If the returned string contains HTML tags they will be interpreted as such.",
               "type": {
-                "text": "(((category: string, value?: number | undefined, percent?: number | undefined, originalCategory?: WebChartDataItemValue) => string)) | (((count: number, binMinValue: number, binMaxValue: number) => string)) | (((statValue: number, percent?: number | undefined) => string)) | (((x: number, y: number, sizePolicyValue?: number | undefined) => string))",
+                "text": "(((category: string, value?: number | undefined, percent?: number | undefined, originalCategory?: WebChartDataItemValue) => string)) | (((count: number, binMinValue: number, binMaxValue: number) => string)) | (((statValue: number, percent?: number | undefined) => string)) | (((x: number, y: number, sizePolicyValue?: number | undefined, dataContext?: WebChartDataItem | undefined) => string))",
                 "values": [
                   {
                     "type": "(((category: string, value?: number | undefined, percent?: number | undefined, originalCategory?: WebChartDataItemValue) => string))"
@@ -392,7 +392,7 @@
                     "type": "(((statValue: number, percent?: number | undefined) => string))"
                   },
                   {
-                    "type": "(((x: number, y: number, sizePolicyValue?: number | undefined) => string))"
+                    "type": "(((x: number, y: number, sizePolicyValue?: number | undefined, dataContext?: WebChartDataItem | undefined) => string))"
                   }
                 ]
               },
@@ -2032,7 +2032,7 @@
               "name": "tooltipFormatter",
               "description": "A callback function used to format the tooltips. If the returned string contains HTML tags they will be interpreted as such.",
               "type": {
-                "text": "(((category: string, value?: number | undefined, percent?: number | undefined, originalCategory?: WebChartDataItemValue) => string)) | (((count: number, binMinValue: number, binMaxValue: number) => string)) | (((props: BarAndLineTooltipFormatCallbackProps) => string)) | (((props: BoxPlotTooltipFormatCallbackProps) => string)) | (((x: number, y: number, sizePolicyValue?: number | undefined) => string))",
+                "text": "(((category: string, value?: number | undefined, percent?: number | undefined, originalCategory?: WebChartDataItemValue) => string)) | (((count: number, binMinValue: number, binMaxValue: number) => string)) | (((props: BarAndLineTooltipFormatCallbackProps) => string)) | (((props: BoxPlotTooltipFormatCallbackProps) => string)) | (((x: number, y: number, sizePolicyValue?: number | undefined, dataContext?: WebChartDataItem | undefined) => string))",
                 "values": [
                   {
                     "type": "(((category: string, value?: number | undefined, percent?: number | undefined, originalCategory?: WebChartDataItemValue) => string))"
@@ -2047,7 +2047,7 @@
                     "type": "(((props: BoxPlotTooltipFormatCallbackProps) => string))"
                   },
                   {
-                    "type": "(((x: number, y: number, sizePolicyValue?: number | undefined) => string))"
+                    "type": "(((x: number, y: number, sizePolicyValue?: number | undefined, dataContext?: WebChartDataItem | undefined) => string))"
                   }
                 ]
               },

package/dist/docs/docs.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2025-09-12T04:43:36",
+  "timestamp": "2025-09-13T04:42:55",
   "compiler": {
     "name": "@arcgis/lumina-compiler",
-    "version": "4.34.0-next.129",
+    "version": "4.34.0-next.130",
     "typescriptVersion": "5.8.3"
   },
   "components": [
@@ -316,10 +316,10 @@
         },
         {
           "name": "dataLabelFormatter",
-          "type": "(((category: string, value?: number | undefined, percent?: number | undefined, originalCategory?: WebChartDataItemValue) => string)) | (((count: number, binMinValue: number, binMaxValue: number) => string)) | (((statValue: number, percent?: number | undefined) => string)) | (((x: number, y: number, sizePolicyValue?: number | undefined) => string))",
+          "type": "(((category: string, value?: number | undefined, percent?: number | undefined, originalCategory?: WebChartDataItemValue) => string)) | (((count: number, binMinValue: number, binMaxValue: number) => string)) | (((statValue: number, percent?: number | undefined) => string)) | (((x: number, y: number, sizePolicyValue?: number | undefined, dataContext?: WebChartDataItem | undefined) => string))",
           "complexType": {
-            "original": "(((category: string, value?: number | undefined, percent?: number | undefined, originalCategory?: WebChartDataItemValue) => string)) | (((count: number, binMinValue: number, binMaxValue: number) => string)) | (((statValue: number, percent?: number | undefined) => string)) | (((x: number, y: number, sizePolicyValue?: number | undefined) => string))",
-            "resolved": "(((category: string, value?: number | undefined, percent?: number | undefined, originalCategory?: WebChartDataItemValue) => string)) | (((count: number, binMinValue: number, binMaxValue: number) => string)) | (((statValue: number, percent?: number | undefined) => string)) | (((x: number, y: number, sizePolicyValue?: number | undefined) => string))",
+            "original": "(((category: string, value?: number | undefined, percent?: number | undefined, originalCategory?: WebChartDataItemValue) => string)) | (((count: number, binMinValue: number, binMaxValue: number) => string)) | (((statValue: number, percent?: number | undefined) => string)) | (((x: number, y: number, sizePolicyValue?: number | undefined, dataContext?: WebChartDataItem | undefined) => string))",
+            "resolved": "(((category: string, value?: number | undefined, percent?: number | undefined, originalCategory?: WebChartDataItemValue) => string)) | (((count: number, binMinValue: number, binMaxValue: number) => string)) | (((statValue: number, percent?: number | undefined) => string)) | (((x: number, y: number, sizePolicyValue?: number | undefined, dataContext?: WebChartDataItem | undefined) => string))",
             "references": {}
           },
           "mutable": true,
@@ -351,7 +351,7 @@
               "type": "(((statValue: number, percent?: number | undefined) => string))"
             },
             {
-              "type": "(((x: number, y: number, sizePolicyValue?: number | undefined) => string))"
+              "type": "(((x: number, y: number, sizePolicyValue?: number | undefined, dataContext?: WebChartDataItem | undefined) => string))"
             }
           ],
           "optional": true,
@@ -1779,10 +1779,10 @@
         },
         {
           "name": "tooltipFormatter",
-          "type": "(((category: string, value?: number | undefined, percent?: number | undefined, originalCategory?: WebChartDataItemValue) => string)) | (((count: number, binMinValue: number, binMaxValue: number) => string)) | (((props: BarAndLineTooltipFormatCallbackProps) => string)) | (((props: BoxPlotTooltipFormatCallbackProps) => string)) | (((x: number, y: number, sizePolicyValue?: number | undefined) => string))",
+          "type": "(((category: string, value?: number | undefined, percent?: number | undefined, originalCategory?: WebChartDataItemValue) => string)) | (((count: number, binMinValue: number, binMaxValue: number) => string)) | (((props: BarAndLineTooltipFormatCallbackProps) => string)) | (((props: BoxPlotTooltipFormatCallbackProps) => string)) | (((x: number, y: number, sizePolicyValue?: number | undefined, dataContext?: WebChartDataItem | undefined) => string))",
           "complexType": {
-            "original": "(((category: string, value?: number | undefined, percent?: number | undefined, originalCategory?: WebChartDataItemValue) => string)) | (((count: number, binMinValue: number, binMaxValue: number) => string)) | (((props: BarAndLineTooltipFormatCallbackProps) => string)) | (((props: BoxPlotTooltipFormatCallbackProps) => string)) | (((x: number, y: number, sizePolicyValue?: number | undefined) => string))",
-            "resolved": "(((category: string, value?: number | undefined, percent?: number | undefined, originalCategory?: WebChartDataItemValue) => string)) | (((count: number, binMinValue: number, binMaxValue: number) => string)) | (((props: BarAndLineTooltipFormatCallbackProps) => string)) | (((props: BoxPlotTooltipFormatCallbackProps) => string)) | (((x: number, y: number, sizePolicyValue?: number | undefined) => string))",
+            "original": "(((category: string, value?: number | undefined, percent?: number | undefined, originalCategory?: WebChartDataItemValue) => string)) | (((count: number, binMinValue: number, binMaxValue: number) => string)) | (((props: BarAndLineTooltipFormatCallbackProps) => string)) | (((props: BoxPlotTooltipFormatCallbackProps) => string)) | (((x: number, y: number, sizePolicyValue?: number | undefined, dataContext?: WebChartDataItem | undefined) => string))",
+            "resolved": "(((category: string, value?: number | undefined, percent?: number | undefined, originalCategory?: WebChartDataItemValue) => string)) | (((count: number, binMinValue: number, binMaxValue: number) => string)) | (((props: BarAndLineTooltipFormatCallbackProps) => string)) | (((props: BoxPlotTooltipFormatCallbackProps) => string)) | (((x: number, y: number, sizePolicyValue?: number | undefined, dataContext?: WebChartDataItem | undefined) => string))",
             "references": {}
           },
           "mutable": true,
@@ -1817,7 +1817,7 @@
               "type": "(((props: BoxPlotTooltipFormatCallbackProps) => string))"
             },
             {
-              "type": "(((x: number, y: number, sizePolicyValue?: number | undefined) => string))"
+              "type": "(((x: number, y: number, sizePolicyValue?: number | undefined, dataContext?: WebChartDataItem | undefined) => string))"
             }
           ],
           "optional": true,

package/dist/docs/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@arcgis/charts-components",
-  "version": "4.34.0-next.129",
+  "version": "4.34.0-next.130",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -496,7 +496,7 @@
               {
                 "name": "dataLabelFormatter",
                 "description": "A callback function used to format the data labels. If the returned string contains HTML tags they will be interpreted as such.",
-                "type": "(((category: string, value?: number | undefined, percent?: number | undefined, originalCategory?: WebChartDataItemValue) => string)) | (((count: number, binMinValue: number, binMaxValue: number) => string)) | (((statValue: number, percent?: number | undefined) => string)) | (((x: number, y: number, sizePolicyValue?: number | undefined) => string))"
+                "type": "(((category: string, value?: number | undefined, percent?: number | undefined, originalCategory?: WebChartDataItemValue) => string)) | (((count: number, binMinValue: number, binMaxValue: number) => string)) | (((statValue: number, percent?: number | undefined) => string)) | (((x: number, y: number, sizePolicyValue?: number | undefined, dataContext?: WebChartDataItem | undefined) => string))"
               },
               {
                 "name": "disableInteractions",
@@ -711,7 +711,7 @@
               {
                 "name": "tooltipFormatter",
                 "description": "A callback function used to format the tooltips. If the returned string contains HTML tags they will be interpreted as such.",
-                "type": "(((category: string, value?: number | undefined, percent?: number | undefined, originalCategory?: WebChartDataItemValue) => string)) | (((count: number, binMinValue: number, binMaxValue: number) => string)) | (((props: BarAndLineTooltipFormatCallbackProps) => string)) | (((props: BoxPlotTooltipFormatCallbackProps) => string)) | (((x: number, y: number, sizePolicyValue?: number | undefined) => string))"
+                "type": "(((category: string, value?: number | undefined, percent?: number | undefined, originalCategory?: WebChartDataItemValue) => string)) | (((count: number, binMinValue: number, binMaxValue: number) => string)) | (((props: BarAndLineTooltipFormatCallbackProps) => string)) | (((props: BoxPlotTooltipFormatCallbackProps) => string)) | (((x: number, y: number, sizePolicyValue?: number | undefined, dataContext?: WebChartDataItem | undefined) => string))"
               },
               {
                 "name": "updateSplitBySeries",

package/dist/index.js

@@ -16,7 +16,7 @@ import { B as lo, a as no, C as uo, H as co, L as go, P as fo, S as yo } from ".
 import { g as mo, s as po } 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.129 */
+v4.34.0-next.130 */
 function I(a) {
   let o;
   switch (a.length) {

package/dist/interfaces.d.ts

@@ -94,6 +94,7 @@ export declare const ScatterplotDataPopoverKinds: {
     readonly sizeVariable: "sizeVariable";
     readonly symbol: "symbol";
     readonly trendLine: "trendLine";
+    readonly additionalTooltipFields: "additionalTooltipFields";
     readonly none: "none";
 };
 export type ScatterplotDataPopoverKinds = (typeof ScatterplotDataPopoverKinds)[keyof typeof ScatterplotDataPopoverKinds];

package/dist/json-schema/index.d.ts

@@ -2278,6 +2278,13 @@ export namespace WebChartJSONSchemas {
                     $ref: string;
                     description: string;
                 };
+                additionalTooltipFields: {
+                    type: string;
+                    items: {
+                        type: string;
+                    };
+                    description: string;
+                };
             };
             required: string[];
             description: string;
@@ -3003,6 +3010,10 @@ export namespace WebChartJSONSchemas {
                     $ref: string;
                     description: string;
                 };
+                gridLine: {
+                    $ref: string;
+                    description: string;
+                };
                 heatRuleType: {
                     $ref: string;
                     description: string;