@geoscene/charts-components 5.0.19

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

@@ -0,0 +1,485 @@
+/* COPYRIGHT  - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c as M } from "../../chunks/runtime.js";
+import { ref as B } from "lit/directives/ref.js";
+import { C as V, F as i, L as d } from "../../chunks/common.js";
+import {
+  e as x,
+  l as n,
+  r as h,
+  o as T,
+  j as w,
+  g as N,
+} from "../../chunks/type-guards.js";
+import "@geoscene/toolkit/type";
+import { W as l } from "../../chunks/series-types.js";
+import {
+  a as W,
+  f as b,
+  h as D,
+  g as G,
+  i as R,
+} from "../../chunks/rest-js-object-literals.js";
+import { i as L } from "../../chunks/data-labels-symbol.js";
+import { i as P, c as E, d as C } from "../../chunks/axis-lines-symbol.js";
+import "@geoscene/toolkit/intl";
+import {
+  isEmpty as f,
+  cloneDeep as a,
+  isArray as F,
+  isObject as A,
+  mergeWith as H,
+} from "lodash-es";
+import "luxon";
+import "d3-array";
+import "../../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 { c as u, e as r } from "../../chunks/index4.js";
+import "@geoscene/toolkit/dom";
+import { r as $ } from "../../chunks/popover-ui-utils.js";
+import { n as j } from "../../chunks/chart-ui-utils2.js";
+import { u as I } from "../../chunks/useT9n.js";
+import { css as O, html as S } from "lit";
+import {
+  LitElement as X,
+  renderElement as _,
+  safeClassMap as p,
+} from "@geoscene/lumina";
+const v = {
+    type: b.TS,
+    color: [1, 1, 1, 255],
+    font: {
+      family: "Tahoma",
+      size: 12,
+      decoration: R.None,
+      style: G.Normal,
+      weight: D.Normal,
+    },
+  },
+  k = {
+    type: b.SLS,
+    color: [1, 1, 1, 255],
+    style: W.Solid,
+    width: 2,
+  },
+  g = {
+    element: "chart-element",
+    elementList: "element-list",
+    sectionLabel: "section-label",
+  },
+  z = O`:host{width:var(--geoscene-charts-config-calcite-block-default-width);margin:var(--geoscene-charts-config-calcite-block-default-margin)}.section-label{display:flex;margin:var(--geoscene-charts-config-margin-major) var(--geoscene-charts-config-margin-minor);justify-content:space-between;align-items:center;font-weight:var(--calcite-font-weight-medium);font-size:var(--calcite-font-size-0)}.element-list{margin:var(--geoscene-charts-config-margin-minor)}.element{user-select:none}`;
+class Y extends X {
+  constructor() {
+    super(...arguments),
+      (this._messages = I()),
+      (this.formatPopover = null),
+      (this.selectableElements = []),
+      (this.textProperties = []),
+      (this.symbolProperties = []),
+      (this.symbolPropertyChange = (t) => {
+        const e = t;
+        e.stopImmediatePropagation();
+        let s;
+        if (
+          (e.target?.localName === "calcite-list-item"
+            ? (s = e.target?.value)
+            : (s = e.target?.parentNode?.value),
+          (this.selectedTexts = []),
+          (this.selectedBackground = []),
+          this.selectedSymbols.includes(s))
+        )
+          (this.selectedSymbols = []),
+            this.updateSelectedElement(this.selectedSymbols);
+        else {
+          const o = this.getFormatValue(s);
+          (this.selectedSymbols = [s]), this.initSelectedSymbols(u(o) ? o : k);
+        }
+        this.setupFormatPopover();
+      }),
+      (this.textPropertyChange = (t) => {
+        const e = t;
+        e.stopImmediatePropagation();
+        let s;
+        if (
+          (e.target?.localName === "calcite-list-item"
+            ? (s = e.target?.value)
+            : (s = e.target?.parentNode?.value),
+          (this.selectedSymbols = []),
+          (this.selectedBackground = []),
+          e.shiftKey)
+        ) {
+          this.selectedTexts = [];
+          const o = this.textProperties.indexOf(this.lastSelectedText ?? s),
+            m = this.textProperties.indexOf(s);
+          this.textProperties.forEach((c, y) => {
+            y >= Math.min(o, m) &&
+              y <= Math.max(o, m) &&
+              this.selectedTexts.push(c);
+          }),
+            this.updateSelectedElement(this.selectedTexts),
+            this.setupFormatPopover();
+        } else if (e.ctrlKey)
+          this.selectedTexts.includes(s)
+            ? ((this.selectedTexts = this.selectedTexts.filter((o) => o !== s)),
+              this.updateSelectedElement(this.selectedTexts))
+            : ((this.selectedTexts = [...this.selectedTexts, s]),
+              this.updateSelectedElement(this.selectedTexts)),
+            this.setupFormatPopover();
+        else if (this.selectedTexts.includes(s))
+          (this.selectedTexts = []),
+            this.updateSelectedElement(this.selectedTexts),
+            this.setupFormatPopover();
+        else {
+          const o = this.getFormatValue(s);
+          (this.selectedTexts = [s]),
+            this.initSelectedTexts(r(o) ? o : v),
+            this.setupFormatPopover();
+        }
+        this.lastSelectedText = s;
+      }),
+      (this.backgroundChange = (t) => {
+        const e = t;
+        e.stopImmediatePropagation();
+        let s;
+        e.target?.localName === "calcite-list-item"
+          ? (s = e.target?.value)
+          : (s = e.target?.parentNode?.value),
+          (this.selectedSymbols = []),
+          (this.selectedTexts = []),
+          this.selectedBackground.includes(s)
+            ? ((this.selectedBackground = []), (this.selectedElement = void 0))
+            : ((this.selectedBackground = [s]),
+              (this.selectedElement = f(this.getFormatValue(s))
+                ? void 0
+                : this.getFormatValue(s))),
+          this.setupFormatPopover();
+      }),
+      (this.updateSymbolProps = (t) => {
+        const e = t.detail;
+        this.selectedSymbols.forEach((s) => {
+          this.setFormatValue(s, e);
+        }),
+          (this.selectedElement = a(t.target.selectedElement));
+      }),
+      (this.updateBackground = (t) => {
+        this.setFormatValue(V.Background, t.detail),
+          (this.selectedElement = t.detail);
+      }),
+      (this.updateTextProps = (t) => {
+        const { font: e, color: s } = t.detail;
+        this.selectedTexts.forEach((o) => {
+          const m = this.getFormatValue(o),
+            c = r(m) ? m : void 0;
+          this.setFormatValue(o, {
+            ...c,
+            type: b.TS,
+            font: { ...c?.font, ...e },
+            color: s ?? c?.color,
+          });
+        }),
+          (this.selectedElement = a(t.target.selectedElement));
+      }),
+      (this.onModelConfigChange = () => {
+        this.requestUpdate();
+      }),
+      (this.formatPopoverClose = (t) => {
+        this.formatPopover === t?.target &&
+          ((this.selectedTexts = []),
+          (this.selectedSymbols = []),
+          (this.selectedBackground = []),
+          (this.selectedElement = {}),
+          this.removeFormatPopover());
+      }),
+      (this.mergeFormatValues = (t, e) => {
+        let s = !1;
+        (F(t) && F(e)) || (A(t) && A(e)) ? (s = !0) : (s = t === e);
+        const o =
+          typeof t == "number" || typeof e == "number" ? Number.NaN : "";
+        return s ? void 0 : o;
+      }),
+      (this.updateSelectableElements = (t) => {
+        t &&
+          !this.selectableElements.includes(t) &&
+          this.selectableElements.push(t);
+      }),
+      (this.selectedSymbols = []),
+      (this.selectedTexts = []),
+      (this.selectedBackground = []);
+  }
+  static {
+    this.properties = {
+      selectedSymbols: 16,
+      selectedTexts: 16,
+      selectedBackground: 16,
+      selectedElement: 16,
+      messageOverrides: 0,
+      model: 0,
+    };
+  }
+  static {
+    this.styles = z;
+  }
+  load() {
+    this.modelChange(this.model);
+  }
+  willUpdate(t) {
+    t.has("model") && this.modelChange(this.model, t.get("model"));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(),
+      this.removeFormatPopover(),
+      this.model.removeEventListener(
+        "geosceneChartsModelConfigChange",
+        this.onModelConfigChange
+      );
+  }
+  modelChange(t, e) {
+    e?.removeEventListener(
+      "geosceneChartsModelConfigChange",
+      this.onModelConfigChange
+    ),
+      t?.addEventListener(
+        "geosceneChartsModelConfigChange",
+        this.onModelConfigChange
+      );
+  }
+  correctTextElementSelection() {
+    for (const t of this.selectableElements) {
+      const e =
+        this.selectedTexts.includes(t.value) ||
+        this.selectedSymbols.includes(t.value) ||
+        this.selectedBackground.includes(t.value);
+      t.selected = e;
+    }
+  }
+  updateSelectedElement(t, e) {
+    if (((this.selectedElement = void 0), e === void 0)) {
+      const s = a(this.getFormatValue(t[0]));
+      this.selectedElement = t?.reduce((o, m) => {
+        const c = this.getFormatValue(m);
+        return H(o, c, this.mergeFormatValues);
+      }, s);
+    } else {
+      let s = a(e);
+      f(e) &&
+        (this.selectedSymbols?.length > 0 && (s = a(k)),
+        this.selectedTexts?.length > 0 && (s = a(v))),
+        (this.selectedElement = s);
+    }
+  }
+  initSelectedTexts(t) {
+    let e = a(t);
+    f(t) && (e = a(v)), (this.selectedElement = e);
+  }
+  initSelectedSymbols(t) {
+    let e = a(t);
+    f(t) && (e = a(k)), (this.selectedElement = e);
+  }
+  setupFormatPopover() {
+    this.formatPopover = $(this.formatPopover);
+    const t = this.selectedElement;
+    t?.type === b.TS ||
+    t?.type === b.SLS || // To check if the selected element is background.
+    Array.isArray(this.selectedElement)
+      ? ((this.formatPopover = _(
+          S`<geoscene-charts-config-format-popover .selectedElement=${this.selectedElement} .referenceElement=${this.el} @geosceneChartsConfigFormatPopoverSymbolChange=${this.updateSymbolProps} @geosceneChartsConfigFormatPopoverTextChange=${this.updateTextProps} @geosceneChartsConfigFormatPopoverColorChange=${this.updateBackground} placement=auto @geosceneChartsConfigPopoverClose=${this.formatPopoverClose} open></geoscene-charts-config-format-popover>`
+        )),
+        this.formatPopover !== null &&
+          !document.body.contains(this.formatPopover) &&
+          document.body.appendChild(this.formatPopover))
+      : this.removeFormatPopover();
+  }
+  removeFormatPopover() {
+    this.formatPopover !== null &&
+      ((this.formatPopover.open = !1),
+      (this.formatPopover = $(this.formatPopover)));
+  }
+  getFormatValue(t) {
+    switch (t) {
+      case i.Title:
+        return this.model.titleSymbol;
+      case i.Description:
+        return this.model.descriptionSymbol;
+      case i.XAxisTitle:
+        return C(this.model) ? this.model.xAxisTitleSymbol : void 0;
+      case i.YAxisTitle:
+        return n(this.model) ? this.model.getAxisTitleSymbol(1) : void 0;
+      case i.AxisLabels:
+        return E(this.model) ? this.model.axisLabelsSymbol : void 0;
+      case i.GuideLabels:
+        return T(this.model) ? this.model.guideLabelsSymbol : void 0;
+      case i.LegendText:
+        return h(this.model) ? this.model.legendTextSymbol : void 0;
+      case i.LegendTitle:
+        return h(this.model) ? this.model.legendTitleSymbol : void 0;
+      case i.DataLabels:
+        return L(this.model) ? this.model.dataLabelsSymbol : void 0;
+      case d.AxisLines:
+        return P(this.model) ? this.model.axisLinesSymbol : void 0;
+      case d.GridLines:
+        return n(this.model) ? this.model.getGridLinesSymbol() : void 0;
+      case d.LeaderLines:
+        return x(this.model) ? this.model.ticksSymbol : void 0;
+      case i.Background:
+        return this.model.backgroundColor;
+      default:
+        return;
+    }
+  }
+  setFormatValue(t, e) {
+    switch (t) {
+      case i.Title:
+        r(e) && (this.model.titleSymbol = e);
+        break;
+      case i.Description:
+        r(e) && (this.model.descriptionSymbol = e);
+        break;
+      case i.XAxisTitle:
+        C(this.model) && r(e) && (this.model.xAxisTitleSymbol = e);
+        break;
+      case i.YAxisTitle:
+        n(this.model) && r(e) && this.model.setAxisTitleSymbol(e, 1);
+        break;
+      case i.AxisLabels:
+        E(this.model) && r(e) && (this.model.axisLabelsSymbol = e);
+        break;
+      case i.GuideLabels:
+        T(this.model) && r(e) && (this.model.guideLabelsSymbol = e);
+        break;
+      case i.LegendText:
+        h(this.model) && r(e) && (this.model.legendTextSymbol = e);
+        break;
+      case i.LegendTitle:
+        h(this.model) && r(e) && (this.model.legendTitleSymbol = e);
+        break;
+      case i.DataLabels:
+        L(this.model) && r(e) && (this.model.dataLabelsSymbol = e);
+        break;
+      case d.AxisLines:
+        P(this.model) && u(e) && (this.model.axisLinesSymbol = e);
+        break;
+      case d.GridLines:
+        if (u(e)) {
+          if (w(this.model)) this.model.setGridLinesSymbol(e);
+          else if (n(this.model)) {
+            const s = this.model.chartType;
+            let o = [];
+            switch (s) {
+              // set y-axis grid line for charts -Bar chart/Line chart, Histogram and Box plot
+              case l.BarSeries:
+              case l.LineSeries:
+              case l.ComboLineAndBarSeries:
+              case l.HistogramSeries:
+              case l.BoxPlotSeries:
+              case l.RadarSeries: {
+                o = [1];
+                break;
+              }
+              // set both x and y-axis grid lines for charts - Scatter chart
+              case l.ScatterSeries: {
+                o = [0, 1];
+                break;
+              }
+            }
+            this.model.setGridLinesSymbol(e, o);
+          }
+        }
+        break;
+      case d.LeaderLines:
+        x(this.model) && u(e) && (this.model.ticksSymbol = e);
+        break;
+      case i.Background:
+        Array.isArray(e) && (this.model.backgroundColor = e);
+        break;
+    }
+  }
+  renderFormatElements() {
+    (this.textProperties = [
+      i.Title,
+      ...(C(this.model) ? [i.XAxisTitle] : []),
+      ...(n(this.model) ? [i.YAxisTitle] : []),
+      ...(h(this.model) ? [i.LegendTitle] : []),
+      i.Description,
+      ...(h(this.model) ? [i.LegendText] : []),
+      ...(E(this.model) ? [i.AxisLabels] : []),
+      ...(T(this.model) && this.model.chartType !== l.HeatSeries
+        ? [i.GuideLabels]
+        : []),
+      ...(L(this.model) &&
+      this.model.chartType !== l.HeatSeries &&
+      this.model.chartType !== l.BoxPlotSeries
+        ? [i.DataLabels]
+        : []),
+    ]),
+      N(this.model) &&
+        (this.textProperties = this.textProperties.filter(
+          (s) => s !== i.DataLabels
+        )),
+      (this.symbolProperties = [
+        i.Background,
+        ...(P(this.model) && this.model.chartType !== l.HeatSeries
+          ? [d.AxisLines]
+          : []),
+        ...(n(this.model) ? [d.GridLines] : []),
+        ...(x(this.model) ? [d.LeaderLines] : []),
+      ]);
+    const t = this.textProperties.map((s) =>
+        this.renderTextElement(s, this.textPropertyChange)
+      ),
+      e = this.symbolProperties.map((s) =>
+        s === i.Background
+          ? this.renderTextElement(s, this.backgroundChange)
+          : this.renderTextElement(s, this.symbolPropertyChange)
+      );
+    return { textElements: t, symbolElements: e };
+  }
+  renderTextElement(t, e) {
+    const s = j(t),
+      o = this.getFormatValue(t),
+      m = typeof o == "string" ? o : "",
+      c =
+        this.selectedTexts.includes(t) ||
+        this.selectedSymbols.includes(t) ||
+        this.selectedBackground.includes(t);
+    return S`<calcite-list-item class=${p(g.element)} .label=${
+      this._messages[t]
+    } .description=${m} .value=${t} .selected=${c} @click=${e} ${B(
+      this.updateSelectableElements
+    )}>${
+      s !== void 0
+        ? S`<calcite-icon slot=content-start scale=s .icon=${s}></calcite-icon>`
+        : null
+    }</calcite-list-item>`;
+  }
+  render() {
+    const { textElements: t, symbolElements: e } = this.renderFormatElements();
+    return S`<div class=${p(g.sectionLabel)}>${
+      this._messages.textElements
+    }</div><calcite-list label class=${p(
+      g.elementList
+    )} selection-mode=multiple selection-appearance=border @calciteListChange=${
+      this.correctTextElementSelection
+    }>${t}</calcite-list><div class=${p(g.sectionLabel)}>${
+      this._messages.symbolElements
+    }</div><calcite-list label class=${p(
+      g.elementList
+    )} selection-mode=single selection-appearance=border>${e}</calcite-list>`;
+  }
+}
+M("geoscene-charts-config-format", Y);
+export { Y as GeosceneChartsConfigFormat };

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

@@ -0,0 +1,5 @@
+import "../geoscene-charts-config-format-popover/index.js";
+import "@geoscene/calcite-components/components/calcite-list-item";
+import "@geoscene/calcite-components/components/calcite-icon";
+import "@geoscene/calcite-components/components/calcite-list";
+export * from "./customElement.js";

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

@@ -0,0 +1,113 @@
+/* COPYRIGHT  - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c as i } from "../../chunks/runtime.js";
+import { css as a, html as o } from "lit";
+import "@geoscene/toolkit/intl";
+import "lodash-es";
+import "luxon";
+import "d3-array";
+import "@geoscene/toolkit/type";
+import "../../chunks/series-types.js";
+import { f as r } from "../../chunks/rest-js-object-literals.js";
+import "../../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";
+import { e as l } from "../../chunks/popover-ui-utils.js";
+import { u as p } from "../../chunks/useT9n.js";
+import { createRef as n, ref as m } from "lit/directives/ref.js";
+import {
+  LitElement as c,
+  createEvent as s,
+  safeClassMap as h,
+} from "@geoscene/lumina";
+const g = {
+    jsAppFlyout: "js-app-flyout",
+  },
+  C = a``;
+class f extends c {
+  constructor() {
+    super(...arguments),
+      (this._messages = p()),
+      (this.popoverElement = n()),
+      (this.placement = "leading"),
+      (this.geosceneChartsConfigFormatPopoverColorChange = s()),
+      (this.geosceneChartsConfigFormatPopoverSymbolChange = s()),
+      (this.geosceneChartsConfigFormatPopoverTextChange = s()),
+      (this.geosceneChartsConfigPopoverClose = s());
+  }
+  static {
+    this.properties = {
+      messageOverrides: 0,
+      selectedElement: 0,
+      referenceElement: 0,
+      placement: 1,
+      open: 5,
+    };
+  }
+  static {
+    this.styles = C;
+  }
+  async reposition() {
+    await this.popoverElement.value?.reposition();
+  }
+  updated() {
+    l(this.popoverElement.value, this.open);
+  }
+  closePopover() {
+    (this.open = !1), this.geosceneChartsConfigPopoverClose.emit();
+  }
+  updateSymbolProperties(e) {
+    (this.selectedElement = e.target.lineStyle),
+      this.geosceneChartsConfigFormatPopoverSymbolChange.emit(e.detail);
+  }
+  updateTextProperties(e) {
+    (this.selectedElement = e.target.fontStyle),
+      this.geosceneChartsConfigFormatPopoverTextChange.emit(e.detail);
+  }
+  updateColorProperties(e) {
+    (this.selectedElement = e.detail),
+      this.geosceneChartsConfigFormatPopoverColorChange.emit(e.detail);
+  }
+  render() {
+    const e = this.selectedElement,
+      t = this.selectedElement;
+    return o`<div class=${h(
+      g.jsAppFlyout
+    )}><calcite-popover .referenceElement=${
+      this.referenceElement ?? document.body
+    } .placement=${this.placement} .open=${
+      this.open
+    } label @calcitePopoverClose=${
+      this.closePopover
+    } pointer-disabled auto-close ${m(this.popoverElement)}>${
+      Array.isArray(e)
+        ? o`<geoscene-charts-config-color-style .header=${this._messages.backgroundElement} enable-close .open=${this.open} .selectedColor=${e} @geosceneChartsConfigColorStyleClose=${this.closePopover} @geosceneChartsConfigColorStyleChange=${this.updateColorProperties}></geoscene-charts-config-color-style>`
+        : null
+    }${
+      t?.type === r.SLS
+        ? o`<geoscene-charts-config-line-style .header=${this._messages.lineStyle} .open=${this.open} enable-close .lineStyle=${t} @geosceneChartsConfigLineStyleClose=${this.closePopover} @geosceneChartsConfigLineStyleChange=${this.updateSymbolProperties}></geoscene-charts-config-line-style>`
+        : null
+    }${
+      t?.type === r.TS
+        ? o`<geoscene-charts-config-font-style .header=${this._messages.textStyle} .open=${this.open} enable-close .fontStyle=${t} @geosceneChartsConfigFontStyleClose=${this.closePopover} @geosceneChartsConfigFontStyleChange=${this.updateTextProperties}></geoscene-charts-config-font-style>`
+        : null
+    }</calcite-popover></div>`;
+  }
+}
+i("geoscene-charts-config-format-popover", f);
+export { f as GeosceneChartsConfigFormatPopover };

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

@@ -0,0 +1,5 @@
+import "@geoscene/calcite-components/components/calcite-popover";
+import "../geoscene-charts-config-color-style/index.js";
+import "../geoscene-charts-config-line-style/index.js";
+import "../geoscene-charts-config-font-style/index.js";
+export * from "./customElement.js";