1513 lines
67 KiB
JavaScript
1513 lines
67 KiB
JavaScript
import React, {Fragment, useState, useEffect} from 'react';
|
|
import {observer, inject} from "mobx-react";
|
|
import {f7, List, ListItem, ListButton, ListInput, Icon, Page, Navbar, NavRight, BlockTitle, Toggle, Range, Link, Tabs, Tab} 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";
|
|
|
|
const PageCustomFillColor = props => {
|
|
const { t } = useTranslation();
|
|
const _t = t('View.Edit', {returnObjects: true});
|
|
let fillColor = props.storeChartSettings.fillColor;
|
|
|
|
if (typeof fillColor === 'object') {
|
|
fillColor = fillColor.color;
|
|
}
|
|
|
|
const onAddNewColor = (colors, color) => {
|
|
props.storePalette.changeCustomColors(colors);
|
|
props.onFillColor(color);
|
|
props.storeChartSettings.setFillColor(color);
|
|
props.f7router.back();
|
|
};
|
|
|
|
return (
|
|
<Page>
|
|
<Navbar title={_t.textCustomColor} backLink={_t.textBack}>
|
|
{Device.phone &&
|
|
<NavRight>
|
|
<Link icon='icon-expand-down' sheetClose></Link>
|
|
</NavRight>
|
|
}
|
|
</Navbar>
|
|
<CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor}/>
|
|
</Page>
|
|
)
|
|
};
|
|
|
|
const PaletteFill = inject("storeFocusObjects", "storeChartSettings", "storePalette")(observer(props => {
|
|
const { t } = useTranslation();
|
|
const _t = t('View.Edit', {returnObjects: true});
|
|
const storeChartSettings = props.storeChartSettings;
|
|
const shapeProperties = props.storeFocusObjects.shapeObject.get_ShapeProperties();
|
|
const curFillColor = storeChartSettings.fillColor ? storeChartSettings.fillColor : storeChartSettings.getFillColor(shapeProperties);
|
|
const customColors = props.storePalette.customColors;
|
|
|
|
const changeColor = (color, effectId, effectValue) => {
|
|
if (color !== 'empty') {
|
|
if (effectId !==undefined ) {
|
|
const newColor = {color: color, effectId: effectId, effectValue: effectValue};
|
|
props.onFillColor(newColor);
|
|
storeChartSettings.setFillColor(newColor);
|
|
} else {
|
|
props.onFillColor(color);
|
|
storeChartSettings.setFillColor(color);
|
|
}
|
|
} else {
|
|
// open custom color menu
|
|
props.f7router.navigate('/edit-chart-custom-fill-color/', {props: {onFillColor: props.onFillColor}});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Fragment>
|
|
<ThemeColorPalette changeColor={changeColor} curColor={curFillColor} customColors={customColors} transparent={true}/>
|
|
<List>
|
|
<ListItem title={_t.textAddCustomColor} link={'/edit-chart-custom-fill-color/'} routeProps={{
|
|
onFillColor: props.onFillColor
|
|
}}></ListItem>
|
|
</List>
|
|
</Fragment>
|
|
)
|
|
}));
|
|
|
|
const PageCustomBorderColor = props => {
|
|
const { t } = useTranslation();
|
|
const _t = t('View.Edit', {returnObjects: true});
|
|
let borderColor = props.storeChartSettings.borderColor;
|
|
|
|
if (typeof borderColor === 'object') {
|
|
borderColor = borderColor.color;
|
|
}
|
|
|
|
const onAddNewColor = (colors, color) => {
|
|
props.storePalette.changeCustomColors(colors);
|
|
props.onBorderColor(color);
|
|
props.storeChartSettings.setBorderColor(color);
|
|
props.f7router.back();
|
|
};
|
|
|
|
return (
|
|
<Page>
|
|
<Navbar title={_t.textCustomColor} backLink={_t.textBack}>
|
|
{Device.phone &&
|
|
<NavRight>
|
|
<Link icon='icon-expand-down' sheetClose></Link>
|
|
</NavRight>
|
|
}
|
|
</Navbar>
|
|
<CustomColorPicker currentColor={borderColor} onAddNewColor={onAddNewColor}/>
|
|
</Page>
|
|
)
|
|
};
|
|
|
|
const PageBorderColor = props => {
|
|
const { t } = useTranslation();
|
|
const _t = t('View.Edit', {returnObjects: true});
|
|
const storeChartSettings = props.storeChartSettings;
|
|
const storePalette = props.storePalette;
|
|
const borderColor = storeChartSettings.borderColor;
|
|
const customColors = storePalette.customColors;
|
|
|
|
const changeColor = (color, effectId, effectValue) => {
|
|
if (color !== 'empty') {
|
|
if (effectId !== undefined) {
|
|
const newColor = {color: color, effectId: effectId, effectValue: effectValue};
|
|
props.onBorderColor(newColor);
|
|
storeChartSettings.setBorderColor(newColor);
|
|
} else {
|
|
props.onBorderColor(color);
|
|
storeChartSettings.setBorderColor(color);
|
|
}
|
|
} else {
|
|
// open custom color menu
|
|
props.f7router.navigate('/edit-chart-custom-border-color/', {props: {onBorderColor: props.onBorderColor}});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Page>
|
|
<Navbar title={_t.textColor} backLink={_t.textBack}>
|
|
{Device.phone &&
|
|
<NavRight>
|
|
<Link icon='icon-expand-down' sheetClose></Link>
|
|
</NavRight>
|
|
}
|
|
</Navbar>
|
|
<ThemeColorPalette changeColor={changeColor} curColor={borderColor} customColors={customColors} />
|
|
<List>
|
|
<ListItem title={_t.textAddCustomColor} link={'/edit-chart-custom-border-color/'} routeProps={{
|
|
onBorderColor: props.onBorderColor
|
|
}}></ListItem>
|
|
</List>
|
|
</Page>
|
|
)
|
|
};
|
|
|
|
const PageStyle = props => {
|
|
const { t } = useTranslation();
|
|
const _t = t('View.Edit', {returnObjects: true});
|
|
const storeChartSettings = props.storeChartSettings;
|
|
const storeFocusObjects = props.storeFocusObjects;
|
|
const chartProperties = storeFocusObjects.chartObject && storeFocusObjects.chartObject.get_ChartProperties();
|
|
const shapeProperties = storeFocusObjects.shapeObject && storeFocusObjects.shapeObject.get_ShapeProperties();
|
|
|
|
const styles = storeChartSettings.styles;
|
|
const types = storeChartSettings.types;
|
|
const curType = chartProperties && chartProperties.getType();
|
|
const chartStyles = storeChartSettings.chartStyles;
|
|
// console.log(chartStyles, curType);
|
|
// console.log(Asc.c_oAscChartTypeSettings.comboBarLine, Asc.c_oAscChartTypeSettings.comboBarLineSecondary, Asc.c_oAscChartTypeSettings.comboAreaBar, Asc.c_oAscChartTypeSettings.comboCustom);
|
|
|
|
// Init border size
|
|
|
|
let borderSize, borderType;
|
|
if (shapeProperties) {
|
|
const shapeStroke = shapeProperties.get_stroke();
|
|
borderSize = shapeStroke.get_width() * 72.0 / 25.4;
|
|
borderType = shapeStroke.get_type();
|
|
}
|
|
const borderSizeTransform = storeChartSettings.borderSizeTransform();
|
|
const displayBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE || borderType === undefined) ? 0 : borderSizeTransform.indexSizeByValue(borderSize);
|
|
const displayTextBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE || borderType === undefined) ? 0 : borderSizeTransform.sizeByValue(borderSize);
|
|
const [stateBorderSize, setBorderSize] = useState(displayBorderSize);
|
|
const [stateTextBorderSize, setTextBorderSize] = useState(displayTextBorderSize);
|
|
|
|
// Init border color
|
|
|
|
if(!storeChartSettings.borderColor && shapeProperties) {
|
|
storeChartSettings.initBorderColor(shapeProperties);
|
|
}
|
|
|
|
const borderColor = storeChartSettings.borderColor;
|
|
const displayBorderColor = borderColor == 'transparent' ? borderColor : `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}`;
|
|
|
|
if ((!chartProperties || storeFocusObjects.focusOn === 'cell') && Device.phone) {
|
|
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Page>
|
|
<Navbar backLink={_t.textBack}>
|
|
<div className="tab-buttons tabbar">
|
|
<Link key={"sse-link-chart-type"} tabLink={"#edit-chart-type"} tabLinkActive={true}>{_t.textType}</Link>
|
|
{chartStyles ? <Link key={"sse-link-chart-style"} tabLink={"#edit-chart-style"}>{_t.textStyle}</Link> : null}
|
|
<Link key={"sse-link-chart-fill"} tabLink={"#edit-chart-fill"}>{_t.textFill}</Link>
|
|
<Link key={"sse-link-chart-border"} tabLink={"#edit-chart-border"}>{_t.textBorder}</Link>
|
|
</div>
|
|
{Device.phone &&
|
|
<NavRight>
|
|
<Link icon='icon-expand-down' sheetClose></Link>
|
|
</NavRight>
|
|
}
|
|
</Navbar>
|
|
<Tabs animated>
|
|
<Tab key={"sse-tab-chart-type"} id={"edit-chart-type"} className="page-content no-padding-top dataview" tabActive={true}>
|
|
<div className="chart-types">
|
|
{types.map((row, rowIndex) => {
|
|
return (
|
|
<ul className="row" key={`row-${rowIndex}`}>
|
|
{row.map((type, index)=>{
|
|
return(
|
|
<li key={`${rowIndex}-${index}`}
|
|
className={curType === type.type ? ' active' : ''}
|
|
onClick={() => {props.onType(type.type)}}>
|
|
<div className={'thumb' + ` ${type.thumb}`}></div>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
)
|
|
})}
|
|
</div>
|
|
</Tab>
|
|
{chartStyles ?
|
|
<Tab key={"sse-tab-chart-style"} id={"edit-chart-style"} className="page-content no-padding-top dataview">
|
|
<div className={'chart-styles'}>
|
|
{styles ? styles.map((row, rowIndex) => {
|
|
return (
|
|
<ul className="row" key={`row-${rowIndex}`}>
|
|
{row.map((style, index)=>{
|
|
return(
|
|
<li key={`${rowIndex}-${index}`}
|
|
onClick={() => {props.onStyle(style.asc_getName())}}>
|
|
<img src={`${style.asc_getImage()}`}/>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
)
|
|
}) :
|
|
<div className={'text-content'}>{_t.textNoStyles}</div>
|
|
}
|
|
</div>
|
|
</Tab>
|
|
: null}
|
|
<Tab key={"sse-tab-chart-fill"} id={"edit-chart-fill"} className="page-content no-padding-top">
|
|
<PaletteFill onFillColor={props.onFillColor} f7router={props.f7router}/>
|
|
</Tab>
|
|
<Tab key={"sse-tab-chart-border"} id={"edit-chart-border"} className="page-content no-padding-top">
|
|
<List>
|
|
<ListItem>
|
|
<div slot="root-start" className='inner-range-title'>{_t.textSize}</div>
|
|
<div slot='inner' style={{width: '100%'}}>
|
|
<Range min="0" max="7" step="1" value={stateBorderSize}
|
|
onRangeChange={(value) => {setBorderSize(value); setTextBorderSize(borderSizeTransform.sizeByIndex(value));}}
|
|
onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}}
|
|
></Range>
|
|
</div>
|
|
<div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
|
|
{stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
|
|
</div>
|
|
</ListItem>
|
|
<ListItem title={_t.textColor} link='/edit-chart-border-color/' routeProps={{
|
|
onBorderColor: props.onBorderColor
|
|
}}>
|
|
<span className="color-preview"
|
|
slot="after"
|
|
style={{ background: displayBorderColor }}
|
|
></span>
|
|
</ListItem>
|
|
</List>
|
|
</Tab>
|
|
</Tabs>
|
|
</Page>
|
|
)
|
|
};
|
|
|
|
const PageReorder = props => {
|
|
const { t } = useTranslation();
|
|
const _t = t('View.Edit', {returnObjects: true});
|
|
if ((!props.storeFocusObjects.chartObject || props.storeFocusObjects.focusOn === 'cell') && Device.phone) {
|
|
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
|
|
return null;
|
|
}
|
|
return (
|
|
<Page>
|
|
<Navbar title={_t.textReorder} backLink={_t.textBack}>
|
|
{Device.phone &&
|
|
<NavRight>
|
|
<Link icon='icon-expand-down' sheetClose></Link>
|
|
</NavRight>
|
|
}
|
|
</Navbar>
|
|
<List>
|
|
<ListItem title={_t.textBringToForeground} onClick={() => {props.onReorder('all-up')}} link='#' className='no-indicator'>
|
|
<Icon slot="media" icon="icon-move-foreground"></Icon>
|
|
</ListItem>
|
|
<ListItem title={_t.textSendToBackground} onClick={() => {props.onReorder('all-down')}} link='#' className='no-indicator'>
|
|
<Icon slot="media" icon="icon-move-background"></Icon>
|
|
</ListItem>
|
|
<ListItem title={_t.textMoveForward} onClick={() => {props.onReorder('move-up')}} link='#' className='no-indicator'>
|
|
<Icon slot="media" icon="icon-move-forward"></Icon>
|
|
</ListItem>
|
|
<ListItem title={_t.textMoveBackward} onClick={() => {props.onReorder('move-down')}} link='#' className='no-indicator'>
|
|
<Icon slot="media" icon="icon-move-backward"></Icon>
|
|
</ListItem>
|
|
</List>
|
|
</Page>
|
|
)
|
|
};
|
|
|
|
const PageLayout = props => {
|
|
const { t } = useTranslation();
|
|
const _t = t('View.Edit', {returnObjects: true});
|
|
const storeFocusObjects = props.storeFocusObjects;
|
|
const chartObject = storeFocusObjects.chartObject;
|
|
const chartProperties = chartObject && chartObject.get_ChartProperties();
|
|
const chartType = chartProperties && chartProperties.getType();
|
|
|
|
let title, legend, axisHorTitle, axisVertTitle, horGridlines, vertGridlines, dataLabel;
|
|
if (chartProperties) {
|
|
title = chartProperties.getTitle();
|
|
legend = chartProperties.getLegendPos();
|
|
axisHorTitle = chartProperties.getHorAxisLabel();
|
|
axisVertTitle = chartProperties.getVertAxisLabel();
|
|
horGridlines = chartProperties.getHorGridLines();
|
|
vertGridlines = chartProperties.getVertGridLines();
|
|
dataLabel = chartProperties.getDataLabelsPos();
|
|
}
|
|
|
|
const [chartTitle, setTitle] = useState(title);
|
|
const [chartLegend, setLegend] = useState(legend);
|
|
const [chartAxisHorTitle, setAxisHorTitle] = useState(axisHorTitle);
|
|
const [chartAxisVertTitle, setAxisVertTitle] = useState(axisVertTitle);
|
|
const [chartHorGridlines, setHorGridlines] = useState(horGridlines);
|
|
const [chartVertGridlines, setVertGridlines] = useState(vertGridlines);
|
|
const [chartDataLabel, setDataLabel] = useState(dataLabel);
|
|
|
|
let dataLabelPos = [
|
|
{ value: Asc.c_oAscChartDataLabelsPos.none, displayValue: _t.textNone },
|
|
{ value: Asc.c_oAscChartDataLabelsPos.ctr, displayValue: _t.textCenter }
|
|
];
|
|
|
|
if (chartType == Asc.c_oAscChartTypeSettings.barNormal || chartType == Asc.c_oAscChartTypeSettings.hBarNormal) {
|
|
dataLabelPos.push(
|
|
{value: Asc.c_oAscChartDataLabelsPos.inBase, displayValue: _t.textInnerBottom},
|
|
{value: Asc.c_oAscChartDataLabelsPos.inEnd, displayValue: _t.textInnerTop},
|
|
{value: Asc.c_oAscChartDataLabelsPos.outEnd, displayValue: _t.textOuterTop}
|
|
);
|
|
} else if ( chartType == Asc.c_oAscChartTypeSettings.barStacked ||
|
|
chartType == Asc.c_oAscChartTypeSettings.barStackedPer ||
|
|
chartType == Asc.c_oAscChartTypeSettings.hBarStacked ||
|
|
chartType == Asc.c_oAscChartTypeSettings.hBarStackedPer ) {
|
|
dataLabelPos.push(
|
|
{ value: Asc.c_oAscChartDataLabelsPos.inBase, displayValue: _t.textInnerBottom },
|
|
{ value: Asc.c_oAscChartDataLabelsPos.inEnd, displayValue: _t.textInnerTop }
|
|
);
|
|
} else if (chartType == Asc.c_oAscChartTypeSettings.lineNormal ||
|
|
chartType == Asc.c_oAscChartTypeSettings.lineStacked ||
|
|
chartType == Asc.c_oAscChartTypeSettings.lineStackedPer ||
|
|
chartType == Asc.c_oAscChartTypeSettings.stock ||
|
|
chartType == Asc.c_oAscChartTypeSettings.scatter ||
|
|
chartType == Asc.c_oAscChartTypeSettings.scatterSmoothMarker || chartType == Asc.c_oAscChartTypeSettings.scatterSmooth ||
|
|
chartType == Asc.c_oAscChartTypeSettings.scatterLineMarker || chartType == Asc.c_oAscChartTypeSettings.scatterLine) {
|
|
dataLabelPos.push(
|
|
{ value: Asc.c_oAscChartDataLabelsPos.l, displayValue: _t.textLeft },
|
|
{ value: Asc.c_oAscChartDataLabelsPos.r, displayValue: _t.textRight },
|
|
{ value: Asc.c_oAscChartDataLabelsPos.t, displayValue: _t.textTop },
|
|
{ value: Asc.c_oAscChartDataLabelsPos.b, displayValue: _t.textBottom }
|
|
);
|
|
} else if (chartType == Asc.c_oAscChartTypeSettings.pie || chartType == Asc.c_oAscChartTypeSettings.pie3d) {
|
|
dataLabelPos.push(
|
|
{value: Asc.c_oAscChartDataLabelsPos.bestFit, displayValue: _t.textFit},
|
|
{value: Asc.c_oAscChartDataLabelsPos.inEnd, displayValue: _t.textInnerTop},
|
|
{value: Asc.c_oAscChartDataLabelsPos.outEnd, displayValue: _t.textOuterTop}
|
|
);
|
|
}
|
|
|
|
const disableEditAxis = props.disableEditAxis;
|
|
|
|
const chartLayoutTitles = {
|
|
0: `${_t.textNone}`,
|
|
1: `${_t.textOverlay}`,
|
|
2: `${_t.textNoOverlay}`
|
|
};
|
|
|
|
const chartLayoutLegends = {
|
|
0: `${_t.textNone}`,
|
|
1: `${_t.textLeft}`,
|
|
2: `${_t.textTop}`,
|
|
3: `${_t.textRight}`,
|
|
4: `${_t.textBottom}`,
|
|
5: `${_t.textLeftOverlay}`,
|
|
6: `${_t.textRightOverlay}`
|
|
};
|
|
|
|
const chartLayoutAxisTitleHorizontal = {
|
|
0: `${_t.textNone}`,
|
|
1: `${_t.textNoOverlay}`
|
|
};
|
|
|
|
const chartLayoutAxisTitleVertical = {
|
|
0: `${_t.textNone}`,
|
|
1: `${_t.textRotated}`,
|
|
3: `${_t.textHorizontal}`
|
|
};
|
|
|
|
const chartLayoutGridlinesHorizontal = {
|
|
0: `${_t.textNone}`,
|
|
1: `${_t.textMajor}`,
|
|
2: `${_t.textMinor}`,
|
|
3: `${_t.textMajorAndMinor}`
|
|
};
|
|
|
|
const chartLayoutGridlinesVertical = {
|
|
0: `${_t.textNone}`,
|
|
1: `${_t.textMajor}`,
|
|
2: `${_t.textMinor}`,
|
|
3: `${_t.textMajorAndMinor}`
|
|
};
|
|
|
|
const chartDataLabels = {
|
|
0: `${_t.textNone}`,
|
|
3: `${_t.textCenter}`,
|
|
2: `${_t.textFit}`,
|
|
5: `${_t.textInnerTop}`,
|
|
7: `${_t.textOuterTop}`
|
|
};
|
|
|
|
if ((!chartObject || storeFocusObjects.focusOn === 'cell') && Device.phone) {
|
|
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Page>
|
|
<Navbar title={_t.textLayout} backLink={_t.textBack}>
|
|
{Device.phone &&
|
|
<NavRight>
|
|
<Link icon='icon-expand-down' sheetClose></Link>
|
|
</NavRight>
|
|
}
|
|
</Navbar>
|
|
<List>
|
|
<ListItem title={_t.textChartTitle}
|
|
after={chartLayoutTitles[chartTitle]} link="/edit-chart-title/" routeProps={{
|
|
chartLayoutTitles,
|
|
chartTitle,
|
|
setTitle,
|
|
setLayoutProperty: props.setLayoutProperty,
|
|
}}>
|
|
</ListItem>
|
|
<ListItem title={_t.textLegend}
|
|
after={chartLayoutLegends[chartLegend]} link="/edit-chart-legend/" routeProps={{
|
|
chartLayoutLegends,
|
|
setLayoutProperty: props.setLayoutProperty,
|
|
chartLegend,
|
|
setLegend
|
|
}}>
|
|
</ListItem>
|
|
</List>
|
|
<BlockTitle>{_t.textAxisTitle}</BlockTitle>
|
|
<List>
|
|
<ListItem title={_t.textHorizontal} link="/edit-horizontal-axis-title/"
|
|
after={chartLayoutAxisTitleHorizontal[chartAxisHorTitle]} disabled={disableEditAxis} routeProps={{
|
|
chartLayoutAxisTitleHorizontal,
|
|
setLayoutProperty: props.setLayoutProperty,
|
|
chartAxisHorTitle,
|
|
setAxisHorTitle
|
|
}}>
|
|
</ListItem>
|
|
<ListItem title={_t.textVertical} link="/edit-vertical-axis-title/"
|
|
after={chartLayoutAxisTitleVertical[chartAxisVertTitle]} disabled={disableEditAxis} routeProps={{
|
|
chartLayoutAxisTitleVertical,
|
|
setLayoutProperty: props.setLayoutProperty,
|
|
chartAxisVertTitle,
|
|
setAxisVertTitle
|
|
}}>
|
|
</ListItem>
|
|
</List>
|
|
<BlockTitle>{_t.textGridlines}</BlockTitle>
|
|
<List>
|
|
<ListItem title={_t.textHorizontal} link="/edit-horizontal-gridlines/"
|
|
after={chartLayoutGridlinesHorizontal[chartHorGridlines]} disabled={disableEditAxis} routeProps={{
|
|
chartLayoutGridlinesHorizontal,
|
|
setLayoutProperty: props.setLayoutProperty,
|
|
chartHorGridlines,
|
|
setHorGridlines
|
|
}}>
|
|
</ListItem>
|
|
<ListItem title={_t.textVertical} link="/edit-vertical-gridlines/"
|
|
after={chartLayoutGridlinesVertical[chartVertGridlines]} disabled={disableEditAxis} routeProps={{
|
|
chartLayoutGridlinesVertical,
|
|
setLayoutProperty: props.setLayoutProperty,
|
|
chartVertGridlines,
|
|
setVertGridlines
|
|
}}>
|
|
</ListItem>
|
|
</List>
|
|
<List>
|
|
<ListItem title={_t.textDataLabels} link="/edit-data-labels/" after={chartDataLabels[chartDataLabel]} routeProps={{
|
|
chartDataLabels,
|
|
setLayoutProperty: props.setLayoutProperty,
|
|
chartDataLabel,
|
|
setDataLabel
|
|
}}>
|
|
</ListItem>
|
|
</List>
|
|
</Page>
|
|
)
|
|
}
|
|
|
|
const PageChartTitle = props => {
|
|
const { t } = useTranslation();
|
|
const _t = t('View.Edit', {returnObjects: true});
|
|
const chartLayoutTitles = props.chartLayoutTitles;
|
|
const [currentTitle, setTitle] = useState(props.chartTitle);
|
|
|
|
return (
|
|
<Page>
|
|
<Navbar title={_t.textChartTitle} backLink={_t.textBack}>
|
|
{Device.phone &&
|
|
<NavRight>
|
|
<Link icon='icon-expand-down' sheetClose></Link>
|
|
</NavRight>
|
|
}
|
|
</Navbar>
|
|
<List>
|
|
{Object.keys(chartLayoutTitles).map(key => {
|
|
return (
|
|
<ListItem key={key} title={chartLayoutTitles[key]} radio checked={+key === currentTitle} onChange={() => {
|
|
props.setTitle(+key);
|
|
setTitle(+key);
|
|
props.setLayoutProperty('putTitle', key);
|
|
props.f7router.back();
|
|
}}></ListItem>
|
|
)
|
|
})}
|
|
</List>
|
|
</Page>
|
|
)
|
|
}
|
|
|
|
const PageLegend = props => {
|
|
const { t } = useTranslation();
|
|
const _t = t('View.Edit', {returnObjects: true});
|
|
const chartLayoutLegends = props.chartLayoutLegends;
|
|
const [currentLegend, setLegend] = useState(props.chartLegend);
|
|
|
|
return (
|
|
<Page>
|
|
<Navbar title={_t.textLegend} backLink={_t.textBack}>
|
|
{Device.phone &&
|
|
<NavRight>
|
|
<Link icon='icon-expand-down' sheetClose></Link>
|
|
</NavRight>
|
|
}
|
|
</Navbar>
|
|
<List>
|
|
{Object.keys(chartLayoutLegends).map(key => {
|
|
return (
|
|
<ListItem key={key} title={chartLayoutLegends[key]} radio checked={+key === currentLegend} onChange={() => {
|
|
props.setLegend(+key);
|
|
setLegend(+key);
|
|
props.setLayoutProperty('putLegendPos', key);
|
|
props.f7router.back();
|
|
}}></ListItem>
|
|
)
|
|
})}
|
|
</List>
|
|
</Page>
|
|
)
|
|
}
|
|
|
|
const PageHorizontalAxisTitle = props => {
|
|
const { t } = useTranslation();
|
|
const _t = t('View.Edit', {returnObjects: true});
|
|
const chartLayoutAxisTitleHorizontal = props.chartLayoutAxisTitleHorizontal;
|
|
const [currentAxisHorTitle, setAxisHorTitle] = useState(props.chartAxisHorTitle);
|
|
|
|
return (
|
|
<Page>
|
|
<Navbar title={_t.textHorizontal} backLink={_t.textBack}>
|
|
{Device.phone &&
|
|
<NavRight>
|
|
<Link icon='icon-expand-down' sheetClose></Link>
|
|
</NavRight>
|
|
}
|
|
</Navbar>
|
|
<List>
|
|
{Object.keys(chartLayoutAxisTitleHorizontal).map(key => {
|
|
return (
|
|
<ListItem key={key} title={chartLayoutAxisTitleHorizontal[key]} radio checked={+key === currentAxisHorTitle} onChange={() => {
|
|
props.setAxisHorTitle(+key);
|
|
setAxisHorTitle(+key);
|
|
props.setLayoutProperty('putHorAxisLabel', key);
|
|
props.f7router.back();
|
|
}}></ListItem>
|
|
)
|
|
})}
|
|
</List>
|
|
</Page>
|
|
)
|
|
}
|
|
|
|
const PageVerticalAxisTitle = props => {
|
|
const { t } = useTranslation();
|
|
const _t = t('View.Edit', {returnObjects: true});
|
|
const chartLayoutAxisTitleVertical = props.chartLayoutAxisTitleVertical;
|
|
const [currentAxisVertTitle, setAxisVertTitle] = useState(props.chartAxisVertTitle);
|
|
|
|
return (
|
|
<Page>
|
|
<Navbar title={_t.textVertical} backLink={_t.textBack}>
|
|
{Device.phone &&
|
|
<NavRight>
|
|
<Link icon='icon-expand-down' sheetClose></Link>
|
|
</NavRight>
|
|
}
|
|
</Navbar>
|
|
<List>
|
|
{Object.keys(chartLayoutAxisTitleVertical).map(key => {
|
|
return (
|
|
<ListItem key={key} title={chartLayoutAxisTitleVertical[key]} radio checked={+key === currentAxisVertTitle} onChange={() => {
|
|
props.setAxisVertTitle(+key);
|
|
setAxisVertTitle(+key);
|
|
props.setLayoutProperty('putVertAxisLabel', key);
|
|
props.f7router.back();
|
|
}}></ListItem>
|
|
)
|
|
})}
|
|
</List>
|
|
</Page>
|
|
)
|
|
}
|
|
|
|
const PageHorizontalGridlines = props => {
|
|
const { t } = useTranslation();
|
|
const _t = t('View.Edit', {returnObjects: true});
|
|
const chartLayoutGridlinesHorizontal = props.chartLayoutGridlinesHorizontal;
|
|
const [currentChartHorGridlines, setHorGridlines] = useState(props.chartHorGridlines);
|
|
|
|
return (
|
|
<Page>
|
|
<Navbar title={_t.textHorizontal} backLink={_t.textBack}>
|
|
{Device.phone &&
|
|
<NavRight>
|
|
<Link icon='icon-expand-down' sheetClose></Link>
|
|
</NavRight>
|
|
}
|
|
</Navbar>
|
|
<List>
|
|
{Object.keys(chartLayoutGridlinesHorizontal).map(key => {
|
|
return (
|
|
<ListItem key={key} title={chartLayoutGridlinesHorizontal[key]} radio checked={+key === currentChartHorGridlines} onChange={() => {
|
|
props.setHorGridlines(+key);
|
|
setHorGridlines(+key);
|
|
props.setLayoutProperty('putHorGridLines', key);
|
|
props.f7router.back();
|
|
}}></ListItem>
|
|
)
|
|
})}
|
|
</List>
|
|
</Page>
|
|
)
|
|
}
|
|
|
|
const PageVerticalGridlines = props => {
|
|
const { t } = useTranslation();
|
|
const _t = t('View.Edit', {returnObjects: true});
|
|
const chartLayoutGridlinesVertical = props.chartLayoutGridlinesVertical;
|
|
const [currentChartVertGridlines, setVertGridlines] = useState(props.chartVertGridlines);
|
|
|
|
return (
|
|
<Page>
|
|
<Navbar title={_t.textVertical} backLink={_t.textBack}>
|
|
{Device.phone &&
|
|
<NavRight>
|
|
<Link icon='icon-expand-down' sheetClose></Link>
|
|
</NavRight>
|
|
}
|
|
</Navbar>
|
|
<List>
|
|
{Object.keys(chartLayoutGridlinesVertical).map(key => {
|
|
return (
|
|
<ListItem key={key} title={chartLayoutGridlinesVertical[key]} radio checked={+key === currentChartVertGridlines} onChange={() => {
|
|
props.setVertGridlines(+key);
|
|
setVertGridlines(+key);
|
|
props.setLayoutProperty('putVertGridLines', key);
|
|
props.f7router.back();
|
|
}}></ListItem>
|
|
)
|
|
})}
|
|
</List>
|
|
</Page>
|
|
)
|
|
}
|
|
|
|
const PageDataLabels = props => {
|
|
const { t } = useTranslation();
|
|
const _t = t('View.Edit', {returnObjects: true});
|
|
const chartDataLabels = props.chartDataLabels;
|
|
const [currentChartDataLabel, setDataLabel] = useState(props.chartDataLabel);
|
|
|
|
return (
|
|
<Page>
|
|
<Navbar title={_t.textDataLabels} backLink={_t.textBack}>
|
|
{Device.phone &&
|
|
<NavRight>
|
|
<Link icon='icon-expand-down' sheetClose></Link>
|
|
</NavRight>
|
|
}
|
|
</Navbar>
|
|
<List>
|
|
{Object.keys(chartDataLabels).map(key => {
|
|
return (
|
|
<ListItem key={key} title={chartDataLabels[key]} radio checked={+key === currentChartDataLabel} onChange={() => {
|
|
props.setDataLabel(+key);
|
|
setDataLabel(+key);
|
|
props.setLayoutProperty('putDataLabelsPos', key);
|
|
props.f7router.back();
|
|
}}></ListItem>
|
|
)
|
|
})}
|
|
</List>
|
|
</Page>
|
|
)
|
|
}
|
|
|
|
const PageVerticalAxis = props => {
|
|
const { t } = useTranslation();
|
|
const _t = t('View.Edit', {returnObjects: true});
|
|
const api = Common.EditorApi.get();
|
|
const chartProperty = api.asc_getChartObject(true);
|
|
const isIos = Device.ios;
|
|
const verAxisProps = chartProperty.getVertAxisProps();
|
|
const axisProps = (verAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? verAxisProps : chartProperty.getHorAxisProps();
|
|
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, setAxisCrosses] = useState(defineCurrentAxisCrosses());
|
|
|
|
const defineCurrentDisplayUnits = () => vertAxisDisplayUnits.find(elem => elem.value === axisProps.getDispUnitsRule());
|
|
const [currentDisplayUnits, setDisplayUnits] = useState(defineCurrentDisplayUnits());
|
|
|
|
const [valuesReverseOrder, toggleValuesReverseOrder] = useState(axisProps.getInvertValOrder());
|
|
|
|
const valueMajorType = axisProps.getMajorTickMark();
|
|
const valueMinorType = axisProps.getMinorTickMark();
|
|
|
|
const defineCurrentTickOption = (elemType) => tickOptions.find(elem => elem.value === elemType);
|
|
const [currentMajorType, setMajorType] = useState(defineCurrentTickOption(valueMajorType));
|
|
const [currentMinorType, setMinorType] = useState(defineCurrentTickOption(valueMinorType));
|
|
|
|
const defineLabelsPosition = () => verticalAxisLabelsPosition.find(elem => elem.value === axisProps.getTickLabelsPos());
|
|
const [currentLabelsPosition, setLabelsPosition] = useState(defineLabelsPosition());
|
|
|
|
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);
|
|
|
|
if ((!props.storeFocusObjects.chartObject || props.storeFocusObjects.focusOn === 'cell') && Device.phone) {
|
|
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Page>
|
|
<Navbar title={_t.textAxisOptions} backLink={_t.textBack}>
|
|
{Device.phone &&
|
|
<NavRight>
|
|
<Link icon='icon-expand-down' sheetClose></Link>
|
|
</NavRight>
|
|
}
|
|
</Navbar>
|
|
<List inlineLabels className="inputs-list">
|
|
<ListInput
|
|
label={_t.textMinimumValue}
|
|
type="number"
|
|
placeholder="Auto"
|
|
value={minValue}
|
|
onChange={e => props.onVerAxisMinValue(e.target.value)}
|
|
onInput={e => setMinValue(e.target.value)}
|
|
className={isIos ? 'list-input-right' : ''}
|
|
/>
|
|
|
|
<ListInput
|
|
label={_t.textMaximumValue}
|
|
type="number"
|
|
placeholder="Auto"
|
|
value={maxValue}
|
|
onChange={e => props.onVerAxisMaxValue(e.target.value)}
|
|
onInput={e => setMaxValue(e.target.value)}
|
|
className={isIos ? 'list-input-right' : ''}
|
|
/>
|
|
</List>
|
|
<List inlineLabels className="inputs-list">
|
|
<ListItem title={_t.textAxisCrosses} link="/edit-vert-axis-crosses/" after={currentAxisCrosses.display} routeProps={{
|
|
axisCrosses,
|
|
onVerAxisCrossType: props.onVerAxisCrossType,
|
|
currentAxisCrosses,
|
|
setAxisCrosses
|
|
}}></ListItem>
|
|
{currentAxisCrosses.value == Asc.c_oAscCrossesRule.value ? (
|
|
<ListInput
|
|
label={_t.textCrossesValue}
|
|
type="number"
|
|
placeholder="0"
|
|
value={crossesValue}
|
|
onChange={e => props.onVerAxisCrossValue(e.target.value)}
|
|
onInput={e => setCrossesValue(e.target.value)}
|
|
className={isIos ? 'list-input-right' : ''}
|
|
/>
|
|
) : null}
|
|
</List>
|
|
<List>
|
|
<ListItem title={_t.textDisplayUnits} link="/edit-display-units/" after={currentDisplayUnits.display} routeProps={{
|
|
vertAxisDisplayUnits,
|
|
onVerAxisDisplayUnits: props.onVerAxisDisplayUnits,
|
|
currentDisplayUnits,
|
|
setDisplayUnits
|
|
}}></ListItem>
|
|
<ListItem title={_t.textValuesInReverseOrder}>
|
|
<div slot="after">
|
|
<Toggle checked={valuesReverseOrder}
|
|
onChange={() => {
|
|
toggleValuesReverseOrder(!valuesReverseOrder);
|
|
props.onVerAxisReverse(!valuesReverseOrder);
|
|
}} />
|
|
</div>
|
|
</ListItem>
|
|
</List>
|
|
<BlockTitle>{_t.textTickOptions}</BlockTitle>
|
|
<List>
|
|
<ListItem title={_t.textMajorType} after={currentMajorType.display} link="/edit-vert-major-type/" routeProps={{
|
|
tickOptions,
|
|
onVerAxisTickMajor: props.onVerAxisTickMajor,
|
|
currentMajorType,
|
|
setMajorType
|
|
}}></ListItem>
|
|
<ListItem title={_t.textMinorType} after={currentMinorType.display} link="/edit-vert-minor-type/" routeProps={{
|
|
tickOptions,
|
|
onVerAxisTickMinor: props.onVerAxisTickMinor,
|
|
currentMinorType,
|
|
setMinorType
|
|
}}></ListItem>
|
|
</List>
|
|
<BlockTitle>{_t.textLabelOptions}</BlockTitle>
|
|
<List>
|
|
<ListItem title={_t.textLabelPosition} after={currentLabelsPosition.display} link="/edit-vert-label-position/" routeProps={{
|
|
verticalAxisLabelsPosition,
|
|
onVerAxisLabelPos: props.onVerAxisLabelPos,
|
|
currentLabelsPosition,
|
|
setLabelsPosition
|
|
}}></ListItem>
|
|
</List>
|
|
</Page>
|
|
)
|
|
}
|
|
|
|
const PageVertAxisCrosses = props => {
|
|
const { t } = useTranslation();
|
|
const _t = t('View.Edit', {returnObjects: true});
|
|
const axisCrosses = props.axisCrosses;
|
|
const [currentAxisCrosses, setAxisCrosses] = useState(props.currentAxisCrosses);
|
|
|
|
return (
|
|
<Page>
|
|
<Navbar title={_t.textAxisCrosses} backLink={_t.textBack}>
|
|
{Device.phone &&
|
|
<NavRight>
|
|
<Link icon='icon-expand-down' sheetClose></Link>
|
|
</NavRight>
|
|
}
|
|
</Navbar>
|
|
<List>
|
|
{axisCrosses.map((elem, index) => {
|
|
return (
|
|
<ListItem title={elem.display} key={index} radio
|
|
checked={currentAxisCrosses.value === elem.value}
|
|
onChange={() => {
|
|
props.setAxisCrosses(elem);
|
|
setAxisCrosses(elem);
|
|
props.onVerAxisCrossType(elem.value);
|
|
props.f7router.back();
|
|
}}>
|
|
</ListItem>
|
|
)
|
|
})}
|
|
</List>
|
|
</Page>
|
|
)
|
|
}
|
|
|
|
const PageDisplayUnits = props => {
|
|
const { t } = useTranslation();
|
|
const _t = t('View.Edit', {returnObjects: true});
|
|
const vertAxisDisplayUnits = props.vertAxisDisplayUnits;
|
|
const [currentDisplayUnits, setDisplayUnits] = useState(props.currentDisplayUnits);
|
|
|
|
return (
|
|
<Page>
|
|
<Navbar title={_t.textDisplayUnits} backLink={_t.textBack}>
|
|
{Device.phone &&
|
|
<NavRight>
|
|
<Link icon='icon-expand-down' sheetClose></Link>
|
|
</NavRight>
|
|
}
|
|
</Navbar>
|
|
<List>
|
|
{vertAxisDisplayUnits.map((elem, index) => {
|
|
return (
|
|
<ListItem title={elem.display} key={index} radio
|
|
checked={currentDisplayUnits.value === elem.value}
|
|
onChange={() => {
|
|
props.setDisplayUnits(elem);
|
|
setDisplayUnits(elem);
|
|
props.onVerAxisDisplayUnits(elem.value);
|
|
props.f7router.back();
|
|
}}>
|
|
</ListItem>
|
|
)
|
|
})}
|
|
</List>
|
|
</Page>
|
|
)
|
|
}
|
|
|
|
const PageVertMajorType = props => {
|
|
const { t } = useTranslation();
|
|
const _t = t('View.Edit', {returnObjects: true});
|
|
const [currentMajorType, setMajorType] = useState(props.currentMajorType);
|
|
const tickOptions = props.tickOptions;
|
|
|
|
return (
|
|
<Page>
|
|
<Navbar title={_t.textMajorType} backLink={_t.textBack}>
|
|
{Device.phone &&
|
|
<NavRight>
|
|
<Link icon='icon-expand-down' sheetClose></Link>
|
|
</NavRight>
|
|
}
|
|
</Navbar>
|
|
<List>
|
|
{tickOptions.map((elem, index) => {
|
|
return (
|
|
<ListItem title={elem.display} key={index} radio
|
|
checked={currentMajorType.value === elem.value}
|
|
onChange={() => {
|
|
props.setMajorType(elem);
|
|
setMajorType(elem);
|
|
props.onVerAxisTickMajor(elem.value);
|
|
props.f7router.back();
|
|
}}>
|
|
</ListItem>
|
|
)
|
|
})}
|
|
</List>
|
|
</Page>
|
|
)
|
|
}
|
|
|
|
const PageVertMinorType = props => {
|
|
const { t } = useTranslation();
|
|
const _t = t('View.Edit', {returnObjects: true});
|
|
const [currentMinorType, setMinorType] = useState(props.currentMinorType);
|
|
const tickOptions = props.tickOptions;
|
|
|
|
return (
|
|
<Page>
|
|
<Navbar title={_t.textMinorType} backLink={_t.textBack}>
|
|
{Device.phone &&
|
|
<NavRight>
|
|
<Link icon='icon-expand-down' sheetClose></Link>
|
|
</NavRight>
|
|
}
|
|
</Navbar>
|
|
<List>
|
|
{tickOptions.map((elem, index) => {
|
|
return (
|
|
<ListItem title={elem.display} key={index} radio
|
|
checked={currentMinorType.value === elem.value}
|
|
onChange={() => {
|
|
props.setMinorType(elem);
|
|
setMinorType(elem);
|
|
props.onVerAxisTickMinor(elem.value);
|
|
props.f7router.back();
|
|
}}>
|
|
</ListItem>
|
|
)
|
|
})}
|
|
</List>
|
|
</Page>
|
|
)
|
|
}
|
|
|
|
const PageVertLabelPosition = props => {
|
|
const { t } = useTranslation();
|
|
const _t = t('View.Edit', {returnObjects: true});
|
|
const [currentLabelsPosition, setLabelsPosition] = useState(props.currentLabelsPosition);
|
|
const verticalAxisLabelsPosition = props.verticalAxisLabelsPosition;
|
|
|
|
return (
|
|
<Page>
|
|
<Navbar title={_t.textLabelPosition} backLink={_t.textBack}>
|
|
{Device.phone &&
|
|
<NavRight>
|
|
<Link icon='icon-expand-down' sheetClose></Link>
|
|
</NavRight>
|
|
}
|
|
</Navbar>
|
|
<List>
|
|
{verticalAxisLabelsPosition.map((elem, index) => {
|
|
return (
|
|
<ListItem title={elem.display} key={index} radio
|
|
checked={currentLabelsPosition.value === elem.value}
|
|
onChange={() => {
|
|
props.setLabelsPosition(elem);
|
|
setLabelsPosition(elem);
|
|
props.onVerAxisLabelPos(elem.value);
|
|
props.f7router.back();
|
|
}}>
|
|
</ListItem>
|
|
)
|
|
})}
|
|
</List>
|
|
</Page>
|
|
)
|
|
}
|
|
|
|
const PageHorizontalAxis = props => {
|
|
const { t } = useTranslation();
|
|
const _t = t('View.Edit', {returnObjects: true});
|
|
const api = Common.EditorApi.get();
|
|
const isIos = Device.ios;
|
|
const chartProperty = api.asc_getChartObject(true);
|
|
const horAxisProps = chartProperty.getHorAxisProps();
|
|
const axisProps = (horAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? chartProperty.getVertAxisProps() : horAxisProps;
|
|
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, setAxisCrosses] = useState(defineCurrentAxisCrosses());
|
|
|
|
const defineAxisPosition = () => horAxisPosition.find(elem => elem.value === axisProps.getLabelsPosition());
|
|
const [axisPosition, setAxisPosition] = useState(defineAxisPosition());
|
|
|
|
const [valuesReverseOrder, toggleValuesReverseOrder] = useState(axisProps.getInvertCatOrder());
|
|
|
|
const valueMajorType = axisProps.getMajorTickMark();
|
|
const valueMinorType = axisProps.getMinorTickMark();
|
|
|
|
const defineCurrentTickOption = (elemType) => tickOptions.find(elem => elem.value === elemType);
|
|
|
|
const [currentMajorType, setMajorType] = useState(defineCurrentTickOption(valueMajorType));
|
|
const [currentMinorType, setMinorType] = useState(defineCurrentTickOption(valueMinorType));
|
|
|
|
const defineLabelsPosition = () => horAxisLabelsPosition.find(elem => elem.value === axisProps.getTickLabelsPos());
|
|
const [currentLabelsPosition, setLabelsPosition] = useState(defineLabelsPosition());
|
|
|
|
const currentCrossesValue = axisProps.getCrosses();
|
|
const [crossesValue, setCrossesValue] = useState(!currentCrossesValue ? '' : currentCrossesValue);
|
|
|
|
if ((!props.storeFocusObjects.chartObject || props.storeFocusObjects.focusOn === 'cell') && Device.phone) {
|
|
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Page>
|
|
<Navbar title={_t.textAxisOptions} backLink={_t.textBack}>
|
|
{Device.phone &&
|
|
<NavRight>
|
|
<Link icon='icon-expand-down' sheetClose></Link>
|
|
</NavRight>
|
|
}
|
|
</Navbar>
|
|
<List inlineLabels className="inputs-list">
|
|
<ListItem title={_t.textAxisCrosses} link="/edit-hor-axis-crosses/" after={currentAxisCrosses.display} routeProps={{
|
|
axisCrosses,
|
|
onHorAxisCrossType: props.onHorAxisCrossType,
|
|
currentAxisCrosses,
|
|
setAxisCrosses
|
|
}}></ListItem>
|
|
{currentAxisCrosses.value == Asc.c_oAscCrossesRule.value ? (
|
|
<ListInput
|
|
label={_t.textCrossesValue}
|
|
type="number"
|
|
placeholder="0"
|
|
value={crossesValue}
|
|
onChange={e => props.onHorAxisCrossValue(e.target.value)}
|
|
onInput={e => setCrossesValue(e.target.value)}
|
|
className={isIos ? 'list-input-right' : ''}
|
|
/>
|
|
) : null}
|
|
</List>
|
|
<List>
|
|
{!props.disableAxisPos ?
|
|
<ListItem title={_t.textAxisPosition} link="/edit-hor-axis-position/" after={axisPosition.display} routeProps={{
|
|
horAxisPosition,
|
|
onHorAxisPos: props.onHorAxisPos,
|
|
axisPosition,
|
|
setAxisPosition
|
|
}}></ListItem>
|
|
: null}
|
|
<ListItem title={_t.textValuesInReverseOrder}>
|
|
<div slot="after">
|
|
<Toggle checked={valuesReverseOrder}
|
|
onChange={() => {
|
|
toggleValuesReverseOrder(!valuesReverseOrder);
|
|
props.onHorAxisReverse(!valuesReverseOrder);
|
|
}} />
|
|
</div>
|
|
</ListItem>
|
|
</List>
|
|
<BlockTitle>{_t.textTickOptions}</BlockTitle>
|
|
<List>
|
|
<ListItem title={_t.textMajorType} after={currentMajorType.display} link="/edit-hor-major-type/" routeProps={{
|
|
tickOptions,
|
|
onHorAxisTickMajor: props.onHorAxisTickMajor,
|
|
currentMajorType,
|
|
setMajorType
|
|
}}></ListItem>
|
|
<ListItem title={_t.textMinorType} after={currentMinorType.display} link="/edit-hor-minor-type/" routeProps={{
|
|
tickOptions,
|
|
onHorAxisTickMinor: props.onHorAxisTickMinor,
|
|
currentMinorType,
|
|
setMinorType
|
|
}}></ListItem>
|
|
</List>
|
|
<BlockTitle>{_t.textLabelOptions}</BlockTitle>
|
|
<List>
|
|
<ListItem title={_t.textLabelPosition} after={currentLabelsPosition.display} link="/edit-hor-label-position/" routeProps={{
|
|
horAxisLabelsPosition,
|
|
onHorAxisLabelPos: props.onHorAxisLabelPos,
|
|
currentLabelsPosition,
|
|
setLabelsPosition
|
|
}}></ListItem>
|
|
</List>
|
|
</Page>
|
|
)
|
|
}
|
|
|
|
const PageHorAxisCrosses = props => {
|
|
const { t } = useTranslation();
|
|
const _t = t('View.Edit', {returnObjects: true});
|
|
const [currentAxisCrosses, setAxisCrosses] = useState(props.currentAxisCrosses);
|
|
const axisCrosses = props.axisCrosses;
|
|
|
|
return (
|
|
<Page>
|
|
<Navbar title={_t.textAxisCrosses} backLink={_t.textBack}>
|
|
{Device.phone &&
|
|
<NavRight>
|
|
<Link icon='icon-expand-down' sheetClose></Link>
|
|
</NavRight>
|
|
}
|
|
</Navbar>
|
|
<List>
|
|
{axisCrosses.map((elem, index) => {
|
|
return (
|
|
<ListItem title={elem.display} key={index} radio
|
|
checked={currentAxisCrosses.value === elem.value}
|
|
onChange={() => {
|
|
props.setAxisCrosses(elem);
|
|
setAxisCrosses(elem);
|
|
props.onHorAxisCrossType(elem.value);
|
|
props.f7router.back();
|
|
}}>
|
|
</ListItem>
|
|
)
|
|
})}
|
|
</List>
|
|
</Page>
|
|
)
|
|
}
|
|
|
|
const PageHorAxisPosition = props => {
|
|
const { t } = useTranslation();
|
|
const _t = t('View.Edit', {returnObjects: true});
|
|
const [axisPosition, setAxisPosition] = useState(props.axisPosition);
|
|
const horAxisPosition = props.horAxisPosition;
|
|
|
|
return (
|
|
<Page>
|
|
<Navbar title={_t.textAxisPosition} backLink={_t.textBack}>
|
|
{Device.phone &&
|
|
<NavRight>
|
|
<Link icon='icon-expand-down' sheetClose></Link>
|
|
</NavRight>
|
|
}
|
|
</Navbar>
|
|
<List>
|
|
{horAxisPosition.map((elem, index) => {
|
|
return (
|
|
<ListItem title={elem.display} key={index} radio
|
|
checked={axisPosition.value === elem.value}
|
|
onChange={() => {
|
|
props.setAxisPosition(elem);
|
|
setAxisPosition(elem);
|
|
props.onHorAxisPos(elem.value);
|
|
props.f7router.back();
|
|
}}>
|
|
</ListItem>
|
|
)
|
|
})}
|
|
</List>
|
|
</Page>
|
|
)
|
|
}
|
|
|
|
const PageHorMajorType = props => {
|
|
const { t } = useTranslation();
|
|
const _t = t('View.Edit', {returnObjects: true});
|
|
const [currentMajorType, setMajorType] = useState(props.currentMajorType);
|
|
const tickOptions = props.tickOptions;
|
|
|
|
return (
|
|
<Page>
|
|
<Navbar title={_t.textMajorType} backLink={_t.textBack}>
|
|
{Device.phone &&
|
|
<NavRight>
|
|
<Link icon='icon-expand-down' sheetClose></Link>
|
|
</NavRight>
|
|
}
|
|
</Navbar>
|
|
<List>
|
|
{tickOptions.map((elem, index) => {
|
|
return (
|
|
<ListItem title={elem.display} key={index} radio
|
|
checked={currentMajorType.value === elem.value}
|
|
onChange={() => {
|
|
props.setMajorType(elem);
|
|
setMajorType(elem);
|
|
props.onHorAxisTickMajor(elem.value);
|
|
props.f7router.back();
|
|
}}>
|
|
</ListItem>
|
|
)
|
|
})}
|
|
</List>
|
|
</Page>
|
|
)
|
|
}
|
|
|
|
const PageHorMinorType = props => {
|
|
const { t } = useTranslation();
|
|
const _t = t('View.Edit', {returnObjects: true});
|
|
const [currentMinorType, setMinorType] = useState(props.currentMinorType);
|
|
const tickOptions = props.tickOptions;
|
|
|
|
return (
|
|
<Page>
|
|
<Navbar title={_t.textMinorType} backLink={_t.textBack}>
|
|
{Device.phone &&
|
|
<NavRight>
|
|
<Link icon='icon-expand-down' sheetClose></Link>
|
|
</NavRight>
|
|
}
|
|
</Navbar>
|
|
<List>
|
|
{tickOptions.map((elem, index) => {
|
|
return (
|
|
<ListItem title={elem.display} key={index} radio
|
|
checked={currentMinorType.value === elem.value}
|
|
onChange={() => {
|
|
props.setMinorType(elem);
|
|
setMinorType(elem);
|
|
props.onHorAxisTickMinor(elem.value);
|
|
props.f7router.back();
|
|
}}>
|
|
</ListItem>
|
|
)
|
|
})}
|
|
</List>
|
|
</Page>
|
|
)
|
|
}
|
|
|
|
const PageHorLabelPosition = props => {
|
|
const { t } = useTranslation();
|
|
const _t = t('View.Edit', {returnObjects: true});
|
|
const [currentLabelsPosition, setLabelsPosition] = useState(props.currentLabelsPosition);
|
|
const horAxisLabelsPosition = props.horAxisLabelsPosition;
|
|
|
|
return (
|
|
<Page>
|
|
<Navbar title={_t.textLabelPosition} backLink={_t.textBack}>
|
|
{Device.phone &&
|
|
<NavRight>
|
|
<Link icon='icon-expand-down' sheetClose></Link>
|
|
</NavRight>
|
|
}
|
|
</Navbar>
|
|
<List>
|
|
{horAxisLabelsPosition.map((elem, index) => {
|
|
return (
|
|
<ListItem title={elem.display} key={index} radio
|
|
checked={currentLabelsPosition.value === elem.value}
|
|
onChange={() => {
|
|
props.setLabelsPosition(elem);
|
|
setLabelsPosition(elem);
|
|
props.onHorAxisLabelPos(elem.value);
|
|
props.f7router.back();
|
|
}}>
|
|
</ListItem>
|
|
)
|
|
})}
|
|
</List>
|
|
</Page>
|
|
)
|
|
}
|
|
|
|
const EditChart = props => {
|
|
const { t } = useTranslation();
|
|
const _t = t('View.Edit', {returnObjects: true});
|
|
const storeFocusObjects = props.storeFocusObjects;
|
|
const chartProperties = storeFocusObjects.chartObject && storeFocusObjects.chartObject.get_ChartProperties();
|
|
const chartType = chartProperties && chartProperties.getType();
|
|
|
|
const disableEditAxis = (
|
|
chartType == Asc.c_oAscChartTypeSettings.pie ||
|
|
chartType == Asc.c_oAscChartTypeSettings.doughnut ||
|
|
chartType == Asc.c_oAscChartTypeSettings.pie3d
|
|
);
|
|
|
|
const disableAxisPos = (
|
|
chartType == Asc.c_oAscChartTypeSettings.barNormal3d ||
|
|
chartType == Asc.c_oAscChartTypeSettings.barStacked3d ||
|
|
chartType == Asc.c_oAscChartTypeSettings.barStackedPer3d ||
|
|
chartType == Asc.c_oAscChartTypeSettings.hBarNormal3d ||
|
|
chartType == Asc.c_oAscChartTypeSettings.hBarStacked3d ||
|
|
chartType == Asc.c_oAscChartTypeSettings.hBarStackedPer3d ||
|
|
chartType == Asc.c_oAscChartTypeSettings.barNormal3dPerspective
|
|
);
|
|
|
|
const needReverse = (
|
|
chartType == Asc.c_oAscChartTypeSettings.hBarNormal ||
|
|
chartType == Asc.c_oAscChartTypeSettings.hBarStacked ||
|
|
chartType == Asc.c_oAscChartTypeSettings.hBarStackedPer ||
|
|
chartType == Asc.c_oAscChartTypeSettings.hBarNormal3d ||
|
|
chartType == Asc.c_oAscChartTypeSettings.hBarStacked3d ||
|
|
chartType == Asc.c_oAscChartTypeSettings.hBarStackedPer3d
|
|
);
|
|
|
|
return (
|
|
<Fragment>
|
|
<List>
|
|
<ListItem title={_t.textDesign} link='/edit-chart-style/' routeProps={{
|
|
onType: props.onType,
|
|
onStyle: props.onStyle,
|
|
onFillColor: props.onFillColor,
|
|
onBorderColor: props.onBorderColor,
|
|
onBorderSize: props.onBorderSize
|
|
}}></ListItem>
|
|
<ListItem title={_t.textLayout} link='/edit-chart-layout/' routeProps={{
|
|
disableEditAxis,
|
|
setLayoutProperty: props.setLayoutProperty,
|
|
initChartLayout: props.initChartLayout
|
|
}}></ListItem>
|
|
<ListItem title={_t.textVerticalAxis} link={needReverse ? '/edit-chart-horizontal-axis/' : '/edit-chart-vertical-axis/'} disabled={disableEditAxis} routeProps={needReverse ? {
|
|
onHorAxisCrossType: props.onHorAxisCrossType,
|
|
onHorAxisCrossValue: props.onHorAxisCrossValue,
|
|
onHorAxisPos: props.onHorAxisPos,
|
|
onHorAxisReverse: props.onHorAxisReverse,
|
|
onHorAxisTickMajor: props.onHorAxisTickMajor,
|
|
onHorAxisTickMinor: props.onHorAxisTickMinor,
|
|
onHorAxisLabelPos: props.onHorAxisLabelPos,
|
|
disableAxisPos,
|
|
needReverse
|
|
} : {
|
|
onVerAxisMinValue: props.onVerAxisMinValue,
|
|
onVerAxisMaxValue: props.onVerAxisMaxValue,
|
|
onVerAxisCrossType: props.onVerAxisCrossType,
|
|
onVerAxisCrossValue: props.onVerAxisCrossValue,
|
|
onVerAxisDisplayUnits: props.onVerAxisDisplayUnits,
|
|
onVerAxisReverse: props.onVerAxisReverse,
|
|
onVerAxisTickMajor: props.onVerAxisTickMajor,
|
|
onVerAxisTickMinor: props.onVerAxisTickMinor,
|
|
onVerAxisLabelPos: props.onVerAxisLabelPos
|
|
}}></ListItem>
|
|
<ListItem title={_t.textHorizontalAxis} link={needReverse || chartType == Asc.c_oAscChartTypeSettings.scatter ? '/edit-chart-vertical-axis/' : '/edit-chart-horizontal-axis/'} disabled={disableEditAxis} routeProps={needReverse || chartType == Asc.c_oAscChartTypeSettings.scatter ? {
|
|
onVerAxisMinValue: props.onVerAxisMinValue,
|
|
onVerAxisMaxValue: props.onVerAxisMaxValue,
|
|
onVerAxisCrossType: props.onVerAxisCrossType,
|
|
onVerAxisCrossValue: props.onVerAxisCrossValue,
|
|
onVerAxisDisplayUnits: props.onVerAxisDisplayUnits,
|
|
onVerAxisReverse: props.onVerAxisReverse,
|
|
onVerAxisTickMajor: props.onVerAxisTickMajor,
|
|
onVerAxisTickMinor: props.onVerAxisTickMinor,
|
|
onVerAxisLabelPos: props.onVerAxisLabelPos
|
|
} : {
|
|
onHorAxisCrossType: props.onHorAxisCrossType,
|
|
onHorAxisCrossValue: props.onHorAxisCrossValue,
|
|
onHorAxisPos: props.onHorAxisPos,
|
|
onHorAxisReverse: props.onHorAxisReverse,
|
|
onHorAxisTickMajor: props.onHorAxisTickMajor,
|
|
onHorAxisTickMinor: props.onHorAxisTickMinor,
|
|
onHorAxisLabelPos: props.onHorAxisLabelPos,
|
|
disableAxisPos,
|
|
needReverse
|
|
}}></ListItem>
|
|
<ListItem title={_t.textReorder} link='/edit-chart-reorder/' routeProps={{
|
|
onReorder: props.onReorder
|
|
}}></ListItem>
|
|
</List>
|
|
<List className="buttons-list">
|
|
<ListButton title={_t.textRemoveChart} onClick={() => {props.onRemoveChart()}} className='button-red button-fill button-raised'/>
|
|
</List>
|
|
</Fragment>
|
|
)
|
|
};
|
|
|
|
const PageEditChart = inject("storeFocusObjects")(observer(EditChart));
|
|
const PageChartStyle = inject("storeChartSettings", "storeFocusObjects")(observer(PageStyle));
|
|
const PageChartCustomFillColor = inject("storeChartSettings", "storePalette")(observer(PageCustomFillColor));
|
|
const PageChartBorderColor = inject("storeChartSettings", "storePalette")(observer(PageBorderColor));
|
|
const PageChartCustomBorderColor = inject("storeChartSettings", "storePalette")(observer(PageCustomBorderColor));
|
|
const PageChartLayout = inject("storeFocusObjects")(observer(PageLayout));
|
|
const PageChartVerticalAxis = inject("storeFocusObjects")(observer(PageVerticalAxis));
|
|
const PageChartHorizontalAxis = inject("storeFocusObjects")(observer(PageHorizontalAxis));
|
|
const PageChartReorder = inject("storeFocusObjects")(observer(PageReorder));
|
|
|
|
export {
|
|
PageEditChart as EditChart,
|
|
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
|
|
} |