From 58553ba6e84fab3a324df55b2bee050fa765323b Mon Sep 17 00:00:00 2001 From: Diana Whitten Date: Fri, 1 Apr 2016 16:13:41 -0700 Subject: [PATCH] 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 --- .../static/horizon/js/horizon.d3piechart.js | 12 ++--- .../horizon/common/_limit_summary.html | 2 +- .../theme-preview/theme-preview.directive.js | 12 +++++ .../theme-preview/theme-preview.html | 49 ++++++++++++++++++- .../templates/hypervisors/index.html | 6 +-- .../scss/components/_pie_charts.scss | 44 ++++++++++++----- .../dashboard/scss/components/_quota.scss | 8 +-- .../horizon/components/_pie_charts.scss | 4 +- ...lass-name-convention-71ff68913c39b800.yaml | 9 ++++ 9 files changed, 116 insertions(+), 30 deletions(-) create mode 100644 releasenotes/notes/global-class-name-convention-71ff68913c39b800.yaml diff --git a/horizon/static/horizon/js/horizon.d3piechart.js b/horizon/static/horizon/js/horizon.d3piechart.js index 3baa9fdb2b..16fd82b587 100644 --- a/horizon/static/horizon/js/horizon.d3piechart.js +++ b/horizon/static/horizon/js/horizon.d3piechart.js @@ -6,12 +6,12 @@ that stores the data used to fill the chart. Example (usage): -
Example (distribution): -
*/ @@ -48,8 +48,8 @@ horizon.d3_pie_chart_usage = { var self = this; // Pie Charts - var pie_chart_data = $(".d3_pie_chart_usage"); - self.chart = d3.selectAll(".d3_pie_chart_usage"); + var pie_chart_data = $(".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"); - self.chart = d3.selectAll(".d3_pie_chart_distribution"); + var pie_chart_data = $(".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("|"); diff --git a/horizon/templates/horizon/common/_limit_summary.html b/horizon/templates/horizon/common/_limit_summary.html index f39e036898..5c63e2c003 100644 --- a/horizon/templates/horizon/common/_limit_summary.html +++ b/horizon/templates/horizon/common/_limit_summary.html @@ -11,7 +11,7 @@
{% endif %}
-
+
{{ quota.name }}
{% if quota.max|quotainf != '-1' %} diff --git a/openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.directive.js b/openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.directive.js index 926da4afb9..3d29e9c599 100644 --- a/openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.directive.js +++ b/openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.directive.js @@ -53,6 +53,7 @@ var $button = $('
') .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/); diff --git a/openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.html b/openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.html index a4ff67347a..a411130917 100644 --- a/openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.html +++ b/openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.html @@ -3,7 +3,7 @@

-
+
Navbar Buttons @@ -12,6 +12,7 @@ Forms Navs Indicators + Charts Progress bars Containers Dialogs @@ -950,6 +951,52 @@
+ +
+
+
+
+

Charts

+
+
+
+ +
+
+

Usage Charts

+
+
+
+
+
+
+
+ +
+
+

Distribution Charts

+
+
+
+
+
+
+
+
+
+
+ +
+
diff --git a/openstack_dashboard/dashboards/admin/hypervisors/templates/hypervisors/index.html b/openstack_dashboard/dashboards/admin/hypervisors/templates/hypervisors/index.html index 47425825cd..4421794b6e 100644 --- a/openstack_dashboard/dashboards/admin/hypervisors/templates/hypervisors/index.html +++ b/openstack_dashboard/dashboards/admin/hypervisors/templates/hypervisors/index.html @@ -7,7 +7,7 @@

{% trans "Hypervisor Summary" %}

-
+
{% trans "VCPU Usage" %}
{% blocktrans with used=stats.vcpus_used|intcomma available=stats.vcpus|intcomma %}Used {{ used }} of {{ available }} {% endblocktrans %} @@ -15,7 +15,7 @@
-
+
{% trans "Memory Usage" %}
{% blocktrans with used=stats.memory_mb_used|mb_float_format available=stats.memory_mb|mb_float_format %}Used {{ used }} of {{ available }} {% endblocktrans %} @@ -23,7 +23,7 @@
-
+
{% trans "Local Disk Usage" %}
{% blocktrans with used=stats.local_gb_used|diskgbformat available=stats.local_gb|diskgbformat %}Used {{ used }} of {{ available }} {% endblocktrans %} diff --git a/openstack_dashboard/static/dashboard/scss/components/_pie_charts.scss b/openstack_dashboard/static/dashboard/scss/components/_pie_charts.scss index 926ac09b05..ea9c861572 100644 --- a/openstack_dashboard/static/dashboard/scss/components/_pie_charts.scss +++ b/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 - .arc { - stroke: $brand-primary; - } +.pie-chart-distribution { - // Set the colors! - @include make_pie_chart_distribution(8, 8); + @include make_pie_chart_type(); + @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; diff --git a/openstack_dashboard/static/dashboard/scss/components/_quota.scss b/openstack_dashboard/static/dashboard/scss/components/_quota.scss index ebafd30e2e..7a3f9d2e6d 100644 --- a/openstack_dashboard/static/dashboard/scss/components/_quota.scss +++ b/openstack_dashboard/static/dashboard/scss/components/_quota.scss @@ -1,10 +1,10 @@ .d3_quota_bar { text-align: center; -} -.d3_pie_chart_usage { - width: $font-size-h2 * 3; - display: inline-block; + .pie-chart-usage { + width: $font-size-h2 * 3; + display: inline-block; + } } .quota-dynamic { diff --git a/openstack_dashboard/themes/default/horizon/components/_pie_charts.scss b/openstack_dashboard/themes/default/horizon/components/_pie_charts.scss index f6aa5b20b0..2311b710bd 100644 --- a/openstack_dashboard/themes/default/horizon/components/_pie_charts.scss +++ b/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; } diff --git a/releasenotes/notes/global-class-name-convention-71ff68913c39b800.yaml b/releasenotes/notes/global-class-name-convention-71ff68913c39b800.yaml new file mode 100644 index 0000000000..dadd145d91 --- /dev/null +++ b/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'