-<div id="makechart" style="display:none;">
- [% supposed_x = header_row.shift.cell %]
-
- <fieldset>
- <legend>Draw a chart</legend>
- <ol>
- <li>
- <label for="chart-type">Chart type</label>
- <select name="chart-type" id="chart-type">
- <option value="pie">Pie</option>
- <option value="bar">Bar</option>
- <option value="line">Line</option>
- </select>
-
- <div id="chart-column-horizontal">
- <label for="horizontal">Horizontal bar:</label>
- <input id="horizontal" name="column-horizontal" type="checkbox">
- </div>
- </li>
-
- <li>
- <label for="x_element">x column:</label>
- <select id="x_element" name="x">
- <option value="[% supposed_x | html %]" selected>[% supposed_x | html %]</option>
- [% FOREACH header IN header_row %]
- <option value="[% header.cell | html %]">[% header.cell | html %]</option>
- [% END %]
- </select>
- </li>
-
- <div>
- <label for="include-all">Include all rows (ignore pagination)</label>
- <input id="include-all" name="chart-include-all" type="checkbox">
+<div class="modal" id="chartModal" tabindex="-1" role="dialog" aria-labelledby="chartModalLabel">
+ <div class="modal-dialog modal-wide" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="closebtn" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
+ <h4 class="modal-title" id="chartModalLabel">Chart settings</h4>
</div>
+ <div class="modal-body" id="makechart">
+ [% supposed_x = header_row.shift.cell %]
+ <fieldset class="rows">
+ <ol>
+ <li>
+ <label for="chart-type">Chart type: </label>
+ <select name="chart-type" id="chart-type">
+ <option value="pie">Pie</option>
+ <option value="bar">Bar</option>
+ <option value="line">Line</option>
+ </select>
+ </li>
+ <li id="chart-column-horizontal">
+ <label for="horizontal">Horizontal bar:</label>
+ <input id="horizontal" name="column-horizontal" type="checkbox" />
+ </li>
- <label for="exclude-last">Exclude last line (Rollup)</label>
- <input id="exclude-last" name="chart-exclude-last" type="checkbox">
-
- [% column = 1 %]
- <li>
- [% FOREACH header IN header_row %]
- <fieldset class="chart-column-conf" id="column_[% column | html %]" style="display: inline !important;">
- <legend>
- Column [% column | html %]
- <a class="chart-column-delete" href="#" data-column="[% column | html %]">
- <img src="[% interface | html %]/[% theme | html %]/img/x.png" alt="Delete" />
- </a>
- </legend>
- <div>
- <label for="y_[% column | html %]" >y:</label>
- <select id="y_[% column | html %]" name="y">
+ <li>
+ <label for="x_element">x column:</label>
+ <select id="x_element" name="x">
<option value="[% supposed_x | html %]" selected>[% supposed_x | html %]</option>
- [% FOREACH h IN header_row %]
- [% IF header.cell == h.cell %]
- <option value="[% h.cell | html %]" selected>[% h.cell | html %]</option>
- [% ELSE %]
- <option value="[% h.cell | html %]">[% h.cell | html %]</option>
- [% END %]
- [% END %]
- </select>
- </div>
-
- <div class="chart-column-group">
- [% i = 1 %]
- <label for="group_[% column | html %]">Group:</label>
- <select id="group_[% column | html %]" name="group">
- [% FOREACH h IN header_row %]
- [% IF i == column %]
- <option value="[% i | html %]" selected>[% i | html %]</option>
- [% ELSE %]
- <option value="[% i | html %]">[% i | html %]</option>
- [% END %]
- [% i = i + 1 %]
+ [% FOREACH header IN header_row %]
+ <option value="[% header.cell | html %]">[% header.cell | html %]</option>
[% END %]
</select>
- </div>
+ </li>
+
+ <li>
+ <label for="include-all">Include all rows (ignore pagination):</label>
+ <input id="include-all" name="chart-include-all" type="checkbox" />
+ </li>
- <div class="chart-column-line">
- <label for="line_[% column | html %]">line:</label>
- <input class="column-line" id="column-line" name="[% header.cell | html %]" type="checkbox">
- </div>
- </fieldset>
- [% column = column + 1 %]
- [% END %]
- </li>
+ <li>
+ <label for="exclude-last">Exclude last line (Rollup): </label>
+ <input id="exclude-last" name="chart-exclude-last" type="checkbox" />
+ </li>
+ [% column = 1 %]
+ <li class="column_config_row">
+ [% FOREACH header IN header_row %]
+ <fieldset class="chart-column-conf" id="column_[% column | html %]">
+ <legend>
+ Column [% column | html %]
+ <a class="chart-column-delete" href="#" data-column="[% column | html %]">
+ <i class="fa fa-remove error"></i>
+ </a>
+ </legend>
+ <div>
+ <label for="y_[% column | html %]" >y:</label>
+ <select id="y_[% column | html %]" name="y">
+ <option value="[% supposed_x | html %]" selected>[% supposed_x | html %]</option>
+ [% FOREACH h IN header_row %]
+ [% IF header.cell == h.cell %]
+ <option value="[% h.cell | html %]" selected>[% h.cell | html %]</option>
+ [% ELSE %]
+ <option value="[% h.cell | html %]">[% h.cell | html %]</option>
+ [% END %]
+ [% END %]
+ </select>
+ </div>
- <li>
+ <div class="chart-column-group">
+ [% i = 1 %]
+ <label for="group_[% column | html %]">Group:</label>
+ <select id="group_[% column | html %]" name="group">
+ [% FOREACH h IN header_row %]
+ [% IF i == column %]
+ <option value="[% i | html %]" selected>[% i | html %]</option>
+ [% ELSE %]
+ <option value="[% i | html %]">[% i | html %]</option>
+ [% END %]
+ [% i = i + 1 %]
+ [% END %]
+ </select>
+ </div>
+
+ <div class="chart-column-line">
+ <label for="line_[% column | html %]">Line:</label>
+ <input class="column-line" id="line_[% column | html %]" name="[% header.cell | html %]" type="checkbox" />
+ </div>
+ </fieldset>
+ [% column = column + 1 %]
+ [% END %]
+ </li>
+ </ol>
+ </fieldset>
+
+ [% item = { cell = supposed_x } %]
+ [% header_row.unshift(item) | html %]
+ </div>
+ <div class="modal-footer">
<button id="draw-chart" class="btn btn-default">Draw</button>
- </li>
- </ol>
- </fieldset>
- [% item = { cell = supposed_x } %]
- [% header_row.unshift(item) | html %]
- <div id="chart"></div>
+ <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+ </div>
+ </div>
+ </div>
</div>
resize: vertical;
}
</style>
+[% Asset.css("css/reports.css") | $raw %]
[% IF ( saved1 ) %]
- [% Asset.css("css/reports.css") | $raw %]
[% Asset.css("css/datatables.css") | $raw %]
[% END %]
[% Asset.css("lib/d3c3/c3.min.css") | $raw %]
[% IF ( execute ) %]
<h1>[% name | html %]</h1>
-[% INCLUDE 'chart.inc' %]
[% IF ( notes ) %]<p><span class="label">Notes:</span> [% notes | html %]</p>[% END %]
[% IF ( unlimited_total ) %]<p><span class="label">Total number of results:</span> [% unlimited_total | html %][% IF unlimited_total > limit %] ([% limit | html %] shown)[% END %].</p>[% END %]
<div id="sql_output" style="display:none;"><span class="label">Report SQL:</span><pre>[% sql | html %]</pre></div>
-</br>
+
+<div>
+ <a href="#" id="toggle_chart_settings_hid" class="toggle_chart_settings" style="display:none"><i class="fa fa-eye-slash"></i> Hide chart</a>
+ <a href="#" id="toggle_chart_settings_vis" class="toggle_chart_settings" style="display:none"><i class="fa fa fa-eye"></i> Show chart</a>
+</div>
+<div id="chart" class="clearfix"></div>
<form action="/cgi-bin/koha/reports/guided_reports.pl" method="get" id="limitselect">
<input type="hidden" name="phase" value="Run this report"/>
</form>
[% END %]
+
+[% INCLUDE 'chart.inc' %]
+
[% END %]
[% IF ( create ) %]
[% IF results && !errors %]
$('#draw-chart').click(function() {
- var btn_text = $("#draw-chart").html();
- $("#draw-chart").html(_("Loading..."));
-
var x_elements = $('select[name="x"]').val();
var y_elements = [];
var groups = [];
options.lines = lines;
chart = create_chart(kept_headers, kept_results, x_elements, y_elements, groups, options);
- $('#chart').prepend('<div style="font-size: 1rem; text-align: center;">' + "[% name | html %]" + '</div>');
- $('#download-chart').show();
- $("#draw-chart").html(_(btn_text));
- $("html, body").animate({ scrollTop: $(document).height() }, "slow");
+ $("#download-chart,#toggle_chart_settings_hid,#chart").show();
+ $("#toggle_chart_settings_vis").hide();
+ $("#chartModal").modal("hide");
});
[% END %]
[% IF ( create ) %]
});
[% END %]
- $(".toggle_sql").click(function(){
- $("#sql_output").toggle();
- $("#toggle_sql_hid").toggle();
- $("#toggle_sql_vis").toggle();
- });
+ $(".toggle_sql").click(function(){
+ $("#sql_output").toggle();
+ $("#toggle_sql_hid").toggle();
+ $("#toggle_sql_vis").toggle();
+ });
- $(".toggle_chart_settings").click(function(){
- $("#makechart").toggle();
- $("#toggle_chart_settings_hid").toggle();
- $("#toggle_chart_settings_vis").toggle();
- });
+ $(".toggle_chart_settings").click(function(){
+ $("#chart, #toggle_chart_settings_hid, #toggle_chart_settings_vis").toggle();
+ });
- $("#table_reports").delegate(".confirmdelete", 'click', function(){
- $(this).parents('tr').attr("class","warn");
- if(confirm(_("Are you sure you want to delete this saved report?"))){
- return true;
- } else {
- $(this).parents('tr').attr("class","");
- return false;
- }
- });
+ $("#table_reports").delegate(".confirmdelete", 'click', function(){
+ $(this).parents('tr').attr("class","warn");
+ if(confirm(_("Are you sure you want to delete this saved report?"))){
+ return true;
+ } else {
+ $(this).parents('tr').attr("class","");
+ return false;
+ }
+ });
[% IF (create || editsql || save) %]
$("#select_group").change(function() {
$(".delete").on("click",function(){
return confirmDelete(MSG_CONFIRM_DELETE);
});
+
+ $("#column_submit").submit(function() {
+ if ($("#selectedColumns option").size() < 1) {
+ alert(_("No columns selected!"));
+ return false;
+ }
+ $("#selectedColumns option").attr("selected", "selected"); // Select everything still in #selectedColumns
+ return true;
+ });
});
function addColumn() {
$("#availableColumns option:selected").clone().appendTo("#selectedColumns").attr("selected", "selected");
function delColumn() {
$("#selectedColumns option:selected").remove();
}
- $("#column_submit").submit(function() {
- if ($("#selectedColumns option").size() < 1) {
- alert(_("No columns selected!"));
- return false;
- }
- $("#selectedColumns option").attr("selected", "selected"); // Select everything still in #selectedColumns
- return true;
- });
</script>
[% END %]
projects / koha.git / commitdiff