angular-dashboard-framework / angular-dashboard-framework Goto Github PK

GREAT framework, excellent work, much appreciated.

Currently a move between sortable lists/columns is actually a delete from one list and an add to another.
This results in the widget element/directive being re-generated as angular watch detects a change in the array.

This is is not ideal because:
a) Generally Inefficient
b) Widget visual state is lost

Being an Angular newbie, I'm not sure what the best way to handle this is.

I see a $$hashKey on the widget object, and that the object is spliced from one column to another, and I guess angular is watching and re-rendering the directive and the spliced widget's $$hashKey is no longer valid.

What can be done to support a pure move?

I inserted code to add an 'id' property to a widget instance, and 'track by definition.id' to the ng-repeat in dashboard.tpl.html. Unfortunately it didn't make a difference.

<div class="widgets" ng-repeat="definition in col.widgets track by definition.id">

In widget-content.js, the function compileWidget() is invoked every time the widget is reloaded or its configuration is changed. It seems, that in each invocation, a new child scope is created but old scopes are never destroyed.

It would be nice to install angular-dashboard-framework via bower.

http://bob.yexley.net/creating-and-maintaining-your-own-bower-package/

Under sample-01.js I try to fetch model from Rest service. But new value for $scope.model = model; inside $http.get call is not rendered by the framework.

How do you feel about using the glyphicons embedded in Bootstrap instead of importing a Font Awesome? I think this would make more sense to do this for streamlining since the library already depends on Bootstrap. There are icons that are a close match to the ones you're using currently.

Hello,

I would like to pass a scope when I register the widget. The properties accepted when I register a widget are: (title, description, config, controller, controllerAs, template, templateUrl, reload, resolve...).

I have seen that the directive creates a new and isolated scope.
If I could pass a scope as an optional property when I register the widget, and the directive creates the new scope as a child of the passed scope, I would have access to all the objects of the passed scope inside the controller passed as a property.

The ui.bootstrap.modal works in this way and it seems that is a good idea.
This is my suggestion, Is it possible to add this feature to angular-dashboard-framework?

Thanks.

by following this link
https://www.npmjs.com/package/grunt-connect-socket.io
i installed grunt.loadNpmTasks('grunt-connect-socket.io') plugin
i also make the socketio: true in gruntfile file...
now i have no idea how i use socket.io in my widget ....
i trying to make the location tracker widget in this framework but unable to use the socket.io
i will be very thankfull if you gave me any reference ,any help regarding to my problem.
thanks in advance

When the files are uglified and reved the names are appended so I guess there is some issue in cleaning the dist folder. Example output:

