@geoscene/charts-components 5.0.19

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

@@ -0,0 +1,328 @@
+/* COPYRIGHT  - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c as p } from "../../chunks/runtime.js";
+import { l as n, h as d, r as c } from "../../chunks/type-guards.js";
+import { i as r, c as m, d as g } from "../../chunks/generate-x-axis-title.js";
+import "@geoscene/toolkit/type";
+import { d as l } from "../../chunks/series-types.js";
+import { isEmpty as T } from "lodash-es";
+import { m as x, U as b } from "../../chunks/chart-ui-utils2.js";
+import { u } from "../../chunks/useT9n.js";
+import { css as C, html as a } from "lit";
+import { createRef as f, ref as $ } from "lit/directives/ref.js";
+import { LitElement as v, safeClassMap as i } from "@geoscene/lumina";
+import "@geoscene/toolkit/intl";
+import "luxon";
+import "d3-array";
+import { _ as y } 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/geoscene-html-sanitizer";
+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";
+const s = {
+    textInput: "text-input",
+    label: "label",
+    labelContainer: "label-container",
+    select: "select",
+  },
+  A = C`.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;margin-top:var(--geoscene-charts-top-section-margin)}.text-input,.select{margin-bottom:var(--geoscene-charts-inter-section-margin)}.label{display:flex;justify-content:space-between}.label-container{display:flex;flex-direction:column;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}`;
+class I extends v {
+  constructor() {
+    super(...arguments),
+      (this._messages = u()),
+      (this.characterLimitInputElement = f()),
+      (this.onModelConfigChange = () => {
+        this.requestUpdate();
+      }),
+      (this.resetChartTitleToBeDynamic = () => {
+        const e = this.model.generateChartTitle();
+        (this.model.titleText = e), (this.disableResetButtonForChartTitle = !1);
+      }),
+      (this.resetXAxisTitleToBeDynamic = () => {
+        if (r(this.model) && m(this.model)) {
+          const e = this.model.generateXAxisTitle();
+          this.model.xAxisTitleText = e;
+        }
+        this.disableResetButtonForXAxisTitle = !1;
+      }),
+      (this.resetYAxisTitleToBeDynamic = () => {
+        if (n(this.model)) {
+          const e = d(this.model)
+            ? this.model.getDefaultXAxisTitleText()
+            : this.model.generateYAxisTitle();
+          this.model.setAxisTitleText(e, 1);
+        }
+        this.disableResetButtonForYAxisTitle = !1;
+      }),
+      (this.isPartialConfig = !1),
+      (this.disableResetButtonForChartTitle = !1),
+      (this.disableResetButtonForXAxisTitle = !1),
+      (this.disableResetButtonForYAxisTitle = !1),
+      (this.isChartTitleInvalid = !1),
+      (this.open = !1);
+  }
+  static {
+    this.properties = {
+      disableResetButtonForChartTitle: 16,
+      disableResetButtonForXAxisTitle: 16,
+      disableResetButtonForYAxisTitle: 16,
+      isChartTitleInvalid: 16,
+      messageOverrides: 0,
+      model: 0,
+      open: 5,
+    };
+  }
+  static {
+    this.styles = A;
+  }
+  load() {
+    this.modelChange(this.model);
+  }
+  willUpdate(e) {
+    e.has("model") && this.modelChange(this.model, e.get("model")),
+      this.handleResetButtons();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(),
+      this.model.removeEventListener(
+        "geosceneChartsModelConfigChange",
+        this.onModelConfigChange
+      );
+  }
+  handleResetButtons() {
+    this.isPartialConfig = y(this.model.config);
+    const e = this.model.generateChartTitle(),
+      t = this.model.titleText;
+    if (
+      ((this.disableResetButtonForChartTitle = this.isPartialConfig || e === t),
+      r(this.model) && m(this.model))
+    ) {
+      const o = this.model.generateXAxisTitle(),
+        h = this.model.xAxisTitleText;
+      this.disableResetButtonForXAxisTitle = this.isPartialConfig || o === h;
+    }
+    if (n(this.model)) {
+      const o = d(this.model)
+          ? this.model.getDefaultXAxisTitleText()
+          : this.model.generateYAxisTitle(),
+        h = this.model.getAxisTitleText(1);
+      this.disableResetButtonForYAxisTitle = this.isPartialConfig || o === h;
+    }
+  }
+  modelChange(e, t) {
+    t?.removeEventListener(
+      "geosceneChartsModelConfigChange",
+      this.onModelConfigChange
+    ),
+      e?.addEventListener(
+        "geosceneChartsModelConfigChange",
+        this.onModelConfigChange
+      );
+  }
+  setChartTitle(e) {
+    const { value: t } = e.target;
+    (this.isChartTitleInvalid = T(t.trim())),
+      this.characterLimitInputElement.value &&
+        x({
+          inputElement: this.characterLimitInputElement.value,
+          status: this.isChartTitleInvalid ? b.INVALID : b.IDLE,
+        }),
+      this.isChartTitleInvalid || (this.model.titleText = t);
+  }
+  setChartLegendTitle(e) {
+    const { value: t } = e.target;
+    t !== void 0 && c(this.model) && (this.model.legendTitleText = t);
+  }
+  setChartXAxisTitle(e) {
+    const { value: t } = e.target;
+    t !== void 0 && r(this.model) && (this.model.xAxisTitleText = t);
+  }
+  setChartYAxisTitle(e) {
+    const { value: t } = e.target;
+    t !== void 0 && n(this.model) && this.model.setAxisTitleText(t, 1);
+  }
+  setChartDescription(e) {
+    const { value: t } = e.target;
+    t !== void 0 && (this.model.descriptionText = t);
+  }
+  enableChartTitle(e) {
+    const t = e.target.checked;
+    this.model.chartTitleVisibility = t;
+  }
+  enableXAxisTitle(e) {
+    const t = e.target.checked;
+    g(this.model) && (this.model.xAxisTitleVisibility = t);
+  }
+  enableYAxisTitle(e) {
+    const t = e.target.checked;
+    n(this.model) && this.model.setAxisTitleVisibility(t, 1);
+  }
+  enableLegendTitle(e) {
+    const t = e.target.checked;
+    c(this.model) && (this.model.legendTitleVisibility = t);
+  }
+  enableDescription(e) {
+    const t = e.target.checked;
+    this.model.descriptionVisibility = t;
+  }
+  legendPositionChange(e) {
+    const o = e.target?.selectedItems[0]?.value;
+    c(this.model) && (this.model.legendPosition = o);
+  }
+  renderLegendPositions() {
+    return c(this.model)
+      ? [
+          a`<calcite-combobox-item .value=${l.Right} .heading=${
+            this._messages.legendRightPosition ?? ""
+          } .selected=${
+            this.model.legendPosition === l.Right
+          } icon=right-edge></calcite-combobox-item>`,
+          a`<calcite-combobox-item .value=${l.Left} .heading=${
+            this._messages.legendLeftPosition ?? ""
+          } .selected=${
+            this.model.legendPosition === l.Left
+          } icon=left-edge></calcite-combobox-item>`,
+          a`<calcite-combobox-item .value=${l.Top} .heading=${
+            this._messages.legendTopPosition ?? ""
+          } .selected=${
+            this.model.legendPosition === l.Top
+          } icon=upload-to></calcite-combobox-item>`,
+          a`<calcite-combobox-item .value=${l.Bottom} .heading=${
+            this._messages.legendBottomPosition ?? ""
+          } .selected=${
+            this.model.legendPosition === l.Bottom
+          } icon=download-to></calcite-combobox-item>`,
+        ]
+      : [];
+  }
+  render() {
+    return a`<div class=${i(
+      s.labelContainer
+    )}><calcite-label layout=inline-space-between class=${i(s.label)}>${
+      this._messages.chartTitle
+    }<div><calcite-button @click=${this.resetChartTitleToBeDynamic} .disabled=${
+      this.disableResetButtonForChartTitle
+    } appearance=transparent icon-end=reset>${
+      this._messages.reset
+    }</calcite-button><calcite-switch .checked=${
+      this.model.chartTitleVisibility
+    } @calciteSwitchChange=${
+      this.enableChartTitle
+    }></calcite-switch></div></calcite-label><calcite-input class=${i(
+      s.textInput
+    )} type=text .disabled=${!this.model.chartTitleVisibility} .value=${
+      this.isPartialConfig ? "" : this.model.titleText
+    } @calciteInputInput=${this.setChartTitle} ${$(
+      this.characterLimitInputElement
+    )}></calcite-input><geoscene-charts-config-invalid-input-message .invalidInputMessage=${
+      this._messages.emptyChartTitle
+    } .isInvalid=${
+      this.isChartTitleInvalid
+    }></geoscene-charts-config-invalid-input-message></div>${
+      r(this.model) && g(this.model)
+        ? [
+            a`<div class=${i(
+              s.labelContainer
+            )}><calcite-label layout=inline-space-between class=${i(s.label)}>${
+              this._messages.xAxisTitle
+            }<div><calcite-button @click=${
+              this.resetXAxisTitleToBeDynamic
+            } .disabled=${
+              this.disableResetButtonForXAxisTitle
+            } appearance=transparent icon-end=reset>${
+              this._messages.reset
+            }</calcite-button><calcite-switch .checked=${
+              this.model.xAxisTitleVisibility
+            } @calciteSwitchChange=${
+              this.enableXAxisTitle
+            }></calcite-switch></div></calcite-label><calcite-input class=${i(
+              s.textInput
+            )} type=text .disabled=${!this.model.xAxisTitleVisibility} .value=${
+              this.isPartialConfig ? "" : this.model.xAxisTitleText
+            } @calciteInputInput=${
+              this.setChartXAxisTitle
+            }></calcite-input></div>`,
+            n(this.model)
+              ? a`<div class=${i(
+                  s.labelContainer
+                )}><calcite-label layout=inline-space-between class=${i(
+                  s.label
+                )}>${this._messages.yAxisTitle}<div><calcite-button @click=${
+                  this.resetYAxisTitleToBeDynamic
+                } .disabled=${
+                  this.disableResetButtonForYAxisTitle
+                } appearance=transparent icon-end=reset>${
+                  this._messages.reset
+                }</calcite-button><calcite-switch .checked=${this.model.getAxisTitleVisibility(
+                  1
+                )} @calciteSwitchChange=${
+                  this.enableYAxisTitle
+                }></calcite-switch></div></calcite-label><calcite-input class=${i(
+                  s.textInput
+                )} tabindex=1 type=text .disabled=${!this.model.getAxisTitleVisibility(
+                  1
+                )} .value=${this.model.getAxisTitleText(
+                  1
+                )} @calciteInputInput=${
+                  this.setChartYAxisTitle
+                }></calcite-input></div>`
+              : null,
+          ]
+        : null
+    }${
+      c(this.model)
+        ? a`<div class=${i(
+            s.labelContainer
+          )}><calcite-label layout=inline-space-between class=${i(s.label)}>${
+            this._messages.legendTitle
+          }<calcite-switch .checked=${
+            this.model.legendTitleVisibility
+          } @calciteSwitchChange=${
+            this.enableLegendTitle
+          }></calcite-switch></calcite-label><calcite-input class=${i(
+            s.textInput
+          )} type=text .disabled=${!this.model.legendTitleVisibility} .value=${
+            this.model.legendTitleText
+          } @calciteInputInput=${
+            this.setChartLegendTitle
+          }></calcite-input></div>`
+        : null
+    }<div class=${i(
+      s.labelContainer
+    )}><calcite-label layout=inline-space-between class=${i(s.label)}>${
+      this._messages.legendPosition
+    }</calcite-label><calcite-combobox clear-disabled label class=${i(
+      s.select
+    )} @calciteComboboxChange=${
+      this.legendPositionChange
+    } selection-mode=single>${this.renderLegendPositions()}</calcite-combobox></div><div class=${i(
+      s.labelContainer
+    )}><calcite-label layout=inline-space-between class=${i(s.label)}>${
+      this._messages.description
+    }<calcite-switch .checked=${
+      this.model.descriptionVisibility
+    } @calciteSwitchChange=${
+      this.enableDescription
+    }></calcite-switch></calcite-label><calcite-text-area .disabled=${!this
+      .model.descriptionVisibility} .value=${
+      this.model.descriptionText
+    } @calciteTextAreaInput=${
+      this.setChartDescription
+    }></calcite-text-area></div>`;
+  }
+}
+p("geoscene-charts-config-general", I);
+export { I as GeosceneChartsConfigGeneral };

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

@@ -0,0 +1,9 @@
+import "@geoscene/calcite-components/components/calcite-combobox-item";
+import "@geoscene/calcite-components/components/calcite-label";
+import "@geoscene/calcite-components/components/calcite-button";
+import "@geoscene/calcite-components/components/calcite-switch";
+import "@geoscene/calcite-components/components/calcite-input";
+import "../geoscene-charts-config-invalid-input-message/index.js";
+import "@geoscene/calcite-components/components/calcite-combobox";
+import "@geoscene/calcite-components/components/calcite-text-area";
+export * from "./customElement.js";