add chart selector for dataviz

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})

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

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;
+}