Running "filerev:js" (filerev) task
✔ dist/sample/js/angular.min.743f65fd.743f65fd.743f65fd.743f65fd.js changed to angular.min.743f65fd.743f65fd.743f65fd.743f65fd.743f65fd.js
✔ dist/sample/js/angular.min.743f65fd.743f65fd.743f65fd.js changed to angular.min.743f65fd.743f65fd.743f65fd.743f65fd.js
✔ dist/sample/js/angular.min.743f65fd.743f65fd.js changed to angular.min.743f65fd.743f65fd.743f65fd.js
✔ dist/sample/js/angular.min.743f65fd.js changed to angular.min.743f65fd.743f65fd.js
✔ dist/sample/js/angular.min.js changed to angular.min.743f65fd.js
✔ dist/sample/js/jquery.min.ccd0edd1.ccd0edd1.ccd0edd1.ccd0edd1.js changed to jquery.min.ccd0edd1.ccd0edd1.ccd0edd1.ccd0edd1.ccd0edd1.js
✔ dist/sample/js/jquery.min.ccd0edd1.ccd0edd1.ccd0edd1.js changed to jquery.min.ccd0edd1.ccd0edd1.ccd0edd1.ccd0edd1.js
✔ dist/sample/js/jquery.min.ccd0edd1.ccd0edd1.js changed to jquery.min.ccd0edd1.ccd0edd1.ccd0edd1.js
✔ dist/sample/js/jquery.min.ccd0edd1.js changed to jquery.min.ccd0edd1.ccd0edd1.js
✔ dist/sample/js/jquery.min.js changed to jquery.min.ccd0edd1.js
✔ dist/sample/js/jquery.ui.sortable.min.63883e5f.63883e5f.63883e5f.63883e5f.js changed to jquery.ui.sortable.min.63883e5f.63883e5f.63883e5f.63883e5f.63883e5f.js
✔ dist/sample/js/jquery.ui.sortable.min.63883e5f.63883e5f.63883e5f.js changed to jquery.ui.sortable.min.63883e5f.63883e5f.63883e5f.63883e5f.js
✔ dist/sample/js/jquery.ui.sortable.min.63883e5f.63883e5f.js changed to jquery.ui.sortable.min.63883e5f.63883e5f.63883e5f.js
✔ dist/sample/js/jquery.ui.sortable.min.63883e5f.js changed to jquery.ui.sortable.min.63883e5f.63883e5f.js
✔ dist/sample/js/jquery.ui.sortable.min.js changed to jquery.ui.sortable.min.63883e5f.js
✔ dist/sample/js/sample.min.a0608705.a0608705.a0608705.a0608705.js changed to sample.min.a0608705.a0608705.a0608705.a0608705.a0608705.js
✔ dist/sample/js/sample.min.a0608705.a0608705.a0608705.js changed to sample.min.a0608705.a0608705.a0608705.a0608705.js
✔ dist/sample/js/sample.min.a0608705.a0608705.js changed to sample.min.a0608705.a0608705.a0608705.js
✔ dist/sample/js/sample.min.a0608705.js changed to sample.min.a0608705.a0608705.js
✔ dist/sample/js/sample.min.js changed to sample.min.a0608705.js

Running "filerev:css" (filerev) task
✔ dist/sample/css/sample.min.0b3ecadf.0b3ecadf.0b3ecadf.0b3ecadf.css changed to sample.min.0b3ecadf.0b3ecadf.0b3ecadf.0b3ecadf.0b3ecadf.css
✔ dist/sample/css/sample.min.0b3ecadf.0b3ecadf.0b3ecadf.css changed to sample.min.0b3ecadf.0b3ecadf.0b3ecadf.0b3ecadf.css
✔ dist/sample/css/sample.min.0b3ecadf.0b3ecadf.css changed to sample.min.0b3ecadf.0b3ecadf.0b3ecadf.css
✔ dist/sample/css/sample.min.0b3ecadf.css changed to sample.min.0b3ecadf.0b3ecadf.css

Hi @sdorra,

I am trying to enhance edit dashboard change structure radio button with pictorial representation of layout using div. However, when I select this individual div element the layout structure changes but the selected div is not highlighted.

I found that this not happening because $scope.changeStructure function is not setting the model.structure with the selected structure name. This can be done by setting model.structure = name after line 177 in dashboard.js.

My question is can we include this change in main branch as this will help us to reflect the correct selected structure after structure change?

Thanks a lot for the help.

I am trying to update $scope.model in my controller, but those changes doesnt change widgets on dashboard.

BTW I have changing some config object in some widgets.

Is there any way of change model after rendered?

I'm creating my custom widget for retriving information from jira system. I want to set resolve property for widget edit configuration, but when I do it I get the following exception: " [$injector:unpr] Unknown provider: abcProvider <- abc"

