[DE mobile] Added style settings for chart object

apps/common/mobile/resources/less/common-ios.less

@@ -336,4 +336,10 @@
             margin-top: 20px;
         }
     }
+
+    .dataview {
+        &.page-content {
+            background-color: @white;
+        }
+    }
 }

apps/common/mobile/resources/less/common.less

@@ -45,6 +45,37 @@
     }
 }
 
+.chart-types {
+    width: 100%;
+    .row {
+        padding: 0 10px;
+    }
+    li {
+        width: 60px;
+        height: 60px;
+        margin: 6px;
+
+        .thumb {
+            width: 100%;
+            height: 100%;
+            background-size: contain;
+        }
+    }
+}
+
+.chart-styles {
+    .row {
+        li {
+            margin: 0;
+            padding: 1px;
+        }
+        img {
+            width: 50px;
+            height: 50px;
+        }
+    }
+}
+
 .segmented {
     .decrement, .increment {
         text-overflow: clip;

apps/documenteditor/mobile/locale/en.json

@@ -188,7 +188,8 @@
     "textBandedRow": "Banded Row",
     "textFirstColumn": "First Column",
     "textLastColumn": "Last Column",
-    "textBandedColumn": "Banded Column"
+    "textBandedColumn": "Banded Column",
+    "textType": "Type"
   },
   "Add": {
     "textTable": "Table",

apps/documenteditor/mobile/src/controller/Main.jsx

@@ -6,7 +6,7 @@ import { withTranslation } from 'react-i18next';
 import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx';
 import { onAdvancedOptions } from './settings/Download.jsx';
 
-@inject("storeAppOptions", "storeDocumentSettings", "storeFocusObjects", "storeTextSettings", "storeParagraphSettings", "storeTableSettings", "storeDocumentInfo")
+@inject("storeAppOptions", "storeDocumentSettings", "storeFocusObjects", "storeTextSettings", "storeParagraphSettings", "storeTableSettings", "storeDocumentInfo", "storeChartSettings")
 class MainController extends Component {
     constructor(props) {
         super(props)
@@ -263,6 +263,14 @@ class MainController extends Component {
             storeTableSettings.initTableTemplates(templates);
         });
 
+        //chart settings
+        const storeChartSettings = this.props.storeChartSettings;
+        this.api.asc_registerCallback('asc_onUpdateChartStyles', () => {
+            if (storeFocusObjects.chartObject && storeFocusObjects.chartObject.get_ChartProperties()) {
+                storeChartSettings.updateChartStyles(this.api.asc_getChartPreviews(storeFocusObjects.chartObject.get_ChartProperties().getType()));
+            }
+        });
+
         // Document Info
 
         const storeDocumentInfo = this.props.storeDocumentInfo;

apps/documenteditor/mobile/src/controller/edit/EditChart.jsx

@@ -9,6 +9,13 @@ class EditChartController extends Component {
     constructor (props) {
         super(props);
         this.onWrapType = this.onWrapType.bind(this);
+        this.onType = this.onType.bind(this);
+        this.onStyle = this.onStyle.bind(this);
+        this.onBorderColor = this.onBorderColor.bind(this);
+        this.onBorderSize = this.onBorderSize.bind(this);
+
+        const api = Common.EditorApi.get();
+        props.storeChartSettings.updateChartStyles(api.asc_getChartPreviews(props.storeFocusObjects.chartObject.get_ChartProperties().getType()));
     }
 
     onRemoveChart () {
@@ -97,6 +104,90 @@ class EditChartController extends Component {
         }
     }
 
+    onStyle (style) {
+        const api = Common.EditorApi.get();
+        const image = new Asc.asc_CImgProperty();
+        const chart = this.props.storeFocusObjects.chartObject.get_ChartProperties();
+        chart.putStyle(style);
+        image.put_ChartProperties(chart);
+        api.ImgApply(image);
+    }
+
+    onType (type) {
+        const api = Common.EditorApi.get();
+        const image = new Asc.asc_CImgProperty();
+        const chart = this.props.storeFocusObjects.chartObject.get_ChartProperties();
+        chart.changeType(type);
+        image.put_ChartProperties(chart);
+        api.ImgApply(image);
+        // Force update styles
+        this.props.storeChartSettings.updateChartStyles(api.asc_getChartPreviews(chart.getType()));
+    }
+
+    onFillColor (color) {
+        const api = Common.EditorApi.get();
+        const image = new Asc.asc_CImgProperty();
+        const shape = new Asc.asc_CShapeProperty();
+        const fill = new Asc.asc_CShapeFill();
+        if (color == 'transparent') {
+            fill.put_type(Asc.c_oAscFill.FILL_TYPE_NOFILL);
+            fill.put_fill(null);
+        } else {
+            fill.put_type(Asc.c_oAscFill.FILL_TYPE_SOLID);
+            fill.put_fill(new Asc.asc_CFillSolid());
+            fill.get_fill().put_color(Common.Utils.ThemeColor.getRgbColor(color));
+        }
+        shape.put_fill(fill);
+        image.put_ShapeProperties(shape);
+        api.ImgApply(image);
+    }
+
+    onBorderColor (color) {
+        const api = Common.EditorApi.get();
+        const currentShape = this.props.storeFocusObjects.shapeObject.get_ShapeProperties();
+        const image = new Asc.asc_CImgProperty();
+        const shape = new Asc.asc_CShapeProperty();
+        const stroke = new Asc.asc_CStroke();
+        if (currentShape.get_stroke().get_width() < 0.01) {
+            stroke.put_type(Asc.c_oAscStrokeType.STROKE_NONE);
+        } else {
+            stroke.put_type(Asc.c_oAscStrokeType.STROKE_COLOR);
+            stroke.put_color(Common.Utils.ThemeColor.getRgbColor(color));
+            stroke.put_width(currentShape.get_stroke().get_width());
+            stroke.asc_putPrstDash(currentShape.get_stroke().asc_getPrstDash());
+        }
+        shape.put_stroke(stroke);
+        image.put_ShapeProperties(shape);
+        api.ImgApply(image);
+    }
+
+    onBorderSize (value) {
+        const api = Common.EditorApi.get();
+
+        const image = new Asc.asc_CImgProperty();
+        const shape = new Asc.asc_CShapeProperty();
+        const stroke = new Asc.asc_CStroke();
+
+        const _borderColor = this.props.storeChartSettings.borderColor;
+
+        if (value < 0.01) {
+            stroke.put_type(Asc.c_oAscStrokeType.STROKE_NONE);
+        } else {
+            stroke.put_type(Asc.c_oAscStrokeType.STROKE_COLOR);
+            if (_borderColor == 'transparent')
+                stroke.put_color(Common.Utils.ThemeColor.getRgbColor({color: '000000', effectId: 29}));
+            else
+                stroke.put_color(Common.Utils.ThemeColor.getRgbColor(Common.Utils.ThemeColor.colorValue2EffectId(_borderColor)));
+            stroke.put_width(value * 25.4 / 72.0);
+        }
+
+        shape.put_stroke(stroke);
+        image.put_ShapeProperties(shape);
+
+        api.ImgApply(image);
+        this.props.storeChartSettings.initBorderColor(this.props.storeFocusObjects.shapeObject.get_ShapeProperties().get_stroke()); // when select STROKE_NONE or change from STROKE_NONE to STROKE_COLOR
+    }
+
     render () {
         return (
             <EditChart onRemoveChart={this.onRemoveChart}
@@ -106,9 +197,14 @@ class EditChartController extends Component {
                        onOverlap={this.onOverlap}
                        onWrapDistance={this.onWrapDistance}
                        onReorder={this.onReorder}
+                       onStyle={this.onStyle}
+                       onType={this.onType}
+                       onFillColor={this.onFillColor}
+                       onBorderColor={this.onBorderColor}
+                       onBorderSize={this.onBorderSize}
             />
         )
     }
 }
 
-export default inject("storeChartSettings")(observer(EditChartController));
+export default inject("storeChartSettings", "storeFocusObjects")(observer(EditChartController));

apps/documenteditor/mobile/src/store/chartSettings.js

@@ -54,4 +54,135 @@ export class storeChartSettings {
     getWrapDistance (chartObject) {
         return chartObject.get_Paddings().get_Top();
     }
+
+    // style
+    @observable chartStyles;
+    @action updateChartStyles (styles) {
+        this.chartStyles = styles;
+    }
+    @computed get styles () {
+        const widthContainer = document.querySelector(".page-content").clientWidth;
+        const columns = parseInt(widthContainer / 70); // magic
+        let row = -1;
+        const styles = [];
+        this.chartStyles.forEach((style, index) => {
+            if (0 == index % columns) {
+                styles.push([]);
+                row++
+            }
+            styles[row].push(style);
+        });
+        return styles;
+    }
+    @computed get types () {
+        const types = [
+            { type: Asc.c_oAscChartTypeSettings.barNormal,               thumb: 'chart-03.png'},
+            { type: Asc.c_oAscChartTypeSettings.barStacked,              thumb: 'chart-02.png'},
+            { type: Asc.c_oAscChartTypeSettings.barStackedPer,           thumb: 'chart-01.png'},
+            { type: Asc.c_oAscChartTypeSettings.lineNormal,              thumb: 'chart-06.png'},
+            { type: Asc.c_oAscChartTypeSettings.lineStacked,             thumb: 'chart-05.png'},
+            { type: Asc.c_oAscChartTypeSettings.lineStackedPer,          thumb: 'chart-04.png'},
+            { type: Asc.c_oAscChartTypeSettings.hBarNormal,              thumb: 'chart-09.png'},
+            { type: Asc.c_oAscChartTypeSettings.hBarStacked,             thumb: 'chart-08.png'},
+            { type: Asc.c_oAscChartTypeSettings.hBarStackedPer,          thumb: 'chart-07.png'},
+            { type: Asc.c_oAscChartTypeSettings.areaNormal,              thumb: 'chart-12.png'},
+            { type: Asc.c_oAscChartTypeSettings.areaStacked,             thumb: 'chart-11.png'},
+            { type: Asc.c_oAscChartTypeSettings.areaStackedPer,          thumb: 'chart-10.png'},
+            { type: Asc.c_oAscChartTypeSettings.pie,                     thumb: 'chart-13.png'},
+            { type: Asc.c_oAscChartTypeSettings.doughnut,                thumb: 'chart-14.png'},
+            { type: Asc.c_oAscChartTypeSettings.pie3d,                   thumb: 'chart-22.png'},
+            { type: Asc.c_oAscChartTypeSettings.scatter,                 thumb: 'chart-15.png'},
+            { type: Asc.c_oAscChartTypeSettings.stock,                   thumb: 'chart-16.png'},
+            { type: Asc.c_oAscChartTypeSettings.line3d,                  thumb: 'chart-21.png'},
+            { type: Asc.c_oAscChartTypeSettings.barNormal3d,             thumb: 'chart-17.png'},
+            { type: Asc.c_oAscChartTypeSettings.barStacked3d,            thumb: 'chart-18.png'},
+            { type: Asc.c_oAscChartTypeSettings.barStackedPer3d,         thumb: 'chart-19.png'},
+            { type: Asc.c_oAscChartTypeSettings.hBarNormal3d,            thumb: 'chart-25.png'},
+            { type: Asc.c_oAscChartTypeSettings.hBarStacked3d,           thumb: 'chart-24.png'},
+            { type: Asc.c_oAscChartTypeSettings.hBarStackedPer3d,        thumb: 'chart-23.png'},
+            { type: Asc.c_oAscChartTypeSettings.barNormal3dPerspective,  thumb: 'chart-20.png'}
+        ];
+        const columns = 3;
+        const arr = [];
+        let row = -1;
+        types.forEach((type, index) => {
+            if (0 == index % columns) {
+                arr.push([]);
+                row++
+            }
+            arr[row].push(type);
+        });
+        return arr;
+    }
+
+    // Fill Color
+    @observable fillColor = undefined;
+    setFillColor (color) {
+        this.fillColor = color;
+    }
+    getFillColor (shapeProperties) {
+        let fill = shapeProperties.get_fill();
+        const fillType = fill.get_type();
+        let color = 'transparent';
+        if (fillType == Asc.c_oAscFill.FILL_TYPE_SOLID) {
+            fill = fill.get_fill();
+            const sdkColor = fill.get_color();
+            if (sdkColor) {
+                if (sdkColor.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
+                    color = {color: Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b()), effectValue: sdkColor.get_value()};
+                } else {
+                    color = Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b());
+                }
+            }
+        }
+        this.fillColor = color;
+        return color;
+    }
+
+    // Border size and border color
+    @observable borderColor;
+    setBorderColor (color) {
+        this.borderColor = color;
+    }
+    initBorderColor (stroke) {
+        let color = 'transparent';
+        if (stroke && stroke.get_type() == Asc.c_oAscStrokeType.STROKE_COLOR) {
+            const sdkColor = stroke.get_color();
+            if (sdkColor) {
+                if (sdkColor.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
+                    color = {color: Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b()), effectValue: sdkColor.get_value()};
+                }
+                else {
+                    color = Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b());
+                }
+            }
+        }
+        this.borderColor = color;
+        return color;
+    }
+    borderSizeTransform () {
+        const _sizes = [0, 0.5, 1, 1.5, 2.25, 3, 4.5, 6];
+
+        return {
+            sizeByIndex: function (index) {
+                if (index < 1) return _sizes[0];
+                if (index > _sizes.length - 1) return _sizes[_sizes.length - 1];
+                return _sizes[index];
+            },
+
+            indexSizeByValue: function (value) {
+                let index = 0;
+                _sizes.forEach((size, idx) => {
+                    if (Math.abs(size - value) < 0.25) {
+                        index = idx;
+                    }
+                });
+                return index;
+            },
+
+            sizeByValue: function (value) {
+                return _sizes[this.indexSizeByValue(value)];
+            }
+        }
+    }
 }

