@eodash/eodash 5.4.0 → 5.5.1

package/widgets/ExportState.vue

@@ -37,7 +37,7 @@
           {{ removeUnneededProperties(getLayers()) }}
         </div>
 
-        <div v-if="props.getChartSpec?.()" class="mb-4">
+        <div v-if="chartSpec" class="mb-4">
           <p class="text-body-2 mb-2">
             <strong>Chart Spec (for export)</strong>
           </p>
@@ -61,12 +61,10 @@ import { mdiClipboardCheckOutline, mdiContentCopy } from "@mdi/js";
 import PopUp from "./PopUp.vue";
 import { copyToClipBoard } from "@/utils";
 import { ref } from "vue";
-import {
-  getLayers as getLayerAction,
-  getChartSpec as getChartSpecAction,
-} from "@/store/actions";
-import { mapPosition, availableMapProjection } from "@/store/states";
+import { getLayers as getLayerAction } from "@/store/actions";
+import { mapPosition, availableMapProjection, chartSpec } from "@/store/states";
 import { removeUnneededProperties } from "@/eodashSTAC/helpers";
+import { base64EncodeSpec } from "@eox/chart";
 
 const dialog = defineModel({ type: Boolean, required: true, default: false });
 
@@ -75,10 +73,6 @@ const props = defineProps({
     type: Function,
     default: getLayerAction,
   },
-  getChartSpec: {
-    type: Function,
-    default: getChartSpecAction,
-  },
 });
 
 const copySuccess = ref(false);
@@ -105,7 +99,7 @@ const copyBtns = [
     copyFn: async () =>
       await copyToClipBoard(getChartExportCode(), copySuccess),
     copyAs: "chart",
-    showIf: () => !!props.getChartSpec?.(),
+    showIf: () => chartSpec.value,
   },
 ];
 
@@ -128,12 +122,12 @@ const getMapEntryCode = () => {
 };
 
 const getChartExportCode = () => {
-  const chartSpec = props.getChartSpec?.();
-  if (!chartSpec) return "";
+  if (!chartSpec.value) return "";
   const preTag =
-    "## Chart Example <!" + '--{as="eox-chart" style="height: 300px;" spec=';
+    "## Chart Example <!" + '--{as="eox-chart" style="height: 400px;" spec=';
   const endTag = " }-->";
-  return `${preTag}'${JSON.stringify(chartSpec)}'${endTag}`;
+  const escapedSpec = base64EncodeSpec(chartSpec.value);
+  return `${preTag}'${escapedSpec}'${endTag}`;
 };
 </script>
 <style scoped>