@geoscene/charts-components 5.0.19

package/dist/components/geoscene-charts-config-bar-chart-series/customElement.js

@@ -0,0 +1,341 @@
+/* COPYRIGHT  - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c as k } from "../../chunks/runtime.js";
+import { keyed as x } from "lit/directives/keyed.js";
+import "@geoscene/toolkit/intl";
+import "lodash-es";
+import "luxon";
+import "d3-array";
+import "@geoscene/toolkit/type";
+import { e as r, a as u } from "../../chunks/series-types.js";
+import { dp as T, ds as C } from "../../chunks/index.js";
+import "@geoscene/core/Graphic.js";
+import "@geoscene/core/renderers/support/jsonUtils.js";
+import "@geoscene/core/symbols/support/symbolUtils.js";
+import "@geoscene/geoscene-html-sanitizer";
+import "@geoscene/core/intl.js";
+import "@geoscene/core/layers/support/FeatureFilter.js";
+import "@geoscene/core/smartMapping/statistics/histogram.js";
+import "@geoscene/core/smartMapping/statistics/summaryStatistics.js";
+import "simple-statistics";
+import "@geoscene/core/request.js";
+import "@geoscene/core/core/sql.js";
+import "@geoscene/core/AttributeBinsGraphic.js";
+import "@geoscene/core/geometry/support/jsonUtils.js";
+import "@geoscene/core/rest/support/AttributeBinsQuery.js";
+import "@geoscene/core/rest/support/StatisticDefinition.js";
+import "@geoscene/core/time/TimeExtent.js";
+import "@geoscene/core/core/promiseUtils.js";
+import "@geoscene/toolkit/dom";
+import { r as v } from "../../chunks/popover-ui-utils.js";
+import { repeat as P } from "lit/directives/repeat.js";
+import { u as L } from "../../chunks/useT9n.js";
+import { css as M, html as l } from "lit";
+import {
+  LitElement as N,
+  createEvent as O,
+  renderElement as f,
+  safeStyleMap as h,
+  safeClassMap as a,
+} from "@geoscene/lumina";
+import { d as _ } from "../../chunks/chart-ui-utils2.js";
+const E = {
+    stackedType: "stacked-type",
+  },
+  o = {
+    topSection: "top-section",
+    sectionLabel: "section-label",
+    list: "list",
+    disabledInfo: "disabled-info",
+    disabledStackingOption: "disabled-stacking-option",
+  },
+  w = M`:host{display:flex;flex-direction:column;width:var(--geoscene-charts-config-calcite-block-default-width);margin:var(--geoscene-charts-config-calcite-block-default-margin)}.top-section{margin-top:var(--geoscene-charts-config-margin-minor)}.section-label{display:flex;margin-bottom:var(--geoscene-charts-config-margin-major);margin-left:var(--geoscene-charts-config-margin-minor);margin-right:var(--geoscene-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)}.list{margin-left:var(--geoscene-charts-config-margin-minor);margin-right:var(--geoscene-charts-config-margin-minor);margin-bottom:var(--geoscene-charts-config-margin-major)}.disabled-info{margin:auto 1rem;pointer-events:auto}.disabled-info:active{margin:auto 1rem;pointer-events:none}.disabled-stacking-option{pointer-events:none;opacity:var(--calcite-opacity-disabled)}`;
+class D extends N {
+  constructor() {
+    super(...arguments),
+      (this._messages = L()),
+      (this.open = !1),
+      (this.seriesNameChange = (e) => {
+        if (e.detail !== null && e.detail !== void 0) {
+          const t = e.detail.name;
+          if (this.isNullCategorySelected) {
+            const i = this.model.nullCategory;
+            if (i) {
+              const s = { ...i, text: t };
+              this.model.nullCategory = s;
+            }
+          } else this.model.setSeriesName(t, this.selectedSeriesIndex ?? -1);
+        }
+      }),
+      (this.seriesColorChange = (e) => {
+        if (e.detail !== null && e.detail !== void 0) {
+          const { color: t } = e.detail;
+          if (t !== void 0) {
+            if (this.isNullCategorySelected) {
+              const i = this.model.nullCategory,
+                s = i?.symbol && {
+                  ...i,
+                  symbol: {
+                    ...i.symbol,
+                    color: t,
+                    outline: i.symbol.outline && {
+                      ...i.symbol.outline,
+                      color: t,
+                    },
+                  },
+                };
+              this.model.nullCategory = s;
+            } else this.model.setSeriesColor(t, this.selectedSeriesIndex ?? -1);
+            this.model.colorMatch = !1;
+          }
+        }
+      }),
+      (this.seriesPopoverClose = (e) => {
+        const { selectedSeriesIndex: t } = e.detail;
+        this.selectedSeriesIndex === t &&
+          ((this.seriesPopover = v(this.seriesPopover)),
+          (this.selectedSeriesIndex = void 0));
+      }),
+      (this.onModelConfigChange = () => {
+        this.requestUpdate();
+      }),
+      (this.seriesOrderResetCounter = 0),
+      (this.activeColorMatch = !1),
+      (this.popoverPlacement = "leading"),
+      (this.geosceneChartsConfigDataChangeError = O());
+  }
+  static {
+    this.properties = {
+      seriesOrderResetCounter: 16,
+      selectedSeriesIndex: 16,
+      messageOverrides: 0,
+      model: 0,
+      activeColorMatch: 5,
+      popoverPlacement: 1,
+    };
+  }
+  static {
+    this.styles = w;
+  }
+  load() {
+    this.modelChange(this.model), this.onModelConfigChange();
+  }
+  willUpdate(e) {
+    e.has("model") && this.modelChange(this.model, e.get("model")),
+      e.has("selectedSeriesIndex") && this.selectedSeriesIndexChange();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(),
+      this.removeSeriesPopover(),
+      this.model.removeEventListener(
+        "geosceneChartsModelConfigChange",
+        this.onModelConfigChange
+      );
+  }
+  modelChange(e, t) {
+    t?.removeEventListener(
+      "geosceneChartsModelConfigChange",
+      this.onModelConfigChange
+    ),
+      e?.addEventListener(
+        "geosceneChartsModelConfigChange",
+        this.onModelConfigChange
+      );
+  }
+  removeSeriesPopover() {
+    this.seriesPopover !== null &&
+      this.seriesPopover !== void 0 &&
+      ((this.seriesPopover.open = !1),
+      (this.seriesPopover = v(this.seriesPopover)));
+  }
+  selectedSeriesIndexChange() {
+    this.selectedSeriesIndex !== void 0 &&
+      ((this.seriesPopover = f(
+        l`<geoscene-charts-config-bar-chart-series-popover .referenceElement=${
+          this.el
+        } .selectedName=${
+          this.selectedSeriesIndex != null
+            ? this.model.getSeriesName(this.selectedSeriesIndex)
+            : void 0
+        } .selectedColor=${
+          this.selectedSeriesIndex != null
+            ? this.model.getSeriesColor(this.selectedSeriesIndex)
+            : void 0
+        } .placement=${this.popoverPlacement} .selectedSeriesIndex=${
+          this.selectedSeriesIndex != null ? this.selectedSeriesIndex : void 0
+        } .nullCategory=${
+          this.isNullCategorySelected ? this.model.nullCategory : void 0
+        } .open=${this.open} @geosceneChartsConfigSeriesPopoverNameChange=${
+          this.seriesNameChange
+        } @geosceneChartsConfigSeriesPopoverColorChange=${
+          this.seriesColorChange
+        } @geosceneChartsConfigPopoverClose=${
+          this.seriesPopoverClose
+        }></geoscene-charts-config-bar-chart-series-popover>`
+      )),
+      this.seriesPopover &&
+        !document.body.contains(this.seriesPopover) &&
+        document.body.appendChild(this.seriesPopover));
+  }
+  buildSeriesListItems() {
+    const e = this.model.seriesLength ?? 0,
+      t = Array.from({ length: e }, (s, n) => n);
+    return P(
+      t,
+      (s) => this.model.getSeriesId(s),
+      (s) => {
+        const n = this.model.getSeriesId(s),
+          c = this.model.getSeriesColor(s),
+          d = this.model.getSeriesName(s),
+          S =
+            this.model.chartSubType === T.BarAndLineFromFields
+              ? this._messages.series
+              : n;
+        let g = "#CCCCCC",
+          p = "minus-square";
+        if ((e > 1 || !this.activeColorMatch) && c !== void 0) {
+          p = "square-f";
+          const [b, y, $, I] = [...c];
+          g = `rgba(${b},${y},${$},${I / 255})`;
+        }
+        return l`<calcite-list-item .label=${
+          d ?? n ?? ""
+        } .description=${S} .value=${n} .selected=${
+          this.selectedSeriesIndex === s
+        } @click=${this.openSeriesPopOver}><calcite-icon .icon=${p} style=${h({
+          color: g,
+        })} slot=content-end></calcite-icon></calcite-list-item>`;
+      }
+    );
+  }
+  buildSeriesList() {
+    return x(
+      this.seriesOrderResetCounter,
+      l`<calcite-list label class=${a(
+        o.list
+      )} drag-enabled selection-mode=single selection-appearance=border @calciteListOrderChange=${
+        this.onCalciteListOrderChange
+      }>${this.buildSeriesListItems()}</calcite-list>`
+    );
+  }
+  buildNullCategoryUI() {
+    const e = this.model.nullCategory,
+      t = this._messages.nullCategory,
+      i = e?.symbol?.color ?? C.nullCategory?.symbol?.color ?? C.grayColor,
+      [s, n, c, d] = [...i],
+      m = `rgba(${s},${n},${c},${d / 255})`;
+    return l`<calcite-list label class=${a(
+      o.list
+    )} selection-mode=none><calcite-list-item .label=${t} .value=${t} .selected=${
+      this.selectedSeriesIndex === null
+    } @click=${this.openSeriesPopOver}><calcite-icon icon=square-f style=${h({
+      color: m,
+    })} slot=content-end></calcite-icon></calcite-list-item></calcite-list>`;
+  }
+  buildMultipleBarTypeList() {
+    const e = this.shouldDisableStacking();
+    return (
+      e &&
+        this.model.stackedType !== r.Side &&
+        (this.model.stackedType = r.Side),
+      l`<calcite-list label id=${E.stackedType} class=${a(
+        o.list
+      )} selection-mode=single-persist selection-appearance=border @click=${
+        this.onMultipleBarSelect
+      }><calcite-list-item .label=${this._messages.sideBySide} .value=${
+        r.Side
+      } .selected=${
+        this.model.stackedType === void 0 || this.model.stackedType === r.Side
+      }><calcite-icon scale=l icon=graph-bar-side-by-side slot=content-start></calcite-icon></calcite-list-item><calcite-list-item class=${a(
+        e ? o.disabledStackingOption : ""
+      )} .label=${this._messages.stacked} .value=${r.Stacked} .selected=${
+        this.model.stackedType === r.Stacked
+      }><calcite-icon scale=l icon=graph-bar-stacked slot=content-start></calcite-icon>${
+        (e &&
+          l`<calcite-icon class=${a(
+            o.disabledInfo
+          )} slot=content-end icon=information scale=s flip-rtl @mouseover=${
+            this.createTooltip
+          } @mouseout=${this.destroyTooltip}></calcite-icon>`) ||
+        ""
+      }</calcite-list-item><calcite-list-item class=${a(
+        e ? o.disabledStackingOption : ""
+      )} .label=${this._messages.stacked100} .value=${r.Stacked100} .selected=${
+        this.model.stackedType === r.Stacked100
+      }><calcite-icon scale=l icon=graph-bar100-stacked slot=content-start></calcite-icon>${
+        (e &&
+          l`<calcite-icon class=${a(
+            o.disabledInfo
+          )} slot=content-end icon=information scale=s flip-rtl @mouseover=${
+            this.createTooltip
+          } @mouseout=${this.destroyTooltip}></calcite-icon>`) ||
+        ""
+      }</calcite-list-item></calcite-list>`
+    );
+  }
+  resetSeriesOriginal() {
+    (this.selectedSeriesIndex = void 0),
+      this.model.resetSeriesStyling(),
+      (this.seriesOrderResetCounter += 1);
+  }
+  onMultipleBarSelect(e) {
+    if (!this.shouldDisableStacking()) {
+      const t = e.target;
+      this.model.stackedType = t.value ?? t.parentElement.value ?? "";
+    }
+  }
+  onCalciteListOrderChange(e) {
+    if (e.detail !== null && e.detail !== void 0) {
+      const { newIndex: t, oldIndex: i } = e.detail;
+      this.model.moveSeries(i, t), (this.seriesOrderResetCounter += 1);
+    }
+  }
+  openSeriesPopOver(e) {
+    e.stopImmediatePropagation(), this.removeSeriesPopover();
+    const t = e.target,
+      i = t.localName === "calcite-list-item" ? t : t.parentNode,
+      s = this.model.getSeriesIndex(i.value);
+    (this.open = this.selectedSeriesIndex !== s),
+      (this.selectedSeriesIndex = this.selectedSeriesIndex !== s ? s : void 0),
+      (this.isNullCategorySelected = i.value === this._messages.nullCategory);
+  }
+  createTooltip(e) {
+    const t = e.target,
+      i =
+        (this.model.aggregationType === u.NoAggregation
+          ? this._messages.noAggStackingDisabled
+          : this._messages.singleStackingDisabled) ?? "";
+    (this.tooltip = f(
+      l`<calcite-tooltip style=${h({
+        opacity: 1,
+        zIndex: "var(--calcite-floating-ui-z-index)",
+      })} .referenceElement=${t} open placement=top>${i}</calcite-tooltip>`
+    )),
+      document.body.appendChild(this.tooltip);
+  }
+  destroyTooltip() {
+    _(this.tooltip);
+  }
+  shouldDisableStacking() {
+    return (
+      (this.model.seriesLength ?? 0) <= 1 ||
+      this.model.aggregationType === u.NoAggregation
+    );
+  }
+  render() {
+    return l`<div class=${`${o.sectionLabel} ${o.topSection}`}>${
+      this._messages.displayMultiSeries
+    }</div>${this.buildMultipleBarTypeList()}<div class=${a(o.sectionLabel)}>${
+      this._messages.series
+    }<calcite-button @click=${
+      this.resetSeriesOriginal
+    } .disabled=${!this.model.resetAvailable()} appearance=transparent icon-end=reset>${
+      this._messages.reset
+    }</calcite-button></div>${this.buildSeriesList()}${
+      this.model.nullCategory !== void 0 && this.model.fetchNULLValues
+        ? this.buildNullCategoryUI()
+        : null
+    }`;
+  }
+}
+k("geoscene-charts-config-bar-chart-series", D);
+export { D as GeosceneChartsConfigBarChartSeries };

package/dist/components/geoscene-charts-config-bar-chart-series/index.js

@@ -0,0 +1,7 @@
+import "../geoscene-charts-config-bar-chart-series-popover/index.js";
+import "@geoscene/calcite-components/components/calcite-list-item";
+import "@geoscene/calcite-components/components/calcite-icon";
+import "@geoscene/calcite-components/components/calcite-list";
+import "@geoscene/calcite-components/components/calcite-tooltip";
+import "@geoscene/calcite-components/components/calcite-button";
+export * from "./customElement.js";

package/dist/components/geoscene-charts-config-bar-chart-series-popover/customElement.js

@@ -0,0 +1,125 @@
+/* COPYRIGHT  - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c } from "../../chunks/runtime.js";
+import { css as p, html as m } from "lit";
+import "@geoscene/toolkit/intl";
+import "lodash-es";
+import "luxon";
+import "d3-array";
+import "@geoscene/toolkit/type";
+import "../../chunks/series-types.js";
+import { ar as h } from "../../chunks/index.js";
+import "@geoscene/core/Graphic.js";
+import "@geoscene/core/renderers/support/jsonUtils.js";
+import "@geoscene/core/symbols/support/symbolUtils.js";
+import "@geoscene/geoscene-html-sanitizer";
+import "@geoscene/core/intl.js";
+import "@geoscene/core/layers/support/FeatureFilter.js";
+import "@geoscene/core/smartMapping/statistics/histogram.js";
+import "@geoscene/core/smartMapping/statistics/summaryStatistics.js";
+import "simple-statistics";
+import "@geoscene/core/request.js";
+import "@geoscene/core/core/sql.js";
+import "@geoscene/core/AttributeBinsGraphic.js";
+import "@geoscene/core/geometry/support/jsonUtils.js";
+import "@geoscene/core/rest/support/AttributeBinsQuery.js";
+import "@geoscene/core/rest/support/StatisticDefinition.js";
+import "@geoscene/core/time/TimeExtent.js";
+import "@geoscene/core/core/promiseUtils.js";
+import "@geoscene/toolkit/dom";
+import { e as d } from "../../chunks/popover-ui-utils.js";
+import { a as g } from "../../chunks/chart-ui-utils2.js";
+import { u as C } from "../../chunks/useT9n.js";
+import { createRef as v, ref as f } from "lit/directives/ref.js";
+import {
+  LitElement as u,
+  createEvent as o,
+  safeClassMap as i,
+} from "@geoscene/lumina";
+const s = {
+    jsAppFlyout: "js-app-flyout",
+    panelChildrenContainer: "panel-children-container",
+  },
+  y = p`.hide{visibility:hidden}.am5-html-container{z-index:101!important}.am5-layer-1000{z-index:1000!important}.am5-layer-30{z-index:100!important}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--geoscene-charts-dim-text)}:host{overflow-y:auto;width:min-content}.panel-children-container{display:flex;padding:0 1rem;margin-top:1rem}.panel-children-container calcite-label{flex:1 1 0px;display:flex;width:0px}`;
+class x extends u {
+  constructor() {
+    super(...arguments),
+      (this._messages = C()),
+      (this.popoverElement = v()),
+      (this.geosceneChartsConfigPopoverClose = o()),
+      (this.geosceneChartsConfigSeriesPopoverColorChange = o()),
+      (this.geosceneChartsConfigSeriesPopoverNameChange = o());
+  }
+  static {
+    this.properties = {
+      messageOverrides: 0,
+      referenceElement: 0,
+      selectedName: 1,
+      selectedColor: 0,
+      selectedSeriesIndex: 9,
+      placement: 1,
+      open: 5,
+      nullCategory: 0,
+    };
+  }
+  static {
+    this.styles = y;
+  }
+  async reposition() {
+    await this.popoverElement.value?.reposition();
+  }
+  updated() {
+    d(this.popoverElement.value, this.open),
+      this.hasUpdated ||
+        setTimeout(() => {
+          this.popoverElement.value?.reposition();
+        }, g.PopoverTimer);
+  }
+  seriesNameChange(e) {
+    const t = e.target.value;
+    this.selectedName !== t &&
+      ((this.selectedName = t),
+      this.geosceneChartsConfigSeriesPopoverNameChange.emit({ name: t }));
+  }
+  closePopover() {
+    (this.open = !1),
+      this.geosceneChartsConfigPopoverClose.emit({
+        selectedSeriesIndex: this.selectedSeriesIndex ?? -1,
+      });
+  }
+  colorChange(e) {
+    const t = e instanceof CustomEvent ? e.detail : e,
+      [r, a, l] = t,
+      n = h * 255;
+    (this.selectedColor = [r, a, l, n]),
+      this.geosceneChartsConfigSeriesPopoverColorChange.emit({
+        color: [r, a, l, n],
+      });
+  }
+  render() {
+    const e = this.nullCategory?.symbol?.color ?? this.selectedColor,
+      t = this.nullCategory?.text ?? this.selectedName;
+    return m`<div class=${i({
+      [s.jsAppFlyout]: !0,
+    })}><calcite-popover .referenceElement=${
+      this.referenceElement ?? document.body
+    } .placement=${this.placement} .open=${this.open} @calcitePopoverClose=${
+      this.closePopover
+    } label auto-close ${f(this.popoverElement)}><calcite-panel .heading=${
+      this._messages.seriesElement
+    } closable .closed=${!this.open} @calcitePanelClose=${
+      this.closePopover
+    }><div class=${i(s.panelChildrenContainer)}><calcite-label>${
+      this._messages.label
+    }<calcite-input type=text .value=${t} @calciteInputInput=${
+      this.seriesNameChange
+    }></calcite-input></calcite-label></div><div class=${i(
+      s.panelChildrenContainer
+    )}><geoscene-charts-config-colors .heading=${
+      this._messages.symbolColor
+    } .rgba=${e} @geosceneColorSelect=${
+      this.colorChange
+    }></geoscene-charts-config-colors></div></calcite-panel></calcite-popover></div>`;
+  }
+}
+c("geoscene-charts-config-bar-chart-series-popover", x);
+export { x as GeosceneChartsConfigBarChartSeriesPopover };

package/dist/components/geoscene-charts-config-bar-chart-series-popover/index.js

@@ -0,0 +1,6 @@
+import "@geoscene/calcite-components/components/calcite-popover";
+import "@geoscene/calcite-components/components/calcite-panel";
+import "@geoscene/calcite-components/components/calcite-label";
+import "@geoscene/calcite-components/components/calcite-input";
+import "../geoscene-charts-config-colors/index.js";
+export * from "./customElement.js";

package/dist/components/geoscene-charts-config-box-plot/customElement.js

@@ -0,0 +1,160 @@
+/* COPYRIGHT  - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c as l } from "../../chunks/runtime.js";
+import "@geoscene/toolkit/intl";
+import { isEqual as r } from "lodash-es";
+import "luxon";
+import "d3-array";
+import "@geoscene/toolkit/type";
+import "../../chunks/series-types.js";
+import { bM as n, bO as c } from "../../chunks/index.js";
+import "@geoscene/core/Graphic.js";
+import "@geoscene/core/renderers/support/jsonUtils.js";
+import "@geoscene/core/symbols/support/symbolUtils.js";
+import "@geoscene/geoscene-html-sanitizer";
+import "@geoscene/core/intl.js";
+import "@geoscene/core/layers/support/FeatureFilter.js";
+import "@geoscene/core/smartMapping/statistics/histogram.js";
+import "@geoscene/core/smartMapping/statistics/summaryStatistics.js";
+import "simple-statistics";
+import "@geoscene/core/request.js";
+import "@geoscene/core/core/sql.js";
+import "@geoscene/core/AttributeBinsGraphic.js";
+import "@geoscene/core/geometry/support/jsonUtils.js";
+import "@geoscene/core/rest/support/AttributeBinsQuery.js";
+import "@geoscene/core/rest/support/StatisticDefinition.js";
+import "@geoscene/core/time/TimeExtent.js";
+import "@geoscene/core/core/promiseUtils.js";
+import { h } from "../../chunks/index4.js";
+import "@geoscene/toolkit/dom";
+import { LitElement as d } from "@geoscene/lumina";
+import { css as m, html as s } from "lit";
+import { C as a } from "../../chunks/interfaces.js";
+const f = m`:host{overflow-y:auto;overflow-x:hidden;margin-bottom:var(--geoscene-charts-intra-section-margin);margin-top:var(--geoscene-charts-intra-section-margin);height:100%}`;
+class p extends d {
+  constructor() {
+    super(...arguments),
+      (this.onModelConfigChange = async (e) => {
+        const o = e?.detail.config ?? this.model.config;
+        this.layer === void 0 && (await this.updateFetchLayerFieldsInfo(o));
+      }),
+      (this.activeColorMatch = !1),
+      (this.popoverPlacement = "leading");
+  }
+  static {
+    this.properties = {
+      layerFieldsInfo: 16,
+      activeColorMatch: 16,
+      model: 0,
+      popoverPlacement: 1,
+      seriesColor: 0,
+      page: 1,
+      calculatedMinMaxBounds: 0,
+      layer: 0,
+      usePopupTemplateFieldsInfo: 5,
+    };
+  }
+  static {
+    this.styles = f;
+  }
+  async load() {
+    this.seriesColor !== void 0 && this.seriesColorChange(this.seriesColor),
+      await this.updateFetchLayerFieldsInfo(this.model?.config),
+      this.modelChange(this.model),
+      this.updateDataFilters();
+  }
+  willUpdate(e) {
+    let i = !1;
+    e.has("model") && this.modelChange(this.model, e.get("model")),
+      e.has("layer") &&
+        this.layer !== void 0 &&
+        !r(e.get("layer"), this.layer) &&
+        (i = !0),
+      e.has("usePopupTemplateFieldsInfo") &&
+        this.usePopupTemplateFieldsInfo !==
+          e.get("usePopupTemplateFieldsInfo") &&
+        (i = !0),
+      e.has("seriesColor") && this.seriesColorChange(this.seriesColor),
+      this.layerFieldsInfo === void 0 && (i = !0),
+      i && this.updateFetchLayerFieldsInfo();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(),
+      this.model.removeEventListener(
+        "geosceneChartsModelConfigChange",
+        this.onModelConfigChange
+      );
+  }
+  modelChange(e, i) {
+    i?.removeEventListener(
+      "geosceneChartsModelConfigChange",
+      this.onModelConfigChange
+    ),
+      e?.addEventListener(
+        "geosceneChartsModelConfigChange",
+        this.onModelConfigChange
+      );
+  }
+  seriesColorChange(e) {
+    (this.activeColorMatch = e?.get(0) === void 0),
+      this.model.colorMatch &&
+        e?.forEach((i, o) => {
+          let t;
+          i &&
+            ("fillSymbol" in i
+              ? (t = i.fillSymbol?.color)
+              : "lineSymbol" in i && (t = i.lineSymbol.color)),
+            e?.get(0) !== void 0 &&
+              t !== void 0 &&
+              !r(this.model.getSeriesColor(o), t) &&
+              this.model.setSeriesColor(t, o);
+        });
+  }
+  async updateDataFilters() {
+    const e = this.model.getDataFilters(),
+      i = e?.where,
+      o = this.layer?.definitionExpression ?? void 0;
+    r(i, o) ||
+      (await this.model.setDataFilters({
+        ...e,
+        where: o ?? void 0,
+      }));
+  }
+  async updateFetchLayerFieldsInfo(e) {
+    const i = e ?? this.model.config;
+    let o = this.layer;
+    if (!o) {
+      const t = h(i) ? i.iLayer : void 0;
+      t && (o = await n(t));
+    }
+    o && (this.layerFieldsInfo = await c(o, this.usePopupTemplateFieldsInfo));
+  }
+  render() {
+    let e;
+    switch (this.page) {
+      case a.Data:
+        e = s`<geoscene-charts-config-box-plot-data .model=${this.model} .layerFieldsInfo=${this.layerFieldsInfo}></geoscene-charts-config-box-plot-data>`;
+        break;
+      case a.Series:
+        e = s`<geoscene-charts-config-box-plot-series .model=${this.model} .activeColorMatch=${this.activeColorMatch} .popoverPlacement=${this.popoverPlacement}></geoscene-charts-config-box-plot-series>`;
+        break;
+      case a.Axes:
+        e = s`<geoscene-charts-config-axes .model=${this.model} show-min-y-bound-option show-max-y-bound-option .calculatedMinMaxBounds=${this.calculatedMinMaxBounds}></geoscene-charts-config-axes>`;
+        break;
+      case a.Guides:
+        e = s`<geoscene-charts-config-guides .model=${this.model} enable-y-axis-guide></geoscene-charts-config-guides>`;
+        break;
+      case a.Format:
+        e = s`<geoscene-charts-config-format .model=${this.model}></geoscene-charts-config-format>`;
+        break;
+      case a.General:
+        e = s`<geoscene-charts-config-general .model=${this.model}></geoscene-charts-config-general>`;
+        break;
+      default:
+        e = "";
+        break;
+    }
+    return e;
+  }
+}
+l("geoscene-charts-config-box-plot", p);
+export { p as ArcgisChartsConfigBoxPlot };

package/dist/components/geoscene-charts-config-box-plot/index.js

@@ -0,0 +1,7 @@
+import "../geoscene-charts-config-box-plot-data/index.js";
+import "../geoscene-charts-config-box-plot-series/index.js";
+import "../geoscene-charts-config-axes/index.js";
+import "../geoscene-charts-config-guides/index.js";
+import "../geoscene-charts-config-format/index.js";
+import "../geoscene-charts-config-general/index.js";
+export * from "./customElement.js";