NgxModularDash

An elegant Dashboard component for Angular that can display 3 widgets at the same time on computers and 2 on smartphones using modular windows. You can include up to 8 custom widgets using multi-slot content projection. Different parameters can be set as input to customize your Dashboard (color theme, separations, margins...).

Demo

A demo is available on my website : www.lucadossantos.com.

Installation

npm install --save ngx-modular-dash

This module uses Tailwind for the styling, to make it work, you need to install and add Tailwind to your dependencies. Once Tailwind is imported to your style.css as global style, add this line (also to style.css) to inject the dependency to nxg-modular-dash module.

@source "../node_modules/ngx-modular-dash";

How to use NgxModularDash

Use 'lib-ngx-modular-dash' as any other components in your project. To add a custom widget (or embedded view) to the dashboard, you first need to provide as input (widgetIcons) a list of strings containing your icon's (svg or png) paths. It is important that the list is in the same order as the ids you are using for the widgets (see after).

Then, use content projection with an id set to "0" for the first widget, "1" for the second widget,... to integrate your widgets into the dashboard (up to 8 widgets).

e.g:

<lib-ngx-modular-dash [widgetIcons]="[path_to_widget_0_icon.svg, path_to_widget_1_icon.svg,...]">
<div id="0">Your content projected in the first widget.</div>
<div id="1">Your content projected in the second widget.</div>
<lib-ngx-modular-dash>

Customization

You can customize the Dashboard using diffent inputs:

• separations [boolean] : if there are lines that separate widgets.
• iconsLeft [boolean] : position of the icons (left : true -default, right : false).
• logo [string] : path to logo image.
• margins [number] : the margin around each widget (in pixels).
• selectWidgets [number][] : the list of widget ids that is displayed.
• maxNbrOfWidgets [number] : the max number of widgets allowes on the screen.
• maxSingleWidgetWidth [number] : the max width in pixel when a single widget is selected.
• colorTheme [string] : the color theme used. Can be either 'blue', 'pink', 'gray' or 'brown'. More to come...

e.g:

<lib-ngx-modular-dash [widgetIcons]="[path_to_widget_0_icon.svg, path_to_widget_1_icon.svg,...]" [separations]="false" [margins]="8" [selectWidgets]="[0,1]" [maxNbrOfWidgets]="2" [colorTheme]="'blue'">
<div id="0">Your content projected in the first widget.</div>
<div id="1">Your content projected in the second widget.</div>
<lib-ngx-modular-dash>