Show integration usage (#17383)

.gitignore

@@ -4,6 +4,7 @@
 .gist-cache
 .pygments-cache
 public
+source/_data/analytics_data.json
 source/_stash
 source/stylesheets/screen.css
 source/.jekyll-cache/

Rakefile

@@ -1,6 +1,9 @@
 require "rubygems"
 require "bundler/setup"
 require "stringex"
+require 'net/http'
+require 'json'
+
 
 ## -- Misc Configs -- ##
 public_dir      = "public/"   # compiled site directory
@@ -28,6 +31,8 @@ task :generate do
   puts "## Generating Site with Jekyll"
   success = system "compass compile --css-dir #{source_dir}/stylesheets"
   abort("Generating CSS failed") unless success
+  success = system "rake analytics_data"
+  abort("Generating analytics data failed") unless success
   success = system "jekyll build"
   abort("Generating site failed") unless success
   if ENV["CONTEXT"] != 'production'
@@ -63,6 +68,7 @@ task :preview, :listen do |t, args|
   puts "Starting to watch source with Jekyll and Compass."
   puts "Now listening on http://localhost:#{server_port}"
   system "compass compile --css-dir #{source_dir}/stylesheets" unless File.exist?("#{source_dir}/stylesheets/screen.css")
+  success = system "rake analytics_data"
   jekyllPid = Process.spawn({"OCTOPRESS_ENV"=>"preview"}, "jekyll build -t --watch --incremental")
   compassPid = Process.spawn("compass watch")
   rackupPid = Process.spawn("rackup --port #{server_port} --host #{listen_addr}")
@@ -168,6 +174,19 @@ task :clean do
   rm_rf [Dir.glob(".pygments-cache/**"), Dir.glob(".gist-cache/**"), Dir.glob(".sass-cache/**"), "source/stylesheets/screen.css"]
 end
 
+desc "Download data from analytics.home-assistant.io"
+task :analytics_data do
+  uri = URI('https://analytics.home-assistant.io/data.json')
+
+  remote_data = JSON.parse(Net::HTTP.get(uri))
+  last_entry=remote_data.keys().sort().reverse()[0]
+
+  File.open("#{source_dir}/_data/analytics_data.json", "w") do |file|
+    file.write(JSON.generate(remote_data[last_entry]))
+  end
+
+end
+
 def get_stdin(message)
   print message
   STDIN.gets.chomp

sass/custom/_paulus.scss

@@ -455,8 +455,9 @@ div.note {
         }
       }
     }
-  }
 
+ }
+ 
   .brand-logo-container {
     text-align: center;
     margin-top: 50px;

source/_includes/asides/component_navigation.html

@@ -18,39 +18,20 @@
     </div>
   {%- endif -%}
 
-  {%- if page.ha_iot_class -%}
-    <div class='section'>
-      IoT class<sup><a href='/blog/2016/02/12/classifying-the-internet-of-things/#classifiers'><i class="icon-info-sign"></i></a></sup>: {{ page.ha_iot_class }}
-    </div>
-  {%- endif -%}
+  <div class='section'>
+    The {{ page.name | default: page.title }} integration was introduced in Home Assistant {{ page.ha_release | default: "unknown" }},
+    and it's used by <a title="Open analytics.home-assistant.io" href="https://analytics.home-assistant.io" target="_blank" rel="noopener">
+    {{ 100 | times: site.data.analytics_data.integrations[page.ha_domain] | divided_by: site.data.analytics_data.reports_integrations | ceil }}%</a> of the active installations.
+    Its IoT class<sup><a href='/blog/2016/02/12/classifying-the-internet-of-things/#classifiers'><i class="icon-info-sign"></i></a></sup> is {{ page.ha_iot_class | default: "unknown" }}
 
-  {%- if page.ha_quality_scale -%}
-    <div class='section'>
-      Quality Scale: <a href='/docs/quality_scale/'>
-        {%- if page.ha_quality_scale == 'platinum' -%}
-          🏆 (platinum)
-        {%- elsif page.ha_quality_scale == 'gold' -%}
-          🥇 (gold)
-        {%- elsif page.ha_quality_scale == 'silver' -%}
-          🥈 (silver)
-        {%- elsif page.ha_quality_scale == 'internal' -%}
-          🏠 (internal)
-        {%- endif -%}
-      </a>
-    </div>
-  {%- endif -%}
+    {%- if page.ha_quality_scale %}
+      and scores {{page.ha_quality_scale}} on our <a href='/docs/quality_scale/'>quality scale</a>
+    {%- endif -%}.
 
-  {%- if page.ha_release -%}
-    <div class='section'>
-      Introduced in release: {{ page.ha_release }}
-    </div>
-  {%- endif -%}
-
-  {%- if page.ha_domain -%}
-    <div class='section'>
-      Source: <a href='https://github.com/home-assistant/core/tree/dev/homeassistant/components/{{ page.ha_domain }}'>View on GitHub</a>
-    </div>
-  {%- endif -%}
+    {% if page.ha_domain %}
+    You can find the source for this integration on <a href='https://github.com/home-assistant/core/tree/dev/homeassistant/components/{{ page.ha_domain }}'>GitHub</a>.
+    {%- endif -%}
+  </div>
 
   {%- if page.ha_category.first -%}
     <div class='section'>