@geoscene/charts-components 5.0.19

package/dist/cdn/KPQTJ2HD.js

@@ -0,0 +1,642 @@
+/* COPYRIGHT  - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { a as D } from "./HAGP76HP.js";
+import { a as A } from "./FEJD2JHY.js";
+import { a as H, c as K } from "./ZLQXY2BV.js";
+import f from "./5752NFTR.js";
+import { b as a, c, i as m } from "./DPJE33GY.js";
+import { a as T } from "./VAB3BCTX.js";
+import e from "./P5SSZWMH.js";
+import "./UG7LOBJE.js";
+import d from "./A7YNU2NS.js";
+import { B as L, i as C } from "./4B3QBH5T.js";
+import "./XLDY6CTA.js";
+import "./KUVOINJC.js";
+import { c as p } from "./NKG4FLLR.js";
+import {
+  A as s,
+  B as y,
+  D as M,
+  F as V,
+  g as w,
+  h as o,
+  m as u,
+  x as b,
+  y as v,
+  z as k,
+} from "./KRZ433BT.js";
+import "./OR4HXHSY.js";
+export default $geoscene.t(
+  ([
+    ,
+    ,
+    ,
+    ,
+    ,
+    ,
+    ,
+    ,
+    ,
+    ,
+    ,
+    ,
+    ,
+    ,
+    ,
+    { Gb: I, Q: P, S: x },
+    ,
+    { a: S, c: N, g: B, h: _, i: f, j: $, k: F },
+  ]) => {
+    var l = {
+        label: "label",
+        row: "row",
+        binCountContainer: "bin-count-container",
+        iconSelect: "icon-select",
+        sectionLabel: "section-label",
+        binTextPadding: "bin-text-padding",
+        histogramStatsList: "histogram-stats-list",
+      },
+      q = w`.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{display:flex;flex-direction:column;width:var(--geoscene-charts-config-calcite-block-default-width);margin:var(--geoscene-charts-config-calcite-block-default-margin)}calcite-list-item{margin-left:var(--geoscene-charts-config-margin-minor);margin-right:var(--geoscene-charts-config-margin-minor)}.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}.text{display:flex;margin-left:var(--geoscene-charts-config-margin-minor);width:calc(100% - 1.5rem);height:2rem;margin-bottom:var(--geoscene-charts-config-margin-minor);justify-content:space-between}.row{padding-top:1rem}.bin-count-container{display:flex;flex-wrap:wrap;padding:var(--geoscene-charts-config-margin-minor)}.bin-count-container>calcite-slider{flex-grow:10;min-width:50%}.bin-count-container>calcite-input{margin-bottom:.5rem;margin-top:var(--geoscene-charts-config-margin-minor);margin-left:var(--geoscene-charts-config-margin-minor);width:5rem}.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)}.bin-text-padding{margin-left:var(--geoscene-charts-config-margin-minor)}.histogram-stats-list{pointer-events:none;margin-bottom:var(--geoscene-charts-config-margin-minor)}`,
+      O = class extends k {
+        constructor() {
+          super(...arguments),
+            (this._messages = T()),
+            (this.numericalFieldSelectionElement = b()),
+            (this.transformationSelectionElement = b()),
+            (this.histogramPopover = null),
+            (this.binColorSectionElement = b()),
+            (this.binSliderElement = b()),
+            (this.binInputElement = b()),
+            (this.popoverHeading = ""),
+            (this.onBinCountChange = C(() => {
+              let e = this.binInputElement.value?.value;
+              e !== void 0 &&
+              B(
+                e,
+                this.binInputElement.value?.min,
+                this.binInputElement.value?.max
+              )
+                ? this.binCountChange(e)
+                : this.binInputElement.value &&
+                  f({
+                    inputElement: this.binInputElement.value,
+                    status: $.INVALID,
+                  });
+            }, S.DebounceTimer)),
+            (this.onBinCountSliderChange = C(() => {
+              this.binCountChange(
+                this.binSliderElement.value?.value?.toString() ?? ""
+              );
+            }, S.DebounceTimer)),
+            (this.onNormalDistColorSelect = (e) => {
+              e.stopImmediatePropagation(),
+                this.onColorElementSelect(
+                  this.model.normalDistSymbol,
+                  this._messages.normalDistStyle ?? "",
+                  this.normalDistOverlayElement
+                );
+            }),
+            (this.onMeanColorSelect = (e) => {
+              e.stopImmediatePropagation(),
+                this.onColorElementSelect(
+                  this.model.meanSymbol,
+                  this._messages.meanStyle ?? "",
+                  this.meanOverlayElement
+                );
+            }),
+            (this.onMedianColorSelect = (e) => {
+              e.stopImmediatePropagation(),
+                this.onColorElementSelect(
+                  this.model.medianSymbol,
+                  this._messages.medianStyle ?? "",
+                  this.medianOverlayElement
+                );
+            }),
+            (this.onStandardDevColorSelect = (e) => {
+              e.stopImmediatePropagation(),
+                this.onColorElementSelect(
+                  this.model.standardDevSymbol,
+                  this._messages.standardDevStyle ?? "",
+                  this.standardDevOverlayElement
+                );
+            }),
+            (this.onModelConfigChange = () => {
+              this.requestUpdate();
+            }),
+            (this.updateProps = (e) => {
+              try {
+                if (e.detail !== null && e.detail !== void 0) {
+                  let { contentKind: t } = e.detail,
+                    { value: i } = e.detail;
+                  switch ((K(H), t)) {
+                    case m.transformation:
+                      this.model.dataTransformationType = i ?? p.None;
+                      break;
+                    case m.numericFields:
+                      this.model.numericField = i ?? "";
+                      break;
+                    default:
+                      break;
+                  }
+                }
+              } catch (t) {
+                throw (
+                  (t instanceof Error &&
+                    this.geosceneChartsConfigDataChangeError.emit({
+                      error: t,
+                      model: this.model,
+                    }),
+                  t)
+                );
+              }
+              this.removeHistogramDataPopover(), this.requestUpdate();
+            }),
+            (this.updateSymbolProps = (e) => {
+              if (this.selectedBinColorSymbol !== void 0)
+                this.onBinColorChange(e);
+              else
+                switch (this.selectedOverlayKind) {
+                  case a.Mean:
+                    this.onMeanStyleChange(e);
+                    break;
+                  case a.Median:
+                    this.onMedianStyleChange(e);
+                    break;
+                  case a.StandardDev:
+                    this.onStandardDevStyleChange(e);
+                    break;
+                  case a.NormalDist:
+                    this.onNormalDistStyleChange(e);
+                    break;
+                }
+            }),
+            (this.popoverClose = (e) => {
+              this.histogramPopover === e.target &&
+                ((this.selectedOverlaySymbol = void 0),
+                (this.selectedBinColorSymbol = void 0),
+                (this.selectedNumericalField = void 0),
+                (this.selectedTransformationType = void 0),
+                (this.binColorSelected = !1)),
+                this.removeHistogramDataPopover();
+            }),
+            (this.binColorSelected = !1),
+            (this.layerFieldsInfo = []),
+            (this.geosceneChartsConfigDataChangeError = u()),
+            (this.geosceneChartsConfigHistogramDataPopoverChange = u());
+        }
+        static {
+          this.properties = {
+            binColorSelected: 16,
+            selectedBinColorSymbol: 16,
+            selectedOverlaySymbol: 16,
+            selectedNumericalField: 16,
+            selectedTransformationType: 16,
+            selectedOverlaySymbolType: 1,
+            messageOverrides: 0,
+            model: 0,
+            meanValue: 9,
+            medianValue: 9,
+            standardDevValue: 9,
+            minValue: 9,
+            maxValue: 9,
+            sumValue: 9,
+            nullsValue: 9,
+            countValue: 9,
+            layerFieldsInfo: 0,
+            open: 5,
+          };
+        }
+        static {
+          this.styles = q;
+        }
+        get selectedBinColorSymbol() {
+          return this._selectedBinColorSymbol;
+        }
+        set selectedBinColorSymbol(e) {
+          (this._selectedBinColorSymbol = e),
+            this.histogramPopover &&
+              (this.histogramPopover.selectedBinColor = e);
+        }
+        load() {
+          this.modelChange(this.model), this.onModelConfigChange();
+        }
+        willUpdate(e) {
+          e.has("model") && this.modelChange(this.model, e.get("model"));
+        }
+        disconnectedCallback() {
+          super.disconnectedCallback(),
+            this.removeHistogramDataPopover(),
+            this.model.removeEventListener(
+              "geosceneChartsModelConfigChange",
+              this.onModelConfigChange
+            );
+        }
+        modelChange(e, t) {
+          t?.removeEventListener(
+            "geosceneChartsModelConfigChange",
+            this.onModelConfigChange
+          ),
+            e?.addEventListener(
+              "geosceneChartsModelConfigChange",
+              this.onModelConfigChange
+            );
+        }
+        removeHistogramDataPopover() {
+          this.histogramPopover !== null &&
+            (this.histogramPopover = A(this.histogramPopover));
+        }
+        getDataTransformationLabel() {
+          let e;
+          switch (this.model.dataTransformationType) {
+            case p.None:
+              e = this._messages.none ?? "";
+              break;
+            case p.Log:
+              e = this._messages.log ?? "";
+              break;
+            case p.Sqrt:
+              e = this._messages.sqRt ?? "";
+              break;
+            default:
+              e = this._messages.none ?? "";
+              break;
+          }
+          return e;
+        }
+        getStatValue(e) {
+          let t;
+          switch (e) {
+            case c.Min:
+              t = this.minValue;
+              break;
+            case c.Max:
+              t = this.maxValue;
+              break;
+            case c.Sum:
+              t = this.sumValue;
+              break;
+            case c.Nulls:
+              t = this.nullsValue;
+              break;
+            case c.Count:
+              t =
+                this.countValue !== void 0 && this.nullsValue !== void 0
+                  ? this.countValue + this.nullsValue
+                  : Number.NaN;
+              break;
+            case c.CountExcludingNulls:
+              t = this.countValue;
+              break;
+            case c.Mean:
+              t = this.meanValue;
+              break;
+            case c.Median:
+              t = this.medianValue;
+              break;
+            case c.StandardDev:
+              t = this.standardDevValue;
+              break;
+            default:
+              t = void 0;
+              break;
+          }
+          return F(t, N);
+        }
+        binCountChange(e) {
+          let t = Number.parseInt(e);
+          this.model.binCount !== t &&
+            ((this.model.binCount = t),
+            this.binInputElement.value &&
+              f({ inputElement: this.binInputElement.value, status: $.IDLE }));
+        }
+        onColorElementSelect(e, t, i) {
+          (this.binColorSelected = i === void 0),
+            e.type === L.SFS
+              ? ((this.selectedOverlaySymbol = void 0),
+                (this.selectedBinColorSymbol = e),
+                (this.contentKind = m.fillSymbol))
+              : ((this.selectedBinColorSymbol = void 0),
+                (this.selectedOverlaySymbol = e),
+                (this.overlaySectionElement = i),
+                (this.contentKind = m.lineSymbol)),
+            (this.popoverHeading = t),
+            this.setupPopover();
+        }
+        onNumericFieldSelect(e) {
+          e.stopImmediatePropagation(),
+            (this.selectedNumericalField = this.model.numericField),
+            (this.contentKind = m.numericFields),
+            this.setupPopover();
+        }
+        onTransformationSelect(e) {
+          e.stopImmediatePropagation(),
+            (this.selectedTransformationType =
+              this.model.dataTransformationType),
+            (this.contentKind = m.transformation),
+            this.setupPopover();
+        }
+        onBinColorSelect(e) {
+          e.stopImmediatePropagation(),
+            this.onColorElementSelect(
+              this.model.binSymbol,
+              this._messages.binColor ?? ""
+            );
+        }
+        onBinColorChange(e) {
+          (this.model.colorMatch = !1),
+            (this.model.binSymbol = e.detail),
+            (this.selectedBinColorSymbol = e.detail);
+        }
+        onMeanStyleChange(e) {
+          this.model.meanSymbol = e.detail;
+        }
+        onMedianStyleChange(e) {
+          this.model.medianSymbol = e.detail;
+        }
+        onStandardDevStyleChange(e) {
+          this.model.standardDevSymbol = e.detail;
+        }
+        onNormalDistStyleChange(e) {
+          this.model.normalDistSymbol = e.detail;
+        }
+        onShowDataLabelsChange(e) {
+          this.model.dataLabelsVisibility = e.target.checked;
+        }
+        onOverlayListChange(e) {
+          let t = e.target.selectedItems.map((h) => h.value),
+            i = t.includes(a.Mean),
+            d = t.includes(a.Median),
+            n = t.includes(a.StandardDev),
+            r = t.includes(a.NormalDist);
+          this.meanOverlayVisible !== i &&
+            ((this.model.showMeanOverlay = i), (this.meanOverlayVisible = i)),
+            this.medianOverlayVisible !== d &&
+              ((this.model.showMedianOverlay = d),
+              (this.medianOverlayVisible = d)),
+            this.standardDevOverlayVisible !== n &&
+              ((this.model.showStandardDevOverlay = n),
+              (this.standardDevOverlayVisible = n)),
+            this.normalDistOverlayVisible !== r &&
+              ((this.model.showNormalDistOverlay = r),
+              (this.normalDistOverlayVisible = r));
+        }
+        setupPopover() {
+          this.removeHistogramDataPopover();
+          let e = [...this.layerFieldsInfo],
+            t,
+            i,
+            d = "trailing",
+            n,
+            r,
+            h,
+            g;
+          switch (this.contentKind) {
+            case m.transformation:
+              (n = this.selectedTransformationType),
+                (t = this.transformationSelectionElement.value),
+                (h = void 0),
+                (g = void 0),
+                (r = void 0);
+              break;
+            case m.numericFields:
+              (r = this.selectedNumericalField),
+                (t = this.numericalFieldSelectionElement.value),
+                (h = void 0),
+                (g = void 0),
+                (n = void 0);
+              break;
+            case m.fillSymbol:
+              (t = this.binColorSectionElement.value),
+                (h = this.selectedBinColorSymbol),
+                (i = this.popoverHeading),
+                (d = "leading"),
+                (g = void 0),
+                (n = void 0),
+                (r = void 0);
+              break;
+            case m.lineSymbol:
+              (this.selectedOverlayKind = this.overlaySectionElement?.value),
+                (t = this.overlaySectionElement),
+                (g = this.selectedOverlaySymbol),
+                (i = this.popoverHeading),
+                (h = void 0),
+                (n = void 0),
+                (r = void 0);
+              break;
+          }
+          (this.histogramPopover = M(
+            o`<geoscene-charts-config-histogram-popover .headingTitle=${i} .referenceElement=${t} open .contentKind=${this.contentKind} .layerFieldsInfo=${e} .placement=${d} .selectedNumericField=${r} .selectedTransformationType=${n} .selectedBinColor=${h} .selectedOverlaySymbol=${g} @geosceneChartsConfigPopoverClose=${this.popoverClose} @geosceneChartsConfigHistogramPopoverChange=${this.updateProps} @geosceneChartsConfigHistogramPopoverSymbolChange=${this.updateSymbolProps}></geoscene-charts-config-histogram-popover>`
+          )),
+            !document.body.contains(this.histogramPopover) &&
+              this.histogramPopover !== null &&
+              document.body.appendChild(this.histogramPopover);
+        }
+        renderFieldSelect() {
+          return o`<geoscene-charts-config-field-select .label=${I(
+            this.layerFieldsInfo,
+            this.model.numericField
+          )} @click=${this.onNumericFieldSelect} ${v(
+            this.numericalFieldSelectionElement
+          )}></geoscene-charts-config-field-select>`;
+        }
+        renderDataTransformationType() {
+          return o`<geoscene-charts-config-field-select .label=${this.getDataTransformationLabel()} @click=${
+            this.onTransformationSelect
+          } ${v(
+            this.transformationSelectionElement
+          )}></geoscene-charts-config-field-select>`;
+        }
+        renderColorListItem(e) {
+          let {
+              textLabel: t,
+              key: i,
+              value: d,
+              selected: n,
+              ref: r,
+              colorAction: h,
+              color: g,
+            } = e,
+            [E, j, z, U] = [...(g ?? x())];
+          return D(
+            i,
+            o`<calcite-list-item .label=${
+              t ?? ""
+            } .value=${d} .selected=${n} ${v(
+              r ?? void 0
+            )}><calcite-action text=color slot=actions-end appearance=transparent @click=${h}><calcite-icon icon=line-solid style=${y(
+              E !== void 0
+                ? { color: `rgba(${E},${j},${z},${(U ?? 0) / 255})` }
+                : {}
+            )}></calcite-icon></calcite-action></calcite-list-item>`
+          );
+        }
+        renderBinColorElement() {
+          let [e, t, i, d] = [...(this.model.binSymbol?.color ?? P(0))];
+          return o`<calcite-list label selection-mode=single selection-appearance=border><calcite-list-item .label=${
+            this._messages.binColor
+          } value=selectTrendLine .selected=${this.binColorSelected} @click=${
+            this.onBinColorSelect
+          } ${v(
+            this.binColorSectionElement
+          )}><calcite-icon slot=content-end icon=square-f style=${y({
+            color: `rgba(${e},${t},${i},${d / 255})`,
+          })} class=${s(
+            l.iconSelect
+          )}></calcite-icon></calcite-list-item></calcite-list>`;
+        }
+        renderNormalDistOverlay() {
+          return (
+            (this.normalDistOverlayVisible = this.model.showNormalDistOverlay),
+            this.renderColorListItem({
+              textLabel: this._messages.normalDist,
+              color: this.model.normalDistSymbol?.color,
+              key: a.NormalDist,
+              value: a.NormalDist,
+              selected: this.model.showNormalDistOverlay,
+              ref: (e) => {
+                this.normalDistOverlayElement = e;
+              },
+              colorAction: this.onNormalDistColorSelect,
+            })
+          );
+        }
+        renderMeanOverlay() {
+          return (
+            (this.meanOverlayVisible = this.model.showMeanOverlay),
+            this.renderColorListItem({
+              textLabel: this._messages.mean,
+              textDescription: this.meanValue,
+              color: this.model.meanSymbol?.color,
+              key: a.Mean,
+              value: a.Mean,
+              selected: this.model.showMeanOverlay,
+              ref: (e) => {
+                this.meanOverlayElement = e;
+              },
+              colorAction: this.onMeanColorSelect,
+            })
+          );
+        }
+        renderStandardDevOverlay() {
+          return (
+            (this.standardDevOverlayVisible =
+              this.model.showStandardDevOverlay),
+            this.renderColorListItem({
+              textLabel: this._messages.standardDev,
+              textDescription: this.standardDevValue,
+              color: this.model.standardDevSymbol?.color,
+              key: a.StandardDev,
+              value: a.StandardDev,
+              selected: this.model.showStandardDevOverlay,
+              ref: (e) => {
+                this.standardDevOverlayElement = e;
+              },
+              colorAction: this.onStandardDevColorSelect,
+            })
+          );
+        }
+        renderMedianOverlay() {
+          return (
+            (this.medianOverlayVisible = this.model.showMedianOverlay),
+            this.renderColorListItem({
+              textLabel: this._messages.median,
+              textDescription: this.medianValue,
+              color: this.model.medianSymbol?.color,
+              key: a.Median,
+              value: a.Median,
+              selected: this.model.showMedianOverlay,
+              ref: (e) => {
+                this.medianOverlayElement = e;
+              },
+              colorAction: this.onMedianColorSelect,
+            })
+          );
+        }
+        renderOverlayList() {
+          return o`<calcite-list label selection-mode=multiple @calciteListChange=${
+            this.onOverlayListChange
+          }>${this.renderNormalDistOverlay()}${this.renderMeanOverlay()}${this.renderMedianOverlay()}${this.renderStandardDevOverlay()}</calcite-list>`;
+        }
+        renderStatItem(e) {
+          return D(
+            e,
+            o`<calcite-list-item .label=${
+              this._messages[e]
+            } .description=${this.getStatValue(
+              e
+            )} .value=${e}></calcite-list-item>`
+          );
+        }
+        renderStats() {
+          let e = Object.values(c);
+          return o`<calcite-list label class=${s(l.histogramStatsList)}>${e.map(
+            (t) => this.renderStatItem(t)
+          )}</calcite-list>`;
+        }
+        renderShowDataLabels() {
+          return o`<div class=${s(l.row)}><calcite-label class=${s(
+            l.label
+          )} layout=inline-space-between>${
+            this._messages.showDataLabels
+          }<calcite-switch .checked=${
+            this.model.dataLabelsVisibility
+          } @calciteSwitchChange=${
+            this.onShowDataLabelsChange
+          }></calcite-switch></calcite-label></div>`;
+        }
+        renderBinsSection() {
+          return o`<div class=${s(
+            l.binCountContainer
+          )}><calcite-slider label-handles min=1 max=64 step=1 snap .value=${
+            this.model.binCount
+          } @calciteSliderChange=${this.onBinCountSliderChange} ${v(
+            this.binSliderElement
+          )}></calcite-slider><calcite-input type=number min=1 max=64 step=1 .value=${_(
+            this.model.binCount
+          )} @calciteInputInput=${this.onBinCountChange} ${v(
+            this.binInputElement
+          )}></calcite-input></div>`;
+        }
+        render() {
+          let e = this.renderFieldSelect(),
+            t = this.renderDataTransformationType();
+          return o`<div class=${s(l.sectionLabel)}>${
+            this._messages.variables
+          }</div><calcite-label class=${s(l.label)}>${
+            this._messages.number
+          }${e}</calcite-label><calcite-label class=${s(l.label)}>${
+            this._messages.withTransformation
+          }${t}</calcite-label><div class=${s(l.sectionLabel)}>${
+            this._messages.bins
+          }</div><p class=${s(l.binTextPadding)}>${
+            this._messages.numberOfBins
+          }</p>${this.renderBinsSection()}${this.renderBinColorElement()}<div class=${s(
+            l.sectionLabel
+          )}>${
+            this._messages.overlays
+          }</div>${this.renderOverlayList()}${this.renderShowDataLabels()}<div class=${s(
+            l.sectionLabel
+          )}>${this._messages.statistics}</div>${this.renderStats()}`;
+        }
+      };
+    V("geoscene-charts-config-histogram-data", O);
+    return O;
+  },
+  "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",
+  d,
+  e,
+  f
+);