All Projects → catalogicsoftware → Ngx Dynamic Dashboard Framework

catalogicsoftware / Ngx Dynamic Dashboard Framework

Licence: mit
This is a JSON driven angular x based dashboard framework that is inspired by JIRA's dashboard implementation and https://github.com/raulgomis/angular-dashboard-framework

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Ngx Dynamic Dashboard Framework

Just Dashboard
📊 📋 Dashboards using YAML or JSON files
Stars: ✭ 1,511 (+844.38%)
Mutual labels:  json, dashboard, d3
Mozaik
Mozaïk is a tool based on nodejs / react / redux / nivo / d3 to easily craft beautiful dashboards
Stars: ✭ 3,546 (+2116.25%)
Mutual labels:  metrics, dashboard, d3
Foobugs Dashboard
various dashing dashboard jobs
Stars: ✭ 64 (-60%)
Mutual labels:  metrics, widget, dashboard
Grafana
The open and composable observability and data visualization platform. Visualize metrics, logs, and traces from multiple sources like Prometheus, Loki, Elasticsearch, InfluxDB, Postgres and many more.
Stars: ✭ 45,930 (+28606.25%)
Mutual labels:  metrics, dashboard
Dashboards
Drag & drop dashboard builder!
Stars: ✭ 97 (-39.37%)
Mutual labels:  drag-and-drop, dashboard
Kirby Matomo
Matomo integration for Kirby, in both your panel and templates. Kirby 3 only.
Stars: ✭ 103 (-35.62%)
Mutual labels:  metrics, dashboard
Tessera
A dashboard front-end for graphite.
Stars: ✭ 1,202 (+651.25%)
Mutual labels:  metrics, dashboard
Phoenix live dashboard
Realtime dashboard with metrics, request logging, plus storage, OS and VM insights
Stars: ✭ 1,657 (+935.63%)
Mutual labels:  metrics, dashboard
Vue Crypto Dashboard
Cryptocurrency Dashboard made with Vue
Stars: ✭ 107 (-33.12%)
Mutual labels:  websocket, dashboard
Qqlight Websocket
QQLight机器人WebSocket-RPC插件,让你能够使用任何语言编写QQ机器人程序
Stars: ✭ 118 (-26.25%)
Mutual labels:  json, websocket
Jstp
Fast RPC for browser and Node.js based on TCP, WebSocket, and MDSF
Stars: ✭ 132 (-17.5%)
Mutual labels:  json, websocket
Amon
Amon is a modern server monitoring platform.
Stars: ✭ 1,331 (+731.88%)
Mutual labels:  metrics, dashboard
Iconshowcase
Full-of-features, easy-to-customize, free and open source, Material Design dashboard for icon packs.
Stars: ✭ 91 (-43.12%)
Mutual labels:  widget, dashboard
Dazzle
🚀 Dashboards made easy in React JS.
Stars: ✭ 1,424 (+790%)
Mutual labels:  drag-and-drop, dashboard
Plotly.py
The interactive graphing library for Python (includes Plotly Express) ✨
Stars: ✭ 10,701 (+6588.13%)
Mutual labels:  dashboard, d3
Django Jsoneditor
Django JSONEditor input widget to provide javascript online JSON Editor
Stars: ✭ 124 (-22.5%)
Mutual labels:  json, widget
Httpexpect
End-to-end HTTP and REST API testing for Go.
Stars: ✭ 1,821 (+1038.13%)
Mutual labels:  json, websocket
Bricks
A standard library for microservices.
Stars: ✭ 142 (-11.25%)
Mutual labels:  json, metrics
Ejdb
🏂 EJDB 2.0 — Embeddable JSON Database engine C library. Simple XPath like query language (JQL). Websockets / Android / iOS / React Native / Flutter / Java / Dart / Node.js bindings. Docker image.
Stars: ✭ 1,187 (+641.88%)
Mutual labels:  json, websocket
Scattertext
Beautiful visualizations of how language differs among document types.
Stars: ✭ 1,722 (+976.25%)
Mutual labels:  natural-language-processing, d3

NGX Dynamic Dashboard Framework

Natural Language Processing (NLP) integration

Image of Main Screen

Sample Board 1

Image of Main Screen

