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 an eodash provided internal widget, set the component's name on widget.name and props on widget.properties. Find the provided components below:

Widget	API Reference
EodashChart	API
EodashDatePicker	API
EodashItemCatalog	API
EodashItemFilter	API
EodashLayerControl	API
EodashLayoutSwitcher	API
EodashMap	API
EodashProcess	API
EodashStacInfo	API
EodashTimeSlider	API
EodashTools	API
WidgetsContainer	API

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 },
             widget: {
               name: "EodashDatePicker",
               properties: {
                 inline: true,
               },
             },
           },
           ...
        ]
    }
})

Compare mode

Several internal widgets can run in compare mode to show two selections side by side. Set enableCompare: true on the widget's properties to bind it to the compare selection instead of the primary one.

• EodashMap renders a side-by-side compare map; it requires a selected compare STAC.
• EodashChart and EodashProcess read from the compare selection when enableCompare is set.

The primary selection is held in the store as selectedStac and the compare selection as selectedCompareStac.

{
  id: Symbol(),
  type: "internal",
  layout: { x: 9, y: 1, w: 3, h: 8 },
  widget: {
    name: "EodashProcess",
    properties: { enableCompare: true },
  },
}

Creating your own Internal Widget

You can define your own Vue components and import them into your instance. Eodash automatically looks for a src/widgets folder in your project. If found, it imports all Vue files defined inside that folder.

Custom components are referenced by their filename (the component name) in your dashboard configuration under widget.name.

How Custom Widgets Work

1. Props Mapping: Any options specified in the widget config under widget.properties are passed down to your Vue component as standard Vue props.
2. Global State & Interaction: You can import the unified eodash store to subscribe to reactive state changes (such as the currently selected STAC indicators, active time slider timestamps, or map layers) and invoke global actions (like loading a new STAC catalog).

You can customize the folder where Eodash looks for custom widgets using the --widgets CLI option or the widgets property in eodash.config.js.

All of eodash's core dependencies are accessible inside your Vue components without needing to reinstall them. These include:

Package	Version
@eox/chart	^1.2.0
@eox/drawtools	^1.6.0
@eox/feedback	^1.2.0
@eox/geosearch	^1.2.0
@eox/itemfilter	^1.17.3
@eox/jsonform	^1.12.1
@eox/layercontrol	^1.7.0
@eox/layout	^1.0.0
@eox/map	^2.6.0
@eox/stacinfo	^1.2.0
@eox/timecontrol	^2.5.0
@eox/ui	^1.1.0
@mdi/js	^7.4.47
@vueuse/core	^14.3.0
animated-details	gist:2912bb049fa906671807415eb0e87188
axios	^1.17.0
axios-cache-interceptor	^1.12.0
color-legend-element	^1.5.0
core-js	^3.49.0
hyparquet	^1.26.0
loglevel	^1.9.2
mustache	^4.2.0
pinia	^3.0.4
proj4	^2.20.8
sass	^1.100.0
stac-js	^0.4.3
stac-ts	^1.0.5
v-calendar	3.0.0
vega-embed	^6.29.0
vega-lite	^5.23.0
vue	^3.5.35
vuetify	^3.11.4
webfontloader	^1.6.28

Example: A Custom STAC Selector Widget

Below is an example of a custom Vue widget that lists items in the current STAC catalog, highlights the selected item, and allows selecting an item via a prop-configured highlight color. Note that it utilizes Vuetify components (<v-card>, <v-list>) which are globally available in eodash:

<!-- 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"
        :base-color="link.href === selectedStac?.href ? highlightColor : undefined"
      >
      </v-list-item>
    </v-list>
  </v-card>
</template>

<script setup lang="ts">
import { store } from "@eodash/eodash";
import { storeToRefs } from "pinia";

// Define props to receive properties from the dashboard configuration
defineProps({
  highlightColor: {
    type: String,
    default: "primary"
  }
});

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

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

To use this custom widget in your configuration:

// src/main.js
import { createEodash } from "@eodash/eodash";

export default createEodash({
  // ...
  template: {
    // ...
    widgets: [
      {
        id: "custom-indicators-list",
        type: "internal",
        title: "Indicators List",
        layout: { x: 0, y: 0, w: 3, h: 12 },
        widget: {
          name: "List", // Matches src/widgets/List.vue
          properties: {
            highlightColor: "secondary" // Passed as a prop to the Vue component
          }
        }
      }
    ]
  }
});