@geoscene/charts-components 5.0.19

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

@@ -0,0 +1,258 @@
+/* COPYRIGHT  - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c as f } from "../../chunks/runtime.js";
+import { keyed as C } from "lit/directives/keyed.js";
+import "@geoscene/toolkit/intl";
+import "lodash-es";
+import "luxon";
+import "d3-array";
+import "@geoscene/toolkit/type";
+import { a as u } from "../../chunks/series-types.js";
+import { d as c, d3 as m, bR as b } 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 v } from "../../chunks/popover-ui-utils.js";
+import { a as g } from "../../chunks/common.js";
+import { P as s } from "../../chunks/interfaces.js";
+import { u as y } from "../../chunks/useT9n.js";
+import { css as F, html as a } from "lit";
+import { createRef as n, ref as d } from "lit/directives/ref.js";
+import {
+  LitElement as $,
+  createEvent as p,
+  renderElement as P,
+  safeClassMap as o,
+} from "@geoscene/lumina";
+import { x as E } from "../../chunks/data.js";
+const l = {
+    label: "label",
+    fieldList: "field-list",
+    fab: "fab",
+  },
+  k = F`: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: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}.field-list{max-height:50vh;overflow-y:auto}.disabled-label{pointer-events:none}.fab{display:flex;margin-left:var(--geoscene-charts-config-margin-minor);margin-right:var(--geoscene-charts-config-margin-minor);margin-bottom:1.5rem;justify-content:center}`;
+class w extends $ {
+  constructor() {
+    super(...arguments),
+      (this._messages = y()),
+      (this.pieChartPopover = null),
+      (this.sortOrderElement = n()),
+      (this.categoryElement = n()),
+      (this.numericFieldsElement = n()),
+      (this.onPieChartDataChange = (e) => {
+        try {
+          if (e.detail !== null && e.detail?.value !== void 0) {
+            const { contentKind: t } = e.detail,
+              i = [...e.detail.value];
+            switch (t) {
+              case s.aggregation:
+                this.model.aggregationType =
+                  i[0] !== u.NoAggregation ? i[0] : "";
+                break;
+              case s.category: {
+                const r = i[0]?.trim() || "";
+                this.updateMode(r);
+                const h = this.model.numericFields;
+                h.length > 1 && r !== c && (this.model.numericFields = [h[0]]),
+                  (this.model.category = r),
+                  (this.model.colorMatch = !0);
+                break;
+              }
+              case s.numericFields:
+                i.length > 1 && (this.updateMode(c), (this.model.category = c)),
+                  (this.model.numericFields = i);
+                break;
+              case s.sortOrder:
+                this.model.setSortOrder(i[0]);
+                break;
+              default:
+                break;
+            }
+          }
+        } catch (t) {
+          throw (
+            (t instanceof Error &&
+              this.geosceneChartsConfigDataChangeError.emit({
+                error: t,
+                model: this.model,
+              }),
+            t)
+          );
+        }
+        this.requestUpdate();
+      }),
+      (this.onModelConfigChange = () => {
+        this.requestUpdate();
+      }),
+      (this.popoverClose = (e) => {
+        this.pieChartPopover === e?.target && this.removePieChartDataPopover();
+      }),
+      (this.layerFieldsInfo = []),
+      (this.geosceneChartsConfigDataChangeError = p()),
+      (this.geosceneChartsConfigPieChartDataNumericFieldValidate = p());
+  }
+  static {
+    this.properties = { messageOverrides: 0, model: 0, layerFieldsInfo: 0 };
+  }
+  static {
+    this.styles = k;
+  }
+  load() {
+    this.modelChange(this.model), this.onModelConfigChange();
+  }
+  willUpdate(e) {
+    e.has("model") && this.modelChange(this.model, e.get("model"));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(),
+      this.removePieChartDataPopover(),
+      this.model.removeEventListener(
+        "geosceneChartsModelConfigChange",
+        this.onModelConfigChange
+      );
+  }
+  modelChange(e, t) {
+    t?.removeEventListener(
+      "geosceneChartsModelConfigChange",
+      this.onModelConfigChange
+    ),
+      e?.addEventListener(
+        "geosceneChartsModelConfigChange",
+        this.onModelConfigChange
+      );
+  }
+  buildNumericFieldItem(e) {
+    return C(
+      e,
+      a`<calcite-list-item .label=${m(
+        this.layerFieldsInfo,
+        e
+      )} .value=${e} closable @calciteListItemClose=${
+        this.onRemoveNumericField
+      }></calcite-list-item>`
+    );
+  }
+  onSortOrderSelect(e) {
+    (this.contentKind = s.sortOrder), this.setupPopover(e);
+  }
+  onCategorySelect(e) {
+    (this.contentKind = s.category), this.setupPopover(e);
+  }
+  onAddNumericFields(e) {
+    (this.contentKind = s.numericFields), this.setupPopover(e);
+  }
+  onRemoveNumericField(e) {
+    const t = e.target.value;
+    this.model.numericFields = this.model.numericFields.filter((i) => i !== t);
+  }
+  onShowDataLabelsChange(e) {
+    this.model.dataLabelsVisibility = e.target.checked;
+  }
+  updateMode(e) {
+    const t = e !== c && e.trim() !== "";
+    this.model.mode = t ? g.Category : g.Fields;
+  }
+  setupPopover(e) {
+    e.stopImmediatePropagation(), this.removePieChartDataPopover();
+    let t, i, r;
+    switch (this.contentKind) {
+      case s.category:
+        (t = this.categoryElement.value),
+          (i = this._messages.categoryHeader),
+          (r = this.model.category);
+        break;
+      case s.numericFields:
+        (t = this.numericFieldsElement.value),
+          (i = this._messages.numericFieldsMultipleHeader),
+          (r = this.model.numericFields);
+        break;
+      case s.sortOrder:
+        (t = this.sortOrderElement.value),
+          (i = this._messages.sortOrderHeader),
+          (r = this.model.getSortOrder());
+        break;
+    }
+    (this.pieChartPopover = P(
+      a`<geoscene-charts-config-pie-chart-popover .headingTitle=${i} .referenceElement=${t} open .contentKind=${this.contentKind} .layerFieldsInfo=${this.layerFieldsInfo} .selectedContent=${r} @geosceneChartsConfigPieChartDataPopoverChange=${this.onPieChartDataChange} @geosceneChartsConfigPopoverClose=${this.popoverClose}></geoscene-charts-config-pie-chart-popover>`
+    )),
+      !document.body.contains(this.pieChartPopover) &&
+        this.pieChartPopover !== null &&
+        document.body.appendChild(this.pieChartPopover);
+  }
+  getCorrectedCategoryValue() {
+    return E({
+      fieldName: this.model.category,
+      fieldList: this.layerFieldsInfo,
+    })
+      ? ""
+      : m(this.layerFieldsInfo, this.model.category);
+  }
+  removePieChartDataPopover() {
+    this.pieChartPopover !== null &&
+      ((this.pieChartPopover.open = !1),
+      (this.pieChartPopover = v(this.pieChartPopover)));
+  }
+  renderSorting() {
+    return a`<geoscene-charts-config-field-select .label=${
+      this._messages[this.model.getSortOrder()]
+    } @click=${this.onSortOrderSelect} ${d(
+      this.sortOrderElement
+    )}></geoscene-charts-config-field-select>`;
+  }
+  renderCategory() {
+    const e = this.getCorrectedCategoryValue();
+    return a`<geoscene-charts-config-field-select .label=${e} @click=${
+      this.onCategorySelect
+    } ${d(this.categoryElement)}></geoscene-charts-config-field-select>`;
+  }
+  renderNumericFields(e) {
+    const t = b(this.model.layer).idField,
+      i = [];
+    for (const r of e) r !== t && i.push(this.buildNumericFieldItem(r));
+    return a`<calcite-list label class=${o(l.fieldList)} ${d(
+      this.numericFieldsElement
+    )}>${i}</calcite-list>`;
+  }
+  render() {
+    const e = this.renderCategory(),
+      t = this.renderSorting(),
+      i = this.renderNumericFields([...this.model.numericFields]);
+    return a`<calcite-label class=${o(l.label)}>${
+      this._messages.category
+    }${e}</calcite-label>${[
+      a`<calcite-label class=${o(l.label)}>${
+        this._messages.numericFields
+      }${i}</calcite-label>`,
+      a`<div class=${o(
+        l.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=${o(l.label)} layout=inline-space-between>${
+      this._messages.showDataLabels
+    }<calcite-switch .checked=${
+      this.model.dataLabelsVisibility
+    } @calciteSwitchChange=${
+      this.onShowDataLabelsChange
+    }></calcite-switch></calcite-label><calcite-label class=${o(l.label)}>${
+      this._messages.sortOrder
+    }${t}</calcite-label>`;
+  }
+}
+f("geoscene-charts-config-pie-chart-data", w);
+export { w as GeosceneChartsConfigPieChartData };

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

@@ -0,0 +1,8 @@
+import "@geoscene/calcite-components/components/calcite-list-item";
+import "../geoscene-charts-config-pie-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-label";
+import "@geoscene/calcite-components/components/calcite-fab";
+import "@geoscene/calcite-components/components/calcite-switch";
+export * from "./customElement.js";

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

@@ -0,0 +1,300 @@
+/* COPYRIGHT  - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c as v } from "../../chunks/runtime.js";
+import { repeat as h } from "lit/directives/repeat.js";
+import { keyed as g } from "lit/directives/keyed.js";
+import "@geoscene/toolkit/intl";
+import { isEqual as k } from "lodash-es";
+import "luxon";
+import "d3-array";
+import "@geoscene/toolkit/type";
+import "../../chunks/series-types.js";
+import { R as $ } from "../../chunks/rest-js-object-literals.js";
+import { by as y, d3 as L, bU as P, bS 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/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 I, p as D } from "../../chunks/popover-ui-utils.js";
+import { P as r } from "../../chunks/common.js";
+import { P as a } from "../../chunks/interfaces.js";
+import {
+  p as u,
+  a as x,
+  c as p,
+  e as S,
+} from "../../chunks/chart-ui-utils2.js";
+import { u as f } from "../../chunks/useT9n.js";
+import { css as T, html as o } from "lit";
+import { createRef as C, ref as d } from "lit/directives/ref.js";
+import {
+  LitElement as E,
+  createEvent as b,
+  safeClassMap as l,
+} from "@geoscene/lumina";
+const n = {
+    jsAppFlyout: "js-app-flyout",
+    name: "pie-chart-data-popover",
+    numericFieldPickList: "pie-chart-data-numeric-fields-pick-list",
+    header: "header",
+    fab: "fab",
+    pickListItemLabel: "pick-list-item-label",
+    flipClass: "sort-counter-clockwise",
+    panel: "panel",
+  },
+  A = T`.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)}.name{display:flex;flex-direction:column;margin:.5rem;padding:.5rem;background:#fff;min-width:250px}.header{margin:0;font-weight:bolder}.fab{display:flex;justify-content:stretch}.pick-list-item-label{font-size:small}.sort-icon-color{color:#000}.sort-counter-clockwise{transform:scaleX(-1)}.panel{max-height:60vh}`;
+class w extends E {
+  constructor() {
+    super(...arguments),
+      (this._messages = f()),
+      (this.commonStrings = f({ name: "common", blocking: !0 })),
+      (this.picklist = C()),
+      (this.popoverElement = C()),
+      (this.placement = "leading"),
+      (this.offsetDistance = -200),
+      (this.pickListHasChanged = !1),
+      (this.aggregationLabels = []),
+      (this.layerFieldsInfo = []),
+      (this.geosceneChartsConfigPieChartDataPopoverChange = b()),
+      (this.geosceneChartsConfigPopoverClose = b());
+  }
+  static {
+    this.properties = {
+      aggregationLabels: 16,
+      messageOverrides: 0,
+      headingTitle: 1,
+      referenceElement: 0,
+      open: 5,
+      contentKind: 1,
+      layerFieldsInfo: 0,
+      selectedContent: 1,
+    };
+  }
+  static {
+    this.styles = A;
+  }
+  async reposition() {
+    await this.popoverElement.value?.reposition();
+  }
+  willUpdate(e) {
+    e.has("selectedContent") &&
+      this.selectedContentChange(
+        this.selectedContent,
+        e.get("selectedContent")
+      );
+    const t = u.map((i) => y(i, this.commonStrings));
+    k(this.aggregationLabels, t) || (this.aggregationLabels = t);
+  }
+  updated() {
+    I(this.popoverElement.value, this.open),
+      setTimeout(() => {
+        this.picklist.value?.setFocus();
+      }, x.PopoverTimer);
+  }
+  selectedContentChange(e, t) {
+    this.pickListHasChanged = D(e, t);
+  }
+  buildAggregationPickListItems() {
+    return h(
+      u,
+      (e) => e,
+      (e, t) =>
+        o`<calcite-list-item .label=${
+          this.aggregationLabels[t]
+        } .value=${e} .selected=${p(
+          e,
+          this.selectedContent
+        )}></calcite-list-item>`
+    );
+  }
+  buildSortOrder() {
+    const e = Object.keys(r);
+    return (
+      e.splice(e.indexOf(r.customSort), 1),
+      h(
+        e,
+        (t) => t,
+        (t) => {
+          let i = "string";
+          const c = "rotate";
+          let s = "";
+          switch (t) {
+            case r.labelAsc:
+              i = "string";
+              break;
+            case r.labelDesc:
+              (i = "string"), (s = n.flipClass);
+              break;
+            case r.valueAsc:
+              i = "number";
+              break;
+            case r.valueDesc:
+              (i = "number"), (s = n.flipClass);
+              break;
+            // Do nothing for customSort for now
+            case r.customSort:
+          }
+          return o`<calcite-list-item .selected=${
+            this.selectedContent === t
+          } .label=${this._messages[t]} .value=${
+            r[t]
+          }><calcite-icon slot=content-end .icon=${i}></calcite-icon><calcite-icon class=${l(
+            s
+          )} slot=content-end .icon=${c}></calcite-icon></calcite-list-item>`;
+        }
+      )
+    );
+  }
+  buildPickListItem(e) {
+    return g(
+      e.name,
+      o`<calcite-list-item .label=${L(this.layerFieldsInfo, e.name)} .value=${
+        e.name
+      } .selected=${p(e.name, this.selectedContent)}></calcite-list-item>`
+    );
+  }
+  buildPickListItems(e) {
+    const t = this.layerFieldsInfo?.length ?? 0,
+      i = [];
+    switch (e) {
+      case a.numericFields: {
+        for (let c = 0; c < t; c += 1) {
+          const s = this.layerFieldsInfo[c];
+          F(s) && i.push(this.buildPickListItem(s));
+        }
+        break;
+      }
+      case a.category: {
+        const c = g(
+          " ",
+          o`<calcite-list-item label=" " value=" " .selected=${p(
+            "",
+            this.selectedContent
+          )}></calcite-list-item>`
+        );
+        i.push(c);
+        for (let s = 0; s < t; s += 1) {
+          const m = this.layerFieldsInfo[s];
+          (P(m) || m.type === $.String) && i.push(this.buildPickListItem(m));
+        }
+        break;
+      }
+    }
+    return i;
+  }
+  closePopover() {
+    if (this.contentKind === a.numericFields && this.pickListHasChanged) {
+      const e = {
+        pickListElement: this.picklist.value,
+        eventEmitter: this.geosceneChartsConfigPieChartDataPopoverChange,
+        contentKind: this.contentKind,
+      };
+      S(e);
+    }
+    this.geosceneChartsConfigPopoverClose.emit();
+  }
+  onDataContentTypeChange(e) {
+    this.pickListHasChanged = !0;
+    const t = e.target.selectedItems;
+    this.geosceneChartsConfigPieChartDataPopoverChange.emit({
+      contentKind: this.contentKind,
+      value: t.map((i) => i.value),
+    }),
+      (this.open = !1);
+  }
+  onNumericFieldsChange(e) {
+    e.target !== null &&
+      (this.selectedContent = e.target.selectedItems.map((t) => t.value));
+  }
+  onNumericFieldSelectionDone() {
+    this.pickListHasChanged && this.closePopover();
+  }
+  renderAggregationType() {
+    const e = this.buildAggregationPickListItems();
+    return o`<calcite-list label class=${l(
+      n.pickListItemLabel
+    )} selection-mode=single selection-appearance=border @calciteListChange=${
+      this.onDataContentTypeChange
+    }>${e}</calcite-list>`;
+  }
+  renderCategory() {
+    const e = this.buildPickListItems(a.category);
+    return o`<calcite-list label class=${l(
+      n.pickListItemLabel
+    )} selection-mode=single selection-appearance=border filter-enabled @calciteListChange=${
+      this.onDataContentTypeChange
+    } ${d(this.picklist)}>${e}</calcite-list>`;
+  }
+  renderNumericFields() {
+    const e = this.buildPickListItems(a.numericFields);
+    return o`<calcite-list label class=${l(
+      n.numericFieldPickList
+    )} selection-mode=multiple filter-enabled @calciteListChange=${
+      this.onNumericFieldsChange
+    } ${d(this.picklist)}>${e}</calcite-list>`;
+  }
+  renderSortOrder() {
+    const e = this.buildSortOrder();
+    return o`<calcite-list label selection-mode=single selection-appearance=border @calciteListChange=${this.onDataContentTypeChange}>${e}</calcite-list>`;
+  }
+  renderPopoverInfo() {
+    let e;
+    switch (this.contentKind) {
+      case a.aggregation:
+        e = this.renderAggregationType();
+        break;
+      case a.category:
+        e = this.renderCategory();
+        break;
+      case a.numericFields:
+        e = this.renderNumericFields();
+        break;
+      case a.sortOrder:
+        e = this.renderSortOrder();
+        break;
+    }
+    return e;
+  }
+  render() {
+    let e;
+    return (
+      this.contentKind === a.numericFields &&
+        (e = o`<div slot=footer><calcite-fab class=${l(
+          n.fab
+        )} appearance=outline-fill kind=neutral .icon=${void 0} .label=${
+          this._messages.selectionDone
+        } scale=s text-enabled .text=${this._messages.selectionDone} @click=${
+          this.onNumericFieldSelectionDone
+        }></calcite-fab></div>`),
+      o`<div class=${l(n.jsAppFlyout)}><calcite-popover class=${l(
+        n.name
+      )} .referenceElement=${
+        this.referenceElement ?? document.body
+      } .placement=${this.placement} @calcitePopoverClose=${
+        this.closePopover
+      } .offsetDistance=${this.offsetDistance} .open=${
+        this.open
+      } label auto-close ${d(this.popoverElement)}><calcite-panel class=${l(
+        n.panel
+      )} closable .closed=${!this.open} @calcitePanelClose=${
+        this.closePopover
+      }><div slot=header-content class=${l(n.header)}>${
+        this.headingTitle ?? ""
+      }</div>${this.renderPopoverInfo()}${e}</calcite-panel></calcite-popover></div>`
+    );
+  }
+}
+v("geoscene-charts-config-pie-chart-popover", w);
+export { w as GeosceneChartsConfigPieChartPopover };

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

@@ -0,0 +1,7 @@
+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-fab";
+import "@geoscene/calcite-components/components/calcite-popover";
+import "@geoscene/calcite-components/components/calcite-panel";
+export * from "./customElement.js";