Branding

eodash allows you to configure your own brand. Check out the API and the guide below to learn more.

No Layout

Removing the header and footer completely by setting:

import { createEodash } from "@eodash/eodash"

export default createEodash({
    ...
    brand: {
        noLayout: true
        ...
    }
})

Dashboard Name

Set the name displayed on the Header:

import { createEodash } from "@eodash/eodash"

export default createEodash({
    ...
    brand: {
        name: "My Dashboard"
        ...
    }
})

Footer Text

Configurable text on the footer:

import { createEodash } from "@eodash/eodash"

export default createEodash({
    ...
    brand: {
        footerText: "Lorem ipsum, dolor sit amet consectetur adipisicing elit."
        ...
    }
})

Logo

Add your own brand logo to the header by referencing it using Vite's static assets handling:

import { createEodash } from "@eodash/eodash"
import myLogo from './assets/logo.png'
// or
const myLogo = new URL('./assets/logo.png',import.meta.url).href

export default createEodash({
    ...
    brand: {
        logo: myLogo
        ...
    }
})

Theme Customization

eodash components use Vuetify's theming system for color customization. You can adapt the dashboard's look and feel to align with your brand.

Theme Modification Example

import { createEodash } from "@eodash/eodash"

export default createEodash({
    ...
    brand: {
        ...
        theme: {
           colors: {
             primary: '#004170',
             secondary: '#00417044',
             surface: "#f0f0f0f0",
          },
           dark: false
        }
    }
})

The theme accepts the full Vuetify theme definition plus one eodash-specific field, collectionsPalette: an array of colors assigned to collections shown together (for example, chart series and layer accents).

theme: {
  colors: { primary: "#002742" },
  // Bang-Wong color-blind-safe palette
  collectionsPalette: [
    "#009E73",
    "#E69F00",
    "#56B4E9",
    "#F0E442",
    "#0072B2",
    "#D55E00",
    "#CC79A7",
  ],
}

Font Customization

eodash uses typekit/webfontloader to apply the specified font across the dashboard. Fonts are loaded by adding a link to the stylesheet that defines the font-face. The link can be either a relative or an absolute URL.

import { createEodash } from "@eodash/eodash"

export default createEodash({
    ...
    brand: {
        ...
        font: {
          link:'/link-to-stylesheet.css',
          family: "MyCustomFont"
        }
    }
})

To use a different font for headers and body text, pass an object with headers and body instead of a single font:

font: {
  headers: {
    family: "Open Sans",
    link: "https://example.com/fonts/opensans/opensans.css",
  },
  body: {
    family: "Sintony",
    link: "/fonts/sintony.css",
  },
}

Error Message

errorMessage sets the text shown to users when the dashboard crashes:

brand: {
  errorMessage: "Something went wrong. Please reload the page.",
}

Feedback

feedback configures the eox-feedback form. endpoint is required; schema is an optional eox-jsonform JSON Schema for the form fields.

brand: {
  feedback: {
    endpoint: "https://feedback.example.com/submit",
    schema: {
      // eox-jsonform JSON Schema
    },
  },
}