apps/documenteditor/mobile/src/view/edit/Edit.jsx

@@ -19,7 +19,7 @@ import {ParagraphAdvSettings, PageParagraphBackColor, PageParagraphCustomColor}
 import {PageShapeStyleNoFill, PageShapeStyle, PageShapeCustomFillColor, PageShapeBorderColor, PageShapeCustomBorderColor, PageWrap, PageReorder, PageReplace} from "./EditShape";
 import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} from "./EditImage";
 import {PageTableOptions, PageTableWrap, PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor} from "./EditTable";
-import {PageChartWrap, PageChartReorder} from "./EditChart";
+import {PageChartStyle, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartWrap, PageChartReorder} from "./EditChart";
 
 const routes = [
     //Edit text
@@ -159,6 +159,22 @@ const routes = [
     {
         path: '/edit-chart-reorder/',
         component: PageChartReorder,
+    },
+    {
+        path: '/edit-chart-style/',
+        component: PageChartStyle,
+    },
+    {
+        path: '/edit-chart-custom-fill-color/',
+        component: PageChartCustomFillColor,
+    },
+    {
+        path: '/edit-chart-border-color/',
+        component: PageChartBorderColor,
+    },
+    {
+        path: '/edit-chart-custom-border-color/',
+        component: PageChartCustomBorderColor,
     }
 ];
 

apps/documenteditor/mobile/src/view/edit/EditChart.jsx

@@ -1,13 +1,224 @@
 import React, {Fragment, useState} from 'react';
 import {observer, inject} from "mobx-react";
-import {List, ListItem, ListButton, Icon, Row, Col, Button, Page, Navbar, Segmented, BlockTitle, Toggle, Range} from 'framework7-react';
+import {List, ListItem, ListButton, Icon, Row, Page, Navbar, 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('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} />
+            <CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor}/>
+        </Page>
+    )
+};
+
+const PaletteFill = inject("storeFocusObjects", "storeChartSettings", "storePalette")(observer(props => {
+    const { t } = useTranslation();
+    const _t = t('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/');
+        }
+    };
+    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('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} />
+            <CustomColorPicker currentColor={borderColor} onAddNewColor={onAddNewColor}/>
+        </Page>
+    )
+};
+
+const PageBorderColor = props => {
+    const { t } = useTranslation();
+    const _t = t('Edit', {returnObjects: true});
+    const borderColor = props.storeChartSettings.borderColor;
+    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.onBorderColor(newColor);
+                props.storeChartSettings.setBorderColor(newColor);
+            } else {
+                props.onBorderColor(color);
+                props.storeChartSettings.setBorderColor(color);
+            }
+        } else {
+            // open custom color menu
+            props.f7router.navigate('/edit-chart-custom-border-color/');
+        }
+    };
+    return(
+        <Page>
+            <Navbar title={_t.textColor} backLink={_t.textBack} />
+            <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('Edit', {returnObjects: true});
+    const storeChartSettings = props.storeChartSettings;
+    const chartProperties = props.storeFocusObjects.chartObject.get_ChartProperties();
+
+    const types = storeChartSettings.types;
+    const curType = chartProperties.getType();
+
+    const styles = storeChartSettings.styles;
+
+    const shapeObject = props.storeFocusObjects.shapeObject;
+    const shapeStroke = shapeObject.get_ShapeProperties().get_stroke();
+
+    // Init border size
+    const borderSizeTransform = storeChartSettings.borderSizeTransform();
+    const borderSize = shapeStroke.get_width() * 72.0 / 25.4;
+    const borderType = shapeStroke.get_type();
+    const displayBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE) ? 0 : borderSizeTransform.indexSizeByValue(borderSize);
+    const displayTextBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE) ? 0 : borderSizeTransform.sizeByValue(borderSize);
+    const [stateBorderSize, setBorderSize] = useState(displayBorderSize);
+    const [stateTextBorderSize, setTextBorderSize] = useState(displayTextBorderSize);
+
+    // Init border color
+    const borderColor = !storeChartSettings.borderColor ? storeChartSettings.initBorderColor(shapeStroke) : storeChartSettings.borderColor;
+    const displayBorderColor = borderColor !== 'transparent' ? `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}` : borderColor;
+
     return (
         <Page>
-
+            <Navbar backLink={_t.textBack}>
+                <div className="tab-buttons tabbar">
+                    <Link key={"de-link-chart-type"}  tabLink={"#edit-chart-type"} tabLinkActive={true}>{_t.textType}</Link>
+                    <Link key={"de-link-chart-style"}  tabLink={"#edit-chart-style"}>{_t.textStyle}</Link>
+                    <Link key={"de-link-chart-fill"}  tabLink={"#edit-chart-fill"}>{_t.textFill}</Link>
+                    <Link key={"de-link-chart-border"}  tabLink={"#edit-chart-border"}>{_t.textBorder}</Link>
+                </div>
+            </Navbar>
+            <Tabs animated>
+                <Tab key={"de-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'}
+                                                     style={{backgroundImage: `url('resources/img/charts/${type.thumb}')`}}>
+                                                </div>
+                                            </li>
+                                        )
+                                    })}
+                                </ul>
+                            )
+                        })}
+                    </div>
+                </Tab>
+                <Tab key={"de-tab-chart-style"} id={"edit-chart-style"} className="page-content no-padding-top dataview">
+                    <div className={'chart-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>
+                </Tab>
+                <Tab key={"de-tab-chart-fill"} id={"edit-chart-fill"} className="page-content no-padding-top">
+                    <PaletteFill onFillColor={props.onFillColor}/>
+                </Tab>
+                <Tab key={"de-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>
     )
 };
