ONE.UP Dashboard

Table of Contents

• The Project
• How to run
• Environment Configuration
• Parameter to customize the dashboard
• Components

The Project

This Angular dashboard was developed as part of the Innovative Hochschule Potsdam - ONE.UP project.

The aim of this project was to empower scientific communication. Many scientists learn skills to communicate within their scientific community, but thereby unlearn the language and platforms to reach audiences outside their community. If scientists are willing to open their communication spheres, then finding a medium and the appropriate language should be, at best, as little effort as possible. Our approach is to scan the media landscape for the chosen research topics and prepare them for researchers in a way that they know which of their research topics are currently being discussed by society. With this knowledge, researchers can find media with specific thematic focuses and use this for targeted and appropriate science communication. The underlying assumption is that scientists might get an easier entry point for the communication about their research process or results when they know about the pervasion of their research interests in society. From the abstract for the presentation a ICDT '22

A paper about possible features for this architecture can be found at EUNIS '20.

This project is divided into two main parts: Backend and Dashboard (this repository).

The dashboard and the components it contains are written in Angular. The following components are included:

• the main component is the dashboard, which acts as a carrier for all components (src/app/dashboard)
• a line chart that shows the reach of topics (src/app/dashboard-elements/topic-reach)
• a line chart that shows the article count of topics (src/app/dashboard-elements/article-count)
• a bar chart showing the most popular topics based on the selected time period (src/app/dashboard-elements/topic-popularity)
• a two-sided bar chart showing how many net articles were written about the selected topics in the last week/month (src/app/dashboard-elements/hot-topics)
• most popular media dependent on the users' favorite tags (src/app/dashboard-elements/hot-media)
• a two-sided bar chart showing how many articles have been published in regional or national media newspaper (src/app/dashboard-elements/regional-influence)
• a help text for the components (src/app/components/info-box)
• services that, for example, connect to APIs (src/app/services)
• expanded overall to maximize the visualization (src/app/dashboard-elements-overlay)
• a selector panel to select and deselect topics (src/app/components/topic-selection-bar)

Project structure

Files in src/app are structured semantically:

• the main component is the dashboard (src/app/dashboard)
• components which are displayed as tiles in the dashboard are located in src/app/dashboard-elements
• reusable components are located in src/app/components
• services are located in src/app/services
• directives are located in src/app/directives
• interfaces are located in src/app/interfaces
• http interceptors are located in src/app/interceptors

How to run

In local environment

1. Install Angular 13 here
2. run npm install
3. Configure local settings in src/environments/environment.dev.ts
4. run ng serve --configuration development

In production settings

1. Install Angular 13 here
2. run npm install
3. Configure local settings in src/environments/environment.prod.ts
4. run ng serve --configuration production

Local documentation

1. run npm install
2. run npm run compodoc:build-and-serve

Environment Configuration

The following variables could be configured:

Parameter to customize the dashboard

Some parameters can be used to configure the data and visualization in the dashboard.

user

The ID is for viewing the dashboard data for a specific user. If the dashboard is not integrated into a system with user management, this is the only way to give users an entry point to their data view.

User 1 is always active in the backend. To get other users, you need to create them in the backend. To ensure security in the backend, there is no interface to create users via the API. Users can also be disabled in the backend. At the moment, the dashboard does not show when a user is disabled.

Default: user=1

Example:

http://localhost:4200/?user=1

cat

If you want to see the category selection always, you can activate this function.

Default: cat=false

http://localhost:4200/?cat=1

feat

Shows only a single component of the dashboard. In development settings it could be useful to see just one component. All components can be addressed by a short form of their names. The short forms of their names are:

• article: ArticleTopicCircleComponent - "Öffentliche Wahrnehmung",
• articlecount: ArticleCountComponent – "Artikelanzahl"
• hottopic: HotTopicsComponent - "Angesagte Themen im Vergleich zur Vorwoche/zum Vormonat",
• hotmedia: HotMediaComponent - "Medien-Übersicht",
• mensa: MensaComponent - "Essensplan",
• region: RegionalInfluenceComponent - "Regionale Themen",
• tdt: TdTComponent - "Tipp des Tages",
• toppop: TopicPopularityComponent - "Popularität",
• topreach: TopicReachComponent – "Themenreichweite"

Example:

http://localhost:4200/?feat=region

Components

The dashboard is divided into Components. To evaluate this dashboard every component is placed in the same order, as seen in the screenshot.

Artikelanzahl

Shown on a timescale is how many articles have been published regarding the selected topics.

Themenreichweite

Depicted on a timescale, it shows how the reach changes with regard to the selected topics.

Popularität

The range of each topic is shown here in a bar chart.

Medien-Übersicht

A quantitative overview of all media in which the topic appears. In this component there are filtering options with which you can determine the relevant topics. It is possible to view all topics or only the selected ones. If a single topic is selected, a filter option is also activated for it.

Angesagte Themen im Vergleich

This component visualizes the number of monthly/weekly changes in articles reporting on the selected topics

Regionale Themen

This component provides a comparison of whether the topics were discussed more often in regional or national media.