Add Board and Gadget

Image of Add Gadget To Screen

Layout

Image Layout

Example JSON document

The following JSON document describes a single board along with its layout, gadgets and their properites.

{
  "board": [
    {
      "title": "Board Sample 1",
      "structure": "3-6-3",
      "id": 9,
      "boardInstanceId": 1,
      "rows": [
        {
          "columns": [
            {
              "styleClass": "three wide",
              "gadgets": [
                {
                  "componentType": "NewsGadgetComponent",
                  "name": "News",
                  "description": "What's new",
                  "icon": "images/news.png",
                  "instanceId": 1500253814523,
                  "tags": [
                    {
                      "facet": "Informational",
                      "name": "news"
                    },
                    {
                      "facet": "List",
                      "name": "news"
                    }
                  ],
                  "config": {
                    "propertyPages": [
                      {
                        "displayName": "Run",
                        "groupId": "run",
                        "position": 10,
                        "properties": [
                          {
                            "value": "news",
                            "key": "endpoint",
                            "label": "News URL",
                            "required": false,
                            "order": 3,
                            "controlType": "dynamicdropdown"
                          },
                          {
                            "value": "News",
                            "key": "title",
                            "label": "Title",
                            "required": false,
                            "order": 1,
                            "controlType": "textbox"
                          },
                          {
                            "value": 2,
                            "key": "instanceId",
                            "required": false,
                            "order": -1,
                            "controlType": "hidden"
                          }
                        ]
                      }
                    ]
                  }
                }
              ]
            },
            {
              "styleClass": "six wide",
              "gadgets": [
                {
                  "componentType": "CPUGadgetComponent",
                  "name": "CPU Chart",
                  "description": "Monitors CPU utilization for application.",
                  "icon": "images/cpu.png",
                  "instanceId": 1499912922910,
                  "tags": [
                    {
                      "facet": "Performance",
                      "name": "real-time"
                    },
                    {
                      "facet": "Chart",
                      "name": "bar"
                    }
                  ],
                  "config": {
                    "propertyPages": [
                      {
                        "displayName": "Run",
                        "groupId": "run",
                        "position": 10,
                        "properties": [
                          {
                            "value": "CPU Utilization",
                            "key": "title",
                            "label": "Title",
                            "required": false,
                            "order": 1,
                            "controlType": "textbox"
                          },
                          {
                            "value": "Carlosappliance - Process Monitor",
                            "key": "endpoint",
                            "label": "API Endpoints",
                            "required": false,
                            "order": 3,
                            "controlType": "dynamicdropdown"
                          },
                          {
                            "value": 999,
                            "key": "instanceId",
                            "required": false,
                            "order": -1,
                            "controlType": "hidden"
                          }
                        ]
                      },
                      {
                        "displayName": "Chart",
                        "groupId": "chart",
                        "position": 11,
                        "properties": [
                          {
                            "value": true,
                            "key": "chart_properties",
                            "label": "Show chart details",
                            "required": false,
                            "order": 3,
                            "controlType": "checkbox"
                          }
                        ]
                      }
                    ]
                  }
                },
                {
                  "componentType": "TrendGadgetComponent",
                  "name": "Trend",
                  "description": "General trends.",
                  "icon": "images/trend.png",
                  "instanceId": 1499912901569,
                  "tags": [
                    {
                      "facet": "Performance",
                      "name": "trend"
                    },
                    {
                      "facet": "Chart",
                      "name": "area"
                    }
                  ],
                  "config": {
                    "propertyPages": [
                      {
                        "displayName": "Run",
                        "groupId": "run",
                        "position": 10,
                        "properties": [
                          {
                            "value": "Devappliance",
                            "key": "endpoint",
                            "label": "API Endpoints",
                            "required": false,
                            "order": 2,
                            "controlType": "dynamicdropdown"
                          },
                          {
                            "value": "Trend",
                            "key": "title",
                            "label": "Title",
                            "required": false,
                            "order": 1,
                            "controlType": "textbox"
                          },
                          {
                            "value": 2,
                            "key": "instanceId",
                            "required": false,
                            "order": -1,
                            "controlType": "hidden"
                          }
                        ]
                      },
                      {
                        "displayName": "Chart",
                        "groupId": "chart",
                        "position": 11,
                        "properties": [
                          {
                            "value": true,
                            "key": "chart_properties",
                            "label": "Show chart details",
                            "required": false,
                            "order": 3,
                            "controlType": "checkbox"
                          }
                        ]
                      }
                    ]
                  }
                }
              ]
            },
            {
              "styleClass": "three wide",
              "gadgets": []
            }
          ]
        }
      ]
    }
  ]
}

