@eodash/eodash 5.4.0 → 5.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (110) hide show
  1. package/core/client/asWebComponent.js +1 -1
  2. package/core/client/composables/DefineWidgets.js +12 -2
  3. package/core/client/eodashSTAC/EodashCollection.js +3 -3
  4. package/core/client/eodashSTAC/createLayers.js +44 -17
  5. package/core/client/eodashSTAC/helpers.js +12 -5
  6. package/core/client/eodashSTAC/parquet.js +2 -1
  7. package/core/client/eodashSTAC/triggers.js +1 -2
  8. package/core/client/store/actions.js +17 -17
  9. package/core/client/store/states.js +26 -4
  10. package/core/client/types.ts +9 -0
  11. package/core/client/utils/index.js +18 -1
  12. package/dist/client/{DashboardLayout-CQOGHPW_.js → DashboardLayout-CkSgvaFF.js} +2 -2
  13. package/dist/client/{DynamicWebComponent-CoLO8FEf.js → DynamicWebComponent-Ncsg6fb9.js} +1 -1
  14. package/dist/client/EodashChart-5v7adDpG.js +144 -0
  15. package/dist/client/{EodashDatePicker-BZeQ6bcu.js → EodashDatePicker-RoQJe6ss.js} +4 -4
  16. package/dist/client/{EodashItemFilter-CmZkk7GK.js → EodashItemFilter-CCoVC5BE.js} +2 -2
  17. package/dist/client/{EodashLayerControl-D54fY-bX.js → EodashLayerControl-weVj7aQA.js} +2 -2
  18. package/dist/client/{EodashLayoutSwitcher-BCP3FvDb.js → EodashLayoutSwitcher-CL-Z9d5_.js} +3 -3
  19. package/dist/client/EodashMapBtns-CXU8IuPO.js +433 -0
  20. package/dist/client/{EodashStacInfo-BZbmT8vT.js → EodashStacInfo-BbMnjf-n.js} +11 -15
  21. package/dist/client/{EodashTimeSlider-DIcAJr6D.js → EodashTimeSlider-BZXnqfax.js} +2 -2
  22. package/dist/client/{EodashTools-Cz6X6hsF.js → EodashTools-DUJlkkgx.js} +4 -4
  23. package/dist/client/{ExportState-DFVFAgKz.js → ExportState-CT3FQOHW.js} +46 -21
  24. package/dist/client/{Footer-DLzQcjkI.js → Footer-D_iqP-1K.js} +1 -1
  25. package/dist/client/{Header-_D9Z-zFJ.js → Header-Dzhnvsy-.js} +127 -17
  26. package/dist/client/MobileLayout-6Rg_PSO8.js +118 -0
  27. package/dist/client/{PopUp-DwI8V2gW.js → PopUp-DPPv_GSA.js} +8 -59
  28. package/dist/client/{ProcessList-C9eAg2Sb.js → ProcessList-BIN_Mb27.js} +9 -13
  29. package/dist/client/{VImg-COXTnCWE.js → VImg-DhbuvNrA.js} +2 -2
  30. package/dist/client/{VMain-C74l1bv-.js → VMain-CVabY_NY.js} +1 -1
  31. package/dist/client/{VTooltip-BLS-cQ9N.js → VTooltip-Cc6au3Sn.js} +3 -4
  32. package/dist/client/{WidgetsContainer-D-VfMRxE.js → WidgetsContainer-ChqTJS4h.js} +1 -1
  33. package/dist/client/asWebComponent-DaIxULaA.js +9207 -0
  34. package/dist/client/{async-D4G-FOIc.js → async-D6Lvv-fT.js} +4 -4
  35. package/dist/client/eo-dash.js +1 -1
  36. package/dist/client/{forwardRefs-CRMFoNYN.js → forwardRefs--IccUBdR.js} +196 -37
  37. package/dist/client/{handling-DTAhQuPh.js → handling-DSA67d6E.js} +74 -35
  38. package/dist/client/{helpers-CsjKHAcK.js → helpers-BBSdbOmv.js} +187 -87
  39. package/dist/client/{index-DEmHaCL3.js → index-6LlXNkke.js} +5 -3
  40. package/dist/client/{index-BHilH1qx.js → index-BS-8Y5FE.js} +22 -69
  41. package/dist/client/{index-BIcmbjr0.js → index-CQihL_c6.js} +27 -14
  42. package/dist/client/{index-BoCcZ0l4.js → index-qsZhYR_6.js} +15 -16
  43. package/dist/client/templates.js +48 -2
  44. package/dist/client/{transition-6MJLK-_H.js → transition-DFr4cXu8.js} +1 -1
  45. package/dist/node/cli.js +1 -1
  46. package/dist/types/core/client/App.vue.d.ts +16 -6
  47. package/dist/types/core/client/asWebComponent.d.ts +2 -2
  48. package/dist/types/core/client/components/DashboardLayout.vue.d.ts +2 -1
  49. package/dist/types/core/client/components/DynamicWebComponent.vue.d.ts +36 -16
  50. package/dist/types/core/client/components/EodashOverlay.vue.d.ts +2 -1
  51. package/dist/types/core/client/components/ErrorAlert.vue.d.ts +9 -1
  52. package/dist/types/core/client/components/Footer.vue.d.ts +2 -1
  53. package/dist/types/core/client/components/Header.vue.d.ts +2 -1
  54. package/dist/types/core/client/components/IframeWrapper.vue.d.ts +12 -6
  55. package/dist/types/core/client/components/Loading.vue.d.ts +2 -1
  56. package/dist/types/core/client/components/MobileLayout.vue.d.ts +2 -1
  57. package/dist/types/core/client/eodashSTAC/helpers.d.ts +1 -0
  58. package/dist/types/core/client/store/actions.d.ts +1 -2
  59. package/dist/types/core/client/store/states.d.ts +22 -4
  60. package/dist/types/core/client/types.d.ts +6 -1
  61. package/dist/types/core/client/utils/index.d.ts +1 -0
  62. package/dist/types/core/client/views/Dashboard.vue.d.ts +20 -8
  63. package/dist/types/templates/compare.d.ts +20 -0
  64. package/dist/types/templates/expert.d.ts +30 -1
  65. package/dist/types/widgets/EodashChart.vue.d.ts +28 -0
  66. package/dist/types/widgets/EodashDatePicker.vue.d.ts +38 -9
  67. package/dist/types/widgets/EodashItemCatalog/index.vue.d.ts +88 -13
  68. package/dist/types/widgets/EodashItemCatalog/methods/map.d.ts +1 -1
  69. package/dist/types/widgets/EodashItemFilter.vue.d.ts +169 -26
  70. package/dist/types/widgets/EodashLayerControl.vue.d.ts +38 -10
  71. package/dist/types/widgets/EodashLayoutSwitcher.vue.d.ts +22 -7
  72. package/dist/types/widgets/EodashMap/EodashMapBtns.vue.d.ts +94 -21
  73. package/dist/types/widgets/EodashMap/index.vue.d.ts +646 -93
  74. package/dist/types/widgets/EodashMap/methods/btns.d.ts +14 -0
  75. package/dist/types/widgets/EodashProcess/ProcessList.vue.d.ts +24 -7
  76. package/dist/types/widgets/EodashProcess/index.vue.d.ts +26 -7
  77. package/dist/types/widgets/EodashProcess/methods/composables.d.ts +1 -2
  78. package/dist/types/widgets/EodashProcess/methods/handling.d.ts +5 -11
  79. package/dist/types/widgets/EodashProcess/methods/outputs.d.ts +2 -2
  80. package/dist/types/widgets/EodashStacInfo.vue.d.ts +67 -18
  81. package/dist/types/widgets/EodashTimeSlider.vue.d.ts +14 -6
  82. package/dist/types/widgets/EodashTools.vue.d.ts +437 -47
  83. package/dist/types/widgets/ExportState.vue.d.ts +26 -8
  84. package/dist/types/widgets/PopUp.vue.d.ts +61 -11
  85. package/dist/types/widgets/WidgetsContainer.vue.d.ts +22 -6
  86. package/package.json +33 -34
  87. package/templates/baseConfig.js +2 -1
  88. package/templates/compare.js +28 -1
  89. package/templates/expert.js +19 -1
  90. package/widgets/EodashChart.vue +139 -0
  91. package/widgets/EodashItemCatalog/index.vue +2 -2
  92. package/widgets/EodashItemCatalog/methods/map.js +9 -10
  93. package/widgets/EodashMap/EodashMapBtns.vue +58 -93
  94. package/widgets/EodashMap/index.vue +10 -2
  95. package/widgets/EodashMap/methods/btns.js +155 -0
  96. package/widgets/EodashMap/methods/create-layers-config.js +3 -3
  97. package/widgets/EodashMap/methods/index.js +2 -1
  98. package/widgets/EodashProcess/ProcessList.vue +2 -3
  99. package/widgets/EodashProcess/index.vue +18 -61
  100. package/widgets/EodashProcess/methods/async.js +1 -1
  101. package/widgets/EodashProcess/methods/composables.js +0 -5
  102. package/widgets/EodashProcess/methods/custom-endpoints/chart/veda-endpoint.js +10 -6
  103. package/widgets/EodashProcess/methods/handling.js +23 -22
  104. package/widgets/EodashProcess/methods/outputs.js +44 -4
  105. package/widgets/EodashProcess/methods/utils.js +1 -1
  106. package/widgets/EodashStacInfo.vue +10 -23
  107. package/widgets/ExportState.vue +9 -15
  108. package/dist/client/EodashMapBtns-D-HulIl1.js +0 -306
  109. package/dist/client/MobileLayout-3Ko9XSfO.js +0 -118
  110. package/dist/client/asWebComponent-Bw03Jutr.js +0 -9090
