jayhamilton / ngx-dynamic-dashboard-framework

Dynamic Dashboard - This is a json driven dashboard framework that enables the creation and configuration of boards and gadgets/widgets.

NGX Dynamic Dashboard Framework

This project is based on the open source project https://github.com/catalogicsoftware/ngx-dynamic-dashboard-framework I created a few years ago.

The keys design aspects:

• JSON Driven
• Angular Dynamic Components
• Angular Dynamic Forms
• NGX Charts

Blog Post

Medium Blog Post

Examples

New Board

Add Gadget

Drag/Drop and Layout

Multiple Boards

Developers Guide To Framework Extension - Creating A Gadget

Define the Gadget Component, Service and View

• Bar Chart Component bar-chart.component.ts
• Bar Chart View bar-chart.component.html
• Bar Chart Service - you would create a service to call a REST endpoint to get data for the component

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 BarChartComponent entry.
• Add an entry for the gadget in the library model array library.json

Add the gadget entry to the gadget factory class

• Add an entry for your gadget in the gadget grid cell host class that serves as a gadget factory gadget-grid-cell-host.component.ts

Gadget Icon

• Define an image/icon for your gadget bar-chart.png

JSON Definition

 [
  {...},
  {
    "componentType": "AreaChartComponent",
    "title": "Area Chart Component Component Tool",
    "subtitle": "Area chart tool subtitle",
    "description": "Select this gadget .....",
    "icon": "../../assets/images/trend.png",
    "instanceId": -1,
    "tags": [],
    "propertyPages": [
      {
        "displayName": "Configuration",
        ...
        "properties": [
          {
            "controlType": "textbox",
            "key": "title",
            "label": "Title",
            "value": "Property Components",
            "required": true,
            "order": 1
          },
          {
            "controlType": "textbox",
            "key": "subtitle",
            "label": "Subtitle",
            "value": "Product component subtitle",
            "required": false,
            "order": 2
          }
        ]
      }
    ],
    "actions": [
      {
        "name": "add"
      }
    ]
  }
]

This project was generated with Angular CLI version 13.1.1.

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.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

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 a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

ngx-dynamic-dashboard-framework's Issues

Add a checkbox to the UI and label it show/hide statistics.

Support presenting a selected image in a large modal

Complete logic for handling property pages.

Implement logic for rendering property pages using Angular's dynamic form functionality.

Pull data for the Bar Chart using Angular's HTTPClient using a get() call.

Image Gadget - Image upload

Implement upload logic for Image gadget

Add an If condition to show hide the statistics based on the checkbox value. When true show the statistics and when false hide the statistics.

Review how the checkbox works https://material.angular.io/components/checkbox/examples

Then see if you can capture the true/false state in the bar-chart.component.ts file. You can use the console.log somewhere in the file to see if you can detect when the check box is checked and unchecked.

Support Web Pack 5 module federation to allow individual gadgets to be exposed outside the framework.

Extend framework to support microfrontend functionality.

Convert css to sass

Initial gif based documentation

Fix drag and drop when board has a column with a gadget and one without.

The column place holder that include an add gadget button impacts the drop event for a gadget. You will notice the gadget drops to the bottom of the placeholder area prior to being added.

Refactor image component into a more flexible image gallery.

Display the team average yards by adding a function to bar-chart.component.ts

Select items in both the navigation menu and layout menu relative to the initially loaded board

Programmatically select items in both the navigation menu and layout menu relative to the initially loaded board.

Dashboard layout change feature

Re-implement board layout change functionality

merge

Move the variable initializations into the class constructor

Sort the data from the highest to the lowest yards.

Review the following tutorial:

https://www.javascripttutorial.net/array/javascript-sort-an-array-of-objects/

Create string variables in the bar-chart.component.ts to replace the "hard coded strings" found in the bar-chart.component.html files.

Within the bar-chart.component.html page change lines 17, 18 and 19 with variables. You will define the variables within the bar-chart.component.ts file starting on line 13. These will be string variables and will reflect the type of information displayed in the bar chart.

See: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/declare-string-variables

Update the barcode component.ts file to update the example data with 5 entries for football players total game yardage.

Change the sample data to reflect football players total yardage. Save the file and then perform the git commit action. Then perform the git push operation to push the changes to github.

Add a function to return the array of players.

The array of players is currently initialized in the constructor. Change this behavior to have the footballStats variable get set by a function called setFootballStats(). In that function, return the footballStats array. We will then further refine this to have the data come from a REST API.

Control image component layout (column quantity) with a property page property.

Re-introduce the D3 based NGX Chart Gadgets

As a user of the bar chart I would like to have 5 additional players added to the default data

Switch to the main branch. You are currently on a forked repository. From the main branch, pull the changes you pushed so that you have them locally. When you switch to the main branch, you should see a blue icon with a down arrow indicating 1 change was pushed. You now need to pull it to your local machine.

Update the barcode.component.ts file and the array data structure called sales_data. Change the name of the array data structure from sales_data to football_stats. Then update the default data to include 5 additional JSON objects for football players total game yardage. Save these changes, and commit them. You will need to create a new fork branch again and push it. Then create a pull request for me to review the changes. I will then merge them into the remote main branch.

Add another statistic called 3 sigma. This is simply a value that represents 3 times the standard deviation.

The value should appear beneath the standard deviation in the bar graph. To accomplish this you will build on the work that you have already performed. You will create the following:

1. variable called threeSigma
2. variable for the label
3. create a function that returns 3 times the standard deviation
4. display that value along with the others in the bar chart

Calculate and display the standard deviation within the chart.

Implement animation logic in all components to animate the showing and hiding of gadgets and boards.

Implement backend microservice with configuration management REST API.

Change the hard coded labels for Variance, Standard Deviation and Average to variables.

Add comments to the functions for average, variance and standard deviation.

Add another property to the array called age. For each object in the array add the athletes' age. Then add the average age also to the list of statistics that show in the bar chart.

Refactor the Variance function to simplify the code.

Reflect the selected board's layout in the right layout slide out view

When the board layout menu receives a selection, the board's layout is updated. This issue is about setting the active css style of the layout menu item to reflect the layout of the board that is selected. Currently no menu layout item is selected.

Add comments in bar-chart.component.ts to describe the variable footballstats

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/comment-your-javascript-code

Calculate and display the variance within the chart