Add Charts to Preview Page

* Added Distribution and Usage charts to the theme preview page to
make branding them easier.
* Added additional color options for the distribution pie charts
* Cleaned up naming, using dashes instead of underscores

Closes-bug: #1565303
Change-Id: If82a94ccc8e37353dcaf313929ca876b92552c28

horizon/static/horizon/js/horizon.d3piechart.js

@@ -6,12 +6,12 @@
   that stores the data used to fill the chart.
 
   Example (usage):
-    <div class="d3_pie_chart_usage"
+    <div class="pie-chart-usage"
       data-used="{% widthratio current_val max_val 100 %}">
     </div>
 
   Example (distribution):
-    <div class="d3_pie_chart_distribution"
+    <div class="pie-chart-distribution"
       data-used="Controller=1|Compute=2|Object Storage=3|Block Storage=4">
     </div>
 */
@@ -48,8 +48,8 @@ horizon.d3_pie_chart_usage = {
     var self = this;
 
     // Pie Charts
-    var pie_chart_data = $(".d3_pie_chart_usage");
+    var pie_chart_data = $(".pie-chart-usage");
-    self.chart = d3.selectAll(".d3_pie_chart_usage");
+    self.chart = d3.selectAll(".pie-chart-usage");
 
     for (var i = 0; i < pie_chart_data.length; i++) {
       var data = $(pie_chart_data[i]).data("used");
@@ -132,8 +132,8 @@ horizon.d3_pie_chart_usage = {
 horizon.d3_pie_chart_distribution = {
   init: function() {
     var self = this;
-    var pie_chart_data = $(".d3_pie_chart_distribution");
+    var pie_chart_data = $(".pie-chart-distribution");
-    self.chart = d3.selectAll(".d3_pie_chart_distribution");
+    self.chart = d3.selectAll(".pie-chart-distribution");
 
     for (var i = 0; i < pie_chart_data.length; i++) {
       var parts = $(pie_chart_data[i]).data("used").split("|");

horizon/templates/horizon/common/_limit_summary.html

@@ -11,7 +11,7 @@
          <div class="row">
        {% endif %}
         <div class="d3_quota_bar col-lg-2 col-md-3 col-sm-4 col-xs-6 fix-it">
-          <div class="d3_pie_chart_usage" data-used="{% quotapercent quota.used quota.max %}"></div>
+          <div class="pie-chart-usage" data-used="{% quotapercent quota.used quota.max %}"></div>
           <div class="quota_title" title="{{ quota.name }}" data-toggle="tooltip"> {{ quota.name }}</div>
           <div class="quota_subtitle">
             {% if quota.max|quotainf != '-1' %}

openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.directive.js

@@ -53,6 +53,7 @@
       var $button = $('<div id="source-button" class="btn btn-primary btn-xs"><span class="fa fa-code"></span></div>')
         .click(function(){
           var $fragment = stripAngular($(this).parent().clone());
+          $fragment = stripChart($fragment);
           var html = cleanSource($fragment.html());
           $pre.text(html);
           $modal.modal();
@@ -66,6 +67,9 @@
         $(this).append($button);
         $button.show();
       });
+
+      horizon.d3_pie_chart_distribution.init();
+      horizon.d3_pie_chart_usage.init();
     }
 
   // Utility function to clean up the source code before displaying
@@ -80,6 +84,14 @@
     return $frag;
   }
 
+  // Utility function to clean up the source code before displaying
+  function stripChart($frag) {
+    $frag.find('.pie-chart-usage').find('svg').remove();
+    $frag.find('.pie-chart-distribution').find('svg').remove();
+    $frag.find('.pie-chart-distribution').find('.legend').remove();
+    return $frag;
+  }
+
   // Utility function to clean up the source code before displaying
   function cleanSource(html) {
       var lines = html.split(/\n/);

openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.html

@@ -3,7 +3,7 @@
 </p>
 
 <div class="row">
-  <div class="col-lg-3 col-md-3 col-sm-4">
+  <div class="col-lg-3 col-md-1 col-sm-4">
     <div class="list-group">
       <a translate class="list-group-item" href="#navbar" target="_self">Navbar</a>
       <a translate class="list-group-item" href="#buttons" target="_self">Buttons</a>
@@ -12,6 +12,7 @@
       <a translate class="list-group-item" href="#forms" target="_self">Forms</a>
       <a translate class="list-group-item" href="#navs" target="_self">Navs</a>
       <a translate class="list-group-item" href="#indicators" target="_self">Indicators</a>
+      <a translate class="list-group-item" href="#charts" target="_self">Charts</a>
       <a translate class="list-group-item" href="#progress-bars" target="_self">Progress bars</a>
       <a translate class="list-group-item" href="#containers" target="_self">Containers</a>
       <a translate class="list-group-item" href="#dialogs" target="_self">Dialogs</a>
@@ -950,6 +951,52 @@
   </div>
 </div>
 
+<!-- Charts
+================================================== -->
+<div class="bs-docs-section">
+  <div class="row">
+    <div class="col-lg-12">
+      <div class="page-header">
+        <h1 translate id="charts">Charts</h1>
+      </div>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-lg-12">
+      <h2 translate>Usage Charts</h2>
+      <div class="bs-component">
+        <div class="col-md-1 pie-chart-usage"
+             data-used="25 100 100"></div>
+        <div class="col-md-1 pie-chart-usage"
+             data-used="95 100 100"></div>
+        <div class="col-md-1 pie-chart-usage"
+             data-used="100 100 100"></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-lg-12">
+      <h2 translate>Distribution Charts</h2>
+      <div class="bs-component">
+        <div class="col-md-2 pie-chart-distribution"
+             data-used="Foo=1|Bar=2|Baz=3"></div>
+        <div class="col-md-2 pie-chart-distribution chart-danger"
+             data-used="Foo=5|Bar=3|Baz=4|Blah=1"></div>
+        <div class="col-md-2 pie-chart-distribution chart-info"
+             data-used="Foo=3|Bar=4|Baz=5|Blah=2"></div>
+        <div class="col-md-2 pie-chart-distribution chart-success"
+             data-used="Foo=4|Bar=5"></div>
+        <div class="col-md-2 pie-chart-distribution chart-warning"
+             data-used="Foo=5|Bar=1|Baz=2|Blah=4|Something=2">
+        </div>
+      </div>
+    </div>
+  </div>
+
+</div>
+
 <!-- Progress bars
 ================================================== -->
 <div class="bs-docs-section">

openstack_dashboard/dashboards/admin/hypervisors/templates/hypervisors/index.html

@@ -7,7 +7,7 @@
 <div class="quota-dynamic">
   <h3>{% trans "Hypervisor Summary" %}</h3>
     <div class="col-sm-4 d3_quota_bar">
-      <div class="d3_pie_chart_usage" data-used="{% widthratio stats.vcpus_used stats.vcpus 100 %}"></div>
+      <div class="pie-chart-usage" data-used="{% widthratio stats.vcpus_used stats.vcpus 100 %}"></div>
       <div class="h5">{% trans "VCPU Usage" %}</div>
       <div class="h6">
         {% blocktrans with used=stats.vcpus_used|intcomma available=stats.vcpus|intcomma %}Used <span> {{ used }} </span> of <span> {{ available }} </span>{% endblocktrans %}
@@ -15,7 +15,7 @@
     </div>
 
     <div class="col-sm-4 d3_quota_bar">
-      <div class="d3_pie_chart_usage" data-used="{% widthratio stats.memory_mb_used stats.memory_mb 100 %}"></div>
+      <div class="pie-chart-usage" data-used="{% widthratio stats.memory_mb_used stats.memory_mb 100 %}"></div>
       <div class="h5">{% trans "Memory Usage" %}</div>
       <div class="h6">
          {% blocktrans with used=stats.memory_mb_used|mb_float_format available=stats.memory_mb|mb_float_format %}Used <span> {{ used }} </span> of <span> {{ available }} </span>{% endblocktrans %}
@@ -23,7 +23,7 @@
     </div>
 
     <div class="col-sm-4 d3_quota_bar">
-      <div class="d3_pie_chart_usage" data-used="{% widthratio stats.local_gb_used stats.local_gb 100 %}"></div>
+      <div class="pie-chart-usage" data-used="{% widthratio stats.local_gb_used stats.local_gb 100 %}"></div>
        <div class="h5">{% trans "Local Disk Usage" %}</div>
        <div class="h6">
          {% blocktrans with used=stats.local_gb_used|diskgbformat available=stats.local_gb|diskgbformat %}Used <span> {{ used }} </span> of <span> {{ available }} </span>{% endblocktrans %}

openstack_dashboard/static/dashboard/scss/components/_pie_charts.scss

@@ -5,30 +5,48 @@
 // toggle between an incrementing percentage ($increment)
 // from the theme's primary brand color.  This should
 // adapt nicely to most themes.
-@mixin make_pie_chart_distribution($num, $increment) {
+
+// Distribution Chart Mixins
+@mixin make_pie_chart_distribution($color: $brand-primary, $num: 8, $increment: 8) {
+
+  // Set the arc stroke
+  .arc {
+    stroke: $color;
+  }
+
   @for $ii from 1 through $num {
     $color_increment: $increment * ($ii/2);
 
     // Set the arc color
     .arc:nth-child(#{$ii}n) {
       @if $ii % 2 == 0 {
-        fill: lighten($brand-primary, $color_increment * 1%);
+        fill: lighten($color, $color_increment * 1%);
       } @else {
-        fill: darken($brand-primary, $color_increment * 1%);
+        fill: darken($color, $color_increment * 1%);
       }
     }
 
     // Set the corresponding legend symbol
     .legend-group:nth-child(#{$ii}n) .legend-symbol {
       @if $ii % 2 == 0 {
-        color: lighten($brand-primary, $color_increment * 1%);
+        color: lighten($color, $color_increment * 1%);
       } @else {
-        color: darken($brand-primary, $color_increment * 1%);
+        color: darken($color, $color_increment * 1%);
       }
     }
   }
 }
 
+@mixin make_pie_chart_type($type: '', $color: $brand-primary) {
+  @if $type == '' {
+    @include make_pie_chart_distribution($color);
+  } @else {
+    &.chart-#{$type} {
+      @include make_pie_chart_distribution($color);
+    }
+  }
+}
+
 // This is who sets the size of the pie chart
 .legacy-pie-chart {
 
@@ -40,7 +58,7 @@
 }
 
 // Chart Usage Specifics
-.d3_pie_chart_usage {
+.pie-chart-usage {
 
   .arc {
     stroke: $table-border-color;
@@ -64,15 +82,15 @@
 }
 
 // Chart Distribution Specifics
-.d3_pie_chart_distribution {
+// The container arc's color and stroke
 
-  // The container arc's color and stroke
+.pie-chart-distribution {
-  .arc {
-    stroke: $brand-primary;
-  }
 
-  // Set the colors!
+  @include make_pie_chart_type();
-  @include make_pie_chart_distribution(8, 8);
+  @include make_pie_chart_type('danger', $brand-danger);
+  @include make_pie_chart_type('success', $brand-success);
+  @include make_pie_chart_type('info', $brand-info);
+  @include make_pie_chart_type('warning', $brand-warning);
 
   .legend {
     padding: $padding-base-horizontal $padding-base-vertical;

openstack_dashboard/static/dashboard/scss/components/_quota.scss

@@ -1,10 +1,10 @@
 .d3_quota_bar {
   text-align: center;
-}
 
-.d3_pie_chart_usage {
+  .pie-chart-usage {
-  width: $font-size-h2 * 3;
+    width: $font-size-h2 * 3;
-  display: inline-block;
+    display: inline-block;
+  }
 }
 
 .quota-dynamic {

openstack_dashboard/themes/default/horizon/components/_pie_charts.scss

@@ -1,11 +1,11 @@
-.d3_pie_chart_usage {
+.pie-chart-usage {
   .arc {
     stroke: $gray-light;
     fill: $gray-lighter;
   }
 }
 
-.d3_pie_chart_distribution {
+.pie-chart-distribution {
   .legend-group {
     padding: 1px $padding-small-vertical;
   }

releasenotes/notes/global-class-name-convention-71ff68913c39b800.yaml

@@ -0,0 +1,9 @@
+---
+prelude: >
+    In an effort to standarize our HTML class naming
+    conventions, we will be updating various class
+    names to use dashes, instead of underscore or
+    camelcasing, to match with Bootstrap's convention.
+deprecations:
+  - All instances of HTML class 'd3_pie_chart_usage' to 'pie-chart-usage'
+    All instances of HTML class 'd3_pie_chart_distribution' to 'pie-chart-distribution'