Settings

Overview

The settings section controls global app behavior including project branding, localization, SEO metadata, visualizations, filters, and display modes.

import type { Config } from "@envisioning/app";

const settings: Config["settings"] = {
  projectMainLabel: "My Project",
  projectExtraLabel: "Subtitle",
  locales: ["en", "pt"],
  seo: { /* SEO configuration */ },
  visualization: [ /* Radar config */ ],
  filters: [ /* Filter definitions */ ],
  displayModes: [ /* Display mode options */ ],
  headerSettings: [ /* Header dropdown settings */ ],
  assistant: { /* AI assistant config */ },
};

Properties Reference

Property	Type	Required	Description
`projectMainLabel`	`string`	Yes	Main project title displayed in the header
`projectExtraLabel`	`string`	No	Optional secondary label/subtitle
`titleVariant`	`"default" \| "labelTop" \| "labelBottom"`	No	Header title layout variant
`locales`	`string[]`	Yes	Supported languages (first is default)
`seo`	`object`	Yes	SEO metadata configuration
`visualization`	`array`	Yes	Visualization configurations
`filters`	`array`	Yes	Filter definitions for the sidebar
`displayModes`	`array`	No	Display mode options (list, cards)
`headerSettings`	`array`	No	Header dropdown settings
`assistant`	`object`	No	AI assistant configuration

Project Labels

const settings: Config["settings"] = {
  projectMainLabel: "IEEE",
  projectExtraLabel: "Technology for a Sustainable Climate",
  titleVariant: "labelBottom",
  // ...
};

Title Variants:

"default" - Standard layout
"labelTop" - Extra label appears above main label
"labelBottom" - Extra label appears below main label

Locales

Define supported languages. The first locale is the default:

const settings: Config["settings"] = {
  locales: ["en", "pt", "es"],
  // ...
};

SEO Configuration

Configure default SEO metadata for the app:

const settings: Config["settings"] = {
  seo: {
    title: "IEEE Technology Assessment Tool",
    description: "Compare energy technologies across different countries.",
    image: "/og-image.png", // Optional Open Graph image
  },
  // ...
};

Property	Type	Description
`title`	`string?`	Default SEO title. Falls back to `projectMainLabel`
`description`	`string?`	Default SEO description
`image`	`string?`	Open Graph image URL

Display Modes

Configure how lists can be displayed (list view vs card view):

const settings: Config["settings"] = {
  displayModes: [
    {
      id: "list",
      label: { en: "List", pt: "Lista" },
      icon: "listEv",
    },
    {
      id: "cards",
      label: { en: "Cards", pt: "Cartoes" },
      icon: "layoutGrid",
    },
  ],
  // ...
};

Property	Type	Description
`id`	`string`	Unique identifier (`"list"` or `"cards"`)
`label`	`I18n`	Display label
`icon`	`IconName`	Icon to display in the toggle

Header Settings

Configure dropdown settings in the header (theme, language, fullscreen):

const settings: Config["settings"] = {
  headerSettings: [
    {
      type: "singleSelect", 
      label: { en: "THEME" },
      settingType: "theme",
      options: [
        { label: { en: "Light" }, value: "light" },
        { label: { en: "Dark" }, value: "dark" },
      ],
    },
    {
      type: "singleSelect", 
      label: { en: "LANGUAGE" },
      settingType: "language",
      options: [
        { label: { en: "English" }, value: "en" },
        { label: { en: "Portuguese" }, value: "pt" },
      ],
    },
    {
      type: "multiSelect", 
      label: { en: "" },
      settingType: "fullscreen",
      options: [
        { label: { en: "Fullscreen" }, value: "fullscreen" },
      ],
    },
  ],
  // ...
};

Property	Type	Description
`type`	`"singleSelect" \| "multiSelect" \| "buttons"`	Selection type
`label`	`I18n?`	Section label
`settingType`	`"language" \| "theme" \| "fullscreen"`	Type of setting
`options`	`array?`	Available options

AI Assistant

Configure the AI assistant panel:

const settings: Config["settings"] = {
  assistant: {
    enabled: true,
    intro: "Welcome to the AI assistant. Ask a question or choose a suggested prompt below.",
    suggestionsPath: "data.allAssistantSuggestions",
    suggestionEntryPath: "prompt",
  },
  // ...
};

Property	Type	Description
`enabled`	`boolean`	Enable/disable the assistant
`intro`	`string?`	Introduction text shown in the panel
`suggestionsPath`	`string`	Path to suggestions array in data
`suggestionEntryPath`	`string?`	Path to prompt text when suggestions are objects

Complete Example

import type { Config } from "@envisioning/app";
import { Radar } from "./radar";

export const settings: Config["settings"] = {
  titleVariant: "labelBottom",
  projectMainLabel: "IEEE",
  projectExtraLabel: "Technology for a Sustainable Climate",
  locales: ["en"],

  seo: {
    title: "IEEE Technology Assessment Tool",
    description: "Compare energy technologies across different countries.",
  },

  assistant: {
    enabled: true,
    intro: "Welcome to the Radar AI assistant.",
    suggestionsPath: "data.allAssistantSuggestions",
    suggestionEntryPath: "prompt",
  },

  visualization: [Radar],

  filters: [
    {
      label: { en: "Metrics" },
      type: "RANGE",
      sliders: [
        { joinKey: "trl", resultLabel: "{block.currentValue} - {block.label}" },
        { joinKey: "cost", resultLabel: "{block.currentValue} - {block.label}" },
      ],
    },
    {
      label: { en: "Collection" },
      type: "SELECTION",
      joinKey: "collection",
    },
  ],

  displayModes: [
    { id: "list", label: { en: "List" }, icon: "listEv" },
    { id: "cards", label: { en: "Cards" }, icon: "layoutGrid" },
  ],

  headerSettings: [
    {
      type: "singleSelect", 
      label: { en: "THEME" },
      settingType: "theme",
      options: [
        { label: { en: "Light" }, value: "light" },
        { label: { en: "Dark" }, value: "dark" },
      ],
    },
  ],
};

Settings

On this page