.Stat Suite documentation

.Stat DE customisation

Table of Content

intro

This page is a guide on how to customise and interact with some of the .Stat Data Explorer look and feel and layout features.

These customisations can be performed by Administrators with access to the .Stat DE installation files, but they should all be driven by business decisions.


Main Theme

It is possible to change the default layout theme of the application, including four properties. You can add new entries in dotstatsuite/data/<env>/configs/<tenant>/data-explorer/setting.json and it will replace the default customisation. The default theme is applied if there is no theme added to the settings.json file.

  • “theme”:“layout” corresponds to the homepage background color and default font
  • “theme”:“searchHeader” corresponds to colored header banner of the search and visualisation pages
  • “theme”:“splash” corresponds to the text color under the homepage splash logo
  • “theme”:“searchDataflow” corresponds to the text color of Dataflow titles in the list of the search result page
    "theme":  {
        "layout": {
            "fontFamily": "Arial, 'sans-serif'",
            "background": "#c5e0dc"
        },
        "searchHeader": {
            "background": "#c5e0dc"
        },
        "splash": {
            "color": "black"
        },
        "searchDataflow": {
            "colorTitle": "#0088cc !important"
        }
      }

Define your website name and logo.

  • in dotstatsuite/data/<env>/configs/<tenant>/data-explorer/setting.json
    "app": {
          "title": "OECD Data Explorer",
          "favicon": "/assets/siscc/data-explorer/images/favicon.ico"
    }

Site title and logo


Homepage background image

Prerequisite: you need basic HTML and CSS knowledge before going further.

Go to your Data Explorer homepage > right-click and select Inspect (Ctrl+Shift+I).

Find and copy from the Elements the name of the class corresponding to the background body.

DE Inspect

Go to dotstatsuite/data/<env>/configs/assets/<tenant>/data-explorer/styles/styles.css.

Add a new entry in the file in order to overide the default background. Paste the copied class and add the url of a publicly available image, or the path of an image stored in /assets/<tenant>/data-explorer/images:

.css-xn1wur {
 background-image: url('https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832_3082832_1280.jpg');
 }

DE new background

Notes:

  • The class name is likely to change from time to time in the source code, depending on the version of the Data Explorer components, and you will thus need to update your configuration accordingly.
  • Some additional CSS properties can be required in order to correctly display the background in a responsive and adaptive mode depending on the original size of your image.

Common site logos

Define the common logos in the header, subheader, footer and homepage of the website.

  • in dotstatsuite/data/<env>/configs/<tenant>/data-explorer/setting.json
    "assets": {
        "header": "/assets/siscc/data-explorer/images/sis-cc-logo.png",
        "subheader": "/assets/siscc/data-explorer/images/dotstat-data-explorer-logo.png",
        "footer": "/assets/siscc/data-explorer/images/sis-cc-icon.png",
        "splash": "/assets/siscc/data-explorer/images/dotstat-data-explorer-logo.png"
    }
  • header: Site logo header

  • subheader: Site logo subheader

  • footer: Site logo footer

  • splash: Site logo splash


Define the logo of the organisation in the footer of the table and chart views. The source can be a binary image or a link.

  • in dotstatsuite/data/<env>/configs/<tenant>/data-explorer/setting.json
    "viewer": {
        "logo": "dotstat-suite-config/data/prod/assets/oecd-logo.png",
    }

viewer footer logo


Define the name and hyperlink in the footer of the table and chart views behind the “c” copyright icon.

  • in dotstatsuite/data/<env>/configs/<tenant>/data-explorer/setting.json
    "viewer": {
        "terms": {
            "label": "Terms & Conditions",
            "link": "http://www.oecd.org/termsandconditions/",
    }
    }

Terms and Conditions


Define the hyperlink for the API documentation.

  • in dotstatsuite/data/<env>/configs/<tenant>/data-explorer/setting.json
    "viewer": {
        "api": {
            "doc": "https://data.oecd.org/api/sdmx-json-documentation/",
    }
    }

API documentation


Define the hyperlink for the “Contact us” feature.

  • in dotstatsuite/data/<env>/configs/<tenant>/data-explorer/setting.json
    "viewer": {
        "api": {
            "contact": "https://stats.oecd.org/FAQAndContact.aspx",
    }
    }

Contact us


Map Chart Configuration

Displaying data in a geographical map representation in the Data Explorer visualisation pages, will rely on the providing of one or several maps (regarding the needs) to the application.

Prerequisites It is first required to produce these maps as topojson files. To learn more about topojson format, you can read: https://github.com/topojson/topojson-specification/blob/master/README.md You can also learn more about topojson files generation from here. From here and further in the configuration, it is assumed that one can produce topojson files for his needs.

First steps Starting with the specifications of the topojson file format. Following is provided a ‘world_map.json’ file as example. As topojson standard specifes, areas are defined in objects entry. Since the SDMX dimension representing the Reference Areas may be a hierarchical one, it is possible for the Data Explorer to have several maps choice corresponding to the different hierarchy levels, for only one topojson file. All you need is regrouping your areas definition into several entries inside your objects entry. So for instance, for 2 levels of a hierarchy, e.g. continents and countries, the following 2 entries are defined in the world_map.json file as objects:

{
    "objects": {
        "continents": {
            "type": 'GeometryCollection',
            "geometries": [(...)]
        },
        "countries": {
            "type": 'GeometryCollection',
            "geometries": [(...)]
        }
    }
}

Note: in case of a flat area dimension, there is still a need for areas to be put under a level in the file. Then each of the areas will be collected in one of the geometries arrays, as follows:

area = {
    "type": "",
    "arcs": [],
    "properties": { "id": SDMX_AREA_ID }
}

In the above example, type and arcs are pure topojson generated entries and serving the computing of the draw. The properties entry serves as the metadata entry of the area. The engine only requires an id entry (Note that any other entry will be ignored, and it is strongly suggested to not overload the file -in case of a large number of areas- for performance purpose). It is highly important that id perfectly matches the corresponding SDMX id defined in the areas codelist, for the mapping between SDMX datas and geographical data to work. Second step The topojson file needs to be added in the following path dotstatsuite/data/<env>/assets/<tenant>/data-explorer/maps/world_map.json

Third step Then it needs to be referenced in Data Explorer settings in dotstatsuite/data/<env>/configs/<tenant>/data-explorer/setting.json:

{
    "chart": {
        "maps": {
            "world_map": {
                "id": "world_map",
                "projection": ,
                "path": "/assets/<tenant>/data-explorer/maps/world_map.json",
                "levels": ["continents", "countries"],
                "scale": ,
            }
        }
    }
}

A very important aspect here above is about projection and scale entries. Both are linked to the api specification of the D3 library for map rendering. Detailed specifications of D3 projection mechanism are to be found here. Keep in mind that projection stands for the specific D3 projection you want to use (e.g. mercator for d3.geo.mercator).

Last step is to make sure that each area level of the map has its label properly put in the translation files. For the English example of the world map, it should look like: dotstatsuite/data/<env>/configs/<tenant>/data-explorer/i18n/en.json

{
    "chart.choropleth": "Map of {map}",
    "map.world_map.continents": "Continents",
    "map.world_map.countries": "Countries"
}

This example above will result with 2 options (in the menu of the Data Explorer chart drop-down feature) labelled in English: “Map of Continents” and “Map of Countries”.