| 1 |
/** |
| 2 |
* WordPress dependencies |
| 3 |
*/ |
| 4 |
const { __ } = wp.i18n; |
| 5 |
|
| 6 |
const { Component } = wp.element; |
| 7 |
|
| 8 |
const { ColorPalette } = wp.blockEditor || wp.editor; |
| 9 |
|
| 10 |
const { |
| 11 |
BaseControl, |
| 12 |
PanelBody, |
| 13 |
SelectControl, |
| 14 |
TextControl |
| 15 |
} = wp.components; |
| 16 |
|
| 17 |
class CandlesSettings extends Component { |
| 18 |
constructor() { |
| 19 |
super( ...arguments ); |
| 20 |
} |
| 21 |
|
| 22 |
render() { |
| 23 |
|
| 24 |
const settings = this.props.chart['visualizer-settings']; |
| 25 |
|
| 26 |
return ( |
| 27 |
<PanelBody |
| 28 |
title={ __( 'Candles Settings' ) } |
| 29 |
initialOpen={ false } |
| 30 |
className="visualizer-advanced-panel" |
| 31 |
> |
| 32 |
|
| 33 |
<PanelBody |
| 34 |
title={ __( 'General Settings' ) } |
| 35 |
className="visualizer-inner-sections" |
| 36 |
initialOpen={ false } |
| 37 |
> |
| 38 |
|
| 39 |
<SelectControl |
| 40 |
label={ __( 'Focus Target' ) } |
| 41 |
help={ __( 'The type of the entity that receives focus on mouse hover. Also affects which entity is selected by mouse click.' ) } |
| 42 |
value={ settings.focusTarget ? settings.focusTarget : 'datum' } |
| 43 |
options={ [ |
| 44 |
{ label: __( 'Focus on a single data point.' ), value: 'datum' }, |
| 45 |
{ label: __( 'Focus on a grouping of all data points along the major axis.' ), value: 'category' } |
| 46 |
] } |
| 47 |
onChange={ e => { |
| 48 |
settings.focusTarget = e; |
| 49 |
this.props.edit( settings ); |
| 50 |
} } |
| 51 |
/> |
| 52 |
|
| 53 |
<SelectControl |
| 54 |
label={ __( 'Selection Mode' ) } |
| 55 |
help={ __( 'Determines how many data points an user can select on a chart.' ) } |
| 56 |
value={ settings.selectionMode ? settings.selectionMode : 'single' } |
| 57 |
options={ [ |
| 58 |
{ label: __( 'Single data point' ), value: 'single' }, |
| 59 |
{ label: __( 'Multiple data points' ), value: 'multiple' } |
| 60 |
] } |
| 61 |
onChange={ e => { |
| 62 |
settings.selectionMode = e; |
| 63 |
this.props.edit( settings ); |
| 64 |
} } |
| 65 |
/> |
| 66 |
|
| 67 |
<SelectControl |
| 68 |
label={ __( 'Aggregation Target' ) } |
| 69 |
help={ __( 'Determines how multiple data selections are rolled up into tooltips. To make it working you need to set multiple selection mode and tooltip trigger to display it when an user selects an element.' ) } |
| 70 |
value={ settings.aggregationTarget ? settings.aggregationTarget : 'auto' } |
| 71 |
options={ [ |
| 72 |
{ label: __( 'Group selected data by x-value' ), value: 'category' }, |
| 73 |
{ label: __( 'Group selected data by series' ), value: 'series' }, |
| 74 |
{ label: __( 'Group selected data by x-value if all selections have the same x-value, and by series otherwise' ), value: 'auto' }, |
| 75 |
{ label: __( 'Show only one tooltip per selection' ), value: 'none' } |
| 76 |
] } |
| 77 |
onChange={ e => { |
| 78 |
settings.aggregationTarget = e; |
| 79 |
this.props.edit( settings ); |
| 80 |
} } |
| 81 |
/> |
| 82 |
|
| 83 |
</PanelBody> |
| 84 |
|
| 85 |
<PanelBody |
| 86 |
title={ __( 'Failing Candles' ) } |
| 87 |
className="visualizer-inner-sections" |
| 88 |
initialOpen={ false } |
| 89 |
> |
| 90 |
|
| 91 |
<TextControl |
| 92 |
label={ __( 'Stroke Width' ) } |
| 93 |
help={ __( 'The stroke width of falling candles.' ) } |
| 94 |
value={ settings.candlestick.fallingColor.strokeWidth } |
| 95 |
onChange={ e => { |
| 96 |
settings.candlestick.fallingColor.strokeWidth = e; |
| 97 |
this.props.edit( settings ); |
| 98 |
} } |
| 99 |
/> |
| 100 |
|
| 101 |
<BaseControl |
| 102 |
label={ __( 'Stroke Color' ) } |
| 103 |
> |
| 104 |
<ColorPalette |
| 105 |
value={ settings.candlestick.fallingColor.stroke } |
| 106 |
onChange={ e => { |
| 107 |
settings.candlestick.fallingColor.stroke = e; |
| 108 |
this.props.edit( settings ); |
| 109 |
} } |
| 110 |
/> |
| 111 |
</BaseControl> |
| 112 |
|
| 113 |
<BaseControl |
| 114 |
label={ __( 'Fill Color' ) } |
| 115 |
> |
| 116 |
<ColorPalette |
| 117 |
value={ settings.candlestick.fallingColor.fill } |
| 118 |
onChange={ e => { |
| 119 |
settings.candlestick.fallingColor.fill = e; |
| 120 |
this.props.edit( settings ); |
| 121 |
} } |
| 122 |
/> |
| 123 |
</BaseControl> |
| 124 |
|
| 125 |
</PanelBody> |
| 126 |
|
| 127 |
<PanelBody |
| 128 |
title={ __( 'Rising Candles' ) } |
| 129 |
className="visualizer-inner-sections" |
| 130 |
initialOpen={ false } |
| 131 |
> |
| 132 |
|
| 133 |
<TextControl |
| 134 |
label={ __( 'Stroke Width' ) } |
| 135 |
help={ __( 'The stroke width of rising candles.' ) } |
| 136 |
value={ settings.candlestick.risingColor.strokeWidth } |
| 137 |
onChange={ e => { |
| 138 |
settings.candlestick.risingColor.strokeWidth = e; |
| 139 |
this.props.edit( settings ); |
| 140 |
} } |
| 141 |
/> |
| 142 |
|
| 143 |
<BaseControl |
| 144 |
label={ __( 'Stroke Color' ) } |
| 145 |
> |
| 146 |
<ColorPalette |
| 147 |
value={ settings.candlestick.risingColor.stroke } |
| 148 |
onChange={ e => { |
| 149 |
settings.candlestick.risingColor.stroke = e; |
| 150 |
this.props.edit( settings ); |
| 151 |
} } |
| 152 |
/> |
| 153 |
</BaseControl> |
| 154 |
|
| 155 |
<BaseControl |
| 156 |
label={ __( 'Fill Color' ) } |
| 157 |
> |
| 158 |
<ColorPalette |
| 159 |
value={ settings.candlestick.risingColor.fill } |
| 160 |
onChange={ e => { |
| 161 |
settings.candlestick.risingColor.fill = e; |
| 162 |
this.props.edit( settings ); |
| 163 |
} } |
| 164 |
/> |
| 165 |
</BaseControl> |
| 166 |
|
| 167 |
</PanelBody> |
| 168 |
|
| 169 |
</PanelBody> |
| 170 |
); |
| 171 |
} |
| 172 |
} |
| 173 |
|
| 174 |
export default CandlesSettings; |
| 175 |
|
