Remove delta column and use stage data from response

app/assets/javascripts/cycle_analytics/cycle_analytics_service.js.es6

@@ -28,7 +28,7 @@
         startDate,
       } = options;
 
-      return $.get(`http://localhost:8000/${stage.name.toLowerCase()}.json`, {
+      return $.get(`http://localhost:8000/${stage.title.toLowerCase()}.json`, {
         cycle_analytics: {
           start_date: options.startDate
         }

app/assets/javascripts/cycle_analytics/cycle_analytics_store.js.es6

@@ -7,57 +7,7 @@
       stats: '',
       analytics: '',
       items: [],
-      stages:[
-        {
-          name:'Issue',
-          active: false,
-          component: 'stage-issue-component',
-          legendTitle: 'Related Issues',
-          shortDescription: 'Time before an issue get scheduled',
-        },
-        {
-          name:'Plan',
-          active: false,
-          component: 'stage-plan-component',
-          legendTitle: 'Related Commits',
-          shortDescription: 'Time before an issue starts implementation',
-        },
-        {
-          name:'Code',
-          active: false,
-          component: 'stage-code-component',
-          legendTitle: 'Related Merge Requests',
-          shortDescription: 'Time spent coding',
-        },
-        {
-          name:'Test',
-          active: false,
-          component: 'stage-test-component',
-          legendTitle: 'Relative Builds Trigger by Commits',
-          shortDescription: 'The time taken to build and test the application',
-        },
-        {
-          name:'Review',
-          active: false,
-          component: 'stage-review-component',
-          legendTitle: 'Relative Merged Requests',
-          shortDescription: 'The time taken to review the code',
-        },
-        {
-          name:'Staging',
-          active: false,
-          component: 'stage-staging-component',
-          legendTitle: 'Relative Deployed Builds',
-          shortDescription: 'The time taken in staging',
-        },
-        {
-          name:'Production',
-          active: false,
-          component: 'stage-production-component',
-          legendTitle: 'Related Issues',
-          shortDescription: 'The total time taken from idea to production',
-        }
-      ],
+      stages:[],
     },
     setCycleAnalyticsData(data) {
       this.state = Object.assign(this.state, this.decorateData(data));
@@ -65,18 +15,20 @@
     decorateData(data) {
       let newData = {};
 
-      newData.stats = data.stats || [];
+      newData.stages = data.stats || [];
       newData.summary = data.summary || [];
 
       newData.summary.forEach((item) => {
         item.value = item.value || '-';
       });
 
-      newData.stats.forEach((item) => {
+      newData.stages.forEach((item) => {
         item.value = item.value || '- - -';
+        item.active = false;
+        item.component = `stage-${item.title.toLowerCase()}-component`;
       });
 
-      newData.analytics = data;      
+      newData.analytics = data;
 
       return newData;
     },

app/assets/stylesheets/pages/cycle_analytics.scss

@@ -22,7 +22,7 @@
     }
 
     .stage-header {
-      width: 16%;
+      width: 28%;
       padding-left: $gl-padding;
     }
 
@@ -30,10 +30,6 @@
       width: 12%;
     }
 
-    .delta-header {
-      width: 12%;
-    }
-
     .event-header {
       width: 45%;
       padding-left: $gl-padding;
@@ -239,21 +235,12 @@
         float: left;
 
         &.stage-name {
-          width: 40%;
+          width: 70%;
         }
 
         &.stage-median {
           width: 30%;
         }
-
-        &.stage-delta {
-          width: 30%;
-
-          .stage-direction {
-            float: right;
-            padding-right: $gl-padding;
-          }
-        }
       }
 
       .stage-name {

app/views/projects/cycle_analytics/show.html.haml

@@ -31,7 +31,7 @@
       .content-block
         .container-fluid
           .row
-            .col-sm-3.col-xs-12.column{"v-for" => "item in state.analytics.summary"}
+            .col-sm-3.col-xs-12.column{"v-for" => "item in state.summary"}
               %h3.header {{item.value}}
               %p.text {{item.title}}
             .col-sm-3.col-xs-12.column
@@ -58,10 +58,6 @@
               %span.stage-name
                 Median
               %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: "The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6.", "aria-hidden" => "true" }
-            %li.delta-header
-              %span.stage-name
-                = render "shared/icons/delta.svg"
-              %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: "The difference between the previous and last measure, expressed as positive or negative values. E.g., if the previous value was 5 and the new value is 7, the delta is +2.", "aria-hidden" => "true" }
             %li.event-header
               %span.stage-name
                 {{ currentStage ? currentStage.legendTitle : 'Related Issues' }}
@@ -79,13 +75,9 @@
               ":on-stage-click" => "selectStage" }
               %li.stage-nav-item{ ":class" => "classObject", "@click" => "onClick(stage)" }
                 .stage-name
-                  {{stage.name}}
+                  {{ stage.title }}
                 .stage-median
-                  20 hrs 21 mins
-                .stage-delta
-                  + 20 days
-                  %span.stage-direction
-                    = render "shared/icons/down_arrow.svg"
+                  {{ stage.value }}
         .section.stage-events
           %template{ "v-if" => "isLoadingStage" }
             = icon("spinner spin", "v-show" => "isLoadingStage")

app/views/shared/icons/_down_arrow.svg

-<svg width="9px" height="12px" viewBox="4 3 9 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <path d="M10,8.01971215 L10,13.022682 C10,13.5733266 9.55613518,14.0197122 9,14.0197122 C8.44771525,14.0197122 8,13.5666758 8,13.022682 L8,8.01971215 L5.99703014,8.01971215 C5.4463856,8.01971215 5.2749362,7.6760419 5.625,7.23846215 L8.375,3.80096215 C8.72017797,3.36948969 9.2749362,3.3633824 9.625,3.80096215 L12.375,7.23846215 C12.720178,7.66993461 12.5469637,8.01971215 12.0029699,8.01971215 L10,8.01971215 Z" id="Combined-Shape" stroke="none" fill="#31AF64" fill-rule="evenodd" transform="translate(8.998117, 8.747388) scale(1, -1) translate(-8.998117, -8.747388) "></path>
-</svg>
\ No newline at end of file