@geoscene/charts-components 5.0.19

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

@@ -0,0 +1,216 @@
+/* COPYRIGHT  - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c as u } from "../../chunks/runtime.js";
+import { css as C, html as v } from "lit";
+import "@geoscene/toolkit/intl";
+import "lodash-es";
+import "luxon";
+import "d3-array";
+import "@geoscene/toolkit/type";
+import "../../chunks/series-types.js";
+import { a as i } from "../../chunks/rest-js-object-literals.js";
+import { ar as f } 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 y } from "../../chunks/popover-ui-utils.js";
+import {
+  a as S,
+  i as $,
+  m,
+  s as b,
+  U as g,
+} from "../../chunks/chart-ui-utils2.js";
+import { u as E } from "../../chunks/useT9n.js";
+import { createRef as n, ref as a } from "lit/directives/ref.js";
+import {
+  LitElement as I,
+  createEvent as s,
+  safeClassMap as l,
+  nothing as r,
+} from "@geoscene/lumina";
+const o = {
+    jsAppFlyout: "js-app-flyout",
+    sizeSection: "size-section",
+    dropdownText: "dropdown-text",
+    panelChildrenContainer: "panel-children-container",
+  },
+  w = C`.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 calcite-panel .size-section{padding:0 1rem 1rem;display:flex}:host calcite-panel .size-section calcite-label{flex:1 1 0px;width:0;padding:0}:host calcite-panel .size-section calcite-label .dropdown-text{max-width:75px;overflow:hidden;white-space:normal;text-overflow:ellipsis;cursor:pointer}.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 I {
+  constructor() {
+    super(...arguments),
+      (this._messages = E()),
+      (this.popoverElement = n()),
+      (this.lineWidthInputElement = n()),
+      (this.lineStyleDropdownElement = n()),
+      (this.geosceneChartsConfigPopoverClose = s()),
+      (this.geosceneChartsConfigSeriesPopoverColorChange = s()),
+      (this.geosceneChartsConfigSeriesPopoverLineStyleChange = s()),
+      (this.geosceneChartsConfigSeriesPopoverLineWidthChange = s()),
+      (this.geosceneChartsConfigSeriesPopoverNameChange = s());
+  }
+  static {
+    this.properties = {
+      messageOverrides: 0,
+      referenceElement: 0,
+      selectedName: 1,
+      selectedColor: 0,
+      selectedLineStyle: 1,
+      selectedSeriesIndex: 9,
+      selectedLineWidth: 9,
+      placement: 1,
+      open: 5,
+    };
+  }
+  static {
+    this.styles = w;
+  }
+  async reposition() {
+    await this.popoverElement.value?.reposition();
+  }
+  updated() {
+    y(this.popoverElement.value, this.open),
+      this.hasUpdated ||
+        setTimeout(() => {
+          this.popoverElement.value?.reposition();
+        }, S.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,
+      [c, p, d] = t,
+      h = f * 255;
+    (this.selectedColor = [c, p, d, h]),
+      this.geosceneChartsConfigSeriesPopoverColorChange.emit({
+        color: [c, p, d, h],
+      });
+  }
+  lineStyleChange() {
+    const e = this.lineStyleDropdownElement.value?.selectedItems[0].accessKey;
+    (this.selectedLineStyle = e),
+      this.geosceneChartsConfigSeriesPopoverLineStyleChange.emit({
+        lineStyle: e,
+      });
+  }
+  lineWidthChange() {
+    const e = Number.parseInt(this.lineWidthInputElement.value?.value ?? "");
+    this.lineWidthInputElement.value?.value !== void 0 &&
+    $(
+      e,
+      this.lineWidthInputElement.value.min,
+      this.lineWidthInputElement.value.max
+    )
+      ? ((this.selectedLineWidth = e),
+        this.geosceneChartsConfigSeriesPopoverLineWidthChange.emit({
+          lineWidth: e,
+        }),
+        m({
+          inputElement: this.lineWidthInputElement.value,
+          status: g.IDLE,
+        }))
+      : this.lineWidthInputElement.value &&
+        m({
+          inputElement: this.lineWidthInputElement.value,
+          status: g.INVALID,
+        });
+  }
+  getSelectedLineStyleInfo() {
+    let e, t;
+    switch (this.selectedLineStyle) {
+      case i.Dot:
+        (e = "line-dotted"), (t = this._messages.dot ?? "");
+        break;
+      case i.Dash:
+        (e = "line-dashed"), (t = this._messages.dash ?? "");
+        break;
+      case i.Solid:
+      default:
+        (e = "line-solid"), (t = this._messages.solid ?? "");
+        break;
+    }
+    return { icon: e, style: t };
+  }
+  render() {
+    const e = this.selectedColor;
+    return v`<div class=${l({
+      [o.jsAppFlyout]: !0,
+    })}><calcite-popover .referenceElement=${
+      this.referenceElement ?? document.body
+    } .placement=${this.placement} @calcitePopoverClose=${
+      this.closePopover
+    } .open=${this.open} label auto-close ${a(
+      this.popoverElement
+    )}><calcite-panel .heading=${
+      this._messages.seriesElement
+    } closable .closed=${!this.open} @calcitePanelClose=${
+      this.closePopover
+    }><div class=${l(o.panelChildrenContainer)}><calcite-label>${
+      this._messages.label
+    }<calcite-input type=text .value=${this.selectedName} @calciteInputInput=${
+      this.seriesNameChange
+    }></calcite-input></calcite-label></div><div class=${l(
+      o.sizeSection
+    )}><calcite-label>${
+      this._messages.style
+    }<calcite-dropdown @calciteDropdownSelect=${this.lineStyleChange} ${a(
+      this.lineStyleDropdownElement
+    )}><calcite-button .iconEnd=${
+      this.getSelectedLineStyleInfo().icon
+    } slot=trigger kind=neutral appearance=outline-fill><label class=${l(
+      o.dropdownText
+    )}>${
+      this.getSelectedLineStyleInfo().style
+    }</label></calcite-button><calcite-dropdown-group><calcite-dropdown-item icon-end=line-solid .selected=${
+      this.selectedLineStyle === i.Solid
+    } accesskey=${i.Solid ?? r}>${
+      this._messages.solid
+    }</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dotted .selected=${
+      this.selectedLineStyle === i.Dot
+    } accesskey=${i.Dot ?? r}>${
+      this._messages.dot
+    }</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dashed .selected=${
+      this.selectedLineStyle === i.Dash
+    } accesskey=${i.Dash ?? r}>${
+      this._messages.dash
+    }</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown></calcite-label><calcite-label>${
+      this._messages.width
+    }<calcite-input type=number min=1 step=any .value=${b(
+      this.selectedLineWidth
+    )} @calciteInputInput=${this.lineWidthChange} ${a(
+      this.lineWidthInputElement
+    )}></calcite-input></calcite-label></div><div class=${l(
+      o.panelChildrenContainer
+    )}><geoscene-charts-config-colors .heading=${
+      this._messages.lineColor
+    } .rgba=${e} @geosceneColorSelect=${
+      this.colorChange
+    }></geoscene-charts-config-colors></div></calcite-panel></calcite-popover></div>`;
+  }
+}
+u("geoscene-charts-config-line-chart-series-popover", x);
+export { x as GeosceneChartsConfigLineChartSeriesPopover };

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

@@ -0,0 +1,10 @@
+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/calcite-components/components/calcite-dropdown";
+import "@geoscene/calcite-components/components/calcite-button";
+import "@geoscene/calcite-components/components/calcite-dropdown-group";
+import "@geoscene/calcite-components/components/calcite-dropdown-item";
+import "../geoscene-charts-config-colors/index.js";
+export * from "./customElement.js";

package/dist/components/geoscene-charts-config-line-style/customElement.js

@@ -0,0 +1,159 @@
+/* COPYRIGHT  - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c as p } from "../../chunks/runtime.js";
+import { css as m, html as l } from "lit";
+import "@geoscene/toolkit/type";
+import "../../chunks/series-types.js";
+import { f as y, a as t } from "../../chunks/rest-js-object-literals.js";
+import {
+  i as u,
+  m as o,
+  s as g,
+  U as c,
+} from "../../chunks/chart-ui-utils2.js";
+import { u as S } from "../../chunks/useT9n.js";
+import { createRef as r, ref as d } from "lit/directives/ref.js";
+import {
+  LitElement as f,
+  createEvent as h,
+  safeClassMap as s,
+  nothing as n,
+} from "@geoscene/lumina";
+const a = {
+    sizeSection: "size-section",
+    dropdownText: "dropdown-text",
+    colorPickerContainer: "color-picker-container",
+  },
+  w = m`.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}:host geoscene-charts-config-colors{padding:var(--geoscene-charts-panel-padding);padding-bottom:1rem}:host .size-section{padding:1rem;display:flex}:host .size-section calcite-label{flex:1 1 0px;width:0}:host .size-section calcite-label .dropdown-text{max-width:75px;overflow:hidden;white-space:normal;text-overflow:ellipsis;cursor:pointer}:host .color-picker-container{display:flex}:host .color-picker-container calcite-label{flex:1 1 0px;width:0}:host .color-picker-container calcite-label .dropdown-text{max-width:75px;overflow:hidden;white-space:normal;text-overflow:ellipsis;cursor:pointer}`;
+class v extends f {
+  constructor() {
+    super(...arguments),
+      (this._messages = S()),
+      (this.lineWidthInputElement = r()),
+      (this.lineStyleDropdownElement = r()),
+      (this.lineStyle = {
+        type: y.SLS,
+      }),
+      (this.geosceneChartsConfigLineStyleChange = h()),
+      (this.geosceneChartsConfigLineStyleClose = h());
+  }
+  static {
+    this.properties = {
+      messageOverrides: 0,
+      lineStyle: 0,
+      header: 1,
+      open: 5,
+      enableClose: 5,
+      usePanel: 5,
+    };
+  }
+  static {
+    this.styles = w;
+  }
+  closePanel(e) {
+    e.target.closed &&
+      this.enableClose === !0 &&
+      ((this.open = !1), this.geosceneChartsConfigLineStyleClose.emit());
+  }
+  colorChange(e) {
+    (this.lineStyle.color = e.detail), this.emitLineStyleEvent();
+  }
+  lineStyleChange() {
+    const e = this.lineStyleDropdownElement.value?.selectedItems[0].accessKey;
+    this.lineStyle.style !== e &&
+      ((this.lineStyle.style = e),
+      (this.lineStyle = { ...this.lineStyle }),
+      this.emitLineStyleEvent());
+  }
+  selectedLineStyle() {
+    let e, i;
+    switch (this.lineStyle?.style) {
+      case t.Dot:
+        (e = "line-dotted"), (i = this._messages.dot ?? "");
+        break;
+      case t.Dash:
+        (e = "line-dashed"), (i = this._messages.dash ?? "");
+        break;
+      case t.Solid:
+      default:
+        (e = "line-solid"), (i = this._messages.solid ?? "");
+        break;
+    }
+    return { icon: e, style: i };
+  }
+  widthChange() {
+    const e = this.lineWidthInputElement.value?.value;
+    e !== void 0 &&
+    u(
+      e,
+      this.lineWidthInputElement.value?.min,
+      this.lineWidthInputElement.value?.max
+    )
+      ? ((this.lineStyle.width = Number.parseInt(e)),
+        this.emitLineStyleEvent(),
+        this.lineWidthInputElement.value &&
+          o({
+            inputElement: this.lineWidthInputElement.value,
+            status: c.IDLE,
+          }))
+      : this.lineWidthInputElement.value &&
+        o({
+          inputElement: this.lineWidthInputElement.value,
+          status: c.INVALID,
+        });
+  }
+  emitLineStyleEvent() {
+    Number.isNaN(
+      Number.parseInt(this.lineStyle?.color?.[0]?.toString() ?? "")
+    ) && (this.lineStyle.color = void 0),
+      this.geosceneChartsConfigLineStyleChange.emit(this.lineStyle);
+  }
+  render() {
+    const e = [
+      l`<div class=${s(a.sizeSection)}><calcite-label>${
+        this._messages.style
+      }<calcite-dropdown @calciteDropdownSelect=${this.lineStyleChange} ${d(
+        this.lineStyleDropdownElement
+      )}><calcite-button .iconEnd=${
+        this.selectedLineStyle().icon
+      } slot=trigger kind=neutral appearance=outline-fill scale=m><label class=${s(
+        a.dropdownText
+      )}>${
+        this.selectedLineStyle().style
+      }</label></calcite-button><calcite-dropdown-group><calcite-dropdown-item icon-end=line-solid .selected=${
+        this.lineStyle?.style === t.Solid
+      } accesskey=${t.Solid ?? n}>${
+        this._messages.solid
+      }</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dotted .selected=${
+        this.lineStyle?.style === t.Dot
+      } accesskey=${t.Dot ?? n}>${
+        this._messages.dot
+      }</calcite-dropdown-item><calcite-dropdown-item icon-end=line-dashed .selected=${
+        this.lineStyle?.style === t.Dash
+      } accesskey=${t.Dash ?? n}>${
+        this._messages.dash
+      }</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown></calcite-label><calcite-label>${
+        this._messages.width
+      }<calcite-input type=number min=1 step=any .value=${g(
+        this.lineStyle?.width
+      )} @calciteInputInput=${this.widthChange} ${d(
+        this.lineWidthInputElement
+      )}></calcite-input></calcite-label></div>`,
+      l`<div class=${s(
+        a.colorPickerContainer
+      )}><geoscene-charts-config-colors .rgba=${
+        this.lineStyle?.color ?? void 0
+      } @geosceneColorSelect=${
+        this.colorChange
+      }></geoscene-charts-config-colors></div>`,
+    ];
+    return this.usePanel !== !1
+      ? l`<calcite-panel .heading=${
+          this.header ?? this._messages.header
+        } .closed=${this.open === !1} .closable=${
+          this.enableClose
+        } @calcitePanelClose=${this.closePanel}>${e}</calcite-panel>`
+      : e;
+  }
+}
+p("geoscene-charts-config-line-style", v);
+export { v as GeosceneChartsConfigLineStyle };

package/dist/components/geoscene-charts-config-line-style/index.js

@@ -0,0 +1,9 @@
+import "@geoscene/calcite-components/components/calcite-label";
+import "@geoscene/calcite-components/components/calcite-dropdown";
+import "@geoscene/calcite-components/components/calcite-button";
+import "@geoscene/calcite-components/components/calcite-dropdown-group";
+import "@geoscene/calcite-components/components/calcite-dropdown-item";
+import "@geoscene/calcite-components/components/calcite-input";
+import "../geoscene-charts-config-colors/index.js";
+import "@geoscene/calcite-components/components/calcite-panel";
+export * from "./customElement.js";

package/dist/components/geoscene-charts-config-number-format/customElement.js

@@ -0,0 +1,102 @@
+/* COPYRIGHT  - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c as o } from "../../chunks/runtime.js";
+import { css as u, html as h } from "lit";
+import { i as p, m, s as d, U as r } from "../../chunks/chart-ui-utils2.js";
+import { u as g } from "../../chunks/useT9n.js";
+import { createRef as b, ref as f } from "lit/directives/ref.js";
+import {
+  LitElement as v,
+  createEvent as F,
+  safeClassMap as a,
+} from "@geoscene/lumina";
+const s = {
+    container: "container",
+    label: "label",
+    numberInput: "number-input",
+  },
+  C = u`.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)}.container{width:var(--geoscene-charts-config-calcite-block-width, var(--geoscene-charts-config-calcite-block-default-width));height:var(--geoscene-charts-config-calcite-block-height, var(--geoscene-charts-config-calcite-block-default-height));margin-top:.5rem}.container>.number-input{margin-bottom:.5rem;display:flex}.container>.number-input>div{width:100%}.label{display:flex;margin-bottom:.5rem;justify-content:space-between}`;
+class I extends v {
+  constructor() {
+    super(...arguments),
+      (this._messages = g()),
+      (this.decimalPlacesInputElement = b()),
+      (this.geosceneChartsConfigNumberFormatChange = F());
+  }
+  static {
+    this.properties = { messageOverrides: 0, numberFormat: 0 };
+  }
+  static {
+    this.styles = C;
+  }
+  onDecimalPlacesChange() {
+    const t = this.decimalPlacesInputElement.value?.value,
+      i = Math.floor(Number(t)),
+      n = i === Number(t) && i >= 0;
+    if (
+      t !== void 0 &&
+      n &&
+      p(
+        t,
+        this.decimalPlacesInputElement.value?.min,
+        this.decimalPlacesInputElement.value?.max
+      )
+    ) {
+      const c = Number.parseInt(t),
+        e = {
+          minimumFractionDigits: this.numberFormat?.minimumFractionDigits,
+          maximumFractionDigits: c,
+        };
+      e.maximumFractionDigits !== void 0 &&
+        e.minimumFractionDigits !== void 0 &&
+        e.minimumFractionDigits > e.maximumFractionDigits &&
+        (e.minimumFractionDigits = e.maximumFractionDigits);
+      const l = this.getUpdatedNumberFormat(e);
+      this.geosceneChartsConfigNumberFormatChange.emit(l),
+        this.decimalPlacesInputElement.value &&
+          m({
+            inputElement: this.decimalPlacesInputElement.value,
+            status: r.IDLE,
+          });
+    } else
+      this.decimalPlacesInputElement.value &&
+        m({
+          inputElement: this.decimalPlacesInputElement.value,
+          status: r.INVALID,
+        });
+  }
+  onShowThousandsSeparatorChange(t) {
+    const i = t.target.checked,
+      n = this.getUpdatedNumberFormat({
+        useGrouping: i,
+      });
+    this.geosceneChartsConfigNumberFormatChange.emit(n);
+  }
+  getUpdatedNumberFormat(t) {
+    return {
+      ...this.numberFormat,
+      ...t,
+    };
+  }
+  render() {
+    return h`<div class=${a(s.container)}><calcite-label class=${a(s.label)}>${
+      this._messages.decimalPlaces
+    }<calcite-input type=number class=${a(
+      s.numberInput
+    )} min=0 max=20 step=1 .value=${d(
+      this.numberFormat?.maximumFractionDigits,
+      2
+    )} @calciteInputInput=${this.onDecimalPlacesChange} ${f(
+      this.decimalPlacesInputElement
+    )}></calcite-input></calcite-label><calcite-label layout=inline-space-between class=${a(
+      s.label
+    )}>${
+      this._messages.showThousandSeparators
+    }<calcite-switch name=useGrouping .checked=${!!(
+      this.numberFormat?.useGrouping ?? !0
+    )} @calciteSwitchChange=${
+      this.onShowThousandsSeparatorChange
+    }></calcite-switch></calcite-label></div>`;
+  }
+}
+o("geoscene-charts-config-number-format", I);
+export { I as GeosceneChartsConfigNumberFormat };

package/dist/components/geoscene-charts-config-number-format/index.js

@@ -0,0 +1,4 @@
+import "@geoscene/calcite-components/components/calcite-label";
+import "@geoscene/calcite-components/components/calcite-input";
+import "@geoscene/calcite-components/components/calcite-switch";
+export * from "./customElement.js";

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

@@ -0,0 +1,164 @@
+/* COPYRIGHT  - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c as C } from "../../chunks/runtime.js";
+import "@geoscene/toolkit/intl";
+import { isEqual as c, cloneDeep as d } from "lodash-es";
+import "luxon";
+import "d3-array";
+import "@geoscene/toolkit/type";
+import "../../chunks/series-types.js";
+import { f as u } from "../../chunks/rest-js-object-literals.js";
+import { bM as y, bO as I } 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 as v } from "../../chunks/index4.js";
+import "@geoscene/toolkit/dom";
+import { LitElement as F, createEvent as f } from "@geoscene/lumina";
+import { css as L, html as n } from "lit";
+import { C as h } from "../../chunks/interfaces.js";
+const S = L`: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 b extends F {
+  constructor() {
+    super(...arguments),
+      (this.onModelConfigChange = async (e) => {
+        const o = e?.detail.config ?? this.model.config;
+        this.layer === void 0 && (await this.updateFetchLayerFieldsInfo(o));
+      }),
+      (this.popoverPlacement = "leading"),
+      (this.geosceneChartsConfigNoSeriesUpdate = f()),
+      (this.geosceneChartsConfigWebChartChange = f());
+  }
+  static {
+    this.properties = {
+      layerFieldsInfo: 16,
+      model: 0,
+      popoverPlacement: 1,
+      seriesColor: 0,
+      calculatedMinMaxBounds: 0,
+      page: 1,
+      layer: 0,
+      usePopupTemplateFieldsInfo: 5,
+      filterBySelection: 5,
+      chartData: 0,
+    };
+  }
+  static {
+    this.styles = S;
+  }
+  async load() {
+    this.seriesColor !== void 0 && this.seriesColorChange(this.seriesColor),
+      await this.updateFetchLayerFieldsInfo(this.model?.config),
+      this.modelChange(this.model);
+  }
+  willUpdate(e) {
+    let i = !1;
+    e.has("model") && this.modelChange(this.model, e.get("model")),
+      e.has("layer") &&
+        this.layer !== void 0 &&
+        !c(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) {
+    const { slices: i, groupedSlices: o, groupOfSlices: r } = e?.get(0) ?? {};
+    let t = [];
+    this.filterBySelection === !0
+      ? (t =
+          this.model.slices?.map(
+            (a) =>
+              i?.find((s) => s.sliceId === a.sliceId) ??
+              o?.find((s) => s.sliceId === a.sliceId) ??
+              a
+          ) ?? [])
+      : (t = (i ?? []).concat(o ?? [])),
+      t.forEach((a, s) => {
+        const p = this.model.slices?.find((g) => g.sliceId === t[s].sliceId);
+        p && (t[s] = { ...t[s], ...p });
+        const l = t[s].fillSymbol;
+        l !== void 0 &&
+          !c(l?.outline?.color, l?.color) &&
+          (l.outline = {
+            ...(l.outline ?? {}),
+            type: u.SLS,
+            color: l.color,
+          });
+      });
+    const m = (o ?? []).map((a) => a.sliceId);
+    o !== void 0 &&
+      !c(m, this.model.groupedSliceIds) &&
+      (this.model.groupedSliceIds = d(m)),
+      c(t, this.model.slices) || (this.model.slices = d(t)),
+      r !== void 0 &&
+        !c(r, this.model.sliceGrouping) &&
+        (this.model.sliceGrouping = d(r));
+  }
+  async updateFetchLayerFieldsInfo(e) {
+    const i = e ?? this.model.config;
+    let o = this.layer;
+    if (!o) {
+      const r = v(i) ? i.iLayer : void 0;
+      r && (o = await y(r));
+    }
+    o && (this.layerFieldsInfo = await I(o, this.usePopupTemplateFieldsInfo));
+  }
+  render() {
+    let e;
+    switch (this.page) {
+      case h.Data:
+        e = n`<geoscene-charts-config-pie-chart-data .model=${this.model} .layerFieldsInfo=${this.layerFieldsInfo}></geoscene-charts-config-pie-chart-data>`;
+        break;
+      case h.Slices:
+        e = n`<geoscene-charts-config-pie-chart-slices .model=${this.model} .chartData=${this.chartData} .popoverPlacement=${this.popoverPlacement}></geoscene-charts-config-pie-chart-slices>`;
+        break;
+      case h.Format:
+        e = n`<geoscene-charts-config-format .model=${this.model}></geoscene-charts-config-format>`;
+        break;
+      case h.General:
+        e = n`<geoscene-charts-config-general .model=${this.model}></geoscene-charts-config-general>`;
+        break;
+      default:
+        e = "";
+        break;
+    }
+    return e;
+  }
+}
+C("geoscene-charts-config-pie-chart", b);
+export { b as GeosceneChartsConfigPieChart };

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

@@ -0,0 +1,5 @@
+import "../geoscene-charts-config-pie-chart-data/index.js";
+import "../geoscene-charts-config-pie-chart-slices/index.js";
+import "../geoscene-charts-config-format/index.js";
+import "../geoscene-charts-config-general/index.js";
+export * from "./customElement.js";