My code widget looks like here(it's a draft version:P):

'use strict';
angular.module('sample.widgets.sprintdetails', ['adf.provider'])
  .value('sprintdetailsServiceUrl', 'jiraurl')
  .config(function (dashboardProvider) {
      dashboardProvider
        .widget('sprintdetails', {
            title: 'Sprint details',
            description: 'Displays a current sprint general information',
            templateUrl: 'widgets/sprintdetails/sprintdetails.html',
            controller: 'sprintdetailsCtrl',
            edit: {
                templateUrl: 'widgets/sprintdetails/edit.html',
                reload: false,
                controller: 'sprintdetailsEditCtrl',
                resolve: {
                    abc: function (jiraService, sprintdetailsServiceUrl) {
                        return jiraService.get(sprintdetailsServiceUrl);
                    }
                }
            }
        });
  })
  .service('jiraService', function ($q, $http) {
      return {
          get: function (url) {
              var deferred = $q.defer();
              $http.get(url)
                .success(function (data, status, headers, config) {
                    if (data) {
                        deferred.resolve(data);
                    } else {
                        deferred.reject();
                    }
                })
                .error(function (data, status, headers, config) {
                    deferred.reject();
                });
              return deferred.promise;
          }
      };
  })
  .controller('sprintdetailsCtrl', function ($scope, config) {      
  })
  .controller('sprintdetailsEditCtrl', function ($scope, abc) {
      $scope.abc = abc;
  });

The demo has been updated with 2 dashboards which is very good. Can a feature to add dashboard from the UI be added. I think it will add great value to this dashboard framework.

I'm trying to create the following layout in ADF

Is this at all achievable? I'm thinking it might only be possible with two dashboards on the page, one handling the left half and the other handling the right.

I suggest you remove remove ui-sortable from you distribution js. owing to it's dependency, you better put it into bower dependency, i found your ui-sortable scripts it quit old and have some bug that has been already fixed in ui-sortable

While trying to add a new widget, it was very difficult to run grunt sample after every change. Can live-reload or watch now (https://github.com/gruntjs/grunt-contrib-watch ) be added to the grunt task so that it runs all the tasks as soon as watched files change.

So it can have a server task like grunt server and it would serve the sample dashboard at http://localhost:9005 where if any watched file is changed like a js or html file the change is visible after live reload. Thanks.

I'm trying to run your code for sample and it gives me always this error.
I tried wiht and without grunt by getting cdn from all dependencies in index.html and the same occurs: erroError: $injector:modulerr Module Error.

Is it something missing?

tnks

Hello,

Some automatic tests would be nice to have :).

I am trying to use adf-widget-filter on adf-dashboard directive.
Any clue or tip to follow?

BTW I am using custom templates

Hi,

I have service which provides me adfModel data however, when I try to set this data wrapped inside $promise it doesn't work. Looks like two data binding inside adfDashboard is not working properly.

It would be great if you could provide your suggestion on how to set service returned config to adfDashboard.

Thanks.

It looks like a very good app still it lacks documentation on how to get started.

I had to read the gruntfile.js to find out there is grunt sample and grunt default task.

Please provide some better documentation with step by step method on running the app locally or hosting it. Thanks.

'class' is a a reserved keyword in JavaScript, this is causing problem in some browsers. I suggest renaming this object.

I think integrating a chart API like : https://github.com/bouil/angular-google-chart (google chart directive) would be great. The dashboard will be rich and visually appealing, its just a suggestion.

Hi
I have implemented auto refresh on a widget, which does polling to get data every 5 seconds. This widget is on dashboard "Sample 02".

Now when I change dashboard to "Sample 01", the polling is still being called every 5 seconds, as the widget in Sample 02 is not destroyed when I change to Sample 01.

How can we remove all the previous widgets when I change dashboard from Sample 02 to Sample 01?

Just curious why the controller used for edit is called twice?

e.g. put a break point somewhere in the edit controller function and you will see it is hit twice.

This is the case for the sample widgets as well.

When I click the add button for adding new widget to the dashboard a modal diaglog appears.

If you click somewhere (inside the dialog) to the left of the widget list option, the dashboard adds a new widget and throws the following error:

ReferenceError: type is not defined
at preLink (http://localhost/angular-dashboard-framework/src/scripts/widget.js:59:48)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:58:519
at H (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:49:186)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:56:103
at f (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:42:399)
at f (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:42:416)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:42:67
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:43:303
at A (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:47:46)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:186:219

Hi,

I tried to implement autosave on dashboard change but without success. I did find a way to fire an event
$rootScope.$broadcast("adfDashboardChanged", name, model)
on adding new widget:

addScope.addWidget = function(widget) {
  var w = {
    type: widget,
    config: createConfiguration(widget)
  };
  addScope.model.rows[0].columns[0].widgets.unshift(w), instance.close(), addScope.$destroy();
  $rootScope.$broadcast("adfDashboardChanged", name, model);
}

, but I cant do the same when a widget changes its location, when a widget is deleted or config of the widget is changed. Pls if it posible to raise an events on other 3 dashboard changes share with me.

Thanks in advance.

Hello, first I want to thank you for your work on this framework. It has suited all my needs so far, and I really appreciate it.

I have been working on creating dynamic new dashboards based upon data received from an API. I believe that I cannot do that because of navClass(). What I have done it replace the sample01 navclass with "dashboard" and since then it has not worked. I don't know where to look to fix the problem, and don't know what to do to solve it once I find it.

I also took out the navClass of sample02 to see if I needed it, and ever since then, sample02 has not worked either (I have been keeping sample02 as a reference point) even after I undid my changes.

I was hoping you could give me a direction or some insight as to how to solve this problem. I will keep working on it in the meantime. Thank you!

As a user, I might make mistakes and would like to be able to reset the dashboard (or just a page) to original state.

I saw the js files were all minify in the final Demo. How did you do that?

Steps:
Sample 1 has 7 widgets.
Changes its structure to 12/6-6/12 and save
Sample 2 has 3 widgets.
Change its structure to 12/6-6/12 and save.
You will see sample 2 has 10 widgets now. 7 copied from sample 1.

I am looking to have something like this-
I have a list widget with list of cities.
I have a weather widget with some default city in it (say Seattle).
Now if I select or click New York in the list widget the weather widget should update and show temperature for New York.
Is this possible to achieve? and how?

Is there any way of use custom actions (included in widget controller o service) on widget header?

Hey, I'm developing using your dashboard framework. It's pretty awesome and well structured.
But, now, I'm having this problem:
I'm creating custom widgets. I need 2 or more versions of the same "generic" widget using only the 3 files that compose a widget.
For example, the weather widget:
I would like (actually need!!) to create a widget like:

So if I click the "Weather Porto" widget it would automatically create a weather widget with the location = Porto and parameter location not-editable in the edit.html.

To test this feature I did some changes to your code (I hate the idea of rewriting your code):

• dashboard.js (in the $scope.addWidgetDialog function):

addScope.addWidget = function(widget, config){
  if(!config){
    var w = {
      type: widget,
      config: {}
    };
  } else {
    var w = {
      type: widget,
      config: config
    };
  }
}

• dashboard.js (in the link function):

$scope.config = [];
$scope.config.location = 'porto';

• widget-add.html:

<dl class="dl-horizontal">
  <dt>
    <a href="" ng-click="addWidget('weather', config)">Weather Porto</a>
  <dt>
    <dd>
      Weather no Porto!! custom!
    </dd>
  <dt ng-repeat-start="(key, widget) in widgets"><a href="" ng-click="addWidget(key)">{{widget.title}}</a>      
  </dt>
  <dd ng-repeat-end ng-if="widget.description">
    {{widget.description}}
  </dd>
</dl>

The problem is that dashboard.js does not share the scope with the wheather.js. So I injected rootScope in the weatcherService and Controller.

This is a stupid solution. Can you help me come up with something cleaner or consider this as a new feature? This is a vital requirement imposed to me. Because 3*files per any custom widget will become impossible to maintain.

Thanks in advance!!

Freeboard.io has a generic JSON widget where you can select value from a JSON. Having something like that will help this project a lot.

This project is amazing. Well planned and executed. I like it so much I plan on using it for an application I am prototyping right now.

However, for my purposes I do not want to use bootstrap modal to manage edits so abstracting this and allowing this flow to be customized would be ideal.

I have coded up an implementation in my fork I will do a pull request and perhaps we can discuss.

When using angular 1.3, the widgets do not properly read the editMode = false or true. Might be an apply issue.

Is there any way to use custom templates?

When the dashboard "change structure to 12/6-6/12" somethimes it throws an error and erase all widgets:

change structure to 12/6-6/12 angular.js:9435
Error: [ngRepeat:dupes] http://errors.angularjs.org/1.2.12/ngRepeat/dupes?p0=definition%20in%20col.widgets&p1=object%3A029
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:6:450
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:185:179
at Object.fn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:100:35)
at h.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:100:466)
at h.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:103:264)
at HTMLInputElement. (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:171:96)
at HTMLInputElement.x.event.dispatch (http://code.jquery.com/jquery-2.0.3.min.js:5:10006)
at HTMLInputElement.y.handle (http://code.jquery.com/jquery-2.0.3.min.js:5:6789) angular.js:9435
Error: [ngRepeat:dupes] http://errors.angularjs.org/1.2.12/ngRepeat/dupes?p0=definition%20in%20col.widgets&p1=object%3A03E
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:6:450
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:185:179
at Object.fn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:100:35)
at h.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:100:466)
at h.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:103:264)
at HTMLInputElement. (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js:171:96)
at HTMLInputElement.x.event.dispatch (http://code.jquery.com/jquery-2.0.3.min.js:5:10006)
at HTMLInputElement.y.handle (http://code.jquery.com/jquery-2.0.3.min.js:5:6789) angular.js:9435

This will be a good feature to have. A maximize button on the widget which will make it full screen covering other widgets, and minimize it will move it back to its original place.

After I delete all widgets, or move to one of the sides, I'm not able to add widet on the empty side of the dashboard.

Hello,

I'm working on a project with this framework and it's working very well for my needs, first of all. One of the complaints that I have received though was that when moving a widget, you have to drag it to just above one of the other widgets in order to move columns (or of course the top of the column if it is empty). I am trying to solve this problem but so far to no avail. I will keep working on it, but if anyone has any suggestions or wants to point me in the right direction I would love to hear it. Thanks!

Hi,

I want to have a control of which widget will be shown/listed for adding into the dashboard. Based from some data fetched from the backend trough a rest service I need to filter somehow which widgets will be visible for adding to the dashboard.
For instance all widgets will be injected …
angular.module('sample', [
'adf', 'sample.widgets.news', 'sample.widgets.randommsg',
'sample.widgets.weather', 'sample.widgets.markdown',
'sample.widgets.linklist', 'sample.widgets.github',
'LocalStorageModule', 'structures', 'sample-01', 'sample-02', 'ngRoute'
])

Based on data received from the rest service ( the logic ) I want to show let say only “news” widget and “markdown”. Is there a possibility to do that or maybe to dynamically inject widgets instead to be hardcoded like above. Any suggestions? Thanks in advance.

When I try to introduce new charts in the dashboard (highcharts) I'm using github widget/s example I can successfully show the widgets but instead of a bar or a column chart I can see spline (line) chart. Any idea why this happens? I'm using the code directly from highcharts.com, something like this:

.
.
.controller("testCtrl", ["$scope", "config", "testData",
    function($scope, config, testData) {

.
.
.
chart: {
                type: 'column'
            },
            title: {
                text: 'Monthly Average Rainfall'
            },
            subtitle: {
                text: 'Source: WorldClimate.com'
            },
            xAxis: {
                categories: [
                    'Jan',
                    'Feb',
                    'Mar',
                    'Apr',
                    'May',
                    'Jun',
                    'Jul',
                    'Aug',
                    'Sep',
                    'Oct',
                    'Nov',
                    'Dec'
                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Rainfall (mm)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: 'Tokyo',
                data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

            }, {
                name: 'New York',
                data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]

            }, {
                name: 'London',
                data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]

            }, {
                name: 'Berlin',
                data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]

            }]
        });

and instead of column chart I see line chart. Any ideas, hints why this happens? I need to solve this unitl tomorrow. Pls help.

If I change the angular 'adf-widget-content' html directive declaration from element to attribute, everything works properly on IE8. This has something to do with compiling html that has custom html tags on it.

e.g.
adf-widget-content
to
div adf-widget-content

The widgets could make a good use of an expand/collapse button on the panels headers.

The current dashboard framework is great. It would be excellent to have a config or a button to refresh each individual block/widget. In that case things like news etc can be fetched after a given amount of time rather then refreshing the page.

Hi

This is indeed a very great work. Can you please show an example of collapsible dashboard and dynamically adding dashboard? Which DB are you using for dynamic dashboard?

Hi,
I have a problem, i need to pass inside the widget data from my scope, the problem is when the widget is loaded, the directive creates a new isolated scope without the data.
How can i pass the data? (the data it's 2 objects an array).
Thanks