[Rt-commit] rt branch, 4.6/jschart-with-new-themes, updated. rt-4.4.4-560-ge4bca2a800
? sunnavy
sunnavy at bestpractical.com
Fri Dec 6 15:04:04 EST 2019
The branch, 4.6/jschart-with-new-themes has been updated
via e4bca2a800cf3724b5d016b1e64629460cd3271f (commit)
via b786005b408dc0078aaf2ac154e227a4f3d2a3b9 (commit)
via 7409bc6189339fc7e5c7dbb1d895eb43e982756c (commit)
via a7b50229bac87e7018046f3755167df45397f4b6 (commit)
via 220d8ec50bb1c31a04b2b7374fba3c99394fdffe (commit)
via d754e41b5f471c9fe9056d296f0edca959c84887 (commit)
from ebac420906dc39b234a4586998e8095785549ab3 (commit)
Summary of changes:
share/html/Search/Chart | 2 +-
share/html/Search/Elements/Chart | 30 +++++++++++++++-----------
share/html/Search/Elements/SelectChartFunction | 2 +-
share/html/Search/Elements/SelectGroupBy | 2 +-
share/html/Search/JSChart | 8 ++++---
share/static/css/elevator-light/misc.css | 4 ++++
share/static/js/event-registration.js | 3 +++
7 files changed, 32 insertions(+), 19 deletions(-)
- Log -----------------------------------------------------------------
commit d754e41b5f471c9fe9056d296f0edca959c84887
Author: sunnavy <sunnavy at bestpractical.com>
Date: Sat Dec 7 01:36:04 2019 +0800
Explicitly convert cascaded select to selectpicker
Adding class "selectpicker" could do the conversion automatically, but
we found out that in Firefox, the conversion happened too early, before
js-generated groups/complete selects are populated, which breaked the
logic(generated new selects were wrongly created in .bootstrap-select
div) and caused groups selects not to show at all :/
To make sure selectpicker conversion happens later, explicit doing it is
the easiest approach.
diff --git a/share/html/Search/Elements/SelectChartFunction b/share/html/Search/Elements/SelectChartFunction
index 587071de02..683adc9f5f 100644
--- a/share/html/Search/Elements/SelectChartFunction
+++ b/share/html/Search/Elements/SelectChartFunction
@@ -45,7 +45,7 @@
%# those contributions and any derivatives thereof.
%#
%# END BPS TAGGED BLOCK }}}
-<select name="<% $Name %>" class="cascade-by-optgroup selectpicker">
+<select name="<% $Name %>" class="cascade-by-optgroup">
% if ( $ShowEmpty ) {
<option value=""> </option>
% }
diff --git a/share/html/Search/Elements/SelectGroupBy b/share/html/Search/Elements/SelectGroupBy
index 1d725fc94c..95b5ee1fb8 100644
--- a/share/html/Search/Elements/SelectGroupBy
+++ b/share/html/Search/Elements/SelectGroupBy
@@ -51,7 +51,7 @@ $Default => 'Status'
$Query => ''
$ShowEmpty => 0
</%args>
-<select name="<% $Name %>" class="cascade-by-optgroup selectpicker">
+<select name="<% $Name %>" class="cascade-by-optgroup">
% if ( $ShowEmpty ) {
<option value=""> </option>
% }
diff --git a/share/static/js/event-registration.js b/share/static/js/event-registration.js
index a83bc17f77..03ba528926 100644
--- a/share/static/js/event-registration.js
+++ b/share/static/js/event-registration.js
@@ -70,6 +70,9 @@ jQuery(function() {
if (selected === undefined) selected = "";
jQuery('option[value="' + selected + '"]', groups).attr("selected", "selected");
+ jQuery(this).selectpicker();
+ groups.selectpicker();
+
// Wire it all up
groups.change(function(){
var name = this.name.replace(/-Groups$/, '');
commit 220d8ec50bb1c31a04b2b7374fba3c99394fdffe
Author: sunnavy <sunnavy at bestpractical.com>
Date: Sat Dec 7 01:36:28 2019 +0800
Reduce legend font size from 1.5rem to 1rem
We use this element in search chart page. Bootstrap's default
size(1.5rem) is too big. Sadly there is no scss variables that could
customize this, so I chose to override it in our own css file.
diff --git a/share/static/css/elevator-light/misc.css b/share/static/css/elevator-light/misc.css
index fb87202b92..85546a5f75 100644
--- a/share/static/css/elevator-light/misc.css
+++ b/share/static/css/elevator-light/misc.css
@@ -117,3 +117,7 @@ svg.icon-bordered {
border-radius: 0.1em;
padding: 0.2em 0.25em 0.15em;
}
+
+legend {
+ font-size: 1rem;
+}
commit a7b50229bac87e7018046f3755167df45397f4b6
Author: sunnavy <sunnavy at bestpractical.com>
Date: Sat Dec 7 02:28:27 2019 +0800
Default pie chart to 400px: 600px is too big
diff --git a/share/html/Search/Chart b/share/html/Search/Chart
index e5cb765bbe..eac1da5466 100644
--- a/share/html/Search/Chart
+++ b/share/html/Search/Chart
@@ -63,7 +63,7 @@ my $font = $font_config{ $session{CurrentUser}->UserObj->Lang || '' }
|| $font_config{'others'};
s/\D//g for grep defined, $Width, $Height;
-$Width ||= 600;
+$Width ||= ($ChartStyle =~ /\bpie\b/ ? 400 : 600);
$Height ||= ($ChartStyle =~ /\bpie\b/ ? $Width : 400);
$Height = $Width if $ChartStyle =~ /\bpie\b/;
diff --git a/share/html/Search/JSChart b/share/html/Search/JSChart
index ee62da61e0..b001164e50 100644
--- a/share/html/Search/JSChart
+++ b/share/html/Search/JSChart
@@ -171,7 +171,7 @@ jQuery('#search-chart').click(function(e) {
<%init>
s/\D//g for grep defined, $Width, $Height;
-$Width ||= 600;
+$Width ||= ($ChartStyle =~ /\bpie\b/ ? 400 : 600);
$Height ||= ($ChartStyle =~ /\bpie\b/ ? $Width : 400);
$Height = $Width if $ChartStyle =~ /\bpie\b/;
commit 7409bc6189339fc7e5c7dbb1d895eb43e982756c
Author: sunnavy <sunnavy at bestpractical.com>
Date: Sat Dec 7 02:51:01 2019 +0800
Fix indentation for chart-wrapper, no other changes
diff --git a/share/html/Search/Elements/Chart b/share/html/Search/Elements/Chart
index a3af090ad3..079deca070 100644
--- a/share/html/Search/Elements/Chart
+++ b/share/html/Search/Elements/Chart
@@ -75,30 +75,30 @@ if ( RT->Config->Get('EnableJSChart') || !RT->Config->Get('DisableGD') ) {
</%init>
<div class="chart-wrapper">
-<div class="form-row">
-<div class="col-md-auto">
+ <div class="form-row">
+ <div class="col-md-auto">
% if ( ($ChartStyle || '') =~ /\b(pie|bar|line)\b/ ) {
-<div class="chart image <% $1 %>">
+ <div class="chart image <% $1 %>">
% if ( RT->Config->Get('EnableJSChart', $session{CurrentUser}) ) {
- <& /Search/JSChart, Cache => $key, %ARGS, GroupBy => \@GroupBy &>
+ <& /Search/JSChart, Cache => $key, %ARGS, GroupBy => \@GroupBy &>
% } elsif (RT->Config->Get('DisableGD')) {
-<% loc('Graphical charts are not available.') %><br />
+ <% loc('Graphical charts are not available.') %><br />
% } else {
-<img src="<% RT->Config->Get('WebPath') %>/Search/Chart?Cache=<% $key |un %>&<% $query_string |n %>" />
+ <img src="<% RT->Config->Get('WebPath') %>/Search/Chart?Cache=<% $key |un %>&<% $query_string |n %>" />
% }
-</div>
+ </div>
% }
-</div>
-<div class="col-md-auto">
+ </div>
+ <div class="col-md-auto">
% if ( ($ChartStyle || '') =~ /\btable\b/ ) {
-<& ChartTable, %ARGS, Table => { $report->FormatTable( %columns ) } &>
+ <& ChartTable, %ARGS, Table => { $report->FormatTable( %columns ) } &>
% }
% $m->callback( CallbackName => 'AfterChartTable', ARGSRef => \%ARGS );
-</div>
-</div>
+ </div>
+ </div>
% if ( ($ChartStyle || '') =~ /\bsql\b/ ) {
-<div class="query"><span class="label"><% loc('Query') %>:</span><span class="value"><% $Query %></span></div>
+ <div class="query"><span class="label"><% loc('Query') %>:</span><span class="value"><% $Query %></span></div>
% }
</div>
commit b786005b408dc0078aaf2ac154e227a4f3d2a3b9
Author: sunnavy <sunnavy at bestpractical.com>
Date: Sat Dec 7 03:15:45 2019 +0800
Center search chart/table
This is achieved generally by wrapping the 2-column content into another
single-column, which takes up the whole row and has auto margin
diff --git a/share/html/Search/Elements/Chart b/share/html/Search/Elements/Chart
index 079deca070..862765d18c 100644
--- a/share/html/Search/Elements/Chart
+++ b/share/html/Search/Elements/Chart
@@ -76,25 +76,29 @@ if ( RT->Config->Get('EnableJSChart') || !RT->Config->Get('DisableGD') ) {
</%init>
<div class="chart-wrapper">
<div class="form-row">
- <div class="col-md-auto">
+ <div class="col-auto mx-auto">
+ <div class="form-row">
+ <div class="col-auto">
% if ( ($ChartStyle || '') =~ /\b(pie|bar|line)\b/ ) {
- <div class="chart image <% $1 %>">
+ <div class="chart image <% $1 %> w-auto">
% if ( RT->Config->Get('EnableJSChart', $session{CurrentUser}) ) {
- <& /Search/JSChart, Cache => $key, %ARGS, GroupBy => \@GroupBy &>
+ <& /Search/JSChart, Cache => $key, %ARGS, GroupBy => \@GroupBy &>
% } elsif (RT->Config->Get('DisableGD')) {
- <% loc('Graphical charts are not available.') %><br />
+ <% loc('Graphical charts are not available.') %><br />
% } else {
- <img src="<% RT->Config->Get('WebPath') %>/Search/Chart?Cache=<% $key |un %>&<% $query_string |n %>" />
+ <img src="<% RT->Config->Get('WebPath') %>/Search/Chart?Cache=<% $key |un %>&<% $query_string |n %>" />
% }
- </div>
+ </div>
% }
- </div>
- <div class="col-md-auto">
+ </div>
+ <div class="col-auto">
% if ( ($ChartStyle || '') =~ /\btable\b/ ) {
- <& ChartTable, %ARGS, Table => { $report->FormatTable( %columns ) } &>
+ <& ChartTable, %ARGS, Table => { $report->FormatTable( %columns ) } &>
% }
% $m->callback( CallbackName => 'AfterChartTable', ARGSRef => \%ARGS );
+ </div>
+ </div>
</div>
</div>
commit e4bca2a800cf3724b5d016b1e64629460cd3271f
Author: sunnavy <sunnavy at bestpractical.com>
Date: Sat Dec 7 03:35:41 2019 +0800
Support multiple js charts on a single page
This is for dashboards that contain multiple saved chart searches.
Previously we had canvas id hard-coded, thus all the charts were wrongly
drawn on the single canvas.
diff --git a/share/html/Search/JSChart b/share/html/Search/JSChart
index b001164e50..d76f5b1a0f 100644
--- a/share/html/Search/JSChart
+++ b/share/html/Search/JSChart
@@ -53,9 +53,11 @@ $ChartStyle => 'bar+table+sql'
@ChartFunction => 'COUNT'
$Width => undef
$Height => undef
+$SavedSearchId => ''
</%args>
-<canvas id="search-chart" width="<% $Width %>" height="<% $Height %>"></canvas>
+% my $id = join '-', 'search-chart', $SavedSearchId || ();
+<canvas id="<% $id %>" width="<% $Width %>" height="<% $Height %>"></canvas>
<script type="text/javascript">
var data_labels = <% JSON( \@data_labels ) |n %>;
@@ -68,7 +70,7 @@ if ( backgroundColor && backgroundColor.length ) {
}
% }
-var ctx = document.getElementById('search-chart').getContext('2d');
+var ctx = document.getElementById(<% $id |n,j %>).getContext('2d');
var searchChart = new Chart(ctx, {
type: <% $ChartStyle =~ /\b(bar|line|pie)\b/ ? $1 : 'bar' |n,j %>,
data: {
-----------------------------------------------------------------------
More information about the rt-commit
mailing list