-
Notifications
You must be signed in to change notification settings - Fork 640
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
#1641 Add chart representations statistics sections in case/alert/obs…
…ervable pages
- Loading branch information
Showing
15 changed files
with
187 additions
and
152 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
56 changes: 56 additions & 0 deletions
56
frontend/app/scripts/components/charts/donut-chart.component.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| (function() { | ||
| 'use strict'; | ||
|
|
||
| angular.module('theHiveComponents') | ||
| .component('donutChart', { | ||
| controller: function($scope) { | ||
| var self = this; | ||
|
|
||
| this.$onInit = function() { | ||
| $scope.$watch('$cmp.data', function (data) { | ||
| self.updateChart(data); | ||
| }); | ||
| }; | ||
|
|
||
| this.updateChart = function(rawData) { | ||
| this.error = false; | ||
|
|
||
| var data = _.map(rawData, function(item) { | ||
| return [item.key, item.count]; | ||
| }); | ||
|
|
||
| this.chart = { | ||
| data: { | ||
| columns: data, | ||
| names: self.labels || undefined, | ||
| type: 'donut', | ||
| onclick: function(d) { | ||
| if(self.onItemClicked) { | ||
| self.onItemClicked({ | ||
| value: d.id | ||
| }); | ||
| } | ||
| } | ||
| }, | ||
| donut: { | ||
| label: { | ||
| show: false | ||
| } | ||
| }, | ||
| legend: { | ||
| position: 'right' | ||
| } | ||
| }; | ||
| }; | ||
| }, | ||
| controllerAs: '$cmp', | ||
| template: '<c3 chart="$cmp.chart" error="$cmp.error" height="150" hide-actions="true"></c3>', | ||
| bindings: { | ||
| data: '<', | ||
| labels: '<', | ||
| title: '@', | ||
| field: '@', | ||
| onItemClicked: '&' | ||
| } | ||
| }); | ||
| })(); |
28 changes: 28 additions & 0 deletions
28
frontend/app/scripts/components/list/stats-item.component.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| (function() { | ||
| 'use strict'; | ||
| angular.module('theHiveComponents') | ||
| .component('statsItem', { | ||
| controller: function() { | ||
| var self = this; | ||
|
|
||
| this.onClick = function(value) { | ||
| self.onItemClicked({ | ||
| field: self.field, | ||
| value: self.values ? self.values[value] : value | ||
| }); | ||
| }; | ||
| }, | ||
| controllerAs: '$cmp', | ||
| templateUrl: 'views/components/list/stats-item.component.html', | ||
| replace: true, | ||
| bindings: { | ||
| field: '@', | ||
| title: '@', | ||
| data: '<', | ||
| mode: '<', | ||
| labels: '<', | ||
| values: '<', | ||
| onItemClicked: '&' | ||
| } | ||
| }); | ||
| })(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
23 changes: 23 additions & 0 deletions
23
frontend/app/views/components/list/stats-item.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| <div class="box box-primary"> | ||
| <div class="box-header with-border"> | ||
| <h3 class="box-title">{{$cmp.title}}</h3> | ||
| <div class="box-tools pull-right"> | ||
| <div class="btn-group"> | ||
| <label class="btn btn-sm btn-default" ng-model="$cmp.mode" uib-btn-radio="'table'"><i class="fa fa-table"></i></label> | ||
| <label class="btn btn-sm btn-default" ng-model="$cmp.mode" uib-btn-radio="'chart'"><i class="fa fa-pie-chart"></i></label> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="box-body"> | ||
| <table ng-if="$cmp.mode === 'table'" class="table table-condensed"> | ||
| <tr ng-repeat="item in $cmp.data"> | ||
| <td class="active">{{$cmp.labels[item.key] || item.key}}</td> | ||
| <td> | ||
| <a href ng-click="$cmp.onClick(item.key)">{{item.count}}</a> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
| <donut-Chart ng-if="$cmp.mode === 'chart'" labels="$cmp.labels" data="$cmp.data" title="Cases by Status" | ||
| on-item-clicked="$cmp.onClick(value)"></donut-chart> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,52 +1,23 @@ | ||
| <div class="row" ng-controller="AlertStatsCtrl as statsCtrl"> | ||
| <div class="col-md-12"> | ||
| <h4>Statistics</h4> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <div class="panel panel-default"> | ||
| <div class="panel-heading">Alerts by Status</div> | ||
| <div class="panel-body"> | ||
| <table class="table table-condensed"> | ||
| <tr ng-repeat="item in statsCtrl.byStatus.details"> | ||
| <td class="active">{{item.key === 'true' ? 'Read' : 'Unread'}}</td> | ||
| <td> | ||
| <a href ng-click="$vm.addFilterValue('read', item.key === 'true')">{{item.count}}</a> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
| </div> | ||
| <div class="stats-item-wrapper"> | ||
| <stats-item title="Alerts by Status" mode="'chart'" field="read" data="statsCtrl.byStatus.details" labels="statsCtrl.readAlerts" values="statsCtrl.readValues" on-item-clicked="$vm.addFilterValue(field, value)"> | ||
| </stats-item> | ||
|
|
||
| </div> | ||
| </div> | ||
|
|
||
| <div class="col-md-4"> | ||
| <div class="panel panel-default"> | ||
| <div class="panel-heading">Top 5 Types</div> | ||
| <div class="panel-body"> | ||
| <table class="table table-condensed"> | ||
| <tr ng-repeat="item in statsCtrl.byType.details"> | ||
| <td class="active">{{item.key}}</td> | ||
| <td> | ||
| <a href ng-click="$vm.addFilterValue('type', item.key)">{{item.count}}</a> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
| </div> | ||
| <div class="stats-item-wrapper"> | ||
| <stats-item title="Top 5 Types" mode="'chart'" field="type" data="statsCtrl.byType.details" on-item-clicked="$vm.addFilterValue(field, value)"> | ||
| </stats-item> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="col-md-4"> | ||
| <div class="panel panel-default"> | ||
| <div class="panel-heading">Top 5 tags</div> | ||
| <div class="panel-body"> | ||
| <table class="table table-condensed"> | ||
| <tr ng-repeat="item in statsCtrl.byTags.details"> | ||
| <td class="active">{{item.key}}</td> | ||
| <td> | ||
| <a href ng-click="$vm.addFilterValue('tags', item.key)">{{item.count}}</a> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
| </div> | ||
| <div class="stats-item-wrapper"> | ||
| <stats-item title="Top 5 tags" mode="'chart'" field="tags" data="statsCtrl.byTags.details" on-item-clicked="$vm.addFilterValue(field, value)"> | ||
| </stats-item> | ||
| </div> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.