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

[SSE mobile] Refactoring Chart Settings

Browse source
This commit is contained in:
SergeyEzhin 2021-03-05 00:22:28 +03:00
parent 4ed2a8a3c4
commit 56c323c0e1
4 changed files with 208 additions and 366 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
apps/spreadsheeteditor/mobile/src/controller/edit/EditChart.jsx
View file

@ -8,7 +8,6 @@ import { EditChart } from '../../view/edit/EditChart';
class EditChartController extends Component { class EditChartController extends Component {
constructor (props) { constructor (props) {
super(props); super(props);
this.props.storeChartSettings.initChartLayout(this.props.storeFocusObjects.chartObject.get_ChartProperties());
this.onRemoveChart = this.onRemoveChart.bind(this); this.onRemoveChart = this.onRemoveChart.bind(this);
this.onType = this.onType.bind(this); this.onType = this.onType.bind(this);
this.onStyle = this.onStyle.bind(this); this.onStyle = this.onStyle.bind(this);
@ -179,16 +178,6 @@ class EditChartController extends Component {
} }
} }
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() { getVerticalAxisProp() {
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
let chartObject = api.asc_getChartObject(), let chartObject = api.asc_getChartObject(),
@ -293,16 +282,6 @@ class EditChartController extends Component {
// Horizontal // 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() { getHorizontalAxisProp() {
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
let chartObject = api.asc_getChartObject(), let chartObject = api.asc_getChartObject(),
@ -390,7 +369,6 @@ class EditChartController extends Component {
onStyle={this.onStyle} onStyle={this.onStyle}
onRemoveChart={this.onRemoveChart} onRemoveChart={this.onRemoveChart}
setLayoutProperty={this.setLayoutProperty} setLayoutProperty={this.setLayoutProperty}
initVertAxis={this.initVertAxis}
onVerAxisMinValue={this.onVerAxisMinValue} onVerAxisMinValue={this.onVerAxisMinValue}
onVerAxisMaxValue={this.onVerAxisMaxValue} onVerAxisMaxValue={this.onVerAxisMaxValue}
onVerAxisCrossType={this.onVerAxisCrossType} onVerAxisCrossType={this.onVerAxisCrossType}
@ -400,7 +378,6 @@ class EditChartController extends Component {
onVerAxisTickMajor={this.onVerAxisTickMajor} onVerAxisTickMajor={this.onVerAxisTickMajor}
onVerAxisTickMinor={this.onVerAxisTickMinor} onVerAxisTickMinor={this.onVerAxisTickMinor}
onVerAxisLabelPos={this.onVerAxisLabelPos} onVerAxisLabelPos={this.onVerAxisLabelPos}
initHorAxis={this.initHorAxis}
getHorizontalAxisProp={this.getHorizontalAxisProp} getHorizontalAxisProp={this.getHorizontalAxisProp}
setHorizontalAxisProp={this.setHorizontalAxisProp} setHorizontalAxisProp={this.setHorizontalAxisProp}
onHorAxisCrossType={this.onHorAxisCrossType} onHorAxisCrossType={this.onHorAxisCrossType}

112
apps/spreadsheeteditor/mobile/src/store/chartSettings.js
View file

@ -30,118 +30,6 @@ export class storeChartSettings {
return this.fillColor; return this.fillColor;
} }
@observable chartTitle = undefined;
@observable chartLegend = undefined;
@observable chartAxisHorTitle = undefined;
@observable chartAxisVertTitle = undefined;
@observable chartHorGridlines = undefined;
@observable chartVertGridlines = undefined;
@observable chartDataLabel = undefined;
@action initChartLayout(chartProperties) {
this.chartTitle = chartProperties.getTitle() ? chartProperties.getTitle() : 0;
this.chartLegend = chartProperties.getLegendPos() ? chartProperties.getLegendPos() : 0;
this.chartAxisHorTitle = chartProperties.getHorAxisLabel() ? chartProperties.getHorAxisLabel() : 0;
this.chartAxisVertTitle = chartProperties.getVertAxisLabel() ? chartProperties.getVertAxisLabel() : 0;
this.chartHorGridlines = chartProperties.getHorGridLines() ? chartProperties.getHorGridLines() : 0;
this.chartVertGridlines = chartProperties.getVertGridLines() ? chartProperties.getVertGridLines() : 0;
this.chartDataLabel = chartProperties.getDataLabelsPos() ? chartProperties.getDataLabelsPos() : 0;
}
@action changeChartTitle(value) {
this.chartTitle = value;
}
@action changeChartLegend(value) {
this.chartLegend = value;
}
@action changeChartAxisHorTitle(value) {
this.chartAxisHorTitle = value;
}
@action changeChartAxisVertTitle(value) {
this.chartAxisVertTitle = value;
}
@action changeChartHorGridlines(value) {
this.chartHorGridlines = value;
}
@action changeChartVertGridlines(value) {
this.chartVertGridlines = value;
}
@action changeChartDataLabel(value) {
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; @observable chartStyles = null;
@action clearChartStyles () { @action clearChartStyles () {

34
apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx
View file

@ -16,7 +16,7 @@ import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorder
import { PageImageReplace, PageImageReorder, PageLinkSettings } from './EditImage'; 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 { 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 { PageTextFonts, PageTextFontColor, PageTextCustomFontColor } from './EditText';
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'; import { PageChartStyle, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartLayout, PageLegend, PageChartTitle, PageHorizontalAxisTitle, PageVerticalAxisTitle, PageHorizontalGridlines, PageVerticalGridlines, PageDataLabels, PageChartVerticalAxis, PageVertAxisCrosses, PageDisplayUnits, PageVertMajorType, PageVertMinorType, PageVertLabelPosition, PageChartHorizontalAxis, PageHorAxisCrosses, PageHorAxisPosition, PageHorMajorType, PageHorMinorType, PageHorLabelPosition } from './EditChart';
import { PageTypeLink, PageSheet } from './EditLink'; import { PageTypeLink, PageSheet } from './EditLink';
const routes = [ const routes = [
@ -181,27 +181,27 @@ const routes = [
}, },
{ {
path: '/edit-chart-legend/', path: '/edit-chart-legend/',
component: PageChartLegend component: PageLegend
}, },
{ {
path: '/edit-horizontal-axis-title/', path: '/edit-horizontal-axis-title/',
component: PageChartHorizontalAxisTitle component: PageHorizontalAxisTitle
}, },
{ {
path: '/edit-vertical-axis-title/', path: '/edit-vertical-axis-title/',
component: PageChartVerticalAxisTitle component: PageVerticalAxisTitle
}, },
{ {
path: '/edit-horizontal-gridlines/', path: '/edit-horizontal-gridlines/',
component: PageChartHorizontalGridlines component: PageHorizontalGridlines
}, },
{ {
path: '/edit-vertical-gridlines/', path: '/edit-vertical-gridlines/',
component: PageChartVerticalGridlines component: PageVerticalGridlines
}, },
{ {
path: '/edit-data-labels/', path: '/edit-data-labels/',
component: PageChartDataLabels component: PageDataLabels
}, },
// Vertical Axis // Vertical Axis
@ -212,23 +212,23 @@ const routes = [
}, },
{ {
path: '/edit-vert-axis-crosses/', path: '/edit-vert-axis-crosses/',
component: PageChartVertAxisCrosses component: PageVertAxisCrosses
}, },
{ {
path: '/edit-display-units/', path: '/edit-display-units/',
component: PageChartDisplayUnits component: PageDisplayUnits
}, },
{ {
path: '/edit-vert-major-type/', path: '/edit-vert-major-type/',
component: PageChartVertMajorType component: PageVertMajorType
}, },
{ {
path: '/edit-vert-minor-type/', path: '/edit-vert-minor-type/',
component: PageChartVertMinorType component: PageVertMinorType
}, },
{ {
path: '/edit-vert-label-position/', path: '/edit-vert-label-position/',
component: PageChartVertLabelPosition component: PageVertLabelPosition
}, },
// Horizontal Axis // Horizontal Axis
@ -239,23 +239,23 @@ const routes = [
}, },
{ {
path: '/edit-hor-axis-crosses/', path: '/edit-hor-axis-crosses/',
component: PageChartHorAxisCrosses component: PageHorAxisCrosses
}, },
{ {
path: '/edit-hor-axis-position/', path: '/edit-hor-axis-position/',
component: PageChartHorAxisPosition component: PageHorAxisPosition
}, },
{ {
path: '/edit-hor-major-type/', path: '/edit-hor-major-type/',
component: PageChartHorMajorType component: PageHorMajorType
}, },
{ {
path: '/edit-hor-minor-type/', path: '/edit-hor-minor-type/',
component: PageChartHorMinorType component: PageHorMinorType
}, },
{ {
path: '/edit-hor-label-position/', path: '/edit-hor-label-position/',
component: PageChartHorLabelPosition component: PageHorLabelPosition
}, },
// Link // Link

405
apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx
View file

@ -268,18 +268,17 @@ const PageLayout = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true}); const _t = t('View.Edit', {returnObjects: true});
const storeFocusObjects = props.storeFocusObjects; const storeFocusObjects = props.storeFocusObjects;
const storeChartSettings = props.storeChartSettings;
const chartObject = storeFocusObjects.chartObject; const chartObject = storeFocusObjects.chartObject;
const chartProperties = chartObject.get_ChartProperties(); const chartProperties = chartObject.get_ChartProperties();
const chartType = chartProperties.getType(); const chartType = chartProperties.getType();
const chartTitle = storeChartSettings.chartTitle; const [chartTitle, setTitle] = useState(chartProperties.getTitle());
const chartLegend = storeChartSettings.chartLegend; const [chartLegend, setLegend] = useState(chartProperties.getLegendPos());
const chartAxisHorTitle = storeChartSettings.chartAxisHorTitle; const [chartAxisHorTitle, setAxisHorTitle] = useState(chartProperties.getHorAxisLabel());
const chartAxisVertTitle = storeChartSettings.chartAxisVertTitle; const [chartAxisVertTitle, setAxisVertTitle] = useState(chartProperties.getVertAxisLabel());
const chartHorGridlines = storeChartSettings.chartHorGridlines; const [chartHorGridlines, setHorGridlines] = useState(chartProperties.getHorGridLines());
const chartVertGridlines = storeChartSettings.chartVertGridlines; const [chartVertGridlines, setVertGridlines] = useState(chartProperties.getVertGridLines());
const chartDataLabel = storeChartSettings.chartDataLabel; const [chartDataLabel, setDataLabel] = useState(chartProperties.getDataLabelsPos());
let dataLabelPos = [ let dataLabelPos = [
{ value: Asc.c_oAscChartDataLabelsPos.none, displayValue: _t.textNone }, { value: Asc.c_oAscChartDataLabelsPos.none, displayValue: _t.textNone },
@ -325,7 +324,7 @@ const PageLayout = props => {
0: `${_t.textNone}`, 0: `${_t.textNone}`,
1: `${_t.textOverlay}`, 1: `${_t.textOverlay}`,
2: `${_t.textNoOverlay}` 2: `${_t.textNoOverlay}`
} };
const chartLayoutLegends = { const chartLayoutLegends = {
0: `${_t.textNone}`, 0: `${_t.textNone}`,
@ -335,32 +334,32 @@ const PageLayout = props => {
4: `${_t.textBottom}`, 4: `${_t.textBottom}`,
5: `${_t.textLeftOverlay}`, 5: `${_t.textLeftOverlay}`,
6: `${_t.textRightOverlay}` 6: `${_t.textRightOverlay}`
} };
const chartLayoutAxisTitleHorizontal = { const chartLayoutAxisTitleHorizontal = {
0: `${_t.textNone}`, 0: `${_t.textNone}`,
1: `${_t.textNoOverlay}` 1: `${_t.textNoOverlay}`
} };
const chartLayoutAxisTitleVertical = { const chartLayoutAxisTitleVertical = {
0: `${_t.textNone}`, 0: `${_t.textNone}`,
1: `${_t.textRotated}`, 1: `${_t.textRotated}`,
3: `${_t.textHorizontal}` 3: `${_t.textHorizontal}`
} };
const chartLayoutGridlinesHorizontal = { const chartLayoutGridlinesHorizontal = {
0: `${_t.textNone}`, 0: `${_t.textNone}`,
1: `${_t.textMajor}`, 1: `${_t.textMajor}`,
2: `${_t.textMinor}`, 2: `${_t.textMinor}`,
3: `${_t.textMajorAndMinor}` 3: `${_t.textMajorAndMinor}`
} };
const chartLayoutGridlinesVertical = { const chartLayoutGridlinesVertical = {
0: `${_t.textNone}`, 0: `${_t.textNone}`,
1: `${_t.textMajor}`, 1: `${_t.textMajor}`,
2: `${_t.textMinor}`, 2: `${_t.textMinor}`,
3: `${_t.textMajorAndMinor}` 3: `${_t.textMajorAndMinor}`
} };
const chartDataLabels = { const chartDataLabels = {
0: `${_t.textNone}`, 0: `${_t.textNone}`,
@ -368,7 +367,7 @@ const PageLayout = props => {
2: `${_t.textFit}`, 2: `${_t.textFit}`,
5: `${_t.textInnerTop}`, 5: `${_t.textInnerTop}`,
7: `${_t.textOuterTop}` 7: `${_t.textOuterTop}`
} };
return ( return (
<Page> <Page>
@ -377,13 +376,17 @@ const PageLayout = props => {
<ListItem title={_t.textChartTitle} <ListItem title={_t.textChartTitle}
after={chartLayoutTitles[chartTitle]} link="/edit-chart-title/" routeProps={{ after={chartLayoutTitles[chartTitle]} link="/edit-chart-title/" routeProps={{
chartLayoutTitles, chartLayoutTitles,
setLayoutProperty: props.setLayoutProperty chartTitle,
setTitle,
setLayoutProperty: props.setLayoutProperty,
}}> }}>
</ListItem> </ListItem>
<ListItem title={_t.textLegend} <ListItem title={_t.textLegend}
after={chartLayoutLegends[chartLegend]} link="/edit-chart-legend/" routeProps={{ after={chartLayoutLegends[chartLegend]} link="/edit-chart-legend/" routeProps={{
chartLayoutLegends, chartLayoutLegends,
setLayoutProperty: props.setLayoutProperty setLayoutProperty: props.setLayoutProperty,
chartLegend,
setLegend
}}> }}>
</ListItem> </ListItem>
</List> </List>
@ -392,13 +395,17 @@ const PageLayout = props => {
<ListItem title={_t.textHorizontal} link="/edit-horizontal-axis-title/" <ListItem title={_t.textHorizontal} link="/edit-horizontal-axis-title/"
after={chartLayoutAxisTitleHorizontal[chartAxisHorTitle]} disabled={disableSetting} routeProps={{ after={chartLayoutAxisTitleHorizontal[chartAxisHorTitle]} disabled={disableSetting} routeProps={{
chartLayoutAxisTitleHorizontal, chartLayoutAxisTitleHorizontal,
setLayoutProperty: props.setLayoutProperty setLayoutProperty: props.setLayoutProperty,
chartAxisHorTitle,
setAxisHorTitle
}}> }}>
</ListItem> </ListItem>
<ListItem title={_t.textVertical} link="/edit-vertical-axis-title/" <ListItem title={_t.textVertical} link="/edit-vertical-axis-title/"
after={chartLayoutAxisTitleVertical[chartAxisVertTitle]} disabled={disableSetting} routeProps={{ after={chartLayoutAxisTitleVertical[chartAxisVertTitle]} disabled={disableSetting} routeProps={{
chartLayoutAxisTitleVertical, chartLayoutAxisTitleVertical,
setLayoutProperty: props.setLayoutProperty setLayoutProperty: props.setLayoutProperty,
chartAxisVertTitle,
setAxisVertTitle
}}> }}>
</ListItem> </ListItem>
</List> </List>
@ -407,20 +414,26 @@ const PageLayout = props => {
<ListItem title={_t.textHorizontal} link="/edit-horizontal-gridlines/" <ListItem title={_t.textHorizontal} link="/edit-horizontal-gridlines/"
after={chartLayoutGridlinesHorizontal[chartHorGridlines]} disabled={disableSetting} routeProps={{ after={chartLayoutGridlinesHorizontal[chartHorGridlines]} disabled={disableSetting} routeProps={{
chartLayoutGridlinesHorizontal, chartLayoutGridlinesHorizontal,
setLayoutProperty: props.setLayoutProperty setLayoutProperty: props.setLayoutProperty,
chartHorGridlines,
setHorGridlines
}}> }}>
</ListItem> </ListItem>
<ListItem title={_t.textVertical} link="/edit-vertical-gridlines/" <ListItem title={_t.textVertical} link="/edit-vertical-gridlines/"
after={chartLayoutGridlinesVertical[chartVertGridlines]} disabled={disableSetting} routeProps={{ after={chartLayoutGridlinesVertical[chartVertGridlines]} disabled={disableSetting} routeProps={{
chartLayoutGridlinesVertical, chartLayoutGridlinesVertical,
setLayoutProperty: props.setLayoutProperty setLayoutProperty: props.setLayoutProperty,
chartVertGridlines,
setVertGridlines
}}> }}>
</ListItem> </ListItem>
</List> </List>
<List> <List>
<ListItem title={_t.textDataLabels} link="/edit-data-labels/" after={chartDataLabels[chartDataLabel]} routeProps={{ <ListItem title={_t.textDataLabels} link="/edit-data-labels/" after={chartDataLabels[chartDataLabel]} routeProps={{
chartDataLabels, chartDataLabels,
setLayoutProperty: props.setLayoutProperty setLayoutProperty: props.setLayoutProperty,
chartDataLabel,
setDataLabel
}}> }}>
</ListItem> </ListItem>
</List> </List>
@ -431,9 +444,8 @@ const PageLayout = props => {
const PageChartTitle = props => { const PageChartTitle = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true}); const _t = t('View.Edit', {returnObjects: true});
const storeChartSettings = props.storeChartSettings;
const chartLayoutTitles = props.chartLayoutTitles; const chartLayoutTitles = props.chartLayoutTitles;
const currentTitle = storeChartSettings.chartTitle; const [currentTitle, setTitle] = useState(props.chartTitle);
return ( return (
<Page> <Page>
@ -442,7 +454,8 @@ const PageChartTitle = props => {
{Object.keys(chartLayoutTitles).map(key => { {Object.keys(chartLayoutTitles).map(key => {
return ( return (
<ListItem key={key} title={chartLayoutTitles[key]} radio checked={+key === currentTitle} onChange={() => { <ListItem key={key} title={chartLayoutTitles[key]} radio checked={+key === currentTitle} onChange={() => {
storeChartSettings.changeChartTitle(+key); props.setTitle(+key);
setTitle(+key);
props.setLayoutProperty('putTitle', key); props.setLayoutProperty('putTitle', key);
props.f7router.back(); props.f7router.back();
}}></ListItem> }}></ListItem>
@ -456,9 +469,8 @@ const PageChartTitle = props => {
const PageLegend = props => { const PageLegend = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true}); const _t = t('View.Edit', {returnObjects: true});
const storeChartSettings = props.storeChartSettings;
const chartLayoutLegends = props.chartLayoutLegends; const chartLayoutLegends = props.chartLayoutLegends;
const currentLegend = storeChartSettings.chartLegend; const [currentLegend, setLegend] = useState(props.chartLegend);
return ( return (
<Page> <Page>
@ -467,7 +479,8 @@ const PageLegend = props => {
{Object.keys(chartLayoutLegends).map(key => { {Object.keys(chartLayoutLegends).map(key => {
return ( return (
<ListItem key={key} title={chartLayoutLegends[key]} radio checked={+key === currentLegend} onChange={() => { <ListItem key={key} title={chartLayoutLegends[key]} radio checked={+key === currentLegend} onChange={() => {
storeChartSettings.changeChartLegend(+key); props.setLegend(+key);
setLegend(+key);
props.setLayoutProperty('putLegendPos', key); props.setLayoutProperty('putLegendPos', key);
props.f7router.back(); props.f7router.back();
}}></ListItem> }}></ListItem>
@ -481,9 +494,8 @@ const PageLegend = props => {
const PageHorizontalAxisTitle = props => { const PageHorizontalAxisTitle = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true}); const _t = t('View.Edit', {returnObjects: true});
const storeChartSettings = props.storeChartSettings;
const chartLayoutAxisTitleHorizontal = props.chartLayoutAxisTitleHorizontal; const chartLayoutAxisTitleHorizontal = props.chartLayoutAxisTitleHorizontal;
const currentAxisHorTitle = storeChartSettings.chartAxisHorTitle; const [currentAxisHorTitle, setAxisHorTitle] = useState(props.chartAxisHorTitle);
return ( return (
<Page> <Page>
@ -492,7 +504,8 @@ const PageHorizontalAxisTitle = props => {
{Object.keys(chartLayoutAxisTitleHorizontal).map(key => { {Object.keys(chartLayoutAxisTitleHorizontal).map(key => {
return ( return (
<ListItem key={key} title={chartLayoutAxisTitleHorizontal[key]} radio checked={+key === currentAxisHorTitle} onChange={() => { <ListItem key={key} title={chartLayoutAxisTitleHorizontal[key]} radio checked={+key === currentAxisHorTitle} onChange={() => {
storeChartSettings.changeChartAxisHorTitle(+key); props.setAxisHorTitle(+key);
setAxisHorTitle(+key);
props.setLayoutProperty('putHorAxisLabel', key); props.setLayoutProperty('putHorAxisLabel', key);
props.f7router.back(); props.f7router.back();
}}></ListItem> }}></ListItem>
@ -506,9 +519,8 @@ const PageHorizontalAxisTitle = props => {
const PageVerticalAxisTitle = props => { const PageVerticalAxisTitle = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true}); const _t = t('View.Edit', {returnObjects: true});
const storeChartSettings = props.storeChartSettings;
const chartLayoutAxisTitleVertical = props.chartLayoutAxisTitleVertical; const chartLayoutAxisTitleVertical = props.chartLayoutAxisTitleVertical;
const currentAxisVertTitle = storeChartSettings.chartAxisVertTitle; const [currentAxisVertTitle, setAxisVertTitle] = useState(props.chartAxisVertTitle);
return ( return (
<Page> <Page>
@ -517,7 +529,8 @@ const PageVerticalAxisTitle = props => {
{Object.keys(chartLayoutAxisTitleVertical).map(key => { {Object.keys(chartLayoutAxisTitleVertical).map(key => {
return ( return (
<ListItem key={key} title={chartLayoutAxisTitleVertical[key]} radio checked={+key === currentAxisVertTitle} onChange={() => { <ListItem key={key} title={chartLayoutAxisTitleVertical[key]} radio checked={+key === currentAxisVertTitle} onChange={() => {
storeChartSettings.changeChartAxisVertTitle(+key); props.setAxisVertTitle(+key);
setAxisVertTitle(+key);
props.setLayoutProperty('putVertAxisLabel', key); props.setLayoutProperty('putVertAxisLabel', key);
props.f7router.back(); props.f7router.back();
}}></ListItem> }}></ListItem>
@ -531,9 +544,8 @@ const PageVerticalAxisTitle = props => {
const PageHorizontalGridlines = props => { const PageHorizontalGridlines = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true}); const _t = t('View.Edit', {returnObjects: true});
const storeChartSettings = props.storeChartSettings;
const chartLayoutGridlinesHorizontal = props.chartLayoutGridlinesHorizontal; const chartLayoutGridlinesHorizontal = props.chartLayoutGridlinesHorizontal;
const currentChartHorGridlines = storeChartSettings.chartHorGridlines; const [currentChartHorGridlines, setHorGridlines] = useState(props.chartHorGridlines);
return ( return (
<Page> <Page>
@ -542,7 +554,8 @@ const PageHorizontalGridlines = props => {
{Object.keys(chartLayoutGridlinesHorizontal).map(key => { {Object.keys(chartLayoutGridlinesHorizontal).map(key => {
return ( return (
<ListItem key={key} title={chartLayoutGridlinesHorizontal[key]} radio checked={+key === currentChartHorGridlines} onChange={() => { <ListItem key={key} title={chartLayoutGridlinesHorizontal[key]} radio checked={+key === currentChartHorGridlines} onChange={() => {
storeChartSettings.changeChartHorGridlines(+key); props.setHorGridlines(+key);
setHorGridlines(+key);
props.setLayoutProperty('putHorGridLines', key); props.setLayoutProperty('putHorGridLines', key);
props.f7router.back(); props.f7router.back();
}}></ListItem> }}></ListItem>
@ -556,9 +569,8 @@ const PageHorizontalGridlines = props => {
const PageVerticalGridlines = props => { const PageVerticalGridlines = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true}); const _t = t('View.Edit', {returnObjects: true});
const storeChartSettings = props.storeChartSettings;
const chartLayoutGridlinesVertical = props.chartLayoutGridlinesVertical; const chartLayoutGridlinesVertical = props.chartLayoutGridlinesVertical;
const currentChartVertGridlines = storeChartSettings.chartVertGridlines; const [currentChartVertGridlines, setVertGridlines] = useState(props.chartVertGridlines);
return ( return (
<Page> <Page>
@ -567,7 +579,8 @@ const PageVerticalGridlines = props => {
{Object.keys(chartLayoutGridlinesVertical).map(key => { {Object.keys(chartLayoutGridlinesVertical).map(key => {
return ( return (
<ListItem key={key} title={chartLayoutGridlinesVertical[key]} radio checked={+key === currentChartVertGridlines} onChange={() => { <ListItem key={key} title={chartLayoutGridlinesVertical[key]} radio checked={+key === currentChartVertGridlines} onChange={() => {
storeChartSettings.changeChartVertGridlines(+key); props.setVertGridlines(+key);
setVertGridlines(+key);
props.setLayoutProperty('putVertGridLines', key); props.setLayoutProperty('putVertGridLines', key);
props.f7router.back(); props.f7router.back();
}}></ListItem> }}></ListItem>
@ -581,10 +594,9 @@ const PageVerticalGridlines = props => {
const PageDataLabels = props => { const PageDataLabels = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true}); const _t = t('View.Edit', {returnObjects: true});
const storeChartSettings = props.storeChartSettings;
const chartDataLabels = props.chartDataLabels; const chartDataLabels = props.chartDataLabels;
const currentChartDataLabel = storeChartSettings.chartDataLabel; const [currentChartDataLabel, setDataLabel] = useState(props.chartDataLabel);
return ( return (
<Page> <Page>
<Navbar title={_t.textDataLabels} backLink={_t.textBack} /> <Navbar title={_t.textDataLabels} backLink={_t.textBack} />
@ -592,7 +604,8 @@ const PageDataLabels = props => {
{Object.keys(chartDataLabels).map(key => { {Object.keys(chartDataLabels).map(key => {
return ( return (
<ListItem key={key} title={chartDataLabels[key]} radio checked={+key === currentChartDataLabel} onChange={() => { <ListItem key={key} title={chartDataLabels[key]} radio checked={+key === currentChartDataLabel} onChange={() => {
storeChartSettings.changeChartDataLabel(+key); props.setDataLabel(+key);
setDataLabel(+key);
props.setLayoutProperty('putDataLabelsPos', key); props.setLayoutProperty('putDataLabelsPos', key);
props.f7router.back(); props.f7router.back();
}}></ListItem> }}></ListItem>
@ -606,9 +619,11 @@ const PageDataLabels = props => {
const PageVerticalAxis = props => { const PageVerticalAxis = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true}); const _t = t('View.Edit', {returnObjects: true});
const api = Common.EditorApi.get();
const chartProperty = api.asc_getChartObject();
const isIos = Device.ios; const isIos = Device.ios;
const storeChartSettings = props.storeChartSettings; const verAxisProps = chartProperty.getVertAxisProps();
const axisProps = props.initVertAxis(); const axisProps = (verAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? verAxisProps : chartProperty.getHorAxisProps();
const crossValue = axisProps.getCrossesRule(); const crossValue = axisProps.getCrossesRule();
const axisCrosses = [ const axisCrosses = [
@ -646,44 +661,22 @@ const PageVerticalAxis = props => {
]; ];
const defineCurrentAxisCrosses = () => axisCrosses.find(elem => elem.value === crossValue); const defineCurrentAxisCrosses = () => axisCrosses.find(elem => elem.value === crossValue);
const currentAxisCrosses = defineCurrentAxisCrosses(); const [currentAxisCrosses, setAxisCrosses] = useState(defineCurrentAxisCrosses());
if(!storeChartSettings.axisVertCrosses) {
storeChartSettings.changeVertAxisCrosses(currentAxisCrosses);
}
const defineCurrentDisplayUnits = () => vertAxisDisplayUnits.find(elem => elem.value === axisProps.getDispUnitsRule()); const defineCurrentDisplayUnits = () => vertAxisDisplayUnits.find(elem => elem.value === axisProps.getDispUnitsRule());
const currentDisplayUnits = defineCurrentDisplayUnits(); const [currentDisplayUnits, setDisplayUnits] = useState(defineCurrentDisplayUnits());
if(!storeChartSettings.displayUnits) { const [valuesReverseOrder, toggleValuesReverseOrder] = useState(axisProps.getInvertValOrder());
storeChartSettings.changeDisplayUnits(currentDisplayUnits);
}
if(storeChartSettings.valuesVertReverseOrder == undefined) {
storeChartSettings.toggleVertValuesReverseOrder(axisProps.getInvertValOrder());
}
const valueMajorType = axisProps.getMajorTickMark(); const valueMajorType = axisProps.getMajorTickMark();
const valueMinorType = axisProps.getMinorTickMark(); const valueMinorType = axisProps.getMinorTickMark();
const defineCurrentTickOption = (elemType) => tickOptions.find(elem => elem.value === elemType); const defineCurrentTickOption = (elemType) => tickOptions.find(elem => elem.value === elemType);
const currentMajorType = defineCurrentTickOption(valueMajorType); const [currentMajorType, setMajorType] = useState(defineCurrentTickOption(valueMajorType));
const [currentMinorType, setMinorType] = useState(defineCurrentTickOption(valueMinorType));
if(!storeChartSettings.vertMajorType) {
storeChartSettings.changeVertMajorType(currentMajorType);
}
const currentMinorType = defineCurrentTickOption(valueMinorType);
if(!storeChartSettings.vertMinorType) {
storeChartSettings.changeVertMinorType(currentMinorType);
}
const defineLabelsPosition = () => verticalAxisLabelsPosition.find(elem => elem.value === axisProps.getTickLabelsPos()); const defineLabelsPosition = () => verticalAxisLabelsPosition.find(elem => elem.value === axisProps.getTickLabelsPos());
const currentLabelsPosition = defineLabelsPosition(); const [currentLabelsPosition, setLabelsPosition] = useState(defineLabelsPosition());
if(!storeChartSettings.vertLabelPosition) {
storeChartSettings.changeVertLabelPosition(currentLabelsPosition);
}
const [minValue, setMinValue] = useState(axisProps.getMinValRule() == Asc.c_oAscValAxisRule.auto ? '' : axisProps.getMinVal()); 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 [maxValue, setMaxValue] = useState(axisProps.getMaxValRule() == Asc.c_oAscValAxisRule.auto ? '' : axisProps.getMaxVal());
@ -716,11 +709,13 @@ const PageVerticalAxis = props => {
/> />
</List> </List>
<List inlineLabels className="inputs-list"> <List inlineLabels className="inputs-list">
<ListItem title={_t.textAxisCrosses} link="/edit-vert-axis-crosses/" after={storeChartSettings.axisVertCrosses.display} routeProps={{ <ListItem title={_t.textAxisCrosses} link="/edit-vert-axis-crosses/" after={currentAxisCrosses.display} routeProps={{
axisCrosses, axisCrosses,
onVerAxisCrossType: props.onVerAxisCrossType onVerAxisCrossType: props.onVerAxisCrossType,
currentAxisCrosses,
setAxisCrosses
}}></ListItem> }}></ListItem>
{storeChartSettings.axisVertCrosses.value == Asc.c_oAscCrossesRule.value ? ( {currentAxisCrosses.value == Asc.c_oAscCrossesRule.value ? (
<ListInput <ListInput
label={_t.textCrossesValue} label={_t.textCrossesValue}
type="number" type="number"
@ -733,36 +728,44 @@ const PageVerticalAxis = props => {
) : null} ) : null}
</List> </List>
<List> <List>
<ListItem title={_t.textDisplayUnits} link="/edit-display-units/" after={storeChartSettings.displayUnits.display} routeProps={{ <ListItem title={_t.textDisplayUnits} link="/edit-display-units/" after={currentDisplayUnits.display} routeProps={{
vertAxisDisplayUnits, vertAxisDisplayUnits,
onVerAxisDisplayUnits: props.onVerAxisDisplayUnits onVerAxisDisplayUnits: props.onVerAxisDisplayUnits,
currentDisplayUnits,
setDisplayUnits
}}></ListItem> }}></ListItem>
<ListItem title={_t.textValuesInReverseOrder}> <ListItem title={_t.textValuesInReverseOrder}>
<div slot="after"> <div slot="after">
<Toggle checked={storeChartSettings.valuesVertReverseOrder} <Toggle checked={valuesReverseOrder}
onToggleChange={() => { onChange={() => {
storeChartSettings.toggleVertValuesReverseOrder(!storeChartSettings.valuesVertReverseOrder); toggleValuesReverseOrder(!valuesReverseOrder);
props.onVerAxisReverse(!storeChartSettings.valuesVertReverseOrder); props.onVerAxisReverse(!valuesReverseOrder);
}} /> }} />
</div> </div>
</ListItem> </ListItem>
</List> </List>
<BlockTitle>{_t.textTickOptions}</BlockTitle> <BlockTitle>{_t.textTickOptions}</BlockTitle>
<List> <List>
<ListItem title={_t.textMajorType} after={storeChartSettings.vertMajorType.display} link="/edit-vert-major-type/" routeProps={{ <ListItem title={_t.textMajorType} after={currentMajorType.display} link="/edit-vert-major-type/" routeProps={{
tickOptions, tickOptions,
onVerAxisTickMajor: props.onVerAxisTickMajor onVerAxisTickMajor: props.onVerAxisTickMajor,
currentMajorType,
setMajorType
}}></ListItem> }}></ListItem>
<ListItem title={_t.textMinorType} after={storeChartSettings.vertMinorType.display} link="/edit-vert-minor-type/" routeProps={{ <ListItem title={_t.textMinorType} after={currentMinorType.display} link="/edit-vert-minor-type/" routeProps={{
tickOptions, tickOptions,
onVerAxisTickMinor: props.onVerAxisTickMinor onVerAxisTickMinor: props.onVerAxisTickMinor,
currentMinorType,
setMinorType
}}></ListItem> }}></ListItem>
</List> </List>
<BlockTitle>{_t.textLabelOptions}</BlockTitle> <BlockTitle>{_t.textLabelOptions}</BlockTitle>
<List> <List>
<ListItem title={_t.textLabelPosition} after={storeChartSettings.vertLabelPosition.display} link="/edit-vert-label-position/" routeProps={{ <ListItem title={_t.textLabelPosition} after={currentLabelsPosition.display} link="/edit-vert-label-position/" routeProps={{
verticalAxisLabelsPosition, verticalAxisLabelsPosition,
onVerAxisLabelPos: props.onVerAxisLabelPos onVerAxisLabelPos: props.onVerAxisLabelPos,
currentLabelsPosition,
setLabelsPosition
}}></ListItem> }}></ListItem>
</List> </List>
</Page> </Page>
@ -772,9 +775,8 @@ const PageVerticalAxis = props => {
const PageVertAxisCrosses = props => { const PageVertAxisCrosses = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true}); const _t = t('View.Edit', {returnObjects: true});
const storeChartSettings = props.storeChartSettings;
const currentAxisCrosses = storeChartSettings.axisVertCrosses;
const axisCrosses = props.axisCrosses; const axisCrosses = props.axisCrosses;
const [currentAxisCrosses, setAxisCrosses] = useState(props.currentAxisCrosses);
return ( return (
<Page> <Page>
@ -785,7 +787,8 @@ const PageVertAxisCrosses = props => {
<ListItem title={elem.display} key={index} radio <ListItem title={elem.display} key={index} radio
checked={currentAxisCrosses.value === elem.value} checked={currentAxisCrosses.value === elem.value}
onChange={() => { onChange={() => {
storeChartSettings.changeVertAxisCrosses(elem); props.setAxisCrosses(elem);
setAxisCrosses(elem);
props.onVerAxisCrossType(elem.value); props.onVerAxisCrossType(elem.value);
props.f7router.back(); props.f7router.back();
}}> }}>
@ -800,9 +803,8 @@ const PageVertAxisCrosses = props => {
const PageDisplayUnits = props => { const PageDisplayUnits = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true}); const _t = t('View.Edit', {returnObjects: true});
const storeChartSettings = props.storeChartSettings;
const displayUnits = storeChartSettings.displayUnits;
const vertAxisDisplayUnits = props.vertAxisDisplayUnits; const vertAxisDisplayUnits = props.vertAxisDisplayUnits;
const [currentDisplayUnits, setDisplayUnits] = useState(props.currentDisplayUnits);
return ( return (
<Page> <Page>
@ -811,9 +813,10 @@ const PageDisplayUnits = props => {
{vertAxisDisplayUnits.map((elem, index) => { {vertAxisDisplayUnits.map((elem, index) => {
return ( return (
<ListItem title={elem.display} key={index} radio <ListItem title={elem.display} key={index} radio
checked={displayUnits.value === elem.value} checked={currentDisplayUnits.value === elem.value}
onChange={() => { onChange={() => {
storeChartSettings.changeDisplayUnits(elem); props.setDisplayUnits(elem);
setDisplayUnits(elem);
props.onVerAxisDisplayUnits(elem.value); props.onVerAxisDisplayUnits(elem.value);
props.f7router.back(); props.f7router.back();
}}> }}>
@ -828,8 +831,7 @@ const PageDisplayUnits = props => {
const PageVertMajorType = props => { const PageVertMajorType = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true}); const _t = t('View.Edit', {returnObjects: true});
const storeChartSettings = props.storeChartSettings; const [currentMajorType, setMajorType] = useState(props.currentMajorType);
const vertMajorType = storeChartSettings.vertMajorType;
const tickOptions = props.tickOptions; const tickOptions = props.tickOptions;
return ( return (
@ -839,9 +841,10 @@ const PageVertMajorType = props => {
{tickOptions.map((elem, index) => { {tickOptions.map((elem, index) => {
return ( return (
<ListItem title={elem.display} key={index} radio <ListItem title={elem.display} key={index} radio
checked={vertMajorType.value === elem.value} checked={currentMajorType.value === elem.value}
onChange={() => { onChange={() => {
storeChartSettings.changeVertMajorType(elem); props.setMajorType(elem);
setMajorType(elem);
props.onVerAxisTickMajor(elem.value); props.onVerAxisTickMajor(elem.value);
props.f7router.back(); props.f7router.back();
}}> }}>
@ -856,8 +859,7 @@ const PageVertMajorType = props => {
const PageVertMinorType = props => { const PageVertMinorType = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true}); const _t = t('View.Edit', {returnObjects: true});
const storeChartSettings = props.storeChartSettings; const [currentMinorType, setMinorType] = useState(props.currentMinorType);
const vertMinorType = storeChartSettings.vertMinorType;
const tickOptions = props.tickOptions; const tickOptions = props.tickOptions;
return ( return (
@ -867,9 +869,10 @@ const PageVertMinorType = props => {
{tickOptions.map((elem, index) => { {tickOptions.map((elem, index) => {
return ( return (
<ListItem title={elem.display} key={index} radio <ListItem title={elem.display} key={index} radio
checked={vertMinorType.value === elem.value} checked={currentMinorType.value === elem.value}
onChange={() => { onChange={() => {
storeChartSettings.changeVertMinorType(elem); props.setMinorType(elem);
setMinorType(elem);
props.onVerAxisTickMinor(elem.value); props.onVerAxisTickMinor(elem.value);
props.f7router.back(); props.f7router.back();
}}> }}>
@ -884,8 +887,7 @@ const PageVertMinorType = props => {
const PageVertLabelPosition = props => { const PageVertLabelPosition = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true}); const _t = t('View.Edit', {returnObjects: true});
const storeChartSettings = props.storeChartSettings; const [currentLabelsPosition, setLabelsPosition] = useState(props.currentLabelsPosition);
const vertLabelPosition = storeChartSettings.vertLabelPosition;
const verticalAxisLabelsPosition = props.verticalAxisLabelsPosition; const verticalAxisLabelsPosition = props.verticalAxisLabelsPosition;
return ( return (
@ -895,9 +897,10 @@ const PageVertLabelPosition = props => {
{verticalAxisLabelsPosition.map((elem, index) => { {verticalAxisLabelsPosition.map((elem, index) => {
return ( return (
<ListItem title={elem.display} key={index} radio <ListItem title={elem.display} key={index} radio
checked={vertLabelPosition.value === elem.value} checked={currentLabelsPosition.value === elem.value}
onChange={() => { onChange={() => {
storeChartSettings.changeVertLabelPosition(elem); props.setLabelsPosition(elem);
setLabelsPosition(elem);
props.onVerAxisLabelPos(elem.value); props.onVerAxisLabelPos(elem.value);
props.f7router.back(); props.f7router.back();
}}> }}>
@ -912,8 +915,11 @@ const PageVertLabelPosition = props => {
const PageHorizontalAxis = props => { const PageHorizontalAxis = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true}); const _t = t('View.Edit', {returnObjects: true});
const storeChartSettings = props.storeChartSettings; const api = Common.EditorApi.get();
const axisProps = props.initHorAxis(); const isIos = Device.ios;
const chartProperty = api.asc_getChartObject();
const horAxisProps = chartProperty.getHorAxisProps();
const axisProps = (horAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? chartProperty.getVertAxisProps() : horAxisProps;
const crossValue = axisProps.getCrossesRule(); const crossValue = axisProps.getCrossesRule();
const axisCrosses = [ const axisCrosses = [
@ -943,44 +949,23 @@ const PageHorizontalAxis = props => {
]; ];
const defineCurrentAxisCrosses = () => axisCrosses.find(elem => elem.value === crossValue); const defineCurrentAxisCrosses = () => axisCrosses.find(elem => elem.value === crossValue);
const currentAxisCrosses = defineCurrentAxisCrosses(); const [currentAxisCrosses, setAxisCrosses] = useState(defineCurrentAxisCrosses());
if(!storeChartSettings.axisHorCrosses) {
storeChartSettings.changeHorAxisCrosses(currentAxisCrosses);
}
const defineAxisPosition = () => horAxisPosition.find(elem => elem.value === axisProps.getLabelsPosition()); const defineAxisPosition = () => horAxisPosition.find(elem => elem.value === axisProps.getLabelsPosition());
const axisPosition = defineAxisPosition(); const [axisPosition, setAxisPosition] = useState(defineAxisPosition());
if(!storeChartSettings.axisPosition) { const [valuesReverseOrder, toggleValuesReverseOrder] = useState(axisProps.getInvertCatOrder());
storeChartSettings.changeAxisPosition(axisPosition);
}
if(storeChartSettings.valuesHorReverseOrder == undefined) {
storeChartSettings.toggleHorValuesReverseOrder(axisProps.getInvertCatOrder());
}
const valueMajorType = axisProps.getMajorTickMark(); const valueMajorType = axisProps.getMajorTickMark();
const valueMinorType = axisProps.getMinorTickMark(); const valueMinorType = axisProps.getMinorTickMark();
const defineCurrentTickOption = (elemType) => tickOptions.find(elem => elem.value === elemType); const defineCurrentTickOption = (elemType) => tickOptions.find(elem => elem.value === elemType);
const currentMajorType = defineCurrentTickOption(valueMajorType);
if(!storeChartSettings.horMajorType) { const [currentMajorType, setMajorType] = useState(defineCurrentTickOption(valueMajorType));
storeChartSettings.changeHorMajorType(currentMajorType); const [currentMinorType, setMinorType] = useState(defineCurrentTickOption(valueMinorType));
}
const currentMinorType = defineCurrentTickOption(valueMinorType);
if(!storeChartSettings.horMinorType) {
storeChartSettings.changeHorMinorType(currentMinorType);
}
const defineLabelsPosition = () => horAxisLabelsPosition.find(elem => elem.value === axisProps.getTickLabelsPos()); const defineLabelsPosition = () => horAxisLabelsPosition.find(elem => elem.value === axisProps.getTickLabelsPos());
const currentLabelsPosition = defineLabelsPosition(); const [currentLabelsPosition, setLabelsPosition] = useState(defineLabelsPosition());
if(!storeChartSettings.horLabelPosition) {
storeChartSettings.changeHorLabelPosition(currentLabelsPosition);
}
const currentCrossesValue = axisProps.getCrosses(); const currentCrossesValue = axisProps.getCrosses();
const [crossesValue, setCrossesValue] = useState(!currentCrossesValue ? '' : currentCrossesValue); const [crossesValue, setCrossesValue] = useState(!currentCrossesValue ? '' : currentCrossesValue);
@ -988,15 +973,17 @@ const PageHorizontalAxis = props => {
return ( return (
<Page> <Page>
<Navbar title={_t.textAxisOptions} backLink={_t.textBack} /> <Navbar title={_t.textAxisOptions} backLink={_t.textBack} />
<List className={isAndroid ? "inputs-list": ""}> <List inlineLabels className="inputs-list">
<ListItem title={_t.textAxisCrosses} link="/edit-hor-axis-crosses/" after={storeChartSettings.axisHorCrosses.display} routeProps={{ <ListItem title={_t.textAxisCrosses} link="/edit-hor-axis-crosses/" after={currentAxisCrosses.display} routeProps={{
axisCrosses, axisCrosses,
onHorAxisCrossType: props.onHorAxisCrossType onHorAxisCrossType: props.onHorAxisCrossType,
currentAxisCrosses,
setAxisCrosses
}}></ListItem> }}></ListItem>
{storeChartSettings.axisHorCrosses.value == Asc.c_oAscCrossesRule.value ? ( {currentAxisCrosses.value == Asc.c_oAscCrossesRule.value ? (
<ListInput <ListInput
label={_t.textCrossesValue} label={_t.textCrossesValue}
type="text" type="number"
placeholder="0" placeholder="0"
value={crossesValue} value={crossesValue}
onChange={e => props.onHorAxisCrossValue(e.target.value)} onChange={e => props.onHorAxisCrossValue(e.target.value)}
@ -1006,36 +993,44 @@ const PageHorizontalAxis = props => {
) : null} ) : null}
</List> </List>
<List> <List>
<ListItem title={_t.textAxisPosition} link="/edit-hor-axis-position/" after={storeChartSettings.axisPosition.display} routeProps={{ <ListItem title={_t.textAxisPosition} link="/edit-hor-axis-position/" after={axisPosition.display} routeProps={{
horAxisPosition, horAxisPosition,
onHorAxisPos: props.onHorAxisPos onHorAxisPos: props.onHorAxisPos,
axisPosition,
setAxisPosition
}}></ListItem> }}></ListItem>
<ListItem title={_t.textValuesInReverseOrder}> <ListItem title={_t.textValuesInReverseOrder}>
<div slot="after"> <div slot="after">
<Toggle checked={storeChartSettings.valuesHorReverseOrder} <Toggle checked={valuesReverseOrder}
onToggleChange={() => { onChange={() => {
storeChartSettings.toggleHorValuesReverseOrder(!storeChartSettings.valuesHorReverseOrder); toggleValuesReverseOrder(!valuesReverseOrder);
props.onHorAxisReverse(!storeChartSettings.valuesHorReverseOrder); props.onHorAxisReverse(!valuesReverseOrder);
}} /> }} />
</div> </div>
</ListItem> </ListItem>
</List> </List>
<BlockTitle>{_t.textTickOptions}</BlockTitle> <BlockTitle>{_t.textTickOptions}</BlockTitle>
<List> <List>
<ListItem title={_t.textMajorType} after={storeChartSettings.horMajorType.display} link="/edit-hor-major-type/" routeProps={{ <ListItem title={_t.textMajorType} after={currentMajorType.display} link="/edit-hor-major-type/" routeProps={{
tickOptions, tickOptions,
onHorAxisTickMajor: props.onHorAxisTickMajor onHorAxisTickMajor: props.onHorAxisTickMajor,
currentMajorType,
setMajorType
}}></ListItem> }}></ListItem>
<ListItem title={_t.textMinorType} after={storeChartSettings.horMinorType.display} link="/edit-hor-minor-type/" routeProps={{ <ListItem title={_t.textMinorType} after={currentMinorType.display} link="/edit-hor-minor-type/" routeProps={{
tickOptions, tickOptions,
onHorAxisTickMinor: props.onHorAxisTickMinor onHorAxisTickMinor: props.onHorAxisTickMinor,
currentMinorType,
setMinorType
}}></ListItem> }}></ListItem>
</List> </List>
<BlockTitle>{_t.textLabelOptions}</BlockTitle> <BlockTitle>{_t.textLabelOptions}</BlockTitle>
<List> <List>
<ListItem title={_t.textLabelPosition} after={storeChartSettings.horLabelPosition.display} link="/edit-hor-label-position/" routeProps={{ <ListItem title={_t.textLabelPosition} after={currentLabelsPosition.display} link="/edit-hor-label-position/" routeProps={{
horAxisLabelsPosition, horAxisLabelsPosition,
onHorAxisLabelPos: props.onHorAxisLabelPos onHorAxisLabelPos: props.onHorAxisLabelPos,
currentLabelsPosition,
setLabelsPosition
}}></ListItem> }}></ListItem>
</List> </List>
</Page> </Page>
@ -1045,8 +1040,7 @@ const PageHorizontalAxis = props => {
const PageHorAxisCrosses = props => { const PageHorAxisCrosses = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true}); const _t = t('View.Edit', {returnObjects: true});
const storeChartSettings = props.storeChartSettings; const [currentAxisCrosses, setAxisCrosses] = useState(props.currentAxisCrosses);
const currentAxisCrosses = storeChartSettings.axisHorCrosses;
const axisCrosses = props.axisCrosses; const axisCrosses = props.axisCrosses;
return ( return (
@ -1058,7 +1052,8 @@ const PageHorAxisCrosses = props => {
<ListItem title={elem.display} key={index} radio <ListItem title={elem.display} key={index} radio
checked={currentAxisCrosses.value === elem.value} checked={currentAxisCrosses.value === elem.value}
onChange={() => { onChange={() => {
storeChartSettings.changeHorAxisCrosses(elem); props.setAxisCrosses(elem);
setAxisCrosses(elem);
props.onHorAxisCrossType(elem.value); props.onHorAxisCrossType(elem.value);
props.f7router.back(); props.f7router.back();
}}> }}>
@ -1073,8 +1068,7 @@ const PageHorAxisCrosses = props => {
const PageHorAxisPosition = props => { const PageHorAxisPosition = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true}); const _t = t('View.Edit', {returnObjects: true});
const storeChartSettings = props.storeChartSettings; const [axisPosition, setAxisPosition] = useState(props.axisPosition);
const axisPosition = storeChartSettings.axisPosition;
const horAxisPosition = props.horAxisPosition; const horAxisPosition = props.horAxisPosition;
return ( return (
@ -1086,7 +1080,8 @@ const PageHorAxisPosition = props => {
<ListItem title={elem.display} key={index} radio <ListItem title={elem.display} key={index} radio
checked={axisPosition.value === elem.value} checked={axisPosition.value === elem.value}
onChange={() => { onChange={() => {
storeChartSettings.changeAxisPosition(elem); props.setAxisPosition(elem);
setAxisPosition(elem);
props.onHorAxisPos(elem.value); props.onHorAxisPos(elem.value);
props.f7router.back(); props.f7router.back();
}}> }}>
@ -1101,8 +1096,7 @@ const PageHorAxisPosition = props => {
const PageHorMajorType = props => { const PageHorMajorType = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true}); const _t = t('View.Edit', {returnObjects: true});
const storeChartSettings = props.storeChartSettings; const [currentMajorType, setMajorType] = useState(props.currentMajorType);
const horMajorType = storeChartSettings.horMajorType;
const tickOptions = props.tickOptions; const tickOptions = props.tickOptions;
return ( return (
@ -1112,9 +1106,10 @@ const PageHorMajorType = props => {
{tickOptions.map((elem, index) => { {tickOptions.map((elem, index) => {
return ( return (
<ListItem title={elem.display} key={index} radio <ListItem title={elem.display} key={index} radio
checked={horMajorType.value === elem.value} checked={currentMajorType.value === elem.value}
onChange={() => { onChange={() => {
storeChartSettings.changeHorMajorType(elem); props.setMajorType(elem);
setMajorType(elem);
props.onHorAxisTickMajor(elem.value); props.onHorAxisTickMajor(elem.value);
props.f7router.back(); props.f7router.back();
}}> }}>
@ -1129,8 +1124,7 @@ const PageHorMajorType = props => {
const PageHorMinorType = props => { const PageHorMinorType = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true}); const _t = t('View.Edit', {returnObjects: true});
const storeChartSettings = props.storeChartSettings; const [currentMinorType, setMinorType] = useState(props.currentMinorType);
const horMinorType = storeChartSettings.horMinorType;
const tickOptions = props.tickOptions; const tickOptions = props.tickOptions;
return ( return (
@ -1140,9 +1134,10 @@ const PageHorMinorType = props => {
{tickOptions.map((elem, index) => { {tickOptions.map((elem, index) => {
return ( return (
<ListItem title={elem.display} key={index} radio <ListItem title={elem.display} key={index} radio
checked={horMinorType.value === elem.value} checked={currentMinorType.value === elem.value}
onChange={() => { onChange={() => {
storeChartSettings.changeHorMinorType(elem); props.setMinorType(elem);
setMinorType(elem);
props.onHorAxisTickMinor(elem.value); props.onHorAxisTickMinor(elem.value);
props.f7router.back(); props.f7router.back();
}}> }}>
@ -1157,8 +1152,7 @@ const PageHorMinorType = props => {
const PageHorLabelPosition = props => { const PageHorLabelPosition = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true}); const _t = t('View.Edit', {returnObjects: true});
const storeChartSettings = props.storeChartSettings; const [currentLabelsPosition, setLabelsPosition] = useState(props.currentLabelsPosition);
const horLabelPosition = storeChartSettings.horLabelPosition;
const horAxisLabelsPosition = props.horAxisLabelsPosition; const horAxisLabelsPosition = props.horAxisLabelsPosition;
return ( return (
@ -1168,9 +1162,10 @@ const PageHorLabelPosition = props => {
{horAxisLabelsPosition.map((elem, index) => { {horAxisLabelsPosition.map((elem, index) => {
return ( return (
<ListItem title={elem.display} key={index} radio <ListItem title={elem.display} key={index} radio
checked={horLabelPosition.value === elem.value} checked={currentLabelsPosition.value === elem.value}
onChange={() => { onChange={() => {
storeChartSettings.changeHorLabelPosition(elem); props.setLabelsPosition(elem);
setLabelsPosition(elem);
props.onHorAxisLabelPos(elem.value); props.onHorAxisLabelPos(elem.value);
props.f7router.back(); props.f7router.back();
}}> }}>
@ -1207,10 +1202,10 @@ const EditChart = props => {
}}></ListItem> }}></ListItem>
<ListItem title={_t.textLayout} link='/edit-chart-layout/' routeProps={{ <ListItem title={_t.textLayout} link='/edit-chart-layout/' routeProps={{
disableSetting, disableSetting,
setLayoutProperty: props.setLayoutProperty setLayoutProperty: props.setLayoutProperty,
initChartLayout: props.initChartLayout
}}></ListItem> }}></ListItem>
<ListItem title={_t.textVerticalAxis} link='/edit-chart-vertical-axis/' disabled={disableSetting} routeProps={{ <ListItem title={_t.textVerticalAxis} link='/edit-chart-vertical-axis/' disabled={disableSetting} routeProps={{
initVertAxis: props.initVertAxis,
onVerAxisMinValue: props.onVerAxisMinValue, onVerAxisMinValue: props.onVerAxisMinValue,
onVerAxisMaxValue: props.onVerAxisMaxValue, onVerAxisMaxValue: props.onVerAxisMaxValue,
onVerAxisCrossType: props.onVerAxisCrossType, onVerAxisCrossType: props.onVerAxisCrossType,
@ -1222,7 +1217,6 @@ const EditChart = props => {
onVerAxisLabelPos: props.onVerAxisLabelPos onVerAxisLabelPos: props.onVerAxisLabelPos
}}></ListItem> }}></ListItem>
<ListItem title={_t.textHorizontalAxis} link='/edit-chart-horizontal-axis/' disabled={disableSetting} routeProps={{ <ListItem title={_t.textHorizontalAxis} link='/edit-chart-horizontal-axis/' disabled={disableSetting} routeProps={{
initHorAxis: props.initHorAxis,
onHorAxisCrossType: props.onHorAxisCrossType, onHorAxisCrossType: props.onHorAxisCrossType,
onHorAxisCrossValue: props.onHorAxisCrossValue, onHorAxisCrossValue: props.onHorAxisCrossValue,
onHorAxisPos: props.onHorAxisPos, onHorAxisPos: props.onHorAxisPos,
@ -1247,26 +1241,9 @@ const PageChartStyle = inject("storeChartSettings", "storeFocusObjects")(observe
const PageChartCustomFillColor = inject("storeChartSettings", "storePalette")(observer(PageCustomFillColor)); const PageChartCustomFillColor = inject("storeChartSettings", "storePalette")(observer(PageCustomFillColor));
const PageChartBorderColor = inject("storeChartSettings", "storePalette")(observer(PageBorderColor)); const PageChartBorderColor = inject("storeChartSettings", "storePalette")(observer(PageBorderColor));
const PageChartCustomBorderColor = inject("storeChartSettings", "storePalette")(observer(PageCustomBorderColor)); const PageChartCustomBorderColor = inject("storeChartSettings", "storePalette")(observer(PageCustomBorderColor));
const PageChartLayout = inject("storeChartSettings", "storeFocusObjects")(observer(PageLayout)); const PageChartLayout = inject("storeFocusObjects")(observer(PageLayout));
const PageChartLegend = inject("storeChartSettings")(observer(PageLegend)); const PageChartVerticalAxis = inject("storeFocusObjects")(observer(PageVerticalAxis));
const ChartTitle = inject("storeChartSettings")(observer(PageChartTitle)); const PageChartHorizontalAxis = inject("storeFocusObjects")(observer(PageHorizontalAxis));
const PageChartHorizontalAxisTitle = inject("storeChartSettings")(observer(PageHorizontalAxisTitle));
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 { export {
PageEditChart as EditChart, PageEditChart as EditChart,
@ -1276,23 +1253,23 @@ export {
PageChartCustomBorderColor, PageChartCustomBorderColor,
PageReorder as PageChartReorder, PageReorder as PageChartReorder,
PageChartLayout, PageChartLayout,
PageChartLegend, PageLegend,
ChartTitle as PageChartTitle, PageChartTitle,
PageChartHorizontalAxisTitle, PageHorizontalAxisTitle,
PageChartVerticalAxisTitle, PageVerticalAxisTitle,
PageChartHorizontalGridlines, PageHorizontalGridlines,
PageChartVerticalGridlines, PageVerticalGridlines,
PageChartDataLabels, PageDataLabels,
PageChartVerticalAxis, PageChartVerticalAxis,
PageChartVertAxisCrosses, PageVertAxisCrosses,
PageChartDisplayUnits, PageDisplayUnits,
PageChartVertMajorType, PageVertMajorType,
PageChartVertMinorType, PageVertMinorType,
PageChartVertLabelPosition, PageVertLabelPosition,
PageChartHorizontalAxis, PageChartHorizontalAxis,
PageChartHorAxisCrosses, PageHorAxisCrosses,
PageChartHorAxisPosition, PageHorAxisPosition,
PageChartHorMajorType, PageHorMajorType,
PageChartHorMinorType, PageHorMinorType,
PageChartHorLabelPosition PageHorLabelPosition
} }