Skip to main content
Version: 2.x

Customizing the UI

DATA VIZ provides a way to extend the UI by adding custom components. This guide will show you how to add a custom component to the UI.

Prerequisites​

  • Node.js version 20 or above (which can be checked by running node -v).

Setup​

We provide a sample template that you can use to get started. You can find the sample template in the front/custom/ui-customizer directory.

Steps​

  1. Clone the repository and navigate to the front/custom/ui-customizer directory.

  2. Copy the front/custom/ui-customizer into custom/ui-customizer in your project root directory.

cp -r front/custom/ui-customizer custom/ui-customizer
  1. Install the dependencies by running the following command:
npm install
  1. Start the development server by running the following command:
npm run watch
  1. The above command will compile the JSX files that can be accessed by the front/ui main project. You can now start the main project by running the following command:
npm run dev

Folder Structure​

The custom/ui-customizer directory contains the following files:

├── Dockerfile
├── package-lock.json
├── package.json
└── src
    ├── example-project-embedded
    │   └── index.js
    ├── images
    │   └── green_arrow_active.svg
    ├── index.js
    └── scss
        ├── _vars.scss
        ├── index.scss
        └── theme
            ├── _body.scss
            ├── _carousel.scss
            ├── _charts.scss
            ├── _colors.scss
            ├── _content.scss
            ├── _download.scss
            ├── _featured-partner.scss
            ├── _featured.scss
            ├── _filter.scss
            ├── _floating.scss
            ├── _fonts.scss
            ├── _footer.scss
            ├── _header.scss
            ├── _index.scss
            ├── _inline-list.scss
            ├── _latest-resources.scss
            ├── _map.scss
            ├── _myths.scss
            ├── _newsLetter.scss
            ├── _nodata.scss
            ├── _pagegallery.scss
            ├── _pagemodules.scss
            ├── _partners.scss
            ├── _production-overview.scss
            ├── _resources.scss
            ├── _responsive.scss
            ├── _sankey.scss
            ├── _showCase.scss
            ├── _structures.scss
            └── _tabbed.scss

Creating a Custom Component​

To create a custom component, you can follow the steps below:

  1. Create a new directory in the src directory with the name of your component.

  2. Create a new file in the directory with the name index.js that should be exported as a React component.

  3. Register the component in the src/index.js file. Example code:

src/index.js
import ExampleProjectEmbedded from './example-project-embedded';

export default {
  ExampleProjectEmbedded,
};