Equity Landscape Dashboard

Setup

To setup the dashboard, you will need two things:
- Copy the json files from Google Drive.
  - After uncompressing (unzip) the file run the below command (python version 3 is required):
    - python3 cors_http_server.py
      OR
    - python cors_http_server.py
  - This will make the files available on your localhost.
- To update the files, you can use this notebook and store the files in the respective directories under the Webfiles directory.
Initializing the dashboard.
- Clone the dashboard from GitLab (ensure you have git installed)
  - ```
  git clone git@gitlab.wikimedia.org:repos/gdi/equity-landscape/dashboard.git
```
- cd to the dashboard directory:
  - ```
  cd dashboard
```
- Run the below commands, make sure npm is installed first:
  - ```
  npm install
```
- ```
npm run dev
```
- If you see the below output, copy the link from your terminal and paste it on your browser to view the dashboard:
  - ```
    ➜  Local: http://localhost:5173/
    ➜  Network: use --host to expose
```

Code

Stores

These are responsible for storing the application state data.
- Data Store
  - Responsible for storing metric, country and world data.
    - If you want to introduce a new metric group (tab), this is where the code would go.
  - Chart Store
    - Responsible for most of the chart initialising code for the dashboard.
  - App State
    - Responsible for storing the different application state data that is shared throughout the entire dashboard application.

Components

These are the components that are used throughout the dashboard, with the Dashboard component being the central component and incorporating all the other components (except for Projects and Languages) which is defined as part of the views.

It is called with various measurementType to specify which metrics the dashboard should display.

These are defined under the data store as per the below:

export enum ObservationType {
    ENGAGEMENT_DOMAINS = 0,
    PRESENCE_AND_GROWTH = 1,
    AFFILIATES = 2
}

Each observation type has a list of metrics that it encompasses.

Currently we have the below observations:

const observations: ObservationType = {
  "engagement_domains": [
    "overall_engagement",
    "readership",
    "editorship",
    "grants_leadership",
    "affiliates_leadership",
    "population",
    "population_underrepresentation",
    "programs_leadership",
    "overall_enablement",
    "access",
    "freedom"
  ],
  "presence_and_growth": [
    "reader_presence",
    "reader_growth",
    "editor_presence",
    "editor_growth",
    "grants_presence",
    "grants_growth",
    "affiliate_presence",
    "affiliate_growth",
    "access_presence",
    "access_growth",
    "freedom_presence",
    "freedom_growth"
  ],
  "affiliates": [
    "affiliate_size_max",
    "count_operating_affiliates",
    "affiliate_tenure_max"
  ]
};

Each of the observations correspond to a Tab on the dashboard (minus Projects and Languages),
- If you want to add a new Observation (Tab), you would need to update both ObservationType and observations' respectfully.

Styles

Styling is done via scss.
All the styling files can be found under the scss folder.
They correspond to the component/tab that they are styling.

Charts

The charts are implemented with ECharts and Vue good table

We currently have the following charts:

World Map (ECharts)
- World Maps use two datasets for mapping the countries, one being the world_data.json and country_data.json found on our fileserver.
- These are joined together and used with each metric for the visualisations.
BarChart (Vertical/Horizontal) (ECharts)
Tree Map (ECharts)

Text Table (Vue good table)

Text Tables can be formatted using a format function, example:

function formatEndangeredData(props: any) {
  const value = props.formattedRow[props.column.field];
  const column = props.column.field;

  if (column === 'degree_of_endangerment') {
    if (value === 'Extinct') {
      return 'cell-red';
    }
    else if (value === 'Severely endangered') {
      return 'cell-orange';
    }
    else if (value === 'Critically endangered') {
      return 'cell-brown';
    }
    else if (value === 'Vulnerable') {
      return 'cell-green';
    }
    else if (value === 'Definitely endangered') {
      return 'cell-blue';
    }
    else {
      return 'cell-na';

    }
  }
  else {
    return 'cell-na';
  }

}

Format functions are useful for styling the data within the cells. This is done by defining a list of cell styles that are defined in the _chart.scss styles file.