@geoscene/charts-components 5.0.19

package/dist/components/geoscene-charts-config-create-flow/index.js

@@ -0,0 +1,15 @@
+import "../geoscene-charts-config-select-chart-type-popover/index.js";
+import "@geoscene/calcite-components/components/calcite-tooltip";
+import "../geoscene-charts-config-view-charts/index.js";
+import "@geoscene/calcite-components/components/calcite-flow";
+import "@geoscene/calcite-components/components/calcite-flow-item";
+import "@geoscene/calcite-components/components/calcite-action-bar";
+import "@geoscene/calcite-components/components/calcite-action";
+import "../geoscene-charts-config-bar-chart/index.js";
+import "../geoscene-charts-config-line-chart/index.js";
+import "../geoscene-charts-config-pie-chart/index.js";
+import "../geoscene-charts-config-histogram/index.js";
+import "../geoscene-charts-config-scatter-plot/index.js";
+import "../geoscene-charts-config-box-plot/index.js";
+import "../geoscene-charts-config-heat-chart/index.js";
+export * from "./customElement.js";

package/dist/components/geoscene-charts-config-field-select/customElement.js

@@ -0,0 +1,37 @@
+/* COPYRIGHT  - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c as s } from "../../chunks/runtime.js";
+import { css as l, html as c } from "lit";
+import { LitElement as a, safeClassMap as t } from "@geoscene/lumina";
+const e = {
+    fieldSelectButtonSection: "field-select-btn-section",
+    fieldSelectButton: "field-select-btn",
+    fieldSelectButtonText: "field-select-btn-text",
+    fieldSelectButtonIcon: "field-select-btn-icon",
+    fieldSelectButtonInvalid: "field-select-btn-invalid",
+  },
+  r = l`.field-select-btn-section{background-color:var(--geoscene-charts-input-background);min-width:100%}.field-select-btn{background:var(--geoscene-charts-background-clear);border:1px solid;border-radius:var(--geoscene-charts-border-radius);display:flex;align-items:center;justify-content:space-between;padding:var(--geoscene-charts-side-spacing-half) var(--geoscene-charts-side-spacing-quarter);cursor:pointer;width:100%;text-align:unset}.field-select-btn:not(.field-select-btn-invalid){border-color:var(--geoscene-charts-border)}.field-select-btn.field-select-btn-invalid{border-color:var(--geoscene-charts-border-invalid)}.field-select-btn-exp{width:calc(100% - 32px)}.field-select-btn-exp .field-select-btn{border:none;border-radius:0;border-right:1px solid var(--geoscene-charts-border)}.field-select-btn-text{flex:0 1 auto;overflow:hidden;padding:0 var(--geoscene-charts-side-spacing-eighth);text-overflow:ellipsis;white-space:nowrap}.field-select-btn-icon{flex:0 0 0%;padding:0 var(--geoscene-charts-side-spacing-half)}.field-select-btn:disabled{cursor:default}`;
+class n extends a {
+  constructor() {
+    super(...arguments), (this.disabled = !1), (this.invalid = !1);
+  }
+  static {
+    this.properties = { label: 1, disabled: 5, invalid: 5 };
+  }
+  static {
+    this.styles = r;
+  }
+  render() {
+    const i = `${e.fieldSelectButton} ${
+      this.invalid ? e.fieldSelectButtonInvalid : ""
+    }`;
+    return c`<div class=${t(e.fieldSelectButtonSection)}><button class=${t(
+      i
+    )} .disabled=${this.disabled}><span class=${t(e.fieldSelectButtonText)}>${
+      this.label
+    }</span><slot name=fieldSelectSlot></slot><span class=${t(
+      e.fieldSelectButtonIcon
+    )}><calcite-icon scale=s icon=chevron-down></calcite-icon></span></button></div>`;
+  }
+}
+s("geoscene-charts-config-field-select", n);
+export { n as GeosceneChartsConfigFieldSelect };

package/dist/components/geoscene-charts-config-field-select/index.js

@@ -0,0 +1,2 @@
+import "@geoscene/calcite-components/components/calcite-icon";
+export * from "./customElement.js";

package/dist/components/geoscene-charts-config-font-style/customElement.js

@@ -0,0 +1,226 @@
+/* COPYRIGHT  - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c as y } from "../../chunks/runtime.js";
+import { css as S, html as l } from "lit";
+import "@geoscene/toolkit/intl";
+import { merge as i } from "lodash-es";
+import "luxon";
+import "d3-array";
+import "@geoscene/toolkit/type";
+import "../../chunks/series-types.js";
+import {
+  f as u,
+  h as s,
+  g as c,
+  i as r,
+} from "../../chunks/rest-js-object-literals.js";
+import { aO as d } 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";
+import { i as g, m, s as b, U as h } from "../../chunks/chart-ui-utils2.js";
+import { u as v } from "../../chunks/useT9n.js";
+import { createRef as C, ref as $ } from "lit/directives/ref.js";
+import {
+  LitElement as E,
+  createEvent as p,
+  safeClassMap as n,
+} from "@geoscene/lumina";
+const I = {
+    arial: "Arial",
+    arialBlack: "Arial Black",
+    bookman: "Bookman",
+    candara: "Candara",
+    courier: "Courier",
+    courierNew: "Courier New",
+    garamond: "Garamond",
+    georgia: "Georgia",
+    impact: "Impact",
+    palatino: "Palatino",
+    roboto: "Roboto",
+    times: "Times",
+    timesNewRoman: "Times New Roman",
+    verdana: "Verdana",
+  },
+  o = {
+    fontStyleContainer: "font-style-container",
+    font: "font",
+    numberInput: "number-input",
+    inputLabel: "input-label",
+  },
+  x = S`.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{overflow-y:auto}:host calcite-panel .font-style-container{display:flex;padding:0 1rem}:host calcite-panel .font-style-container .input-label{--calcite-label-margin-bottom: var(--geoscene-charts-intra-section-margin) !important}:host calcite-panel .font-style-container .number-input{margin-bottom:.5rem;display:flex}:host calcite-panel .font-style-container .number-input>div{width:100%}:host calcite-panel .font-style-container calcite-action,:host calcite-panel .font-style-container calcite-label{flex:1 1 0px;display:flex;flex-grow:inherit;width:80px}:host calcite-panel .font-style-container calcite-label{flex-grow:2}:host calcite-panel calcite-label.font{display:block;margin-top:1rem}`;
+class z extends E {
+  constructor() {
+    super(...arguments),
+      (this._messages = v()),
+      (this.fontSizeInputElement = C()),
+      (this.fontStyle = {
+        type: u.TS,
+      }),
+      (this.geosceneChartsConfigFontStyleChange = p()),
+      (this.geosceneChartsConfigFontStyleClose = p());
+  }
+  static {
+    this.properties = {
+      messageOverrides: 0,
+      fontStyle: 0,
+      header: 1,
+      open: 5,
+      enableClose: 5,
+    };
+  }
+  static {
+    this.styles = x;
+  }
+  closePanel(t) {
+    t.target.closed &&
+      this.enableClose === !0 &&
+      ((this.open = !1), this.geosceneChartsConfigFontStyleClose.emit());
+  }
+  fontChange(t) {
+    const f = t.target.selectedOption.value;
+    if (f !== void 0) {
+      const a = {
+        family: f,
+      };
+      this.isNewFontProperty("family", a) &&
+        ((this.fontStyle = i(this.fontStyle, { font: a })),
+        this.emitFontStyleEvent({ font: a }));
+    }
+  }
+  fontSizeChange() {
+    const t = this.fontSizeInputElement.value?.value;
+    if (
+      t !== void 0 &&
+      g(
+        t,
+        this.fontSizeInputElement.value?.min,
+        this.fontSizeInputElement.value?.max
+      )
+    ) {
+      const e = {
+        size: Number.parseInt(t),
+      };
+      this.isNewFontProperty("size", e) &&
+        ((this.fontStyle = i(this.fontStyle, { font: e })),
+        this.emitFontStyleEvent({ font: e })),
+        this.fontSizeInputElement.value &&
+          m({
+            inputElement: this.fontSizeInputElement.value,
+            status: h.IDLE,
+          });
+    } else
+      this.fontSizeInputElement.value &&
+        m({
+          inputElement: this.fontSizeInputElement.value,
+          status: h.INVALID,
+        });
+  }
+  boldSelect() {
+    let t = s.Bold;
+    this.fontStyle?.font?.weight === t && (t = s.Normal);
+    const e = { weight: t };
+    (this.fontStyle = i(this.fontStyle, { font: e })),
+      (this.fontStyle = { ...this.fontStyle }),
+      this.emitFontStyleEvent({ font: e });
+  }
+  italicSelect() {
+    let t = c.Italic;
+    this.fontStyle?.font?.style === t && (t = c.Normal);
+    const e = { style: t };
+    (this.fontStyle = i(this.fontStyle, { font: e })),
+      (this.fontStyle = { ...this.fontStyle }),
+      this.emitFontStyleEvent({ font: e });
+  }
+  underlineSelect() {
+    let t = r.Underline;
+    this.fontStyle?.font?.decoration === t && (t = r.None);
+    const e = { decoration: t };
+    (this.fontStyle = i(this.fontStyle, { font: e })),
+      (this.fontStyle = { ...this.fontStyle }),
+      this.emitFontStyleEvent({ font: e });
+  }
+  colorChange(t) {
+    const e = t.detail;
+    (this.fontStyle = i(this.fontStyle, { color: e })),
+      this.emitFontStyleEvent({ color: e });
+  }
+  emitFontStyleEvent(t) {
+    this.geosceneChartsConfigFontStyleChange.emit(t);
+  }
+  isNewFontProperty(t, e) {
+    return this.fontStyle?.font?.[t] !== e[t];
+  }
+  renderFonts() {
+    const t = Object.values(I).map(
+      (e) =>
+        l`<calcite-option .value=${e} .selected=${
+          e === this.fontStyle?.font?.family ||
+          (e === d().font?.family?.split(",")[0] &&
+            this.fontStyle?.font?.family === void 0)
+        }>${e}</calcite-option>`
+    );
+    return (
+      this.fontStyle?.font?.family === "" &&
+        t.push(l`<calcite-option value selected></calcite-option>`),
+      t
+    );
+  }
+  render() {
+    return l`<calcite-panel .heading=${
+      this.header ?? this._messages.header
+    } .closed=${this.open === !1} .closable=${
+      this.enableClose ?? !1
+    } @calcitePanelClose=${this.closePanel}><div class=${n(
+      o.fontStyleContainer
+    )}><calcite-label class=${n(o.font)}>${
+      this._messages.font
+    }<calcite-select .label=${this._messages.font ?? ""} @calciteSelectChange=${
+      this.fontChange
+    }>${this.renderFonts()}</calcite-select></calcite-label></div><div class=${n(
+      o.fontStyleContainer
+    )}><calcite-label class=${n(o.inputLabel)}>${
+      this._messages.size
+    }<calcite-input class=${n(
+      o.numberInput
+    )} type=number min=6 max=40 step=1 .value=${b(
+      this.fontStyle?.font?.size
+    )} @calciteInputInput=${this.fontSizeChange} ${$(
+      this.fontSizeInputElement
+    )}></calcite-input></calcite-label><calcite-action appearance=transparent .text=${
+      this._messages.bold ?? ""
+    } @click=${this.boldSelect} scale=l .active=${
+      this.fontStyle?.font?.weight === s.Bold
+    }><calcite-icon scale=s icon=bold></calcite-icon></calcite-action><calcite-action appearance=transparent .text=${
+      this._messages.italic ?? ""
+    } @click=${this.italicSelect} scale=l .active=${
+      this.fontStyle?.font?.style === c.Italic
+    }><calcite-icon scale=s icon=italicize></calcite-icon></calcite-action><calcite-action appearance=transparent .text=${
+      this._messages.underline ?? ""
+    } @click=${this.underlineSelect} scale=l .active=${
+      this.fontStyle?.font?.decoration === r.Underline
+    }><calcite-icon scale=s icon=underline></calcite-icon></calcite-action></div><div class=${n(
+      o.fontStyleContainer
+    )}><geoscene-charts-config-colors .rgba=${
+      this.fontStyle?.color ?? void 0
+    } @geosceneColorSelect=${
+      this.colorChange
+    }></geoscene-charts-config-colors></div></calcite-panel>`;
+  }
+}
+y("geoscene-charts-config-font-style", z);
+export { z as GeosceneChartsConfigFontStyle };

package/dist/components/geoscene-charts-config-font-style/index.js

@@ -0,0 +1,9 @@
+import "@geoscene/calcite-components/components/calcite-option";
+import "@geoscene/calcite-components/components/calcite-panel";
+import "@geoscene/calcite-components/components/calcite-label";
+import "@geoscene/calcite-components/components/calcite-select";
+import "@geoscene/calcite-components/components/calcite-input";
+import "@geoscene/calcite-components/components/calcite-action";
+import "@geoscene/calcite-components/components/calcite-icon";
+import "../geoscene-charts-config-colors/index.js";
+export * from "./customElement.js";

package/dist/components/geoscene-charts-config-font-style/resource.d.ts

@@ -0,0 +1,15 @@
+import type { Color, IFont } from "../../spec/rest-js-types.js";
+
+/** @internal */
+export const HTMLClasses: {
+    readonly fontStyleContainer: "font-style-container";
+    readonly font: "font";
+    readonly numberInput: "number-input";
+    readonly inputLabel: "input-label";
+};
+
+/** @internal */
+export type FontStyleChangePayload = {
+  font?: IFont;
+  color?: Color;
+};