f5f371655e
Barcharts were using a complex D3 mechanism to draw very very simple markup that can be achieved using a simple Bootstrap Stacked Progress Bar. A templatetag was added to aid in markup reuse. Also, a 'minifyspace' template helper was also added that enables us to make templates that have excessive attributes to be more readable, while not affecting the rendered HTML on the page. By moving the logic to simple markup, the rendering of the barcharts are now immediate on the page, instead of requiring Horizon Init functions to run and draw. This immediate render removes the first animation on the Quota bars, but it retains animations driven by user interaction with the forms. It was hoped that horizon.d3barchart.js could be completely removed, but it is currently being used by horizon.d3linechart.js. This will be addressed soon, but was outside of the scope of this patch. Much of the markup on the Quota pages was cleaned up and made simpler to use existing style as well as replacing improper usage of <strong> Summary of Improvements: * Immediate Render time for Bar Charts * Bar Charts now Inherit from theme, and use progress bar styles * 'minifyspace' was added to increase readability to templates * bs_progress_bar templatetag was added to facilitate code reuse * Markup for Quota Bar pages refactored Partially-Implements: blueprint horizon-theme-css-reorg Partially-Implements: blueprint bootstrap-html-standards Change-Id: I16a1e3955d3a4fded0f2ea6a87f5e7c2f630185d
62 lines
1.4 KiB
SCSS
62 lines
1.4 KiB
SCSS
// The idea behind this mixin is to allow a variety of
|
|
// colors to be configured, from 1 - $num, that will
|
|
// toggle between an incrementing percentage ($increment)
|
|
// from the theme's primary brand color. This should
|
|
// adapt nicely to most themes.
|
|
|
|
@mixin make_bar_chart_distribution($num, $increment) {
|
|
@for $ii from 1 through $num {
|
|
$color_increment: $increment * ($ii/2);
|
|
|
|
// Set the arc color
|
|
.legacy-bar-chart-section:nth-child(#{$ii}n) {
|
|
@if $ii % 2 == 0 {
|
|
fill: lighten($progress-bar-bg, $color_increment * 1%);
|
|
} @else {
|
|
fill: darken($progress-bar-bg, $color_increment * 1%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.legacy-bar-chart {
|
|
@extend .progress;
|
|
fill: $progress-bg;
|
|
|
|
// Set the colors!
|
|
@include make_bar_chart_distribution(8, 8);
|
|
|
|
.legacy-bar-chart-section {
|
|
@extend .progress-bar;
|
|
}
|
|
|
|
.unused_component.legacy-bar-chart-section {
|
|
fill: transparent;
|
|
}
|
|
|
|
.average_component {
|
|
stroke: $gray-dark;
|
|
stroke-dasharray: 6, 2;
|
|
stroke-width: 3px;
|
|
}
|
|
|
|
.average_component_hover {
|
|
stroke-width: 5px;
|
|
}
|
|
|
|
.used_component_label {
|
|
font-size: $font-size-base;
|
|
fill: $text-color;
|
|
}
|
|
|
|
.used_component_label_arrow {
|
|
stroke: $text-color;
|
|
}
|
|
}
|
|
|
|
// (hurgleburgler) Remove when we've upgraded to Bootstrap 3.3.5, because we need
|
|
// https://github.com/twbs/bootstrap/commit/2c2564faefd99b044273f132275bb620b5eccb93
|
|
.progress-bar {
|
|
min-width: 0 !important;
|
|
}
|