jdanylko/tuxboard

An open-source dashboard library for ASP.NET

Tu><board

UPDATE: Version 1.5.1 is now available on NuGet.

Tuxboard is a dashboard library specifically for the ASP.NET Core platform. It was meant to be a Lego-style way to build dashboards.

Technology Stack

• ASP.NET Core 6.0 or higher (using C#)
• Entity Framework Core

Features

• Easily attach a dashboard to your project
• Customize dashboards for general audiences (a static dashboard), user-based dashboards, or even role-based dashboards (both dynamic dashboards).
• Extend your dashboard by building dynamic or static widgets.
• Small, compact code for performance in C# and JavaScript (native JavaScript)
• While Tuxboard uses Bootstrap, it can easily conform to any CSS Framework.

Why build a Dashboard library

In my career, I've built a number of dashboards from scratch. As with all projects, each dashboard had pluses and minuses as each project completed.

Even with existing libraries, there really wasn't anything out there for the ASP.NET platform.

So the initiative was set to write one.

The developer could start with a simple structure where ANY type of dashboard could be generated quickly and provide an easy front-end with their own custom widgets and robust layouts.

Getting Started

• Please check the Wiki for installation.
• I'm writing a collection of Tuxboard posts on DanylkoWeb.com

tuxboard's Issues

Stubs for the classes for widget based on a model

Hello, this is a fav. lib of mine, I am trying to create an auto generate function that creates the classes for the widgets and the dashboard, can you share what are the classes I should be generating.

Or would it be better to have a base class with all the classes and relationships and derive from it?

how to integrate with existing project

Hi,

Thank you for the great work. I really appreciate your efforts to create this project. I have an existing project in asp.net core and i am looking forward to integrate this dashboard with the scope of current project. Can you please provide some insight how it can be achieved.

I have tried by coping required cshtml, css and js files but on load I get following error;

Uncaught TypeError: Cannot read property 'getElementsByClassName' of null
    at getDashboardColumns (tuxboard.js?v=ccW3-dOQVW9F6TznuKPS3H3kIgCAPrmsLKpsEOnJbdw:92)
    at initDashboardDragAndDrop (tuxboard.js?v=ccW3-dOQVW9F6TznuKPS3H3kIgCAPrmsLKpsEOnJbdw:232)
    at initialize (tuxboard.js?v=ccW3-dOQVW9F6TznuKPS3H3kIgCAPrmsLKpsEOnJbdw:1168)
    at tuxboard.js?v=ccW3-dOQVW9F6TznuKPS3H3kIgCAPrmsLKpsEOnJbdw:1177
    at tuxboard.js?v=ccW3-dOQVW9F6TznuKPS3H3kIgCAPrmsLKpsEOnJbdw:1179

I guess the following code is not executing

<vc:tuxbar></vc:tuxbar>
<vc:tuxboard id="myDashboard" model="Model.Dashboard"></vc:tuxboard>

I have added tag helper in _ViewImports.cshtml

Suggestion Rename Tuxboard to something more catchy

Hello, we should consider renaming Tuxboard to something more catch.

For e.g. something like...

...Core Dynamic Dashboards

Build Error -- 'IConfiguration' does not contain a definition for 'Get' and no accessible extension method 'Get'

I was able to update to 5.0, also I had to implement the IConfiguration Interface on TuxboardConfig

Severity	Code	Description	Project	File	Line	Suppression State
Error	CS1061	'IConfiguration' does not contain a definition for 'Get' and no accessible extension method 'Get' accepting a first argument of type 'IConfiguration' could be found (are you missing a using directive or an assembly reference?)	Tuxboard.Core	F:\Tuxboard\Tuxboard.Core\Infrastructure\Services\DashboardService.cs	27	Active

Question for supporters...

Sorry for the delay in responding back to everyone, but life interrupted me, put some projects on hold, and COVID infected my entire family for 3 weeks and we're now coming out of it...slowly.

Quick architectural question...

I've been toying around with restructuring the project in a better way so users can benefit from the various components and I need your input.

As you know, Tuxboard is broken into three parts: client-side, API, and library.

Let's first address the elephant in the room: the client-side.

Since there are so many front-end frameworks available, I wouldn't be able to keep up with all of them for Tuxboard which is why I'm focusing on a plain-jane TypeScript front-end. Let users create their own front-end using their own JS framework of choice.

I did want to separate the client-side from the backend and make the backend simply Nuget-able (isn't that a song?). The problem is the backend can be broken down even further containing an API and a Service library which leads me to my question...

Would users want...

1. Tuxboard.Core as one NuGet package with a Tuxboard.Api NuGet package, or...
2. Tuxboard.Core with the library and services included so you can create your own API package?

I'm trying to find the best, most fluid approach on what makes the most sense on how users would use the library.

In the next couple of weeks, I'll be getting back to the project once things in the household get back to "normal."

Thanks,
JD

Three examples and TypeScript

Hey everyone,

What better way to start an August month but with new changes to a repository.

It has been a while (pandemics will do that), but I wanted to catch everybody up on the latest changes.

1. Last night, I merged the TypeScript into the master.

2. I've created three examples with three approaches:

• StaticDashboard - The simplest dashboard with static content for non-user dashboards (Razor Pages)
• UserSpecificDashboard - a user-specific dashboard (ASP.NET 5 MVC)
• UserDashboard - Another user-specific dashboard (ASP.NET Razor Pages w/ MS Identity).

NOTE: The examples are now using npm and the Task Runner. In Visual Studio, right-click on each packages.json to "Restore Packages" before running. I've tried to include everything in the Task Runner to make it run effortlessly.

3. In my examples, I'm using TypeScript instead of vanilla JavaScript. While I'm not the best UI designer, these examples are NOT to be packaged into this library. THEY ARE ONLY MEANT AS EXAMPLES. The star of this repository is the Tuxboard.Core and this is what will be packaged and NuGet'ed/distributed.

My plans moving forward with this repository include:

• Complete the NuGet packaging so it's automated
• Finish the Wiki documentation
• Answer any questions
• (possibly) Create a website for the library using GitHub Pages.

If you have any comments, complaints, (or stars you want to click), please let me know.

JD

Typscript cant find Bootstrap

Severity Code Description Project File Line Suppression State
Error TS2307 (TS) Cannot find module 'bootstrap' or its corresponding type declarations. Tuxboard.UI C:\Tuxboard-feature-typescript\Tuxboard.UI\wwwroot\src\Extras\Dialogs\AddWidgetDialog\AddWidgetDialog.ts 7 Active

• Are you expecting bootstrap with NPM or with Nuget, I ran npm install --save @types/bootstrap For BS 5 in the Src Folder

NuGet Packages Available

Version 1.2.0 is now available on NuGet.

I've also updated the Quick Start to create a VERY simple Dashboard from scratch (one widget, that's it!). It's similar to the Static Dashboard.

If you are looking for a more detailed example, check either the UserDashboard or the UserSpecificDashboard.

I'll be updating the wiki and provide more examples on my blog soon.

Feature: How to setup User driven options for the widget

Hello this is fantastic 🥇 its such a common need yet ASP MS team is always behind.

Is it ok if I recommend some features like widget configuration, data permissions.

We need some good examples on extending the widget to let user do business specific configuration for their views.

• Configurable User Driven Widgets/Panels/Charts
• Let the user choose, the Data Sources/Tables to those Charts
• Let the user modify Label Names, like X axis and Y Axisi
• Let the user create a formula or KPI (like a formula)

Hello, I added this as a suggestion and it was lost and slowly keeps getting lost to the bottom of the pile.

We need some good examples on creating

• Configurable User Driven Widgets/Panels/Charts
• Let the user choose, the Data Sources/Tables to those Charts
• Let the user modify Label Names, like X axis and Y Axisi
• Let the user create a formula or KPI

https://github.com/aspnetzero/aspnet-zero-core/issues/2809#issuecomment-561309329

In summary

---

Sorry about the crude drawings,

• Dashboard global settings vs instance settings e.g. only
  SquareUp sample

• Widgets Global settings configured for the tenant level vs. instance settings that are used/set by user when he is viewing
  - I was referring to the widget settings, many people will have different types of widgets they will develop, and will want to render data based on user actions like 1) which widget did he pick, 2) did he use the default setting or change the other settings.
  - For e.g. global setting are like, export to jpeg, excel, lock unlock. You can display user specific setting below the global settings

Capture user and global settings in one place on the gear icon

Also allow the widget to o be updated without refreshing entire page

---

Samples of charts on Github free eCharts

---

Setting up KPI on a widget