Owen Leonard
8e1efe8f10
This patch updates a number of aspects of the reports chart creation interface: Chart creation form is now shown in a modal window, and a separate link has been added to show or hide the chart itself. Also changed: Minor markup and JavaScript cleanup. To test, apply the patch and go to Reports -> Saved reports. - Run a report which returns more than one column. - On the report results page, click the "Create chart" button. The chart settings form should appear in a modal window. - Confirm that the form controls work correctly: Each label should give focus to the correct input. Changing the chart type should show or hide the appropriate form fields. - Click the "Draw" button. The modal should disappear and the chart should be shown. - Above the chart should be a "Hide chart" link which works to hide (and then show) the chart. Signed-off-by: Pierre-Marc Thibault <pierre-marc.thibault@inLibro.com> Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de> Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
104 lines
5.9 KiB
HTML
104 lines
5.9 KiB
HTML
<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>
|
|
|
|
<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>
|
|
|
|
<li>
|
|
<label for="include-all">Include all rows (ignore pagination):</label>
|
|
<input id="include-all" name="chart-include-all" type="checkbox" />
|
|
</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>
|
|
|
|
<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>
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|