@geoscene/charts-components 5.0.19

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

@@ -0,0 +1,929 @@
+/* COPYRIGHT  - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c as N } from "../../chunks/runtime.js";
+import { repeat as V } from "lit/directives/repeat.js";
+import { keyed as $ } from "lit/directives/keyed.js";
+import { c as U } from "../../chunks/setup-utils.js";
+import {
+  b as S,
+  a as b,
+  g as _,
+  r as v,
+  l as T,
+} from "../../chunks/type-guards.js";
+import { i as H } from "../../chunks/rotated-state.js";
+import "@geoscene/toolkit/intl";
+import { isEqual as w } from "lodash-es";
+import "luxon";
+import {
+  _ as D,
+  dk as k,
+  d6 as F,
+  ds as z,
+  du as O,
+  ag as R,
+} from "../../chunks/index.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/toolkit/type";
+import { W as o, i as W } from "../../chunks/series-types.js";
+import "@geoscene/core/Graphic.js";
+import "@geoscene/core/renderers/support/jsonUtils.js";
+import "@geoscene/core/symbols/support/symbolUtils.js";
+import "d3-array";
+import { substitute as G } from "@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/core/promiseUtils.js";
+import "@geoscene/toolkit/dom";
+import { C as f } from "../../chunks/index5.js";
+import { a as L } from "../../chunks/chart-ui-utils.js";
+import { r as X } from "../../chunks/popover-ui-utils.js";
+import { C as l } from "../../chunks/interfaces.js";
+import {
+  LitElement as Z,
+  createEvent as y,
+  renderElement as I,
+  safeStyleMap as K,
+  safeClassMap as d,
+} from "@geoscene/lumina";
+import { css as j, html as h } from "lit";
+import { createRef as q, ref as Y } from "lit/directives/ref.js";
+import { u as P } from "../../chunks/useT9n.js";
+import { b as Q, s as x, g as J } from "../../chunks/store.js";
+import { h as ee, a as M, s as te } from "../../chunks/web-component-utils.js";
+import { A as ae } from "../../chunks/axis-model-wrapper.js";
+import { d as ie } from "../../chunks/chart-ui-utils2.js";
+const m = {
+  chartUIComponent: "chart-ui-component",
+  tabBar: "tab-bar",
+  tab: "tab",
+};
+function B(p, e) {
+  const a = /* @__PURE__ */ new Set();
+  let t = e;
+  return (
+    p?.forEach((i, s) => {
+      const r = i.chartId;
+      (a.has(r) || r === void 0 || r === "") &&
+        ((i.chartId = `Chart_${Date.now()}_${s}`), e === r && (t = i.chartId)),
+        a.add(r);
+    }),
+    t
+  );
+}
+function se(p, e, a) {
+  return p?.filter((t) => F(a, t.config) && t.layer?.id === e) ?? [];
+}
+function re(p) {
+  const { modelList: e, layerList: a, activeLayerId: t, disableEditing: i } = p,
+    s = /* @__PURE__ */ new Map();
+  return (
+    e?.forEach((r) => {
+      const n = r.layer;
+      n && s.set(n.id, n);
+    }),
+    i || a.forEach((r) => s.set(r.id, r)),
+    Array.from(s.values()).filter((r) => !t || r.id === t)
+  );
+}
+function oe(p, e) {
+  p.forEach((a) => {
+    e.forEach((t) => {
+      a?.id === t.layer?.id && E(a, t);
+    });
+  });
+}
+function E(p, e) {
+  const a = p;
+  if (a) {
+    const t = [...(a?.charts ?? [])],
+      i = t?.findIndex((r) => r.id === e.chartId);
+    let s = !1;
+    i !== void 0 && i > -1
+      ? ((s = !w(t[i], e.config)), (t[i] = e.config))
+      : a && !D(e.config) && ((s = !0), t.push(e.config)),
+      s && (a.charts = t);
+  }
+}
+function le(p, e) {
+  const a = p;
+  if (a) {
+    const t = [...(a.charts ?? [])],
+      i = t.findIndex((s) => s.id === e);
+    i > -1 && (t.splice(i, 1), (a.charts = t));
+  }
+}
+function ne(p, e) {
+  const a = p;
+  if (a) {
+    let t = [...(a.charts ?? [])];
+    (t = k({
+      arrayA: t,
+      arrayB: e.map((i) => i.config),
+      getKey: (i) => i.id ?? i.title?.content.text ?? "",
+    })),
+      (a.charts = t);
+  }
+}
+const ce = j`:host{display:flex;flex-direction:column;flex:1 1 auto;overflow:hidden;height:inherit;max-height:100%}.chart-ui-component{overflow-y:auto;overflow-x:hidden}.label{display:flex;margin-left:1rem;margin-bottom:.5rem;justify-content:space-between}.text{display:flex;margin-left:1rem;width:calc(100% - 1.5rem);height:2rem;margin-bottom:.5rem;justify-content:space-between}.field-list{max-height:50vh;overflow-y:scroll}.row{padding:.5rem}.bin-count-container{display:flex;width:calc(100% - 1rem);padding:.5rem}.bin-count-slider{margin-left:1rem;width:calc(90% - 1rem)}.bin-count-input{margin-left:1rem;height:2rem;width:2rem}.bin-row{padding:.5rem 0 .5rem .5rem}.tab-bar{display:flex}.tab{flex:1;height:2.5rem}`;
+class he extends Z {
+  constructor() {
+    super(),
+      (this.selectChartTypePopover = null),
+      (this.chartsListFlowItem = q()),
+      (this.supportedChartTypes = [
+        o.BarSeries,
+        o.BoxPlotSeries,
+        o.LineSeries,
+        o.PieSeries,
+        o.HistogramSeries,
+        o.ScatterSeries,
+        o.HeatSeries,
+      ]),
+      (this._messages = P()),
+      (this.commonStrings = P({ name: "common", blocking: !0 })),
+      (this.chartDataProcessComplete = (e) => {
+        const a = e,
+          { chartData: t, model: i } = a.detail,
+          s = this.getModel(this.selectedChartId);
+        if (i?.isSameChartAs(s))
+          switch (s?.chartType) {
+            case o.HistogramSeries:
+              (this.chartData = t), i && (i.dataStore.chartData = t);
+              break;
+            case o.PieSeries: {
+              (this.chartData = t), i && (i.dataStore.chartData = t);
+              break;
+            }
+            case o.ScatterSeries: {
+              const n = t,
+                { dataItems: c, r2: u, aggregated: g } = n;
+              let C = u;
+              Number.isFinite(u) || (C = void 0),
+                (this.r2 = C),
+                _(i) &&
+                  ((i.dataStore.r2 = C),
+                  (i.dataStore.aggregated = g),
+                  g && (i.additionalTooltipField = void 0)),
+                (this.calculatedDataMinMaxBounds = this.getDataExtent(c)),
+                i &&
+                  (i.dataStore.calculatedDataMinMaxBounds =
+                    this.calculatedDataMinMaxBounds);
+              break;
+            }
+            case o.LineSeries:
+            case o.BarSeries: {
+              const { dataItems: n, timeIntervalInfo: c } = t;
+              if (
+                ((S(s) || (b(s) && s.binTemporalData)) &&
+                  (c?.size !== void 0 &&
+                    s.temporalBinningSize !== c?.size &&
+                    (s.temporalBinningSize = c?.size),
+                  c?.unit !== void 0 &&
+                    s.temporalBinningUnit !== c?.unit &&
+                    c?.unit !== W.Quarter &&
+                    (s.temporalBinningUnit = c?.unit),
+                  c?.size !== void 0 &&
+                    c?.unit !== void 0 &&
+                    Q(x, { size: c.size, unit: c.unit })),
+                (this.calculatedDataMinMaxBounds = this.getDataExtent(n)),
+                i &&
+                  (i.dataStore.calculatedDataMinMaxBounds =
+                    this.calculatedDataMinMaxBounds),
+                b(s))
+              ) {
+                const u = s.xAxisField,
+                  g = n.some((A) => A[u] === null),
+                  C = s.nullCategory;
+                g && C === void 0 && (s.nullCategory = z.nullCategory);
+              }
+              break;
+            }
+          }
+      }),
+      (this.chartAxesMinMaxChange = (e) => {
+        const a = e,
+          { bounds: t, model: i } = a.detail,
+          s = this.getModel(this.selectedChartId),
+          r = i?.isSameChartAs(s),
+          n = s?.chartType;
+        if (r)
+          switch (n) {
+            case o.BarSeries:
+            case o.BoxPlotSeries:
+            case o.LineSeries:
+            case o.HistogramSeries:
+            case o.ScatterSeries:
+              (this.calculatedMinMaxBounds = t),
+                i && (i.dataStore.calculatedMinMaxBounds = t),
+                this.updateAxesBoundsInAppState(t);
+              break;
+          }
+      }),
+      (this.chartSeriesColorChange = (e) => {
+        const a = e,
+          { data: t, model: i } = a.detail,
+          s = this.getModel(this.selectedChartId);
+        if (i?.isSameChartAs(s))
+          switch (s?.chartType) {
+            case o.BarSeries:
+            case o.BoxPlotSeries:
+            case o.LineSeries:
+            case o.HistogramSeries:
+              (this.seriesColor = t), i && (i.dataStore.seriesColor = t);
+              break;
+            case o.PieSeries: {
+              const n = /* @__PURE__ */ new Map([[0, t]]);
+              (this.seriesColor = n), i && (i.dataStore.seriesColor = n);
+              break;
+            }
+            case o.ScatterSeries:
+          }
+      }),
+      (this.chartNoRenderPropChange = (e) => {
+        const a = e,
+          { propName: t, value: i, model: s } = a.detail,
+          r = this.modelList.find((n) => s?.isSameChartAs(n));
+        if (r)
+          switch (t) {
+            case "rotation":
+              typeof i == "boolean" && H(r) && (r.rotatedState = i);
+              break;
+            case "legendPosition":
+              typeof i == "string" && v(r) && (r.legendPosition = i);
+              break;
+            case "legendVisibility":
+              typeof i == "boolean" && v(r) && (r.legendVisibility = i);
+              break;
+          }
+      }),
+      (this.chartLegendItemVisibilityChange = (e) => {
+        const a = e,
+          { legendItemVisibility: t, model: i } = a.detail,
+          s = this.modelList.find((r) => i?.isSameChartAs(r));
+        s?.setSeriesVisibility(t),
+          T(s) &&
+            ((s.getMinBound(1) === null || Number.isNaN(s.getMinBound(1))) &&
+              s.setMinBound(null, 1),
+            (s.getMaxBound(1) === null || Number.isNaN(s.getMaxBound(1))) &&
+              s.setMaxBound(null, 1),
+            S(s) &&
+              ((s.getMinBound(0) === null || Number.isNaN(s.getMinBound(0))) &&
+                s.setMinBound(null, 0),
+              (s.getMaxBound(0) === null || Number.isNaN(s.getMaxBound(0))) &&
+                s.setMaxBound(null, 0)));
+      }),
+      (this.onSelectChartTypeChange = (e) => {
+        (this.currentChartTypeText = ""),
+          (this.calculatedDataMinMaxBounds = void 0),
+          (this.calculatedMinMaxBounds = void 0),
+          this.removeSelectChartTypePopover();
+        const { selectedModelType: a, layerId: t } = e.target;
+        a !== void 0 &&
+          ((this.allowChartSyncing = !0),
+          this.geosceneChartsConfigNewChart.emit({
+            key: "key",
+            chartType: a,
+            layerId: t,
+          }));
+      }),
+      (this.onAddChartClose = () => {
+        this.removeSelectChartTypePopover();
+      }),
+      (this.onModelConfigChange = (e) => {
+        if (this.syncChartsToLayers && this.allowChartSyncing) {
+          const a = e.target;
+          E(a?.layer, a);
+        }
+        this.requestUpdate();
+      }),
+      (this.allowChartSyncing = !1),
+      (this.currentChartTypeText = ""),
+      (this.modelList = []),
+      (this.layerList = []),
+      (this.disableEditing = !1),
+      (this.syncChartsToLayers = !1),
+      (this.panelNumber = 0),
+      (this.geosceneChartsConfigChartViewChartClose = y()),
+      (this.geosceneChartsConfigModelListChange = y()),
+      (this.geosceneChartsConfigNewChart = y()),
+      (this.geosceneChartsConfigPanelNumberChange = y()),
+      (this.geosceneChartsConfigSelectedChartChange = y()),
+      this.addChartEventListeners(),
+      this.listen(
+        "geosceneChartsConfigModelListReorder",
+        this.modelListReorderChangeListener
+      );
+  }
+  static {
+    this.properties = {
+      selectedPanel: 16,
+      currentChartTypeText: 16,
+      messageOverrides: 0,
+      modelList: [0, { hasChanged: M }],
+      layerList: [0, { hasChanged: M }],
+      selectedChartId: 1,
+      activeLayerId: 1,
+      disableEditing: 5,
+      syncChartsToLayers: 5,
+      timeZone: 1,
+      headerTitle: 1,
+      open: 5,
+      chartData: [0, { hasChanged: M }],
+      r2: 9,
+      calculatedDataMinMaxBounds: [0, { hasChanged: M }],
+      calculatedMinMaxBounds: [0, { hasChanged: M }],
+      seriesColor: [0, { hasChanged: ee }],
+      popoverPlacement: 1,
+      usePopupTemplateFieldsInfo: 5,
+      panelNumber: 9,
+      filterBySelection: 5,
+    };
+  }
+  static {
+    this.styles = ce;
+  }
+  async setFocus() {
+    await this.chartsListFlowItem.value?.setFocus();
+  }
+  async load() {
+    await this.layerListChange();
+    const e = this.getModel(this.selectedChartId);
+    this.setEventBasedPropsFromModelData(e);
+  }
+  willUpdate(e) {
+    e.has("layerList") && this.layerListChange(),
+      e.has("panelNumber") && this.panelNumberChange(this.panelNumber),
+      e.has("modelList") &&
+        this.modelListChange(this.modelList, e.get("modelList")),
+      e.has("selectedChartId") &&
+        this.selectedChartIdChange(this.selectedChartId);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(),
+      this.clearPartialModels(),
+      this.removeSelectChartTypePopover();
+  }
+  modelListReorderChangeListener(e) {
+    const { modelList: a } = e.detail;
+    if (
+      ((this.modelList = k({
+        arrayA: this.modelList,
+        arrayB: a,
+        getKey: (t) => t.chartId ?? t.titleText ?? "",
+      })),
+      this.syncChartsToLayers)
+    ) {
+      const t = a.find((i) => i.layer?.id !== void 0)?.layer?.id;
+      if (t) {
+        const i = this.layerList.find((s) => s.id.toString() === t);
+        i && ne(i, a);
+      }
+    }
+  }
+  async layerListChange() {
+    const e = [],
+      a = this.layerList.map((i) => i.id.toString());
+    let t = [...this.modelList.filter((i) => a.includes(i.layer?.id ?? ""))];
+    for (let i of this.layerList ?? []) {
+      if (i.type === "sublayer") {
+        const n = await i.createFeatureLayer();
+        if (!n) continue;
+        i = n;
+      }
+      const r = i.charts;
+      for (const n of r ?? []) {
+        const c = await U({
+          layer: i,
+          config: n,
+        });
+        c !== void 0 && e.push(c);
+      }
+    }
+    B(e),
+      e.forEach((i) => {
+        t.find((r) => r.isSameChartAs(i)) === void 0 && t.push(i);
+      }),
+      (t = t.filter((i) => !O(i.config))),
+      (this.modelList = t);
+  }
+  modelListChange(e, a) {
+    (this.selectedChartId = B(e, this.selectedChartId)),
+      a?.forEach((i) => {
+        i.removeEventListener(
+          "geosceneChartsModelConfigChange",
+          this.onModelConfigChange
+        );
+      }),
+      e.forEach((i) => {
+        i.addEventListener(
+          "geosceneChartsModelConfigChange",
+          this.onModelConfigChange
+        );
+      });
+    const t = this.getModel(this.selectedChartId);
+    (this.currentChartTypeText =
+      t?.chartType !== void 0
+        ? L({
+            chartType: t.chartType,
+            commonStrings: this.commonStrings,
+            config: t.config,
+          })
+        : ""),
+      this.syncChartsToLayers &&
+        this.allowChartSyncing &&
+        oe(this.layerList, e),
+      this.geosceneChartsConfigModelListChange.emit({ modelList: e });
+  }
+  selectedChartIdChange(e) {
+    this.selectedChartId === void 0 && (this.panelNumber = 0),
+      (this.selectedPanel = l.Data);
+    const a = this.getModel(e);
+    this.setEventBasedPropsFromModelData(a),
+      (this.currentChartTypeText =
+        a?.chartType !== void 0
+          ? L({
+              chartType: a.chartType,
+              commonStrings: this.commonStrings,
+              config: a.config,
+            })
+          : ""),
+      e !== void 0 && e !== x.selectedChartId && (x.selectedChartId = e),
+      (this.allowChartSyncing = !0),
+      this.geosceneChartsConfigSelectedChartChange.emit({
+        key: "key",
+        model: a,
+      });
+  }
+  panelNumberChange(e) {
+    e === 0
+      ? this.clearPartialModels()
+      : e === 1 && this.removeSelectChartTypePopover(),
+      this.geosceneChartsConfigPanelNumberChange.emit({
+        panelNumber: e,
+        modelList: this.modelList,
+      });
+  }
+  addChartEventListeners() {
+    this.listenOn(
+      document,
+      f.DataProcessComplete,
+      this.chartDataProcessComplete
+    ),
+      this.listenOn(document, f.AxesMinMaxChange, this.chartAxesMinMaxChange),
+      this.listenOn(document, f.SeriesColorChange, this.chartSeriesColorChange),
+      this.listenOn(
+        document,
+        f.NoRenderPropChange,
+        this.chartNoRenderPropChange
+      ),
+      this.listenOn(
+        document,
+        f.LegendItemVisibilityChange,
+        this.chartLegendItemVisibilityChange
+      );
+  }
+  getDataExtent(e) {
+    const a = this.getModel(this.selectedChartId)?.config;
+    let t = [];
+    if (a !== void 0 && e !== void 0) {
+      const i = R({
+          chartConfig: a,
+          chartData: e,
+        }),
+        { minY: s, maxY: r, minX: n, maxX: c } = i;
+      t = [
+        { isXAxis: !0, minimum: n, maximum: c },
+        { isXAxis: !1, minimum: s, maximum: r },
+      ];
+    }
+    return t;
+  }
+  updateAxesBoundsInAppState(e) {
+    e?.forEach((a) => {
+      const { isXAxis: t, maximum: i, minimum: s } = a,
+        r = this.getModel(this.selectedChartId);
+      if (r !== void 0 && T(r) && this.selectedChartId !== void 0) {
+        const n = new ae(r, t),
+          c = J({
+            chartId: this.selectedChartId,
+            isXAxis: t,
+            isLogarithmic: n.getLogarithmic(),
+          }),
+          u = x.chartAxesBoundDataMap;
+        u[this.selectedChartId] === void 0 && (u[this.selectedChartId] = {});
+        const g = u[this.selectedChartId]?.[c],
+          C = {
+            defaultMinBound:
+              g?.defaultMinBound === g?.currMinBound ? s : g?.defaultMinBound,
+            currMinBound: s,
+            defaultMaxBound:
+              g?.defaultMaxBound === g?.currMaxBound ? i : g?.defaultMaxBound,
+            currMaxBound: i,
+          };
+        !w(g, C) &&
+          this.selectedChartId !== void 0 &&
+          u?.[this.selectedChartId] !== void 0 &&
+          (u[this.selectedChartId][c] = C);
+      }
+    });
+  }
+  getPlacement() {
+    let e;
+    return (
+      this.popoverPlacement !== void 0
+        ? (e = this.popoverPlacement)
+        : (e =
+            this.modelList?.filter((i) => F(te, i.config)).length <= 2
+              ? "bottom"
+              : "top"),
+      e
+    );
+  }
+  onBackFlow() {
+    this.panelNumber -= 1;
+  }
+  onAddChartClick(e) {
+    const { referenceElement: a, layerId: t } = e.detail;
+    this.setupSelectChartTypePopover(a, t);
+  }
+  setupSelectChartTypePopover(e, a) {
+    const t = this.getPlacement();
+    this.removeSelectChartTypePopover(),
+      (this.selectChartTypePopover = I(
+        h`<geoscene-charts-config-select-chart-type-popover .referenceElement=${e} open .layerId=${a} .popoverPlacement=${t} @geosceneChartsConfigPopoverClose=${this.onAddChartClose} @geosceneChartsConfigSelectChartTypeChange=${this.onSelectChartTypeChange}></geoscene-charts-config-select-chart-type-popover>`
+      )),
+      !document.body.contains(this.selectChartTypePopover) &&
+        this.selectChartTypePopover !== null &&
+        document.body.appendChild(this.selectChartTypePopover);
+  }
+  getModel(e) {
+    return this.modelList?.find((a) => a.chartId === e);
+  }
+  removeSelectChartTypePopover() {
+    this.selectChartTypePopover !== void 0 &&
+      (this.selectChartTypePopover?.remove(),
+      (this.selectChartTypePopover = X(this.selectChartTypePopover)));
+  }
+  clearPartialModels() {
+    this.modelList = this.modelList.filter((e) => !D(e.config));
+  }
+  onViewChartDelete(e) {
+    const { chartId: a } = e.detail;
+    if (a !== void 0) {
+      const t = this.modelList.find((s) => s.chartId === a),
+        i = this.layerList.find((s) => s.id === t?.layer?.id);
+      (this.modelList = [...this.modelList.filter((s) => s.chartId !== a)]),
+        i && this.syncChartsToLayers && this.allowChartSyncing && le(i, a);
+    }
+  }
+  onViewChartsSelect(e) {
+    this.selectedChartId === e.detail.chartId &&
+      ((this.allowChartSyncing = !0),
+      this.geosceneChartsConfigSelectedChartChange.emit({
+        key: "key",
+        model: this.getModel(this.selectedChartId),
+      })),
+      (this.selectedChartId = e.detail.chartId);
+  }
+  onViewChartsEdit(e) {
+    this.onViewChartsSelect(e), (this.panelNumber = 1);
+  }
+  onViewChartClose() {
+    (this.open = !1),
+      this.removeSelectChartTypePopover(),
+      this.geosceneChartsConfigChartViewChartClose.emit();
+  }
+  setEventBasedPropsFromModelData(e) {
+    (this.chartData = e?.dataStore.chartData),
+      (this.r2 = e?.dataStore.r2),
+      (this.seriesColor = e?.dataStore.seriesColor),
+      (this.calculatedMinMaxBounds = e?.dataStore.calculatedMinMaxBounds),
+      (this.calculatedDataMinMaxBounds =
+        e?.dataStore.calculatedDataMinMaxBounds);
+  }
+  createTooltip(e) {
+    const a = e.target;
+    let t = "";
+    switch (a.icon) {
+      case "configure":
+        t = this._messages.data ?? "";
+        break;
+      case "graph-bar-stacked":
+      case "graph-line-series":
+      case "box-chart-series":
+        t = this._messages.series ?? "";
+        break;
+      case "graph-pie-slice":
+        t = this._messages.slices ?? "";
+        break;
+      case "graph-axis":
+        t = this._messages.axes ?? "";
+        break;
+      case "graph-guides":
+        t = this._messages.guides ?? "";
+        break;
+      case "palette":
+        t = this._messages.format ?? "";
+        break;
+      case "text":
+        t = this._messages.general ?? "";
+        break;
+      default:
+        t = "";
+        break;
+    }
+    (this.tooltip = I(
+      h`<calcite-tooltip style=${K({
+        opacity: 1,
+        zIndex: "var(--calcite-floating-ui-z-index)",
+      })} .referenceElement=${a} open placement=top>${t}</calcite-tooltip>`
+    )),
+      document.body.appendChild(this.tooltip);
+  }
+  destroyTooltip() {
+    ie(this.tooltip);
+  }
+  renderViewCharts() {
+    const e = re({
+      modelList: this.modelList,
+      layerList: this.layerList,
+      activeLayerId: this.activeLayerId,
+      disableEditing: this.disableEditing,
+    });
+    return V(
+      e,
+      (a) => a.id,
+      (a) =>
+        h`<geoscene-charts-config-view-charts .noGroup=${
+          this.activeLayerId !== void 0
+        } .modelList=${se(
+          this.modelList,
+          a.id.toString(),
+          this.supportedChartTypes
+        )} .selectedChartId=${
+          this.selectedChartId ?? ""
+        } .layer=${a} .disableEditing=${
+          this.disableEditing
+        } @geosceneChartsConfigViewChartSelect=${
+          this.onViewChartsSelect
+        } @geosceneChartsConfigViewChartEdit=${
+          this.onViewChartsEdit
+        } @geosceneChartsConfigViewChartDelete=${
+          this.onViewChartDelete
+        } @geosceneChartsConfigViewChartAddChart=${
+          this.onAddChartClick
+        }></geoscene-charts-config-view-charts>`
+    );
+  }
+  render() {
+    return this.open !== !1
+      ? h`<calcite-flow>${$(
+          "charts-list",
+          h`<calcite-flow-item .selected=${
+            this.panelNumber === 0 || this.disableEditing
+          } .heading=${
+            this.headerTitle ?? this._messages.defaultHeaderTitle
+          } closable @calciteFlowItemClose=${this.onViewChartClose} ${Y(
+            this.chartsListFlowItem
+          )}>${this.renderViewCharts()}</calcite-flow-item>`
+        )}${
+          this.panelNumber >= 1 && !this.disableEditing
+            ? this.renderTabs()
+            : null
+        }</calcite-flow>`
+      : null;
+  }
+  renderTabs() {
+    const e = this.getModel(this.selectedChartId);
+    return $(
+      "chart-edit",
+      h`<calcite-flow-item .selected=${
+        this.panelNumber >= 1 && !this.disableEditing
+      } @calciteFlowItemBack=${this.onBackFlow} .heading=${
+        this._messages[this.selectedPanel ?? l.Data]
+      } .description=${
+        this.currentChartTypeText !== "" &&
+        this._messages.pageFlowTitle !== void 0
+          ? G(this._messages.pageFlowTitle, {
+              chartName: e?.titleText ?? this.currentChartTypeText,
+              layerName: e?.layer?.title ?? "",
+            })
+          : ""
+      }>${
+        e?.chartType !== void 0
+          ? h`<calcite-action-bar class=${d(
+              m.tabBar
+            )} layout=horizontal expand-disabled><calcite-action class=${d(
+              m.tab
+            )} icon=configure scale=s alignment=center .active=${
+              this.selectedPanel === l.Data || this.selectedPanel === void 0
+            } @click=${() => {
+              this.selectedPanel = l.Data;
+            }} @mouseover=${this.createTooltip} @mouseout=${
+              this.destroyTooltip
+            } text></calcite-action>${
+              e?.chartType === o.BarSeries
+                ? h`<calcite-action class=${d(
+                    m.tab
+                  )} icon=graph-bar-stacked scale=s alignment=center .active=${
+                    this.selectedPanel === l.Series
+                  } @click=${() => {
+                    this.selectedPanel = l.Series;
+                  }} @mouseover=${this.createTooltip} @mouseout=${
+                    this.destroyTooltip
+                  } text></calcite-action>`
+                : null
+            }${
+              e?.chartType === o.LineSeries
+                ? h`<calcite-action class=${d(
+                    m.tab
+                  )} icon=graph-line-series scale=s alignment=center .active=${
+                    this.selectedPanel === l.Series
+                  } @click=${() => {
+                    this.selectedPanel = l.Series;
+                  }} @mouseover=${this.createTooltip} @mouseout=${
+                    this.destroyTooltip
+                  } text></calcite-action>`
+                : null
+            }${
+              e?.chartType === o.BoxPlotSeries
+                ? h`<calcite-action class=${d(
+                    m.tab
+                  )} icon=box-chart-series scale=s alignment=center .active=${
+                    this.selectedPanel === l.Series
+                  } @click=${() => {
+                    this.selectedPanel = l.Series;
+                  }} @mouseover=${this.createTooltip} @mouseout=${
+                    this.destroyTooltip
+                  } text></calcite-action>`
+                : null
+            }${
+              e?.chartType === o.PieSeries
+                ? h`<calcite-action class=${d(
+                    m.tab
+                  )} icon=graph-pie-slice scale=s alignment=center .active=${
+                    this.selectedPanel === l.Slices
+                  } @click=${() => {
+                    this.selectedPanel = l.Slices;
+                  }} @mouseover=${this.createTooltip} @mouseout=${
+                    this.destroyTooltip
+                  } text></calcite-action>`
+                : null
+            }${
+              e?.chartType !== o.PieSeries && e?.chartType !== o.HeatSeries
+                ? h`<calcite-action class=${d(
+                    m.tab
+                  )} icon=graph-axis scale=s alignment=center .active=${
+                    this.selectedPanel === l.Axes
+                  } @click=${() => {
+                    this.selectedPanel = l.Axes;
+                  }} @mouseover=${this.createTooltip} @mouseout=${
+                    this.destroyTooltip
+                  } text></calcite-action>`
+                : null
+            }${
+              e?.chartType !== o.PieSeries && e?.chartType !== o.HeatSeries
+                ? h`<calcite-action class=${d(
+                    m.tab
+                  )} icon=graph-guides scale=s alignment=center .active=${
+                    this.selectedPanel === l.Guides
+                  } @click=${() => {
+                    this.selectedPanel = l.Guides;
+                  }} @mouseover=${this.createTooltip} @mouseout=${
+                    this.destroyTooltip
+                  } text></calcite-action>`
+                : null
+            }<calcite-action class=${d(
+              m.tab
+            )} icon=palette scale=s alignment=center .active=${
+              this.selectedPanel === l.Format
+            } @click=${() => {
+              this.selectedPanel = l.Format;
+            }} @mouseover=${this.createTooltip} @mouseout=${
+              this.destroyTooltip
+            } text></calcite-action><calcite-action class=${d(
+              m.tab
+            )} icon=text scale=s alignment=center .active=${
+              this.selectedPanel === l.General
+            } @click=${() => {
+              this.selectedPanel = l.General;
+            }} @mouseover=${this.createTooltip} @mouseout=${
+              this.destroyTooltip
+            } text></calcite-action></calcite-action-bar>`
+          : null
+      }${this.renderChartUIComponent()}</calcite-flow-item>`
+    );
+  }
+  renderChartUIComponent() {
+    const e = this.getModel(this.selectedChartId),
+      a = e?.layer;
+    let t = null;
+    if (e !== void 0 && !this.disableEditing)
+      switch (e?.chartType) {
+        case o.BarSeries:
+          t = h`<geoscene-charts-config-bar-chart class=${d(
+            m.chartUIComponent
+          )} .model=${e} .timeZone=${
+            this.timeZone
+          } .usePopupTemplateFieldsInfo=${
+            this.usePopupTemplateFieldsInfo
+          } .layer=${a} .page=${
+            this.selectedPanel ?? l.Data
+          } .calculatedMinMaxBounds=${
+            this.calculatedMinMaxBounds
+          } .seriesColor=${
+            this.seriesColor
+          }></geoscene-charts-config-bar-chart>`;
+          break;
+        case o.LineSeries:
+          t = h`<geoscene-charts-config-line-chart class=${d(
+            m.chartUIComponent
+          )} .model=${e} .timeZone=${
+            this.timeZone
+          } .usePopupTemplateFieldsInfo=${
+            this.usePopupTemplateFieldsInfo
+          } .layer=${a} .page=${
+            this.selectedPanel ?? l.Data
+          } .calculatedDataMinMaxBounds=${
+            this.calculatedDataMinMaxBounds
+          } .calculatedMinMaxBounds=${
+            this.calculatedMinMaxBounds
+          } .seriesColor=${
+            this.seriesColor
+          }></geoscene-charts-config-line-chart>`;
+          break;
+        case o.PieSeries:
+          t = h`<geoscene-charts-config-pie-chart class=${d(
+            m.chartUIComponent
+          )} .model=${e} .usePopupTemplateFieldsInfo=${
+            this.usePopupTemplateFieldsInfo
+          } .layer=${a} .chartData=${this.chartData} .page=${
+            this.selectedPanel ?? l.Data
+          } .calculatedMinMaxBounds=${
+            this.calculatedMinMaxBounds
+          } .seriesColor=${this.seriesColor} .filterBySelection=${
+            this.filterBySelection
+          }></geoscene-charts-config-pie-chart>`;
+          break;
+        case o.HistogramSeries:
+          t = h`<geoscene-charts-config-histogram class=${d(
+            m.chartUIComponent
+          )} .model=${e} .usePopupTemplateFieldsInfo=${
+            this.usePopupTemplateFieldsInfo
+          } .layer=${a} .page=${this.selectedPanel ?? l.Data} .chartData=${
+            this.chartData
+          } .calculatedMinMaxBounds=${
+            this.calculatedMinMaxBounds
+          } .seriesColor=${
+            this.seriesColor
+          }></geoscene-charts-config-histogram>`;
+          break;
+        case o.ScatterSeries:
+          t = h`<geoscene-charts-config-scatter-plot class=${d(
+            m.chartUIComponent
+          )} .model=${e} .usePopupTemplateFieldsInfo=${
+            this.usePopupTemplateFieldsInfo
+          } .layer=${a} .page=${this.selectedPanel ?? l.Data} .r2=${
+            this.r2
+          } .calculatedDataMinMaxBounds=${
+            this.calculatedDataMinMaxBounds
+          } .calculatedMinMaxBounds=${
+            this.calculatedMinMaxBounds
+          }></geoscene-charts-config-scatter-plot>`;
+          break;
+        case o.BoxPlotSeries:
+          t = h`<geoscene-charts-config-box-plot class=${d(
+            m.chartUIComponent
+          )} .model=${e} .usePopupTemplateFieldsInfo=${
+            this.usePopupTemplateFieldsInfo
+          } .layer=${a} .page=${
+            this.selectedPanel ?? l.Data
+          } .calculatedMinMaxBounds=${
+            this.calculatedMinMaxBounds
+          } .seriesColor=${
+            this.seriesColor
+          }></geoscene-charts-config-box-plot>`;
+          break;
+        case o.HeatSeries:
+          t = h`<geoscene-charts-config-heat-chart class=${d(
+            m.chartUIComponent
+          )} .model=${e} .usePopupTemplateFieldsInfo=${
+            this.usePopupTemplateFieldsInfo
+          } .layer=${a} .page=${
+            this.selectedPanel ?? l.Data
+          }></geoscene-charts-config-heat-chart>`;
+          break;
+      }
+    return t;
+  }
+}
+N("geoscene-charts-config-create-flow", he);
+export { he as GeosceneChartsConfigCreateFlow };