Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[SSE] Chart: add log scale settings

Browse source
This commit is contained in:
Julia Radzhabova 2022-03-09 22:36:47 +03:00
parent 0137bb22a4
commit b3c67e4291
3 changed files with 77 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template
View file

@ -56,7 +56,7 @@
<div class="inner-content"> <div class="inner-content">
<table cols="2" style="width: 100%"> <table cols="2" style="width: 100%">
<tr> <tr>
<td colspan="2" class="padding-large"> <td colspan="2" class="padding-small">
<div id="chart-dlg-chk-vert-hide-0" class="input-group-nr"></div> <div id="chart-dlg-chk-vert-hide-0" class="input-group-nr"></div>
</td> </td>
</tr> </tr>
@ -84,13 +84,13 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="padding-large" width="100"> <td class="padding-small" width="100">
<label class="input-label"><%= scope.textMaxValue %></label> <label class="input-label"><%= scope.textMaxValue %></label>
</td> </td>
<td class="padding-large" width="115" style="padding-right: 10px;"> <td class="padding-small" width="115" style="padding-right: 10px;">
<div id="chart-dlg-combo-maxtype-0"></div> <div id="chart-dlg-combo-maxtype-0"></div>
</td> </td>
<td class="padding-large" width="90"> <td class="padding-small" width="90">
<div id="chart-dlg-input-max-value-0"></div> <div id="chart-dlg-input-max-value-0"></div>
</td> </td>
</tr> </tr>
@ -108,16 +108,27 @@
</table> </table>
</div> </div>
<div class="inner-content"> <div class="inner-content">
<table cols="1" style="width: 100%;"> <table cols="2" style="width: 100%;">
<tr> <tr>
<td class="padding-large"> <td colspan=2 class="padding-small">
<label class="input-label"><%= scope.textUnits %></label>
<div id="chart-dlg-combo-units-0" class="input-group-nr" style="width: 140px;"></div>
</td>
</tr>
<tr>
<td colspan=2 class="padding-small">
<div id="chart-dlg-check-v-reverse-0"></div> <div id="chart-dlg-check-v-reverse-0"></div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="padding-large"> <td class="padding-large">
<label class="input-label"><%= scope.textUnits %></label> <div id="chart-dlg-check-v-logscale-0"></div>
<div id="chart-dlg-combo-units-0" class="input-group-nr" style="width:140px;"></div> </td>
<td class="padding-large">
<div style="float: right;">
<label class="input-label"><%= scope.textBase %></label>
<div id="chart-dlg-input-base-0" style="display: inline-block;margin-left: 5px;"></div>
</div>
</td> </td>
</tr> </tr>
</table> </table>
@ -166,7 +177,7 @@
<div class="inner-content"> <div class="inner-content">
<table cols="2" style="width: 100%"> <table cols="2" style="width: 100%">
<tr> <tr>
<td colspan="2" class="padding-large"> <td colspan="2" class="padding-small">
<div id="chart-dlg-chk-vert-hide-1" class="input-group-nr"></div> <div id="chart-dlg-chk-vert-hide-1" class="input-group-nr"></div>
</td> </td>
</tr> </tr>
@ -194,13 +205,13 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="padding-large" width="100"> <td class="padding-small" width="100">
<label class="input-label"><%= scope.textMaxValue %></label> <label class="input-label"><%= scope.textMaxValue %></label>
</td> </td>
<td class="padding-large" width="115" style="padding-right: 10px;"> <td class="padding-small" width="115" style="padding-right: 10px;">
<div id="chart-dlg-combo-maxtype-1"></div> <div id="chart-dlg-combo-maxtype-1"></div>
</td> </td>
<td class="padding-large" width="90"> <td class="padding-small" width="90">
<div id="chart-dlg-input-max-value-1"></div> <div id="chart-dlg-input-max-value-1"></div>
</td> </td>
</tr> </tr>
@ -218,16 +229,27 @@
</table> </table>
</div> </div>
<div class="inner-content"> <div class="inner-content">
<table cols="1" style="width: 100%;"> <table cols="2" style="width: 100%;">
<tr> <tr>
<td class="padding-large"> <td colspan=2 class="padding-small">
<label class="input-label"><%= scope.textUnits %></label>
<div id="chart-dlg-combo-units-1" class="input-group-nr" style="width: 140px;"></div>
</td>
</tr>
<tr>
<td colspan=2 class="padding-small">
<div id="chart-dlg-check-v-reverse-1"></div> <div id="chart-dlg-check-v-reverse-1"></div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="padding-large"> <td class="padding-large">
<label class="input-label"><%= scope.textUnits %></label> <div id="chart-dlg-check-v-logscale-1"></div>
<div id="chart-dlg-combo-units-1" class="input-group-nr" style="width:140px;"></div> </td>
<td class="padding-large">
<div style="float: right;">
<label class="input-label"><%= scope.textBase %></label>
<div id="chart-dlg-input-base-1" style="display: inline-block;margin-left: 5px;"></div>
</div>
</td> </td>
</tr> </tr>
</table> </table>
@ -276,7 +298,7 @@
<div class="inner-content"> <div class="inner-content">
<table cols="2" style="width: 100%"> <table cols="2" style="width: 100%">
<tr> <tr>
<td colspan="2" class="padding-large"> <td colspan="2" class="padding-small">
<div id="chart-dlg-chk-hor-hide-0" class="input-group-nr"></div> <div id="chart-dlg-chk-hor-hide-0" class="input-group-nr"></div>
</td> </td>
</tr> </tr>
@ -385,7 +407,7 @@
<div class="inner-content"> <div class="inner-content">
<table cols="2" style="width: 100%"> <table cols="2" style="width: 100%">
<tr> <tr>
<td colspan="2" class="padding-large"> <td colspan="2" class="padding-small">
<div id="chart-dlg-chk-hor-hide-1" class="input-group-nr"></div> <div id="chart-dlg-chk-hor-hide-1" class="input-group-nr"></div>
</td> </td>
</tr> </tr>