@@ -136,7 +347,13 @@ const EditChart = props => {
     return (
         <Fragment>
             <List>
-                <ListItem title={_t.textStyle}></ListItem>
+                <ListItem title={_t.textStyle} link='/edit-chart-style/' routeProps={{
+                    onType: props.onType,
+                    onStyle: props.onStyle,
+                    onFillColor: props.onFillColor,
+                    onBorderColor: props.onBorderColor,
+                    onBorderSize: props.onBorderSize
+                }}></ListItem>
                 <ListItem title={_t.textWrap} link='/edit-chart-wrap/' routeProps={{
                     onWrapType: props.onWrapType,
                     onAlign: props.onAlign,
@@ -155,7 +372,16 @@ const EditChart = props => {
     )
 };
 
-const PageChartStyle = inject("storeFocusObjects")(observer(PageStyle));
+const PageChartStyle = inject("storeChartSettings", "storeFocusObjects")(observer(PageStyle));
 const PageChartWrap = inject("storeChartSettings", "storeFocusObjects")(observer(PageWrap));
+const PageChartCustomFillColor = inject("storeChartSettings", "storePalette")(observer(PageCustomFillColor));
+const PageChartBorderColor = inject("storeChartSettings", "storePalette")(observer(PageBorderColor));
+const PageChartCustomBorderColor = inject("storeChartSettings", "storePalette")(observer(PageCustomBorderColor));
 
-export {EditChart, PageChartStyle, PageChartWrap, PageReorder as PageChartReorder}
+export {EditChart,
+        PageChartStyle,
+        PageChartCustomFillColor,
+        PageChartBorderColor,
+        PageChartCustomBorderColor,
+        PageChartWrap,
+        PageReorder as PageChartReorder}