@geoscene/charts-components 5.0.19

package/dist/cdn/34GIQYIH.js

@@ -0,0 +1,1000 @@
+/* COPYRIGHT  - https://js.geoscene.cn/5.0/LICENSE.txt */
+import t from "./D4XT7ZCD.js";
+import { a as W } from "./KJHME2ZX.js";
+import { a as ee } from "./7I5Y5NSS.js";
+import { a as D } from "./HAGP76HP.js";
+import { a as J } from "./FEJD2JHY.js";
+import s from "./ML4GGRP6.js";
+import { a as $, b as Y, e as Q } from "./ZLQXY2BV.js";
+import { a as f } from "./J7TZPMJS.js";
+import r from "./5752NFTR.js";
+import { d as c } from "./DPJE33GY.js";
+import { a as P } from "./VAB3BCTX.js";
+import q from "./ED7V65WK.js";
+import p from "./IJUDK7C2.js";
+import m from "./V2OPADQU.js";
+import l from "./ZLRKGGOO.js";
+import k from "./NSSG3EFV.js";
+import j from "./AENRD2JF.js";
+import i from "./P4UNBBUE.js";
+import g from "./DKENL7TV.js";
+import e from "./ISWZQ6CS.js";
+import d from "./P5SSZWMH.js";
+import "./UG7LOBJE.js";
+import a from "./A7YNU2NS.js";
+import { n as b } from "./4B3QBH5T.js";
+import "./XLDY6CTA.js";
+import { a as K } from "./HZC3QJTN.js";
+import { e as I, f as B, j as X, m as L, q as w } from "./IHRGRUHQ.js";
+import "./KUVOINJC.js";
+import { a as o, k as z } from "./NKG4FLLR.js";
+import {
+  A as h,
+  B as _,
+  D as x,
+  F as U,
+  g as F,
+  h as n,
+  m as C,
+  x as N,
+  y as A,
+  z as V,
+} from "./KRZ433BT.js";
+import "./OR4HXHSY.js";
+export default $geoscene.t(
+  ([
+    ,
+    ,
+    ,
+    ,
+    ,
+    ,
+    ,
+    { substitute: ie },
+    ,
+    ,
+    ,
+    ,
+    ,
+    ,
+    ,
+    { Jb: S, Ra: H, Rd: O, Sb: v, Wd: T, _b: R },
+    ,
+    ,
+    ,
+    ,
+    ,
+    { a: G },
+    ,
+    ,
+    ,
+    ,
+    { s: Z },
+    { a: j, d: y, e: q },
+    { b: k },
+  ]) => {
+    var d = {
+      chartUIComponent: "chart-ui-component",
+      tabBar: "tab-bar",
+      tab: "tab",
+    };
+    function te(m, e) {
+      let a = new Set(),
+        t = e;
+      return (
+        m?.forEach((i, s) => {
+          let 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(m, e, a) {
+      return m?.filter((t) => S(a, t.config) && t.layer?.id === e) ?? [];
+    }
+    function re(m) {
+      let {
+          modelList: e,
+          layerList: a,
+          activeLayerId: t,
+          disableEditing: i,
+        } = m,
+        s = new Map();
+      return (
+        e?.forEach((r) => {
+          let l = r.layer;
+          l && s.set(l.id, l);
+        }),
+        i || a.forEach((r) => s.set(r.id, r)),
+        Array.from(s.values()).filter((r) => !t || r.id === t)
+      );
+    }
+    function oe(m, e) {
+      m.forEach((a) => {
+        e.forEach((t) => {
+          a?.id === t.layer?.id && ae(a, t);
+        });
+      });
+    }
+    function ae(m, e) {
+      let a = m;
+      if (a) {
+        let t = [...(a?.charts ?? [])],
+          i = t?.findIndex((r) => r.id === e.chartId),
+          s = !1;
+        i !== void 0 && i > -1
+          ? ((s = !b(t[i], e.config)), (t[i] = e.config))
+          : a && !T(e.config) && ((s = !0), t.push(e.config)),
+          s && (a.charts = t);
+      }
+    }
+    function le(m, e) {
+      let a = m;
+      if (a) {
+        let t = [...(a.charts ?? [])],
+          i = t.findIndex((s) => s.id === e);
+        i > -1 && (t.splice(i, 1), (a.charts = t));
+      }
+    }
+    function ce(m, e) {
+      let a = m;
+      if (a) {
+        let t = [...(a.charts ?? [])];
+        (t = v({
+          arrayA: t,
+          arrayB: e.map((i) => i.config),
+          getKey: (i) => i.id ?? i.title?.content.text ?? "",
+        })),
+          (a.charts = t);
+      }
+    }
+    var ne = F`: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}`,
+      E = class extends V {
+        constructor() {
+          super(),
+            (this.selectChartTypePopover = null),
+            (this.chartsListFlowItem = N()),
+            (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) => {
+              let 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: {
+                    let r = t,
+                      { dataItems: l, r2: u, aggregated: g } = r,
+                      p = u;
+                    Number.isFinite(u) || (p = void 0),
+                      (this.r2 = p),
+                      X(i) &&
+                        ((i.dataStore.r2 = p),
+                        (i.dataStore.aggregated = g),
+                        g && (i.additionalTooltipField = void 0)),
+                      (this.calculatedDataMinMaxBounds = this.getDataExtent(l)),
+                      i &&
+                        (i.dataStore.calculatedDataMinMaxBounds =
+                          this.calculatedDataMinMaxBounds);
+                    break;
+                  }
+                  case o.LineSeries:
+                  case o.BarSeries: {
+                    let { dataItems: r, timeIntervalInfo: l } = t;
+                    if (
+                      ((B(s) || (I(s) && s.binTemporalData)) &&
+                        (l?.size !== void 0 &&
+                          s.temporalBinningSize !== l?.size &&
+                          (s.temporalBinningSize = l?.size),
+                        l?.unit !== void 0 &&
+                          s.temporalBinningUnit !== l?.unit &&
+                          l?.unit !== z.Quarter &&
+                          (s.temporalBinningUnit = l?.unit),
+                        l?.size !== void 0 &&
+                          l?.unit !== void 0 &&
+                          Q($, { size: l.size, unit: l.unit })),
+                      (this.calculatedDataMinMaxBounds = this.getDataExtent(r)),
+                      i &&
+                        (i.dataStore.calculatedDataMinMaxBounds =
+                          this.calculatedDataMinMaxBounds),
+                      I(s))
+                    ) {
+                      let u = s.xAxisField,
+                        g = r.some((M) => M[u] === null),
+                        p = s.nullCategory;
+                      g && p === void 0 && (s.nullCategory = H.nullCategory);
+                    }
+                    break;
+                  }
+                }
+            }),
+            (this.chartAxesMinMaxChange = (e) => {
+              let a = e,
+                { bounds: t, model: i } = a.detail,
+                s = this.getModel(this.selectedChartId),
+                r = i?.isSameChartAs(s),
+                l = s?.chartType;
+              if (r)
+                switch (l) {
+                  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) => {
+              let 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: {
+                    let r = new Map([[0, t]]);
+                    (this.seriesColor = r), i && (i.dataStore.seriesColor = r);
+                    break;
+                  }
+                  case o.ScatterSeries:
+                }
+            }),
+            (this.chartNoRenderPropChange = (e) => {
+              let a = e,
+                { propName: t, value: i, model: s } = a.detail,
+                r = this.modelList.find((l) => s?.isSameChartAs(l));
+              if (r)
+                switch (t) {
+                  case "rotation":
+                    typeof i == "boolean" && G(r) && (r.rotatedState = i);
+                    break;
+                  case "legendPosition":
+                    typeof i == "string" && w(r) && (r.legendPosition = i);
+                    break;
+                  case "legendVisibility":
+                    typeof i == "boolean" && w(r) && (r.legendVisibility = i);
+                    break;
+                }
+            }),
+            (this.chartLegendItemVisibilityChange = (e) => {
+              let a = e,
+                { legendItemVisibility: t, model: i } = a.detail,
+                s = this.modelList.find((r) => i?.isSameChartAs(r));
+              s?.setSeriesVisibility(t),
+                L(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),
+                  B(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();
+              let { 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) {
+                let a = e.target;
+                ae(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 = C()),
+            (this.geosceneChartsConfigModelListChange = C()),
+            (this.geosceneChartsConfigNewChart = C()),
+            (this.geosceneChartsConfigPanelNumberChange = C()),
+            (this.geosceneChartsConfigSelectedChartChange = C()),
+            this.addChartEventListeners(),
+            this.listen(
+              "geosceneChartsConfigModelListReorder",
+              this.modelListReorderChangeListener
+            );
+        }
+        static {
+          this.properties = {
+            selectedPanel: 16,
+            currentChartTypeText: 16,
+            messageOverrides: 0,
+            modelList: [0, { hasChanged: y }],
+            layerList: [0, { hasChanged: y }],
+            selectedChartId: 1,
+            activeLayerId: 1,
+            disableEditing: 5,
+            syncChartsToLayers: 5,
+            timeZone: 1,
+            headerTitle: 1,
+            open: 5,
+            chartData: [0, { hasChanged: y }],
+            r2: 9,
+            calculatedDataMinMaxBounds: [0, { hasChanged: y }],
+            calculatedMinMaxBounds: [0, { hasChanged: y }],
+            seriesColor: [0, { hasChanged: q }],
+            popoverPlacement: 1,
+            usePopupTemplateFieldsInfo: 5,
+            panelNumber: 9,
+            filterBySelection: 5,
+          };
+        }
+        static {
+          this.styles = ne;
+        }
+        async setFocus() {
+          await this.chartsListFlowItem.value?.setFocus();
+        }
+        async load() {
+          await this.layerListChange();
+          let 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) {
+          let { modelList: a } = e.detail;
+          if (
+            ((this.modelList = v({
+              arrayA: this.modelList,
+              arrayB: a,
+              getKey: (t) => t.chartId ?? t.titleText ?? "",
+            })),
+            this.syncChartsToLayers)
+          ) {
+            let t = a.find((i) => i.layer?.id !== void 0)?.layer?.id;
+            if (t) {
+              let i = this.layerList.find((s) => s.id.toString() === t);
+              i && ce(i, a);
+            }
+          }
+        }
+        async layerListChange() {
+          let e = [],
+            a = this.layerList.map((i) => i.id.toString()),
+            t = [
+              ...this.modelList.filter((i) => a.includes(i.layer?.id ?? "")),
+            ];
+          for (let i of this.layerList ?? []) {
+            if (i.type === "sublayer") {
+              let r = await i.createFeatureLayer();
+              if (!r) continue;
+              i = r;
+            }
+            let s = i.charts;
+            for (let r of s ?? []) {
+              let l = await K({ layer: i, config: r });
+              l !== void 0 && e.push(l);
+            }
+          }
+          te(e),
+            e.forEach((i) => {
+              t.find((s) => s.isSameChartAs(i)) === void 0 && t.push(i);
+            }),
+            (t = t.filter((i) => !R(i.config))),
+            (this.modelList = t);
+        }
+        modelListChange(e, a) {
+          (this.selectedChartId = te(e, this.selectedChartId)),
+            a?.forEach((i) => {
+              i.removeEventListener(
+                "geosceneChartsModelConfigChange",
+                this.onModelConfigChange
+              );
+            }),
+            e.forEach((i) => {
+              i.addEventListener(
+                "geosceneChartsModelConfigChange",
+                this.onModelConfigChange
+              );
+            });
+          let t = this.getModel(this.selectedChartId);
+          (this.currentChartTypeText =
+            t?.chartType !== void 0
+              ? k({
+                  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 = c.Data);
+          let a = this.getModel(e);
+          this.setEventBasedPropsFromModelData(a),
+            (this.currentChartTypeText =
+              a?.chartType !== void 0
+                ? k({
+                    chartType: a.chartType,
+                    commonStrings: this.commonStrings,
+                    config: a.config,
+                  })
+                : ""),
+            e !== void 0 && e !== $.selectedChartId && ($.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) {
+          let a = this.getModel(this.selectedChartId)?.config,
+            t = [];
+          if (a !== void 0 && e !== void 0) {
+            let i = O({ chartConfig: a, chartData: e }),
+              { minY: s, maxY: r, minX: l, maxX: u } = i;
+            t = [
+              { isXAxis: !0, minimum: l, maximum: u },
+              { isXAxis: !1, minimum: s, maximum: r },
+            ];
+          }
+          return t;
+        }
+        updateAxesBoundsInAppState(e) {
+          e?.forEach((a) => {
+            let { isXAxis: t, maximum: i, minimum: s } = a,
+              r = this.getModel(this.selectedChartId);
+            if (r !== void 0 && L(r) && this.selectedChartId !== void 0) {
+              let l = new W(r, t),
+                u = Y({
+                  chartId: this.selectedChartId,
+                  isXAxis: t,
+                  isLogarithmic: l.getLogarithmic(),
+                }),
+                g = $.chartAxesBoundDataMap;
+              g[this.selectedChartId] === void 0 &&
+                (g[this.selectedChartId] = {});
+              let p = g[this.selectedChartId]?.[u],
+                M = {
+                  defaultMinBound:
+                    p?.defaultMinBound === p?.currMinBound
+                      ? s
+                      : p?.defaultMinBound,
+                  currMinBound: s,
+                  defaultMaxBound:
+                    p?.defaultMaxBound === p?.currMaxBound
+                      ? i
+                      : p?.defaultMaxBound,
+                  currMaxBound: i,
+                };
+              !b(p, M) &&
+                this.selectedChartId !== void 0 &&
+                g?.[this.selectedChartId] !== void 0 &&
+                (g[this.selectedChartId][u] = M);
+            }
+          });
+        }
+        getPlacement() {
+          let e;
+          return (
+            this.popoverPlacement !== void 0
+              ? (e = this.popoverPlacement)
+              : (e =
+                  this.modelList?.filter((a) => S(j, a.config)).length <= 2
+                    ? "bottom"
+                    : "top"),
+            e
+          );
+        }
+        onBackFlow() {
+          this.panelNumber -= 1;
+        }
+        onAddChartClick(e) {
+          let { referenceElement: a, layerId: t } = e.detail;
+          this.setupSelectChartTypePopover(a, t);
+        }
+        setupSelectChartTypePopover(e, a) {
+          let t = this.getPlacement();
+          this.removeSelectChartTypePopover(),
+            (this.selectChartTypePopover = x(
+              n`<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 = J(this.selectChartTypePopover)));
+        }
+        clearPartialModels() {
+          this.modelList = this.modelList.filter((e) => !T(e.config));
+        }
+        onViewChartDelete(e) {
+          let { chartId: a } = e.detail;
+          if (a !== void 0) {
+            let 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) {
+          let a = e.target,
+            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 = x(
+            n`<calcite-tooltip style=${_({
+              opacity: 1,
+              zIndex: "var(--calcite-floating-ui-z-index)",
+            })} .referenceElement=${a} open placement=top>${t}</calcite-tooltip>`
+          )),
+            document.body.appendChild(this.tooltip);
+        }
+        destroyTooltip() {
+          Z(this.tooltip);
+        }
+        renderViewCharts() {
+          let e = re({
+            modelList: this.modelList,
+            layerList: this.layerList,
+            activeLayerId: this.activeLayerId,
+            disableEditing: this.disableEditing,
+          });
+          return ee(
+            e,
+            (a) => a.id,
+            (a) =>
+              n`<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
+            ? n`<calcite-flow>${D(
+                "charts-list",
+                n`<calcite-flow-item .selected=${
+                  this.panelNumber === 0 || this.disableEditing
+                } .heading=${
+                  this.headerTitle ?? this._messages.defaultHeaderTitle
+                } closable @calciteFlowItemClose=${this.onViewChartClose} ${A(
+                  this.chartsListFlowItem
+                )}>${this.renderViewCharts()}</calcite-flow-item>`
+              )}${
+                this.panelNumber >= 1 && !this.disableEditing
+                  ? this.renderTabs()
+                  : null
+              }</calcite-flow>`
+            : null;
+        }
+        renderTabs() {
+          let e = this.getModel(this.selectedChartId);
+          return D(
+            "chart-edit",
+            n`<calcite-flow-item .selected=${
+              this.panelNumber >= 1 && !this.disableEditing
+            } @calciteFlowItemBack=${this.onBackFlow} .heading=${
+              this._messages[this.selectedPanel ?? c.Data]
+            } .description=${
+              this.currentChartTypeText !== "" &&
+              this._messages.pageFlowTitle !== void 0
+                ? ie(this._messages.pageFlowTitle, {
+                    chartName: e?.titleText ?? this.currentChartTypeText,
+                    layerName: e?.layer?.title ?? "",
+                  })
+                : ""
+            }>${
+              e?.chartType !== void 0
+                ? n`<calcite-action-bar class=${h(
+                    d.tabBar
+                  )} layout=horizontal expand-disabled><calcite-action class=${h(
+                    d.tab
+                  )} icon=configure scale=s alignment=center .active=${
+                    this.selectedPanel === c.Data ||
+                    this.selectedPanel === void 0
+                  } @click=${() => {
+                    this.selectedPanel = c.Data;
+                  }} @mouseover=${this.createTooltip} @mouseout=${
+                    this.destroyTooltip
+                  } text></calcite-action>${
+                    e?.chartType === o.BarSeries
+                      ? n`<calcite-action class=${h(
+                          d.tab
+                        )} icon=graph-bar-stacked scale=s alignment=center .active=${
+                          this.selectedPanel === c.Series
+                        } @click=${() => {
+                          this.selectedPanel = c.Series;
+                        }} @mouseover=${this.createTooltip} @mouseout=${
+                          this.destroyTooltip
+                        } text></calcite-action>`
+                      : null
+                  }${
+                    e?.chartType === o.LineSeries
+                      ? n`<calcite-action class=${h(
+                          d.tab
+                        )} icon=graph-line-series scale=s alignment=center .active=${
+                          this.selectedPanel === c.Series
+                        } @click=${() => {
+                          this.selectedPanel = c.Series;
+                        }} @mouseover=${this.createTooltip} @mouseout=${
+                          this.destroyTooltip
+                        } text></calcite-action>`
+                      : null
+                  }${
+                    e?.chartType === o.BoxPlotSeries
+                      ? n`<calcite-action class=${h(
+                          d.tab
+                        )} icon=box-chart-series scale=s alignment=center .active=${
+                          this.selectedPanel === c.Series
+                        } @click=${() => {
+                          this.selectedPanel = c.Series;
+                        }} @mouseover=${this.createTooltip} @mouseout=${
+                          this.destroyTooltip
+                        } text></calcite-action>`
+                      : null
+                  }${
+                    e?.chartType === o.PieSeries
+                      ? n`<calcite-action class=${h(
+                          d.tab
+                        )} icon=graph-pie-slice scale=s alignment=center .active=${
+                          this.selectedPanel === c.Slices
+                        } @click=${() => {
+                          this.selectedPanel = c.Slices;
+                        }} @mouseover=${this.createTooltip} @mouseout=${
+                          this.destroyTooltip
+                        } text></calcite-action>`
+                      : null
+                  }${
+                    e?.chartType !== o.PieSeries &&
+                    e?.chartType !== o.HeatSeries
+                      ? n`<calcite-action class=${h(
+                          d.tab
+                        )} icon=graph-axis scale=s alignment=center .active=${
+                          this.selectedPanel === c.Axes
+                        } @click=${() => {
+                          this.selectedPanel = c.Axes;
+                        }} @mouseover=${this.createTooltip} @mouseout=${
+                          this.destroyTooltip
+                        } text></calcite-action>`
+                      : null
+                  }${
+                    e?.chartType !== o.PieSeries &&
+                    e?.chartType !== o.HeatSeries
+                      ? n`<calcite-action class=${h(
+                          d.tab
+                        )} icon=graph-guides scale=s alignment=center .active=${
+                          this.selectedPanel === c.Guides
+                        } @click=${() => {
+                          this.selectedPanel = c.Guides;
+                        }} @mouseover=${this.createTooltip} @mouseout=${
+                          this.destroyTooltip
+                        } text></calcite-action>`
+                      : null
+                  }<calcite-action class=${h(
+                    d.tab
+                  )} icon=palette scale=s alignment=center .active=${
+                    this.selectedPanel === c.Format
+                  } @click=${() => {
+                    this.selectedPanel = c.Format;
+                  }} @mouseover=${this.createTooltip} @mouseout=${
+                    this.destroyTooltip
+                  } text></calcite-action><calcite-action class=${h(
+                    d.tab
+                  )} icon=text scale=s alignment=center .active=${
+                    this.selectedPanel === c.General
+                  } @click=${() => {
+                    this.selectedPanel = c.General;
+                  }} @mouseover=${this.createTooltip} @mouseout=${
+                    this.destroyTooltip
+                  } text></calcite-action></calcite-action-bar>`
+                : null
+            }${this.renderChartUIComponent()}</calcite-flow-item>`
+          );
+        }
+        renderChartUIComponent() {
+          let e = this.getModel(this.selectedChartId),
+            a = e?.layer,
+            t = null;
+          if (e !== void 0 && !this.disableEditing)
+            switch (e?.chartType) {
+              case o.BarSeries:
+                t = n`<geoscene-charts-config-bar-chart class=${h(
+                  d.chartUIComponent
+                )} .model=${e} .timeZone=${
+                  this.timeZone
+                } .usePopupTemplateFieldsInfo=${
+                  this.usePopupTemplateFieldsInfo
+                } .layer=${a} .page=${
+                  this.selectedPanel ?? c.Data
+                } .calculatedMinMaxBounds=${
+                  this.calculatedMinMaxBounds
+                } .seriesColor=${
+                  this.seriesColor
+                }></geoscene-charts-config-bar-chart>`;
+                break;
+              case o.LineSeries:
+                t = n`<geoscene-charts-config-line-chart class=${h(
+                  d.chartUIComponent
+                )} .model=${e} .timeZone=${
+                  this.timeZone
+                } .usePopupTemplateFieldsInfo=${
+                  this.usePopupTemplateFieldsInfo
+                } .layer=${a} .page=${
+                  this.selectedPanel ?? c.Data
+                } .calculatedDataMinMaxBounds=${
+                  this.calculatedDataMinMaxBounds
+                } .calculatedMinMaxBounds=${
+                  this.calculatedMinMaxBounds
+                } .seriesColor=${
+                  this.seriesColor
+                }></geoscene-charts-config-line-chart>`;
+                break;
+              case o.PieSeries:
+                t = n`<geoscene-charts-config-pie-chart class=${h(
+                  d.chartUIComponent
+                )} .model=${e} .usePopupTemplateFieldsInfo=${
+                  this.usePopupTemplateFieldsInfo
+                } .layer=${a} .chartData=${this.chartData} .page=${
+                  this.selectedPanel ?? c.Data
+                } .calculatedMinMaxBounds=${
+                  this.calculatedMinMaxBounds
+                } .seriesColor=${this.seriesColor} .filterBySelection=${
+                  this.filterBySelection
+                }></geoscene-charts-config-pie-chart>`;
+                break;
+              case o.HistogramSeries:
+                t = n`<geoscene-charts-config-histogram class=${h(
+                  d.chartUIComponent
+                )} .model=${e} .usePopupTemplateFieldsInfo=${
+                  this.usePopupTemplateFieldsInfo
+                } .layer=${a} .page=${
+                  this.selectedPanel ?? c.Data
+                } .chartData=${this.chartData} .calculatedMinMaxBounds=${
+                  this.calculatedMinMaxBounds
+                } .seriesColor=${
+                  this.seriesColor
+                }></geoscene-charts-config-histogram>`;
+                break;
+              case o.ScatterSeries:
+                t = n`<geoscene-charts-config-scatter-plot class=${h(
+                  d.chartUIComponent
+                )} .model=${e} .usePopupTemplateFieldsInfo=${
+                  this.usePopupTemplateFieldsInfo
+                } .layer=${a} .page=${this.selectedPanel ?? c.Data} .r2=${
+                  this.r2
+                } .calculatedDataMinMaxBounds=${
+                  this.calculatedDataMinMaxBounds
+                } .calculatedMinMaxBounds=${
+                  this.calculatedMinMaxBounds
+                }></geoscene-charts-config-scatter-plot>`;
+                break;
+              case o.BoxPlotSeries:
+                t = n`<geoscene-charts-config-box-plot class=${h(
+                  d.chartUIComponent
+                )} .model=${e} .usePopupTemplateFieldsInfo=${
+                  this.usePopupTemplateFieldsInfo
+                } .layer=${a} .page=${
+                  this.selectedPanel ?? c.Data
+                } .calculatedMinMaxBounds=${
+                  this.calculatedMinMaxBounds
+                } .seriesColor=${
+                  this.seriesColor
+                }></geoscene-charts-config-box-plot>`;
+                break;
+              case o.HeatSeries:
+                t = n`<geoscene-charts-config-heat-chart class=${h(
+                  d.chartUIComponent
+                )} .model=${e} .usePopupTemplateFieldsInfo=${
+                  this.usePopupTemplateFieldsInfo
+                } .layer=${a} .page=${
+                  this.selectedPanel ?? c.Data
+                }></geoscene-charts-config-heat-chart>`;
+                break;
+            }
+          return t;
+        }
+      };
+    U("geoscene-charts-config-create-flow", E);
+    return E;
+  },
+  "geometry/support/jsonUtils",
+  "rest/support/AttributeBinsQuery",
+  "rest/support/StatisticDefinition",
+  "time/TimeExtent",
+  "Graphic",
+  "renderers/support/jsonUtils",
+  "symbols/support/symbolUtils",
+  "intl",
+  "layers/support/FeatureFilter",
+  "smartMapping/statistics/histogram",
+  "smartMapping/statistics/summaryStatistics",
+  "request",
+  "core/sql",
+  "AttributeBinsGraphic",
+  "core/promiseUtils",
+  a,
+  d,
+  e,
+  g,
+  i,
+  j,
+  k,
+  l,
+  m,
+  p,
+  q,
+  r,
+  s,
+  t
+);