38
apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js
View file

@ -259,6 +259,8 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
this.cmbVertGrid = []; this.cmbVertGrid = [];
this.chVertHide = []; this.chVertHide = [];
this.btnVFormat = []; this.btnVFormat = [];
this.chVLogScale = [];
this.spnBase = [];
this._arrVertTitle = [ this._arrVertTitle = [
{value: Asc.c_oAscChartVertAxisLabelShowSettings.none, displayValue: me.textNone}, {value: Asc.c_oAscChartVertAxisLabelShowSettings.none, displayValue: me.textNone},
@ -516,6 +518,30 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
me.btnVFormat[i] = new Common.UI.Button({ me.btnVFormat[i] = new Common.UI.Button({
el: $('#chart-dlg-btn-v-format-' + i) el: $('#chart-dlg-btn-v-format-' + i)
}).on('click', _.bind(me.openFormat, me, i)); }).on('click', _.bind(me.openFormat, me, i));
me.chVLogScale[i] = new Common.UI.CheckBox({
el: $('#chart-dlg-check-v-logscale-' + i),
labelText: me.textLogScale
}).on('change', _.bind(function (checkbox, state) {
if (me.currentAxisProps[i]) {
me.currentAxisProps[i].putLogScale(state == 'checked');
(state == 'checked') && me.currentAxisProps[i].putLogBase(me.spnBase[i].getNumberValue());
}
me.spnBase[i].setDisabled((state !== 'checked'));
}, me));
me.spnBase[i] = new Common.UI.MetricSpinner({
el: $('#chart-dlg-input-base-' + i),
maxValue: 1000,
minValue: 2,
step: 1,
defaultUnit: "",
value: 10
}).on('change', _.bind(function (field, newValue, oldValue) {
if (me.currentAxisProps[i]) {
me.currentAxisProps[i].putLogBase(field.getNumberValue());
}
}, me));
}; };
addControlsV(0); addControlsV(0);
addControlsV(1); addControlsV(1);
@ -1023,10 +1049,10 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
this.cmbChartTitle, this.cmbLegendPos, this.cmbDataLabels, this.chSeriesName, this.chCategoryName, this.chValue, this.txtSeparator, // 1 tab this.cmbChartTitle, this.cmbLegendPos, this.cmbDataLabels, this.chSeriesName, this.chCategoryName, this.chValue, this.txtSeparator, // 1 tab
this.cmbVertTitle[0], this.cmbVertGrid[0], this.cmbVertTitle[0], this.cmbVertGrid[0],
this.chVertHide[0], this.cmbMinType[0], this.spnMinValue[0], this.cmbMaxType[0], this.spnMaxValue[0], this.cmbVCrossType[0], this.spnVAxisCrosses[0], this.chVertHide[0], this.cmbMinType[0], this.spnMinValue[0], this.cmbMaxType[0], this.spnMaxValue[0], this.cmbVCrossType[0], this.spnVAxisCrosses[0],
this.chVReverse[0], this.cmbUnits[0] , this.cmbVMajorType[0], this.cmbVMinorType[0], this.cmbVLabelPos[0], // 2 tab this.cmbUnits[0] , this.chVReverse[0], this.chVLogScale[0], this.spnBase[0], this.cmbVMajorType[0], this.cmbVMinorType[0], this.cmbVLabelPos[0], // 2 tab
this.cmbVertTitle[1], this.cmbVertGrid[1], this.cmbVertTitle[1], this.cmbVertGrid[1],
this.chVertHide[1], this.cmbMinType[1] , this.spnMinValue[1], this.cmbMaxType[1], this.spnMaxValue[1], this.cmbVCrossType[1], this.spnVAxisCrosses[1], this.chVertHide[1], this.cmbMinType[1] , this.spnMinValue[1], this.cmbMaxType[1], this.spnMaxValue[1], this.cmbVCrossType[1], this.spnVAxisCrosses[1],
this.chVReverse[1], this.cmbUnits[1] , this.cmbVMajorType[1], this.cmbVMinorType[1], this.cmbVLabelPos[1], // 3 tab this.cmbUnits[1] , this.chVReverse[1], this.chVLogScale[1], this.spnBase[1], this.cmbVMajorType[1], this.cmbVMinorType[1], this.cmbVLabelPos[1], // 3 tab
this.chHorHide[0], this.cmbHorTitle[0], this.cmbHorGrid[0], this.chHorHide[0], this.cmbHorTitle[0], this.cmbHorGrid[0],
this.cmbHCrossType[0] , this.spnHAxisCrosses[0], this.cmbAxisPos[0], this.chHReverse[0], this.cmbHMajorType[0], this.cmbHMinorType[0], this.spnMarksInterval[0], this.cmbHCrossType[0] , this.spnHAxisCrosses[0], this.cmbAxisPos[0], this.chHReverse[0], this.cmbHMajorType[0], this.cmbHMinorType[0], this.spnMarksInterval[0],
this.cmbHLabelPos[0] , this.spnLabelDist[0], this.cmbLabelInterval[0], this.spnLabelInterval[0], // 4 tab this.cmbHLabelPos[0] , this.spnLabelDist[0], this.cmbLabelInterval[0], this.spnLabelInterval[0], // 4 tab
@ -1265,6 +1291,10 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
this.cmbVMajorType[index].setValue(props.getMajorTickMark()); this.cmbVMajorType[index].setValue(props.getMajorTickMark());
this.cmbVMinorType[index].setValue(props.getMinorTickMark()); this.cmbVMinorType[index].setValue(props.getMinorTickMark());
this.cmbVLabelPos[index].setValue(props.getTickLabelsPos()); this.cmbVLabelPos[index].setValue(props.getTickLabelsPos());
value = props.getLogScale();
this.chVLogScale[index].setValue(!!value, true);
this.spnBase[index].setDisabled(!value);
value && this.spnBase[index].setValue(props.getLogBase(), true);
this.currentAxisProps[index] = props; this.currentAxisProps[index] = props;
}, },
@ -1878,7 +1908,9 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
textHorAxisSec: 'Secondary Horizontal Axis', textHorAxisSec: 'Secondary Horizontal Axis',
textAxisTitle: 'Title', textAxisTitle: 'Title',
textHideAxis: 'Hide axis', textHideAxis: 'Hide axis',
textFormat: 'Label format' textFormat: 'Label format',
textBase: 'Base',
textLogScale: 'Logarithmic Scale'
}, SSE.Views.ChartSettingsDlg || {})); }, SSE.Views.ChartSettingsDlg || {}));
}); });

