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
This commit is contained in:
Diana Whitten
parent
f0fb0a358f
commit
58553ba6e8
|
|
@ -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");
|
||||
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("|");
|
||||
|
|
|
|||
|
|
@ -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' %}
|
||||
|
|
|
|||
|
|
@ -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/);
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
Loading…
Reference in New Issue