Skip to content

Architecture (Overview)

Jump to bottom
Jonathan Danylko edited this page Aug 3, 2021 · 5 revisions

Overview

NOTE: This repository focuses on the back-end library called Tuxboard.Core. While I created three examples for this repository, these are not the end-all examples. The concept of this repository is to provide an ASP.NET back-end model for dashboards.

Since I'm not a master of every single JS framework and I don't have a JS Framework preference (Angular, Vue, React, etc), YOU CAN CREATE ANY KIND OF FRONT-END YOU WANT FOR THIS LIBRARY.

As a matter of fact, I would see some developers forking this and creating their own front-ends using their favorite JavaScript frameworks.

Technology Stack

  • Back-end

    • ASP.NET 5 (using C#)
    • Entity Framework Core 5

  • Front-end (mostly for the demos)

    • Bootstrap.native 4.x (w/ NO jQuery) Bootstrap 5
    • FontAwesome 5
    • TypeScript
    • Web Essentials (for Markdown, Task Runner/Gulp integration, bundler, etc.)

Goals

Tuxboard is meant to be as compact and flexible as possible.

When initially started, the project kept three goals in mind moving forward:

  1. Easy Integration - Simple enhancement to applications
  2. Declarative first, Programmatic second - The concept of modifying Tuxboard using HTML, CSS, and JavaScript/TypeScript was more enticing than modifying code, then compiling. However, the option of writing code is available.
  3. Extensibility - Providing simple hooks at the programmatic and database level to speed up custom development requirements.

Snapshot of Dashboard components

Tuxboard Layout

  • Tuxbar (Red) - Toolbar for Tuxboard dashboards; contains Change Layout, Add Widget, and Status.
  • Dashboard (Blue) - The dashboard itself.
  • Dashboard Tab (Green) - Only one tab is supported at this time; contains one Layout.
    • Layout - Included in DashboardTab as a property
  • Layout Row (Pink) - Layout Rows define the columns used in a Dashboard Tab. You can have multiple LayoutRows in a Layout, but one Layout in a Dashboard Tab. Each LayoutRow is defined by a Layout Type.
  • Column (Black) - Contains widgets
  • Widget (Light gray) - Small boxes of information pertaining to the status or functionality of an application.
  • Widget Heading (Orange) - Used for moving widgets on the dashboard.
  • Widget Tools (Cyan) - widget-specific functions and settings.
Clone this wiki locally