@geoscene/charts-components 5.0.19

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

@@ -0,0 +1,444 @@
+/* COPYRIGHT  - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c as $ } from "../../chunks/runtime.js";
+import { keyed as F } from "lit/directives/keyed.js";
+import "@geoscene/toolkit/type";
+import { a as c, i as b, m } from "../../chunks/series-types.js";
+import {
+  LitElement as x,
+  createEvent as g,
+  renderElement as A,
+  safeClassMap as s,
+} from "@geoscene/lumina";
+import { css as I, html as o } from "lit";
+import { createRef as d, ref as h } from "lit/directives/ref.js";
+import { u as f } from "../../chunks/useT9n.js";
+import { L as l } from "../../chunks/interfaces.js";
+import { d as B, s as u, r as T, a as S } from "../../chunks/store.js";
+import "@geoscene/toolkit/intl";
+import { isEqual as k } from "lodash-es";
+import "luxon";
+import "d3-array";
+import {
+  bR as C,
+  by as E,
+  bz as L,
+  d3 as v,
+  bT as P,
+  da as w,
+} 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/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 _ } from "../../chunks/popover-ui-utils.js";
+import { x as N } from "../../chunks/data.js";
+const D = I`.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);margin-top:var(--geoscene-charts-top-section-margin)}.label,.disabled-label{display:flex;margin-left:.5rem;margin-right:.5rem;margin-bottom:.5rem;justify-content:space-between}.time-binning-header{display:flex;font-weight:700;margin-left:.5rem;margin-right:.5rem;justify-content:space-between}.field-list{max-height:50vh;overflow-y:auto}.disabled-label{pointer-events:none}.fab{display:flex;margin-left:.5rem;margin-right:.5rem;margin-bottom:1.5rem;justify-content:center}.link-container{display:flex;justify-content:flex-end}`,
+  n = {
+    label: "label",
+    fieldList: "field-list",
+    fab: "fab",
+    timeBinningHeader: "time-binning-header",
+    linkContainer: "link-container",
+    dimText: "dim-text",
+  };
+class U extends x {
+  constructor() {
+    super(...arguments),
+      (this._messages = f()),
+      (this.commonStrings = f({ name: "common", blocking: !0 })),
+      (this.lineChartPopover = null),
+      (this.aggregationElement = d()),
+      (this.xAxisFieldElement = d()),
+      (this.numericFieldsElement = d()),
+      (this.splitByFieldElement = d()),
+      (this.intervalAlignmentElement = d()),
+      (this.intervalElement = d()),
+      (this.onLineChartDataChange = (e) => {
+        try {
+          if (e.detail !== null && e.detail?.value !== void 0) {
+            const { contentKind: t } = e.detail,
+              i = [...e.detail.value];
+            switch ((B(u), t)) {
+              case l.aggregation:
+                this.model.aggregationType =
+                  i[0] !== c.NoAggregation ? i[0] : c.NoAggregation;
+                break;
+              case l.xAxisField: {
+                const a = i[0]?.trim() || "";
+                (this.model.xAxisField = a),
+                  this.geosceneChartsConfigResetTimeInterval.emit();
+                break;
+              }
+              case l.numericFields:
+                (this.model.numericFields = i),
+                  this.model.numericFields.length > 0 &&
+                    this.model.aggregationType === c.Count &&
+                    this.model.numericFields[0] !==
+                      C(this.model.layer).idField &&
+                    (this.model.aggregationType = c.Sum);
+                break;
+              case l.splitByField: {
+                const a = i[0]?.trim() || "";
+                (this.model.splitByField = a), (this.model.colorMatch = !0);
+                break;
+              }
+              case l.interval:
+                (this.model.temporalBinningSize = i[0]?.intervalSize),
+                  (this.model.temporalBinningUnit = i[0]?.intervalUnits),
+                  this.geosceneChartsConfigCustomizedTimeInterval.emit();
+                break;
+              case l.intervalAlignment:
+                this.model.timeAggregationType = i[0] ?? "";
+                break;
+              default:
+                break;
+            }
+            t !== l.interval && t !== l.intervalAlignment && T(u);
+          }
+        } catch (t) {
+          throw (
+            (t instanceof Error &&
+              this.geosceneChartsConfigDataChangeError.emit({
+                error: t,
+                model: this.model,
+              }),
+            t)
+          );
+        }
+        this.removeLineChartDataPopover(), this.requestUpdate();
+      }),
+      (this.onModelConfigChange = () => {
+        this.requestUpdate();
+      }),
+      (this.popoverClose = (e) => {
+        this.lineChartPopover === e?.target &&
+          this.removeLineChartDataPopover();
+      }),
+      (this.layerFieldsInfo = []),
+      (this.geosceneChartsConfigCustomizedTimeInterval = g()),
+      (this.geosceneChartsConfigDataChangeError = g()),
+      (this.geosceneChartsConfigLineChartDataNumericFieldValidate = g()),
+      (this.geosceneChartsConfigResetTimeInterval = g());
+  }
+  static {
+    this.properties = {
+      aggregationLabel: 16,
+      timeAggregationLabel: 16,
+      disableSplitBy: 16,
+      messageOverrides: 0,
+      model: 0,
+      resetTimeInterval: 0,
+      layerFieldsInfo: 0,
+    };
+  }
+  static {
+    this.styles = D;
+  }
+  load() {
+    this.modelChange(this.model), this.onModelConfigChange();
+  }
+  willUpdate(e) {
+    e.has("model") && this.modelChange(this.model, e.get("model")),
+      (this.aggregationLabel = E(
+        this.model.aggregationType,
+        this.commonStrings
+      ));
+    const t = this.model.timeAggregationType;
+    t !== void 0 && (this.timeAggregationLabel = L(t, this.commonStrings)),
+      (this.disableSplitBy = this.model.numericFields.length > 1);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(),
+      this.removeLineChartDataPopover(),
+      this.model.removeEventListener(
+        "geosceneChartsModelConfigChange",
+        this.onModelConfigChange
+      );
+  }
+  modelChange(e, t) {
+    t?.removeEventListener(
+      "geosceneChartsModelConfigChange",
+      this.onModelConfigChange
+    ),
+      e?.addEventListener(
+        "geosceneChartsModelConfigChange",
+        this.onModelConfigChange
+      );
+  }
+  buildNumericFieldItem(e) {
+    return F(
+      e,
+      o`<calcite-list-item .label=${v(
+        this.layerFieldsInfo,
+        e
+      )} .value=${e} closable @calciteListItemClose=${
+        this.onRemoveNumericField
+      }></calcite-list-item>`
+    );
+  }
+  resetTimeIntervalOriginal(e) {
+    this.popoverClose(e),
+      this.model.resetTimeInterval !== void 0 &&
+        (this.model.resetTimeInterval(),
+        this.geosceneChartsConfigResetTimeInterval.emit());
+  }
+  onAggregationSelect(e) {
+    (this.contentKind = l.aggregation), this.setupPopover(e);
+  }
+  onXAxisFieldSelect(e) {
+    (this.contentKind = l.xAxisField), this.setupPopover(e);
+  }
+  onSplitBySelect(e) {
+    this.splitByFieldElement.value &&
+      !this.splitByFieldElement.value.disabled &&
+      ((this.contentKind = l.splitByField), this.setupPopover(e));
+  }
+  onAddNumericFields(e) {
+    (this.contentKind = l.numericFields), this.setupPopover(e);
+  }
+  onRemoveNumericField(e) {
+    const t = e.target.value;
+    this.model.numericFields = this.model.numericFields.filter((i) => i !== t);
+  }
+  onIntervalAlignmentSelect(e) {
+    this.intervalAlignmentElement.value &&
+      !this.intervalAlignmentElement.value.disabled &&
+      ((this.contentKind = l.intervalAlignment), this.setupPopover(e));
+  }
+  onIntervalSelect(e) {
+    this.intervalElement.value &&
+      !this.intervalElement.value.disabled &&
+      ((this.contentKind = l.interval), this.setupPopover(e));
+  }
+  getCorrectedSplitByValue() {
+    return this.model.splitByField === "" || this.model.numericFields.length > 1
+      ? ""
+      : v(this.layerFieldsInfo, this.model.splitByField);
+  }
+  getCorrectedXAxisValue() {
+    return N({
+      fieldName: this.model.xAxisField,
+      fieldList: this.layerFieldsInfo,
+    })
+      ? ""
+      : v(this.layerFieldsInfo, this.model.xAxisField);
+  }
+  onShowDataLabelsChange(e) {
+    this.model.dataLabelsVisibility = e.target.checked;
+  }
+  onTrimIncompleteIntervalChange(e) {
+    this.model.trimIncompleteTimeInterval = e.target.checked;
+  }
+  onNullPolicyChange(e) {
+    this.model.nullPolicy = e.target.selectedItem.value;
+  }
+  shouldShowTimeBinning() {
+    const e = this.layerFieldsInfo.find(
+        (i) => i.name === this.model.xAxisField
+      ),
+      t = this.model.aggregationType !== c.NoAggregation;
+    return e !== void 0 && P(e) && t;
+  }
+  setupPopover(e) {
+    e.stopImmediatePropagation(), this.removeLineChartDataPopover();
+    const t = {
+      size: this.model.temporalBinningSize ?? 1,
+      unit: this.model.temporalBinningUnit ?? b.Second,
+    };
+    let i, a, r;
+    switch (this.contentKind) {
+      case l.aggregation:
+        (i = this.aggregationElement.value),
+          (a = this._messages.aggregationHeader),
+          (r = this.model.aggregationType);
+        break;
+      case l.xAxisField:
+        (i = this.xAxisFieldElement.value),
+          (a = this._messages.xAxisFieldHeader),
+          (r = this.model.xAxisField);
+        break;
+      case l.numericFields:
+        (i = this.numericFieldsElement.value),
+          (a = this._messages.numericFieldsHeader),
+          (r = this.model.numericFields);
+        break;
+      case l.splitByField:
+        (i = this.splitByFieldElement.value),
+          (a = this._messages.splitByFieldHeader),
+          (r = this.model.splitByField);
+        break;
+      case l.interval:
+        (i = this.intervalElement.value),
+          (a = this._messages.editInterval),
+          (r = t);
+        break;
+      case l.intervalAlignment:
+        (i = this.intervalAlignmentElement.value),
+          (a = this._messages.intervalAlignment),
+          (r = this.model.timeAggregationType ?? "");
+        break;
+    }
+    (this.lineChartPopover = A(
+      o`<geoscene-charts-config-line-chart-popover .headingTitle=${a} .referenceElement=${i} open .contentKind=${this.contentKind} .layerFieldsInfo=${this.layerFieldsInfo} .selectedContent=${r} @geosceneChartsConfigLineChartDataPopoverChange=${this.onLineChartDataChange} @geosceneChartsConfigLineChartPopoverClose=${this.popoverClose}></geoscene-charts-config-line-chart-popover>`
+    )),
+      !document.body.contains(this.lineChartPopover) &&
+        this.lineChartPopover !== null &&
+        document.body.appendChild(this.lineChartPopover);
+  }
+  removeLineChartDataPopover() {
+    this.lineChartPopover !== null &&
+      ((this.lineChartPopover.open = !1),
+      (this.lineChartPopover = _(this.lineChartPopover)));
+  }
+  renderAggregation() {
+    return o`<geoscene-charts-config-field-select .label=${
+      this.model.aggregationType === c.NoAggregation
+        ? this._messages.noAggregation
+        : this.aggregationLabel
+    } @click=${this.onAggregationSelect} ${h(
+      this.aggregationElement
+    )}></geoscene-charts-config-field-select>`;
+  }
+  renderXAxisField() {
+    const e = this.getCorrectedXAxisValue();
+    return o`<geoscene-charts-config-field-select .label=${e} @click=${
+      this.onXAxisFieldSelect
+    } ${h(this.xAxisFieldElement)}></geoscene-charts-config-field-select>`;
+  }
+  renderSplitBy() {
+    const e = this.getCorrectedSplitByValue();
+    return o`<geoscene-charts-config-field-select .label=${e} .disabled=${
+      this.disableSplitBy
+    } @click=${this.onSplitBySelect} ${h(
+      this.splitByFieldElement
+    )}></geoscene-charts-config-field-select>`;
+  }
+  renderNumericFields(e) {
+    const t = C(this.model.layer).idField,
+      i = [];
+    for (const a of e) a !== t && i.push(this.buildNumericFieldItem(a));
+    return o`<calcite-list label class=${s(n.fieldList)} ${h(
+      this.numericFieldsElement
+    )}>${i}</calcite-list>`;
+  }
+  renderInterval() {
+    const e = (this.model.temporalBinningSize ?? 0) <= 0,
+      t = this.model.temporalBinningSize ?? "",
+      i = w(this.model.temporalBinningUnit ?? b.Second, this._messages) ?? "",
+      a = S(u),
+      r = {
+        size: this.model.temporalBinningSize,
+        unit: this.model.temporalBinningUnit,
+      },
+      p = k(r, a);
+    return [
+      o`<calcite-list label selection-appearance=border><calcite-list-item .value=${
+        e ? "" : `${t} ${i}`
+      } .label=${e ? "" : `${t} ${i}`} @click=${
+        e ? () => {} : this.onIntervalSelect
+      } ${h(
+        this.intervalElement
+      )}><calcite-icon slot=content-end icon=pencil></calcite-icon></calcite-list-item></calcite-list>`,
+      o`<div class=${s(
+        n.linkContainer
+      )}><calcite-button .disabled=${p} appearance=transparent scale=s icon-end=reset @click=${
+        this.resetTimeIntervalOriginal
+      }>${this._messages.reset}</calcite-button></div>`,
+    ];
+  }
+  renderIntervalAlignment() {
+    return o`<geoscene-charts-config-field-select .label=${
+      this.timeAggregationLabel
+    } @click=${this.onIntervalAlignmentSelect} ${h(
+      this.intervalAlignmentElement
+    )}></geoscene-charts-config-field-select>`;
+  }
+  renderEmptyBins() {
+    return o`<calcite-radio-button-group name=empty-bins layout=vertical @calciteRadioButtonGroupChange=${
+      this.onNullPolicyChange
+    }><calcite-label layout=inline><calcite-radio-button .value=${
+      m.Zero
+    } .checked=${this.model.nullPolicy === m.Zero}></calcite-radio-button>${
+      this._messages.treatAsZero
+    }</calcite-label><calcite-label layout=inline><calcite-radio-button .value=${
+      m.Interpolate
+    } .checked=${
+      this.model.nullPolicy === m.Interpolate
+    }></calcite-radio-button>${
+      this._messages.connectLine
+    }</calcite-label><calcite-label layout=inline><calcite-radio-button .value=${
+      m.Null
+    } .checked=${this.model.nullPolicy === m.Null}></calcite-radio-button>${
+      this._messages.breakLine
+    }</calcite-label></calcite-radio-button-group>`;
+  }
+  render() {
+    const e = this.renderAggregation(),
+      t = this.renderXAxisField(),
+      i = this.renderSplitBy(),
+      a = this.renderNumericFields([...this.model.numericFields]),
+      r = this.renderInterval(),
+      p = this.renderIntervalAlignment(),
+      y = this.renderEmptyBins();
+    return o`<calcite-label class=${s(n.label)}>${
+      this._messages.xAxisField
+    }${t}</calcite-label><calcite-label class=${s(n.label)}>${
+      this._messages.aggregation
+    }${e}</calcite-label><calcite-label class=${s(n.label)}>${
+      this._messages.numericFields
+    }${a}</calcite-label><div class=${s(
+      n.fab
+    )}><calcite-fab appearance=outline-fill kind=neutral scale=m .label=${
+      this._messages.selectNumericFields
+    } text-enabled .text=${
+      this._messages.selectNumericFields
+    } icon=plus @click=${
+      this.onAddNumericFields
+    }></calcite-fab></div><calcite-label class=${s(n.label)}><span class=${s(
+      this.disableSplitBy ? n.dimText : ""
+    )}>${
+      this._messages.splitBy
+    }</span>${i}</calcite-label><div .hidden=${!this.shouldShowTimeBinning()}><h3 class=${s(
+      n.timeBinningHeader
+    )}>${this._messages.timeBinningOptions}</h3><calcite-label class=${s(
+      n.label
+    )}>${this._messages.interval}${r}</calcite-label><calcite-label class=${s(
+      n.label
+    )}>${
+      this._messages.intervalAlignment
+    }${p}</calcite-label><calcite-label class=${s(
+      n.label
+    )} layout=inline-space-between>${
+      this._messages.trimIncompleteInterval
+    }<calcite-switch .checked=${
+      this.model.trimIncompleteTimeInterval
+    } @calciteSwitchChange=${
+      this.onTrimIncompleteIntervalChange
+    }></calcite-switch></calcite-label><calcite-label class=${s(n.label)}>${
+      this._messages.emptyBins
+    }${y}</calcite-label></div><calcite-label class=${s(
+      n.label
+    )} layout=inline-space-between>${
+      this._messages.showDataLabels
+    }<calcite-switch .checked=${
+      this.model.dataLabelsVisibility
+    } @calciteSwitchChange=${
+      this.onShowDataLabelsChange
+    }></calcite-switch></calcite-label>`;
+  }
+}
+$("geoscene-charts-config-line-chart-data", U);
+export { U as GeosceneChartsConfigLineChartData };

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

@@ -0,0 +1,12 @@
+import "@geoscene/calcite-components/components/calcite-list-item";
+import "../geoscene-charts-config-line-chart-popover/index.js";
+import "../geoscene-charts-config-field-select/index.js";
+import "@geoscene/calcite-components/components/calcite-list";
+import "@geoscene/calcite-components/components/calcite-icon";
+import "@geoscene/calcite-components/components/calcite-button";
+import "@geoscene/calcite-components/components/calcite-radio-button-group";
+import "@geoscene/calcite-components/components/calcite-label";
+import "@geoscene/calcite-components/components/calcite-radio-button";
+import "@geoscene/calcite-components/components/calcite-fab";
+import "@geoscene/calcite-components/components/calcite-switch";
+export * from "./customElement.js";