@geoscene/charts-components 5.0.19

package/dist/cdn/VGRXIFGH.js

@@ -0,0 +1,473 @@
+/* COPYRIGHT  - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { a as b } from "./HAGP76HP.js";
+import { a as P } from "./FEJD2JHY.js";
+import e from "./5752NFTR.js";
+import "./DPJE33GY.js";
+import { a as M } from "./VAB3BCTX.js";
+import c from "./P5SSZWMH.js";
+import "./UG7LOBJE.js";
+import a from "./A7YNU2NS.js";
+import { B as G, c as x, i as f, m as _ } from "./4B3QBH5T.js";
+import "./XLDY6CTA.js";
+import { f as h } from "./KUVOINJC.js";
+import "./NKG4FLLR.js";
+import {
+  A as s,
+  B as g,
+  D as C,
+  F as N,
+  g as E,
+  h as d,
+  x as m,
+  y as p,
+  z as T,
+} from "./KRZ433BT.js";
+import "./OR4HXHSY.js";
+export default $geoscene.t(
+  ([, , , , , , , , , , , , , , , { D: S, Ma: I }, , { a: y, h: u, s: z }]) => {
+    var a = {
+        sectionLabel: "section-label",
+        label: "label",
+        sliceList: "slice-list",
+        radioGroup: "radio-group",
+        pieDonutLabelsContainer: "pie-donut-labels-container",
+        sliderInputContainer: "slider-input-container",
+        groupingLabelContainer: "grouping-label-container",
+        numberInput: "number-input",
+      },
+      k = E`:host{display:flex;flex-direction:column;width:var(--geoscene-charts-config-calcite-block-default-width);margin:var(--geoscene-charts-config-calcite-block-default-margin)}.section-label{display:flex;margin:var(--geoscene-charts-config-margin-major) 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)}.label{display:flex;margin-left:var(--geoscene-charts-config-margin-minor);margin-right:var(--geoscene-charts-config-margin-minor);margin-bottom:var(--geoscene-charts-config-margin-minor);justify-content:space-between}.label .grouping-label-container{display:flex;justify-content:space-between}.label .slider-input-container{display:flex}.label .slider-input-container calcite-slider{--calcite-label-margin-bottom: var(--geoscene-charts-intra-section-margin) !important;margin-right:var(--geoscene-charts-config-margin-minor);flex-grow:1}.label .slider-input-container .number-input{width:8rem}.slice-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)}.radio-group{margin-top:var(--geoscene-charts-config-margin-minor)}.pie-donut-labels-container{display:flex;justify-content:space-between;margin-top:calc(var(--geoscene-charts-config-margin-minor) * -3)}`,
+      L = class extends T {
+        constructor() {
+          super(...arguments),
+            (this._messages = M()),
+            (this.slicesPopover = null),
+            (this.donutSizeSliderElement = m()),
+            (this.groupingThresholdElement = m()),
+            (this.groupingThresholdSliderElement = m()),
+            (this.labelCharacterLimitElement = m()),
+            (this.decimalPlacesElement = m()),
+            (this.open = !1),
+            (this.onDonutSizeSliderChange = f(() => {
+              this.donutSizeSliderElement.value &&
+                Number.isInteger(this.donutSizeSliderElement.value?.value) &&
+                (this.model.innerRadiusSize =
+                  this.donutSizeSliderElement.value.value ?? I);
+            }, y.SliderTimer)),
+            (this.onGroupingThresholdSliderChange = f(() => {
+              let e = this.groupingThresholdSliderElement.value?.value;
+              e !== void 0 && !Number.isNaN(e)
+                ? (this.groupingThresholdElement?.value &&
+                    (this.groupingThresholdElement.value.value = e.toString()),
+                  this.groupingThresholdSliderElement.value &&
+                    (this.groupingThresholdSliderElement.value.value = e),
+                  (this.model.groupingThreshold = e))
+                : (this.model.groupingThreshold = 0);
+            }, y.SliderTimer)),
+            (this.sliceNameChange = (e) => {
+              if (e.detail !== null || e.detail !== void 0) {
+                let l = e.detail?.name,
+                  i = this.model.slices?.findIndex(
+                    (r) => r.sliceId === this.selectedSliceId
+                  ),
+                  t = this.model.sliceGrouping;
+                i != null && i >= 0
+                  ? this.model.setSliceName(l, i)
+                  : t?.sliceId === this.selectedSliceId &&
+                    t !== void 0 &&
+                    (this.model.sliceGrouping = { ...t, label: l });
+              }
+            }),
+            (this.sliceColorChange = (e) => {
+              if (e.detail !== null && e.detail !== void 0) {
+                let { color: l } = e.detail,
+                  i = this.model.slices?.findIndex(
+                    (r) => r.sliceId === this.selectedSliceId
+                  ),
+                  t = this.model.sliceGrouping;
+                i != null && i >= 0
+                  ? ((this.model.colorMatch = !1),
+                    this.model.setSliceColor(l, i))
+                  : t?.sliceId === this.selectedSliceId &&
+                    t !== void 0 &&
+                    ((this.model.colorMatch = !1),
+                    (this.model.sliceGrouping = {
+                      ...t,
+                      fillSymbol: { ...t.fillSymbol, type: G.SFS, color: l },
+                    }));
+              }
+            }),
+            (this.slicesPopoverClose = (e) => {
+              let { selectedSliceId: l } = e.detail;
+              l === this.selectedSliceId &&
+                ((this.selectedSliceId = void 0),
+                (this.slicesPopover = P(this.slicesPopover)));
+            }),
+            (this.onModelConfigChange = () => {
+              this.requestUpdate();
+            }),
+            (this.popoverPlacement = "leading");
+        }
+        static {
+          this.properties = {
+            selectedSliceId: 16,
+            messageOverrides: 0,
+            model: 0,
+            popoverPlacement: 1,
+            chartData: 0,
+          };
+        }
+        static {
+          this.styles = k;
+        }
+        load() {
+          this.modelChange(this.model), this.onModelConfigChange();
+        }
+        willUpdate(e) {
+          e.has("model") && this.modelChange(this.model, e.get("model")),
+            e.has("selectedSliceId") && this.selectedSliceIdChange();
+        }
+        disconnectedCallback() {
+          super.disconnectedCallback(),
+            this.removeSlicesPopover(),
+            this.model.removeEventListener(
+              "geosceneChartsModelConfigChange",
+              this.onModelConfigChange
+            );
+        }
+        modelChange(e, l) {
+          l?.removeEventListener(
+            "geosceneChartsModelConfigChange",
+            this.onModelConfigChange
+          ),
+            e?.addEventListener(
+              "geosceneChartsModelConfigChange",
+              this.onModelConfigChange
+            );
+        }
+        selectedSliceIdChange() {
+          if (!_(this.selectedSliceId)) {
+            let e = this.model.slices,
+              l = this.model.sliceGrouping,
+              i,
+              t;
+            if (this.selectedSliceId === l?.sliceId)
+              (i = l?.label), (t = l?.fillSymbol?.color);
+            else if (e !== void 0) {
+              let r = e.findIndex((n) => n.sliceId === this.selectedSliceId);
+              (i = this.model.getSliceName(r)),
+                (t = this.model.getSliceColor(r));
+            }
+            (this.slicesPopover = C(
+              d`<geoscene-charts-config-pie-chart-slices-popover .referenceElement=${this.el} .placement=${this.popoverPlacement} .open=${this.open} .selectedSliceId=${this.selectedSliceId} .selectedName=${i} .selectedColor=${t} @geosceneChartsConfigSlicesPopoverColorChange=${this.sliceColorChange} @geosceneChartsConfigSlicesPopoverNameChange=${this.sliceNameChange} @geosceneChartsConfigPopoverClose=${this.slicesPopoverClose}></geoscene-charts-config-pie-chart-slices-popover>`
+            )),
+              this.slicesPopover &&
+                !document.body.contains(this.slicesPopover) &&
+                document.body.appendChild(this.slicesPopover);
+          }
+        }
+        removeSlicesPopover() {
+          this.slicesPopover !== void 0 &&
+            this.slicesPopover !== null &&
+            ((this.slicesPopover.open = !1),
+            (this.slicesPopover.selectedName = void 0),
+            (this.slicesPopover.selectedColor = void 0),
+            (this.slicesPopover = P(this.slicesPopover)));
+        }
+        buildSliceListItem() {
+          let e = "#CCCCCC",
+            l = "minus-square",
+            i = [],
+            t = this.model.slices,
+            r = this.chartData?.dataItems;
+          r &&
+            (t = t?.filter(
+              (o) =>
+                r?.findIndex(
+                  (c) => c.geoscene_charts_slice_id === o.sliceId
+                ) !== -1
+            )),
+            t?.forEach((o) => {
+              if (o.fillSymbol?.color !== void 0) {
+                l = "square-f";
+                let [c, v, $, w] = [...o.fillSymbol.color];
+                e = `rgba(${c},${v},${$},${w / 255})`;
+              }
+              if (
+                o !== void 0 &&
+                !this.model.groupedSliceIds.includes(o.sliceId)
+              ) {
+                let c = o.sliceId;
+                c === S.emptySliceId
+                  ? (c = this._messages.emptySlice ?? "")
+                  : c === S.nullSliceId && (c = this._messages.nullSlice ?? ""),
+                  i?.push(
+                    b(
+                      o.sliceId,
+                      d`<calcite-list-item .label=${
+                        o.label ?? o.sliceId
+                      } .description=${c} .value=${o.sliceId} .selected=${
+                        this.selectedSliceId === o.sliceId
+                      } @click=${
+                        this.openSlicesPopover
+                      }><calcite-icon slot=content-end .icon=${l} style=${g({
+                        color: e,
+                      })}></calcite-icon></calcite-list-item>`
+                    )
+                  );
+              }
+            });
+          let n = this.model.sliceGrouping;
+          if (n?.fillSymbol?.color !== void 0) {
+            l = "square-f";
+            let [o, c, v, $] = [...n.fillSymbol.color];
+            e = `rgba(${o},${c},${v},${$ / 255})`;
+          }
+          return (
+            this.model.groupedSliceIds.length > 0 &&
+              i?.push(
+                b(
+                  n?.sliceId,
+                  d`<calcite-list-item .label=${
+                    n?.label ?? n?.sliceId ?? ""
+                  } .description=${this._messages.groupedSlices} .value=${
+                    n?.sliceId ?? ""
+                  } .selected=${this.selectedSliceId === n?.sliceId} @click=${
+                    this.openSlicesPopover
+                  }><calcite-icon slot=content-end .icon=${l} style=${g({
+                    color: e,
+                  })}></calcite-icon></calcite-list-item>`
+                )
+              ),
+            i
+          );
+        }
+        buildGroupedSlicesListItem() {
+          let e = "#CCCCCC",
+            l = "minus-square",
+            i = [];
+          return (
+            this.model.slices?.forEach((t) => {
+              if (t.fillSymbol?.color !== void 0) {
+                l = "square-f";
+                let [r, n, o, c] = [...t.fillSymbol.color];
+                e = `rgba(${r},${n},${o},${c / 255})`;
+              }
+              t !== void 0 &&
+                this.model.groupedSliceIds.includes(t.sliceId) &&
+                i?.push(
+                  b(
+                    t.sliceId,
+                    d`<calcite-list-item .label=${
+                      t.label ?? t.sliceId
+                    } .description=${t.sliceId} .value=${t.sliceId} .selected=${
+                      this.selectedSliceId === t.sliceId
+                    } @click=${
+                      this.openSlicesPopover
+                    }><calcite-icon slot=content-end .icon=${l} style=${g({
+                      color: e,
+                    })}></calcite-icon></calcite-list-item>`
+                  )
+                );
+            }),
+            i
+          );
+        }
+        buildSliceList() {
+          return d`<calcite-list label class=${s(
+            a.sliceList
+          )} selection-mode=single selection-appearance=border @calciteListOrderChange=${
+            this.onCalciteListOrderChange
+          }>${this.buildSliceListItem()}</calcite-list>`;
+        }
+        buildGroupedSliceList() {
+          return d`<calcite-list label class=${s(
+            a.sliceList
+          )} selection-mode=single selection-appearance=border @calciteListOrderChange=${
+            this.onCalciteListOrderChange
+          }>${this.buildGroupedSlicesListItem()}</calcite-list>`;
+        }
+        onGroupingThresholdChange(e) {
+          let l = e.target.value,
+            i = Number.parseInt(l);
+          i > 100 ? (i = 100) : i < 0 && (i = 0),
+            Number.isNaN(i)
+              ? (this.model.groupingThreshold = 0)
+              : (this.groupingThresholdElement?.value &&
+                  (this.groupingThresholdElement.value.value = i.toString()),
+                (this.model.groupingThreshold = i),
+                this.groupingThresholdSliderElement.value &&
+                  (this.groupingThresholdSliderElement.value.value = i));
+        }
+        onLabelCharacterLimitChange(e) {
+          let l = e.target.value,
+            i = Number.parseInt(l);
+          i < 1 && (i = 1),
+            Number.isNaN(i)
+              ? (this.model.labelCharacterLimit = null)
+              : (this.labelCharacterLimitElement.value &&
+                  (this.labelCharacterLimitElement.value.value = i.toString()),
+                (this.model.labelCharacterLimit = i));
+        }
+        onDecimalPlacesChange(e) {
+          let l = e.target.value,
+            i = Number.parseInt(l);
+          i < 0 ? (i = 0) : i > 20 && (i = 20),
+            Number.isNaN(i)
+              ? (this.model.decimalPlaces = 0)
+              : (this.decimalPlacesElement.value &&
+                  (this.decimalPlacesElement.value.value = i.toString()),
+                (this.model.decimalPlaces = i));
+        }
+        onDisplayTypeChange(e) {
+          let l = e.target.selectedItem;
+          this.model.displayType = l.value;
+        }
+        resetSlicesOriginal() {
+          (this.selectedSliceId = void 0),
+            (this.model.colorMatch = !0),
+            this.model.resetSlices();
+        }
+        onCalciteListOrderChange(e) {
+          if (e.detail !== null && e.detail !== void 0) {
+            let { newIndex: l, oldIndex: i } = e.detail;
+            this.model.moveSeries(i, l);
+          }
+        }
+        openSlicesPopover(e) {
+          e.stopImmediatePropagation(), this.removeSlicesPopover();
+          let l = e.target,
+            i = l.localName === "calcite-list-item" ? l : l.parentNode;
+          i.value === this.model.sliceGrouping?.sliceId
+            ? (this.selectedSliceId = this.model.sliceGrouping?.sliceId)
+            : (this.selectedSliceId = i.value),
+            (this.open = !0);
+        }
+        createTooltip(e) {
+          let l = e.target;
+          (this.tooltip = C(
+            d`<calcite-tooltip style=${g({
+              opacity: 1,
+              zIndex: "var(--calcite-floating-ui-z-index)",
+            })} .referenceElement=${l} open placement=top .innerHTML=${
+              this._messages.groupingInfo ?? "" ?? ""
+            }></calcite-tooltip>`
+          )),
+            document.body.appendChild(this.tooltip);
+        }
+        destroyTooltip() {
+          z(this.tooltip);
+        }
+        render() {
+          return d`<div class=${s(a.sectionLabel)}>${
+            this._messages.settings
+          }</div><calcite-label class=${s(a.label)}>${
+            this._messages.shape
+          }<calcite-slider min=0 max=100 step=1 snap .value=${
+            this.model.innerRadiusSize ?? I
+          } @calciteSliderChange=${this.onDonutSizeSliderChange} ${p(
+            this.donutSizeSliderElement
+          )}></calcite-slider></calcite-label><div class=${s(
+            a.pieDonutLabelsContainer
+          )}><calcite-label class=${s(a.label)}>${
+            this._messages.pie
+          }</calcite-label><calcite-label class=${s(a.label)}>${
+            this._messages.donut
+          }</calcite-label></div><calcite-label class=${s(
+            a.label
+          )}><div class=${s(a.groupingLabelContainer)}><div>${
+            this._messages.groupingPercent
+          }</div><calcite-icon icon=information scale=s flip-rtl @mouseover=${
+            this.createTooltip
+          } @mouseout=${
+            this.destroyTooltip
+          }></calcite-icon></div><div class=${s(
+            a.sliderInputContainer
+          )}><calcite-slider min=0 max=50 step=1 snap .value=${x(
+            u(this.model.groupingThreshold ?? 0)
+          )} @calciteSliderChange=${this.onGroupingThresholdSliderChange} ${p(
+            this.groupingThresholdSliderElement
+          )}></calcite-slider><calcite-input class=${s(
+            a.numberInput
+          )} type=number min=0 max=100 step=1 suffix-text=% .value=${u(
+            this.model.groupingThreshold ?? 0
+          )} @calciteInputInput=${this.onGroupingThresholdChange} @click=${(
+            e
+          ) => {
+            e.stopPropagation();
+          }} ${p(
+            this.groupingThresholdElement
+          )}></calcite-input></div></calcite-label><div class=${s(
+            a.sectionLabel
+          )}>${this._messages.labels}</div><calcite-label class=${s(a.label)}>${
+            this._messages.labelCharacterLimit
+          }<calcite-input type=number min=1 step=1 .value=${u(
+            this.model.labelCharacterLimit
+          )} @calciteInputInput=${this.onLabelCharacterLimitChange} ${p(
+            this.labelCharacterLimitElement
+          )}></calcite-input></calcite-label><calcite-label class=${s(
+            a.label
+          )}>${
+            this._messages.decimalPlaces
+          }<calcite-input type=number min=0 max=20 step=1 .value=${u(
+            this.model.decimalPlaces
+          )} @calciteInputInput=${this.onDecimalPlacesChange} ${p(
+            this.decimalPlacesElement
+          )}></calcite-input></calcite-label><calcite-label class=${s(
+            a.label
+          )}>${this._messages.display}<calcite-radio-button-group class=${s(
+            a.radioGroup
+          )} name=display layout=vertical @calciteRadioButtonGroupChange=${
+            this.onDisplayTypeChange
+          }><calcite-label layout=inline><calcite-radio-button .value=${
+            h.Value
+          } .checked=${
+            this.model.displayType === h.Value
+          }></calcite-radio-button>${
+            this._messages.value
+          }</calcite-label><calcite-label layout=inline><calcite-radio-button .value=${
+            h.Percentage
+          } .checked=${
+            this.model.displayType === h.Percentage
+          }></calcite-radio-button>${
+            this._messages.percentage
+          }</calcite-label><calcite-label layout=inline><calcite-radio-button .value=${
+            h.Both
+          } .checked=${
+            this.model.displayType === h.Both
+          }></calcite-radio-button>${
+            this._messages.both
+          }</calcite-label></calcite-radio-button-group></calcite-label><div class=${s(
+            a.sectionLabel
+          )}>${this._messages.slices}<calcite-button @click=${
+            this.resetSlicesOriginal
+          } .disabled=${!this.model.resetAvailable()} appearance=transparent icon-end=reset>${
+            this._messages.reset
+          }</calcite-button></div>${this.buildSliceList()}<div class=${s(
+            a.sectionLabel
+          )}>${
+            this._messages.groupedSlices
+          }</div>${this.buildGroupedSliceList()}`;
+        }
+      };
+    N("geoscene-charts-config-pie-chart-slices", L);
+    return L;
+  },
+  "Graphic",
+  "renderers/support/jsonUtils",
+  "symbols/support/symbolUtils",
+  "intl",
+  "layers/support/FeatureFilter",
+  "smartMapping/statistics/histogram",
+  "smartMapping/statistics/summaryStatistics",
+  "request",
+  "core/sql",
+  "AttributeBinsGraphic",
+  "geometry/support/jsonUtils",
+  "rest/support/AttributeBinsQuery",
+  "rest/support/StatisticDefinition",
+  "time/TimeExtent",
+  "core/promiseUtils",
+  a,
+  c,
+  e
+);