From cc5e415edd0ca71d93dcfa3b2a98ef0570cddf5b Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Mon, 15 Feb 2021 23:51:33 +0300 Subject: [PATCH] [SSE mobile] Added Chart Settings --- apps/common/mobile/resources/less/common.less | 30 + apps/spreadsheeteditor/mobile/locale/en.json | 33 +- .../mobile/src/controller/edit/EditChart.jsx | 235 +++++++ .../mobile/src/store/chartSettings.js | 66 ++ .../mobile/src/view/edit/Edit.jsx | 57 +- .../mobile/src/view/edit/EditChart.jsx | 650 +++++++++++++++++- 6 files changed, 1058 insertions(+), 13 deletions(-) diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index 2cb8512d6c..6e9f78b4a3 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -3,6 +3,7 @@ @black: #000000; @gray: #c4c4c4; @green: #4cd964; +@darkGreen: #40865c; @red: #f00; @background-normal: @white; @autoColor: @black; @@ -455,3 +456,32 @@ .encoded-svg-background(''); } } + +.list-block .item-input { + width: 100%; + margin-top: -8px; + margin-bottom: -7px; + flex-shrink: 1; +} + +.item-content .item-after input.field.right { + text-align: right; +} + +.item-content .item-after input.field { + color: @darkGreen; +} + +input[type="number"]::-webkit-outer-spin-button, +input[type="number"]::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +input[type="number"]::placeholder { + color: @darkGreen; +} +input[type="number"]::-webkit-input-placeholder {color: @darkGreen;} +input[type="number"]::-moz-placeholder {color: @darkGreen;} +input[type="number"]:-moz-placeholder {color: @darkGreen;} +input[type="number"]:-ms-input-placeholder {color: @darkGreen;} diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json index 6377bc794b..ad3b53b46a 100644 --- a/apps/spreadsheeteditor/mobile/locale/en.json +++ b/apps/spreadsheeteditor/mobile/locale/en.json @@ -169,7 +169,38 @@ "textInnerBottom": "Inner Bottom", "textInnerTop": "Inner Top", "textOuterTop": "Outer Top", - "textFit": "Fit Width" + "textFit": "Fit Width", + "textMinimumValue": "Minimum Value", + "textMaximumValue": "Maximum Value", + "textAxisCrosses": "Axis Crosses", + "textDisplayUnits": "Display Units", + "textValuesInReverseOrder": "Values in Reverse Order", + "textTickOptions": "Tick Options", + "textMajorType": "Major Type", + "textMinorType": "Minor Type", + "textLabelOptions": "Label Options", + "textLabelPosition": "Label Position", + "textAxisOptions": "Axis Options", + "textValue": "Value", + "textHundreds": "Hundreds", + "textThousands": "Thousands", + "textMillions": "Millions", + "textBillions": "Billions", + "textTrillions": "Trillions", + "textTenThousands": "10 000", + "textHundredThousands": "100 000", + "textTenMillions": "10 000 000", + "textHundredMil": "100 000 000", + "textCross": "Cross", + "textIn": "In", + "textOut": "Out", + "textLow": "Low", + "textHigh": "High", + "textNextToAxis": "Next to Axis", + "textCrossesValue": "Crosses Value", + "textOnTickMarks": "On Tick Marks", + "textBetweenTickMarks": "Between Tick Marks", + "textAxisPosition": "Axis Position" } }, "Common": { diff --git a/apps/spreadsheeteditor/mobile/src/controller/edit/EditChart.jsx b/apps/spreadsheeteditor/mobile/src/controller/edit/EditChart.jsx index 0196bd7af0..8bd9383607 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/edit/EditChart.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/edit/EditChart.jsx @@ -13,6 +13,22 @@ class EditChartController extends Component { this.onStyle = this.onStyle.bind(this); this.onBorderColor = this.onBorderColor.bind(this); this.onBorderSize = this.onBorderSize.bind(this); + this.onVerAxisMinValue = this.onVerAxisMinValue.bind(this); + this.onVerAxisMaxValue = this.onVerAxisMaxValue.bind(this); + this.onVerAxisCrossType = this.onVerAxisCrossType.bind(this); + this.onVerAxisCrossValue = this.onVerAxisCrossValue.bind(this); + this.onVerAxisDisplayUnits = this.onVerAxisDisplayUnits.bind(this); + this.onVerAxisReverse = this.onVerAxisReverse.bind(this); + this.onVerAxisTickMajor = this.onVerAxisTickMajor.bind(this); + this.onVerAxisTickMinor = this.onVerAxisTickMinor.bind(this); + this.onVerAxisLabelPos = this.onVerAxisLabelPos.bind(this); + this.onHorAxisCrossType = this.onHorAxisCrossType.bind(this); + this.onHorAxisCrossValue = this.onHorAxisCrossValue.bind(this); + this.onHorAxisPos = this.onHorAxisPos.bind(this); + this.onHorAxisReverse = this.onHorAxisReverse.bind(this); + this.onHorAxisTickMajor = this.onHorAxisTickMajor.bind(this); + this.onHorAxisTickMinor = this.onHorAxisTickMinor.bind(this); + this.onHorAxisLabelPos = this.onHorAxisLabelPos.bind(this); } closeModal() { @@ -160,7 +176,206 @@ class EditChartController extends Component { api.asc_editChartDrawingObject(chartObject); } + } + initVertAxis() { + const api = Common.EditorApi.get(); + const chartProperty = api.asc_getChartObject(); + + let verAxisProps = chartProperty.getVertAxisProps(); + let axisVertProps = (verAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? verAxisProps : chartProperty.getHorAxisProps(); + + return axisVertProps; + } + + getVerticalAxisProp() { + const api = Common.EditorApi.get(); + let chartObject = api.asc_getChartObject(), + verAxisProps = chartObject.getVertAxisProps(); + + return (verAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? verAxisProps : chartObject.getHorAxisProps(); + } + + setVerticalAxisProp(axisProps) { + const api = Common.EditorApi.get(); + let chartObject = api.asc_getChartObject(), + verAxisProps = chartObject.getVertAxisProps(); + + if (chartObject) { + chartObject[(verAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? 'putVertAxisProps' : 'putHorAxisProps'](axisProps); + api.asc_editChartDrawingObject(chartObject); + } + } + + onVerAxisMinValue(value) { + let axisProps = this.getVerticalAxisProp(), + axisRule = !value ? Asc.c_oAscValAxisRule.auto : Asc.c_oAscValAxisRule.fixed; + + axisProps.putMinValRule(axisRule); + + if (axisRule == Asc.c_oAscValAxisRule.fixed) { + axisProps.putMinVal(+value); + } + + this.setVerticalAxisProp(axisProps); + } + + onVerAxisMaxValue(value) { + let axisProps = this.getVerticalAxisProp(), + axisRule = !value ? Asc.c_oAscValAxisRule.auto : Asc.c_oAscValAxisRule.fixed; + + axisProps.putMaxValRule(axisRule); + + if (axisRule == Asc.c_oAscValAxisRule.fixed) { + axisProps.putMaxVal(+value); + } + + this.setVerticalAxisProp(axisProps); + } + + onVerAxisCrossType(value) { + let axisProps = this.getVerticalAxisProp(); + + axisProps.putCrossesRule(+value); + + this.setVerticalAxisProp(axisProps); + } + + onVerAxisCrossValue(value) { + let axisProps = this.getVerticalAxisProp(); + + axisProps.putCrossesRule(Asc.c_oAscCrossesRule.value); + axisProps.putCrosses(+value); + + this.setVerticalAxisProp(axisProps); + } + + onVerAxisDisplayUnits(value) { + let axisProps = this.getVerticalAxisProp(); + + axisProps.putDispUnitsRule(+value); + + this.setVerticalAxisProp(axisProps); + } + + onVerAxisReverse(value) { + let axisProps = this.getVerticalAxisProp(); + + axisProps.putInvertValOrder(value); + + this.setVerticalAxisProp(axisProps); + } + + onVerAxisTickMajor(value) { + let axisProps = this.getVerticalAxisProp(); + + axisProps.putMajorTickMark(+value); + + this.setVerticalAxisProp(axisProps); + } + + onVerAxisTickMinor(value) { + let axisProps = this.getVerticalAxisProp(); + + axisProps.putMinorTickMark(+value); + + this.setVerticalAxisProp(axisProps); + } + + onVerAxisLabelPos(value) { + let axisProps = this.getVerticalAxisProp(); + + axisProps.putTickLabelsPos(+value); + + this.setVerticalAxisProp(axisProps); + } + + // Horizontal + + initHorAxis() { + const api = Common.EditorApi.get(); + const chartProperty = api.asc_getChartObject(); + + let horAxisProps = chartProperty.getHorAxisProps(); + let axisHorProps = (horAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? chartProperty.getVertAxisProps() : horAxisProps; + + return axisHorProps; + } + + getHorizontalAxisProp() { + const api = Common.EditorApi.get(); + let chartObject = api.asc_getChartObject(), + verHorProps = chartObject.getHorAxisProps(); + + return (verHorProps.getAxisType() == Asc.c_oAscAxisType.val) ? chartObject.getVertAxisProps() : verHorProps; + } + + setHorizontalAxisProp(axisProps) { + const api = Common.EditorApi.get(); + let chartObject = api.asc_getChartObject(), + verAxisProps = chartObject.getHorAxisProps(); + + if (chartObject) { + chartObject[(verAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? 'putVertAxisProps' : 'putHorAxisProps'](axisProps); + api.asc_editChartDrawingObject(chartObject); + } + } + + onHorAxisCrossType(value) { + let axisProps = this.getHorizontalAxisProp(); + + axisProps.putCrossesRule(+value); + + this.setHorizontalAxisProp(axisProps); + } + + onHorAxisCrossValue(value) { + let axisProps = this.getHorizontalAxisProp(); + + axisProps.putCrossesRule(Asc.c_oAscCrossesRule.value); + axisProps.putCrosses(+value); + + this.setHorizontalAxisProp(axisProps); + } + + onHorAxisPos(value) { + let axisProps = this.getHorizontalAxisProp(); + + axisProps.putLabelsPosition(+value); + + this.setHorizontalAxisProp(axisProps); + } + + onHorAxisReverse(value) { + let axisProps = this.getHorizontalAxisProp(); + + axisProps.putInvertCatOrder(value); + + this.setHorizontalAxisProp(axisProps); + } + + onHorAxisTickMajor(value) { + let axisProps = this.getHorizontalAxisProp(); + + axisProps.putMajorTickMark(+value); + + this.setHorizontalAxisProp(axisProps); + } + + onHorAxisTickMinor(value) { + let axisProps = this.getHorizontalAxisProp(); + + axisProps.putMinorTickMark(+value); + + this.setHorizontalAxisProp(axisProps); + } + + onHorAxisLabelPos(value) { + let axisProps = this.getHorizontalAxisProp(); + + axisProps.putTickLabelsPos(+value); + + this.setHorizontalAxisProp(axisProps); } render () { @@ -174,6 +389,26 @@ class EditChartController extends Component { onStyle={this.onStyle} onRemoveChart={this.onRemoveChart} setLayoutProperty={this.setLayoutProperty} + initVertAxis={this.initVertAxis} + onVerAxisMinValue={this.onVerAxisMinValue} + onVerAxisMaxValue={this.onVerAxisMaxValue} + onVerAxisCrossType={this.onVerAxisCrossType} + onVerAxisCrossValue={this.onVerAxisCrossValue} + onVerAxisDisplayUnits={this.onVerAxisDisplayUnits} + onVerAxisReverse={this.onVerAxisReverse} + onVerAxisTickMajor={this.onVerAxisTickMajor} + onVerAxisTickMinor={this.onVerAxisTickMinor} + onVerAxisLabelPos={this.onVerAxisLabelPos} + initHorAxis={this.initHorAxis} + getHorizontalAxisProp={this.getHorizontalAxisProp} + setHorizontalAxisProp={this.setHorizontalAxisProp} + onHorAxisCrossType={this.onHorAxisCrossType} + onHorAxisCrossValue={this.onHorAxisCrossValue} + onHorAxisPos={this.onHorAxisPos} + onHorAxisReverse={this.onHorAxisReverse} + onHorAxisTickMajor={this.onHorAxisTickMajor} + onHorAxisTickMinor={this.onHorAxisTickMinor} + onHorAxisLabelPos={this.onHorAxisLabelPos} /> ) } diff --git a/apps/spreadsheeteditor/mobile/src/store/chartSettings.js b/apps/spreadsheeteditor/mobile/src/store/chartSettings.js index 6c93b403e2..0353588429 100644 --- a/apps/spreadsheeteditor/mobile/src/store/chartSettings.js +++ b/apps/spreadsheeteditor/mobile/src/store/chartSettings.js @@ -75,6 +75,72 @@ export class storeChartSettings { this.chartDataLabel = value; } + @observable axisVertCrosses = undefined; + @observable axisHorCrosses = undefined; + @observable displayUnits = undefined; + @observable valuesVertReverseOrder = undefined; + @observable valuesHorReverseOrder = undefined; + @observable vertMajorType = undefined; + @observable vertMinorType = undefined; + @observable vertLabelPosition = undefined; + @observable horMajorType = undefined; + @observable horMinorType = undefined; + @observable horLabelPosition = undefined; + @observable axisPosition = undefined; + + // Vertical + + @action changeVertAxisCrosses(value) { + this.axisVertCrosses = value; + } + + @action changeDisplayUnits(value) { + this.displayUnits = value; + } + + @action toggleVertValuesReverseOrder(value) { + this.valuesVertReverseOrder = value; + } + + @action changeVertMajorType(value) + { + this.vertMajorType = value; + } + + @action changeVertMinorType(value) { + this.vertMinorType = value; + } + + @action changeVertLabelPosition(value) { + this.vertLabelPosition = value; + } + + // Horizontal + + @action changeHorAxisCrosses(value) { + this.axisHorCrosses = value; + } + + @action toggleHorValuesReverseOrder(value) { + this.valuesHorReverseOrder = value; + } + + @action changeHorMajorType(value){ + this.horMajorType = value; + } + + @action changeHorMinorType(value) { + this.horMinorType = value; + } + + @action changeHorLabelPosition(value) { + this.horLabelPosition = value; + } + + @action changeAxisPosition(value) { + this.axisPosition = value; + } + @observable chartStyles = null; @action clearChartStyles () { diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx index 787a603e33..01e02e6235 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx @@ -15,7 +15,7 @@ import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorder import { PageImageReplace, PageImageReorder, PageLinkSettings } from './EditImage'; import { TextColorCell, FillColorCell, CustomTextColorCell, CustomFillColorCell, FontsCell, TextFormatCell, TextOrientationCell, BorderStyleCell, BorderColorCell, CustomBorderColorCell, BorderSizeCell, PageFormatCell, PageAccountingFormatCell, PageCurrencyFormatCell, PageDateFormatCell, PageTimeFormatCell } from './EditCell'; import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor } from './EditText'; -import { PageChartStyle, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartLayout, PageChartLegend, PageChartTitle, PageChartHorizontalAxisTitle, PageChartVerticalAxisTitle, PageChartHorizontalGridlines, PageChartVerticalGridlines, PageChartDataLabels } from './EditChart'; +import { PageChartStyle, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartLayout, PageChartLegend, PageChartTitle, PageChartHorizontalAxisTitle, PageChartVerticalAxisTitle, PageChartHorizontalGridlines, PageChartVerticalGridlines, PageChartDataLabels, PageChartVerticalAxis, PageChartVertAxisCrosses, PageChartDisplayUnits, PageChartVertMajorType, PageChartVertMinorType, PageChartVertLabelPosition, PageChartHorizontalAxis, PageChartHorAxisCrosses, PageChartHorAxisPosition, PageChartHorMajorType, PageChartHorMinorType, PageChartHorLabelPosition } from './EditChart'; const routes = [ @@ -200,8 +200,63 @@ const routes = [ { path: '/edit-data-labels/', component: PageChartDataLabels + }, + + // Vertical Axis + + { + path: '/edit-chart-vertical-axis/', + component: PageChartVerticalAxis + }, + { + path: '/edit-vert-axis-crosses/', + component: PageChartVertAxisCrosses + }, + { + path: '/edit-display-units/', + component: PageChartDisplayUnits + }, + { + path: '/edit-vert-major-type/', + component: PageChartVertMajorType + }, + { + path: '/edit-vert-minor-type/', + component: PageChartVertMinorType + }, + { + path: '/edit-vert-label-position/', + component: PageChartVertLabelPosition + }, + + // Horizontal Axis + + { + path: '/edit-chart-horizontal-axis/', + component: PageChartHorizontalAxis + }, + { + path: '/edit-hor-axis-crosses/', + component: PageChartHorAxisCrosses + }, + { + path: '/edit-hor-axis-position/', + component: PageChartHorAxisPosition + }, + { + path: '/edit-hor-major-type/', + component: PageChartHorMajorType + }, + { + path: '/edit-hor-minor-type/', + component: PageChartHorMinorType + }, + { + path: '/edit-hor-label-position/', + component: PageChartHorLabelPosition } + ]; const EmptyEditLayout = () => { diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx index 3fba41874f..c73280b5e1 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx @@ -1,6 +1,6 @@ -import React, {Fragment, useState} from 'react'; +import React, {Fragment, useState, useEffect} from 'react'; import {observer, inject} from "mobx-react"; -import {List, ListItem, ListButton, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, Link, Tabs, Tab, NavTitle, NavRight} from 'framework7-react'; +import {List, ListItem, ListButton, ListInput, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, Link, Tabs, Tab, NavTitle, NavRight} from 'framework7-react'; import { useTranslation } from 'react-i18next'; import {Device} from '../../../../../common/mobile/utils/device'; import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx"; @@ -329,8 +329,8 @@ const PageLayout = props => { 2: `${_t.textTop}`, 3: `${_t.textRight}`, 4: `${_t.textBottom}`, - // 5: `${_t.textLeftOverlay}`, - // 6: `${_t.textRightOverlay}` + 5: `${_t.textLeftOverlay}`, + 6: `${_t.textRightOverlay}` } const chartLayoutAxisTitleHorizontal = { @@ -372,9 +372,6 @@ const PageLayout = props => { 7: `${_t.textOuterTop}` } - console.log(chartProperties.getVertGridLines()); - - return ( @@ -602,6 +599,593 @@ const PageDataLabels = props => { ) } +const PageVerticalAxis = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const axisProps = props.initVertAxis(); + const crossValue = axisProps.getCrossesRule(); + + const axisCrosses = [ + {display: `${_t.textAuto}`, value: Asc.c_oAscCrossesRule.auto}, + {display: `${_t.textValue}`, value: Asc.c_oAscCrossesRule.value}, + {display: `${_t.textMinimumValue}`, value: Asc.c_oAscCrossesRule.minValue}, + {display: `${_t.textMaximumValue}`, value: Asc.c_oAscCrossesRule.maxValue} + ]; + + const vertAxisDisplayUnits = [ + {display: `${_t.textNone}`, value: Asc.c_oAscValAxUnits.none}, + {display: `${_t.textHundreds}`, value: Asc.c_oAscValAxUnits.HUNDREDS}, + {display: `${_t.textThousands}`, value: Asc.c_oAscValAxUnits.THOUSANDS}, + {display: `${_t.textTenThousands}`, value: Asc.c_oAscValAxUnits.TEN_THOUSANDS}, + {display: `${_t.textHundredThousands}`, value: Asc.c_oAscValAxUnits.HUNDRED_THOUSANDS}, + {display: `${_t.textMillions}`, value: Asc.c_oAscValAxUnits.MILLIONS}, + {display: `${_t.textTenMillions}`, value: Asc.c_oAscValAxUnits.TEN_MILLIONS}, + {display: `${_t.textHundredMil}`, value: Asc.c_oAscValAxUnits.HUNDRED_MILLIONS}, + {display: `${_t.textBillions}`, value: Asc.c_oAscValAxUnits.BILLIONS}, + {display: `${_t.textTrillions}`, value: Asc.c_oAscValAxUnits.TRILLIONS} + ]; + + const tickOptions = [ + {display: `${_t.textNone}`, value: Asc.c_oAscTickMark.TICK_MARK_NONE}, + {display: `${_t.textCross}`, value: Asc.c_oAscTickMark.TICK_MARK_CROSS}, + {display: `${_t.textIn}`, value: Asc.c_oAscTickMark.TICK_MARK_IN}, + {display: `${_t.textOut}`, value: Asc.c_oAscTickMark.TICK_MARK_OUT} + ]; + + const verticalAxisLabelsPosition = [ + {display: `${_t.textNone}`, value: Asc.c_oAscTickLabelsPos.TICK_LABEL_POSITION_NONE}, + {display: `${_t.textLow}`, value: Asc.c_oAscTickLabelsPos.TICK_LABEL_POSITION_LOW}, + {display: `${_t.textHigh}`, value: Asc.c_oAscTickLabelsPos.TICK_LABEL_POSITION_HIGH}, + {display: `${_t.textNextToAxis}`, value: Asc.c_oAscTickLabelsPos.TICK_LABEL_POSITION_NEXT_TO} + ]; + + const defineCurrentAxisCrosses = () => axisCrosses.find(elem => elem.value === crossValue); + const currentAxisCrosses = defineCurrentAxisCrosses(); + + if(!storeChartSettings.axisVertCrosses) { + storeChartSettings.changeVertAxisCrosses(currentAxisCrosses); + } + + // console.log(storeChartSettings.axisCrosses); + + const defineCurrentDisplayUnits = () => vertAxisDisplayUnits.find(elem => elem.value === axisProps.getDispUnitsRule()); + const currentDisplayUnits = defineCurrentDisplayUnits(); + + if(!storeChartSettings.displayUnits) { + storeChartSettings.changeDisplayUnits(currentDisplayUnits); + } + + // console.log(storeChartSettings.displayUnits); + + if(storeChartSettings.valuesVertReverseOrder == undefined) { + storeChartSettings.toggleVertValuesReverseOrder(axisProps.getInvertValOrder()); + } + + const valueMajorType = axisProps.getMajorTickMark(); + const valueMinorType = axisProps.getMinorTickMark(); + const defineCurrentTickOption = (elemType) => tickOptions.find(elem => elem.value === elemType); + const currentMajorType = defineCurrentTickOption(valueMajorType); + + if(!storeChartSettings.vertMajorType) { + storeChartSettings.changeVertMajorType(currentMajorType); + } + + const currentMinorType = defineCurrentTickOption(valueMinorType); + + if(!storeChartSettings.vertMinorType) { + storeChartSettings.changeVertMinorType(currentMinorType); + } + + // console.log(storeChartSettings.vertMajorType); + // console.log(storeChartSettings.vertMinorType); + + const defineLabelsPosition = () => verticalAxisLabelsPosition.find(elem => elem.value === axisProps.getTickLabelsPos()); + const currentLabelsPosition = defineLabelsPosition(); + + if(!storeChartSettings.vertLabelPosition) { + storeChartSettings.changeVertLabelPosition(currentLabelsPosition); + } + + // console.log(storeChartSettings.vertLabelPosition); + + const [minValue, setMinValue] = useState(axisProps.getMinValRule() == Asc.c_oAscValAxisRule.auto ? '' : axisProps.getMinVal()); + const [maxValue, setMaxValue] = useState(axisProps.getMaxValRule() == Asc.c_oAscValAxisRule.auto ? '' : axisProps.getMaxVal()); + + const currentCrossesValue = axisProps.getCrosses(); + const [crossesValue, setCrossesValue] = useState(!currentCrossesValue ? '' : currentCrossesValue); + + return ( + + + + +
+
+ props.onVerAxisMinValue(e.target.value)} + onInput={e => setMinValue(e.target.value)} placeholder="Auto" /> +
+
+ + +
+
+ props.onVerAxisMaxValue(e.target.value)} + onInput={e => setMaxValue(e.target.value)} placeholder="Auto" /> +
+
+ + + + + {storeChartSettings.axisVertCrosses.value == Asc.c_oAscCrossesRule.value ? ( + +
+
+ props.onVerAxisCrossValue(e.target.value)} + onInput={e => setCrossesValue(e.target.value)} placeholder="0" /> +
+
+ + ) : null} + + + + +
+ { + storeChartSettings.toggleVertValuesReverseOrder(!storeChartSettings.valuesVertReverseOrder); + props.onVerAxisReverse(!storeChartSettings.valuesVertReverseOrder); + }} /> +
+ + + {_t.textTickOptions} + + + + + {_t.textLabelOptions} + + + + + ) +} + +const PageVertAxisCrosses = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const currentAxisCrosses = storeChartSettings.axisVertCrosses; + const axisCrosses = props.axisCrosses; + + return ( + + + + {axisCrosses.map((elem, index) => { + return ( + { + storeChartSettings.changeVertAxisCrosses(elem); + props.onVerAxisCrossType(elem.value); + }}> + + ) + })} + + + ) +} + +const PageDisplayUnits = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const displayUnits = storeChartSettings.displayUnits; + const vertAxisDisplayUnits = props.vertAxisDisplayUnits; + + return ( + + + + {vertAxisDisplayUnits.map((elem, index) => { + return ( + { + storeChartSettings.changeDisplayUnits(elem); + props.onVerAxisDisplayUnits(elem.value); + }}> + + ) + })} + + + ) +} + +const PageVertMajorType = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const vertMajorType = storeChartSettings.vertMajorType; + const tickOptions = props.tickOptions; + + return ( + + + + {tickOptions.map((elem, index) => { + return ( + { + storeChartSettings.changeVertMajorType(elem); + props.onVerAxisTickMajor(elem.value); + }}> + + ) + })} + + + ) +} + +const PageVertMinorType = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const vertMinorType = storeChartSettings.vertMinorType; + const tickOptions = props.tickOptions; + + return ( + + + + {tickOptions.map((elem, index) => { + return ( + { + storeChartSettings.changeVertMinorType(elem); + props.onVerAxisTickMinor(elem.value); + }}> + + ) + })} + + + ) +} + +const PageVertLabelPosition = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const vertLabelPosition = storeChartSettings.vertLabelPosition; + const verticalAxisLabelsPosition = props.verticalAxisLabelsPosition; + + return ( + + + + {verticalAxisLabelsPosition.map((elem, index) => { + return ( + { + storeChartSettings.changeVertLabelPosition(elem); + props.onVerAxisLabelPos(elem.value); + }}> + + ) + })} + + + ) +} + +const PageHorizontalAxis = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const axisProps = props.initHorAxis(); + const crossValue = axisProps.getCrossesRule(); + + const axisCrosses = [ + {display: `${_t.textAuto}`, value: Asc.c_oAscCrossesRule.auto}, + {display: `${_t.textValue}`, value: Asc.c_oAscCrossesRule.value}, + {display: `${_t.textMinimumValue}`, value: Asc.c_oAscCrossesRule.minValue}, + {display: `${_t.textMaximumValue}`, value: Asc.c_oAscCrossesRule.maxValue} + ]; + + const tickOptions = [ + {display: `${_t.textNone}`, value: Asc.c_oAscTickMark.TICK_MARK_NONE}, + {display: `${_t.textCross}`, value: Asc.c_oAscTickMark.TICK_MARK_CROSS}, + {display: `${_t.textIn}`, value: Asc.c_oAscTickMark.TICK_MARK_IN}, + {display: `${_t.textOut}`, value: Asc.c_oAscTickMark.TICK_MARK_OUT} + ]; + + const horAxisLabelsPosition = [ + {display: `${_t.textNone}`, value: Asc.c_oAscTickLabelsPos.TICK_LABEL_POSITION_NONE}, + {display: `${_t.textLow}`, value: Asc.c_oAscTickLabelsPos.TICK_LABEL_POSITION_LOW}, + {display: `${_t.textHigh}`, value: Asc.c_oAscTickLabelsPos.TICK_LABEL_POSITION_HIGH}, + {display: `${_t.textNextToAxis}`, value: Asc.c_oAscTickLabelsPos.TICK_LABEL_POSITION_NEXT_TO} + ]; + + const horAxisPosition = [ + {display: `${_t.textOnTickMarks}`, value: Asc.c_oAscLabelsPosition.byDivisions}, + {display: `${_t.textBetweenTickMarks}`, value: Asc.c_oAscLabelsPosition.betweenDivisions} + ]; + + const defineCurrentAxisCrosses = () => axisCrosses.find(elem => elem.value === crossValue); + const currentAxisCrosses = defineCurrentAxisCrosses(); + + if(!storeChartSettings.axisHorCrosses) { + storeChartSettings.changeHorAxisCrosses(currentAxisCrosses); + } + + console.log(storeChartSettings.axisHorCrosses); + + const defineAxisPosition = () => horAxisPosition.find(elem => elem.value === axisProps.getLabelsPosition()); + const axisPosition = defineAxisPosition(); + + if(!storeChartSettings.axisPosition) { + storeChartSettings.changeAxisPosition(axisPosition); + } + + console.log(storeChartSettings.axisPosition) + + if(storeChartSettings.valuesHorReverseOrder == undefined) { + storeChartSettings.toggleHorValuesReverseOrder(axisProps.getInvertCatOrder()); + } + + console.log(storeChartSettings.valuesHorReverseOrder); + + const valueMajorType = axisProps.getMajorTickMark(); + const valueMinorType = axisProps.getMinorTickMark(); + const defineCurrentTickOption = (elemType) => tickOptions.find(elem => elem.value === elemType); + const currentMajorType = defineCurrentTickOption(valueMajorType); + + if(!storeChartSettings.horMajorType) { + storeChartSettings.changeHorMajorType(currentMajorType); + } + + const currentMinorType = defineCurrentTickOption(valueMinorType); + + if(!storeChartSettings.horMinorType) { + storeChartSettings.changeHorMinorType(currentMinorType); + } + + console.log(storeChartSettings.horMajorType); + console.log(storeChartSettings.horMinorType); + + const defineLabelsPosition = () => horAxisLabelsPosition.find(elem => elem.value === axisProps.getTickLabelsPos()); + const currentLabelsPosition = defineLabelsPosition(); + + if(!storeChartSettings.horLabelPosition) { + storeChartSettings.changeHorLabelPosition(currentLabelsPosition); + } + + console.log(storeChartSettings.horLabelPosition); + + const currentCrossesValue = axisProps.getCrosses(); + const [crossesValue, setCrossesValue] = useState(!currentCrossesValue ? '' : currentCrossesValue); + + return ( + + + + + {storeChartSettings.axisHorCrosses.value == Asc.c_oAscCrossesRule.value ? ( + +
+
+ props.onHorAxisCrossValue(e.target.value)} + onInput={e => setCrossesValue(e.target.value)} placeholder="0" /> +
+
+ + ) : null} + + + + +
+ { + storeChartSettings.toggleHorValuesReverseOrder(!storeChartSettings.valuesHorReverseOrder); + props.onHorAxisReverse(!storeChartSettings.valuesHorReverseOrder); + }} /> +
+ + + {_t.textTickOptions} + + + + + {_t.textLabelOptions} + + + + + ) +} + +const PageHorAxisCrosses = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const currentAxisCrosses = storeChartSettings.axisHorCrosses; + const axisCrosses = props.axisCrosses; + + return ( + + + + {axisCrosses.map((elem, index) => { + return ( + { + storeChartSettings.changeHorAxisCrosses(elem); + props.onHorAxisCrossType(elem.value); + }}> + + ) + })} + + + ) +} + +const PageHorAxisPosition = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const axisPosition = storeChartSettings.axisPosition; + const horAxisPosition = props.horAxisPosition; + + return ( + + + + {horAxisPosition.map((elem, index) => { + return ( + { + storeChartSettings.changeAxisPosition(elem); + props.onHorAxisPos(elem.value); + }}> + + ) + })} + + + ) +} + +const PageHorMajorType = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const horMajorType = storeChartSettings.horMajorType; + const tickOptions = props.tickOptions; + + return ( + + + + {tickOptions.map((elem, index) => { + return ( + { + storeChartSettings.changeHorMajorType(elem); + props.onHorAxisTickMajor(elem.value); + }}> + + ) + })} + + + ) +} + +const PageHorMinorType = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const horMinorType = storeChartSettings.horMinorType; + const tickOptions = props.tickOptions; + + return ( + + + + {tickOptions.map((elem, index) => { + return ( + { + storeChartSettings.changeHorMinorType(elem); + props.onHorAxisTickMinor(elem.value); + }}> + + ) + })} + + + ) +} + +const PageHorLabelPosition = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const horLabelPosition = storeChartSettings.horLabelPosition; + const horAxisLabelsPosition = props.horAxisLabelsPosition; + + return ( + + + + {horAxisLabelsPosition.map((elem, index) => { + return ( + { + storeChartSettings.changeHorLabelPosition(elem); + props.onHorAxisLabelPos(elem.value); + }}> + + ) + })} + + + ) +} + const EditChart = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); @@ -629,8 +1213,28 @@ const EditChart = props => { disableSetting, setLayoutProperty: props.setLayoutProperty }}> - - + + @@ -651,10 +1255,22 @@ const PageChartLayout = inject("storeChartSettings", "storeFocusObjects")(observ const PageChartLegend = inject("storeChartSettings")(observer(PageLegend)); const ChartTitle = inject("storeChartSettings")(observer(PageChartTitle)); const PageChartHorizontalAxisTitle = inject("storeChartSettings")(observer(PageHorizontalAxisTitle)); -const PageChartVerticalAxisTitle = inject("storeChartSettings")(observer(PageVerticalAxisTitle)); +const PageChartVerticalAxisTitle = inject("storeChartSettings", "storeFocusObjects")(observer(PageVerticalAxisTitle)); const PageChartHorizontalGridlines = inject("storeChartSettings")(observer(PageHorizontalGridlines)); const PageChartVerticalGridlines = inject("storeChartSettings")(observer(PageVerticalGridlines)); const PageChartDataLabels = inject("storeChartSettings")(observer(PageDataLabels)); +const PageChartVerticalAxis = inject("storeChartSettings")(observer(PageVerticalAxis)); +const PageChartVertAxisCrosses = inject("storeChartSettings")(observer(PageVertAxisCrosses)); +const PageChartDisplayUnits = inject("storeChartSettings")(observer(PageDisplayUnits)); +const PageChartVertMajorType = inject("storeChartSettings")(observer(PageVertMajorType)); +const PageChartVertMinorType = inject("storeChartSettings")(observer(PageVertMinorType)); +const PageChartVertLabelPosition = inject("storeChartSettings")(observer(PageVertLabelPosition)); +const PageChartHorizontalAxis = inject("storeChartSettings")(observer(PageHorizontalAxis)); +const PageChartHorAxisCrosses = inject("storeChartSettings")(observer(PageHorAxisCrosses)); +const PageChartHorAxisPosition = inject("storeChartSettings")(observer(PageHorAxisPosition)); +const PageChartHorMajorType = inject("storeChartSettings")(observer(PageHorMajorType)); +const PageChartHorMinorType = inject("storeChartSettings")(observer(PageHorMinorType)); +const PageChartHorLabelPosition = inject("storeChartSettings")(observer(PageHorLabelPosition)); export { PageEditChart as EditChart, @@ -670,5 +1286,17 @@ export { PageChartVerticalAxisTitle, PageChartHorizontalGridlines, PageChartVerticalGridlines, - PageChartDataLabels + PageChartDataLabels, + PageChartVerticalAxis, + PageChartVertAxisCrosses, + PageChartDisplayUnits, + PageChartVertMajorType, + PageChartVertMinorType, + PageChartVertLabelPosition, + PageChartHorizontalAxis, + PageChartHorAxisCrosses, + PageChartHorAxisPosition, + PageChartHorMajorType, + PageChartHorMinorType, + PageChartHorLabelPosition } \ No newline at end of file