@geoscene/charts-components 5.0.19

package/dist/components/geoscene-charts-action-bar/customElement.js

@@ -0,0 +1,500 @@
+/* COPYRIGHT  - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c as O } from "../../chunks/runtime.js";
+import { css as z, html as c } from "lit";
+import { g as E } from "../../chunks/interfaces.js";
+import { g as _ } from "../../chunks/action-bar-utils.js";
+import { u as $ } from "../../chunks/useT9n.js";
+import { createRef as b, ref as C } from "lit/directives/ref.js";
+import {
+  LitElement as V,
+  renderElement as y,
+  safeStyleMap as B,
+  createEvent as D,
+  safeClassMap as F,
+  nothing as s,
+} from "@geoscene/lumina";
+import { d as n } from "../../chunks/chart-ui-utils2.js";
+import { i as h, r as k } from "../../chunks/type-guards.js";
+import "@geoscene/toolkit/type";
+import { W as I } from "../../chunks/series-types.js";
+import { i as L } from "../../chunks/rotated-state.js";
+import { A as t, a as o, D as e } from "../../chunks/index5.js";
+import { a3 as M } from "../../chunks/index.js";
+function N(d) {
+  return d?.tagName.toLowerCase() === "geoscene-chart";
+}
+const R = {
+    actionBar: "action-bar",
+  },
+  W = z`.action-bar{display:flex;flex-direction:column;height:100%;border-right:1px solid var(--calcite-color-border-2);width:fit-content}:host{z-index:1001}`;
+class Z extends V {
+  constructor() {
+    super(...arguments),
+      (this.calciteActionBar = b()),
+      (this.exportCalciteActionBar = b()),
+      (this.expandAction = null),
+      (this._messages = $()),
+      (this.commonStrings = $({ name: "common", blocking: !0 })),
+      (this.handleMouseOver = (l) => {
+        if (
+          this.calciteActionBar.value &&
+          !this.calciteActionBar.value?.expanded
+        ) {
+          const a = l.target;
+          this.actionTooltip !== void 0 &&
+            (this.actionTooltip = n(this.actionTooltip));
+          let i;
+          a?.tagName === "CALCITE-ACTION"
+            ? (i = a)
+            : (a?.tagName === "CALCITE-ACTION-MENU" || a?.tagName === "DIV") &&
+              (i = a.firstChild),
+            i !== void 0 &&
+              ((this.actionTooltip = y(
+                c`<calcite-tooltip style=${B({
+                  opacity: 1,
+                  zIndex: "var(--calcite-floating-ui-z-index)",
+                })} .referenceElement=${i} open placement=trailing-end>${
+                  i.text
+                }</calcite-tooltip>`
+              )),
+              document.body.appendChild(this.actionTooltip));
+        } else this.actionTooltip = n(this.actionTooltip);
+      }),
+      (this.actionTooltip = null),
+      (this.forceDisableActions = !1),
+      (this.editChartToggle = t.Inactive),
+      (this.editChartState = o.Disabled),
+      (this.legendToggle = t.Inactive),
+      (this.legendState = o.Enabled),
+      (this.rotateChartToggle = t.Inactive),
+      (this.rotateChartState = o.Enabled),
+      (this.filterBySelectionToggle = t.Inactive),
+      (this.filterBySelectionState = o.Enabled),
+      (this.filterByExtentToggle = t.Inactive),
+      (this.filterByExtentState = o.Enabled),
+      (this.actionBarSelectionMode = M.MultiSelectionWithCtrlKey),
+      (this.selectionToggle = t.Inactive),
+      (this.selectionState = o.Enabled),
+      (this.zoomToggle = t.Inactive),
+      (this.zoomState = o.Enabled),
+      (this.fullExtentToggle = t.Inactive),
+      (this.fullExtentState = o.Enabled),
+      (this.clearSelectionToggle = t.Inactive),
+      (this.clearSelectionState = o.Enabled),
+      (this.switchSelectionToggle = t.Inactive),
+      (this.switchSelectionState = o.Enabled),
+      (this.exportAsImageState = o.Enabled),
+      (this.exportAsCSVState = o.Enabled),
+      (this.disableCSVExportForChartTypes = [I.ScatterSeries, I.BoxPlotSeries]),
+      (this.exportActionState = o.Enabled),
+      (this.expanded = !1),
+      (this.hiddenActions = [e.EditChart]),
+      (this.geosceneActionBarToggle = D()),
+      (this.geosceneDefaultActionSelect = D());
+  }
+  static {
+    this.properties = {
+      actionTooltip: 16,
+      messageOverrides: 0,
+      chartType: 1,
+      chartElement: 0,
+      forceDisableActions: 5,
+      editChartToggle: 1,
+      editChartState: 1,
+      editChartTitle: 1,
+      legendToggle: 1,
+      legendState: 1,
+      legendTitle: 1,
+      rotateChartToggle: 1,
+      rotateChartState: 1,
+      rotateChartTitle: 1,
+      filterBySelectionToggle: 1,
+      filterBySelectionState: 1,
+      filterBySelectionTitle: 1,
+      filterByExtentToggle: 1,
+      filterByExtentState: 1,
+      filterByExtentTitle: 1,
+      actionBarSelectionMode: 1,
+      selectionToggle: 1,
+      selectionState: 1,
+      selectionTitle: 1,
+      zoomToggle: 1,
+      zoomState: 1,
+      zoomTitle: 1,
+      fullExtentToggle: 1,
+      fullExtentState: 1,
+      fullExtentTitle: 1,
+      clearSelectionToggle: 1,
+      clearSelectionState: 1,
+      clearSelectionTitle: 1,
+      switchSelectionToggle: 1,
+      switchSelectionState: 1,
+      switchSelectionTitle: 1,
+      exportAsImageState: 1,
+      exportAsImageTitle: 1,
+      exportAsCSVState: 1,
+      exportAsCSVTitle: 1,
+      disableCSVExportForChartTypes: 0,
+      exportActionState: 1,
+      expanded: 5,
+      hiddenActions: 0,
+    };
+  }
+  static {
+    this.styles = W;
+  }
+  load() {
+    this.chartElement = N(this.el.parentElement)
+      ? this.el.parentElement
+      : void 0;
+  }
+  updated() {
+    this.handleExpandTooltip();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.actionTooltip?.remove();
+  }
+  async onDefaultActionClick(l) {
+    const a = l.currentTarget,
+      i = {
+        actionId: a.id,
+        actionActive: !1,
+      };
+    switch (a.id) {
+      case e.EditChart:
+        (this.editChartToggle =
+          this.editChartToggle === t.Active ? t.Inactive : t.Active),
+          (i.actionActive = this.editChartToggle === t.Active);
+        break;
+      case e.Legend:
+        (this.legendToggle =
+          this.legendToggle === t.Active ? t.Inactive : t.Active),
+          (i.actionActive = this.legendToggle === t.Active),
+          h(this.chartElement?.model) &&
+            k(this.chartElement?.model) &&
+            (this.chartElement.model.legendVisibility = i.actionActive),
+          this.chartElement?.model &&
+            (h(this.chartElement.model)
+              ? k(this.chartElement.model) &&
+                (this.chartElement.model.legendVisibility = i.actionActive)
+              : (this.chartElement.model.rotated =
+                  this.chartElement.model.rotated !== !0));
+        break;
+      case e.RotateChart:
+        (this.rotateChartToggle =
+          this.rotateChartToggle === t.Active ? t.Inactive : t.Active),
+          (i.actionActive = this.rotateChartToggle === t.Active),
+          this.chartElement?.model &&
+            (h(this.chartElement.model)
+              ? L(this.chartElement.model) &&
+                (this.chartElement.model.rotatedState = i.actionActive)
+              : (this.chartElement.model.rotated =
+                  this.chartElement.model.rotated !== !0));
+        break;
+      case e.FilterBySelection:
+        (this.filterBySelectionToggle =
+          this.filterBySelectionToggle === t.Active ? t.Inactive : t.Active),
+          (i.actionActive = this.filterBySelectionToggle === t.Active),
+          this.chartElement !== void 0 &&
+            (this.chartElement.filterBySelection = i.actionActive);
+        break;
+      case e.FilterByExtent:
+        (this.filterByExtentToggle =
+          this.filterByExtentToggle === t.Active ? t.Inactive : t.Active),
+          (i.actionActive = this.filterByExtentToggle === t.Active),
+          this.chartElement !== void 0 &&
+            (this.chartElement.filterByExtent = i.actionActive);
+        break;
+      case e.Selection:
+        (this.selectionToggle = t.Active),
+          (this.zoomToggle = t.Inactive),
+          (i.actionActive = this.selectionToggle === t.Active),
+          this.chartElement !== void 0 &&
+            (this.chartElement.actionMode = this.actionBarSelectionMode);
+        break;
+      case e.Zoom:
+        (this.zoomToggle = t.Active),
+          (this.selectionToggle = t.Inactive),
+          (i.actionActive = this.zoomToggle === t.Active),
+          this.chartElement !== void 0 &&
+            (this.chartElement.actionMode = M.Zoom);
+        break;
+      case e.ClearSelection:
+        (i.actionActive = this.clearSelectionToggle === t.Active),
+          this.chartElement?.clearSelection();
+        break;
+      case e.FullExtent:
+        (i.actionActive = this.fullExtentToggle === t.Active),
+          this.chartElement?.resetZoom();
+        break;
+      case e.SwitchSelection:
+        (i.actionActive = this.switchSelectionToggle === t.Active),
+          this.chartElement?.switchSelection();
+        break;
+      case e.ExportAsImage:
+        (i.actionActive = !0), await this.chartElement?.exportAsImage();
+        break;
+      case e.ExportAsCSV:
+        (i.actionActive = !0), await this.chartElement?.exportAsCSV();
+        break;
+    }
+    this.geosceneDefaultActionSelect.emit(i);
+  }
+  handleCalciteActionBarToggle() {
+    (this.expanded = this.calciteActionBar.value?.expanded ?? !1),
+      this.setCustomActionsExpanded(),
+      this.geosceneActionBarToggle.emit(this.expanded);
+  }
+  handleMouseOut() {
+    this.actionTooltip !== null && (this.actionTooltip = n(this.actionTooltip));
+  }
+  handleSlotChange(l) {
+    const i = l.currentTarget.assignedElements();
+    for (const r of i) r.onmouseover = this.handleMouseOver;
+  }
+  setCustomActionsExpanded() {
+    this.el.querySelectorAll("calcite-action").forEach((l) => {
+      const a = l;
+      a.textEnabled = this.expanded;
+    });
+  }
+  handleExpandTooltip() {
+    this.expandAction === null &&
+      ((this.expandAction =
+        this.calciteActionBar.value?.shadowRoot?.querySelector(
+          "calcite-action"
+        ) ?? null),
+      this.expandAction !== null &&
+        (this.listenOn(this.expandAction, "mouseenter", () => {
+          !this.calciteActionBar.value?.expanded &&
+            this.expandAction !== null &&
+            !document.body.contains(this.actionTooltip) &&
+            ((this.actionTooltip = y(
+              c`<calcite-tooltip style=${B({
+                opacity: 1,
+                zIndex: "var(--calcite-floating-ui-z-index)",
+              })} .referenceElement=${
+                this.expandAction
+              } open placement=trailing-end>${
+                this._messages.expand ?? ""
+              }</calcite-tooltip>`
+            )),
+            document.body.appendChild(this.actionTooltip));
+        }),
+        this.listenOn(this.expandAction, "mouseleave", () => {
+          !this.calciteActionBar.value?.expanded &&
+            this.actionTooltip !== null &&
+            (this.actionTooltip = n(this.actionTooltip));
+        }),
+        this.listenOn(this.expandAction, "click", () => {
+          this.calciteActionBar.value?.expanded &&
+            this.actionTooltip !== null &&
+            (this.actionTooltip = n(this.actionTooltip));
+        })));
+  }
+  renderDefaultActions() {
+    const l = _(this.chartType).filter((w) => !this.hiddenActions?.includes(w)),
+      a =
+        this.chartElement?.layer && "isTable" in this.chartElement.layer
+          ? this.chartElement.layer.isTable
+          : !1,
+      i = l.includes(e.EditChart),
+      r = l.includes(e.Legend),
+      g = l.includes(e.RotateChart),
+      m = l.includes(e.FilterBySelection),
+      u = l.includes(e.FilterByExtent) && !a,
+      A = l.includes(e.Zoom),
+      v = l.includes(e.Selection),
+      p = l.includes(e.ClearSelection),
+      f = l.includes(e.FullExtent),
+      T = l.includes(e.SwitchSelection),
+      S = l.includes(e.ExportAsImage),
+      x = l.includes(e.ExportAsCSV);
+    return [
+      r || g
+        ? c`<calcite-action-group>${
+            i
+              ? c`<div @mouseover=${this.handleMouseOver}><calcite-action id=${
+                  e.EditChart ?? s
+                } icon=gear .text=${
+                  this.commonStrings?.utilsStrings.actions?.editChart ?? ""
+                } .active=${this.editChartToggle === t.Active} .disabled=${
+                  this.editChartState === o.Disabled || this.forceDisableActions
+                } @click=${this.onDefaultActionClick}></calcite-action></div>`
+              : null
+          }${
+            r
+              ? c`<div @mouseover=${this.handleMouseOver}><calcite-action id=${
+                  e.Legend ?? s
+                } .text=${
+                  this.legendTitle ?? this._messages?.legend ?? ""
+                } .active=${this.legendToggle === t.Active} .disabled=${
+                  this.legendState === o.Disabled || this.forceDisableActions
+                } @click=${
+                  this.onDefaultActionClick
+                }><calcite-icon icon=legend scale=s flip-rtl></calcite-icon></calcite-action></div>`
+              : null
+          }${
+            g
+              ? c`<div @mouseover=${this.handleMouseOver}><calcite-action id=${
+                  e.RotateChart ?? s
+                } icon=rotate .text=${
+                  this.rotateChartTitle ?? this._messages?.rotateChart ?? ""
+                } .active=${this.rotateChartToggle === t.Active} .disabled=${
+                  this.rotateChartState === o.Disabled ||
+                  this.forceDisableActions
+                } @click=${this.onDefaultActionClick}></calcite-action></div>`
+              : null
+          }</calcite-action-group>`
+        : null,
+      m || u
+        ? c`<calcite-action-group>${
+            m
+              ? c`<div @mouseover=${this.handleMouseOver}><calcite-action id=${
+                  e.FilterBySelection ?? s
+                } icon=selection-filter .text=${
+                  this.filterBySelectionTitle ??
+                  this._messages?.filterBySelection ??
+                  ""
+                } .active=${
+                  this.filterBySelectionToggle === t.Active
+                } .disabled=${
+                  this.filterBySelectionState === o.Disabled ||
+                  this.forceDisableActions
+                } @click=${this.onDefaultActionClick}></calcite-action></div>`
+              : null
+          }${
+            u
+              ? c`<div @mouseover=${this.handleMouseOver}><calcite-action id=${
+                  e.FilterByExtent ?? s
+                } icon=extent-filter .text=${
+                  this.filterByExtentTitle ??
+                  this._messages?.filterByExtent ??
+                  ""
+                } .active=${this.filterByExtentToggle === t.Active} .disabled=${
+                  this.filterByExtentState === o.Disabled ||
+                  this.forceDisableActions
+                } @click=${this.onDefaultActionClick}></calcite-action></div>`
+              : null
+          }</calcite-action-group>`
+        : null,
+      v || A || f || p || T
+        ? c`<calcite-action-group>${
+            A
+              ? c`<div @mouseover=${this.handleMouseOver}><calcite-action id=${
+                  e.Zoom ?? s
+                } icon=magnifying-glass .text=${
+                  this.zoomTitle ?? this._messages?.zoom ?? ""
+                } .active=${this.zoomToggle === t.Active} .disabled=${
+                  this.zoomState === o.Disabled || this.forceDisableActions
+                } @click=${this.onDefaultActionClick}></calcite-action></div>`
+              : null
+          }${
+            v
+              ? c`<div @mouseover=${this.handleMouseOver}><calcite-action id=${
+                  e.Selection ?? s
+                } icon=cursor-selection .text=${
+                  this.selectionTitle ?? this._messages?.selection ?? ""
+                } .active=${this.selectionToggle === t.Active} .disabled=${
+                  this.selectionState === o.Disabled || this.forceDisableActions
+                } @click=${this.onDefaultActionClick}></calcite-action></div>`
+              : null
+          }${
+            p
+              ? c`<div @mouseover=${this.handleMouseOver}><calcite-action id=${
+                  e.ClearSelection ?? s
+                } icon=erase .text=${
+                  this.clearSelectionTitle ??
+                  this._messages?.clearSelection ??
+                  ""
+                } .active=${this.clearSelectionToggle === t.Active} .disabled=${
+                  this.clearSelectionState === o.Disabled ||
+                  this.forceDisableActions
+                } @click=${this.onDefaultActionClick}></calcite-action></div>`
+              : null
+          }${
+            f
+              ? c`<div @mouseover=${this.handleMouseOver}><calcite-action id=${
+                  e.FullExtent ?? s
+                } icon=zoom-out-fixed .text=${
+                  this.fullExtentTitle ?? this._messages?.fullExtent ?? ""
+                } .active=${this.fullExtentToggle === t.Active} .disabled=${
+                  this.fullExtentState === o.Disabled ||
+                  this.forceDisableActions
+                } @click=${this.onDefaultActionClick}></calcite-action></div>`
+              : null
+          }${
+            T
+              ? c`<div @mouseover=${this.handleMouseOver}><calcite-action id=${
+                  e.SwitchSelection ?? s
+                } icon=arrow-right-left .text=${
+                  this.switchSelectionTitle ??
+                  this._messages?.switchSelection ??
+                  ""
+                } .active=${
+                  this.switchSelectionToggle === t.Active
+                } .disabled=${
+                  this.switchSelectionState === o.Disabled ||
+                  this.forceDisableActions
+                } @click=${this.onDefaultActionClick}></calcite-action></div>`
+              : null
+          }</calcite-action-group>`
+        : null,
+      S || x
+        ? c`<calcite-action-menu .label=${this._messages?.export ?? ""} ${C(
+            this.exportCalciteActionBar
+          )}><calcite-action id=export icon=export .text=${
+            this._messages?.export ?? ""
+          } .disabled=${
+            this.exportActionState === o.Disabled || this.forceDisableActions
+          } @mouseover=${this.handleMouseOver} slot=trigger></calcite-action>${
+            S
+              ? c`<div><calcite-action id=${
+                  e.ExportAsImage ?? s
+                } icon=graph-bar .text=${
+                  this.exportAsImageTitle ?? this._messages?.exportAsImage ?? ""
+                } .disabled=${
+                  this.exportAsImageState === o.Disabled ||
+                  this.forceDisableActions
+                } @click=${
+                  this.onDefaultActionClick
+                } text-enabled></calcite-action></div>`
+              : null
+          }${
+            x
+              ? c`<div><calcite-action id=${
+                  e.ExportAsCSV ?? s
+                } icon=table .text=${
+                  this.exportAsCSVTitle ?? this._messages?.exportAsTable ?? ""
+                } .disabled=${
+                  this.exportAsCSVState === o.Disabled ||
+                  this.forceDisableActions ||
+                  (this.chartType &&
+                    this.disableCSVExportForChartTypes.includes(this.chartType))
+                } @click=${
+                  this.onDefaultActionClick
+                } text-enabled></calcite-action></div>`
+              : null
+          }</calcite-action-menu>`
+        : null,
+    ];
+  }
+  render() {
+    return c`<calcite-action-bar class=${F(
+      R.actionBar
+    )} @calciteActionBarToggle=${this.handleCalciteActionBarToggle} @mouseout=${
+      this.handleMouseOut
+    } .expanded=${this.expanded} .messageOverrides=${{
+      expand: this._messages.expand,
+      collapse: this._messages.collapse,
+    }} overflow-actions-disabled ${C(this.calciteActionBar)}><slot name=${
+      E.customActionTop
+    } @slotchange=${
+      this.handleSlotChange
+    }></slot>${this.renderDefaultActions()}<slot name=${
+      E.customActionBelow
+    } @slotchange=${this.handleSlotChange}></slot></calcite-action-bar>`;
+  }
+}
+O("geoscene-charts-action-bar", Z);
+export { Z as GeosceneChartsActionBar };

package/dist/components/geoscene-charts-action-bar/index.d.ts

@@ -0,0 +1 @@
+export * from "./customElement.js";

package/dist/components/geoscene-charts-action-bar/index.js

@@ -0,0 +1,7 @@
+import "@geoscene/calcite-components/components/calcite-tooltip";
+import "@geoscene/calcite-components/components/calcite-action-group";
+import "@geoscene/calcite-components/components/calcite-action";
+import "@geoscene/calcite-components/components/calcite-icon";
+import "@geoscene/calcite-components/components/calcite-action-menu";
+import "@geoscene/calcite-components/components/calcite-action-bar";
+export * from "./customElement.js";

package/dist/components/geoscene-charts-config-axes/customElement.js

@@ -0,0 +1,72 @@
+/* COPYRIGHT  - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c as t } from "../../chunks/runtime.js";
+import { css as o, html as n } from "lit";
+import { u as e } from "../../chunks/useT9n.js";
+import { LitElement as d } from "@geoscene/lumina";
+const u = o`:host{display:flex;flex-direction:column;width:var(--geoscene-charts-config-calcite-block-default-width)}`;
+class l extends d {
+  constructor() {
+    super(...arguments), (this._messages = e()), (this.open = !1);
+  }
+  static {
+    this.properties = {
+      messageOverrides: 0,
+      model: 0,
+      calculatedDataMinMaxBounds: 0,
+      open: 5,
+      showMinXBoundOption: 5,
+      showMaxXBoundOption: 5,
+      showMinYBoundOption: 5,
+      showMaxYBoundOption: 5,
+      showEnableXLogOption: 5,
+      showEnableYLogOption: 5,
+      calculatedMinMaxBounds: 0,
+    };
+  }
+  static {
+    this.styles = u;
+  }
+  getMinFromCalculatedDataBounds(i) {
+    return (
+      this.calculatedDataMinMaxBounds?.find((a) => a.isXAxis === i)?.minimum ??
+      Number.NaN
+    );
+  }
+  getMaxFromCalculatedDataBounds(i) {
+    return (
+      this.calculatedDataMinMaxBounds?.find((a) => a.isXAxis === i)?.maximum ??
+      Number.NaN
+    );
+  }
+  render() {
+    const i = this.calculatedMinMaxBounds?.find((a) => a.isXAxis),
+      s = this.calculatedMinMaxBounds?.find((a) => !a.isXAxis);
+    return n`<geoscene-charts-config-axis .model=${
+      this.model
+    } is-x-axis .axisTitle=${this._messages.xAxis} .showMinBoundOption=${
+      this.showMinXBoundOption
+    } .showMaxBoundOption=${this.showMaxXBoundOption} .showEnableLogOption=${
+      this.showEnableXLogOption
+    } .dataMinValue=${this.getMinFromCalculatedDataBounds(
+      !0
+    )} .dataMaxValue=${this.getMaxFromCalculatedDataBounds(
+      !0
+    )} .initialMaxBound=${i?.maximum} .initialMinBound=${
+      i?.minimum
+    }></geoscene-charts-config-axis><geoscene-charts-config-axis .model=${
+      this.model
+    } .axisTitle=${this._messages.yAxis} .showMinBoundOption=${
+      this.showMinYBoundOption
+    } .showMaxBoundOption=${this.showMaxYBoundOption} .showEnableLogOption=${
+      this.showEnableYLogOption
+    } .dataMinValue=${this.getMinFromCalculatedDataBounds(
+      !1
+    )} .dataMaxValue=${this.getMaxFromCalculatedDataBounds(
+      !1
+    )} .initialMaxBound=${s?.maximum} .initialMinBound=${
+      s?.minimum
+    }></geoscene-charts-config-axis>`;
+  }
+}
+t("geoscene-charts-config-axes", l);
+export { l as GeosceneChartsConfigAxes };

package/dist/components/geoscene-charts-config-axes/index.js

@@ -0,0 +1,2 @@
+import "../geoscene-charts-config-axis/index.js";
+export * from "./customElement.js";