What are Internal Widgets

Eodash provides Internal Widgets as extendable Vue Components that are maintained within the package. Along with these, users can also define their own Vue Components. For further information, you can refer to the API.

Using Eodash Provided Internal Widgets

To use eodash provided internal widgets simply set the desired component's name to widget.name and props to widget.properties if needed. Find the provided components below:

• EodashDatePicker
• EodashItemFilter
• EodashLayerControl
• EodashMap
• EodashMapBtns
• ExportState
• PopUp
• WidgetsContainer

find all provided widgets source code in the widgets folder on eodash/eodash repository.

Example

export default createEodash({
    template: {
        ...
        widgets: [
            {
             id: Symbol(),
             type: "internal",
             title: "datepicker",
             layout: { x: 5, y: 11, w: 2, h: 1 },
             slidable: false,
             widget: {
               name: "EodashDatePicker",
               properties: {
                 inline: true,
               },
             },
           },
           ...
        ]
    }
})

Creating your own Internal Widget

You can define your own vue components and import them on your instance. Eodash automatically looks for a src/widgets folder on your project. If found, it imports all vue files defined inside the folder. The defined components can simply be referenced by their name on your dashboard configuration and the component's props and attributes can be assigned using the properties property.

You can assign internal widgets on a folder of your choice by assigning the folders path either using the --widgets CLI option or in the widgets property in eodash.config.js

All eodash's dependencies are accessible inside your created vue components without the need to reinstall them. Eodash uses the following dependencies.

Package	Version
@eox/itemfilter	^1.1.1
@eox/jsonform	^0.8.2
@eox/layercontrol	^0.22.0
@eox/layout	^0.1.0
@eox/map	^1.13.1
@eox/stacinfo	^0.3.3
@eox/timecontrol	^0.8.0
@mdi/js	^7.4.47
animated-details	gist:2912bb049fa906671807415eb0e87188
axios	^1.7.7
axios-cache-interceptor	^1.6.0
color-legend-element	^1.3.0
core-js	^3.38.1
loglevel	^1.9.2
pinia	^2.2.2
sass	^1.78.0
stac-js	^0.0.9
stac-ts	^1.0.3
v-calendar	3.0.0
vite	^5.4.6
vue	^3.5.0
vuetify	^3.7.2
webfontloader	^1.6.28

Example

// src/widgets/List.vue
<template>
  <v-card class="mx-auto d-flex flex-column fill-height" color="transparent">
    <v-list lines="one" class="overflow-auto">
      <v-list-item
        v-for="(link, idx) in stac"
        :key="idx"
        @click="getSelected(idx)"
        :title="link.title"
      >
      </v-list-item>
    </v-list>
  </v-card>
</template>
<script setup lang="ts">
import { store } from "@eodash/eodash";
import { storeToRefs } from "pinia";

const { stac } = storeToRefs(store.stac.useSTAcStore());
const { loadSelectedSTAC } = store.stac.useSTAcStore();

const getSelected = async (idx) => {
  const link = stac.value[idx];
  await loadSelectedSTAC(link.href);
};
</script>

// src/main.js
export default createEodash({
    ...
    template: {
        ...
        widgets:[
             {
             id: Symbol(),
             type: "internal",
             title: "Indicators List",
             layout: { x: 0, y: 0, w: 3, h: 12 },
             widget: {
               name: "List",
             },
           },
           ...
        ]
    }
})