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

[DE mobile] Added style settings for chart object

Browse source
This commit is contained in:
JuliaSvinareva 2021-01-18 20:41:29 +03:00
parent 3dad63735f
commit 157fde006d
8 changed files with 524 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
apps/common/mobile/resources/less/common-ios.less
View file

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

31
apps/common/mobile/resources/less/common.less
View file

@ -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;

3
apps/documenteditor/mobile/locale/en.json
View file

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

10
apps/documenteditor/mobile/src/controller/Main.jsx
View file

@ -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;

98
apps/documenteditor/mobile/src/controller/edit/EditChart.jsx
View file

@ -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));

131
apps/documenteditor/mobile/src/store/chartSettings.js
View file

@ -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)];
}
}
}
}

18
apps/documenteditor/mobile/src/view/edit/Edit.jsx
View file

@ -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,
}
];

236
apps/documenteditor/mobile/src/view/edit/EditChart.jsx
View file

@ -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}