')
- .text(content)
- .css({
- top: pos.pageY - 40,
- left: pos.pageX - 10,
- 'border-color': item.series.color,
- })
- .appendTo('body')
- .zIndex(5000)
- .show();
-}
-
-$previousPoint = null;
-function bind_hover_event(target, formater) {
- $(target).bind('plothover', function(event, pos, item) {
- if (item) {
- $(target).css('cursor', 'pointer');
- if ($previousPoint != item.datapoint) {
- $previousPoint = item.datapoint;
- $('#flot-tooltip').remove();
- showTooltip(pos, item, formater);
- }
- } else {
- $(target).css('cursor', 'default');
- $('#flot-tooltip').remove();
- $previousPoint = null;
- }
- });
-}
-
-function legend_selected(item) {
- $(item)
- .closest('td')
- .toggleClass('disabled');
- $(item)
- .closest('td')
- .next()
- .toggleClass('disabled');
- var target = $(item).parents('.statistics-chart');
- var series = target.clone().data('series');
- var legend = target.find('.legend').clone();
- var data = [];
- // Remove the data series.
- target.find('.legend td.legendLabel:not(.disabled)').each(function() {
- var key = $(this).text();
- for (var i = 0; i < series.length; i++) {
- if (series[i].label === key) {
- data.push(series[i]);
- return true;
- }
- }
- });
- flot_time_chart(target, data);
- target.find('.legend').remove();
- target.append(legend);
-}
-
-function ext_legend_selected(item) {
- $(item)
- .closest('td')
- .toggleClass('disabled');
- $(item)
- .closest('td')
- .next()
- .toggleClass('disabled');
- var target = $('.statistics-chart');
- var series = target.clone().data('series');
- var data = [];
- // Remove the data series.
- $('#legendContainer table td.legendLabel:not(.disabled)').each(function() {
- var key = $(this).text();
- for (var i = 0; i < series.length; i++) {
- if (series[i].label === key) {
- data.push(series[i]);
- return true;
- }
- }
- });
-
- flot_time_chart(target, data, { show: false });
-}
-
-function updateChart(item, status) {
- if (status == 'success')
- $(item)
- .find('.statistics-chart')
- .flot_chart();
- else $(item).text(__('Failed to load chart'));
-}
-
-$(function() {
- $('[data-toggle="tooltip"]').tooltip();
- refreshCharts();
- $(document).on('click', '.reset-zoom', function() {
- reset_zoom(this);
- });
- $(document).on(
- 'click',
- '.legend .legendColorBox, .legend .legendLabel',
- function() {
- legend_selected(this);
- }
- );
- $(document).on(
- 'click',
- '#legendContainer .legendColorBox, .legendContainer .legendLabel',
- function() {
- ext_legend_selected(this);
- }
- );
-});
-
-$(window).on('resize', refreshCharts);
-
-function refreshCharts() {
- $('.statistics-bar:visible').flot_bar();
- $('.statistics-chart:visible').flot_chart();
-}
diff --git a/app/assets/javascripts/proxy_status.js b/app/assets/javascripts/proxy_status.js
index 0b603d917c3..8eda4712937 100644
--- a/app/assets/javascripts/proxy_status.js
+++ b/app/assets/javascripts/proxy_status.js
@@ -2,7 +2,6 @@
//= require proxy_status/logs
$(document).on('ContentLoad', function() {
- $('.nav-tabs a').on('shown.bs.tab', refreshCharts);
$('a[data-toggle="tab"]').on('click', function(e) {
history.pushState(
null,
diff --git a/app/assets/stylesheets/base.scss b/app/assets/stylesheets/base.scss
index 07b9abae226..1e9c5730426 100644
--- a/app/assets/stylesheets/base.scss
+++ b/app/assets/stylesheets/base.scss
@@ -283,6 +283,20 @@ table {
white-space: nowrap;
}
+.stats-well {
+ border: 1px solid #d7d7d7;
+ background-size: 100%;
+ padding: 15px;
+ min-width: 280px;
+ min-height: 100px;
+ margin-bottom: 15px;
+
+ h2,
+ h4 {
+ font-weight: normal;
+ }
+}
+
.white-space-normal {
white-space: normal;
}
diff --git a/app/assets/stylesheets/charts.scss b/app/assets/stylesheets/charts.scss
deleted file mode 100644
index 019aa55bd78..00000000000
--- a/app/assets/stylesheets/charts.scss
+++ /dev/null
@@ -1,153 +0,0 @@
-.stats-well {
- border: 1px solid #d7d7d7;
- background-size: 100%;
- padding: 15px;
- min-width: 280px;
- min-height: 100px;
- margin-bottom: 15px;
-
- h2,
- h4 {
- font-weight: normal;
- }
-}
-
-.fact_chart {
- float: left;
- min-height: 450px !important;
- width: 485px !important;
- padding: 0 !important;
- text-align: center;
- overflow: hidden;
-}
-
-.legend {
- margin-left: 485px;
- margin-top: 10px;
- height: 450px;
- width: 110px;
- text-align: center;
- overflow-y: auto;
- overflow-x: hidden;
-
- .legendLabel {
- text-align: left;
- }
-}
-
-#statistics {
- margin: 0 auto;
- text-align: left;
- width: 90%;
-
- .stats-well {
- float: left;
- padding: 10px 20px;
- margin: 0 0 20px 20px;
-
- &:hover {
- border-color: #0069d6;
- box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
- }
- }
-}
-
-#reports .stats-well {
- min-height: 380px;
-}
-
-#host-show .stats-well {
- min-height: 270px;
-}
-
-.statistics-bar {
- width: 260px;
- height: 305px;
- margin: 0 auto 27px;
-}
-
-.axisLabels {
- color: #626262;
- font-weight: bold;
-}
-
-#flot-tooltip {
- font-size: 12px;
- font-family: 'Overpass', Interstate, sans-serif;
- position: absolute;
- display: none;
- border: 2px solid;
- padding: 2px;
- background-color: #fff;
- opacity: 0.8;
- z-index: 100;
- border-radius: 5px;
-
- b {
- color: black;
- font-weight: bold;
- }
-}
-
-.xAxis > .tickLabel {
- margin-top: 15px;
- -webkit-transform: rotate(-45deg);
- transform: rotate(-45deg);
-}
-
-.statistics-chart {
- height: 270px;
- width: 100%;
- margin-bottom: 20px;
- font-size: 14px;
-}
-
-.metrics-chart {
- width: 240px;
- margin: 50px auto 12px;
- padding-bottom: 40px;
-}
-
-.report-chart {
- height: 405px;
-}
-
-.host-configuration-chart {
- width: 240px;
- margin: 25px auto;
-}
-
-#hosts {
- .statistics-chart {
- height: 230px;
- }
-}
-
-.reset-zoom {
- position: absolute;
-}
-
-#legendContainer table {
- width: 100%;
-}
-
-.legend td.legendColorBox,
-#legendContainer td.legendColorBox {
- &:hover,
- &.disabled:hover {
- background-color: #0069d6;
- color: white;
- cursor: pointer;
- }
-
- &.disabled {
- opacity: (0.3);
- }
-}
-
-#factChartModalBody {
- min-height: 500px;
- display: flex;
- align-items: center;
- justify-content: center;
-}
diff --git a/app/assets/stylesheets/hosts.scss b/app/assets/stylesheets/hosts.scss
index c2c7cbd33b4..72987df8dd6 100644
--- a/app/assets/stylesheets/hosts.scss
+++ b/app/assets/stylesheets/hosts.scss
@@ -1,3 +1,20 @@
+#hosts .stats-well {
+ min-height: 270px;
+}
+
+#reports .stats-well {
+ min-height: 380px;
+}
+
+.host-configuration-chart {
+ width: 240px;
+ margin: 25px auto;
+}
+
+.report-chart {
+ height: 405px;
+}
+
#review_before_build {
#build_form {
padding: 0;
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 62f92a7dff7..02cc4aeb214 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -224,7 +224,8 @@ def edit_select(object, property, options = {})
end
def flot_pie_chart(name, title, data, options = {})
- Foreman::Deprecation.deprecation_warning('2.6', '#flot_pie_chart is now rendered by react Donut chart with default configuration, please render the donut chart directly.')
+ Foreman::Deprecation.deprecation_warning('3.1', '#flot_pie_chart is now rendered by react Donut chart with default configuration. '\
+ 'Please render the Donut chart component directly.')
data = data.map { |k, v| [k.to_s.humanize, v] } if data.is_a?(Hash)
react_component('ChartBox', type: 'donut',
status: 'RESOLVED',
@@ -246,39 +247,10 @@ def flot_chart(name, xaxis_label, yaxis_label, data, options = {})
end
def flot_bar_chart(name, xaxis_label, yaxis_label, data, options = {})
- Foreman::Deprecation.deprecation_warning('2.6', '#flot_bar_chart is rendering its react version by default now. '\
- 'You can fall back by use_flot=true option, but that will go away in the 3.0. '\
+ Foreman::Deprecation.deprecation_warning('3.1', '#flot_bar_chart is rendering its react version now. '\
'Please move to rendering React Component directly.')
- if options.delete(:use_flot)
- i = 0
- ticks = nil
- if data.is_a?(Array)
- data = data.map do |kv|
- ticks ||= []
- ticks << [i += 1, kv[0].to_s.humanize]
- [i, kv[1]]
- end
- elsif data.is_a?(Hash)
- data = data.map do |k, v|
- ticks ||= []
- ticks << [i += 1, k.to_s.humanize]
- [i, v]
- end
- end
-
- content_tag(:div, nil,
- { :id => name,
- :data => {
- :'xaxis-label' => xaxis_label,
- :'yaxis-label' => yaxis_label,
- :chart => data,
- :ticks => ticks,
- },
- }.merge(options))
- else
- content_tag(:div, id: name) do
- react_component('BarChart', data: data, xAxisLabel: xaxis_label, yAxisLabel: yaxis_label)
- end
+ content_tag(:div, id: name) do
+ react_component('BarChart', data: data, xAxisLabel: xaxis_label, yAxisLabel: yaxis_label)
end
end
diff --git a/app/views/about/index.html.erb b/app/views/about/index.html.erb
index f4d20531bc5..fba505593e3 100644
--- a/app/views/about/index.html.erb
+++ b/app/views/about/index.html.erb
@@ -1,5 +1,5 @@
<% title _("About") %>
-<%= javascript 'proxy_status', 'charts', 'about' %>
+<%= javascript 'proxy_status', 'about' %>
diff --git a/app/views/dashboard/index.html.erb b/app/views/dashboard/index.html.erb
index d9482af22e1..1a9201e0734 100644
--- a/app/views/dashboard/index.html.erb
+++ b/app/views/dashboard/index.html.erb
@@ -1,4 +1,3 @@
-<%= javascript 'charts' %>
<% title _('Overview') %>
<%= title_actions dashboard_actions %>
diff --git a/app/views/hosts/_form.html.erb b/app/views/hosts/_form.html.erb
index 62f7ae5bc6a..cf107cc90ef 100644
--- a/app/views/hosts/_form.html.erb
+++ b/app/views/hosts/_form.html.erb
@@ -1,4 +1,4 @@
-<%= javascript 'hosts', 'host_edit', 'host_edit_interfaces', 'charts' %>
+<%= javascript 'hosts', 'host_edit', 'host_edit_interfaces' %>
<%= render "hosts/dhcp_lease_errors" if has_dhcp_lease_errors?(@host.errors) %>
<%= render "hosts/conflicts" if (!has_dhcp_lease_errors?(@host.errors) && has_conflicts?(@host.errors)) %>
<%= render "hosts/progress" %>
diff --git a/app/views/hosts/show.html.erb b/app/views/hosts/show.html.erb
index d2c9831eec2..c5387786bad 100644
--- a/app/views/hosts/show.html.erb
+++ b/app/views/hosts/show.html.erb
@@ -1,4 +1,4 @@
-<% javascript 'charts', 'hosts' %>
+<% javascript 'hosts' %>
<% title @host.to_label,
text: @host.to_label,
icon: {
diff --git a/app/views/smart_proxies/index.html.erb b/app/views/smart_proxies/index.html.erb
index 5f97fca868b..286b867e3e5 100644
--- a/app/views/smart_proxies/index.html.erb
+++ b/app/views/smart_proxies/index.html.erb
@@ -1,5 +1,5 @@
<% title _("Smart Proxies") %>
-<%= javascript 'proxy_status', 'charts' %>
+<%= javascript 'proxy_status' %>
<% title_actions new_link(_("Create Smart Proxy")),
documentation_button('4.3SmartProxies') %>
diff --git a/app/views/smart_proxies/plugins/_puppet.html.erb b/app/views/smart_proxies/plugins/_puppet.html.erb
index edd7ab91d0e..f828ddc0f13 100644
--- a/app/views/smart_proxies/plugins/_puppet.html.erb
+++ b/app/views/smart_proxies/plugins/_puppet.html.erb
@@ -1,4 +1,3 @@
-<% javascript 'charts' %>
<%= spinner %>
diff --git a/app/views/smart_proxies/show.html.erb b/app/views/smart_proxies/show.html.erb
index 4b80c6ed3b8..25c7a621ac5 100644
--- a/app/views/smart_proxies/show.html.erb
+++ b/app/views/smart_proxies/show.html.erb
@@ -1,5 +1,5 @@
<% title(@smart_proxy.to_label) %>
-<%= javascript 'proxy_status', 'charts' %>
+<%= javascript 'proxy_status' %>
<%= smart_proxy_title_actions(@smart_proxy, authorizer) %>
<% service_features = services_tab_features(@smart_proxy) %>
<% tab_features = tabbed_features(@smart_proxy) %>
diff --git a/vendor/assets/javascripts/jquery.flot.axislabels.js b/vendor/assets/javascripts/jquery.flot.axislabels.js
deleted file mode 100644
index c4b3bca95bc..00000000000
--- a/vendor/assets/javascripts/jquery.flot.axislabels.js
+++ /dev/null
@@ -1,466 +0,0 @@
-/*
-Axis Labels Plugin for flot.
-http://github.com/markrcote/flot-axislabels
-
-Original code is Copyright (c) 2010 Xuan Luo.
-Original code was released under the GPLv3 license by Xuan Luo, September 2010.
-Original code was rereleased under the MIT license by Xuan Luo, April 2012.
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-"Software"), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-(function ($) {
- var options = {
- axisLabels: {
- show: true
- }
- };
-
- function canvasSupported() {
- return !!document.createElement('canvas').getContext;
- }
-
- function canvasTextSupported() {
- if (!canvasSupported()) {
- return false;
- }
- var dummy_canvas = document.createElement('canvas');
- var context = dummy_canvas.getContext('2d');
- return typeof context.fillText == 'function';
- }
-
- function css3TransitionSupported() {
- var div = document.createElement('div');
- return typeof div.style.MozTransition != 'undefined' // Gecko
- || typeof div.style.OTransition != 'undefined' // Opera
- || typeof div.style.webkitTransition != 'undefined' // WebKit
- || typeof div.style.transition != 'undefined';
- }
-
-
- function AxisLabel(axisName, position, padding, plot, opts) {
- this.axisName = axisName;
- this.position = position;
- this.padding = padding;
- this.plot = plot;
- this.opts = opts;
- this.width = 0;
- this.height = 0;
- }
-
- AxisLabel.prototype.cleanup = function() {
- };
-
-
- CanvasAxisLabel.prototype = new AxisLabel();
- CanvasAxisLabel.prototype.constructor = CanvasAxisLabel;
- function CanvasAxisLabel(axisName, position, padding, plot, opts) {
- AxisLabel.prototype.constructor.call(this, axisName, position, padding,
- plot, opts);
- }
-
- CanvasAxisLabel.prototype.calculateSize = function() {
- if (!this.opts.axisLabelFontSizePixels)
- this.opts.axisLabelFontSizePixels = 14;
- if (!this.opts.axisLabelFontFamily)
- this.opts.axisLabelFontFamily = 'sans-serif';
-
- var textWidth = this.opts.axisLabelFontSizePixels + this.padding;
- var textHeight = this.opts.axisLabelFontSizePixels + this.padding;
- if (this.position == 'left' || this.position == 'right') {
- this.width = this.opts.axisLabelFontSizePixels + this.padding;
- this.height = 0;
- } else {
- this.width = 0;
- this.height = this.opts.axisLabelFontSizePixels + this.padding;
- }
- };
-
- CanvasAxisLabel.prototype.draw = function(box) {
- if (!this.opts.axisLabelColour)
- this.opts.axisLabelColour = 'black';
- var ctx = this.plot.getCanvas().getContext('2d');
- ctx.save();
- ctx.font = this.opts.axisLabelFontSizePixels + 'px ' +
- this.opts.axisLabelFontFamily;
- ctx.fillStyle = this.opts.axisLabelColour;
- var width = ctx.measureText(this.opts.axisLabel).width;
- var height = this.opts.axisLabelFontSizePixels;
- var x, y, angle = 0;
- if (this.position == 'top') {
- x = box.left + box.width/2 - width/2;
- y = box.top + height*0.72;
- } else if (this.position == 'bottom') {
- x = box.left + box.width/2 - width/2;
- y = box.top + box.height - height*0.72;
- } else if (this.position == 'left') {
- x = box.left + height*0.72;
- y = box.height/2 + box.top + width/2;
- angle = -Math.PI/2;
- } else if (this.position == 'right') {
- x = box.left + box.width - height*0.72;
- y = box.height/2 + box.top - width/2;
- angle = Math.PI/2;
- }
- ctx.translate(x, y);
- ctx.rotate(angle);
- ctx.fillText(this.opts.axisLabel, 0, 0);
- ctx.restore();
- };
-
-
- HtmlAxisLabel.prototype = new AxisLabel();
- HtmlAxisLabel.prototype.constructor = HtmlAxisLabel;
- function HtmlAxisLabel(axisName, position, padding, plot, opts) {
- AxisLabel.prototype.constructor.call(this, axisName, position,
- padding, plot, opts);
- this.elem = null;
- }
-
- HtmlAxisLabel.prototype.calculateSize = function() {
- var elem = $('
' +
- this.opts.axisLabel + '
');
- this.plot.getPlaceholder().append(elem);
- // store height and width of label itself, for use in draw()
- this.labelWidth = elem.outerWidth(true);
- this.labelHeight = elem.outerHeight(true);
- elem.remove();
-
- this.width = this.height = 0;
- if (this.position == 'left' || this.position == 'right') {
- this.width = this.labelWidth + this.padding;
- } else {
- this.height = this.labelHeight + this.padding;
- }
- };
-
- HtmlAxisLabel.prototype.cleanup = function() {
- if (this.elem) {
- this.elem.remove();
- }
- };
-
- HtmlAxisLabel.prototype.draw = function(box) {
- this.plot.getPlaceholder().find('#' + this.axisName + 'Label').remove();
- this.elem = $('
'
- + this.opts.axisLabel + '
');
- this.plot.getPlaceholder().append(this.elem);
- if (this.position == 'top') {
- this.elem.css('left', box.left + box.width/2 - this.labelWidth/2 +
- 'px');
- this.elem.css('top', box.top + 'px');
- } else if (this.position == 'bottom') {
- this.elem.css('left', box.left + box.width/2 - this.labelWidth/2 +
- 'px');
- this.elem.css('top', box.top + box.height - this.labelHeight +
- 'px');
- } else if (this.position == 'left') {
- this.elem.css('top', box.top + box.height/2 - this.labelHeight/2 +
- 'px');
- this.elem.css('left', box.left + 'px');
- } else if (this.position == 'right') {
- this.elem.css('top', box.top + box.height/2 - this.labelHeight/2 +
- 'px');
- this.elem.css('left', box.left + box.width - this.labelWidth +
- 'px');
- }
- };
-
-
- CssTransformAxisLabel.prototype = new HtmlAxisLabel();
- CssTransformAxisLabel.prototype.constructor = CssTransformAxisLabel;
- function CssTransformAxisLabel(axisName, position, padding, plot, opts) {
- HtmlAxisLabel.prototype.constructor.call(this, axisName, position,
- padding, plot, opts);
- }
-
- CssTransformAxisLabel.prototype.calculateSize = function() {
- HtmlAxisLabel.prototype.calculateSize.call(this);
- this.width = this.height = 0;
- if (this.position == 'left' || this.position == 'right') {
- this.width = this.labelHeight + this.padding;
- } else {
- this.height = this.labelHeight + this.padding;
- }
- };
-
- CssTransformAxisLabel.prototype.transforms = function(degrees, x, y) {
- var stransforms = {
- '-moz-transform': '',
- '-webkit-transform': '',
- '-o-transform': '',
- '-ms-transform': ''
- };
- if (x != 0 || y != 0) {
- var stdTranslate = ' translate(' + x + 'px, ' + y + 'px)';
- stransforms['-moz-transform'] += stdTranslate;
- stransforms['-webkit-transform'] += stdTranslate;
- stransforms['-o-transform'] += stdTranslate;
- stransforms['-ms-transform'] += stdTranslate;
- }
- if (degrees != 0) {
- var rotation = degrees / 90;
- var stdRotate = ' rotate(' + degrees + 'deg)';
- stransforms['-moz-transform'] += stdRotate;
- stransforms['-webkit-transform'] += stdRotate;
- stransforms['-o-transform'] += stdRotate;
- stransforms['-ms-transform'] += stdRotate;
- }
- var s = 'top: 0; left: 0; ';
- for (var prop in stransforms) {
- if (stransforms[prop]) {
- s += prop + ':' + stransforms[prop] + ';';
- }
- }
- s += ';';
- return s;
- };
-
- CssTransformAxisLabel.prototype.calculateOffsets = function(box) {
- var offsets = { x: 0, y: 0, degrees: 0 };
- if (this.position == 'bottom') {
- offsets.x = box.left + box.width/2 - this.labelWidth/2;
- offsets.y = box.top + box.height - this.labelHeight;
- } else if (this.position == 'top') {
- offsets.x = box.left + box.width/2 - this.labelWidth/2;
- offsets.y = box.top;
- } else if (this.position == 'left') {
- offsets.degrees = -90;
- offsets.x = box.left - this.labelWidth/2 + this.labelHeight/2;
- offsets.y = box.height/2 + box.top;
- } else if (this.position == 'right') {
- offsets.degrees = 90;
- offsets.x = box.left + box.width - this.labelWidth/2
- - this.labelHeight/2;
- offsets.y = box.height/2 + box.top;
- }
- offsets.x = Math.round(offsets.x);
- offsets.y = Math.round(offsets.y);
-
- return offsets;
- };
-
- CssTransformAxisLabel.prototype.draw = function(box) {
- this.plot.getPlaceholder().find("." + this.axisName + "Label").remove();
- var offsets = this.calculateOffsets(box);
- this.elem = $('
' + this.opts.axisLabel + '
');
- this.plot.getPlaceholder().append(this.elem);
- };
-
-
- IeTransformAxisLabel.prototype = new CssTransformAxisLabel();
- IeTransformAxisLabel.prototype.constructor = IeTransformAxisLabel;
- function IeTransformAxisLabel(axisName, position, padding, plot, opts) {
- CssTransformAxisLabel.prototype.constructor.call(this, axisName,
- position, padding,
- plot, opts);
- this.requiresResize = false;
- }
-
- IeTransformAxisLabel.prototype.transforms = function(degrees, x, y) {
- // I didn't feel like learning the crazy Matrix stuff, so this uses
- // a combination of the rotation transform and CSS positioning.
- var s = '';
- if (degrees != 0) {
- var rotation = degrees/90;
- while (rotation < 0) {
- rotation += 4;
- }
- s += ' filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=' + rotation + '); ';
- // see below
- this.requiresResize = (this.position == 'right');
- }
- if (x != 0) {
- s += 'left: ' + x + 'px; ';
- }
- if (y != 0) {
- s += 'top: ' + y + 'px; ';
- }
- return s;
- };
-
- IeTransformAxisLabel.prototype.calculateOffsets = function(box) {
- var offsets = CssTransformAxisLabel.prototype.calculateOffsets.call(
- this, box);
- // adjust some values to take into account differences between
- // CSS and IE rotations.
- if (this.position == 'top') {
- // FIXME: not sure why, but placing this exactly at the top causes
- // the top axis label to flip to the bottom...
- offsets.y = box.top + 1;
- } else if (this.position == 'left') {
- offsets.x = box.left;
- offsets.y = box.height/2 + box.top - this.labelWidth/2;
- } else if (this.position == 'right') {
- offsets.x = box.left + box.width - this.labelHeight;
- offsets.y = box.height/2 + box.top - this.labelWidth/2;
- }
- return offsets;
- };
-
- IeTransformAxisLabel.prototype.draw = function(box) {
- CssTransformAxisLabel.prototype.draw.call(this, box);
- if (this.requiresResize) {
- this.elem = this.plot.getPlaceholder().find("." + this.axisName +
- "Label");
- // Since we used CSS positioning instead of transforms for
- // translating the element, and since the positioning is done
- // before any rotations, we have to reset the width and height
- // in case the browser wrapped the text (specifically for the
- // y2axis).
- this.elem.css('width', this.labelWidth);
- this.elem.css('height', this.labelHeight);
- }
- };
-
-
- function init(plot) {
- plot.hooks.processOptions.push(function (plot, options) {
-
- if (!options.axisLabels.show)
- return;
-
- // This is kind of a hack. There are no hooks in Flot between
- // the creation and measuring of the ticks (setTicks, measureTickLabels
- // in setupGrid() ) and the drawing of the ticks and plot box
- // (insertAxisLabels in setupGrid() ).
- //
- // Therefore, we use a trick where we run the draw routine twice:
- // the first time to get the tick measurements, so that we can change
- // them, and then have it draw it again.
- var secondPass = false;
-
- var axisLabels = {};
- var axisOffsetCounts = { left: 0, right: 0, top: 0, bottom: 0 };
-
- var defaultPadding = 2; // padding between axis and tick labels
- plot.hooks.draw.push(function (plot, ctx) {
- var hasAxisLabels = false;
- if (!secondPass) {
- // MEASURE AND SET OPTIONS
- $.each(plot.getAxes(), function(axisName, axis) {
- var opts = axis.options // Flot 0.7
- || plot.getOptions()[axisName]; // Flot 0.6
-
- // Handle redraws initiated outside of this plug-in.
- if (axisName in axisLabels) {
- axis.labelHeight = axis.labelHeight -
- axisLabels[axisName].height;
- axis.labelWidth = axis.labelWidth -
- axisLabels[axisName].width;
- opts.labelHeight = axis.labelHeight;
- opts.labelWidth = axis.labelWidth;
- axisLabels[axisName].cleanup();
- delete axisLabels[axisName];
- }
-
- if (!opts || !opts.axisLabel || !axis.show)
- return;
-
- hasAxisLabels = true;
- var renderer = null;
-
- if (!opts.axisLabelUseHtml &&
- navigator.appName == 'Microsoft Internet Explorer') {
- var ua = navigator.userAgent;
- var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
- if (re.exec(ua) != null) {
- rv = parseFloat(RegExp.$1);
- }
- if (rv >= 9 && !opts.axisLabelUseCanvas && !opts.axisLabelUseHtml) {
- renderer = CssTransformAxisLabel;
- } else if (!opts.axisLabelUseCanvas && !opts.axisLabelUseHtml) {
- renderer = IeTransformAxisLabel;
- } else if (opts.axisLabelUseCanvas) {
- renderer = CanvasAxisLabel;
- } else {
- renderer = HtmlAxisLabel;
- }
- } else {
- if (opts.axisLabelUseHtml || (!css3TransitionSupported() && !canvasTextSupported()) && !opts.axisLabelUseCanvas) {
- renderer = HtmlAxisLabel;
- } else if (opts.axisLabelUseCanvas || !css3TransitionSupported()) {
- renderer = CanvasAxisLabel;
- } else {
- renderer = CssTransformAxisLabel;
- }
- }
-
- var padding = opts.axisLabelPadding === undefined ?
- defaultPadding : opts.axisLabelPadding;
-
- axisLabels[axisName] = new renderer(axisName,
- axis.position, padding,
- plot, opts);
-
- // flot interprets axis.labelHeight and .labelWidth as
- // the height and width of the tick labels. We increase
- // these values to make room for the axis label and
- // padding.
-
- axisLabels[axisName].calculateSize();
-
- // AxisLabel.height and .width are the size of the
- // axis label and padding.
- // Just set opts here because axis will be sorted out on
- // the redraw.
-
- opts.labelHeight = axis.labelHeight +
- axisLabels[axisName].height;
- opts.labelWidth = axis.labelWidth +
- axisLabels[axisName].width;
- });
-
- // If there are axis labels, re-draw with new label widths and
- // heights.
-
- if (hasAxisLabels) {
- secondPass = true;
- plot.setupGrid();
- plot.draw();
- }
- } else {
- secondPass = false;
- // DRAW
- $.each(plot.getAxes(), function(axisName, axis) {
- var opts = axis.options // Flot 0.7
- || plot.getOptions()[axisName]; // Flot 0.6
- if (!opts || !opts.axisLabel || !axis.show)
- return;
-
- axisLabels[axisName].draw(axis.box);
- });
- }
- });
- });
- }
-
-
- $.plot.plugins.push({
- init: init,
- options: options,
- name: 'axisLabels',
- version: '2.0'
- });
-})(jQuery);
diff --git a/vendor/assets/javascripts/vendor.js b/vendor/assets/javascripts/vendor.js
deleted file mode 100644
index 1ecd1829dfb..00000000000
--- a/vendor/assets/javascripts/vendor.js
+++ /dev/null
@@ -1 +0,0 @@
-//= require jquery.flot.axislabels
diff --git a/webpack/assets/javascripts/dashboard/index.js b/webpack/assets/javascripts/dashboard/index.js
index ed5af27a32c..69e8a926cc9 100644
--- a/webpack/assets/javascripts/dashboard/index.js
+++ b/webpack/assets/javascripts/dashboard/index.js
@@ -141,6 +141,5 @@ function serializeGrid() {
export function widgetLoaded(widget) {
// TODO: remove this once we no longer use legacy charts in the dashboard widgets.
- window.refreshCharts();
activateTooltips(widget);
}
diff --git a/webpack/assets/javascripts/react_app/components/FactCharts/FactChart.js b/webpack/assets/javascripts/react_app/components/FactCharts/FactChart.js
index 5f9f6b63b0c..195422c656d 100644
--- a/webpack/assets/javascripts/react_app/components/FactCharts/FactChart.js
+++ b/webpack/assets/javascripts/react_app/components/FactCharts/FactChart.js
@@ -11,6 +11,7 @@ import {
ngettext as n__,
translate as __,
} from '../../../react_app/common/I18n';
+import './FactChart.scss';
const FactChart = ({
hostsCount,
@@ -51,7 +52,7 @@ const FactChart = ({
);
return (
-
+
@@ -71,7 +72,7 @@ const FactChart = ({
-
+
{[chart, error]}
diff --git a/webpack/assets/javascripts/react_app/components/FactCharts/FactChart.scss b/webpack/assets/javascripts/react_app/components/FactCharts/FactChart.scss
new file mode 100644
index 00000000000..f53c5a4b3f2
--- /dev/null
+++ b/webpack/assets/javascripts/react_app/components/FactCharts/FactChart.scss
@@ -0,0 +1,8 @@
+.fact-chart {
+ .modal-body {
+ min-height: 500px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+}
diff --git a/webpack/assets/javascripts/react_app/components/FactCharts/__test__/__snapshots__/FactChart.test.js.snap b/webpack/assets/javascripts/react_app/components/FactCharts/__test__/__snapshots__/FactChart.test.js.snap
index 70092190425..ea1b8d38510 100644
--- a/webpack/assets/javascripts/react_app/components/FactCharts/__test__/__snapshots__/FactChart.test.js.snap
+++ b/webpack/assets/javascripts/react_app/components/FactCharts/__test__/__snapshots__/FactChart.test.js.snap
@@ -1,7 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`factCharts should render closed 1`] = `
-