Merge pull request #1621 from ONLYOFFICE/feature/sse-chart-log-scale

[SSE] Chart: add log scale settings

apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template

@@ -56,7 +56,7 @@
     <div class="inner-content">
         <table cols="2" style="width: 100%">
             <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>
                 </td>
             </tr>
@@ -84,13 +84,13 @@
                 </td>
             </tr>
             <tr>
-                <td class="padding-large" width="100">
+                <td class="padding-small" width="100">
                     <label class="input-label"><%= scope.textMaxValue %></label>
                 </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>
                 </td>
-                <td class="padding-large" width="90">
+                <td class="padding-small" width="90">
                     <div id="chart-dlg-input-max-value-0"></div>
                 </td>
             </tr>
@@ -108,16 +108,27 @@
         </table>
     </div>
     <div class="inner-content">
-        <table cols="1" style="width: 100%;">
+        <table cols="2" style="width: 100%;">
             <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>
                 </td>
             </tr>
             <tr>
                 <td class="padding-large">
-                    <label class="input-label"><%= scope.textUnits %></label>
-                    <div id="chart-dlg-combo-units-0" class="input-group-nr" style="width:140px;"></div>
+                    <div id="chart-dlg-check-v-logscale-0"></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>
             </tr>
         </table>
@@ -166,7 +177,7 @@
     <div class="inner-content">
         <table cols="2" style="width: 100%">
             <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>
                 </td>
             </tr>
@@ -194,13 +205,13 @@
                 </td>
             </tr>
             <tr>
-                <td class="padding-large" width="100">
+                <td class="padding-small" width="100">
                     <label class="input-label"><%= scope.textMaxValue %></label>
                 </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>
                 </td>
-                <td class="padding-large" width="90">
+                <td class="padding-small" width="90">
                     <div id="chart-dlg-input-max-value-1"></div>
                 </td>
             </tr>
@@ -218,16 +229,27 @@
         </table>
     </div>
     <div class="inner-content">
-        <table cols="1" style="width: 100%;">
+        <table cols="2" style="width: 100%;">
             <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>
                 </td>
             </tr>
             <tr>
                 <td class="padding-large">
-                    <label class="input-label"><%= scope.textUnits %></label>
-                    <div id="chart-dlg-combo-units-1" class="input-group-nr" style="width:140px;"></div>
+                    <div id="chart-dlg-check-v-logscale-1"></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>
             </tr>
         </table>
@@ -276,7 +298,7 @@
     <div class="inner-content">
         <table cols="2" style="width: 100%">
             <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>
                 </td>
             </tr>
@@ -385,7 +407,7 @@
     <div class="inner-content">
         <table cols="2" style="width: 100%">
             <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>
                 </td>
             </tr>

apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js

@@ -259,6 +259,8 @@ define([    'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
             this.cmbVertGrid = [];
             this.chVertHide = [];
             this.btnVFormat = [];
+            this.chVLogScale = [];
+            this.spnBase = [];
 
             this._arrVertTitle = [
                 {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({
                     el: $('#chart-dlg-btn-v-format-' + 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(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.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.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.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.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
@@ -1265,6 +1291,10 @@ define([    'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
             this.cmbVMajorType[index].setValue(props.getMajorTickMark());
             this.cmbVMinorType[index].setValue(props.getMinorTickMark());
             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;
         },
@@ -1878,7 +1908,9 @@ define([    'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
         textHorAxisSec: 'Secondary Horizontal Axis',
         textAxisTitle: 'Title',
         textHideAxis: 'Hide axis',
-        textFormat: 'Label format'
+        textFormat: 'Label format',
+        textBase: 'Base',
+        textLogScale: 'Logarithmic Scale'
 
     }, SSE.Views.ChartSettingsDlg || {}));
 });

apps/spreadsheeteditor/main/locale/en.json

@@ -1726,6 +1726,8 @@
   "SSE.Views.ChartSettingsDlg.textYAxisTitle": "Y Axis Title",
   "SSE.Views.ChartSettingsDlg.textZero": "Zero",
   "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.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",