@geoscene/charts-components 5.0.19

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

@@ -0,0 +1,454 @@
+/* COPYRIGHT  - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c as S } from "../../chunks/runtime.js";
+import { repeat as b } from "lit/directives/repeat.js";
+import { keyed as f } from "lit/directives/keyed.js";
+import "@geoscene/toolkit/type";
+import { n as g, a as T, i as p } from "../../chunks/series-types.js";
+import { R as y } from "../../chunks/rest-js-object-literals.js";
+import {
+  LitElement as F,
+  createEvent as $,
+  renderElement as P,
+  safeStyleMap as A,
+  safeClassMap as r,
+} from "@geoscene/lumina";
+import { substitute as D } from "@geoscene/core/intl.js";
+import { css as x, html as a } from "lit";
+import { createRef as u, ref as d } from "lit/directives/ref.js";
+import { isEqual as L } from "lodash-es";
+import { u as k } from "../../chunks/useT9n.js";
+import { B as n } from "../../chunks/interfaces.js";
+import { S as m } from "../../chunks/common.js";
+import "@geoscene/toolkit/intl";
+import "luxon";
+import "d3-array";
+import {
+  by as E,
+  bz as z,
+  cU as N,
+  d3 as w,
+  bU as I,
+  bT as B,
+  bS as K,
+  da as _,
+} 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/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 { e as U, p as H } from "../../chunks/popover-ui-utils.js";
+import {
+  b as v,
+  a as C,
+  c as h,
+  d as j,
+  e as M,
+  s as O,
+} from "../../chunks/chart-ui-utils2.js";
+const W = x`.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-y-axis{transform:rotate(90deg)}.sort-order-pick-list{overflow-y:hidden}.panel{max-height:60vh}.panel .size-section{width:19rem;margin:1rem 0;display:flex;flex-wrap:wrap;justify-content:space-evenly}.panel .size-section calcite-label{width:8rem;margin-bottom:.25rem}.panel .apply-button{width:17rem}`,
+  o = {
+    jsAppFlyout: "js-app-flyout",
+    name: "bar-chart-data-popover",
+    numericFieldPickList: "bar-chart-data-numeric-fields-pick-list",
+    header: "header",
+    fab: "fab",
+    pickListItemLabel: "pick-list-item-label",
+    rotateClass: "sort-y-axis",
+    sortOrderPickList: "sort-order-pick-list",
+    sizeSection: "size-section",
+    applyButton: "apply-button",
+    panel: "panel",
+  };
+class R extends F {
+  constructor() {
+    super(...arguments),
+      (this._messages = k()),
+      (this.commonStrings = k({ name: "common", blocking: !0 })),
+      (this.picklist = u()),
+      (this.intervalSizeElement = u()),
+      (this.intervalTypeElement = u()),
+      (this.popoverElement = u()),
+      (this.placement = "leading"),
+      (this.offsetDistance = -200),
+      (this.pickListHasChanged = !1),
+      (this.aggregationLabels = []),
+      (this.layerFieldsInfo = []),
+      (this.isCustomSortDisabled = !1),
+      (this.isNoAggregationDisabled = !1),
+      (this.geosceneChartsConfigBarChartDataPopoverChange = $()),
+      (this.geosceneChartsConfigPopoverClose = $());
+  }
+  static {
+    this.properties = {
+      aggregationLabels: 16,
+      timeAggregationLabels: 16,
+      messageOverrides: 0,
+      headingTitle: 1,
+      referenceElement: 0,
+      open: 5,
+      contentKind: 1,
+      layerFieldsInfo: 0,
+      selectedContent: 1,
+      isCustomSortDisabled: 5,
+      isNoAggregationDisabled: 5,
+    };
+  }
+  static {
+    this.styles = W;
+  }
+  async reposition() {
+    await this.popoverElement.value?.reposition();
+  }
+  willUpdate(e) {
+    e.has("selectedContent") &&
+      this.selectedContentChange(
+        this.selectedContent,
+        e.get("selectedContent")
+      );
+    const t = v.map((s) => E(s, this.commonStrings));
+    L(this.aggregationLabels, t) || (this.aggregationLabels = t);
+    const l = [g.Start, g.End].map((s) => z(s, this.commonStrings));
+    L(this.timeAggregationLabels, l) || (this.timeAggregationLabels = l);
+  }
+  updated() {
+    setTimeout(() => {
+      this.picklist.value?.setFocus();
+    }, C.PopoverTimer),
+      U(this.popoverElement.value, this.open),
+      this.hasUpdated ||
+        setTimeout(() => {
+          this.popoverElement.value?.reposition();
+        }, C.PopoverTimer);
+  }
+  selectedContentChange(e, t) {
+    this.pickListHasChanged = H(e, t);
+  }
+  buildAggregationListItems() {
+    const e = this.isNoAggregationDisabled
+      ? v.filter((t) => t !== T.NoAggregation)
+      : v;
+    return b(
+      e,
+      (t) => t,
+      (t, i) =>
+        a`<calcite-list-item .label=${
+          this.aggregationLabels[i]
+        } .value=${t} .selected=${h(
+          t,
+          this.selectedContent
+        )}></calcite-list-item>`
+    );
+  }
+  createTooltip(e) {
+    if (
+      e.target?.label === this._messages.customSort &&
+      this.isCustomSortDisabled
+    ) {
+      const t = e.target,
+        i = N(t),
+        s = new Intl.NumberFormat(i).format(C.customSortLimit),
+        c = D(this._messages.customSortLimit ?? "", {
+          totalLimit: s,
+        });
+      (this.tooltip = P(
+        a`<calcite-tooltip style=${A({
+          opacity: 1,
+          zIndex: "var(--calcite-floating-ui-z-index)",
+        })} .referenceElement=${t} open placement=top>${c}</calcite-tooltip>`
+      )),
+        document.body.appendChild(this.tooltip);
+    }
+  }
+  destroyTooltip() {
+    j(this.tooltip);
+  }
+  buildSortOrder() {
+    const e = Object.keys(m);
+    let t;
+    return b(
+      e,
+      (i) => i,
+      (i) => {
+        let l = "";
+        switch (i) {
+          case m.xAxisAsc: {
+            t = "a-z-down";
+            break;
+          }
+          case m.xAxisDesc: {
+            t = "a-z-up";
+            break;
+          }
+          case m.yAxisAsc: {
+            (t = "sort-descending"), (l = o.rotateClass);
+            break;
+          }
+          case m.yAxisDesc: {
+            (t = "sort-ascending"), (l = o.rotateClass);
+            break;
+          }
+          case m.customSort: {
+            t = "arrow-up-down";
+            break;
+          }
+        }
+        return a`<calcite-list-item .disabled=${
+          this.isCustomSortDisabled && i === m.customSort
+        } .label=${this._messages[i]} .selected=${
+          this.selectedContent === i
+        } .value=${m[i]} @mouseover=${this.createTooltip} @mouseout=${
+          this.destroyTooltip
+        }><calcite-icon class=${`sort-icon-color ${l}`} slot=content-start .icon=${t}></calcite-icon></calcite-list-item>`;
+      }
+    );
+  }
+  buildPickListItem(e) {
+    return f(
+      e.name,
+      a`<calcite-list-item .label=${w(this.layerFieldsInfo, e.name)} .value=${
+        e.name
+      } .selected=${h(e.name, this.selectedContent)}></calcite-list-item>`
+    );
+  }
+  buildPickListItems(e) {
+    const t = this.layerFieldsInfo?.length ?? 0,
+      i = [];
+    switch (e) {
+      case n.numericFields: {
+        for (let l = 0; l < t; l += 1) {
+          const s = this.layerFieldsInfo?.[l];
+          s && K(s) && i.push(this.buildPickListItem(s));
+        }
+        break;
+      }
+      case n.category: {
+        const l = f(
+          " ",
+          a`<calcite-list-item label=" " value=" " .selected=${h(
+            "",
+            this.selectedContent
+          )}></calcite-list-item>`
+        );
+        i.push(l);
+        for (let s = 0; s < t; s += 1) {
+          const c = this.layerFieldsInfo?.[s];
+          c &&
+            (c.type === y.String || I(c) || B(c)) &&
+            i.push(this.buildPickListItem(c));
+        }
+        break;
+      }
+      case n.splitByField: {
+        const l = f(
+          " ",
+          a`<calcite-list-item label=" " value=" " .selected=${h(
+            "",
+            this.selectedContent
+          )}></calcite-list-item>`
+        );
+        i.push(l);
+        for (let s = 0; s < t; s += 1) {
+          const c = this.layerFieldsInfo?.[s];
+          c &&
+            (I(c) || c.type === y.String) &&
+            i.push(this.buildPickListItem(c));
+        }
+        break;
+      }
+    }
+    return i;
+  }
+  closePopover() {
+    if (this.contentKind === n.numericFields && this.pickListHasChanged) {
+      const e = {
+        pickListElement: this.picklist.value,
+        eventEmitter: this.geosceneChartsConfigBarChartDataPopoverChange,
+        contentKind: this.contentKind,
+      };
+      M(e);
+    }
+    (this.open = !1), this.geosceneChartsConfigPopoverClose.emit();
+  }
+  onDataContentTypeChange(e) {
+    const t = e.target.selectedItems;
+    this.geosceneChartsConfigBarChartDataPopoverChange.emit({
+      contentKind: this.contentKind,
+      value: t.map((i) => i.value),
+    }),
+      (this.open = !1);
+  }
+  intervalChange() {
+    const e = Number.parseInt(this.intervalSizeElement.value?.value ?? ""),
+      t = this.intervalTypeElement.value?.selectedOption?.value;
+    !Number.isNaN(e) &&
+      e > 0 &&
+      this.geosceneChartsConfigBarChartDataPopoverChange.emit({
+        contentKind: this.contentKind,
+        value: [{ intervalSize: e, intervalUnits: t }],
+      }),
+      (this.open = !1);
+  }
+  onNumericFieldsChange(e) {
+    e.target !== null &&
+      (this.selectedContent = e.target.selectedItems.map((t) => t.value));
+  }
+  onNumericFieldSelectionDone() {
+    this.pickListHasChanged && this.closePopover();
+  }
+  buildIntervalAlignmentPickListItems() {
+    const e = [g.Start, g.End];
+    return b(
+      e,
+      (t) => t,
+      (t, i) =>
+        a`<calcite-list-item .label=${
+          this.timeAggregationLabels?.[i]
+        } .value=${t} .selected=${h(
+          t,
+          this.selectedContent
+        )}></calcite-list-item>`
+    );
+  }
+  renderAggregationType() {
+    const e = this.buildAggregationListItems();
+    return a`<calcite-list label class=${r(
+      o.pickListItemLabel
+    )} selection-mode=single selection-appearance=border @calciteListChange=${
+      this.onDataContentTypeChange
+    }>${e}</calcite-list>`;
+  }
+  renderCategory() {
+    const e = this.buildPickListItems(n.category);
+    return a`<calcite-list label class=${r(
+      o.pickListItemLabel
+    )} selection-mode=single selection-appearance=border filter-enabled @calciteListChange=${
+      this.onDataContentTypeChange
+    } ${d(this.picklist)}>${e}</calcite-list>`;
+  }
+  renderNumericFields() {
+    const e = this.buildPickListItems(n.numericFields);
+    return a`<calcite-list label class=${r(
+      o.numericFieldPickList
+    )} selection-mode=multiple filter-enabled @calciteListChange=${
+      this.onNumericFieldsChange
+    } ${d(this.picklist)}>${e}</calcite-list>`;
+  }
+  renderSortOrder() {
+    const e = this.buildSortOrder();
+    return a`<calcite-list label class=${r(
+      o.sortOrderPickList
+    )} selection-mode=single selection-appearance=border @calciteListChange=${
+      this.onDataContentTypeChange
+    }>${e}</calcite-list>`;
+  }
+  renderSplitByField() {
+    const e = this.buildPickListItems(n.splitByField);
+    return a`<calcite-list label class=${r(
+      o.pickListItemLabel
+    )} selection-mode=single selection-appearance=border filter-enabled @calciteListChange=${
+      this.onDataContentTypeChange
+    } ${d(this.picklist)}>${e}</calcite-list>`;
+  }
+  renderIntervalAlignment() {
+    const e = this.buildIntervalAlignmentPickListItems();
+    return a`<calcite-list label class=${r(
+      o.pickListItemLabel
+    )} selection-mode=single selection-appearance=border @calciteListChange=${
+      this.onDataContentTypeChange
+    }>${e}</calcite-list>`;
+  }
+  renderInterval() {
+    const e = this.selectedContent,
+      t = [p.Second, p.Minute, p.Hour, p.Day, p.Week, p.Month, p.Year];
+    return a`<div><div class=${r(o.sizeSection)}><calcite-label scale=m>${
+      this._messages.intervalSize
+    }<calcite-input type=number scale=m min=1 step=any .value=${O(
+      e?.size,
+      1
+    )} ${d(
+      this.intervalSizeElement
+    )}></calcite-input></calcite-label><calcite-label scale=m>${
+      this._messages.intervalType
+    }<calcite-select .label=${this._messages.intervalType ?? ""} ${d(
+      this.intervalTypeElement
+    )}>${t.map(
+      (i) =>
+        a`<calcite-option .value=${i} .label=${_(
+          i,
+          this._messages
+        )} .selected=${e?.unit === i}></calcite-option>`
+    )}</calcite-select></calcite-label><calcite-button class=${r(
+      o.applyButton
+    )} appearance=outline @click=${this.intervalChange}>${
+      this._messages.apply
+    }</calcite-button></div></div>`;
+  }
+  renderPopoverInfo() {
+    let e;
+    switch (this.contentKind) {
+      case n.aggregation:
+        e = this.renderAggregationType();
+        break;
+      case n.category:
+        e = this.renderCategory();
+        break;
+      case n.numericFields:
+        e = this.renderNumericFields();
+        break;
+      case n.splitByField:
+        e = this.renderSplitByField();
+        break;
+      case n.sortOrder:
+        e = this.renderSortOrder();
+        break;
+      case n.intervalAlignment:
+        e = this.renderIntervalAlignment();
+        break;
+      case n.interval:
+        e = this.renderInterval();
+        break;
+    }
+    return e;
+  }
+  render() {
+    let e;
+    return (
+      this.contentKind === n.numericFields &&
+        (e = a`<div slot=footer><calcite-fab class=${r(
+          o.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>`),
+      a`<div class=${r(o.jsAppFlyout)}><calcite-popover class=${r(
+        o.name
+      )} .referenceElement=${
+        this.referenceElement ?? document.body
+      } .placement=${this.placement} .offsetDistance=${
+        this.offsetDistance
+      } .open=${this.open} @calcitePopoverClose=${
+        this.closePopover
+      } label auto-close ${d(this.popoverElement)}><calcite-panel class=${r(
+        o.panel
+      )} closable .closed=${!this.open} @calcitePanelClose=${
+        this.closePopover
+      }><div slot=header-content class=${r(o.header)}>${
+        this.headingTitle ?? ""
+      }</div>${this.renderPopoverInfo()}${e}</calcite-panel></calcite-popover></div>`
+    );
+  }
+}
+S("geoscene-charts-config-bar-chart-popover", R);
+export { R as GeosceneChartsConfigBarChartPopover };

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

@@ -0,0 +1,13 @@
+import "@geoscene/calcite-components/components/calcite-list-item";
+import "@geoscene/calcite-components/components/calcite-tooltip";
+import "@geoscene/calcite-components/components/calcite-icon";
+import "@geoscene/calcite-components/components/calcite-list";
+import "@geoscene/calcite-components/components/calcite-label";
+import "@geoscene/calcite-components/components/calcite-input";
+import "@geoscene/calcite-components/components/calcite-select";
+import "@geoscene/calcite-components/components/calcite-option";
+import "@geoscene/calcite-components/components/calcite-button";
+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";