| 1 |
/** |
| 2 |
* WordPress dependencies |
| 3 |
*/ |
| 4 |
const { __ } = wp.i18n; |
| 5 |
|
| 6 |
const { |
| 7 |
Component, |
| 8 |
Fragment |
| 9 |
} = wp.element; |
| 10 |
|
| 11 |
const { ColorPalette } = wp.blockEditor || wp.editor; |
| 12 |
|
| 13 |
const { |
| 14 |
BaseControl, |
| 15 |
CheckboxControl, |
| 16 |
PanelBody, |
| 17 |
SelectControl, |
| 18 |
TextControl |
| 19 |
} = wp.components; |
| 20 |
|
| 21 |
class LayoutAndChartArea extends Component { |
| 22 |
constructor() { |
| 23 |
super( ...arguments ); |
| 24 |
} |
| 25 |
|
| 26 |
render() { |
| 27 |
|
| 28 |
const type = this.props.chart['visualizer-chart-type']; |
| 29 |
|
| 30 |
const settings = this.props.chart['visualizer-settings']; |
| 31 |
|
| 32 |
return ( |
| 33 |
<PanelBody |
| 34 |
title={ __( 'Layout And Chart Area' ) } |
| 35 |
initialOpen={ false } |
| 36 |
className="visualizer-advanced-panel" |
| 37 |
> |
| 38 |
|
| 39 |
<PanelBody |
| 40 |
title={ __( 'Layout' ) } |
| 41 |
className="visualizer-inner-sections" |
| 42 |
initialOpen={ false } |
| 43 |
> |
| 44 |
|
| 45 |
<TextControl |
| 46 |
label={ __( 'Width of Chart' ) } |
| 47 |
help={ __( 'Determines the total width of the chart.' ) } |
| 48 |
value={ settings.width } |
| 49 |
onChange={ e => { |
| 50 |
settings.width = e; |
| 51 |
this.props.edit( settings ); |
| 52 |
} } |
| 53 |
/> |
| 54 |
|
| 55 |
<TextControl |
| 56 |
label={ __( 'Height of Chart' ) } |
| 57 |
help={ __( 'Determines the total height of the chart.' ) } |
| 58 |
value={ settings.height } |
| 59 |
onChange={ e => { |
| 60 |
settings.height = e; |
| 61 |
this.props.edit( settings ); |
| 62 |
} } |
| 63 |
/> |
| 64 |
|
| 65 |
{ ( 0 <= [ 'geo' ].indexOf( type ) ) && ( |
| 66 |
|
| 67 |
<SelectControl |
| 68 |
label={ __( 'Keep Aspect Ratio' ) } |
| 69 |
help={ __( 'If yes, the map will be drawn at the largest size that can fit inside the chart area at its natural aspect ratio. If only one of the width and height options is specified, the other one will be calculated according to the aspect ratio. If no, the map will be stretched to the exact size of the chart as specified by the width and height options.' ) } |
| 70 |
value={ settings.keepAspectRatio ? settings.isStacked : '1' } |
| 71 |
options={ [ |
| 72 |
{ label: __( 'Yes' ), value: '1' }, |
| 73 |
{ label: __( 'No' ), value: '0' } |
| 74 |
] } |
| 75 |
onChange={ e => { |
| 76 |
settings.keepAspectRatio = e; |
| 77 |
this.props.edit( settings ); |
| 78 |
} } |
| 79 |
/> |
| 80 |
|
| 81 |
) } |
| 82 |
|
| 83 |
{ ( -1 >= [ 'gauge', 'tabular' ].indexOf( type ) ) && ( |
| 84 |
|
| 85 |
<Fragment> |
| 86 |
|
| 87 |
<TextControl |
| 88 |
label={ __( 'Stroke Width' ) } |
| 89 |
help={ __( 'The chart border width in pixels.' ) } |
| 90 |
value={ settings.backgroundColor.strokeWidth } |
| 91 |
onChange={ e => { |
| 92 |
settings.backgroundColor.strokeWidth = e; |
| 93 |
this.props.edit( settings ); |
| 94 |
} } |
| 95 |
/> |
| 96 |
|
| 97 |
<BaseControl |
| 98 |
label={ __( 'Stroke Color' ) } |
| 99 |
> |
| 100 |
<ColorPalette |
| 101 |
value={ settings.backgroundColor.stroke } |
| 102 |
onChange={ e => { |
| 103 |
settings.backgroundColor.stroke = e; |
| 104 |
this.props.edit( settings ); |
| 105 |
} } |
| 106 |
/> |
| 107 |
</BaseControl> |
| 108 |
|
| 109 |
<BaseControl |
| 110 |
label={ __( 'Background Color' ) } |
| 111 |
> |
| 112 |
<ColorPalette |
| 113 |
value={ settings.backgroundColor.fill } |
| 114 |
onChange={ e => { |
| 115 |
settings.backgroundColor.fill = e; |
| 116 |
this.props.edit( settings ); |
| 117 |
} } |
| 118 |
/> |
| 119 |
</BaseControl> |
| 120 |
|
| 121 |
<CheckboxControl |
| 122 |
label={ __( 'Transparent Background?' ) } |
| 123 |
checked={ 'transparent' === settings.backgroundColor.fill } |
| 124 |
onChange={ e => { |
| 125 |
settings.backgroundColor.fill = ( 'transparent' === settings.backgroundColor.fill ? '' : 'transparent' ); |
| 126 |
this.props.edit( settings ); |
| 127 |
} } |
| 128 |
/> |
| 129 |
|
| 130 |
</Fragment> |
| 131 |
|
| 132 |
) } |
| 133 |
|
| 134 |
</PanelBody> |
| 135 |
|
| 136 |
{ ( -1 >= [ 'geo', 'gauge', 'tabular' ].indexOf( type ) ) && ( |
| 137 |
|
| 138 |
<PanelBody |
| 139 |
title={ __( 'Chart Area' ) } |
| 140 |
className="visualizer-inner-sections" |
| 141 |
initialOpen={ false } |
| 142 |
> |
| 143 |
|
| 144 |
<TextControl |
| 145 |
label={ __( 'Left Margin' ) } |
| 146 |
help={ __( 'Determines how far to draw the chart from the left border.' ) } |
| 147 |
value={ settings.chartArea.left } |
| 148 |
onChange={ e => { |
| 149 |
settings.chartArea.left = e; |
| 150 |
this.props.edit( settings ); |
| 151 |
} } |
| 152 |
/> |
| 153 |
|
| 154 |
<TextControl |
| 155 |
label={ __( 'Top Margin' ) } |
| 156 |
help={ __( 'Determines how far to draw the chart from the top border.' ) } |
| 157 |
value={ settings.chartArea.top } |
| 158 |
onChange={ e => { |
| 159 |
settings.chartArea.top = e; |
| 160 |
this.props.edit( settings ); |
| 161 |
} } |
| 162 |
/> |
| 163 |
|
| 164 |
<TextControl |
| 165 |
label={ __( 'Width Of Chart Area' ) } |
| 166 |
help={ __( 'Determines the width of the chart area.' ) } |
| 167 |
value={ settings.chartArea.width } |
| 168 |
onChange={ e => { |
| 169 |
settings.chartArea.width = e; |
| 170 |
this.props.edit( settings ); |
| 171 |
} } |
| 172 |
/> |
| 173 |
|
| 174 |
<TextControl |
| 175 |
label={ __( 'Height Of Chart Area' ) } |
| 176 |
help={ __( 'Determines the hight of the chart area.' ) } |
| 177 |
value={ settings.chartArea.height } |
| 178 |
onChange={ e => { |
| 179 |
settings.chartArea.height = e; |
| 180 |
this.props.edit( settings ); |
| 181 |
} } |
| 182 |
/> |
| 183 |
|
| 184 |
</PanelBody> |
| 185 |
|
| 186 |
) } |
| 187 |
|
| 188 |
</PanelBody> |
| 189 |
); |
| 190 |
} |
| 191 |
} |
| 192 |
|
| 193 |
export default LayoutAndChartArea; |
| 194 |
|
