From 2a4d0631b72ec56251519f219d45a35d09e290c7 Mon Sep 17 00:00:00 2001
From: Stas Vilchik <vilchiks@gmail.com>
Date: Fri, 15 Jan 2016 10:36:19 +0100
Subject: [PATCH] SONAR-6629 Rewrite complexity widget

---
 .../widget/_complexity_chart.html.erb         | 18 ----
 .../dashboard/widget/complexity.html.erb      | 84 ++++++-------------
 .../src/main/js/widgets/complexity/index.js   | 47 +++++++++++
 .../sonar-web/src/main/js/widgets/widgets.js  |  3 +
 .../widgets/_complexity_chart.html.erb        |  8 --
 5 files changed, 77 insertions(+), 83 deletions(-)
 delete mode 100644 server/sonar-server/src/main/resources/org/sonar/server/dashboard/widget/_complexity_chart.html.erb
 create mode 100644 server/sonar-web/src/main/js/widgets/complexity/index.js
 delete mode 100644 server/sonar-web/src/main/webapp/WEB-INF/app/views/project/widgets/_complexity_chart.html.erb

diff --git a/server/sonar-server/src/main/resources/org/sonar/server/dashboard/widget/_complexity_chart.html.erb b/server/sonar-server/src/main/resources/org/sonar/server/dashboard/widget/_complexity_chart.html.erb
deleted file mode 100644
index b75db5d24fd..00000000000
--- a/server/sonar-server/src/main/resources/org/sonar/server/dashboard/widget/_complexity_chart.html.erb
+++ /dev/null
@@ -1,18 +0,0 @@
-<% dist_measure = measure(metric)
-   if dist_measure && !dist_measure.data.blank?
-%>
-<div id="chart_<%=metric -%>" class="chart" style="display: <%= visible ? "block" : "none" %>">
-<%
-   query="ck=distbar&c=777777&v=" + u(dist_measure.data)
-   small_size_query=query + '&w=220&h=100&fs=8&bgc=ffffff'
-   big_size_query=query + '&w=300&h=150&fs=12&bgc=CAE3F2'
-%><%= chart(small_size_query, :id => 'chart_img_' + metric, :alt => title) -%>
-
-  <script type='text/javascript'>
-  //<![CDATA[
-  new Tip('chart_img_<%=metric-%>', '<div style="width:300px;"><b><%= title -%></b><br>'+
-    '<%= chart(big_size_query, :id => 'chart_img_' + metric, :alt => title) -%></div>');
-  //]]>
-  </script>
-</div>
-<% end %>
\ No newline at end of file
diff --git a/server/sonar-server/src/main/resources/org/sonar/server/dashboard/widget/complexity.html.erb b/server/sonar-server/src/main/resources/org/sonar/server/dashboard/widget/complexity.html.erb
index 62832d2335a..cdce681288d 100644
--- a/server/sonar-server/src/main/resources/org/sonar/server/dashboard/widget/complexity.html.erb
+++ b/server/sonar-server/src/main/resources/org/sonar/server/dashboard/widget/complexity.html.erb
@@ -51,64 +51,34 @@
 
     <div class="widget-span widget-span-7">
       <%
-         function_distribution=measure('function_complexity_distribution')
-         class_distribution=measure('class_complexity_distribution')
-         file_distribution=measure('file_complexity_distribution')
-         distributions=[function_distribution, class_distribution, file_distribution].compact
-         selected_distribution=nil
-         if distributions.size>0
-           selected_distribution=distributions.first
-         end
-         if selected_distribution
+         function_distribution = measure('function_complexity_distribution')
+         if function_distribution
       %>
