TEDective UI

Interactive visualization tool for exploring graph data from the TEDective API.

This project houses the TypeScript code that powers the TEDective UI, an interactive visualization tool for exploring graph data fetched from the TEDective API. The UI leverages the capabilities of various libraries to create a compelling user experience. Part of TEDective Project.

This project is implemented using Next.js, react-force-graph, d3-force, Leva GUI, Chart.js, and Leaflet.

Table of Contents

• TEDective UI
  • Table of Contents
  • Features
  • Background
  • Getting Started
    • Installation
    • Install with Docker
    • Environment configuration
    • Component configuration
    • Component Overview
  • Usage
  • Maintainers
  • Contributing
  • License

Features

The TEDective UI boasts the following features:

• Fetches graph data from the TEDective API
• Displays an interactive 2D force graph using react-force-graph and d3-force
• Utilizes Next.js for server-side rendering and enhanced performance
• Integrates Leva GUI for a user-friendly graphical user interface to tweak parameters
• Incorporates Chart.js for generating data-driven charts
• Includes Leaflet for interactive maps
• Is guided by a Intro.js tour
• Test-driven by Jest.js

Background

The TEDective project aims to make European public procurement data from Tenders Electronic Daily (TED) explorable for non-experts. This repository contains the TypeScript code powering the TEDective UI.

Part of TEDective Project

Getting Started

Installation

To get started with the TEDective UI locally, follow these steps:

1. Clone this repository
2. Navigate to the project directory
3. Install the dependencies: pnpm install
4. Start the development server: pnpm run dev
5. Access the UI in your browser at http://localhost:3000

Install with Docker

To run the TEDective UI using Docker, use the following commands:

1. Build the Docker image: docker build -t tedective-ui .
2. Run the Docker container: docker run -p 3000:3000 tedective-ui

For detailed installation instructions please refer to the TEDective documentation.

Environment configuration

The .env file is commonly used to store environment variables for your application. Environment variables are key-value pairs that configure how your application behaves in different environments. You will find this file in the root directory of the project.

Usage

You can find more information in the user documentation.

Maintainers

@linus @siemer

Contributing

PRs are accepted and very much welcomed.

Small note: If editing the README, please conform to the standard-readme specification.

License

The TEDective UI is open-source and released under the AGPL-3.0-or-later license, © 2023 Free Software Foundation Europe e.V.