Alert/Notification

Image Notification

Sample Realtime Web Socket Based Gadget

Image of Add Gadget To Screen

Sample Board 2

Image of Main Screen

Drag and Drop

Image of Add Board To Screen

Facet Filter

Image of Filter Board To Screen

Note: This project is under heavy construction and is not intended for general production use yet. As such, we are not accepting bugs at the moment and documentation is quite lacking.

This is an angular (ngx) based dashboard framework that is inspired by JIRA's dashboard implementation and https://github.com/angular-dashboard-framework/angular-dashboard-framework

The primary projects leveraged:

  • Angular - https://angularjs.org/
  • ngx-charts (angular based d3 charts) - https://github.com/swimlane/ngx-charts
  • Semantic-UI - https://semantic-ui.com/
  • ng2-dnd drag and drop - https://github.com/akserg/ng2-dnd
  • AI Natural Language Processing - The board includes two options for AI, Wit.Ai and IBM Watson.
  • Wit.ai - Natural Language Processing site has been integrated via JSONP
  • IBM Watson - IBM Watson does not support JSONP so the code relies on a backend implementation of the IBM Watson SDK. I offer sample backend code based on Spring Boot within the comments of the Runtime Service

Features:

  • Leverages Angular's dynamic data driven forms approach for gadget property pages and properties - https://angular.io/guide/dynamic-form
  • Dynamic component strategy for creating gadget instances during runtime - https://angular.io/guide/dynamic-component-loader
  • Faceted gadget search approach leveraging tags
  • Support multiple board creation
  • Drag and Drop support
  • Multiple Data Source/Endpoint management
  • Web Socket support
  • Completely customizable and configurable

Getting Started Developing a Gadget

The code includes a very simple Todo gadget that can be used as an example for getting started developing your own gadget. The following steps uses that Todo Gadget as a reference. You focus on defining the gadget and the rest of the framework will deal with making it available to the Add Gadget Modal, drag and drop, instance creation, tracking, persistence and cleanup, etc.

Define the Gadget Component, Service and View

Define the gadget's model

The model is used to dynamically create and render the gadget and its property page forms. This model is an entry into a model array used for all gadgets. You will simply add an entry to the model's array. See the Todo entry. Add an entry for the gadget in the library model array gadget-library-model.json

Add the gadget entry to the gadget factory class

Add an entry for your gadget in the factory gadget class gadget-factory.ts

Gadget Icon

Define an image/icon for your gadget todo.png

Gadget Module References

Todo Gadget

NgADF

This project was generated with Angular CLI version 7.x.

Setup

Clone this repository then run npm install

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --aot --prod flag for ahead of time compilation and production mode.

The title of that issue suggests an issue with AOT but in my testing --prod seems to be the problem.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor. Before running the tests make sure you are serving the app via ng serve.

Source Code Documentation

This project uses the compodoc project : https://github.com/compodoc/compodoc

Run npm install -g @compodoc/compodoc to install compodoc globally Run compodoc -p tsconfig.json -n 'NGX Dynamic Dashboard Framework' to generate the documentation. It will be placed in the documentation folder Run compodoc -s to serve up the documentation site at http://localhost:8080

Spring Boot Backend Project

There is an accompanying java based backend project that serves up some of the endpoints used by the board.

https://github.com/catalogicsoftware/ngx-dynamic-dashboard-framework-microservice

It is a maven based project so you will need to do the following:

  • Install and configure Maven.
  • Copy the dist directory produced from this project's build into the static folder of the microservice project.
  • Build the microservice project using <directory path to maven bin folder>/mvn install from within the project's root directory.
  • Launch the microservice over the default port: http://localhost:8080 using java -jar <path to the microservice root folder>/target/ngxdd-x.y.z.jar

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].