2
apps/spreadsheeteditor/main/locale/en.json
View file

@ -1726,6 +1726,8 @@
"SSE.Views.ChartSettingsDlg.textYAxisTitle": "Y Axis Title", "SSE.Views.ChartSettingsDlg.textYAxisTitle": "Y Axis Title",
"SSE.Views.ChartSettingsDlg.textZero": "Zero", "SSE.Views.ChartSettingsDlg.textZero": "Zero",
"SSE.Views.ChartSettingsDlg.txtEmpty": "This field is required", "SSE.Views.ChartSettingsDlg.txtEmpty": "This field is required",
"SSE.Views.ChartSettingsDlg.textBase": "Base",
"SSE.Views.ChartSettingsDlg.textLogScale": "Logarithmic Scale",
"SSE.Views.ChartTypeDialog.errorComboSeries": "To create a combination chart, select at least two series of data.", "SSE.Views.ChartTypeDialog.errorComboSeries": "To create a combination chart, select at least two series of data.",
"SSE.Views.ChartTypeDialog.errorSecondaryAxis": "The selected chart type requires the secondary axis that an existing chart is using. Select another chart type.", "SSE.Views.ChartTypeDialog.errorSecondaryAxis": "The selected chart type requires the secondary axis that an existing chart is using. Select another chart type.",
"SSE.Views.ChartTypeDialog.textSecondary": "Secondary Axis", "SSE.Views.ChartTypeDialog.textSecondary": "Secondary Axis",