@@ -3,7 +3,7 @@ import { defineCustomElement } from "vue";
3
3
  import { registerPlugins } from "./plugins";
4
4
  /**
5
5
  * @type {import("vue").VueElementConstructor<
6
- * import("vue").ExtractPropTypes<{ config: string }>>}
6
+ * import("vue").ExtractPropTypes<{ config?: string | Function }>>}
7
7
  * */
8
8
  const EodashConstructor = defineCustomElement(App, {
9
9
  //styles will be imported here using vite-plugin-vue-custom-element-style-injector
@@ -1,7 +1,11 @@
1
1
  import { defineAsyncComponent, reactive, shallowRef, watch } from "vue";
2
2
  import { useSTAcStore } from "@/store/stac";
3
3
  import { storeToRefs } from "pinia";
4
-
4
+ import {
5
+ areChartsSeparateLayout,
6
+ chartSpec,
7
+ compareChartSpec,
8
+ } from "@/store/states";
5
9
  /**
6
10
  * @typedef {{
7
11
  * component: import("vue").Component | null;
@@ -71,7 +75,13 @@ export const useDefineWidgets = (widgetConfigs) => {
71
75
  if ("defineWidget" in (config ?? {})) {
72
76
  const { selectedStac, selectedCompareStac } = storeToRefs(useSTAcStore());
73
77
  watch(
74
- [selectedStac, selectedCompareStac],
78
+ [
79
+ selectedStac,
80
+ selectedCompareStac,
81
+ areChartsSeparateLayout,
82
+ chartSpec,
83
+ compareChartSpec,
84
+ ],
75
85
  ([updatedStac, updatedCompareStac]) => {
76
86
  let definedConfig =
77
87
  /** @type {import("@/types").FunctionalWidget} */ (
@@ -131,7 +131,7 @@ export class EodashCollection {
131
131
  const item = new Item(this.selectedItem);
132
132
  this.selectedItem = item;
133
133
  const title = this.#collectionStac?.title || this.#collectionStac?.id || "";
134
- layersJson.unshift(
134
+ layersJson.push(
135
135
  ...(await this.buildJsonArray(item, title, isObservationPoint)),
136
136
  );
137
137
  return layersJson;
@@ -221,7 +221,7 @@ export class EodashCollection {
221
221
 
222
222
  jsonArray.push(
223
223
  ...((this.rasterEndpoint &&
224
- await createLayerFromRender(
224
+ (await createLayerFromRender(
225
225
  this.rasterEndpoint,
226
226
  this.#collectionStac,
227
227
  item,
@@ -229,7 +229,7 @@ export class EodashCollection {
229
229
  ...extraProperties,
230
230
  ...(layerDatetime && { layerDatetime }),
231
231
  },
232
- )) ||
232
+ ))) ||
233
233
  []),
234
234
  ...(await createLayersFromAssets(
235
235
  this.#collectionStac?.id ?? "",
@@ -269,7 +269,9 @@ export async function createLayersFromAssets(
269
269
  log.debug("Creating WebGLTile layer from GeoTIFF", assetLayerId);
270
270
  log.debug("Configured Sources", geoTIFFSources);
271
271
  const sources =
272
- stacObject?.["eodash:merge_assets"] !== false ? geoTIFFSources : geotiffSource;
272
+ stacObject?.["eodash:merge_assets"] !== false
273
+ ? geoTIFFSources
274
+ : geotiffSource;
273
275
  const layer = {
274
276
  type: "WebGLTile",
275
277
  source: {
@@ -387,7 +389,11 @@ export const createLayersFromLinks = async (
387
389
  json.source.params["STYLES"] = wmsLink["wms:styles"];
388
390
  }
389
391
  if (extraProperties !== null) {
390
- json.properties = { ...json.properties, ...extraProperties, ...extractEoxLegendLink(wmsLink) };
392
+ json.properties = {
393
+ ...json.properties,
394
+ ...extraProperties,
395
+ ...extractEoxLegendLink(wmsLink),
396
+ };
391
397
  }
392
398
  jsonArray.push(json);
393
399
  }
@@ -401,11 +407,16 @@ export const createLayersFromLinks = async (
401
407
 
402
408
  await registerProjection(wmtsLinkProjection);
403
409
  const key =
404
- /** @type {string | undefined} */ (wmtsLink["key"]) || undefined;
410
+ /** @type {string | undefined} */ (wmtsLink["key"]) || undefined;
405
411
 
406
412
  const styles = await fetchStyle(item, key);
407
413
  // get the correct style which is attached to a link
408
- const returnedLayerConfig = extractLayerConfig(collectionId, styles, undefined, "tileUrl");
414
+ const returnedLayerConfig = extractLayerConfig(
415
+ collectionId,
416
+ styles,
417
+ undefined,
418
+ "tileUrl",
419
+ );
409
420
  const projectionCode = getProjectionCode(wmtsLinkProjection || "EPSG:3857");
410
421
  // TODO: WARNING! This is a temporary project specific implementation
411
422
  // that needs to be removed once catalog and wmts creation from capabilities
@@ -425,7 +436,7 @@ export const createLayersFromLinks = async (
425
436
 
426
437
  // TODO, this does not yet work between layer time changes because we do not get
427
438
  // updated variables from OL layer due to usage of tileurlfunction
428
-
439
+
429
440
  // update dimensions with current value of style variables if applicable
430
441
  const variables = returnedLayerConfig?.style?.variables;
431
442
  if (variables) {
@@ -433,7 +444,7 @@ export const createLayersFromLinks = async (
433
444
  dimensionsWithoutStyle[kk] = vv;
434
445
  }
435
446
  }
436
-
447
+
437
448
  if (wmtsLink.title === "wmts capabilities") {
438
449
  log.debug(
439
450
  "Warning: WMTS Layer from capabilities added, function needs to be updated",
@@ -492,7 +503,11 @@ export const createLayersFromLinks = async (
492
503
  }
493
504
  extractRoles(json.properties, wmtsLink);
494
505
  if (extraProperties !== null) {
495
- json.properties = { ...json.properties, ...extraProperties, ...extractEoxLegendLink(wmtsLink) };
506
+ json.properties = {
507
+ ...json.properties,
508
+ ...extraProperties,
509
+ ...extractEoxLegendLink(wmtsLink),
510
+ };
496
511
  }
497
512
  jsonArray.push(json);
498
513
  }
@@ -501,18 +516,22 @@ export const createLayersFromLinks = async (
501
516
  const xyzLinkProjection =
502
517
  /** @type {number | string | {name: string, def: string} | undefined} */
503
518
  (xyzLink?.["proj:epsg"] || xyzLink?.["eodash:proj4_def"]);
504
- const key =
505
- /** @type {string | undefined} */ (xyzLink["key"]) || undefined;
519
+ const key = /** @type {string | undefined} */ (xyzLink["key"]) || undefined;
506
520
  const rasterformURL = /** @type {string|undefined} */ (
507
521
  collection?.["eodash:rasterform"]
508
522
  );
509
523
  /** @type {import("@/types").EodashRasterJSONForm|undefined} */
510
524
  const rasterForm = rasterformURL
511
- ? await axios.get(rasterformURL).then((resp) => resp.data)
512
- : undefined;
525
+ ? await axios.get(rasterformURL).then((resp) => resp.data)
526
+ : undefined;
513
527
  const styles = await fetchStyle(item, key);
514
528
  // get the correct style which is attached to a link
515
- let { layerConfig, style } = extractLayerConfig(collectionId, styles, rasterForm, "tileUrl");
529
+ let { layerConfig, style } = extractLayerConfig(
530
+ collectionId,
531
+ styles,
532
+ rasterForm,
533
+ "tileUrl",
534
+ );
516
535
  await registerProjection(xyzLinkProjection);
517
536
  const projectionCode = getProjectionCode(xyzLinkProjection || "EPSG:3857");
518
537
  const linkId = createLayerID(
@@ -557,7 +576,11 @@ export const createLayersFromLinks = async (
557
576
 
558
577
  extractRoles(json.properties, xyzLink);
559
578
  if (extraProperties !== null) {
560
- json.properties = { ...json.properties, ...extraProperties, ...extractEoxLegendLink(xyzLink) };
579
+ json.properties = {
580
+ ...json.properties,
581
+ ...extraProperties,
582
+ ...extractEoxLegendLink(xyzLink),
583
+ };
561
584
  }
562
585
  jsonArray.push(json);
563
586
  }
@@ -624,7 +647,11 @@ export const createLayersFromLinks = async (
624
647
  addTooltipInteraction(json, style);
625
648
  extractRoles(json.properties, vectorTileLink);
626
649
  if (extraProperties !== null) {
627
- json.properties = { ...json.properties, ...extraProperties, ...extractEoxLegendLink(vectorTileLink) };
650
+ json.properties = {
651
+ ...json.properties,
652
+ ...extraProperties,
653
+ ...extractEoxLegendLink(vectorTileLink),
654
+ };
628
655
  }
629
656
  jsonArray.push(json);
630
657
  }
@@ -649,8 +676,8 @@ export const createLayerFromRender = async (
649
676
  }
650
677
 
651
678
  const rasterformURL = /** @type {string|undefined} */ (
652
- collection?.["eodash:rasterform"]
653
- );
679
+ collection?.["eodash:rasterform"]
680
+ );
654
681
  /** @type {import("@/types").EodashRasterJSONForm|undefined} */
655
682
  const rasterForm = rasterformURL
656
683
  ? await axios.get(rasterformURL).then((resp) => resp.data)
@@ -725,7 +752,7 @@ export const createLayerFromRender = async (
725
752
  }
726
753
 
727
754
  return layers;
728
- }
755
+ };
729
756
  /**
730
757
  *
731
758
  * @param {Record<string,any>} obj
@@ -49,7 +49,12 @@ export function generateFeatures(links, extraProperties = {}, rel = "item") {
49
49
  * @param {Record<string,any>} [rasterJsonform]
50
50
  * @param {string} [layerConfigType]
51
51
  * */
52
- export function extractLayerConfig(collectionId, style, rasterJsonform, layerConfigType) {
52
+ export function extractLayerConfig(
53
+ collectionId,
54
+ style,
55
+ rasterJsonform,
56
+ layerConfigType,
57
+ ) {
53
58
  if (!style && !rasterJsonform) {
54
59
  return { layerConfig: undefined, style: undefined };
55
60
  }
@@ -192,8 +197,11 @@ export const fetchStyle = async (
192
197
  /** @type {Array<string>} */ (link["asset:keys"]).includes(assetKey),
193
198
  );
194
199
  } else {
195
- log.debug("Neither link key, nor asset key input, can not match any style to layer.", stacObject.id);
196
- return {};
200
+ log.debug(
201
+ "Neither link key, nor asset key input, can not match any style to layer.",
202
+ stacObject.id,
203
+ );
204
+ return {};
197
205
  }
198
206
  if (styleLink) {
199
207
  /** @type {import("@/types").EodashStyleJson} */
@@ -424,7 +432,7 @@ export const replaceLayersInStructure = (layers, toRemove, toInsert) => {
424
432
  continue;
425
433
  }
426
434
 
427
- result.push(layer);
435
+ result.unshift(layer);
428
436
  }
429
437
 
430
438
  return result;
@@ -849,7 +857,6 @@ export function extractLayerLegend(collection) {
849
857
  return extraProperties;
850
858
  }
851
859
 
852
-
853
860
  /**
854
861
  * @param { import ("stac-ts").StacLink } link
855
862
  * @returns {object}
@@ -95,7 +95,8 @@ function moveItemProperties(item) {
95
95
  "id",
96
96
  "collection",
97
97
  "properties",
98
- "auth:schemes"
98
+ "auth:schemes",
99
+ "eodash:merge_assets",
99
100
  ];
100
101
  for (const key in item) {
101
102
  if (!stacProperties.includes(key)) {
@@ -85,7 +85,7 @@ export function getStyleVariablesState(collectionId, variables) {
85
85
  ).getStyle?.()?.variables ??
86
86
  //@ts-expect-error (styleVariables_ is a private property)
87
87
  /** @type {import("ol/layer").WebGLTile} */ (olLayer).styleVariables_;
88
-
88
+
89
89
  if (!oldVariablesState) {
90
90
  return variables;
91
91
  }
@@ -99,4 +99,3 @@ export function getStyleVariablesState(collectionId, variables) {
99
99
  );
100
100
  return matchingKeys ? oldVariablesState : variables;
101
101
  }
102
-
@@ -5,8 +5,9 @@ import {
5
5
  activeTemplate,
6
6
  poi,
7
7
  comparePoi,
8
- chartEl,
9
- compareChartEl,
8
+ areChartsSeparateLayout,
9
+ chartData,
10
+ compareChartData,
10
11
  } from "@/store/states";
11
12
  import { getProjectionCode } from "@/eodashSTAC/helpers";
12
13
  import log from "loglevel";
@@ -15,26 +16,13 @@ import log from "loglevel";
15
16
  * Returns the current layers of {@link mapEl}
16
17
  * @returns {import("@eox/map").EoxLayer[]}
17
18
  */
18
- export const getLayers = () => mapEl.value?.layers.toReversed() ?? [];
19
+ export const getLayers = () => mapEl.value?.layers ?? [];
19
20
 
20
21
  /**
21
22
  * Returns the current layers of {@link mapCompareEl}
22
23
  * * @returns {import("@eox/map").EoxLayer[]}
23
24
  */
24
- export const getCompareLayers = () =>
25
- mapCompareEl.value?.layers.toReversed() ?? [];
26
-
27
- /**
28
- * Returns the current chart spec from {@link chartEl}
29
- * @returns {import("vega-embed").VisualizationSpec | null}
30
- */
31
- export const getChartSpec = () => chartEl.value?.spec ?? null;
32
-
33
- /**
34
- * Returns the current chart spec from {@link compareChartEl}
35
- * @returns {import("vega-embed").VisualizationSpec | null}
36
- */
37
- export const getCompareChartSpec = () => compareChartEl.value?.spec ?? null;
25
+ export const getCompareLayers = () => mapCompareEl.value?.layers ?? [];
38
26
 
39
27
  /**
40
28
  * Register EPSG projection in `eox-map`
@@ -108,3 +96,15 @@ export const includesProcess = (collection, compare = false) => {
108
96
  collection?.links?.some((link) => link.rel === "service") || isPoiAlive
109
97
  );
110
98
  };
99
+
100
+ /**
101
+ * Check whether main or compare chart have data to show
102
+ * @param {boolean} [compare=false] - Whether to check for compare collection
103
+ * @returns
104
+ */
105
+ export const shouldShowChartWidget = (compare = false) => {
106
+ return (
107
+ areChartsSeparateLayout.value &&
108
+ (compare ? compareChartData.value : chartData.value)
109
+ );
110
+ };
@@ -46,8 +46,30 @@ export const poi = ref("");
46
46
  */
47
47
  export const comparePoi = ref("");
48
48
 
49
- /** @type {import("vue").Ref<import("@eox/chart").EOxChart | null>} */
50
- export const chartEl = shallowRef(null);
49
+ /** Whether the map is in globe mode */
50
+ export const isGlobe = ref(false);
51
51
 
52
- /** @type {import("vue").Ref<import("@eox/chart").EOxChart | null>} */
53
- export const compareChartEl = shallowRef(null);
52
+ /** Whether the charts are in fullscreen mode
53
+ * @type {import("vue").Ref<boolean>}
54
+ */
55
+ export const areChartsSeparateLayout = ref(false);
56
+
57
+ /** Holds main chart data
58
+ * @type {import("vue").Ref<Record<string,any>|null>}
59
+ */
60
+ export const chartData = ref(null);
61
+
62
+ /** Holds compare chart data
63
+ * @type {import("vue").Ref<Record<string,any>|null>}
64
+ */
65
+ export const compareChartData = ref(null);
66
+
67
+ /** Holds main chart spec
68
+ * @type {import("vue").Ref<import("vega-embed").VisualizationSpec | null>}
69
+ */
70
+ export const chartSpec = ref(null);
71
+
72
+ /** Holds compare chart spec
73
+ * @type {import("vue").Ref<import("vega-embed").VisualizationSpec | null>}
74
+ */
75
+ export const compareChartSpec = ref(null);
@@ -149,6 +149,14 @@ export interface TEodashProcess {
149
149
  >["$props"];
150
150
  }
151
151
 
152
+ /** @group Widgets */
153
+ export interface TEodashChart {
154
+ name: "EodashChart";
155
+ properties?: InstanceType<
156
+ typeof import("^/EodashChart.vue").default
157
+ >["$props"];
158
+ }
159
+
152
160
  /** @group Widgets */
153
161
  export interface TEodashMapBtns {
154
162
  name: "EodashMapBtns";
@@ -212,6 +220,7 @@ export type ComponentWidget =
212
220
  | TEodashLayerControl
213
221
  | TEodashStacInfo
214
222
  | TEodashProcess
223
+ | TEodashChart
215
224
  | TEodashMapBtns
216
225
  | TEodashTools
217
226
  | TEodashLayoutSwitcher
@@ -220,6 +220,23 @@ export const getElement = (selector) => {
220
220
  //@ts-expect-error selectior can be a string or an Element
221
221
  return document.querySelector(selector);
222
222
  }
223
- //@ts-expect-error selectior can be a string or an Element
223
+ //@ts-expect-error selector can be a string or an Element
224
224
  return eoDash.shadowRoot?.querySelector(selector);
225
225
  };
226
+
227
+ /**
228
+ * Recursively searches parents for overlay HTML element (mobile tab root)
229
+ *
230
+ * @param { HTMLElement } el - HTML component, starting search from.
231
+ * @returns { HTMLElement | null }
232
+ */
233
+ export const getOverlayParent = (el) => {
234
+ while (el) {
235
+ if (el.id === "overlay" || el.classList.contains("panel")) {
236
+ return el;
237
+ }
238
+ //@ts-expect-error selector can be null or an Element
239
+ el = el.parentElement;
240
+ }
241
+ return null;
242
+ };
@@ -1,7 +1,7 @@
1
1
  import { createBlock, openBlock, withCtx, createElementVNode, unref, createElementBlock, createCommentVNode, normalizeStyle, Suspense, resolveDynamicComponent, mergeProps, Fragment, renderList, Transition } from 'vue';
2
2
  import '@eox/layout';
3
- import { _ as _export_sfc, u as useDefineTemplate } from './asWebComponent-Bw03Jutr.js';
4
- import { V as VMain } from './VMain-C74l1bv-.js';
3
+ import { _ as _export_sfc, u as useDefineTemplate } from './asWebComponent-DaIxULaA.js';
4
+ import { V as VMain } from './VMain-CVabY_NY.js';
5
5
 
6
6
  const _style_0 = ".panel[data-v-9c8477cc]{position:relative;overflow:auto;z-index:1;pointer-events:none}.pointer[data-v-9c8477cc]{pointer-events:all}.bg-panel[data-v-9c8477cc]{z-index:0;border-radius:0!important}.fade-enter-active[data-v-9c8477cc],.fade-leave-active[data-v-9c8477cc]{transition:opacity .25s ease}.fade-enter-from[data-v-9c8477cc],.fade-leave-to[data-v-9c8477cc]{opacity:0}.bg-surface[data-v-9c8477cc],.bg-primary[data-v-9c8477cc]{backdrop-filter:blur(10px)!important;border-radius:8px;border:none;box-shadow:0 0 1px #18274b38,0 6px 12px -6px #18274b1f,0 8px 24px -4px #18274b14;max-height:100%;overflow:auto;scrollbar-color:rgba(var(--v-theme-on-surface),.2) transparent;scrollbar-width:thin}.bg-surface[data-v-9c8477cc]{background-color:rgba(var(--v-theme-surface),var(--v-surface-opacity, .8))!important}.bg-primary[data-v-9c8477cc]{background-color:rgba(var(--v-theme-primary),var(--v-primary-opacity, .8))!important}";
7
7
 
@@ -1,5 +1,5 @@
1
1
  import { withAsyncContext, ref, onMounted, onUnmounted, createElementBlock, openBlock, createBlock, resolveDynamicComponent, mergeProps } from 'vue';
2
- import { E as useSTAcStore } from './asWebComponent-Bw03Jutr.js';
2
+ import { E as useSTAcStore } from './asWebComponent-DaIxULaA.js';
3
3
 
4
4
  const _hoisted_1 = { class: "d-flex flex-column fill-height overflow-auto" };
5
5
 
@@ -0,0 +1,144 @@
1
+ import { computed, ref, useTemplateRef, onMounted, onBeforeUnmount, createElementBlock, openBlock, createElementVNode, withDirectives, createCommentVNode, unref, normalizeStyle, toRaw } from 'vue';
2
+ import '@eox/chart';
3
+ import { o as onChartClick } from './handling-DSA67d6E.js';
4
+ import { Z as compareChartData, _ as chartData, O as compareChartSpec, N as chartSpec, M as areChartsSeparateLayout } from './helpers-BBSdbOmv.js';
5
+ import { _ as _export_sfc, S as getOverlayParent } from './asWebComponent-DaIxULaA.js';
6
+ import { mdiArrowCollapse, mdiArrowExpand } from '@mdi/js';
7
+ import { T as Tooltip } from './index-6LlXNkke.js';
8
+
9
+ const _style_0 = ".chart-frame[data-v-8466cc5f]{position:relative}.chart-toggle[data-v-8466cc5f]{position:absolute;top:38px;right:12px;z-index:2;cursor:pointer}";
10
+
11
+ const _hoisted_1 = { ref: "container" };
12
+ const _hoisted_2 = { class: "chart-frame" };
13
+ const _hoisted_3 = {
14
+ viewBox: "0 0 20 20",
15
+ width: "20",
16
+ height: "20",
17
+ "aria-hidden": "true"
18
+ };
19
+ const _hoisted_4 = ["d"];
20
+ const _hoisted_5 = [".spec", ".dataValues", ".opt"];
21
+
22
+
23
+ const _sfc_main = {
24
+ __name: 'EodashChart',
25
+ props: {
26
+ enableCompare: {
27
+ type: Boolean,
28
+ default: false,
29
+ },
30
+ vegaEmbedOptions: {
31
+ type: Object,
32
+ default() {
33
+ return { actions: true };
34
+ },
35
+ },
36
+ },
37
+ setup(__props) {
38
+
39
+
40
+
41
+ const usedChartData = computed(() => {
42
+ return __props.enableCompare ? compareChartData.value : chartData.value;
43
+ });
44
+
45
+ const usedChartSpec = computed(() => {
46
+ return __props.enableCompare ? compareChartSpec.value : chartSpec.value;
47
+ });
48
+
49
+ const chartRenderKey = ref(0);
50
+ const frameHeight = ref(225);
51
+ const containerEl = useTemplateRef("container");
52
+
53
+ /**
54
+ @type { MutationObserver | null}
55
+ */
56
+ let observer = null;
57
+
58
+ onMounted(() => {
59
+ const el = containerEl.value;
60
+ if (!el) return;
61
+
62
+ const parent = el.parentElement?.parentElement;
63
+ if (parent) {
64
+ const parentHeight = parent.getBoundingClientRect().height;
65
+ frameHeight.value = Math.max(225, Math.floor(parentHeight));
66
+ }
67
+
68
+ // for mobile view, the overlay panel containing chart is initially hidden
69
+ // we create an observer when display of overlay is not none anymore
70
+ const overlay = getOverlayParent(el);
71
+ if (!overlay) return;
72
+
73
+ observer = new MutationObserver(async () => {
74
+ const style = getComputedStyle(overlay);
75
+ const visible = style.display !== "none";
76
+ if (visible) {
77
+ // forcibly rerender chart, otherwise size of canvas is 0
78
+ chartRenderKey.value = Math.random();
79
+ }
80
+ });
81
+
82
+ observer.observe(overlay, {
83
+ attributes: true,
84
+ attributeFilter: ["style", "class"],
85
+ });
86
+ });
87
+
88
+ onBeforeUnmount(() => {
89
+ observer?.disconnect();
90
+ });
91
+
92
+ const chartStyles = computed(() => {
93
+ const styles = {
94
+ height: `${frameHeight.value}px`,
95
+ };
96
+ return styles;
97
+ });
98
+
99
+ const toggleIcon = computed(() =>
100
+ areChartsSeparateLayout.value ? mdiArrowCollapse : mdiArrowExpand,
101
+ );
102
+
103
+ function toggleLayout() {
104
+ areChartsSeparateLayout.value = !areChartsSeparateLayout.value;
105
+ }
106
+
107
+ return (_ctx, _cache) => {
108
+
109
+
110
+ return (openBlock(), createElementBlock("div", _hoisted_1, [
111
+ createElementVNode("div", _hoisted_2, [
112
+ (usedChartData.value && usedChartSpec.value)
113
+ ? withDirectives((openBlock(), createElementBlock("button", {
114
+ key: 0,
115
+ class: "chart-toggle",
116
+ onClick: toggleLayout
117
+ }, [
118
+ (openBlock(), createElementBlock("svg", _hoisted_3, [
119
+ createElementVNode("path", { d: toggleIcon.value }, null, 8 /* PROPS */, _hoisted_4)
120
+ ]))
121
+ ])), [
122
+ [Tooltip, unref(areChartsSeparateLayout) ? 'Minimize' : 'Maximize']
123
+ ])
124
+ : createCommentVNode("v-if", true),
125
+ (usedChartData.value && usedChartSpec.value)
126
+ ? (openBlock(), createElementBlock("eox-chart", {
127
+ class: "pt-0",
128
+ ".spec": toRaw(usedChartSpec.value),
129
+ key: chartRenderKey.value,
130
+ ".dataValues": toRaw(usedChartData.value),
131
+ "onClick:item": _cache[0] || (_cache[0] = (...args) => (unref(onChartClick) && unref(onChartClick)(...args))),
132
+ style: normalizeStyle(chartStyles.value),
133
+ ".opt": __props.vegaEmbedOptions
134
+ }, null, 44 /* STYLE, PROPS, NEED_HYDRATION */, _hoisted_5))
135
+ : createCommentVNode("v-if", true)
136
+ ])
137
+ ], 512 /* NEED_PATCH */))
138
+ }
139
+ }
140
+
141
+ };
142
+ const EodashChart = /*#__PURE__*/_export_sfc(_sfc_main, [['styles',[_style_0]],['__scopeId',"data-v-8466cc5f"]]);
143
+
144
+ export { EodashChart as default };
@@ -1,13 +1,13 @@
1
1
  import { useCssVars, ref, useTemplateRef, customRef, computed, reactive, watch, onMounted, createElementBlock, openBlock, createVNode, unref, createSlots, withCtx, createElementVNode, withDirectives, createCommentVNode, createBlock, mergeProps, toHandlers } from 'vue';
2
2
  import { DatePicker } from 'v-calendar';
3
- import { _ as _export_sfc, D as useDisplay, E as useSTAcStore, F as useTransparentPanel, G as VBtn, H as VIcon, I as eodashCollections, J as eodashCompareCollections } from './asWebComponent-Bw03Jutr.js';
4
- import { C as datetime } from './helpers-CsjKHAcK.js';
3
+ import { _ as _export_sfc, D as useDisplay, E as useSTAcStore, F as useTransparentPanel, G as VBtn, H as VIcon, I as eodashCollections, J as eodashCompareCollections } from './asWebComponent-DaIxULaA.js';
4
+ import { C as datetime } from './helpers-BBSdbOmv.js';
5
5
  import { mdiRayEndArrow, mdiRayStartArrow } from '@mdi/js';
6
6
  import log from 'loglevel';
7
7
  import { storeToRefs } from 'pinia';
8
- import { T as Tooltip } from './index-DEmHaCL3.js';
8
+ import { T as Tooltip } from './index-6LlXNkke.js';
9
9
 
10
- const _style_0 = ".vc-popover-content{--vc-nav-hover-bg: rgba(var(--v-theme-on-surface), .1);--vc-nav-item-active-color: rgb(var(--v-theme-on-secondary));--vc-nav-item-active-bg: rgba(var(--v-theme-secondary), .8);--vc-focus-ring: 0 0 0 2px rgba(var(--v-theme-secondary), .5)}.vc-container{--vc-day-content-hover-bg: rgba(var(--v-theme-on-surface), .2);--vc-focus-ring: 0 0 0 2px rgba(var(--v-theme-secondary), .4);--vc-header-arrow-hover-bg: rgba(var(--v-theme-secondary), .1)}.vc-attr{--vc-accent-600: rgba(var(--v-theme-secondary), .8)}.datePicker{--vc-day-content-hover-bg: red}@media (min-width: 960px){.datePicker{position:absolute;bottom:0;left:0;right:0;margin-inline:auto;width:fit-content}}.vc-day-content{color:#5e5e5e;font-weight:400}.vc-highlight-content-solid{color:#fff!important}.vc-popover-content-wrapper{transform:var(--v5270a4d4)!important}.vc-date-picker-content,.datePicker{backdrop-filter:blur(10px)!important;border-radius:8px;border:none;box-shadow:0 0 1px #18274b38,0 6px 12px -6px #18274b1f,0 8px 24px -4px #18274b14;background-color:rgba(var(--v-theme-surface),var(--v-surface-opacity, .8))!important}.vc-popover-caret.direction-top.align-left{clip-path:polygon(0% 0%,100% 0%,0% 100%,0% 100%)}.vc-bordered{border:none}";
10
+ const _style_0 = ".vc-popover-content{--vc-nav-hover-bg: rgba(var(--v-theme-on-surface), .1);--vc-nav-item-active-color: rgb(var(--v-theme-on-secondary));--vc-nav-item-active-bg: rgba(var(--v-theme-secondary), .8);--vc-focus-ring: 0 0 0 2px rgba(var(--v-theme-secondary), .5)}.vc-container{--vc-day-content-hover-bg: rgba(var(--v-theme-on-surface), .2);--vc-focus-ring: 0 0 0 2px rgba(var(--v-theme-secondary), .4);--vc-header-arrow-hover-bg: rgba(var(--v-theme-secondary), .1)}.vc-attr{--vc-accent-600: rgba(var(--v-theme-secondary), .8)}.datePicker{--vc-day-content-hover-bg: red}@media(min-width:960px){.datePicker{position:absolute;bottom:0;left:0;right:0;margin-inline:auto;width:fit-content}}.vc-day-content{color:#5e5e5e;font-weight:400}.vc-highlight-content-solid{color:#fff!important}.vc-popover-content-wrapper{transform:var(--v5270a4d4)!important}.vc-date-picker-content,.datePicker{backdrop-filter:blur(10px)!important;border-radius:8px;border:none;box-shadow:0 0 1px #18274b38,0 6px 12px -6px #18274b1f,0 8px 24px -4px #18274b14;background-color:rgba(var(--v-theme-surface),var(--v-surface-opacity, .8))!important}.vc-popover-caret.direction-top.align-left{clip-path:polygon(0% 0%,100% 0%,0% 100%,0% 100%)}.vc-bordered{border:none}";
11
11
 
12
12
  const _hoisted_1 = {
13
13
  ref: "rootRef",
@@ -1,7 +1,7 @@
1
1
  import { withAsyncContext, computed, ref, createElementBlock, openBlock, mergeProps, unref, createElementVNode, toDisplayString } from 'vue';
2
- import { _ as _export_sfc, E as useSTAcStore, Q as isFirstLoad } from './asWebComponent-Bw03Jutr.js';
2
+ import { _ as _export_sfc, E as useSTAcStore, Q as isFirstLoad } from './asWebComponent-DaIxULaA.js';
3
3
 
4
- const _style_0 = "eox-itemfilter[data-v-88d0abc7]{--form-flex-direction: row}@media (max-width: 768px){eox-itemfilter[data-v-88d0abc7]{--form-flex-direction: column}}";
4
+ const _style_0 = "eox-itemfilter[data-v-88d0abc7]{--form-flex-direction: row}@media(max-width:768px){eox-itemfilter[data-v-88d0abc7]{--form-flex-direction: column}}";
5
5
 
6
6
  const _hoisted_1 = [".items"];
7
7
  const _hoisted_2 = {
@@ -1,8 +1,8 @@
1
1
  import { withAsyncContext, computed, ref, createElementBlock, openBlock, createCommentVNode, mergeProps, unref, renderSlot, createElementVNode, toDisplayString } from 'vue';
2
2
  import 'color-legend-element';
3
3
  import '@eox/timecontrol';
4
- import { O as mapCompareEl, j as mapEl, P as getColFromLayer } from './helpers-CsjKHAcK.js';
5
- import { _ as _export_sfc, E as useSTAcStore, M as layerControlFormValueCompare, N as layerControlFormValue, J as eodashCompareCollections, I as eodashCollections } from './asWebComponent-Bw03Jutr.js';
4
+ import { S as mapCompareEl, j as mapEl, T as getColFromLayer } from './helpers-BBSdbOmv.js';
5
+ import { _ as _export_sfc, E as useSTAcStore, M as layerControlFormValueCompare, N as layerControlFormValue, J as eodashCompareCollections, I as eodashCollections } from './asWebComponent-DaIxULaA.js';
6
6
  import { storeToRefs } from 'pinia';
7
7
 
8
8
  /**
@@ -1,8 +1,8 @@
1
1
  import { ref, createElementBlock, openBlock, createBlock, unref, withCtx, createVNode, mergeProps } from 'vue';
2
- import { E as activeTemplate } from './helpers-CsjKHAcK.js';
2
+ import { E as activeTemplate } from './helpers-BBSdbOmv.js';
3
3
  import { mdiViewDashboard } from '@mdi/js';
4
- import { D as useDisplay, F as useTransparentPanel, H as VIcon } from './asWebComponent-Bw03Jutr.js';
5
- import { V as VTooltip } from './VTooltip-BLS-cQ9N.js';
4
+ import { D as useDisplay, F as useTransparentPanel, H as VIcon } from './asWebComponent-DaIxULaA.js';
5
+ import { V as VTooltip } from './VTooltip-Cc6au3Sn.js';
6
6
 
7
7
  const _sfc_main = {
8
8
  __name: 'EodashLayoutSwitcher',