You've already forked phpmyadmin
mirror of
https://github.com/phpmyadmin/phpmyadmin.git
synced 2026-10-28 07:41:55 +03:00
Improve table chart and GIS visualization pages
- Replaces .pma-fieldset with Bootstrap card - Uses Bootstrap form styles Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>
This commit is contained in:
Maurício Meneghini Fauth
@@ -166,7 +166,7 @@ function drawChart () {
|
||||
}
|
||||
|
||||
var columnNames = [];
|
||||
$('select[name="chartXAxis"] option').each(function () {
|
||||
$('#chartXAxisSelect option').each(function () {
|
||||
columnNames.push(Functions.escapeHtml($(this).text()));
|
||||
});
|
||||
try {
|
||||
@@ -180,7 +180,7 @@ function drawChart () {
|
||||
}
|
||||
|
||||
function getSelectedSeries () {
|
||||
var val = $('select[name="chartSeries"]').val() || [];
|
||||
var val = $('#chartSeriesSelect').val() || [];
|
||||
var ret = [];
|
||||
$.each(val, function (i, v) {
|
||||
ret.push(parseInt(v, 10));
|
||||
@@ -189,47 +189,47 @@ function getSelectedSeries () {
|
||||
}
|
||||
|
||||
function onXAxisChange () {
|
||||
var $xAxisSelect = $('select[name="chartXAxis"]');
|
||||
var $xAxisSelect = $('#chartXAxisSelect');
|
||||
currentSettings.mainAxis = parseInt($xAxisSelect.val(), 10);
|
||||
if (dateTimeCols.indexOf(currentSettings.mainAxis) !== -1) {
|
||||
$('span.span_timeline').show();
|
||||
document.getElementById('timelineChartType').classList.remove('d-none');
|
||||
} else {
|
||||
$('span.span_timeline').hide();
|
||||
document.getElementById('timelineChartType').classList.add('d-none');
|
||||
if (currentSettings.type === 'timeline') {
|
||||
$('input#radio_line').prop('checked', true);
|
||||
$('#lineChartTypeRadio').prop('checked', true);
|
||||
currentSettings.type = 'line';
|
||||
}
|
||||
}
|
||||
if (numericCols.indexOf(currentSettings.mainAxis) !== -1) {
|
||||
$('span.span_scatter').show();
|
||||
document.getElementById('scatterChartType').classList.remove('d-none');
|
||||
} else {
|
||||
$('span.span_scatter').hide();
|
||||
document.getElementById('scatterChartType').classList.add('d-none');
|
||||
if (currentSettings.type === 'scatter') {
|
||||
$('input#radio_line').prop('checked', true);
|
||||
$('#lineChartTypeRadio').prop('checked', true);
|
||||
currentSettings.type = 'line';
|
||||
}
|
||||
}
|
||||
var xAxisTitle = $xAxisSelect.children('option:selected').text();
|
||||
$('input[name="xaxis_label"]').val(xAxisTitle);
|
||||
$('#xAxisLabelInput').val(xAxisTitle);
|
||||
currentSettings.xaxisLabel = xAxisTitle;
|
||||
}
|
||||
|
||||
function onDataSeriesChange () {
|
||||
var $seriesSelect = $('select[name="chartSeries"]');
|
||||
var $seriesSelect = $('#chartSeriesSelect');
|
||||
currentSettings.selectedSeries = getSelectedSeries();
|
||||
var yAxisTitle;
|
||||
if (currentSettings.selectedSeries.length === 1) {
|
||||
$('span.span_pie').show();
|
||||
document.getElementById('pieChartType').classList.remove('d-none');
|
||||
yAxisTitle = $seriesSelect.children('option:selected').text();
|
||||
} else {
|
||||
$('span.span_pie').hide();
|
||||
document.getElementById('pieChartType').classList.add('d-none');
|
||||
if (currentSettings.type === 'pie') {
|
||||
$('input#radio_line').prop('checked', true);
|
||||
$('#lineChartTypeRadio').prop('checked', true);
|
||||
currentSettings.type = 'line';
|
||||
}
|
||||
yAxisTitle = Messages.strYValues;
|
||||
}
|
||||
$('input[name="yaxis_label"]').val(yAxisTitle);
|
||||
$('#yAxisLabelInput').val(yAxisTitle);
|
||||
currentSettings.yaxisLabel = yAxisTitle;
|
||||
}
|
||||
|
||||
@@ -238,15 +238,15 @@ function onDataSeriesChange () {
|
||||
*/
|
||||
AJAX.registerTeardown('table/chart.js', function () {
|
||||
$('input[name="chartType"]').off('click');
|
||||
$('input[name="barStacked"]').off('click');
|
||||
$('input[name="chkAlternative"]').off('click');
|
||||
$('input[name="chartTitle"]').off('focus').off('keyup').off('blur');
|
||||
$('select[name="chartXAxis"]').off('change');
|
||||
$('select[name="chartSeries"]').off('change');
|
||||
$('select[name="chartSeriesColumn"]').off('change');
|
||||
$('select[name="chartValueColumn"]').off('change');
|
||||
$('input[name="xaxis_label"]').off('keyup');
|
||||
$('input[name="yaxis_label"]').off('keyup');
|
||||
$('#barStackedCheckbox').off('click');
|
||||
$('#seriesColumnCheckbox').off('click');
|
||||
$('#chartTitleInput').off('focus').off('keyup').off('blur');
|
||||
$('#chartXAxisSelect').off('change');
|
||||
$('#chartSeriesSelect').off('change');
|
||||
$('#chartSeriesColumnSelect').off('change');
|
||||
$('#chartValueColumnSelect').off('change');
|
||||
$('#xAxisLabelInput').off('keyup');
|
||||
$('#yAxisLabelInput').off('keyup');
|
||||
$('#resizer').off('resizestop');
|
||||
$('#tblchartform').off('submit');
|
||||
});
|
||||
@@ -268,20 +268,20 @@ AJAX.registerOnload('table/chart.js', function () {
|
||||
$('input[name="chartType"]').on('click', function () {
|
||||
var type = currentSettings.type = $(this).val();
|
||||
if (type === 'bar' || type === 'column' || type === 'area') {
|
||||
$('span.barStacked').show();
|
||||
document.getElementById('barStacked').classList.remove('d-none');
|
||||
} else {
|
||||
$('input[name="barStacked"]').prop('checked', false);
|
||||
$('#barStackedCheckbox').prop('checked', false);
|
||||
$.extend(true, currentSettings, { stackSeries : false });
|
||||
$('span.barStacked').hide();
|
||||
document.getElementById('barStacked').classList.add('d-none');
|
||||
}
|
||||
drawChart();
|
||||
});
|
||||
|
||||
// handle chosing alternative data format
|
||||
$('input[name="chkAlternative"]').on('click', function () {
|
||||
var $seriesColumn = $('select[name="chartSeriesColumn"]');
|
||||
var $valueColumn = $('select[name="chartValueColumn"]');
|
||||
var $chartSeries = $('select[name="chartSeries"]');
|
||||
$('#seriesColumnCheckbox').on('click', function () {
|
||||
var $seriesColumn = $('#chartSeriesColumnSelect');
|
||||
var $valueColumn = $('#chartValueColumnSelect');
|
||||
var $chartSeries = $('#chartSeriesSelect');
|
||||
if ($(this).is(':checked')) {
|
||||
$seriesColumn.prop('disabled', false);
|
||||
$valueColumn.prop('disabled', false);
|
||||
@@ -299,7 +299,7 @@ AJAX.registerOnload('table/chart.js', function () {
|
||||
});
|
||||
|
||||
// handle stacking for bar, column and area charts
|
||||
$('input[name="barStacked"]').on('click', function () {
|
||||
$('#barStackedCheckbox').on('click', function () {
|
||||
if ($(this).is(':checked')) {
|
||||
$.extend(true, currentSettings, { stackSeries : true });
|
||||
} else {
|
||||
@@ -309,12 +309,12 @@ AJAX.registerOnload('table/chart.js', function () {
|
||||
});
|
||||
|
||||
// handle changes in chart title
|
||||
$('input[name="chartTitle"]')
|
||||
$('#chartTitleInput')
|
||||
.on('focus', function () {
|
||||
tempChartTitle = $(this).val();
|
||||
})
|
||||
.on('keyup', function () {
|
||||
currentSettings.title = $('input[name="chartTitle"]').val();
|
||||
currentSettings.title = $('#chartTitleInput').val();
|
||||
drawChart();
|
||||
})
|
||||
.on('blur', function () {
|
||||
@@ -324,37 +324,37 @@ AJAX.registerOnload('table/chart.js', function () {
|
||||
});
|
||||
|
||||
// handle changing the x-axis
|
||||
$('select[name="chartXAxis"]').on('change', function () {
|
||||
$('#chartXAxisSelect').on('change', function () {
|
||||
onXAxisChange();
|
||||
drawChart();
|
||||
});
|
||||
|
||||
// handle changing the selected data series
|
||||
$('select[name="chartSeries"]').on('change', function () {
|
||||
$('#chartSeriesSelect').on('change', function () {
|
||||
onDataSeriesChange();
|
||||
drawChart();
|
||||
});
|
||||
|
||||
// handle changing the series column
|
||||
$('select[name="chartSeriesColumn"]').on('change', function () {
|
||||
$('#chartSeriesColumnSelect').on('change', function () {
|
||||
currentSettings.seriesColumn = parseInt($(this).val(), 10);
|
||||
drawChart();
|
||||
});
|
||||
|
||||
// handle changing the value column
|
||||
$('select[name="chartValueColumn"]').on('change', function () {
|
||||
$('#chartValueColumnSelect').on('change', function () {
|
||||
currentSettings.valueColumn = parseInt($(this).val(), 10);
|
||||
drawChart();
|
||||
});
|
||||
|
||||
// handle manual changes to the chart x-axis labels
|
||||
$('input[name="xaxis_label"]').on('keyup', function () {
|
||||
$('#xAxisLabelInput').on('keyup', function () {
|
||||
currentSettings.xaxisLabel = $(this).val();
|
||||
drawChart();
|
||||
});
|
||||
|
||||
// handle manual changes to the chart y-axis labels
|
||||
$('input[name="yaxis_label"]').on('keyup', function () {
|
||||
$('#yAxisLabelInput').on('keyup', function () {
|
||||
currentSettings.yaxisLabel = $(this).val();
|
||||
drawChart();
|
||||
});
|
||||
@@ -398,11 +398,11 @@ AJAX.registerOnload('table/chart.js', function () {
|
||||
type : 'line',
|
||||
width : $('#resizer').width() - 20,
|
||||
height : $('#resizer').height() - 20,
|
||||
xaxisLabel : $('input[name="xaxis_label"]').val(),
|
||||
yaxisLabel : $('input[name="yaxis_label"]').val(),
|
||||
title : $('input[name="chartTitle"]').val(),
|
||||
xaxisLabel : $('#xAxisLabelInput').val(),
|
||||
yaxisLabel : $('#yAxisLabelInput').val(),
|
||||
title : $('#chartTitleInput').val(),
|
||||
stackSeries : false,
|
||||
mainAxis : parseInt($('select[name="chartXAxis"]').val(), 10),
|
||||
mainAxis : parseInt($('#chartXAxisSelect').val(), 10),
|
||||
selectedSeries : getSelectedSeries(),
|
||||
seriesColumn : null
|
||||
};
|
||||
|
||||
@@ -1,157 +1,155 @@
|
||||
{# Display Chart options #}
|
||||
<div id="div_view_options">
|
||||
<form method="post" id="tblchartform" action="{{ url('/table/chart') }}" class="ajax">
|
||||
<div id="div_view_options" class="container-fluid">
|
||||
<h2>{% trans 'Display chart' %}</h2>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<form method="post" id="tblchartform" action="{{ url('/table/chart') }}" class="ajax">
|
||||
{{ get_hidden_inputs(url_params) }}
|
||||
<fieldset class="pma-fieldset">
|
||||
<legend>
|
||||
{% trans 'Display chart' %}
|
||||
</legend>
|
||||
<div class="chartOption">
|
||||
<div class="formelement">
|
||||
<input type="radio" name="chartType" value="bar" id="radio_bar">
|
||||
<label for ="radio_bar">{% trans %}Bar{% context %}Chart type{% endtrans %}</label>
|
||||
</div>
|
||||
<div class="formelement">
|
||||
<input type="radio" name="chartType" value="column" id="radio_column">
|
||||
<label for ="radio_column">{% trans %}Column{% context %}Chart type{% endtrans %}</label>
|
||||
</div>
|
||||
<div class="formelement">
|
||||
<input type="radio" name="chartType" value="line" id="radio_line" checked="checked">
|
||||
<label for ="radio_line">{% trans %}Line{% context %}Chart type{% endtrans %}</label>
|
||||
</div>
|
||||
<div class="formelement">
|
||||
<input type="radio" name="chartType" value="spline" id="radio_spline">
|
||||
<label for ="radio_spline">{% trans %}Spline{% context %}Chart type{% endtrans %}</label>
|
||||
</div>
|
||||
<div class="formelement">
|
||||
<input type="radio" name="chartType" value="area" id="radio_area">
|
||||
<label for ="radio_area">{% trans %}Area{% context %}Chart type{% endtrans %}</label>
|
||||
</div>
|
||||
<span class="span_pie hide">
|
||||
<input type="radio" name="chartType" value="pie" id="radio_pie">
|
||||
<label for ="radio_pie">{% trans %}Pie{% context %}Chart type{% endtrans %}</label>
|
||||
</span>
|
||||
<span class="span_timeline hide">
|
||||
<input type="radio" name="chartType" value="timeline" id="radio_timeline">
|
||||
<label for ="radio_timeline">{% trans %}Timeline{% context %}Chart type{% endtrans %}</label>
|
||||
</span>
|
||||
<span class="span_scatter hide">
|
||||
<input type="radio" name="chartType" value="scatter" id="radio_scatter">
|
||||
<label for ="radio_scatter">{% trans %}Scatter{% context %}Chart type{% endtrans %}</label>
|
||||
</span>
|
||||
<br><br>
|
||||
<span class="barStacked hide">
|
||||
<input type="checkbox" name="barStacked" value="1" id="checkbox_barStacked">
|
||||
<label for ="checkbox_barStacked">{% trans 'Stacked' %}</label>
|
||||
</span>
|
||||
<br><br>
|
||||
<label for ="chartTitle">{% trans 'Chart title:' %}</label>
|
||||
<input type="text" name="chartTitle" id="chartTitle">
|
||||
</div>
|
||||
{% set xaxis = null %}
|
||||
<div class="chartOption">
|
||||
<label for="select_chartXAxis">{% trans 'X-Axis:' %}</label>
|
||||
<select name="chartXAxis" id="select_chartXAxis">
|
||||
{% for idx, key in keys %}
|
||||
{% if xaxis is same as(null) %}
|
||||
{% set xaxis = idx %}
|
||||
{% endif %}
|
||||
{% if xaxis is same as(idx) %}
|
||||
<option value="{{ idx }}" selected="selected">{{ key }}</option>
|
||||
{% else %}
|
||||
<option value="{{ idx }}">{{ key }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
<br>
|
||||
<label for="select_chartSeries">
|
||||
{% trans 'Series:' %}
|
||||
</label>
|
||||
<select name="chartSeries" id="select_chartSeries" multiple="multiple">
|
||||
{% for idx, key in keys %}
|
||||
{% if fields_meta[idx].isNumericType() %}
|
||||
{% if idx == xaxis and table_has_a_numeric_column %}
|
||||
<option value="{{ idx }}">{{ key }}</option>
|
||||
{% else %}
|
||||
<option value="{{ idx }}" selected="selected">{{ key }}</option>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
<input type="hidden" name="dateTimeCols" value="
|
||||
{% for idx, key in keys %}
|
||||
{% if fields_meta[idx].isDateTimeType() %}
|
||||
{{ idx ~ ' ' }}
|
||||
{% endif %}
|
||||
{% endfor %}">
|
||||
<input type="hidden" name="numericCols" value="
|
||||
{% for idx, key in keys %}
|
||||
{% if fields_meta[idx].isNumericType() %}
|
||||
{{ idx ~ ' ' }}
|
||||
{% endif %}
|
||||
{% endfor %}">
|
||||
</div>
|
||||
<div class="chartOption">
|
||||
<label for="xaxis_panel">
|
||||
{% trans 'X-Axis label:' %}
|
||||
</label>
|
||||
<input style="margin-top:0;" type="text" name="xaxis_label" id="xaxis_label" value="{{ xaxis == -1 ? 'X Values'|trans : keys[xaxis] }}">
|
||||
<br>
|
||||
<label for="yaxis_label">
|
||||
{% trans 'Y-Axis label:' %}
|
||||
</label>
|
||||
<input type="text" name="yaxis_label" id="yaxis_label" value="{% trans 'Y Values' %}">
|
||||
<br>
|
||||
</div>
|
||||
<div class="clearfloat"></div>
|
||||
<div>
|
||||
<input type="checkbox" id="chkAlternative" name="chkAlternative" value="alternativeFormat">
|
||||
<label for="chkAlternative">{% trans 'Series names are in a column' %}</label>
|
||||
<br>
|
||||
<label for="select_seriesColumn">
|
||||
{% trans 'Series column:' %}
|
||||
</label>
|
||||
<select name="chartSeriesColumn" id="select_seriesColumn" disabled>
|
||||
{% for idx, key in keys %}
|
||||
<option value="{{ idx }}"
|
||||
{% if idx == 1 %}
|
||||
selected="selected"
|
||||
{% endif %}>
|
||||
{{ key }}
|
||||
</option>
|
||||
{% set series_column = idx %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
<label for="select_valueColumn">
|
||||
{% trans 'Value Column:' %}
|
||||
</label>
|
||||
<select name="chartValueColumn" id="select_valueColumn" disabled>
|
||||
{% set selected = false %}
|
||||
{% for idx, key in keys %}
|
||||
{% if fields_meta[idx].isNumericType() %}
|
||||
{% if not selected and idx != xaxis and idx != series_column %}
|
||||
<option value="{{ idx }}" selected="selected">{{ key }}</option>
|
||||
{% set selected = true %}
|
||||
{% else %}
|
||||
<option value="{{ idx }}">{{ key }}</option>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{{ include('table/start_and_number_of_rows_fieldset.twig', start_and_number_of_rows_fieldset) }}
|
||||
|
||||
<div class="clearfloat"></div>
|
||||
<div id="resizer" style="width:600px; height:400px;">
|
||||
<div style="position: absolute; right: 10px; top: 10px; cursor: pointer; z-index: 1000;">
|
||||
<a class="disableAjax" id="saveChart" href="#" download="chart.png">
|
||||
{{ get_image('b_saveimage', 'Save chart as image'|trans) }}
|
||||
</a>
|
||||
</div>
|
||||
<div id="querychart" dir="ltr">
|
||||
</div>
|
||||
</div>
|
||||
<fieldset class="mb-3" role="radiogroup">
|
||||
<legend class="visually-hidden">{% trans 'Chart type' %}</legend>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="chartType" value="bar" id="barChartTypeRadio">
|
||||
<label class="form-check-label" for="barChartTypeRadio">{% trans %}Bar{% context %}Chart type{% endtrans %}</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="chartType" value="column" id="columnChartTypeRadio">
|
||||
<label class="form-check-label" for="columnChartTypeRadio">{% trans %}Column{% context %}Chart type{% endtrans %}</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="chartType" value="line" id="lineChartTypeRadio" checked>
|
||||
<label class="form-check-label" for="lineChartTypeRadio">{% trans %}Line{% context %}Chart type{% endtrans %}</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="chartType" value="spline" id="splineChartTypeRadio">
|
||||
<label class="form-check-label" for="splineChartTypeRadio">{% trans %}Spline{% context %}Chart type{% endtrans %}</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="chartType" value="area" id="areaChartTypeRadio">
|
||||
<label class="form-check-label" for="areaChartTypeRadio">{% trans %}Area{% context %}Chart type{% endtrans %}</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline d-none" id="pieChartType">
|
||||
<input class="form-check-input" type="radio" name="chartType" value="pie" id="pieChartTypeRadio">
|
||||
<label class="form-check-label" for="pieChartTypeRadio">{% trans %}Pie{% context %}Chart type{% endtrans %}</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline d-none" id="timelineChartType">
|
||||
<input class="form-check-input" type="radio" name="chartType" value="timeline" id="timelineChartTypeRadio">
|
||||
<label class="form-check-label" for="timelineChartTypeRadio">{% trans %}Timeline{% context %}Chart type{% endtrans %}</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline d-none" id="scatterChartType">
|
||||
<input class="form-check-input" type="radio" name="chartType" value="scatter" id="scatterChartTypeRadio">
|
||||
<label class="form-check-label" for="scatterChartTypeRadio">{% trans %}Scatter{% context %}Chart type{% endtrans %}</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<div class="form-check mb-3 d-none" id="barStacked">
|
||||
<input class="form-check-input" type="checkbox" name="barStackedCheckbox" value="1" id="barStackedCheckbox">
|
||||
<label class="form-check-label" for="barStackedCheckbox">{% trans 'Stacked' %}</label>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="chartTitleInput">{% trans 'Chart title:' %}</label>
|
||||
<input class="form-control" type="text" name="chartTitleInput" id="chartTitleInput">
|
||||
</div>
|
||||
|
||||
{% set xaxis = null %}
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="chartXAxisSelect">{% trans 'X-Axis:' %}</label>
|
||||
<select class="form-select" name="chartXAxisSelect" id="chartXAxisSelect">
|
||||
{% for idx, key in keys %}
|
||||
{% if xaxis is same as(null) %}
|
||||
{% set xaxis = idx %}
|
||||
{% endif %}
|
||||
{% if xaxis is same as(idx) %}
|
||||
<option value="{{ idx }}" selected>{{ key }}</option>
|
||||
{% else %}
|
||||
<option value="{{ idx }}">{{ key }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="chartSeriesSelect">{% trans 'Series:' %}</label>
|
||||
<select class="form-select" name="chartSeriesSelect" id="chartSeriesSelect" multiple>
|
||||
{% for idx, key in keys %}
|
||||
{% if fields_meta[idx].isNumericType() %}
|
||||
{% if idx == xaxis and table_has_a_numeric_column %}
|
||||
<option value="{{ idx }}">{{ key }}</option>
|
||||
{% else %}
|
||||
<option value="{{ idx }}" selected>{{ key }}</option>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="dateTimeCols" value="
|
||||
{%- for idx, key in keys -%}
|
||||
{%- if fields_meta[idx].isDateTimeType() -%}
|
||||
{{- idx ~ ' ' -}}
|
||||
{%- endif -%}
|
||||
{%- endfor %}">
|
||||
<input type="hidden" name="numericCols" value="
|
||||
{%- for idx, key in keys -%}
|
||||
{%- if fields_meta[idx].isNumericType() -%}
|
||||
{{- idx ~ ' ' -}}
|
||||
{%- endif -%}
|
||||
{%- endfor %}">
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="xAxisLabelInput">{% trans 'X-Axis label:' %}</label>
|
||||
<input class="form-control" type="text" name="xAxisLabelInput" id="xAxisLabelInput" value="{{ xaxis == -1 ? 'X Values'|trans : keys[xaxis] }}">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="yAxisLabelInput">{% trans 'Y-Axis label:' %}</label>
|
||||
<input class="form-control" type="text" name="yAxisLabelInput" id="yAxisLabelInput" value="{% trans 'Y Values' %}">
|
||||
</div>
|
||||
|
||||
<div class="form-check mb-3">
|
||||
<input class="form-check-input" type="checkbox" id="seriesColumnCheckbox" name="seriesColumnCheckbox" value="1">
|
||||
<label class="form-check-label" for="seriesColumnCheckbox">{% trans 'Series names are in a column' %}</label>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="chartSeriesColumnSelect">{% trans 'Series column:' %}</label>
|
||||
<select class="form-select" name="chartSeriesColumnSelect" id="chartSeriesColumnSelect" disabled>
|
||||
{% for idx, key in keys %}
|
||||
<option value="{{ idx }}"{{ idx == 1 ? ' selected' }}>{{ key }}</option>
|
||||
{% set series_column = idx %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="chartValueColumnSelect">{% trans 'Value Column:' %}</label>
|
||||
<select class="form-select" name="chartValueColumnSelect" id="chartValueColumnSelect" disabled>
|
||||
{% set selected = false %}
|
||||
{% for idx, key in keys %}
|
||||
{% if fields_meta[idx].isNumericType() %}
|
||||
{% if not selected and idx != xaxis and idx != series_column %}
|
||||
<option value="{{ idx }}" selected>{{ key }}</option>
|
||||
{% set selected = true %}
|
||||
{% else %}
|
||||
<option value="{{ idx }}">{{ key }}</option>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{{ include('table/start_and_number_of_rows_fieldset.twig', start_and_number_of_rows_fieldset) }}
|
||||
|
||||
<div id="resizer">
|
||||
<div class="position-absolute top-0 end-0 mt-1 me-1">
|
||||
<a class="disableAjax" id="saveChart" href="#" download="chart.png">
|
||||
{{ get_image('b_saveimage', 'Save chart as image'|trans) }}
|
||||
</a>
|
||||
</div>
|
||||
<div id="querychart" dir="ltr"></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,80 +1,62 @@
|
||||
<div id="div_view_options">
|
||||
<fieldset class="pma-fieldset">
|
||||
<legend>{% trans 'Display GIS Visualization' %}</legend>
|
||||
<div id="gis_div" style="position:relative;">
|
||||
<form method="post" action="{{ url('/table/gis-visualization') }}">
|
||||
{{ get_hidden_inputs(url_params) }}
|
||||
<label for="labelColumn">
|
||||
{% trans "Label column" %}
|
||||
</label>
|
||||
<select name="visualizationSettings[labelColumn]" id="labelColumn" class="autosubmit">
|
||||
<option value="">{% trans "-- None --" %}</option>
|
||||
{% for value in label_candidates %}
|
||||
<option value="{{ value }}"{{ value == visualization_settings['labelColumn'] ? ' selected="selected"' }}>
|
||||
{{ value }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<label for="spatialColumn">
|
||||
{% trans "Spatial column" %}
|
||||
</label>
|
||||
<select name="visualizationSettings[spatialColumn]" id="spatialColumn" class="autosubmit">
|
||||
{% for value in spatial_candidates %}
|
||||
<option value="{{ value }}"{{ value == visualization_settings['spatialColumn'] ? ' selected="selected"' }}>
|
||||
{{ value }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<input type="hidden" name="displayVisualization" value="redraw">
|
||||
<tr>
|
||||
<td class="choice" colspan="2">
|
||||
<input type="checkbox"
|
||||
name="visualizationSettings[choice]"
|
||||
id="choice" value="useBaseLayer"
|
||||
{% if visualization_settings['choice'] is defined %}
|
||||
checked="checked"
|
||||
{% endif %}>
|
||||
<label for="choice" id="labelChoice">
|
||||
{% trans "Use OpenStreetMaps as Base Layer" %}
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
{{ include('table/start_and_number_of_rows_fieldset.twig', start_and_number_of_rows_fieldset) }}
|
||||
</form>
|
||||
<div id="div_view_options" class="container-fluid">
|
||||
<h2>{% trans 'Display GIS Visualization' %}</h2>
|
||||
|
||||
<div class="pma_quick_warp" style="width: 50px; position: absolute; right: 0; top: 0; cursor: pointer;">
|
||||
<div class="drop_list">
|
||||
<span class="drop_button" style="padding: 0; border: 0;">
|
||||
{{ get_image('b_saveimage', 'Save'|trans) }}
|
||||
</span>
|
||||
<ul>
|
||||
<li class="warp_link">
|
||||
<a href="{{ download_url|raw }}&fileFormat=png" class="disableAjax">PNG</a>
|
||||
</li>
|
||||
<li class="warp_link">
|
||||
<a href="{{ download_url|raw }}&fileFormat=pdf" class="disableAjax">PDF</a>
|
||||
</li>
|
||||
<li class="warp_link">
|
||||
<a href="{{ download_url|raw }}&fileFormat=svg" class="disableAjax">SVG</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div id="gis_div" class="card-body">
|
||||
<form method="post" action="{{ url('/table/gis-visualization') }}" class="row g-3 align-items-start">
|
||||
{{ get_hidden_inputs(url_params) }}
|
||||
|
||||
<div class="col-12 col-md-6 col-xl">
|
||||
<label class="form-label" for="labelColumn">{% trans 'Label column' %}</label>
|
||||
<select name="visualizationSettings[labelColumn]" id="labelColumn" class="form-select autosubmit">
|
||||
<option value="">{% trans '-- None --' %}</option>
|
||||
{% for value in label_candidates %}
|
||||
<option value="{{ value }}"{{ value == visualization_settings['labelColumn'] ? ' selected' }}>
|
||||
{{ value }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="clearfloat"></div>
|
||||
|
||||
<div id="placeholder"
|
||||
style="width:{{ visualization_settings['width'] }}px;height:{{ visualization_settings['height'] }}px;">
|
||||
{{ visualization|raw }}
|
||||
<div class="col-12 col-md-6 col-xl">
|
||||
<label class="form-label" for="spatialColumn">{% trans 'Spatial column' %}</label>
|
||||
<select name="visualizationSettings[spatialColumn]" id="spatialColumn" class="form-select autosubmit">
|
||||
{% for value in spatial_candidates %}
|
||||
<option value="{{ value }}"{{ value == visualization_settings['spatialColumn'] ? ' selected' }}>
|
||||
{{ value }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div id="openlayersmap"></div>
|
||||
<input type="hidden" id="themeImagePath" value="{{ image() }}">
|
||||
<script language="javascript" type="text/javascript">
|
||||
function drawOpenLayers()
|
||||
{
|
||||
{{ draw_ol|raw }}
|
||||
}
|
||||
</script>
|
||||
</fieldset>
|
||||
<div class="col-auto">
|
||||
<input type="hidden" name="displayVisualization" value="redraw">
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" name="visualizationSettings[choice]" id="choice" value="useBaseLayer"{{ visualization_settings['choice'] is defined ? ' checked' }}>
|
||||
<label class="form-check-label" for="choice" id="labelChoice">{% trans 'Use OpenStreetMaps as Base Layer' %}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-xxl-end">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="saveImageButton" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
{{ get_icon('b_saveimage', 'Save'|trans) }}
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="saveImageButton">
|
||||
<li><a class="dropdown-item disableAjax" href="{{ download_url|raw }}&fileFormat=png">PNG</a></li>
|
||||
<li><a class="dropdown-item disableAjax" href="{{ download_url|raw }}&fileFormat=pdf">PDF</a></li>
|
||||
<li><a class="dropdown-item disableAjax" href="{{ download_url|raw }}&fileFormat=svg">SVG</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
{{ include('table/start_and_number_of_rows_fieldset.twig', start_and_number_of_rows_fieldset) }}
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div id="placeholder" style="width:{{ visualization_settings['width'] }}px;height:{{ visualization_settings['height'] }}px;">
|
||||
{{ visualization|raw }}
|
||||
</div>
|
||||
<div id="openlayersmap"></div>
|
||||
<input type="hidden" id="themeImagePath" value="{{ image() }}">
|
||||
<script type="text/javascript">function drawOpenLayers() { {{ draw_ol|raw }} }</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -745,13 +745,6 @@ div#profilingchart {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.chartOption {
|
||||
float: left;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
// end table charting
|
||||
|
||||
// querybox
|
||||
|
||||
#togglequerybox {
|
||||
|
||||
@@ -909,13 +909,6 @@ div#profilingchart {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.chartOption {
|
||||
float: left;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
/* END table charting */
|
||||
|
||||
/* querybox */
|
||||
|
||||
#togglequerybox {
|
||||
|
||||
@@ -738,12 +738,6 @@ div#profilingchart {
|
||||
bottom: 24px;
|
||||
}
|
||||
|
||||
/* table charting */
|
||||
.chartOption {
|
||||
float: left;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
&#sqlquery {
|
||||
width: 100%;
|
||||
|
||||
@@ -922,13 +922,6 @@ div#profilingchart {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.chartOption {
|
||||
float: left;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
// end table charting
|
||||
|
||||
// querybox
|
||||
|
||||
#togglequerybox {
|
||||
|
||||
Reference in New Issue
Block a user