Dashify

Description

Dashify is a simple, fast, and powerful Angular library that allows you to easily create dashboards. It provides developers a Graphical User Interface and leverages GrapesJS to offer a powerful, easy to use, and intuitive dashboard editor. This project has been created in fulfillement of Al Akhawayn University's Capstone Design requirements.

Introduction

Dashboards enable us to break down data into more digestible and useful chunks of information, allowing organizations to determine which activities improve their key performance indicators and which do not. Managers may make better informed choices that have a significant influence on company performance as a result of a dashboard platform. However, dashboards are not a one-size-fits-all solution, and key performance indicators are inextricably linked to the nature of the business. A high-budget project is required to design a customized dashboard for any business. Dashify aims to simplify and reduce the cost of the dashboard design process by creating a What You See Is What You Get (WYSIWYG) editor in automate redundant tasks and user experience.

Features

Dashify offers the follwoing features:

1. Dashboard Manager: This Angular component allows you to create, edit, and delete dashboards. While leveraging IndexedDB, Dashify will save your dashboards to your browser's local storage. It allows for a Graphical User Interface to quickly perform CRUD operations on dashboards.
2. Wizard: This Angular component allows you to create dashboards in a simple and intuitive step-by-step way.
3. Tab Manager: This Angular component allows you to create, edit, and delete tabs. While leveraging IndexedDB, Dashify will save your tabs to your browser's local storage. It allows for a Graphical User Interface to quickly perform CRUD operations on tabs.
4. Tab Builder: This Angular component allows you to create tabs while using GrapesJS with more dashboard-specific components.

Installation

1. In order to use Dashify in your projects, run the following commands:

npm install --save ngx-dashify

2. Edit your project's angular.json file and add the following to the "options" section:

...
//code here
    "styles": [
        "src/styles.scss",
        "./node_modules/grapesjs/dist/css/grapes.min.css",
        "./node_modules/grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.css"
    ],
    "scripts": [
        "./node_modules/grapesjs/dist/grapes.min.js",
        "./node_modules/grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.js"
    ]
//code here

3. Install TailwindCSS in your project.

4. Add the following route to your project's routes:

{
    path: 'editor',
    loadChildren: () => import('ngx-dashify').then(m => m.DashManagerModule)
}

Usage

Dashify is still in development. Please check check back soon.