-        <div class="dashbox" id="cmp_charts">
-          <script type='text/javascript'>
-            //<![CDATA[
-            function selectComplexity(metric) {
-              $j('#cmp_charts .chart').hide();
-              $j('#chart_' + metric).show();
-            }
-          </script>
-          <style>
-            #cmp_charts form {
-              font-size: 93%; padding-left: 30px;
-            }
-
-            #cmp_charts form label {
-              padding-right: 5px;
-            }
-          </style>
-          <% distributions.each do |distribution_measure| %>
-            <%= render :partial => 'project/widgets/complexity_chart', :locals => {:metric => distribution_measure.metric.key, :title => distribution_measure.metric.description, :visible => (selected_distribution==distribution_measure)} %>
-          <% end %>
-
-          <form>
-            <%
-               count_dist=0
-               if function_distribution
-                 count_dist+=1
-            %>
-              <input type="radio" name="cmp_dist" value="function_complexity_distribution" id="cmp_dist_function_complexity_distribution" onClick="selectComplexity('function_complexity_distribution');" <%= 'checked' if function_distribution==selected_distribution -%>/>
-              <label for="cmp_dist_function_complexity_distribution"><%= message('metric.functions.name') -%></label>
-            <%
-               end
-               if class_distribution
-                 count_dist+=1
-            %>
-              <input type="radio" name="cmp_dist" value="class_complexity_distribution" id="cmp_dist_class_complexity_distribution" onClick="selectComplexity('class_complexity_distribution');" <%= 'checked' if class_distribution==selected_distribution -%>/>
-              <label for="cmp_dist_class_complexity_distribution"><%= message('metric.classes.name') -%></label><%= '<br/>' if count_dist==2 %>
-            <%
-               end
-               if file_distribution
-                 count_dist+=1
-            %>
-              <input type="radio" name="cmp_dist" value="file_complexity_distribution" id="cmp_dist_file_complexity_distribution" onClick="selectComplexity('file_complexity_distribution');" <%= 'checked' if file_distribution==selected_distribution -%>/>
-              <label for="cmp_dist_file_complexity_distribution"><%= message('metric.files.name') -%></label>
-            <% end %>
-
-          </form>
-
-        </div>
+        <div id="complexity-widget-<%= widget.id.to_s -%>-function-distribution"></div>
+        <script>
+          (function () {
+            window.ComplexityDistribution({
+              el: '#complexity-widget-<%= widget.id.to_s -%>-function-distribution',
+              value: '<%= function_distribution.data -%>',
+              of: 'function'
+            });
+            })();
+        </script>
+      <% end %>
+      <%
+         file_distribution = measure('file_complexity_distribution')
+         if file_distribution
+      %>
+      <div id="complexity-widget-<%= widget.id.to_s -%>-file-distribution"></div>
+      <script>
+        (function () {
+          window.ComplexityDistribution({
+            el: '#complexity-widget-<%= widget.id.to_s -%>-file-distribution',
+            value: '<%= file_distribution.data -%>',
+            of: 'file'
+          });
+          })();
+      </script>
       <% end %>
     </div>
   </div>
diff --git a/server/sonar-web/src/main/js/widgets/complexity/index.js b/server/sonar-web/src/main/js/widgets/complexity/index.js
new file mode 100644
index 00000000000..246a2ac9245
--- /dev/null
+++ b/server/sonar-web/src/main/js/widgets/complexity/index.js
@@ -0,0 +1,47 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import React from 'react';
+import { render } from 'react-dom';
+import { translate } from '../../helpers/l10n';
+import { ComplexityDistribution } from '../../apps/overview/components/complexity-distribution';
+
+const Widget = ({ value, of }) => {
+  return (
+      <div>
+        <span className="widget-label">
+          {translate(`metric.${of}_complexity_distribution.name`)}
+        </span>
+        <ComplexityDistribution distribution={value} of={of}/>
+      </div>
+  );
+};
+
+function start ({ el, ...other }) {
+  window.sonarqube.appStarted.then(() => {
+    const element = document.querySelector(el);
+    render(<Widget {...other}/>, element);
+  });
+}
+
+export default function (options) {
+  if (options.value) {
+    document.addEventListener('DOMContentLoaded', () => start(options), false);
+  }
+}
diff --git a/server/sonar-web/src/main/js/widgets/widgets.js b/server/sonar-web/src/main/js/widgets/widgets.js
index 675126ab020..d5bef69f777 100644
--- a/server/sonar-web/src/main/js/widgets/widgets.js
+++ b/server/sonar-web/src/main/js/widgets/widgets.js
@@ -31,4 +31,7 @@ import './old/word-cloud';
 import './old/widget';
 
 import IssueFilterWidget from './issue-filter/widget';
+import ComplexityDistribution from './complexity';
+
 window.IssueFilterWidget = IssueFilterWidget;
+window.ComplexityDistribution = ComplexityDistribution;
diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/project/widgets/_complexity_chart.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/project/widgets/_complexity_chart.html.erb
deleted file mode 100644
index 029fb9d47ab..00000000000
--- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/project/widgets/_complexity_chart.html.erb
+++ /dev/null
@@ -1,8 +0,0 @@
-<% dist_measure = measure(metric)
-   if dist_measure && !dist_measure.data.blank?
-     query="w=220&h=100&fs=10&bgc=ffffff&ck=distbar&c=777777&v=" + u(dist_measure.data)
-%>
-  <div id="chart_<%= metric -%>" class="chart" style="display: <%= visible ? "block" : "none" %>">
-    <%= chart(query, :id => 'chart_img_' + metric, :alt => title) -%>
-  </div>
-<% end %>
\ No newline at end of file
-- 
2.39.5