diff --git a/app/images/circle1.png b/app/images/circle1.png new file mode 100644 index 000000000..2d5d8d956 Binary files /dev/null and b/app/images/circle1.png differ diff --git a/app/images/circle2.png b/app/images/circle2.png new file mode 100644 index 000000000..4e2b8c24f Binary files /dev/null and b/app/images/circle2.png differ diff --git a/app/images/parcoords.png b/app/images/parcoords.png new file mode 100644 index 000000000..eb546af24 Binary files /dev/null and b/app/images/parcoords.png differ diff --git a/app/images/sunburst.png b/app/images/sunburst.png new file mode 100644 index 000000000..a8b2b6d59 Binary files /dev/null and b/app/images/sunburst.png differ diff --git a/app/images/sunburst2.png b/app/images/sunburst2.png new file mode 100644 index 000000000..54bd24c1e Binary files /dev/null and b/app/images/sunburst2.png differ diff --git a/app/modules/dashboard/dataviz/index.js b/app/modules/dashboard/dataviz/index.js index d2be2fde9..f03e26e62 100644 --- a/app/modules/dashboard/dataviz/index.js +++ b/app/modules/dashboard/dataviz/index.js @@ -90,6 +90,37 @@ export default angular.module('dashboard.dataviz', [ vdisize: 'Total space' } } + $scope.availablecharts = { + sunburstram: { + name: 'Memory usage', + img: 'images/sunburst.png' + }, + sunburststorage: { + name: 'Storage', + img: 'images/sunburst2.png' + }, + circleram: { + name: 'Memory usage', + img: 'images/circle1.png' + }, + circlestorage: { + name: 'Storage', + img: 'images/circle2.png' + }, + parcoords: { + name: 'VM properties', + img: 'images/parcoords.png' + } + } + + $scope.toggle = function (id) { + $scope.availablecharts[id].selected = !$scope.availablecharts[id].selected + } + + $scope.isChartVisible = function (id) { + return !!$scope.availablecharts[id] && + !!$scope.availablecharts[id].selected + } } const debouncedPopulate = debounce(populateChartsData, 300, {leading: true, trailing: true}) diff --git a/app/modules/dashboard/dataviz/view.jade b/app/modules/dashboard/dataviz/view.jade index 5df76f400..3cef6cb37 100644 --- a/app/modules/dashboard/dataviz/view.jade +++ b/app/modules/dashboard/dataviz/view.jade @@ -1,10 +1,19 @@ + .grid-sm .panel.panel-default - p.page-title + p.page-title i.fa.fa-pie-chart | Dataviz -.grid-sm - .grid-cell + .panel-body.text-center + + .chart-selector( + ng-repeat="(id,chart) in availablecharts" + ng-click="toggle(id)",ng-class="{selected:isChartVisible(id)}") + div {{chart.name }} + img.img-thumbnail(src="{{chart.img}}") + +.grid-sm(ng-if="isChartVisible('sunburstram') || isChartVisible('sunburststorage')") + .grid-cell(ng-if="isChartVisible('sunburstram')") .panel.panel-default .panel-heading.panel-title i.xo-icon-memory @@ -17,7 +26,7 @@ click="charts.click(d)" chart-data="charts.data" ) - .grid-cell + .grid-cell(ng-if="isChartVisible('sunburststorage')") .panel.panel-default .panel-heading.panel-title i.xo-icon-sr @@ -30,8 +39,8 @@ click="charts.click(d)" chart-data="charts.data" ) -.grid-sm - .grid-cell +.grid-sm(ng-if="isChartVisible('circleram') || isChartVisible('circlestorage')") + .grid-cell(ng-if="isChartVisible('circleram')") .panel.panel-default .panel-heading.panel-title i.xo-icon-memory @@ -44,7 +53,7 @@ click="charts.click(d)" chart-data="charts.data" ) - .grid-cell + .grid-cell(ng-if="isChartVisible('circlestorage')") .panel.panel-default .panel-heading.panel-title i.xo-icon-sr @@ -57,7 +66,7 @@ click="charts.click(d)" chart-data="charts.data" ) - .grid-sm + .grid-sm(ng-if="isChartVisible('parcoords')") .grid-cell .panel.panel-default .panel-heading.panel-title diff --git a/app/styles/main.scss b/app/styles/main.scss index b2820383e..73221f35d 100644 --- a/app/styles/main.scss +++ b/app/styles/main.scss @@ -826,3 +826,39 @@ dd:hover .tag-zone .add-button { .flat-cell-tag:hover .tag-zone .add-button { display: inline; } + + +////////////////////////////////////////////////////////////////////// +// Dataviz > chart selector +////////////////////////////////////////////////////////////////////// +.chart-selector{ + position:relative; + height:120px; + display:inline-block; + margin:1em; + cursor: pointer; +} + +.chart-selector > div { + position:absolute; + top:0; + background-color: rgba(255,255,255,0.5); + border: 1px solid #ddd; + width:100% +} + +.chart-selector.selected img{ + border-width: 3px; +} +.chart-selector.selected > div{ + background-color: rgba(51,51,51,0.5); + color:white; +} +.chart-selector:hover > div{ + background-color: rgba(255,255,255,1); +} + +.chart-selector.selected:hover > div{ + background-color: rgba(51,51,51,1); + color:white; +}